@reach/dialog - npm Package Compare versions

Comparing version 0.6.4 to 0.7.0

es/index.js

@@ -5,2 +5,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); }
 
+/* eslint-disable jsx-a11y/no-static-element-interactions */
 import React, { forwardRef, useCallback, useEffect, useRef } from "react";
@@ -11,3 +12,8 @@ import Portal from "@reach/portal";
 import { RemoveScroll } from "react-remove-scroll";
-import PropTypes from "prop-types"; ////////////////////////////////////////////////////////////////////////////////
+import PropTypes from "prop-types";
+var overlayPropTypes = {
+  initialFocusRef: function initialFocusRef() {},
+  allowPinchZoom: PropTypes.bool,
+  onDismiss: PropTypes.func
+}; ////////////////////////////////////////////////////////////////////////////////
 // DialogOverlay
@@ -20,11 +26,9 @@
 
-  var ownRef = useRef(null);
-  var ref = forwardedRef || ownRef;
   useEffect(function () {
-    checkStyles("dialog");
+    return checkStyles("dialog");
   }, []);
   return isOpen ? React.createElement(Portal, {
-    "data-reach-dialog-wrapper": true
+    "data-reach-dialog-wrapper": ""
   }, React.createElement(DialogInner, _extends({
-    ref: ref
+    ref: forwardedRef
   }, props))) : null;
@@ -35,5 +39,5 @@ });
 if (process.env.NODE_ENV !== "production") {
-  DialogOverlay.propTypes = {
-    initialFocusRef: function initialFocusRef() {}
-  };
+  DialogOverlay.propTypes = _extends({}, overlayPropTypes, {
+    isOpen: PropTypes.bool
+  });
 } ////////////////////////////////////////////////////////////////////////////////
@@ -56,5 +60,2 @@ // DialogInner
   var ref = useForkedRef(overlayNode, forwardedRef);
-  useEffect(function () {
-    return createAriaHider(overlayNode.current);
-  }, []);
   var activateFocusLock = useCallback(function () {
@@ -65,2 +66,24 @@ if (initialFocusRef && initialFocusRef.current) {
   }, [initialFocusRef]);
+
+  function handleClick(event) {
+    if (mouseDownTarget.current === event.target) {
+      event.stopPropagation();
+      onDismiss(event);
+    }
+  }
+
+  function handleKeyDown(event) {
+    if (event.key === "Escape") {
+      event.stopPropagation();
+      onDismiss(event);
+    }
+  }
+
+  function handleMouseDown(event) {
+    mouseDownTarget.current = event.target;
+  }
+
+  useEffect(function () {
+    return createAriaHider(overlayNode.current);
+  }, []);
   return React.createElement(FocusLock, {
@@ -72,25 +95,24 @@ autoFocus: true,
     allowPinchZoom: allowPinchZoom
-  }, React.createElement("div", _extends({
-    "data-reach-dialog-overlay": true,
-    onClick: wrapEvent(onClick, function (event) {
-      if (mouseDownTarget.current === event.target) {
-        event.stopPropagation();
-        onDismiss(event);
-      }
-    }),
-    onMouseDown: wrapEvent(onMouseDown, function (event) {
-      mouseDownTarget.current = event.target;
-    }),
-    onKeyDown: wrapEvent(onKeyDown, function (event) {
-      if (event.key === "Escape") {
-        event.stopPropagation();
-        onDismiss(event);
-      }
-    }),
-    ref: ref
-  }, props))));
+  }, React.createElement("div", _extends({}, props, {
+    ref: ref,
+    "data-reach-dialog-overlay": ""
+    /*
+     * We can ignore the `no-static-element-interactions` warning here
+     * because our overlay is only designed to capture any outside
+     * clicks, not to serve as a clickable element itself.
+     */
+    ,
+    onClick: wrapEvent(onClick, handleClick),
+    onKeyDown: wrapEvent(onKeyDown, handleKeyDown),
+    onMouseDown: wrapEvent(onMouseDown, handleMouseDown)
+  }))));
 });
-DialogOverlay.displayName = "DialogOverlay"; ////////////////////////////////////////////////////////////////////////////////
+DialogOverlay.displayName = "DialogOverlay";
+
+if (process.env.NODE_ENV !== "production") {
+  DialogOverlay.propTypes = _extends({}, overlayPropTypes);
+} ////////////////////////////////////////////////////////////////////////////////
 // DialogContent
 
+
 export var DialogContent = forwardRef(function DialogContent(_ref3, forwardedRef) {
@@ -101,12 +123,12 @@ var onClick = _ref3.onClick,
 
-  return React.createElement("div", _extends({
-    role: "dialog",
+  return React.createElement("div", _extends({}, props, {
+    ref: forwardedRef,
+    "data-reach-dialog-content": "",
     "aria-modal": "true",
-    "data-reach-dialog-content": true,
-    tabIndex: "-1",
     onClick: wrapEvent(onClick, function (event) {
       event.stopPropagation();
     }),
-    ref: forwardedRef
-  }, props));
+    role: "dialog",
+    tabIndex: -1
+  }));
 });
@@ -131,10 +153,8 @@ DialogContent.displayName = "DialogContent";
 
-  var ownRef = useRef(null);
-  var ref = forwardedRef || ownRef;
   return React.createElement(DialogOverlay, {
+    initialFocusRef: initialFocusRef,
     isOpen: isOpen,
-    onDismiss: onDismiss,
-    initialFocusRef: initialFocusRef
+    onDismiss: onDismiss
   }, React.createElement(DialogContent, _extends({
-    ref: ref
+    ref: forwardedRef
   }, props)));
@@ -141,0 +161,0 @@ });

index.d.ts

@@ -41,2 +41,9 @@ /**
   children?: React.ReactNode;
+  /**
+   * 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>;
 } & React.HTMLProps<HTMLDivElement>;
@@ -54,9 +61,2 @@
   allowPinchZoom?: boolean;
-  /**
-   * 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;
@@ -63,0 +63,0 @@

index.js

@@ -28,4 +28,9 @@ "use strict";
 
-////////////////////////////////////////////////////////////////////////////////
+var overlayPropTypes = {
+  initialFocusRef: function initialFocusRef() {},
+  allowPinchZoom: _propTypes["default"].bool,
+  onDismiss: _propTypes["default"].func
+}; ////////////////////////////////////////////////////////////////////////////////
 // DialogOverlay
+
 var DialogOverlay = (0, _react.forwardRef)(function DialogOverlay(_ref, forwardedRef) {
@@ -36,11 +41,9 @@ var _ref$isOpen = _ref.isOpen,
 
-  var ownRef = (0, _react.useRef)(null);
-  var ref = forwardedRef || ownRef;
   (0, _react.useEffect)(function () {
-    (0, _utils.checkStyles)("dialog");
+    return (0, _utils.checkStyles)("dialog");
   }, []);
   return isOpen ? _react["default"].createElement(_portal["default"], {
-    "data-reach-dialog-wrapper": true
+    "data-reach-dialog-wrapper": ""
   }, _react["default"].createElement(DialogInner, _extends({
-    ref: ref
+    ref: forwardedRef
   }, props))) : null;
@@ -52,5 +55,5 @@ });
 if (process.env.NODE_ENV !== "production") {
-  DialogOverlay.propTypes = {
-    initialFocusRef: function initialFocusRef() {}
-  };
+  DialogOverlay.propTypes = _extends({}, overlayPropTypes, {
+    isOpen: _propTypes["default"].bool
+  });
 } ////////////////////////////////////////////////////////////////////////////////
@@ -73,5 +76,2 @@ // DialogInner
   var ref = (0, _utils.useForkedRef)(overlayNode, forwardedRef);
-  (0, _react.useEffect)(function () {
-    return createAriaHider(overlayNode.current);
-  }, []);
   var activateFocusLock = (0, _react.useCallback)(function () {
@@ -82,2 +82,24 @@ if (initialFocusRef && initialFocusRef.current) {
   }, [initialFocusRef]);
+
+  function handleClick(event) {
+    if (mouseDownTarget.current === event.target) {
+      event.stopPropagation();
+      onDismiss(event);
+    }
+  }
+
+  function handleKeyDown(event) {
+    if (event.key === "Escape") {
+      event.stopPropagation();
+      onDismiss(event);
+    }
+  }
+
+  function handleMouseDown(event) {
+    mouseDownTarget.current = event.target;
+  }
+
+  (0, _react.useEffect)(function () {
+    return createAriaHider(overlayNode.current);
+  }, []);
   return _react["default"].createElement(_reactFocusLock["default"], {
@@ -89,25 +111,24 @@ autoFocus: true,
     allowPinchZoom: allowPinchZoom
-  }, _react["default"].createElement("div", _extends({
-    "data-reach-dialog-overlay": true,
-    onClick: (0, _utils.wrapEvent)(onClick, function (event) {
-      if (mouseDownTarget.current === event.target) {
-        event.stopPropagation();
-        onDismiss(event);
-      }
-    }),
-    onMouseDown: (0, _utils.wrapEvent)(onMouseDown, function (event) {
-      mouseDownTarget.current = event.target;
-    }),
-    onKeyDown: (0, _utils.wrapEvent)(onKeyDown, function (event) {
-      if (event.key === "Escape") {
-        event.stopPropagation();
-        onDismiss(event);
-      }
-    }),
-    ref: ref
-  }, props))));
+  }, _react["default"].createElement("div", _extends({}, props, {
+    ref: ref,
+    "data-reach-dialog-overlay": ""
+    /*
+     * We can ignore the `no-static-element-interactions` warning here
+     * because our overlay is only designed to capture any outside
+     * clicks, not to serve as a clickable element itself.
+     */
+    ,
+    onClick: (0, _utils.wrapEvent)(onClick, handleClick),
+    onKeyDown: (0, _utils.wrapEvent)(onKeyDown, handleKeyDown),
+    onMouseDown: (0, _utils.wrapEvent)(onMouseDown, handleMouseDown)
+  }))));
 });
-DialogOverlay.displayName = "DialogOverlay"; ////////////////////////////////////////////////////////////////////////////////
+DialogOverlay.displayName = "DialogOverlay";
+
+if (process.env.NODE_ENV !== "production") {
+  DialogOverlay.propTypes = _extends({}, overlayPropTypes);
+} ////////////////////////////////////////////////////////////////////////////////
 // DialogContent
 
+
 var DialogContent = (0, _react.forwardRef)(function DialogContent(_ref3, forwardedRef) {
@@ -118,12 +139,12 @@ var onClick = _ref3.onClick,
 
-  return _react["default"].createElement("div", _extends({
-    role: "dialog",
+  return _react["default"].createElement("div", _extends({}, props, {
+    ref: forwardedRef,
+    "data-reach-dialog-content": "",
     "aria-modal": "true",
-    "data-reach-dialog-content": true,
-    tabIndex: "-1",
     onClick: (0, _utils.wrapEvent)(onClick, function (event) {
       event.stopPropagation();
     }),
-    ref: forwardedRef
-  }, props));
+    role: "dialog",
+    tabIndex: -1
+  }));
 });
@@ -149,10 +170,8 @@ exports.DialogContent = DialogContent;
 
-  var ownRef = (0, _react.useRef)(null);
-  var ref = forwardedRef || ownRef;
   return _react["default"].createElement(DialogOverlay, {
+    initialFocusRef: initialFocusRef,
     isOpen: isOpen,
-    onDismiss: onDismiss,
-    initialFocusRef: initialFocusRef
+    onDismiss: onDismiss
   }, _react["default"].createElement(DialogContent, _extends({
-    ref: ref
+    ref: forwardedRef
   }, props)));
@@ -159,0 +178,0 @@ });

package.json

 {
   "name": "@reach/dialog",
-  "version": "0.6.4",
+  "version": "0.7.0",
   "description": "Accessible React Modal Dialog.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/reach/reach-ui.git",
+    "directory": "packages/dialog"
+  },
   "author": "React Training <[e-mail]>",
@@ -13,4 +18,4 @@ "license": "MIT",
   "dependencies": {
-    "@reach/portal": "^0.6.2",
-    "@reach/utils": "^0.6.4",
+    "@reach/portal": "^0.7.0",
+    "@reach/utils": "^0.7.0",
     "prop-types": "^15.7.2",
@@ -32,3 +37,3 @@ "react-focus-lock": "^2.2.1",
   ],
-  "gitHead": "c20cdf7f2dd6b9eabe5461138daf320e2833aa41"
+  "gitHead": "c6c10662e6eaf229594e4d6e6a38d8c9baa35ffa"
 }

src/index.js

@@ -0,1 +1,3 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+
 import React, { forwardRef, useCallback, useEffect, useRef } from "react";
@@ -8,2 +10,8 @@ import Portal from "@reach/portal";
 
+const overlayPropTypes = {
+  initialFocusRef: () => {},
+  allowPinchZoom: PropTypes.bool,
+  onDismiss: PropTypes.func
+};
+
 ////////////////////////////////////////////////////////////////////////////////
@@ -16,11 +24,6 @@ // DialogOverlay
 ) {
-  const ownRef = useRef(null);
-  const ref = forwardedRef || ownRef;
-  useEffect(() => {
-    checkStyles("dialog");
-  }, []);
-
+  useEffect(() => checkStyles("dialog"), []);
   return isOpen ? (
-    <Portal data-reach-dialog-wrapper>
-      <DialogInner ref={ref} {...props} />
+    <Portal data-reach-dialog-wrapper="">
+      <DialogInner ref={forwardedRef} {...props} />
     </Portal>
@@ -33,3 +36,4 @@ ) : null;
   DialogOverlay.propTypes = {
-    initialFocusRef: () => {}
+    ...overlayPropTypes,
+    isOpen: PropTypes.bool
   };
@@ -57,4 +61,2 @@ }
 
-  useEffect(() => createAriaHider(overlayNode.current), []);
-
   const activateFocusLock = useCallback(() => {
@@ -66,2 +68,22 @@ if (initialFocusRef && initialFocusRef.current) {
 
+  function handleClick(event) {
+    if (mouseDownTarget.current === event.target) {
+      event.stopPropagation();
+      onDismiss(event);
+    }
+  }
+
+  function handleKeyDown(event) {
+    if (event.key === "Escape") {
+      event.stopPropagation();
+      onDismiss(event);
+    }
+  }
+
+  function handleMouseDown(event) {
+    mouseDownTarget.current = event.target;
+  }
+
+  useEffect(() => createAriaHider(overlayNode.current), []);
+
   return (
@@ -71,20 +93,13 @@ <FocusLock autoFocus returnFocus onActivation={activateFocusLock}>
         <div
-          data-reach-dialog-overlay
-          onClick={wrapEvent(onClick, event => {
-            if (mouseDownTarget.current === event.target) {
-              event.stopPropagation();
-              onDismiss(event);
-            }
-          })}
-          onMouseDown={wrapEvent(onMouseDown, event => {
-            mouseDownTarget.current = event.target;
-          })}
-          onKeyDown={wrapEvent(onKeyDown, event => {
-            if (event.key === "Escape") {
-              event.stopPropagation();
-              onDismiss(event);
-            }
-          })}
+          {...props}
           ref={ref}
-          {...props}
+          data-reach-dialog-overlay=""
+          /*
+           * We can ignore the `no-static-element-interactions` warning here
+           * because our overlay is only designed to capture any outside
+           * clicks, not to serve as a clickable element itself.
+           */
+          onClick={wrapEvent(onClick, handleClick)}
+          onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}
+          onMouseDown={wrapEvent(onMouseDown, handleMouseDown)}
         />
@@ -97,2 +112,7 @@ </RemoveScroll>
 DialogOverlay.displayName = "DialogOverlay";
+if (__DEV__) {
+  DialogOverlay.propTypes = {
+    ...overlayPropTypes
+  };
+}
 
@@ -108,11 +128,11 @@ ////////////////////////////////////////////////////////////////////////////////
     <div
-      role="dialog"
+      {...props}
+      ref={forwardedRef}
+      data-reach-dialog-content=""
       aria-modal="true"
-      data-reach-dialog-content
-      tabIndex="-1"
       onClick={wrapEvent(onClick, event => {
         event.stopPropagation();
       })}
-      ref={forwardedRef}
-      {...props}
+      role="dialog"
+      tabIndex={-1}
     />
@@ -137,11 +157,9 @@ );
 ) {
-  const ownRef = useRef(null);
-  const ref = forwardedRef || ownRef;
   return (
     <DialogOverlay
+      initialFocusRef={initialFocusRef}
       isOpen={isOpen}
       onDismiss={onDismiss}
-      initialFocusRef={initialFocusRef}
     >
-      <DialogContent ref={ref} {...props} />
+      <DialogContent ref={forwardedRef} {...props} />
     </DialogOverlay>
@@ -148,0 +166,0 @@ );

Fixed alerts

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

31164

increased by5.05%

Lines of code

740

increased by5.71%

Worsened metrics

Number of low supply chain risk alerts

10

increased by11.11%

Dependency changes

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

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

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

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

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

• Updated@reach/portal@^0.7.0

• Updated@reach/utils@^0.7.0