@base-ui/react 1.1.0 → 1.2.0

package/esm/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/esm/number-field/scrub-area/NumberFieldScrubArea.js

@@ -46,6 +46,8 @@ export const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function Numbe
   } = 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,
@@ -132,6 +134,17 @@ export const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function Numbe
           isScrubbingRef.current = false;
           onScrubbingChange(false, event);
           onValueCommitted(lastChangedValueRef.current ?? valueRef.current, createGenericEventDetails(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 (isFirefox) {
@@ -157,6 +170,7 @@ export const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function Numbe
       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) ?? DEFAULT_STEP;
         const rawAmount = dValue * stepAmount;
@@ -214,6 +228,8 @@ export const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function Numbe
         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/esm/number-field/scrub-area/NumberFieldScrubAreaContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
 export const NumberFieldScrubAreaContext = /*#__PURE__*/React.createContext(undefined);

package/esm/number-field/utils/stateAttributesMapping.js

@@ -1,4 +1,6 @@
+import { fieldValidityMapping } from "../../field/utils/constants.js";
 export const stateAttributesMapping = {
   inputValue: () => null,
-  value: () => null
+  value: () => null,
+  ...fieldValidityMapping
 };

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

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

package/esm/popover/arrow/PopoverArrow.js

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

package/esm/popover/arrow/PopoverArrowDataAttributes.js

@@ -12,12 +12,12 @@ export let PopoverArrowDataAttributes = function (PopoverArrowDataAttributes) {
    * 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"] = CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  PopoverArrowDataAttributes["align"] = "data-align";
+  PopoverArrowDataAttributes[PopoverArrowDataAttributes["align"] = CommonPopupDataAttributes.align] = "align";
   /**
    * Present when the popover arrow is uncentered.
    */

package/esm/popover/backdrop/PopoverBackdrop.js

@@ -30,10 +30,10 @@ export const PopoverBackdrop = /*#__PURE__*/React.forwardRef(function PopoverBac
   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 = useRenderElement('div', props, {
     state,
     ref: [store.context.backdropRef, forwardedRef],

package/esm/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;

package/esm/popover/popup/PopoverPopup.js

@@ -77,13 +77,13 @@ export const PopoverPopup = /*#__PURE__*/React.forwardRef(function PopoverPopup(
     return true;
   }
   const resolvedInitialFocus = initialFocus === undefined ? defaultInitialFocus : initialFocus;
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     side: positioner.side,
     align: positioner.align,
     instant: instantType,
     transitionStatus
-  }), [open, positioner.side, positioner.align, instantType, transitionStatus]);
+  };
   const setPopupElement = React.useCallback(element => {
     store.set('popupElement', element);
   }, [store]);

package/esm/popover/portal/PopoverPortal.d.ts

@@ -16,7 +16,7 @@ export interface PopoverPortalProps extends FloatingPortal.Props<PopoverPortal.S
    * Whether to keep the portal mounted in the DOM while the popup is hidden.
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
 }
 export declare namespace PopoverPortal {
   type Props = PopoverPortalProps;

package/esm/popover/portal/PopoverPortal.js

@@ -30,8 +30,7 @@ export const PopoverPortal = /*#__PURE__*/React.forwardRef(function PopoverPorta
     value: keepMounted,
     children: /*#__PURE__*/_jsx(FloatingPortal, {
       ref: forwardedRef,
-      ...portalProps,
-      renderGuards: false
+      ...portalProps
     })
   });
 });

package/esm/popover/portal/PopoverPortalContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
 export const PopoverPortalContext = /*#__PURE__*/React.createContext(undefined);

package/esm/popover/positioner/PopoverPositioner.js

@@ -96,7 +96,7 @@ export const PopoverPositioner = /*#__PURE__*/React.forwardRef(function PopoverP
     props: defaultProps,
     ...positioning
   }), [defaultProps, positioning]);
-  const domReference = floatingRootContext?.select('domReferenceElement');
+  const domReference = floatingRootContext.useState('domReferenceElement');
 
   // When the current trigger element changes, enable transitions on the
   // positioner temporarily
@@ -118,13 +118,13 @@ export const PopoverPositioner = /*#__PURE__*/React.forwardRef(function PopoverP
     }
     return undefined;
   }, [domReference, runOnceAnimationsFinish, store]);
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     side: positioner.side,
     align: positioner.align,
     anchorHidden: positioner.anchorHidden,
     instant: instantType
-  }), [open, positioner.side, positioner.align, positioner.anchorHidden, instantType]);
+  };
   const setPositionerElement = React.useCallback(element => {
     store.set('positionerElement', element);
   }, [store]);

package/esm/popover/positioner/PopoverPositionerDataAttributes.js

@@ -16,11 +16,11 @@ export let PopoverPositionerDataAttributes = function (PopoverPositionerDataAttr
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  PopoverPositionerDataAttributes["side"] = "data-side";
+  PopoverPositionerDataAttributes[PopoverPositionerDataAttributes["side"] = CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  PopoverPositionerDataAttributes["align"] = "data-align";
+  PopoverPositionerDataAttributes[PopoverPositionerDataAttributes["align"] = CommonPopupDataAttributes.align] = "align";
   return PopoverPositionerDataAttributes;
 }({});

package/esm/popover/root/PopoverRoot.d.ts

@@ -18,19 +18,19 @@ export interface PopoverRootProps<Payload = unknown> {
    * To render a controlled popover, use the `open` prop instead.
    * @default false
    */
-  defaultOpen?: boolean;
+  defaultOpen?: boolean | undefined;
   /**
    * Whether the popover is currently open.
    */
-  open?: boolean;
+  open?: boolean | undefined;
   /**
    * Event handler called when the popover is opened or closed.
    */
-  onOpenChange?: (open: boolean, eventDetails: PopoverRoot.ChangeEventDetails) => void;
+  onOpenChange?: ((open: boolean, eventDetails: PopoverRoot.ChangeEventDetails) => void) | undefined;
   /**
    * Event handler called after any animations complete when the popover is opened or closed.
    */
-  onOpenChangeComplete?: (open: boolean) => void;
+  onOpenChangeComplete?: ((open: boolean) => void) | undefined;
   /**
    * A ref to imperative actions.
    * - `unmount`: When specified, the popover will not be unmounted when closed.
@@ -38,7 +38,7 @@ export interface PopoverRootProps<Payload = unknown> {
    * Useful when the popover's animation is controlled by an external library.
    * - `close`: Closes the dialog imperatively when called.
    */
-  actionsRef?: React.RefObject<PopoverRoot.Actions | null>;
+  actionsRef?: React.RefObject<PopoverRoot.Actions | null> | undefined;
   /**
    * Determines if the popover enters a modal state when open.
    * - `true`: user interaction is limited to the popover: document page scroll is locked, and pointer interactions on outside elements are disabled.
@@ -46,23 +46,23 @@ export interface PopoverRootProps<Payload = unknown> {
    * - `'trap-focus'`: focus is trapped inside the popover, but document page scroll is not locked and pointer interactions outside of it remain enabled.
    * @default false
    */
-  modal?: boolean | 'trap-focus';
+  modal?: (boolean | 'trap-focus') | undefined;
   /**
    * ID of the trigger that the popover is associated with.
    * This is useful in conjunction with the `open` prop to create a controlled popover.
    * There's no need to specify this prop when the popover is uncontrolled (i.e. when the `open` prop is not set).
    */
-  triggerId?: string | null;
+  triggerId?: (string | null) | undefined;
   /**
    * ID of the trigger that the popover is associated with.
    * This is useful in conjunction with the `defaultOpen` prop to create an initially open popover.
    */
-  defaultTriggerId?: string | null;
+  defaultTriggerId?: (string | null) | undefined;
   /**
    * A handle to associate the popover with a trigger.
    * If specified, allows external triggers to control the popover's open state.
    */
-  handle?: PopoverHandle<Payload>;
+  handle?: PopoverHandle<Payload> | undefined;
   /**
    * The content of the popover.
    * This can be a regular React node or a render function that receives the `payload` of the active trigger.

package/esm/popover/root/PopoverRoot.js

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import { useScrollLock } from '@base-ui/utils/useScrollLock';
+import { useOnFirstRender } from '@base-ui/utils/useOnFirstRender';
 import { useDismiss, useInteractions, useRole, FloatingTree, useFloatingParentNodeId, useSyncedFloatingRootContext } from "../../floating-ui-react/index.js";
 import { PopoverRootContext, usePopoverRootContext } from "./PopoverRootContext.js";
 import { PopoverStore } from "../store/PopoverStore.js";
@@ -16,7 +17,7 @@ function PopoverRootComponent({
   const {
     children,
     open: openProp,
-    defaultOpen: defaultOpenProp = false,
+    defaultOpen = false,
     onOpenChange,
     onOpenChangeComplete,
     modal = false,
@@ -25,12 +26,24 @@ function PopoverRootComponent({
     defaultTriggerId: defaultTriggerIdProp = null
   } = props;
   const store = PopoverStore.useStore(handle?.store, {
-    open: openProp ?? defaultOpenProp,
     modal,
-    activeTriggerId: triggerIdProp !== undefined ? triggerIdProp : defaultTriggerIdProp
+    open: defaultOpen,
+    openProp,
+    activeTriggerId: defaultTriggerIdProp,
+    triggerIdProp
   });
-  store.useControlledProp('open', openProp, defaultOpenProp);
-  store.useControlledProp('activeTriggerId', triggerIdProp, defaultTriggerIdProp);
+
+  // Support initially open state when uncontrolled
+  useOnFirstRender(() => {
+    if (openProp === undefined && store.state.open === false && defaultOpen === true) {
+      store.update({
+        open: true,
+        activeTriggerId: defaultTriggerIdProp
+      });
+    }
+  });
+  store.useControlledProp('openProp', openProp);
+  store.useControlledProp('triggerIdProp', triggerIdProp);
   const open = store.useState('open');
   const positionerElement = store.useState('positionerElement');
   const payload = store.useState('payload');