@base-ui/react 1.6.0 → 1.7.0

package/popover/description/PopoverDescription.js

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

package/popover/description/PopoverDescription.mjs

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

package/popover/popup/PopoverPopup.d.mts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { InteractionType } from '@base-ui/utils/useEnhancedClickHandler';
-import type { Side, Align } from "../../utils/useAnchorPositioning.mjs";
+import type { Side, Align } from "../../internals/useAnchorPositioning.mjs";
 import type { BaseUIComponentProps } from "../../internals/types.mjs";
 import type { TransitionStatus } from "../../internals/useTransitionStatus.mjs";
 /**

package/popover/popup/PopoverPopup.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { InteractionType } from '@base-ui/utils/useEnhancedClickHandler';
-import type { Side, Align } from "../../utils/useAnchorPositioning.js";
+import type { Side, Align } from "../../internals/useAnchorPositioning.js";
 import type { BaseUIComponentProps } from "../../internals/types.js";
 import type { TransitionStatus } from "../../internals/useTransitionStatus.js";
 /**

package/popover/popup/PopoverPopup.js

@@ -12,21 +12,15 @@ var _floatingUiReact = require("../../floating-ui-react");
 var _PopoverRootContext = require("../root/PopoverRootContext");
 var _PopoverPositionerContext = require("../positioner/PopoverPositionerContext");
 var _popupStateMapping = require("../../utils/popupStateMapping");
-var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
 var _useOpenChangeComplete = require("../../internals/useOpenChangeComplete");
 var _useRenderElement = require("../../internals/useRenderElement");
 var _reasons = require("../../internals/reasons");
 var _composite = require("../../internals/composite/composite");
 var _ToolbarRootContext = require("../../toolbar/root/ToolbarRootContext");
-var _getDisabledMountTransitionStyles = require("../../utils/getDisabledMountTransitionStyles");
+var _getDisabledMountTransitionStyles = require("../../internals/getDisabledMountTransitionStyles");
 var _closePart = require("../../utils/closePart");
 var _popups = require("../../utils/popups");
 var _jsxRuntime = require("react/jsx-runtime");
-const stateAttributesMapping = {
-  ..._popupStateMapping.popupStateMapping,
-  ..._stateAttributesMapping.transitionStatusMapping
-};
-
 /**
  * A container for the popover contents.
  * Renders a `<div>` element.
@@ -42,9 +36,7 @@ const PopoverPopup = exports.PopoverPopup = /*#__PURE__*/React.forwardRef(functi
     finalFocus,
     ...elementProps
   } = componentProps;
-  const {
-    store
-  } = (0, _PopoverRootContext.usePopoverRootContext)();
+  const store = (0, _PopoverRootContext.usePopoverRootContext)();
   const positioner = (0, _PopoverPositionerContext.usePopoverPositionerContext)();
   const insideToolbar = (0, _ToolbarRootContext.useToolbarRootContext)(true) != null;
   const {
@@ -67,7 +59,6 @@ const PopoverPopup = exports.PopoverPopup = /*#__PURE__*/React.forwardRef(functi
   const disabled = store.useState('disabled');
   const openOnHover = store.useState('openOnHover');
   const closeDelay = store.useState('closeDelay');
-  const popupId = elementProps.id ?? floatingId;
   (0, _useOpenChangeComplete.useOpenChangeComplete)({
     open,
     ref: store.context.popupRef,
@@ -84,9 +75,7 @@ const PopoverPopup = exports.PopoverPopup = /*#__PURE__*/React.forwardRef(functi
   const resolvedInitialFocus = initialFocus === undefined ? (0, _popups.createDefaultInitialFocus)(store.context.popupRef) : initialFocus;
   const focusManagerModal = modal !== false && hasClosePart;
   store.useSyncedValue('focusManagerModal', focusManagerModal);
-  const setPopupElement = React.useCallback(element => {
-    store.set('popupElement', element);
-  }, [store]);
+  const setPopupElement = store.useStateSetter('popupElement');
   const state = {
     open,
     side: positioner.side,
@@ -98,7 +87,7 @@ const PopoverPopup = exports.PopoverPopup = /*#__PURE__*/React.forwardRef(functi
     state,
     ref: [forwardedRef, store.context.popupRef, setPopupElement],
     props: [popupProps, {
-      id: popupId,
+      id: floatingId,
       role: 'dialog',
       ..._popups.FOCUSABLE_POPUP_PROPS,
       'aria-labelledby': titleId,
@@ -109,7 +98,7 @@ const PopoverPopup = exports.PopoverPopup = /*#__PURE__*/React.forwardRef(functi
         }
       }
     }, (0, _getDisabledMountTransitionStyles.getDisabledMountTransitionStyles)(transitionStatus), elementProps],
-    stateAttributesMapping
+    stateAttributesMapping: _popupStateMapping.popupTransitionStateMapping
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingUiReact.FloatingFocusManager, {
     context: floatingContext,
@@ -122,7 +111,7 @@ const PopoverPopup = exports.PopoverPopup = /*#__PURE__*/React.forwardRef(functi
     previousFocusableElement: (0, _dom.isHTMLElement)(activeTriggerElement) ? activeTriggerElement : undefined,
     nextFocusableElement: store.context.triggerFocusTargetRef,
     beforeContentFocusGuardRef: store.context.beforeContentFocusGuardRef,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_closePart.ClosePartProvider, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_closePart.ClosePartContext.Provider, {
       value: closePartContext,
       children: element
     })

package/popover/popup/PopoverPopup.mjs

@@ -5,21 +5,15 @@ import { isHTMLElement } from '@floating-ui/utils/dom';
 import { FloatingFocusManager, useHoverFloatingInteraction } from "../../floating-ui-react/index.mjs";
 import { usePopoverRootContext } from "../root/PopoverRootContext.mjs";
 import { usePopoverPositionerContext } from "../positioner/PopoverPositionerContext.mjs";
-import { popupStateMapping as baseMapping } from "../../utils/popupStateMapping.mjs";
-import { transitionStatusMapping } from "../../internals/stateAttributesMapping.mjs";
+import { popupTransitionStateMapping } from "../../utils/popupStateMapping.mjs";
 import { useOpenChangeComplete } from "../../internals/useOpenChangeComplete.mjs";
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
 import { REASONS } from "../../internals/reasons.mjs";
 import { COMPOSITE_KEYS } from "../../internals/composite/composite.mjs";
 import { useToolbarRootContext } from "../../toolbar/root/ToolbarRootContext.mjs";
-import { getDisabledMountTransitionStyles } from "../../utils/getDisabledMountTransitionStyles.mjs";
-import { ClosePartProvider, useClosePartCount } from "../../utils/closePart.mjs";
+import { getDisabledMountTransitionStyles } from "../../internals/getDisabledMountTransitionStyles.mjs";
+import { ClosePartContext, useClosePartCount } from "../../utils/closePart.mjs";
 import { FOCUSABLE_POPUP_PROPS, createDefaultInitialFocus } from "../../utils/popups/index.mjs";
-import { jsx as _jsx } from "react/jsx-runtime";
-const stateAttributesMapping = {
-  ...baseMapping,
-  ...transitionStatusMapping
-};
 
 /**
  * A container for the popover contents.
@@ -27,6 +21,7 @@ const stateAttributesMapping = {
  *
  * Documentation: [Base UI Popover](https://base-ui.com/react/components/popover)
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 export const PopoverPopup = /*#__PURE__*/React.forwardRef(function PopoverPopup(componentProps, forwardedRef) {
   const {
     render,
@@ -36,9 +31,7 @@ export const PopoverPopup = /*#__PURE__*/React.forwardRef(function PopoverPopup(
     finalFocus,
     ...elementProps
   } = componentProps;
-  const {
-    store
-  } = usePopoverRootContext();
+  const store = usePopoverRootContext();
   const positioner = usePopoverPositionerContext();
   const insideToolbar = useToolbarRootContext(true) != null;
   const {
@@ -61,7 +54,6 @@ export const PopoverPopup = /*#__PURE__*/React.forwardRef(function PopoverPopup(
   const disabled = store.useState('disabled');
   const openOnHover = store.useState('openOnHover');
   const closeDelay = store.useState('closeDelay');
-  const popupId = elementProps.id ?? floatingId;
   useOpenChangeComplete({
     open,
     ref: store.context.popupRef,
@@ -78,9 +70,7 @@ export const PopoverPopup = /*#__PURE__*/React.forwardRef(function PopoverPopup(
   const resolvedInitialFocus = initialFocus === undefined ? createDefaultInitialFocus(store.context.popupRef) : initialFocus;
   const focusManagerModal = modal !== false && hasClosePart;
   store.useSyncedValue('focusManagerModal', focusManagerModal);
-  const setPopupElement = React.useCallback(element => {
-    store.set('popupElement', element);
-  }, [store]);
+  const setPopupElement = store.useStateSetter('popupElement');
   const state = {
     open,
     side: positioner.side,
@@ -92,7 +82,7 @@ export const PopoverPopup = /*#__PURE__*/React.forwardRef(function PopoverPopup(
     state,
     ref: [forwardedRef, store.context.popupRef, setPopupElement],
     props: [popupProps, {
-      id: popupId,
+      id: floatingId,
       role: 'dialog',
       ...FOCUSABLE_POPUP_PROPS,
       'aria-labelledby': titleId,
@@ -103,7 +93,7 @@ export const PopoverPopup = /*#__PURE__*/React.forwardRef(function PopoverPopup(
         }
       }
     }, getDisabledMountTransitionStyles(transitionStatus), elementProps],
-    stateAttributesMapping
+    stateAttributesMapping: popupTransitionStateMapping
   });
   return /*#__PURE__*/_jsx(FloatingFocusManager, {
     context: floatingContext,
@@ -116,7 +106,7 @@ export const PopoverPopup = /*#__PURE__*/React.forwardRef(function PopoverPopup(
     previousFocusableElement: isHTMLElement(activeTriggerElement) ? activeTriggerElement : undefined,
     nextFocusableElement: store.context.triggerFocusTargetRef,
     beforeContentFocusGuardRef: store.context.beforeContentFocusGuardRef,
-    children: /*#__PURE__*/_jsx(ClosePartProvider, {
+    children: /*#__PURE__*/_jsx(ClosePartContext.Provider, {
       value: closePartContext,
       children: element
     })

package/popover/popup/PopoverPopupDataAttributes.d.mts

@@ -8,7 +8,7 @@ export declare enum PopoverPopupDataAttributes {
    */
   closed = "data-closed",
   /**
-   * Present when the popup is animating in.
+   * Present when the popup begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

package/popover/popup/PopoverPopupDataAttributes.d.ts

@@ -8,7 +8,7 @@ export declare enum PopoverPopupDataAttributes {
    */
   closed = "data-closed",
   /**
-   * Present when the popup is animating in.
+   * Present when the popup begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

package/popover/popup/PopoverPopupDataAttributes.js

@@ -15,7 +15,7 @@ let PopoverPopupDataAttributes = exports.PopoverPopupDataAttributes = function (
    */
   PopoverPopupDataAttributes[PopoverPopupDataAttributes["closed"] = _popupStateMapping.CommonPopupDataAttributes.closed] = "closed";
   /**
-   * Present when the popup is animating in.
+   * Present when the popup begins animating in.
    */
   PopoverPopupDataAttributes[PopoverPopupDataAttributes["startingStyle"] = _popupStateMapping.CommonPopupDataAttributes.startingStyle] = "startingStyle";
   /**
@@ -26,12 +26,12 @@ let PopoverPopupDataAttributes = exports.PopoverPopupDataAttributes = function (
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  PopoverPopupDataAttributes["side"] = "data-side";
+  PopoverPopupDataAttributes[PopoverPopupDataAttributes["side"] = _popupStateMapping.CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  PopoverPopupDataAttributes["align"] = "data-align";
+  PopoverPopupDataAttributes[PopoverPopupDataAttributes["align"] = _popupStateMapping.CommonPopupDataAttributes.align] = "align";
   /**
    * Present if animations should be instant.
    * @type {'click' | 'dismiss' | 'focus' | 'trigger-change'}

package/popover/popup/PopoverPopupDataAttributes.mjs

@@ -9,7 +9,7 @@ export let PopoverPopupDataAttributes = function (PopoverPopupDataAttributes) {
    */
   PopoverPopupDataAttributes[PopoverPopupDataAttributes["closed"] = CommonPopupDataAttributes.closed] = "closed";
   /**
-   * Present when the popup is animating in.
+   * Present when the popup begins animating in.
    */
   PopoverPopupDataAttributes[PopoverPopupDataAttributes["startingStyle"] = CommonPopupDataAttributes.startingStyle] = "startingStyle";
   /**
@@ -20,12 +20,12 @@ export let PopoverPopupDataAttributes = function (PopoverPopupDataAttributes) {
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  PopoverPopupDataAttributes["side"] = "data-side";
+  PopoverPopupDataAttributes[PopoverPopupDataAttributes["side"] = CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  PopoverPopupDataAttributes["align"] = "data-align";
+  PopoverPopupDataAttributes[PopoverPopupDataAttributes["align"] = CommonPopupDataAttributes.align] = "align";
   /**
    * Present if animations should be instant.
    * @type {'click' | 'dismiss' | 'focus' | 'trigger-change'}

package/popover/portal/PopoverPortal.d.mts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FloatingPortal } from "../../floating-ui-react/index.mjs";
+import { type BaseUIComponentProps } from "../../internals/types.mjs";
 /**
  * A portal element that moves the popup to a different part of the DOM.
  * By default, the portal element is appended to `<body>`.
@@ -9,12 +9,16 @@ import { FloatingPortal } from "../../floating-ui-react/index.mjs";
  */
 export declare const PopoverPortal: React.ForwardRefExoticComponent<Omit<PopoverPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface PopoverPortalState {}
-export interface PopoverPortalProps extends FloatingPortal.Props<PopoverPortalState> {
+export interface PopoverPortalProps extends BaseUIComponentProps<'div', PopoverPortalState> {
   /**
    * Whether to keep the portal mounted in the DOM while the popup is hidden.
    * @default false
    */
   keepMounted?: boolean | undefined;
+  /**
+   * A parent element to render the portal element into.
+   */
+  container?: HTMLElement | ShadowRoot | React.RefObject<HTMLElement | ShadowRoot | null> | null | undefined;
 }
 export declare namespace PopoverPortal {
   type State = PopoverPortalState;

package/popover/portal/PopoverPortal.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FloatingPortal } from "../../floating-ui-react/index.js";
+import { type BaseUIComponentProps } from "../../internals/types.js";
 /**
  * A portal element that moves the popup to a different part of the DOM.
  * By default, the portal element is appended to `<body>`.
@@ -9,12 +9,16 @@ import { FloatingPortal } from "../../floating-ui-react/index.js";
  */
 export declare const PopoverPortal: React.ForwardRefExoticComponent<Omit<PopoverPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface PopoverPortalState {}
-export interface PopoverPortalProps extends FloatingPortal.Props<PopoverPortalState> {
+export interface PopoverPortalProps extends BaseUIComponentProps<'div', PopoverPortalState> {
   /**
    * Whether to keep the portal mounted in the DOM while the popup is hidden.
    * @default false
    */
   keepMounted?: boolean | undefined;
+  /**
+   * A parent element to render the portal element into.
+   */
+  container?: HTMLElement | ShadowRoot | React.RefObject<HTMLElement | ShadowRoot | null> | null | undefined;
 }
 export declare namespace PopoverPortal {
   type State = PopoverPortalState;

package/popover/portal/PopoverPortal.js

@@ -23,9 +23,7 @@ const PopoverPortal = exports.PopoverPortal = /*#__PURE__*/React.forwardRef(func
     keepMounted = false,
     ...portalProps
   } = props;
-  const {
-    store
-  } = (0, _PopoverRootContext.usePopoverRootContext)();
+  const store = (0, _PopoverRootContext.usePopoverRootContext)();
   const mounted = store.useState('mounted');
   const shouldRender = mounted || keepMounted;
   if (!shouldRender) {

package/popover/portal/PopoverPortal.mjs

@@ -18,9 +18,7 @@ export const PopoverPortal = /*#__PURE__*/React.forwardRef(function PopoverPorta
     keepMounted = false,
     ...portalProps
   } = props;
-  const {
-    store
-  } = usePopoverRootContext();
+  const store = usePopoverRootContext();
   const mounted = store.useState('mounted');
   const shouldRender = mounted || keepMounted;
   if (!shouldRender) {

package/popover/positioner/PopoverPositioner.d.mts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type Side, type Align, type UseAnchorPositioningSharedParameters } from "../../utils/useAnchorPositioning.mjs";
+import { type Side, type Align, type UseAnchorPositioningSharedParameters } from "../../internals/useAnchorPositioning.mjs";
 import type { BaseUIComponentProps } from "../../internals/types.mjs";
 /**
  * Positions the popover against the trigger.

package/popover/positioner/PopoverPositioner.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type Side, type Align, type UseAnchorPositioningSharedParameters } from "../../utils/useAnchorPositioning.js";
+import { type Side, type Align, type UseAnchorPositioningSharedParameters } from "../../internals/useAnchorPositioning.js";
 import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * Positions the popover against the trigger.

package/popover/positioner/PopoverPositioner.js

@@ -12,13 +12,12 @@ var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _floatingUiReact = require("../../floating-ui-react");
 var _PopoverRootContext = require("../root/PopoverRootContext");
 var _PopoverPositionerContext = require("./PopoverPositionerContext");
-var _useAnchorPositioning = require("../../utils/useAnchorPositioning");
+var _useAnchorPositioning = require("../../internals/useAnchorPositioning");
 var _PopoverPortalContext = require("../portal/PopoverPortalContext");
 var _InternalBackdrop = require("../../utils/InternalBackdrop");
 var _reasons = require("../../internals/reasons");
 var _constants = require("../../internals/constants");
 var _useAnimationsFinished = require("../../internals/useAnimationsFinished");
-var _adaptiveOriginMiddleware = require("../../utils/adaptiveOriginMiddleware");
 var _usePositioner = require("../../utils/usePositioner");
 var _useAnchoredPopupScrollLock = require("../../utils/useAnchoredPopupScrollLock");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -34,22 +33,22 @@ const PopoverPositioner = exports.PopoverPositioner = /*#__PURE__*/React.forward
     className,
     style,
     anchor,
-    positionMethod = 'absolute',
-    side = 'bottom',
-    align = 'center',
-    sideOffset = 0,
-    alignOffset = 0,
+    // `useAnchorPositioning` applies the same defaults to the undefined values; the names
+    // remain destructured to exclude the props from `elementProps`.
+    positionMethod,
+    side,
+    align,
+    sideOffset,
+    alignOffset,
     collisionBoundary = 'clipping-ancestors',
-    collisionPadding = 5,
-    arrowPadding = 5,
-    sticky = false,
+    collisionPadding,
+    arrowPadding,
+    sticky,
     disableAnchorTracking = false,
     collisionAvoidance = _constants.POPUP_COLLISION_AVOIDANCE,
     ...elementProps
   } = componentProps;
-  const {
-    store
-  } = (0, _PopoverRootContext.usePopoverRootContext)();
+  const store = (0, _PopoverRootContext.usePopoverRootContext)();
   const keepMounted = (0, _PopoverPortalContext.usePopoverPortalContext)();
   const nodeId = (0, _floatingUiReact.useFloatingNodeId)();
   const floatingRootContext = store.useState('floatingRootContext');
@@ -62,9 +61,9 @@ 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 adaptiveOrigin = store.useState('adaptiveOrigin');
   const prevTriggerElementRef = React.useRef(null);
-  const runOnceAnimationsFinish = (0, _useAnimationsFinished.useAnimationsFinished)(positionerElement, false, false);
+  const runOnceAnimationsFinish = (0, _useAnimationsFinished.useAnimationsFinished)(positionerElement);
   const positioning = (0, _useAnchorPositioning.useAnchorPositioning)({
     anchor,
     floatingRootContext,
@@ -82,7 +81,7 @@ const PopoverPositioner = exports.PopoverPositioner = /*#__PURE__*/React.forward
     keepMounted,
     nodeId,
     collisionAvoidance,
-    adaptiveOrigin: hasViewport ? _adaptiveOriginMiddleware.adaptiveOrigin : undefined
+    adaptiveOrigin
   });
   const domReference = floatingRootContext.useState('domReferenceElement');
 
@@ -106,10 +105,9 @@ const PopoverPositioner = exports.PopoverPositioner = /*#__PURE__*/React.forward
     }
     return undefined;
   }, [domReference, runOnceAnimationsFinish, store]);
-  (0, _useAnchoredPopupScrollLock.useAnchoredPopupScrollLock)(open && modal === true && openReason !== _reasons.REASONS.triggerHover, openMethod === 'touch', positionerElement, triggerElement);
-  const setPositionerElement = React.useCallback(element => {
-    store.set('positionerElement', element);
-  }, [store]);
+  const trueModalNonHover = modal === true && openReason !== _reasons.REASONS.triggerHover;
+  (0, _useAnchoredPopupScrollLock.useAnchoredPopupScrollLock)(open && trueModalNonHover, openMethod === 'touch', positionerElement, triggerElement);
+  const setPositionerElement = store.useStateSetter('positionerElement');
   const state = {
     open,
     side: positioning.side,
@@ -127,8 +125,7 @@ const PopoverPositioner = exports.PopoverPositioner = /*#__PURE__*/React.forward
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PopoverPositionerContext.PopoverPositionerContext.Provider, {
     value: positioning,
-    children: [mounted && modal === true && openReason !== _reasons.REASONS.triggerHover && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InternalBackdrop.InternalBackdrop, {
-      ref: store.context.internalBackdropRef,
+    children: [mounted && trueModalNonHover && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InternalBackdrop.InternalBackdrop, {
       inert: (0, _inertValue.inertValue)(!open),
       cutout: triggerElement
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingUiReact.FloatingNode, {

package/popover/positioner/PopoverPositioner.mjs

@@ -6,13 +6,12 @@ import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { FloatingNode, useFloatingNodeId } from "../../floating-ui-react/index.mjs";
 import { usePopoverRootContext } from "../root/PopoverRootContext.mjs";
 import { PopoverPositionerContext } from "./PopoverPositionerContext.mjs";
-import { useAnchorPositioning } from "../../utils/useAnchorPositioning.mjs";
+import { useAnchorPositioning } from "../../internals/useAnchorPositioning.mjs";
 import { usePopoverPortalContext } from "../portal/PopoverPortalContext.mjs";
 import { InternalBackdrop } from "../../utils/InternalBackdrop.mjs";
 import { REASONS } from "../../internals/reasons.mjs";
 import { POPUP_COLLISION_AVOIDANCE } from "../../internals/constants.mjs";
 import { useAnimationsFinished } from "../../internals/useAnimationsFinished.mjs";
-import { adaptiveOrigin } from "../../utils/adaptiveOriginMiddleware.mjs";
 import { usePositioner } from "../../utils/usePositioner.mjs";
 import { useAnchoredPopupScrollLock } from "../../utils/useAnchoredPopupScrollLock.mjs";
 
@@ -29,22 +28,22 @@ export const PopoverPositioner = /*#__PURE__*/React.forwardRef(function PopoverP
     className,
     style,
     anchor,
-    positionMethod = 'absolute',
-    side = 'bottom',
-    align = 'center',
-    sideOffset = 0,
-    alignOffset = 0,
+    // `useAnchorPositioning` applies the same defaults to the undefined values; the names
+    // remain destructured to exclude the props from `elementProps`.
+    positionMethod,
+    side,
+    align,
+    sideOffset,
+    alignOffset,
     collisionBoundary = 'clipping-ancestors',
-    collisionPadding = 5,
-    arrowPadding = 5,
-    sticky = false,
+    collisionPadding,
+    arrowPadding,
+    sticky,
     disableAnchorTracking = false,
     collisionAvoidance = POPUP_COLLISION_AVOIDANCE,
     ...elementProps
   } = componentProps;
-  const {
-    store
-  } = usePopoverRootContext();
+  const store = usePopoverRootContext();
   const keepMounted = usePopoverPortalContext();
   const nodeId = useFloatingNodeId();
   const floatingRootContext = store.useState('floatingRootContext');
@@ -57,9 +56,9 @@ export const PopoverPositioner = /*#__PURE__*/React.forwardRef(function PopoverP
   const positionerElement = store.useState('positionerElement');
   const instantType = store.useState('instantType');
   const transitionStatus = store.useState('transitionStatus');
-  const hasViewport = store.useState('hasViewport');
+  const adaptiveOrigin = store.useState('adaptiveOrigin');
   const prevTriggerElementRef = React.useRef(null);
-  const runOnceAnimationsFinish = useAnimationsFinished(positionerElement, false, false);
+  const runOnceAnimationsFinish = useAnimationsFinished(positionerElement);
   const positioning = useAnchorPositioning({
     anchor,
     floatingRootContext,
@@ -77,7 +76,7 @@ export const PopoverPositioner = /*#__PURE__*/React.forwardRef(function PopoverP
     keepMounted,
     nodeId,
     collisionAvoidance,
-    adaptiveOrigin: hasViewport ? adaptiveOrigin : undefined
+    adaptiveOrigin
   });
   const domReference = floatingRootContext.useState('domReferenceElement');
 
@@ -101,10 +100,9 @@ export const PopoverPositioner = /*#__PURE__*/React.forwardRef(function PopoverP
     }
     return undefined;
   }, [domReference, runOnceAnimationsFinish, store]);
-  useAnchoredPopupScrollLock(open && modal === true && openReason !== REASONS.triggerHover, openMethod === 'touch', positionerElement, triggerElement);
-  const setPositionerElement = React.useCallback(element => {
-    store.set('positionerElement', element);
-  }, [store]);
+  const trueModalNonHover = modal === true && openReason !== REASONS.triggerHover;
+  useAnchoredPopupScrollLock(open && trueModalNonHover, openMethod === 'touch', positionerElement, triggerElement);
+  const setPositionerElement = store.useStateSetter('positionerElement');
   const state = {
     open,
     side: positioning.side,
@@ -122,8 +120,7 @@ export const PopoverPositioner = /*#__PURE__*/React.forwardRef(function PopoverP
   });
   return /*#__PURE__*/_jsxs(PopoverPositionerContext.Provider, {
     value: positioning,
-    children: [mounted && modal === true && openReason !== REASONS.triggerHover && /*#__PURE__*/_jsx(InternalBackdrop, {
-      ref: store.context.internalBackdropRef,
+    children: [mounted && trueModalNonHover && /*#__PURE__*/_jsx(InternalBackdrop, {
       inert: inertValue(!open),
       cutout: triggerElement
     }), /*#__PURE__*/_jsx(FloatingNode, {

package/popover/positioner/PopoverPositionerContext.d.mts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { Side, Align } from "../../utils/useAnchorPositioning.mjs";
+import type { Side, Align } from "../../internals/useAnchorPositioning.mjs";
 import type { FloatingContext } from "../../floating-ui-react/index.mjs";
 export interface PopoverPositionerContext {
   side: Side;

package/popover/positioner/PopoverPositionerContext.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { Side, Align } from "../../utils/useAnchorPositioning.js";
+import type { Side, Align } from "../../internals/useAnchorPositioning.js";
 import type { FloatingContext } from "../../floating-ui-react/index.js";
 export interface PopoverPositionerContext {
   side: Side;

package/popover/positioner/PopoverPositionerCssVars.d.mts

@@ -27,11 +27,13 @@ export declare enum PopoverPositionerCssVars {
   /**
    * The width of the popover's positioner.
    * It is important to set `width` to this value when using CSS to animate size changes.
+   * @type {number}
    */
   positionerWidth = "--positioner-width",
   /**
    * The height of the popover's positioner.
    * It is important to set `height` to this value when using CSS to animate size changes.
+   * @type {number}
    */
   positionerHeight = "--positioner-height",
 }

package/popover/positioner/PopoverPositionerCssVars.d.ts

@@ -27,11 +27,13 @@ export declare enum PopoverPositionerCssVars {
   /**
    * The width of the popover's positioner.
    * It is important to set `width` to this value when using CSS to animate size changes.
+   * @type {number}
    */
   positionerWidth = "--positioner-width",
   /**
    * The height of the popover's positioner.
    * It is important to set `height` to this value when using CSS to animate size changes.
+   * @type {number}
    */
   positionerHeight = "--positioner-height",
 }

package/popover/positioner/PopoverPositionerCssVars.js

@@ -33,11 +33,13 @@ let PopoverPositionerCssVars = exports.PopoverPositionerCssVars = /*#__PURE__*/f
   /**
    * The width of the popover's positioner.
    * It is important to set `width` to this value when using CSS to animate size changes.
+   * @type {number}
    */
   PopoverPositionerCssVars["positionerWidth"] = "--positioner-width";
   /**
    * The height of the popover's positioner.
    * It is important to set `height` to this value when using CSS to animate size changes.
+   * @type {number}
    */
   PopoverPositionerCssVars["positionerHeight"] = "--positioner-height";
   return PopoverPositionerCssVars;

package/popover/positioner/PopoverPositionerCssVars.mjs

@@ -27,11 +27,13 @@ export let PopoverPositionerCssVars = /*#__PURE__*/function (PopoverPositionerCs
   /**
    * The width of the popover's positioner.
    * It is important to set `width` to this value when using CSS to animate size changes.
+   * @type {number}
    */
   PopoverPositionerCssVars["positionerWidth"] = "--positioner-width";
   /**
    * The height of the popover's positioner.
    * It is important to set `height` to this value when using CSS to animate size changes.
+   * @type {number}
    */
   PopoverPositionerCssVars["positionerHeight"] = "--positioner-height";
   return PopoverPositionerCssVars;