@base-ui/react 1.0.0 → 1.2.0

package/number-field/root/NumberFieldRoot.js

@@ -42,7 +42,7 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
     min,
     max,
     smallStep = 0.1,
-    step = 1,
+    step: stepProp = 1,
     largeStep = 10,
     required = false,
     disabled: disabledProp = false,
@@ -54,6 +54,7 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
     onValueCommitted: onValueCommittedProp,
     allowWheelScrub = false,
     snapOnStep = false,
+    allowOutOfRange = false,
     format,
     locale,
     render,
@@ -74,6 +75,7 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
   } = (0, _FieldRootContext.useFieldRootContext)();
   const disabled = fieldDisabled || disabledProp;
   const name = fieldName ?? nameProp;
+  const step = stepProp === 'any' ? 1 : stepProp;
   const [isScrubbing, setIsScrubbing] = React.useState(false);
   const minWithDefault = min ?? Number.MIN_SAFE_INTEGER;
   const maxWithDefault = max ?? Number.MAX_SAFE_INTEGER;
@@ -179,6 +181,10 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
   const setValue = (0, _useStableCallback.useStableCallback)((unvalidatedValue, details) => {
     const eventWithOptionalKeyState = details.event;
     const dir = details.direction;
+    const reason = details.reason;
+    // Only allow out-of-range values for direct text entry (native-like behavior).
+    // Step-based interactions (keyboard arrows, buttons, wheel, scrub) still clamp to min/max.
+    const shouldClampValue = !allowOutOfRange || !(reason === _reasons.REASONS.inputChange || reason === _reasons.REASONS.inputBlur || reason === _reasons.REASONS.inputPaste || reason === _reasons.REASONS.inputClear || reason === _reasons.REASONS.none);
     const validatedValue = (0, _validate.toValidatedNumber)(unvalidatedValue, {
       step: dir ? getStepAmount(eventWithOptionalKeyState) * dir : undefined,
       format: formatOptionsRef.current,
@@ -186,18 +192,20 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
       maxWithDefault,
       minWithZeroDefault,
       snapOnStep,
-      small: eventWithOptionalKeyState?.altKey ?? false
+      small: eventWithOptionalKeyState?.altKey ?? false,
+      clamp: shouldClampValue
     });
 
     // Determine whether we should notify about a change even if the numeric value is unchanged.
     // This is needed when the user input is clamped/snapped to the same current value, or when
     // the source value differs but validation normalizes to the existing value.
-    const shouldFireChange = validatedValue !== value || unvalidatedValue !== value || allowInputSyncRef.current === false;
+    const isInputReason = details.reason === _reasons.REASONS.inputChange || details.reason === _reasons.REASONS.inputClear || details.reason === _reasons.REASONS.inputBlur || details.reason === _reasons.REASONS.inputPaste || details.reason === _reasons.REASONS.none;
+    const shouldFireChange = validatedValue !== value || isInputReason && (unvalidatedValue !== value || allowInputSyncRef.current === false);
     if (shouldFireChange) {
       lastChangedValueRef.current = validatedValue;
       onValueChangeProp?.(validatedValue, details);
       if (details.isCanceled) {
-        return;
+        return shouldFireChange;
       }
       setValueUnwrapped(validatedValue);
       setDirty(validatedValue !== validityData.initialValue);
@@ -214,6 +222,7 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
 
     // Formatting can change even if the numeric value hasn't, so ensure a re-render when needed.
     forceRender();
+    return shouldFireChange;
   });
   const incrementValue = (0, _useStableCallback.useStableCallback)((amount, {
     direction,
@@ -224,7 +233,7 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
     const prevValue = currentValue == null ? valueRef.current : currentValue;
     const nextValue = typeof prevValue === 'number' ? prevValue + amount * direction : Math.max(0, min ?? 0);
     const nativeEvent = event;
-    setValue(nextValue, (0, _createBaseUIEventDetails.createChangeEventDetails)(reason, nativeEvent, undefined, {
+    return setValue(nextValue, (0, _createBaseUIEventDetails.createChangeEventDetails)(reason, nativeEvent, undefined, {
       direction
     }));
   });
@@ -262,15 +271,22 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
     });
     function tick() {
       const amount = getStepAmount(triggerEvent) ?? _constants.DEFAULT_STEP;
-      incrementValue(amount, {
+      return incrementValue(amount, {
         direction: isIncrement ? 1 : -1,
         event: triggerEvent,
         reason: isIncrement ? 'increment-press' : 'decrement-press'
       });
     }
-    tick();
+    if (!tick()) {
+      stopAutoChange();
+      return;
+    }
     startTickTimeout.start(_constants.START_AUTO_CHANGE_DELAY, () => {
-      tickInterval.start(_constants.CHANGE_VALUE_TICK_DELAY, tick);
+      tickInterval.start(_constants.CHANGE_VALUE_TICK_DELAY, () => {
+        if (!tick()) {
+          stopAutoChange();
+        }
+      });
     });
   });
 
@@ -396,6 +412,9 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
     value: contextValue,
     children: [element, /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
       ...validation.getInputValidationProps({
+        onFocus() {
+          inputRef.current?.focus();
+        },
         onChange(event) {
           // Workaround for https://github.com/facebook/react/issues/9023
           if (event.nativeEvent.defaultPrevented) {
@@ -418,13 +437,16 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
       name: name,
       value: value ?? '',
       min: min,
-      max: max,
-      step: step,
+      max: max
+      // stepMismatch validation is broken unless an explicit `min` is added.
+      // See https://github.com/facebook/react/issues/12334.
+      ,
+      step: stepProp,
       disabled: disabled,
       required: required,
       "aria-hidden": true,
       tabIndex: -1,
-      style: _visuallyHidden.visuallyHidden
+      style: name ? _visuallyHidden.visuallyHiddenInput : _visuallyHidden.visuallyHidden
     })]
   });
 });

package/number-field/root/NumberFieldRootContext.d.ts

@@ -14,9 +14,9 @@ export interface NumberFieldRootContext {
   disabled: boolean;
   readOnly: boolean;
   id: string | undefined;
-  setValue: (value: number | null, details: NumberFieldRoot.ChangeEventDetails) => void;
+  setValue: (value: number | null, details: NumberFieldRoot.ChangeEventDetails) => boolean;
   getStepAmount: (event?: EventWithOptionalKeyState) => number | undefined;
-  incrementValue: (amount: number, params: IncrementValueParameters) => void;
+  incrementValue: (amount: number, params: IncrementValueParameters) => boolean;
   inputRef: React.RefObject<HTMLInputElement | null>;
   allowInputSyncRef: React.RefObject<boolean | null>;
   formatOptionsRef: React.RefObject<Intl.NumberFormatOptions | undefined>;

package/number-field/root/useNumberFieldButton.d.ts

@@ -10,21 +10,18 @@ export interface UseNumberFieldButtonParameters {
   formatOptionsRef: React.RefObject<Intl.NumberFormatOptions | undefined>;
   getStepAmount: (event?: EventWithOptionalKeyState) => number | undefined;
   id: string | undefined;
-  incrementValue: (amount: number, params: IncrementValueParameters) => void;
+  incrementValue: (amount: number, params: IncrementValueParameters) => boolean;
   inputRef: React.RefObject<HTMLInputElement | null>;
   inputValue: string;
   intentionalTouchCheckTimeout: Timeout;
   isIncrement: boolean;
   isPressedRef: React.RefObject<boolean | null>;
-  locale?: Intl.LocalesArgument;
-  maxWithDefault: number;
-  minWithDefault: number;
+  locale?: Intl.LocalesArgument | undefined;
   movesAfterTouchRef: React.RefObject<number | null>;
   readOnly: boolean;
-  setValue: (value: number | null, details: NumberFieldRoot.ChangeEventDetails) => void;
+  setValue: (value: number | null, details: NumberFieldRoot.ChangeEventDetails) => boolean;
   startAutoChange: (isIncrement: boolean, event?: React.MouseEvent | Event) => void;
   stopAutoChange: () => void;
-  value: number | null;
   valueRef: React.RefObject<number | null>;
   lastChangedValueRef: React.RefObject<number | null>;
   onValueCommitted: (value: number | null, eventDetails: NumberFieldRoot.CommitEventDetails) => void;

package/number-field/root/useNumberFieldButton.js

@@ -10,6 +10,12 @@ var React = _interopRequireWildcard(require("react"));
 var _constants = require("../utils/constants");
 var _parse = require("../utils/parse");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
+// Treat pen as touch-like to avoid forcing the software keyboard on stylus taps.
+// Linux Chrome may emit "pen" historically for mouse usage due to a bug, but the touch path
+// still works with minor behavioral differences.
+function isTouchLikePointerType(pointerType) {
+  return pointerType === 'touch' || pointerType === 'pen';
+}
 function useNumberFieldButton(params) {
   const {
     allowInputSyncRef,
@@ -24,14 +30,11 @@ function useNumberFieldButton(params) {
     isIncrement,
     isPressedRef,
     locale,
-    maxWithDefault,
-    minWithDefault,
     movesAfterTouchRef,
     readOnly,
     setValue,
     startAutoChange,
     stopAutoChange,
-    value,
     valueRef,
     lastChangedValueRef,
     onValueCommitted
@@ -43,8 +46,6 @@ function useNumberFieldButton(params) {
   const isTouchingButtonRef = React.useRef(false);
   const ignoreClickRef = React.useRef(false);
   const pointerTypeRef = React.useRef('');
-  const isMin = value != null && value <= minWithDefault;
-  const isMax = value != null && value >= maxWithDefault;
   const pressReason = isIncrement ? 'increment-press' : 'decrement-press';
   function commitValue(nativeEvent) {
     allowInputSyncRef.current = true;
@@ -61,7 +62,7 @@ function useNumberFieldButton(params) {
     }
   }
   const props = {
-    disabled: disabled || (isIncrement ? isMax : isMin),
+    disabled,
     'aria-readonly': readOnly || undefined,
     'aria-label': isIncrement ? 'Increase' : 'Decrease',
     'aria-controls': id,
@@ -80,10 +81,10 @@ function useNumberFieldButton(params) {
       isTouchingButtonRef.current = false;
     },
     onClick(event) {
-      const isDisabled = disabled || readOnly || (isIncrement ? isMax : isMin);
+      const isDisabled = disabled || readOnly;
       if (event.defaultPrevented || isDisabled || (
       // If it's not a keyboard/virtual click, ignore.
-      pointerTypeRef.current === 'touch' ? ignoreClickRef.current : event.detail !== 0)) {
+      isTouchLikePointerType(pointerTypeRef.current) ? ignoreClickRef.current : event.detail !== 0)) {
         return;
       }
       commitValue(event.nativeEvent);
@@ -101,8 +102,7 @@ function useNumberFieldButton(params) {
     },
     onPointerDown(event) {
       const isMainButton = !event.button || event.button === 0;
-      const isDisabled = disabled || (isIncrement ? isMax : isMin);
-      if (event.defaultPrevented || readOnly || !isMainButton || isDisabled) {
+      if (event.defaultPrevented || readOnly || !isMainButton || disabled) {
         return;
       }
       pointerTypeRef.current = event.pointerType;
@@ -113,9 +113,8 @@ function useNumberFieldButton(params) {
         y: event.clientY
       };
       commitValue(event.nativeEvent);
-
-      // Note: "pen" is sometimes returned for mouse usage on Linux Chrome.
-      if (event.pointerType !== 'touch') {
+      const isTouchPointer = isTouchLikePointerType(event.pointerType);
+      if (!isTouchPointer) {
         event.preventDefault();
         inputRef.current?.focus();
         startAutoChange(isIncrement, event);
@@ -143,13 +142,13 @@ function useNumberFieldButton(params) {
     onPointerUp(event) {
       // Ensure we mark the press as released for touch flows even if auto-change never started,
       // so the delayed auto-change check won’t start after a quick tap.
-      if (event.pointerType === 'touch') {
+      if (isTouchLikePointerType(event.pointerType)) {
         isPressedRef.current = false;
       }
     },
     onPointerMove(event) {
-      const isDisabled = disabled || readOnly || (isIncrement ? isMax : isMin);
-      if (isDisabled || event.pointerType !== 'touch' || !isPressedRef.current) {
+      const isDisabled = disabled || readOnly;
+      if (isDisabled || !isTouchLikePointerType(event.pointerType) || !isPressedRef.current) {
         return;
       }
       if (movesAfterTouchRef.current != null) {
@@ -169,8 +168,8 @@ function useNumberFieldButton(params) {
       }
     },
     onMouseEnter(event) {
-      const isDisabled = disabled || readOnly || (isIncrement ? isMax : isMin);
-      if (event.defaultPrevented || isDisabled || !isPressedRef.current || isTouchingButtonRef.current || pointerTypeRef.current === 'touch') {
+      const isDisabled = disabled || readOnly;
+      if (event.defaultPrevented || isDisabled || !isPressedRef.current || isTouchingButtonRef.current || isTouchLikePointerType(pointerTypeRef.current)) {
         return;
       }
       startAutoChange(isIncrement, event);

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

@@ -7,20 +7,20 @@ 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> {
   /**
    * Cursor movement direction in the scrub area.
    * @default 'horizontal'
    */
-  direction?: 'horizontal' | 'vertical';
+  direction?: ('horizontal' | 'vertical') | undefined;
   /**
    * Determines how many pixels the cursor must move before the value changes.
    * A higher value will make scrubbing less sensitive.
    * @default 2
    */
-  pixelSensitivity?: number;
+  pixelSensitivity?: number | undefined;
   /**
    * If specified, determines the distance that the cursor may move from the center
    * of the scrub area before it will loop back around.

package/number-field/scrub-area/NumberFieldScrubArea.js

@@ -51,6 +51,8 @@ const NumberFieldScrubArea = exports.NumberFieldScrubArea = /*#__PURE__*/React.f
   } = (0, _NumberFieldRootContext.useNumberFieldRootContext)();
   const scrubAreaRef = React.useRef(null);
   const isScrubbingRef = React.useRef(false);
+  const didMoveRef = React.useRef(false);
+  const pointerDownTargetRef = React.useRef(null);
   const scrubAreaCursorRef = React.useRef(null);
   const virtualCursorCoords = React.useRef({
     x: 0,
@@ -137,6 +139,17 @@ const NumberFieldScrubArea = exports.NumberFieldScrubArea = /*#__PURE__*/React.f
           isScrubbingRef.current = false;
           onScrubbingChange(false, event);
           onValueCommitted(lastChangedValueRef.current ?? valueRef.current, (0, _createBaseUIEventDetails.createGenericEventDetails)(_reasons.REASONS.scrub, event));
+
+          // Manually dispatch a click event if no movement happened, since
+          // preventDefault on pointerdown prevents the browser click event.
+          if (!didMoveRef.current && pointerDownTargetRef.current != null) {
+            pointerDownTargetRef.current.dispatchEvent(new MouseEvent('click', {
+              bubbles: true,
+              cancelable: true
+            }));
+          }
+          didMoveRef.current = false;
+          pointerDownTargetRef.current = null;
         }
       }
       if (_detectBrowser.isFirefox) {
@@ -162,6 +175,7 @@ const NumberFieldScrubArea = exports.NumberFieldScrubArea = /*#__PURE__*/React.f
       cumulativeDelta += direction === 'vertical' ? movementY : movementX;
       if (Math.abs(cumulativeDelta) >= pixelSensitivity) {
         cumulativeDelta = 0;
+        didMoveRef.current = true;
         const dValue = direction === 'vertical' ? -movementY : movementX;
         const stepAmount = getStepAmount(event) ?? _constants.DEFAULT_STEP;
         const rawAmount = dValue * stepAmount;
@@ -219,6 +233,8 @@ const NumberFieldScrubArea = exports.NumberFieldScrubArea = /*#__PURE__*/React.f
         inputRef.current?.focus();
       }
       isScrubbingRef.current = true;
+      didMoveRef.current = false;
+      pointerDownTargetRef.current = event.target;
       onScrubbingChange(true, event.nativeEvent);
 
       // WebKit causes significant layout shift with the native message, so we can't use it.

package/number-field/scrub-area/NumberFieldScrubAreaContext.js

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

package/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/number-field/utils/stateAttributesMapping.js

@@ -4,7 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.stateAttributesMapping = void 0;
+var _constants = require("../../field/utils/constants");
 const stateAttributesMapping = exports.stateAttributesMapping = {
   inputValue: () => null,
-  value: () => null
+  value: () => null,
+  ..._constants.fieldValidityMapping
 };

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

@@ -1 +1 @@
-export declare function subscribeToVisualViewportResize(element: Element, visualScaleRef: React.MutableRefObject<number>): () => void;
+export declare function subscribeToVisualViewportResize(element: Element, visualScaleRef: React.RefObject<number>): () => void;

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

@@ -1,15 +1,15 @@
 export type Direction = -1 | 1;
 export type DirectionalChangeReason = 'increment-press' | 'decrement-press' | 'wheel' | 'scrub' | 'keyboard';
 export interface ChangeEventCustomProperties {
-  direction?: Direction;
+  direction?: Direction | undefined;
 }
 export interface IncrementValueParameters {
   direction: Direction;
-  event?: Event | React.SyntheticEvent;
+  event?: (Event | React.SyntheticEvent) | undefined;
   reason: DirectionalChangeReason;
-  currentValue?: number | null;
+  currentValue?: (number | null) | undefined;
 }
 export interface EventWithOptionalKeyState {
-  altKey?: boolean;
-  shiftKey?: boolean;
+  altKey?: boolean | undefined;
+  shiftKey?: boolean | undefined;
 }

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

@@ -6,7 +6,8 @@ export declare function toValidatedNumber(value: number | null, {
   minWithZeroDefault,
   format,
   snapOnStep,
-  small
+  small,
+  clamp: shouldClamp
 }: {
   step: number | undefined;
   minWithDefault: number;
@@ -15,4 +16,5 @@ export declare function toValidatedNumber(value: number | null, {
   format: Intl.NumberFormatOptions | undefined;
   snapOnStep: boolean;
   small: boolean;
+  clamp: boolean;
 }): number | null;

package/number-field/utils/validate.js

@@ -57,12 +57,13 @@ function toValidatedNumber(value, {
   minWithZeroDefault,
   format,
   snapOnStep,
-  small
+  small,
+  clamp: shouldClamp
 }) {
   if (value === null) {
     return value;
   }
-  const clampedValue = (0, _clamp.clamp)(value, minWithDefault, maxWithDefault);
+  const clampedValue = shouldClamp ? (0, _clamp.clamp)(value, minWithDefault, maxWithDefault) : value;
   if (step != null && snapOnStep) {
     if (step === 0) {
       return removeFloatingPointErrors(clampedValue, format);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@base-ui/react",
-  "version": "1.0.0",
+  "version": "1.2.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": [
@@ -26,13 +26,12 @@
   },
   "type": "commonjs",
   "dependencies": {
-    "@babel/runtime": "^7.28.4",
+    "@babel/runtime": "^7.28.6",
     "@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.5"
   },
   "peerDependencies": {
     "@types/react": "^17 || ^18 || ^19",
@@ -155,6 +154,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",
@@ -185,6 +194,16 @@
         "default": "./esm/direction-provider/index.js"
       }
     },
+    "./drawer": {
+      "require": {
+        "types": "./drawer/index.d.ts",
+        "default": "./drawer/index.js"
+      },
+      "default": {
+        "types": "./esm/drawer/index.d.ts",
+        "default": "./esm/drawer/index.js"
+      }
+    },
     "./field": {
       "require": {
         "types": "./field/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/arrow/PopoverArrow.js

@@ -34,12 +34,12 @@ const PopoverArrow = exports.PopoverArrow = /*#__PURE__*/React.forwardRef(functi
     arrowUncentered,
     arrowStyles
   } = (0, _PopoverPositionerContext.usePopoverPositionerContext)();
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     side,
     align,
     uncentered: arrowUncentered
-  }), [open, side, align, arrowUncentered]);
+  };
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     ref: [forwardedRef, arrowRef],

package/popover/arrow/PopoverArrowDataAttributes.js

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

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/backdrop/PopoverBackdrop.js

@@ -36,10 +36,10 @@ const PopoverBackdrop = exports.PopoverBackdrop = /*#__PURE__*/React.forwardRef(
   const mounted = store.useState('mounted');
   const transitionStatus = store.useState('transitionStatus');
   const openReason = store.useState('openChangeReason');
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     transitionStatus
-  }), [open, transitionStatus]);
+  };
   const element = (0, _useRenderElement.useRenderElement)('div', props, {
     state,
     ref: [store.context.backdropRef, forwardedRef],

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.
@@ -18,6 +18,7 @@ export interface PopoverPopupState {
   side: Side;
   align: Align;
   transitionStatus: TransitionStatus;
+  instant: 'dismiss' | 'click' | undefined;
 }
 export interface PopoverPopupProps extends BaseUIComponentProps<'div', PopoverPopup.State> {
   /**
@@ -29,7 +30,7 @@ export interface PopoverPopupProps extends BaseUIComponentProps<'div', PopoverPo
    * - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
    *   Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing.
    */
-  initialFocus?: boolean | React.RefObject<HTMLElement | null> | ((openType: InteractionType) => void | boolean | HTMLElement | null);
+  initialFocus?: (boolean | React.RefObject<HTMLElement | null> | ((openType: InteractionType) => void | boolean | HTMLElement | null)) | undefined;
   /**
    * Determines the element to focus when the popover is closed.
    *
@@ -39,7 +40,7 @@ export interface PopoverPopupProps extends BaseUIComponentProps<'div', PopoverPo
    * - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
    *   Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing.
    */
-  finalFocus?: boolean | React.RefObject<HTMLElement | null> | ((closeType: InteractionType) => void | boolean | HTMLElement | null);
+  finalFocus?: (boolean | React.RefObject<HTMLElement | null> | ((closeType: InteractionType) => void | boolean | HTMLElement | null)) | undefined;
 }
 export declare namespace PopoverPopup {
   type State = PopoverPopupState;