@react-native-aria/overlays 0.3.10 → 0.3.11
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/lib/commonjs/Portal.js +17 -37
- package/lib/commonjs/Portal.js.map +1 -1
- package/lib/commonjs/index.js +0 -10
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/index.web.js +0 -10
- package/lib/commonjs/index.web.js.map +1 -1
- package/lib/commonjs/useOverlay.js +0 -1
- package/lib/commonjs/useOverlay.js.map +1 -1
- package/lib/commonjs/useOverlay.web.js +9 -11
- package/lib/commonjs/useOverlay.web.js.map +1 -1
- package/lib/commonjs/useOverlayPosition.js +54 -69
- package/lib/commonjs/useOverlayPosition.js.map +1 -1
- package/lib/commonjs/useOverlayPosition.web.js +0 -1
- package/lib/commonjs/useOverlayPosition.web.js.map +1 -1
- package/lib/commonjs/useOverlayTrigger.js +0 -1
- package/lib/commonjs/useOverlayTrigger.js.map +1 -1
- package/lib/commonjs/useOverlayTrigger.web.js +0 -1
- package/lib/commonjs/useOverlayTrigger.web.js.map +1 -1
- package/lib/commonjs/usePreventScroll.js +0 -2
- package/lib/commonjs/usePreventScroll.js.map +1 -1
- package/lib/commonjs/usePreventScroll.web.js +0 -1
- package/lib/commonjs/usePreventScroll.web.js.map +1 -1
- package/lib/commonjs/utils.js +8 -8
- package/lib/commonjs/utils.js.map +1 -1
- package/lib/commonjs/web/overlays/index.js +0 -2
- package/lib/commonjs/web/overlays/index.js.map +1 -1
- package/lib/commonjs/web/overlays/src/calculatePosition.js +35 -68
- package/lib/commonjs/web/overlays/src/calculatePosition.js.map +1 -1
- package/lib/commonjs/web/overlays/src/index.js +0 -2
- package/lib/commonjs/web/overlays/src/index.js.map +1 -1
- package/lib/commonjs/web/overlays/src/useCloseOnScroll.js +3 -12
- package/lib/commonjs/web/overlays/src/useCloseOnScroll.js.map +1 -1
- package/lib/commonjs/web/overlays/src/useOverlayPosition.js +19 -23
- package/lib/commonjs/web/overlays/src/useOverlayPosition.js.map +1 -1
- package/lib/module/Portal.js +13 -20
- package/lib/module/Portal.js.map +1 -1
- package/lib/module/index.js.map +1 -1
- package/lib/module/index.web.js.map +1 -1
- package/lib/module/useOverlay.js.map +1 -1
- package/lib/module/useOverlay.web.js +9 -8
- package/lib/module/useOverlay.web.js.map +1 -1
- package/lib/module/useOverlayPosition.js +55 -60
- package/lib/module/useOverlayPosition.js.map +1 -1
- package/lib/module/useOverlayPosition.web.js.map +1 -1
- package/lib/module/useOverlayTrigger.js.map +1 -1
- package/lib/module/useOverlayTrigger.web.js.map +1 -1
- package/lib/module/usePreventScroll.js.map +1 -1
- package/lib/module/usePreventScroll.web.js.map +1 -1
- package/lib/module/utils.js +8 -4
- package/lib/module/utils.js.map +1 -1
- package/lib/module/web/overlays/index.js +1 -0
- package/lib/module/web/overlays/index.js.map +1 -1
- package/lib/module/web/overlays/src/calculatePosition.js +34 -57
- package/lib/module/web/overlays/src/calculatePosition.js.map +1 -1
- package/lib/module/web/overlays/src/index.js +1 -0
- package/lib/module/web/overlays/src/index.js.map +1 -1
- package/lib/module/web/overlays/src/useCloseOnScroll.js +4 -9
- package/lib/module/web/overlays/src/useCloseOnScroll.js.map +1 -1
- package/lib/module/web/overlays/src/useOverlayPosition.js +19 -18
- package/lib/module/web/overlays/src/useOverlayPosition.js.map +1 -1
- package/lib/typescript/Portal.d.ts +4 -2
- package/lib/typescript/Portal.d.ts.map +1 -0
- package/lib/typescript/index.d.ts +1 -0
- package/lib/typescript/index.d.ts.map +1 -0
- package/lib/typescript/index.web.d.ts +1 -0
- package/lib/typescript/index.web.d.ts.map +1 -0
- package/lib/typescript/useOverlay.d.ts +1 -0
- package/lib/typescript/useOverlay.d.ts.map +1 -0
- package/lib/typescript/useOverlay.web.d.ts +1 -0
- package/lib/typescript/useOverlay.web.d.ts.map +1 -0
- package/lib/typescript/useOverlayPosition.d.ts +1 -0
- package/lib/typescript/useOverlayPosition.d.ts.map +1 -0
- package/lib/typescript/useOverlayPosition.web.d.ts +1 -0
- package/lib/typescript/useOverlayPosition.web.d.ts.map +1 -0
- package/lib/typescript/useOverlayTrigger.d.ts +1 -0
- package/lib/typescript/useOverlayTrigger.d.ts.map +1 -0
- package/lib/typescript/useOverlayTrigger.web.d.ts +1 -0
- package/lib/typescript/useOverlayTrigger.web.d.ts.map +1 -0
- package/lib/typescript/usePreventScroll.d.ts +1 -0
- package/lib/typescript/usePreventScroll.d.ts.map +1 -0
- package/lib/typescript/usePreventScroll.web.d.ts +1 -0
- package/lib/typescript/usePreventScroll.web.d.ts.map +1 -0
- package/lib/typescript/utils.d.ts +1 -0
- package/lib/typescript/utils.d.ts.map +1 -0
- package/lib/typescript/web/overlays/index.d.ts +1 -0
- package/lib/typescript/web/overlays/index.d.ts.map +1 -0
- package/lib/typescript/web/overlays/src/calculatePosition.d.ts +1 -0
- package/lib/typescript/web/overlays/src/calculatePosition.d.ts.map +1 -0
- package/lib/typescript/web/overlays/src/index.d.ts +1 -0
- package/lib/typescript/web/overlays/src/index.d.ts.map +1 -0
- package/lib/typescript/web/overlays/src/useCloseOnScroll.d.ts +1 -0
- package/lib/typescript/web/overlays/src/useCloseOnScroll.d.ts.map +1 -0
- package/lib/typescript/web/overlays/src/useOverlayPosition.d.ts +1 -0
- package/lib/typescript/web/overlays/src/useOverlayPosition.d.ts.map +1 -0
- package/package.json +2 -1
- package/src/useOverlayPosition.ts +37 -17
- package/src/utils.ts +1 -0
- package/babel.config.js +0 -3
- package/scripts/bootstrap.js +0 -24
- package/tsconfig.build.json +0 -5
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useOverlayPosition.ts"],"names":["visualViewport","window","useOverlayPosition","props","direction","undefined","targetRef","overlayRef","scrollRef","placement","containerPadding","shouldFlip","boundaryElement","document","body","offset","crossOffset","shouldUpdatePosition","isOpen","shouldOverlapWithTrigger","onClose","position","setPosition","arrowOffsetLeft","arrowOffsetTop","maxHeight","deps","current","offsetLeft","offsetTop","updatePosition","translateRTL","overlayNode","targetNode","scrollNode","padding","useResize","isResizing","timeout","onResize","clearTimeout","setTimeout","addEventListener","removeEventListener","close","triggerRef","rendered","overlayProps","style","zIndex","arrowProps","left","top","replace"],"mappings":"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","sourcesContent":["//@ts-nocheck\n/*\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 { calculatePosition, PositionResult } from './calculatePosition';\nimport {\n HTMLAttributes,\n RefObject,\n useCallback,\n useRef,\n useState,\n} from 'react';\nimport { Placement, PlacementAxis, PositionProps } from '@react-types/overlays';\nimport { useCloseOnScroll } from './useCloseOnScroll';\nimport { isRTL, useLayoutEffect } from '@react-native-aria/utils';\n\ninterface AriaPositionProps extends PositionProps {\n /**\n * Element that that serves as the positioning boundary.\n * @default document.body\n */\n boundaryElement?: HTMLElement;\n /**\n * The ref for the element which the overlay positions itself with respect to.\n */\n targetRef: RefObject<HTMLElement>;\n /**\n * The ref for the overlay element.\n */\n overlayRef: RefObject<HTMLElement>;\n /**\n * A ref for the scrollable region within the overlay.\n * @default overlayRef\n */\n scrollRef?: RefObject<HTMLElement>;\n /**\n * Whether the overlay should update its position automatically.\n * @default true\n */\n shouldUpdatePosition?: boolean;\n /** Handler that is called when the overlay should close. */\n onClose?: () => void;\n /** Determines whether the overlay should overlap with the trigger */\n shouldOverlapWithTrigger?: boolean;\n}\n\ninterface PositionAria {\n /** Props for the overlay container element. */\n overlayProps: HTMLAttributes<Element>;\n /** Props for the overlay tip arrow if any. */\n arrowProps: HTMLAttributes<Element>;\n /** Placement of the overlay with respect to the overlay trigger. */\n placement: PlacementAxis;\n /** Updates the position of the overlay. */\n updatePosition(): void;\n}\n\n// @ts-ignore\nlet visualViewport = typeof window !== 'undefined' && window.visualViewport;\n\n/**\n * Handles positioning overlays like popovers and menus relative to a trigger\n * element, and updating the position when the window resizes.\n */\nexport function useOverlayPosition(props: AriaPositionProps): PositionAria {\n const direction = isRTL() ? 'rtl' : undefined;\n let {\n targetRef,\n overlayRef,\n scrollRef = overlayRef,\n placement = 'bottom' as Placement,\n containerPadding = 12,\n shouldFlip = true,\n boundaryElement = typeof document !== 'undefined' ? document.body : null,\n offset = 0,\n crossOffset = 0,\n shouldUpdatePosition = true,\n isOpen = true,\n shouldOverlapWithTrigger = false,\n onClose,\n } = props;\n let [position, setPosition] = useState<PositionResult>({\n position: {},\n arrowOffsetLeft: undefined,\n arrowOffsetTop: undefined,\n maxHeight: undefined,\n placement: undefined,\n });\n\n let deps = [\n shouldUpdatePosition,\n placement,\n overlayRef.current,\n targetRef.current?.offsetLeft,\n targetRef.current?.offsetTop,\n scrollRef.current,\n containerPadding,\n shouldFlip,\n boundaryElement,\n offset,\n crossOffset,\n isOpen,\n direction,\n shouldOverlapWithTrigger,\n ];\n\n let updatePosition = useCallback(() => {\n if (\n shouldUpdatePosition === false ||\n !isOpen ||\n !overlayRef.current ||\n !targetRef.current ||\n !scrollRef.current ||\n !boundaryElement\n ) {\n return;\n }\n\n setPosition(\n calculatePosition({\n placement: translateRTL(placement, direction),\n overlayNode: overlayRef.current,\n targetNode: targetRef.current,\n scrollNode: scrollRef.current,\n padding: containerPadding,\n shouldFlip,\n boundaryElement,\n offset,\n crossOffset,\n shouldOverlapWithTrigger,\n })\n );\n }, deps);\n\n // Update position when anything changes\n useLayoutEffect(updatePosition, deps);\n\n // Update position on window resize\n useResize(updatePosition);\n\n // Reposition the overlay and do not close on scroll while the visual viewport is resizing.\n // This will ensure that overlays adjust their positioning when the iOS virtual keyboard appears.\n let isResizing = useRef(false);\n useLayoutEffect(() => {\n let timeout: NodeJS.Timeout;\n let onResize = () => {\n isResizing.current = true;\n clearTimeout(timeout);\n\n timeout = setTimeout(() => {\n isResizing.current = false;\n }, 500);\n\n updatePosition();\n };\n\n visualViewport?.addEventListener('resize', onResize);\n\n return () => {\n visualViewport?.removeEventListener('resize', onResize);\n };\n }, [updatePosition]);\n\n let close = useCallback(() => {\n if (!isResizing.current) {\n onClose();\n }\n }, [onClose, isResizing]);\n\n // When scrolling a parent scrollable region of the trigger (other than the body),\n // we hide the popover. Otherwise, its position would be incorrect.\n useCloseOnScroll({\n triggerRef: targetRef,\n isOpen,\n onClose: onClose ? close : undefined,\n });\n\n // useLayoutEffect(() => {\n // const mutationObserver = new MutationObserver((mutations) => {\n // updatePosition();\n // mutations.forEach((mutation) => {\n // // if (mutation.attributeName === 'style') {\n // // const transform = mutation.target.style.transform;\n // // if (transform) {\n // // const match = transform.match(/scale\\((.+)\\)/);\n // // if (match) {\n // // const scale = parseFloat(match[1]);\n // // console.log(`Scale: ${scale}`);\n // // // updatePosition();\n // // }\n // // }\n // // }\n // });\n // });\n\n // mutationObserver.observe(overlayRef?.current, { attributes: true });\n\n // return () => mutationObserver.disconnect();\n // }, [overlayRef, updatePosition]);\n\n return {\n rendered: true,\n overlayProps: {\n style: {\n position: 'absolute',\n zIndex: 100000, // should match the z-index in ModalTrigger\n ...position.position,\n maxHeight: position.maxHeight,\n },\n },\n placement: position.placement,\n arrowProps: {\n style: {\n left: position.arrowOffsetLeft,\n top: position.arrowOffsetTop,\n },\n },\n updatePosition,\n };\n}\n\nfunction useResize(onResize) {\n useLayoutEffect(() => {\n window.addEventListener('resize', onResize, false);\n return () => {\n window.removeEventListener('resize', onResize, false);\n };\n }, [onResize]);\n}\n\nfunction translateRTL(position, direction) {\n if (direction === 'rtl') {\n return position.replace('start', 'right').replace('end', 'left');\n }\n return position.replace('start', 'left').replace('end', 'right');\n}\n"]}
|
1
|
+
{"version":3,"names":["_calculatePosition","require","_react","_useCloseOnScroll","_utils","visualViewport","window","useOverlayPosition","props","_targetRef$current","_targetRef$current2","direction","isRTL","undefined","targetRef","overlayRef","scrollRef","placement","containerPadding","shouldFlip","boundaryElement","document","body","offset","crossOffset","shouldUpdatePosition","isOpen","shouldOverlapWithTrigger","onClose","position","setPosition","useState","arrowOffsetLeft","arrowOffsetTop","maxHeight","deps","current","offsetLeft","offsetTop","updatePosition","useCallback","calculatePosition","translateRTL","overlayNode","targetNode","scrollNode","padding","useLayoutEffect","useResize","isResizing","useRef","timeout","onResize","clearTimeout","setTimeout","addEventListener","removeEventListener","close","useCloseOnScroll","triggerRef","rendered","overlayProps","style","zIndex","arrowProps","left","top","replace"],"sourceRoot":"../../../../../src","sources":["web/overlays/src/useOverlayPosition.ts"],"mappings":"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"}
|
package/lib/module/Portal.js
CHANGED
@@ -1,12 +1,10 @@
|
|
1
|
-
function _extends() { _extends = Object.assign
|
2
|
-
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
3
2
|
import React, { useEffect } from 'react';
|
4
3
|
import { StyleSheet, View } from 'react-native';
|
5
4
|
const PortalContext = /*#__PURE__*/React.createContext(null);
|
6
5
|
let globalOverlayCounter = 0;
|
7
6
|
export function PortalProvider(props) {
|
8
7
|
const [items, setItems] = React.useState([]);
|
9
|
-
|
10
8
|
const setOverlayItem = element => {
|
11
9
|
const overlayId = ++globalOverlayCounter;
|
12
10
|
setItems(prev => prev.concat([{
|
@@ -15,11 +13,9 @@ export function PortalProvider(props) {
|
|
15
13
|
}]));
|
16
14
|
return overlayId;
|
17
15
|
};
|
18
|
-
|
19
16
|
const updateOverlayItem = (id, node) => {
|
20
17
|
setItems(prev => {
|
21
18
|
const overlayItem = prev.find(item => item.id == id);
|
22
|
-
|
23
19
|
if (!overlayItem) {
|
24
20
|
return prev.concat([{
|
25
21
|
id: id,
|
@@ -33,20 +29,17 @@ export function PortalProvider(props) {
|
|
33
29
|
node
|
34
30
|
};
|
35
31
|
}
|
36
|
-
|
37
32
|
return item;
|
38
33
|
});
|
39
34
|
}
|
40
35
|
});
|
41
36
|
};
|
42
|
-
|
43
37
|
const removeOverlayItem = id => {
|
44
38
|
setItems(prev => {
|
45
39
|
const newItems = prev.filter(item => item.id !== id);
|
46
40
|
return newItems;
|
47
41
|
});
|
48
42
|
};
|
49
|
-
|
50
43
|
return /*#__PURE__*/React.createElement(PortalContext.Provider, {
|
51
44
|
value: {
|
52
45
|
items,
|
@@ -61,7 +54,6 @@ export function PortalProvider(props) {
|
|
61
54
|
}, item.node);
|
62
55
|
}));
|
63
56
|
}
|
64
|
-
|
65
57
|
function OverlayView({
|
66
58
|
style,
|
67
59
|
...props
|
@@ -72,7 +64,6 @@ function OverlayView({
|
|
72
64
|
collapsable: false
|
73
65
|
}, props));
|
74
66
|
}
|
75
|
-
|
76
67
|
export const OverlayProvider = PortalProvider;
|
77
68
|
export function OverlayContainer(props) {
|
78
69
|
const context = usePortalProvider();
|
@@ -82,23 +73,27 @@ export function OverlayContainer(props) {
|
|
82
73
|
// Mount
|
83
74
|
if (overlayId.current === undefined) {
|
84
75
|
overlayId.current = context === null || context === void 0 ? void 0 : context.setOverlayItem(element);
|
85
|
-
}
|
76
|
+
}
|
77
|
+
// Update
|
86
78
|
else {
|
87
|
-
|
88
|
-
|
89
|
-
}
|
79
|
+
if (overlayId.current) {
|
80
|
+
context === null || context === void 0 || context.updateOverlayItem(overlayId.current, element);
|
90
81
|
}
|
91
|
-
|
92
|
-
|
82
|
+
}
|
83
|
+
},
|
84
|
+
// To re-render the child
|
85
|
+
[props]);
|
93
86
|
|
87
|
+
// Unmount
|
94
88
|
useEffect(() => {
|
95
89
|
return () => {
|
96
90
|
if (overlayId.current) {
|
97
|
-
context === null || context === void 0
|
91
|
+
context === null || context === void 0 || context.removeOverlayItem(overlayId.current);
|
98
92
|
}
|
99
93
|
};
|
100
|
-
}, []);
|
94
|
+
}, []);
|
101
95
|
|
96
|
+
// Rendering elements for SSR
|
102
97
|
if (context !== null && context !== void 0 && context.isSSR && !overlayId.current) {
|
103
98
|
return /*#__PURE__*/React.createElement(View, {
|
104
99
|
style: {
|
@@ -106,10 +101,8 @@ export function OverlayContainer(props) {
|
|
106
101
|
}
|
107
102
|
}, element);
|
108
103
|
}
|
109
|
-
|
110
104
|
return null;
|
111
105
|
}
|
112
|
-
|
113
106
|
function usePortalProvider() {
|
114
107
|
const context = React.useContext(PortalContext);
|
115
108
|
return context;
|
package/lib/module/Portal.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"names":["React","useEffect","StyleSheet","View","PortalContext","createContext","globalOverlayCounter","PortalProvider","props","items","setItems","useState","setOverlayItem","element","overlayId","prev","concat","id","node","updateOverlayItem","overlayItem","find","item","map","removeOverlayItem","newItems","filter","createElement","Provider","value","isSSR","children","Fragment","key","OverlayView","style","_extends","pointerEvents","absoluteFill","collapsable","OverlayProvider","OverlayContainer","context","usePortalProvider","useRef","undefined","current","display","useContext"],"sourceRoot":"../../src","sources":["Portal.tsx"],"mappings":"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"}
|
package/lib/module/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../src","sources":["index.ts"],"mappings":"AAAA,cAAc,sBAAsB;AACpC,cAAc,qBAAqB;AACnC,cAAc,UAAU;AACxB,cAAc,cAAc;AAC5B,cAAc,oBAAoB"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["index.web.ts"],"
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../src","sources":["index.web.ts"],"mappings":"AAAA,cAAc,0BAA0B;AACxC,cAAc,yBAAyB;AACvC,cAAc,UAAU;AACxB,cAAc,kBAAkB;AAChC,cAAc,wBAAwB"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"names":["useOverlay","_props","_ref","overlayProps"],"sourceRoot":"../../src","sources":["useOverlay.ts"],"mappings":"AAsCA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASA,UAAUA,CACxBC,MAAoB,EACpBC,IAA4B,EACf;EACb,OAAO;IACLC,YAAY,EAAE,CAAC;EACjB,CAAC;AACH"}
|
@@ -1,48 +1,49 @@
|
|
1
1
|
import { useEffect } from 'react';
|
2
2
|
import { useFocusWithin } from '@react-aria/interactions';
|
3
3
|
const visibleOverlays = [];
|
4
|
+
|
4
5
|
/**
|
5
6
|
* Provides the behavior for overlays such as dialogs, popovers, and menus.
|
6
7
|
* Hides the overlay when the user interacts outside it, when the Escape key is pressed,
|
7
8
|
* or optionally, on blur. Only the top-most overlay will close at once.
|
8
9
|
*/
|
9
|
-
|
10
10
|
export function useOverlay(props, ref) {
|
11
11
|
let {
|
12
12
|
onClose,
|
13
13
|
shouldCloseOnBlur,
|
14
14
|
isOpen,
|
15
15
|
isKeyboardDismissDisabled = false
|
16
|
-
} = props;
|
16
|
+
} = props;
|
17
17
|
|
18
|
+
// Add the overlay ref to the stack of visible overlays on mount, and remove on unmount.
|
18
19
|
useEffect(() => {
|
19
20
|
if (isOpen) {
|
20
21
|
visibleOverlays.push(ref);
|
21
22
|
}
|
22
|
-
|
23
23
|
return () => {
|
24
24
|
let index = visibleOverlays.indexOf(ref);
|
25
|
-
|
26
25
|
if (index >= 0) {
|
27
26
|
visibleOverlays.splice(index, 1);
|
28
27
|
}
|
29
28
|
};
|
30
|
-
}, [isOpen, ref]);
|
29
|
+
}, [isOpen, ref]);
|
31
30
|
|
31
|
+
// Only hide the overlay when it is the topmost visible overlay in the stack.
|
32
32
|
let onHide = () => {
|
33
33
|
if (visibleOverlays[visibleOverlays.length - 1] === ref && onClose) {
|
34
34
|
onClose();
|
35
35
|
}
|
36
|
-
};
|
37
|
-
|
36
|
+
};
|
38
37
|
|
38
|
+
// Handle the escape key
|
39
39
|
let onKeyDown = e => {
|
40
40
|
if (e.key === 'Escape' && !isKeyboardDismissDisabled) {
|
41
41
|
e.preventDefault();
|
42
42
|
onHide();
|
43
43
|
}
|
44
|
-
};
|
44
|
+
};
|
45
45
|
|
46
|
+
// Handle clicking outside the overlay to close it
|
46
47
|
|
47
48
|
let {
|
48
49
|
focusWithinProps
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"names":["useEffect","useFocusWithin","visibleOverlays","useOverlay","props","ref","onClose","shouldCloseOnBlur","isOpen","isKeyboardDismissDisabled","push","index","indexOf","splice","onHide","length","onKeyDown","e","key","preventDefault","focusWithinProps","isDisabled","onBlurWithin","overlayProps"],"sourceRoot":"../../src","sources":["useOverlay.web.ts"],"mappings":"AAAA,SAAoCA,SAAS,QAAQ,OAAO;AAC5D,SAASC,cAAc,QAAQ,0BAA0B;AAsCzD,MAAMC,eAAyC,GAAG,EAAE;;AAEpD;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,UAAUA,CACxBC,KAAmB,EACnBC,GAA2B,EACd;EACb,IAAI;IACFC,OAAO;IACPC,iBAAiB;IACjBC,MAAM;IACNC,yBAAyB,GAAG;EAC9B,CAAC,GAAGL,KAAK;;EAET;EACAJ,SAAS,CAAC,MAAM;IACd,IAAIQ,MAAM,EAAE;MACVN,eAAe,CAACQ,IAAI,CAACL,GAAG,CAAC;IAC3B;IAEA,OAAO,MAAM;MACX,IAAIM,KAAK,GAAGT,eAAe,CAACU,OAAO,CAACP,GAAG,CAAC;MACxC,IAAIM,KAAK,IAAI,CAAC,EAAE;QACdT,eAAe,CAACW,MAAM,CAACF,KAAK,EAAE,CAAC,CAAC;MAClC;IACF,CAAC;EACH,CAAC,EAAE,CAACH,MAAM,EAAEH,GAAG,CAAC,CAAC;;EAEjB;EACA,IAAIS,MAAM,GAAGA,CAAA,KAAM;IACjB,IAAIZ,eAAe,CAACA,eAAe,CAACa,MAAM,GAAG,CAAC,CAAC,KAAKV,GAAG,IAAIC,OAAO,EAAE;MAClEA,OAAO,CAAC,CAAC;IACX;EACF,CAAC;;EAED;EACA,IAAIU,SAAS,GAAIC,CAAM,IAAK;IAC1B,IAAIA,CAAC,CAACC,GAAG,KAAK,QAAQ,IAAI,CAACT,yBAAyB,EAAE;MACpDQ,CAAC,CAACE,cAAc,CAAC,CAAC;MAClBL,MAAM,CAAC,CAAC;IACV;EACF,CAAC;;EAED;;EAEA,IAAI;IAAEM;EAAiB,CAAC,GAAGnB,cAAc,CAAC;IACxCoB,UAAU,EAAE,CAACd,iBAAiB;IAC9Be,YAAY,EAAEA,CAAA,KAAM;MAClBhB,OAAO,IAAIA,OAAO,CAAC,CAAC;IACtB;EACF,CAAC,CAAC;EAEF,OAAO;IACLiB,YAAY,EAAE;MACZP,SAAS;MACT,GAAGI;IACL;EACF,CAAC;AACH"}
|
@@ -1,10 +1,10 @@
|
|
1
1
|
import React from 'react';
|
2
|
-
import {
|
2
|
+
import {
|
3
|
+
//@ts-ignore
|
3
4
|
Dimensions } from 'react-native';
|
4
5
|
//@ts-ignore
|
5
6
|
import { isRTL } from '@react-native-aria/utils';
|
6
7
|
import { APPROX_STATUSBAR_HEIGHT } from './utils';
|
7
|
-
|
8
8
|
const measureOffset = ref => new Promise(resolve => {
|
9
9
|
if (ref.current) {
|
10
10
|
ref.current.measureInWindow((x, y, width, height) => {
|
@@ -17,10 +17,25 @@ const measureOffset = ref => new Promise(resolve => {
|
|
17
17
|
});
|
18
18
|
}
|
19
19
|
});
|
20
|
-
|
20
|
+
const getArrowPropsWithStatusBarHeight = ({
|
21
|
+
top,
|
22
|
+
left
|
23
|
+
}) => {
|
24
|
+
let topWithStatusBarHeight = top;
|
25
|
+
if (typeof top !== 'undefined' && typeof APPROX_STATUSBAR_HEIGHT !== 'undefined') {
|
26
|
+
topWithStatusBarHeight = top + APPROX_STATUSBAR_HEIGHT;
|
27
|
+
} else {
|
28
|
+
topWithStatusBarHeight = undefined;
|
29
|
+
}
|
30
|
+
return {
|
31
|
+
style: {
|
32
|
+
left: left,
|
33
|
+
top: topWithStatusBarHeight
|
34
|
+
}
|
35
|
+
};
|
36
|
+
};
|
21
37
|
export function useOverlayPosition(props) {
|
22
38
|
var _position$position, _position$position2;
|
23
|
-
|
24
39
|
let {
|
25
40
|
targetRef,
|
26
41
|
overlayRef,
|
@@ -37,18 +52,18 @@ export function useOverlayPosition(props) {
|
|
37
52
|
arrowOffsetTop: undefined,
|
38
53
|
maxHeight: undefined,
|
39
54
|
placement: undefined
|
40
|
-
});
|
55
|
+
});
|
41
56
|
|
57
|
+
// Layout measurement happens asynchronously in RN. This causes initial flickr. Using opacity and setting it to 1 post calculation prevents that.
|
42
58
|
let [rendered, setRendered] = React.useState(false);
|
43
|
-
|
44
59
|
let updatePosition = async () => {
|
45
|
-
const [overlayOffset, triggerOffset] = await Promise.all([measureOffset(overlayRef), measureOffset(targetRef)]);
|
60
|
+
const [overlayOffset, triggerOffset] = await Promise.all([measureOffset(overlayRef), measureOffset(targetRef)]);
|
46
61
|
|
62
|
+
// Sometimes measure returns height/width 0. Best solution would be to use onLayout callback, but that might diverege from React Aria's useOverlayPosition API. Decide later, this works for now
|
47
63
|
if (!overlayOffset.width || !overlayOffset.height || !triggerOffset.width || !triggerOffset.height) {
|
48
64
|
requestAnimationFrame(updatePosition);
|
49
65
|
return;
|
50
66
|
}
|
51
|
-
|
52
67
|
const {
|
53
68
|
height: windowHeight,
|
54
69
|
width: windowWidth
|
@@ -73,7 +88,6 @@ export function useOverlayPosition(props) {
|
|
73
88
|
setPosition(positions);
|
74
89
|
setRendered(true);
|
75
90
|
};
|
76
|
-
|
77
91
|
React.useEffect(() => {
|
78
92
|
return () => {
|
79
93
|
setRendered(false);
|
@@ -81,47 +95,40 @@ export function useOverlayPosition(props) {
|
|
81
95
|
}, []);
|
82
96
|
React.useLayoutEffect(() => {
|
83
97
|
updatePosition();
|
98
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
84
99
|
}, [placement, isOpen, offset, shouldFlip, crossOffset, shouldOverlapWithTrigger]);
|
85
|
-
const style = {
|
100
|
+
const style = {
|
101
|
+
...position.position
|
86
102
|
};
|
87
|
-
|
88
|
-
if (position !== null && position !== void 0 && (_position$position = position.position) !== null && _position$position !== void 0 && _position$position.top || (position === null || position === void 0 ? void 0 : (_position$position2 = position.position) === null || _position$position2 === void 0 ? void 0 : _position$position2.top) === 0) {
|
103
|
+
if (position !== null && position !== void 0 && (_position$position = position.position) !== null && _position$position !== void 0 && _position$position.top || (position === null || position === void 0 || (_position$position2 = position.position) === null || _position$position2 === void 0 ? void 0 : _position$position2.top) === 0) {
|
89
104
|
var _position$position3;
|
90
|
-
|
91
|
-
style.top = ((position === null || position === void 0 ? void 0 : (_position$position3 = position.position) === null || _position$position3 === void 0 ? void 0 : _position$position3.top) || 0) + (APPROX_STATUSBAR_HEIGHT || 0);
|
105
|
+
style.top = ((position === null || position === void 0 || (_position$position3 = position.position) === null || _position$position3 === void 0 ? void 0 : _position$position3.top) || 0) + (APPROX_STATUSBAR_HEIGHT || 0);
|
92
106
|
}
|
93
|
-
|
107
|
+
const arrowPropsWithStatusBarHeight = getArrowPropsWithStatusBarHeight({
|
108
|
+
left: position === null || position === void 0 ? void 0 : position.arrowOffsetLeft,
|
109
|
+
top: position === null || position === void 0 ? void 0 : position.arrowOffsetTop
|
110
|
+
});
|
94
111
|
const returnProps = {
|
95
112
|
rendered,
|
96
113
|
overlayProps: {
|
97
114
|
style
|
98
115
|
},
|
99
116
|
placement: position.placement,
|
100
|
-
arrowProps:
|
101
|
-
style: {
|
102
|
-
left: position.arrowOffsetLeft,
|
103
|
-
top: ((position === null || position === void 0 ? void 0 : position.arrowOffsetTop) || 0) + (APPROX_STATUSBAR_HEIGHT || 0)
|
104
|
-
}
|
105
|
-
},
|
117
|
+
arrowProps: arrowPropsWithStatusBarHeight,
|
106
118
|
updatePosition
|
107
119
|
};
|
108
|
-
|
109
120
|
if (position.maxHeight !== undefined) {
|
110
121
|
//@ts-ignore
|
111
122
|
returnProps.overlayProps.style.maxHeight = position.maxHeight;
|
112
123
|
}
|
113
|
-
|
114
124
|
return returnProps;
|
115
125
|
}
|
116
|
-
|
117
126
|
function translateRTL(position) {
|
118
127
|
if (isRTL()) {
|
119
128
|
return position.replace('start', 'right').replace('end', 'left');
|
120
129
|
}
|
121
|
-
|
122
130
|
return position.replace('start', 'left').replace('end', 'right');
|
123
131
|
}
|
124
|
-
|
125
132
|
const calculatePosition = opts => {
|
126
133
|
let {
|
127
134
|
placement,
|
@@ -149,7 +156,6 @@ const calculatePosition = opts => {
|
|
149
156
|
let containerOffsetWithBoundary = overlayNode;
|
150
157
|
return calculatePositionInternal(placement, childOffset, overlaySize, scrollSize, margins, padding, shouldFlip, boundaryDimensions, containerOffsetWithBoundary, offset, crossOffset, isContainerPositioned, shouldOverlapWithTrigger);
|
151
158
|
};
|
152
|
-
|
153
159
|
function calculatePositionInternal(placementInput, childOffset, overlaySize, scrollSize, margins, padding, flip, boundaryDimensions, containerOffsetWithBoundary, offset, crossOffset, isContainerPositioned, shouldOverlapWithTrigger) {
|
154
160
|
let placementInfo = parsePlacement(placementInput);
|
155
161
|
let {
|
@@ -162,19 +168,18 @@ function calculatePositionInternal(placementInput, childOffset, overlaySize, scr
|
|
162
168
|
let position = computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, offset, crossOffset, containerOffsetWithBoundary, isContainerPositioned);
|
163
169
|
let normalizedOffset = offset;
|
164
170
|
let space = getAvailableSpace(boundaryDimensions, containerOffsetWithBoundary, childOffset, margins, padding + offset, placementInfo);
|
165
|
-
|
166
171
|
if (flip && scrollSize[size] > space) {
|
167
172
|
let flippedPlacementInfo = parsePlacement(`${FLIPPED_DIRECTION[placement]} ${crossPlacement}`);
|
168
173
|
let flippedPosition = computePosition(childOffset, boundaryDimensions, overlaySize, flippedPlacementInfo, offset, crossOffset, containerOffsetWithBoundary, isContainerPositioned);
|
169
|
-
let flippedSpace = getAvailableSpace(boundaryDimensions, containerOffsetWithBoundary, childOffset, margins, padding + offset, flippedPlacementInfo);
|
174
|
+
let flippedSpace = getAvailableSpace(boundaryDimensions, containerOffsetWithBoundary, childOffset, margins, padding + offset, flippedPlacementInfo);
|
170
175
|
|
176
|
+
// If the available space for the flipped position is greater than the original available space, flip.
|
171
177
|
if (flippedSpace > space) {
|
172
178
|
placementInfo = flippedPlacementInfo;
|
173
179
|
position = flippedPosition;
|
174
180
|
normalizedOffset = offset;
|
175
181
|
}
|
176
182
|
}
|
177
|
-
|
178
183
|
let delta = getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundaryDimensions, padding);
|
179
184
|
position[crossAxis] += delta;
|
180
185
|
let maxHeight = getMaxHeight(position, boundaryDimensions, containerOffsetWithBoundary, childOffset, margins, padding);
|
@@ -184,11 +189,9 @@ function calculatePositionInternal(placementInput, childOffset, overlaySize, scr
|
|
184
189
|
position[crossAxis] += delta;
|
185
190
|
let arrowPosition = {};
|
186
191
|
arrowPosition[crossAxis] = childOffset[crossAxis] - position[crossAxis] + childOffset[crossSize] / 2;
|
187
|
-
|
188
192
|
if (shouldOverlapWithTrigger) {
|
189
193
|
position[FLIPPED_DIRECTION[placementInfo.placement]] = position[FLIPPED_DIRECTION[placementInfo.placement]] - childOffset[size];
|
190
194
|
}
|
191
|
-
|
192
195
|
return {
|
193
196
|
position,
|
194
197
|
maxHeight,
|
@@ -197,15 +200,13 @@ function calculatePositionInternal(placementInput, childOffset, overlaySize, scr
|
|
197
200
|
placement: placementInfo.placement
|
198
201
|
};
|
199
202
|
}
|
200
|
-
|
201
203
|
function getDelta(axis, offset, size, containerDimensions, padding) {
|
202
204
|
//@ts-ignore
|
203
|
-
let containerScroll = containerDimensions[axis];
|
204
|
-
|
205
|
+
let containerScroll = containerDimensions[axis];
|
206
|
+
//@ts-ignore
|
205
207
|
let containerHeight = containerDimensions[AXIS_SIZE[axis]];
|
206
208
|
let startEdgeOffset = offset - padding - containerScroll;
|
207
209
|
let endEdgeOffset = offset + padding - containerScroll + size;
|
208
|
-
|
209
210
|
if (startEdgeOffset < 0) {
|
210
211
|
return -startEdgeOffset;
|
211
212
|
} else if (endEdgeOffset > containerHeight) {
|
@@ -214,17 +215,19 @@ function getDelta(axis, offset, size, containerDimensions, padding) {
|
|
214
215
|
return 0;
|
215
216
|
}
|
216
217
|
}
|
217
|
-
|
218
218
|
function getMaxHeight(position, boundaryDimensions, _containerOffsetWithBoundary, childOffset, _margins, _padding) {
|
219
|
-
return position.top != null ?
|
220
|
-
|
219
|
+
return position.top != null ?
|
220
|
+
// We want the distance between the top of the overlay to the bottom of the boundary
|
221
|
+
Math.max(0, boundaryDimensions.height -
|
222
|
+
// this is the bottom of the boundary
|
221
223
|
position.top // this is the top of the overlay
|
222
|
-
) :
|
223
|
-
|
224
|
+
) :
|
225
|
+
// We want the distance between the top of the trigger to the top of the boundary
|
226
|
+
Math.max(0, childOffset.top -
|
227
|
+
// this is the top of the trigger
|
224
228
|
0 // this is the top of the boundary
|
225
229
|
);
|
226
230
|
}
|
227
|
-
|
228
231
|
function computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, offset, crossOffset, _containerOffsetWithBoundary, _isContainerPositioned) {
|
229
232
|
let {
|
230
233
|
placement,
|
@@ -234,24 +237,25 @@ function computePosition(childOffset, boundaryDimensions, overlaySize, placement
|
|
234
237
|
size,
|
235
238
|
crossSize
|
236
239
|
} = placementInfo;
|
237
|
-
let position = {};
|
238
|
-
|
240
|
+
let position = {};
|
241
|
+
//@ts-ignore
|
239
242
|
position[crossAxis] = childOffset[crossAxis];
|
240
|
-
|
241
243
|
if (crossPlacement === 'center') {
|
242
244
|
position[crossAxis] += (childOffset[crossSize] - overlaySize[crossSize]) / 2;
|
243
245
|
} else if (crossPlacement !== crossAxis) {
|
244
246
|
position[crossAxis] += childOffset[crossSize] - overlaySize[crossSize];
|
245
247
|
}
|
248
|
+
position[crossAxis] += crossOffset;
|
246
249
|
|
247
|
-
|
250
|
+
// this is button center position - the overlay size + half of the button to align bottom of overlay with button center
|
251
|
+
let minViablePosition = childOffset[crossAxis] + childOffset[crossSize] / 2 - overlaySize[crossSize];
|
252
|
+
// this is button position of center, aligns top of overlay with button center
|
253
|
+
let maxViablePosition = childOffset[crossAxis] + childOffset[crossSize] / 2;
|
248
254
|
|
249
|
-
|
250
|
-
|
251
|
-
let maxViablePosition = childOffset[crossAxis] + childOffset[crossSize] / 2; // clamp it into the range of the min/max positions
|
252
|
-
|
253
|
-
position[crossAxis] = Math.min(Math.max(minViablePosition, position[crossAxis]), maxViablePosition); // Floor these so the position isn't placed on a partial pixel, only whole pixels. Shouldn't matter if it was floored or ceiled, so chose one.
|
255
|
+
// clamp it into the range of the min/max positions
|
256
|
+
position[crossAxis] = Math.min(Math.max(minViablePosition, position[crossAxis]), maxViablePosition);
|
254
257
|
|
258
|
+
// Floor these so the position isn't placed on a partial pixel, only whole pixels. Shouldn't matter if it was floored or ceiled, so chose one.
|
255
259
|
if (placement === axis) {
|
256
260
|
// If the container is positioned (non-static), then we use the container's actual
|
257
261
|
// height, as `bottom` will be relative to this height. But if the container is static,
|
@@ -262,24 +266,19 @@ function computePosition(childOffset, boundaryDimensions, overlaySize, placement
|
|
262
266
|
} else {
|
263
267
|
position[axis] = Math.floor(childOffset[axis] + childOffset[size] + offset);
|
264
268
|
}
|
265
|
-
|
266
269
|
return position;
|
267
270
|
}
|
268
|
-
|
269
271
|
function getAvailableSpace(boundaryDimensions, _containerOffsetWithBoundary, childOffset, _margins, padding, placementInfo) {
|
270
272
|
let {
|
271
273
|
placement,
|
272
274
|
axis,
|
273
275
|
size
|
274
276
|
} = placementInfo;
|
275
|
-
|
276
277
|
if (placement === axis) {
|
277
278
|
return Math.max(0, childOffset[axis] - padding);
|
278
279
|
}
|
279
|
-
|
280
280
|
return Math.max(0, boundaryDimensions[size] - childOffset[axis] - childOffset[size] - padding);
|
281
281
|
}
|
282
|
-
|
283
282
|
const AXIS = {
|
284
283
|
top: 'top',
|
285
284
|
bottom: 'top',
|
@@ -301,20 +300,16 @@ const AXIS_SIZE = {
|
|
301
300
|
left: 'width'
|
302
301
|
};
|
303
302
|
const PARSED_PLACEMENT_CACHE = {};
|
304
|
-
|
305
303
|
function parsePlacement(input) {
|
306
304
|
if (PARSED_PLACEMENT_CACHE[input]) {
|
307
305
|
return PARSED_PLACEMENT_CACHE[input];
|
308
306
|
}
|
309
|
-
|
310
307
|
let [placement, crossPlacement] = input.split(' ');
|
311
308
|
let axis = AXIS[placement] || 'right';
|
312
309
|
let crossAxis = CROSS_AXIS[axis];
|
313
|
-
|
314
310
|
if (!AXIS[crossPlacement]) {
|
315
311
|
crossPlacement = 'center';
|
316
312
|
}
|
317
|
-
|
318
313
|
let size = AXIS_SIZE[axis];
|
319
314
|
let crossSize = AXIS_SIZE[crossAxis];
|
320
315
|
PARSED_PLACEMENT_CACHE[input] = {
|