@base-ui/react 1.6.0 → 1.7.0

package/popover/store/PopoverStore.js

@@ -1,5 +1,4 @@
 "use strict";
-/* eslint-disable react-hooks/rules-of-hooks */
 'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
@@ -7,68 +6,44 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PopoverStore = void 0;
+exports.createNullPopoverStore = createNullPopoverStore;
 var React = _interopRequireWildcard(require("react"));
 var ReactDOM = _interopRequireWildcard(require("react-dom"));
 var _store = require("@base-ui/utils/store");
 var _useTimeout = require("@base-ui/utils/useTimeout");
+var _empty = require("@base-ui/utils/empty");
 var _reasons = require("../../internals/reasons");
+var _NullStore = require("../../utils/NullStore");
 var _popups = require("../../utils/popups");
 var _constants = require("../../internals/constants");
-function createInitialState() {
-  return {
-    ...(0, _popups.createInitialPopupStoreState)(),
-    disabled: false,
-    modal: false,
-    focusManagerModal: false,
-    instantType: undefined,
-    openMethod: null,
-    openChangeReason: null,
-    titleElementId: undefined,
-    descriptionElementId: undefined,
-    stickIfOpen: true,
-    nested: false,
-    openOnHover: false,
-    closeDelay: 0,
-    hasViewport: false
-  };
-}
 const selectors = {
   ..._popups.popupStoreSelectors,
-  disabled: (0, _store.createSelector)(state => state.disabled),
-  instantType: (0, _store.createSelector)(state => state.instantType),
-  openMethod: (0, _store.createSelector)(state => state.openMethod),
-  openChangeReason: (0, _store.createSelector)(state => state.openChangeReason),
-  modal: (0, _store.createSelector)(state => state.modal),
-  focusManagerModal: (0, _store.createSelector)(state => state.focusManagerModal),
-  stickIfOpen: (0, _store.createSelector)(state => state.stickIfOpen),
-  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),
-  hasViewport: (0, _store.createSelector)(state => state.hasViewport)
+  disabled: state => state.disabled,
+  instantType: state => state.instantType,
+  openMethod: state => state.openMethod,
+  openChangeReason: state => state.openChangeReason,
+  modal: state => state.modal,
+  focusManagerModal: state => state.focusManagerModal,
+  stickIfOpen: state => state.stickIfOpen,
+  titleElementId: state => state.titleElementId,
+  descriptionElementId: state => state.descriptionElementId,
+  openOnHover: state => state.openOnHover,
+  closeDelay: state => state.closeDelay,
+  adaptiveOrigin: state => state.adaptiveOrigin
 };
+
+/**
+ * The store view that detached handle-backed triggers read from. Both the real `PopoverStore` and
+ * the inert fallback store satisfy it, so a trigger can read from whichever store the handle
+ * currently exposes. Narrowed to the members a trigger actually uses — the trigger-data members plus
+ * `setOpen` (called by the focus guards) — so the exposed surface can't bypass the open-change
+ * pipeline; on the detached fallback store every one of these mutations is a no-op.
+ */
+
 class PopoverStore extends _store.ReactStore {
-  constructor(initialState, floatingId, nested = false) {
-    const initial = {
-      ...createInitialState(),
-      ...initialState
-    };
+  constructor(initialState, floatingId, nested) {
     const triggerElements = new _popups.PopupTriggerMap();
-    if (initial.open && initialState?.mounted === undefined) {
-      initial.mounted = true;
-    }
-    initial.floatingRootContext = (0, _popups.createPopupFloatingRootContext)(triggerElements, floatingId, nested);
-    super(initial, {
-      popupRef: /*#__PURE__*/React.createRef(),
-      backdropRef: /*#__PURE__*/React.createRef(),
-      internalBackdropRef: /*#__PURE__*/React.createRef(),
-      onOpenChange: undefined,
-      onOpenChangeComplete: undefined,
-      triggerFocusTargetRef: /*#__PURE__*/React.createRef(),
-      beforeContentFocusGuardRef: /*#__PURE__*/React.createRef(),
-      stickIfOpenTimeout: new _useTimeout.Timeout(),
-      triggerElements
-    }, selectors);
+    super(createInitialState(initialState, triggerElements, floatingId, nested), createInitialContext(triggerElements), selectors);
   }
   setOpen = (nextOpen, eventDetails) => {
     const isHover = eventDetails.reason === _reasons.REASONS.triggerHover;
@@ -103,24 +78,64 @@ class PopoverStore extends _store.ReactStore {
     } else {
       changeState();
     }
-    if (isKeyboardClick || isDismissClose) {
-      this.set('instantType', isKeyboardClick ? 'click' : 'dismiss');
+    let instantType;
+    if (isKeyboardClick) {
+      instantType = 'click';
+    } else if (isDismissClose) {
+      instantType = 'dismiss';
     } else if (eventDetails.reason === _reasons.REASONS.focusOut) {
-      this.set('instantType', 'focus');
-    } else {
-      this.set('instantType', undefined);
+      instantType = 'focus';
     }
+    this.set('instantType', instantType);
   };
-  static useStore(externalStore, initialState) {
-    const {
-      store,
-      internalStore
-    } = (0, _popups.usePopupStore)(externalStore, (floatingId, nested) => new PopoverStore(initialState, floatingId, nested));
-    React.useEffect(() => internalStore?.disposeEffect(), [internalStore]);
-    return store;
-  }
-  disposeEffect = () => {
-    return this.context.stickIfOpenTimeout.disposeEffect();
+}
+
+/**
+ * Creates the inert fallback store used by detached handle-backed triggers while no
+ * `Popover.Root` is attached. It preserves a popover-specific trigger registry in context so
+ * detached triggers can register before migrating to the live root store. `setOpen` is a no-op
+ * (matching the inert reads/writes of `NullStore`), so a trigger can hand the store to focus-guard
+ * helpers that expect `setOpen` without it ever taking effect while detached.
+ */
+exports.PopoverStore = PopoverStore;
+function createNullPopoverStore() {
+  const triggerElements = new _popups.PopupTriggerMap();
+  const store = new _NullStore.NullStore(Object.freeze(createInitialState(undefined, triggerElements)), Object.freeze(createInitialContext(triggerElements)), selectors);
+  return Object.assign(store, {
+    setOpen: _empty.NOOP
+  });
+}
+function createInitialState(initialState, triggerElements, floatingId, nested = false) {
+  const state = {
+    ...(0, _popups.createInitialPopupStoreState)(),
+    disabled: false,
+    modal: false,
+    focusManagerModal: false,
+    instantType: undefined,
+    openMethod: null,
+    openChangeReason: null,
+    titleElementId: undefined,
+    descriptionElementId: undefined,
+    stickIfOpen: true,
+    openOnHover: false,
+    closeDelay: 0,
+    adaptiveOrigin: undefined,
+    ...initialState
   };
+  if (state.open && initialState?.mounted === undefined) {
+    state.mounted = true;
+  }
+  state.floatingRootContext = (0, _popups.createPopupFloatingRootContext)(triggerElements, floatingId, nested);
+  return state;
 }
-exports.PopoverStore = PopoverStore;
+function createInitialContext(triggerElements) {
+  return {
+    popupRef: /*#__PURE__*/React.createRef(),
+    onOpenChange: undefined,
+    onOpenChangeComplete: undefined,
+    triggerFocusTargetRef: /*#__PURE__*/React.createRef(),
+    beforeContentFocusGuardRef: /*#__PURE__*/React.createRef(),
+    stickIfOpenTimeout: new _useTimeout.Timeout(),
+    triggerElements
+  };
+}

package/popover/store/PopoverStore.mjs

@@ -1,68 +1,42 @@
-/* eslint-disable react-hooks/rules-of-hooks */
 'use client';
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { ReactStore, createSelector } from '@base-ui/utils/store';
+import { ReactStore } from '@base-ui/utils/store';
 import { Timeout } from '@base-ui/utils/useTimeout';
+import { NOOP } from '@base-ui/utils/empty';
 import { REASONS } from "../../internals/reasons.mjs";
-import { attachPreventUnmountOnClose, createPopupFloatingRootContext, createInitialPopupStoreState, popupStoreSelectors, PopupTriggerMap, setPopupOpenState, usePopupStore } from "../../utils/popups/index.mjs";
+import { NullStore } from "../../utils/NullStore.mjs";
+import { attachPreventUnmountOnClose, createPopupFloatingRootContext, createInitialPopupStoreState, popupStoreSelectors, PopupTriggerMap, setPopupOpenState } from "../../utils/popups/index.mjs";
 import { PATIENT_CLICK_THRESHOLD } from "../../internals/constants.mjs";
-function createInitialState() {
-  return {
-    ...createInitialPopupStoreState(),
-    disabled: false,
-    modal: false,
-    focusManagerModal: false,
-    instantType: undefined,
-    openMethod: null,
-    openChangeReason: null,
-    titleElementId: undefined,
-    descriptionElementId: undefined,
-    stickIfOpen: true,
-    nested: false,
-    openOnHover: false,
-    closeDelay: 0,
-    hasViewport: false
-  };
-}
 const selectors = {
   ...popupStoreSelectors,
-  disabled: createSelector(state => state.disabled),
-  instantType: createSelector(state => state.instantType),
-  openMethod: createSelector(state => state.openMethod),
-  openChangeReason: createSelector(state => state.openChangeReason),
-  modal: createSelector(state => state.modal),
-  focusManagerModal: createSelector(state => state.focusManagerModal),
-  stickIfOpen: createSelector(state => state.stickIfOpen),
-  titleElementId: createSelector(state => state.titleElementId),
-  descriptionElementId: createSelector(state => state.descriptionElementId),
-  openOnHover: createSelector(state => state.openOnHover),
-  closeDelay: createSelector(state => state.closeDelay),
-  hasViewport: createSelector(state => state.hasViewport)
+  disabled: state => state.disabled,
+  instantType: state => state.instantType,
+  openMethod: state => state.openMethod,
+  openChangeReason: state => state.openChangeReason,
+  modal: state => state.modal,
+  focusManagerModal: state => state.focusManagerModal,
+  stickIfOpen: state => state.stickIfOpen,
+  titleElementId: state => state.titleElementId,
+  descriptionElementId: state => state.descriptionElementId,
+  openOnHover: state => state.openOnHover,
+  closeDelay: state => state.closeDelay,
+  adaptiveOrigin: state => state.adaptiveOrigin
 };
+
+/**
+ * The store view that detached handle-backed triggers read from. Both the real `PopoverStore` and
+ * the inert fallback store satisfy it, so a trigger can read from whichever store the handle
+ * currently exposes. Narrowed to the members a trigger actually uses — the trigger-data members plus
+ * `setOpen` (called by the focus guards) — so the exposed surface can't bypass the open-change
+ * pipeline; on the detached fallback store every one of these mutations is a no-op.
+ */
+
 export class PopoverStore extends ReactStore {
-  constructor(initialState, floatingId, nested = false) {
-    const initial = {
-      ...createInitialState(),
-      ...initialState
-    };
+  constructor(initialState, floatingId, nested) {
     const triggerElements = new PopupTriggerMap();
-    if (initial.open && initialState?.mounted === undefined) {
-      initial.mounted = true;
-    }
-    initial.floatingRootContext = createPopupFloatingRootContext(triggerElements, floatingId, nested);
-    super(initial, {
-      popupRef: /*#__PURE__*/React.createRef(),
-      backdropRef: /*#__PURE__*/React.createRef(),
-      internalBackdropRef: /*#__PURE__*/React.createRef(),
-      onOpenChange: undefined,
-      onOpenChangeComplete: undefined,
-      triggerFocusTargetRef: /*#__PURE__*/React.createRef(),
-      beforeContentFocusGuardRef: /*#__PURE__*/React.createRef(),
-      stickIfOpenTimeout: new Timeout(),
-      triggerElements
-    }, selectors);
+    super(createInitialState(initialState, triggerElements, floatingId, nested), createInitialContext(triggerElements), selectors);
   }
   setOpen = (nextOpen, eventDetails) => {
     const isHover = eventDetails.reason === REASONS.triggerHover;
@@ -97,23 +71,63 @@ export class PopoverStore extends ReactStore {
     } else {
       changeState();
     }
-    if (isKeyboardClick || isDismissClose) {
-      this.set('instantType', isKeyboardClick ? 'click' : 'dismiss');
+    let instantType;
+    if (isKeyboardClick) {
+      instantType = 'click';
+    } else if (isDismissClose) {
+      instantType = 'dismiss';
     } else if (eventDetails.reason === REASONS.focusOut) {
-      this.set('instantType', 'focus');
-    } else {
-      this.set('instantType', undefined);
+      instantType = 'focus';
     }
+    this.set('instantType', instantType);
   };
-  static useStore(externalStore, initialState) {
-    const {
-      store,
-      internalStore
-    } = usePopupStore(externalStore, (floatingId, nested) => new PopoverStore(initialState, floatingId, nested));
-    React.useEffect(() => internalStore?.disposeEffect(), [internalStore]);
-    return store;
+}
+
+/**
+ * Creates the inert fallback store used by detached handle-backed triggers while no
+ * `Popover.Root` is attached. It preserves a popover-specific trigger registry in context so
+ * detached triggers can register before migrating to the live root store. `setOpen` is a no-op
+ * (matching the inert reads/writes of `NullStore`), so a trigger can hand the store to focus-guard
+ * helpers that expect `setOpen` without it ever taking effect while detached.
+ */
+export function createNullPopoverStore() {
+  const triggerElements = new PopupTriggerMap();
+  const store = new NullStore(Object.freeze(createInitialState(undefined, triggerElements)), Object.freeze(createInitialContext(triggerElements)), selectors);
+  return Object.assign(store, {
+    setOpen: NOOP
+  });
+}
+function createInitialState(initialState, triggerElements, floatingId, nested = false) {
+  const state = {
+    ...createInitialPopupStoreState(),
+    disabled: false,
+    modal: false,
+    focusManagerModal: false,
+    instantType: undefined,
+    openMethod: null,
+    openChangeReason: null,
+    titleElementId: undefined,
+    descriptionElementId: undefined,
+    stickIfOpen: true,
+    openOnHover: false,
+    closeDelay: 0,
+    adaptiveOrigin: undefined,
+    ...initialState
+  };
+  if (state.open && initialState?.mounted === undefined) {
+    state.mounted = true;
   }
-  disposeEffect = () => {
-    return this.context.stickIfOpenTimeout.disposeEffect();
+  state.floatingRootContext = createPopupFloatingRootContext(triggerElements, floatingId, nested);
+  return state;
+}
+function createInitialContext(triggerElements) {
+  return {
+    popupRef: /*#__PURE__*/React.createRef(),
+    onOpenChange: undefined,
+    onOpenChangeComplete: undefined,
+    triggerFocusTargetRef: /*#__PURE__*/React.createRef(),
+    beforeContentFocusGuardRef: /*#__PURE__*/React.createRef(),
+    stickIfOpenTimeout: new Timeout(),
+    triggerElements
   };
 }

package/popover/title/PopoverTitle.js

@@ -23,9 +23,7 @@ const PopoverTitle = exports.PopoverTitle = /*#__PURE__*/React.forwardRef(functi
     style,
     ...elementProps
   } = componentProps;
-  const {
-    store
-  } = (0, _PopoverRootContext.usePopoverRootContext)();
+  const store = (0, _PopoverRootContext.usePopoverRootContext)();
   const id = (0, _useBaseUiId.useBaseUiId)(elementProps.id);
   store.useSyncedValueWithCleanup('titleElementId', id);
   const element = (0, _useRenderElement.useRenderElement)('h2', componentProps, {

package/popover/title/PopoverTitle.mjs

@@ -18,9 +18,7 @@ export const PopoverTitle = /*#__PURE__*/React.forwardRef(function PopoverTitle(
     style,
     ...elementProps
   } = componentProps;
-  const {
-    store
-  } = usePopoverRootContext();
+  const store = usePopoverRootContext();
   const id = useBaseUiId(elementProps.id);
   store.useSyncedValueWithCleanup('titleElementId', id);
   const element = useRenderElement('h2', componentProps, {

package/popover/trigger/PopoverTrigger.js

@@ -44,8 +44,9 @@ const PopoverTrigger = exports.PopoverTrigger = /*#__PURE__*/React.forwardRef(fu
     id: idProp,
     ...elementProps
   } = componentProps;
-  const rootContext = (0, _PopoverRootContext.usePopoverRootContext)(true);
-  const store = handle?.store ?? rootContext?.store;
+  const rootStore = (0, _PopoverRootContext.usePopoverRootContext)(true);
+  const handleStore = (0, _popups.usePopupHandleStore)(handle);
+  const store = handleStore ?? rootStore;
   if (!store) {
     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));
   }
@@ -69,7 +70,7 @@ const PopoverTrigger = exports.PopoverTrigger = /*#__PURE__*/React.forwardRef(fu
   const openMethod = store.useState('openMethod');
   const focusManagerModal = store.useState('focusManagerModal');
   const hoverProps = (0, _floatingUiReact.useHoverReferenceInteraction)(floatingContext, {
-    enabled: !disabled && floatingContext != null && openOnHover && (openMethod !== 'touch' || openReason !== _reasons.REASONS.triggerPress),
+    enabled: !disabled && openOnHover && (openMethod !== 'touch' || openReason !== _reasons.REASONS.triggerPress),
     mouseOnly: true,
     move: false,
     handleClose: (0, _floatingUiReact.safePolygon)(),
@@ -82,7 +83,6 @@ const PopoverTrigger = exports.PopoverTrigger = /*#__PURE__*/React.forwardRef(fu
     isClosing: () => store.select('transitionStatus') === 'ending'
   });
   const click = (0, _floatingUiReact.useClick)(floatingContext, {
-    enabled: floatingContext != null,
     stickIfOpen
   });
   const interactionTypeProps = (0, _useOpenInteractionType.useOpenMethodTriggerProps)(() => store.select('open'), interactionType => {
@@ -128,22 +128,20 @@ const PopoverTrigger = exports.PopoverTrigger = /*#__PURE__*/React.forwardRef(fu
 
   // A fragment with key is required to ensure that the `element` is mounted to the same DOM node
   // regardless of whether the focus guards are rendered or not.
-
+  const keyedElement = /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+    children: element
+  }, thisTriggerId);
   if (isMountedByThisTrigger && !focusManagerModal) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusGuard.FocusGuard, {
         ref: preFocusGuardRef,
         onFocus: handlePreFocusGuardFocus
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
-        children: element
-      }, thisTriggerId), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusGuard.FocusGuard, {
+      }), keyedElement, /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusGuard.FocusGuard, {
         ref: store.context.triggerFocusTargetRef,
         onFocus: handleFocusTargetFocus
       })]
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
-    children: element
-  }, thisTriggerId);
+  return keyedElement;
 });
 if (process.env.NODE_ENV !== "production") PopoverTrigger.displayName = "PopoverTrigger";

package/popover/trigger/PopoverTrigger.mjs

@@ -12,7 +12,7 @@ import { OPEN_DELAY } from "../utils/constants.mjs";
 import { useBaseUiId } from "../../internals/useBaseUiId.mjs";
 import { FocusGuard } from "../../utils/FocusGuard.mjs";
 import { REASONS } from "../../internals/reasons.mjs";
-import { useTriggerDataForwarding } from "../../utils/popups/index.mjs";
+import { usePopupHandleStore, useTriggerDataForwarding } from "../../utils/popups/index.mjs";
 import { useTriggerFocusGuards } from "../../utils/popups/useTriggerFocusGuards.mjs";
 import { useOpenMethodTriggerProps } from "../../utils/useOpenInteractionType.mjs";
 
@@ -38,8 +38,9 @@ export const PopoverTrigger = /*#__PURE__*/React.forwardRef(function PopoverTrig
     id: idProp,
     ...elementProps
   } = componentProps;
-  const rootContext = usePopoverRootContext(true);
-  const store = handle?.store ?? rootContext?.store;
+  const rootStore = usePopoverRootContext(true);
+  const handleStore = usePopupHandleStore(handle);
+  const store = handleStore ?? rootStore;
   if (!store) {
     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.' : _formatErrorMessage(74));
   }
@@ -63,7 +64,7 @@ export const PopoverTrigger = /*#__PURE__*/React.forwardRef(function PopoverTrig
   const openMethod = store.useState('openMethod');
   const focusManagerModal = store.useState('focusManagerModal');
   const hoverProps = useHoverReferenceInteraction(floatingContext, {
-    enabled: !disabled && floatingContext != null && openOnHover && (openMethod !== 'touch' || openReason !== REASONS.triggerPress),
+    enabled: !disabled && openOnHover && (openMethod !== 'touch' || openReason !== REASONS.triggerPress),
     mouseOnly: true,
     move: false,
     handleClose: safePolygon(),
@@ -76,7 +77,6 @@ export const PopoverTrigger = /*#__PURE__*/React.forwardRef(function PopoverTrig
     isClosing: () => store.select('transitionStatus') === 'ending'
   });
   const click = useClick(floatingContext, {
-    enabled: floatingContext != null,
     stickIfOpen
   });
   const interactionTypeProps = useOpenMethodTriggerProps(() => store.select('open'), interactionType => {
@@ -122,22 +122,20 @@ export const PopoverTrigger = /*#__PURE__*/React.forwardRef(function PopoverTrig
 
   // A fragment with key is required to ensure that the `element` is mounted to the same DOM node
   // regardless of whether the focus guards are rendered or not.
-
+  const keyedElement = /*#__PURE__*/_jsx(React.Fragment, {
+    children: element
+  }, thisTriggerId);
   if (isMountedByThisTrigger && !focusManagerModal) {
     return /*#__PURE__*/_jsxs(React.Fragment, {
       children: [/*#__PURE__*/_jsx(FocusGuard, {
         ref: preFocusGuardRef,
         onFocus: handlePreFocusGuardFocus
-      }), /*#__PURE__*/_jsx(React.Fragment, {
-        children: element
-      }, thisTriggerId), /*#__PURE__*/_jsx(FocusGuard, {
+      }), keyedElement, /*#__PURE__*/_jsx(FocusGuard, {
         ref: store.context.triggerFocusTargetRef,
         onFocus: handleFocusTargetFocus
       })]
     });
   }
-  return /*#__PURE__*/_jsx(React.Fragment, {
-    children: element
-  }, thisTriggerId);
+  return keyedElement;
 });
 if (process.env.NODE_ENV !== "production") PopoverTrigger.displayName = "PopoverTrigger";

package/popover/viewport/PopoverViewport.js

@@ -10,14 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _PopoverRootContext = require("../root/PopoverRootContext");
 var _PopoverPositionerContext = require("../positioner/PopoverPositionerContext");
 var _useRenderElement = require("../../internals/useRenderElement");
-var _PopoverViewportCssVars = require("./PopoverViewportCssVars");
 var _usePopupViewport = require("../../utils/usePopupViewport");
-const stateAttributesMapping = {
-  activationDirection: value => value ? {
-    'data-activation-direction': value
-  } : null
-};
-
 /**
  * A viewport for displaying content transitions.
  * This component is only required if one popup can be opened by multiple triggers, its content
@@ -34,9 +27,7 @@ const PopoverViewport = exports.PopoverViewport = /*#__PURE__*/React.forwardRef(
     children,
     ...elementProps
   } = componentProps;
-  const {
-    store
-  } = (0, _PopoverRootContext.usePopoverRootContext)();
+  const store = (0, _PopoverRootContext.usePopoverRootContext)();
   const {
     side
   } = (0, _PopoverPositionerContext.usePopoverPositionerContext)();
@@ -47,7 +38,6 @@ const PopoverViewport = exports.PopoverViewport = /*#__PURE__*/React.forwardRef(
   } = (0, _usePopupViewport.usePopupViewport)({
     store,
     side,
-    cssVars: _PopoverViewportCssVars.PopoverViewportCssVars,
     children
   });
   const state = {
@@ -61,7 +51,7 @@ const PopoverViewport = exports.PopoverViewport = /*#__PURE__*/React.forwardRef(
     props: [elementProps, {
       children: childrenToRender
     }],
-    stateAttributesMapping
+    stateAttributesMapping: _usePopupViewport.popupViewportStateMapping
   });
 });
 if (process.env.NODE_ENV !== "production") PopoverViewport.displayName = "PopoverViewport";

package/popover/viewport/PopoverViewport.mjs

@@ -4,13 +4,7 @@ import * as React from 'react';
 import { usePopoverRootContext } from "../root/PopoverRootContext.mjs";
 import { usePopoverPositionerContext } from "../positioner/PopoverPositionerContext.mjs";
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
-import { PopoverViewportCssVars } from "./PopoverViewportCssVars.mjs";
-import { usePopupViewport } from "../../utils/usePopupViewport.mjs";
-const stateAttributesMapping = {
-  activationDirection: value => value ? {
-    'data-activation-direction': value
-  } : null
-};
+import { popupViewportStateMapping, usePopupViewport } from "../../utils/usePopupViewport.mjs";
 
 /**
  * A viewport for displaying content transitions.
@@ -28,9 +22,7 @@ export const PopoverViewport = /*#__PURE__*/React.forwardRef(function PopoverVie
     children,
     ...elementProps
   } = componentProps;
-  const {
-    store
-  } = usePopoverRootContext();
+  const store = usePopoverRootContext();
   const {
     side
   } = usePopoverPositionerContext();
@@ -41,7 +33,6 @@ export const PopoverViewport = /*#__PURE__*/React.forwardRef(function PopoverVie
   } = usePopupViewport({
     store,
     side,
-    cssVars: PopoverViewportCssVars,
     children
   });
   const state = {
@@ -55,7 +46,7 @@ export const PopoverViewport = /*#__PURE__*/React.forwardRef(function PopoverVie
     props: [elementProps, {
       children: childrenToRender
     }],
-    stateAttributesMapping
+    stateAttributesMapping: popupViewportStateMapping
   });
 });
 if (process.env.NODE_ENV !== "production") PopoverViewport.displayName = "PopoverViewport";

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../internals/types.mjs";
-import type { Align, Side } from "../../utils/useAnchorPositioning.mjs";
+import type { Align, Side } from "../../internals/useAnchorPositioning.mjs";
 /**
  * Displays an element positioned against the preview card anchor.
  * Renders a `<div>` element.

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../internals/types.js";
-import type { Align, Side } from "../../utils/useAnchorPositioning.js";
+import type { Align, Side } from "../../internals/useAnchorPositioning.js";
 /**
  * Displays an element positioned against the preview card anchor.
  * Renders a `<div>` element.

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { BaseUIComponentProps } from "../../internals/types.mjs";
 import type { TransitionStatus } from "../../internals/useTransitionStatus.mjs";
 /**
- * An overlay displayed beneath the popup.
+ * A presentational overlay displayed beneath the popup.
  * Renders a `<div>` element.
  *
  * Documentation: [Base UI Preview Card](https://base-ui.com/react/components/preview-card)

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { BaseUIComponentProps } from "../../internals/types.js";
 import type { TransitionStatus } from "../../internals/useTransitionStatus.js";
 /**
- * An overlay displayed beneath the popup.
+ * A presentational overlay displayed beneath the popup.
  * Renders a `<div>` element.
  *
  * Documentation: [Base UI Preview Card](https://base-ui.com/react/components/preview-card)

package/preview-card/backdrop/PreviewCardBackdrop.js

@@ -9,15 +9,9 @@ exports.PreviewCardBackdrop = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _PreviewCardContext = require("../root/PreviewCardContext");
 var _popupStateMapping = require("../../utils/popupStateMapping");
-var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
 var _useRenderElement = require("../../internals/useRenderElement");
-const stateAttributesMapping = {
-  ..._popupStateMapping.popupStateMapping,
-  ..._stateAttributesMapping.transitionStatusMapping
-};
-
 /**
- * An overlay displayed beneath the popup.
+ * A presentational overlay displayed beneath the popup.
  * Renders a `<div>` element.
  *
  * Documentation: [Base UI Preview Card](https://base-ui.com/react/components/preview-card)
@@ -49,7 +43,7 @@ const PreviewCardBackdrop = exports.PreviewCardBackdrop = /*#__PURE__*/React.for
         WebkitUserSelect: 'none'
       }
     }, elementProps],
-    stateAttributesMapping
+    stateAttributesMapping: _popupStateMapping.popupTransitionStateMapping
   });
   return element;
 });