@reach/dialog - npm Package Compare versions

Comparing version 0.14.0 to 0.15.0

dist/declarations/src/index.d.ts

@@ -11,2 +11,3 @@ /**
 import * as React from "react";
+import type * as Polymorphic from "@reach/utils/polymorphic";
 /**
@@ -22,4 +23,4 @@ * DialogOverlay
  */
-declare const DialogOverlay: import("@reach/utils").ForwardRefExoticComponentWithAs<"div", DialogOverlayProps>;
-declare type DialogOverlayProps = DialogProps & {
+declare const DialogOverlay: Polymorphic.ForwardRefComponent<"div", DialogOverlayProps>;
+interface DialogOverlayProps extends DialogProps {
     /**
@@ -62,3 +63,3 @@ * By default the dialog locks the focus inside it. Normally this is what you
     dangerouslyBypassScrollLock?: boolean;
-};
+}
 /**
@@ -79,7 +80,7 @@ * DialogContent
  */
-declare const DialogContent: import("@reach/utils").ForwardRefExoticComponentWithAs<"div", DialogContentProps>;
+declare const DialogContent: Polymorphic.ForwardRefComponent<"div", DialogContentProps>;
 /**
  * @see Docs https://reach.tech/dialog#dialogcontent-props
  */
-declare type DialogContentProps = {
+interface DialogContentProps {
     /**
@@ -91,3 +92,3 @@ * Accepts any renderable content.
     children?: React.ReactNode;
-};
+}
 /**
@@ -101,7 +102,7 @@ * Dialog
  */
-declare const Dialog: import("@reach/utils").ForwardRefExoticComponentWithAs<"div", DialogProps>;
+declare const Dialog: Polymorphic.ForwardRefComponent<"div", DialogProps>;
 /**
  * @see Docs https://reach.tech/dialog#dialog-props
  */
-declare type DialogProps = {
+interface DialogProps {
     /**
@@ -165,5 +166,5 @@ * Handle zoom/pinch gestures on iOS devices when scroll locking is enabled.
     unstable_lockFocusAcrossFrames?: boolean;
-};
+}
 export type { DialogContentProps, DialogOverlayProps, DialogProps };
 export { Dialog, DialogContent, DialogOverlay };
 export default Dialog;

dist/reach-dialog.cjs.dev.js

@@ -7,3 +7,8 @@ 'use strict';
 var portal = require('@reach/portal');
-var utils = require('@reach/utils');
+var ownerDocument = require('@reach/utils/owner-document');
+var typeCheck = require('@reach/utils/type-check');
+var noop = require('@reach/utils/noop');
+var devUtils = require('@reach/utils/dev-utils');
+var composeRefs = require('@reach/utils/compose-refs');
+var composeEventHandlers = require('@reach/utils/compose-event-handlers');
 var FocusLock = require('react-focus-lock');
@@ -73,3 +78,3 @@ var reactRemoveScroll = require('react-remove-scroll');
 
-var DialogOverlay = /*#__PURE__*/utils.forwardRefWithAs(function DialogOverlay(_ref, forwardedRef) {
+var DialogOverlay = /*#__PURE__*/React.forwardRef(function DialogOverlay(_ref, forwardedRef) {
   var _ref$as = _ref.as,
@@ -81,3 +86,3 @@ Comp = _ref$as === void 0 ? "div" : _ref$as,
 
-  utils.useCheckStyles("dialog"); // We want to ignore the immediate focus of a tooltip so it doesn't pop
+  devUtils.useCheckStyles("dialog"); // We want to ignore the immediate focus of a tooltip so it doesn't pop
   // up again when the menu closes, only pops up when focus returns again
@@ -118,3 +123,3 @@ // to the tooltip (like native OS tooltips).
  */
-var DialogInner = /*#__PURE__*/utils.forwardRefWithAs(function DialogInner(_ref2, forwardedRef) {
+var DialogInner = /*#__PURE__*/React.forwardRef(function DialogInner(_ref2, forwardedRef) {
   var allowPinchZoom = _ref2.allowPinchZoom,
@@ -130,3 +135,3 @@ _ref2$as = _ref2.as,
       _ref2$onDismiss = _ref2.onDismiss,
-      onDismiss = _ref2$onDismiss === void 0 ? utils.noop : _ref2$onDismiss,
+      onDismiss = _ref2$onDismiss === void 0 ? noop.noop : _ref2$onDismiss,
       onKeyDown = _ref2.onKeyDown,
@@ -140,3 +145,3 @@ onMouseDown = _ref2.onMouseDown,
   var overlayNode = React.useRef(null);
-  var ref = utils.useForkedRef(overlayNode, forwardedRef);
+  var ref = composeRefs.useComposedRefs(overlayNode, forwardedRef);
   var activateFocusLock = React.useCallback(function () {
@@ -187,5 +192,5 @@ if (initialFocusRef && initialFocusRef.current) {
     ,
-    onClick: utils.wrapEvent(onClick, handleClick),
-    onKeyDown: utils.wrapEvent(onKeyDown, handleKeyDown),
-    onMouseDown: utils.wrapEvent(onMouseDown, handleMouseDown)
+    onClick: composeEventHandlers.composeEventHandlers(onClick, handleClick),
+    onKeyDown: composeEventHandlers.composeEventHandlers(onKeyDown, handleKeyDown),
+    onMouseDown: composeEventHandlers.composeEventHandlers(onMouseDown, handleMouseDown)
   }))));
@@ -216,3 +221,3 @@ });
 
-var DialogContent = /*#__PURE__*/utils.forwardRefWithAs(function DialogContent(_ref3, forwardedRef) {
+var DialogContent = /*#__PURE__*/React.forwardRef(function DialogContent(_ref3, forwardedRef) {
   var _ref3$as = _ref3.as,
@@ -231,3 +236,3 @@ Comp = _ref3$as === void 0 ? "div" : _ref3$as,
     "data-reach-dialog-content": "",
-    onClick: utils.wrapEvent(onClick, function (event) {
+    onClick: composeEventHandlers.composeEventHandlers(onClick, function (event) {
       event.stopPropagation();
@@ -259,3 +264,3 @@ })
 
-var Dialog = /*#__PURE__*/utils.forwardRefWithAs(function Dialog(_ref4, forwardedRef) {
+var Dialog = /*#__PURE__*/React.forwardRef(function Dialog(_ref4, forwardedRef) {
   var _ref4$allowPinchZoom = _ref4.allowPinchZoom,
@@ -266,3 +271,3 @@ allowPinchZoom = _ref4$allowPinchZoom === void 0 ? false : _ref4$allowPinchZoom,
       _ref4$onDismiss = _ref4.onDismiss,
-      onDismiss = _ref4$onDismiss === void 0 ? utils.noop : _ref4$onDismiss,
+      onDismiss = _ref4$onDismiss === void 0 ? noop.noop : _ref4$onDismiss,
       props = _objectWithoutPropertiesLoose(_ref4, ["allowPinchZoom", "initialFocusRef", "isOpen", "onDismiss"]);
@@ -297,3 +302,3 @@
   var rootNodes = [];
-  var ownerDocument = utils.getOwnerDocument(dialogNode);
+  var ownerDocument$1 = ownerDocument.getOwnerDocument(dialogNode);
 
@@ -305,6 +310,6 @@ if (!dialogNode) {
 
-    return utils.noop;
+    return noop.noop;
   }
 
-  Array.prototype.forEach.call(ownerDocument.querySelectorAll("body > *"), function (node) {
+  Array.prototype.forEach.call(ownerDocument$1.querySelectorAll("body > *"), function (node) {
     var _dialogNode$parentNod, _dialogNode$parentNod2;
@@ -351,3 +356,3 @@
     return new Error("You provided both `aria-label` and `aria-labelledby` props to a <" + compName + ">. If the a label for this component is visible on the screen, that label's component should be given a unique ID prop, and that ID should be passed as the `aria-labelledby` prop into <" + compName + ">. If the label cannot be determined programmatically from the content of the element, an alternative label should be provided as the `aria-label` prop, which will be used as an `aria-label` on the HTML tag." + details);
-  } else if (props[propName] != null && !utils.isString(props[propName])) {
+  } else if (props[propName] != null && !typeCheck.isString(props[propName])) {
     return new Error("Invalid prop `" + propName + "` supplied to `" + compName + "`. Expected `string`, received `" + (Array.isArray(propFullName) ? "array" : typeof propFullName) + "`.");
@@ -354,0 +359,0 @@ }

dist/reach-dialog.cjs.prod.js

@@ -7,3 +7,8 @@ 'use strict';
 var portal = require('@reach/portal');
-var utils = require('@reach/utils');
+var ownerDocument = require('@reach/utils/owner-document');
+require('@reach/utils/type-check');
+var noop = require('@reach/utils/noop');
+var devUtils = require('@reach/utils/dev-utils');
+var composeRefs = require('@reach/utils/compose-refs');
+var composeEventHandlers = require('@reach/utils/compose-event-handlers');
 var FocusLock = require('react-focus-lock');
@@ -73,3 +78,3 @@ var reactRemoveScroll = require('react-remove-scroll');
 
-var DialogOverlay = /*#__PURE__*/utils.forwardRefWithAs(function DialogOverlay(_ref, forwardedRef) {
+var DialogOverlay = /*#__PURE__*/React.forwardRef(function DialogOverlay(_ref, forwardedRef) {
   var _ref$as = _ref.as,
@@ -81,3 +86,3 @@ Comp = _ref$as === void 0 ? "div" : _ref$as,
 
-  utils.useCheckStyles("dialog"); // We want to ignore the immediate focus of a tooltip so it doesn't pop
+  devUtils.useCheckStyles("dialog"); // We want to ignore the immediate focus of a tooltip so it doesn't pop
   // up again when the menu closes, only pops up when focus returns again
@@ -111,3 +116,3 @@ // to the tooltip (like native OS tooltips).
  */
-var DialogInner = /*#__PURE__*/utils.forwardRefWithAs(function DialogInner(_ref2, forwardedRef) {
+var DialogInner = /*#__PURE__*/React.forwardRef(function DialogInner(_ref2, forwardedRef) {
   var allowPinchZoom = _ref2.allowPinchZoom,
@@ -123,3 +128,3 @@ _ref2$as = _ref2.as,
       _ref2$onDismiss = _ref2.onDismiss,
-      onDismiss = _ref2$onDismiss === void 0 ? utils.noop : _ref2$onDismiss,
+      onDismiss = _ref2$onDismiss === void 0 ? noop.noop : _ref2$onDismiss,
       onKeyDown = _ref2.onKeyDown,
@@ -133,3 +138,3 @@ onMouseDown = _ref2.onMouseDown,
   var overlayNode = React.useRef(null);
-  var ref = utils.useForkedRef(overlayNode, forwardedRef);
+  var ref = composeRefs.useComposedRefs(overlayNode, forwardedRef);
   var activateFocusLock = React.useCallback(function () {
@@ -180,5 +185,5 @@ if (initialFocusRef && initialFocusRef.current) {
     ,
-    onClick: utils.wrapEvent(onClick, handleClick),
-    onKeyDown: utils.wrapEvent(onKeyDown, handleKeyDown),
-    onMouseDown: utils.wrapEvent(onMouseDown, handleMouseDown)
+    onClick: composeEventHandlers.composeEventHandlers(onClick, handleClick),
+    onKeyDown: composeEventHandlers.composeEventHandlers(onKeyDown, handleKeyDown),
+    onMouseDown: composeEventHandlers.composeEventHandlers(onMouseDown, handleMouseDown)
   }))));
@@ -204,3 +209,3 @@ });
 
-var DialogContent = /*#__PURE__*/utils.forwardRefWithAs(function DialogContent(_ref3, forwardedRef) {
+var DialogContent = /*#__PURE__*/React.forwardRef(function DialogContent(_ref3, forwardedRef) {
   var _ref3$as = _ref3.as,
@@ -219,3 +224,3 @@ Comp = _ref3$as === void 0 ? "div" : _ref3$as,
     "data-reach-dialog-content": "",
-    onClick: utils.wrapEvent(onClick, function (event) {
+    onClick: composeEventHandlers.composeEventHandlers(onClick, function (event) {
       event.stopPropagation();
@@ -236,3 +241,3 @@ })
 
-var Dialog = /*#__PURE__*/utils.forwardRefWithAs(function Dialog(_ref4, forwardedRef) {
+var Dialog = /*#__PURE__*/React.forwardRef(function Dialog(_ref4, forwardedRef) {
   var _ref4$allowPinchZoom = _ref4.allowPinchZoom,
@@ -243,3 +248,3 @@ allowPinchZoom = _ref4$allowPinchZoom === void 0 ? false : _ref4$allowPinchZoom,
       _ref4$onDismiss = _ref4.onDismiss,
-      onDismiss = _ref4$onDismiss === void 0 ? utils.noop : _ref4$onDismiss,
+      onDismiss = _ref4$onDismiss === void 0 ? noop.noop : _ref4$onDismiss,
       props = _objectWithoutPropertiesLoose(_ref4, ["allowPinchZoom", "initialFocusRef", "isOpen", "onDismiss"]);
@@ -261,10 +266,10 @@
   var rootNodes = [];
-  var ownerDocument = utils.getOwnerDocument(dialogNode);
+  var ownerDocument$1 = ownerDocument.getOwnerDocument(dialogNode);
 
   if (!dialogNode) {
 
-    return utils.noop;
+    return noop.noop;
   }
 
-  Array.prototype.forEach.call(ownerDocument.querySelectorAll("body > *"), function (node) {
+  Array.prototype.forEach.call(ownerDocument$1.querySelectorAll("body > *"), function (node) {
     var _dialogNode$parentNod, _dialogNode$parentNod2;
@@ -271,0 +276,0 @@

dist/reach-dialog.esm.js

@@ -1,4 +0,9 @@
-import { useEffect, createElement, useRef, useCallback } from 'react';
+import { forwardRef, useEffect, createElement, useRef, useCallback } from 'react';
 import { Portal } from '@reach/portal';
-import { forwardRefWithAs, useCheckStyles, useForkedRef, wrapEvent, getOwnerDocument, noop, isString } from '@reach/utils';
+import { getOwnerDocument } from '@reach/utils/owner-document';
+import { isString } from '@reach/utils/type-check';
+import { noop } from '@reach/utils/noop';
+import { useCheckStyles } from '@reach/utils/dev-utils';
+import { useComposedRefs } from '@reach/utils/compose-refs';
+import { composeEventHandlers } from '@reach/utils/compose-event-handlers';
 import FocusLock from 'react-focus-lock';
@@ -63,3 +68,3 @@ import { RemoveScroll } from 'react-remove-scroll';
 
-var DialogOverlay = /*#__PURE__*/forwardRefWithAs(function DialogOverlay(_ref, forwardedRef) {
+var DialogOverlay = /*#__PURE__*/forwardRef(function DialogOverlay(_ref, forwardedRef) {
   var _ref$as = _ref.as,
@@ -107,3 +112,3 @@ Comp = _ref$as === void 0 ? "div" : _ref$as,
  */
-var DialogInner = /*#__PURE__*/forwardRefWithAs(function DialogInner(_ref2, forwardedRef) {
+var DialogInner = /*#__PURE__*/forwardRef(function DialogInner(_ref2, forwardedRef) {
   var allowPinchZoom = _ref2.allowPinchZoom,
@@ -128,3 +133,3 @@ _ref2$as = _ref2.as,
   var overlayNode = useRef(null);
-  var ref = useForkedRef(overlayNode, forwardedRef);
+  var ref = useComposedRefs(overlayNode, forwardedRef);
   var activateFocusLock = useCallback(function () {
@@ -175,5 +180,5 @@ if (initialFocusRef && initialFocusRef.current) {
     ,
-    onClick: wrapEvent(onClick, handleClick),
-    onKeyDown: wrapEvent(onKeyDown, handleKeyDown),
-    onMouseDown: wrapEvent(onMouseDown, handleMouseDown)
+    onClick: composeEventHandlers(onClick, handleClick),
+    onKeyDown: composeEventHandlers(onKeyDown, handleKeyDown),
+    onMouseDown: composeEventHandlers(onMouseDown, handleMouseDown)
   }))));
@@ -204,3 +209,3 @@ });
 
-var DialogContent = /*#__PURE__*/forwardRefWithAs(function DialogContent(_ref3, forwardedRef) {
+var DialogContent = /*#__PURE__*/forwardRef(function DialogContent(_ref3, forwardedRef) {
   var _ref3$as = _ref3.as,
@@ -219,3 +224,3 @@ Comp = _ref3$as === void 0 ? "div" : _ref3$as,
     "data-reach-dialog-content": "",
-    onClick: wrapEvent(onClick, function (event) {
+    onClick: composeEventHandlers(onClick, function (event) {
       event.stopPropagation();
@@ -247,3 +252,3 @@ })
 
-var Dialog = /*#__PURE__*/forwardRefWithAs(function Dialog(_ref4, forwardedRef) {
+var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref4, forwardedRef) {
   var _ref4$allowPinchZoom = _ref4.allowPinchZoom,
@@ -250,0 +255,0 @@ allowPinchZoom = _ref4$allowPinchZoom === void 0 ? false : _ref4$allowPinchZoom,

package.json

 {
   "name": "@reach/dialog",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "Accessible React Modal Dialog.",
   "author": "React Training <[e-mail]>",
   "license": "MIT",
-  "sideEffects": false,
+  "sideEffects": [
+    "*.css"
+  ],
   "repository": {
@@ -14,4 +16,4 @@ "type": "git",
   "dependencies": {
-    "@reach/portal": "0.14.0",
-    "@reach/utils": "0.14.0",
+    "@reach/portal": "0.15.0",
+    "@reach/utils": "0.15.0",
     "prop-types": "^15.7.2",
@@ -23,4 +25,4 @@ "react-focus-lock": "^2.5.0",
   "devDependencies": {
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
@@ -43,3 +45,3 @@ "peerDependencies": {
   ],
-  "gitHead": "80f6ca5f8d25a10887e2bd34d60094402b9bc0a7"
+  "gitHead": "1449650359c119c1afe25973aa7584e09e2c88bc"
 }

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

45401

increased by2.35%

Lines of code

1046

increased by1.55%

Dependency changes

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

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

• + Addedtiny-warning@1.0.3(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/portal@0.15.0

• Updated@reach/utils@0.15.0