@reach/alert-dialog - npm Package Compare versions

Comparing version 0.7.3 to 0.7.4

dist/alert-dialog.cjs.development.js

 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-var tslib = require('tslib');
-var React = _interopDefault(require('react'));
+var React = require('react');
+var React__default = _interopDefault(React);
 var dialog = require('@reach/dialog');
@@ -13,33 +15,17 @@ var autoId = require('@reach/auto-id');
 
-/**
- * Welcome to @reach/alert-dialog!
- *
- * A modal dialog that interrupts the user's workflow to get a response, usually
- * some sort of confirmation. This is different than a typical Dialog in that it
- * requires some user response, like "Save", or "Cancel", etc.
- *
- * Most of the time you'll use `AlertDialog`, `AlertDialogLabel`, and
- * `AlertDialogDescription` together. If you need more control over the styling
- * of the modal you can drop down a level and use `AlertDialogOverlay` and
- * `AlertDialogContent` instead of `AlertDialog`.
- *
- * When a Dialog opens, the _least destructive_ action should be focused so that
- * if a user accidentally hits enter when the dialog opens no damage is done.
- * This is accomplished with the `leastDestructiveRef` prop.
- *
- * Every dialog must render an `AlertDialogLabel` so the screen reader knows
- * what to say about the dialog. If an `AlertDialogDescription` is also
- * rendered, the screen reader will also announce that. If you render more than
- * these two elements and some buttons, the screen reader might not announce it
- * so it's important to keep the content inside of `AlertDialogLabel` and
- * `AlertDialogDescription`.
- *
- * This is built on top of [Dialog](/dialog), so `AlertDialog` spreads its props
- * and renders a `Dialog`, same for `AlertDialogOverlay` to `DialogOverlay`, and
- * `AlertDialogContent` to `DialogContent`.
- *
- * @see Docs     https://reacttraining.com/reach-ui/alert-dialog
- * @see Source   https://github.com/reach/reach-ui/tree/master/packages/alert-dialog
- * @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices-1.1/#alertdialog
- */
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
 var AlertDialogContext =
@@ -63,5 +49,5 @@ /*#__PURE__*/
 /*#__PURE__*/
-React.forwardRef(function AlertDialogOverlay(_a, forwardRef) {
-  var leastDestructiveRef = _a.leastDestructiveRef,
-      props = tslib.__rest(_a, ["leastDestructiveRef"]);
+React.forwardRef(function AlertDialogOverlay(_ref, forwardRef) {
+  var leastDestructiveRef = _ref.leastDestructiveRef,
+      props = _objectWithoutPropertiesLoose(_ref, ["leastDestructiveRef"]);
 
@@ -71,3 +57,3 @@ var id = autoId.useId(props.id);
   var descriptionId = id ? utils.makeId("alert-dialog-description", id) : undefined;
-  return React.createElement(AlertDialogContext.Provider, {
+  return React__default.createElement(AlertDialogContext.Provider, {
     value: {
@@ -78,7 +64,7 @@ labelId: labelId,
     }
-  }, React.createElement(dialog.DialogOverlay, tslib.__assign({
+  }, React__default.createElement(dialog.DialogOverlay, Object.assign({}, props, {
     ref: forwardRef,
     "data-reach-alert-dialog-overlay": true,
     initialFocusRef: leastDestructiveRef
-  }, props)));
+  })));
 });
@@ -114,9 +100,9 @@ AlertDialogOverlay.displayName = "AlertDialogOverlay";
 /*#__PURE__*/
-React.forwardRef(function AlertDialogContent(_a, forwardRef) {
-  var children = _a.children,
-      props = tslib.__rest(_a, ["children"]);
+React.forwardRef(function AlertDialogContent(_ref2, forwardRef) {
+  var children = _ref2.children,
+      props = _objectWithoutPropertiesLoose(_ref2, ["children"]);
 
-  var _b = React.useContext(AlertDialogContext),
-      labelId = _b.labelId,
-      leastDestructiveRef = _b.leastDestructiveRef;
+  var _useContext = React.useContext(AlertDialogContext),
+      labelId = _useContext.labelId,
+      leastDestructiveRef = _useContext.leastDestructiveRef;
 
@@ -130,9 +116,10 @@ React.useEffect(function () {
   }, [labelId, leastDestructiveRef]);
-  return React.createElement(dialog.DialogContent, tslib.__assign({
+  return React__default.createElement(dialog.DialogContent, Object.assign({
+    role: "alertdialog",
+    "aria-labelledby": labelId
+  }, props, {
     ref: forwardRef,
     "data-reach-alert-dialong-content": true,
-    "data-reach-alert-dialog-content": true,
-    role: "alertdialog",
-    "aria-labelledby": labelId
-  }, props), children);
+    "data-reach-alert-dialog-content": true
+  }), children);
 });
@@ -161,7 +148,9 @@ AlertDialogContent.displayName = "AlertDialogContent";
 var AlertDialogLabel = function AlertDialogLabel(props) {
-  var labelId = React.useContext(AlertDialogContext).labelId;
-  return React.createElement("div", tslib.__assign({
+  var _useContext2 = React.useContext(AlertDialogContext),
+      labelId = _useContext2.labelId;
+
+  return React__default.createElement("div", Object.assign({}, props, {
     id: labelId,
     "data-reach-alert-dialog-label": true
-  }, props));
+  }));
 };
@@ -182,7 +171,9 @@ AlertDialogLabel.displayName = "AlertDialogLabel"; ////////////////////////////////////////////////////////////////////////////////
 var AlertDialogDescription = function AlertDialogDescription(props) {
-  var descriptionId = React.useContext(AlertDialogContext).descriptionId;
-  return React.createElement("div", tslib.__assign({
+  var _useContext3 = React.useContext(AlertDialogContext),
+      descriptionId = _useContext3.descriptionId;
+
+  return React__default.createElement("div", Object.assign({}, props, {
     id: descriptionId,
     "data-reach-alert-dialog-description": true
-  }, props));
+  }));
 };
@@ -200,10 +191,10 @@ AlertDialogDescription.displayName = "AlertDialogDescription"; ////////////////////////////////////////////////////////////////////////////////
 
-var AlertDialog = function AlertDialog(_a) {
-  var id = _a.id,
-      isOpen = _a.isOpen,
-      onDismiss = _a.onDismiss,
-      leastDestructiveRef = _a.leastDestructiveRef,
-      props = tslib.__rest(_a, ["id", "isOpen", "onDismiss", "leastDestructiveRef"]);
+var AlertDialog = function AlertDialog(_ref3) {
+  var id = _ref3.id,
+      isOpen = _ref3.isOpen,
+      onDismiss = _ref3.onDismiss,
+      leastDestructiveRef = _ref3.leastDestructiveRef,
+      props = _objectWithoutPropertiesLoose(_ref3, ["id", "isOpen", "onDismiss", "leastDestructiveRef"]);
 
-  return React.createElement(AlertDialogOverlay, tslib.__assign({}, {
+  return React__default.createElement(AlertDialogOverlay, Object.assign({}, {
     isOpen: isOpen,
@@ -213,3 +204,3 @@ onDismiss: onDismiss,
     id: id
-  }), React.createElement(AlertDialogContent, tslib.__assign({}, props)));
+  }), React__default.createElement(AlertDialogContent, Object.assign({}, props)));
 };
@@ -216,0 +207,0 @@ AlertDialog.displayName = "AlertDialog";

dist/alert-dialog.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var t=require("tslib"),a=e(require("react")),r=require("@reach/dialog"),i=require("@reach/auto-id"),l=require("@reach/utils"),n=e(require("invariant"));require("prop-types");var s=l.createNamedContext("AlertDialogContext",{}),o=a.forwardRef((function(e,n){var o=e.leastDestructiveRef,d=t.__rest(e,["leastDestructiveRef"]),c=i.useId(d.id),u=c?l.makeId("alert-dialog",c):void 0,g=c?l.makeId("alert-dialog-description",c):void 0;return a.createElement(s.Provider,{value:{labelId:u,descriptionId:g,leastDestructiveRef:o}},a.createElement(r.DialogOverlay,t.__assign({ref:n,"data-reach-alert-dialog-overlay":!0,initialFocusRef:o},d)))}));o.displayName="AlertDialogOverlay";var d=a.forwardRef((function(e,i){var l=e.children,o=t.__rest(e,["children"]),d=a.useContext(s),c=d.labelId,u=d.leastDestructiveRef;return a.useEffect((function(){c&&(document.getElementById(c)||n(!1)),u||n(!1)}),[c,u]),a.createElement(r.DialogContent,t.__assign({ref:i,"data-reach-alert-dialong-content":!0,"data-reach-alert-dialog-content":!0,role:"alertdialog","aria-labelledby":c},o),l)}));d.displayName="AlertDialogContent";var c=function(e){var r=a.useContext(s).labelId;return a.createElement("div",t.__assign({id:r,"data-reach-alert-dialog-label":!0},e))};c.displayName="AlertDialogLabel";var u=function(e){var r=a.useContext(s).descriptionId;return a.createElement("div",t.__assign({id:r,"data-reach-alert-dialog-description":!0},e))};u.displayName="AlertDialogDescription";var g=function(e){var r=e.id,i=e.isOpen,l=e.onDismiss,n=e.leastDestructiveRef,s=t.__rest(e,["id","isOpen","onDismiss","leastDestructiveRef"]);return a.createElement(o,t.__assign({},{isOpen:i,onDismiss:l,leastDestructiveRef:n,id:r}),a.createElement(d,t.__assign({},s)))};g.displayName="AlertDialog",exports.AlertDialog=g,exports.AlertDialogContent=d,exports.AlertDialogDescription=u,exports.AlertDialogLabel=c,exports.AlertDialogOverlay=o;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),a=e(t),r=require("@reach/dialog"),i=require("@reach/auto-id"),l=require("@reach/utils"),n=e(require("invariant"));function o(e,t){if(null==e)return{};var a,r,i={},l=Object.keys(e);for(r=0;r<l.length;r++)t.indexOf(a=l[r])>=0||(i[a]=e[a]);return i}require("prop-types");var s=l.createNamedContext("AlertDialogContext",{}),d=t.forwardRef((function(e,t){var n=e.leastDestructiveRef,d=o(e,["leastDestructiveRef"]),c=i.useId(d.id),u=c?l.makeId("alert-dialog",c):void 0,f=c?l.makeId("alert-dialog-description",c):void 0;return a.createElement(s.Provider,{value:{labelId:u,descriptionId:f,leastDestructiveRef:n}},a.createElement(r.DialogOverlay,Object.assign({},d,{ref:t,"data-reach-alert-dialog-overlay":!0,initialFocusRef:n})))}));d.displayName="AlertDialogOverlay";var c=t.forwardRef((function(e,i){var l=e.children,d=o(e,["children"]),c=t.useContext(s),u=c.labelId,f=c.leastDestructiveRef;return t.useEffect((function(){u&&(document.getElementById(u)||n(!1)),f||n(!1)}),[u,f]),a.createElement(r.DialogContent,Object.assign({role:"alertdialog","aria-labelledby":u},d,{ref:i,"data-reach-alert-dialong-content":!0,"data-reach-alert-dialog-content":!0}),l)}));c.displayName="AlertDialogContent";var u=function(e){var r=t.useContext(s);return a.createElement("div",Object.assign({},e,{id:r.labelId,"data-reach-alert-dialog-label":!0}))};u.displayName="AlertDialogLabel";var f=function(e){var r=t.useContext(s);return a.createElement("div",Object.assign({},e,{id:r.descriptionId,"data-reach-alert-dialog-description":!0}))};f.displayName="AlertDialogDescription";var v=function(e){var t=e.id,r=e.isOpen,i=e.onDismiss,l=e.leastDestructiveRef,n=o(e,["id","isOpen","onDismiss","leastDestructiveRef"]);return a.createElement(d,Object.assign({},{isOpen:r,onDismiss:i,leastDestructiveRef:l,id:t}),a.createElement(c,Object.assign({},n)))};v.displayName="AlertDialog",exports.AlertDialog=v,exports.AlertDialogContent=c,exports.AlertDialogDescription=f,exports.AlertDialogLabel=u,exports.AlertDialogOverlay=d;
 //# sourceMappingURL=alert-dialog.cjs.production.min.js.map

dist/alert-dialog.esm.js

@@ -1,3 +0,2 @@
-import { __rest, __assign } from 'tslib';
-import React from 'react';
+import React, { forwardRef, useContext, useEffect } from 'react';
 import { DialogOverlay, DialogContent } from '@reach/dialog';
@@ -9,33 +8,17 @@ import { useId } from '@reach/auto-id';
 
-/**
- * Welcome to @reach/alert-dialog!
- *
- * A modal dialog that interrupts the user's workflow to get a response, usually
- * some sort of confirmation. This is different than a typical Dialog in that it
- * requires some user response, like "Save", or "Cancel", etc.
- *
- * Most of the time you'll use `AlertDialog`, `AlertDialogLabel`, and
- * `AlertDialogDescription` together. If you need more control over the styling
- * of the modal you can drop down a level and use `AlertDialogOverlay` and
- * `AlertDialogContent` instead of `AlertDialog`.
- *
- * When a Dialog opens, the _least destructive_ action should be focused so that
- * if a user accidentally hits enter when the dialog opens no damage is done.
- * This is accomplished with the `leastDestructiveRef` prop.
- *
- * Every dialog must render an `AlertDialogLabel` so the screen reader knows
- * what to say about the dialog. If an `AlertDialogDescription` is also
- * rendered, the screen reader will also announce that. If you render more than
- * these two elements and some buttons, the screen reader might not announce it
- * so it's important to keep the content inside of `AlertDialogLabel` and
- * `AlertDialogDescription`.
- *
- * This is built on top of [Dialog](/dialog), so `AlertDialog` spreads its props
- * and renders a `Dialog`, same for `AlertDialogOverlay` to `DialogOverlay`, and
- * `AlertDialogContent` to `DialogContent`.
- *
- * @see Docs     https://reacttraining.com/reach-ui/alert-dialog
- * @see Source   https://github.com/reach/reach-ui/tree/master/packages/alert-dialog
- * @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices-1.1/#alertdialog
- */
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
 var AlertDialogContext =
@@ -59,5 +42,5 @@ /*#__PURE__*/
 /*#__PURE__*/
-React.forwardRef(function AlertDialogOverlay(_a, forwardRef) {
-  var leastDestructiveRef = _a.leastDestructiveRef,
-      props = __rest(_a, ["leastDestructiveRef"]);
+forwardRef(function AlertDialogOverlay(_ref, forwardRef) {
+  var leastDestructiveRef = _ref.leastDestructiveRef,
+      props = _objectWithoutPropertiesLoose(_ref, ["leastDestructiveRef"]);
 
@@ -73,7 +56,7 @@ var id = useId(props.id);
     }
-  }, React.createElement(DialogOverlay, __assign({
+  }, React.createElement(DialogOverlay, Object.assign({}, props, {
     ref: forwardRef,
     "data-reach-alert-dialog-overlay": true,
     initialFocusRef: leastDestructiveRef
-  }, props)));
+  })));
 });
@@ -109,11 +92,11 @@ AlertDialogOverlay.displayName = "AlertDialogOverlay";
 /*#__PURE__*/
-React.forwardRef(function AlertDialogContent(_a, forwardRef) {
-  var children = _a.children,
-      props = __rest(_a, ["children"]);
+forwardRef(function AlertDialogContent(_ref2, forwardRef) {
+  var children = _ref2.children,
+      props = _objectWithoutPropertiesLoose(_ref2, ["children"]);
 
-  var _b = React.useContext(AlertDialogContext),
-      labelId = _b.labelId,
-      leastDestructiveRef = _b.leastDestructiveRef;
+  var _useContext = useContext(AlertDialogContext),
+      labelId = _useContext.labelId,
+      leastDestructiveRef = _useContext.leastDestructiveRef;
 
-  React.useEffect(function () {
+  useEffect(function () {
     if (labelId) {
@@ -125,9 +108,10 @@ !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;
   }, [labelId, leastDestructiveRef]);
-  return React.createElement(DialogContent, __assign({
+  return React.createElement(DialogContent, Object.assign({
+    role: "alertdialog",
+    "aria-labelledby": labelId
+  }, props, {
     ref: forwardRef,
     "data-reach-alert-dialong-content": true,
-    "data-reach-alert-dialog-content": true,
-    role: "alertdialog",
-    "aria-labelledby": labelId
-  }, props), children);
+    "data-reach-alert-dialog-content": true
+  }), children);
 });
@@ -156,7 +140,9 @@ AlertDialogContent.displayName = "AlertDialogContent";
 var AlertDialogLabel = function AlertDialogLabel(props) {
-  var labelId = React.useContext(AlertDialogContext).labelId;
-  return React.createElement("div", __assign({
+  var _useContext2 = useContext(AlertDialogContext),
+      labelId = _useContext2.labelId;
+
+  return React.createElement("div", Object.assign({}, props, {
     id: labelId,
     "data-reach-alert-dialog-label": true
-  }, props));
+  }));
 };
@@ -177,7 +163,9 @@ AlertDialogLabel.displayName = "AlertDialogLabel"; ////////////////////////////////////////////////////////////////////////////////
 var AlertDialogDescription = function AlertDialogDescription(props) {
-  var descriptionId = React.useContext(AlertDialogContext).descriptionId;
-  return React.createElement("div", __assign({
+  var _useContext3 = useContext(AlertDialogContext),
+      descriptionId = _useContext3.descriptionId;
+
+  return React.createElement("div", Object.assign({}, props, {
     id: descriptionId,
     "data-reach-alert-dialog-description": true
-  }, props));
+  }));
 };
@@ -195,10 +183,10 @@ AlertDialogDescription.displayName = "AlertDialogDescription"; ////////////////////////////////////////////////////////////////////////////////
 
-var AlertDialog = function AlertDialog(_a) {
-  var id = _a.id,
-      isOpen = _a.isOpen,
-      onDismiss = _a.onDismiss,
-      leastDestructiveRef = _a.leastDestructiveRef,
-      props = __rest(_a, ["id", "isOpen", "onDismiss", "leastDestructiveRef"]);
+var AlertDialog = function AlertDialog(_ref3) {
+  var id = _ref3.id,
+      isOpen = _ref3.isOpen,
+      onDismiss = _ref3.onDismiss,
+      leastDestructiveRef = _ref3.leastDestructiveRef,
+      props = _objectWithoutPropertiesLoose(_ref3, ["id", "isOpen", "onDismiss", "leastDestructiveRef"]);
 
-  return React.createElement(AlertDialogOverlay, __assign({}, {
+  return React.createElement(AlertDialogOverlay, Object.assign({}, {
     isOpen: isOpen,
@@ -208,3 +196,3 @@ onDismiss: onDismiss,
     id: id
-  }), React.createElement(AlertDialogContent, __assign({}, props)));
+  }), React.createElement(AlertDialogContent, Object.assign({}, props)));
 };
@@ -211,0 +199,0 @@ AlertDialog.displayName = "AlertDialog";

dist/index.d.ts

@@ -79,12 +79,2 @@ /**
     onDismiss?: ((event?: React.SyntheticEvent<Element, Event> | undefined) => void) | undefined;
-    /**
-     * AlertDialogDescription
-     *
-     * Additional content read by screen readers, usually a longer description
-     * about what you need from the user like "This action is permanent, are you
-     * sure?" etc.
-     *
-     * @see Docs https://reacttraining.com/reach-ui/alert-dialog#alertdialogdescription
-     * @param props
-     */
     children?: React.ReactNode;
@@ -143,3 +133,3 @@ initialFocusRef?: React.RefObject<any> | undefined;
  */
-export declare const AlertDialogLabel: React.FunctionComponent<React.HTMLAttributes<HTMLDivElement>>;
+export declare const AlertDialogLabel: React.FC<React.HTMLAttributes<HTMLDivElement>>;
 /**
@@ -155,3 +145,3 @@ * AlertDialogDescription
  */
-export declare const AlertDialogDescription: React.FunctionComponent<React.HTMLAttributes<HTMLDivElement>>;
+export declare const AlertDialogDescription: React.FC<React.HTMLAttributes<HTMLDivElement>>;
 /**
@@ -158,0 +148,0 @@ * AlertDialog

package.json

 {
   "name": "@reach/alert-dialog",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "description": "Accessible React Alert Dialog.",
@@ -18,5 +18,5 @@ "author": "React Training <[e-mail]>",
   "dependencies": {
-    "@reach/auto-id": "^0.7.3",
-    "@reach/dialog": "^0.7.3",
-    "@reach/utils": "^0.7.3",
+    "@reach/auto-id": "^0.7.4",
+    "@reach/dialog": "^0.7.4",
+    "@reach/utils": "^0.7.4",
     "invariant": "^2.2.4",
@@ -36,3 +36,3 @@ "prop-types": "^15.7.2"
   ],
-  "gitHead": "fe739beb1d94cc58c4e72f88ab58efa58e0de8c8"
+  "gitHead": "f460709e283a60dd5ea62952b7feaf88546a50ff"
 }

No alert changes

Improved metrics

Number of package files

12

increased by9.09%

Worsened metrics

Total package byte prevSize

66798

decreased by-3.31%

Lines of code

562

decreased by-6.64%

Dependency changes

• Updated@reach/auto-id@^0.7.4

• Updated@reach/dialog@^0.7.4

• Updated@reach/utils@^0.7.4