@base-ui/react 1.1.0 → 1.2.0

package/navigation-menu/viewport/NavigationMenuViewport.js

@@ -10,12 +10,15 @@ var React = _interopRequireWildcard(require("react"));
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useId = require("@base-ui/utils/useId");
 var _inertValue = require("@base-ui/utils/inertValue");
+var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _NavigationMenuRootContext = require("../root/NavigationMenuRootContext");
 var _FocusGuard = require("../../utils/FocusGuard");
+var _usePopupAutoResize = require("../../utils/usePopupAutoResize");
 var _utils = require("../../floating-ui-react/utils");
 var _getEmptyRootContext = require("../../floating-ui-react/utils/getEmptyRootContext");
 var _NavigationMenuPositionerContext = require("../positioner/NavigationMenuPositionerContext");
+var _DirectionContext = require("../../direction-provider/DirectionContext");
 var _jsxRuntime = require("react/jsx-runtime");
 const EMPTY_ROOT_CONTEXT = (0, _getEmptyRootContext.getEmptyRootContext)();
 function Guards({
@@ -75,6 +78,11 @@ const NavigationMenuViewport = exports.NavigationMenuViewport = /*#__PURE__*/Rea
   } = componentProps;
   const id = (0, _useId.useId)(idProp);
   const {
+    open,
+    mounted,
+    value,
+    popupElement,
+    positionerElement,
     setViewportElement,
     setViewportTargetElement,
     floatingRootContext,
@@ -82,7 +90,19 @@ const NavigationMenuViewport = exports.NavigationMenuViewport = /*#__PURE__*/Rea
     viewportInert,
     setViewportInert
   } = (0, _NavigationMenuRootContext.useNavigationMenuRootContext)();
-  const hasPositioner = Boolean((0, _NavigationMenuPositionerContext.useNavigationMenuPositionerContext)(true));
+  const positioning = (0, _NavigationMenuPositionerContext.useNavigationMenuPositionerContext)(true);
+  const hasPositioner = Boolean(positioning);
+  const direction = (0, _DirectionContext.useDirection)();
+  const enableAutoResize = (0, _useStableCallback.useStableCallback)(() => open);
+  (0, _usePopupAutoResize.usePopupAutoResize)({
+    popupElement,
+    positionerElement,
+    mounted,
+    content: value,
+    enabled: enableAutoResize,
+    side: positioning?.side ?? 'bottom',
+    direction
+  });
   const domReference = (floatingRootContext || EMPTY_ROOT_CONTEXT).useState('domReferenceElement');
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (domReference) {

package/number-field/input/NumberFieldInput.js

@@ -200,8 +200,8 @@ const NumberFieldInput = exports.NumberFieldInput = /*#__PURE__*/React.forwardRe
         return;
       }
 
-      // For trusted user typing, update the input text immediately and only fire onValueChange
-      // if the typed value is currently parseable into a number. This preserves good UX for IME
+      // Update the input text immediately and only fire onValueChange if the typed value is
+      // currently parseable into a number. This preserves good UX for IME
       // composition/partial input while still providing live numeric updates when possible.
       const allowedNonNumericKeys = getAllowedNonNumericKeys();
       const isValidCharacterString = Array.from(targetValue).every(ch => {
@@ -216,17 +216,9 @@ const NumberFieldInput = exports.NumberFieldInput = /*#__PURE__*/React.forwardRe
       if (!isValidCharacterString) {
         return;
       }
-      if (event.isTrusted) {
-        setInputValue(targetValue);
-        const parsedValue = (0, _parse.parseNumber)(targetValue, locale, formatOptionsRef.current);
-        if (parsedValue !== null) {
-          setValue(parsedValue, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputChange, event.nativeEvent));
-        }
-        return;
-      }
       const parsedValue = (0, _parse.parseNumber)(targetValue, locale, formatOptionsRef.current);
+      setInputValue(targetValue);
       if (parsedValue !== null) {
-        setInputValue(targetValue);
         setValue(parsedValue, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputChange, event.nativeEvent));
       }
     },

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

@@ -15,92 +15,99 @@ export interface NumberFieldRootProps extends Omit<BaseUIComponentProps<'div', N
   /**
    * The id of the input element.
    */
-  id?: string;
+  id?: string | undefined;
   /**
    * The minimum value of the input element.
    */
-  min?: number;
+  min?: number | undefined;
   /**
    * The maximum value of the input element.
    */
-  max?: number;
+  max?: number | undefined;
+  /**
+   * When true, direct text entry may be outside the `min`/`max` range without clamping,
+   * so native range underflow/overflow validation can occur.
+   * Step-based interactions (keyboard arrows, buttons, wheel, scrub) still clamp.
+   * @default false
+   */
+  allowOutOfRange?: boolean | undefined;
   /**
    * The small step value of the input element when incrementing while the meta key is held. Snaps
    * to multiples of this value.
    * @default 0.1
    */
-  smallStep?: number;
+  smallStep?: number | undefined;
   /**
    * Amount to increment and decrement with the buttons and arrow keys, or to scrub with pointer movement in the scrub area.
    * To always enable step validation on form submission, specify the `min` prop explicitly in conjunction with this prop.
    * Specify `step="any"` to always disable step validation.
    * @default 1
    */
-  step?: number | 'any';
+  step?: (number | 'any') | undefined;
   /**
    * The large step value of the input element when incrementing while the shift key is held. Snaps
    * to multiples of this value.
    * @default 10
    */
-  largeStep?: number;
+  largeStep?: number | undefined;
   /**
    * Whether the user must enter a value before submitting a form.
    * @default false
    */
-  required?: boolean;
+  required?: boolean | undefined;
   /**
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * Whether the user should be unable to change the field value.
    * @default false
    */
-  readOnly?: boolean;
+  readOnly?: boolean | undefined;
   /**
    * Identifies the field when a form is submitted.
    */
-  name?: string;
+  name?: string | undefined;
   /**
    * The raw numeric value of the field.
    */
-  value?: number | null;
+  value?: (number | null) | undefined;
   /**
    * The uncontrolled value of the field when it’s initially rendered.
    *
    * To render a controlled number field, use the `value` prop instead.
    */
-  defaultValue?: number;
+  defaultValue?: number | undefined;
   /**
    * Whether to allow the user to scrub the input value with the mouse wheel while focused and
    * hovering over the input.
    * @default false
    */
-  allowWheelScrub?: boolean;
+  allowWheelScrub?: boolean | undefined;
   /**
    * Whether the value should snap to the nearest step when incrementing or decrementing.
    * @default false
    */
-  snapOnStep?: boolean;
+  snapOnStep?: boolean | undefined;
   /**
    * Options to format the input value.
    */
-  format?: Intl.NumberFormatOptions;
+  format?: Intl.NumberFormatOptions | undefined;
   /**
    * Callback fired when the number value changes.
    *
    * The `eventDetails.reason` indicates what triggered the change:
    * - `'input-change'` for parseable typing or programmatic text updates
    * - `'input-clear'` when the field becomes empty
-   * - `'input-blur'` when formatting or clamping occurs on blur
+   * - `'input-blur'` when formatting (and clamping, if enabled) occurs on blur
    * - `'input-paste'` for paste interactions
    * - `'keyboard'` for keyboard input
    * - `'increment-press'` / `'decrement-press'` for button presses on the increment and decrement controls
    * - `'wheel'` for wheel-based scrubbing
    * - `'scrub'` for scrub area drags
    */
-  onValueChange?: (value: number | null, eventDetails: NumberFieldRoot.ChangeEventDetails) => void;
+  onValueChange?: ((value: number | null, eventDetails: NumberFieldRoot.ChangeEventDetails) => void) | undefined;
   /**
    * Callback function that is fired when the value is committed.
    * It runs later than `onValueChange`, when:
@@ -111,16 +118,16 @@ export interface NumberFieldRootProps extends Omit<BaseUIComponentProps<'div', N
    *
    * **Warning**: This is a generic event not a change event.
    */
-  onValueCommitted?: (value: number | null, eventDetails: NumberFieldRoot.CommitEventDetails) => void;
+  onValueCommitted?: ((value: number | null, eventDetails: NumberFieldRoot.CommitEventDetails) => void) | undefined;
   /**
    * The locale of the input element.
    * Defaults to the user's runtime locale.
    */
-  locale?: Intl.LocalesArgument;
+  locale?: Intl.LocalesArgument | undefined;
   /**
    * A ref to access the hidden input element.
    */
-  inputRef?: React.Ref<HTMLInputElement>;
+  inputRef?: React.Ref<HTMLInputElement> | undefined;
 }
 export interface NumberFieldRootState extends FieldRoot.State {
   /**

package/number-field/root/NumberFieldRoot.js

@@ -54,6 +54,7 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
     onValueCommitted: onValueCommittedProp,
     allowWheelScrub = false,
     snapOnStep = false,
+    allowOutOfRange = false,
     format,
     locale,
     render,
@@ -180,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,
@@ -187,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);
@@ -215,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,
@@ -225,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
     }));
   });
@@ -263,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();
+        }
+      });
     });
   });
 

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,16 +10,16 @@ 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;
+  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;
   valueRef: React.RefObject<number | null>;

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,
@@ -78,7 +84,7 @@ function useNumberFieldButton(params) {
       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);
@@ -107,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);
@@ -137,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;
-      if (isDisabled || event.pointerType !== 'touch' || !isPressedRef.current) {
+      if (isDisabled || !isTouchLikePointerType(event.pointerType) || !isPressedRef.current) {
         return;
       }
       if (movesAfterTouchRef.current != null) {
@@ -164,7 +169,7 @@ function useNumberFieldButton(params) {
     },
     onMouseEnter(event) {
       const isDisabled = disabled || readOnly;
-      if (event.defaultPrevented || isDisabled || !isPressedRef.current || isTouchingButtonRef.current || pointerTypeRef.current === 'touch') {
+      if (event.defaultPrevented || isDisabled || !isPressedRef.current || isTouchingButtonRef.current || isTouchLikePointerType(pointerTypeRef.current)) {
         return;
       }
       startAutoChange(isIncrement, event);

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

@@ -14,13 +14,13 @@ export interface NumberFieldScrubAreaProps extends BaseUIComponentProps<'span',
    * 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/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.1.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.4.0",
     "use-sync-external-store": "^1.6.0",
-    "@base-ui/utils": "0.2.4"
+    "@base-ui/utils": "0.2.5"
   },
   "peerDependencies": {
     "@types/react": "^17 || ^18 || ^19",
@@ -195,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.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.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/popup/PopoverPopup.d.ts

@@ -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;