@reach/dialog - npm Package Compare versions

Comparing version 0.10.4 to 0.10.5

dist/dialog.cjs.development.js

@@ -49,6 +49,9 @@ 'use strict';
 var overlayPropTypes = {
+  allowPinchZoom: PropTypes.bool,
+  dangerouslyBypassFocusLock: PropTypes.bool,
+  dangerouslyBypassScrollLock: PropTypes.bool,
+  // TODO:
   initialFocusRef: function initialFocusRef() {
     return null;
   },
-  allowPinchZoom: PropTypes.bool,
   onDismiss: PropTypes.func
@@ -112,2 +115,6 @@ }; ////////////////////////////////////////////////////////////////////////////////
   var allowPinchZoom = _ref2.allowPinchZoom,
+      _ref2$dangerouslyBypa = _ref2.dangerouslyBypassFocusLock,
+      dangerouslyBypassFocusLock = _ref2$dangerouslyBypa === void 0 ? false : _ref2$dangerouslyBypa,
+      _ref2$dangerouslyBypa2 = _ref2.dangerouslyBypassScrollLock,
+      dangerouslyBypassScrollLock = _ref2$dangerouslyBypa2 === void 0 ? false : _ref2$dangerouslyBypa2,
       initialFocusRef = _ref2.initialFocusRef,
@@ -117,7 +124,7 @@ onClick = _ref2.onClick,
       onDismiss = _ref2$onDismiss === void 0 ? utils.noop : _ref2$onDismiss,
+      onKeyDown = _ref2.onKeyDown,
       onMouseDown = _ref2.onMouseDown,
-      onKeyDown = _ref2.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"]);
+      props = _objectWithoutPropertiesLoose(_ref2, ["allowPinchZoom", "dangerouslyBypassFocusLock", "dangerouslyBypassScrollLock", "initialFocusRef", "onClick", "onDismiss", "onKeyDown", "onMouseDown", "unstable_lockFocusAcrossFrames"]);
 
@@ -158,5 +165,7 @@ var mouseDownTarget = React.useRef(null);
     onActivation: activateFocusLock,
+    disabled: dangerouslyBypassFocusLock,
     crossFrame: unstable_lockFocusAcrossFrames
   }, React__default.createElement(reactRemoveScroll.RemoveScroll, {
-    allowPinchZoom: allowPinchZoom
+    allowPinchZoom: allowPinchZoom,
+    enabled: !dangerouslyBypassScrollLock
   }, React__default.createElement("div", Object.assign({}, props, {
@@ -236,12 +245,13 @@ ref: ref,
 var Dialog = /*#__PURE__*/React.forwardRef(function Dialog(_ref4, forwardedRef) {
-  var isOpen = _ref4.isOpen,
+  var _ref4$allowPinchZoom = _ref4.allowPinchZoom,
+      allowPinchZoom = _ref4$allowPinchZoom === void 0 ? false : _ref4$allowPinchZoom,
+      initialFocusRef = _ref4.initialFocusRef,
+      isOpen = _ref4.isOpen,
       _ref4$onDismiss = _ref4.onDismiss,
       onDismiss = _ref4$onDismiss === void 0 ? utils.noop : _ref4$onDismiss,
-      initialFocusRef = _ref4.initialFocusRef,
-      allowPinchZoom = _ref4.allowPinchZoom,
-      props = _objectWithoutPropertiesLoose(_ref4, ["isOpen", "onDismiss", "initialFocusRef", "allowPinchZoom"]);
+      props = _objectWithoutPropertiesLoose(_ref4, ["allowPinchZoom", "initialFocusRef", "isOpen", "onDismiss"]);
 
   return React__default.createElement(DialogOverlay, {
+    allowPinchZoom: allowPinchZoom,
     initialFocusRef: initialFocusRef,
-    allowPinchZoom: allowPinchZoom,
     isOpen: isOpen,
@@ -248,0 +258,0 @@ onDismiss: onDismiss

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

dist/dialog.esm.js

@@ -42,6 +42,9 @@ import React, { forwardRef, useEffect, useRef, useCallback } from 'react';
 var overlayPropTypes = {
+  allowPinchZoom: PropTypes.bool,
+  dangerouslyBypassFocusLock: PropTypes.bool,
+  dangerouslyBypassScrollLock: PropTypes.bool,
+  // TODO:
   initialFocusRef: function initialFocusRef() {
     return null;
   },
-  allowPinchZoom: PropTypes.bool,
   onDismiss: PropTypes.func
@@ -105,2 +108,6 @@ }; ////////////////////////////////////////////////////////////////////////////////
   var allowPinchZoom = _ref2.allowPinchZoom,
+      _ref2$dangerouslyBypa = _ref2.dangerouslyBypassFocusLock,
+      dangerouslyBypassFocusLock = _ref2$dangerouslyBypa === void 0 ? false : _ref2$dangerouslyBypa,
+      _ref2$dangerouslyBypa2 = _ref2.dangerouslyBypassScrollLock,
+      dangerouslyBypassScrollLock = _ref2$dangerouslyBypa2 === void 0 ? false : _ref2$dangerouslyBypa2,
       initialFocusRef = _ref2.initialFocusRef,
@@ -110,7 +117,7 @@ onClick = _ref2.onClick,
       onDismiss = _ref2$onDismiss === void 0 ? noop : _ref2$onDismiss,
+      onKeyDown = _ref2.onKeyDown,
       onMouseDown = _ref2.onMouseDown,
-      onKeyDown = _ref2.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"]);
+      props = _objectWithoutPropertiesLoose(_ref2, ["allowPinchZoom", "dangerouslyBypassFocusLock", "dangerouslyBypassScrollLock", "initialFocusRef", "onClick", "onDismiss", "onKeyDown", "onMouseDown", "unstable_lockFocusAcrossFrames"]);
 
@@ -151,5 +158,7 @@ var mouseDownTarget = useRef(null);
     onActivation: activateFocusLock,
+    disabled: dangerouslyBypassFocusLock,
     crossFrame: unstable_lockFocusAcrossFrames
   }, React.createElement(RemoveScroll, {
-    allowPinchZoom: allowPinchZoom
+    allowPinchZoom: allowPinchZoom,
+    enabled: !dangerouslyBypassScrollLock
   }, React.createElement("div", Object.assign({}, props, {
@@ -229,12 +238,13 @@ ref: ref,
 var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref4, forwardedRef) {
-  var isOpen = _ref4.isOpen,
+  var _ref4$allowPinchZoom = _ref4.allowPinchZoom,
+      allowPinchZoom = _ref4$allowPinchZoom === void 0 ? false : _ref4$allowPinchZoom,
+      initialFocusRef = _ref4.initialFocusRef,
+      isOpen = _ref4.isOpen,
       _ref4$onDismiss = _ref4.onDismiss,
       onDismiss = _ref4$onDismiss === void 0 ? noop : _ref4$onDismiss,
-      initialFocusRef = _ref4.initialFocusRef,
-      allowPinchZoom = _ref4.allowPinchZoom,
-      props = _objectWithoutPropertiesLoose(_ref4, ["isOpen", "onDismiss", "initialFocusRef", "allowPinchZoom"]);
+      props = _objectWithoutPropertiesLoose(_ref4, ["allowPinchZoom", "initialFocusRef", "isOpen", "onDismiss"]);
 
   return React.createElement(DialogOverlay, {
+    allowPinchZoom: allowPinchZoom,
     initialFocusRef: initialFocusRef,
-    allowPinchZoom: allowPinchZoom,
     isOpen: isOpen,
@@ -241,0 +251,0 @@ onDismiss: onDismiss

dist/index.d.ts

@@ -22,6 +22,25 @@ /**
 export declare const DialogOverlay: React.ForwardRefExoticComponent<{
+    /**
+     * Handle zoom/pinch gestures on iOS devices when scroll locking is enabled.
+     * Defaults to `false`.
+     *
+     * @see Docs https://reacttraining.com/reach-ui/dialog#dialog-allowpinchzoom
+     */
     allowPinchZoom?: boolean | undefined;
     /**
-     * Controls whether the dialog is open or not.
+     * Accepts any renderable content.
      *
+     * @see Docs https://reacttraining.com/reach-ui/dialog#dialog-children
+     */
+    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#dialog-initialfocusref
+     */
+    initialFocusRef?: React.RefObject<any> | undefined;
+    /**
+     * Controls whether or not the dialog is open.
+     *
      * @see Docs https://reacttraining.com/reach-ui/dialog#dialog-isopen
@@ -45,15 +64,2 @@ */
     /**
-     * Accepts any renderable content.
-     *
-     * @see Docs https://reacttraining.com/reach-ui/dialog#dialog-children
-     */
-    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.RefObject<any> | undefined;
-    /**
      * By default, React Focus Lock prevents focus from being moved outside of the
@@ -76,3 +82,80 @@ * locked element even if the thing trying to take focus is in another frame.
     unstable_lockFocusAcrossFrames?: boolean | undefined;
-} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+} & React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * By default the dialog locks the focus inside it. Normally this is what you
+     * want. This prop is provided so that this feature can be disabled. This,
+     * however, is strongly discouraged.
+     *
+     * The reason it is provided is not to disable the focus lock entirely.
+     * Rather, there are certain situations where you may need more control on how
+     * the focus lock works. This should be complemented by setting up a focus
+     * lock yourself that would allow more flexibility for your specific use case.
+     *
+     * If you do set this prop to `true`, make sure you set up your own
+     * `FocusLock` component. You can likely use
+     * `react-focus-lock`, which is what Reach uses internally by default. It has
+     * various settings to allow more customization, but it takes care of a lot of
+     * hard work that you probably don't want or need to do.
+     *
+     * @see Docs https://reacttraining.com/reach-ui/dialog#dialogoverlay-dangerouslybypassfocuslock
+     * @see https://github.com/theKashey/react-focus-lock
+     * @see https://github.com/reach/reach-ui/issues/615
+     */
+    dangerouslyBypassFocusLock?: boolean | undefined;
+    /**
+     * By default the dialog locks scrolling with `react-remove-scroll`, which
+     * also injecs some styles on the body element to remove the scrollbar while
+     * maintaining its gap to prevent jank when the dialog's open state is
+     * toggled. This is almost always what you want in a dialog, but in some cases
+     * you may have the need to customize this behavior further.
+     *
+     * This prop will disable `react-remove-scroll` and allow you to compose your
+     * own scroll lock component to meet your needs. Like the
+     * `dangerouslyBypassFocusLock` prop, this is generally discouraged and should
+     * only be used if a proper fallback for managing scroll behavior is provided.
+     *
+     * @see Docs https://reacttraining.com/reach-ui/dialog#dialogoverlay-dangerouslybypassscrolllock
+     * @see https://github.com/theKashey/react-remove-scroll
+     */
+    dangerouslyBypassScrollLock?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare type DialogOverlayProps = DialogProps & {
+    /**
+     * By default the dialog locks the focus inside it. Normally this is what you
+     * want. This prop is provided so that this feature can be disabled. This,
+     * however, is strongly discouraged.
+     *
+     * The reason it is provided is not to disable the focus lock entirely.
+     * Rather, there are certain situations where you may need more control on how
+     * the focus lock works. This should be complemented by setting up a focus
+     * lock yourself that would allow more flexibility for your specific use case.
+     *
+     * If you do set this prop to `true`, make sure you set up your own
+     * `FocusLock` component. You can likely use
+     * `react-focus-lock`, which is what Reach uses internally by default. It has
+     * various settings to allow more customization, but it takes care of a lot of
+     * hard work that you probably don't want or need to do.
+     *
+     * @see Docs https://reacttraining.com/reach-ui/dialog#dialogoverlay-dangerouslybypassfocuslock
+     * @see https://github.com/theKashey/react-focus-lock
+     * @see https://github.com/reach/reach-ui/issues/615
+     */
+    dangerouslyBypassFocusLock?: boolean;
+    /**
+     * By default the dialog locks scrolling with `react-remove-scroll`, which
+     * also injecs some styles on the body element to remove the scrollbar while
+     * maintaining its gap to prevent jank when the dialog's open state is
+     * toggled. This is almost always what you want in a dialog, but in some cases
+     * you may have the need to customize this behavior further.
+     *
+     * This prop will disable `react-remove-scroll` and allow you to compose your
+     * own scroll lock component to meet your needs. Like the
+     * `dangerouslyBypassFocusLock` prop, this is generally discouraged and should
+     * only be used if a proper fallback for managing scroll behavior is provided.
+     *
+     * @see Docs https://reacttraining.com/reach-ui/dialog#dialogoverlay-dangerouslybypassscrolllock
+     * @see https://github.com/theKashey/react-remove-scroll
+     */
+    dangerouslyBypassScrollLock?: boolean;
+};
 /**
@@ -121,6 +204,25 @@ * DialogContent
 export declare const Dialog: React.ForwardRefExoticComponent<{
+    /**
+     * Handle zoom/pinch gestures on iOS devices when scroll locking is enabled.
+     * Defaults to `false`.
+     *
+     * @see Docs https://reacttraining.com/reach-ui/dialog#dialog-allowpinchzoom
+     */
     allowPinchZoom?: boolean | undefined;
     /**
-     * Controls whether the dialog is open or not.
+     * Accepts any renderable content.
      *
+     * @see Docs https://reacttraining.com/reach-ui/dialog#dialog-children
+     */
+    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#dialog-initialfocusref
+     */
+    initialFocusRef?: React.RefObject<any> | undefined;
+    /**
+     * Controls whether or not the dialog is open.
+     *
      * @see Docs https://reacttraining.com/reach-ui/dialog#dialog-isopen
@@ -144,15 +246,2 @@ */
     /**
-     * Accepts any renderable content.
-     *
-     * @see Docs https://reacttraining.com/reach-ui/dialog#dialog-children
-     */
-    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.RefObject<any> | undefined;
-    /**
      * By default, React Focus Lock prevents focus from being moved outside of the
@@ -180,6 +269,25 @@ * locked element even if the thing trying to take focus is in another frame.
 export declare type DialogProps = {
+    /**
+     * Handle zoom/pinch gestures on iOS devices when scroll locking is enabled.
+     * Defaults to `false`.
+     *
+     * @see Docs https://reacttraining.com/reach-ui/dialog#dialog-allowpinchzoom
+     */
     allowPinchZoom?: boolean;
     /**
-     * Controls whether the dialog is open or not.
+     * Accepts any renderable content.
      *
+     * @see Docs https://reacttraining.com/reach-ui/dialog#dialog-children
+     */
+    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#dialog-initialfocusref
+     */
+    initialFocusRef?: React.RefObject<any>;
+    /**
+     * Controls whether or not the dialog is open.
+     *
      * @see Docs https://reacttraining.com/reach-ui/dialog#dialog-isopen
@@ -203,15 +311,2 @@ */
     /**
-     * Accepts any renderable content.
-     *
-     * @see Docs https://reacttraining.com/reach-ui/dialog#dialog-children
-     */
-    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.RefObject<any>;
-    /**
      * By default, React Focus Lock prevents focus from being moved outside of the
@@ -218,0 +313,0 @@ * locked element even if the thing trying to take focus is in another frame.

package.json

 {
   "name": "@reach/dialog",
-  "version": "0.10.4",
+  "version": "0.10.5",
   "description": "Accessible React Modal Dialog.",
@@ -16,4 +16,4 @@ "author": "React Training <[e-mail]>",
   "dependencies": {
-    "@reach/portal": "0.10.4",
-    "@reach/utils": "0.10.4",
+    "@reach/portal": "0.10.5",
+    "@reach/utils": "0.10.5",
     "prop-types": "^15.7.2",
@@ -36,3 +36,3 @@ "react-focus-lock": "^2.3.1",
   ],
-  "gitHead": "a0c7b3672835b2a9f84732663bb0e78992541211"
+  "gitHead": "86a046f54d53b6420e392b3fa56dd991d9d4e458"
 }

No alert changes

Improved metrics

Total package byte prevSize

107270

increased by16.57%

Lines of code

927

increased by14.3%

Dependency changes

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

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

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

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

• Updated@reach/portal@0.10.5

• Updated@reach/utils@0.10.5