@depup/react-aria-components 1.21.1-depup.0 → 1.22.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/README.md +4 -3
- package/Sheet/package.json +5 -0
- package/changes.json +6 -2
- package/dist/exports/Sheet.cjs +30 -0
- package/dist/exports/Sheet.cjs.map +1 -0
- package/dist/exports/Sheet.js +21 -0
- package/dist/exports/Sheet.js.map +1 -0
- package/dist/exports/Sheet.mjs +21 -0
- package/dist/exports/Sheet.mjs.map +1 -0
- package/dist/exports/TokenField.cjs +1 -0
- package/dist/exports/TokenField.cjs.map +1 -1
- package/dist/exports/TokenField.js +2 -2
- package/dist/exports/TokenField.js.map +1 -1
- package/dist/exports/TokenField.mjs +2 -2
- package/dist/exports/TokenField.mjs.map +1 -1
- package/dist/exports/index.cjs +7 -0
- package/dist/exports/index.cjs.map +1 -1
- package/dist/exports/index.js +3 -1
- package/dist/exports/index.js.map +1 -1
- package/dist/exports/index.mjs +3 -1
- package/dist/exports/index.mjs.map +1 -1
- package/dist/private/Breadcrumbs.cjs +1 -1
- package/dist/private/Breadcrumbs.cjs.map +1 -1
- package/dist/private/Breadcrumbs.js +1 -1
- package/dist/private/Breadcrumbs.js.map +1 -1
- package/dist/private/Breadcrumbs.mjs +1 -1
- package/dist/private/Breadcrumbs.mjs.map +1 -1
- package/dist/private/Modal.cjs +56 -11
- package/dist/private/Modal.cjs.map +1 -1
- package/dist/private/Modal.js +61 -14
- package/dist/private/Modal.js.map +1 -1
- package/dist/private/Modal.mjs +58 -14
- package/dist/private/Modal.mjs.map +1 -1
- package/dist/private/NavigationTree.cjs.map +1 -1
- package/dist/private/NavigationTree.js.map +1 -1
- package/dist/private/NavigationTree.mjs.map +1 -1
- package/dist/private/Popover.cjs +10 -2
- package/dist/private/Popover.cjs.map +1 -1
- package/dist/private/Popover.js +10 -2
- package/dist/private/Popover.js.map +1 -1
- package/dist/private/Popover.mjs +10 -2
- package/dist/private/Popover.mjs.map +1 -1
- package/dist/private/Sheet.cjs +827 -0
- package/dist/private/Sheet.cjs.map +1 -0
- package/dist/private/Sheet.js +820 -0
- package/dist/private/Sheet.js.map +1 -0
- package/dist/private/Sheet.mjs +814 -0
- package/dist/private/Sheet.mjs.map +1 -0
- package/dist/types/exports/Sheet.d.ts +3 -0
- package/dist/types/exports/TokenField.d.ts +2 -2
- package/dist/types/exports/index.d.ts +2 -0
- package/dist/types/src/Modal.d.ts +28 -1
- package/dist/types/src/NavigationTree.d.ts +1 -1
- package/dist/types/src/Sheet.d.ts +149 -0
- package/package.json +13 -8
|
@@ -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 * 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.js.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 {runAfterKeyboard} from 'react-aria/private/utils/runAfterKeyboard';\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 [isOpen, setIsOpen] = useState(false);\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 && isOpen);\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 for (let Context of [PopoverContext, ...(clearContexts ?? [])]) {\n children = <Context.Provider value={null}>{children}</Context.Provider>;\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 // Since our trigger may open the OSK, we defer the reveal, as a courtesy, to avoid layout shift.\n useLayoutEffect(() => runAfterKeyboard(() => setIsOpen(true)), []);\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.js.map"}
|
package/dist/private/Popover.mjs
CHANGED
|
@@ -10,6 +10,7 @@ import {isFocusWithin as $g4jvP$isFocusWithin} from "react-aria/private/utils/sh
|
|
|
10
10
|
import {mergeProps as $g4jvP$mergeProps} from "react-aria/mergeProps";
|
|
11
11
|
import {useOverlayTriggerState as $g4jvP$useOverlayTriggerState} from "react-stately/useOverlayTriggerState";
|
|
12
12
|
import $g4jvP$react, {createContext as $g4jvP$createContext, forwardRef as $g4jvP$forwardRef, useContext as $g4jvP$useContext, useRef as $g4jvP$useRef, useState as $g4jvP$useState, useEffect as $g4jvP$useEffect, useMemo as $g4jvP$useMemo, useCallback as $g4jvP$useCallback} from "react";
|
|
13
|
+
import {runAfterKeyboard as $g4jvP$runAfterKeyboard} from "react-aria/private/utils/runAfterKeyboard";
|
|
13
14
|
import {useExitAnimation as $g4jvP$useExitAnimation, useEnterAnimation as $g4jvP$useEnterAnimation} from "react-aria/private/utils/animation";
|
|
14
15
|
import {useIsHidden as $g4jvP$useIsHidden} from "react-aria/private/collections/Hidden";
|
|
15
16
|
import {useLayoutEffect as $g4jvP$useLayoutEffect} from "react-aria/private/utils/useLayoutEffect";
|
|
@@ -43,6 +44,7 @@ import {useResizeObserver as $g4jvP$useResizeObserver} from "react-aria/private/
|
|
|
43
44
|
|
|
44
45
|
|
|
45
46
|
|
|
47
|
+
|
|
46
48
|
const $542a13ca2fa5b484$export$9b9a0cd73afb7ca4 = /*#__PURE__*/ (0, $g4jvP$createContext)(null);
|
|
47
49
|
// Stores a ref for the portal container for a group of popovers (e.g. submenus).
|
|
48
50
|
const $542a13ca2fa5b484$var$PopoverGroupContext = /*#__PURE__*/ (0, $g4jvP$createContext)(null);
|
|
@@ -86,6 +88,7 @@ function $542a13ca2fa5b484$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
86
88
|
let containerRef = (0, $g4jvP$useRef)(null);
|
|
87
89
|
let groupCtx = (0, $g4jvP$useContext)($542a13ca2fa5b484$var$PopoverGroupContext);
|
|
88
90
|
let isSubPopover = groupCtx && props.trigger === 'SubmenuTrigger';
|
|
91
|
+
let [isOpen, setIsOpen] = (0, $g4jvP$useState)(false);
|
|
89
92
|
let { popoverProps: popoverProps, underlayProps: underlayProps, arrowProps: arrowProps, placement: placement, triggerAnchorPoint: triggerAnchorPoint } = (0, $g4jvP$usePopover)({
|
|
90
93
|
...props,
|
|
91
94
|
offset: props.offset ?? 8,
|
|
@@ -97,7 +100,7 @@ function $542a13ca2fa5b484$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
97
100
|
let ref = props.popoverRef;
|
|
98
101
|
// Skip the automatic entry animation when opening instantly (e.g. swapping between previews
|
|
99
102
|
// during warmup). An explicitly provided isEntering prop still takes precedence.
|
|
100
|
-
let enterAnimation = (0, $g4jvP$useEnterAnimation)(ref, !!placement);
|
|
103
|
+
let enterAnimation = (0, $g4jvP$useEnterAnimation)(ref, !!placement && isOpen);
|
|
101
104
|
// oxlint-disable-next-line react/react-compiler
|
|
102
105
|
let isEntering = props.isEntering || !props.shouldSkipAnimation && enterAnimation || false;
|
|
103
106
|
// oxlint-disable-next-line react/react-compiler
|
|
@@ -140,7 +143,10 @@ function $542a13ca2fa5b484$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
140
143
|
// oxlint-enable react/react-compiler
|
|
141
144
|
let children = (0, $g4jvP$useMemo)(()=>{
|
|
142
145
|
let children = renderProps.children;
|
|
143
|
-
|
|
146
|
+
for (let Context of [
|
|
147
|
+
$542a13ca2fa5b484$export$9b9a0cd73afb7ca4,
|
|
148
|
+
...clearContexts ?? []
|
|
149
|
+
])children = /*#__PURE__*/ (0, $g4jvP$react).createElement(Context.Provider, {
|
|
144
150
|
value: null
|
|
145
151
|
}, children);
|
|
146
152
|
return children;
|
|
@@ -170,6 +176,8 @@ function $542a13ca2fa5b484$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
170
176
|
...renderProps.style,
|
|
171
177
|
'--trigger-width': renderProps.style?.['--trigger-width'] || triggerWidth
|
|
172
178
|
};
|
|
179
|
+
// Since our trigger may open the OSK, we defer the reveal, as a courtesy, to avoid layout shift.
|
|
180
|
+
(0, $g4jvP$useLayoutEffect)(()=>(0, $g4jvP$runAfterKeyboard)(()=>setIsOpen(true)), []);
|
|
173
181
|
// oxlint-disable react/react-compiler
|
|
174
182
|
let overlay = /*#__PURE__*/ (0, $g4jvP$react).createElement((0, $7230ffa83bc0c2cf$export$df3a06d6289f983e).div, {
|
|
175
183
|
...(0, $g4jvP$mergeProps)((0, $g4jvP$filterDOMProps)(props, {
|
|
@@ -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 * 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.mjs.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 {runAfterKeyboard} from 'react-aria/private/utils/runAfterKeyboard';\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 [isOpen, setIsOpen] = useState(false);\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 && isOpen);\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 for (let Context of [PopoverContext, ...(clearContexts ?? [])]) {\n children = <Context.Provider value={null}>{children}</Context.Provider>;\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 // Since our trigger may open the OSK, we defer the reveal, as a courtesy, to avoid layout shift.\n useLayoutEffect(() => runAfterKeyboard(() => setIsOpen(true)), []);\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.mjs.map"}
|