@reach/alert-dialog - npm Package Compare versions

Comparing version 0.8.0 to 0.8.2

dist/alert-dialog.cjs.development.js

@@ -48,6 +48,8 @@ 'use strict';
 /*#__PURE__*/
-React.forwardRef(function AlertDialogOverlay(_ref, forwardRef) {
+React.forwardRef(function AlertDialogOverlay(_ref, forwardedRef) {
   var leastDestructiveRef = _ref.leastDestructiveRef,
       props = _objectWithoutPropertiesLoose(_ref, ["leastDestructiveRef"]);
 
+  var ownRef = React.useRef(null);
+  var ref = utils.useForkedRef(forwardedRef, ownRef);
   var id = autoId.useId(props.id);
@@ -60,6 +62,7 @@ var labelId = id ? utils.makeId("alert-dialog", id) : undefined;
       descriptionId: descriptionId,
+      overlayRef: ownRef,
       leastDestructiveRef: leastDestructiveRef
     }
   }, React__default.createElement(dialog.DialogOverlay, Object.assign({}, props, {
-    ref: forwardRef,
+    ref: ref,
     "data-reach-alert-dialog-overlay": true,
@@ -106,10 +109,13 @@ initialFocusRef: leastDestructiveRef
       labelId = _useContext.labelId,
-      leastDestructiveRef = _useContext.leastDestructiveRef;
+      leastDestructiveRef = _useContext.leastDestructiveRef,
+      overlayRef = _useContext.overlayRef;
 
   React.useEffect(function () {
+    var ownerDocument = utils.getOwnerDocument(overlayRef.current) || document;
+
     if (labelId) {
-      !document.getElementById(labelId) ?  invariant(false, "@reach/alert-dialog: You must render a `<AlertDialogLabel>`\n          inside an `<AlertDialog/>`.")  : void 0;
+      !ownerDocument.getElementById(labelId) ?  invariant(false, "@reach/alert-dialog: You must render a `<AlertDialogLabel>`\n          inside an `<AlertDialog/>`.")  : void 0;
     }
 
-    !leastDestructiveRef ?  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")  : void 0;
+    !leastDestructiveRef ?  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")  : void 0; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [labelId, leastDestructiveRef]);
@@ -116,0 +122,0 @@ return React__default.createElement(dialog.DialogContent, Object.assign({

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

dist/alert-dialog.esm.js

@@ -1,5 +0,5 @@
-import React, { forwardRef, useContext, useEffect } from 'react';
+import React, { forwardRef, useRef, useContext, useEffect } from 'react';
 import { DialogOverlay, DialogContent } from '@reach/dialog';
 import { useId } from '@reach/auto-id';
-import { makeId, createNamedContext } from '@reach/utils';
+import { useForkedRef, makeId, getOwnerDocument, createNamedContext } from '@reach/utils';
 import invariant from 'invariant';
@@ -41,6 +41,8 @@ import PropTypes from 'prop-types';
 /*#__PURE__*/
-forwardRef(function AlertDialogOverlay(_ref, forwardRef) {
+forwardRef(function AlertDialogOverlay(_ref, forwardedRef) {
   var leastDestructiveRef = _ref.leastDestructiveRef,
       props = _objectWithoutPropertiesLoose(_ref, ["leastDestructiveRef"]);
 
+  var ownRef = useRef(null);
+  var ref = useForkedRef(forwardedRef, ownRef);
   var id = useId(props.id);
@@ -53,6 +55,7 @@ var labelId = id ? makeId("alert-dialog", id) : undefined;
       descriptionId: descriptionId,
+      overlayRef: ownRef,
       leastDestructiveRef: leastDestructiveRef
     }
   }, React.createElement(DialogOverlay, Object.assign({}, props, {
-    ref: forwardRef,
+    ref: ref,
     "data-reach-alert-dialog-overlay": true,
@@ -99,10 +102,13 @@ initialFocusRef: leastDestructiveRef
       labelId = _useContext.labelId,
-      leastDestructiveRef = _useContext.leastDestructiveRef;
+      leastDestructiveRef = _useContext.leastDestructiveRef,
+      overlayRef = _useContext.overlayRef;
 
   useEffect(function () {
+    var ownerDocument = getOwnerDocument(overlayRef.current) || document;
+
     if (labelId) {
-      !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;
+      !ownerDocument.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;
+    !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; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [labelId, leastDestructiveRef]);
@@ -109,0 +115,0 @@ return React.createElement(DialogContent, Object.assign({

package.json

 {
   "name": "@reach/alert-dialog",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "description": "Accessible React Alert Dialog.",
@@ -13,3 +13,3 @@ "author": "React Training <[e-mail]>",
   "scripts": {
-    "build": "yarn clean && cross-env NODE_ENV=production tsdx build --format=cjs,esm --tsconfig tsconfig.build.json",
+    "build": "yarn clean && yarn compile",
     "clean": "rm -rf ./dist",
@@ -19,7 +19,8 @@ "compile": "cross-env NODE_ENV=production tsdx build --format=cjs,esm --tsconfig tsconfig.build.json"
   "dependencies": {
-    "@reach/auto-id": "^0.8.0",
-    "@reach/dialog": "^0.8.0",
-    "@reach/utils": "^0.8.0",
+    "@reach/auto-id": "^0.8.2",
+    "@reach/dialog": "^0.8.2",
+    "@reach/utils": "^0.8.2",
     "invariant": "^2.2.4",
-    "prop-types": "^15.7.2"
+    "prop-types": "^15.7.2",
+    "tslib": "^1.10.0"
   },
@@ -37,3 +38,3 @@ "peerDependencies": {
   ],
-  "gitHead": "7702c46373c7f11adc21184e7def9977203e9326"
+  "gitHead": "ed24a5bb43a87adc36179283ca1de2c5af4ea26e"
 }

No alert changes

Improved metrics

Total package byte prevSize

69786

increased by4.05%

Lines of code

587

increased by1.73%

Worsened metrics

Dependency count

8

increased by14.29%

Number of package files

11

decreased by-8.33%

Dependency changes

• + Addedtslib@^1.10.0

• Updated@reach/auto-id@^0.8.2

• Updated@reach/dialog@^0.8.2

• Updated@reach/utils@^0.8.2