@base-ui/react 1.6.0 → 1.7.0

package/number-field/utils/validate.d.ts

@@ -5,23 +5,5 @@ type NumberFormatOptionsWithRounding = Intl.NumberFormatOptions & {
 };
 export declare function hasNumberFormatRoundingOptions(format?: NumberFormatOptionsWithRounding): format is NumberFormatOptionsWithRounding;
 export declare function removeFloatingPointErrors(value: number, format?: NumberFormatOptionsWithRounding): number;
-export declare function toValidatedNumber(value: number | null, {
-  step,
-  minWithDefault,
-  maxWithDefault,
-  minWithZeroDefault,
-  format,
-  snapOnStep,
-  small,
-  clamp: shouldClamp
-}: {
-  step: number | undefined;
-  minWithDefault: number;
-  maxWithDefault: number;
-  minWithZeroDefault: number;
-  format: NumberFormatOptionsWithRounding | undefined;
-  snapOnStep: boolean;
-  small: boolean;
-  clamp: boolean;
-}): number | null;
+export declare function toValidatedNumber(value: number | null, step: number | undefined, minWithDefault: number, maxWithDefault: number, minWithZeroDefault: number, format: NumberFormatOptionsWithRounding | undefined, snapOnStep: boolean, small: boolean, shouldClamp: boolean): number | null;
 export {};

package/number-field/utils/validate.js

@@ -56,27 +56,18 @@ function removeFloatingPointErrors(value, format) {
   }
   return formatter.format(roundedValue) === roundedText ? roundedValue : value;
 }
-function snapToStep(value, base, step, mode = 'directional') {
+function snapToStep(value, base, step, nearest) {
   const stepSize = Math.abs(step);
   const direction = Math.sign(step);
   const tolerance = stepSize * STEP_EPSILON_FACTOR * direction;
   const rawSteps = value - base + tolerance;
-  if (mode === 'nearest') {
+  if (nearest) {
     return base + Math.round(rawSteps / step) * step;
   }
   const snappedSteps = direction > 0 ? Math.floor(rawSteps / stepSize) : Math.ceil(rawSteps / stepSize);
   return base + snappedSteps * stepSize;
 }
-function toValidatedNumber(value, {
-  step,
-  minWithDefault,
-  maxWithDefault,
-  minWithZeroDefault,
-  format,
-  snapOnStep,
-  small,
-  clamp: shouldClamp
-}) {
+function toValidatedNumber(value, step, minWithDefault, maxWithDefault, minWithZeroDefault, format, snapOnStep, small, shouldClamp) {
   if (value === null) {
     return value;
   }
@@ -84,8 +75,9 @@ function toValidatedNumber(value, {
   if (step != null && snapOnStep && step !== 0) {
     const base = small || minWithDefault === Number.MIN_SAFE_INTEGER ? minWithZeroDefault : minWithDefault;
 
-    // Snap before clamping so non-step-aligned boundaries stay reachable.
-    nextValue = snapToStep(nextValue, base, step, small ? 'nearest' : 'directional');
+    // Snap before clamping so non-step-aligned boundaries stay reachable. Small (alt-key) steps
+    // snap to the nearest multiple; regular steps snap directionally.
+    nextValue = snapToStep(nextValue, base, step, small);
   }
 
   // Clamp before rounding so a value just outside a fractional boundary (e.g. `0.4` with

package/number-field/utils/validate.mjs

@@ -49,27 +49,18 @@ export function removeFloatingPointErrors(value, format) {
   }
   return formatter.format(roundedValue) === roundedText ? roundedValue : value;
 }
-function snapToStep(value, base, step, mode = 'directional') {
+function snapToStep(value, base, step, nearest) {
   const stepSize = Math.abs(step);
   const direction = Math.sign(step);
   const tolerance = stepSize * STEP_EPSILON_FACTOR * direction;
   const rawSteps = value - base + tolerance;
-  if (mode === 'nearest') {
+  if (nearest) {
     return base + Math.round(rawSteps / step) * step;
   }
   const snappedSteps = direction > 0 ? Math.floor(rawSteps / stepSize) : Math.ceil(rawSteps / stepSize);
   return base + snappedSteps * stepSize;
 }
-export function toValidatedNumber(value, {
-  step,
-  minWithDefault,
-  maxWithDefault,
-  minWithZeroDefault,
-  format,
-  snapOnStep,
-  small,
-  clamp: shouldClamp
-}) {
+export function toValidatedNumber(value, step, minWithDefault, maxWithDefault, minWithZeroDefault, format, snapOnStep, small, shouldClamp) {
   if (value === null) {
     return value;
   }
@@ -77,8 +68,9 @@ export function toValidatedNumber(value, {
   if (step != null && snapOnStep && step !== 0) {
     const base = small || minWithDefault === Number.MIN_SAFE_INTEGER ? minWithZeroDefault : minWithDefault;
 
-    // Snap before clamping so non-step-aligned boundaries stay reachable.
-    nextValue = snapToStep(nextValue, base, step, small ? 'nearest' : 'directional');
+    // Snap before clamping so non-step-aligned boundaries stay reachable. Small (alt-key) steps
+    // snap to the nearest multiple; regular steps snap directionally.
+    nextValue = snapToStep(nextValue, base, step, small);
   }
 
   // Clamp before rounding so a value just outside a fractional boundary (e.g. `0.4` with

package/otp-field/input/OTPFieldInput.d.mts

@@ -22,7 +22,7 @@ export interface OTPFieldInputState extends Omit<OTPFieldRootState, 'filled' | '
    */
   value: string;
 }
-export interface OTPFieldInputProps extends BaseUIComponentProps<'input', OTPFieldInputState> {}
+export interface OTPFieldInputProps extends BaseUIComponentProps<'input', OTPFieldInputState, React.ComponentPropsWithRef<'input'>> {}
 export declare namespace OTPFieldInput {
   type State = OTPFieldInputState;
   type Props = OTPFieldInputProps;

package/otp-field/input/OTPFieldInput.d.ts

@@ -22,7 +22,7 @@ export interface OTPFieldInputState extends Omit<OTPFieldRootState, 'filled' | '
    */
   value: string;
 }
-export interface OTPFieldInputProps extends BaseUIComponentProps<'input', OTPFieldInputState> {}
+export interface OTPFieldInputProps extends BaseUIComponentProps<'input', OTPFieldInputState, React.ComponentPropsWithRef<'input'>> {}
 export declare namespace OTPFieldInput {
   type State = OTPFieldInputState;
   type Props = OTPFieldInputProps;

package/otp-field/input/OTPFieldInput.js

@@ -62,7 +62,7 @@ const OTPFieldInput = exports.OTPFieldInput = /*#__PURE__*/React.forwardRef(func
     ref: listItemRef,
     index
   } = (0, _useCompositeListItem.useCompositeListItem)({
-    indexGuessBehavior: _useCompositeListItem.IndexGuessBehavior.GuessFromOrder
+    guess: true
   });
   const inputRef = React.useRef(null);
   const direction = (0, _DirectionContext.useDirection)();
@@ -71,6 +71,8 @@ const OTPFieldInput = exports.OTPFieldInput = /*#__PURE__*/React.forwardRef(func
   const slotAriaLabel = externalAriaLabel;
   const inheritedLabel = externalAriaLabelledBy ?? inputAriaLabelledBy;
   const ariaLabel = index === 0 ? undefined : slotAriaLabel;
+
+  /* istanbul ignore else -- `process.env.NODE_ENV` is a build-time constant under test */
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     React.useEffect(() => {
@@ -219,6 +221,7 @@ const OTPFieldInput = exports.OTPFieldInput = /*#__PURE__*/React.forwardRef(func
       try {
         rawValue = event.clipboardData?.getData('text/plain') ?? '';
       } catch {
+        /* istanbul ignore else -- `process.env.NODE_ENV` is a build-time constant under test */
         if (process.env.NODE_ENV !== 'production') {
           const ownerStackMessage = _safeReact.SafeReact.captureOwnerStack?.() || '';
           (0, _warn.warn)('<OTPField.Input> could not read clipboard text during paste handling.', ownerStackMessage);

package/otp-field/input/OTPFieldInput.mjs

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { SafeReact } from '@base-ui/utils/safeReact';
 import { warn } from '@base-ui/utils/warn';
 import { stopEvent } from "../../floating-ui-react/utils.mjs";
-import { IndexGuessBehavior, useCompositeListItem } from "../../internals/composite/list/useCompositeListItem.mjs";
+import { useCompositeListItem } from "../../internals/composite/list/useCompositeListItem.mjs";
 import { useDirection } from "../../internals/direction-context/DirectionContext.mjs";
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
 import { createChangeEventDetails, createGenericEventDetails } from "../../internals/createBaseUIEventDetails.mjs";
@@ -57,7 +57,7 @@ export const OTPFieldInput = /*#__PURE__*/React.forwardRef(function OTPFieldInpu
     ref: listItemRef,
     index
   } = useCompositeListItem({
-    indexGuessBehavior: IndexGuessBehavior.GuessFromOrder
+    guess: true
   });
   const inputRef = React.useRef(null);
   const direction = useDirection();
@@ -66,6 +66,8 @@ export const OTPFieldInput = /*#__PURE__*/React.forwardRef(function OTPFieldInpu
   const slotAriaLabel = externalAriaLabel;
   const inheritedLabel = externalAriaLabelledBy ?? inputAriaLabelledBy;
   const ariaLabel = index === 0 ? undefined : slotAriaLabel;
+
+  /* istanbul ignore else -- `process.env.NODE_ENV` is a build-time constant under test */
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     React.useEffect(() => {
@@ -214,6 +216,7 @@ export const OTPFieldInput = /*#__PURE__*/React.forwardRef(function OTPFieldInpu
       try {
         rawValue = event.clipboardData?.getData('text/plain') ?? '';
       } catch {
+        /* istanbul ignore else -- `process.env.NODE_ENV` is a build-time constant under test */
         if (process.env.NODE_ENV !== 'production') {
           const ownerStackMessage = SafeReact.captureOwnerStack?.() || '';
           warn('<OTPField.Input> could not read clipboard text during paste handling.', ownerStackMessage);

package/otp-field/root/OTPFieldRoot.js

@@ -123,6 +123,8 @@ const OTPFieldRoot = exports.OTPFieldRoot = /*#__PURE__*/React.forwardRef(functi
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     setFilled(filled);
   }, [filled, setFilled]);
+
+  /* istanbul ignore else -- `process.env.NODE_ENV` is a build-time constant under test */
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useOTPFieldRootDevWarnings({
@@ -144,6 +146,8 @@ const OTPFieldRoot = exports.OTPFieldRoot = /*#__PURE__*/React.forwardRef(functi
     };
   });
   function requestSubmit() {
+    // The hidden validation input only renders for a valid `length`, but the slots always do,
+    // so fall back to the owning form of the first slot.
     let formElement = validation.inputRef.current?.form ?? inputRefs.current[0]?.form ?? null;
     if (form) {
       const associatedElement = (0, _owner.ownerDocument)(rootRef.current).getElementById(form);
@@ -165,13 +169,6 @@ const OTPFieldRoot = exports.OTPFieldRoot = /*#__PURE__*/React.forwardRef(functi
     clearErrors(name);
     setDirty(value !== validityData.initialValue);
     validation.change(value);
-    const pendingCompleteValue = pendingCompleteValueRef.current;
-    if (pendingCompleteValue != null) {
-      pendingCompleteValueRef.current = null;
-      if (pendingCompleteValue.value === value) {
-        completeValue(value, pendingCompleteValue.eventDetails);
-      }
-    }
     const pendingFocus = pendingFocusRef.current;
     if (pendingFocus != null) {
       pendingFocusRef.current = null;
@@ -179,10 +176,18 @@ const OTPFieldRoot = exports.OTPFieldRoot = /*#__PURE__*/React.forwardRef(functi
         focusInput(pendingFocus.index);
       }
     }
+    const pendingCompleteValue = pendingCompleteValueRef.current;
+    if (pendingCompleteValue != null) {
+      pendingCompleteValueRef.current = null;
+      if (pendingCompleteValue.value === value) {
+        completeValue(value, pendingCompleteValue.eventDetails);
+      }
+    }
   });
   const setValue = (0, _useStableCallback.useStableCallback)((nextValue, details) => {
     const normalizedValue = (0, _otp.normalizeOTPValue)(nextValue, length, validationType, normalizeValue);
-    const completeEventDetails = normalizedValue.length === length && (valueRef.current.length !== length || details.reason === _reasons.REASONS.inputPaste) ? getCompleteEventDetails(details) : null;
+    const canComplete = details.reason === _reasons.REASONS.inputChange || details.reason === _reasons.REASONS.inputPaste;
+    const completeEventDetails = canComplete && normalizedValue.length === length && (valueRef.current.length !== length || details.reason === _reasons.REASONS.inputPaste) ? (0, _createBaseUIEventDetails.createGenericEventDetails)(details.reason, details.event) : null;
     if (normalizedValue === valueRef.current) {
       if (completeEventDetails != null) {
         completeValue(normalizedValue, completeEventDetails);
@@ -329,12 +334,6 @@ const OTPFieldRoot = exports.OTPFieldRoot = /*#__PURE__*/React.forwardRef(functi
   });
 });
 if (process.env.NODE_ENV !== "production") OTPFieldRoot.displayName = "OTPFieldRoot";
-function getCompleteEventDetails(details) {
-  if (details.reason === _reasons.REASONS.inputChange || details.reason === _reasons.REASONS.inputPaste) {
-    return (0, _createBaseUIEventDetails.createGenericEventDetails)(details.reason, details.event);
-  }
-  return null;
-}
 function mergeAriaIds(...values) {
   const ids = values.flatMap(value => value?.split(/\s+/).filter(Boolean) ?? []);
   return ids.length > 0 ? Array.from(new Set(ids)).join(' ') : undefined;

package/otp-field/root/OTPFieldRoot.mjs

@@ -118,6 +118,8 @@ export const OTPFieldRoot = /*#__PURE__*/React.forwardRef(function OTPFieldRoot(
   useIsoLayoutEffect(() => {
     setFilled(filled);
   }, [filled, setFilled]);
+
+  /* istanbul ignore else -- `process.env.NODE_ENV` is a build-time constant under test */
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useOTPFieldRootDevWarnings({
@@ -139,6 +141,8 @@ export const OTPFieldRoot = /*#__PURE__*/React.forwardRef(function OTPFieldRoot(
     };
   });
   function requestSubmit() {
+    // The hidden validation input only renders for a valid `length`, but the slots always do,
+    // so fall back to the owning form of the first slot.
     let formElement = validation.inputRef.current?.form ?? inputRefs.current[0]?.form ?? null;
     if (form) {
       const associatedElement = ownerDocument(rootRef.current).getElementById(form);
@@ -160,13 +164,6 @@ export const OTPFieldRoot = /*#__PURE__*/React.forwardRef(function OTPFieldRoot(
     clearErrors(name);
     setDirty(value !== validityData.initialValue);
     validation.change(value);
-    const pendingCompleteValue = pendingCompleteValueRef.current;
-    if (pendingCompleteValue != null) {
-      pendingCompleteValueRef.current = null;
-      if (pendingCompleteValue.value === value) {
-        completeValue(value, pendingCompleteValue.eventDetails);
-      }
-    }
     const pendingFocus = pendingFocusRef.current;
     if (pendingFocus != null) {
       pendingFocusRef.current = null;
@@ -174,10 +171,18 @@ export const OTPFieldRoot = /*#__PURE__*/React.forwardRef(function OTPFieldRoot(
         focusInput(pendingFocus.index);
       }
     }
+    const pendingCompleteValue = pendingCompleteValueRef.current;
+    if (pendingCompleteValue != null) {
+      pendingCompleteValueRef.current = null;
+      if (pendingCompleteValue.value === value) {
+        completeValue(value, pendingCompleteValue.eventDetails);
+      }
+    }
   });
   const setValue = useStableCallback((nextValue, details) => {
     const normalizedValue = normalizeOTPValue(nextValue, length, validationType, normalizeValue);
-    const completeEventDetails = normalizedValue.length === length && (valueRef.current.length !== length || details.reason === REASONS.inputPaste) ? getCompleteEventDetails(details) : null;
+    const canComplete = details.reason === REASONS.inputChange || details.reason === REASONS.inputPaste;
+    const completeEventDetails = canComplete && normalizedValue.length === length && (valueRef.current.length !== length || details.reason === REASONS.inputPaste) ? createGenericEventDetails(details.reason, details.event) : null;
     if (normalizedValue === valueRef.current) {
       if (completeEventDetails != null) {
         completeValue(normalizedValue, completeEventDetails);
@@ -324,12 +329,6 @@ export const OTPFieldRoot = /*#__PURE__*/React.forwardRef(function OTPFieldRoot(
   });
 });
 if (process.env.NODE_ENV !== "production") OTPFieldRoot.displayName = "OTPFieldRoot";
-function getCompleteEventDetails(details) {
-  if (details.reason === REASONS.inputChange || details.reason === REASONS.inputPaste) {
-    return createGenericEventDetails(details.reason, details.event);
-  }
-  return null;
-}
 function mergeAriaIds(...values) {
   const ids = values.flatMap(value => value?.split(/\s+/).filter(Boolean) ?? []);
   return ids.length > 0 ? Array.from(new Set(ids)).join(' ') : undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@base-ui/react",
-  "version": "1.6.0",
+  "version": "1.7.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.",
   "license": "MIT",
@@ -27,10 +27,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.29.2",
-    "@floating-ui/react-dom": "^2.1.8",
-    "@floating-ui/utils": "^0.2.11",
+    "@floating-ui/react-dom": "^2.1.9",
+    "@floating-ui/utils": "^0.2.12",
     "use-sync-external-store": "^1.6.0",
-    "@base-ui/utils": "0.3.1"
+    "@base-ui/utils": "0.3.2"
   },
   "peerDependencies": {
     "@date-fns/tz": "^1.2.0",
@@ -872,6 +872,20 @@
         "default": "./internals/form-context/index.mjs"
       }
     },
+    "./internals/getDisabledMountTransitionStyles": {
+      "import": {
+        "types": "./internals/getDisabledMountTransitionStyles.d.mts",
+        "default": "./internals/getDisabledMountTransitionStyles.mjs"
+      },
+      "require": {
+        "types": "./internals/getDisabledMountTransitionStyles.d.ts",
+        "default": "./internals/getDisabledMountTransitionStyles.js"
+      },
+      "default": {
+        "types": "./internals/getDisabledMountTransitionStyles.d.mts",
+        "default": "./internals/getDisabledMountTransitionStyles.mjs"
+      }
+    },
     "./internals/getStateAttributesProps": {
       "import": {
         "types": "./internals/getStateAttributesProps.d.mts",
@@ -1096,6 +1110,20 @@
         "default": "./internals/useBaseUiId.mjs"
       }
     },
+    "./internals/useAnchorPositioning": {
+      "import": {
+        "types": "./internals/useAnchorPositioning.d.mts",
+        "default": "./internals/useAnchorPositioning.mjs"
+      },
+      "require": {
+        "types": "./internals/useAnchorPositioning.d.ts",
+        "default": "./internals/useAnchorPositioning.js"
+      },
+      "default": {
+        "types": "./internals/useAnchorPositioning.d.mts",
+        "default": "./internals/useAnchorPositioning.mjs"
+      }
+    },
     "./internals/useAnimationsFinished": {
       "import": {
         "types": "./internals/useAnimationsFinished.d.mts",
@@ -1183,7 +1211,67 @@
   },
   "imports": {
     "#test-utils": "./test/index.ts",
-    "#formatErrorMessage": "@base-ui/utils/formatErrorMessage"
+    "#formatErrorMessage": "@base-ui/utils/formatErrorMessage",
+    "#prehydration/tabs/indicator": {
+      "browser": {
+        "import": {
+          "types": "./internals/prehydrationScript.stub.d.mts",
+          "default": "./internals/prehydrationScript.stub.mjs"
+        },
+        "require": {
+          "types": "./internals/prehydrationScript.stub.d.ts",
+          "default": "./internals/prehydrationScript.stub.js"
+        },
+        "default": {
+          "types": "./internals/prehydrationScript.stub.d.mts",
+          "default": "./internals/prehydrationScript.stub.mjs"
+        }
+      },
+      "default": {
+        "import": {
+          "types": "./tabs/indicator/prehydrationScript.min.d.mts",
+          "default": "./tabs/indicator/prehydrationScript.min.mjs"
+        },
+        "require": {
+          "types": "./tabs/indicator/prehydrationScript.min.d.ts",
+          "default": "./tabs/indicator/prehydrationScript.min.js"
+        },
+        "default": {
+          "types": "./tabs/indicator/prehydrationScript.min.d.mts",
+          "default": "./tabs/indicator/prehydrationScript.min.mjs"
+        }
+      }
+    },
+    "#prehydration/slider/thumb": {
+      "browser": {
+        "import": {
+          "types": "./internals/prehydrationScript.stub.d.mts",
+          "default": "./internals/prehydrationScript.stub.mjs"
+        },
+        "require": {
+          "types": "./internals/prehydrationScript.stub.d.ts",
+          "default": "./internals/prehydrationScript.stub.js"
+        },
+        "default": {
+          "types": "./internals/prehydrationScript.stub.d.mts",
+          "default": "./internals/prehydrationScript.stub.mjs"
+        }
+      },
+      "default": {
+        "import": {
+          "types": "./slider/thumb/prehydrationScript.min.d.mts",
+          "default": "./slider/thumb/prehydrationScript.min.mjs"
+        },
+        "require": {
+          "types": "./slider/thumb/prehydrationScript.min.d.ts",
+          "default": "./slider/thumb/prehydrationScript.min.js"
+        },
+        "default": {
+          "types": "./slider/thumb/prehydrationScript.min.d.mts",
+          "default": "./slider/thumb/prehydrationScript.min.mjs"
+        }
+      }
+    }
   },
   "main": "./index.js",
   "types": "./index.d.ts"

package/popover/arrow/PopoverArrow.d.mts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { Align, Side } from "../../utils/useAnchorPositioning.mjs";
+import type { Align, Side } from "../../internals/useAnchorPositioning.mjs";
 import type { BaseUIComponentProps } from "../../internals/types.mjs";
 /**
  * Displays an element positioned against the popover anchor.

package/popover/arrow/PopoverArrow.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { Align, Side } from "../../utils/useAnchorPositioning.js";
+import type { Align, Side } from "../../internals/useAnchorPositioning.js";
 import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * Displays an element positioned against the popover anchor.

package/popover/arrow/PopoverArrow.js

@@ -24,9 +24,7 @@ const PopoverArrow = exports.PopoverArrow = /*#__PURE__*/React.forwardRef(functi
     style,
     ...elementProps
   } = componentProps;
-  const {
-    store
-  } = (0, _PopoverRootContext.usePopoverRootContext)();
+  const store = (0, _PopoverRootContext.usePopoverRootContext)();
   const open = store.useState('open');
   const {
     arrowRef,

package/popover/arrow/PopoverArrow.mjs

@@ -19,9 +19,7 @@ export const PopoverArrow = /*#__PURE__*/React.forwardRef(function PopoverArrow(
     style,
     ...elementProps
   } = componentProps;
-  const {
-    store
-  } = usePopoverRootContext();
+  const store = usePopoverRootContext();
   const open = store.useState('open');
   const {
     arrowRef,

package/popover/backdrop/PopoverBackdrop.js

@@ -9,14 +9,8 @@ exports.PopoverBackdrop = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _PopoverRootContext = require("../root/PopoverRootContext");
 var _popupStateMapping = require("../../utils/popupStateMapping");
-var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
 var _useRenderElement = require("../../internals/useRenderElement");
 var _reasons = require("../../internals/reasons");
-const stateAttributesMapping = {
-  ..._popupStateMapping.popupStateMapping,
-  ..._stateAttributesMapping.transitionStatusMapping
-};
-
 /**
  * An overlay displayed beneath the popover.
  * Renders a `<div>` element.
@@ -30,9 +24,7 @@ const PopoverBackdrop = exports.PopoverBackdrop = /*#__PURE__*/React.forwardRef(
     style,
     ...elementProps
   } = props;
-  const {
-    store
-  } = (0, _PopoverRootContext.usePopoverRootContext)();
+  const store = (0, _PopoverRootContext.usePopoverRootContext)();
   const open = store.useState('open');
   const mounted = store.useState('mounted');
   const transitionStatus = store.useState('transitionStatus');
@@ -43,7 +35,7 @@ const PopoverBackdrop = exports.PopoverBackdrop = /*#__PURE__*/React.forwardRef(
   };
   const element = (0, _useRenderElement.useRenderElement)('div', props, {
     state,
-    ref: [store.context.backdropRef, forwardedRef],
+    ref: forwardedRef,
     props: [{
       role: 'presentation',
       hidden: !mounted,
@@ -53,7 +45,7 @@ const PopoverBackdrop = exports.PopoverBackdrop = /*#__PURE__*/React.forwardRef(
         WebkitUserSelect: 'none'
       }
     }, elementProps],
-    stateAttributesMapping
+    stateAttributesMapping: _popupStateMapping.popupTransitionStateMapping
   });
   return element;
 });

package/popover/backdrop/PopoverBackdrop.mjs

@@ -2,14 +2,9 @@
 
 import * as React from 'react';
 import { usePopoverRootContext } from "../root/PopoverRootContext.mjs";
-import { popupStateMapping as baseMapping } from "../../utils/popupStateMapping.mjs";
-import { transitionStatusMapping } from "../../internals/stateAttributesMapping.mjs";
+import { popupTransitionStateMapping } from "../../utils/popupStateMapping.mjs";
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
 import { REASONS } from "../../internals/reasons.mjs";
-const stateAttributesMapping = {
-  ...baseMapping,
-  ...transitionStatusMapping
-};
 
 /**
  * An overlay displayed beneath the popover.
@@ -24,9 +19,7 @@ export const PopoverBackdrop = /*#__PURE__*/React.forwardRef(function PopoverBac
     style,
     ...elementProps
   } = props;
-  const {
-    store
-  } = usePopoverRootContext();
+  const store = usePopoverRootContext();
   const open = store.useState('open');
   const mounted = store.useState('mounted');
   const transitionStatus = store.useState('transitionStatus');
@@ -37,7 +30,7 @@ export const PopoverBackdrop = /*#__PURE__*/React.forwardRef(function PopoverBac
   };
   const element = useRenderElement('div', props, {
     state,
-    ref: [store.context.backdropRef, forwardedRef],
+    ref: forwardedRef,
     props: [{
       role: 'presentation',
       hidden: !mounted,
@@ -47,7 +40,7 @@ export const PopoverBackdrop = /*#__PURE__*/React.forwardRef(function PopoverBac
         WebkitUserSelect: 'none'
       }
     }, elementProps],
-    stateAttributesMapping
+    stateAttributesMapping: popupTransitionStateMapping
   });
   return element;
 });

package/popover/backdrop/PopoverBackdropDataAttributes.d.mts

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

package/popover/backdrop/PopoverBackdropDataAttributes.d.ts

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

package/popover/backdrop/PopoverBackdropDataAttributes.js

@@ -15,7 +15,7 @@ let PopoverBackdropDataAttributes = exports.PopoverBackdropDataAttributes = func
    */
   PopoverBackdropDataAttributes[PopoverBackdropDataAttributes["closed"] = _popupStateMapping.CommonPopupDataAttributes.closed] = "closed";
   /**
-   * Present when the popup is animating in.
+   * Present when the popup begins animating in.
    */
   PopoverBackdropDataAttributes[PopoverBackdropDataAttributes["startingStyle"] = _popupStateMapping.CommonPopupDataAttributes.startingStyle] = "startingStyle";
   /**

package/popover/backdrop/PopoverBackdropDataAttributes.mjs

@@ -9,7 +9,7 @@ export let PopoverBackdropDataAttributes = function (PopoverBackdropDataAttribut
    */
   PopoverBackdropDataAttributes[PopoverBackdropDataAttributes["closed"] = CommonPopupDataAttributes.closed] = "closed";
   /**
-   * Present when the popup is animating in.
+   * Present when the popup begins animating in.
    */
   PopoverBackdropDataAttributes[PopoverBackdropDataAttributes["startingStyle"] = CommonPopupDataAttributes.startingStyle] = "startingStyle";
   /**

package/popover/close/PopoverClose.js

@@ -36,9 +36,7 @@ const PopoverClose = exports.PopoverClose = /*#__PURE__*/React.forwardRef(functi
     focusableWhenDisabled: false,
     native: nativeButton
   });
-  const {
-    store
-  } = (0, _PopoverRootContext.usePopoverRootContext)();
+  const store = (0, _PopoverRootContext.usePopoverRootContext)();
   (0, _closePart.useClosePartRegistration)();
   const element = (0, _useRenderElement.useRenderElement)('button', componentProps, {
     ref: [forwardedRef, buttonRef],

package/popover/close/PopoverClose.mjs

@@ -31,9 +31,7 @@ export const PopoverClose = /*#__PURE__*/React.forwardRef(function PopoverClose(
     focusableWhenDisabled: false,
     native: nativeButton
   });
-  const {
-    store
-  } = usePopoverRootContext();
+  const store = usePopoverRootContext();
   useClosePartRegistration();
   const element = useRenderElement('button', componentProps, {
     ref: [forwardedRef, buttonRef],