@react-aria/overlays 3.14.1 → 3.16.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 +21 -14
- package/dist/main.js +21 -14
- package/dist/main.js.map +1 -1
- package/dist/module.js +21 -14
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +14 -3
- package/dist/types.d.ts.map +1 -1
- package/package.json +13 -13
- package/src/Overlay.tsx +28 -8
- package/src/calculatePosition.ts +2 -2
- package/src/useOverlayPosition.ts +3 -1
- package/src/usePreventScroll.ts +6 -2
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;AEoBA,kCAAmC,SAAQ,aAAa;IACtD;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,SAAS,EAAE,UAAU,OAAO,CAAC,CAAC;IAC9B;;OAEG;IACH,UAAU,EAAE,UAAU,OAAO,CAAC,CAAC;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,UAAU,OAAO,CAAC,CAAC;IAC/B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAA;CAC7B;AAED;IACE,+CAA+C;IAC/C,YAAY,EAAE,aAAa,CAAC;IAC5B,8CAA8C;IAC9C,UAAU,EAAE,aAAa,CAAC;IAC1B,oEAAoE;IACpE,SAAS,EAAE,aAAa,CAAC;IACzB,2CAA2C;IAC3C,cAAc,IAAI,IAAI,CAAA;CACvB;AAKD;;;GAGG;AACH,mCAAmC,KAAK,EAAE,iBAAiB,GAAG,YAAY,
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/calculatePosition.ts","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/useCloseOnScroll.ts","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/useOverlayPosition.ts","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/useOverlay.ts","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/useOverlayTrigger.ts","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/usePreventScroll.ts","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/useModal.tsx","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/DismissButton.tsx","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/ariaHideOutside.ts","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/usePopover.ts","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/Overlay.tsx","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/useModalOverlay.ts","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/index.ts","packages/@react-aria/overlays/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null,null,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 {useOverlayPosition} from './useOverlayPosition';\nexport {useOverlay} from './useOverlay';\nexport {useOverlayTrigger} from './useOverlayTrigger';\nexport {usePreventScroll} from './usePreventScroll';\nexport {ModalProvider, useModalProvider, OverlayProvider, OverlayContainer, useModal} from './useModal';\nexport {DismissButton} from './DismissButton';\nexport {ariaHideOutside} from './ariaHideOutside';\nexport {usePopover} from './usePopover';\nexport {useModalOverlay} from './useModalOverlay';\nexport {Overlay, useOverlayFocusContain} from './Overlay';\n\nexport type {AriaPositionProps, PositionAria} from './useOverlayPosition';\nexport type {AriaOverlayProps, OverlayAria} from './useOverlay';\nexport type {OverlayTriggerAria, OverlayTriggerProps} from './useOverlayTrigger';\nexport type {AriaModalOptions, ModalAria, ModalProviderAria, ModalProviderProps, OverlayContainerProps} from './useModal';\nexport type {DismissButtonProps} from './DismissButton';\nexport type {AriaPopoverProps, PopoverAria} from './usePopover';\nexport type {AriaModalOverlayProps, ModalOverlayAria} from './useModalOverlay';\nexport type {OverlayProps} from './Overlay';\nexport type {Placement, PlacementAxis, PositionProps} from '@react-types/overlays';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-aria/overlays",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.16.0",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -22,17 +22,17 @@
|
|
|
22
22
|
"url": "https://github.com/adobe/react-spectrum"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@react-aria/focus": "^3.
|
|
26
|
-
"@react-aria/i18n": "^3.
|
|
27
|
-
"@react-aria/interactions": "^3.
|
|
28
|
-
"@react-aria/ssr": "^3.
|
|
29
|
-
"@react-aria/utils": "^3.
|
|
30
|
-
"@react-aria/visually-hidden": "^3.8.
|
|
31
|
-
"@react-stately/overlays": "^3.
|
|
32
|
-
"@react-types/button": "^3.7.
|
|
33
|
-
"@react-types/overlays": "^3.
|
|
34
|
-
"@react-types/shared": "^3.
|
|
35
|
-
"@swc/helpers": "^0.
|
|
25
|
+
"@react-aria/focus": "^3.14.0",
|
|
26
|
+
"@react-aria/i18n": "^3.8.1",
|
|
27
|
+
"@react-aria/interactions": "^3.17.0",
|
|
28
|
+
"@react-aria/ssr": "^3.7.1",
|
|
29
|
+
"@react-aria/utils": "^3.19.0",
|
|
30
|
+
"@react-aria/visually-hidden": "^3.8.3",
|
|
31
|
+
"@react-stately/overlays": "^3.6.1",
|
|
32
|
+
"@react-types/button": "^3.7.4",
|
|
33
|
+
"@react-types/overlays": "^3.8.1",
|
|
34
|
+
"@react-types/shared": "^3.19.0",
|
|
35
|
+
"@swc/helpers": "^0.5.0"
|
|
36
36
|
},
|
|
37
37
|
"peerDependencies": {
|
|
38
38
|
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
|
|
@@ -41,5 +41,5 @@
|
|
|
41
41
|
"publishConfig": {
|
|
42
42
|
"access": "public"
|
|
43
43
|
},
|
|
44
|
-
"gitHead": "
|
|
44
|
+
"gitHead": "d4dfe4bb842a914f10045ee63fc6b92f034c5b30"
|
|
45
45
|
}
|
package/src/Overlay.tsx
CHANGED
|
@@ -23,7 +23,18 @@ export interface OverlayProps {
|
|
|
23
23
|
*/
|
|
24
24
|
portalContainer?: Element,
|
|
25
25
|
/** The overlay to render in the portal. */
|
|
26
|
-
children: ReactNode
|
|
26
|
+
children: ReactNode,
|
|
27
|
+
/**
|
|
28
|
+
* Disables default focus management for the overlay, including containment and restoration.
|
|
29
|
+
* This option should be used very carefully. When focus management is disabled, you must
|
|
30
|
+
* implement focus containment and restoration to ensure the overlay is keyboard accessible.
|
|
31
|
+
*/
|
|
32
|
+
disableFocusManagement?: boolean,
|
|
33
|
+
/**
|
|
34
|
+
* Whether the overlay is currently performing an exit animation. When true,
|
|
35
|
+
* focus is allowed to move outside.
|
|
36
|
+
*/
|
|
37
|
+
isExiting?: boolean
|
|
27
38
|
}
|
|
28
39
|
|
|
29
40
|
export const OverlayContext = React.createContext(null);
|
|
@@ -34,7 +45,7 @@ export const OverlayContext = React.createContext(null);
|
|
|
34
45
|
*/
|
|
35
46
|
export function Overlay(props: OverlayProps) {
|
|
36
47
|
let isSSR = useIsSSR();
|
|
37
|
-
let {portalContainer = isSSR ? null : document.body} = props;
|
|
48
|
+
let {portalContainer = isSSR ? null : document.body, isExiting} = props;
|
|
38
49
|
let [contain, setContain] = useState(false);
|
|
39
50
|
let contextValue = useMemo(() => ({contain, setContain}), [contain, setContain]);
|
|
40
51
|
|
|
@@ -42,13 +53,22 @@ export function Overlay(props: OverlayProps) {
|
|
|
42
53
|
return null;
|
|
43
54
|
}
|
|
44
55
|
|
|
45
|
-
let contents
|
|
46
|
-
|
|
47
|
-
|
|
56
|
+
let contents;
|
|
57
|
+
if (!props.disableFocusManagement) {
|
|
58
|
+
contents = (
|
|
59
|
+
<OverlayContext.Provider value={contextValue}>
|
|
60
|
+
<FocusScope restoreFocus contain={contain && !isExiting}>
|
|
61
|
+
{props.children}
|
|
62
|
+
</FocusScope>
|
|
63
|
+
</OverlayContext.Provider>
|
|
64
|
+
);
|
|
65
|
+
} else {
|
|
66
|
+
contents = (
|
|
67
|
+
<OverlayContext.Provider value={contextValue}>
|
|
48
68
|
{props.children}
|
|
49
|
-
</
|
|
50
|
-
|
|
51
|
-
|
|
69
|
+
</OverlayContext.Provider>
|
|
70
|
+
);
|
|
71
|
+
}
|
|
52
72
|
|
|
53
73
|
return ReactDOM.createPortal(contents, portalContainer);
|
|
54
74
|
}
|
package/src/calculatePosition.ts
CHANGED
|
@@ -101,7 +101,7 @@ const TOTAL_SIZE = {
|
|
|
101
101
|
const PARSED_PLACEMENT_CACHE = {};
|
|
102
102
|
|
|
103
103
|
// @ts-ignore
|
|
104
|
-
let visualViewport = typeof
|
|
104
|
+
let visualViewport = typeof document !== 'undefined' && window.visualViewport;
|
|
105
105
|
|
|
106
106
|
function getContainerDimensions(containerNode: Element): Dimensions {
|
|
107
107
|
let width = 0, height = 0, totalWidth = 0, totalHeight = 0, top = 0, left = 0;
|
|
@@ -393,7 +393,7 @@ export function calculatePosition(opts: PositionOpts): PositionResult {
|
|
|
393
393
|
offset,
|
|
394
394
|
crossOffset,
|
|
395
395
|
maxHeight,
|
|
396
|
-
arrowSize,
|
|
396
|
+
arrowSize = 0,
|
|
397
397
|
arrowBoundaryOffset = 0
|
|
398
398
|
} = opts;
|
|
399
399
|
|
|
@@ -73,7 +73,7 @@ export interface PositionAria {
|
|
|
73
73
|
}
|
|
74
74
|
|
|
75
75
|
// @ts-ignore
|
|
76
|
-
let visualViewport = typeof
|
|
76
|
+
let visualViewport = typeof document !== 'undefined' && window.visualViewport;
|
|
77
77
|
|
|
78
78
|
/**
|
|
79
79
|
* Handles positioning overlays like popovers and menus relative to a trigger
|
|
@@ -217,6 +217,8 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
|
|
|
217
217
|
},
|
|
218
218
|
placement: position.placement,
|
|
219
219
|
arrowProps: {
|
|
220
|
+
'aria-hidden': 'true',
|
|
221
|
+
role: 'presentation',
|
|
220
222
|
style: {
|
|
221
223
|
left: position.arrowOffsetLeft,
|
|
222
224
|
top: position.arrowOffsetTop
|
package/src/usePreventScroll.ts
CHANGED
|
@@ -18,7 +18,7 @@ interface PreventScrollOptions {
|
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
// @ts-ignore
|
|
21
|
-
const visualViewport = typeof
|
|
21
|
+
const visualViewport = typeof document !== 'undefined' && window.visualViewport;
|
|
22
22
|
|
|
23
23
|
// HTML input types that do not cause the software keyboard to appear.
|
|
24
24
|
const nonTextInputTypes = new Set([
|
|
@@ -118,7 +118,7 @@ function preventScrollMobileSafari() {
|
|
|
118
118
|
|
|
119
119
|
let onTouchMove = (e: TouchEvent) => {
|
|
120
120
|
// Prevent scrolling the window.
|
|
121
|
-
if (scrollable === document.documentElement || scrollable === document.body) {
|
|
121
|
+
if (!scrollable || scrollable === document.documentElement || scrollable === document.body) {
|
|
122
122
|
e.preventDefault();
|
|
123
123
|
return;
|
|
124
124
|
}
|
|
@@ -131,6 +131,10 @@ function preventScrollMobileSafari() {
|
|
|
131
131
|
let scrollTop = scrollable.scrollTop;
|
|
132
132
|
let bottom = scrollable.scrollHeight - scrollable.clientHeight;
|
|
133
133
|
|
|
134
|
+
if (bottom === 0) {
|
|
135
|
+
return;
|
|
136
|
+
}
|
|
137
|
+
|
|
134
138
|
if ((scrollTop <= 0 && y > lastY) || (scrollTop >= bottom && y < lastY)) {
|
|
135
139
|
e.preventDefault();
|
|
136
140
|
}
|