@reach/dialog - npm Package Compare versions

Comparing version 0.10.0 to 0.10.1

dist/dialog.cjs.development.js

@@ -117,3 +117,5 @@ 'use strict';
       onKeyDown = _ref2.onKeyDown,
-      props = _objectWithoutPropertiesLoose(_ref2, ["allowPinchZoom", "initialFocusRef", "onClick", "onDismiss", "onMouseDown", "onKeyDown"]);
+      _ref2$unstable_lockFo = _ref2.unstable_lockFocusAcrossFrames,
+      unstable_lockFocusAcrossFrames = _ref2$unstable_lockFo === void 0 ? true : _ref2$unstable_lockFo,
+      props = _objectWithoutPropertiesLoose(_ref2, ["allowPinchZoom", "initialFocusRef", "onClick", "onDismiss", "onMouseDown", "onKeyDown", "unstable_lockFocusAcrossFrames"]);
 
@@ -153,3 +155,4 @@ var mouseDownTarget = React.useRef(null);
     returnFocus: true,
-    onActivation: activateFocusLock
+    onActivation: activateFocusLock,
+    crossFrame: unstable_lockFocusAcrossFrames
   }, React__default.createElement(reactRemoveScroll.RemoveScroll, {
@@ -156,0 +159,0 @@ allowPinchZoom: allowPinchZoom

dist/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 n=require("react"),o=e(n),t=e(require("@reach/portal")),r=require("@reach/utils"),i=e(require("react-focus-lock")),a=require("react-remove-scroll");function c(e,n){if(null==e)return{};var o,t,r={},i=Object.keys(e);for(t=0;t<i.length;t++)n.indexOf(o=i[t])>=0||(r[o]=e[o]);return r}e(require("prop-types"));var u=n.forwardRef((function(e,i){var a=e.isOpen,u=void 0===a||a,s=c(e,["isOpen"]);return n.useEffect((function(){return r.checkStyles("dialog")}),[]),n.useEffect((function(){u?window.__REACH_DISABLE_TOOLTIPS=!0:window.requestAnimationFrame((function(){window.__REACH_DISABLE_TOOLTIPS=!1}))}),[u]),u?o.createElement(t,{"data-reach-dialog-wrapper":""},o.createElement(l,Object.assign({ref:i},s))):null})),l=n.forwardRef((function(e,t){var u=e.allowPinchZoom,l=e.initialFocusRef,s=e.onClick,f=e.onDismiss,d=void 0===f?r.noop:f,p=e.onMouseDown,v=e.onKeyDown,w=c(e,["allowPinchZoom","initialFocusRef","onClick","onDismiss","onMouseDown","onKeyDown"]),m=n.useRef(null),E=n.useRef(null),h=r.useForkedRef(E,t),g=n.useCallback((function(){l&&l.current&&l.current.focus()}),[l]);return n.useEffect((function(){return E.current?(n=[],o=[],t=r.getOwnerDocument(e=E.current)||document,e?(Array.prototype.forEach.call(t.querySelectorAll("body > *"),(function(t){var r,i;if(t!==(null===(r=e.parentNode)||void 0===r||null===(i=r.parentNode)||void 0===i?void 0:i.parentNode)){var a=t.getAttribute("aria-hidden");null!==a&&"false"!==a||(n.push(a),o.push(t),t.setAttribute("aria-hidden","true"))}})),function(){o.forEach((function(e,o){var t=n[o];null===t?e.removeAttribute("aria-hidden"):e.setAttribute("aria-hidden",t)}))}):r.noop):void 0;var e,n,o,t}),[]),o.createElement(i,{autoFocus:!0,returnFocus:!0,onActivation:g},o.createElement(a.RemoveScroll,{allowPinchZoom:u},o.createElement("div",Object.assign({},w,{ref:h,"data-reach-dialog-overlay":"",onClick:r.wrapEvent(s,(function(e){m.current===e.target&&(e.stopPropagation(),d(e))})),onKeyDown:r.wrapEvent(v,(function(e){"Escape"===e.key&&(e.stopPropagation(),d(e))})),onMouseDown:r.wrapEvent(p,(function(e){m.current=e.target}))}))))})),s=n.forwardRef((function(e,n){var t=e.onClick,i=c(e,["onClick","onKeyDown"]);return o.createElement("div",Object.assign({"aria-modal":"true",role:"dialog",tabIndex:-1},i,{ref:n,"data-reach-dialog-content":"",onClick:r.wrapEvent(t,(function(e){e.stopPropagation()}))}))})),f=n.forwardRef((function(e,n){var t=e.isOpen,i=e.onDismiss,a=void 0===i?r.noop:i,l=e.initialFocusRef,f=e.allowPinchZoom,d=c(e,["isOpen","onDismiss","initialFocusRef","allowPinchZoom"]);return o.createElement(u,{initialFocusRef:l,allowPinchZoom:f,isOpen:t,onDismiss:a},o.createElement(s,Object.assign({ref:n},d)))}));exports.Dialog=f,exports.DialogContent=s,exports.DialogOverlay=u,exports.default=f;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var o=require("react"),n=e(o),r=e(require("@reach/portal")),t=require("@reach/utils"),i=e(require("react-focus-lock")),a=require("react-remove-scroll");function c(e,o){if(null==e)return{};var n,r,t={},i=Object.keys(e);for(r=0;r<i.length;r++)o.indexOf(n=i[r])>=0||(t[n]=e[n]);return t}e(require("prop-types"));var u=o.forwardRef((function(e,i){var a=e.isOpen,u=void 0===a||a,s=c(e,["isOpen"]);return o.useEffect((function(){return t.checkStyles("dialog")}),[]),o.useEffect((function(){u?window.__REACH_DISABLE_TOOLTIPS=!0:window.requestAnimationFrame((function(){window.__REACH_DISABLE_TOOLTIPS=!1}))}),[u]),u?n.createElement(r,{"data-reach-dialog-wrapper":""},n.createElement(l,Object.assign({ref:i},s))):null})),l=o.forwardRef((function(e,r){var u=e.allowPinchZoom,l=e.initialFocusRef,s=e.onClick,f=e.onDismiss,d=void 0===f?t.noop:f,p=e.onMouseDown,v=e.onKeyDown,m=e.unstable_lockFocusAcrossFrames,w=void 0===m||m,E=c(e,["allowPinchZoom","initialFocusRef","onClick","onDismiss","onMouseDown","onKeyDown","unstable_lockFocusAcrossFrames"]),h=o.useRef(null),g=o.useRef(null),D=t.useForkedRef(g,r),O=o.useCallback((function(){l&&l.current&&l.current.focus()}),[l]);return o.useEffect((function(){return g.current?(o=[],n=[],r=t.getOwnerDocument(e=g.current)||document,e?(Array.prototype.forEach.call(r.querySelectorAll("body > *"),(function(r){var t,i;if(r!==(null===(t=e.parentNode)||void 0===t||null===(i=t.parentNode)||void 0===i?void 0:i.parentNode)){var a=r.getAttribute("aria-hidden");null!==a&&"false"!==a||(o.push(a),n.push(r),r.setAttribute("aria-hidden","true"))}})),function(){n.forEach((function(e,n){var r=o[n];null===r?e.removeAttribute("aria-hidden"):e.setAttribute("aria-hidden",r)}))}):t.noop):void 0;var e,o,n,r}),[]),n.createElement(i,{autoFocus:!0,returnFocus:!0,onActivation:O,crossFrame:w},n.createElement(a.RemoveScroll,{allowPinchZoom:u},n.createElement("div",Object.assign({},E,{ref:D,"data-reach-dialog-overlay":"",onClick:t.wrapEvent(s,(function(e){h.current===e.target&&(e.stopPropagation(),d(e))})),onKeyDown:t.wrapEvent(v,(function(e){"Escape"===e.key&&(e.stopPropagation(),d(e))})),onMouseDown:t.wrapEvent(p,(function(e){h.current=e.target}))}))))})),s=o.forwardRef((function(e,o){var r=e.onClick,i=c(e,["onClick","onKeyDown"]);return n.createElement("div",Object.assign({"aria-modal":"true",role:"dialog",tabIndex:-1},i,{ref:o,"data-reach-dialog-content":"",onClick:t.wrapEvent(r,(function(e){e.stopPropagation()}))}))})),f=o.forwardRef((function(e,o){var r=e.isOpen,i=e.onDismiss,a=void 0===i?t.noop:i,l=e.initialFocusRef,f=e.allowPinchZoom,d=c(e,["isOpen","onDismiss","initialFocusRef","allowPinchZoom"]);return n.createElement(u,{initialFocusRef:l,allowPinchZoom:f,isOpen:r,onDismiss:a},n.createElement(s,Object.assign({ref:o},d)))}));exports.Dialog=f,exports.DialogContent=s,exports.DialogOverlay=u,exports.default=f;
 //# sourceMappingURL=dialog.cjs.production.min.js.map

dist/dialog.esm.js

@@ -110,3 +110,5 @@ import React, { forwardRef, useEffect, useRef, useCallback } from 'react';
       onKeyDown = _ref2.onKeyDown,
-      props = _objectWithoutPropertiesLoose(_ref2, ["allowPinchZoom", "initialFocusRef", "onClick", "onDismiss", "onMouseDown", "onKeyDown"]);
+      _ref2$unstable_lockFo = _ref2.unstable_lockFocusAcrossFrames,
+      unstable_lockFocusAcrossFrames = _ref2$unstable_lockFo === void 0 ? true : _ref2$unstable_lockFo,
+      props = _objectWithoutPropertiesLoose(_ref2, ["allowPinchZoom", "initialFocusRef", "onClick", "onDismiss", "onMouseDown", "onKeyDown", "unstable_lockFocusAcrossFrames"]);
 
@@ -146,3 +148,4 @@ var mouseDownTarget = useRef(null);
     returnFocus: true,
-    onActivation: activateFocusLock
+    onActivation: activateFocusLock,
+    crossFrame: unstable_lockFocusAcrossFrames
   }, React.createElement(RemoveScroll, {
@@ -149,0 +152,0 @@ allowPinchZoom: allowPinchZoom

dist/index.d.ts

@@ -56,2 +56,20 @@ /**
     initialFocusRef?: React.RefObject<any> | undefined;
+    /**
+     * By default, React Focus Lock prevents focus from being moved outside of the
+     * locked element even if the thing trying to take focus is in another frame.
+     * Normally this is what you want, as an iframe is typically going to be a
+     * part of your page content. But in some situations, like when using Code
+     * Sandbox, you can't use any of the controls or the editor in the sandbox
+     * while dialog is open because of the focus lock.
+     *
+     * This prop may have some negative side effects and unintended consequences,
+     * and it opens questions about how we might distinguish frames that *should*
+     * steal focus from those that shouldn't. Perhaps it's best for app devs to
+     * decide, and if they use this prop we should advise them to imperatively
+     * assign a -1 tabIndex to other iframes that are a part of the page content
+     * when the dialog is open.
+     *
+     * https://github.com/reach/reach-ui/issues/536
+     */
+    unstable_lockFocusAcrossFrames?: boolean | undefined;
 } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
@@ -135,2 +153,20 @@ /**
     initialFocusRef?: React.RefObject<any> | undefined;
+    /**
+     * By default, React Focus Lock prevents focus from being moved outside of the
+     * locked element even if the thing trying to take focus is in another frame.
+     * Normally this is what you want, as an iframe is typically going to be a
+     * part of your page content. But in some situations, like when using Code
+     * Sandbox, you can't use any of the controls or the editor in the sandbox
+     * while dialog is open because of the focus lock.
+     *
+     * This prop may have some negative side effects and unintended consequences,
+     * and it opens questions about how we might distinguish frames that *should*
+     * steal focus from those that shouldn't. Perhaps it's best for app devs to
+     * decide, and if they use this prop we should advise them to imperatively
+     * assign a -1 tabIndex to other iframes that are a part of the page content
+     * when the dialog is open.
+     *
+     * https://github.com/reach/reach-ui/issues/536
+     */
+    unstable_lockFocusAcrossFrames?: boolean | undefined;
 } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
@@ -175,3 +211,21 @@ /**
     initialFocusRef?: React.RefObject<any>;
+    /**
+     * By default, React Focus Lock prevents focus from being moved outside of the
+     * locked element even if the thing trying to take focus is in another frame.
+     * Normally this is what you want, as an iframe is typically going to be a
+     * part of your page content. But in some situations, like when using Code
+     * Sandbox, you can't use any of the controls or the editor in the sandbox
+     * while dialog is open because of the focus lock.
+     *
+     * This prop may have some negative side effects and unintended consequences,
+     * and it opens questions about how we might distinguish frames that *should*
+     * steal focus from those that shouldn't. Perhaps it's best for app devs to
+     * decide, and if they use this prop we should advise them to imperatively
+     * assign a -1 tabIndex to other iframes that are a part of the page content
+     * when the dialog is open.
+     *
+     * https://github.com/reach/reach-ui/issues/536
+     */
+    unstable_lockFocusAcrossFrames?: boolean;
 } & React.HTMLAttributes<HTMLDivElement>;
 export default Dialog;

package.json

 {
   "name": "@reach/dialog",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "description": "Accessible React Modal Dialog.",
@@ -16,8 +16,8 @@ "author": "React Training <[e-mail]>",
   "dependencies": {
-    "@reach/portal": "^0.10.0",
-    "@reach/utils": "^0.10.0",
+    "@reach/portal": "^0.10.1",
+    "@reach/utils": "^0.10.1",
     "prop-types": "^15.7.2",
-    "react-focus-lock": "^2.2.1",
-    "react-remove-scroll": "^2.2.0",
-    "tslib": "^1.10.0"
+    "react-focus-lock": "^2.3.1",
+    "react-remove-scroll": "^2.3.0",
+    "tslib": "^1.11.1"
   },
@@ -36,3 +36,3 @@ "peerDependencies": {
   ],
-  "gitHead": "e95268bdcebc7f0b5311beff4b6a8e29636decfe"
+  "gitHead": "c279bc0fb9ae84aa77306c5f1a9909d088bc665c"
 }

No alert changes

Improved metrics

Total package byte prevSize

92034

increased by8.78%

Lines of code

811

increased by7.99%

Dependency changes

• Updated@reach/portal@^0.10.1

• Updated@reach/utils@^0.10.1

• Updatedreact-focus-lock@^2.3.1

• Updatedreact-remove-scroll@^2.3.0

• Updatedtslib@^1.11.1