@wix/site-ui 1.30.0 → 1.31.0

package/dist/Popover/index.js

@@ -1,7 +1,782 @@
-import { jsx } from "react/jsx-runtime";
-import { Popover } from "@base-ui/react/popover";
+import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
+import { EMPTY_OBJECT, mergeProps, useRenderElement, esm_formatErrorMessage } from "../8272.js";
+import { CLICK_TRIGGER_IDENTIFIER, pressableTriggerOpenStateMapping, FocusGuard_FocusGuard, triggerOpenStateMapping, FloatingPortal_FloatingPortal, popupStateMapping, POPUP_COLLISION_AVOIDANCE } from "../4388.js";
+import { useFloatingParentNodeId, FloatingNode, FloatingTree, useFloatingNodeId } from "../285.js";
+import { transitionStatusMapping, useAnimationsFinished, useOpenChangeComplete } from "../880.js";
+import { usePositioner, adaptiveOriginMiddleware_adaptiveOrigin, useAnchorPositioning, getDisabledMountTransitionStyles } from "../8750.js";
+import { useIsoLayoutEffect } from "../6499.js";
+import { useAnchoredPopupScrollLock } from "../6247.js";
+import { imperativeAction, focusOut, closePress, triggerHover, triggerPress, escapeKey } from "../2418.js";
+import { useOpenMethodTriggerProps, FloatingFocusManager, InternalBackdrop_InternalBackdrop } from "../3485.js";
+import { inertValue } from "../167.js";
+import { useStableCallback } from "../7541.js";
+import { useToolbarRootContext } from "../6107.js";
+import { useHoverFloatingInteraction } from "../3056.js";
+import { useTriggerDataForwarding, usePopupInteractionProps, usePopupRootSync, setOpenTriggerState, usePopupStore, useImplicitActiveTrigger, useOnFirstRender, useOpenStateTransitions, FOCUSABLE_POPUP_PROPS } from "../8106.js";
+import { COMPOSITE_KEYS } from "../1500.js";
+import { isHTMLElement } from "../3829.js";
+import { useBaseUiId } from "../6046.js";
+import { useButton } from "../9189.js";
+import { createChangeEventDetails } from "../4768.js";
+import { usePopupViewport } from "../8171.js";
+import { safePolygon, useHoverReferenceInteraction } from "../3670.js";
+import { useClick } from "../5864.js";
+import { useTriggerFocusGuards } from "../7871.js";
+import { createPopupFloatingRootContext, createInitialPopupStoreState, popupStoreSelectors } from "../6535.js";
+import { useDismiss, PopupTriggerMap, createSelector, ReactStore } from "../5992.js";
+import { Timeout } from "../42.js";
 import * as __rspack_external_react from "react";
+import * as __rspack_external_react_dom_7136dc57 from "react-dom";
+const PopoverRootContext = /*#__PURE__*/ __rspack_external_react.createContext(void 0);
+if ("production" !== process.env.NODE_ENV) PopoverRootContext.displayName = "PopoverRootContext";
+function usePopoverRootContext(optional) {
+    const context = __rspack_external_react.useContext(PopoverRootContext);
+    if (void 0 === context && !optional) throw new Error("production" !== process.env.NODE_ENV ? 'Base UI: PopoverRootContext is missing. Popover parts must be placed within <Popover.Root>.' : esm_formatErrorMessage(47));
+    return context;
+}
+const PopoverPositionerContext = /*#__PURE__*/ __rspack_external_react.createContext(void 0);
+if ("production" !== process.env.NODE_ENV) PopoverPositionerContext.displayName = "PopoverPositionerContext";
+function usePopoverPositionerContext() {
+    const context = __rspack_external_react.useContext(PopoverPositionerContext);
+    if (!context) throw new Error("production" !== process.env.NODE_ENV ? 'Base UI: PopoverPositionerContext is missing. PopoverPositioner parts must be placed within <Popover.Positioner>.' : esm_formatErrorMessage(46));
+    return context;
+}
+const PopoverPortalContext = /*#__PURE__*/ __rspack_external_react.createContext(void 0);
+if ("production" !== process.env.NODE_ENV) PopoverPortalContext.displayName = "PopoverPortalContext";
+function usePopoverPortalContext() {
+    const value = __rspack_external_react.useContext(PopoverPortalContext);
+    if (void 0 === value) throw new Error("production" !== process.env.NODE_ENV ? 'Base UI: <Popover.Portal> is missing.' : esm_formatErrorMessage(45));
+    return value;
+}
+const PopoverPositioner_PopoverPositioner = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render, className, style, anchor, positionMethod = 'absolute', side = 'bottom', align = 'center', sideOffset = 0, alignOffset = 0, collisionBoundary = 'clipping-ancestors', collisionPadding = 5, arrowPadding = 5, sticky = false, disableAnchorTracking = false, collisionAvoidance = POPUP_COLLISION_AVOIDANCE, ...elementProps } = componentProps;
+    const { store } = usePopoverRootContext();
+    const keepMounted = usePopoverPortalContext();
+    const nodeId = useFloatingNodeId();
+    const floatingRootContext = store.useState('floatingRootContext');
+    const mounted = store.useState('mounted');
+    const open = store.useState('open');
+    const openReason = store.useState('openChangeReason');
+    const triggerElement = store.useState('activeTriggerElement');
+    const modal = store.useState('modal');
+    const openMethod = store.useState('openMethod');
+    const positionerElement = store.useState('positionerElement');
+    const instantType = store.useState('instantType');
+    const transitionStatus = store.useState('transitionStatus');
+    const hasViewport = store.useState('hasViewport');
+    const prevTriggerElementRef = __rspack_external_react.useRef(null);
+    const runOnceAnimationsFinish = useAnimationsFinished(positionerElement, false, false);
+    const positioning = useAnchorPositioning({
+        anchor,
+        floatingRootContext,
+        positionMethod,
+        mounted,
+        side,
+        sideOffset,
+        align,
+        alignOffset,
+        arrowPadding,
+        collisionBoundary,
+        collisionPadding,
+        sticky,
+        disableAnchorTracking,
+        keepMounted,
+        nodeId,
+        collisionAvoidance,
+        adaptiveOrigin: hasViewport ? adaptiveOriginMiddleware_adaptiveOrigin : void 0
+    });
+    const domReference = floatingRootContext.useState('domReferenceElement');
+    useIsoLayoutEffect(()=>{
+        const currentTriggerElement = domReference;
+        const prevTriggerElement = prevTriggerElementRef.current;
+        if (currentTriggerElement) prevTriggerElementRef.current = currentTriggerElement;
+        if (prevTriggerElement && currentTriggerElement && currentTriggerElement !== prevTriggerElement) {
+            store.set('instantType', void 0);
+            const ac = new AbortController();
+            runOnceAnimationsFinish(()=>{
+                store.set('instantType', 'trigger-change');
+            }, ac.signal);
+            return ()=>{
+                ac.abort();
+            };
+        }
+    }, [
+        domReference,
+        runOnceAnimationsFinish,
+        store
+    ]);
+    useAnchoredPopupScrollLock(open && true === modal && openReason !== triggerHover, 'touch' === openMethod, positionerElement, triggerElement);
+    const setPositionerElement = __rspack_external_react.useCallback((element)=>{
+        store.set('positionerElement', element);
+    }, [
+        store
+    ]);
+    const state = {
+        open,
+        side: positioning.side,
+        align: positioning.align,
+        anchorHidden: positioning.anchorHidden,
+        instant: instantType
+    };
+    const element = usePositioner(componentProps, state, {
+        styles: positioning.positionerStyles,
+        transitionStatus,
+        props: elementProps,
+        refs: [
+            forwardedRef,
+            setPositionerElement
+        ],
+        hidden: !mounted,
+        inert: !open
+    });
+    return /*#__PURE__*/ jsxs(PopoverPositionerContext.Provider, {
+        value: positioning,
+        children: [
+            mounted && true === modal && openReason !== triggerHover && /*#__PURE__*/ jsx(InternalBackdrop_InternalBackdrop, {
+                ref: store.context.internalBackdropRef,
+                inert: inertValue(!open),
+                cutout: triggerElement
+            }),
+            /*#__PURE__*/ jsx(FloatingNode, {
+                id: nodeId,
+                children: element
+            })
+        ]
+    });
+});
+if ("production" !== process.env.NODE_ENV) PopoverPositioner_PopoverPositioner.displayName = "PopoverPositioner";
+const ClosePartContext = /*#__PURE__*/ __rspack_external_react.createContext(void 0);
+if ("production" !== process.env.NODE_ENV) ClosePartContext.displayName = "ClosePartContext";
+function useClosePartCount() {
+    const [closePartCount, setClosePartCount] = __rspack_external_react.useState(0);
+    const register = useStableCallback(()=>{
+        setClosePartCount((count)=>count + 1);
+        return ()=>{
+            setClosePartCount((count)=>Math.max(0, count - 1));
+        };
+    });
+    const context = __rspack_external_react.useMemo(()=>({
+            register
+        }), [
+        register
+    ]);
+    return {
+        context,
+        hasClosePart: closePartCount > 0
+    };
+}
+function ClosePartProvider(props) {
+    const { value, children } = props;
+    return /*#__PURE__*/ jsx(ClosePartContext.Provider, {
+        value: value,
+        children: children
+    });
+}
+function useClosePartRegistration() {
+    const context = __rspack_external_react.useContext(ClosePartContext);
+    useIsoLayoutEffect(()=>context?.register(), [
+        context
+    ]);
+}
+const PopoverPopup_stateAttributesMapping = {
+    ...popupStateMapping,
+    ...transitionStatusMapping
+};
+const PopoverPopup_PopoverPopup = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render, className, style, initialFocus, finalFocus, ...elementProps } = componentProps;
+    const { store } = usePopoverRootContext();
+    const positioner = usePopoverPositionerContext();
+    const insideToolbar = null != useToolbarRootContext(true);
+    const { context: closePartContext, hasClosePart } = useClosePartCount();
+    const open = store.useState('open');
+    const openMethod = store.useState('openMethod');
+    const instantType = store.useState('instantType');
+    const transitionStatus = store.useState('transitionStatus');
+    const popupProps = store.useState('popupProps');
+    const titleId = store.useState('titleElementId');
+    const descriptionId = store.useState("descriptionElementId");
+    const modal = store.useState('modal');
+    const mounted = store.useState('mounted');
+    const openReason = store.useState('openChangeReason');
+    const activeTriggerElement = store.useState('activeTriggerElement');
+    const floatingContext = store.useState('floatingRootContext');
+    const floatingId = floatingContext.useState('floatingId');
+    const disabled = store.useState('disabled');
+    const openOnHover = store.useState('openOnHover');
+    const closeDelay = store.useState('closeDelay');
+    const popupId = elementProps.id ?? floatingId;
+    useOpenChangeComplete({
+        open,
+        ref: store.context.popupRef,
+        onComplete () {
+            if (open) store.context.onOpenChangeComplete?.(true);
+        }
+    });
+    useHoverFloatingInteraction(floatingContext, {
+        enabled: openOnHover && !disabled,
+        closeDelay
+    });
+    function defaultInitialFocus(interactionType) {
+        if ('touch' === interactionType) return store.context.popupRef.current;
+        return true;
+    }
+    const resolvedInitialFocus = void 0 === initialFocus ? defaultInitialFocus : initialFocus;
+    const focusManagerModal = false !== modal && hasClosePart;
+    store.useSyncedValue('focusManagerModal', focusManagerModal);
+    const setPopupElement = __rspack_external_react.useCallback((element)=>{
+        store.set('popupElement', element);
+    }, [
+        store
+    ]);
+    const state = {
+        open,
+        side: positioner.side,
+        align: positioner.align,
+        instant: instantType,
+        transitionStatus
+    };
+    const element = useRenderElement('div', componentProps, {
+        state,
+        ref: [
+            forwardedRef,
+            store.context.popupRef,
+            setPopupElement
+        ],
+        props: [
+            popupProps,
+            {
+                id: popupId,
+                role: 'dialog',
+                ...FOCUSABLE_POPUP_PROPS,
+                'aria-labelledby': titleId,
+                'aria-describedby': descriptionId,
+                onKeyDown (event) {
+                    if (insideToolbar && COMPOSITE_KEYS.has(event.key)) event.stopPropagation();
+                }
+            },
+            getDisabledMountTransitionStyles(transitionStatus),
+            elementProps
+        ],
+        stateAttributesMapping: PopoverPopup_stateAttributesMapping
+    });
+    return /*#__PURE__*/ jsx(FloatingFocusManager, {
+        context: floatingContext,
+        openInteractionType: openMethod,
+        modal: focusManagerModal,
+        disabled: !mounted || openReason === triggerHover,
+        initialFocus: resolvedInitialFocus,
+        returnFocus: finalFocus,
+        restoreFocus: "popup",
+        previousFocusableElement: isHTMLElement(activeTriggerElement) ? activeTriggerElement : void 0,
+        nextFocusableElement: store.context.triggerFocusTargetRef,
+        beforeContentFocusGuardRef: store.context.beforeContentFocusGuardRef,
+        children: /*#__PURE__*/ jsx(ClosePartProvider, {
+            value: closePartContext,
+            children: element
+        })
+    });
+});
+if ("production" !== process.env.NODE_ENV) PopoverPopup_PopoverPopup.displayName = "PopoverPopup";
+const PopoverArrow_PopoverArrow = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render, className, style, ...elementProps } = componentProps;
+    const { store } = usePopoverRootContext();
+    const open = store.useState('open');
+    const { arrowRef, side, align, arrowUncentered, arrowStyles } = usePopoverPositionerContext();
+    const state = {
+        open,
+        side,
+        align,
+        uncentered: arrowUncentered
+    };
+    const element = useRenderElement('div', componentProps, {
+        state,
+        ref: [
+            forwardedRef,
+            arrowRef
+        ],
+        props: [
+            {
+                style: arrowStyles,
+                'aria-hidden': true
+            },
+            elementProps
+        ],
+        stateAttributesMapping: popupStateMapping
+    });
+    return element;
+});
+if ("production" !== process.env.NODE_ENV) PopoverArrow_PopoverArrow.displayName = "PopoverArrow";
+const PopoverBackdrop_stateAttributesMapping = {
+    ...popupStateMapping,
+    ...transitionStatusMapping
+};
+const PopoverBackdrop_PopoverBackdrop = /*#__PURE__*/ __rspack_external_react.forwardRef(function(props, forwardedRef) {
+    const { render, className, style, ...elementProps } = props;
+    const { store } = usePopoverRootContext();
+    const open = store.useState('open');
+    const mounted = store.useState('mounted');
+    const transitionStatus = store.useState('transitionStatus');
+    const openReason = store.useState('openChangeReason');
+    const state = {
+        open,
+        transitionStatus
+    };
+    const element = useRenderElement('div', props, {
+        state,
+        ref: [
+            store.context.backdropRef,
+            forwardedRef
+        ],
+        props: [
+            {
+                role: 'presentation',
+                hidden: !mounted,
+                style: {
+                    pointerEvents: openReason === triggerHover ? 'none' : void 0,
+                    userSelect: 'none',
+                    WebkitUserSelect: 'none'
+                }
+            },
+            elementProps
+        ],
+        stateAttributesMapping: PopoverBackdrop_stateAttributesMapping
+    });
+    return element;
+});
+if ("production" !== process.env.NODE_ENV) PopoverBackdrop_PopoverBackdrop.displayName = "PopoverBackdrop";
+const PopoverTitle_PopoverTitle = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render, className, style, ...elementProps } = componentProps;
+    const { store } = usePopoverRootContext();
+    const id = useBaseUiId(elementProps.id);
+    store.useSyncedValueWithCleanup('titleElementId', id);
+    const element = useRenderElement('h2', componentProps, {
+        ref: forwardedRef,
+        props: [
+            {
+                id
+            },
+            elementProps
+        ]
+    });
+    return element;
+});
+if ("production" !== process.env.NODE_ENV) PopoverTitle_PopoverTitle.displayName = "PopoverTitle";
+const PopoverDescription_PopoverDescription = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render, className, style, ...elementProps } = componentProps;
+    const { store } = usePopoverRootContext();
+    const id = useBaseUiId(elementProps.id);
+    store.useSyncedValueWithCleanup("descriptionElementId", id);
+    const element = useRenderElement('p', componentProps, {
+        ref: forwardedRef,
+        props: [
+            {
+                id
+            },
+            elementProps
+        ]
+    });
+    return element;
+});
+if ("production" !== process.env.NODE_ENV) PopoverDescription_PopoverDescription.displayName = "PopoverDescription";
+const PopoverClose_PopoverClose = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render, className, style, disabled = false, nativeButton = true, ...elementProps } = componentProps;
+    const { buttonRef, getButtonProps } = useButton({
+        disabled,
+        focusableWhenDisabled: false,
+        native: nativeButton
+    });
+    const { store } = usePopoverRootContext();
+    useClosePartRegistration();
+    const element = useRenderElement('button', componentProps, {
+        ref: [
+            forwardedRef,
+            buttonRef
+        ],
+        props: [
+            {
+                onClick (event) {
+                    store.setOpen(false, createChangeEventDetails(closePress, event.nativeEvent));
+                }
+            },
+            elementProps,
+            getButtonProps
+        ]
+    });
+    return element;
+});
+if ("production" !== process.env.NODE_ENV) PopoverClose_PopoverClose.displayName = "PopoverClose";
+let PopoverViewportCssVars_PopoverViewportCssVars = /*#__PURE__*/ function(PopoverViewportCssVars) {
+    PopoverViewportCssVars["popupWidth"] = "--popup-width";
+    PopoverViewportCssVars["popupHeight"] = "--popup-height";
+    return PopoverViewportCssVars;
+}({});
+const PopoverViewport_stateAttributesMapping = {
+    activationDirection: (value)=>value ? {
+            'data-activation-direction': value
+        } : null
+};
+const PopoverViewport_PopoverViewport = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render, className, style, children, ...elementProps } = componentProps;
+    const { store } = usePopoverRootContext();
+    const { side } = usePopoverPositionerContext();
+    const instantType = store.useState('instantType');
+    const { children: childrenToRender, state: viewportState } = usePopupViewport({
+        store,
+        side,
+        cssVars: PopoverViewportCssVars_PopoverViewportCssVars,
+        children
+    });
+    const state = {
+        activationDirection: viewportState.activationDirection,
+        transitioning: viewportState.transitioning,
+        instant: instantType
+    };
+    return useRenderElement('div', componentProps, {
+        state,
+        ref: forwardedRef,
+        props: [
+            elementProps,
+            {
+                children: childrenToRender
+            }
+        ],
+        stateAttributesMapping: PopoverViewport_stateAttributesMapping
+    });
+});
+if ("production" !== process.env.NODE_ENV) PopoverViewport_PopoverViewport.displayName = "PopoverViewport";
+const PopoverTrigger_PopoverTrigger = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render, className, style, disabled = false, nativeButton = true, handle, payload, openOnHover = false, delay = 300, closeDelay = 0, id: idProp, ...elementProps } = componentProps;
+    const rootContext = usePopoverRootContext(true);
+    const store = handle?.store ?? rootContext?.store;
+    if (!store) throw new Error("production" !== process.env.NODE_ENV ? 'Base UI: <Popover.Trigger> must be either used within a <Popover.Root> component or provided with a handle.' : esm_formatErrorMessage(74));
+    const thisTriggerId = useBaseUiId(idProp);
+    const isTriggerActive = store.useState('isTriggerActive', thisTriggerId);
+    const floatingContext = store.useState('floatingRootContext');
+    const isOpenedByThisTrigger = store.useState('isOpenedByTrigger', thisTriggerId);
+    const popupId = store.useState('triggerPopupId', thisTriggerId);
+    const triggerElementRef = __rspack_external_react.useRef(null);
+    const { registerTrigger, isMountedByThisTrigger } = useTriggerDataForwarding(thisTriggerId, triggerElementRef, store, {
+        payload,
+        disabled,
+        openOnHover,
+        closeDelay
+    });
+    const openReason = store.useState('openChangeReason');
+    const stickIfOpen = store.useState('stickIfOpen');
+    const openMethod = store.useState('openMethod');
+    const focusManagerModal = store.useState('focusManagerModal');
+    const hoverProps = useHoverReferenceInteraction(floatingContext, {
+        enabled: null != floatingContext && openOnHover && ('touch' !== openMethod || openReason !== triggerPress),
+        mouseOnly: true,
+        move: false,
+        handleClose: safePolygon(),
+        restMs: delay,
+        delay: {
+            close: closeDelay
+        },
+        triggerElementRef,
+        isActiveTrigger: isTriggerActive,
+        isClosing: ()=>'ending' === store.select('transitionStatus')
+    });
+    const click = useClick(floatingContext, {
+        enabled: null != floatingContext,
+        stickIfOpen
+    });
+    const interactionTypeProps = useOpenMethodTriggerProps(()=>store.select('open'), (interactionType)=>{
+        store.set('openMethod', interactionType);
+    });
+    const rootTriggerProps = store.useState('triggerProps', isMountedByThisTrigger);
+    const { getButtonProps, buttonRef } = useButton({
+        disabled,
+        native: nativeButton
+    });
+    const stateAttributesMapping = {
+        open (value) {
+            if (value && openReason === triggerPress) return pressableTriggerOpenStateMapping.open(value);
+            return triggerOpenStateMapping.open(value);
+        }
+    };
+    const { preFocusGuardRef, handlePreFocusGuardFocus, handleFocusTargetFocus } = useTriggerFocusGuards(store, triggerElementRef);
+    const state = {
+        disabled,
+        open: isOpenedByThisTrigger
+    };
+    const element = useRenderElement('button', componentProps, {
+        state,
+        ref: [
+            buttonRef,
+            forwardedRef,
+            registerTrigger,
+            triggerElementRef
+        ],
+        props: [
+            click.reference,
+            hoverProps,
+            rootTriggerProps,
+            interactionTypeProps,
+            {
+                [CLICK_TRIGGER_IDENTIFIER]: '',
+                id: thisTriggerId,
+                'aria-haspopup': 'dialog',
+                'aria-expanded': isOpenedByThisTrigger,
+                'aria-controls': popupId
+            },
+            elementProps,
+            getButtonProps
+        ],
+        stateAttributesMapping
+    });
+    if (isMountedByThisTrigger && !focusManagerModal) return /*#__PURE__*/ jsxs(__rspack_external_react.Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(FocusGuard_FocusGuard, {
+                ref: preFocusGuardRef,
+                onFocus: handlePreFocusGuardFocus
+            }),
+            /*#__PURE__*/ jsx(__rspack_external_react.Fragment, {
+                children: element
+            }, thisTriggerId),
+            /*#__PURE__*/ jsx(FocusGuard_FocusGuard, {
+                ref: store.context.triggerFocusTargetRef,
+                onFocus: handleFocusTargetFocus
+            })
+        ]
+    });
+    return /*#__PURE__*/ jsx(__rspack_external_react.Fragment, {
+        children: element
+    }, thisTriggerId);
+});
+if ("production" !== process.env.NODE_ENV) PopoverTrigger_PopoverTrigger.displayName = "PopoverTrigger";
+function createInitialState() {
+    return {
+        ...createInitialPopupStoreState(),
+        disabled: false,
+        modal: false,
+        focusManagerModal: false,
+        instantType: void 0,
+        openMethod: null,
+        openChangeReason: null,
+        titleElementId: void 0,
+        descriptionElementId: void 0,
+        stickIfOpen: true,
+        nested: false,
+        openOnHover: false,
+        closeDelay: 0,
+        hasViewport: false
+    };
+}
+const selectors = {
+    ...popupStoreSelectors,
+    disabled: createSelector((state)=>state.disabled),
+    instantType: createSelector((state)=>state.instantType),
+    openMethod: createSelector((state)=>state.openMethod),
+    openChangeReason: createSelector((state)=>state.openChangeReason),
+    modal: createSelector((state)=>state.modal),
+    focusManagerModal: createSelector((state)=>state.focusManagerModal),
+    stickIfOpen: createSelector((state)=>state.stickIfOpen),
+    titleElementId: createSelector((state)=>state.titleElementId),
+    descriptionElementId: createSelector((state)=>state.descriptionElementId),
+    openOnHover: createSelector((state)=>state.openOnHover),
+    closeDelay: createSelector((state)=>state.closeDelay),
+    hasViewport: createSelector((state)=>state.hasViewport)
+};
+class PopoverStore extends ReactStore {
+    constructor(initialState, floatingId, nested = false){
+        const initial = {
+            ...createInitialState(),
+            ...initialState
+        };
+        const triggerElements = new PopupTriggerMap();
+        if (initial.open && initialState?.mounted === void 0) initial.mounted = true;
+        initial.floatingRootContext = createPopupFloatingRootContext(triggerElements, floatingId, nested);
+        super(initial, {
+            popupRef: /*#__PURE__*/ __rspack_external_react.createRef(),
+            backdropRef: /*#__PURE__*/ __rspack_external_react.createRef(),
+            internalBackdropRef: /*#__PURE__*/ __rspack_external_react.createRef(),
+            onOpenChange: void 0,
+            onOpenChangeComplete: void 0,
+            triggerFocusTargetRef: /*#__PURE__*/ __rspack_external_react.createRef(),
+            beforeContentFocusGuardRef: /*#__PURE__*/ __rspack_external_react.createRef(),
+            stickIfOpenTimeout: new Timeout(),
+            triggerElements
+        }, selectors);
+    }
+    setOpen = (nextOpen, eventDetails)=>{
+        const isHover = eventDetails.reason === triggerHover;
+        const isKeyboardClick = eventDetails.reason === triggerPress && 0 === eventDetails.event.detail;
+        const isDismissClose = !nextOpen && (eventDetails.reason === escapeKey || null == eventDetails.reason);
+        eventDetails.preventUnmountOnClose = ()=>{
+            this.set('preventUnmountingOnClose', true);
+        };
+        const activeTriggerId = this.select('activeTriggerId');
+        if (!nextOpen && eventDetails.reason === closePress && null == eventDetails.trigger && null != activeTriggerId) eventDetails.trigger = this.context.triggerElements.getById(activeTriggerId) ?? this.select('activeTriggerElement') ?? void 0;
+        this.context.onOpenChange?.(nextOpen, eventDetails);
+        if (eventDetails.isCanceled) return;
+        this.state.floatingRootContext.dispatchOpenChange(nextOpen, eventDetails);
+        const changeState = ()=>{
+            const updatedState = {
+                open: nextOpen,
+                openChangeReason: eventDetails.reason
+            };
+            setOpenTriggerState(updatedState, nextOpen, eventDetails.trigger);
+            this.update(updatedState);
+        };
+        if (isHover) {
+            this.set('stickIfOpen', true);
+            this.context.stickIfOpenTimeout.start(500, ()=>{
+                this.set('stickIfOpen', false);
+            });
+            __rspack_external_react_dom_7136dc57.flushSync(changeState);
+        } else changeState();
+        if (isKeyboardClick || isDismissClose) this.set('instantType', isKeyboardClick ? 'click' : 'dismiss');
+        else if (eventDetails.reason === focusOut) this.set('instantType', 'focus');
+        else this.set('instantType', void 0);
+    };
+    static useStore(externalStore, initialState) {
+        const { store, internalStore } = usePopupStore(externalStore, (floatingId, nested)=>new PopoverStore(initialState, floatingId, nested));
+        __rspack_external_react.useEffect(()=>internalStore?.disposeEffect(), [
+            internalStore
+        ]);
+        return store;
+    }
+    disposeEffect = ()=>this.context.stickIfOpenTimeout.disposeEffect();
+}
+function PopoverRootComponent({ props }) {
+    const { children, open: openProp, defaultOpen = false, onOpenChange, onOpenChangeComplete, modal = false, handle, triggerId: triggerIdProp, defaultTriggerId: defaultTriggerIdProp = null } = props;
+    const store = PopoverStore.useStore(handle?.store, {
+        modal,
+        open: defaultOpen,
+        openProp,
+        activeTriggerId: defaultTriggerIdProp,
+        triggerIdProp
+    });
+    useOnFirstRender(()=>{
+        if (void 0 === openProp && false === store.state.open && true === defaultOpen) store.update({
+            open: true,
+            activeTriggerId: defaultTriggerIdProp
+        });
+    });
+    store.useControlledProp('openProp', openProp);
+    store.useControlledProp('triggerIdProp', triggerIdProp);
+    const open = store.useState('open');
+    const mounted = store.useState('mounted');
+    const payload = store.useState('payload');
+    const nested = null != useFloatingParentNodeId();
+    store.useContextCallback('onOpenChange', onOpenChange);
+    store.useContextCallback('onOpenChangeComplete', onOpenChangeComplete);
+    usePopupRootSync(store, open);
+    useImplicitActiveTrigger(store);
+    const { forceUnmount } = useOpenStateTransitions(open, store, ()=>{
+        store.update({
+            stickIfOpen: true,
+            openChangeReason: null
+        });
+    });
+    store.useSyncedValues({
+        modal,
+        nested
+    });
+    __rspack_external_react.useEffect(()=>{
+        if (!open) store.context.stickIfOpenTimeout.clear();
+    }, [
+        store,
+        open
+    ]);
+    const handleImperativeClose = __rspack_external_react.useCallback(()=>{
+        store.setOpen(false, createChangeEventDetails(imperativeAction));
+    }, [
+        store
+    ]);
+    __rspack_external_react.useImperativeHandle(props.actionsRef, ()=>({
+            unmount: forceUnmount,
+            close: handleImperativeClose
+        }), [
+        forceUnmount,
+        handleImperativeClose
+    ]);
+    const shouldRenderInteractions = open || mounted;
+    const popoverContext = __rspack_external_react.useMemo(()=>({
+            store
+        }), [
+        store
+    ]);
+    return /*#__PURE__*/ jsxs(PopoverRootContext.Provider, {
+        value: popoverContext,
+        children: [
+            shouldRenderInteractions && /*#__PURE__*/ jsx(PopoverInteractions, {
+                store: store,
+                modal: modal
+            }),
+            'function' == typeof children ? children({
+                payload
+            }) : children
+        ]
+    });
+}
+function PopoverRoot(props) {
+    if (usePopoverRootContext(true)) return /*#__PURE__*/ jsx(PopoverRootComponent, {
+        props: props
+    });
+    return /*#__PURE__*/ jsx(FloatingTree, {
+        children: /*#__PURE__*/ jsx(PopoverRootComponent, {
+            props: props
+        })
+    });
+}
+function PopoverInteractions({ store, modal }) {
+    const floatingRootContext = store.useState('floatingRootContext');
+    const dismiss = useDismiss(floatingRootContext, {
+        outsidePressEvent: {
+            mouse: 'trap-focus' === modal ? 'sloppy' : 'intentional',
+            touch: 'sloppy'
+        }
+    });
+    const activeTriggerProps = dismiss.reference ?? EMPTY_OBJECT;
+    const inactiveTriggerProps = dismiss.trigger ?? EMPTY_OBJECT;
+    const popupProps = __rspack_external_react.useMemo(()=>mergeProps(FOCUSABLE_POPUP_PROPS, dismiss.floating), [
+        dismiss.floating
+    ]);
+    usePopupInteractionProps(store, {
+        activeTriggerProps,
+        inactiveTriggerProps,
+        popupProps
+    });
+    return null;
+}
+const PopoverPortal_PopoverPortal = /*#__PURE__*/ __rspack_external_react.forwardRef(function(props, forwardedRef) {
+    const { keepMounted = false, ...portalProps } = props;
+    const { store } = usePopoverRootContext();
+    const mounted = store.useState('mounted');
+    const shouldRender = mounted || keepMounted;
+    if (!shouldRender) return null;
+    return /*#__PURE__*/ jsx(PopoverPortalContext.Provider, {
+        value: keepMounted,
+        children: /*#__PURE__*/ jsx(FloatingPortal_FloatingPortal, {
+            ref: forwardedRef,
+            ...portalProps
+        })
+    });
+});
+if ("production" !== process.env.NODE_ENV) PopoverPortal_PopoverPortal.displayName = "PopoverPortal";
+class PopoverHandle {
+    constructor(){
+        this.store = new PopoverStore();
+    }
+    open(triggerId) {
+        const triggerElement = triggerId ? this.store.context.triggerElements.getById(triggerId) ?? void 0 : void 0;
+        if (triggerId && !triggerElement) throw new Error("production" !== process.env.NODE_ENV ? `Base UI: PopoverHandle.open: No trigger found with id "${triggerId}".` : esm_formatErrorMessage(80, triggerId));
+        this.store.setOpen(true, createChangeEventDetails(imperativeAction, void 0, triggerElement));
+    }
+    close() {
+        this.store.setOpen(false, createChangeEventDetails(imperativeAction, void 0, void 0));
+    }
+    get isOpen() {
+        return this.store.select('open');
+    }
+}
+function createPopoverHandle() {
+    return new PopoverHandle();
+}
 const Popover_module = {
     popup: "popup-Wrjs4v",
     arrow: "arrow-FmdRXW",
@@ -9,53 +784,53 @@ const Popover_module = {
     title: "title-kQ490g",
     description: "description-IgC4Ak"
 };
-const Positioner = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Popover.Positioner, {
+const Positioner = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(PopoverPositioner_PopoverPositioner, {
         ref: ref,
         className: clsx(Popover_module.positioner, className),
         ...props
     }));
-const Popup = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Popover.Popup, {
+const Popup = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(PopoverPopup_PopoverPopup, {
         ref: ref,
         className: clsx(Popover_module.popup, className),
         ...props
     }));
-const Arrow = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Popover.Arrow, {
+const Arrow = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(PopoverArrow_PopoverArrow, {
         ref: ref,
         className: clsx(Popover_module.arrow, className),
         ...props
     }));
-const Backdrop = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Popover.Backdrop, {
+const Backdrop = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(PopoverBackdrop_PopoverBackdrop, {
         ref: ref,
         className: clsx(Popover_module.backdrop, className),
         ...props
     }));
-const Title = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Popover.Title, {
+const Title = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(PopoverTitle_PopoverTitle, {
         ref: ref,
         className: clsx(Popover_module.title, className),
         ...props
     }));
-const Description = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Popover.Description, {
+const Description = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(PopoverDescription_PopoverDescription, {
         ref: ref,
         className: clsx(Popover_module.description, className),
         ...props
     }));
-const Close = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Popover.Close, {
+const Close = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(PopoverClose_PopoverClose, {
         ref: ref,
         className: clsx(Popover_module.close, className),
         ...props
     }));
-const Viewport = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Popover.Viewport, {
+const Viewport = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(PopoverViewport_PopoverViewport, {
         ref: ref,
         className: clsx(Popover_module.viewport, className),
         ...props
     }));
 function Trigger({ className, ...props }) {
-    return /*#__PURE__*/ jsx(Popover.Trigger, {
+    return /*#__PURE__*/ jsx(PopoverTrigger_PopoverTrigger, {
         ...props,
         className: clsx(Popover_module.trigger, className)
     });
 }
-const Popover_Popover = {
+const Popover = {
     Positioner: Positioner,
     Popup: Popup,
     Arrow: Arrow,
@@ -64,10 +839,10 @@ const Popover_Popover = {
     Description: Description,
     Close: Close,
     Viewport: Viewport,
-    Root: Popover.Root,
+    Root: PopoverRoot,
     Trigger: Trigger,
-    Portal: Popover.Portal,
-    Handle: Popover.Handle,
-    createHandle: Popover.createHandle
+    Portal: PopoverPortal_PopoverPortal,
+    Handle: PopoverHandle,
+    createHandle: createPopoverHandle
 };
-export { Popover_Popover as Popover };
+export { Popover };