@base-ui/react 1.0.0 → 1.1.0

package/number-field/scrub-area/NumberFieldScrubArea.d.ts

@@ -7,7 +7,7 @@ import type { NumberFieldRoot } from "../root/NumberFieldRoot.js";
  *
  * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
  */
-export declare const NumberFieldScrubArea: React.ForwardRefExoticComponent<NumberFieldScrubAreaProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const NumberFieldScrubArea: React.ForwardRefExoticComponent<Omit<NumberFieldScrubAreaProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export interface NumberFieldScrubAreaState extends NumberFieldRoot.State {}
 export interface NumberFieldScrubAreaProps extends BaseUIComponentProps<'span', NumberFieldScrubArea.State> {
   /**

package/number-field/scrub-area-cursor/NumberFieldScrubAreaCursor.d.ts

@@ -10,7 +10,7 @@ import type { NumberFieldRoot } from "../root/NumberFieldRoot.js";
  *
  * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
  */
-export declare const NumberFieldScrubAreaCursor: React.ForwardRefExoticComponent<NumberFieldScrubAreaCursorProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const NumberFieldScrubAreaCursor: React.ForwardRefExoticComponent<Omit<NumberFieldScrubAreaCursorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export interface NumberFieldScrubAreaCursorState extends NumberFieldRoot.State {}
 export interface NumberFieldScrubAreaCursorProps extends BaseUIComponentProps<'span', NumberFieldScrubAreaCursor.State> {}
 export declare namespace NumberFieldScrubAreaCursor {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@base-ui/react",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "author": "MUI Team",
   "description": "Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.",
   "keywords": [
@@ -30,9 +30,9 @@
     "@floating-ui/react-dom": "^2.1.6",
     "@floating-ui/utils": "^0.2.10",
     "reselect": "^5.1.1",
-    "tabbable": "^6.3.0",
+    "tabbable": "^6.4.0",
     "use-sync-external-store": "^1.6.0",
-    "@base-ui/utils": "0.2.3"
+    "@base-ui/utils": "0.2.4"
   },
   "peerDependencies": {
     "@types/react": "^17 || ^18 || ^19",
@@ -155,6 +155,16 @@
         "default": "./esm/combobox/index.js"
       }
     },
+    "./csp-provider": {
+      "require": {
+        "types": "./csp-provider/index.d.ts",
+        "default": "./csp-provider/index.js"
+      },
+      "default": {
+        "types": "./esm/csp-provider/index.d.ts",
+        "default": "./esm/csp-provider/index.js"
+      }
+    },
     "./context-menu": {
       "require": {
         "types": "./context-menu/index.d.ts",

package/popover/arrow/PopoverArrow.d.ts

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Popover](https://base-ui.com/react/components/popover)
  */
-export declare const PopoverArrow: React.ForwardRefExoticComponent<PopoverArrowProps & React.RefAttributes<HTMLDivElement>>;
+export declare const PopoverArrow: React.ForwardRefExoticComponent<Omit<PopoverArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface PopoverArrowState {
   /**
    * Whether the popover is currently open.

package/popover/backdrop/PopoverBackdrop.d.ts

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

package/popover/close/PopoverClose.d.ts

@@ -6,7 +6,7 @@ import type { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.
  *
  * Documentation: [Base UI Popover](https://base-ui.com/react/components/popover)
  */
-export declare const PopoverClose: React.ForwardRefExoticComponent<PopoverCloseProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const PopoverClose: React.ForwardRefExoticComponent<Omit<PopoverCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export interface PopoverCloseState {}
 export interface PopoverCloseProps extends NativeButtonProps, BaseUIComponentProps<'button', PopoverClose.State> {}
 export declare namespace PopoverClose {

package/popover/description/PopoverDescription.d.ts

@@ -6,7 +6,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Popover](https://base-ui.com/react/components/popover)
  */
-export declare const PopoverDescription: React.ForwardRefExoticComponent<PopoverDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+export declare const PopoverDescription: React.ForwardRefExoticComponent<Omit<PopoverDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
 export interface PopoverDescriptionState {}
 export interface PopoverDescriptionProps extends BaseUIComponentProps<'p', PopoverDescription.State> {}
 export declare namespace PopoverDescription {

package/popover/popup/PopoverPopup.d.ts

@@ -9,7 +9,7 @@ import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
  *
  * Documentation: [Base UI Popover](https://base-ui.com/react/components/popover)
  */
-export declare const PopoverPopup: React.ForwardRefExoticComponent<PopoverPopupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const PopoverPopup: React.ForwardRefExoticComponent<Omit<PopoverPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface PopoverPopupState {
   /**
    * Whether the popover is currently open.

package/popover/popup/PopoverPopup.js

@@ -16,8 +16,6 @@ var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
 var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _reasons = require("../../utils/reasons");
-var _usePopupAutoResize = require("../../utils/usePopupAutoResize");
-var _DirectionContext = require("../../direction-provider/DirectionContext");
 var _composite = require("../../composite/composite");
 var _ToolbarRootContext = require("../../toolbar/root/ToolbarRootContext");
 var _getDisabledMountTransitionStyles = require("../../utils/getDisabledMountTransitionStyles");
@@ -46,7 +44,6 @@ const PopoverPopup = exports.PopoverPopup = /*#__PURE__*/React.forwardRef(functi
   } = (0, _PopoverRootContext.usePopoverRootContext)();
   const positioner = (0, _PopoverPositionerContext.usePopoverPositionerContext)();
   const insideToolbar = (0, _ToolbarRootContext.useToolbarRootContext)(true) != null;
-  const direction = (0, _DirectionContext.useDirection)();
   const open = store.useState('open');
   const openMethod = store.useState('openMethod');
   const instantType = store.useState('instantType');
@@ -57,9 +54,6 @@ const PopoverPopup = exports.PopoverPopup = /*#__PURE__*/React.forwardRef(functi
   const modal = store.useState('modal');
   const mounted = store.useState('mounted');
   const openReason = store.useState('openChangeReason');
-  const popupElement = store.useState('popupElement');
-  const payload = store.useState('payload');
-  const positionerElement = store.useState('positionerElement');
   const activeTriggerElement = store.useState('activeTriggerElement');
   const floatingContext = store.useState('floatingRootContext');
   (0, _useOpenChangeComplete.useOpenChangeComplete)({
@@ -99,30 +93,6 @@ const PopoverPopup = exports.PopoverPopup = /*#__PURE__*/React.forwardRef(functi
   const setPopupElement = React.useCallback(element => {
     store.set('popupElement', element);
   }, [store]);
-  function handleMeasureLayout() {
-    floatingContext.context.events.emit('measure-layout');
-  }
-  function handleMeasureLayoutComplete(previousDimensions, nextDimensions) {
-    floatingContext.context.events.emit('measure-layout-complete', {
-      previousDimensions,
-      nextDimensions
-    });
-  }
-
-  // If there's just one trigger, we can skip the auto-resize logic as
-  // the popover will always be anchored to the same position.
-  const autoresizeEnabled = React.useCallback(() => store.context.triggerElements.size > 1, [store]);
-  (0, _usePopupAutoResize.usePopupAutoResize)({
-    popupElement,
-    positionerElement,
-    mounted,
-    content: payload,
-    enabled: autoresizeEnabled,
-    onMeasureLayout: handleMeasureLayout,
-    onMeasureLayoutComplete: handleMeasureLayoutComplete,
-    side: positioner.side,
-    direction
-  });
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     ref: [forwardedRef, store.context.popupRef, setPopupElement],

package/popover/portal/PopoverPortal.d.ts

@@ -7,7 +7,7 @@ import { FloatingPortal } from "../../floating-ui-react/index.js";
  *
  * Documentation: [Base UI Popover](https://base-ui.com/react/components/popover)
  */
-export declare const PopoverPortal: React.ForwardRefExoticComponent<PopoverPortalProps & React.RefAttributes<HTMLDivElement>>;
+export declare const PopoverPortal: React.ForwardRefExoticComponent<Omit<PopoverPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare namespace PopoverPortal {
   interface State {}
 }

package/popover/positioner/PopoverPositioner.d.ts

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Popover](https://base-ui.com/react/components/popover)
  */
-export declare const PopoverPositioner: React.ForwardRefExoticComponent<PopoverPositionerProps & React.RefAttributes<HTMLDivElement>>;
+export declare const PopoverPositioner: React.ForwardRefExoticComponent<Omit<PopoverPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface PopoverPositionerState {
   /**
    * Whether the popover is currently open.

package/popover/positioner/PopoverPositioner.js

@@ -61,6 +61,7 @@ const PopoverPositioner = exports.PopoverPositioner = /*#__PURE__*/React.forward
   const positionerElement = store.useState('positionerElement');
   const instantType = store.useState('instantType');
   const transitionStatus = store.useState('transitionStatus');
+  const hasViewport = store.useState('hasViewport');
   const prevTriggerElementRef = React.useRef(null);
   const runOnceAnimationsFinish = (0, _useAnimationsFinished.useAnimationsFinished)(positionerElement, false, false);
   const positioning = (0, _useAnchorPositioning.useAnchorPositioning)({
@@ -80,7 +81,7 @@ const PopoverPositioner = exports.PopoverPositioner = /*#__PURE__*/React.forward
     keepMounted,
     nodeId,
     collisionAvoidance,
-    adaptiveOrigin: _adaptiveOriginMiddleware.adaptiveOrigin
+    adaptiveOrigin: hasViewport ? _adaptiveOriginMiddleware.adaptiveOrigin : undefined
   });
   const defaultProps = React.useMemo(() => {
     const hiddenStyles = {};

package/popover/root/PopoverRoot.d.ts

@@ -49,13 +49,13 @@ export interface PopoverRootProps<Payload = unknown> {
   modal?: boolean | 'trap-focus';
   /**
    * ID of the trigger that the popover is associated with.
-   * This is useful in conjuntion with the `open` prop to create a controlled popover.
+   * This is useful in conjunction with the `open` prop to create a controlled popover.
    * There's no need to specify this prop when the popover is uncontrolled (i.e. when the `open` prop is not set).
    */
   triggerId?: string | null;
   /**
    * ID of the trigger that the popover is associated with.
-   * This is useful in conjuntion with the `defaultOpen` prop to create an initially open popover.
+   * This is useful in conjunction with the `defaultOpen` prop to create an initially open popover.
    */
   defaultTriggerId?: string | null;
   /**

package/popover/store/PopoverStore.d.ts

@@ -16,6 +16,7 @@ export type State<Payload> = PopupStoreState<Payload> & {
   descriptionElementId: string | undefined;
   openOnHover: boolean;
   closeDelay: number;
+  hasViewport: boolean;
 };
 type Context = PopupStoreContext<PopoverRoot.ChangeEventDetails> & {
   readonly popupRef: React.RefObject<HTMLElement | null>;
@@ -36,6 +37,7 @@ declare const selectors: {
   descriptionElementId: (state: State<unknown>) => string | undefined;
   openOnHover: (state: State<unknown>) => boolean;
   closeDelay: (state: State<unknown>) => number;
+  hasViewport: (state: State<unknown>) => boolean;
   open: (state: PopupStoreState<unknown>) => boolean;
   mounted: (state: PopupStoreState<unknown>) => boolean;
   transitionStatus: (state: PopupStoreState<unknown>) => import("../../utils/useTransitionStatus.js").TransitionStatus;
@@ -47,8 +49,8 @@ declare const selectors: {
   isTriggerActive: (state: PopupStoreState<unknown>, triggerId: string | undefined) => boolean;
   isOpenedByTrigger: (state: PopupStoreState<unknown>, triggerId: string | undefined) => boolean;
   isMountedByTrigger: (state: PopupStoreState<unknown>, triggerId: string | undefined) => boolean;
-  triggerProps: (state: PopupStoreState<unknown>, isActive: boolean) => import("../../utils/types.js").HTMLProps;
-  popupProps: (state: PopupStoreState<unknown>) => import("../../utils/types.js").HTMLProps;
+  triggerProps: (state: PopupStoreState<unknown>, isActive: boolean) => import("../../index.js").HTMLProps;
+  popupProps: (state: PopupStoreState<unknown>) => import("../../index.js").HTMLProps;
   popupElement: (state: PopupStoreState<unknown>) => HTMLElement | null;
   positionerElement: (state: PopupStoreState<unknown>) => HTMLElement | null;
 };

package/popover/store/PopoverStore.js

@@ -29,7 +29,8 @@ function createInitialState() {
     stickIfOpen: true,
     nested: false,
     openOnHover: false,
-    closeDelay: 0
+    closeDelay: 0,
+    hasViewport: false
   };
 }
 const selectors = {
@@ -43,7 +44,8 @@ const selectors = {
   titleElementId: (0, _store.createSelector)(state => state.titleElementId),
   descriptionElementId: (0, _store.createSelector)(state => state.descriptionElementId),
   openOnHover: (0, _store.createSelector)(state => state.openOnHover),
-  closeDelay: (0, _store.createSelector)(state => state.closeDelay)
+  closeDelay: (0, _store.createSelector)(state => state.closeDelay),
+  hasViewport: (0, _store.createSelector)(state => state.hasViewport)
 };
 class PopoverStore extends _store.ReactStore {
   constructor(initialState) {
@@ -121,10 +123,11 @@ class PopoverStore extends _store.ReactStore {
     }
   };
   static useStore(externalStore, initialState) {
-    const store = (0, _useRefWithInit.useRefWithInit)(() => {
-      return externalStore ?? new PopoverStore(initialState);
+    const internalStore = (0, _useRefWithInit.useRefWithInit)(() => {
+      return new PopoverStore(initialState);
     }).current;
-    (0, _useOnMount.useOnMount)(store.disposeEffect);
+    const store = externalStore ?? internalStore;
+    (0, _useOnMount.useOnMount)(internalStore.disposeEffect);
     return store;
   }
   disposeEffect = () => {

package/popover/title/PopoverTitle.d.ts

@@ -6,7 +6,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Popover](https://base-ui.com/react/components/popover)
  */
-export declare const PopoverTitle: React.ForwardRefExoticComponent<PopoverTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+export declare const PopoverTitle: React.ForwardRefExoticComponent<Omit<PopoverTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 export interface PopoverTitleState {}
 export interface PopoverTitleProps extends BaseUIComponentProps<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6', PopoverTitle.State> {}
 export declare namespace PopoverTitle {

package/popover/trigger/PopoverTrigger.js

@@ -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> {
     /**

package/popover/viewport/PopoverViewport.js

@@ -13,9 +13,12 @@ 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 _PopoverPositionerContext = require("../positioner/PopoverPositionerContext");
 var _useAnimationsFinished = require("../../utils/useAnimationsFinished");
+var _usePopupAutoResize = require("../../utils/usePopupAutoResize");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _PopoverViewportCssVars = require("./PopoverViewportCssVars");
+var _DirectionContext = require("../../direction-provider/DirectionContext");
 var _jsxRuntime = require("react/jsx-runtime");
 const stateAttributesMapping = {
   activationDirection: value => value ? {
@@ -41,9 +44,14 @@ const PopoverViewport = exports.PopoverViewport = /*#__PURE__*/React.forwardRef(
   const {
     store
   } = (0, _PopoverRootContext.usePopoverRootContext)();
+  const positioner = (0, _PopoverPositionerContext.usePopoverPositionerContext)();
+  const direction = (0, _DirectionContext.useDirection)();
   const activeTrigger = store.useState('activeTriggerElement');
   const open = store.useState('open');
-  const floatingContext = store.useState('floatingRootContext');
+  const mounted = store.useState('mounted');
+  const payload = store.useState('payload');
+  const popupElement = store.useState('popupElement');
+  const positionerElement = store.useState('positionerElement');
   const previousActiveTrigger = (0, _usePreviousValue.usePreviousValue)(open ? activeTrigger : null);
   const capturedNodeRef = React.useRef(null);
   const [previousContentNode, setPreviousContentNode] = React.useState(null);
@@ -54,6 +62,12 @@ const PopoverViewport = exports.PopoverViewport = /*#__PURE__*/React.forwardRef(
   const cleanupFrame = (0, _useAnimationFrame.useAnimationFrame)();
   const [previousContentDimensions, setPreviousContentDimensions] = React.useState(null);
   const [showStartingStyleAttribute, setShowStartingStyleAttribute] = React.useState(false);
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    store.set('hasViewport', true);
+    return () => {
+      store.set('hasViewport', false);
+    };
+  }, [store]);
 
   // 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.
@@ -79,22 +93,14 @@ const PopoverViewport = exports.PopoverViewport = /*#__PURE__*/React.forwardRef(
     currentContainerRef.current?.style.setProperty('transition', 'none');
     previousContainerRef.current?.style.setProperty('display', 'none');
   });
-  const handleMeasureLayoutComplete = (0, _useStableCallback.useStableCallback)(data => {
+  const handleMeasureLayoutComplete = (0, _useStableCallback.useStableCallback)(previousDimensions => {
     currentContainerRef.current?.style.removeProperty('animation');
     currentContainerRef.current?.style.removeProperty('transition');
     previousContainerRef.current?.style.removeProperty('display');
-    if (!previousContentDimensions) {
-      setPreviousContentDimensions(data.previousDimensions);
+    if (previousDimensions) {
+      setPreviousContentDimensions(previousDimensions);
     }
   });
-  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,
@@ -157,6 +163,16 @@ const PopoverViewport = exports.PopoverViewport = /*#__PURE__*/React.forwardRef(
     }
     container.replaceChildren(...Array.from(previousContentNode.childNodes));
   }, [previousContentNode]);
+  (0, _usePopupAutoResize.usePopupAutoResize)({
+    popupElement,
+    positionerElement,
+    mounted,
+    content: payload,
+    onMeasureLayout: handleMeasureLayout,
+    onMeasureLayoutComplete: handleMeasureLayoutComplete,
+    side: positioner.side,
+    direction
+  });
   const state = React.useMemo(() => {
     return {
       activationDirection: getActivationDirection(newTriggerOffset),

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,6 +31,7 @@ const PreviewCardArrow = exports.PreviewCardArrow = /*#__PURE__*/React.forwardRe
     arrowUncentered,
     arrowStyles
   } = (0, _PreviewCardPositionerContext.usePreviewCardPositionerContext)();
+  const open = store.useState('open');
   const state = React.useMemo(() => ({
     open,
     side,

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,11 +28,10 @@ const PreviewCardBackdrop = exports.PreviewCardBackdrop = /*#__PURE__*/React.for
     className,
     ...elementProps
   } = componentProps;
-  const {
-    open,
-    mounted,
-    transitionStatus
-  } = (0, _PreviewCardContext.usePreviewCardRootContext)();
+  const store = (0, _PreviewCardContext.usePreviewCardRootContext)();
+  const open = store.useState('open');
+  const mounted = store.useState('mounted');
+  const transitionStatus = store.useState('transitionStatus');
   const state = React.useMemo(() => ({
     open,
     transitionStatus

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 getCloseDelay = (0, _useStableCallback.useStableCallback)(() => store.context.closeDelayRef.current);
+  (0, _floatingUiReact.useHoverFloatingInteraction)(floatingContext, {
+    closeDelay: getCloseDelay
+  });
   const state = React.useMemo(() => ({
     open,
     side,
     align,
+    instant: instantType,
     transitionStatus
-  }), [open, side, align, transitionStatus]);
+  }), [open, side, align, instantType, 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/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 {}
 }

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/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 {