@reach/alert-dialog - npm Package Compare versions

Comparing version 0.14.0 to 0.15.0

dist/declarations/src/index.d.ts

@@ -33,2 +33,3 @@ /**
 import * as React from "react";
+import type * as Polymorphic from "@reach/utils/polymorphic";
 import type { DialogProps, DialogContentProps } from "@reach/dialog";
@@ -46,3 +47,3 @@ /**
  */
-declare const AlertDialogOverlay: import("@reach/utils").ForwardRefExoticComponentWithAs<"div", AlertDialogProps>;
+declare const AlertDialogOverlay: Polymorphic.ForwardRefComponent<"div", AlertDialogProps>;
 /**
@@ -62,7 +63,7 @@ * AlertDialogContent
  */
-declare const AlertDialogContent: import("@reach/utils").ForwardRefExoticComponentWithAs<"div", AlertDialogContentProps>;
+declare const AlertDialogContent: Polymorphic.ForwardRefComponent<"div", AlertDialogContentProps>;
 /**
  * @see Docs https://reach.tech/alert-dialog#alertdialogcontent-props
  */
-declare type AlertDialogContentProps = {
+interface AlertDialogContentProps extends DialogContentProps {
     /**
@@ -76,3 +77,3 @@ * Accepts any renderable content but should generally be restricted to
     children: React.ReactNode;
-} & DialogContentProps;
+}
 /**
@@ -89,4 +90,5 @@ * AlertDialogLabel
  */
-declare const AlertDialogLabel: import("@reach/utils").ForwardRefExoticComponentWithAs<"div", AlertDialogLabelProps>;
-declare type AlertDialogLabelProps = {};
+declare const AlertDialogLabel: Polymorphic.ForwardRefComponent<"div", AlertDialogLabelProps>;
+interface AlertDialogLabelProps {
+}
 /**
@@ -102,4 +104,5 @@ * AlertDialogDescription
  */
-declare const AlertDialogDescription: import("@reach/utils").ForwardRefExoticComponentWithAs<"div", AlertDialogDescriptionProps>;
-declare type AlertDialogDescriptionProps = {};
+declare const AlertDialogDescription: Polymorphic.ForwardRefComponent<"div", AlertDialogDescriptionProps>;
+interface AlertDialogDescriptionProps {
+}
 /**
@@ -113,7 +116,7 @@ * AlertDialog
  */
-declare const AlertDialog: import("@reach/utils").ForwardRefExoticComponentWithAs<"div", AlertDialogProps>;
+declare const AlertDialog: Polymorphic.ForwardRefComponent<"div", AlertDialogProps>;
 /**
  * @see Docs https://reach.tech/alert-dialog#alertdialog-props
  */
-declare type AlertDialogProps = {
+interface AlertDialogProps extends DialogProps {
     id?: string;
@@ -149,4 +152,4 @@ /**
     children: React.ReactNode;
-} & DialogProps;
+}
 export type { AlertDialogContentProps, AlertDialogDescriptionProps, AlertDialogLabelProps, AlertDialogProps, };
 export { AlertDialog, AlertDialogContent, AlertDialogDescription, AlertDialogLabel, AlertDialogOverlay, };

dist/reach-alert-dialog.cjs.dev.js

@@ -8,3 +8,6 @@ 'use strict';
 var autoId = require('@reach/auto-id');
-var utils = require('@reach/utils');
+var ownerDocument = require('@reach/utils/owner-document');
+var context = require('@reach/utils/context');
+var makeId = require('@reach/utils/make-id');
+var composeRefs = require('@reach/utils/compose-refs');
 var invariant = require('invariant');
@@ -51,3 +54,3 @@ var PropTypes = require('prop-types');
 
-var AlertDialogContext = /*#__PURE__*/utils.createNamedContext("AlertDialogContext", {}); ////////////////////////////////////////////////////////////////////////////////
+var AlertDialogContext = /*#__PURE__*/context.createNamedContext("AlertDialogContext", {}); ////////////////////////////////////////////////////////////////////////////////
 
@@ -66,3 +69,3 @@ /**
 
-var AlertDialogOverlay = /*#__PURE__*/utils.forwardRefWithAs(function AlertDialogOverlay(_ref, forwardedRef) {
+var AlertDialogOverlay = /*#__PURE__*/React.forwardRef(function AlertDialogOverlay(_ref, forwardedRef) {
   var leastDestructiveRef = _ref.leastDestructiveRef,
@@ -72,6 +75,6 @@ props = _objectWithoutPropertiesLoose(_ref, ["leastDestructiveRef"]);
   var ownRef = React.useRef(null);
-  var ref = utils.useForkedRef(forwardedRef, ownRef);
+  var ref = composeRefs.useComposedRefs(forwardedRef, ownRef);
   var id = autoId.useId(props.id);
-  var labelId = id ? utils.makeId("alert-dialog", id) : undefined;
-  var descriptionId = id ? utils.makeId("alert-dialog-description", id) : undefined;
+  var labelId = id ? makeId.makeId("alert-dialog", id) : undefined;
+  var descriptionId = id ? makeId.makeId("alert-dialog-description", id) : undefined;
   return /*#__PURE__*/React.createElement(AlertDialogContext.Provider, {
@@ -119,3 +122,3 @@ value: {
 
-var AlertDialogContent = /*#__PURE__*/utils.forwardRefWithAs(function AlertDialogContent(_ref2, forwardedRef) {
+var AlertDialogContent = /*#__PURE__*/React.forwardRef(function AlertDialogContent(_ref2, forwardedRef) {
   var children = _ref2.children,
@@ -131,6 +134,6 @@ props = _objectWithoutPropertiesLoose(_ref2, ["children"]);
   React.useEffect(function () {
-    var ownerDocument = utils.getOwnerDocument(overlayRef.current);
+    var ownerDocument$1 = ownerDocument.getOwnerDocument(overlayRef.current);
 
     if (labelId) {
-      !ownerDocument.getElementById(labelId) ? process.env.NODE_ENV !== "production" ? invariant__default['default'](false, "@reach/alert-dialog: You must render a `<AlertDialogLabel>`\n          inside an `<AlertDialog/>`.") : invariant__default['default'](false) : void 0;
+      !ownerDocument$1.getElementById(labelId) ? process.env.NODE_ENV !== "production" ? invariant__default['default'](false, "@reach/alert-dialog: You must render a `<AlertDialogLabel>`\n          inside an `<AlertDialog/>`.") : invariant__default['default'](false) : void 0;
     }
@@ -188,3 +191,3 @@
 
-var AlertDialogLabel = /*#__PURE__*/utils.forwardRefWithAs(function (_ref3, forwardedRef) {
+var AlertDialogLabel = /*#__PURE__*/React.forwardRef(function (_ref3, forwardedRef) {
   var _ref3$as = _ref3.as,
@@ -220,3 +223,3 @@ Comp = _ref3$as === void 0 ? "div" : _ref3$as,
  */
-var AlertDialogDescription = /*#__PURE__*/utils.forwardRefWithAs(function AlertDialogDescription(_ref4, forwardedRef) {
+var AlertDialogDescription = /*#__PURE__*/React.forwardRef(function AlertDialogDescription(_ref4, forwardedRef) {
   var _ref4$as = _ref4.as,
@@ -250,3 +253,3 @@ Comp = _ref4$as === void 0 ? "div" : _ref4$as,
  */
-var AlertDialog = /*#__PURE__*/utils.forwardRefWithAs(function AlertDialog(_ref5, forwardedRef) {
+var AlertDialog = /*#__PURE__*/React.forwardRef(function AlertDialog(_ref5, forwardedRef) {
   var id = _ref5.id,
@@ -253,0 +256,0 @@ isOpen = _ref5.isOpen,

dist/reach-alert-dialog.cjs.prod.js

@@ -8,3 +8,6 @@ 'use strict';
 var autoId = require('@reach/auto-id');
-var utils = require('@reach/utils');
+var ownerDocument = require('@reach/utils/owner-document');
+var context = require('@reach/utils/context');
+var makeId = require('@reach/utils/make-id');
+var composeRefs = require('@reach/utils/compose-refs');
 var invariant = require('invariant');
@@ -50,3 +53,3 @@ require('prop-types');
 
-var AlertDialogContext = /*#__PURE__*/utils.createNamedContext("AlertDialogContext", {}); ////////////////////////////////////////////////////////////////////////////////
+var AlertDialogContext = /*#__PURE__*/context.createNamedContext("AlertDialogContext", {}); ////////////////////////////////////////////////////////////////////////////////
 
@@ -65,3 +68,3 @@ /**
 
-var AlertDialogOverlay = /*#__PURE__*/utils.forwardRefWithAs(function AlertDialogOverlay(_ref, forwardedRef) {
+var AlertDialogOverlay = /*#__PURE__*/React.forwardRef(function AlertDialogOverlay(_ref, forwardedRef) {
   var leastDestructiveRef = _ref.leastDestructiveRef,
@@ -71,6 +74,6 @@ props = _objectWithoutPropertiesLoose(_ref, ["leastDestructiveRef"]);
   var ownRef = React.useRef(null);
-  var ref = utils.useForkedRef(forwardedRef, ownRef);
+  var ref = composeRefs.useComposedRefs(forwardedRef, ownRef);
   var id = autoId.useId(props.id);
-  var labelId = id ? utils.makeId("alert-dialog", id) : undefined;
-  var descriptionId = id ? utils.makeId("alert-dialog-description", id) : undefined;
+  var labelId = id ? makeId.makeId("alert-dialog", id) : undefined;
+  var descriptionId = id ? makeId.makeId("alert-dialog-description", id) : undefined;
   return /*#__PURE__*/React.createElement(AlertDialogContext.Provider, {
@@ -106,3 +109,3 @@ value: {
 
-var AlertDialogContent = /*#__PURE__*/utils.forwardRefWithAs(function AlertDialogContent(_ref2, forwardedRef) {
+var AlertDialogContent = /*#__PURE__*/React.forwardRef(function AlertDialogContent(_ref2, forwardedRef) {
   var children = _ref2.children,
@@ -118,6 +121,6 @@ props = _objectWithoutPropertiesLoose(_ref2, ["children"]);
   React.useEffect(function () {
-    var ownerDocument = utils.getOwnerDocument(overlayRef.current);
+    var ownerDocument$1 = ownerDocument.getOwnerDocument(overlayRef.current);
 
     if (labelId) {
-      !ownerDocument.getElementById(labelId) ?  invariant__default['default'](false) : void 0;
+      !ownerDocument$1.getElementById(labelId) ?  invariant__default['default'](false) : void 0;
     }
@@ -165,3 +168,3 @@
 
-var AlertDialogLabel = /*#__PURE__*/utils.forwardRefWithAs(function (_ref3, forwardedRef) {
+var AlertDialogLabel = /*#__PURE__*/React.forwardRef(function (_ref3, forwardedRef) {
   var _ref3$as = _ref3.as,
@@ -193,3 +196,3 @@ Comp = _ref3$as === void 0 ? "div" : _ref3$as,
  */
-var AlertDialogDescription = /*#__PURE__*/utils.forwardRefWithAs(function AlertDialogDescription(_ref4, forwardedRef) {
+var AlertDialogDescription = /*#__PURE__*/React.forwardRef(function AlertDialogDescription(_ref4, forwardedRef) {
   var _ref4$as = _ref4.as,
@@ -219,3 +222,3 @@ Comp = _ref4$as === void 0 ? "div" : _ref4$as,
  */
-var AlertDialog = /*#__PURE__*/utils.forwardRefWithAs(function AlertDialog(_ref5, forwardedRef) {
+var AlertDialog = /*#__PURE__*/React.forwardRef(function AlertDialog(_ref5, forwardedRef) {
   var id = _ref5.id,
@@ -222,0 +225,0 @@ isOpen = _ref5.isOpen,

dist/reach-alert-dialog.esm.js

@@ -1,5 +0,8 @@
-import { useRef, createElement, useContext, useEffect } from 'react';
+import { forwardRef, useRef, createElement, useContext, useEffect } from 'react';
 import { DialogOverlay, DialogContent } from '@reach/dialog';
 import { useId } from '@reach/auto-id';
-import { createNamedContext, forwardRefWithAs, useForkedRef, makeId, getOwnerDocument } from '@reach/utils';
+import { getOwnerDocument } from '@reach/utils/owner-document';
+import { createNamedContext } from '@reach/utils/context';
+import { makeId } from '@reach/utils/make-id';
+import { useComposedRefs } from '@reach/utils/compose-refs';
 import invariant from 'invariant';
@@ -55,3 +58,3 @@ import PropTypes from 'prop-types';
 
-var AlertDialogOverlay = /*#__PURE__*/forwardRefWithAs(function AlertDialogOverlay(_ref, forwardedRef) {
+var AlertDialogOverlay = /*#__PURE__*/forwardRef(function AlertDialogOverlay(_ref, forwardedRef) {
   var leastDestructiveRef = _ref.leastDestructiveRef,
@@ -61,3 +64,3 @@ props = _objectWithoutPropertiesLoose(_ref, ["leastDestructiveRef"]);
   var ownRef = useRef(null);
-  var ref = useForkedRef(forwardedRef, ownRef);
+  var ref = useComposedRefs(forwardedRef, ownRef);
   var id = useId(props.id);
@@ -108,3 +111,3 @@ var labelId = id ? makeId("alert-dialog", id) : undefined;
 
-var AlertDialogContent = /*#__PURE__*/forwardRefWithAs(function AlertDialogContent(_ref2, forwardedRef) {
+var AlertDialogContent = /*#__PURE__*/forwardRef(function AlertDialogContent(_ref2, forwardedRef) {
   var children = _ref2.children,
@@ -176,3 +179,3 @@ props = _objectWithoutPropertiesLoose(_ref2, ["children"]);
 
-var AlertDialogLabel = /*#__PURE__*/forwardRefWithAs(function (_ref3, forwardedRef) {
+var AlertDialogLabel = /*#__PURE__*/forwardRef(function (_ref3, forwardedRef) {
   var _ref3$as = _ref3.as,
@@ -208,3 +211,3 @@ Comp = _ref3$as === void 0 ? "div" : _ref3$as,
  */
-var AlertDialogDescription = /*#__PURE__*/forwardRefWithAs(function AlertDialogDescription(_ref4, forwardedRef) {
+var AlertDialogDescription = /*#__PURE__*/forwardRef(function AlertDialogDescription(_ref4, forwardedRef) {
   var _ref4$as = _ref4.as,
@@ -238,3 +241,3 @@ Comp = _ref4$as === void 0 ? "div" : _ref4$as,
  */
-var AlertDialog = /*#__PURE__*/forwardRefWithAs(function AlertDialog(_ref5, forwardedRef) {
+var AlertDialog = /*#__PURE__*/forwardRef(function AlertDialog(_ref5, forwardedRef) {
   var id = _ref5.id,
@@ -241,0 +244,0 @@ isOpen = _ref5.isOpen,

package.json

 {
   "name": "@reach/alert-dialog",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "Accessible React Alert Dialog.",
   "author": "React Training <[e-mail]>",
   "license": "MIT",
-  "sideEffects": false,
+  "sideEffects": [
+    "*.css"
+  ],
   "repository": {
@@ -14,5 +16,5 @@ "type": "git",
   "dependencies": {
-    "@reach/auto-id": "0.14.0",
-    "@reach/dialog": "0.14.0",
-    "@reach/utils": "0.14.0",
+    "@reach/auto-id": "0.15.0",
+    "@reach/dialog": "0.15.0",
+    "@reach/utils": "0.15.0",
     "invariant": "^2.2.4",
@@ -23,4 +25,4 @@ "prop-types": "^15.7.2",
   "devDependencies": {
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
@@ -42,3 +44,3 @@ "peerDependencies": {
   ],
-  "gitHead": "80f6ca5f8d25a10887e2bd34d60094402b9bc0a7"
+  "gitHead": "1449650359c119c1afe25973aa7584e09e2c88bc"
 }

No alert changes

Improved metrics

Total package byte prevSize

39058

increased by1.02%

Lines of code

829

increased by1.47%

Dependency changes

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

• + Added@reach/dialog@0.15.0(transitive)

• + Added@reach/portal@0.15.0(transitive)

• + Added@reach/utils@0.15.0(transitive)

• + Addedtiny-warning@1.0.3(transitive)

• - Removed@reach/auto-id@0.14.0(transitive)

• - Removed@reach/dialog@0.14.0(transitive)

• - Removed@reach/portal@0.14.0(transitive)

• - Removed@reach/utils@0.14.0(transitive)

• - Removed@types/warning@3.0.3(transitive)

• - Removedwarning@4.0.3(transitive)

• Updated@reach/auto-id@0.15.0

• Updated@reach/dialog@0.15.0

• Updated@reach/utils@0.15.0