@reach/alert-dialog - npm Package Compare versions

Comparing version 0.4.0-beta.0 to 0.4.0

es/index.js

@@ -6,3 +6,2 @@ function _extends() { _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; }; return _extends.apply(this, arguments); }
 import React, { createContext } from "react";
-import Component from "@reach/component-component";
 import { DialogOverlay, DialogContent } from "@reach/dialog";
@@ -12,27 +11,21 @@ import { useId } from "@reach/auto-id";
 import { func, bool, node, object, oneOfType } from "prop-types";
-var AlertDialogContext = createContext();
-var AlertDialogOverlay = React.forwardRef(function (_ref, forwardRef) {
+var AlertDialogContext = createContext({});
+export var AlertDialogOverlay = React.forwardRef(function AlertDialogOverlay(_ref, forwardRef) {
   var leastDestructiveRef = _ref.leastDestructiveRef,
       props = _objectWithoutPropertiesLoose(_ref, ["leastDestructiveRef"]);
 
-  var labelId = useId();
-  var descriptionId = useId();
-  return React.createElement(Component, {
-    getRefs: function getRefs() {
-      return {
-        labelId: "alert-dialog-" + labelId,
-        descriptionId: "alert-dialog-" + descriptionId,
-        leastDestructiveRef: leastDestructiveRef
-      };
+  var uid = useId();
+  var labelId = makeId("alert-dialog", uid);
+  var descriptionId = makeId("alert-dialog-description", uid);
+  return React.createElement(AlertDialogContext.Provider, {
+    value: {
+      labelId: labelId,
+      descriptionId: descriptionId,
+      leastDestructiveRef: leastDestructiveRef
     }
-  }, function (_ref2) {
-    var refs = _ref2.refs;
-    return React.createElement(AlertDialogContext.Provider, {
-      value: refs
-    }, React.createElement(DialogOverlay, _extends({
-      ref: forwardRef,
-      "data-reach-alert-dialog-overlay": true,
-      initialFocusRef: leastDestructiveRef
-    }, props)));
-  });
+  }, React.createElement(DialogOverlay, _extends({
+    ref: forwardRef,
+    "data-reach-alert-dialog-overlay": true,
+    initialFocusRef: leastDestructiveRef
+  }, props)));
 });
@@ -49,20 +42,20 @@
 
-var AlertDialogContent = React.forwardRef(function (_ref3, forwardRef) {
-  var children = _ref3.children,
-      props = _objectWithoutPropertiesLoose(_ref3, ["children"]);
+export var AlertDialogContent = React.forwardRef(function AlertDialogContent(_ref2, forwardRef) {
+  var children = _ref2.children,
+      props = _objectWithoutPropertiesLoose(_ref2, ["children"]);
 
-  return React.createElement(AlertDialogContext.Consumer, null, function (refs) {
-    return React.createElement(DialogContent, _extends({
-      ref: forwardRef,
-      "data-reach-alert-dialong-content": true,
-      role: "alertdialog",
-      "aria-labelledby": refs.labelId
-    }, props), React.createElement(Component, {
-      didMount: function didMount() {
-        !document.getElementById(refs.labelId) ? process.env.NODE_ENV !== "production" ? invariant(false, "@reach/alert-dialog: You must render a `<AlertDialogLabel>`\n              inside an `<AlertDialog/>`.") : invariant(false) : void 0;
-        !refs.leastDestructiveRef ? process.env.NODE_ENV !== "production" ? invariant(false, "@reach/alert-dialog: You must provide a `leastDestructiveRef` to\n              `<AlertDialog>` or `<AlertDialogOverlay/>`. Please see\n              https://ui.reach.tech/alert-dialog/#alertdialogoverlay-leastdestructiveref") : invariant(false) : void 0;
-      },
-      children: children
-    }));
-  });
+  var _React$useContext = React.useContext(AlertDialogContext),
+      labelId = _React$useContext.labelId,
+      leastDestructiveRef = _React$useContext.leastDestructiveRef;
+
+  React.useEffect(function () {
+    !document.getElementById(labelId) ? process.env.NODE_ENV !== "production" ? invariant(false, "@reach/alert-dialog: You must render a `<AlertDialogLabel>`\n        inside an `<AlertDialog/>`.") : invariant(false) : void 0;
+    !leastDestructiveRef ? process.env.NODE_ENV !== "production" ? invariant(false, "@reach/alert-dialog: You must provide a `leastDestructiveRef` to\n        `<AlertDialog>` or `<AlertDialogOverlay/>`. Please see\n        https://ui.reach.tech/alert-dialog/#alertdialogoverlay-leastdestructiveref") : invariant(false) : void 0;
+  }, [labelId, leastDestructiveRef]);
+  return React.createElement(DialogContent, _extends({
+    ref: forwardRef,
+    "data-reach-alert-dialong-content": true,
+    role: "alertdialog",
+    "aria-labelledby": labelId
+  }, props), children);
 });
@@ -76,28 +69,26 @@
 
-var AlertDialogLabel = function AlertDialogLabel(props) {
-  return React.createElement(AlertDialogContext.Consumer, null, function (_ref4) {
-    var labelId = _ref4.labelId;
-    return React.createElement("div", _extends({
-      id: labelId,
-      "data-reach-alert-dialog-label": true
-    }, props));
-  });
+export var AlertDialogLabel = function AlertDialogLabel(props) {
+  var _React$useContext2 = React.useContext(AlertDialogContext),
+      labelId = _React$useContext2.labelId;
+
+  return React.createElement("div", _extends({
+    id: labelId,
+    "data-reach-alert-dialog-label": true
+  }, props));
 };
+export var AlertDialogDescription = function AlertDialogDescription(props) {
+  var _React$useContext3 = React.useContext(AlertDialogContext),
+      descriptionId = _React$useContext3.descriptionId;
 
-var AlertDialogDescription = function AlertDialogDescription(props) {
-  return React.createElement(AlertDialogContext.Consumer, null, function (_ref5) {
-    var descriptionId = _ref5.descriptionId;
-    return React.createElement("div", _extends({
-      id: descriptionId,
-      "data-reach-alert-dialog-description": true
-    }, props));
-  });
+  return React.createElement("div", _extends({
+    id: descriptionId,
+    "data-reach-alert-dialog-description": true
+  }, props));
 };
+export var AlertDialog = function AlertDialog(_ref3) {
+  var isOpen = _ref3.isOpen,
+      onDismiss = _ref3.onDismiss,
+      leastDestructiveRef = _ref3.leastDestructiveRef,
+      props = _objectWithoutPropertiesLoose(_ref3, ["isOpen", "onDismiss", "leastDestructiveRef"]);
 
-var AlertDialog = function AlertDialog(_ref6) {
-  var isOpen = _ref6.isOpen,
-      onDismiss = _ref6.onDismiss,
-      leastDestructiveRef = _ref6.leastDestructiveRef,
-      props = _objectWithoutPropertiesLoose(_ref6, ["isOpen", "onDismiss", "leastDestructiveRef"]);
-
   return React.createElement(AlertDialogOverlay, {
@@ -114,7 +105,10 @@ isOpen: isOpen,
     onDismiss: func,
-    leastDestructiveRef: func,
+    leastDestructiveRef: oneOfType([func, object]),
     children: node
   };
-}
+} // TODO: Move to @reach/utils
 
-export { AlertDialog, AlertDialogLabel, AlertDialogDescription, AlertDialogOverlay, AlertDialogContent };
+
+function makeId(id, index) {
+  return id + "--" + index;
+}

index.js

 "use strict";
 
 exports.__esModule = true;
-exports.AlertDialogContent = exports.AlertDialogOverlay = exports.AlertDialogDescription = exports.AlertDialogLabel = exports.AlertDialog = void 0;
+exports.AlertDialog = exports.AlertDialogDescription = exports.AlertDialogLabel = exports.AlertDialogContent = exports.AlertDialogOverlay = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _componentComponent = _interopRequireDefault(require("@reach/component-component"));
-
 var _dialog = require("@reach/dialog");
@@ -28,28 +26,22 @@
 
-var AlertDialogContext = (0, _react.createContext)();
+var AlertDialogContext = (0, _react.createContext)({});
 
-var AlertDialogOverlay = _react["default"].forwardRef(function (_ref, forwardRef) {
+var AlertDialogOverlay = _react["default"].forwardRef(function AlertDialogOverlay(_ref, forwardRef) {
   var leastDestructiveRef = _ref.leastDestructiveRef,
       props = _objectWithoutPropertiesLoose(_ref, ["leastDestructiveRef"]);
 
-  var labelId = (0, _autoId.useId)();
-  var descriptionId = (0, _autoId.useId)();
-  return _react["default"].createElement(_componentComponent["default"], {
-    getRefs: function getRefs() {
-      return {
-        labelId: "alert-dialog-" + labelId,
-        descriptionId: "alert-dialog-" + descriptionId,
-        leastDestructiveRef: leastDestructiveRef
-      };
+  var uid = (0, _autoId.useId)();
+  var labelId = makeId("alert-dialog", uid);
+  var descriptionId = makeId("alert-dialog-description", uid);
+  return _react["default"].createElement(AlertDialogContext.Provider, {
+    value: {
+      labelId: labelId,
+      descriptionId: descriptionId,
+      leastDestructiveRef: leastDestructiveRef
     }
-  }, function (_ref2) {
-    var refs = _ref2.refs;
-    return _react["default"].createElement(AlertDialogContext.Provider, {
-      value: refs
-    }, _react["default"].createElement(_dialog.DialogOverlay, _extends({
-      ref: forwardRef,
-      "data-reach-alert-dialog-overlay": true,
-      initialFocusRef: leastDestructiveRef
-    }, props)));
-  });
+  }, _react["default"].createElement(_dialog.DialogOverlay, _extends({
+    ref: forwardRef,
+    "data-reach-alert-dialog-overlay": true,
+    initialFocusRef: leastDestructiveRef
+  }, props)));
 });
@@ -68,20 +60,21 @@
 
-var AlertDialogContent = _react["default"].forwardRef(function (_ref3, forwardRef) {
-  var children = _ref3.children,
-      props = _objectWithoutPropertiesLoose(_ref3, ["children"]);
+var AlertDialogContent = _react["default"].forwardRef(function AlertDialogContent(_ref2, forwardRef) {
+  var children = _ref2.children,
+      props = _objectWithoutPropertiesLoose(_ref2, ["children"]);
 
-  return _react["default"].createElement(AlertDialogContext.Consumer, null, function (refs) {
-    return _react["default"].createElement(_dialog.DialogContent, _extends({
-      ref: forwardRef,
-      "data-reach-alert-dialong-content": true,
-      role: "alertdialog",
-      "aria-labelledby": refs.labelId
-    }, props), _react["default"].createElement(_componentComponent["default"], {
-      didMount: function didMount() {
-        !document.getElementById(refs.labelId) ? process.env.NODE_ENV !== "production" ? (0, _invariant["default"])(false, "@reach/alert-dialog: You must render a `<AlertDialogLabel>`\n              inside an `<AlertDialog/>`.") : invariant(false) : void 0;
-        !refs.leastDestructiveRef ? process.env.NODE_ENV !== "production" ? (0, _invariant["default"])(false, "@reach/alert-dialog: You must provide a `leastDestructiveRef` to\n              `<AlertDialog>` or `<AlertDialogOverlay/>`. Please see\n              https://ui.reach.tech/alert-dialog/#alertdialogoverlay-leastdestructiveref") : invariant(false) : void 0;
-      },
-      children: children
-    }));
-  });
+  var _React$useContext = _react["default"].useContext(AlertDialogContext),
+      labelId = _React$useContext.labelId,
+      leastDestructiveRef = _React$useContext.leastDestructiveRef;
+
+  _react["default"].useEffect(function () {
+    !document.getElementById(labelId) ? process.env.NODE_ENV !== "production" ? (0, _invariant["default"])(false, "@reach/alert-dialog: You must render a `<AlertDialogLabel>`\n        inside an `<AlertDialog/>`.") : invariant(false) : void 0;
+    !leastDestructiveRef ? process.env.NODE_ENV !== "production" ? (0, _invariant["default"])(false, "@reach/alert-dialog: You must provide a `leastDestructiveRef` to\n        `<AlertDialog>` or `<AlertDialogOverlay/>`. Please see\n        https://ui.reach.tech/alert-dialog/#alertdialogoverlay-leastdestructiveref") : invariant(false) : void 0;
+  }, [labelId, leastDestructiveRef]);
+
+  return _react["default"].createElement(_dialog.DialogContent, _extends({
+    ref: forwardRef,
+    "data-reach-alert-dialong-content": true,
+    role: "alertdialog",
+    "aria-labelledby": labelId
+  }, props), children);
 });
@@ -98,9 +91,9 @@
 var AlertDialogLabel = function AlertDialogLabel(props) {
-  return _react["default"].createElement(AlertDialogContext.Consumer, null, function (_ref4) {
-    var labelId = _ref4.labelId;
-    return _react["default"].createElement("div", _extends({
-      id: labelId,
-      "data-reach-alert-dialog-label": true
-    }, props));
-  });
+  var _React$useContext2 = _react["default"].useContext(AlertDialogContext),
+      labelId = _React$useContext2.labelId;
+
+  return _react["default"].createElement("div", _extends({
+    id: labelId,
+    "data-reach-alert-dialog-label": true
+  }, props));
 };
@@ -111,9 +104,9 @@
 var AlertDialogDescription = function AlertDialogDescription(props) {
-  return _react["default"].createElement(AlertDialogContext.Consumer, null, function (_ref5) {
-    var descriptionId = _ref5.descriptionId;
-    return _react["default"].createElement("div", _extends({
-      id: descriptionId,
-      "data-reach-alert-dialog-description": true
-    }, props));
-  });
+  var _React$useContext3 = _react["default"].useContext(AlertDialogContext),
+      descriptionId = _React$useContext3.descriptionId;
+
+  return _react["default"].createElement("div", _extends({
+    id: descriptionId,
+    "data-reach-alert-dialog-description": true
+  }, props));
 };
@@ -123,7 +116,7 @@
 
-var AlertDialog = function AlertDialog(_ref6) {
-  var isOpen = _ref6.isOpen,
-      onDismiss = _ref6.onDismiss,
-      leastDestructiveRef = _ref6.leastDestructiveRef,
-      props = _objectWithoutPropertiesLoose(_ref6, ["isOpen", "onDismiss", "leastDestructiveRef"]);
+var AlertDialog = function AlertDialog(_ref3) {
+  var isOpen = _ref3.isOpen,
+      onDismiss = _ref3.onDismiss,
+      leastDestructiveRef = _ref3.leastDestructiveRef,
+      props = _objectWithoutPropertiesLoose(_ref3, ["isOpen", "onDismiss", "leastDestructiveRef"]);
 
@@ -143,5 +136,10 @@ return _react["default"].createElement(AlertDialogOverlay, {
     onDismiss: _propTypes.func,
-    leastDestructiveRef: _propTypes.func,
+    leastDestructiveRef: (0, _propTypes.oneOfType)([_propTypes.func, _propTypes.object]),
     children: _propTypes.node
   };
+} // TODO: Move to @reach/utils
+
+
+function makeId(id, index) {
+  return id + "--" + index;
 }

package.json

 {
   "name": "@reach/alert-dialog",
-  "version": "0.4.0-beta.0",
+  "version": "0.4.0",
   "description": "Accessible React Alert Dialog.",
-  "author": "Ryan Florence <@ryanflorence>",
+  "author": "React Training <[e-mail]>",
   "license": "MIT",
@@ -10,10 +10,8 @@ "main": "index.js",
   "scripts": {
-    "build": "node ../../shared/build-package",
-    "lint": "eslint . --max-warnings=0"
+    "build": "node ../../shared/build-package"
   },
   "dependencies": {
-    "@reach/auto-id": "^0.4.0-beta.0",
-    "@reach/component-component": "^0.4.0-beta.0",
-    "@reach/dialog": "^0.4.0-beta.0",
-    "@reach/utils": "^0.4.0-beta.0",
+    "@reach/auto-id": "^0.4.0",
+    "@reach/dialog": "^0.4.0",
+    "@reach/utils": "^0.4.0",
     "invariant": "^2.2.4",
@@ -27,4 +25,4 @@ "prop-types": "^15.7.2"
   "devDependencies": {
-    "react": "^16.8.0",
-    "react-test-renderer": "^16.8.0"
+    "react": "^16.10.2",
+    "react-test-renderer": "^16.10.2"
   },
@@ -36,4 +34,6 @@ "files": [
     "index.js",
+    "index.d.ts",
     "styles.css"
-  ]
+  ],
+  "gitHead": "0f3d2c7e530cd80e1d1bd338182ac89a3ba23999"
 }

src/index.js

 import React, { createContext } from "react";
-import Component from "@reach/component-component";
 import { DialogOverlay, DialogContent } from "@reach/dialog";
@@ -8,31 +7,30 @@ import { useId } from "@reach/auto-id";
 
-let AlertDialogContext = createContext();
+let AlertDialogContext = createContext({});
 
-let AlertDialogOverlay = React.forwardRef(
-  ({ leastDestructiveRef, ...props }, forwardRef) => {
-    const labelId = useId();
-    const descriptionId = useId();
-    return (
-      <Component
-        getRefs={() => ({
-          labelId: `alert-dialog-${labelId}`,
-          descriptionId: `alert-dialog-${descriptionId}`,
-          leastDestructiveRef
-        })}
-      >
-        {({ refs }) => (
-          <AlertDialogContext.Provider value={refs}>
-            <DialogOverlay
-              ref={forwardRef}
-              data-reach-alert-dialog-overlay
-              initialFocusRef={leastDestructiveRef}
-              {...props}
-            />
-          </AlertDialogContext.Provider>
-        )}
-      </Component>
-    );
-  }
-);
+export const AlertDialogOverlay = React.forwardRef(function AlertDialogOverlay(
+  { leastDestructiveRef, ...props },
+  forwardRef
+) {
+  const uid = useId();
+  const labelId = makeId("alert-dialog", uid);
+  const descriptionId = makeId("alert-dialog-description", uid);
 
+  return (
+    <AlertDialogContext.Provider
+      value={{
+        labelId,
+        descriptionId,
+        leastDestructiveRef
+      }}
+    >
+      <DialogOverlay
+        ref={forwardRef}
+        data-reach-alert-dialog-overlay
+        initialFocusRef={leastDestructiveRef}
+        {...props}
+      />
+    </AlertDialogContext.Provider>
+  );
+});
+
 if (__DEV__) {
@@ -47,34 +45,32 @@ AlertDialogOverlay.propTypes = {
 
-let AlertDialogContent = React.forwardRef(
-  ({ children, ...props }, forwardRef) => (
-    <AlertDialogContext.Consumer>
-      {refs => (
-        <DialogContent
-          ref={forwardRef}
-          data-reach-alert-dialong-content
-          role="alertdialog"
-          aria-labelledby={refs.labelId}
-          {...props}
-        >
-          <Component
-            didMount={() => {
-              invariant(
-                document.getElementById(refs.labelId),
-                `@reach/alert-dialog: You must render a \`<AlertDialogLabel>\`
-              inside an \`<AlertDialog/>\`.`
-              );
-              invariant(
-                refs.leastDestructiveRef,
-                `@reach/alert-dialog: You must provide a \`leastDestructiveRef\` to
-              \`<AlertDialog>\` or \`<AlertDialogOverlay/>\`. Please see
-              https://ui.reach.tech/alert-dialog/#alertdialogoverlay-leastdestructiveref`
-              );
-            }}
-            children={children}
-          />
-        </DialogContent>
-      )}
-    </AlertDialogContext.Consumer>
-  )
-);
+export const AlertDialogContent = React.forwardRef(function AlertDialogContent(
+  { children, ...props },
+  forwardRef
+) {
+  const { labelId, leastDestructiveRef } = React.useContext(AlertDialogContext);
+  React.useEffect(() => {
+    invariant(
+      document.getElementById(labelId),
+      `@reach/alert-dialog: You must render a \`<AlertDialogLabel>\`
+        inside an \`<AlertDialog/>\`.`
+    );
+    invariant(
+      leastDestructiveRef,
+      `@reach/alert-dialog: You must provide a \`leastDestructiveRef\` to
+        \`<AlertDialog>\` or \`<AlertDialogOverlay/>\`. Please see
+        https://ui.reach.tech/alert-dialog/#alertdialogoverlay-leastdestructiveref`
+    );
+  }, [labelId, leastDestructiveRef]);
+  return (
+    <DialogContent
+      ref={forwardRef}
+      data-reach-alert-dialong-content
+      role="alertdialog"
+      aria-labelledby={labelId}
+      {...props}
+    >
+      {children}
+    </DialogContent>
+  );
+});
 
@@ -87,19 +83,20 @@ if (__DEV__) {
 
-let AlertDialogLabel = props => (
-  <AlertDialogContext.Consumer>
-    {({ labelId }) => (
-      <div id={labelId} data-reach-alert-dialog-label {...props} />
-    )}
-  </AlertDialogContext.Consumer>
-);
+export const AlertDialogLabel = props => {
+  const { labelId } = React.useContext(AlertDialogContext);
+  return <div id={labelId} data-reach-alert-dialog-label {...props} />;
+};
 
-let AlertDialogDescription = props => (
-  <AlertDialogContext.Consumer>
-    {({ descriptionId }) => (
-      <div id={descriptionId} data-reach-alert-dialog-description {...props} />
-    )}
-  </AlertDialogContext.Consumer>
-);
+export const AlertDialogDescription = props => {
+  const { descriptionId } = React.useContext(AlertDialogContext);
+  return (
+    <div id={descriptionId} data-reach-alert-dialog-description {...props} />
+  );
+};
 
-let AlertDialog = ({ isOpen, onDismiss, leastDestructiveRef, ...props }) => (
+export const AlertDialog = ({
+  isOpen,
+  onDismiss,
+  leastDestructiveRef,
+  ...props
+}) => (
   <AlertDialogOverlay {...{ isOpen, onDismiss, leastDestructiveRef }}>
@@ -114,3 +111,3 @@ <AlertDialogContent {...props} />
     onDismiss: func,
-    leastDestructiveRef: func,
+    leastDestructiveRef: oneOfType([func, object]),
     children: node
@@ -120,8 +117,5 @@ };
 
-export {
-  AlertDialog,
-  AlertDialogLabel,
-  AlertDialogDescription,
-  AlertDialogOverlay,
-  AlertDialogContent
-};
+// TODO: Move to @reach/utils
+function makeId(id, index) {
+  return `${id}--${index}`;
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16571

increased by8.43%

Dependency count

7

decreased by-12.5%

Number of package files

6

increased by50%

Lines of code

334

increased by0.6%

Dependency changes

• - Removed@reach/component-component@^0.4.0-beta.0

• Updated@reach/auto-id@^0.4.0

• Updated@reach/dialog@^0.4.0

• Updated@reach/utils@^0.4.0