@react-aria/dialog 3.5.33 → 3.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/import.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import {useDialog as $40df3f8667284809$export$d55e7ee900f34e93} from "./useDialog.mjs";
1
+ import {useDialog as $9a8b98e7458da4c0$re_export$useDialog} from "react-aria/useDialog";
2
2
 
3
3
  /*
4
4
  * Copyright 2020 Adobe. All rights reserved.
@@ -13,5 +13,5 @@ import {useDialog as $40df3f8667284809$export$d55e7ee900f34e93} from "./useDialo
13
13
  */
14
14
 
15
15
 
16
- export {$40df3f8667284809$export$d55e7ee900f34e93 as useDialog};
16
+ export {$9a8b98e7458da4c0$re_export$useDialog as useDialog};
17
17
  //# sourceMappingURL=module.js.map
package/dist/main.js CHANGED
@@ -1,11 +1,11 @@
1
- var $e7b76b4fae4e4c55$exports = require("./useDialog.main.js");
1
+ var $fFYLa$reactariauseDialog = require("react-aria/useDialog");
2
2
 
3
3
 
4
4
  function $parcel$export(e, n, v, s) {
5
5
  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
6
6
  }
7
7
 
8
- $parcel$export(module.exports, "useDialog", () => $e7b76b4fae4e4c55$exports.useDialog);
8
+ $parcel$export(module.exports, "useDialog", function () { return $fFYLa$reactariauseDialog.useDialog; });
9
9
  /*
10
10
  * Copyright 2020 Adobe. All rights reserved.
11
11
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
package/dist/main.js.map CHANGED
@@ -1 +1 @@
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"}
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 'react-aria/useDialog';\n\nexport type {AriaDialogProps, DialogAria} from 'react-aria/useDialog';\n"],"names":[],"version":3,"file":"main.js.map"}
package/dist/module.js CHANGED
@@ -1,4 +1,4 @@
1
- import {useDialog as $40df3f8667284809$export$d55e7ee900f34e93} from "./useDialog.module.js";
1
+ import {useDialog as $9a8b98e7458da4c0$re_export$useDialog} from "react-aria/useDialog";
2
2
 
3
3
  /*
4
4
  * Copyright 2020 Adobe. All rights reserved.
@@ -13,5 +13,5 @@ import {useDialog as $40df3f8667284809$export$d55e7ee900f34e93} from "./useDialo
13
13
  */
14
14
 
15
15
 
16
- export {$40df3f8667284809$export$d55e7ee900f34e93 as useDialog};
16
+ export {$9a8b98e7458da4c0$re_export$useDialog as useDialog};
17
17
  //# sourceMappingURL=module.js.map
@@ -1 +1 @@
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"}
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 'react-aria/useDialog';\n\nexport type {AriaDialogProps, DialogAria} from 'react-aria/useDialog';\n"],"names":[],"version":3,"file":"module.js.map"}
@@ -0,0 +1,2 @@
1
+ export { useDialog } from 'react-aria/useDialog';
2
+ export type { AriaDialogProps, DialogAria } from 'react-aria/useDialog';
package/package.json CHANGED
@@ -1,20 +1,20 @@
1
1
  {
2
2
  "name": "@react-aria/dialog",
3
- "version": "3.5.33",
3
+ "version": "3.6.0",
4
4
  "description": "Spectrum UI components in React",
5
5
  "license": "Apache-2.0",
6
6
  "main": "dist/main.js",
7
7
  "module": "dist/module.js",
8
8
  "exports": {
9
- "source": "./src/index.ts",
10
- "types": [
11
- "./dist/types.d.ts",
12
- "./src/index.ts"
13
- ],
14
- "import": "./dist/import.mjs",
15
- "require": "./dist/main.js"
9
+ ".": {
10
+ "source": "./src/index.ts",
11
+ "types": "./dist/types/src/index.d.ts",
12
+ "import": "./dist/import.mjs",
13
+ "require": "./dist/main.js"
14
+ },
15
+ "./package.json": "./package.json"
16
16
  },
17
- "types": "dist/types.d.ts",
17
+ "types": "dist/types/src/index.d.ts",
18
18
  "source": "src/index.ts",
19
19
  "files": [
20
20
  "dist",
@@ -30,15 +30,14 @@
30
30
  "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
31
31
  },
32
32
  "dependencies": {
33
- "@react-aria/interactions": "^3.27.0",
34
- "@react-aria/overlays": "^3.31.1",
35
- "@react-aria/utils": "^3.33.0",
36
- "@react-types/dialog": "^3.5.23",
37
- "@react-types/shared": "^3.33.0",
38
- "@swc/helpers": "^0.5.0"
33
+ "@swc/helpers": "^0.5.0",
34
+ "react-aria": "3.48.0"
39
35
  },
40
36
  "publishConfig": {
41
37
  "access": "public"
42
38
  },
43
- "gitHead": "66e51757606b43a89ed02c574ca24517323a2ab9"
39
+ "targets": {
40
+ "types": false
41
+ },
42
+ "gitHead": "a6999bdf494a2e9c0381a5881908328bdd22ddae"
44
43
  }
package/src/index.ts CHANGED
@@ -9,6 +9,6 @@
9
9
  * OF ANY KIND, either express or implied. See the License for the specific language
10
10
  * governing permissions and limitations under the License.
11
11
  */
12
- export {useDialog} from './useDialog';
13
- export type {AriaDialogProps} from '@react-types/dialog';
14
- export type {DialogAria} from './useDialog';
12
+ export {useDialog} from 'react-aria/useDialog';
13
+
14
+ export type {AriaDialogProps, DialogAria} from 'react-aria/useDialog';
package/dist/types.d.ts DELETED
@@ -1,16 +0,0 @@
1
- import { AriaDialogProps } from "@react-types/dialog";
2
- import { DOMAttributes, FocusableElement, RefObject } from "@react-types/shared";
3
- export interface DialogAria {
4
- /** Props for the dialog container element. */
5
- dialogProps: DOMAttributes;
6
- /** Props for the dialog title element. */
7
- titleProps: DOMAttributes;
8
- }
9
- /**
10
- * Provides the behavior and accessibility implementation for a dialog component.
11
- * A dialog is an overlay shown above other content in an application.
12
- */
13
- export function useDialog(props: AriaDialogProps, ref: RefObject<FocusableElement | null>): DialogAria;
14
- export type { AriaDialogProps } from '@react-types/dialog';
15
-
16
- //# sourceMappingURL=types.d.ts.map
@@ -1 +0,0 @@
1
- {"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,CA6DrG;AChFD,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"}
@@ -1,84 +0,0 @@
1
- var $HoXek$reactariautils = require("@react-aria/utils");
2
- var $HoXek$reactariainteractions = require("@react-aria/interactions");
3
- var $HoXek$react = require("react");
4
- var $HoXek$reactariaoverlays = require("@react-aria/overlays");
5
-
6
-
7
- function $parcel$export(e, n, v, s) {
8
- Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
9
- }
10
-
11
- $parcel$export(module.exports, "useDialog", () => $e7b76b4fae4e4c55$export$d55e7ee900f34e93);
12
- /*
13
- * Copyright 2020 Adobe. All rights reserved.
14
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
15
- * you may not use this file except in compliance with the License. You may obtain a copy
16
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
17
- *
18
- * Unless required by applicable law or agreed to in writing, software distributed under
19
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
20
- * OF ANY KIND, either express or implied. See the License for the specific language
21
- * governing permissions and limitations under the License.
22
- */
23
-
24
-
25
-
26
- function $e7b76b4fae4e4c55$export$d55e7ee900f34e93(props, ref) {
27
- let { role: role = 'dialog' } = props;
28
- let titleId = (0, $HoXek$reactariautils.useSlotId)();
29
- titleId = props['aria-label'] ? undefined : titleId;
30
- let isRefocusing = (0, $HoXek$react.useRef)(false);
31
- // Focus the dialog itself on mount, unless a child element is already focused.
32
- (0, $HoXek$react.useEffect)(()=>{
33
- if (ref.current && !(0, $HoXek$reactariautils.nodeContains)(ref.current, document.activeElement)) {
34
- (0, $HoXek$reactariainteractions.focusSafely)(ref.current);
35
- // Safari on iOS does not move the VoiceOver cursor to the dialog
36
- // or announce that it has opened until it has rendered. A workaround
37
- // is to wait for half a second, then blur and re-focus the dialog.
38
- let timeout = setTimeout(()=>{
39
- // Check that the dialog is still focused, or focused was lost to the body.
40
- if (document.activeElement === ref.current || document.activeElement === document.body) {
41
- isRefocusing.current = true;
42
- if (ref.current) {
43
- ref.current.blur();
44
- (0, $HoXek$reactariainteractions.focusSafely)(ref.current);
45
- }
46
- isRefocusing.current = false;
47
- }
48
- }, 500);
49
- return ()=>{
50
- clearTimeout(timeout);
51
- };
52
- }
53
- }, [
54
- ref
55
- ]);
56
- (0, $HoXek$reactariaoverlays.useOverlayFocusContain)();
57
- // We do not use aria-modal due to a Safari bug which forces the first focusable element to be focused
58
- // on mount when inside an iframe, no matter which element we programmatically focus.
59
- // See https://bugs.webkit.org/show_bug.cgi?id=211934.
60
- // useModal sets aria-hidden on all elements outside the dialog, so the dialog will behave as a modal
61
- // even without aria-modal on the dialog itself.
62
- return {
63
- dialogProps: {
64
- ...(0, $HoXek$reactariautils.filterDOMProps)(props, {
65
- labelable: true
66
- }),
67
- role: role,
68
- tabIndex: -1,
69
- 'aria-labelledby': props['aria-labelledby'] || titleId,
70
- // Prevent blur events from reaching useOverlay, which may cause
71
- // popovers to close. Since focus is contained within the dialog,
72
- // we don't want this to occur due to the above useEffect.
73
- onBlur: (e)=>{
74
- if (isRefocusing.current) e.stopPropagation();
75
- }
76
- },
77
- titleProps: {
78
- id: titleId
79
- }
80
- };
81
- }
82
-
83
-
84
- //# sourceMappingURL=useDialog.main.js.map
@@ -1 +0,0 @@
1
- {"mappings":";;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;AAqBM,SAAS,0CAAU,KAAsB,EAAE,GAAuC;IACvF,IAAI,QACF,OAAO,UACR,GAAG;IACJ,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,CAAA,GAAA,kCAAW,EAAE,IAAI,OAAO,EAAE,SAAS,aAAa,GAAG;YACrE,CAAA,GAAA,wCAAU,EAAE,IAAI,OAAO;YAEvB,iEAAiE;YACjE,qEAAqE;YACrE,mEAAmE;YACnE,IAAI,UAAU,WAAW;gBACvB,2EAA2E;gBAC3E,IAAI,SAAS,aAAa,KAAK,IAAI,OAAO,IAAI,SAAS,aAAa,KAAK,SAAS,IAAI,EAAE;oBACtF,aAAa,OAAO,GAAG;oBACvB,IAAI,IAAI,OAAO,EAAE;wBACf,IAAI,OAAO,CAAC,IAAI;wBAChB,CAAA,GAAA,wCAAU,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, nodeContains, useSlotId} from '@react-aria/utils';\nimport {focusSafely} from '@react-aria/interactions';\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 {\n role = 'dialog'\n } = 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 && !nodeContains(ref.current, 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 // Check that the dialog is still focused, or focused was lost to the body.\n if (document.activeElement === ref.current || document.activeElement === document.body) {\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"}
@@ -1,79 +0,0 @@
1
- import {useSlotId as $i6df2$useSlotId, nodeContains as $i6df2$nodeContains, filterDOMProps as $i6df2$filterDOMProps} from "@react-aria/utils";
2
- import {focusSafely as $i6df2$focusSafely} from "@react-aria/interactions";
3
- import {useRef as $i6df2$useRef, useEffect as $i6df2$useEffect} from "react";
4
- import {useOverlayFocusContain as $i6df2$useOverlayFocusContain} from "@react-aria/overlays";
5
-
6
- /*
7
- * Copyright 2020 Adobe. All rights reserved.
8
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
9
- * you may not use this file except in compliance with the License. You may obtain a copy
10
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
11
- *
12
- * Unless required by applicable law or agreed to in writing, software distributed under
13
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
14
- * OF ANY KIND, either express or implied. See the License for the specific language
15
- * governing permissions and limitations under the License.
16
- */
17
-
18
-
19
-
20
- function $40df3f8667284809$export$d55e7ee900f34e93(props, ref) {
21
- let { role: role = 'dialog' } = props;
22
- let titleId = (0, $i6df2$useSlotId)();
23
- titleId = props['aria-label'] ? undefined : titleId;
24
- let isRefocusing = (0, $i6df2$useRef)(false);
25
- // Focus the dialog itself on mount, unless a child element is already focused.
26
- (0, $i6df2$useEffect)(()=>{
27
- if (ref.current && !(0, $i6df2$nodeContains)(ref.current, document.activeElement)) {
28
- (0, $i6df2$focusSafely)(ref.current);
29
- // Safari on iOS does not move the VoiceOver cursor to the dialog
30
- // or announce that it has opened until it has rendered. A workaround
31
- // is to wait for half a second, then blur and re-focus the dialog.
32
- let timeout = setTimeout(()=>{
33
- // Check that the dialog is still focused, or focused was lost to the body.
34
- if (document.activeElement === ref.current || document.activeElement === document.body) {
35
- isRefocusing.current = true;
36
- if (ref.current) {
37
- ref.current.blur();
38
- (0, $i6df2$focusSafely)(ref.current);
39
- }
40
- isRefocusing.current = false;
41
- }
42
- }, 500);
43
- return ()=>{
44
- clearTimeout(timeout);
45
- };
46
- }
47
- }, [
48
- ref
49
- ]);
50
- (0, $i6df2$useOverlayFocusContain)();
51
- // We do not use aria-modal due to a Safari bug which forces the first focusable element to be focused
52
- // on mount when inside an iframe, no matter which element we programmatically focus.
53
- // See https://bugs.webkit.org/show_bug.cgi?id=211934.
54
- // useModal sets aria-hidden on all elements outside the dialog, so the dialog will behave as a modal
55
- // even without aria-modal on the dialog itself.
56
- return {
57
- dialogProps: {
58
- ...(0, $i6df2$filterDOMProps)(props, {
59
- labelable: true
60
- }),
61
- role: role,
62
- tabIndex: -1,
63
- 'aria-labelledby': props['aria-labelledby'] || titleId,
64
- // Prevent blur events from reaching useOverlay, which may cause
65
- // popovers to close. Since focus is contained within the dialog,
66
- // we don't want this to occur due to the above useEffect.
67
- onBlur: (e)=>{
68
- if (isRefocusing.current) e.stopPropagation();
69
- }
70
- },
71
- titleProps: {
72
- id: titleId
73
- }
74
- };
75
- }
76
-
77
-
78
- export {$40df3f8667284809$export$d55e7ee900f34e93 as useDialog};
79
- //# sourceMappingURL=useDialog.module.js.map
@@ -1,79 +0,0 @@
1
- import {useSlotId as $i6df2$useSlotId, nodeContains as $i6df2$nodeContains, filterDOMProps as $i6df2$filterDOMProps} from "@react-aria/utils";
2
- import {focusSafely as $i6df2$focusSafely} from "@react-aria/interactions";
3
- import {useRef as $i6df2$useRef, useEffect as $i6df2$useEffect} from "react";
4
- import {useOverlayFocusContain as $i6df2$useOverlayFocusContain} from "@react-aria/overlays";
5
-
6
- /*
7
- * Copyright 2020 Adobe. All rights reserved.
8
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
9
- * you may not use this file except in compliance with the License. You may obtain a copy
10
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
11
- *
12
- * Unless required by applicable law or agreed to in writing, software distributed under
13
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
14
- * OF ANY KIND, either express or implied. See the License for the specific language
15
- * governing permissions and limitations under the License.
16
- */
17
-
18
-
19
-
20
- function $40df3f8667284809$export$d55e7ee900f34e93(props, ref) {
21
- let { role: role = 'dialog' } = props;
22
- let titleId = (0, $i6df2$useSlotId)();
23
- titleId = props['aria-label'] ? undefined : titleId;
24
- let isRefocusing = (0, $i6df2$useRef)(false);
25
- // Focus the dialog itself on mount, unless a child element is already focused.
26
- (0, $i6df2$useEffect)(()=>{
27
- if (ref.current && !(0, $i6df2$nodeContains)(ref.current, document.activeElement)) {
28
- (0, $i6df2$focusSafely)(ref.current);
29
- // Safari on iOS does not move the VoiceOver cursor to the dialog
30
- // or announce that it has opened until it has rendered. A workaround
31
- // is to wait for half a second, then blur and re-focus the dialog.
32
- let timeout = setTimeout(()=>{
33
- // Check that the dialog is still focused, or focused was lost to the body.
34
- if (document.activeElement === ref.current || document.activeElement === document.body) {
35
- isRefocusing.current = true;
36
- if (ref.current) {
37
- ref.current.blur();
38
- (0, $i6df2$focusSafely)(ref.current);
39
- }
40
- isRefocusing.current = false;
41
- }
42
- }, 500);
43
- return ()=>{
44
- clearTimeout(timeout);
45
- };
46
- }
47
- }, [
48
- ref
49
- ]);
50
- (0, $i6df2$useOverlayFocusContain)();
51
- // We do not use aria-modal due to a Safari bug which forces the first focusable element to be focused
52
- // on mount when inside an iframe, no matter which element we programmatically focus.
53
- // See https://bugs.webkit.org/show_bug.cgi?id=211934.
54
- // useModal sets aria-hidden on all elements outside the dialog, so the dialog will behave as a modal
55
- // even without aria-modal on the dialog itself.
56
- return {
57
- dialogProps: {
58
- ...(0, $i6df2$filterDOMProps)(props, {
59
- labelable: true
60
- }),
61
- role: role,
62
- tabIndex: -1,
63
- 'aria-labelledby': props['aria-labelledby'] || titleId,
64
- // Prevent blur events from reaching useOverlay, which may cause
65
- // popovers to close. Since focus is contained within the dialog,
66
- // we don't want this to occur due to the above useEffect.
67
- onBlur: (e)=>{
68
- if (isRefocusing.current) e.stopPropagation();
69
- }
70
- },
71
- titleProps: {
72
- id: titleId
73
- }
74
- };
75
- }
76
-
77
-
78
- export {$40df3f8667284809$export$d55e7ee900f34e93 as useDialog};
79
- //# sourceMappingURL=useDialog.module.js.map
@@ -1 +0,0 @@
1
- {"mappings":";;;;;AAAA;;;;;;;;;;CAUC;;;;AAqBM,SAAS,0CAAU,KAAsB,EAAE,GAAuC;IACvF,IAAI,QACF,OAAO,UACR,GAAG;IACJ,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,CAAA,GAAA,mBAAW,EAAE,IAAI,OAAO,EAAE,SAAS,aAAa,GAAG;YACrE,CAAA,GAAA,kBAAU,EAAE,IAAI,OAAO;YAEvB,iEAAiE;YACjE,qEAAqE;YACrE,mEAAmE;YACnE,IAAI,UAAU,WAAW;gBACvB,2EAA2E;gBAC3E,IAAI,SAAS,aAAa,KAAK,IAAI,OAAO,IAAI,SAAS,aAAa,KAAK,SAAS,IAAI,EAAE;oBACtF,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, nodeContains, useSlotId} from '@react-aria/utils';\nimport {focusSafely} from '@react-aria/interactions';\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 {\n role = 'dialog'\n } = 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 && !nodeContains(ref.current, 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 // Check that the dialog is still focused, or focused was lost to the body.\n if (document.activeElement === ref.current || document.activeElement === document.body) {\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/src/useDialog.ts DELETED
@@ -1,93 +0,0 @@
1
- /*
2
- * Copyright 2020 Adobe. All rights reserved.
3
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
4
- * you may not use this file except in compliance with the License. You may obtain a copy
5
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
6
- *
7
- * Unless required by applicable law or agreed to in writing, software distributed under
8
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9
- * OF ANY KIND, either express or implied. See the License for the specific language
10
- * governing permissions and limitations under the License.
11
- */
12
-
13
- import {AriaDialogProps} from '@react-types/dialog';
14
- import {DOMAttributes, FocusableElement, RefObject} from '@react-types/shared';
15
- import {filterDOMProps, nodeContains, useSlotId} from '@react-aria/utils';
16
- import {focusSafely} from '@react-aria/interactions';
17
- import {useEffect, useRef} from 'react';
18
- import {useOverlayFocusContain} from '@react-aria/overlays';
19
-
20
- export interface DialogAria {
21
- /** Props for the dialog container element. */
22
- dialogProps: DOMAttributes,
23
-
24
- /** Props for the dialog title element. */
25
- titleProps: DOMAttributes
26
- }
27
-
28
- /**
29
- * Provides the behavior and accessibility implementation for a dialog component.
30
- * A dialog is an overlay shown above other content in an application.
31
- */
32
- export function useDialog(props: AriaDialogProps, ref: RefObject<FocusableElement | null>): DialogAria {
33
- let {
34
- role = 'dialog'
35
- } = props;
36
- let titleId: string | undefined = useSlotId();
37
- titleId = props['aria-label'] ? undefined : titleId;
38
-
39
- let isRefocusing = useRef(false);
40
-
41
- // Focus the dialog itself on mount, unless a child element is already focused.
42
- useEffect(() => {
43
- if (ref.current && !nodeContains(ref.current, document.activeElement)) {
44
- focusSafely(ref.current);
45
-
46
- // Safari on iOS does not move the VoiceOver cursor to the dialog
47
- // or announce that it has opened until it has rendered. A workaround
48
- // is to wait for half a second, then blur and re-focus the dialog.
49
- let timeout = setTimeout(() => {
50
- // Check that the dialog is still focused, or focused was lost to the body.
51
- if (document.activeElement === ref.current || document.activeElement === document.body) {
52
- isRefocusing.current = true;
53
- if (ref.current) {
54
- ref.current.blur();
55
- focusSafely(ref.current);
56
- }
57
- isRefocusing.current = false;
58
- }
59
- }, 500);
60
-
61
- return () => {
62
- clearTimeout(timeout);
63
- };
64
- }
65
- }, [ref]);
66
-
67
- useOverlayFocusContain();
68
-
69
- // We do not use aria-modal due to a Safari bug which forces the first focusable element to be focused
70
- // on mount when inside an iframe, no matter which element we programmatically focus.
71
- // See https://bugs.webkit.org/show_bug.cgi?id=211934.
72
- // useModal sets aria-hidden on all elements outside the dialog, so the dialog will behave as a modal
73
- // even without aria-modal on the dialog itself.
74
- return {
75
- dialogProps: {
76
- ...filterDOMProps(props, {labelable: true}),
77
- role,
78
- tabIndex: -1,
79
- 'aria-labelledby': props['aria-labelledby'] || titleId,
80
- // Prevent blur events from reaching useOverlay, which may cause
81
- // popovers to close. Since focus is contained within the dialog,
82
- // we don't want this to occur due to the above useEffect.
83
- onBlur: e => {
84
- if (isRefocusing.current) {
85
- e.stopPropagation();
86
- }
87
- }
88
- },
89
- titleProps: {
90
- id: titleId
91
- }
92
- };
93
- }