@base-ui/react 1.0.0 → 1.2.0

package/popover/trigger/PopoverTrigger.d.ts

@@ -28,32 +28,32 @@ export type PopoverTriggerProps<Payload = unknown> = NativeButtonProps & BaseUIC
    * Set to `false` if the rendered element is not a button (e.g. `<div>`).
    * @default true
    */
-  nativeButton?: boolean;
+  nativeButton?: boolean | undefined;
   /**
    * A handle to associate the trigger with a popover.
    */
-  handle?: PopoverHandle<Payload>;
+  handle?: PopoverHandle<Payload> | undefined;
   /**
    * A payload to pass to the popover when it is opened.
    */
-  payload?: Payload;
+  payload?: Payload | undefined;
   /**
    * ID of the trigger. In addition to being forwarded to the rendered element,
    * it is also used to specify the active trigger for the popover in controlled mode (with the PopoverRoot `triggerId` prop).
    */
-  id?: string;
+  id?: string | undefined;
   /**
    * Whether the popover should also open when the trigger is hovered.
    * @default false
    */
-  openOnHover?: boolean;
+  openOnHover?: boolean | undefined;
   /**
    * How long to wait before the popover may be opened on hover. Specified in milliseconds.
    *
    * Requires the `openOnHover` prop.
    * @default 300
    */
-  delay?: number;
+  delay?: number | undefined;
   /**
    * How long to wait before closing the popover that was opened on hover.
    * Specified in milliseconds.
@@ -61,7 +61,7 @@ export type PopoverTriggerProps<Payload = unknown> = NativeButtonProps & BaseUIC
    * Requires the `openOnHover` prop.
    * @default 0
    */
-  closeDelay?: number;
+  closeDelay?: number | undefined;
 };
 export declare namespace PopoverTrigger {
   type State = PopoverTriggerState;

package/popover/trigger/PopoverTrigger.js

@@ -48,7 +48,7 @@ const PopoverTrigger = exports.PopoverTrigger = /*#__PURE__*/React.forwardRef(fu
   const rootContext = (0, _PopoverRootContext.usePopoverRootContext)(true);
   const store = handle?.store ?? rootContext?.store;
   if (!store) {
-    throw /* FIXME (minify-errors-in-prod): Unminifyable error in production! */new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <Popover.Trigger> must be either used within a <Popover.Root> component or provided with a handle.' : (0, _formatErrorMessage2.default)(74));
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <Popover.Trigger> must be either used within a <Popover.Root> component or provided with a handle.' : (0, _formatErrorMessage2.default)(74));
   }
   const thisTriggerId = (0, _useBaseUiId.useBaseUiId)(idProp);
   const isTriggerActive = store.useState('isTriggerActive', thisTriggerId);
@@ -85,10 +85,10 @@ const PopoverTrigger = exports.PopoverTrigger = /*#__PURE__*/React.forwardRef(fu
   });
   const localProps = (0, _floatingUiReact.useInteractions)([click]);
   const rootTriggerProps = store.useState('triggerProps', isMountedByThisTrigger);
-  const state = React.useMemo(() => ({
+  const state = {
     disabled,
     open: isOpenedByThisTrigger
-  }), [disabled, isOpenedByThisTrigger]);
+  };
   const {
     getButtonProps,
     buttonRef
@@ -129,8 +129,8 @@ const PopoverTrigger = exports.PopoverTrigger = /*#__PURE__*/React.forwardRef(fu
       ReactDOM.flushSync(() => {
         store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.focusOut, event.nativeEvent, event.currentTarget));
       });
-      let nextTabbable = (0, _utils.getTabbableAfterElement)(triggerElementRef.current);
-      while (nextTabbable !== null && (0, _utils.contains)(positionerElement, nextTabbable) || nextTabbable?.hasAttribute('aria-hidden')) {
+      let nextTabbable = (0, _utils.getTabbableAfterElement)(store.context.triggerFocusTargetRef.current || triggerElementRef.current);
+      while (nextTabbable !== null && (0, _utils.contains)(positionerElement, nextTabbable)) {
         const prevTabbable = nextTabbable;
         nextTabbable = (0, _utils.getNextTabbable)(nextTabbable);
         if (nextTabbable === prevTabbable) {

package/popover/viewport/PopoverViewport.d.ts

@@ -8,7 +8,7 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Popover](https://base-ui.com/react/components/popover)
  */
-export declare const PopoverViewport: React.ForwardRefExoticComponent<PopoverViewport.Props & React.RefAttributes<HTMLDivElement>>;
+export declare const PopoverViewport: React.ForwardRefExoticComponent<Omit<PopoverViewport.Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare namespace PopoverViewport {
   interface Props extends BaseUIComponentProps<'div', State> {
     /**
@@ -17,6 +17,14 @@ export declare namespace PopoverViewport {
     children?: React.ReactNode;
   }
   interface State {
-    activationDirection?: string;
+    activationDirection: string | undefined;
+    /**
+     * Whether the viewport is currently transitioning between contents.
+     */
+    transitioning: boolean;
+    /**
+     * Present if animations should be instant.
+     */
+    instant: 'dismiss' | 'click' | undefined;
   }
 }

package/popover/viewport/PopoverViewport.js

@@ -7,16 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PopoverViewport = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _inertValue = require("@base-ui/utils/inertValue");
-var _useAnimationFrame = require("@base-ui/utils/useAnimationFrame");
-var _usePreviousValue = require("@base-ui/utils/usePreviousValue");
-var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
-var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _PopoverRootContext = require("../root/PopoverRootContext");
-var _useAnimationsFinished = require("../../utils/useAnimationsFinished");
+var _PopoverPositionerContext = require("../positioner/PopoverPositionerContext");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _PopoverViewportCssVars = require("./PopoverViewportCssVars");
-var _jsxRuntime = require("react/jsx-runtime");
+var _usePopupViewport = require("../../utils/usePopupViewport");
 const stateAttributesMapping = {
   activationDirection: value => value ? {
     'data-activation-direction': value
@@ -41,128 +36,24 @@ const PopoverViewport = exports.PopoverViewport = /*#__PURE__*/React.forwardRef(
   const {
     store
   } = (0, _PopoverRootContext.usePopoverRootContext)();
-  const activeTrigger = store.useState('activeTriggerElement');
-  const open = store.useState('open');
-  const floatingContext = store.useState('floatingRootContext');
-  const previousActiveTrigger = (0, _usePreviousValue.usePreviousValue)(open ? activeTrigger : null);
-  const capturedNodeRef = React.useRef(null);
-  const [previousContentNode, setPreviousContentNode] = React.useState(null);
-  const [newTriggerOffset, setNewTriggerOffset] = React.useState(null);
-  const currentContainerRef = React.useRef(null);
-  const previousContainerRef = React.useRef(null);
-  const onAnimationsFinished = (0, _useAnimationsFinished.useAnimationsFinished)(currentContainerRef, true, false);
-  const cleanupFrame = (0, _useAnimationFrame.useAnimationFrame)();
-  const [previousContentDimensions, setPreviousContentDimensions] = React.useState(null);
-  const [showStartingStyleAttribute, setShowStartingStyleAttribute] = React.useState(false);
-
-  // Capture a clone of the current content DOM subtree when not transitioning.
-  // We can't store previous React nodes as they may be stateful; instead we capture DOM clones for visual continuity.
-  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    // When a transition is in progress, we store the next content in capturedNodeRef.
-    // This handles the case where the trigger changes multiple times before the transition finishes.
-    // We want to always capture the latest content for the previous snapshot.
-    // So clicking quickly on T1, T2, T3 will result in the following sequence:
-    // 1. T1 -> T2: previousContent = T1, currentContent = T2
-    // 2. T2 -> T3: previousContent = T2, currentContent = T3
-    const source = currentContainerRef.current;
-    if (!source) {
-      return;
-    }
-    const wrapper = document.createElement('div');
-    for (const child of Array.from(source.childNodes)) {
-      wrapper.appendChild(child.cloneNode(true));
-    }
-    capturedNodeRef.current = wrapper;
-  });
-  const handleMeasureLayout = (0, _useStableCallback.useStableCallback)(() => {
-    currentContainerRef.current?.style.setProperty('animation', 'none');
-    currentContainerRef.current?.style.setProperty('transition', 'none');
-    previousContainerRef.current?.style.setProperty('display', 'none');
-  });
-  const handleMeasureLayoutComplete = (0, _useStableCallback.useStableCallback)(data => {
-    currentContainerRef.current?.style.removeProperty('animation');
-    currentContainerRef.current?.style.removeProperty('transition');
-    previousContainerRef.current?.style.removeProperty('display');
-    if (!previousContentDimensions) {
-      setPreviousContentDimensions(data.previousDimensions);
-    }
+  const {
+    side
+  } = (0, _PopoverPositionerContext.usePopoverPositionerContext)();
+  const instantType = store.useState('instantType');
+  const {
+    children: childrenToRender,
+    state: viewportState
+  } = (0, _usePopupViewport.usePopupViewport)({
+    store,
+    side,
+    cssVars: _PopoverViewportCssVars.PopoverViewportCssVars,
+    children
   });
-  React.useEffect(() => {
-    floatingContext.context.events.on('measure-layout', handleMeasureLayout);
-    floatingContext.context.events.on('measure-layout-complete', handleMeasureLayoutComplete);
-    return () => {
-      floatingContext.context.events.off('measure-layout', handleMeasureLayout);
-      floatingContext.context.events.off('measure-layout-complete', handleMeasureLayoutComplete);
-    };
-  }, [floatingContext, handleMeasureLayout, handleMeasureLayoutComplete]);
-  const lastHandledTriggerRef = React.useRef(null);
-  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    // When a trigger changes, set the captured children HTML to state,
-    // so we can render both new and old content.
-    if (activeTrigger && previousActiveTrigger && activeTrigger !== previousActiveTrigger && lastHandledTriggerRef.current !== activeTrigger && capturedNodeRef.current) {
-      setPreviousContentNode(capturedNodeRef.current);
-      setShowStartingStyleAttribute(true);
-
-      // Calculate the relative position between the previous and new trigger,
-      // so we can pass it to the style hook for animation purposes.
-      const offset = calculateRelativePosition(previousActiveTrigger, activeTrigger);
-      setNewTriggerOffset(offset);
-      cleanupFrame.request(() => {
-        cleanupFrame.request(() => {
-          setShowStartingStyleAttribute(false);
-          onAnimationsFinished(() => {
-            setPreviousContentNode(null);
-            setPreviousContentDimensions(null);
-            capturedNodeRef.current = null;
-          });
-        });
-      });
-      lastHandledTriggerRef.current = activeTrigger;
-    }
-  }, [activeTrigger, previousActiveTrigger, previousContentNode, onAnimationsFinished, cleanupFrame]);
-  const isTransitioning = previousContentNode != null;
-  let childrenToRender;
-  if (!isTransitioning) {
-    childrenToRender = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      "data-current": true,
-      ref: currentContainerRef,
-      children: children
-    }, 'current');
-  } else {
-    childrenToRender = /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        "data-previous": true,
-        inert: (0, _inertValue.inertValue)(true),
-        ref: previousContainerRef,
-        style: {
-          [_PopoverViewportCssVars.PopoverViewportCssVars.popupWidth]: `${previousContentDimensions?.width}px`,
-          [_PopoverViewportCssVars.PopoverViewportCssVars.popupHeight]: `${previousContentDimensions?.height}px`,
-          position: 'absolute'
-        },
-        "data-ending-style": showStartingStyleAttribute ? undefined : ''
-      }, 'previous'), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        "data-current": true,
-        ref: currentContainerRef,
-        "data-starting-style": showStartingStyleAttribute ? '' : undefined,
-        children: children
-      }, 'current')]
-    });
-  }
-
-  // When previousContentNode is present, imperatively populate the previous container with the cloned children.
-  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    const container = previousContainerRef.current;
-    if (!container || !previousContentNode) {
-      return;
-    }
-    container.replaceChildren(...Array.from(previousContentNode.childNodes));
-  }, [previousContentNode]);
-  const state = React.useMemo(() => {
-    return {
-      activationDirection: getActivationDirection(newTriggerOffset),
-      transitioning: isTransitioning
-    };
-  }, [newTriggerOffset, isTransitioning]);
+  const state = {
+    activationDirection: viewportState.activationDirection,
+    transitioning: viewportState.transitioning,
+    instant: instantType
+  };
   return (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     ref: forwardedRef,
@@ -172,56 +63,4 @@ const PopoverViewport = exports.PopoverViewport = /*#__PURE__*/React.forwardRef(
     stateAttributesMapping
   });
 });
-if (process.env.NODE_ENV !== "production") PopoverViewport.displayName = "PopoverViewport";
-/**
- * Returns a string describing the provided offset.
- * It describes both the horizontal and vertical offset, separated by a space.
- *
- * @param offset
- */
-function getActivationDirection(offset) {
-  if (!offset) {
-    return undefined;
-  }
-  return `${getValueWithTolerance(offset.horizontal, 5, 'right', 'left')} ${getValueWithTolerance(offset.vertical, 5, 'down', 'up')}`;
-}
-
-/**
- * Returns a label describing the value (positive/negative) trating values
- * within tolarance as zero.
- *
- * @param value Value to check
- * @param tolerance Tolerance to treat the value as zero.
- * @param positiveLabel
- * @param negativeLabel
- * @returns If 0 < abs(value) < tolerance, returns an empty string. Otherwise returns positiveLabel or negativeLabel.
- */
-function getValueWithTolerance(value, tolerance, positiveLabel, negativeLabel) {
-  if (value > tolerance) {
-    return positiveLabel;
-  }
-  if (value < -tolerance) {
-    return negativeLabel;
-  }
-  return '';
-}
-
-/**
- * Calculates the relative position between centers of two elements.
- */
-function calculateRelativePosition(from, to) {
-  const fromRect = from.getBoundingClientRect();
-  const toRect = to.getBoundingClientRect();
-  const fromCenter = {
-    x: fromRect.left + fromRect.width / 2,
-    y: fromRect.top + fromRect.height / 2
-  };
-  const toCenter = {
-    x: toRect.left + toRect.width / 2,
-    y: toRect.top + toRect.height / 2
-  };
-  return {
-    horizontal: toCenter.x - fromCenter.x,
-    vertical: toCenter.y - fromCenter.y
-  };
-}
+if (process.env.NODE_ENV !== "production") PopoverViewport.displayName = "PopoverViewport";

package/popover/viewport/PopoverViewportDataAttributes.d.ts

@@ -18,4 +18,9 @@ export declare enum PopoverViewportDataAttributes {
    * Indicates that the viewport is currently transitioning between old and new content.
    */
   transitioning = "data-transitioning",
+  /**
+   * Present if animations should be instant.
+   * @type {'dismiss' | 'click'}
+   */
+  instant = "data-instant",
 }

package/popover/viewport/PopoverViewportDataAttributes.js

@@ -24,5 +24,10 @@ let PopoverViewportDataAttributes = exports.PopoverViewportDataAttributes = /*#_
    * Indicates that the viewport is currently transitioning between old and new content.
    */
   PopoverViewportDataAttributes["transitioning"] = "data-transitioning";
+  /**
+   * Present if animations should be instant.
+   * @type {'dismiss' | 'click'}
+   */
+  PopoverViewportDataAttributes["instant"] = "data-instant";
   return PopoverViewportDataAttributes;
 }({});

package/preview-card/arrow/PreviewCardArrow.d.ts

@@ -7,7 +7,7 @@ import type { Align, Side } from "../../utils/useAnchorPositioning.js";
  *
  * Documentation: [Base UI Preview Card](https://base-ui.com/react/components/preview-card)
  */
-export declare const PreviewCardArrow: React.ForwardRefExoticComponent<PreviewCardArrowProps & React.RefAttributes<HTMLDivElement>>;
+export declare const PreviewCardArrow: React.ForwardRefExoticComponent<Omit<PreviewCardArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface PreviewCardArrowState {
   /**
    * Whether the preview card is currently open.

package/preview-card/arrow/PreviewCardArrow.js

@@ -23,9 +23,7 @@ const PreviewCardArrow = exports.PreviewCardArrow = /*#__PURE__*/React.forwardRe
     className,
     ...elementProps
   } = componentProps;
-  const {
-    open
-  } = (0, _PreviewCardContext.usePreviewCardRootContext)();
+  const store = (0, _PreviewCardContext.usePreviewCardRootContext)();
   const {
     arrowRef,
     side,
@@ -33,12 +31,13 @@ const PreviewCardArrow = exports.PreviewCardArrow = /*#__PURE__*/React.forwardRe
     arrowUncentered,
     arrowStyles
   } = (0, _PreviewCardPositionerContext.usePreviewCardPositionerContext)();
-  const state = React.useMemo(() => ({
+  const open = store.useState('open');
+  const state = {
     open,
     side,
     align,
     uncentered: arrowUncentered
-  }), [open, side, align, arrowUncentered]);
+  };
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     ref: [arrowRef, forwardedRef],

package/preview-card/arrow/PreviewCardArrowDataAttributes.js

@@ -18,12 +18,12 @@ let PreviewCardArrowDataAttributes = exports.PreviewCardArrowDataAttributes = fu
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  PreviewCardArrowDataAttributes["side"] = "data-side";
+  PreviewCardArrowDataAttributes[PreviewCardArrowDataAttributes["side"] = _popupStateMapping.CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  PreviewCardArrowDataAttributes["align"] = "data-align";
+  PreviewCardArrowDataAttributes[PreviewCardArrowDataAttributes["align"] = _popupStateMapping.CommonPopupDataAttributes.align] = "align";
   /**
    * Present when the preview card arrow is uncentered.
    */

package/preview-card/backdrop/PreviewCardBackdrop.d.ts

@@ -7,7 +7,7 @@ import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
  *
  * Documentation: [Base UI Preview Card](https://base-ui.com/react/components/preview-card)
  */
-export declare const PreviewCardBackdrop: React.ForwardRefExoticComponent<PreviewCardBackdropProps & React.RefAttributes<HTMLDivElement>>;
+export declare const PreviewCardBackdrop: React.ForwardRefExoticComponent<Omit<PreviewCardBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface PreviewCardBackdropState {
   /**
    * Whether the preview card is currently open.

package/preview-card/backdrop/PreviewCardBackdrop.js

@@ -28,15 +28,14 @@ const PreviewCardBackdrop = exports.PreviewCardBackdrop = /*#__PURE__*/React.for
     className,
     ...elementProps
   } = componentProps;
-  const {
-    open,
-    mounted,
-    transitionStatus
-  } = (0, _PreviewCardContext.usePreviewCardRootContext)();
-  const state = React.useMemo(() => ({
+  const store = (0, _PreviewCardContext.usePreviewCardRootContext)();
+  const open = store.useState('open');
+  const mounted = store.useState('mounted');
+  const transitionStatus = store.useState('transitionStatus');
+  const state = {
     open,
     transitionStatus
-  }), [open, transitionStatus]);
+  };
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     ref: [forwardedRef],

package/preview-card/index.parts.d.ts

@@ -4,4 +4,6 @@ export { PreviewCardTrigger as Trigger } from "./trigger/PreviewCardTrigger.js";
 export { PreviewCardPositioner as Positioner } from "./positioner/PreviewCardPositioner.js";
 export { PreviewCardPopup as Popup } from "./popup/PreviewCardPopup.js";
 export { PreviewCardArrow as Arrow } from "./arrow/PreviewCardArrow.js";
-export { PreviewCardBackdrop as Backdrop } from "./backdrop/PreviewCardBackdrop.js";
+export { PreviewCardBackdrop as Backdrop } from "./backdrop/PreviewCardBackdrop.js";
+export { PreviewCardViewport as Viewport } from "./viewport/PreviewCardViewport.js";
+export { createPreviewCardHandle as createHandle, PreviewCardHandle as Handle } from "./store/PreviewCardHandle.js";

package/preview-card/index.parts.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "Backdrop", {
     return _PreviewCardBackdrop.PreviewCardBackdrop;
   }
 });
+Object.defineProperty(exports, "Handle", {
+  enumerable: true,
+  get: function () {
+    return _PreviewCardHandle.PreviewCardHandle;
+  }
+});
 Object.defineProperty(exports, "Popup", {
   enumerable: true,
   get: function () {
@@ -45,10 +51,24 @@ Object.defineProperty(exports, "Trigger", {
     return _PreviewCardTrigger.PreviewCardTrigger;
   }
 });
+Object.defineProperty(exports, "Viewport", {
+  enumerable: true,
+  get: function () {
+    return _PreviewCardViewport.PreviewCardViewport;
+  }
+});
+Object.defineProperty(exports, "createHandle", {
+  enumerable: true,
+  get: function () {
+    return _PreviewCardHandle.createPreviewCardHandle;
+  }
+});
 var _PreviewCardRoot = require("./root/PreviewCardRoot");
 var _PreviewCardPortal = require("./portal/PreviewCardPortal");
 var _PreviewCardTrigger = require("./trigger/PreviewCardTrigger");
 var _PreviewCardPositioner = require("./positioner/PreviewCardPositioner");
 var _PreviewCardPopup = require("./popup/PreviewCardPopup");
 var _PreviewCardArrow = require("./arrow/PreviewCardArrow");
-var _PreviewCardBackdrop = require("./backdrop/PreviewCardBackdrop");
+var _PreviewCardBackdrop = require("./backdrop/PreviewCardBackdrop");
+var _PreviewCardViewport = require("./viewport/PreviewCardViewport");
+var _PreviewCardHandle = require("./store/PreviewCardHandle");

package/preview-card/popup/PreviewCardPopup.d.ts

@@ -8,7 +8,7 @@ import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
  *
  * Documentation: [Base UI Preview Card](https://base-ui.com/react/components/preview-card)
  */
-export declare const PreviewCardPopup: React.ForwardRefExoticComponent<PreviewCardPopupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const PreviewCardPopup: React.ForwardRefExoticComponent<Omit<PreviewCardPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface PreviewCardPopupState {
   /**
    * Whether the preview card is currently open.
@@ -16,6 +16,7 @@ export interface PreviewCardPopupState {
   open: boolean;
   side: Side;
   align: Align;
+  instant: 'dismiss' | 'focus' | undefined;
   transitionStatus: TransitionStatus;
 }
 export interface PreviewCardPopupProps extends BaseUIComponentProps<'div', PreviewCardPopup.State> {}

package/preview-card/popup/PreviewCardPopup.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PreviewCardPopup = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _PreviewCardContext = require("../root/PreviewCardContext");
 var _PreviewCardPositionerContext = require("../positioner/PreviewCardPositionerContext");
 var _popupStateMapping = require("../../utils/popupStateMapping");
@@ -14,6 +15,7 @@ var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
 var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _getDisabledMountTransitionStyles = require("../../utils/getDisabledMountTransitionStyles");
+var _floatingUiReact = require("../../floating-ui-react");
 const stateAttributesMapping = {
   ..._popupStateMapping.popupStateMapping,
   ..._stateAttributesMapping.transitionStatusMapping
@@ -31,35 +33,39 @@ const PreviewCardPopup = exports.PreviewCardPopup = /*#__PURE__*/React.forwardRe
     render,
     ...elementProps
   } = componentProps;
-  const {
-    open,
-    transitionStatus,
-    popupRef,
-    onOpenChangeComplete,
-    popupProps
-  } = (0, _PreviewCardContext.usePreviewCardRootContext)();
+  const store = (0, _PreviewCardContext.usePreviewCardRootContext)();
   const {
     side,
     align
   } = (0, _PreviewCardPositionerContext.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');
   (0, _useOpenChangeComplete.useOpenChangeComplete)({
     open,
-    ref: popupRef,
+    ref: store.context.popupRef,
     onComplete() {
       if (open) {
-        onOpenChangeComplete?.(true);
+        store.context.onOpenChangeComplete?.(true);
       }
     }
   });
-  const state = React.useMemo(() => ({
+  const getCloseDelay = (0, _useStableCallback.useStableCallback)(() => store.context.closeDelayRef.current);
+  (0, _floatingUiReact.useHoverFloatingInteraction)(floatingContext, {
+    closeDelay: getCloseDelay
+  });
+  const state = {
     open,
     side,
     align,
+    instant: instantType,
     transitionStatus
-  }), [open, side, align, transitionStatus]);
+  };
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
-    ref: [popupRef, forwardedRef],
     state,
+    ref: [forwardedRef, store.context.popupRef, store.useStateSetter('popupElement')],
     props: [popupProps, (0, _getDisabledMountTransitionStyles.getDisabledMountTransitionStyles)(transitionStatus), elementProps],
     stateAttributesMapping
   });

package/preview-card/popup/PreviewCardPopupDataAttributes.js

@@ -26,11 +26,11 @@ let PreviewCardPopupDataAttributes = exports.PreviewCardPopupDataAttributes = fu
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  PreviewCardPopupDataAttributes["side"] = "data-side";
+  PreviewCardPopupDataAttributes[PreviewCardPopupDataAttributes["side"] = _popupStateMapping.CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  PreviewCardPopupDataAttributes["align"] = "data-align";
+  PreviewCardPopupDataAttributes[PreviewCardPopupDataAttributes["align"] = _popupStateMapping.CommonPopupDataAttributes.align] = "align";
   return PreviewCardPopupDataAttributes;
 }({});

package/preview-card/portal/PreviewCardPortal.d.ts

@@ -7,7 +7,7 @@ import { FloatingPortalLite } from "../../utils/FloatingPortalLite.js";
  *
  * Documentation: [Base UI Preview Card](https://base-ui.com/react/components/preview-card)
  */
-export declare const PreviewCardPortal: React.ForwardRefExoticComponent<PreviewCardPortalProps & React.RefAttributes<HTMLDivElement>>;
+export declare const PreviewCardPortal: React.ForwardRefExoticComponent<Omit<PreviewCardPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare namespace PreviewCardPortal {
   interface State {}
 }
@@ -16,7 +16,7 @@ export interface PreviewCardPortalProps extends FloatingPortalLite.Props<Preview
    * Whether to keep the portal mounted in the DOM while the popup is hidden.
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
 }
 export declare namespace PreviewCardPortal {
   type Props = PreviewCardPortalProps;

package/preview-card/portal/PreviewCardPortal.js

@@ -23,9 +23,8 @@ const PreviewCardPortal = exports.PreviewCardPortal = /*#__PURE__*/React.forward
     keepMounted = false,
     ...portalProps
   } = props;
-  const {
-    mounted
-  } = (0, _PreviewCardContext.usePreviewCardRootContext)();
+  const store = (0, _PreviewCardContext.usePreviewCardRootContext)();
+  const mounted = store.useState('mounted');
   const shouldRender = mounted || keepMounted;
   if (!shouldRender) {
     return null;

package/preview-card/portal/PreviewCardPortalContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

package/preview-card/positioner/PreviewCardPositioner.d.ts

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Preview Card](https://base-ui.com/react/components/preview-card)
  */
-export declare const PreviewCardPositioner: React.ForwardRefExoticComponent<PreviewCardPositionerProps & React.RefAttributes<HTMLDivElement>>;
+export declare const PreviewCardPositioner: React.ForwardRefExoticComponent<Omit<PreviewCardPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface PreviewCardPositionerState {
   /**
    * Whether the preview card is currently open.
@@ -16,6 +16,7 @@ export interface PreviewCardPositionerState {
   side: Side;
   align: Align;
   anchorHidden: boolean;
+  instant: 'dismiss' | 'focus' | undefined;
 }
 export interface PreviewCardPositionerProps extends useAnchorPositioning.SharedParameters, BaseUIComponentProps<'div', PreviewCardPositioner.State> {}
 export declare namespace PreviewCardPositioner {