@depup/react-aria-components 1.19.0-depup.27 → 1.20.0-depup.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/PreviewTrigger/package.json +5 -0
- package/README.md +2 -2
- package/TokenField/package.json +5 -0
- package/changes.json +1 -1
- package/dist/exports/GridList.cjs.map +1 -1
- package/dist/exports/GridList.js.map +1 -1
- package/dist/exports/GridList.mjs.map +1 -1
- package/dist/exports/PreviewTrigger.cjs +26 -0
- package/dist/exports/PreviewTrigger.cjs.map +1 -0
- package/dist/exports/PreviewTrigger.js +21 -0
- package/dist/exports/PreviewTrigger.js.map +1 -0
- package/dist/exports/PreviewTrigger.mjs +21 -0
- package/dist/exports/PreviewTrigger.mjs.map +1 -0
- package/dist/exports/TokenField.cjs +31 -0
- package/dist/exports/TokenField.cjs.map +1 -0
- package/dist/exports/TokenField.js +21 -0
- package/dist/exports/TokenField.js.map +1 -0
- package/dist/exports/TokenField.mjs +21 -0
- package/dist/exports/TokenField.mjs.map +1 -0
- package/dist/exports/Tree.cjs.map +1 -1
- package/dist/exports/Tree.js.map +1 -1
- package/dist/exports/Tree.mjs.map +1 -1
- package/dist/exports/index.cjs +12 -0
- package/dist/exports/index.cjs.map +1 -1
- package/dist/exports/index.js +7 -1
- package/dist/exports/index.js.map +1 -1
- package/dist/exports/index.mjs +7 -1
- package/dist/exports/index.mjs.map +1 -1
- package/dist/private/Checkbox.cjs.map +1 -1
- package/dist/private/Checkbox.js.map +1 -1
- package/dist/private/Checkbox.mjs.map +1 -1
- package/dist/private/ComboBox.cjs +21 -2
- package/dist/private/ComboBox.cjs.map +1 -1
- package/dist/private/ComboBox.js +21 -2
- package/dist/private/ComboBox.js.map +1 -1
- package/dist/private/ComboBox.mjs +21 -2
- package/dist/private/ComboBox.mjs.map +1 -1
- package/dist/private/Dialog.cjs +15 -1
- package/dist/private/Dialog.cjs.map +1 -1
- package/dist/private/Dialog.js +15 -1
- package/dist/private/Dialog.js.map +1 -1
- package/dist/private/Dialog.mjs +15 -1
- package/dist/private/Dialog.mjs.map +1 -1
- package/dist/private/DragAndDrop.cjs +1 -0
- package/dist/private/DragAndDrop.cjs.map +1 -1
- package/dist/private/DragAndDrop.js +1 -0
- package/dist/private/DragAndDrop.js.map +1 -1
- package/dist/private/DragAndDrop.mjs +1 -0
- package/dist/private/DragAndDrop.mjs.map +1 -1
- package/dist/private/DropZone.cjs +5 -2
- package/dist/private/DropZone.cjs.map +1 -1
- package/dist/private/DropZone.js +5 -3
- package/dist/private/DropZone.js.map +1 -1
- package/dist/private/DropZone.mjs +5 -2
- package/dist/private/DropZone.mjs.map +1 -1
- package/dist/private/FileTrigger.cjs +1 -0
- package/dist/private/FileTrigger.cjs.map +1 -1
- package/dist/private/FileTrigger.js +1 -0
- package/dist/private/FileTrigger.js.map +1 -1
- package/dist/private/FileTrigger.mjs +1 -0
- package/dist/private/FileTrigger.mjs.map +1 -1
- package/dist/private/GridLayout.cjs +3 -1
- package/dist/private/GridLayout.cjs.map +1 -1
- package/dist/private/GridLayout.js +3 -1
- package/dist/private/GridLayout.js.map +1 -1
- package/dist/private/GridLayout.mjs +3 -1
- package/dist/private/GridLayout.mjs.map +1 -1
- package/dist/private/GridList.cjs +12 -1
- package/dist/private/GridList.cjs.map +1 -1
- package/dist/private/GridList.js +12 -1
- package/dist/private/GridList.js.map +1 -1
- package/dist/private/GridList.mjs +12 -1
- package/dist/private/GridList.mjs.map +1 -1
- package/dist/private/ListBox.cjs +9 -1
- package/dist/private/ListBox.cjs.map +1 -1
- package/dist/private/ListBox.js +9 -1
- package/dist/private/ListBox.js.map +1 -1
- package/dist/private/ListBox.mjs +9 -1
- package/dist/private/ListBox.mjs.map +1 -1
- package/dist/private/Menu.cjs +4 -2
- package/dist/private/Menu.cjs.map +1 -1
- package/dist/private/Menu.js +4 -2
- package/dist/private/Menu.js.map +1 -1
- package/dist/private/Menu.mjs +4 -2
- package/dist/private/Menu.mjs.map +1 -1
- package/dist/private/Meter.cjs +2 -1
- package/dist/private/Meter.cjs.map +1 -1
- package/dist/private/Meter.js +2 -1
- package/dist/private/Meter.js.map +1 -1
- package/dist/private/Meter.mjs +2 -1
- package/dist/private/Meter.mjs.map +1 -1
- package/dist/private/Modal.cjs +2 -0
- package/dist/private/Modal.cjs.map +1 -1
- package/dist/private/Modal.js +2 -0
- package/dist/private/Modal.js.map +1 -1
- package/dist/private/Modal.mjs +2 -0
- package/dist/private/Modal.mjs.map +1 -1
- package/dist/private/Popover.cjs +34 -9
- package/dist/private/Popover.cjs.map +1 -1
- package/dist/private/Popover.js +34 -9
- package/dist/private/Popover.js.map +1 -1
- package/dist/private/Popover.mjs +34 -9
- package/dist/private/Popover.mjs.map +1 -1
- package/dist/private/PreviewTrigger.cjs +88 -0
- package/dist/private/PreviewTrigger.cjs.map +1 -0
- package/dist/private/PreviewTrigger.js +80 -0
- package/dist/private/PreviewTrigger.js.map +1 -0
- package/dist/private/PreviewTrigger.mjs +79 -0
- package/dist/private/PreviewTrigger.mjs.map +1 -0
- package/dist/private/ProgressBar.cjs +6 -1
- package/dist/private/ProgressBar.cjs.map +1 -1
- package/dist/private/ProgressBar.js +6 -1
- package/dist/private/ProgressBar.js.map +1 -1
- package/dist/private/ProgressBar.mjs +6 -1
- package/dist/private/ProgressBar.mjs.map +1 -1
- package/dist/private/Select.cjs.map +1 -1
- package/dist/private/Select.js.map +1 -1
- package/dist/private/Select.mjs.map +1 -1
- package/dist/private/Table.cjs +26 -14
- package/dist/private/Table.cjs.map +1 -1
- package/dist/private/Table.js +26 -14
- package/dist/private/Table.js.map +1 -1
- package/dist/private/Table.mjs +26 -14
- package/dist/private/Table.mjs.map +1 -1
- package/dist/private/TableLayout.cjs +3 -1
- package/dist/private/TableLayout.cjs.map +1 -1
- package/dist/private/TableLayout.js +3 -1
- package/dist/private/TableLayout.js.map +1 -1
- package/dist/private/TableLayout.mjs +3 -1
- package/dist/private/TableLayout.mjs.map +1 -1
- package/dist/private/TagGroup.cjs +1 -0
- package/dist/private/TagGroup.cjs.map +1 -1
- package/dist/private/TagGroup.js +1 -0
- package/dist/private/TagGroup.js.map +1 -1
- package/dist/private/TagGroup.mjs +1 -0
- package/dist/private/TagGroup.mjs.map +1 -1
- package/dist/private/ToggleButton.cjs.map +1 -1
- package/dist/private/ToggleButton.js.map +1 -1
- package/dist/private/ToggleButton.mjs.map +1 -1
- package/dist/private/TokenField.cjs +207 -0
- package/dist/private/TokenField.cjs.map +1 -0
- package/dist/private/TokenField.js +197 -0
- package/dist/private/TokenField.js.map +1 -0
- package/dist/private/TokenField.mjs +195 -0
- package/dist/private/TokenField.mjs.map +1 -0
- package/dist/private/Tooltip.cjs +10 -2
- package/dist/private/Tooltip.cjs.map +1 -1
- package/dist/private/Tooltip.js +10 -2
- package/dist/private/Tooltip.js.map +1 -1
- package/dist/private/Tooltip.mjs +10 -2
- package/dist/private/Tooltip.mjs.map +1 -1
- package/dist/private/Tree.cjs +11 -1
- package/dist/private/Tree.cjs.map +1 -1
- package/dist/private/Tree.js +11 -1
- package/dist/private/Tree.js.map +1 -1
- package/dist/private/Tree.mjs +11 -1
- package/dist/private/Tree.mjs.map +1 -1
- package/dist/private/Virtualizer.cjs +18 -16
- package/dist/private/Virtualizer.cjs.map +1 -1
- package/dist/private/Virtualizer.js +18 -16
- package/dist/private/Virtualizer.js.map +1 -1
- package/dist/private/Virtualizer.mjs +18 -16
- package/dist/private/Virtualizer.mjs.map +1 -1
- package/dist/private/useDragAndDrop.cjs +7 -0
- package/dist/private/useDragAndDrop.cjs.map +1 -1
- package/dist/private/useDragAndDrop.js +7 -0
- package/dist/private/useDragAndDrop.js.map +1 -1
- package/dist/private/useDragAndDrop.mjs +7 -0
- package/dist/private/useDragAndDrop.mjs.map +1 -1
- package/dist/private/utils.cjs.map +1 -1
- package/dist/private/utils.js.map +1 -1
- package/dist/private/utils.mjs.map +1 -1
- package/dist/types/exports/GridList.d.ts +1 -1
- package/dist/types/exports/PreviewTrigger.d.ts +3 -0
- package/dist/types/exports/TokenField.d.ts +5 -0
- package/dist/types/exports/Tree.d.ts +1 -1
- package/dist/types/exports/index.d.ts +7 -2
- package/dist/types/src/ComboBox.d.ts +4 -1
- package/dist/types/src/GridList.d.ts +12 -1
- package/dist/types/src/ListBox.d.ts +1 -1
- package/dist/types/src/Popover.d.ts +7 -0
- package/dist/types/src/PreviewTrigger.d.ts +23 -0
- package/dist/types/src/Select.d.ts +1 -1
- package/dist/types/src/Table.d.ts +24 -0
- package/dist/types/src/TokenField.d.ts +111 -0
- package/dist/types/src/Tree.d.ts +7 -5
- package/dist/types/src/Virtualizer.d.ts +4 -0
- package/dist/types/src/utils.d.ts +19 -5
- package/i18n/ar-AE.js +1 -1
- package/i18n/ar-AE.mjs +1 -1
- package/i18n/bg-BG.js +1 -1
- package/i18n/bg-BG.mjs +1 -1
- package/i18n/cs-CZ.js +1 -1
- package/i18n/cs-CZ.mjs +1 -1
- package/i18n/da-DK.js +1 -1
- package/i18n/da-DK.mjs +1 -1
- package/i18n/de-DE.js +1 -1
- package/i18n/de-DE.mjs +1 -1
- package/i18n/el-GR.js +1 -1
- package/i18n/el-GR.mjs +1 -1
- package/i18n/en-US.js +1 -1
- package/i18n/en-US.mjs +1 -1
- package/i18n/es-ES.js +1 -1
- package/i18n/es-ES.mjs +1 -1
- package/i18n/et-EE.js +1 -1
- package/i18n/et-EE.mjs +1 -1
- package/i18n/fi-FI.js +1 -1
- package/i18n/fi-FI.mjs +1 -1
- package/i18n/fr-FR.js +1 -1
- package/i18n/fr-FR.mjs +1 -1
- package/i18n/he-IL.js +1 -1
- package/i18n/he-IL.mjs +1 -1
- package/i18n/hr-HR.js +1 -1
- package/i18n/hr-HR.mjs +1 -1
- package/i18n/hu-HU.js +1 -1
- package/i18n/hu-HU.mjs +1 -1
- package/i18n/it-IT.js +1 -1
- package/i18n/it-IT.mjs +1 -1
- package/i18n/ja-JP.js +1 -1
- package/i18n/ja-JP.mjs +1 -1
- package/i18n/ko-KR.js +1 -1
- package/i18n/ko-KR.mjs +1 -1
- package/i18n/lt-LT.js +1 -1
- package/i18n/lt-LT.mjs +1 -1
- package/i18n/lv-LV.js +1 -1
- package/i18n/lv-LV.mjs +1 -1
- package/i18n/nb-NO.js +1 -1
- package/i18n/nb-NO.mjs +1 -1
- package/i18n/nl-NL.js +1 -1
- package/i18n/nl-NL.mjs +1 -1
- package/i18n/pl-PL.js +1 -1
- package/i18n/pl-PL.mjs +1 -1
- package/i18n/pt-BR.js +1 -1
- package/i18n/pt-BR.mjs +1 -1
- package/i18n/pt-PT.js +1 -1
- package/i18n/pt-PT.mjs +1 -1
- package/i18n/ro-RO.js +1 -1
- package/i18n/ro-RO.mjs +1 -1
- package/i18n/ru-RU.js +1 -1
- package/i18n/ru-RU.mjs +1 -1
- package/i18n/sk-SK.js +1 -1
- package/i18n/sk-SK.mjs +1 -1
- package/i18n/sl-SI.js +1 -1
- package/i18n/sl-SI.mjs +1 -1
- package/i18n/sr-SP.js +1 -1
- package/i18n/sr-SP.mjs +1 -1
- package/i18n/sv-SE.js +1 -1
- package/i18n/sv-SE.mjs +1 -1
- package/i18n/tr-TR.js +1 -1
- package/i18n/tr-TR.mjs +1 -1
- package/i18n/uk-UA.js +1 -1
- package/i18n/uk-UA.mjs +1 -1
- package/i18n/zh-CN.js +1 -1
- package/i18n/zh-CN.mjs +1 -1
- package/i18n/zh-TW.js +1 -1
- package/i18n/zh-TW.mjs +1 -1
- package/package.json +32 -31
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/react-aria-components/src/Modal.tsx"],"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 {AriaModalOverlayProps, useModalOverlay} from 'react-aria/useModalOverlay';\n\nimport {\n ClassNameOrFunction,\n ContextValue,\n dom,\n Provider,\n RenderProps,\n SlotProps,\n useContextProps,\n useRenderProps\n} from './utils';\nimport {DismissButton, Overlay} from 'react-aria/Overlay';\nimport {DOMAttributes, forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {isScrollable} from 'react-aria/private/utils/isScrollable';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {mergeRefs} from 'react-aria/mergeRefs';\nimport {\n OverlayTriggerProps,\n OverlayTriggerState,\n useOverlayTriggerState\n} from 'react-stately/useOverlayTriggerState';\nimport {OverlayTriggerStateContext} from './Dialog';\nimport React, {createContext, ForwardedRef, forwardRef, useContext, useMemo, useRef} from 'react';\nimport {useEnterAnimation, useExitAnimation} from 'react-aria/private/utils/animation';\nimport {useIsSSR} from 'react-aria/SSRProvider';\nimport {useObjectRef} from 'react-aria/useObjectRef';\nimport {useViewportSize} from 'react-aria/private/utils/useViewportSize';\n\nexport interface ModalOverlayProps\n extends\n AriaModalOverlayProps,\n OverlayTriggerProps,\n RenderProps<ModalRenderProps>,\n SlotProps,\n GlobalDOMAttributes<HTMLDivElement> {\n /**\n * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the\n * element. A function may be provided to compute the class based on component state.\n *\n * @default 'react-aria-ModalOverlay'\n */\n className?: ClassNameOrFunction<ModalRenderProps>;\n /**\n * Whether the modal is currently performing an entry animation.\n */\n isEntering?: boolean;\n /**\n * Whether the modal is currently performing an exit animation.\n */\n isExiting?: boolean;\n /**\n * The container element in which the overlay portal will be placed. This may have unknown\n * behavior depending on where it is portalled to.\n *\n * @deprecated - Use a parent UNSAFE_PortalProvider to set your portal container instead.\n * @default document.body\n */\n UNSTABLE_portalContainer?: Element;\n}\n\ninterface InternalModalContextValue {\n modalProps: DOMAttributes;\n modalRef: RefObject<HTMLDivElement | null>;\n isExiting: boolean;\n isDismissable?: boolean;\n}\n\nexport const ModalContext = createContext<ContextValue<ModalOverlayProps, HTMLDivElement>>(null);\nconst InternalModalContext = createContext<InternalModalContextValue | null>(null);\n\nexport interface ModalRenderProps {\n /**\n * Whether the modal is currently entering. Use this to apply animations.\n *\n * @selector [data-entering]\n */\n isEntering: boolean;\n /**\n * Whether the modal is currently exiting. Use this to apply animations.\n *\n * @selector [data-exiting]\n */\n isExiting: boolean;\n /**\n * State of the modal.\n */\n state: OverlayTriggerState;\n}\n\n/**\n * A modal is an overlay element which blocks interaction with elements outside it.\n */\nexport const Modal = /*#__PURE__*/ (forwardRef as forwardRefType)(function Modal(\n props: ModalOverlayProps,\n ref: ForwardedRef<HTMLDivElement>\n) {\n let ctx = useContext(InternalModalContext);\n\n if (ctx) {\n if (\n process.env.NODE_ENV !== 'production' &&\n (props.onOpenChange || props.defaultOpen !== undefined || props.isOpen !== undefined)\n ) {\n // create a list of props that are passed in but not allowed when using an external ModalOverlay\n const invalidSet = new Set([\n 'isDismissable',\n 'isKeyboardDismissDisabled',\n 'isOpen',\n 'defaultOpen',\n 'onOpenChange',\n 'isEntering',\n 'isExiting',\n 'UNSTABLE_portalContainer',\n 'shouldCloseOnInteractOutside'\n ]);\n const invalidProps = Object.keys(props).filter(key => invalidSet.has(key));\n console.warn(\n `This modal is already wrapped in a ModalOverlay, props [${invalidProps.join(', ')}] should be placed on the ModalOverlay instead.`\n );\n }\n return (\n <ModalContent {...props} modalRef={ref}>\n {props.children}\n </ModalContent>\n );\n }\n\n let {\n isDismissable,\n isKeyboardDismissDisabled,\n isOpen,\n defaultOpen,\n onOpenChange,\n children,\n isEntering,\n isExiting,\n UNSTABLE_portalContainer,\n shouldCloseOnInteractOutside,\n ...otherProps\n } = props;\n\n return (\n <ModalOverlay\n isDismissable={isDismissable}\n isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n isOpen={isOpen}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n isEntering={isEntering}\n isExiting={isExiting}\n UNSTABLE_portalContainer={UNSTABLE_portalContainer}\n shouldCloseOnInteractOutside={shouldCloseOnInteractOutside}>\n <ModalContent {...otherProps} modalRef={ref}>\n {children}\n </ModalContent>\n </ModalOverlay>\n );\n});\n\ninterface ModalOverlayInnerProps extends ModalOverlayProps {\n overlayRef: RefObject<HTMLDivElement | null>;\n modalRef: RefObject<HTMLDivElement | null>;\n state: OverlayTriggerState;\n isExiting: boolean;\n}\n\nfunction ModalOverlayWithForwardRef(props: ModalOverlayProps, ref: ForwardedRef<HTMLDivElement>) {\n [props, ref] = useContextProps(props, ref, ModalContext);\n let contextState = useContext(OverlayTriggerStateContext);\n let localState = useOverlayTriggerState(props);\n let state =\n props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;\n if (state === contextState) {\n if (\n process.env.NODE_ENV !== 'production' &&\n (props.onOpenChange || props.defaultOpen !== undefined || props.isOpen !== undefined)\n ) {\n console.warn(\n 'This modals state is controlled by a trigger, place onOpenChange on the trigger instead.'\n );\n }\n }\n\n let objectRef = useObjectRef(ref);\n let modalRef = useRef<HTMLDivElement>(null);\n let isOverlayExiting = useExitAnimation(objectRef, state.isOpen);\n let isModalExiting = useExitAnimation(modalRef, state.isOpen);\n let isExiting = isOverlayExiting || isModalExiting || props.isExiting || false;\n let isSSR = useIsSSR();\n\n if ((!state.isOpen && !isExiting) || isSSR) {\n return null;\n }\n\n return (\n <ModalOverlayInner\n {...props}\n state={state}\n isExiting={isExiting}\n overlayRef={objectRef}\n modalRef={modalRef}\n />\n );\n}\n\n/**\n * A ModalOverlay is a wrapper for a Modal which allows customizing the backdrop element.\n */\nexport const ModalOverlay = /*#__PURE__*/ (forwardRef as forwardRefType)(\n ModalOverlayWithForwardRef\n);\n\nfunction ModalOverlayInner({UNSTABLE_portalContainer, ...props}: ModalOverlayInnerProps) {\n let modalRef = props.modalRef;\n let {state} = props;\n let {modalProps, underlayProps} = useModalOverlay(props, state, modalRef);\n\n let entering = useEnterAnimation(props.overlayRef) || props.isEntering || false;\n let renderProps = useRenderProps({\n ...props,\n defaultClassName: 'react-aria-ModalOverlay',\n values: {\n isEntering: entering,\n isExiting: props.isExiting,\n state\n }\n });\n\n let viewport = useViewportSize();\n let pageWidth: number | undefined = undefined;\n let pageHeight: number | undefined = undefined;\n if (typeof document !== 'undefined') {\n let scrollingElement = isScrollable(document.body)\n ? document.body\n : document.scrollingElement || document.documentElement;\n // Prevent Firefox from adding scrollbars when the page has a fractional width/height.\n let fractionalWidthDifference = scrollingElement.getBoundingClientRect().width % 1;\n let fractionalHeightDifference = scrollingElement.getBoundingClientRect().height % 1;\n pageWidth = scrollingElement.scrollWidth - fractionalWidthDifference;\n pageHeight = scrollingElement.scrollHeight - fractionalHeightDifference;\n }\n\n let style = {\n ...renderProps.style,\n '--visual-viewport-width': viewport.width + 'px',\n '--visual-viewport-height': viewport.height + 'px',\n '--page-width': pageWidth !== undefined ? pageWidth + 'px' : undefined,\n '--page-height': pageHeight !== undefined ? pageHeight + 'px' : undefined\n };\n\n return (\n <Overlay isExiting={props.isExiting} portalContainer={UNSTABLE_portalContainer}>\n <dom.div\n {...mergeProps(filterDOMProps(props, {global: true}), underlayProps)}\n {...renderProps}\n style={style}\n ref={props.overlayRef}\n data-entering={entering || undefined}\n data-exiting={props.isExiting || undefined}>\n <Provider\n values={[\n [\n InternalModalContext,\n {modalProps, modalRef, isExiting: props.isExiting, isDismissable: props.isDismissable}\n ],\n [OverlayTriggerStateContext, state]\n ]}>\n {renderProps.children}\n </Provider>\n </dom.div>\n </Overlay>\n );\n}\n\ninterface ModalContentProps\n extends RenderProps<ModalRenderProps>, GlobalDOMAttributes<HTMLDivElement> {\n /**\n * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the\n * element. A function may be provided to compute the class based on component state.\n *\n * @default 'react-aria-ModalContent'\n */\n className?: ClassNameOrFunction<ModalRenderProps>;\n modalRef: ForwardedRef<HTMLDivElement>;\n}\n\nfunction ModalContent(props: ModalContentProps) {\n let {modalProps, modalRef, isExiting, isDismissable} = useContext(InternalModalContext)!;\n let state = useContext(OverlayTriggerStateContext)!;\n let mergedRefs = useMemo(() => mergeRefs(props.modalRef, modalRef), [props.modalRef, modalRef]);\n\n let ref = useObjectRef(mergedRefs);\n let entering = useEnterAnimation(ref);\n let renderProps = useRenderProps({\n ...props,\n defaultClassName: 'react-aria-Modal',\n values: {\n isEntering: entering,\n isExiting,\n state\n }\n });\n\n return (\n <dom.div\n {...mergeProps(filterDOMProps(props, {global: true}), modalProps)}\n {...renderProps}\n ref={ref}\n data-entering={entering || undefined}\n data-exiting={isExiting || undefined}>\n {isDismissable && <DismissButton onDismiss={state.close} />}\n {renderProps.children}\n </dom.div>\n );\n}\n"],"names":[],"version":3,"file":"Modal.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/react-aria-components/src/Modal.tsx"],"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 {AriaModalOverlayProps, useModalOverlay} from 'react-aria/useModalOverlay';\n\nimport {\n ClassNameOrFunction,\n ContextValue,\n dom,\n Provider,\n RenderProps,\n SlotProps,\n useContextProps,\n useRenderProps\n} from './utils';\nimport {DismissButton, Overlay} from 'react-aria/Overlay';\nimport {DOMAttributes, forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {isScrollable} from 'react-aria/private/utils/isScrollable';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {mergeRefs} from 'react-aria/mergeRefs';\nimport {\n OverlayTriggerProps,\n OverlayTriggerState,\n useOverlayTriggerState\n} from 'react-stately/useOverlayTriggerState';\nimport {OverlayTriggerStateContext} from './Dialog';\nimport React, {createContext, ForwardedRef, forwardRef, useContext, useMemo, useRef} from 'react';\nimport {useEnterAnimation, useExitAnimation} from 'react-aria/private/utils/animation';\nimport {useIsSSR} from 'react-aria/SSRProvider';\nimport {useObjectRef} from 'react-aria/useObjectRef';\nimport {useViewportSize} from 'react-aria/private/utils/useViewportSize';\n\nexport interface ModalOverlayProps\n extends\n AriaModalOverlayProps,\n OverlayTriggerProps,\n RenderProps<ModalRenderProps>,\n SlotProps,\n GlobalDOMAttributes<HTMLDivElement> {\n /**\n * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the\n * element. A function may be provided to compute the class based on component state.\n *\n * @default 'react-aria-ModalOverlay'\n */\n className?: ClassNameOrFunction<ModalRenderProps>;\n /**\n * Whether the modal is currently performing an entry animation.\n */\n isEntering?: boolean;\n /**\n * Whether the modal is currently performing an exit animation.\n */\n isExiting?: boolean;\n /**\n * The container element in which the overlay portal will be placed. This may have unknown\n * behavior depending on where it is portalled to.\n *\n * @deprecated - Use a parent UNSAFE_PortalProvider to set your portal container instead.\n * @default document.body\n */\n UNSTABLE_portalContainer?: Element;\n}\n\ninterface InternalModalContextValue {\n modalProps: DOMAttributes;\n modalRef: RefObject<HTMLDivElement | null>;\n isExiting: boolean;\n isDismissable?: boolean;\n}\n\nexport const ModalContext = createContext<ContextValue<ModalOverlayProps, HTMLDivElement>>(null);\nconst InternalModalContext = createContext<InternalModalContextValue | null>(null);\n\nexport interface ModalRenderProps {\n /**\n * Whether the modal is currently entering. Use this to apply animations.\n *\n * @selector [data-entering]\n */\n isEntering: boolean;\n /**\n * Whether the modal is currently exiting. Use this to apply animations.\n *\n * @selector [data-exiting]\n */\n isExiting: boolean;\n /**\n * State of the modal.\n */\n state: OverlayTriggerState;\n}\n\n/**\n * A modal is an overlay element which blocks interaction with elements outside it.\n */\nexport const Modal = /*#__PURE__*/ (forwardRef as forwardRefType)(function Modal(\n props: ModalOverlayProps,\n ref: ForwardedRef<HTMLDivElement>\n) {\n let ctx = useContext(InternalModalContext);\n\n if (ctx) {\n if (\n process.env.NODE_ENV !== 'production' &&\n (props.onOpenChange || props.defaultOpen !== undefined || props.isOpen !== undefined)\n ) {\n // create a list of props that are passed in but not allowed when using an external ModalOverlay\n const invalidSet = new Set([\n 'isDismissable',\n 'isKeyboardDismissDisabled',\n 'isOpen',\n 'defaultOpen',\n 'onOpenChange',\n 'isEntering',\n 'isExiting',\n 'UNSTABLE_portalContainer',\n 'shouldCloseOnInteractOutside'\n ]);\n const invalidProps = Object.keys(props).filter(key => invalidSet.has(key));\n console.warn(\n `This modal is already wrapped in a ModalOverlay, props [${invalidProps.join(', ')}] should be placed on the ModalOverlay instead.`\n );\n }\n return (\n <ModalContent {...props} modalRef={ref}>\n {props.children}\n </ModalContent>\n );\n }\n\n let {\n isDismissable,\n isKeyboardDismissDisabled,\n isOpen,\n defaultOpen,\n onOpenChange,\n children,\n isEntering,\n isExiting,\n UNSTABLE_portalContainer,\n shouldCloseOnInteractOutside,\n ...otherProps\n } = props;\n\n return (\n <ModalOverlay\n isDismissable={isDismissable}\n isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n isOpen={isOpen}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n isEntering={isEntering}\n isExiting={isExiting}\n UNSTABLE_portalContainer={UNSTABLE_portalContainer}\n shouldCloseOnInteractOutside={shouldCloseOnInteractOutside}>\n <ModalContent {...otherProps} modalRef={ref}>\n {children}\n </ModalContent>\n </ModalOverlay>\n );\n});\n\ninterface ModalOverlayInnerProps extends ModalOverlayProps {\n overlayRef: RefObject<HTMLDivElement | null>;\n modalRef: RefObject<HTMLDivElement | null>;\n state: OverlayTriggerState;\n isExiting: boolean;\n}\n\nfunction ModalOverlayWithForwardRef(props: ModalOverlayProps, ref: ForwardedRef<HTMLDivElement>) {\n [props, ref] = useContextProps(props, ref, ModalContext);\n let contextState = useContext(OverlayTriggerStateContext);\n let localState = useOverlayTriggerState(props);\n let state =\n props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;\n if (state === contextState) {\n if (\n process.env.NODE_ENV !== 'production' &&\n (props.onOpenChange || props.defaultOpen !== undefined || props.isOpen !== undefined)\n ) {\n console.warn(\n 'This modals state is controlled by a trigger, place onOpenChange on the trigger instead.'\n );\n }\n }\n\n let objectRef = useObjectRef(ref);\n let modalRef = useRef<HTMLDivElement>(null);\n let isOverlayExiting = useExitAnimation(objectRef, state.isOpen);\n let isModalExiting = useExitAnimation(modalRef, state.isOpen);\n let isExiting = isOverlayExiting || isModalExiting || props.isExiting || false;\n let isSSR = useIsSSR();\n\n if ((!state.isOpen && !isExiting) || isSSR) {\n return null;\n }\n\n return (\n <ModalOverlayInner\n {...props}\n state={state}\n isExiting={isExiting}\n overlayRef={objectRef}\n modalRef={modalRef}\n />\n );\n}\n\n/**\n * A ModalOverlay is a wrapper for a Modal which allows customizing the backdrop element.\n */\nexport const ModalOverlay = /*#__PURE__*/ (forwardRef as forwardRefType)(\n ModalOverlayWithForwardRef\n);\n\nfunction ModalOverlayInner({UNSTABLE_portalContainer, ...props}: ModalOverlayInnerProps) {\n let modalRef = props.modalRef;\n let {state} = props;\n let {modalProps, underlayProps} = useModalOverlay(props, state, modalRef);\n\n let entering = useEnterAnimation(props.overlayRef) || props.isEntering || false;\n let renderProps = useRenderProps({\n ...props,\n defaultClassName: 'react-aria-ModalOverlay',\n values: {\n isEntering: entering,\n isExiting: props.isExiting,\n state\n }\n });\n\n let viewport = useViewportSize();\n let pageWidth: number | undefined = undefined;\n let pageHeight: number | undefined = undefined;\n if (typeof document !== 'undefined') {\n let scrollingElement = isScrollable(document.body)\n ? document.body\n : document.scrollingElement || document.documentElement;\n // Prevent Firefox from adding scrollbars when the page has a fractional width/height.\n let fractionalWidthDifference = scrollingElement.getBoundingClientRect().width % 1;\n let fractionalHeightDifference = scrollingElement.getBoundingClientRect().height % 1;\n pageWidth = scrollingElement.scrollWidth - fractionalWidthDifference;\n pageHeight = scrollingElement.scrollHeight - fractionalHeightDifference;\n }\n\n let style = {\n ...renderProps.style,\n '--visual-viewport-width': viewport.width + 'px',\n '--visual-viewport-height': viewport.height + 'px',\n '--page-width': pageWidth !== undefined ? pageWidth + 'px' : undefined,\n '--page-height': pageHeight !== undefined ? pageHeight + 'px' : undefined\n };\n\n // oxlint-disable react/react-compiler\n return (\n <Overlay isExiting={props.isExiting} portalContainer={UNSTABLE_portalContainer}>\n <dom.div\n {...mergeProps(filterDOMProps(props, {global: true}), underlayProps)}\n {...renderProps}\n style={style}\n ref={props.overlayRef}\n data-entering={entering || undefined}\n data-exiting={props.isExiting || undefined}>\n <Provider\n values={[\n [\n InternalModalContext,\n {modalProps, modalRef, isExiting: props.isExiting, isDismissable: props.isDismissable}\n ],\n [OverlayTriggerStateContext, state]\n ]}>\n {renderProps.children}\n </Provider>\n </dom.div>\n </Overlay>\n );\n // oxlint-enable react/react-compiler\n}\n\ninterface ModalContentProps\n extends RenderProps<ModalRenderProps>, GlobalDOMAttributes<HTMLDivElement> {\n /**\n * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the\n * element. A function may be provided to compute the class based on component state.\n *\n * @default 'react-aria-ModalContent'\n */\n className?: ClassNameOrFunction<ModalRenderProps>;\n modalRef: ForwardedRef<HTMLDivElement>;\n}\n\nfunction ModalContent(props: ModalContentProps) {\n let {modalProps, modalRef, isExiting, isDismissable} = useContext(InternalModalContext)!;\n let state = useContext(OverlayTriggerStateContext)!;\n let mergedRefs = useMemo(() => mergeRefs(props.modalRef, modalRef), [props.modalRef, modalRef]);\n\n let ref = useObjectRef(mergedRefs);\n let entering = useEnterAnimation(ref);\n let renderProps = useRenderProps({\n ...props,\n defaultClassName: 'react-aria-Modal',\n values: {\n isEntering: entering,\n isExiting,\n state\n }\n });\n\n return (\n <dom.div\n {...mergeProps(filterDOMProps(props, {global: true}), modalProps)}\n {...renderProps}\n ref={ref}\n data-entering={entering || undefined}\n data-exiting={isExiting || undefined}>\n {isDismissable && <DismissButton onDismiss={state.close} />}\n {renderProps.children}\n </dom.div>\n );\n}\n"],"names":[],"version":3,"file":"Modal.js.map"}
|
package/dist/private/Modal.mjs
CHANGED
|
@@ -135,6 +135,7 @@ function $8b8d26808cb8cb53$var$ModalOverlayInner({ UNSTABLE_portalContainer: UNS
|
|
|
135
135
|
'--page-width': pageWidth !== undefined ? pageWidth + 'px' : undefined,
|
|
136
136
|
'--page-height': pageHeight !== undefined ? pageHeight + 'px' : undefined
|
|
137
137
|
};
|
|
138
|
+
// oxlint-disable react/react-compiler
|
|
138
139
|
return /*#__PURE__*/ (0, $gJBoF$react).createElement((0, $gJBoF$Overlay), {
|
|
139
140
|
isExiting: props.isExiting,
|
|
140
141
|
portalContainer: UNSTABLE_portalContainer
|
|
@@ -164,6 +165,7 @@ function $8b8d26808cb8cb53$var$ModalOverlayInner({ UNSTABLE_portalContainer: UNS
|
|
|
164
165
|
]
|
|
165
166
|
]
|
|
166
167
|
}, renderProps.children)));
|
|
168
|
+
// oxlint-enable react/react-compiler
|
|
167
169
|
}
|
|
168
170
|
function $8b8d26808cb8cb53$var$ModalContent(props) {
|
|
169
171
|
let { modalProps: modalProps, modalRef: modalRef, isExiting: isExiting, isDismissable: isDismissable } = (0, $gJBoF$useContext)($8b8d26808cb8cb53$var$InternalModalContext);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/react-aria-components/src/Modal.tsx"],"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 {AriaModalOverlayProps, useModalOverlay} from 'react-aria/useModalOverlay';\n\nimport {\n ClassNameOrFunction,\n ContextValue,\n dom,\n Provider,\n RenderProps,\n SlotProps,\n useContextProps,\n useRenderProps\n} from './utils';\nimport {DismissButton, Overlay} from 'react-aria/Overlay';\nimport {DOMAttributes, forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {isScrollable} from 'react-aria/private/utils/isScrollable';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {mergeRefs} from 'react-aria/mergeRefs';\nimport {\n OverlayTriggerProps,\n OverlayTriggerState,\n useOverlayTriggerState\n} from 'react-stately/useOverlayTriggerState';\nimport {OverlayTriggerStateContext} from './Dialog';\nimport React, {createContext, ForwardedRef, forwardRef, useContext, useMemo, useRef} from 'react';\nimport {useEnterAnimation, useExitAnimation} from 'react-aria/private/utils/animation';\nimport {useIsSSR} from 'react-aria/SSRProvider';\nimport {useObjectRef} from 'react-aria/useObjectRef';\nimport {useViewportSize} from 'react-aria/private/utils/useViewportSize';\n\nexport interface ModalOverlayProps\n extends\n AriaModalOverlayProps,\n OverlayTriggerProps,\n RenderProps<ModalRenderProps>,\n SlotProps,\n GlobalDOMAttributes<HTMLDivElement> {\n /**\n * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the\n * element. A function may be provided to compute the class based on component state.\n *\n * @default 'react-aria-ModalOverlay'\n */\n className?: ClassNameOrFunction<ModalRenderProps>;\n /**\n * Whether the modal is currently performing an entry animation.\n */\n isEntering?: boolean;\n /**\n * Whether the modal is currently performing an exit animation.\n */\n isExiting?: boolean;\n /**\n * The container element in which the overlay portal will be placed. This may have unknown\n * behavior depending on where it is portalled to.\n *\n * @deprecated - Use a parent UNSAFE_PortalProvider to set your portal container instead.\n * @default document.body\n */\n UNSTABLE_portalContainer?: Element;\n}\n\ninterface InternalModalContextValue {\n modalProps: DOMAttributes;\n modalRef: RefObject<HTMLDivElement | null>;\n isExiting: boolean;\n isDismissable?: boolean;\n}\n\nexport const ModalContext = createContext<ContextValue<ModalOverlayProps, HTMLDivElement>>(null);\nconst InternalModalContext = createContext<InternalModalContextValue | null>(null);\n\nexport interface ModalRenderProps {\n /**\n * Whether the modal is currently entering. Use this to apply animations.\n *\n * @selector [data-entering]\n */\n isEntering: boolean;\n /**\n * Whether the modal is currently exiting. Use this to apply animations.\n *\n * @selector [data-exiting]\n */\n isExiting: boolean;\n /**\n * State of the modal.\n */\n state: OverlayTriggerState;\n}\n\n/**\n * A modal is an overlay element which blocks interaction with elements outside it.\n */\nexport const Modal = /*#__PURE__*/ (forwardRef as forwardRefType)(function Modal(\n props: ModalOverlayProps,\n ref: ForwardedRef<HTMLDivElement>\n) {\n let ctx = useContext(InternalModalContext);\n\n if (ctx) {\n if (\n process.env.NODE_ENV !== 'production' &&\n (props.onOpenChange || props.defaultOpen !== undefined || props.isOpen !== undefined)\n ) {\n // create a list of props that are passed in but not allowed when using an external ModalOverlay\n const invalidSet = new Set([\n 'isDismissable',\n 'isKeyboardDismissDisabled',\n 'isOpen',\n 'defaultOpen',\n 'onOpenChange',\n 'isEntering',\n 'isExiting',\n 'UNSTABLE_portalContainer',\n 'shouldCloseOnInteractOutside'\n ]);\n const invalidProps = Object.keys(props).filter(key => invalidSet.has(key));\n console.warn(\n `This modal is already wrapped in a ModalOverlay, props [${invalidProps.join(', ')}] should be placed on the ModalOverlay instead.`\n );\n }\n return (\n <ModalContent {...props} modalRef={ref}>\n {props.children}\n </ModalContent>\n );\n }\n\n let {\n isDismissable,\n isKeyboardDismissDisabled,\n isOpen,\n defaultOpen,\n onOpenChange,\n children,\n isEntering,\n isExiting,\n UNSTABLE_portalContainer,\n shouldCloseOnInteractOutside,\n ...otherProps\n } = props;\n\n return (\n <ModalOverlay\n isDismissable={isDismissable}\n isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n isOpen={isOpen}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n isEntering={isEntering}\n isExiting={isExiting}\n UNSTABLE_portalContainer={UNSTABLE_portalContainer}\n shouldCloseOnInteractOutside={shouldCloseOnInteractOutside}>\n <ModalContent {...otherProps} modalRef={ref}>\n {children}\n </ModalContent>\n </ModalOverlay>\n );\n});\n\ninterface ModalOverlayInnerProps extends ModalOverlayProps {\n overlayRef: RefObject<HTMLDivElement | null>;\n modalRef: RefObject<HTMLDivElement | null>;\n state: OverlayTriggerState;\n isExiting: boolean;\n}\n\nfunction ModalOverlayWithForwardRef(props: ModalOverlayProps, ref: ForwardedRef<HTMLDivElement>) {\n [props, ref] = useContextProps(props, ref, ModalContext);\n let contextState = useContext(OverlayTriggerStateContext);\n let localState = useOverlayTriggerState(props);\n let state =\n props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;\n if (state === contextState) {\n if (\n process.env.NODE_ENV !== 'production' &&\n (props.onOpenChange || props.defaultOpen !== undefined || props.isOpen !== undefined)\n ) {\n console.warn(\n 'This modals state is controlled by a trigger, place onOpenChange on the trigger instead.'\n );\n }\n }\n\n let objectRef = useObjectRef(ref);\n let modalRef = useRef<HTMLDivElement>(null);\n let isOverlayExiting = useExitAnimation(objectRef, state.isOpen);\n let isModalExiting = useExitAnimation(modalRef, state.isOpen);\n let isExiting = isOverlayExiting || isModalExiting || props.isExiting || false;\n let isSSR = useIsSSR();\n\n if ((!state.isOpen && !isExiting) || isSSR) {\n return null;\n }\n\n return (\n <ModalOverlayInner\n {...props}\n state={state}\n isExiting={isExiting}\n overlayRef={objectRef}\n modalRef={modalRef}\n />\n );\n}\n\n/**\n * A ModalOverlay is a wrapper for a Modal which allows customizing the backdrop element.\n */\nexport const ModalOverlay = /*#__PURE__*/ (forwardRef as forwardRefType)(\n ModalOverlayWithForwardRef\n);\n\nfunction ModalOverlayInner({UNSTABLE_portalContainer, ...props}: ModalOverlayInnerProps) {\n let modalRef = props.modalRef;\n let {state} = props;\n let {modalProps, underlayProps} = useModalOverlay(props, state, modalRef);\n\n let entering = useEnterAnimation(props.overlayRef) || props.isEntering || false;\n let renderProps = useRenderProps({\n ...props,\n defaultClassName: 'react-aria-ModalOverlay',\n values: {\n isEntering: entering,\n isExiting: props.isExiting,\n state\n }\n });\n\n let viewport = useViewportSize();\n let pageWidth: number | undefined = undefined;\n let pageHeight: number | undefined = undefined;\n if (typeof document !== 'undefined') {\n let scrollingElement = isScrollable(document.body)\n ? document.body\n : document.scrollingElement || document.documentElement;\n // Prevent Firefox from adding scrollbars when the page has a fractional width/height.\n let fractionalWidthDifference = scrollingElement.getBoundingClientRect().width % 1;\n let fractionalHeightDifference = scrollingElement.getBoundingClientRect().height % 1;\n pageWidth = scrollingElement.scrollWidth - fractionalWidthDifference;\n pageHeight = scrollingElement.scrollHeight - fractionalHeightDifference;\n }\n\n let style = {\n ...renderProps.style,\n '--visual-viewport-width': viewport.width + 'px',\n '--visual-viewport-height': viewport.height + 'px',\n '--page-width': pageWidth !== undefined ? pageWidth + 'px' : undefined,\n '--page-height': pageHeight !== undefined ? pageHeight + 'px' : undefined\n };\n\n return (\n <Overlay isExiting={props.isExiting} portalContainer={UNSTABLE_portalContainer}>\n <dom.div\n {...mergeProps(filterDOMProps(props, {global: true}), underlayProps)}\n {...renderProps}\n style={style}\n ref={props.overlayRef}\n data-entering={entering || undefined}\n data-exiting={props.isExiting || undefined}>\n <Provider\n values={[\n [\n InternalModalContext,\n {modalProps, modalRef, isExiting: props.isExiting, isDismissable: props.isDismissable}\n ],\n [OverlayTriggerStateContext, state]\n ]}>\n {renderProps.children}\n </Provider>\n </dom.div>\n </Overlay>\n );\n}\n\ninterface ModalContentProps\n extends RenderProps<ModalRenderProps>, GlobalDOMAttributes<HTMLDivElement> {\n /**\n * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the\n * element. A function may be provided to compute the class based on component state.\n *\n * @default 'react-aria-ModalContent'\n */\n className?: ClassNameOrFunction<ModalRenderProps>;\n modalRef: ForwardedRef<HTMLDivElement>;\n}\n\nfunction ModalContent(props: ModalContentProps) {\n let {modalProps, modalRef, isExiting, isDismissable} = useContext(InternalModalContext)!;\n let state = useContext(OverlayTriggerStateContext)!;\n let mergedRefs = useMemo(() => mergeRefs(props.modalRef, modalRef), [props.modalRef, modalRef]);\n\n let ref = useObjectRef(mergedRefs);\n let entering = useEnterAnimation(ref);\n let renderProps = useRenderProps({\n ...props,\n defaultClassName: 'react-aria-Modal',\n values: {\n isEntering: entering,\n isExiting,\n state\n }\n });\n\n return (\n <dom.div\n {...mergeProps(filterDOMProps(props, {global: true}), modalProps)}\n {...renderProps}\n ref={ref}\n data-entering={entering || undefined}\n data-exiting={isExiting || undefined}>\n {isDismissable && <DismissButton onDismiss={state.close} />}\n {renderProps.children}\n </dom.div>\n );\n}\n"],"names":[],"version":3,"file":"Modal.mjs.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/react-aria-components/src/Modal.tsx"],"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 {AriaModalOverlayProps, useModalOverlay} from 'react-aria/useModalOverlay';\n\nimport {\n ClassNameOrFunction,\n ContextValue,\n dom,\n Provider,\n RenderProps,\n SlotProps,\n useContextProps,\n useRenderProps\n} from './utils';\nimport {DismissButton, Overlay} from 'react-aria/Overlay';\nimport {DOMAttributes, forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {isScrollable} from 'react-aria/private/utils/isScrollable';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {mergeRefs} from 'react-aria/mergeRefs';\nimport {\n OverlayTriggerProps,\n OverlayTriggerState,\n useOverlayTriggerState\n} from 'react-stately/useOverlayTriggerState';\nimport {OverlayTriggerStateContext} from './Dialog';\nimport React, {createContext, ForwardedRef, forwardRef, useContext, useMemo, useRef} from 'react';\nimport {useEnterAnimation, useExitAnimation} from 'react-aria/private/utils/animation';\nimport {useIsSSR} from 'react-aria/SSRProvider';\nimport {useObjectRef} from 'react-aria/useObjectRef';\nimport {useViewportSize} from 'react-aria/private/utils/useViewportSize';\n\nexport interface ModalOverlayProps\n extends\n AriaModalOverlayProps,\n OverlayTriggerProps,\n RenderProps<ModalRenderProps>,\n SlotProps,\n GlobalDOMAttributes<HTMLDivElement> {\n /**\n * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the\n * element. A function may be provided to compute the class based on component state.\n *\n * @default 'react-aria-ModalOverlay'\n */\n className?: ClassNameOrFunction<ModalRenderProps>;\n /**\n * Whether the modal is currently performing an entry animation.\n */\n isEntering?: boolean;\n /**\n * Whether the modal is currently performing an exit animation.\n */\n isExiting?: boolean;\n /**\n * The container element in which the overlay portal will be placed. This may have unknown\n * behavior depending on where it is portalled to.\n *\n * @deprecated - Use a parent UNSAFE_PortalProvider to set your portal container instead.\n * @default document.body\n */\n UNSTABLE_portalContainer?: Element;\n}\n\ninterface InternalModalContextValue {\n modalProps: DOMAttributes;\n modalRef: RefObject<HTMLDivElement | null>;\n isExiting: boolean;\n isDismissable?: boolean;\n}\n\nexport const ModalContext = createContext<ContextValue<ModalOverlayProps, HTMLDivElement>>(null);\nconst InternalModalContext = createContext<InternalModalContextValue | null>(null);\n\nexport interface ModalRenderProps {\n /**\n * Whether the modal is currently entering. Use this to apply animations.\n *\n * @selector [data-entering]\n */\n isEntering: boolean;\n /**\n * Whether the modal is currently exiting. Use this to apply animations.\n *\n * @selector [data-exiting]\n */\n isExiting: boolean;\n /**\n * State of the modal.\n */\n state: OverlayTriggerState;\n}\n\n/**\n * A modal is an overlay element which blocks interaction with elements outside it.\n */\nexport const Modal = /*#__PURE__*/ (forwardRef as forwardRefType)(function Modal(\n props: ModalOverlayProps,\n ref: ForwardedRef<HTMLDivElement>\n) {\n let ctx = useContext(InternalModalContext);\n\n if (ctx) {\n if (\n process.env.NODE_ENV !== 'production' &&\n (props.onOpenChange || props.defaultOpen !== undefined || props.isOpen !== undefined)\n ) {\n // create a list of props that are passed in but not allowed when using an external ModalOverlay\n const invalidSet = new Set([\n 'isDismissable',\n 'isKeyboardDismissDisabled',\n 'isOpen',\n 'defaultOpen',\n 'onOpenChange',\n 'isEntering',\n 'isExiting',\n 'UNSTABLE_portalContainer',\n 'shouldCloseOnInteractOutside'\n ]);\n const invalidProps = Object.keys(props).filter(key => invalidSet.has(key));\n console.warn(\n `This modal is already wrapped in a ModalOverlay, props [${invalidProps.join(', ')}] should be placed on the ModalOverlay instead.`\n );\n }\n return (\n <ModalContent {...props} modalRef={ref}>\n {props.children}\n </ModalContent>\n );\n }\n\n let {\n isDismissable,\n isKeyboardDismissDisabled,\n isOpen,\n defaultOpen,\n onOpenChange,\n children,\n isEntering,\n isExiting,\n UNSTABLE_portalContainer,\n shouldCloseOnInteractOutside,\n ...otherProps\n } = props;\n\n return (\n <ModalOverlay\n isDismissable={isDismissable}\n isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n isOpen={isOpen}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n isEntering={isEntering}\n isExiting={isExiting}\n UNSTABLE_portalContainer={UNSTABLE_portalContainer}\n shouldCloseOnInteractOutside={shouldCloseOnInteractOutside}>\n <ModalContent {...otherProps} modalRef={ref}>\n {children}\n </ModalContent>\n </ModalOverlay>\n );\n});\n\ninterface ModalOverlayInnerProps extends ModalOverlayProps {\n overlayRef: RefObject<HTMLDivElement | null>;\n modalRef: RefObject<HTMLDivElement | null>;\n state: OverlayTriggerState;\n isExiting: boolean;\n}\n\nfunction ModalOverlayWithForwardRef(props: ModalOverlayProps, ref: ForwardedRef<HTMLDivElement>) {\n [props, ref] = useContextProps(props, ref, ModalContext);\n let contextState = useContext(OverlayTriggerStateContext);\n let localState = useOverlayTriggerState(props);\n let state =\n props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;\n if (state === contextState) {\n if (\n process.env.NODE_ENV !== 'production' &&\n (props.onOpenChange || props.defaultOpen !== undefined || props.isOpen !== undefined)\n ) {\n console.warn(\n 'This modals state is controlled by a trigger, place onOpenChange on the trigger instead.'\n );\n }\n }\n\n let objectRef = useObjectRef(ref);\n let modalRef = useRef<HTMLDivElement>(null);\n let isOverlayExiting = useExitAnimation(objectRef, state.isOpen);\n let isModalExiting = useExitAnimation(modalRef, state.isOpen);\n let isExiting = isOverlayExiting || isModalExiting || props.isExiting || false;\n let isSSR = useIsSSR();\n\n if ((!state.isOpen && !isExiting) || isSSR) {\n return null;\n }\n\n return (\n <ModalOverlayInner\n {...props}\n state={state}\n isExiting={isExiting}\n overlayRef={objectRef}\n modalRef={modalRef}\n />\n );\n}\n\n/**\n * A ModalOverlay is a wrapper for a Modal which allows customizing the backdrop element.\n */\nexport const ModalOverlay = /*#__PURE__*/ (forwardRef as forwardRefType)(\n ModalOverlayWithForwardRef\n);\n\nfunction ModalOverlayInner({UNSTABLE_portalContainer, ...props}: ModalOverlayInnerProps) {\n let modalRef = props.modalRef;\n let {state} = props;\n let {modalProps, underlayProps} = useModalOverlay(props, state, modalRef);\n\n let entering = useEnterAnimation(props.overlayRef) || props.isEntering || false;\n let renderProps = useRenderProps({\n ...props,\n defaultClassName: 'react-aria-ModalOverlay',\n values: {\n isEntering: entering,\n isExiting: props.isExiting,\n state\n }\n });\n\n let viewport = useViewportSize();\n let pageWidth: number | undefined = undefined;\n let pageHeight: number | undefined = undefined;\n if (typeof document !== 'undefined') {\n let scrollingElement = isScrollable(document.body)\n ? document.body\n : document.scrollingElement || document.documentElement;\n // Prevent Firefox from adding scrollbars when the page has a fractional width/height.\n let fractionalWidthDifference = scrollingElement.getBoundingClientRect().width % 1;\n let fractionalHeightDifference = scrollingElement.getBoundingClientRect().height % 1;\n pageWidth = scrollingElement.scrollWidth - fractionalWidthDifference;\n pageHeight = scrollingElement.scrollHeight - fractionalHeightDifference;\n }\n\n let style = {\n ...renderProps.style,\n '--visual-viewport-width': viewport.width + 'px',\n '--visual-viewport-height': viewport.height + 'px',\n '--page-width': pageWidth !== undefined ? pageWidth + 'px' : undefined,\n '--page-height': pageHeight !== undefined ? pageHeight + 'px' : undefined\n };\n\n // oxlint-disable react/react-compiler\n return (\n <Overlay isExiting={props.isExiting} portalContainer={UNSTABLE_portalContainer}>\n <dom.div\n {...mergeProps(filterDOMProps(props, {global: true}), underlayProps)}\n {...renderProps}\n style={style}\n ref={props.overlayRef}\n data-entering={entering || undefined}\n data-exiting={props.isExiting || undefined}>\n <Provider\n values={[\n [\n InternalModalContext,\n {modalProps, modalRef, isExiting: props.isExiting, isDismissable: props.isDismissable}\n ],\n [OverlayTriggerStateContext, state]\n ]}>\n {renderProps.children}\n </Provider>\n </dom.div>\n </Overlay>\n );\n // oxlint-enable react/react-compiler\n}\n\ninterface ModalContentProps\n extends RenderProps<ModalRenderProps>, GlobalDOMAttributes<HTMLDivElement> {\n /**\n * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the\n * element. A function may be provided to compute the class based on component state.\n *\n * @default 'react-aria-ModalContent'\n */\n className?: ClassNameOrFunction<ModalRenderProps>;\n modalRef: ForwardedRef<HTMLDivElement>;\n}\n\nfunction ModalContent(props: ModalContentProps) {\n let {modalProps, modalRef, isExiting, isDismissable} = useContext(InternalModalContext)!;\n let state = useContext(OverlayTriggerStateContext)!;\n let mergedRefs = useMemo(() => mergeRefs(props.modalRef, modalRef), [props.modalRef, modalRef]);\n\n let ref = useObjectRef(mergedRefs);\n let entering = useEnterAnimation(ref);\n let renderProps = useRenderProps({\n ...props,\n defaultClassName: 'react-aria-Modal',\n values: {\n isEntering: entering,\n isExiting,\n state\n }\n });\n\n return (\n <dom.div\n {...mergeProps(filterDOMProps(props, {global: true}), modalProps)}\n {...renderProps}\n ref={ref}\n data-entering={entering || undefined}\n data-exiting={isExiting || undefined}>\n {isDismissable && <DismissButton onDismiss={state.close} />}\n {renderProps.children}\n </dom.div>\n );\n}\n"],"names":[],"version":3,"file":"Modal.mjs.map"}
|
package/dist/private/Popover.cjs
CHANGED
|
@@ -62,7 +62,10 @@ const $74e35a768d38d46b$export$5b6b19405a83ff9d = /*#__PURE__*/ (0, $kmEDY$react
|
|
|
62
62
|
let contextState = (0, $kmEDY$react.useContext)((0, $88595bf043e542ec$exports.OverlayTriggerStateContext));
|
|
63
63
|
let localState = (0, $kmEDY$reactstatelyuseOverlayTriggerState.useOverlayTriggerState)(props);
|
|
64
64
|
let state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;
|
|
65
|
-
|
|
65
|
+
// Skip the automatic exit animation when closing instantly (e.g. swapping between previews
|
|
66
|
+
// during warmup). An explicitly provided isExiting prop still takes precedence.
|
|
67
|
+
let exitAnimation = (0, $kmEDY$reactariaprivateutilsanimation.useExitAnimation)(ref, state.isOpen);
|
|
68
|
+
let isExiting = props.isExiting || !props.shouldSkipAnimation && exitAnimation || false;
|
|
66
69
|
let isHidden = (0, $kmEDY$reactariaprivatecollectionsHidden.useIsHidden)();
|
|
67
70
|
let { direction: direction } = (0, $kmEDY$reactariaI18nProvider.useLocale)();
|
|
68
71
|
// If we are in a hidden tree, we still need to preserve our children.
|
|
@@ -103,21 +106,32 @@ function $74e35a768d38d46b$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
103
106
|
groupRef: isSubPopover ? groupCtx : containerRef
|
|
104
107
|
}, state);
|
|
105
108
|
let ref = props.popoverRef;
|
|
106
|
-
|
|
109
|
+
// Skip the automatic entry animation when opening instantly (e.g. swapping between previews
|
|
110
|
+
// during warmup). An explicitly provided isEntering prop still takes precedence.
|
|
111
|
+
let enterAnimation = (0, $kmEDY$reactariaprivateutilsanimation.useEnterAnimation)(ref, !!placement);
|
|
112
|
+
// oxlint-disable-next-line react/react-compiler
|
|
113
|
+
let isEntering = props.isEntering || !props.shouldSkipAnimation && enterAnimation || false;
|
|
114
|
+
// oxlint-disable-next-line react/react-compiler
|
|
107
115
|
let renderProps = (0, $048d76b84370f141$exports.useRenderProps)({
|
|
116
|
+
// oxlint-disable-next-line react/react-compiler
|
|
108
117
|
...props,
|
|
109
118
|
defaultClassName: 'react-aria-Popover',
|
|
119
|
+
// oxlint-disable-next-line react/react-compiler
|
|
110
120
|
values: {
|
|
121
|
+
// oxlint-disable-next-line react/react-compiler
|
|
111
122
|
trigger: props.trigger || null,
|
|
112
123
|
placement: placement,
|
|
113
|
-
isEntering:
|
|
124
|
+
isEntering: // oxlint-disable-next-line react/react-compiler
|
|
125
|
+
isEntering,
|
|
114
126
|
isExiting: isExiting
|
|
115
127
|
}
|
|
116
128
|
});
|
|
117
129
|
// Automatically render Popover with role=dialog except when isNonModal is true,
|
|
118
130
|
// or a dialog is already nested inside the popover.
|
|
119
|
-
let shouldBeDialog =
|
|
120
|
-
|
|
131
|
+
let shouldBeDialog = // oxlint-disable-next-line react/react-compiler
|
|
132
|
+
!props.isNonModal || props.trigger === 'SubmenuTrigger' || props.trigger === 'PreviewTrigger';
|
|
133
|
+
// oxlint-disable-next-line react/react-compiler
|
|
134
|
+
let [isDialog, setDialog] = (0, $kmEDY$react.useState)(props.trigger === 'PreviewTrigger');
|
|
121
135
|
(0, $kmEDY$reactariaprivateutilsuseLayoutEffect.useLayoutEffect)(()=>{
|
|
122
136
|
if (ref.current) setDialog(shouldBeDialog && !ref.current.querySelector('[role=dialog]'));
|
|
123
137
|
}, [
|
|
@@ -126,13 +140,15 @@ function $74e35a768d38d46b$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
126
140
|
]);
|
|
127
141
|
// Focus the popover itself on mount, unless a child element is already focused.
|
|
128
142
|
// Skip this for submenus since hovering a submenutrigger should keep focus on the trigger
|
|
143
|
+
// oxlint-disable react/react-compiler
|
|
129
144
|
(0, $kmEDY$react.useEffect)(()=>{
|
|
130
|
-
if (isDialog && (props.trigger !== 'SubmenuTrigger' || (0, $kmEDY$reactariaprivateinteractionsuseFocusVisible.getInteractionModality)() !== 'pointer') && ref.current && !(0, $kmEDY$reactariaprivateutilsshadowdomDOMFunctions.isFocusWithin)(ref.current)) (0, $kmEDY$reactariaprivateinteractionsfocusSafely.focusSafely)(ref.current);
|
|
145
|
+
if (isDialog && props.trigger !== 'PreviewTrigger' && (props.trigger !== 'SubmenuTrigger' || (0, $kmEDY$reactariaprivateinteractionsuseFocusVisible.getInteractionModality)() !== 'pointer') && ref.current && !(0, $kmEDY$reactariaprivateutilsshadowdomDOMFunctions.isFocusWithin)(ref.current)) (0, $kmEDY$reactariaprivateinteractionsfocusSafely.focusSafely)(ref.current);
|
|
131
146
|
}, [
|
|
132
147
|
isDialog,
|
|
133
148
|
ref,
|
|
134
149
|
props.trigger
|
|
135
150
|
]);
|
|
151
|
+
// oxlint-enable react/react-compiler
|
|
136
152
|
let children = (0, $kmEDY$react.useMemo)(()=>{
|
|
137
153
|
let children = renderProps.children;
|
|
138
154
|
if (clearContexts) for (let Context of clearContexts)children = /*#__PURE__*/ (0, ($parcel$interopDefault($kmEDY$react))).createElement(Context.Provider, {
|
|
@@ -144,6 +160,7 @@ function $74e35a768d38d46b$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
144
160
|
clearContexts
|
|
145
161
|
]);
|
|
146
162
|
let [triggerWidth, setTriggerWidth] = (0, $kmEDY$react.useState)(null);
|
|
163
|
+
// oxlint-disable-next-line react/react-compiler
|
|
147
164
|
let onResize = (0, $kmEDY$react.useCallback)(()=>{
|
|
148
165
|
if (props.triggerRef.current) setTriggerWidth(props.triggerRef.current.getBoundingClientRect().width + 'px');
|
|
149
166
|
}, [
|
|
@@ -152,7 +169,9 @@ function $74e35a768d38d46b$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
152
169
|
(0, $kmEDY$reactariaprivateutilsuseLayoutEffect.useLayoutEffect)(onResize, [
|
|
153
170
|
onResize
|
|
154
171
|
]);
|
|
172
|
+
// oxlint-disable-next-line react/react-compiler
|
|
155
173
|
(0, $kmEDY$reactariaprivateutilsuseResizeObserver.useResizeObserver)({
|
|
174
|
+
// oxlint-disable-next-line react/react-compiler
|
|
156
175
|
ref: renderProps.style?.['--trigger-width'] ? undefined : props.triggerRef,
|
|
157
176
|
onResize: onResize
|
|
158
177
|
});
|
|
@@ -162,11 +181,13 @@ function $74e35a768d38d46b$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
162
181
|
...renderProps.style,
|
|
163
182
|
'--trigger-width': renderProps.style?.['--trigger-width'] || triggerWidth
|
|
164
183
|
};
|
|
184
|
+
// oxlint-disable react/react-compiler
|
|
165
185
|
let overlay = /*#__PURE__*/ (0, ($parcel$interopDefault($kmEDY$react))).createElement((0, $048d76b84370f141$exports.dom).div, {
|
|
166
186
|
...(0, $kmEDY$reactariamergeProps.mergeProps)((0, $kmEDY$reactariafilterDOMProps.filterDOMProps)(props, {
|
|
167
187
|
global: true
|
|
168
188
|
}), popoverProps),
|
|
169
189
|
...renderProps,
|
|
190
|
+
id: isDialog ? props.id : undefined,
|
|
170
191
|
role: isDialog ? 'dialog' : undefined,
|
|
171
192
|
tabIndex: isDialog ? -1 : undefined,
|
|
172
193
|
"aria-label": props['aria-label'],
|
|
@@ -190,10 +211,12 @@ function $74e35a768d38d46b$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
190
211
|
}, children), /*#__PURE__*/ (0, ($parcel$interopDefault($kmEDY$react))).createElement((0, $kmEDY$reactariaOverlay.DismissButton), {
|
|
191
212
|
onDismiss: state.close
|
|
192
213
|
}));
|
|
214
|
+
// oxlint-enable react/react-compiler
|
|
193
215
|
// If this is a root popover, render an extra div to act as the portal container for submenus/subdialogs.
|
|
194
|
-
if (!isSubPopover)
|
|
216
|
+
if (!isSubPopover) // oxlint-disable react/react-compiler
|
|
217
|
+
return /*#__PURE__*/ (0, ($parcel$interopDefault($kmEDY$react))).createElement((0, $kmEDY$reactariaOverlay.Overlay), {
|
|
195
218
|
...props,
|
|
196
|
-
shouldContainFocus: isDialog,
|
|
219
|
+
shouldContainFocus: isDialog && props.trigger !== 'PreviewTrigger',
|
|
197
220
|
isExiting: isExiting,
|
|
198
221
|
portalContainer: UNSTABLE_portalContainer
|
|
199
222
|
}, !props.isNonModal && state.isOpen && /*#__PURE__*/ (0, ($parcel$interopDefault($kmEDY$react))).createElement("div", {
|
|
@@ -212,12 +235,14 @@ function $74e35a768d38d46b$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
212
235
|
value: containerRef
|
|
213
236
|
}, overlay)));
|
|
214
237
|
// Submenus/subdialogs are mounted into the root popover's container.
|
|
238
|
+
// oxlint-disable react/react-compiler
|
|
215
239
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($kmEDY$react))).createElement((0, $kmEDY$reactariaOverlay.Overlay), {
|
|
216
240
|
...props,
|
|
217
|
-
shouldContainFocus: isDialog,
|
|
241
|
+
shouldContainFocus: isDialog && props.trigger !== 'PreviewTrigger',
|
|
218
242
|
isExiting: isExiting,
|
|
219
243
|
portalContainer: UNSTABLE_portalContainer ?? groupCtx?.current ?? undefined
|
|
220
244
|
}, overlay);
|
|
245
|
+
// oxlint-enable react/react-compiler
|
|
221
246
|
}
|
|
222
247
|
|
|
223
248
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/react-aria-components/src/Popover.tsx"],"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 {\n AriaLabelingProps,\n forwardRefType,\n GlobalDOMAttributes,\n RefObject\n} from '@react-types/shared';\nimport {AriaPopoverProps, usePopover} from 'react-aria/usePopover';\nimport {\n ClassNameOrFunction,\n ContextValue,\n dom,\n RenderProps,\n SlotProps,\n useContextProps,\n useRenderProps\n} from './utils';\nimport {DismissButton, Overlay} from 'react-aria/Overlay';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {focusSafely} from 'react-aria/private/interactions/focusSafely';\nimport {getInteractionModality} from 'react-aria/private/interactions/useFocusVisible';\nimport {isFocusWithin} from 'react-aria/private/utils/shadowdom/DOMFunctions';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {OverlayArrowContext} from './OverlayArrow';\nimport {\n OverlayTriggerProps,\n OverlayTriggerState,\n useOverlayTriggerState\n} from 'react-stately/useOverlayTriggerState';\nimport {OverlayTriggerStateContext} from './Dialog';\nimport {PlacementAxis, PositionProps} from 'react-aria/useOverlayPosition';\nimport React, {\n Context,\n createContext,\n ForwardedRef,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\nimport {useEnterAnimation, useExitAnimation} from 'react-aria/private/utils/animation';\nimport {useIsHidden} from 'react-aria/private/collections/Hidden';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\n\nexport interface PopoverProps\n extends\n Omit<PositionProps, 'isOpen'>,\n Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef' | 'groupRef' | 'offset' | 'arrowSize'>,\n OverlayTriggerProps,\n RenderProps<PopoverRenderProps>,\n SlotProps,\n AriaLabelingProps,\n GlobalDOMAttributes<HTMLDivElement> {\n /**\n * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the\n * element. A function may be provided to compute the class based on component state.\n *\n * @default 'react-aria-Popover'\n */\n className?: ClassNameOrFunction<PopoverRenderProps>;\n /**\n * The name of the component that triggered the popover. This is reflected on the element\n * as the `data-trigger` attribute, and can be used to provide specific\n * styles for the popover depending on which element triggered it.\n */\n trigger?: string;\n /**\n * The ref for the element which the popover positions itself with respect to.\n *\n * When used within a trigger component such as DialogTrigger, MenuTrigger, Select, etc.,\n * this is set automatically. It is only required when used standalone.\n */\n triggerRef?: RefObject<Element | null>;\n /**\n * Whether the popover is currently performing an entry animation.\n */\n isEntering?: boolean;\n /**\n * Whether the popover is currently performing an exit animation.\n */\n isExiting?: boolean;\n /**\n * The container element in which the overlay portal will be placed. This may have unknown\n * behavior depending on where it is portalled to.\n *\n * @deprecated - Use a parent UNSAFE_PortalProvider to set your portal container instead.\n * @default document.body\n */\n UNSTABLE_portalContainer?: Element;\n /**\n * The additional offset applied along the main axis between the element and its\n * anchor element.\n *\n * @default 8\n */\n offset?: number;\n}\n\nexport interface PopoverRenderProps {\n /**\n * The name of the component that triggered the popover, e.g. \"DialogTrigger\" or \"ComboBox\".\n *\n * @selector [data-trigger=\"...\"]\n */\n trigger: string | null;\n /**\n * The placement of the popover relative to the trigger.\n *\n * @selector [data-placement=\"left | right | top | bottom\"]\n */\n placement: PlacementAxis | null;\n /**\n * Whether the popover is currently entering. Use this to apply animations.\n *\n * @selector [data-entering]\n */\n isEntering: boolean;\n /**\n * Whether the popover is currently exiting. Use this to apply animations.\n *\n * @selector [data-exiting]\n */\n isExiting: boolean;\n}\n\ninterface PopoverContextValue extends PopoverProps {\n /** Contexts to clear. */\n clearContexts?: Context<any>[];\n}\n\nexport const PopoverContext = createContext<ContextValue<PopoverContextValue, HTMLElement>>(null);\n\n// Stores a ref for the portal container for a group of popovers (e.g. submenus).\nconst PopoverGroupContext = createContext<RefObject<Element | null> | null>(null);\n\n/**\n * A popover is an overlay element positioned relative to a trigger.\n */\nexport const Popover = /*#__PURE__*/ (forwardRef as forwardRefType)(function Popover(\n props: PopoverProps,\n ref: ForwardedRef<HTMLElement>\n) {\n [props, ref] = useContextProps(props, ref, PopoverContext);\n let contextState = useContext(OverlayTriggerStateContext);\n let localState = useOverlayTriggerState(props);\n let state =\n props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;\n let isExiting = useExitAnimation(ref, state.isOpen) || props.isExiting || false;\n let isHidden = useIsHidden();\n let {direction} = useLocale();\n\n // If we are in a hidden tree, we still need to preserve our children.\n if (isHidden) {\n let children = props.children;\n if (typeof children === 'function') {\n children = children({\n trigger: props.trigger || null,\n placement: 'bottom',\n isEntering: false,\n isExiting: false,\n defaultChildren: null\n });\n }\n\n return <>{children}</>;\n }\n\n if (state && !state.isOpen && !isExiting) {\n return null;\n }\n\n return (\n <PopoverInner\n {...props}\n triggerRef={props.triggerRef!}\n state={state}\n popoverRef={ref}\n isExiting={isExiting}\n dir={direction}\n />\n );\n});\n\ninterface PopoverInnerProps extends AriaPopoverProps, RenderProps<PopoverRenderProps>, SlotProps {\n state: OverlayTriggerState;\n isEntering?: boolean;\n isExiting: boolean;\n UNSTABLE_portalContainer?: Element;\n trigger?: string;\n dir?: 'ltr' | 'rtl';\n clearContexts?: Context<any>[];\n}\n\nfunction PopoverInner({\n state,\n isExiting,\n UNSTABLE_portalContainer,\n clearContexts,\n ...props\n}: PopoverInnerProps) {\n // Calculate the arrow size internally (and remove props.arrowSize from PopoverProps)\n // Referenced from: packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx\n let arrowRef = useRef<HTMLDivElement>(null);\n let containerRef = useRef<HTMLDivElement | null>(null);\n let groupCtx = useContext(PopoverGroupContext);\n let isSubPopover = groupCtx && props.trigger === 'SubmenuTrigger';\n\n let {popoverProps, underlayProps, arrowProps, placement, triggerAnchorPoint} = usePopover(\n {\n ...props,\n offset: props.offset ?? 8,\n arrowRef,\n // If this is a submenu/subdialog, use the root popover's container\n // to detect outside interaction and add aria-hidden.\n groupRef: isSubPopover ? groupCtx! : containerRef\n },\n state\n );\n\n let ref = props.popoverRef as RefObject<HTMLDivElement | null>;\n let isEntering = useEnterAnimation(ref, !!placement) || props.isEntering || false;\n let renderProps = useRenderProps({\n ...props,\n defaultClassName: 'react-aria-Popover',\n values: {\n trigger: props.trigger || null,\n placement,\n isEntering,\n isExiting\n }\n });\n\n // Automatically render Popover with role=dialog except when isNonModal is true,\n // or a dialog is already nested inside the popover.\n let shouldBeDialog = !props.isNonModal || props.trigger === 'SubmenuTrigger';\n let [isDialog, setDialog] = useState(false);\n useLayoutEffect(() => {\n if (ref.current) {\n setDialog(shouldBeDialog && !ref.current.querySelector('[role=dialog]'));\n }\n }, [ref, shouldBeDialog]);\n\n // Focus the popover itself on mount, unless a child element is already focused.\n // Skip this for submenus since hovering a submenutrigger should keep focus on the trigger\n useEffect(() => {\n if (\n isDialog &&\n (props.trigger !== 'SubmenuTrigger' || getInteractionModality() !== 'pointer') &&\n ref.current &&\n !isFocusWithin(ref.current)\n ) {\n focusSafely(ref.current);\n }\n }, [isDialog, ref, props.trigger]);\n\n let children = useMemo(() => {\n let children = renderProps.children;\n if (clearContexts) {\n for (let Context of clearContexts) {\n children = <Context.Provider value={null}>{children}</Context.Provider>;\n }\n }\n return children;\n }, [renderProps.children, clearContexts]);\n\n let [triggerWidth, setTriggerWidth] = useState<string | null>(null);\n let onResize = useCallback(() => {\n if (props.triggerRef.current) {\n setTriggerWidth(props.triggerRef.current.getBoundingClientRect().width + 'px');\n }\n }, [props.triggerRef]);\n\n useLayoutEffect(onResize, [onResize]);\n useResizeObserver({\n ref: renderProps.style?.['--trigger-width'] ? undefined : props.triggerRef,\n onResize: onResize\n });\n\n let style = {\n ...popoverProps.style,\n '--trigger-anchor-point': triggerAnchorPoint\n ? `${triggerAnchorPoint.x}px ${triggerAnchorPoint.y}px`\n : undefined,\n ...renderProps.style,\n '--trigger-width': renderProps.style?.['--trigger-width'] || triggerWidth\n };\n\n let overlay = (\n <dom.div\n {...mergeProps(filterDOMProps(props, {global: true}), popoverProps)}\n {...renderProps}\n role={isDialog ? 'dialog' : undefined}\n tabIndex={isDialog ? -1 : undefined}\n aria-label={props['aria-label']}\n aria-labelledby={props['aria-labelledby']}\n ref={ref}\n slot={props.slot || undefined}\n style={style}\n dir={props.dir}\n data-trigger={props.trigger}\n data-placement={placement}\n data-entering={isEntering || undefined}\n data-exiting={isExiting || undefined}>\n {!props.isNonModal && <DismissButton onDismiss={state.close} />}\n <OverlayArrowContext.Provider value={{...arrowProps, placement, ref: arrowRef}}>\n {children}\n </OverlayArrowContext.Provider>\n <DismissButton onDismiss={state.close} />\n </dom.div>\n );\n\n // If this is a root popover, render an extra div to act as the portal container for submenus/subdialogs.\n if (!isSubPopover) {\n return (\n <Overlay\n {...props}\n shouldContainFocus={isDialog}\n isExiting={isExiting}\n portalContainer={UNSTABLE_portalContainer}>\n {!props.isNonModal && state.isOpen && (\n <div data-testid=\"underlay\" {...underlayProps} style={{position: 'fixed', inset: 0}} />\n )}\n <div ref={containerRef} style={{display: 'contents'}}>\n <PopoverGroupContext.Provider value={containerRef}>\n {overlay}\n </PopoverGroupContext.Provider>\n </div>\n </Overlay>\n );\n }\n\n // Submenus/subdialogs are mounted into the root popover's container.\n return (\n <Overlay\n {...props}\n shouldContainFocus={isDialog}\n isExiting={isExiting}\n portalContainer={UNSTABLE_portalContainer ?? groupCtx?.current ?? undefined}>\n {overlay}\n </Overlay>\n );\n}\n"],"names":[],"version":3,"file":"Popover.cjs.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/react-aria-components/src/Popover.tsx"],"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 {\n AriaLabelingProps,\n forwardRefType,\n GlobalDOMAttributes,\n RefObject\n} from '@react-types/shared';\nimport {AriaPopoverProps, usePopover} from 'react-aria/usePopover';\nimport {\n ClassNameOrFunction,\n ContextValue,\n dom,\n RenderProps,\n SlotProps,\n useContextProps,\n useRenderProps\n} from './utils';\nimport {DismissButton, Overlay} from 'react-aria/Overlay';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {focusSafely} from 'react-aria/private/interactions/focusSafely';\nimport {getInteractionModality} from 'react-aria/private/interactions/useFocusVisible';\nimport {isFocusWithin} from 'react-aria/private/utils/shadowdom/DOMFunctions';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {OverlayArrowContext} from './OverlayArrow';\nimport {\n OverlayTriggerProps,\n OverlayTriggerState,\n useOverlayTriggerState\n} from 'react-stately/useOverlayTriggerState';\nimport {OverlayTriggerStateContext} from './Dialog';\nimport {PlacementAxis, PositionProps} from 'react-aria/useOverlayPosition';\nimport React, {\n Context,\n createContext,\n ForwardedRef,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\nimport {useEnterAnimation, useExitAnimation} from 'react-aria/private/utils/animation';\nimport {useIsHidden} from 'react-aria/private/collections/Hidden';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\n\nexport interface PopoverProps\n extends\n Omit<PositionProps, 'isOpen'>,\n Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef' | 'groupRef' | 'offset' | 'arrowSize'>,\n OverlayTriggerProps,\n RenderProps<PopoverRenderProps>,\n SlotProps,\n AriaLabelingProps,\n GlobalDOMAttributes<HTMLDivElement> {\n /**\n * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the\n * element. A function may be provided to compute the class based on component state.\n *\n * @default 'react-aria-Popover'\n */\n className?: ClassNameOrFunction<PopoverRenderProps>;\n /**\n * The name of the component that triggered the popover. This is reflected on the element\n * as the `data-trigger` attribute, and can be used to provide specific\n * styles for the popover depending on which element triggered it.\n */\n trigger?: string;\n /**\n * The ref for the element which the popover positions itself with respect to.\n *\n * When used within a trigger component such as DialogTrigger, MenuTrigger, Select, etc.,\n * this is set automatically. It is only required when used standalone.\n */\n triggerRef?: RefObject<Element | null>;\n /**\n * Whether the popover is currently performing an entry animation.\n */\n isEntering?: boolean;\n /**\n * Whether the popover is currently performing an exit animation.\n */\n isExiting?: boolean;\n /**\n * Whether the popover should appear and disappear without an entry or exit animation. This is\n * used by components such as PreviewTrigger to skip animations when quickly swapping between\n * overlays.\n */\n shouldSkipAnimation?: boolean;\n /**\n * The container element in which the overlay portal will be placed. This may have unknown\n * behavior depending on where it is portalled to.\n *\n * @deprecated - Use a parent UNSAFE_PortalProvider to set your portal container instead.\n * @default document.body\n */\n UNSTABLE_portalContainer?: Element;\n /**\n * The additional offset applied along the main axis between the element and its\n * anchor element.\n *\n * @default 8\n */\n offset?: number;\n}\n\nexport interface PopoverRenderProps {\n /**\n * The name of the component that triggered the popover, e.g. \"DialogTrigger\" or \"ComboBox\".\n *\n * @selector [data-trigger=\"...\"]\n */\n trigger: string | null;\n /**\n * The placement of the popover relative to the trigger.\n *\n * @selector [data-placement=\"left | right | top | bottom\"]\n */\n placement: PlacementAxis | null;\n /**\n * Whether the popover is currently entering. Use this to apply animations.\n *\n * @selector [data-entering]\n */\n isEntering: boolean;\n /**\n * Whether the popover is currently exiting. Use this to apply animations.\n *\n * @selector [data-exiting]\n */\n isExiting: boolean;\n}\n\ninterface PopoverContextValue extends PopoverProps {\n id?: string;\n /** Contexts to clear. */\n clearContexts?: Context<any>[];\n}\n\nexport const PopoverContext = createContext<ContextValue<PopoverContextValue, HTMLElement>>(null);\n\n// Stores a ref for the portal container for a group of popovers (e.g. submenus).\nconst PopoverGroupContext = createContext<RefObject<Element | null> | null>(null);\n\n/**\n * A popover is an overlay element positioned relative to a trigger.\n */\nexport const Popover = /*#__PURE__*/ (forwardRef as forwardRefType)(function Popover(\n props: PopoverProps,\n ref: ForwardedRef<HTMLElement>\n) {\n [props, ref] = useContextProps(props, ref, PopoverContext);\n let contextState = useContext(OverlayTriggerStateContext);\n let localState = useOverlayTriggerState(props);\n let state =\n props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;\n // Skip the automatic exit animation when closing instantly (e.g. swapping between previews\n // during warmup). An explicitly provided isExiting prop still takes precedence.\n let exitAnimation = useExitAnimation(ref, state.isOpen);\n let isExiting = props.isExiting || (!props.shouldSkipAnimation && exitAnimation) || false;\n let isHidden = useIsHidden();\n let {direction} = useLocale();\n\n // If we are in a hidden tree, we still need to preserve our children.\n if (isHidden) {\n let children = props.children;\n if (typeof children === 'function') {\n children = children({\n trigger: props.trigger || null,\n placement: 'bottom',\n isEntering: false,\n isExiting: false,\n defaultChildren: null\n });\n }\n\n return <>{children}</>;\n }\n\n if (state && !state.isOpen && !isExiting) {\n return null;\n }\n\n return (\n <PopoverInner\n {...props}\n triggerRef={props.triggerRef!}\n state={state}\n popoverRef={ref}\n isExiting={isExiting}\n dir={direction}\n />\n );\n});\n\ninterface PopoverInnerProps extends AriaPopoverProps, RenderProps<PopoverRenderProps>, SlotProps {\n state: OverlayTriggerState;\n isEntering?: boolean;\n isExiting: boolean;\n shouldSkipAnimation?: boolean;\n UNSTABLE_portalContainer?: Element;\n trigger?: string;\n dir?: 'ltr' | 'rtl';\n clearContexts?: Context<any>[];\n id?: string;\n}\n\nfunction PopoverInner({\n state,\n isExiting,\n UNSTABLE_portalContainer,\n clearContexts,\n ...props\n}: PopoverInnerProps) {\n // Calculate the arrow size internally (and remove props.arrowSize from PopoverProps)\n // Referenced from: packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx\n let arrowRef = useRef<HTMLDivElement>(null);\n let containerRef = useRef<HTMLDivElement | null>(null);\n let groupCtx = useContext(PopoverGroupContext);\n let isSubPopover = groupCtx && props.trigger === 'SubmenuTrigger';\n\n let {popoverProps, underlayProps, arrowProps, placement, triggerAnchorPoint} = usePopover(\n {\n ...props,\n offset: props.offset ?? 8,\n arrowRef,\n // If this is a submenu/subdialog, use the root popover's container\n // to detect outside interaction and add aria-hidden.\n groupRef: isSubPopover ? groupCtx! : containerRef\n },\n state\n );\n\n let ref = props.popoverRef as RefObject<HTMLDivElement | null>;\n // Skip the automatic entry animation when opening instantly (e.g. swapping between previews\n // during warmup). An explicitly provided isEntering prop still takes precedence.\n let enterAnimation = useEnterAnimation(ref, !!placement);\n // oxlint-disable-next-line react/react-compiler\n let isEntering = props.isEntering || (!props.shouldSkipAnimation && enterAnimation) || false;\n // oxlint-disable-next-line react/react-compiler\n let renderProps = useRenderProps({\n // oxlint-disable-next-line react/react-compiler\n ...props,\n defaultClassName: 'react-aria-Popover',\n // oxlint-disable-next-line react/react-compiler\n values: {\n // oxlint-disable-next-line react/react-compiler\n trigger: props.trigger || null,\n placement,\n // oxlint-disable-next-line react/react-compiler\n isEntering,\n isExiting\n }\n });\n\n // Automatically render Popover with role=dialog except when isNonModal is true,\n // or a dialog is already nested inside the popover.\n let shouldBeDialog =\n // oxlint-disable-next-line react/react-compiler\n !props.isNonModal || props.trigger === 'SubmenuTrigger' || props.trigger === 'PreviewTrigger';\n // oxlint-disable-next-line react/react-compiler\n let [isDialog, setDialog] = useState(props.trigger === 'PreviewTrigger');\n useLayoutEffect(() => {\n if (ref.current) {\n setDialog(shouldBeDialog && !ref.current.querySelector('[role=dialog]'));\n }\n }, [ref, shouldBeDialog]);\n\n // Focus the popover itself on mount, unless a child element is already focused.\n // Skip this for submenus since hovering a submenutrigger should keep focus on the trigger\n // oxlint-disable react/react-compiler\n useEffect(() => {\n if (\n isDialog &&\n props.trigger !== 'PreviewTrigger' &&\n (props.trigger !== 'SubmenuTrigger' || getInteractionModality() !== 'pointer') &&\n ref.current &&\n !isFocusWithin(ref.current)\n ) {\n focusSafely(ref.current);\n }\n }, [isDialog, ref, props.trigger]);\n // oxlint-enable react/react-compiler\n\n let children = useMemo(() => {\n let children = renderProps.children;\n if (clearContexts) {\n for (let Context of clearContexts) {\n children = <Context.Provider value={null}>{children}</Context.Provider>;\n }\n }\n return children;\n }, [renderProps.children, clearContexts]);\n\n let [triggerWidth, setTriggerWidth] = useState<string | null>(null);\n // oxlint-disable-next-line react/react-compiler\n let onResize = useCallback(() => {\n if (props.triggerRef.current) {\n setTriggerWidth(props.triggerRef.current.getBoundingClientRect().width + 'px');\n }\n }, [props.triggerRef]);\n\n useLayoutEffect(onResize, [onResize]);\n // oxlint-disable-next-line react/react-compiler\n useResizeObserver({\n // oxlint-disable-next-line react/react-compiler\n ref: renderProps.style?.['--trigger-width'] ? undefined : props.triggerRef,\n onResize: onResize\n });\n\n let style = {\n ...popoverProps.style,\n '--trigger-anchor-point': triggerAnchorPoint\n ? `${triggerAnchorPoint.x}px ${triggerAnchorPoint.y}px`\n : undefined,\n ...renderProps.style,\n '--trigger-width': renderProps.style?.['--trigger-width'] || triggerWidth\n };\n\n // oxlint-disable react/react-compiler\n let overlay = (\n <dom.div\n {...mergeProps(filterDOMProps(props, {global: true}), popoverProps)}\n {...renderProps}\n id={isDialog ? props.id : undefined}\n role={isDialog ? 'dialog' : undefined}\n tabIndex={isDialog ? -1 : undefined}\n aria-label={props['aria-label']}\n aria-labelledby={props['aria-labelledby']}\n ref={ref}\n slot={props.slot || undefined}\n style={style}\n dir={props.dir}\n data-trigger={props.trigger}\n data-placement={placement}\n data-entering={isEntering || undefined}\n data-exiting={isExiting || undefined}>\n {/* oxlint-disable-next-line react/react-compiler */}\n {!props.isNonModal && <DismissButton onDismiss={state.close} />}\n <OverlayArrowContext.Provider value={{...arrowProps, placement, ref: arrowRef}}>\n {children}\n </OverlayArrowContext.Provider>\n <DismissButton onDismiss={state.close} />\n </dom.div>\n );\n // oxlint-enable react/react-compiler\n\n // If this is a root popover, render an extra div to act as the portal container for submenus/subdialogs.\n if (!isSubPopover) {\n // oxlint-disable react/react-compiler\n return (\n <Overlay\n {...props}\n shouldContainFocus={isDialog && props.trigger !== 'PreviewTrigger'}\n isExiting={isExiting}\n portalContainer={UNSTABLE_portalContainer}>\n {/* oxlint-disable-next-line react/react-compiler */}\n {!props.isNonModal && state.isOpen && (\n <div data-testid=\"underlay\" {...underlayProps} style={{position: 'fixed', inset: 0}} />\n )}\n <div ref={containerRef} style={{display: 'contents'}}>\n <PopoverGroupContext.Provider value={containerRef}>\n {overlay}\n </PopoverGroupContext.Provider>\n </div>\n </Overlay>\n );\n // oxlint-enable react/react-compiler\n }\n\n // Submenus/subdialogs are mounted into the root popover's container.\n // oxlint-disable react/react-compiler\n return (\n <Overlay\n {...props}\n shouldContainFocus={isDialog && props.trigger !== 'PreviewTrigger'}\n isExiting={isExiting}\n portalContainer={UNSTABLE_portalContainer ?? groupCtx?.current ?? undefined}>\n {overlay}\n </Overlay>\n );\n // oxlint-enable react/react-compiler\n}\n"],"names":[],"version":3,"file":"Popover.cjs.map"}
|
package/dist/private/Popover.js
CHANGED
|
@@ -51,7 +51,10 @@ const $03df2f2d3cffb62f$export$5b6b19405a83ff9d = /*#__PURE__*/ (0, $jx81S$forwa
|
|
|
51
51
|
let contextState = (0, $jx81S$useContext)((0, $acf8e70c2f419f18$export$d2f961adcb0afbe));
|
|
52
52
|
let localState = (0, $jx81S$useOverlayTriggerState)(props);
|
|
53
53
|
let state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;
|
|
54
|
-
|
|
54
|
+
// Skip the automatic exit animation when closing instantly (e.g. swapping between previews
|
|
55
|
+
// during warmup). An explicitly provided isExiting prop still takes precedence.
|
|
56
|
+
let exitAnimation = (0, $jx81S$useExitAnimation)(ref, state.isOpen);
|
|
57
|
+
let isExiting = props.isExiting || !props.shouldSkipAnimation && exitAnimation || false;
|
|
55
58
|
let isHidden = (0, $jx81S$useIsHidden)();
|
|
56
59
|
let { direction: direction } = (0, $jx81S$useLocale)();
|
|
57
60
|
// If we are in a hidden tree, we still need to preserve our children.
|
|
@@ -94,21 +97,32 @@ function $03df2f2d3cffb62f$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
94
97
|
groupRef: isSubPopover ? groupCtx : containerRef
|
|
95
98
|
}, state);
|
|
96
99
|
let ref = props.popoverRef;
|
|
97
|
-
|
|
100
|
+
// Skip the automatic entry animation when opening instantly (e.g. swapping between previews
|
|
101
|
+
// during warmup). An explicitly provided isEntering prop still takes precedence.
|
|
102
|
+
let enterAnimation = (0, $jx81S$useEnterAnimation)(ref, !!placement);
|
|
103
|
+
// oxlint-disable-next-line react/react-compiler
|
|
104
|
+
let isEntering = props.isEntering || !props.shouldSkipAnimation && enterAnimation || false;
|
|
105
|
+
// oxlint-disable-next-line react/react-compiler
|
|
98
106
|
let renderProps = (0, $b7b7a92703138c9b$export$4d86445c2cf5e3)({
|
|
107
|
+
// oxlint-disable-next-line react/react-compiler
|
|
99
108
|
...props,
|
|
100
109
|
defaultClassName: 'react-aria-Popover',
|
|
110
|
+
// oxlint-disable-next-line react/react-compiler
|
|
101
111
|
values: {
|
|
112
|
+
// oxlint-disable-next-line react/react-compiler
|
|
102
113
|
trigger: props.trigger || null,
|
|
103
114
|
placement: placement,
|
|
104
|
-
isEntering:
|
|
115
|
+
isEntering: // oxlint-disable-next-line react/react-compiler
|
|
116
|
+
isEntering,
|
|
105
117
|
isExiting: isExiting
|
|
106
118
|
}
|
|
107
119
|
});
|
|
108
120
|
// Automatically render Popover with role=dialog except when isNonModal is true,
|
|
109
121
|
// or a dialog is already nested inside the popover.
|
|
110
|
-
let shouldBeDialog =
|
|
111
|
-
|
|
122
|
+
let shouldBeDialog = // oxlint-disable-next-line react/react-compiler
|
|
123
|
+
!props.isNonModal || props.trigger === 'SubmenuTrigger' || props.trigger === 'PreviewTrigger';
|
|
124
|
+
// oxlint-disable-next-line react/react-compiler
|
|
125
|
+
let [isDialog, setDialog] = (0, $jx81S$useState)(props.trigger === 'PreviewTrigger');
|
|
112
126
|
(0, $jx81S$useLayoutEffect)(()=>{
|
|
113
127
|
if (ref.current) setDialog(shouldBeDialog && !ref.current.querySelector('[role=dialog]'));
|
|
114
128
|
}, [
|
|
@@ -117,13 +131,15 @@ function $03df2f2d3cffb62f$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
117
131
|
]);
|
|
118
132
|
// Focus the popover itself on mount, unless a child element is already focused.
|
|
119
133
|
// Skip this for submenus since hovering a submenutrigger should keep focus on the trigger
|
|
134
|
+
// oxlint-disable react/react-compiler
|
|
120
135
|
(0, $jx81S$useEffect)(()=>{
|
|
121
|
-
if (isDialog && (props.trigger !== 'SubmenuTrigger' || (0, $jx81S$getInteractionModality)() !== 'pointer') && ref.current && !(0, $jx81S$isFocusWithin)(ref.current)) (0, $jx81S$focusSafely)(ref.current);
|
|
136
|
+
if (isDialog && props.trigger !== 'PreviewTrigger' && (props.trigger !== 'SubmenuTrigger' || (0, $jx81S$getInteractionModality)() !== 'pointer') && ref.current && !(0, $jx81S$isFocusWithin)(ref.current)) (0, $jx81S$focusSafely)(ref.current);
|
|
122
137
|
}, [
|
|
123
138
|
isDialog,
|
|
124
139
|
ref,
|
|
125
140
|
props.trigger
|
|
126
141
|
]);
|
|
142
|
+
// oxlint-enable react/react-compiler
|
|
127
143
|
let children = (0, $jx81S$useMemo)(()=>{
|
|
128
144
|
let children = renderProps.children;
|
|
129
145
|
if (clearContexts) for (let Context of clearContexts)children = /*#__PURE__*/ (0, $jx81S$react).createElement(Context.Provider, {
|
|
@@ -135,6 +151,7 @@ function $03df2f2d3cffb62f$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
135
151
|
clearContexts
|
|
136
152
|
]);
|
|
137
153
|
let [triggerWidth, setTriggerWidth] = (0, $jx81S$useState)(null);
|
|
154
|
+
// oxlint-disable-next-line react/react-compiler
|
|
138
155
|
let onResize = (0, $jx81S$useCallback)(()=>{
|
|
139
156
|
if (props.triggerRef.current) setTriggerWidth(props.triggerRef.current.getBoundingClientRect().width + 'px');
|
|
140
157
|
}, [
|
|
@@ -143,7 +160,9 @@ function $03df2f2d3cffb62f$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
143
160
|
(0, $jx81S$useLayoutEffect)(onResize, [
|
|
144
161
|
onResize
|
|
145
162
|
]);
|
|
163
|
+
// oxlint-disable-next-line react/react-compiler
|
|
146
164
|
(0, $jx81S$useResizeObserver)({
|
|
165
|
+
// oxlint-disable-next-line react/react-compiler
|
|
147
166
|
ref: ((_renderProps_style = renderProps.style) === null || _renderProps_style === void 0 ? void 0 : _renderProps_style['--trigger-width']) ? undefined : props.triggerRef,
|
|
148
167
|
onResize: onResize
|
|
149
168
|
});
|
|
@@ -153,11 +172,13 @@ function $03df2f2d3cffb62f$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
153
172
|
...renderProps.style,
|
|
154
173
|
'--trigger-width': ((_renderProps_style1 = renderProps.style) === null || _renderProps_style1 === void 0 ? void 0 : _renderProps_style1['--trigger-width']) || triggerWidth
|
|
155
174
|
};
|
|
175
|
+
// oxlint-disable react/react-compiler
|
|
156
176
|
let overlay = /*#__PURE__*/ (0, $jx81S$react).createElement((0, $b7b7a92703138c9b$export$df3a06d6289f983e).div, {
|
|
157
177
|
...(0, $jx81S$mergeProps)((0, $jx81S$filterDOMProps)(props, {
|
|
158
178
|
global: true
|
|
159
179
|
}), popoverProps),
|
|
160
180
|
...renderProps,
|
|
181
|
+
id: isDialog ? props.id : undefined,
|
|
161
182
|
role: isDialog ? 'dialog' : undefined,
|
|
162
183
|
tabIndex: isDialog ? -1 : undefined,
|
|
163
184
|
"aria-label": props['aria-label'],
|
|
@@ -181,10 +202,12 @@ function $03df2f2d3cffb62f$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
181
202
|
}, children), /*#__PURE__*/ (0, $jx81S$react).createElement((0, $jx81S$DismissButton), {
|
|
182
203
|
onDismiss: state.close
|
|
183
204
|
}));
|
|
205
|
+
// oxlint-enable react/react-compiler
|
|
184
206
|
// If this is a root popover, render an extra div to act as the portal container for submenus/subdialogs.
|
|
185
|
-
if (!isSubPopover)
|
|
207
|
+
if (!isSubPopover) // oxlint-disable react/react-compiler
|
|
208
|
+
return /*#__PURE__*/ (0, $jx81S$react).createElement((0, $jx81S$Overlay), {
|
|
186
209
|
...props,
|
|
187
|
-
shouldContainFocus: isDialog,
|
|
210
|
+
shouldContainFocus: isDialog && props.trigger !== 'PreviewTrigger',
|
|
188
211
|
isExiting: isExiting,
|
|
189
212
|
portalContainer: UNSTABLE_portalContainer
|
|
190
213
|
}, !props.isNonModal && state.isOpen && /*#__PURE__*/ (0, $jx81S$react).createElement("div", {
|
|
@@ -204,12 +227,14 @@ function $03df2f2d3cffb62f$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
204
227
|
}, overlay)));
|
|
205
228
|
var _ref;
|
|
206
229
|
// Submenus/subdialogs are mounted into the root popover's container.
|
|
230
|
+
// oxlint-disable react/react-compiler
|
|
207
231
|
return /*#__PURE__*/ (0, $jx81S$react).createElement((0, $jx81S$Overlay), {
|
|
208
232
|
...props,
|
|
209
|
-
shouldContainFocus: isDialog,
|
|
233
|
+
shouldContainFocus: isDialog && props.trigger !== 'PreviewTrigger',
|
|
210
234
|
isExiting: isExiting,
|
|
211
235
|
portalContainer: (_ref = UNSTABLE_portalContainer !== null && UNSTABLE_portalContainer !== void 0 ? UNSTABLE_portalContainer : groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.current) !== null && _ref !== void 0 ? _ref : undefined
|
|
212
236
|
}, overlay);
|
|
237
|
+
// oxlint-enable react/react-compiler
|
|
213
238
|
}
|
|
214
239
|
|
|
215
240
|
|