@react-aria/overlays 3.23.4 → 3.24.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/Overlay.main.js.map +1 -1
- package/dist/Overlay.module.js.map +1 -1
- package/dist/PortalProvider.main.js +1 -1
- package/dist/PortalProvider.main.js.map +1 -1
- package/dist/PortalProvider.mjs +1 -1
- package/dist/PortalProvider.module.js +1 -1
- package/dist/PortalProvider.module.js.map +1 -1
- package/dist/ariaHideOutside.main.js +2 -1
- package/dist/ariaHideOutside.main.js.map +1 -1
- package/dist/ariaHideOutside.mjs +2 -1
- package/dist/ariaHideOutside.module.js +2 -1
- package/dist/ariaHideOutside.module.js.map +1 -1
- package/dist/calculatePosition.main.js +32 -23
- package/dist/calculatePosition.main.js.map +1 -1
- package/dist/calculatePosition.mjs +32 -23
- package/dist/calculatePosition.module.js +32 -23
- package/dist/calculatePosition.module.js.map +1 -1
- package/dist/types.d.ts +4 -4
- package/dist/types.d.ts.map +1 -1
- package/dist/useCloseOnScroll.main.js.map +1 -1
- package/dist/useCloseOnScroll.module.js.map +1 -1
- package/dist/useModal.main.js +1 -1
- package/dist/useModal.main.js.map +1 -1
- package/dist/useModal.mjs +1 -1
- package/dist/useModal.module.js +1 -1
- package/dist/useModal.module.js.map +1 -1
- package/dist/useModalOverlay.main.js +1 -1
- package/dist/useModalOverlay.main.js.map +1 -1
- package/dist/useModalOverlay.mjs +1 -1
- package/dist/useModalOverlay.module.js +1 -1
- package/dist/useModalOverlay.module.js.map +1 -1
- package/dist/useOverlay.main.js +2 -2
- package/dist/useOverlay.main.js.map +1 -1
- package/dist/useOverlay.mjs +2 -2
- package/dist/useOverlay.module.js +2 -2
- package/dist/useOverlay.module.js.map +1 -1
- package/dist/useOverlayPosition.main.js +18 -21
- package/dist/useOverlayPosition.main.js.map +1 -1
- package/dist/useOverlayPosition.mjs +18 -21
- package/dist/useOverlayPosition.module.js +18 -21
- package/dist/useOverlayPosition.module.js.map +1 -1
- package/dist/useOverlayTrigger.main.js +1 -1
- package/dist/useOverlayTrigger.main.js.map +1 -1
- package/dist/useOverlayTrigger.mjs +1 -1
- package/dist/useOverlayTrigger.module.js +1 -1
- package/dist/useOverlayTrigger.module.js.map +1 -1
- package/dist/usePopover.main.js +3 -2
- package/dist/usePopover.main.js.map +1 -1
- package/dist/usePopover.mjs +3 -2
- package/dist/usePopover.module.js +3 -2
- package/dist/usePopover.module.js.map +1 -1
- package/dist/usePreventScroll.main.js +10 -7
- package/dist/usePreventScroll.main.js.map +1 -1
- package/dist/usePreventScroll.mjs +10 -7
- package/dist/usePreventScroll.module.js +10 -7
- package/dist/usePreventScroll.module.js.map +1 -1
- package/package.json +14 -14
- package/src/Overlay.tsx +1 -1
- package/src/PortalProvider.tsx +1 -1
- package/src/ariaHideOutside.ts +10 -3
- package/src/calculatePosition.ts +27 -30
- package/src/useCloseOnScroll.ts +1 -1
- package/src/useModal.tsx +2 -2
- package/src/useModalOverlay.ts +1 -1
- package/src/useOverlay.ts +2 -2
- package/src/useOverlayPosition.ts +19 -22
- package/src/useOverlayTrigger.ts +2 -2
- package/src/usePopover.ts +4 -3
- package/src/usePreventScroll.ts +13 -10
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;AAkBD,MAAM,8CAAU,CAAA,GAAA,sCAAI,EAAE,aAAa,CAAsB;AAUlD,SAAS,yCAAc,KAAyB;IACrD,IAAI,YAAC,QAAQ,EAAC,GAAG;IACjB,IAAI,SAAS,CAAA,GAAA,uBAAS,EAAE;IACxB,IAAI,CAAC,YAAY,cAAc,GAAG,CAAA,GAAA,qBAAO,EAAE;IAC3C,IAAI,UAAU,CAAA,GAAA,oBAAM,EAAE,IAAO,CAAA;oBAC3B;wBACA;YACA;gBACE,cAAc,CAAA,QAAS,QAAQ;gBAC/B,IAAI,QACF,OAAO,QAAQ;YAEnB;YACA;gBACE,cAAc,CAAA,QAAS,QAAQ;gBAC/B,IAAI,QACF,OAAO,WAAW;YAEtB;QACF,CAAA,GAAI;QAAC;QAAQ;KAAW;IAExB,qBACE,0DAAC,8BAAQ,QAAQ;QAAC,OAAO;OACtB;AAGP;AAaO,SAAS;IACd,IAAI,UAAU,CAAA,GAAA,uBAAS,EAAE;IACzB,OAAO;QACL,oBAAoB;YAClB,eAAe,WAAW,QAAQ,UAAU,GAAG,IAAI,OAAO;QAC5D;IACF;AACF;AAEA;;CAEC,GACD,SAAS,0CAAoB,KAAyB;IACpD,IAAI,sBAAC,kBAAkB,EAAC,GAAG;IAC3B,qBAAO,0DAAC;QAAI,0BAAA;QAAwB,GAAG,KAAK;QAAG,GAAG,kBAAkB;;AACtE;AAUO,SAAS,0CAAgB,KAAyB;IACvD,qBACE,0DAAC,8DACC,0DAAC,2CAAwB;AAG/B;AAiBO,SAAS,0CAAiB,KAA4B;IAC3D,IAAI,QAAQ,CAAA,GAAA,4BAAO;IACnB,IAAI,mBAAC,kBAAkB,QAAQ,OAAO,SAAS,IAAI,EAAE,GAAG,MAAK,GAAG;IAEhE,CAAA,GAAA,sCAAI,EAAE,SAAS,CAAC;QACd,IAAI,4BAAA,sCAAA,gBAAiB,OAAO,CAAC,6BAC3B,MAAM,IAAI,MAAM;IAEpB,GAAG;QAAC;KAAgB;IAEpB,IAAI,CAAC,iBACH,OAAO;IAGT,IAAI,yBAAW,0DAAC,2CAAoB;IACpC,qBAAO,CAAA,GAAA,yCAAO,EAAE,YAAY,CAAC,UAAU;AACzC;AAsBO,SAAS,0CAAS,OAA0B;IACjD,4EAA4E;IAC5E,IAAI,UAAU,CAAA,GAAA,uBAAS,EAAE;IACzB,IAAI,CAAC,SACH,MAAM,IAAI,MAAM;IAGlB,CAAA,GAAA,sBAAQ,EAAE;QACR,IAAI,CAAA,oBAAA,8BAAA,QAAS,UAAU,KAAI,CAAC,WAAW,CAAC,QAAQ,MAAM,EACpD;QAGF,+EAA+E;QAC/E,+EAA+E;QAC/E,QAAQ,MAAM,CAAC,QAAQ;QACvB,OAAO;YACL,IAAI,WAAW,QAAQ,MAAM,EAC3B,QAAQ,MAAM,CAAC,WAAW;QAE9B;IACF,GAAG;QAAC;QAAS,QAAQ,MAAM;QAAE,oBAAA,8BAAA,QAAS,UAAU;KAAC;IAEjD,OAAO;QACL,YAAY;YACV,gBAAgB,EAAC,oBAAA,8BAAA,QAAS,UAAU;QACtC;IACF;AACF","sources":["packages/@react-aria/overlays/src/useModal.tsx"],"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 {DOMAttributes} from '@react-types/shared';\nimport React, {AriaAttributes, ReactNode, useContext, useEffect, useMemo, useState} from 'react';\nimport ReactDOM from 'react-dom';\nimport {useIsSSR} from '@react-aria/ssr';\n\nexport interface ModalProviderProps extends DOMAttributes {\n children: ReactNode\n}\n\ninterface ModalContext {\n parent: ModalContext | null,\n modalCount: number,\n addModal: () => void,\n removeModal: () => void\n}\n\nconst Context = React.createContext<ModalContext | null>(null);\n\n/**\n * Each ModalProvider tracks how many modals are open in its subtree. On mount, the modals\n * trigger `addModal` to increment the count, and trigger `removeModal` on unmount to decrement it.\n * This is done recursively so that all parent providers are incremented and decremented.\n * If the modal count is greater than zero, we add `aria-hidden` to this provider to hide its\n * subtree from screen readers. This is done using React context in order to account for things\n * like portals, which can cause the React tree and the DOM tree to differ significantly in structure.\n */\nexport function ModalProvider(props: ModalProviderProps) {\n let {children} = props;\n let parent = useContext(Context);\n let [modalCount, setModalCount] = useState(0);\n let context = useMemo(() => ({\n parent,\n modalCount,\n addModal() {\n setModalCount(count => count + 1);\n if (parent) {\n parent.addModal();\n }\n },\n removeModal() {\n setModalCount(count => count - 1);\n if (parent) {\n parent.removeModal();\n }\n }\n }), [parent, modalCount]);\n\n return (\n <Context.Provider value={context}>\n {children}\n </Context.Provider>\n );\n}\n\nexport interface ModalProviderAria {\n /**\n * Props to be spread on the container element.\n */\n modalProviderProps: AriaAttributes\n}\n\n/**\n * Used to determine if the tree should be aria-hidden based on how many\n * modals are open.\n */\nexport function useModalProvider(): ModalProviderAria {\n let context = useContext(Context);\n return {\n modalProviderProps: {\n 'aria-hidden': context && context.modalCount > 0 ? true :
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;AAkBD,MAAM,8CAAU,CAAA,GAAA,sCAAI,EAAE,aAAa,CAAsB;AAUlD,SAAS,yCAAc,KAAyB;IACrD,IAAI,YAAC,QAAQ,EAAC,GAAG;IACjB,IAAI,SAAS,CAAA,GAAA,uBAAS,EAAE;IACxB,IAAI,CAAC,YAAY,cAAc,GAAG,CAAA,GAAA,qBAAO,EAAE;IAC3C,IAAI,UAAU,CAAA,GAAA,oBAAM,EAAE,IAAO,CAAA;oBAC3B;wBACA;YACA;gBACE,cAAc,CAAA,QAAS,QAAQ;gBAC/B,IAAI,QACF,OAAO,QAAQ;YAEnB;YACA;gBACE,cAAc,CAAA,QAAS,QAAQ;gBAC/B,IAAI,QACF,OAAO,WAAW;YAEtB;QACF,CAAA,GAAI;QAAC;QAAQ;KAAW;IAExB,qBACE,0DAAC,8BAAQ,QAAQ;QAAC,OAAO;OACtB;AAGP;AAaO,SAAS;IACd,IAAI,UAAU,CAAA,GAAA,uBAAS,EAAE;IACzB,OAAO;QACL,oBAAoB;YAClB,eAAe,WAAW,QAAQ,UAAU,GAAG,IAAI,OAAO;QAC5D;IACF;AACF;AAEA;;CAEC,GACD,SAAS,0CAAoB,KAAyB;IACpD,IAAI,sBAAC,kBAAkB,EAAC,GAAG;IAC3B,qBAAO,0DAAC;QAAI,0BAAA;QAAwB,GAAG,KAAK;QAAG,GAAG,kBAAkB;;AACtE;AAUO,SAAS,0CAAgB,KAAyB;IACvD,qBACE,0DAAC,8DACC,0DAAC,2CAAwB;AAG/B;AAiBO,SAAS,0CAAiB,KAA4B;IAC3D,IAAI,QAAQ,CAAA,GAAA,4BAAO;IACnB,IAAI,mBAAC,kBAAkB,QAAQ,OAAO,SAAS,IAAI,EAAE,GAAG,MAAK,GAAG;IAEhE,CAAA,GAAA,sCAAI,EAAE,SAAS,CAAC;QACd,IAAI,4BAAA,sCAAA,gBAAiB,OAAO,CAAC,6BAC3B,MAAM,IAAI,MAAM;IAEpB,GAAG;QAAC;KAAgB;IAEpB,IAAI,CAAC,iBACH,OAAO;IAGT,IAAI,yBAAW,0DAAC,2CAAoB;IACpC,qBAAO,CAAA,GAAA,yCAAO,EAAE,YAAY,CAAC,UAAU;AACzC;AAsBO,SAAS,0CAAS,OAA0B;IACjD,4EAA4E;IAC5E,IAAI,UAAU,CAAA,GAAA,uBAAS,EAAE;IACzB,IAAI,CAAC,SACH,MAAM,IAAI,MAAM;IAGlB,CAAA,GAAA,sBAAQ,EAAE;QACR,IAAI,CAAA,oBAAA,8BAAA,QAAS,UAAU,KAAI,CAAC,WAAW,CAAC,QAAQ,MAAM,EACpD;QAGF,+EAA+E;QAC/E,+EAA+E;QAC/E,QAAQ,MAAM,CAAC,QAAQ;QACvB,OAAO;YACL,IAAI,WAAW,QAAQ,MAAM,EAC3B,QAAQ,MAAM,CAAC,WAAW;QAE9B;IACF,GAAG;QAAC;QAAS,QAAQ,MAAM;QAAE,oBAAA,8BAAA,QAAS,UAAU;KAAC;IAEjD,OAAO;QACL,YAAY;YACV,gBAAgB,EAAC,oBAAA,8BAAA,QAAS,UAAU;QACtC;IACF;AACF","sources":["packages/@react-aria/overlays/src/useModal.tsx"],"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 {DOMAttributes} from '@react-types/shared';\nimport React, {AriaAttributes, ReactNode, useContext, useEffect, useMemo, useState} from 'react';\nimport ReactDOM from 'react-dom';\nimport {useIsSSR} from '@react-aria/ssr';\n\nexport interface ModalProviderProps extends DOMAttributes {\n children: ReactNode\n}\n\ninterface ModalContext {\n parent: ModalContext | null,\n modalCount: number,\n addModal: () => void,\n removeModal: () => void\n}\n\nconst Context = React.createContext<ModalContext | null>(null);\n\n/**\n * Each ModalProvider tracks how many modals are open in its subtree. On mount, the modals\n * trigger `addModal` to increment the count, and trigger `removeModal` on unmount to decrement it.\n * This is done recursively so that all parent providers are incremented and decremented.\n * If the modal count is greater than zero, we add `aria-hidden` to this provider to hide its\n * subtree from screen readers. This is done using React context in order to account for things\n * like portals, which can cause the React tree and the DOM tree to differ significantly in structure.\n */\nexport function ModalProvider(props: ModalProviderProps) {\n let {children} = props;\n let parent = useContext(Context);\n let [modalCount, setModalCount] = useState(0);\n let context = useMemo(() => ({\n parent,\n modalCount,\n addModal() {\n setModalCount(count => count + 1);\n if (parent) {\n parent.addModal();\n }\n },\n removeModal() {\n setModalCount(count => count - 1);\n if (parent) {\n parent.removeModal();\n }\n }\n }), [parent, modalCount]);\n\n return (\n <Context.Provider value={context}>\n {children}\n </Context.Provider>\n );\n}\n\nexport interface ModalProviderAria {\n /**\n * Props to be spread on the container element.\n */\n modalProviderProps: AriaAttributes\n}\n\n/**\n * Used to determine if the tree should be aria-hidden based on how many\n * modals are open.\n */\nexport function useModalProvider(): ModalProviderAria {\n let context = useContext(Context);\n return {\n modalProviderProps: {\n 'aria-hidden': context && context.modalCount > 0 ? true : undefined\n }\n };\n}\n\n/**\n * Creates a root node that will be aria-hidden if there are other modals open.\n */\nfunction OverlayContainerDOM(props: ModalProviderProps) {\n let {modalProviderProps} = useModalProvider();\n return <div data-overlay-container {...props} {...modalProviderProps} />;\n}\n\n/**\n * An OverlayProvider acts as a container for the top-level application.\n * Any application that uses modal dialogs or other overlays should\n * be wrapped in a `<OverlayProvider>`. This is used to ensure that\n * the main content of the application is hidden from screen readers\n * if a modal or other overlay is opened. Only the top-most modal or\n * overlay should be accessible at once.\n */\nexport function OverlayProvider(props: ModalProviderProps) {\n return (\n <ModalProvider>\n <OverlayContainerDOM {...props} />\n </ModalProvider>\n );\n}\n\nexport interface OverlayContainerProps extends ModalProviderProps {\n /**\n * The container element in which the overlay portal will be placed.\n * @default document.body\n */\n portalContainer?: Element\n}\n\n/**\n * A container for overlays like modals and popovers. Renders the overlay\n * into a Portal which is placed at the end of the document body.\n * Also ensures that the overlay is hidden from screen readers if a\n * nested modal is opened. Only the top-most modal or overlay should\n * be accessible at once.\n */\nexport function OverlayContainer(props: OverlayContainerProps): React.ReactPortal | null {\n let isSSR = useIsSSR();\n let {portalContainer = isSSR ? null : document.body, ...rest} = props;\n\n React.useEffect(() => {\n if (portalContainer?.closest('[data-overlay-container]')) {\n throw new Error('An OverlayContainer must not be inside another container. Please change the portalContainer prop.');\n }\n }, [portalContainer]);\n\n if (!portalContainer) {\n return null;\n }\n\n let contents = <OverlayProvider {...rest} />;\n return ReactDOM.createPortal(contents, portalContainer);\n}\n\ninterface ModalAriaProps extends DOMAttributes {\n /** Data attribute marks the dom node as a modal for the aria-modal-polyfill. */\n 'data-ismodal': boolean\n}\n\nexport interface AriaModalOptions {\n isDisabled?: boolean\n}\n\nexport interface ModalAria {\n /** Props for the modal content element. */\n modalProps: ModalAriaProps\n}\n\n/**\n * Hides content outside the current `<OverlayContainer>` from screen readers\n * on mount and restores it on unmount. Typically used by modal dialogs and\n * other types of overlays to ensure that only the top-most modal is\n * accessible at once.\n */\nexport function useModal(options?: AriaModalOptions): ModalAria {\n // Add aria-hidden to all parent providers on mount, and restore on unmount.\n let context = useContext(Context);\n if (!context) {\n throw new Error('Modal is not contained within a provider');\n }\n\n useEffect(() => {\n if (options?.isDisabled || !context || !context.parent) {\n return;\n }\n\n // The immediate context is from the provider containing this modal, so we only\n // want to trigger aria-hidden on its parents not on the modal provider itself.\n context.parent.addModal();\n return () => {\n if (context && context.parent) {\n context.parent.removeModal();\n }\n };\n }, [context, context.parent, options?.isDisabled]);\n\n return {\n modalProps: {\n 'data-ismodal': !options?.isDisabled\n }\n };\n}\n"],"names":[],"version":3,"file":"useModal.main.js.map"}
|
package/dist/useModal.mjs
CHANGED
|
@@ -43,7 +43,7 @@ function $f57aed4a881a3485$export$d9aaed4c3ece1bc0() {
|
|
|
43
43
|
let context = (0, $4AOtR$useContext)($f57aed4a881a3485$var$Context);
|
|
44
44
|
return {
|
|
45
45
|
modalProviderProps: {
|
|
46
|
-
'aria-hidden': context && context.modalCount > 0 ? true :
|
|
46
|
+
'aria-hidden': context && context.modalCount > 0 ? true : undefined
|
|
47
47
|
}
|
|
48
48
|
};
|
|
49
49
|
}
|
package/dist/useModal.module.js
CHANGED
|
@@ -43,7 +43,7 @@ function $f57aed4a881a3485$export$d9aaed4c3ece1bc0() {
|
|
|
43
43
|
let context = (0, $4AOtR$useContext)($f57aed4a881a3485$var$Context);
|
|
44
44
|
return {
|
|
45
45
|
modalProviderProps: {
|
|
46
|
-
'aria-hidden': context && context.modalCount > 0 ? true :
|
|
46
|
+
'aria-hidden': context && context.modalCount > 0 ? true : undefined
|
|
47
47
|
}
|
|
48
48
|
};
|
|
49
49
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;AAAA;;;;;;;;;;CAUC;;;AAkBD,MAAM,8CAAU,CAAA,GAAA,YAAI,EAAE,aAAa,CAAsB;AAUlD,SAAS,yCAAc,KAAyB;IACrD,IAAI,YAAC,QAAQ,EAAC,GAAG;IACjB,IAAI,SAAS,CAAA,GAAA,iBAAS,EAAE;IACxB,IAAI,CAAC,YAAY,cAAc,GAAG,CAAA,GAAA,eAAO,EAAE;IAC3C,IAAI,UAAU,CAAA,GAAA,cAAM,EAAE,IAAO,CAAA;oBAC3B;wBACA;YACA;gBACE,cAAc,CAAA,QAAS,QAAQ;gBAC/B,IAAI,QACF,OAAO,QAAQ;YAEnB;YACA;gBACE,cAAc,CAAA,QAAS,QAAQ;gBAC/B,IAAI,QACF,OAAO,WAAW;YAEtB;QACF,CAAA,GAAI;QAAC;QAAQ;KAAW;IAExB,qBACE,gCAAC,8BAAQ,QAAQ;QAAC,OAAO;OACtB;AAGP;AAaO,SAAS;IACd,IAAI,UAAU,CAAA,GAAA,iBAAS,EAAE;IACzB,OAAO;QACL,oBAAoB;YAClB,eAAe,WAAW,QAAQ,UAAU,GAAG,IAAI,OAAO;QAC5D;IACF;AACF;AAEA;;CAEC,GACD,SAAS,0CAAoB,KAAyB;IACpD,IAAI,sBAAC,kBAAkB,EAAC,GAAG;IAC3B,qBAAO,gCAAC;QAAI,0BAAA;QAAwB,GAAG,KAAK;QAAG,GAAG,kBAAkB;;AACtE;AAUO,SAAS,0CAAgB,KAAyB;IACvD,qBACE,gCAAC,8DACC,gCAAC,2CAAwB;AAG/B;AAiBO,SAAS,0CAAiB,KAA4B;IAC3D,IAAI,QAAQ,CAAA,GAAA,eAAO;IACnB,IAAI,mBAAC,kBAAkB,QAAQ,OAAO,SAAS,IAAI,EAAE,GAAG,MAAK,GAAG;IAEhE,CAAA,GAAA,YAAI,EAAE,SAAS,CAAC;QACd,IAAI,4BAAA,sCAAA,gBAAiB,OAAO,CAAC,6BAC3B,MAAM,IAAI,MAAM;IAEpB,GAAG;QAAC;KAAgB;IAEpB,IAAI,CAAC,iBACH,OAAO;IAGT,IAAI,yBAAW,gCAAC,2CAAoB;IACpC,qBAAO,CAAA,GAAA,eAAO,EAAE,YAAY,CAAC,UAAU;AACzC;AAsBO,SAAS,0CAAS,OAA0B;IACjD,4EAA4E;IAC5E,IAAI,UAAU,CAAA,GAAA,iBAAS,EAAE;IACzB,IAAI,CAAC,SACH,MAAM,IAAI,MAAM;IAGlB,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,CAAA,oBAAA,8BAAA,QAAS,UAAU,KAAI,CAAC,WAAW,CAAC,QAAQ,MAAM,EACpD;QAGF,+EAA+E;QAC/E,+EAA+E;QAC/E,QAAQ,MAAM,CAAC,QAAQ;QACvB,OAAO;YACL,IAAI,WAAW,QAAQ,MAAM,EAC3B,QAAQ,MAAM,CAAC,WAAW;QAE9B;IACF,GAAG;QAAC;QAAS,QAAQ,MAAM;QAAE,oBAAA,8BAAA,QAAS,UAAU;KAAC;IAEjD,OAAO;QACL,YAAY;YACV,gBAAgB,EAAC,oBAAA,8BAAA,QAAS,UAAU;QACtC;IACF;AACF","sources":["packages/@react-aria/overlays/src/useModal.tsx"],"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 {DOMAttributes} from '@react-types/shared';\nimport React, {AriaAttributes, ReactNode, useContext, useEffect, useMemo, useState} from 'react';\nimport ReactDOM from 'react-dom';\nimport {useIsSSR} from '@react-aria/ssr';\n\nexport interface ModalProviderProps extends DOMAttributes {\n children: ReactNode\n}\n\ninterface ModalContext {\n parent: ModalContext | null,\n modalCount: number,\n addModal: () => void,\n removeModal: () => void\n}\n\nconst Context = React.createContext<ModalContext | null>(null);\n\n/**\n * Each ModalProvider tracks how many modals are open in its subtree. On mount, the modals\n * trigger `addModal` to increment the count, and trigger `removeModal` on unmount to decrement it.\n * This is done recursively so that all parent providers are incremented and decremented.\n * If the modal count is greater than zero, we add `aria-hidden` to this provider to hide its\n * subtree from screen readers. This is done using React context in order to account for things\n * like portals, which can cause the React tree and the DOM tree to differ significantly in structure.\n */\nexport function ModalProvider(props: ModalProviderProps) {\n let {children} = props;\n let parent = useContext(Context);\n let [modalCount, setModalCount] = useState(0);\n let context = useMemo(() => ({\n parent,\n modalCount,\n addModal() {\n setModalCount(count => count + 1);\n if (parent) {\n parent.addModal();\n }\n },\n removeModal() {\n setModalCount(count => count - 1);\n if (parent) {\n parent.removeModal();\n }\n }\n }), [parent, modalCount]);\n\n return (\n <Context.Provider value={context}>\n {children}\n </Context.Provider>\n );\n}\n\nexport interface ModalProviderAria {\n /**\n * Props to be spread on the container element.\n */\n modalProviderProps: AriaAttributes\n}\n\n/**\n * Used to determine if the tree should be aria-hidden based on how many\n * modals are open.\n */\nexport function useModalProvider(): ModalProviderAria {\n let context = useContext(Context);\n return {\n modalProviderProps: {\n 'aria-hidden': context && context.modalCount > 0 ? true :
|
|
1
|
+
{"mappings":";;;;AAAA;;;;;;;;;;CAUC;;;AAkBD,MAAM,8CAAU,CAAA,GAAA,YAAI,EAAE,aAAa,CAAsB;AAUlD,SAAS,yCAAc,KAAyB;IACrD,IAAI,YAAC,QAAQ,EAAC,GAAG;IACjB,IAAI,SAAS,CAAA,GAAA,iBAAS,EAAE;IACxB,IAAI,CAAC,YAAY,cAAc,GAAG,CAAA,GAAA,eAAO,EAAE;IAC3C,IAAI,UAAU,CAAA,GAAA,cAAM,EAAE,IAAO,CAAA;oBAC3B;wBACA;YACA;gBACE,cAAc,CAAA,QAAS,QAAQ;gBAC/B,IAAI,QACF,OAAO,QAAQ;YAEnB;YACA;gBACE,cAAc,CAAA,QAAS,QAAQ;gBAC/B,IAAI,QACF,OAAO,WAAW;YAEtB;QACF,CAAA,GAAI;QAAC;QAAQ;KAAW;IAExB,qBACE,gCAAC,8BAAQ,QAAQ;QAAC,OAAO;OACtB;AAGP;AAaO,SAAS;IACd,IAAI,UAAU,CAAA,GAAA,iBAAS,EAAE;IACzB,OAAO;QACL,oBAAoB;YAClB,eAAe,WAAW,QAAQ,UAAU,GAAG,IAAI,OAAO;QAC5D;IACF;AACF;AAEA;;CAEC,GACD,SAAS,0CAAoB,KAAyB;IACpD,IAAI,sBAAC,kBAAkB,EAAC,GAAG;IAC3B,qBAAO,gCAAC;QAAI,0BAAA;QAAwB,GAAG,KAAK;QAAG,GAAG,kBAAkB;;AACtE;AAUO,SAAS,0CAAgB,KAAyB;IACvD,qBACE,gCAAC,8DACC,gCAAC,2CAAwB;AAG/B;AAiBO,SAAS,0CAAiB,KAA4B;IAC3D,IAAI,QAAQ,CAAA,GAAA,eAAO;IACnB,IAAI,mBAAC,kBAAkB,QAAQ,OAAO,SAAS,IAAI,EAAE,GAAG,MAAK,GAAG;IAEhE,CAAA,GAAA,YAAI,EAAE,SAAS,CAAC;QACd,IAAI,4BAAA,sCAAA,gBAAiB,OAAO,CAAC,6BAC3B,MAAM,IAAI,MAAM;IAEpB,GAAG;QAAC;KAAgB;IAEpB,IAAI,CAAC,iBACH,OAAO;IAGT,IAAI,yBAAW,gCAAC,2CAAoB;IACpC,qBAAO,CAAA,GAAA,eAAO,EAAE,YAAY,CAAC,UAAU;AACzC;AAsBO,SAAS,0CAAS,OAA0B;IACjD,4EAA4E;IAC5E,IAAI,UAAU,CAAA,GAAA,iBAAS,EAAE;IACzB,IAAI,CAAC,SACH,MAAM,IAAI,MAAM;IAGlB,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,CAAA,oBAAA,8BAAA,QAAS,UAAU,KAAI,CAAC,WAAW,CAAC,QAAQ,MAAM,EACpD;QAGF,+EAA+E;QAC/E,+EAA+E;QAC/E,QAAQ,MAAM,CAAC,QAAQ;QACvB,OAAO;YACL,IAAI,WAAW,QAAQ,MAAM,EAC3B,QAAQ,MAAM,CAAC,WAAW;QAE9B;IACF,GAAG;QAAC;QAAS,QAAQ,MAAM;QAAE,oBAAA,8BAAA,QAAS,UAAU;KAAC;IAEjD,OAAO;QACL,YAAY;YACV,gBAAgB,EAAC,oBAAA,8BAAA,QAAS,UAAU;QACtC;IACF;AACF","sources":["packages/@react-aria/overlays/src/useModal.tsx"],"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 {DOMAttributes} from '@react-types/shared';\nimport React, {AriaAttributes, ReactNode, useContext, useEffect, useMemo, useState} from 'react';\nimport ReactDOM from 'react-dom';\nimport {useIsSSR} from '@react-aria/ssr';\n\nexport interface ModalProviderProps extends DOMAttributes {\n children: ReactNode\n}\n\ninterface ModalContext {\n parent: ModalContext | null,\n modalCount: number,\n addModal: () => void,\n removeModal: () => void\n}\n\nconst Context = React.createContext<ModalContext | null>(null);\n\n/**\n * Each ModalProvider tracks how many modals are open in its subtree. On mount, the modals\n * trigger `addModal` to increment the count, and trigger `removeModal` on unmount to decrement it.\n * This is done recursively so that all parent providers are incremented and decremented.\n * If the modal count is greater than zero, we add `aria-hidden` to this provider to hide its\n * subtree from screen readers. This is done using React context in order to account for things\n * like portals, which can cause the React tree and the DOM tree to differ significantly in structure.\n */\nexport function ModalProvider(props: ModalProviderProps) {\n let {children} = props;\n let parent = useContext(Context);\n let [modalCount, setModalCount] = useState(0);\n let context = useMemo(() => ({\n parent,\n modalCount,\n addModal() {\n setModalCount(count => count + 1);\n if (parent) {\n parent.addModal();\n }\n },\n removeModal() {\n setModalCount(count => count - 1);\n if (parent) {\n parent.removeModal();\n }\n }\n }), [parent, modalCount]);\n\n return (\n <Context.Provider value={context}>\n {children}\n </Context.Provider>\n );\n}\n\nexport interface ModalProviderAria {\n /**\n * Props to be spread on the container element.\n */\n modalProviderProps: AriaAttributes\n}\n\n/**\n * Used to determine if the tree should be aria-hidden based on how many\n * modals are open.\n */\nexport function useModalProvider(): ModalProviderAria {\n let context = useContext(Context);\n return {\n modalProviderProps: {\n 'aria-hidden': context && context.modalCount > 0 ? true : undefined\n }\n };\n}\n\n/**\n * Creates a root node that will be aria-hidden if there are other modals open.\n */\nfunction OverlayContainerDOM(props: ModalProviderProps) {\n let {modalProviderProps} = useModalProvider();\n return <div data-overlay-container {...props} {...modalProviderProps} />;\n}\n\n/**\n * An OverlayProvider acts as a container for the top-level application.\n * Any application that uses modal dialogs or other overlays should\n * be wrapped in a `<OverlayProvider>`. This is used to ensure that\n * the main content of the application is hidden from screen readers\n * if a modal or other overlay is opened. Only the top-most modal or\n * overlay should be accessible at once.\n */\nexport function OverlayProvider(props: ModalProviderProps) {\n return (\n <ModalProvider>\n <OverlayContainerDOM {...props} />\n </ModalProvider>\n );\n}\n\nexport interface OverlayContainerProps extends ModalProviderProps {\n /**\n * The container element in which the overlay portal will be placed.\n * @default document.body\n */\n portalContainer?: Element\n}\n\n/**\n * A container for overlays like modals and popovers. Renders the overlay\n * into a Portal which is placed at the end of the document body.\n * Also ensures that the overlay is hidden from screen readers if a\n * nested modal is opened. Only the top-most modal or overlay should\n * be accessible at once.\n */\nexport function OverlayContainer(props: OverlayContainerProps): React.ReactPortal | null {\n let isSSR = useIsSSR();\n let {portalContainer = isSSR ? null : document.body, ...rest} = props;\n\n React.useEffect(() => {\n if (portalContainer?.closest('[data-overlay-container]')) {\n throw new Error('An OverlayContainer must not be inside another container. Please change the portalContainer prop.');\n }\n }, [portalContainer]);\n\n if (!portalContainer) {\n return null;\n }\n\n let contents = <OverlayProvider {...rest} />;\n return ReactDOM.createPortal(contents, portalContainer);\n}\n\ninterface ModalAriaProps extends DOMAttributes {\n /** Data attribute marks the dom node as a modal for the aria-modal-polyfill. */\n 'data-ismodal': boolean\n}\n\nexport interface AriaModalOptions {\n isDisabled?: boolean\n}\n\nexport interface ModalAria {\n /** Props for the modal content element. */\n modalProps: ModalAriaProps\n}\n\n/**\n * Hides content outside the current `<OverlayContainer>` from screen readers\n * on mount and restores it on unmount. Typically used by modal dialogs and\n * other types of overlays to ensure that only the top-most modal is\n * accessible at once.\n */\nexport function useModal(options?: AriaModalOptions): ModalAria {\n // Add aria-hidden to all parent providers on mount, and restore on unmount.\n let context = useContext(Context);\n if (!context) {\n throw new Error('Modal is not contained within a provider');\n }\n\n useEffect(() => {\n if (options?.isDisabled || !context || !context.parent) {\n return;\n }\n\n // The immediate context is from the provider containing this modal, so we only\n // want to trigger aria-hidden on its parents not on the modal provider itself.\n context.parent.addModal();\n return () => {\n if (context && context.parent) {\n context.parent.removeModal();\n }\n };\n }, [context, context.parent, options?.isDisabled]);\n\n return {\n modalProps: {\n 'data-ismodal': !options?.isDisabled\n }\n };\n}\n"],"names":[],"version":3,"file":"useModal.module.js.map"}
|
|
@@ -38,7 +38,7 @@ function $11b7e0b04b421e95$export$dbc0f175b25fb0fb(props, state, ref) {
|
|
|
38
38
|
});
|
|
39
39
|
(0, $745edbb83ab4296f$exports.useOverlayFocusContain)();
|
|
40
40
|
(0, $9ziDi$react.useEffect)(()=>{
|
|
41
|
-
if (state.isOpen) return (0, $08ef1685902b6011$exports.ariaHideOutside)([
|
|
41
|
+
if (state.isOpen && ref.current) return (0, $08ef1685902b6011$exports.ariaHideOutside)([
|
|
42
42
|
ref.current
|
|
43
43
|
]);
|
|
44
44
|
}, [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAmCM,SAAS,0CAAgB,KAA4B,EAAE,KAA0B,EAAE,GAAkC;IAC1H,IAAI,gBAAC,YAAY,iBAAE,aAAa,EAAC,GAAG,CAAA,GAAA,oCAAS,EAAE;QAC7C,GAAG,KAAK;QACR,QAAQ,MAAM,MAAM;QACpB,SAAS,MAAM,KAAK;IACtB,GAAG;IAEH,CAAA,GAAA,0CAAe,EAAE;QACf,YAAY,CAAC,MAAM,MAAM;IAC3B;IAEA,CAAA,GAAA,gDAAqB;IAErB,CAAA,GAAA,sBAAQ,EAAE;QACR,IAAI,MAAM,MAAM,
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAmCM,SAAS,0CAAgB,KAA4B,EAAE,KAA0B,EAAE,GAAkC;IAC1H,IAAI,gBAAC,YAAY,iBAAE,aAAa,EAAC,GAAG,CAAA,GAAA,oCAAS,EAAE;QAC7C,GAAG,KAAK;QACR,QAAQ,MAAM,MAAM;QACpB,SAAS,MAAM,KAAK;IACtB,GAAG;IAEH,CAAA,GAAA,0CAAe,EAAE;QACf,YAAY,CAAC,MAAM,MAAM;IAC3B;IAEA,CAAA,GAAA,gDAAqB;IAErB,CAAA,GAAA,sBAAQ,EAAE;QACR,IAAI,MAAM,MAAM,IAAI,IAAI,OAAO,EAC7B,OAAO,CAAA,GAAA,yCAAc,EAAE;YAAC,IAAI,OAAO;SAAC;IAExC,GAAG;QAAC,MAAM,MAAM;QAAE;KAAI;IAEtB,OAAO;QACL,YAAY,CAAA,GAAA,gCAAS,EAAE;uBACvB;IACF;AACF","sources":["packages/@react-aria/overlays/src/useModalOverlay.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 {AriaOverlayProps, useOverlay} from './useOverlay';\nimport {DOMAttributes, RefObject} from '@react-types/shared';\nimport {mergeProps} from '@react-aria/utils';\nimport {OverlayTriggerState} from '@react-stately/overlays';\nimport {useEffect} from 'react';\nimport {useOverlayFocusContain} from './Overlay';\nimport {usePreventScroll} from './usePreventScroll';\n\nexport interface AriaModalOverlayProps extends Pick<AriaOverlayProps, 'shouldCloseOnInteractOutside'> {\n /**\n * Whether to close the modal when the user interacts outside it.\n * @default false\n */\n isDismissable?: boolean,\n /**\n * Whether pressing the escape key to close the modal should be disabled.\n * @default false\n */\n isKeyboardDismissDisabled?: boolean\n}\n\nexport interface ModalOverlayAria {\n /** Props for the modal element. */\n modalProps: DOMAttributes,\n /** Props for the underlay element. */\n underlayProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a modal component.\n * A modal is an overlay element which blocks interaction with elements outside it.\n */\nexport function useModalOverlay(props: AriaModalOverlayProps, state: OverlayTriggerState, ref: RefObject<HTMLElement | null>): ModalOverlayAria {\n let {overlayProps, underlayProps} = useOverlay({\n ...props,\n isOpen: state.isOpen,\n onClose: state.close\n }, ref);\n\n usePreventScroll({\n isDisabled: !state.isOpen\n });\n\n useOverlayFocusContain();\n\n useEffect(() => {\n if (state.isOpen && ref.current) {\n return ariaHideOutside([ref.current]);\n }\n }, [state.isOpen, ref]);\n\n return {\n modalProps: mergeProps(overlayProps),\n underlayProps\n };\n}\n"],"names":[],"version":3,"file":"useModalOverlay.main.js.map"}
|
package/dist/useModalOverlay.mjs
CHANGED
|
@@ -32,7 +32,7 @@ function $8ac8429251c45e4b$export$dbc0f175b25fb0fb(props, state, ref) {
|
|
|
32
32
|
});
|
|
33
33
|
(0, $337b884510726a0d$export$14c98a7594375490)();
|
|
34
34
|
(0, $7Dhkr$useEffect)(()=>{
|
|
35
|
-
if (state.isOpen) return (0, $5e3802645cc19319$export$1c3ebcada18427bf)([
|
|
35
|
+
if (state.isOpen && ref.current) return (0, $5e3802645cc19319$export$1c3ebcada18427bf)([
|
|
36
36
|
ref.current
|
|
37
37
|
]);
|
|
38
38
|
}, [
|
|
@@ -32,7 +32,7 @@ function $8ac8429251c45e4b$export$dbc0f175b25fb0fb(props, state, ref) {
|
|
|
32
32
|
});
|
|
33
33
|
(0, $337b884510726a0d$export$14c98a7594375490)();
|
|
34
34
|
(0, $7Dhkr$useEffect)(()=>{
|
|
35
|
-
if (state.isOpen) return (0, $5e3802645cc19319$export$1c3ebcada18427bf)([
|
|
35
|
+
if (state.isOpen && ref.current) return (0, $5e3802645cc19319$export$1c3ebcada18427bf)([
|
|
36
36
|
ref.current
|
|
37
37
|
]);
|
|
38
38
|
}, [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAmCM,SAAS,0CAAgB,KAA4B,EAAE,KAA0B,EAAE,GAAkC;IAC1H,IAAI,gBAAC,YAAY,iBAAE,aAAa,EAAC,GAAG,CAAA,GAAA,yCAAS,EAAE;QAC7C,GAAG,KAAK;QACR,QAAQ,MAAM,MAAM;QACpB,SAAS,MAAM,KAAK;IACtB,GAAG;IAEH,CAAA,GAAA,yCAAe,EAAE;QACf,YAAY,CAAC,MAAM,MAAM;IAC3B;IAEA,CAAA,GAAA,yCAAqB;IAErB,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,MAAM,MAAM,
|
|
1
|
+
{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAmCM,SAAS,0CAAgB,KAA4B,EAAE,KAA0B,EAAE,GAAkC;IAC1H,IAAI,gBAAC,YAAY,iBAAE,aAAa,EAAC,GAAG,CAAA,GAAA,yCAAS,EAAE;QAC7C,GAAG,KAAK;QACR,QAAQ,MAAM,MAAM;QACpB,SAAS,MAAM,KAAK;IACtB,GAAG;IAEH,CAAA,GAAA,yCAAe,EAAE;QACf,YAAY,CAAC,MAAM,MAAM;IAC3B;IAEA,CAAA,GAAA,yCAAqB;IAErB,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,MAAM,MAAM,IAAI,IAAI,OAAO,EAC7B,OAAO,CAAA,GAAA,yCAAc,EAAE;YAAC,IAAI,OAAO;SAAC;IAExC,GAAG;QAAC,MAAM,MAAM;QAAE;KAAI;IAEtB,OAAO;QACL,YAAY,CAAA,GAAA,iBAAS,EAAE;uBACvB;IACF;AACF","sources":["packages/@react-aria/overlays/src/useModalOverlay.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 {AriaOverlayProps, useOverlay} from './useOverlay';\nimport {DOMAttributes, RefObject} from '@react-types/shared';\nimport {mergeProps} from '@react-aria/utils';\nimport {OverlayTriggerState} from '@react-stately/overlays';\nimport {useEffect} from 'react';\nimport {useOverlayFocusContain} from './Overlay';\nimport {usePreventScroll} from './usePreventScroll';\n\nexport interface AriaModalOverlayProps extends Pick<AriaOverlayProps, 'shouldCloseOnInteractOutside'> {\n /**\n * Whether to close the modal when the user interacts outside it.\n * @default false\n */\n isDismissable?: boolean,\n /**\n * Whether pressing the escape key to close the modal should be disabled.\n * @default false\n */\n isKeyboardDismissDisabled?: boolean\n}\n\nexport interface ModalOverlayAria {\n /** Props for the modal element. */\n modalProps: DOMAttributes,\n /** Props for the underlay element. */\n underlayProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a modal component.\n * A modal is an overlay element which blocks interaction with elements outside it.\n */\nexport function useModalOverlay(props: AriaModalOverlayProps, state: OverlayTriggerState, ref: RefObject<HTMLElement | null>): ModalOverlayAria {\n let {overlayProps, underlayProps} = useOverlay({\n ...props,\n isOpen: state.isOpen,\n onClose: state.close\n }, ref);\n\n usePreventScroll({\n isDisabled: !state.isOpen\n });\n\n useOverlayFocusContain();\n\n useEffect(() => {\n if (state.isOpen && ref.current) {\n return ariaHideOutside([ref.current]);\n }\n }, [state.isOpen, ref]);\n\n return {\n modalProps: mergeProps(overlayProps),\n underlayProps\n };\n}\n"],"names":[],"version":3,"file":"useModalOverlay.module.js.map"}
|
package/dist/useOverlay.main.js
CHANGED
|
@@ -67,7 +67,7 @@ function $82711f9cb668ecdb$export$ea8f71083e90600f(props, ref) {
|
|
|
67
67
|
// Handle clicking outside the overlay to close it
|
|
68
68
|
(0, $eQbp7$reactariainteractions.useInteractOutside)({
|
|
69
69
|
ref: ref,
|
|
70
|
-
onInteractOutside: isDismissable && isOpen ? onInteractOutside :
|
|
70
|
+
onInteractOutside: isDismissable && isOpen ? onInteractOutside : undefined,
|
|
71
71
|
onInteractOutsideStart: onInteractOutsideStart
|
|
72
72
|
});
|
|
73
73
|
let { focusWithinProps: focusWithinProps } = (0, $eQbp7$reactariainteractions.useFocusWithin)({
|
|
@@ -83,7 +83,7 @@ function $82711f9cb668ecdb$export$ea8f71083e90600f(props, ref) {
|
|
|
83
83
|
// do not close the outer overlay. At this point, the active scope should
|
|
84
84
|
// still be the outer overlay, since blur events run before focus.
|
|
85
85
|
if (!e.relatedTarget || (0, $eQbp7$reactariafocus.isElementInChildOfActiveScope)(e.relatedTarget)) return;
|
|
86
|
-
if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.relatedTarget)) onClose();
|
|
86
|
+
if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.relatedTarget)) onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
87
87
|
}
|
|
88
88
|
});
|
|
89
89
|
let onPointerDownUnderlay = (e)=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;AA6CD,MAAM,wCAA+C,EAAE;AAOhD,SAAS,0CAAW,KAAuB,EAAE,GAA8B;IAChF,IAAI,WACF,OAAO,qBACP,iBAAiB,UACjB,MAAM,iBACN,gBAAgB,kCAChB,4BAA4B,qCAC5B,4BAA4B,EAC7B,GAAG;IAEJ,wFAAwF;IACxF,CAAA,GAAA,sBAAQ,EAAE;QACR,IAAI,QACF,sCAAgB,IAAI,CAAC;QAGvB,OAAO;YACL,IAAI,QAAQ,sCAAgB,OAAO,CAAC;YACpC,IAAI,SAAS,GACX,sCAAgB,MAAM,CAAC,OAAO;QAElC;IACF,GAAG;QAAC;QAAQ;KAAI;IAEhB,4EAA4E;IAC5E,IAAI,SAAS;QACX,IAAI,qCAAe,CAAC,sCAAgB,MAAM,GAAG,EAAE,KAAK,OAAO,SACzD;IAEJ;IAEA,IAAI,yBAAyB,CAAC;QAC5B,IAAI,CAAC,gCAAgC,6BAA6B,EAAE,MAAM,GACxE;YAAA,IAAI,qCAAe,CAAC,sCAAgB,MAAM,GAAG,EAAE,KAAK,KAAK;gBACvD,EAAE,eAAe;gBACjB,EAAE,cAAc;YAClB;QAAA;IAEJ;IAEA,IAAI,oBAAoB,CAAC;QACvB,IAAI,CAAC,gCAAgC,6BAA6B,EAAE,MAAM,GAAc;YACtF,IAAI,qCAAe,CAAC,sCAAgB,MAAM,GAAG,EAAE,KAAK,KAAK;gBACvD,EAAE,eAAe;gBACjB,EAAE,cAAc;YAClB;YACA;QACF;IACF;IAEA,wBAAwB;IACxB,IAAI,YAAY,CAAC;QACf,IAAI,EAAE,GAAG,KAAK,YAAY,CAAC,6BAA6B,CAAC,EAAE,WAAW,CAAC,WAAW,EAAE;YAClF,EAAE,eAAe;YACjB,EAAE,cAAc;YAChB;QACF;IACF;IAEA,kDAAkD;IAClD,CAAA,GAAA,+CAAiB,EAAE;aAAC;QAAK,mBAAmB,iBAAiB,SAAS,oBAAoB;
|
|
1
|
+
{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;AA6CD,MAAM,wCAA+C,EAAE;AAOhD,SAAS,0CAAW,KAAuB,EAAE,GAA8B;IAChF,IAAI,WACF,OAAO,qBACP,iBAAiB,UACjB,MAAM,iBACN,gBAAgB,kCAChB,4BAA4B,qCAC5B,4BAA4B,EAC7B,GAAG;IAEJ,wFAAwF;IACxF,CAAA,GAAA,sBAAQ,EAAE;QACR,IAAI,QACF,sCAAgB,IAAI,CAAC;QAGvB,OAAO;YACL,IAAI,QAAQ,sCAAgB,OAAO,CAAC;YACpC,IAAI,SAAS,GACX,sCAAgB,MAAM,CAAC,OAAO;QAElC;IACF,GAAG;QAAC;QAAQ;KAAI;IAEhB,4EAA4E;IAC5E,IAAI,SAAS;QACX,IAAI,qCAAe,CAAC,sCAAgB,MAAM,GAAG,EAAE,KAAK,OAAO,SACzD;IAEJ;IAEA,IAAI,yBAAyB,CAAC;QAC5B,IAAI,CAAC,gCAAgC,6BAA6B,EAAE,MAAM,GACxE;YAAA,IAAI,qCAAe,CAAC,sCAAgB,MAAM,GAAG,EAAE,KAAK,KAAK;gBACvD,EAAE,eAAe;gBACjB,EAAE,cAAc;YAClB;QAAA;IAEJ;IAEA,IAAI,oBAAoB,CAAC;QACvB,IAAI,CAAC,gCAAgC,6BAA6B,EAAE,MAAM,GAAc;YACtF,IAAI,qCAAe,CAAC,sCAAgB,MAAM,GAAG,EAAE,KAAK,KAAK;gBACvD,EAAE,eAAe;gBACjB,EAAE,cAAc;YAClB;YACA;QACF;IACF;IAEA,wBAAwB;IACxB,IAAI,YAAY,CAAC;QACf,IAAI,EAAE,GAAG,KAAK,YAAY,CAAC,6BAA6B,CAAC,EAAE,WAAW,CAAC,WAAW,EAAE;YAClF,EAAE,eAAe;YACjB,EAAE,cAAc;YAChB;QACF;IACF;IAEA,kDAAkD;IAClD,CAAA,GAAA,+CAAiB,EAAE;aAAC;QAAK,mBAAmB,iBAAiB,SAAS,oBAAoB;gCAAW;IAAsB;IAE3H,IAAI,oBAAC,gBAAgB,EAAC,GAAG,CAAA,GAAA,2CAAa,EAAE;QACtC,YAAY,CAAC;QACb,cAAc,CAAC;YACb,gFAAgF;YAChF,8GAA8G;YAC9G,6FAA6F;YAC7F,sDAAsD;YACtD,sDAAsD;YACtD,EAAE;YACF,2EAA2E;YAC3E,yEAAyE;YACzE,kEAAkE;YAClE,IAAI,CAAC,EAAE,aAAa,IAAI,CAAA,GAAA,mDAA4B,EAAE,EAAE,aAAa,GACnE;YAGF,IAAI,CAAC,gCAAgC,6BAA6B,EAAE,aAAa,GAC/E,oBAAA,8BAAA;QAEJ;IACF;IAEA,IAAI,wBAAwB,CAAA;QAC1B,wGAAwG;QACxG,IAAI,EAAE,MAAM,KAAK,EAAE,aAAa,EAC9B,EAAE,cAAc;IAEpB;IAEA,OAAO;QACL,cAAc;uBACZ;YACA,GAAG,gBAAgB;QACrB;QACA,eAAe;YACb,eAAe;QACjB;IACF;AACF","sources":["packages/@react-aria/overlays/src/useOverlay.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 {DOMAttributes, RefObject} from '@react-types/shared';\nimport {isElementInChildOfActiveScope} from '@react-aria/focus';\nimport {useEffect} from 'react';\nimport {useFocusWithin, useInteractOutside} from '@react-aria/interactions';\n\nexport interface AriaOverlayProps {\n /** Whether the overlay is currently open. */\n isOpen?: boolean,\n\n /** Handler that is called when the overlay should close. */\n onClose?: () => void,\n\n /**\n * Whether to close the overlay when the user interacts outside it.\n * @default false\n */\n isDismissable?: boolean,\n\n /** Whether the overlay should close when focus is lost or moves outside it. */\n shouldCloseOnBlur?: boolean,\n\n /**\n * Whether pressing the escape key to close the overlay should be disabled.\n * @default false\n */\n isKeyboardDismissDisabled?: boolean,\n\n /**\n * When user interacts with the argument element outside of the overlay 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 overlay.\n * By default, onClose will always be called on interaction outside the overlay ref.\n */\n shouldCloseOnInteractOutside?: (element: Element) => boolean\n}\n\nexport interface OverlayAria {\n /** Props to apply to the overlay container element. */\n overlayProps: DOMAttributes,\n /** Props to apply to the underlay element, if any. */\n underlayProps: DOMAttributes\n}\n\nconst visibleOverlays: RefObject<Element | null>[] = [];\n\n/**\n * Provides the behavior for overlays such as dialogs, popovers, and menus.\n * Hides the overlay when the user interacts outside it, when the Escape key is pressed,\n * or optionally, on blur. Only the top-most overlay will close at once.\n */\nexport function useOverlay(props: AriaOverlayProps, ref: RefObject<Element | null>): OverlayAria {\n let {\n onClose,\n shouldCloseOnBlur,\n isOpen,\n isDismissable = false,\n isKeyboardDismissDisabled = false,\n shouldCloseOnInteractOutside\n } = props;\n\n // Add the overlay ref to the stack of visible overlays on mount, and remove on unmount.\n useEffect(() => {\n if (isOpen) {\n visibleOverlays.push(ref);\n }\n\n return () => {\n let index = visibleOverlays.indexOf(ref);\n if (index >= 0) {\n visibleOverlays.splice(index, 1);\n }\n };\n }, [isOpen, ref]);\n\n // Only hide the overlay when it is the topmost visible overlay in the stack\n let onHide = () => {\n if (visibleOverlays[visibleOverlays.length - 1] === ref && onClose) {\n onClose();\n }\n };\n\n let onInteractOutsideStart = (e: PointerEvent) => {\n if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.target as Element)) {\n if (visibleOverlays[visibleOverlays.length - 1] === ref) {\n e.stopPropagation();\n e.preventDefault();\n }\n }\n };\n\n let onInteractOutside = (e: PointerEvent) => {\n if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.target as Element)) {\n if (visibleOverlays[visibleOverlays.length - 1] === ref) {\n e.stopPropagation();\n e.preventDefault();\n }\n onHide();\n }\n };\n\n // Handle the escape key\n let onKeyDown = (e) => {\n if (e.key === 'Escape' && !isKeyboardDismissDisabled && !e.nativeEvent.isComposing) {\n e.stopPropagation();\n e.preventDefault();\n onHide();\n }\n };\n\n // Handle clicking outside the overlay to close it\n useInteractOutside({ref, onInteractOutside: isDismissable && isOpen ? onInteractOutside : undefined, onInteractOutsideStart});\n\n let {focusWithinProps} = useFocusWithin({\n isDisabled: !shouldCloseOnBlur,\n onBlurWithin: (e) => {\n // Do not close if relatedTarget is null, which means focus is lost to the body.\n // That can happen when switching tabs, or due to a VoiceOver/Chrome bug with Control+Option+Arrow navigation.\n // Clicking on the body to close the overlay should already be handled by useInteractOutside.\n // https://github.com/adobe/react-spectrum/issues/4130\n // https://github.com/adobe/react-spectrum/issues/4922\n //\n // If focus is moving into a child focus scope (e.g. menu inside a dialog),\n // do not close the outer overlay. At this point, the active scope should\n // still be the outer overlay, since blur events run before focus.\n if (!e.relatedTarget || isElementInChildOfActiveScope(e.relatedTarget)) {\n return;\n }\n\n if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.relatedTarget as Element)) {\n onClose?.();\n }\n }\n });\n\n let onPointerDownUnderlay = e => {\n // fixes a firefox issue that starts text selection https://bugzilla.mozilla.org/show_bug.cgi?id=1675846\n if (e.target === e.currentTarget) {\n e.preventDefault();\n }\n };\n\n return {\n overlayProps: {\n onKeyDown,\n ...focusWithinProps\n },\n underlayProps: {\n onPointerDown: onPointerDownUnderlay\n }\n };\n}\n"],"names":[],"version":3,"file":"useOverlay.main.js.map"}
|
package/dist/useOverlay.mjs
CHANGED
|
@@ -61,7 +61,7 @@ function $a11501f3d1d39e6c$export$ea8f71083e90600f(props, ref) {
|
|
|
61
61
|
// Handle clicking outside the overlay to close it
|
|
62
62
|
(0, $jtpZv$useInteractOutside)({
|
|
63
63
|
ref: ref,
|
|
64
|
-
onInteractOutside: isDismissable && isOpen ? onInteractOutside :
|
|
64
|
+
onInteractOutside: isDismissable && isOpen ? onInteractOutside : undefined,
|
|
65
65
|
onInteractOutsideStart: onInteractOutsideStart
|
|
66
66
|
});
|
|
67
67
|
let { focusWithinProps: focusWithinProps } = (0, $jtpZv$useFocusWithin)({
|
|
@@ -77,7 +77,7 @@ function $a11501f3d1d39e6c$export$ea8f71083e90600f(props, ref) {
|
|
|
77
77
|
// do not close the outer overlay. At this point, the active scope should
|
|
78
78
|
// still be the outer overlay, since blur events run before focus.
|
|
79
79
|
if (!e.relatedTarget || (0, $jtpZv$isElementInChildOfActiveScope)(e.relatedTarget)) return;
|
|
80
|
-
if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.relatedTarget)) onClose();
|
|
80
|
+
if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.relatedTarget)) onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
81
81
|
}
|
|
82
82
|
});
|
|
83
83
|
let onPointerDownUnderlay = (e)=>{
|
|
@@ -61,7 +61,7 @@ function $a11501f3d1d39e6c$export$ea8f71083e90600f(props, ref) {
|
|
|
61
61
|
// Handle clicking outside the overlay to close it
|
|
62
62
|
(0, $jtpZv$useInteractOutside)({
|
|
63
63
|
ref: ref,
|
|
64
|
-
onInteractOutside: isDismissable && isOpen ? onInteractOutside :
|
|
64
|
+
onInteractOutside: isDismissable && isOpen ? onInteractOutside : undefined,
|
|
65
65
|
onInteractOutsideStart: onInteractOutsideStart
|
|
66
66
|
});
|
|
67
67
|
let { focusWithinProps: focusWithinProps } = (0, $jtpZv$useFocusWithin)({
|
|
@@ -77,7 +77,7 @@ function $a11501f3d1d39e6c$export$ea8f71083e90600f(props, ref) {
|
|
|
77
77
|
// do not close the outer overlay. At this point, the active scope should
|
|
78
78
|
// still be the outer overlay, since blur events run before focus.
|
|
79
79
|
if (!e.relatedTarget || (0, $jtpZv$isElementInChildOfActiveScope)(e.relatedTarget)) return;
|
|
80
|
-
if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.relatedTarget)) onClose();
|
|
80
|
+
if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.relatedTarget)) onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
81
81
|
}
|
|
82
82
|
});
|
|
83
83
|
let onPointerDownUnderlay = (e)=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;AAAA;;;;;;;;;;CAUC;;;AA6CD,MAAM,wCAA+C,EAAE;AAOhD,SAAS,0CAAW,KAAuB,EAAE,GAA8B;IAChF,IAAI,WACF,OAAO,qBACP,iBAAiB,UACjB,MAAM,iBACN,gBAAgB,kCAChB,4BAA4B,qCAC5B,4BAA4B,EAC7B,GAAG;IAEJ,wFAAwF;IACxF,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,QACF,sCAAgB,IAAI,CAAC;QAGvB,OAAO;YACL,IAAI,QAAQ,sCAAgB,OAAO,CAAC;YACpC,IAAI,SAAS,GACX,sCAAgB,MAAM,CAAC,OAAO;QAElC;IACF,GAAG;QAAC;QAAQ;KAAI;IAEhB,4EAA4E;IAC5E,IAAI,SAAS;QACX,IAAI,qCAAe,CAAC,sCAAgB,MAAM,GAAG,EAAE,KAAK,OAAO,SACzD;IAEJ;IAEA,IAAI,yBAAyB,CAAC;QAC5B,IAAI,CAAC,gCAAgC,6BAA6B,EAAE,MAAM,GACxE;YAAA,IAAI,qCAAe,CAAC,sCAAgB,MAAM,GAAG,EAAE,KAAK,KAAK;gBACvD,EAAE,eAAe;gBACjB,EAAE,cAAc;YAClB;QAAA;IAEJ;IAEA,IAAI,oBAAoB,CAAC;QACvB,IAAI,CAAC,gCAAgC,6BAA6B,EAAE,MAAM,GAAc;YACtF,IAAI,qCAAe,CAAC,sCAAgB,MAAM,GAAG,EAAE,KAAK,KAAK;gBACvD,EAAE,eAAe;gBACjB,EAAE,cAAc;YAClB;YACA;QACF;IACF;IAEA,wBAAwB;IACxB,IAAI,YAAY,CAAC;QACf,IAAI,EAAE,GAAG,KAAK,YAAY,CAAC,6BAA6B,CAAC,EAAE,WAAW,CAAC,WAAW,EAAE;YAClF,EAAE,eAAe;YACjB,EAAE,cAAc;YAChB;QACF;IACF;IAEA,kDAAkD;IAClD,CAAA,GAAA,yBAAiB,EAAE;aAAC;QAAK,mBAAmB,iBAAiB,SAAS,oBAAoB;
|
|
1
|
+
{"mappings":";;;;AAAA;;;;;;;;;;CAUC;;;AA6CD,MAAM,wCAA+C,EAAE;AAOhD,SAAS,0CAAW,KAAuB,EAAE,GAA8B;IAChF,IAAI,WACF,OAAO,qBACP,iBAAiB,UACjB,MAAM,iBACN,gBAAgB,kCAChB,4BAA4B,qCAC5B,4BAA4B,EAC7B,GAAG;IAEJ,wFAAwF;IACxF,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,QACF,sCAAgB,IAAI,CAAC;QAGvB,OAAO;YACL,IAAI,QAAQ,sCAAgB,OAAO,CAAC;YACpC,IAAI,SAAS,GACX,sCAAgB,MAAM,CAAC,OAAO;QAElC;IACF,GAAG;QAAC;QAAQ;KAAI;IAEhB,4EAA4E;IAC5E,IAAI,SAAS;QACX,IAAI,qCAAe,CAAC,sCAAgB,MAAM,GAAG,EAAE,KAAK,OAAO,SACzD;IAEJ;IAEA,IAAI,yBAAyB,CAAC;QAC5B,IAAI,CAAC,gCAAgC,6BAA6B,EAAE,MAAM,GACxE;YAAA,IAAI,qCAAe,CAAC,sCAAgB,MAAM,GAAG,EAAE,KAAK,KAAK;gBACvD,EAAE,eAAe;gBACjB,EAAE,cAAc;YAClB;QAAA;IAEJ;IAEA,IAAI,oBAAoB,CAAC;QACvB,IAAI,CAAC,gCAAgC,6BAA6B,EAAE,MAAM,GAAc;YACtF,IAAI,qCAAe,CAAC,sCAAgB,MAAM,GAAG,EAAE,KAAK,KAAK;gBACvD,EAAE,eAAe;gBACjB,EAAE,cAAc;YAClB;YACA;QACF;IACF;IAEA,wBAAwB;IACxB,IAAI,YAAY,CAAC;QACf,IAAI,EAAE,GAAG,KAAK,YAAY,CAAC,6BAA6B,CAAC,EAAE,WAAW,CAAC,WAAW,EAAE;YAClF,EAAE,eAAe;YACjB,EAAE,cAAc;YAChB;QACF;IACF;IAEA,kDAAkD;IAClD,CAAA,GAAA,yBAAiB,EAAE;aAAC;QAAK,mBAAmB,iBAAiB,SAAS,oBAAoB;gCAAW;IAAsB;IAE3H,IAAI,oBAAC,gBAAgB,EAAC,GAAG,CAAA,GAAA,qBAAa,EAAE;QACtC,YAAY,CAAC;QACb,cAAc,CAAC;YACb,gFAAgF;YAChF,8GAA8G;YAC9G,6FAA6F;YAC7F,sDAAsD;YACtD,sDAAsD;YACtD,EAAE;YACF,2EAA2E;YAC3E,yEAAyE;YACzE,kEAAkE;YAClE,IAAI,CAAC,EAAE,aAAa,IAAI,CAAA,GAAA,oCAA4B,EAAE,EAAE,aAAa,GACnE;YAGF,IAAI,CAAC,gCAAgC,6BAA6B,EAAE,aAAa,GAC/E,oBAAA,8BAAA;QAEJ;IACF;IAEA,IAAI,wBAAwB,CAAA;QAC1B,wGAAwG;QACxG,IAAI,EAAE,MAAM,KAAK,EAAE,aAAa,EAC9B,EAAE,cAAc;IAEpB;IAEA,OAAO;QACL,cAAc;uBACZ;YACA,GAAG,gBAAgB;QACrB;QACA,eAAe;YACb,eAAe;QACjB;IACF;AACF","sources":["packages/@react-aria/overlays/src/useOverlay.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 {DOMAttributes, RefObject} from '@react-types/shared';\nimport {isElementInChildOfActiveScope} from '@react-aria/focus';\nimport {useEffect} from 'react';\nimport {useFocusWithin, useInteractOutside} from '@react-aria/interactions';\n\nexport interface AriaOverlayProps {\n /** Whether the overlay is currently open. */\n isOpen?: boolean,\n\n /** Handler that is called when the overlay should close. */\n onClose?: () => void,\n\n /**\n * Whether to close the overlay when the user interacts outside it.\n * @default false\n */\n isDismissable?: boolean,\n\n /** Whether the overlay should close when focus is lost or moves outside it. */\n shouldCloseOnBlur?: boolean,\n\n /**\n * Whether pressing the escape key to close the overlay should be disabled.\n * @default false\n */\n isKeyboardDismissDisabled?: boolean,\n\n /**\n * When user interacts with the argument element outside of the overlay 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 overlay.\n * By default, onClose will always be called on interaction outside the overlay ref.\n */\n shouldCloseOnInteractOutside?: (element: Element) => boolean\n}\n\nexport interface OverlayAria {\n /** Props to apply to the overlay container element. */\n overlayProps: DOMAttributes,\n /** Props to apply to the underlay element, if any. */\n underlayProps: DOMAttributes\n}\n\nconst visibleOverlays: RefObject<Element | null>[] = [];\n\n/**\n * Provides the behavior for overlays such as dialogs, popovers, and menus.\n * Hides the overlay when the user interacts outside it, when the Escape key is pressed,\n * or optionally, on blur. Only the top-most overlay will close at once.\n */\nexport function useOverlay(props: AriaOverlayProps, ref: RefObject<Element | null>): OverlayAria {\n let {\n onClose,\n shouldCloseOnBlur,\n isOpen,\n isDismissable = false,\n isKeyboardDismissDisabled = false,\n shouldCloseOnInteractOutside\n } = props;\n\n // Add the overlay ref to the stack of visible overlays on mount, and remove on unmount.\n useEffect(() => {\n if (isOpen) {\n visibleOverlays.push(ref);\n }\n\n return () => {\n let index = visibleOverlays.indexOf(ref);\n if (index >= 0) {\n visibleOverlays.splice(index, 1);\n }\n };\n }, [isOpen, ref]);\n\n // Only hide the overlay when it is the topmost visible overlay in the stack\n let onHide = () => {\n if (visibleOverlays[visibleOverlays.length - 1] === ref && onClose) {\n onClose();\n }\n };\n\n let onInteractOutsideStart = (e: PointerEvent) => {\n if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.target as Element)) {\n if (visibleOverlays[visibleOverlays.length - 1] === ref) {\n e.stopPropagation();\n e.preventDefault();\n }\n }\n };\n\n let onInteractOutside = (e: PointerEvent) => {\n if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.target as Element)) {\n if (visibleOverlays[visibleOverlays.length - 1] === ref) {\n e.stopPropagation();\n e.preventDefault();\n }\n onHide();\n }\n };\n\n // Handle the escape key\n let onKeyDown = (e) => {\n if (e.key === 'Escape' && !isKeyboardDismissDisabled && !e.nativeEvent.isComposing) {\n e.stopPropagation();\n e.preventDefault();\n onHide();\n }\n };\n\n // Handle clicking outside the overlay to close it\n useInteractOutside({ref, onInteractOutside: isDismissable && isOpen ? onInteractOutside : undefined, onInteractOutsideStart});\n\n let {focusWithinProps} = useFocusWithin({\n isDisabled: !shouldCloseOnBlur,\n onBlurWithin: (e) => {\n // Do not close if relatedTarget is null, which means focus is lost to the body.\n // That can happen when switching tabs, or due to a VoiceOver/Chrome bug with Control+Option+Arrow navigation.\n // Clicking on the body to close the overlay should already be handled by useInteractOutside.\n // https://github.com/adobe/react-spectrum/issues/4130\n // https://github.com/adobe/react-spectrum/issues/4922\n //\n // If focus is moving into a child focus scope (e.g. menu inside a dialog),\n // do not close the outer overlay. At this point, the active scope should\n // still be the outer overlay, since blur events run before focus.\n if (!e.relatedTarget || isElementInChildOfActiveScope(e.relatedTarget)) {\n return;\n }\n\n if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.relatedTarget as Element)) {\n onClose?.();\n }\n }\n });\n\n let onPointerDownUnderlay = e => {\n // fixes a firefox issue that starts text selection https://bugzilla.mozilla.org/show_bug.cgi?id=1675846\n if (e.target === e.currentTarget) {\n e.preventDefault();\n }\n };\n\n return {\n overlayProps: {\n onKeyDown,\n ...focusWithinProps\n },\n underlayProps: {\n onPointerDown: onPointerDownUnderlay\n }\n };\n}\n"],"names":[],"version":3,"file":"useOverlay.module.js.map"}
|
|
@@ -25,18 +25,11 @@ $parcel$export(module.exports, "useOverlayPosition", () => $cd94b4896dd97759$exp
|
|
|
25
25
|
|
|
26
26
|
|
|
27
27
|
|
|
28
|
-
|
|
29
|
-
let $cd94b4896dd97759$var$visualViewport = typeof document !== 'undefined' && window.visualViewport;
|
|
28
|
+
let $cd94b4896dd97759$var$visualViewport = typeof document !== 'undefined' ? window.visualViewport : null;
|
|
30
29
|
function $cd94b4896dd97759$export$d39e1813b3bdd0e1(props) {
|
|
31
30
|
let { direction: direction } = (0, $6TXnl$reactariai18n.useLocale)();
|
|
32
31
|
let { arrowSize: arrowSize = 0, targetRef: targetRef, overlayRef: overlayRef, scrollRef: scrollRef = overlayRef, placement: placement = 'bottom', containerPadding: containerPadding = 12, shouldFlip: shouldFlip = true, boundaryElement: boundaryElement = typeof document !== 'undefined' ? document.body : null, offset: offset = 0, crossOffset: crossOffset = 0, shouldUpdatePosition: shouldUpdatePosition = true, isOpen: isOpen = true, onClose: onClose, maxHeight: maxHeight, arrowBoundaryOffset: arrowBoundaryOffset = 0 } = props;
|
|
33
|
-
let [position, setPosition] = (0, $6TXnl$react.useState)(
|
|
34
|
-
position: {},
|
|
35
|
-
arrowOffsetLeft: undefined,
|
|
36
|
-
arrowOffsetTop: undefined,
|
|
37
|
-
maxHeight: undefined,
|
|
38
|
-
placement: undefined
|
|
39
|
-
});
|
|
32
|
+
let [position, setPosition] = (0, $6TXnl$react.useState)(null);
|
|
40
33
|
let deps = [
|
|
41
34
|
shouldUpdatePosition,
|
|
42
35
|
placement,
|
|
@@ -72,17 +65,20 @@ function $cd94b4896dd97759$export$d39e1813b3bdd0e1(props) {
|
|
|
72
65
|
// changes, the focused element appears to stay in the same position.
|
|
73
66
|
let anchor = null;
|
|
74
67
|
if (scrollRef.current && scrollRef.current.contains(document.activeElement)) {
|
|
75
|
-
|
|
68
|
+
var _document_activeElement;
|
|
69
|
+
let anchorRect = (_document_activeElement = document.activeElement) === null || _document_activeElement === void 0 ? void 0 : _document_activeElement.getBoundingClientRect();
|
|
76
70
|
let scrollRect = scrollRef.current.getBoundingClientRect();
|
|
71
|
+
var _anchorRect_top;
|
|
77
72
|
// Anchor from the top if the offset is in the top half of the scrollable element,
|
|
78
73
|
// otherwise anchor from the bottom.
|
|
79
74
|
anchor = {
|
|
80
75
|
type: 'top',
|
|
81
|
-
offset: anchorRect.top - scrollRect.top
|
|
76
|
+
offset: ((_anchorRect_top = anchorRect === null || anchorRect === void 0 ? void 0 : anchorRect.top) !== null && _anchorRect_top !== void 0 ? _anchorRect_top : 0) - scrollRect.top
|
|
82
77
|
};
|
|
83
78
|
if (anchor.offset > scrollRect.height / 2) {
|
|
84
79
|
anchor.type = 'bottom';
|
|
85
|
-
|
|
80
|
+
var _anchorRect_bottom;
|
|
81
|
+
anchor.offset = ((_anchorRect_bottom = anchorRect === null || anchorRect === void 0 ? void 0 : anchorRect.bottom) !== null && _anchorRect_bottom !== void 0 ? _anchorRect_bottom : 0) - scrollRect.bottom;
|
|
86
82
|
}
|
|
87
83
|
}
|
|
88
84
|
// Always reset the overlay's previous max height if not defined by the user so that we can compensate for
|
|
@@ -109,6 +105,7 @@ function $cd94b4896dd97759$export$d39e1813b3bdd0e1(props) {
|
|
|
109
105
|
arrowSize: arrowSize,
|
|
110
106
|
arrowBoundaryOffset: arrowBoundaryOffset
|
|
111
107
|
});
|
|
108
|
+
if (!position.position) return;
|
|
112
109
|
// Modify overlay styles directly so positioning happens immediately without the need of a second render
|
|
113
110
|
// This is so we don't have to delay autoFocus scrolling or delay applying preventScroll for popovers
|
|
114
111
|
overlay.style.top = '';
|
|
@@ -116,9 +113,9 @@ function $cd94b4896dd97759$export$d39e1813b3bdd0e1(props) {
|
|
|
116
113
|
overlay.style.left = '';
|
|
117
114
|
overlay.style.right = '';
|
|
118
115
|
Object.keys(position.position).forEach((key)=>overlay.style[key] = position.position[key] + 'px');
|
|
119
|
-
overlay.style.maxHeight = position.maxHeight != null ? position.maxHeight + 'px' :
|
|
116
|
+
overlay.style.maxHeight = position.maxHeight != null ? position.maxHeight + 'px' : '';
|
|
120
117
|
// Restore scroll position relative to anchor element.
|
|
121
|
-
if (anchor) {
|
|
118
|
+
if (anchor && document.activeElement && scrollRef.current) {
|
|
122
119
|
let anchorRect = document.activeElement.getBoundingClientRect();
|
|
123
120
|
let scrollRect = scrollRef.current.getBoundingClientRect();
|
|
124
121
|
let newOffset = anchorRect[anchor.type] - scrollRect[anchor.type];
|
|
@@ -171,7 +168,7 @@ function $cd94b4896dd97759$export$d39e1813b3bdd0e1(props) {
|
|
|
171
168
|
updatePosition
|
|
172
169
|
]);
|
|
173
170
|
let close = (0, $6TXnl$react.useCallback)(()=>{
|
|
174
|
-
if (!isResizing.current) onClose();
|
|
171
|
+
if (!isResizing.current) onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
175
172
|
}, [
|
|
176
173
|
onClose,
|
|
177
174
|
isResizing
|
|
@@ -183,23 +180,23 @@ function $cd94b4896dd97759$export$d39e1813b3bdd0e1(props) {
|
|
|
183
180
|
isOpen: isOpen,
|
|
184
181
|
onClose: onClose && close
|
|
185
182
|
});
|
|
186
|
-
var _position_maxHeight;
|
|
183
|
+
var _position_maxHeight, _position_placement;
|
|
187
184
|
return {
|
|
188
185
|
overlayProps: {
|
|
189
186
|
style: {
|
|
190
187
|
position: 'absolute',
|
|
191
188
|
zIndex: 100000,
|
|
192
|
-
...position.position,
|
|
193
|
-
maxHeight: (_position_maxHeight = position.maxHeight) !== null && _position_maxHeight !== void 0 ? _position_maxHeight : '100vh'
|
|
189
|
+
...position === null || position === void 0 ? void 0 : position.position,
|
|
190
|
+
maxHeight: (_position_maxHeight = position === null || position === void 0 ? void 0 : position.maxHeight) !== null && _position_maxHeight !== void 0 ? _position_maxHeight : '100vh'
|
|
194
191
|
}
|
|
195
192
|
},
|
|
196
|
-
placement: position.placement,
|
|
193
|
+
placement: (_position_placement = position === null || position === void 0 ? void 0 : position.placement) !== null && _position_placement !== void 0 ? _position_placement : null,
|
|
197
194
|
arrowProps: {
|
|
198
195
|
'aria-hidden': 'true',
|
|
199
196
|
role: 'presentation',
|
|
200
197
|
style: {
|
|
201
|
-
left: position.arrowOffsetLeft,
|
|
202
|
-
top: position.arrowOffsetTop
|
|
198
|
+
left: position === null || position === void 0 ? void 0 : position.arrowOffsetLeft,
|
|
199
|
+
top: position === null || position === void 0 ? void 0 : position.arrowOffsetTop
|
|
203
200
|
}
|
|
204
201
|
},
|
|
205
202
|
updatePosition: updatePosition
|
|
@@ -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, 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.main.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 | null,\n /** Updates the position of the overlay. */\n updatePosition(): void\n}\n\ninterface ScrollAnchor {\n type: 'top' | 'bottom',\n offset: number\n}\n\nlet visualViewport = typeof document !== 'undefined' ? window.visualViewport : null;\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 | null>(null);\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 ?? 0) - scrollRect.top\n };\n if (anchor.offset > scrollRect.height / 2) {\n anchor.type = 'bottom';\n anchor.offset = (anchorRect?.bottom ?? 0) - 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 if (!position.position) {\n return;\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' : '';\n\n // Restore scroll position relative to anchor element.\n if (anchor && document.activeElement && scrollRef.current) {\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 ?? null,\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.main.js.map"}
|
|
@@ -19,18 +19,11 @@ import {useLocale as $39EOa$useLocale} from "@react-aria/i18n";
|
|
|
19
19
|
|
|
20
20
|
|
|
21
21
|
|
|
22
|
-
|
|
23
|
-
let $2a41e45df1593e64$var$visualViewport = typeof document !== 'undefined' && window.visualViewport;
|
|
22
|
+
let $2a41e45df1593e64$var$visualViewport = typeof document !== 'undefined' ? window.visualViewport : null;
|
|
24
23
|
function $2a41e45df1593e64$export$d39e1813b3bdd0e1(props) {
|
|
25
24
|
let { direction: direction } = (0, $39EOa$useLocale)();
|
|
26
25
|
let { arrowSize: arrowSize = 0, targetRef: targetRef, overlayRef: overlayRef, scrollRef: scrollRef = overlayRef, placement: placement = 'bottom', containerPadding: containerPadding = 12, shouldFlip: shouldFlip = true, boundaryElement: boundaryElement = typeof document !== 'undefined' ? document.body : null, offset: offset = 0, crossOffset: crossOffset = 0, shouldUpdatePosition: shouldUpdatePosition = true, isOpen: isOpen = true, onClose: onClose, maxHeight: maxHeight, arrowBoundaryOffset: arrowBoundaryOffset = 0 } = props;
|
|
27
|
-
let [position, setPosition] = (0, $39EOa$useState)(
|
|
28
|
-
position: {},
|
|
29
|
-
arrowOffsetLeft: undefined,
|
|
30
|
-
arrowOffsetTop: undefined,
|
|
31
|
-
maxHeight: undefined,
|
|
32
|
-
placement: undefined
|
|
33
|
-
});
|
|
26
|
+
let [position, setPosition] = (0, $39EOa$useState)(null);
|
|
34
27
|
let deps = [
|
|
35
28
|
shouldUpdatePosition,
|
|
36
29
|
placement,
|
|
@@ -66,17 +59,20 @@ function $2a41e45df1593e64$export$d39e1813b3bdd0e1(props) {
|
|
|
66
59
|
// changes, the focused element appears to stay in the same position.
|
|
67
60
|
let anchor = null;
|
|
68
61
|
if (scrollRef.current && scrollRef.current.contains(document.activeElement)) {
|
|
69
|
-
|
|
62
|
+
var _document_activeElement;
|
|
63
|
+
let anchorRect = (_document_activeElement = document.activeElement) === null || _document_activeElement === void 0 ? void 0 : _document_activeElement.getBoundingClientRect();
|
|
70
64
|
let scrollRect = scrollRef.current.getBoundingClientRect();
|
|
65
|
+
var _anchorRect_top;
|
|
71
66
|
// Anchor from the top if the offset is in the top half of the scrollable element,
|
|
72
67
|
// otherwise anchor from the bottom.
|
|
73
68
|
anchor = {
|
|
74
69
|
type: 'top',
|
|
75
|
-
offset: anchorRect.top - scrollRect.top
|
|
70
|
+
offset: ((_anchorRect_top = anchorRect === null || anchorRect === void 0 ? void 0 : anchorRect.top) !== null && _anchorRect_top !== void 0 ? _anchorRect_top : 0) - scrollRect.top
|
|
76
71
|
};
|
|
77
72
|
if (anchor.offset > scrollRect.height / 2) {
|
|
78
73
|
anchor.type = 'bottom';
|
|
79
|
-
|
|
74
|
+
var _anchorRect_bottom;
|
|
75
|
+
anchor.offset = ((_anchorRect_bottom = anchorRect === null || anchorRect === void 0 ? void 0 : anchorRect.bottom) !== null && _anchorRect_bottom !== void 0 ? _anchorRect_bottom : 0) - scrollRect.bottom;
|
|
80
76
|
}
|
|
81
77
|
}
|
|
82
78
|
// Always reset the overlay's previous max height if not defined by the user so that we can compensate for
|
|
@@ -103,6 +99,7 @@ function $2a41e45df1593e64$export$d39e1813b3bdd0e1(props) {
|
|
|
103
99
|
arrowSize: arrowSize,
|
|
104
100
|
arrowBoundaryOffset: arrowBoundaryOffset
|
|
105
101
|
});
|
|
102
|
+
if (!position.position) return;
|
|
106
103
|
// Modify overlay styles directly so positioning happens immediately without the need of a second render
|
|
107
104
|
// This is so we don't have to delay autoFocus scrolling or delay applying preventScroll for popovers
|
|
108
105
|
overlay.style.top = '';
|
|
@@ -110,9 +107,9 @@ function $2a41e45df1593e64$export$d39e1813b3bdd0e1(props) {
|
|
|
110
107
|
overlay.style.left = '';
|
|
111
108
|
overlay.style.right = '';
|
|
112
109
|
Object.keys(position.position).forEach((key)=>overlay.style[key] = position.position[key] + 'px');
|
|
113
|
-
overlay.style.maxHeight = position.maxHeight != null ? position.maxHeight + 'px' :
|
|
110
|
+
overlay.style.maxHeight = position.maxHeight != null ? position.maxHeight + 'px' : '';
|
|
114
111
|
// Restore scroll position relative to anchor element.
|
|
115
|
-
if (anchor) {
|
|
112
|
+
if (anchor && document.activeElement && scrollRef.current) {
|
|
116
113
|
let anchorRect = document.activeElement.getBoundingClientRect();
|
|
117
114
|
let scrollRect = scrollRef.current.getBoundingClientRect();
|
|
118
115
|
let newOffset = anchorRect[anchor.type] - scrollRect[anchor.type];
|
|
@@ -165,7 +162,7 @@ function $2a41e45df1593e64$export$d39e1813b3bdd0e1(props) {
|
|
|
165
162
|
updatePosition
|
|
166
163
|
]);
|
|
167
164
|
let close = (0, $39EOa$useCallback)(()=>{
|
|
168
|
-
if (!isResizing.current) onClose();
|
|
165
|
+
if (!isResizing.current) onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
169
166
|
}, [
|
|
170
167
|
onClose,
|
|
171
168
|
isResizing
|
|
@@ -177,23 +174,23 @@ function $2a41e45df1593e64$export$d39e1813b3bdd0e1(props) {
|
|
|
177
174
|
isOpen: isOpen,
|
|
178
175
|
onClose: onClose && close
|
|
179
176
|
});
|
|
180
|
-
var _position_maxHeight;
|
|
177
|
+
var _position_maxHeight, _position_placement;
|
|
181
178
|
return {
|
|
182
179
|
overlayProps: {
|
|
183
180
|
style: {
|
|
184
181
|
position: 'absolute',
|
|
185
182
|
zIndex: 100000,
|
|
186
|
-
...position.position,
|
|
187
|
-
maxHeight: (_position_maxHeight = position.maxHeight) !== null && _position_maxHeight !== void 0 ? _position_maxHeight : '100vh'
|
|
183
|
+
...position === null || position === void 0 ? void 0 : position.position,
|
|
184
|
+
maxHeight: (_position_maxHeight = position === null || position === void 0 ? void 0 : position.maxHeight) !== null && _position_maxHeight !== void 0 ? _position_maxHeight : '100vh'
|
|
188
185
|
}
|
|
189
186
|
},
|
|
190
|
-
placement: position.placement,
|
|
187
|
+
placement: (_position_placement = position === null || position === void 0 ? void 0 : position.placement) !== null && _position_placement !== void 0 ? _position_placement : null,
|
|
191
188
|
arrowProps: {
|
|
192
189
|
'aria-hidden': 'true',
|
|
193
190
|
role: 'presentation',
|
|
194
191
|
style: {
|
|
195
|
-
left: position.arrowOffsetLeft,
|
|
196
|
-
top: position.arrowOffsetTop
|
|
192
|
+
left: position === null || position === void 0 ? void 0 : position.arrowOffsetLeft,
|
|
193
|
+
top: position === null || position === void 0 ? void 0 : position.arrowOffsetTop
|
|
197
194
|
}
|
|
198
195
|
},
|
|
199
196
|
updatePosition: updatePosition
|