@reach/alert-dialog - npm Package Compare versions

Comparing version 0.2.3 to 0.2.4

es/index.js

@@ -5,55 +5,49 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-import React, { createContext, forwardRef } from "react";
+import React, { createContext } from "react";
 import Component from "@reach/component-component";
 import { DialogOverlay, DialogContent } from "@reach/dialog";
-import { Consumer as IdConsumer } from "@reach/utils/lib/IdContext";
+import { useId } from "@reach/auto-id";
 import invariant from "invariant";
-import { func, bool, node } from "prop-types";
+import { func, bool, node, object, oneOfType } from "prop-types";
 
 var AlertDialogContext = createContext();
 
-var AlertDialogOverlay = function AlertDialogOverlay(_ref) {
+function AlertDialogOverlay(_ref) {
   var leastDestructiveRef = _ref.leastDestructiveRef,
       props = _objectWithoutProperties(_ref, ["leastDestructiveRef"]);
 
+  var labelId = useId();
+  var descriptionId = useId();
   return React.createElement(
-    IdConsumer,
-    null,
-    function (genId) {
+    Component,
+    {
+      getRefs: function getRefs() {
+        return {
+          labelId: "alert-dialog-" + labelId,
+          descriptionId: "alert-dialog-" + descriptionId,
+          leastDestructiveRef: leastDestructiveRef
+        };
+      }
+    },
+    function (_ref2) {
+      var refs = _ref2.refs;
       return React.createElement(
-        Component,
-        {
-          getRefs: function getRefs() {
-            return {
-              labelId: "alert-dialog-" + genId(),
-              descriptionId: "alert-dialog-" + genId(),
-              leastDestructiveRef: leastDestructiveRef
-            };
-          }
-        },
-        function (_ref2) {
-          var refs = _ref2.refs;
-          return React.createElement(
-            AlertDialogContext.Provider,
-            { value: refs },
-            React.createElement(DialogOverlay, _extends({
-              "data-reach-alert-dialog-overlay": true,
-              initialFocusRef: leastDestructiveRef
-            }, props))
-          );
-        }
+        AlertDialogContext.Provider,
+        { value: refs },
+        React.createElement(DialogOverlay, _extends({
+          "data-reach-alert-dialog-overlay": true,
+          initialFocusRef: leastDestructiveRef
+        }, props))
       );
     }
   );
-};
+}
 
-var alertDialogPropTypes = {
+process.env.NODE_ENV !== "production" ? AlertDialogOverlay.propTypes = {
   isOpen: bool,
   onDismiss: func,
-  leastDestructiveRef: func,
+  leastDestructiveRef: oneOfType([func, object]),
   children: node
-};
+} : void 0;
 
-AlertDialogOverlay.propType = alertDialogPropTypes;
-
 var AlertDialogContent = function AlertDialogContent(_ref3) {
@@ -125,4 +119,9 @@ var children = _ref3.children,
 
-AlertDialog.propType = alertDialogPropTypes;
+process.env.NODE_ENV !== "production" ? AlertDialog.propTypes = {
+  isOpen: bool,
+  onDismiss: func,
+  leastDestructiveRef: func,
+  children: node
+} : void 0;
 
 export { AlertDialog, AlertDialogLabel, AlertDialogDescription, AlertDialogOverlay, AlertDialogContent };

index.js

@@ -18,3 +18,3 @@ "use strict";
 
-var _IdContext = require("@reach/utils/lib/IdContext");
+var _autoId = require("@reach/auto-id");
 
@@ -33,46 +33,40 @@ var _invariant = require("invariant");
 
-var AlertDialogOverlay = function AlertDialogOverlay(_ref) {
+function AlertDialogOverlay(_ref) {
   var leastDestructiveRef = _ref.leastDestructiveRef,
       props = _objectWithoutProperties(_ref, ["leastDestructiveRef"]);
 
+  var labelId = (0, _autoId.useId)();
+  var descriptionId = (0, _autoId.useId)();
   return _react2.default.createElement(
-    _IdContext.Consumer,
-    null,
-    function (genId) {
+    _componentComponent2.default,
+    {
+      getRefs: function getRefs() {
+        return {
+          labelId: "alert-dialog-" + labelId,
+          descriptionId: "alert-dialog-" + descriptionId,
+          leastDestructiveRef: leastDestructiveRef
+        };
+      }
+    },
+    function (_ref2) {
+      var refs = _ref2.refs;
       return _react2.default.createElement(
-        _componentComponent2.default,
-        {
-          getRefs: function getRefs() {
-            return {
-              labelId: "alert-dialog-" + genId(),
-              descriptionId: "alert-dialog-" + genId(),
-              leastDestructiveRef: leastDestructiveRef
-            };
-          }
-        },
-        function (_ref2) {
-          var refs = _ref2.refs;
-          return _react2.default.createElement(
-            AlertDialogContext.Provider,
-            { value: refs },
-            _react2.default.createElement(_dialog.DialogOverlay, _extends({
-              "data-reach-alert-dialog-overlay": true,
-              initialFocusRef: leastDestructiveRef
-            }, props))
-          );
-        }
+        AlertDialogContext.Provider,
+        { value: refs },
+        _react2.default.createElement(_dialog.DialogOverlay, _extends({
+          "data-reach-alert-dialog-overlay": true,
+          initialFocusRef: leastDestructiveRef
+        }, props))
       );
     }
   );
-};
+}
 
-var alertDialogPropTypes = {
+process.env.NODE_ENV !== "production" ? AlertDialogOverlay.propTypes = {
   isOpen: _propTypes.bool,
   onDismiss: _propTypes.func,
-  leastDestructiveRef: _propTypes.func,
+  leastDestructiveRef: (0, _propTypes.oneOfType)([_propTypes.func, _propTypes.object]),
   children: _propTypes.node
-};
+} : void 0;
 
-AlertDialogOverlay.propType = alertDialogPropTypes;
-
 var AlertDialogContent = function AlertDialogContent(_ref3) {
@@ -144,3 +138,8 @@ var children = _ref3.children,
 
-AlertDialog.propType = alertDialogPropTypes;
+process.env.NODE_ENV !== "production" ? AlertDialog.propTypes = {
+  isOpen: _propTypes.bool,
+  onDismiss: _propTypes.func,
+  leastDestructiveRef: _propTypes.func,
+  children: _propTypes.node
+} : void 0;
 
@@ -147,0 +146,0 @@ exports.AlertDialog = AlertDialog;

package.json

 {
   "name": "@reach/alert-dialog",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Accessible React Alert Dialog.",
@@ -15,10 +15,11 @@ "author": "Ryan Florence <@ryanflorence>",
   "dependencies": {
+    "@reach/auto-id": "0.2.0",
     "@reach/component-component": "^0.1.3",
-    "@reach/dialog": "^0.2.3",
-    "@reach/utils": "^0.2.0",
+    "@reach/dialog": "^0.2.4",
+    "@reach/utils": "^0.2.1",
     "invariant": "^2.2.4"
   },
   "peerDependencies": {
-    "react": "^16.4.0",
-    "react-dom": "^16.4.0"
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
   },
@@ -25,0 +26,0 @@ "devDependencies": {

src/index.js

@@ -1,43 +0,41 @@
-import React, { createContext, forwardRef } from "react";
+import React, { createContext } from "react";
 import Component from "@reach/component-component";
 import { DialogOverlay, DialogContent } from "@reach/dialog";
-import { Consumer as IdConsumer } from "@reach/utils/lib/IdContext";
+import { useId } from "@reach/auto-id";
 import invariant from "invariant";
-import { func, bool, node } from "prop-types";
+import { func, bool, node, object, oneOfType } from "prop-types";
 
 let AlertDialogContext = createContext();
 
-let AlertDialogOverlay = ({ leastDestructiveRef, ...props }) => (
-  <IdConsumer>
-    {genId => (
-      <Component
-        getRefs={() => ({
-          labelId: `alert-dialog-${genId()}`,
-          descriptionId: `alert-dialog-${genId()}`,
-          leastDestructiveRef
-        })}
-      >
-        {({ refs }) => (
-          <AlertDialogContext.Provider value={refs}>
-            <DialogOverlay
-              data-reach-alert-dialog-overlay
-              initialFocusRef={leastDestructiveRef}
-              {...props}
-            />
-          </AlertDialogContext.Provider>
-        )}
-      </Component>
-    )}
-  </IdConsumer>
-);
+function AlertDialogOverlay({ leastDestructiveRef, ...props }) {
+  const labelId = useId();
+  const descriptionId = useId();
+  return (
+    <Component
+      getRefs={() => ({
+        labelId: `alert-dialog-${labelId}`,
+        descriptionId: `alert-dialog-${descriptionId}`,
+        leastDestructiveRef
+      })}
+    >
+      {({ refs }) => (
+        <AlertDialogContext.Provider value={refs}>
+          <DialogOverlay
+            data-reach-alert-dialog-overlay
+            initialFocusRef={leastDestructiveRef}
+            {...props}
+          />
+        </AlertDialogContext.Provider>
+      )}
+    </Component>
+  );
+}
 
-let alertDialogPropTypes = {
+AlertDialogOverlay.propTypes = {
   isOpen: bool,
   onDismiss: func,
-  leastDestructiveRef: func,
+  leastDestructiveRef: oneOfType([func, object]),
   children: node
 };
 
-AlertDialogOverlay.propType = alertDialogPropTypes;
-
 let AlertDialogContent = ({ children, ...props }) => (
@@ -99,3 +97,8 @@ <AlertDialogContext.Consumer>
 
-AlertDialog.propType = alertDialogPropTypes;
+AlertDialog.propTypes = {
+  isOpen: bool,
+  onDismiss: func,
+  leastDestructiveRef: func,
+  children: node
+};
 
@@ -102,0 +105,0 @@ export {

No alert changes

Improved metrics

Total package byte prevSize

26351

increased by88.14%

Number of package files

5

increased by25%

Lines of code

331

increased by1.22%

Worsened metrics

Dependency count

7

increased by16.67%

Number of low supply chain risk alerts

11

increased by57.14%

Dependency changes

• + Added@reach/auto-id@0.2.0

• + Added@reach/auto-id@0.2.0(transitive)

• Updated@reach/dialog@^0.2.4

• Updated@reach/utils@^0.2.1