@reach/dialog - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

es/index.js

@@ -7,3 +7,3 @@ 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 Portal from "@reach/portal";
-import { checkStyles, wrapEvent, assignRef } from "@reach/utils";
+import { checkStyles, wrapEvent, useForkedRef } from "@reach/utils";
 import FocusLock from "react-focus-lock";
@@ -42,3 +42,4 @@ import { RemoveScroll } from "react-remove-scroll";
 var DialogInner = React.forwardRef(function DialogInner(_ref2, forwardedRef) {
-  var initialFocusRef = _ref2.initialFocusRef,
+  var allowPinchZoom = _ref2.allowPinchZoom,
+      initialFocusRef = _ref2.initialFocusRef,
       onClick = _ref2.onClick,
@@ -49,3 +50,3 @@ _ref2$onDismiss = _ref2.onDismiss,
       onKeyDown = _ref2.onKeyDown,
-      props = _objectWithoutPropertiesLoose(_ref2, ["initialFocusRef", "onClick", "onDismiss", "onMouseDown", "onKeyDown"]);
+      props = _objectWithoutPropertiesLoose(_ref2, ["allowPinchZoom", "initialFocusRef", "onClick", "onDismiss", "onMouseDown", "onKeyDown"]);
 
@@ -56,4 +57,4 @@ var mouseDownTarget = React.useRef(null);
   React.useEffect(function () {
-    return createAriaHider(forwardedRef.current);
-  }, [forwardedRef]);
+    return createAriaHider(overlayNode.current);
+  }, []);
   return React.createElement(FocusLock, {
@@ -67,3 +68,5 @@ autoFocus: true,
     }
-  }, React.createElement(RemoveScroll, null, React.createElement("div", _extends({
+  }, React.createElement(RemoveScroll, {
+    allowPinchZoom: allowPinchZoom
+  }, React.createElement("div", _extends({
     "data-reach-dialog-overlay": true,
@@ -190,23 +193,2 @@ onClick: wrapEvent(onClick, function (event) {
   };
-} // TODO: Remove and import from @reach/utils once it's been added to the package
-
-
-function useForkedRef() {
-  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
-    refs[_key] = arguments[_key];
-  }
-
-  return React.useMemo(function () {
-    if (refs.every(function (ref) {
-      return ref == null;
-    })) {
-      return null;
-    }
-
-    return function (node) {
-      refs.forEach(function (ref) {
-        assignRef(ref, node);
-      });
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, refs);
 }
@@ -225,4 +207,4 @@
 
-  for (var _len2 = arguments.length, rest = new Array(_len2 > 3 ? _len2 - 3 : 0), _key2 = 3; _key2 < _len2; _key2++) {
-    rest[_key2 - 3] = arguments[_key2];
+  for (var _len = arguments.length, rest = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
+    rest[_key - 3] = arguments[_key];
   }
@@ -229,0 +211,0 @@

index.d.ts

@@ -1,21 +0,99 @@
-declare module "@reach/dialog" {
-  import * as React from "react";
+/**
+ * An accessible dialog or "modal" window.
+ *
+ * @see Docs     https://reacttraining.com/reach-ui/dialog
+ * @see Source   https://github.com/reach/reach-ui/tree/master/packages/dialog
+ * @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal
+ */
 
-  export type DialogProps = {
-    isOpen?: boolean;
-    onDismiss?: () => void;
-    children?: React.ReactNode;
-  } & React.HTMLProps<HTMLDivElement>;
+import * as React from "react";
 
-  export type DialogOverlayProps = {
-    initialFocusRef?: React.RefObject<HTMLElement>;
-  } & DialogProps;
+/**
+ * @see Docs https://reacttraining.com/reach-ui/dialog#dialog-props
+ */
+export type DialogProps = {
+  /**
+   * Controls whether the dialog is open or not.
+   *
+   * @see Docs https://reacttraining.com/reach-ui/dialog#dialog-isopen
+   */
+  isOpen?: boolean;
+  /**
+   * This function is called whenever the user hits "Escape" or clicks outside
+   * the dialog. _It's important to close the dialog `onDismiss`_.
+   *
+   * The only time you shouldn't close the dialog on dismiss is when the dialog
+   * requires a choice and none of them are "cancel". For example, perhaps two
+   * records need to be merged and the user needs to pick the surviving record.
+   * Neither choice is less destructive than the other, so in these cases you
+   * may want to alert the user they need to a make a choice on dismiss instead
+   * of closing the dialog.
+   *
+   * @see Docs https://reacttraining.com/reach-ui/dialog#dialog-ondismiss
+   */
+  onDismiss?: () => void;
+  /**
+   * Accepts any renderable content.
+   *
+   * @see Docs https://reacttraining.com/reach-ui/dialog#dialog-children
+   */
+  children?: React.ReactNode;
+} & React.HTMLProps<HTMLDivElement>;
 
-  export type DialogContentProps = {
-    children?: React.ReactNode;
-  } & React.HTMLProps<HTMLDivElement>;
+/**
+ * @see Docs https://reacttraining.com/reach-ui/dialog#dialogoverlay-props
+ */
+export type DialogOverlayProps = {
+  /**
+   * By default the first focusable element will receive focus when the dialog
+   * opens but you can provide a ref to focus instead.
+   *
+   * @see Docs https://reacttraining.com/reach-ui/dialog#dialogoverlay-initialfocusref
+   */
+  initialFocusRef?: React.Ref<any>;
+} & DialogProps;
 
-  export const Dialog: React.FunctionComponent<DialogProps>;
-  export const DialogOverlay: React.FunctionComponent<DialogOverlayProps>;
-  export const DialogContent: React.FunctionComponent<DialogContentProps>;
-}
+/**
+ * @see Docs https://reacttraining.com/reach-ui/dialog#dialogcontent-props
+ */
+export type DialogContentProps = {
+  /**
+   * Accepts any renderable content.
+   *
+   * @see Docs https://reacttraining.com/reach-ui/dialog#dialogcontent-children
+   */
+  children?: React.ReactNode;
+} & React.HTMLProps<HTMLDivElement>;
+
+/**
+ * High-level component to render a modal dialog window over the top of the page
+ * (or another dialog).
+ *
+ * @see Docs https://reacttraining.com/reach-ui/dialog#dialog
+ */
+declare const Dialog: React.FunctionComponent<DialogProps>;
+
+/**
+ * Low-level component if you need more control over the styles or rendering of
+ * the dialog overlay.
+ *
+ * Note: You must render a `DialogContent` inside.
+ *
+ * @see Docs https://reacttraining.com/reach-ui/dialog#dialogoverlay
+ */
+declare const DialogOverlay: React.FunctionComponent<DialogOverlayProps>;
+
+/**
+ * Low-level component if you need more control over the styles or rendering of
+ * the dialog content.
+ *
+ * Note: Must be a child of `DialogOverlay`.
+ *
+ * Note: You only need to use this when you are also styling `DialogOverlay`,
+ * otherwise you can use the high-level `Dialog` component and pass the props
+ * to it. Any props passed to `Dialog` component (besides `isOpen` and
+ * `onDismiss`) will be spread onto `DialogContent`.
+ *
+ * @see Docs https://reacttraining.com/reach-ui/dialog#dialogcontent
+ */
+declare const DialogContent: React.FunctionComponent<DialogContentProps>;

index.js

@@ -58,3 +58,4 @@ "use strict";
 var DialogInner = _react["default"].forwardRef(function DialogInner(_ref2, forwardedRef) {
-  var initialFocusRef = _ref2.initialFocusRef,
+  var allowPinchZoom = _ref2.allowPinchZoom,
+      initialFocusRef = _ref2.initialFocusRef,
       onClick = _ref2.onClick,
@@ -65,3 +66,3 @@ _ref2$onDismiss = _ref2.onDismiss,
       onKeyDown = _ref2.onKeyDown,
-      props = _objectWithoutPropertiesLoose(_ref2, ["initialFocusRef", "onClick", "onDismiss", "onMouseDown", "onKeyDown"]);
+      props = _objectWithoutPropertiesLoose(_ref2, ["allowPinchZoom", "initialFocusRef", "onClick", "onDismiss", "onMouseDown", "onKeyDown"]);
 
@@ -72,7 +73,7 @@ var mouseDownTarget = _react["default"].useRef(null);
 
-  var ref = useForkedRef(overlayNode, forwardedRef);
+  var ref = (0, _utils.useForkedRef)(overlayNode, forwardedRef);
 
   _react["default"].useEffect(function () {
-    return createAriaHider(forwardedRef.current);
-  }, [forwardedRef]);
+    return createAriaHider(overlayNode.current);
+  }, []);
 
@@ -87,3 +88,5 @@ return _react["default"].createElement(_reactFocusLock["default"], {
     }
-  }, _react["default"].createElement(_reactRemoveScroll.RemoveScroll, null, _react["default"].createElement("div", _extends({
+  }, _react["default"].createElement(_reactRemoveScroll.RemoveScroll, {
+    allowPinchZoom: allowPinchZoom
+  }, _react["default"].createElement("div", _extends({
     "data-reach-dialog-overlay": true,
@@ -215,23 +218,2 @@ onClick: (0, _utils.wrapEvent)(onClick, function (event) {
   };
-} // TODO: Remove and import from @reach/utils once it's been added to the package
-
-
-function useForkedRef() {
-  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
-    refs[_key] = arguments[_key];
-  }
-
-  return _react["default"].useMemo(function () {
-    if (refs.every(function (ref) {
-      return ref == null;
-    })) {
-      return null;
-    }
-
-    return function (node) {
-      refs.forEach(function (ref) {
-        (0, _utils.assignRef)(ref, node);
-      });
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, refs);
 }
@@ -250,4 +232,4 @@
 
-  for (var _len2 = arguments.length, rest = new Array(_len2 > 3 ? _len2 - 3 : 0), _key2 = 3; _key2 < _len2; _key2++) {
-    rest[_key2 - 3] = arguments[_key2];
+  for (var _len = arguments.length, rest = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
+    rest[_key - 3] = arguments[_key];
   }
@@ -254,0 +236,0 @@

package.json

 {
   "name": "@reach/dialog",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Accessible React Modal Dialog.",
@@ -13,7 +13,7 @@ "author": "React Training <[e-mail]>",
   "dependencies": {
-    "@reach/portal": "^0.4.0",
-    "@reach/utils": "^0.4.0",
+    "@reach/portal": "^0.5.0",
+    "@reach/utils": "^0.5.0",
     "prop-types": "^15.7.2",
-    "react-focus-lock": "^2.2.0",
-    "react-remove-scroll": "^2.1.1"
+    "react-focus-lock": "^2.2.1",
+    "react-remove-scroll": "^2.2.0"
   },
@@ -25,6 +25,6 @@ "peerDependencies": {
   "devDependencies": {
-    "@reach/menu-button": "^0.4.0",
-    "react": "^16.10.2",
+    "@reach/menu-button": "^0.5.0",
+    "react": "^16.11.0",
     "react-spring": "^8.0.27",
-    "react-test-renderer": "^16.10.2"
+    "react-test-renderer": "^16.11.0"
   },
@@ -39,3 +39,3 @@ "files": [
   ],
-  "gitHead": "0f3d2c7e530cd80e1d1bd338182ac89a3ba23999"
+  "gitHead": "7e33672d882cd6df77ac8cdb76b6b4a21dbf28c2"
 }

src/index.js

 import React from "react";
 import Portal from "@reach/portal";
-import { checkStyles, wrapEvent, assignRef } from "@reach/utils";
+import { checkStyles, wrapEvent, useForkedRef } from "@reach/utils";
 import FocusLock from "react-focus-lock";
@@ -38,2 +38,3 @@ import { RemoveScroll } from "react-remove-scroll";
   {
+    allowPinchZoom,
     initialFocusRef,
@@ -52,3 +53,3 @@ onClick,
 
-  React.useEffect(() => createAriaHider(forwardedRef.current), [forwardedRef]);
+  React.useEffect(() => createAriaHider(overlayNode.current), []);
 
@@ -65,3 +66,3 @@ return (
     >
-      <RemoveScroll>
+      <RemoveScroll allowPinchZoom={allowPinchZoom}>
         <div
@@ -193,17 +194,2 @@ data-reach-dialog-overlay
 
-// TODO: Remove and import from @reach/utils once it's been added to the package
-function useForkedRef(...refs) {
-  return React.useMemo(() => {
-    if (refs.every(ref => ref == null)) {
-      return null;
-    }
-    return node => {
-      refs.forEach(ref => {
-        assignRef(ref, node);
-      });
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, refs);
-}
-
 function ariaLabelType(props, name, compName, ...rest) {
@@ -210,0 +196,0 @@ const details =

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

28395

increased by5.02%

Lines of code

682

increased by5.25%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• + Added@reach/component-component@0.5.0(transitive)

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

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

• - Removed@reach/component-component@0.4.0(transitive)

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

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

• Updated@reach/portal@^0.5.0

• Updated@reach/utils@^0.5.0

• Updatedreact-focus-lock@^2.2.1

• Updatedreact-remove-scroll@^2.2.0