@react-aria/overlays 3.22.0 → 3.23.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/DismissButton.main.js +2 -2
- package/dist/DismissButton.mjs +3 -3
- package/dist/DismissButton.module.js +2 -2
- package/dist/Overlay.mjs +1 -1
- package/dist/PortalProvider.mjs +1 -1
- package/dist/ar-AE.mjs +1 -1
- package/dist/ariaHideOutside.main.js +7 -7
- package/dist/ariaHideOutside.mjs +8 -8
- package/dist/ariaHideOutside.module.js +7 -7
- package/dist/bg-BG.mjs +1 -1
- package/dist/calculatePosition.main.js +40 -40
- package/dist/calculatePosition.main.js.map +1 -1
- package/dist/calculatePosition.mjs +41 -41
- package/dist/calculatePosition.module.js +40 -40
- package/dist/calculatePosition.module.js.map +1 -1
- package/dist/cs-CZ.mjs +1 -1
- package/dist/da-DK.mjs +1 -1
- package/dist/de-DE.mjs +1 -1
- package/dist/el-GR.mjs +1 -1
- package/dist/en-US.mjs +1 -1
- package/dist/es-ES.mjs +1 -1
- package/dist/et-EE.mjs +1 -1
- package/dist/fi-FI.mjs +1 -1
- package/dist/fr-FR.mjs +1 -1
- package/dist/he-IL.mjs +1 -1
- package/dist/hr-HR.mjs +1 -1
- package/dist/hu-HU.mjs +1 -1
- package/dist/intlStrings.mjs +1 -1
- package/dist/it-IT.mjs +1 -1
- package/dist/ja-JP.mjs +1 -1
- package/dist/ko-KR.mjs +1 -1
- package/dist/lt-LT.mjs +1 -1
- package/dist/lv-LV.mjs +1 -1
- package/dist/nb-NO.mjs +1 -1
- package/dist/nl-NL.mjs +1 -1
- package/dist/pl-PL.mjs +1 -1
- package/dist/pt-BR.mjs +1 -1
- package/dist/pt-PT.mjs +1 -1
- package/dist/ro-RO.mjs +1 -1
- package/dist/ru-RU.mjs +1 -1
- package/dist/sk-SK.mjs +1 -1
- package/dist/sl-SI.mjs +1 -1
- package/dist/sr-SP.mjs +1 -1
- package/dist/sv-SE.mjs +1 -1
- package/dist/tr-TR.mjs +1 -1
- package/dist/types.d.ts +10 -10
- package/dist/types.d.ts.map +1 -1
- package/dist/uk-UA.mjs +1 -1
- package/dist/useCloseOnScroll.main.js +6 -2
- package/dist/useCloseOnScroll.main.js.map +1 -1
- package/dist/useCloseOnScroll.mjs +7 -3
- package/dist/useCloseOnScroll.module.js +6 -2
- package/dist/useCloseOnScroll.module.js.map +1 -1
- package/dist/useModal.main.js +4 -4
- package/dist/useModal.mjs +5 -5
- package/dist/useModal.module.js +4 -4
- package/dist/useModalOverlay.main.js.map +1 -1
- package/dist/useModalOverlay.mjs +1 -1
- package/dist/useModalOverlay.module.js.map +1 -1
- package/dist/useOverlay.main.js +1 -1
- package/dist/useOverlay.main.js.map +1 -1
- package/dist/useOverlay.mjs +2 -2
- package/dist/useOverlay.module.js +1 -1
- package/dist/useOverlay.module.js.map +1 -1
- package/dist/useOverlayPosition.main.js +62 -19
- package/dist/useOverlayPosition.main.js.map +1 -1
- package/dist/useOverlayPosition.mjs +63 -20
- package/dist/useOverlayPosition.module.js +62 -19
- package/dist/useOverlayPosition.module.js.map +1 -1
- package/dist/useOverlayTrigger.main.js +5 -5
- package/dist/useOverlayTrigger.main.js.map +1 -1
- package/dist/useOverlayTrigger.mjs +6 -6
- package/dist/useOverlayTrigger.module.js +5 -5
- package/dist/useOverlayTrigger.module.js.map +1 -1
- package/dist/usePopover.main.js.map +1 -1
- package/dist/usePopover.mjs +1 -1
- package/dist/usePopover.module.js.map +1 -1
- package/dist/usePreventScroll.main.js +22 -22
- package/dist/usePreventScroll.mjs +23 -23
- package/dist/usePreventScroll.module.js +22 -22
- package/dist/zh-CN.mjs +1 -1
- package/dist/zh-TW.mjs +1 -1
- package/package.json +14 -14
- package/src/calculatePosition.ts +3 -3
- package/src/useCloseOnScroll.ts +10 -2
- package/src/useModalOverlay.ts +3 -3
- package/src/useOverlay.ts +4 -4
- package/src/useOverlayPosition.ts +58 -11
- package/src/useOverlayTrigger.ts +3 -3
- package/src/usePopover.ts +3 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-aria/overlays/src/useOverlayPosition.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 {calculatePosition, PositionResult} from './calculatePosition';\nimport {DOMAttributes} from '@react-types/shared';\nimport {Placement, PlacementAxis, PositionProps} from '@react-types/overlays';\nimport {RefObject, useCallback, useEffect, useRef, useState} from 'react';\nimport {useCloseOnScroll} from './useCloseOnScroll';\nimport {useLayoutEffect, useResizeObserver} from '@react-aria/utils';\nimport {useLocale} from '@react-aria/i18n';\n\nexport interface AriaPositionProps extends PositionProps {\n /**\n * Cross size of the overlay arrow in pixels.\n * @default 0\n */\n arrowSize?: number,\n /**\n * Element that that serves as the positioning boundary.\n * @default document.body\n */\n boundaryElement?: Element,\n /**\n * The ref for the element which the overlay positions itself with respect to.\n */\n targetRef: RefObject<Element>,\n /**\n * The ref for the overlay element.\n */\n overlayRef: RefObject<Element>,\n /**\n * A ref for the scrollable region within the overlay.\n * @default overlayRef\n */\n scrollRef?: RefObject<Element>,\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 /**\n * The maxHeight specified for the overlay element.\n * By default, it will take all space up to the current viewport height.\n */\n maxHeight?: number,\n /**\n * The minimum distance the arrow's edge should be from the edge of the overlay element.\n * @default 0\n */\n arrowBoundaryOffset?: number\n}\n\nexport interface PositionAria {\n /** Props for the overlay container element. */\n overlayProps: DOMAttributes,\n /** Props for the overlay tip arrow if any. */\n arrowProps: DOMAttributes,\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 document !== '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 let {direction} = useLocale();\n let {\n arrowSize = 0,\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 onClose,\n maxHeight,\n arrowBoundaryOffset = 0\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,\n scrollRef.current,\n containerPadding,\n shouldFlip,\n boundaryElement,\n offset,\n crossOffset,\n isOpen,\n direction,\n maxHeight,\n arrowBoundaryOffset,\n arrowSize\n ];\n\n // Note, the position freezing breaks if body sizes itself dynamicly with the visual viewport but that might\n // just be a non-realistic use case\n // Upon opening a overlay, record the current visual viewport scale so we can freeze the overlay styles\n let lastScale = useRef(visualViewport?.scale);\n useEffect(() => {\n if (isOpen) {\n lastScale.current = visualViewport?.scale;\n }\n }, [isOpen]);\n\n let updatePosition = useCallback(() => {\n if (shouldUpdatePosition === false || !isOpen || !overlayRef.current || !targetRef.current || !scrollRef.current || !boundaryElement) {\n return;\n }\n\n if (visualViewport?.scale !== lastScale.current) {\n return;\n }\n\n // Always reset the overlay's previous max height if not defined by the user so that we can compensate for\n // RAC collections populating after a second render and properly set a correct max height + positioning when it populates.\n if (!maxHeight && overlayRef.current) {\n (overlayRef.current as HTMLElement).style.maxHeight = 'none';\n }\n\n let position = 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 maxHeight,\n arrowSize,\n arrowBoundaryOffset\n });\n\n // Modify overlay styles directly so positioning happens immediately without the need of a second render\n // This is so we don't have to delay autoFocus scrolling or delay applying preventScroll for popovers\n Object.keys(position.position).forEach(key => (overlayRef.current as HTMLElement).style[key] = position.position[key] + 'px');\n (overlayRef.current as HTMLElement).style.maxHeight = position.maxHeight != null ? position.maxHeight + 'px' : undefined;\n\n // Trigger a set state for a second render anyway for arrow positioning\n setPosition(position);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, deps);\n\n // Update position when anything changes\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useLayoutEffect(updatePosition, deps);\n\n // Update position on window resize\n useResize(updatePosition);\n\n // Update position when the overlay changes size (might need to flip).\n useResizeObserver({\n ref: overlayRef,\n onResize: updatePosition\n });\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: ReturnType<typeof setTimeout>;\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 // Only reposition the overlay if a scroll event happens immediately as a result of resize (aka the virtual keyboard has appears)\n // We don't want to reposition the overlay if the user has pinch zoomed in and is scrolling the viewport around.\n let onScroll = () => {\n if (isResizing.current) {\n onResize();\n }\n };\n\n visualViewport?.addEventListener('resize', onResize);\n visualViewport?.addEventListener('scroll', onScroll);\n return () => {\n visualViewport?.removeEventListener('resize', onResize);\n visualViewport?.removeEventListener('scroll', onScroll);\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\n });\n\n return {\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 'aria-hidden': 'true',\n role: 'presentation',\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"],"names":[],"version":3,"file":"useOverlayPosition.module.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-aria/overlays/src/useOverlayPosition.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 {calculatePosition, PositionResult} from './calculatePosition';\nimport {DOMAttributes, RefObject} from '@react-types/shared';\nimport {Placement, PlacementAxis, PositionProps} from '@react-types/overlays';\nimport {useCallback, useEffect, useRef, useState} from 'react';\nimport {useCloseOnScroll} from './useCloseOnScroll';\nimport {useLayoutEffect, useResizeObserver} from '@react-aria/utils';\nimport {useLocale} from '@react-aria/i18n';\n\nexport interface AriaPositionProps extends PositionProps {\n /**\n * Cross size of the overlay arrow in pixels.\n * @default 0\n */\n arrowSize?: number,\n /**\n * Element that that serves as the positioning boundary.\n * @default document.body\n */\n boundaryElement?: Element,\n /**\n * The ref for the element which the overlay positions itself with respect to.\n */\n targetRef: RefObject<Element | null>,\n /**\n * The ref for the overlay element.\n */\n overlayRef: RefObject<Element | null>,\n /**\n * A ref for the scrollable region within the overlay.\n * @default overlayRef\n */\n scrollRef?: RefObject<Element | null>,\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 /**\n * The maxHeight specified for the overlay element.\n * By default, it will take all space up to the current viewport height.\n */\n maxHeight?: number,\n /**\n * The minimum distance the arrow's edge should be from the edge of the overlay element.\n * @default 0\n */\n arrowBoundaryOffset?: number\n}\n\nexport interface PositionAria {\n /** Props for the overlay container element. */\n overlayProps: DOMAttributes,\n /** Props for the overlay tip arrow if any. */\n arrowProps: DOMAttributes,\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\ninterface ScrollAnchor {\n type: 'top' | 'bottom',\n offset: number\n}\n\n// @ts-ignore\nlet visualViewport = typeof document !== '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 let {direction} = useLocale();\n let {\n arrowSize = 0,\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 onClose,\n maxHeight,\n arrowBoundaryOffset = 0\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,\n scrollRef.current,\n containerPadding,\n shouldFlip,\n boundaryElement,\n offset,\n crossOffset,\n isOpen,\n direction,\n maxHeight,\n arrowBoundaryOffset,\n arrowSize\n ];\n\n // Note, the position freezing breaks if body sizes itself dynamicly with the visual viewport but that might\n // just be a non-realistic use case\n // Upon opening a overlay, record the current visual viewport scale so we can freeze the overlay styles\n let lastScale = useRef(visualViewport?.scale);\n useEffect(() => {\n if (isOpen) {\n lastScale.current = visualViewport?.scale;\n }\n }, [isOpen]);\n\n let updatePosition = useCallback(() => {\n if (shouldUpdatePosition === false || !isOpen || !overlayRef.current || !targetRef.current || !boundaryElement) {\n return;\n }\n\n if (visualViewport?.scale !== lastScale.current) {\n return;\n }\n\n // Determine a scroll anchor based on the focused element.\n // This stores the offset of the anchor element from the scroll container\n // so it can be restored after repositioning. This way if the overlay height\n // changes, the focused element appears to stay in the same position.\n let anchor: ScrollAnchor | null = null;\n if (scrollRef.current && scrollRef.current.contains(document.activeElement)) {\n let anchorRect = document.activeElement.getBoundingClientRect();\n let scrollRect = scrollRef.current.getBoundingClientRect();\n // Anchor from the top if the offset is in the top half of the scrollable element,\n // otherwise anchor from the bottom.\n anchor = {\n type: 'top',\n offset: anchorRect.top - scrollRect.top\n };\n if (anchor.offset > scrollRect.height / 2) {\n anchor.type = 'bottom';\n anchor.offset = anchorRect.bottom - scrollRect.bottom;\n }\n }\n\n // Always reset the overlay's previous max height if not defined by the user so that we can compensate for\n // RAC collections populating after a second render and properly set a correct max height + positioning when it populates.\n let overlay = (overlayRef.current as HTMLElement);\n if (!maxHeight && overlayRef.current) {\n overlay.style.top = '0px';\n overlay.style.bottom = '';\n overlay.style.maxHeight = (window.visualViewport?.height ?? window.innerHeight) + 'px';\n }\n\n let position = calculatePosition({\n placement: translateRTL(placement, direction),\n overlayNode: overlayRef.current,\n targetNode: targetRef.current,\n scrollNode: scrollRef.current || overlayRef.current,\n padding: containerPadding,\n shouldFlip,\n boundaryElement,\n offset,\n crossOffset,\n maxHeight,\n arrowSize,\n arrowBoundaryOffset\n });\n\n // Modify overlay styles directly so positioning happens immediately without the need of a second render\n // This is so we don't have to delay autoFocus scrolling or delay applying preventScroll for popovers\n overlay.style.top = '';\n overlay.style.bottom = '';\n overlay.style.left = '';\n overlay.style.right = '';\n\n Object.keys(position.position).forEach(key => overlay.style[key] = position.position[key] + 'px');\n overlay.style.maxHeight = position.maxHeight != null ? position.maxHeight + 'px' : undefined;\n\n // Restore scroll position relative to anchor element.\n if (anchor) {\n let anchorRect = document.activeElement.getBoundingClientRect();\n let scrollRect = scrollRef.current.getBoundingClientRect();\n let newOffset = anchorRect[anchor.type] - scrollRect[anchor.type];\n scrollRef.current.scrollTop += newOffset - anchor.offset;\n }\n\n // Trigger a set state for a second render anyway for arrow positioning\n setPosition(position);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, deps);\n\n // Update position when anything changes\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useLayoutEffect(updatePosition, deps);\n\n // Update position on window resize\n useResize(updatePosition);\n\n // Update position when the overlay changes size (might need to flip).\n useResizeObserver({\n ref: overlayRef,\n onResize: updatePosition\n });\n\n // Update position when the target changes size (might need to flip).\n useResizeObserver({\n ref: targetRef,\n onResize: updatePosition\n });\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: ReturnType<typeof setTimeout>;\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 // Only reposition the overlay if a scroll event happens immediately as a result of resize (aka the virtual keyboard has appears)\n // We don't want to reposition the overlay if the user has pinch zoomed in and is scrolling the viewport around.\n let onScroll = () => {\n if (isResizing.current) {\n onResize();\n }\n };\n\n visualViewport?.addEventListener('resize', onResize);\n visualViewport?.addEventListener('scroll', onScroll);\n return () => {\n visualViewport?.removeEventListener('resize', onResize);\n visualViewport?.removeEventListener('scroll', onScroll);\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\n });\n\n return {\n overlayProps: {\n style: {\n position: 'absolute',\n zIndex: 100000, // should match the z-index in ModalTrigger\n ...position.position,\n maxHeight: position.maxHeight ?? '100vh'\n }\n },\n placement: position.placement,\n arrowProps: {\n 'aria-hidden': 'true',\n role: 'presentation',\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"],"names":[],"version":3,"file":"useOverlayPosition.module.js.map"}
|
|
@@ -34,14 +34,14 @@ function $b4878eb6316f670a$export$f9d5c8beee7d008d(props, state, ref) {
|
|
|
34
34
|
// However, we only add it for menus for now because screen readers often
|
|
35
35
|
// announce it as a menu even for other values.
|
|
36
36
|
let ariaHasPopup = undefined;
|
|
37
|
-
if (type ===
|
|
38
|
-
else if (type ===
|
|
37
|
+
if (type === 'menu') ariaHasPopup = true;
|
|
38
|
+
else if (type === 'listbox') ariaHasPopup = 'listbox';
|
|
39
39
|
let overlayId = (0, $3l9xr$reactariautils.useId)();
|
|
40
40
|
return {
|
|
41
41
|
triggerProps: {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
42
|
+
'aria-haspopup': ariaHasPopup,
|
|
43
|
+
'aria-expanded': isOpen,
|
|
44
|
+
'aria-controls': isOpen ? overlayId : null,
|
|
45
45
|
onPress: state.toggle
|
|
46
46
|
},
|
|
47
47
|
overlayProps: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;AA0BM,SAAS,0CAAkB,KAA0B,EAAE,KAA0B,EAAE,
|
|
1
|
+
{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;AA0BM,SAAS,0CAAkB,KAA0B,EAAE,KAA0B,EAAE,GAA+B;IACvH,IAAI,QAAC,IAAI,EAAC,GAAG;IACb,IAAI,UAAC,MAAM,EAAC,GAAG;IAEf,uGAAuG;IACvG,yCAAyC;IACzC,CAAA,GAAA,sBAAQ,EAAE;QACR,IAAI,OAAO,IAAI,OAAO,EACpB,CAAA,GAAA,oCAAS,EAAE,GAAG,CAAC,IAAI,OAAO,EAAE,MAAM,KAAK;IAE3C;IAEA,6EAA6E;IAC7E,oDAAoD;IACpD,yEAAyE;IACzE,+CAA+C;IAC/C,IAAI,eAAe;IACnB,IAAI,SAAS,QACX,eAAe;SACV,IAAI,SAAS,WAClB,eAAe;IAGjB,IAAI,YAAY,CAAA,GAAA,2BAAI;IACpB,OAAO;QACL,cAAc;YACZ,iBAAiB;YACjB,iBAAiB;YACjB,iBAAiB,SAAS,YAAY;YACtC,SAAS,MAAM,MAAM;QACvB;QACA,cAAc;YACZ,IAAI;QACN;IACF;AACF","sources":["packages/@react-aria/overlays/src/useOverlayTrigger.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 {AriaButtonProps} from '@react-types/button';\nimport {DOMProps, RefObject} from '@react-types/shared';\nimport {onCloseMap} from './useCloseOnScroll';\nimport {OverlayTriggerState} from '@react-stately/overlays';\nimport {useEffect} from 'react';\nimport {useId} from '@react-aria/utils';\n\nexport interface OverlayTriggerProps {\n /** Type of overlay that is opened by the trigger. */\n type: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid'\n}\n\nexport interface OverlayTriggerAria {\n /** Props for the trigger element. */\n triggerProps: AriaButtonProps,\n\n /** Props for the overlay container element. */\n overlayProps: DOMProps\n}\n\n/**\n * Handles the behavior and accessibility for an overlay trigger, e.g. a button\n * that opens a popover, menu, or other overlay that is positioned relative to the trigger.\n */\nexport function useOverlayTrigger(props: OverlayTriggerProps, state: OverlayTriggerState, ref?: RefObject<Element | null>): OverlayTriggerAria {\n let {type} = props;\n let {isOpen} = state;\n\n // Backward compatibility. Share state close function with useOverlayPosition so it can close on scroll\n // without forcing users to pass onClose.\n useEffect(() => {\n if (ref && ref.current) {\n onCloseMap.set(ref.current, state.close);\n }\n });\n\n // Aria 1.1 supports multiple values for aria-haspopup other than just menus.\n // https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup\n // However, we only add it for menus for now because screen readers often\n // announce it as a menu even for other values.\n let ariaHasPopup = undefined;\n if (type === 'menu') {\n ariaHasPopup = true;\n } else if (type === 'listbox') {\n ariaHasPopup = 'listbox';\n }\n\n let overlayId = useId();\n return {\n triggerProps: {\n 'aria-haspopup': ariaHasPopup,\n 'aria-expanded': isOpen,\n 'aria-controls': isOpen ? overlayId : null,\n onPress: state.toggle\n },\n overlayProps: {\n id: overlayId\n }\n };\n}\n"],"names":[],"version":3,"file":"useOverlayTrigger.main.js.map"}
|
|
@@ -28,14 +28,14 @@ function $628037886ba31236$export$f9d5c8beee7d008d(props, state, ref) {
|
|
|
28
28
|
// However, we only add it for menus for now because screen readers often
|
|
29
29
|
// announce it as a menu even for other values.
|
|
30
30
|
let ariaHasPopup = undefined;
|
|
31
|
-
if (type ===
|
|
32
|
-
else if (type ===
|
|
31
|
+
if (type === 'menu') ariaHasPopup = true;
|
|
32
|
+
else if (type === 'listbox') ariaHasPopup = 'listbox';
|
|
33
33
|
let overlayId = (0, $gMvIk$useId)();
|
|
34
34
|
return {
|
|
35
35
|
triggerProps: {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
36
|
+
'aria-haspopup': ariaHasPopup,
|
|
37
|
+
'aria-expanded': isOpen,
|
|
38
|
+
'aria-controls': isOpen ? overlayId : null,
|
|
39
39
|
onPress: state.toggle
|
|
40
40
|
},
|
|
41
41
|
overlayProps: {
|
|
@@ -46,4 +46,4 @@ function $628037886ba31236$export$f9d5c8beee7d008d(props, state, ref) {
|
|
|
46
46
|
|
|
47
47
|
|
|
48
48
|
export {$628037886ba31236$export$f9d5c8beee7d008d as useOverlayTrigger};
|
|
49
|
-
//# sourceMappingURL=useOverlayTrigger.
|
|
49
|
+
//# sourceMappingURL=useOverlayTrigger.module.js.map
|
|
@@ -28,14 +28,14 @@ function $628037886ba31236$export$f9d5c8beee7d008d(props, state, ref) {
|
|
|
28
28
|
// However, we only add it for menus for now because screen readers often
|
|
29
29
|
// announce it as a menu even for other values.
|
|
30
30
|
let ariaHasPopup = undefined;
|
|
31
|
-
if (type ===
|
|
32
|
-
else if (type ===
|
|
31
|
+
if (type === 'menu') ariaHasPopup = true;
|
|
32
|
+
else if (type === 'listbox') ariaHasPopup = 'listbox';
|
|
33
33
|
let overlayId = (0, $gMvIk$useId)();
|
|
34
34
|
return {
|
|
35
35
|
triggerProps: {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
36
|
+
'aria-haspopup': ariaHasPopup,
|
|
37
|
+
'aria-expanded': isOpen,
|
|
38
|
+
'aria-controls': isOpen ? overlayId : null,
|
|
39
39
|
onPress: state.toggle
|
|
40
40
|
},
|
|
41
41
|
overlayProps: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;AAAA;;;;;;;;;;CAUC;;;AA0BM,SAAS,0CAAkB,KAA0B,EAAE,KAA0B,EAAE,
|
|
1
|
+
{"mappings":";;;;AAAA;;;;;;;;;;CAUC;;;AA0BM,SAAS,0CAAkB,KAA0B,EAAE,KAA0B,EAAE,GAA+B;IACvH,IAAI,QAAC,IAAI,EAAC,GAAG;IACb,IAAI,UAAC,MAAM,EAAC,GAAG;IAEf,uGAAuG;IACvG,yCAAyC;IACzC,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,OAAO,IAAI,OAAO,EACpB,CAAA,GAAA,yCAAS,EAAE,GAAG,CAAC,IAAI,OAAO,EAAE,MAAM,KAAK;IAE3C;IAEA,6EAA6E;IAC7E,oDAAoD;IACpD,yEAAyE;IACzE,+CAA+C;IAC/C,IAAI,eAAe;IACnB,IAAI,SAAS,QACX,eAAe;SACV,IAAI,SAAS,WAClB,eAAe;IAGjB,IAAI,YAAY,CAAA,GAAA,YAAI;IACpB,OAAO;QACL,cAAc;YACZ,iBAAiB;YACjB,iBAAiB;YACjB,iBAAiB,SAAS,YAAY;YACtC,SAAS,MAAM,MAAM;QACvB;QACA,cAAc;YACZ,IAAI;QACN;IACF;AACF","sources":["packages/@react-aria/overlays/src/useOverlayTrigger.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 {AriaButtonProps} from '@react-types/button';\nimport {DOMProps, RefObject} from '@react-types/shared';\nimport {onCloseMap} from './useCloseOnScroll';\nimport {OverlayTriggerState} from '@react-stately/overlays';\nimport {useEffect} from 'react';\nimport {useId} from '@react-aria/utils';\n\nexport interface OverlayTriggerProps {\n /** Type of overlay that is opened by the trigger. */\n type: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid'\n}\n\nexport interface OverlayTriggerAria {\n /** Props for the trigger element. */\n triggerProps: AriaButtonProps,\n\n /** Props for the overlay container element. */\n overlayProps: DOMProps\n}\n\n/**\n * Handles the behavior and accessibility for an overlay trigger, e.g. a button\n * that opens a popover, menu, or other overlay that is positioned relative to the trigger.\n */\nexport function useOverlayTrigger(props: OverlayTriggerProps, state: OverlayTriggerState, ref?: RefObject<Element | null>): OverlayTriggerAria {\n let {type} = props;\n let {isOpen} = state;\n\n // Backward compatibility. Share state close function with useOverlayPosition so it can close on scroll\n // without forcing users to pass onClose.\n useEffect(() => {\n if (ref && ref.current) {\n onCloseMap.set(ref.current, state.close);\n }\n });\n\n // Aria 1.1 supports multiple values for aria-haspopup other than just menus.\n // https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup\n // However, we only add it for menus for now because screen readers often\n // announce it as a menu even for other values.\n let ariaHasPopup = undefined;\n if (type === 'menu') {\n ariaHasPopup = true;\n } else if (type === 'listbox') {\n ariaHasPopup = 'listbox';\n }\n\n let overlayId = useId();\n return {\n triggerProps: {\n 'aria-haspopup': ariaHasPopup,\n 'aria-expanded': isOpen,\n 'aria-controls': isOpen ? overlayId : null,\n onPress: state.toggle\n },\n overlayProps: {\n id: overlayId\n }\n };\n}\n"],"names":[],"version":3,"file":"useOverlayTrigger.module.js.map"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AA8DM,SAAS,0CAAW,KAAuB,EAAE,KAA0B;IAC5E,IAAI,cACF,UAAU,cACV,UAAU,cACV,UAAU,6BACV,yBAAyB,gCACzB,4BAA4B,EAC5B,GAAG,YACJ,GAAG;IAEJ,IAAI,gBAAC,YAAY,iBAAE,aAAa,EAAC,GAAG,CAAA,GAAA,oCAAS,EAC3C;QACE,QAAQ,MAAM,MAAM;QACpB,SAAS,MAAM,KAAK;QACpB,mBAAmB;QACnB,eAAe,CAAC;mCAChB;sCACA;IACF,GACA;IAGF,IAAI,EAAC,cAAc,aAAa,cAAE,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,4CAAiB,EAAE;QAC5E,GAAG,UAAU;QACb,WAAW;QACX,YAAY;QACZ,QAAQ,MAAM,MAAM;QACpB,SAAS,aAAa,MAAM,KAAK,GAAG;IACtC;IAEA,CAAA,GAAA,0CAAe,EAAE;QACf,YAAY,cAAc,CAAC,MAAM,MAAM;IACzC;IAEA,CAAA,GAAA,qCAAc,EAAE;QACd,IAAI,MAAM,MAAM,IAAI,CAAC,cAAc,WAAW,OAAO,EACnD,OAAO,CAAA,GAAA,yCAAc,EAAE;YAAC,WAAW,OAAO;SAAC;IAE/C,GAAG;QAAC;QAAY,MAAM,MAAM;QAAE;KAAW;IAEzC,OAAO;QACL,cAAc,CAAA,GAAA,gCAAS,EAAE,cAAc;oBACvC;uBACA;mBACA;IACF;AACF","sources":["packages/@react-aria/overlays/src/usePopover.ts"],"sourcesContent":["/*\n * Copyright 2022 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 {ariaHideOutside} from './ariaHideOutside';\nimport {AriaPositionProps, useOverlayPosition} from './useOverlayPosition';\nimport {DOMAttributes, RefObject} from '@react-types/shared';\nimport {mergeProps, useLayoutEffect} from '@react-aria/utils';\nimport {OverlayTriggerState} from '@react-stately/overlays';\nimport {PlacementAxis} from '@react-types/overlays';\nimport {useOverlay} from './useOverlay';\nimport {usePreventScroll} from './usePreventScroll';\n\nexport interface AriaPopoverProps extends Omit<AriaPositionProps, 'isOpen' | 'onClose' | 'targetRef' | 'overlayRef'> {\n /**\n * The ref for the element which the popover positions itself with respect to.\n */\n triggerRef: RefObject<Element | null>,\n /**\n * The ref for the popover element.\n */\n popoverRef: RefObject<Element | null>,\n /**\n * Whether the popover is non-modal, i.e. elements outside the popover may be\n * interacted with by assistive technologies.\n *\n * Most popovers should not use this option as it may negatively impact the screen\n * reader experience. Only use with components such as combobox, which are designed\n * to handle this situation carefully.\n */\n isNonModal?: boolean,\n /**\n * Whether pressing the escape key to close the popover should be disabled.\n *\n * Most popovers should not use this option. When set to true, an alternative\n * way to close the popover with a keyboard must be provided.\n *\n * @default false\n */\n isKeyboardDismissDisabled?: boolean,\n /**\n * When user interacts with the argument element outside of the popover ref,\n * return true if onClose should be called. This gives you a chance to filter\n * out interaction with elements that should not dismiss the popover.\n * By default, onClose will always be called on interaction outside the popover ref.\n */\n shouldCloseOnInteractOutside?: (element: Element) => boolean\n}\n\nexport interface PopoverAria {\n /** Props for the popover element. */\n popoverProps: DOMAttributes,\n /** Props for the popover tip arrow if any. */\n arrowProps: DOMAttributes,\n /** Props to apply to the underlay element, if any. */\n underlayProps: DOMAttributes,\n /** Placement of the popover with respect to the trigger. */\n placement: PlacementAxis\n}\n\n/**\n * Provides the behavior and accessibility implementation for a popover component.\n * A popover is an overlay element positioned relative to a trigger.\n */\nexport function usePopover(props: AriaPopoverProps, state: OverlayTriggerState): PopoverAria {\n let {\n triggerRef,\n popoverRef,\n isNonModal,\n isKeyboardDismissDisabled,\n shouldCloseOnInteractOutside,\n ...otherProps\n } = props;\n\n let {overlayProps, underlayProps} = useOverlay(\n {\n isOpen: state.isOpen,\n onClose: state.close,\n shouldCloseOnBlur: true,\n isDismissable: !isNonModal,\n isKeyboardDismissDisabled,\n shouldCloseOnInteractOutside\n },\n popoverRef\n );\n\n let {overlayProps: positionProps, arrowProps, placement} = useOverlayPosition({\n ...otherProps,\n targetRef: triggerRef,\n overlayRef: popoverRef,\n isOpen: state.isOpen,\n onClose: isNonModal ? state.close : null\n });\n\n usePreventScroll({\n isDisabled: isNonModal || !state.isOpen\n });\n\n useLayoutEffect(() => {\n if (state.isOpen && !isNonModal && popoverRef.current) {\n return ariaHideOutside([popoverRef.current]);\n }\n }, [isNonModal, state.isOpen, popoverRef]);\n\n return {\n popoverProps: mergeProps(overlayProps, positionProps),\n arrowProps,\n underlayProps,\n placement\n };\n}\n"],"names":[],"version":3,"file":"usePopover.main.js.map"}
|
package/dist/usePopover.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;AAAA;;;;;;;;;;CAUC;;;;;
|
|
1
|
+
{"mappings":";;;;;;AAAA;;;;;;;;;;CAUC;;;;;AA8DM,SAAS,0CAAW,KAAuB,EAAE,KAA0B;IAC5E,IAAI,cACF,UAAU,cACV,UAAU,cACV,UAAU,6BACV,yBAAyB,gCACzB,4BAA4B,EAC5B,GAAG,YACJ,GAAG;IAEJ,IAAI,gBAAC,YAAY,iBAAE,aAAa,EAAC,GAAG,CAAA,GAAA,yCAAS,EAC3C;QACE,QAAQ,MAAM,MAAM;QACpB,SAAS,MAAM,KAAK;QACpB,mBAAmB;QACnB,eAAe,CAAC;mCAChB;sCACA;IACF,GACA;IAGF,IAAI,EAAC,cAAc,aAAa,cAAE,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,yCAAiB,EAAE;QAC5E,GAAG,UAAU;QACb,WAAW;QACX,YAAY;QACZ,QAAQ,MAAM,MAAM;QACpB,SAAS,aAAa,MAAM,KAAK,GAAG;IACtC;IAEA,CAAA,GAAA,yCAAe,EAAE;QACf,YAAY,cAAc,CAAC,MAAM,MAAM;IACzC;IAEA,CAAA,GAAA,sBAAc,EAAE;QACd,IAAI,MAAM,MAAM,IAAI,CAAC,cAAc,WAAW,OAAO,EACnD,OAAO,CAAA,GAAA,yCAAc,EAAE;YAAC,WAAW,OAAO;SAAC;IAE/C,GAAG;QAAC;QAAY,MAAM,MAAM;QAAE;KAAW;IAEzC,OAAO;QACL,cAAc,CAAA,GAAA,iBAAS,EAAE,cAAc;oBACvC;uBACA;mBACA;IACF;AACF","sources":["packages/@react-aria/overlays/src/usePopover.ts"],"sourcesContent":["/*\n * Copyright 2022 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 {ariaHideOutside} from './ariaHideOutside';\nimport {AriaPositionProps, useOverlayPosition} from './useOverlayPosition';\nimport {DOMAttributes, RefObject} from '@react-types/shared';\nimport {mergeProps, useLayoutEffect} from '@react-aria/utils';\nimport {OverlayTriggerState} from '@react-stately/overlays';\nimport {PlacementAxis} from '@react-types/overlays';\nimport {useOverlay} from './useOverlay';\nimport {usePreventScroll} from './usePreventScroll';\n\nexport interface AriaPopoverProps extends Omit<AriaPositionProps, 'isOpen' | 'onClose' | 'targetRef' | 'overlayRef'> {\n /**\n * The ref for the element which the popover positions itself with respect to.\n */\n triggerRef: RefObject<Element | null>,\n /**\n * The ref for the popover element.\n */\n popoverRef: RefObject<Element | null>,\n /**\n * Whether the popover is non-modal, i.e. elements outside the popover may be\n * interacted with by assistive technologies.\n *\n * Most popovers should not use this option as it may negatively impact the screen\n * reader experience. Only use with components such as combobox, which are designed\n * to handle this situation carefully.\n */\n isNonModal?: boolean,\n /**\n * Whether pressing the escape key to close the popover should be disabled.\n *\n * Most popovers should not use this option. When set to true, an alternative\n * way to close the popover with a keyboard must be provided.\n *\n * @default false\n */\n isKeyboardDismissDisabled?: boolean,\n /**\n * When user interacts with the argument element outside of the popover ref,\n * return true if onClose should be called. This gives you a chance to filter\n * out interaction with elements that should not dismiss the popover.\n * By default, onClose will always be called on interaction outside the popover ref.\n */\n shouldCloseOnInteractOutside?: (element: Element) => boolean\n}\n\nexport interface PopoverAria {\n /** Props for the popover element. */\n popoverProps: DOMAttributes,\n /** Props for the popover tip arrow if any. */\n arrowProps: DOMAttributes,\n /** Props to apply to the underlay element, if any. */\n underlayProps: DOMAttributes,\n /** Placement of the popover with respect to the trigger. */\n placement: PlacementAxis\n}\n\n/**\n * Provides the behavior and accessibility implementation for a popover component.\n * A popover is an overlay element positioned relative to a trigger.\n */\nexport function usePopover(props: AriaPopoverProps, state: OverlayTriggerState): PopoverAria {\n let {\n triggerRef,\n popoverRef,\n isNonModal,\n isKeyboardDismissDisabled,\n shouldCloseOnInteractOutside,\n ...otherProps\n } = props;\n\n let {overlayProps, underlayProps} = useOverlay(\n {\n isOpen: state.isOpen,\n onClose: state.close,\n shouldCloseOnBlur: true,\n isDismissable: !isNonModal,\n isKeyboardDismissDisabled,\n shouldCloseOnInteractOutside\n },\n popoverRef\n );\n\n let {overlayProps: positionProps, arrowProps, placement} = useOverlayPosition({\n ...otherProps,\n targetRef: triggerRef,\n overlayRef: popoverRef,\n isOpen: state.isOpen,\n onClose: isNonModal ? state.close : null\n });\n\n usePreventScroll({\n isDisabled: isNonModal || !state.isOpen\n });\n\n useLayoutEffect(() => {\n if (state.isOpen && !isNonModal && popoverRef.current) {\n return ariaHideOutside([popoverRef.current]);\n }\n }, [isNonModal, state.isOpen, popoverRef]);\n\n return {\n popoverProps: mergeProps(overlayProps, positionProps),\n arrowProps,\n underlayProps,\n placement\n };\n}\n"],"names":[],"version":3,"file":"usePopover.module.js.map"}
|
|
@@ -18,18 +18,18 @@ $parcel$export(module.exports, "usePreventScroll", () => $5c2f5cd01815d369$expor
|
|
|
18
18
|
* governing permissions and limitations under the License.
|
|
19
19
|
*/
|
|
20
20
|
// @ts-ignore
|
|
21
|
-
const $5c2f5cd01815d369$var$visualViewport = typeof document !==
|
|
21
|
+
const $5c2f5cd01815d369$var$visualViewport = typeof document !== 'undefined' && window.visualViewport;
|
|
22
22
|
// HTML input types that do not cause the software keyboard to appear.
|
|
23
23
|
const $5c2f5cd01815d369$var$nonTextInputTypes = new Set([
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
24
|
+
'checkbox',
|
|
25
|
+
'radio',
|
|
26
|
+
'range',
|
|
27
|
+
'color',
|
|
28
|
+
'file',
|
|
29
|
+
'image',
|
|
30
|
+
'button',
|
|
31
|
+
'submit',
|
|
32
|
+
'reset'
|
|
33
33
|
]);
|
|
34
34
|
// The number of active usePreventScroll calls. Used to determine whether to revert back to the original page style/scroll position
|
|
35
35
|
let $5c2f5cd01815d369$var$preventScrollCount = 0;
|
|
@@ -54,7 +54,7 @@ function $5c2f5cd01815d369$export$ee0f7cc6afcd1c18(options = {}) {
|
|
|
54
54
|
// For most browsers, all we need to do is set `overflow: hidden` on the root element, and
|
|
55
55
|
// add some padding to prevent the page from shifting when the scrollbar is hidden.
|
|
56
56
|
function $5c2f5cd01815d369$var$preventScrollStandard() {
|
|
57
|
-
return (0, $59kHH$reactariautils.chain)($5c2f5cd01815d369$var$setStyle(document.documentElement,
|
|
57
|
+
return (0, $59kHH$reactariautils.chain)($5c2f5cd01815d369$var$setStyle(document.documentElement, 'paddingRight', `${window.innerWidth - document.documentElement.clientWidth}px`), $5c2f5cd01815d369$var$setStyle(document.documentElement, 'overflow', 'hidden'));
|
|
58
58
|
}
|
|
59
59
|
// Mobile Safari is a whole different beast. Even with overflow: hidden,
|
|
60
60
|
// it still scrolls the page in many situations:
|
|
@@ -93,7 +93,7 @@ function $5c2f5cd01815d369$var$preventScrollMobileSafari() {
|
|
|
93
93
|
// Prevent scrolling up when at the top and scrolling down when at the bottom
|
|
94
94
|
// of a nested scrollable area, otherwise mobile Safari will start scrolling
|
|
95
95
|
// the window instead.
|
|
96
|
-
if (scrollable instanceof HTMLElement && window.getComputedStyle(scrollable).overscrollBehavior ===
|
|
96
|
+
if (scrollable instanceof HTMLElement && window.getComputedStyle(scrollable).overscrollBehavior === 'auto') restoreScrollableStyles = $5c2f5cd01815d369$var$setStyle(scrollable, 'overscrollBehavior', 'contain');
|
|
97
97
|
};
|
|
98
98
|
let onTouchMove = (e)=>{
|
|
99
99
|
// Prevent scrolling the window.
|
|
@@ -118,10 +118,10 @@ function $5c2f5cd01815d369$var$preventScrollMobileSafari() {
|
|
|
118
118
|
// Apply a transform to trick Safari into thinking the input is at the top of the page
|
|
119
119
|
// so it doesn't try to scroll it into view. When tapping on an input, this needs to
|
|
120
120
|
// be done before the "focus" event, so we have to focus the element ourselves.
|
|
121
|
-
target.style.transform =
|
|
121
|
+
target.style.transform = 'translateY(-2000px)';
|
|
122
122
|
target.focus();
|
|
123
123
|
requestAnimationFrame(()=>{
|
|
124
|
-
target.style.transform =
|
|
124
|
+
target.style.transform = '';
|
|
125
125
|
});
|
|
126
126
|
}
|
|
127
127
|
if (restoreScrollableStyles) restoreScrollableStyles();
|
|
@@ -134,9 +134,9 @@ function $5c2f5cd01815d369$var$preventScrollMobileSafari() {
|
|
|
134
134
|
// other than tapping on an input directly, e.g. the next/previous buttons in the
|
|
135
135
|
// software keyboard. In these cases, it seems applying the transform in the focus event
|
|
136
136
|
// is good enough, whereas when tapping an input, it must be done before the focus event. 🤷♂️
|
|
137
|
-
target.style.transform =
|
|
137
|
+
target.style.transform = 'translateY(-2000px)';
|
|
138
138
|
requestAnimationFrame(()=>{
|
|
139
|
-
target.style.transform =
|
|
139
|
+
target.style.transform = '';
|
|
140
140
|
// This will have prevented the browser from scrolling the focused element into view,
|
|
141
141
|
// so we need to do this ourselves in a way that doesn't cause the whole page to scroll.
|
|
142
142
|
if ($5c2f5cd01815d369$var$visualViewport) {
|
|
@@ -147,7 +147,7 @@ function $5c2f5cd01815d369$var$preventScrollMobileSafari() {
|
|
|
147
147
|
});
|
|
148
148
|
else // Otherwise, wait for the visual viewport to resize before scrolling so we can
|
|
149
149
|
// measure the correct position to scroll to.
|
|
150
|
-
$5c2f5cd01815d369$var$visualViewport.addEventListener(
|
|
150
|
+
$5c2f5cd01815d369$var$visualViewport.addEventListener('resize', ()=>$5c2f5cd01815d369$var$scrollIntoView(target), {
|
|
151
151
|
once: true
|
|
152
152
|
});
|
|
153
153
|
}
|
|
@@ -167,22 +167,22 @@ function $5c2f5cd01815d369$var$preventScrollMobileSafari() {
|
|
|
167
167
|
// enable us to scroll the window to the top, which is required for the rest of this to work.
|
|
168
168
|
let scrollX = window.pageXOffset;
|
|
169
169
|
let scrollY = window.pageYOffset;
|
|
170
|
-
restoreStyles = (0, $59kHH$reactariautils.chain)($5c2f5cd01815d369$var$addEvent(window,
|
|
170
|
+
restoreStyles = (0, $59kHH$reactariautils.chain)($5c2f5cd01815d369$var$addEvent(window, 'scroll', onWindowScroll), $5c2f5cd01815d369$var$setStyle(document.documentElement, 'paddingRight', `${window.innerWidth - document.documentElement.clientWidth}px`), $5c2f5cd01815d369$var$setStyle(document.documentElement, 'overflow', 'hidden'), $5c2f5cd01815d369$var$setStyle(document.body, 'marginTop', `-${scrollY}px`), ()=>{
|
|
171
171
|
window.scrollTo(scrollX, scrollY);
|
|
172
172
|
});
|
|
173
173
|
// Scroll to the top. The negative margin on the body will make this appear the same.
|
|
174
174
|
window.scrollTo(0, 0);
|
|
175
175
|
};
|
|
176
|
-
let removeEvents = (0, $59kHH$reactariautils.chain)($5c2f5cd01815d369$var$addEvent(document,
|
|
176
|
+
let removeEvents = (0, $59kHH$reactariautils.chain)($5c2f5cd01815d369$var$addEvent(document, 'touchstart', onTouchStart, {
|
|
177
177
|
passive: false,
|
|
178
178
|
capture: true
|
|
179
|
-
}), $5c2f5cd01815d369$var$addEvent(document,
|
|
179
|
+
}), $5c2f5cd01815d369$var$addEvent(document, 'touchmove', onTouchMove, {
|
|
180
180
|
passive: false,
|
|
181
181
|
capture: true
|
|
182
|
-
}), $5c2f5cd01815d369$var$addEvent(document,
|
|
182
|
+
}), $5c2f5cd01815d369$var$addEvent(document, 'touchend', onTouchEnd, {
|
|
183
183
|
passive: false,
|
|
184
184
|
capture: true
|
|
185
|
-
}), $5c2f5cd01815d369$var$addEvent(document,
|
|
185
|
+
}), $5c2f5cd01815d369$var$addEvent(document, 'focus', onFocus, true));
|
|
186
186
|
return ()=>{
|
|
187
187
|
// Restore styles and scroll the page back to where it was.
|
|
188
188
|
restoreScrollableStyles === null || restoreScrollableStyles === void 0 ? void 0 : restoreScrollableStyles();
|
|
@@ -12,18 +12,18 @@ import {useLayoutEffect as $7mMvr$useLayoutEffect, isIOS as $7mMvr$isIOS, chain
|
|
|
12
12
|
* governing permissions and limitations under the License.
|
|
13
13
|
*/
|
|
14
14
|
// @ts-ignore
|
|
15
|
-
const $49c51c25361d4cd2$var$visualViewport = typeof document !==
|
|
15
|
+
const $49c51c25361d4cd2$var$visualViewport = typeof document !== 'undefined' && window.visualViewport;
|
|
16
16
|
// HTML input types that do not cause the software keyboard to appear.
|
|
17
17
|
const $49c51c25361d4cd2$var$nonTextInputTypes = new Set([
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
18
|
+
'checkbox',
|
|
19
|
+
'radio',
|
|
20
|
+
'range',
|
|
21
|
+
'color',
|
|
22
|
+
'file',
|
|
23
|
+
'image',
|
|
24
|
+
'button',
|
|
25
|
+
'submit',
|
|
26
|
+
'reset'
|
|
27
27
|
]);
|
|
28
28
|
// The number of active usePreventScroll calls. Used to determine whether to revert back to the original page style/scroll position
|
|
29
29
|
let $49c51c25361d4cd2$var$preventScrollCount = 0;
|
|
@@ -48,7 +48,7 @@ function $49c51c25361d4cd2$export$ee0f7cc6afcd1c18(options = {}) {
|
|
|
48
48
|
// For most browsers, all we need to do is set `overflow: hidden` on the root element, and
|
|
49
49
|
// add some padding to prevent the page from shifting when the scrollbar is hidden.
|
|
50
50
|
function $49c51c25361d4cd2$var$preventScrollStandard() {
|
|
51
|
-
return (0, $7mMvr$chain)($49c51c25361d4cd2$var$setStyle(document.documentElement,
|
|
51
|
+
return (0, $7mMvr$chain)($49c51c25361d4cd2$var$setStyle(document.documentElement, 'paddingRight', `${window.innerWidth - document.documentElement.clientWidth}px`), $49c51c25361d4cd2$var$setStyle(document.documentElement, 'overflow', 'hidden'));
|
|
52
52
|
}
|
|
53
53
|
// Mobile Safari is a whole different beast. Even with overflow: hidden,
|
|
54
54
|
// it still scrolls the page in many situations:
|
|
@@ -87,7 +87,7 @@ function $49c51c25361d4cd2$var$preventScrollMobileSafari() {
|
|
|
87
87
|
// Prevent scrolling up when at the top and scrolling down when at the bottom
|
|
88
88
|
// of a nested scrollable area, otherwise mobile Safari will start scrolling
|
|
89
89
|
// the window instead.
|
|
90
|
-
if (scrollable instanceof HTMLElement && window.getComputedStyle(scrollable).overscrollBehavior ===
|
|
90
|
+
if (scrollable instanceof HTMLElement && window.getComputedStyle(scrollable).overscrollBehavior === 'auto') restoreScrollableStyles = $49c51c25361d4cd2$var$setStyle(scrollable, 'overscrollBehavior', 'contain');
|
|
91
91
|
};
|
|
92
92
|
let onTouchMove = (e)=>{
|
|
93
93
|
// Prevent scrolling the window.
|
|
@@ -112,10 +112,10 @@ function $49c51c25361d4cd2$var$preventScrollMobileSafari() {
|
|
|
112
112
|
// Apply a transform to trick Safari into thinking the input is at the top of the page
|
|
113
113
|
// so it doesn't try to scroll it into view. When tapping on an input, this needs to
|
|
114
114
|
// be done before the "focus" event, so we have to focus the element ourselves.
|
|
115
|
-
target.style.transform =
|
|
115
|
+
target.style.transform = 'translateY(-2000px)';
|
|
116
116
|
target.focus();
|
|
117
117
|
requestAnimationFrame(()=>{
|
|
118
|
-
target.style.transform =
|
|
118
|
+
target.style.transform = '';
|
|
119
119
|
});
|
|
120
120
|
}
|
|
121
121
|
if (restoreScrollableStyles) restoreScrollableStyles();
|
|
@@ -128,9 +128,9 @@ function $49c51c25361d4cd2$var$preventScrollMobileSafari() {
|
|
|
128
128
|
// other than tapping on an input directly, e.g. the next/previous buttons in the
|
|
129
129
|
// software keyboard. In these cases, it seems applying the transform in the focus event
|
|
130
130
|
// is good enough, whereas when tapping an input, it must be done before the focus event. 🤷♂️
|
|
131
|
-
target.style.transform =
|
|
131
|
+
target.style.transform = 'translateY(-2000px)';
|
|
132
132
|
requestAnimationFrame(()=>{
|
|
133
|
-
target.style.transform =
|
|
133
|
+
target.style.transform = '';
|
|
134
134
|
// This will have prevented the browser from scrolling the focused element into view,
|
|
135
135
|
// so we need to do this ourselves in a way that doesn't cause the whole page to scroll.
|
|
136
136
|
if ($49c51c25361d4cd2$var$visualViewport) {
|
|
@@ -141,7 +141,7 @@ function $49c51c25361d4cd2$var$preventScrollMobileSafari() {
|
|
|
141
141
|
});
|
|
142
142
|
else // Otherwise, wait for the visual viewport to resize before scrolling so we can
|
|
143
143
|
// measure the correct position to scroll to.
|
|
144
|
-
$49c51c25361d4cd2$var$visualViewport.addEventListener(
|
|
144
|
+
$49c51c25361d4cd2$var$visualViewport.addEventListener('resize', ()=>$49c51c25361d4cd2$var$scrollIntoView(target), {
|
|
145
145
|
once: true
|
|
146
146
|
});
|
|
147
147
|
}
|
|
@@ -161,22 +161,22 @@ function $49c51c25361d4cd2$var$preventScrollMobileSafari() {
|
|
|
161
161
|
// enable us to scroll the window to the top, which is required for the rest of this to work.
|
|
162
162
|
let scrollX = window.pageXOffset;
|
|
163
163
|
let scrollY = window.pageYOffset;
|
|
164
|
-
restoreStyles = (0, $7mMvr$chain)($49c51c25361d4cd2$var$addEvent(window,
|
|
164
|
+
restoreStyles = (0, $7mMvr$chain)($49c51c25361d4cd2$var$addEvent(window, 'scroll', onWindowScroll), $49c51c25361d4cd2$var$setStyle(document.documentElement, 'paddingRight', `${window.innerWidth - document.documentElement.clientWidth}px`), $49c51c25361d4cd2$var$setStyle(document.documentElement, 'overflow', 'hidden'), $49c51c25361d4cd2$var$setStyle(document.body, 'marginTop', `-${scrollY}px`), ()=>{
|
|
165
165
|
window.scrollTo(scrollX, scrollY);
|
|
166
166
|
});
|
|
167
167
|
// Scroll to the top. The negative margin on the body will make this appear the same.
|
|
168
168
|
window.scrollTo(0, 0);
|
|
169
169
|
};
|
|
170
|
-
let removeEvents = (0, $7mMvr$chain)($49c51c25361d4cd2$var$addEvent(document,
|
|
170
|
+
let removeEvents = (0, $7mMvr$chain)($49c51c25361d4cd2$var$addEvent(document, 'touchstart', onTouchStart, {
|
|
171
171
|
passive: false,
|
|
172
172
|
capture: true
|
|
173
|
-
}), $49c51c25361d4cd2$var$addEvent(document,
|
|
173
|
+
}), $49c51c25361d4cd2$var$addEvent(document, 'touchmove', onTouchMove, {
|
|
174
174
|
passive: false,
|
|
175
175
|
capture: true
|
|
176
|
-
}), $49c51c25361d4cd2$var$addEvent(document,
|
|
176
|
+
}), $49c51c25361d4cd2$var$addEvent(document, 'touchend', onTouchEnd, {
|
|
177
177
|
passive: false,
|
|
178
178
|
capture: true
|
|
179
|
-
}), $49c51c25361d4cd2$var$addEvent(document,
|
|
179
|
+
}), $49c51c25361d4cd2$var$addEvent(document, 'focus', onFocus, true));
|
|
180
180
|
return ()=>{
|
|
181
181
|
// Restore styles and scroll the page back to where it was.
|
|
182
182
|
restoreScrollableStyles === null || restoreScrollableStyles === void 0 ? void 0 : restoreScrollableStyles();
|
|
@@ -218,4 +218,4 @@ function $49c51c25361d4cd2$var$willOpenKeyboard(target) {
|
|
|
218
218
|
|
|
219
219
|
|
|
220
220
|
export {$49c51c25361d4cd2$export$ee0f7cc6afcd1c18 as usePreventScroll};
|
|
221
|
-
//# sourceMappingURL=usePreventScroll.
|
|
221
|
+
//# sourceMappingURL=usePreventScroll.module.js.map
|
|
@@ -12,18 +12,18 @@ import {useLayoutEffect as $7mMvr$useLayoutEffect, isIOS as $7mMvr$isIOS, chain
|
|
|
12
12
|
* governing permissions and limitations under the License.
|
|
13
13
|
*/
|
|
14
14
|
// @ts-ignore
|
|
15
|
-
const $49c51c25361d4cd2$var$visualViewport = typeof document !==
|
|
15
|
+
const $49c51c25361d4cd2$var$visualViewport = typeof document !== 'undefined' && window.visualViewport;
|
|
16
16
|
// HTML input types that do not cause the software keyboard to appear.
|
|
17
17
|
const $49c51c25361d4cd2$var$nonTextInputTypes = new Set([
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
18
|
+
'checkbox',
|
|
19
|
+
'radio',
|
|
20
|
+
'range',
|
|
21
|
+
'color',
|
|
22
|
+
'file',
|
|
23
|
+
'image',
|
|
24
|
+
'button',
|
|
25
|
+
'submit',
|
|
26
|
+
'reset'
|
|
27
27
|
]);
|
|
28
28
|
// The number of active usePreventScroll calls. Used to determine whether to revert back to the original page style/scroll position
|
|
29
29
|
let $49c51c25361d4cd2$var$preventScrollCount = 0;
|
|
@@ -48,7 +48,7 @@ function $49c51c25361d4cd2$export$ee0f7cc6afcd1c18(options = {}) {
|
|
|
48
48
|
// For most browsers, all we need to do is set `overflow: hidden` on the root element, and
|
|
49
49
|
// add some padding to prevent the page from shifting when the scrollbar is hidden.
|
|
50
50
|
function $49c51c25361d4cd2$var$preventScrollStandard() {
|
|
51
|
-
return (0, $7mMvr$chain)($49c51c25361d4cd2$var$setStyle(document.documentElement,
|
|
51
|
+
return (0, $7mMvr$chain)($49c51c25361d4cd2$var$setStyle(document.documentElement, 'paddingRight', `${window.innerWidth - document.documentElement.clientWidth}px`), $49c51c25361d4cd2$var$setStyle(document.documentElement, 'overflow', 'hidden'));
|
|
52
52
|
}
|
|
53
53
|
// Mobile Safari is a whole different beast. Even with overflow: hidden,
|
|
54
54
|
// it still scrolls the page in many situations:
|
|
@@ -87,7 +87,7 @@ function $49c51c25361d4cd2$var$preventScrollMobileSafari() {
|
|
|
87
87
|
// Prevent scrolling up when at the top and scrolling down when at the bottom
|
|
88
88
|
// of a nested scrollable area, otherwise mobile Safari will start scrolling
|
|
89
89
|
// the window instead.
|
|
90
|
-
if (scrollable instanceof HTMLElement && window.getComputedStyle(scrollable).overscrollBehavior ===
|
|
90
|
+
if (scrollable instanceof HTMLElement && window.getComputedStyle(scrollable).overscrollBehavior === 'auto') restoreScrollableStyles = $49c51c25361d4cd2$var$setStyle(scrollable, 'overscrollBehavior', 'contain');
|
|
91
91
|
};
|
|
92
92
|
let onTouchMove = (e)=>{
|
|
93
93
|
// Prevent scrolling the window.
|
|
@@ -112,10 +112,10 @@ function $49c51c25361d4cd2$var$preventScrollMobileSafari() {
|
|
|
112
112
|
// Apply a transform to trick Safari into thinking the input is at the top of the page
|
|
113
113
|
// so it doesn't try to scroll it into view. When tapping on an input, this needs to
|
|
114
114
|
// be done before the "focus" event, so we have to focus the element ourselves.
|
|
115
|
-
target.style.transform =
|
|
115
|
+
target.style.transform = 'translateY(-2000px)';
|
|
116
116
|
target.focus();
|
|
117
117
|
requestAnimationFrame(()=>{
|
|
118
|
-
target.style.transform =
|
|
118
|
+
target.style.transform = '';
|
|
119
119
|
});
|
|
120
120
|
}
|
|
121
121
|
if (restoreScrollableStyles) restoreScrollableStyles();
|
|
@@ -128,9 +128,9 @@ function $49c51c25361d4cd2$var$preventScrollMobileSafari() {
|
|
|
128
128
|
// other than tapping on an input directly, e.g. the next/previous buttons in the
|
|
129
129
|
// software keyboard. In these cases, it seems applying the transform in the focus event
|
|
130
130
|
// is good enough, whereas when tapping an input, it must be done before the focus event. 🤷♂️
|
|
131
|
-
target.style.transform =
|
|
131
|
+
target.style.transform = 'translateY(-2000px)';
|
|
132
132
|
requestAnimationFrame(()=>{
|
|
133
|
-
target.style.transform =
|
|
133
|
+
target.style.transform = '';
|
|
134
134
|
// This will have prevented the browser from scrolling the focused element into view,
|
|
135
135
|
// so we need to do this ourselves in a way that doesn't cause the whole page to scroll.
|
|
136
136
|
if ($49c51c25361d4cd2$var$visualViewport) {
|
|
@@ -141,7 +141,7 @@ function $49c51c25361d4cd2$var$preventScrollMobileSafari() {
|
|
|
141
141
|
});
|
|
142
142
|
else // Otherwise, wait for the visual viewport to resize before scrolling so we can
|
|
143
143
|
// measure the correct position to scroll to.
|
|
144
|
-
$49c51c25361d4cd2$var$visualViewport.addEventListener(
|
|
144
|
+
$49c51c25361d4cd2$var$visualViewport.addEventListener('resize', ()=>$49c51c25361d4cd2$var$scrollIntoView(target), {
|
|
145
145
|
once: true
|
|
146
146
|
});
|
|
147
147
|
}
|
|
@@ -161,22 +161,22 @@ function $49c51c25361d4cd2$var$preventScrollMobileSafari() {
|
|
|
161
161
|
// enable us to scroll the window to the top, which is required for the rest of this to work.
|
|
162
162
|
let scrollX = window.pageXOffset;
|
|
163
163
|
let scrollY = window.pageYOffset;
|
|
164
|
-
restoreStyles = (0, $7mMvr$chain)($49c51c25361d4cd2$var$addEvent(window,
|
|
164
|
+
restoreStyles = (0, $7mMvr$chain)($49c51c25361d4cd2$var$addEvent(window, 'scroll', onWindowScroll), $49c51c25361d4cd2$var$setStyle(document.documentElement, 'paddingRight', `${window.innerWidth - document.documentElement.clientWidth}px`), $49c51c25361d4cd2$var$setStyle(document.documentElement, 'overflow', 'hidden'), $49c51c25361d4cd2$var$setStyle(document.body, 'marginTop', `-${scrollY}px`), ()=>{
|
|
165
165
|
window.scrollTo(scrollX, scrollY);
|
|
166
166
|
});
|
|
167
167
|
// Scroll to the top. The negative margin on the body will make this appear the same.
|
|
168
168
|
window.scrollTo(0, 0);
|
|
169
169
|
};
|
|
170
|
-
let removeEvents = (0, $7mMvr$chain)($49c51c25361d4cd2$var$addEvent(document,
|
|
170
|
+
let removeEvents = (0, $7mMvr$chain)($49c51c25361d4cd2$var$addEvent(document, 'touchstart', onTouchStart, {
|
|
171
171
|
passive: false,
|
|
172
172
|
capture: true
|
|
173
|
-
}), $49c51c25361d4cd2$var$addEvent(document,
|
|
173
|
+
}), $49c51c25361d4cd2$var$addEvent(document, 'touchmove', onTouchMove, {
|
|
174
174
|
passive: false,
|
|
175
175
|
capture: true
|
|
176
|
-
}), $49c51c25361d4cd2$var$addEvent(document,
|
|
176
|
+
}), $49c51c25361d4cd2$var$addEvent(document, 'touchend', onTouchEnd, {
|
|
177
177
|
passive: false,
|
|
178
178
|
capture: true
|
|
179
|
-
}), $49c51c25361d4cd2$var$addEvent(document,
|
|
179
|
+
}), $49c51c25361d4cd2$var$addEvent(document, 'focus', onFocus, true));
|
|
180
180
|
return ()=>{
|
|
181
181
|
// Restore styles and scroll the page back to where it was.
|
|
182
182
|
restoreScrollableStyles === null || restoreScrollableStyles === void 0 ? void 0 : restoreScrollableStyles();
|
package/dist/zh-CN.mjs
CHANGED
package/dist/zh-TW.mjs
CHANGED