@react-aria/dialog 3.0.0-alpha.2 → 3.0.0-nightly-641446f65-240905

package/README.md

@@ -1,3 +1,3 @@
 # @react-aria/dialog
 
-This package is part of [react-spectrum](https://github.com/adobe-private/react-spectrum-v3). See the repo for more details.
+This package is part of [react-spectrum](https://github.com/adobe/react-spectrum). See the repo for more details.

package/dist/import.mjs

@@ -0,0 +1,17 @@
+import {useDialog as $40df3f8667284809$export$d55e7ee900f34e93} from "./useDialog.mjs";
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+export {$40df3f8667284809$export$d55e7ee900f34e93 as useDialog};
+//# sourceMappingURL=module.js.map

package/dist/main.js

@@ -1,122 +1,22 @@
-var _react2 = require("react");
+var $e7b76b4fae4e4c55$exports = require("./useDialog.main.js");
 
-var _react = $parcel$interopDefault(_react2);
 
-var useEffect = _react2.useEffect;
-var useContext = _react2.useContext;
-var useState = _react2.useState;
-
-var _babelRuntimeHelpersEsmSlicedToArray = $parcel$interopDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-
-function $parcel$interopDefault(a) {
-  return a && a.__esModule ? a.default : a;
-}
-
-function useDialog(props) {
-  var ref = props.ref,
-      _props$role = props.role,
-      role = _props$role === void 0 ? 'dialog' : _props$role; // Focus the dialog itself on mount, unless a child element is already focused.
-
-  useEffect(function () {
-    if (ref.current && !ref.current.contains(document.activeElement)) {
-      ref.current.focus();
-    }
-  }, [ref]);
-  return {
-    dialogProps: {
-      role: role,
-      tabIndex: -1
-    }
-  };
-}
-
-exports.useDialog = useDialog;
-
-var $a1ecb7059a03661ca04dde7373d441$var$Context = _react.createContext(null); // Each ModalProvider tracks how many modals are open in its subtree. On mount, the modals
-// trigger `addModal` to increment the count, and trigger `removeModal` on unmount to decrement it.
-// This is done recursively so that all parent providers are incremented and decremented.
-// If the modal count is greater than zero, we add `aria-hidden` to this provider to hide its
-// subtree from screen readers. This is done using React context in order to account for things
-// like portals, which can cause the React tree and the DOM tree to differ significantly in structure.
-// TODO: maybe move this?
-
-
-function ModalProvider(props) {
-  var children = props.children;
-  var parent = useContext($a1ecb7059a03661ca04dde7373d441$var$Context);
-
-  var _useState = useState(parent ? parent.modalCount : 0),
-      _useState2 = _babelRuntimeHelpersEsmSlicedToArray(_useState, 2),
-      modalCount = _useState2[0],
-      setModalCount = _useState2[1];
-
-  var context = {
-    parent: parent,
-    modalCount: modalCount,
-    addModal: function addModal() {
-      setModalCount(function (count) {
-        return count + 1;
-      });
-
-      if (parent) {
-        parent.addModal();
-      }
-    },
-    removeModal: function removeModal() {
-      setModalCount(function (count) {
-        return count - 1;
-      });
-
-      if (parent) {
-        parent.removeModal();
-      }
-    }
-  };
-  return _react.createElement($a1ecb7059a03661ca04dde7373d441$var$Context.Provider, {
-    value: context
-  }, children);
-}
-
-exports.ModalProvider = ModalProvider;
-
-function useModalProvider() {
-  var context = useContext($a1ecb7059a03661ca04dde7373d441$var$Context);
-  return {
-    modalProviderProps: {
-      'aria-hidden': context && context.modalCount > 0 ? true : null
-    }
-  };
-}
-
-exports.useModalProvider = useModalProvider;
-
-function useModalDialog() {
-  // Add aria-hidden to all parent providers on mount, and restore on unmount.
-  var context = useContext($a1ecb7059a03661ca04dde7373d441$var$Context);
-
-  if (!context) {
-    throw new Error('Modal is not contained within a provider');
-  }
-
-  useEffect(function () {
-    if (!context || !context.parent) {
-      return;
-    } // The immediate context is from the provider containing this modal, so we only
-    // want to trigger aria-hidden on its parents not on the modal provider itself.
-
-
-    context.parent.addModal();
-    return function () {
-      if (context && context.parent) {
-        context.parent.removeModal();
-      }
-    };
-  }, [context, context.parent]);
-  return {
-    modalProps: {
-      'aria-modal': true
-    }
-  };
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
 
-exports.useModalDialog = useModalDialog;
+$parcel$export(module.exports, "useDialog", () => $e7b76b4fae4e4c55$exports.useDialog);
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+//# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC","sources":["packages/@react-aria/dialog/src/index.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nexport {useDialog} from './useDialog';\nexport type {AriaDialogProps} from '@react-types/dialog';\nexport type {DialogAria} from './useDialog';\n"],"names":[],"version":3,"file":"main.js.map"}

package/dist/module.js

@@ -1,96 +1,17 @@
-import _react, { useEffect, useContext, useState } from "react";
-export function useDialog(props) {
-  let {
-    ref,
-    role = 'dialog'
-  } = props; // Focus the dialog itself on mount, unless a child element is already focused.
-
-  useEffect(() => {
-    if (ref.current && !ref.current.contains(document.activeElement)) {
-      ref.current.focus();
-    }
-  }, [ref]);
-  return {
-    dialogProps: {
-      role,
-      tabIndex: -1
-    }
-  };
-}
-
-const $b94bc035783bed22c331cbc48a6429$var$Context = _react.createContext(null); // Each ModalProvider tracks how many modals are open in its subtree. On mount, the modals
-// trigger `addModal` to increment the count, and trigger `removeModal` on unmount to decrement it.
-// This is done recursively so that all parent providers are incremented and decremented.
-// If the modal count is greater than zero, we add `aria-hidden` to this provider to hide its
-// subtree from screen readers. This is done using React context in order to account for things
-// like portals, which can cause the React tree and the DOM tree to differ significantly in structure.
-// TODO: maybe move this?
-
-
-export function ModalProvider(props) {
-  let {
-    children
-  } = props;
-  let parent = useContext($b94bc035783bed22c331cbc48a6429$var$Context);
-  let [modalCount, setModalCount] = useState(parent ? parent.modalCount : 0);
-  let context = {
-    parent,
-    modalCount,
-
-    addModal() {
-      setModalCount(count => count + 1);
-
-      if (parent) {
-        parent.addModal();
-      }
-    },
-
-    removeModal() {
-      setModalCount(count => count - 1);
-
-      if (parent) {
-        parent.removeModal();
-      }
-    }
-
-  };
-  return _react.createElement($b94bc035783bed22c331cbc48a6429$var$Context.Provider, {
-    value: context
-  }, children);
-}
-export function useModalProvider() {
-  let context = useContext($b94bc035783bed22c331cbc48a6429$var$Context);
-  return {
-    modalProviderProps: {
-      'aria-hidden': context && context.modalCount > 0 ? true : null
-    }
-  };
-}
-export function useModalDialog() {
-  // Add aria-hidden to all parent providers on mount, and restore on unmount.
-  let context = useContext($b94bc035783bed22c331cbc48a6429$var$Context);
-
-  if (!context) {
-    throw new Error('Modal is not contained within a provider');
-  }
-
-  useEffect(() => {
-    if (!context || !context.parent) {
-      return;
-    } // The immediate context is from the provider containing this modal, so we only
-    // want to trigger aria-hidden on its parents not on the modal provider itself.
-
-
-    context.parent.addModal();
-    return () => {
-      if (context && context.parent) {
-        context.parent.removeModal();
-      }
-    };
-  }, [context, context.parent]);
-  return {
-    modalProps: {
-      'aria-modal': true
-    }
-  };
-}
+import {useDialog as $40df3f8667284809$export$d55e7ee900f34e93} from "./useDialog.module.js";
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+export {$40df3f8667284809$export$d55e7ee900f34e93 as useDialog};
+//# sourceMappingURL=module.js.map

package/dist/module.js.map

@@ -0,0 +1 @@
+{"mappings":";;AAAA;;;;;;;;;;CAUC","sources":["packages/@react-aria/dialog/src/index.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nexport {useDialog} from './useDialog';\nexport type {AriaDialogProps} from '@react-types/dialog';\nexport type {DialogAria} from './useDialog';\n"],"names":[],"version":3,"file":"module.js.map"}

package/dist/types.d.ts

@@ -1,23 +1,16 @@
-import { AllHTMLAttributes, RefObject, AriaAttributes, ReactNode } from "react";
-interface DialogProps {
-    ref: RefObject<HTMLElement | null>;
-    role?: 'dialog' | 'alertdialog';
+import { AriaDialogProps } from "@react-types/dialog";
+import { DOMAttributes, FocusableElement, RefObject } from "@react-types/shared";
+export interface DialogAria {
+    /** Props for the dialog container element. */
+    dialogProps: DOMAttributes;
+    /** Props for the dialog title element. */
+    titleProps: DOMAttributes;
 }
-interface DialogAria {
-    dialogProps: AllHTMLAttributes<HTMLElement>;
-}
-export function useDialog(props: DialogProps): DialogAria;
-interface ModalProviderProps {
-    children: ReactNode;
-}
-export function ModalProvider(props: ModalProviderProps): JSX.Element;
-interface ModalProviderAria {
-    modalProviderProps: AriaAttributes;
-}
-export function useModalProvider(): ModalProviderAria;
-interface ModalDialogAria {
-    modalProps: AriaAttributes;
-}
-export function useModalDialog(): ModalDialogAria;
+/**
+ * Provides the behavior and accessibility implementation for a dialog component.
+ * A dialog is an overlay shown above other content in an application.
+ */
+export function useDialog(props: AriaDialogProps, ref: RefObject<FocusableElement | null>): DialogAria;
+export type { AriaDialogProps } from '@react-types/dialog';
 
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["/Users/govett/dev/react-spectrum/packages/@react-aria/dialog/src/packages/@react-aria/dialog/src/useDialog.ts","/Users/govett/dev/react-spectrum/packages/@react-aria/dialog/src/packages/@react-aria/dialog/src/useModalDialog.tsx"],"names":[],"mappings":";AAEA;IACE,GAAG,EAAE,UAAU,WAAW,GAAG,IAAI,CAAC,CAAC;IACnC,IAAI,CAAC,EAAE,QAAQ,GAAG,aAAa,CAAA;CAChC;AAED;IACE,WAAW,EAAE,kBAAkB,WAAW,CAAC,CAAA;CAC5C;AAED,0BAA0B,KAAK,EAAE,WAAW,GAAG,UAAU,CAgBxD;ACzBD;IACE,QAAQ,EAAE,SAAS,CAAA;CACpB;AAkBD,8BAA8B,KAAK,EAAE,kBAAkB,eA0BtD;AAED;IACE,kBAAkB,EAAE,cAAc,CAAA;CACnC;AAED,oCAAoC,iBAAiB,CAOpD;AAED;IACE,UAAU,EAAE,cAAc,CAAA;CAC3B;AAED,kCAAkC,eAAe,CA2BhD","file":"types.d.ts.map"}
+{"mappings":";;AAmBA;IACE,8CAA8C;IAC9C,WAAW,EAAE,aAAa,CAAC;IAE3B,0CAA0C;IAC1C,UAAU,EAAE,aAAa,CAAA;CAC1B;AAED;;;GAGG;AACH,0BAA0B,KAAK,EAAE,eAAe,EAAE,GAAG,EAAE,UAAU,gBAAgB,GAAG,IAAI,CAAC,GAAG,UAAU,CA0DrG;AC7ED,YAAY,EAAC,eAAe,EAAC,MAAM,qBAAqB,CAAC","sources":["packages/@react-aria/dialog/src/packages/@react-aria/dialog/src/useDialog.ts","packages/@react-aria/dialog/src/packages/@react-aria/dialog/src/index.ts","packages/@react-aria/dialog/src/index.ts"],"sourcesContent":[null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nexport {useDialog} from './useDialog';\nexport type {AriaDialogProps} from '@react-types/dialog';\nexport type {DialogAria} from './useDialog';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/dist/useDialog.main.js

@@ -0,0 +1,83 @@
+var $HoXek$reactariautils = require("@react-aria/utils");
+var $HoXek$reactariafocus = require("@react-aria/focus");
+var $HoXek$react = require("react");
+var $HoXek$reactariaoverlays = require("@react-aria/overlays");
+
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "useDialog", () => $e7b76b4fae4e4c55$export$d55e7ee900f34e93);
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+function $e7b76b4fae4e4c55$export$d55e7ee900f34e93(props, ref) {
+    let { role: role = 'dialog' } = props;
+    let titleId = (0, $HoXek$reactariautils.useSlotId)();
+    titleId = props['aria-label'] ? undefined : titleId;
+    let isRefocusing = (0, $HoXek$react.useRef)(false);
+    // Focus the dialog itself on mount, unless a child element is already focused.
+    (0, $HoXek$react.useEffect)(()=>{
+        if (ref.current && !ref.current.contains(document.activeElement)) {
+            (0, $HoXek$reactariafocus.focusSafely)(ref.current);
+            // Safari on iOS does not move the VoiceOver cursor to the dialog
+            // or announce that it has opened until it has rendered. A workaround
+            // is to wait for half a second, then blur and re-focus the dialog.
+            let timeout = setTimeout(()=>{
+                if (document.activeElement === ref.current) {
+                    isRefocusing.current = true;
+                    if (ref.current) {
+                        ref.current.blur();
+                        (0, $HoXek$reactariafocus.focusSafely)(ref.current);
+                    }
+                    isRefocusing.current = false;
+                }
+            }, 500);
+            return ()=>{
+                clearTimeout(timeout);
+            };
+        }
+    }, [
+        ref
+    ]);
+    (0, $HoXek$reactariaoverlays.useOverlayFocusContain)();
+    // We do not use aria-modal due to a Safari bug which forces the first focusable element to be focused
+    // on mount when inside an iframe, no matter which element we programmatically focus.
+    // See https://bugs.webkit.org/show_bug.cgi?id=211934.
+    // useModal sets aria-hidden on all elements outside the dialog, so the dialog will behave as a modal
+    // even without aria-modal on the dialog itself.
+    return {
+        dialogProps: {
+            ...(0, $HoXek$reactariautils.filterDOMProps)(props, {
+                labelable: true
+            }),
+            role: role,
+            tabIndex: -1,
+            'aria-labelledby': props['aria-labelledby'] || titleId,
+            // Prevent blur events from reaching useOverlay, which may cause
+            // popovers to close. Since focus is contained within the dialog,
+            // we don't want this to occur due to the above useEffect.
+            onBlur: (e)=>{
+                if (isRefocusing.current) e.stopPropagation();
+            }
+        },
+        titleProps: {
+            id: titleId
+        }
+    };
+}
+
+
+//# sourceMappingURL=useDialog.main.js.map

package/dist/useDialog.main.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;AAqBM,SAAS,0CAAU,KAAsB,EAAE,GAAuC;IACvF,IAAI,QAAC,OAAO,UAAS,GAAG;IACxB,IAAI,UAA8B,CAAA,GAAA,+BAAQ;IAC1C,UAAU,KAAK,CAAC,aAAa,GAAG,YAAY;IAE5C,IAAI,eAAe,CAAA,GAAA,mBAAK,EAAE;IAE1B,+EAA+E;IAC/E,CAAA,GAAA,sBAAQ,EAAE;QACR,IAAI,IAAI,OAAO,IAAI,CAAC,IAAI,OAAO,CAAC,QAAQ,CAAC,SAAS,aAAa,GAAG;YAChE,CAAA,GAAA,iCAAU,EAAE,IAAI,OAAO;YAEvB,iEAAiE;YACjE,qEAAqE;YACrE,mEAAmE;YACnE,IAAI,UAAU,WAAW;gBACvB,IAAI,SAAS,aAAa,KAAK,IAAI,OAAO,EAAE;oBAC1C,aAAa,OAAO,GAAG;oBACvB,IAAI,IAAI,OAAO,EAAE;wBACf,IAAI,OAAO,CAAC,IAAI;wBAChB,CAAA,GAAA,iCAAU,EAAE,IAAI,OAAO;oBACzB;oBACA,aAAa,OAAO,GAAG;gBACzB;YACF,GAAG;YAEH,OAAO;gBACL,aAAa;YACf;QACF;IACF,GAAG;QAAC;KAAI;IAER,CAAA,GAAA,+CAAqB;IAErB,sGAAsG;IACtG,qFAAqF;IACrF,sDAAsD;IACtD,qGAAqG;IACrG,gDAAgD;IAChD,OAAO;QACL,aAAa;YACX,GAAG,CAAA,GAAA,oCAAa,EAAE,OAAO;gBAAC,WAAW;YAAI,EAAE;kBAC3C;YACA,UAAU;YACV,mBAAmB,KAAK,CAAC,kBAAkB,IAAI;YAC/C,gEAAgE;YAChE,iEAAiE;YACjE,0DAA0D;YAC1D,QAAQ,CAAA;gBACN,IAAI,aAAa,OAAO,EACtB,EAAE,eAAe;YAErB;QACF;QACA,YAAY;YACV,IAAI;QACN;IACF;AACF","sources":["packages/@react-aria/dialog/src/useDialog.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaDialogProps} from '@react-types/dialog';\nimport {DOMAttributes, FocusableElement, RefObject} from '@react-types/shared';\nimport {filterDOMProps, useSlotId} from '@react-aria/utils';\nimport {focusSafely} from '@react-aria/focus';\nimport {useEffect, useRef} from 'react';\nimport {useOverlayFocusContain} from '@react-aria/overlays';\n\nexport interface DialogAria {\n  /** Props for the dialog container element. */\n  dialogProps: DOMAttributes,\n\n  /** Props for the dialog title element. */\n  titleProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a dialog component.\n * A dialog is an overlay shown above other content in an application.\n */\nexport function useDialog(props: AriaDialogProps, ref: RefObject<FocusableElement | null>): DialogAria {\n  let {role = 'dialog'} = props;\n  let titleId: string | undefined = useSlotId();\n  titleId = props['aria-label'] ? undefined : titleId;\n\n  let isRefocusing = useRef(false);\n\n  // Focus the dialog itself on mount, unless a child element is already focused.\n  useEffect(() => {\n    if (ref.current && !ref.current.contains(document.activeElement)) {\n      focusSafely(ref.current);\n\n      // Safari on iOS does not move the VoiceOver cursor to the dialog\n      // or announce that it has opened until it has rendered. A workaround\n      // is to wait for half a second, then blur and re-focus the dialog.\n      let timeout = setTimeout(() => {\n        if (document.activeElement === ref.current) {\n          isRefocusing.current = true;\n          if (ref.current) {\n            ref.current.blur();\n            focusSafely(ref.current);\n          }\n          isRefocusing.current = false;\n        }\n      }, 500);\n\n      return () => {\n        clearTimeout(timeout);\n      };\n    }\n  }, [ref]);\n\n  useOverlayFocusContain();\n\n  // We do not use aria-modal due to a Safari bug which forces the first focusable element to be focused\n  // on mount when inside an iframe, no matter which element we programmatically focus.\n  // See https://bugs.webkit.org/show_bug.cgi?id=211934.\n  // useModal sets aria-hidden on all elements outside the dialog, so the dialog will behave as a modal\n  // even without aria-modal on the dialog itself.\n  return {\n    dialogProps: {\n      ...filterDOMProps(props, {labelable: true}),\n      role,\n      tabIndex: -1,\n      'aria-labelledby': props['aria-labelledby'] || titleId,\n      // Prevent blur events from reaching useOverlay, which may cause\n      // popovers to close. Since focus is contained within the dialog,\n      // we don't want this to occur due to the above useEffect.\n      onBlur: e => {\n        if (isRefocusing.current) {\n          e.stopPropagation();\n        }\n      }\n    },\n    titleProps: {\n      id: titleId\n    }\n  };\n}\n"],"names":[],"version":3,"file":"useDialog.main.js.map"}

package/dist/useDialog.mjs

@@ -0,0 +1,78 @@
+import {useSlotId as $i6df2$useSlotId, filterDOMProps as $i6df2$filterDOMProps} from "@react-aria/utils";
+import {focusSafely as $i6df2$focusSafely} from "@react-aria/focus";
+import {useRef as $i6df2$useRef, useEffect as $i6df2$useEffect} from "react";
+import {useOverlayFocusContain as $i6df2$useOverlayFocusContain} from "@react-aria/overlays";
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+function $40df3f8667284809$export$d55e7ee900f34e93(props, ref) {
+    let { role: role = 'dialog' } = props;
+    let titleId = (0, $i6df2$useSlotId)();
+    titleId = props['aria-label'] ? undefined : titleId;
+    let isRefocusing = (0, $i6df2$useRef)(false);
+    // Focus the dialog itself on mount, unless a child element is already focused.
+    (0, $i6df2$useEffect)(()=>{
+        if (ref.current && !ref.current.contains(document.activeElement)) {
+            (0, $i6df2$focusSafely)(ref.current);
+            // Safari on iOS does not move the VoiceOver cursor to the dialog
+            // or announce that it has opened until it has rendered. A workaround
+            // is to wait for half a second, then blur and re-focus the dialog.
+            let timeout = setTimeout(()=>{
+                if (document.activeElement === ref.current) {
+                    isRefocusing.current = true;
+                    if (ref.current) {
+                        ref.current.blur();
+                        (0, $i6df2$focusSafely)(ref.current);
+                    }
+                    isRefocusing.current = false;
+                }
+            }, 500);
+            return ()=>{
+                clearTimeout(timeout);
+            };
+        }
+    }, [
+        ref
+    ]);
+    (0, $i6df2$useOverlayFocusContain)();
+    // We do not use aria-modal due to a Safari bug which forces the first focusable element to be focused
+    // on mount when inside an iframe, no matter which element we programmatically focus.
+    // See https://bugs.webkit.org/show_bug.cgi?id=211934.
+    // useModal sets aria-hidden on all elements outside the dialog, so the dialog will behave as a modal
+    // even without aria-modal on the dialog itself.
+    return {
+        dialogProps: {
+            ...(0, $i6df2$filterDOMProps)(props, {
+                labelable: true
+            }),
+            role: role,
+            tabIndex: -1,
+            'aria-labelledby': props['aria-labelledby'] || titleId,
+            // Prevent blur events from reaching useOverlay, which may cause
+            // popovers to close. Since focus is contained within the dialog,
+            // we don't want this to occur due to the above useEffect.
+            onBlur: (e)=>{
+                if (isRefocusing.current) e.stopPropagation();
+            }
+        },
+        titleProps: {
+            id: titleId
+        }
+    };
+}
+
+
+export {$40df3f8667284809$export$d55e7ee900f34e93 as useDialog};
+//# sourceMappingURL=useDialog.module.js.map

package/dist/useDialog.module.js

@@ -0,0 +1,78 @@
+import {useSlotId as $i6df2$useSlotId, filterDOMProps as $i6df2$filterDOMProps} from "@react-aria/utils";
+import {focusSafely as $i6df2$focusSafely} from "@react-aria/focus";
+import {useRef as $i6df2$useRef, useEffect as $i6df2$useEffect} from "react";
+import {useOverlayFocusContain as $i6df2$useOverlayFocusContain} from "@react-aria/overlays";
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+function $40df3f8667284809$export$d55e7ee900f34e93(props, ref) {
+    let { role: role = 'dialog' } = props;
+    let titleId = (0, $i6df2$useSlotId)();
+    titleId = props['aria-label'] ? undefined : titleId;
+    let isRefocusing = (0, $i6df2$useRef)(false);
+    // Focus the dialog itself on mount, unless a child element is already focused.
+    (0, $i6df2$useEffect)(()=>{
+        if (ref.current && !ref.current.contains(document.activeElement)) {
+            (0, $i6df2$focusSafely)(ref.current);
+            // Safari on iOS does not move the VoiceOver cursor to the dialog
+            // or announce that it has opened until it has rendered. A workaround
+            // is to wait for half a second, then blur and re-focus the dialog.
+            let timeout = setTimeout(()=>{
+                if (document.activeElement === ref.current) {
+                    isRefocusing.current = true;
+                    if (ref.current) {
+                        ref.current.blur();
+                        (0, $i6df2$focusSafely)(ref.current);
+                    }
+                    isRefocusing.current = false;
+                }
+            }, 500);
+            return ()=>{
+                clearTimeout(timeout);
+            };
+        }
+    }, [
+        ref
+    ]);
+    (0, $i6df2$useOverlayFocusContain)();
+    // We do not use aria-modal due to a Safari bug which forces the first focusable element to be focused
+    // on mount when inside an iframe, no matter which element we programmatically focus.
+    // See https://bugs.webkit.org/show_bug.cgi?id=211934.
+    // useModal sets aria-hidden on all elements outside the dialog, so the dialog will behave as a modal
+    // even without aria-modal on the dialog itself.
+    return {
+        dialogProps: {
+            ...(0, $i6df2$filterDOMProps)(props, {
+                labelable: true
+            }),
+            role: role,
+            tabIndex: -1,
+            'aria-labelledby': props['aria-labelledby'] || titleId,
+            // Prevent blur events from reaching useOverlay, which may cause
+            // popovers to close. Since focus is contained within the dialog,
+            // we don't want this to occur due to the above useEffect.
+            onBlur: (e)=>{
+                if (isRefocusing.current) e.stopPropagation();
+            }
+        },
+        titleProps: {
+            id: titleId
+        }
+    };
+}
+
+
+export {$40df3f8667284809$export$d55e7ee900f34e93 as useDialog};
+//# sourceMappingURL=useDialog.module.js.map

package/dist/useDialog.module.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;AAAA;;;;;;;;;;CAUC;;;;AAqBM,SAAS,0CAAU,KAAsB,EAAE,GAAuC;IACvF,IAAI,QAAC,OAAO,UAAS,GAAG;IACxB,IAAI,UAA8B,CAAA,GAAA,gBAAQ;IAC1C,UAAU,KAAK,CAAC,aAAa,GAAG,YAAY;IAE5C,IAAI,eAAe,CAAA,GAAA,aAAK,EAAE;IAE1B,+EAA+E;IAC/E,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,IAAI,OAAO,IAAI,CAAC,IAAI,OAAO,CAAC,QAAQ,CAAC,SAAS,aAAa,GAAG;YAChE,CAAA,GAAA,kBAAU,EAAE,IAAI,OAAO;YAEvB,iEAAiE;YACjE,qEAAqE;YACrE,mEAAmE;YACnE,IAAI,UAAU,WAAW;gBACvB,IAAI,SAAS,aAAa,KAAK,IAAI,OAAO,EAAE;oBAC1C,aAAa,OAAO,GAAG;oBACvB,IAAI,IAAI,OAAO,EAAE;wBACf,IAAI,OAAO,CAAC,IAAI;wBAChB,CAAA,GAAA,kBAAU,EAAE,IAAI,OAAO;oBACzB;oBACA,aAAa,OAAO,GAAG;gBACzB;YACF,GAAG;YAEH,OAAO;gBACL,aAAa;YACf;QACF;IACF,GAAG;QAAC;KAAI;IAER,CAAA,GAAA,6BAAqB;IAErB,sGAAsG;IACtG,qFAAqF;IACrF,sDAAsD;IACtD,qGAAqG;IACrG,gDAAgD;IAChD,OAAO;QACL,aAAa;YACX,GAAG,CAAA,GAAA,qBAAa,EAAE,OAAO;gBAAC,WAAW;YAAI,EAAE;kBAC3C;YACA,UAAU;YACV,mBAAmB,KAAK,CAAC,kBAAkB,IAAI;YAC/C,gEAAgE;YAChE,iEAAiE;YACjE,0DAA0D;YAC1D,QAAQ,CAAA;gBACN,IAAI,aAAa,OAAO,EACtB,EAAE,eAAe;YAErB;QACF;QACA,YAAY;YACV,IAAI;QACN;IACF;AACF","sources":["packages/@react-aria/dialog/src/useDialog.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaDialogProps} from '@react-types/dialog';\nimport {DOMAttributes, FocusableElement, RefObject} from '@react-types/shared';\nimport {filterDOMProps, useSlotId} from '@react-aria/utils';\nimport {focusSafely} from '@react-aria/focus';\nimport {useEffect, useRef} from 'react';\nimport {useOverlayFocusContain} from '@react-aria/overlays';\n\nexport interface DialogAria {\n  /** Props for the dialog container element. */\n  dialogProps: DOMAttributes,\n\n  /** Props for the dialog title element. */\n  titleProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a dialog component.\n * A dialog is an overlay shown above other content in an application.\n */\nexport function useDialog(props: AriaDialogProps, ref: RefObject<FocusableElement | null>): DialogAria {\n  let {role = 'dialog'} = props;\n  let titleId: string | undefined = useSlotId();\n  titleId = props['aria-label'] ? undefined : titleId;\n\n  let isRefocusing = useRef(false);\n\n  // Focus the dialog itself on mount, unless a child element is already focused.\n  useEffect(() => {\n    if (ref.current && !ref.current.contains(document.activeElement)) {\n      focusSafely(ref.current);\n\n      // Safari on iOS does not move the VoiceOver cursor to the dialog\n      // or announce that it has opened until it has rendered. A workaround\n      // is to wait for half a second, then blur and re-focus the dialog.\n      let timeout = setTimeout(() => {\n        if (document.activeElement === ref.current) {\n          isRefocusing.current = true;\n          if (ref.current) {\n            ref.current.blur();\n            focusSafely(ref.current);\n          }\n          isRefocusing.current = false;\n        }\n      }, 500);\n\n      return () => {\n        clearTimeout(timeout);\n      };\n    }\n  }, [ref]);\n\n  useOverlayFocusContain();\n\n  // We do not use aria-modal due to a Safari bug which forces the first focusable element to be focused\n  // on mount when inside an iframe, no matter which element we programmatically focus.\n  // See https://bugs.webkit.org/show_bug.cgi?id=211934.\n  // useModal sets aria-hidden on all elements outside the dialog, so the dialog will behave as a modal\n  // even without aria-modal on the dialog itself.\n  return {\n    dialogProps: {\n      ...filterDOMProps(props, {labelable: true}),\n      role,\n      tabIndex: -1,\n      'aria-labelledby': props['aria-labelledby'] || titleId,\n      // Prevent blur events from reaching useOverlay, which may cause\n      // popovers to close. Since focus is contained within the dialog,\n      // we don't want this to occur due to the above useEffect.\n      onBlur: e => {\n        if (isRefocusing.current) {\n          e.stopPropagation();\n        }\n      }\n    },\n    titleProps: {\n      id: titleId\n    }\n  };\n}\n"],"names":[],"version":3,"file":"useDialog.module.js.map"}

package/package.json

@@ -1,28 +1,40 @@
 {
   "name": "@react-aria/dialog",
-  "version": "3.0.0-alpha.2",
+  "version": "3.0.0-nightly-641446f65-240905",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
   "module": "dist/module.js",
+  "exports": {
+    "types": "./dist/types.d.ts",
+    "import": "./dist/import.mjs",
+    "require": "./dist/main.js"
+  },
   "types": "dist/types.d.ts",
   "source": "src/index.ts",
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "sideEffects": false,
   "repository": {
     "type": "git",
-    "url": "https://github.com/adobe-private/react-spectrum-v3"
+    "url": "https://github.com/adobe/react-spectrum"
   },
   "peerDependencies": {
-    "react": "^16.8.0"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@babel/runtime": "^7.6.2"
+    "@react-aria/focus": "^3.0.0-nightly-641446f65-240905",
+    "@react-aria/overlays": "^3.0.0-nightly-641446f65-240905",
+    "@react-aria/utils": "^3.0.0-nightly-641446f65-240905",
+    "@react-types/dialog": "^3.0.0-nightly-641446f65-240905",
+    "@react-types/shared": "^3.0.0-nightly-641446f65-240905",
+    "@swc/helpers": "^0.5.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5a9784f0bb6c25af7422215efb31ef72caeb9600"
-}
+  "stableVersion": "3.5.17"
+}

package/src/index.ts

@@ -0,0 +1,14 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+export {useDialog} from './useDialog';
+export type {AriaDialogProps} from '@react-types/dialog';
+export type {DialogAria} from './useDialog';

package/src/useDialog.ts

@@ -0,0 +1,90 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {AriaDialogProps} from '@react-types/dialog';
+import {DOMAttributes, FocusableElement, RefObject} from '@react-types/shared';
+import {filterDOMProps, useSlotId} from '@react-aria/utils';
+import {focusSafely} from '@react-aria/focus';
+import {useEffect, useRef} from 'react';
+import {useOverlayFocusContain} from '@react-aria/overlays';
+
+export interface DialogAria {
+  /** Props for the dialog container element. */
+  dialogProps: DOMAttributes,
+
+  /** Props for the dialog title element. */
+  titleProps: DOMAttributes
+}
+
+/**
+ * Provides the behavior and accessibility implementation for a dialog component.
+ * A dialog is an overlay shown above other content in an application.
+ */
+export function useDialog(props: AriaDialogProps, ref: RefObject<FocusableElement | null>): DialogAria {
+  let {role = 'dialog'} = props;
+  let titleId: string | undefined = useSlotId();
+  titleId = props['aria-label'] ? undefined : titleId;
+
+  let isRefocusing = useRef(false);
+
+  // Focus the dialog itself on mount, unless a child element is already focused.
+  useEffect(() => {
+    if (ref.current && !ref.current.contains(document.activeElement)) {
+      focusSafely(ref.current);
+
+      // Safari on iOS does not move the VoiceOver cursor to the dialog
+      // or announce that it has opened until it has rendered. A workaround
+      // is to wait for half a second, then blur and re-focus the dialog.
+      let timeout = setTimeout(() => {
+        if (document.activeElement === ref.current) {
+          isRefocusing.current = true;
+          if (ref.current) {
+            ref.current.blur();
+            focusSafely(ref.current);
+          }
+          isRefocusing.current = false;
+        }
+      }, 500);
+
+      return () => {
+        clearTimeout(timeout);
+      };
+    }
+  }, [ref]);
+
+  useOverlayFocusContain();
+
+  // We do not use aria-modal due to a Safari bug which forces the first focusable element to be focused
+  // on mount when inside an iframe, no matter which element we programmatically focus.
+  // See https://bugs.webkit.org/show_bug.cgi?id=211934.
+  // useModal sets aria-hidden on all elements outside the dialog, so the dialog will behave as a modal
+  // even without aria-modal on the dialog itself.
+  return {
+    dialogProps: {
+      ...filterDOMProps(props, {labelable: true}),
+      role,
+      tabIndex: -1,
+      'aria-labelledby': props['aria-labelledby'] || titleId,
+      // Prevent blur events from reaching useOverlay, which may cause
+      // popovers to close. Since focus is contained within the dialog,
+      // we don't want this to occur due to the above useEffect.
+      onBlur: e => {
+        if (isRefocusing.current) {
+          e.stopPropagation();
+        }
+      }
+    },
+    titleProps: {
+      id: titleId
+    }
+  };
+}