@wix/site-ui 1.29.0 → 1.31.0

package/dist/PreviewCard/index.js

@@ -1,53 +1,718 @@
-import { jsx } from "react/jsx-runtime";
-import { PreviewCard } from "@base-ui/react/preview-card";
+import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
+import { EMPTY_OBJECT, mergeProps, useRenderElement, esm_formatErrorMessage } from "../8272.js";
+import { isElement } from "../3829.js";
+import { triggerOpenStateMapping, popupStateMapping, POPUP_COLLISION_AVOIDANCE } from "../4388.js";
+import { useFloatingNodeId, FloatingNode, FloatingTree } from "../285.js";
+import { usePositioner, adaptiveOriginMiddleware_adaptiveOrigin, useAnchorPositioning, getDisabledMountTransitionStyles } from "../8750.js";
+import { useIsoLayoutEffect } from "../6499.js";
+import { transitionStatusMapping, useOpenChangeComplete } from "../880.js";
+import { useStableCallback } from "../7541.js";
+import { useHoverFloatingInteraction } from "../3056.js";
+import { usePopupViewport } from "../8171.js";
+import { useDismiss, PopupTriggerMap, createSelector, fastComponent, fastComponentRef, ReactStore } from "../5992.js";
+import { useBaseUiId } from "../6046.js";
+import { useTriggerDataForwarding, usePopupInteractionProps, setOpenTriggerState, usePopupStore, useImplicitActiveTrigger, useOnFirstRender, useOpenStateTransitions, FOCUSABLE_POPUP_PROPS } from "../8106.js";
+import { safePolygon, useHoverReferenceInteraction } from "../3670.js";
+import { useFocus } from "../904.js";
+import { createPopupFloatingRootContext, popupStoreSelectors, createInitialPopupStoreState } from "../6535.js";
+import { imperativeAction, triggerFocus, triggerHover, triggerPress, escapeKey } from "../2418.js";
+import { createChangeEventDetails } from "../4768.js";
+import { FloatingPortalLite_FloatingPortalLite } from "../8960.js";
 import * as __rspack_external_react from "react";
+import * as __rspack_external_react_dom_7136dc57 from "react-dom";
+const PreviewCardRootContext = /*#__PURE__*/ __rspack_external_react.createContext(void 0);
+if ("production" !== process.env.NODE_ENV) PreviewCardRootContext.displayName = "PreviewCardRootContext";
+function usePreviewCardRootContext(optional) {
+    const context = __rspack_external_react.useContext(PreviewCardRootContext);
+    if (void 0 === context && !optional) throw new Error("production" !== process.env.NODE_ENV ? 'Base UI: PreviewCardRootContext is missing. PreviewCard parts must be placed within <PreviewCard.Root>.' : esm_formatErrorMessage(50));
+    return context;
+}
+const PreviewCardPositionerContext = /*#__PURE__*/ __rspack_external_react.createContext(void 0);
+if ("production" !== process.env.NODE_ENV) PreviewCardPositionerContext.displayName = "PreviewCardPositionerContext";
+function usePreviewCardPositionerContext() {
+    const context = __rspack_external_react.useContext(PreviewCardPositionerContext);
+    if (void 0 === context) throw new Error("production" !== process.env.NODE_ENV ? 'Base UI: <PreviewCard.Popup> and <PreviewCard.Arrow> must be used within the <PreviewCard.Positioner> component' : esm_formatErrorMessage(49));
+    return context;
+}
+const PreviewCardPortalContext = /*#__PURE__*/ __rspack_external_react.createContext(void 0);
+if ("production" !== process.env.NODE_ENV) PreviewCardPortalContext.displayName = "PreviewCardPortalContext";
+function usePreviewCardPortalContext() {
+    const value = __rspack_external_react.useContext(PreviewCardPortalContext);
+    if (void 0 === value) throw new Error("production" !== process.env.NODE_ENV ? 'Base UI: <PreviewCard.Portal> is missing.' : esm_formatErrorMessage(48));
+    return value;
+}
+function createRect(left, top, right, bottom) {
+    return {
+        left,
+        top,
+        right,
+        bottom,
+        x: left,
+        y: top,
+        width: right - left,
+        height: bottom - top
+    };
+}
+function copyRect(rect) {
+    return {
+        left: rect.left,
+        top: rect.top,
+        right: rect.right,
+        bottom: rect.bottom,
+        width: rect.width,
+        height: rect.height
+    };
+}
+function getLineRects(rects) {
+    const lines = [];
+    let previousRect;
+    let left = 1 / 0;
+    let top = 1 / 0;
+    let right = -1 / 0;
+    let bottom = -1 / 0;
+    for (const rect of Array.from(rects).sort((a, b)=>a.top - b.top)){
+        left = Math.min(left, rect.left);
+        top = Math.min(top, rect.top);
+        right = Math.max(right, rect.right);
+        bottom = Math.max(bottom, rect.bottom);
+        if (!previousRect || rect.top - previousRect.top > previousRect.height / 2) lines.push(copyRect(rect));
+        else {
+            const line = lines[lines.length - 1];
+            line.left = Math.min(line.left, rect.left);
+            line.right = Math.max(line.right, rect.right);
+            line.bottom = Math.max(line.bottom, rect.bottom);
+            line.width = line.right - line.left;
+            line.height = line.bottom - line.top;
+        }
+        previousRect = rect;
+    }
+    return {
+        lines,
+        fallback: createRect(left, top, right, bottom)
+    };
+}
+function findLineIndex(lines, x, y) {
+    return lines.findIndex((lineRect)=>x > lineRect.left - 2 && x < lineRect.right + 2 && y > lineRect.top - 2 && y < lineRect.bottom + 2);
+}
+function createClientRect(rect) {
+    return createRect(rect.left, rect.top, rect.right, rect.bottom);
+}
+function getInlineRectCoords(element, clientX, clientY) {
+    const { lines } = getLineRects(element.getClientRects());
+    if (lines.length < 2) return;
+    const lineIndex = findLineIndex(lines, clientX, clientY);
+    return {
+        x: clientX,
+        y: clientY,
+        lineIndex: -1 === lineIndex ? void 0 : lineIndex,
+        element
+    };
+}
+function getInlineReferenceRect(reference, placement, coords) {
+    const { lines, fallback } = getLineRects(reference.getClientRects());
+    if (lines.length < 2) return null;
+    const x = coords?.x;
+    const y = coords?.y;
+    const side = placement[0];
+    if (coords?.lineIndex != null && lines[coords.lineIndex]) return createClientRect(lines[coords.lineIndex]);
+    if (null != x && null != y) {
+        const lineIndex = findLineIndex(lines, x, y);
+        if (-1 !== lineIndex) return createClientRect(lines[lineIndex]);
+    }
+    if (2 === lines.length && lines[0].left > lines[1].right && null != x && null != y) return fallback;
+    if ('t' === side || 'b' === side) {
+        const firstRect = lines[0];
+        const lastRect = lines[lines.length - 1];
+        const targetRect = 't' === side ? firstRect : lastRect;
+        return createRect(targetRect.left, firstRect.top, targetRect.right, lastRect.bottom);
+    }
+    const isLeft = 'l' === side;
+    let left = lines[0].left;
+    let right = lines[0].right;
+    let edge = isLeft ? 1 / 0 : -1 / 0;
+    let targetFirstRect = lines[0];
+    let targetLastRect = lines[0];
+    for (const rect of lines){
+        left = Math.min(left, rect.left);
+        right = Math.max(right, rect.right);
+        const nextEdge = isLeft ? rect.left : rect.right;
+        if (isLeft && nextEdge < edge || !isLeft && nextEdge > edge) {
+            edge = nextEdge;
+            targetFirstRect = rect;
+            targetLastRect = rect;
+        } else if (nextEdge === edge) targetLastRect = rect;
+    }
+    return createRect(left, targetFirstRect.top, right, targetLastRect.bottom);
+}
+function getContextElement(reference) {
+    if ('contextElement' in reference && reference.contextElement) return reference.contextElement;
+    return isElement(reference) ? reference : void 0;
+}
+function getInlineRectTriggerProps(coordsRef, isOpen) {
+    function updateCoords(event) {
+        updateInlineRectCoords(coordsRef, event.currentTarget, event.clientX, event.clientY);
+    }
+    function updateCoordsOnMove(event) {
+        if (!isOpen) updateCoords(event);
+    }
+    return {
+        onFocus () {
+            coordsRef.current = void 0;
+        },
+        onMouseEnter: updateCoords,
+        onMouseMove: updateCoordsOnMove
+    };
+}
+function updateInlineRectCoords(coordsRef, element, clientX, clientY) {
+    const nextCoords = getInlineRectCoords(element, clientX, clientY);
+    coordsRef.current = nextCoords;
+    return nextCoords;
+}
+function createInlineMiddleware(coordsRef) {
+    return {
+        name: 'inline',
+        async fn (state) {
+            const reference = state.elements.reference;
+            if ('function' != typeof reference?.getClientRects) return {};
+            const contextElement = getContextElement(reference);
+            const coords = coordsRef.current;
+            const currentCoords = coords?.element === reference || coords?.element === contextElement ? coords : void 0;
+            const rect = getInlineReferenceRect(reference, state.placement, currentCoords);
+            if (!rect || 'function' != typeof state.platform.getElementRects) return {};
+            const resetRects = await state.platform.getElementRects({
+                reference: {
+                    contextElement,
+                    getBoundingClientRect () {
+                        return rect;
+                    }
+                },
+                floating: state.elements.floating,
+                strategy: state.strategy
+            });
+            if (state.rects.reference.x === resetRects.reference.x && state.rects.reference.y === resetRects.reference.y && state.rects.reference.width === resetRects.reference.width && state.rects.reference.height === resetRects.reference.height) return {};
+            return {
+                reset: {
+                    rects: resetRects
+                }
+            };
+        }
+    };
+}
+const PreviewCardPositioner_PreviewCardPositioner = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render, className, 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, style, ...elementProps } = componentProps;
+    const store = usePreviewCardRootContext();
+    const keepMounted = usePreviewCardPortalContext();
+    const nodeId = useFloatingNodeId();
+    const open = store.useState('open');
+    const mounted = store.useState('mounted');
+    const floatingRootContext = store.useState('floatingRootContext');
+    const instantType = store.useState('instantType');
+    const transitionStatus = store.useState('transitionStatus');
+    const hasViewport = store.useState('hasViewport');
+    const inlineRectCoordsRef = store.context.inlineRectCoordsRef;
+    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,
+        inline: createInlineMiddleware(inlineRectCoordsRef)
+    });
+    const updatePosition = positioning.update;
+    useIsoLayoutEffect(()=>{
+        if (open && mounted) updatePosition();
+    }, [
+        open,
+        mounted,
+        updatePosition
+    ]);
+    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,
+            store.useStateSetter('positionerElement')
+        ],
+        hidden: !mounted,
+        inert: !open
+    });
+    return /*#__PURE__*/ jsx(PreviewCardPositionerContext.Provider, {
+        value: positioning,
+        children: /*#__PURE__*/ jsx(FloatingNode, {
+            id: nodeId,
+            children: element
+        })
+    });
+});
+if ("production" !== process.env.NODE_ENV) PreviewCardPositioner_PreviewCardPositioner.displayName = "PreviewCardPositioner";
+const stateAttributesMapping = {
+    ...popupStateMapping,
+    ...transitionStatusMapping
+};
+const PreviewCardPopup_PreviewCardPopup = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { className, render, style, ...elementProps } = componentProps;
+    const store = usePreviewCardRootContext();
+    const { side, align } = usePreviewCardPositionerContext();
+    const open = store.useState('open');
+    const instantType = store.useState('instantType');
+    const transitionStatus = store.useState('transitionStatus');
+    const popupProps = store.useState('popupProps');
+    const floatingContext = store.useState('floatingRootContext');
+    useOpenChangeComplete({
+        open,
+        ref: store.context.popupRef,
+        onComplete () {
+            if (open) store.context.onOpenChangeComplete?.(true);
+        }
+    });
+    const getCloseDelay = useStableCallback(()=>store.context.closeDelayRef.current);
+    useHoverFloatingInteraction(floatingContext, {
+        closeDelay: getCloseDelay
+    });
+    const state = {
+        open,
+        side,
+        align,
+        instant: instantType,
+        transitionStatus
+    };
+    const element = useRenderElement('div', componentProps, {
+        state,
+        ref: [
+            forwardedRef,
+            store.context.popupRef,
+            store.useStateSetter('popupElement')
+        ],
+        props: [
+            popupProps,
+            getDisabledMountTransitionStyles(transitionStatus),
+            elementProps
+        ],
+        stateAttributesMapping: stateAttributesMapping
+    });
+    return element;
+});
+if ("production" !== process.env.NODE_ENV) PreviewCardPopup_PreviewCardPopup.displayName = "PreviewCardPopup";
+const PreviewCardArrow_PreviewCardArrow = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render, className, style, ...elementProps } = componentProps;
+    const store = usePreviewCardRootContext();
+    const { arrowRef, side, align, arrowUncentered, arrowStyles } = usePreviewCardPositionerContext();
+    const open = store.useState('open');
+    const state = {
+        open,
+        side,
+        align,
+        uncentered: arrowUncentered
+    };
+    const element = useRenderElement('div', componentProps, {
+        state,
+        ref: [
+            arrowRef,
+            forwardedRef
+        ],
+        props: [
+            {
+                style: arrowStyles,
+                'aria-hidden': true
+            },
+            elementProps
+        ],
+        stateAttributesMapping: popupStateMapping
+    });
+    return element;
+});
+if ("production" !== process.env.NODE_ENV) PreviewCardArrow_PreviewCardArrow.displayName = "PreviewCardArrow";
+const PreviewCardBackdrop_stateAttributesMapping = {
+    ...popupStateMapping,
+    ...transitionStatusMapping
+};
+const PreviewCardBackdrop_PreviewCardBackdrop = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render, className, style, ...elementProps } = componentProps;
+    const store = usePreviewCardRootContext();
+    const open = store.useState('open');
+    const mounted = store.useState('mounted');
+    const transitionStatus = store.useState('transitionStatus');
+    const state = {
+        open,
+        transitionStatus
+    };
+    const element = useRenderElement('div', componentProps, {
+        state,
+        ref: [
+            forwardedRef
+        ],
+        props: [
+            {
+                role: 'presentation',
+                hidden: !mounted,
+                style: {
+                    pointerEvents: 'none',
+                    userSelect: 'none',
+                    WebkitUserSelect: 'none'
+                }
+            },
+            elementProps
+        ],
+        stateAttributesMapping: PreviewCardBackdrop_stateAttributesMapping
+    });
+    return element;
+});
+if ("production" !== process.env.NODE_ENV) PreviewCardBackdrop_PreviewCardBackdrop.displayName = "PreviewCardBackdrop";
+let PreviewCardViewportCssVars_PreviewCardViewportCssVars = /*#__PURE__*/ function(PreviewCardViewportCssVars) {
+    PreviewCardViewportCssVars["popupWidth"] = "--popup-width";
+    PreviewCardViewportCssVars["popupHeight"] = "--popup-height";
+    return PreviewCardViewportCssVars;
+}({});
+const PreviewCardViewport_stateAttributesMapping = {
+    activationDirection: (value)=>value ? {
+            'data-activation-direction': value
+        } : null
+};
+const PreviewCardViewport_PreviewCardViewport = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render, className, style, children, ...elementProps } = componentProps;
+    const store = usePreviewCardRootContext();
+    const positioner = usePreviewCardPositionerContext();
+    const instantType = store.useState('instantType');
+    const { children: childrenToRender, state: viewportState } = usePopupViewport({
+        store,
+        side: positioner.side,
+        cssVars: PreviewCardViewportCssVars_PreviewCardViewportCssVars,
+        children
+    });
+    const state = {
+        activationDirection: viewportState.activationDirection,
+        transitioning: viewportState.transitioning,
+        instant: instantType
+    };
+    return useRenderElement('div', componentProps, {
+        state,
+        ref: forwardedRef,
+        props: [
+            elementProps,
+            {
+                children: childrenToRender
+            }
+        ],
+        stateAttributesMapping: PreviewCardViewport_stateAttributesMapping
+    });
+});
+if ("production" !== process.env.NODE_ENV) PreviewCardViewport_PreviewCardViewport.displayName = "PreviewCardViewport";
+const PreviewCardTrigger_PreviewCardTrigger = fastComponentRef(function(componentProps, forwardedRef) {
+    const { render, className, delay, closeDelay, id: idProp, payload, handle, style, ...elementProps } = componentProps;
+    const rootContext = usePreviewCardRootContext(true);
+    const store = handle?.store ?? rootContext;
+    if (!store) throw new Error("production" !== process.env.NODE_ENV ? 'Base UI: <PreviewCard.Trigger> must be either used within a <PreviewCard.Root> component or provided with a handle.' : esm_formatErrorMessage(89));
+    const thisTriggerId = useBaseUiId(idProp);
+    const isTriggerActive = store.useState('isTriggerActive', thisTriggerId);
+    const isOpenedByThisTrigger = store.useState('isOpenedByTrigger', thisTriggerId);
+    const floatingRootContext = store.useState('floatingRootContext');
+    const inlineRectCoordsRef = store.context.inlineRectCoordsRef;
+    const triggerElementRef = __rspack_external_react.useRef(null);
+    const delayWithDefault = delay ?? 600;
+    const closeDelayWithDefault = closeDelay ?? 300;
+    const { registerTrigger, isMountedByThisTrigger } = useTriggerDataForwarding(thisTriggerId, triggerElementRef, store, {
+        payload
+    });
+    useIsoLayoutEffect(()=>{
+        if (isMountedByThisTrigger) store.context.closeDelayRef.current = closeDelayWithDefault;
+    }, [
+        store,
+        isMountedByThisTrigger,
+        closeDelayWithDefault
+    ]);
+    const hoverProps = useHoverReferenceInteraction(floatingRootContext, {
+        mouseOnly: true,
+        move: false,
+        handleClose: safePolygon(),
+        delay: ()=>({
+                open: delayWithDefault,
+                close: closeDelayWithDefault
+            }),
+        triggerElementRef,
+        isActiveTrigger: isTriggerActive,
+        isClosing: ()=>'ending' === store.select('transitionStatus')
+    });
+    const focusProps = useFocus(floatingRootContext, {
+        delay: delayWithDefault
+    });
+    const state = {
+        open: isOpenedByThisTrigger
+    };
+    const rootTriggerProps = store.useState('triggerProps', isMountedByThisTrigger);
+    const inlineRectTriggerProps = getInlineRectTriggerProps(inlineRectCoordsRef, isOpenedByThisTrigger);
+    const element = useRenderElement('a', componentProps, {
+        state,
+        ref: [
+            forwardedRef,
+            registerTrigger,
+            triggerElementRef
+        ],
+        props: [
+            hoverProps,
+            focusProps.reference,
+            rootTriggerProps,
+            inlineRectTriggerProps,
+            {
+                id: thisTriggerId
+            },
+            elementProps
+        ],
+        stateAttributesMapping: triggerOpenStateMapping
+    });
+    return element;
+});
+if ("production" !== process.env.NODE_ENV) PreviewCardTrigger_PreviewCardTrigger.displayName = "PreviewCardTrigger";
+const selectors = {
+    ...popupStoreSelectors,
+    instantType: createSelector((state)=>state.instantType),
+    hasViewport: createSelector((state)=>state.hasViewport)
+};
+class PreviewCardStore extends ReactStore {
+    constructor(initialState, floatingId, nested = false){
+        const triggerElements = new PopupTriggerMap();
+        const state = {
+            ...createInitialState(),
+            ...initialState
+        };
+        state.floatingRootContext = createPopupFloatingRootContext(triggerElements, floatingId, nested);
+        super(state, {
+            popupRef: /*#__PURE__*/ __rspack_external_react.createRef(),
+            onOpenChange: void 0,
+            onOpenChangeComplete: void 0,
+            triggerElements,
+            closeDelayRef: {
+                current: 300
+            },
+            inlineRectCoordsRef: {
+                current: void 0
+            }
+        }, selectors);
+    }
+    setOpen = (nextOpen, eventDetails)=>{
+        const reason = eventDetails.reason;
+        const isHover = reason === triggerHover;
+        const isFocusOpen = nextOpen && reason === triggerFocus;
+        const isDismissClose = !nextOpen && (reason === triggerPress || reason === escapeKey);
+        eventDetails.preventUnmountOnClose = ()=>{
+            this.set('preventUnmountingOnClose', true);
+        };
+        this.context.onOpenChange?.(nextOpen, eventDetails);
+        if (eventDetails.isCanceled) return;
+        const event = eventDetails.event;
+        if (nextOpen && isHover && eventDetails.trigger && 'clientX' in event && 'clientY' in event && this.context.inlineRectCoordsRef.current?.element !== eventDetails.trigger) updateInlineRectCoords(this.context.inlineRectCoordsRef, eventDetails.trigger, event.clientX, event.clientY);
+        this.state.floatingRootContext.dispatchOpenChange(nextOpen, eventDetails);
+        const changeState = ()=>{
+            const updatedState = {
+                open: nextOpen
+            };
+            if (isFocusOpen) updatedState.instantType = 'focus';
+            else if (isDismissClose) updatedState.instantType = 'dismiss';
+            else if (reason === triggerHover) updatedState.instantType = void 0;
+            setOpenTriggerState(updatedState, nextOpen, eventDetails.trigger);
+            this.update(updatedState);
+        };
+        if (isHover) __rspack_external_react_dom_7136dc57.flushSync(changeState);
+        else changeState();
+    };
+    static useStore(externalStore, initialState) {
+        const store = usePopupStore(externalStore, (floatingId, nested)=>new PreviewCardStore(initialState, floatingId, nested)).store;
+        return store;
+    }
+}
+function createInitialState() {
+    return {
+        ...createInitialPopupStoreState(),
+        instantType: void 0,
+        hasViewport: false
+    };
+}
+function PreviewCardRootComponent(props) {
+    const { open: openProp, defaultOpen = false, onOpenChange, onOpenChangeComplete, actionsRef, handle, triggerId: triggerIdProp, defaultTriggerId: defaultTriggerIdProp = null, children } = props;
+    const store = PreviewCardStore.useStore(handle?.store, {
+        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);
+    store.useContextCallback('onOpenChange', onOpenChange);
+    store.useContextCallback('onOpenChangeComplete', onOpenChangeComplete);
+    const open = store.useState('open');
+    const activeTriggerId = store.useState('activeTriggerId');
+    const mounted = store.useState('mounted');
+    const payload = store.useState('payload');
+    useImplicitActiveTrigger(store);
+    const { forceUnmount } = useOpenStateTransitions(open, store, ()=>{
+        store.context.inlineRectCoordsRef.current = void 0;
+    });
+    useIsoLayoutEffect(()=>{
+        if (open) {
+            if (null == activeTriggerId) store.set('payload', void 0);
+        }
+    }, [
+        store,
+        activeTriggerId,
+        open
+    ]);
+    const handleImperativeClose = __rspack_external_react.useCallback(()=>{
+        store.setOpen(false, createChangeEventDetails(imperativeAction));
+    }, [
+        store
+    ]);
+    __rspack_external_react.useImperativeHandle(actionsRef, ()=>({
+            unmount: forceUnmount,
+            close: handleImperativeClose
+        }), [
+        forceUnmount,
+        handleImperativeClose
+    ]);
+    const shouldRenderInteractions = open || mounted;
+    return /*#__PURE__*/ jsxs(PreviewCardRootContext.Provider, {
+        value: store,
+        children: [
+            shouldRenderInteractions && /*#__PURE__*/ jsx(PreviewCardInteractions, {
+                store: store
+            }),
+            'function' == typeof children ? children({
+                payload
+            }) : children
+        ]
+    });
+}
+function PreviewCardInteractions({ store }) {
+    const floatingRootContext = store.useState('floatingRootContext');
+    const dismiss = useDismiss(floatingRootContext);
+    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 PreviewCardRoot_PreviewCardRoot = fastComponent(function(props) {
+    if (usePreviewCardRootContext(true)) return /*#__PURE__*/ jsx(PreviewCardRootComponent, {
+        ...props
+    });
+    return /*#__PURE__*/ jsx(FloatingTree, {
+        children: /*#__PURE__*/ jsx(PreviewCardRootComponent, {
+            ...props
+        })
+    });
+});
+if ("production" !== process.env.NODE_ENV) PreviewCardRoot_PreviewCardRoot.displayName = "PreviewCardRoot";
+const PreviewCardPortal_PreviewCardPortal = /*#__PURE__*/ __rspack_external_react.forwardRef(function(props, forwardedRef) {
+    const { keepMounted = false, ...portalProps } = props;
+    const store = usePreviewCardRootContext();
+    const mounted = store.useState('mounted');
+    const shouldRender = mounted || keepMounted;
+    if (!shouldRender) return null;
+    return /*#__PURE__*/ jsx(PreviewCardPortalContext.Provider, {
+        value: keepMounted,
+        children: /*#__PURE__*/ jsx(FloatingPortalLite_FloatingPortalLite, {
+            ref: forwardedRef,
+            ...portalProps
+        })
+    });
+});
+if ("production" !== process.env.NODE_ENV) PreviewCardPortal_PreviewCardPortal.displayName = "PreviewCardPortal";
+class PreviewCardHandle {
+    constructor(){
+        this.store = new PreviewCardStore();
+    }
+    open(triggerId) {
+        const triggerElement = triggerId ? this.store.context.triggerElements.getById(triggerId) : void 0;
+        if (triggerId && !triggerElement) throw new Error("production" !== process.env.NODE_ENV ? `Base UI: PreviewCardHandle.open: No trigger found with id "${triggerId}".` : esm_formatErrorMessage(88, 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 createPreviewCardHandle() {
+    return new PreviewCardHandle();
+}
 const PreviewCard_module = {
     popup: "popup-s3Cjfv",
     arrow: "arrow-FRR3yT",
     positioner: "positioner-Gzwwg3"
 };
-const Positioner = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(PreviewCard.Positioner, {
+const Positioner = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(PreviewCardPositioner_PreviewCardPositioner, {
         ref: ref,
         className: clsx(PreviewCard_module.positioner, className),
         ...props
     }));
-const Popup = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(PreviewCard.Popup, {
+const Popup = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(PreviewCardPopup_PreviewCardPopup, {
         ref: ref,
         className: clsx(PreviewCard_module.popup, className),
         ...props
     }));
-const Arrow = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(PreviewCard.Arrow, {
+const Arrow = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(PreviewCardArrow_PreviewCardArrow, {
         ref: ref,
         className: clsx(PreviewCard_module.arrow, className),
         ...props
     }));
-const Backdrop = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(PreviewCard.Backdrop, {
+const Backdrop = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(PreviewCardBackdrop_PreviewCardBackdrop, {
         ref: ref,
         className: clsx(PreviewCard_module.backdrop, className),
         ...props
     }));
-const Viewport = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(PreviewCard.Viewport, {
+const Viewport = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(PreviewCardViewport_PreviewCardViewport, {
         ref: ref,
         className: clsx(PreviewCard_module.viewport, className),
         ...props
     }));
 function Trigger({ className, ...props }) {
-    return /*#__PURE__*/ jsx(PreviewCard.Trigger, {
+    return /*#__PURE__*/ jsx(PreviewCardTrigger_PreviewCardTrigger, {
         ...props,
         className: clsx(PreviewCard_module.trigger, className)
     });
 }
-const PreviewCard_PreviewCard = {
+const PreviewCard = {
     Positioner: Positioner,
     Popup: Popup,
     Arrow: Arrow,
     Backdrop: Backdrop,
     Viewport: Viewport,
-    Root: PreviewCard.Root,
+    Root: PreviewCardRoot_PreviewCardRoot,
     Trigger: Trigger,
-    Portal: PreviewCard.Portal,
-    Handle: PreviewCard.Handle,
-    createHandle: PreviewCard.createHandle
+    Portal: PreviewCardPortal_PreviewCardPortal,
+    Handle: PreviewCardHandle,
+    createHandle: createPreviewCardHandle
 };
-export { PreviewCard_PreviewCard as PreviewCard };
+export { PreviewCard };