@base-ui/react 1.1.0 → 1.3.0

package/esm/select/root/SelectRoot.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { type BaseUIChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
+import { type Group } from "../../utils/resolveValueLabel.js";
 /**
  * Groups all parts of the select.
  * Doesn’t render its own HTML element.
@@ -14,74 +15,79 @@ export interface SelectRootProps<Value, Multiple extends boolean | undefined = f
   /**
    * A ref to access the hidden input element.
    */
-  inputRef?: React.Ref<HTMLInputElement>;
+  inputRef?: React.Ref<HTMLInputElement> | undefined;
   /**
    * Identifies the field when a form is submitted.
    */
-  name?: string;
+  name?: string | undefined;
+  /**
+   * Provides a hint to the browser for autofill.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete
+   */
+  autoComplete?: string | undefined;
   /**
    * The id of the Select.
    */
-  id?: string;
+  id?: string | undefined;
   /**
    * Whether the user must choose a value before submitting a form.
    * @default false
    */
-  required?: boolean;
+  required?: boolean | undefined;
   /**
    * Whether the user should be unable to choose a different option from the select popup.
    * @default false
    */
-  readOnly?: boolean;
+  readOnly?: boolean | undefined;
   /**
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * Whether multiple items can be selected.
    * @default false
    */
-  multiple?: Multiple;
+  multiple?: Multiple | undefined;
   /**
    * Whether moving the pointer over items should highlight them.
    * Disabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state.
    * @default true
    */
-  highlightItemOnHover?: boolean;
+  highlightItemOnHover?: boolean | undefined;
   /**
    * Whether the select popup is initially open.
    *
    * To render a controlled select popup, use the `open` prop instead.
    * @default false
    */
-  defaultOpen?: boolean;
+  defaultOpen?: boolean | undefined;
   /**
    * Event handler called when the select popup is opened or closed.
    */
-  onOpenChange?: (open: boolean, eventDetails: SelectRootChangeEventDetails) => void;
+  onOpenChange?: ((open: boolean, eventDetails: SelectRootChangeEventDetails) => void) | undefined;
   /**
    * Event handler called after any animations complete when the select popup is opened or closed.
    */
-  onOpenChangeComplete?: (open: boolean) => void;
+  onOpenChangeComplete?: ((open: boolean) => void) | undefined;
   /**
    * Whether the select popup is currently open.
    */
-  open?: boolean;
+  open?: boolean | undefined;
   /**
    * Determines if the select enters a modal state when open.
    * - `true`: user interaction is limited to the select: document page scroll is locked and pointer interactions on outside elements are disabled.
    * - `false`: user interaction with the rest of the document is allowed.
    * @default true
    */
-  modal?: boolean;
+  modal?: boolean | undefined;
   /**
    * A ref to imperative actions.
    * - `unmount`: When specified, the select will not be unmounted when closed.
    * Instead, the `unmount` function must be called to unmount the select manually.
    * Useful when the select's animation is controlled by an external library.
    */
-  actionsRef?: React.RefObject<SelectRootActions | null>;
+  actionsRef?: React.RefObject<SelectRootActions | null> | undefined;
   /**
    * Data structure of the items rendered in the select popup.
    * When specified, `<Select.Value>` renders the label of the selected item instead of the raw value.
@@ -99,36 +105,36 @@ export interface SelectRootProps<Value, Multiple extends boolean | undefined = f
   items?: Record<string, React.ReactNode> | ReadonlyArray<{
     label: React.ReactNode;
     value: any;
-  }>;
+  }> | ReadonlyArray<Group<any>> | undefined;
   /**
    * When the item values are objects (`<Select.Item value={object}>`), this function converts the object value to a string representation for display in the trigger.
    * If the shape of the object is `{ value, label }`, the label will be used automatically without needing to specify this prop.
    */
-  itemToStringLabel?: (itemValue: Value) => string;
+  itemToStringLabel?: ((itemValue: Value) => string) | undefined;
   /**
    * When the item values are objects (`<Select.Item value={object}>`), this function converts the object value to a string representation for form submission.
    * If the shape of the object is `{ value, label }`, the value will be used automatically without needing to specify this prop.
    */
-  itemToStringValue?: (itemValue: Value) => string;
+  itemToStringValue?: ((itemValue: Value) => string) | undefined;
   /**
    * Custom comparison logic used to determine if a select item value matches the current selected value. Useful when item values are objects without matching referentially.
    * Defaults to `Object.is` comparison.
    */
-  isItemEqualToValue?: (itemValue: Value, value: Value) => boolean;
+  isItemEqualToValue?: ((itemValue: Value, value: Value) => boolean) | undefined;
   /**
    * The uncontrolled value of the select when it’s initially rendered.
    *
    * To render a controlled select, use the `value` prop instead.
    */
-  defaultValue?: SelectValueType<Value, Multiple> | null;
+  defaultValue?: SelectValueType<Value, Multiple> | null | undefined;
   /**
    * The value of the select. Use when controlled.
    */
-  value?: SelectValueType<Value, Multiple> | null;
+  value?: SelectValueType<Value, Multiple> | null | undefined;
   /**
    * Event handler called when the value of the select changes.
    */
-  onValueChange?: (value: SelectValueType<Value, Multiple> | (Multiple extends true ? never : null), eventDetails: SelectRootChangeEventDetails) => void;
+  onValueChange?: ((value: SelectValueType<Value, Multiple> | (Multiple extends true ? never : null), eventDetails: SelectRootChangeEventDetails) => void) | undefined;
 }
 export interface SelectRootState {}
 export interface SelectRootActions {

package/esm/select/root/SelectRoot.js

@@ -45,6 +45,7 @@ export function SelectRoot(props) {
     defaultOpen = false,
     onOpenChange,
     name: nameProp,
+    autoComplete,
     disabled: disabledProp = false,
     readOnly = false,
     required = false,
@@ -114,11 +115,11 @@ export function SelectRoot(props) {
   } = useTransitionStatus(open);
   const {
     openMethod,
-    triggerProps: interactionTypeProps,
-    reset: resetOpenInteractionType
+    triggerProps: interactionTypeProps
   } = useOpenInteractionType(open);
   const store = useRefWithInit(() => new Store({
     id: generatedId,
+    labelId: undefined,
     modal,
     multiple,
     itemToStringLabel,
@@ -236,7 +237,6 @@ export function SelectRoot(props) {
   const handleUnmount = useStableCallback(() => {
     setMounted(false);
     store.set('activeIndex', null);
-    resetOpenInteractionType();
     onOpenChangeComplete?.(false);
   });
   useOpenChangeComplete({
@@ -320,8 +320,6 @@ export function SelectRoot(props) {
       }
     },
     onTypingChange(typing) {
-      // FIXME: Floating UI doesn't support allowing space to select an item while the popup is
-      // closed and the trigger isn't a native <button>.
       typingRef.current = typing;
     }
   });
@@ -392,6 +390,7 @@ export function SelectRoot(props) {
   }), [store, name, required, disabled, readOnly, multiple, itemToStringLabel, itemToStringValue, highlightItemOnHover, setValue, setOpen, getItemProps, floatingContext.context.events, validation, onOpenChangeComplete, handleScrollArrowVisibility]);
   const ref = useMergedRefs(inputRef, validation.inputRef);
   const hasMultipleSelection = multiple && Array.isArray(value) && value.length > 0;
+  const hiddenInputName = multiple ? undefined : name;
   const hiddenInputs = React.useMemo(() => {
     if (!multiple || !Array.isArray(value) || !name) {
       return null;
@@ -453,7 +452,9 @@ export function SelectRoot(props) {
             queueMicrotask(handleChange);
           }
         }),
-        name: multiple ? undefined : name,
+        id: generatedId && hiddenInputName == null ? `${generatedId}-hidden-input` : undefined,
+        name: hiddenInputName,
+        autoComplete: autoComplete,
         value: serializedValue,
         disabled: disabled,
         required: required && !hasMultipleSelection,

package/esm/select/root/SelectRootContext.d.ts

@@ -14,30 +14,30 @@ export interface SelectRootContext {
   highlightItemOnHover: boolean;
   setValue: (nextValue: any, eventDetails: SelectRoot.ChangeEventDetails) => void;
   setOpen: (open: boolean, eventDetails: SelectRoot.ChangeEventDetails) => void;
-  listRef: React.MutableRefObject<Array<HTMLElement | null>>;
-  popupRef: React.MutableRefObject<HTMLDivElement | null>;
-  scrollHandlerRef: React.MutableRefObject<((el: HTMLDivElement) => void) | null>;
+  listRef: React.RefObject<Array<HTMLElement | null>>;
+  popupRef: React.RefObject<HTMLDivElement | null>;
+  scrollHandlerRef: React.RefObject<((el: HTMLDivElement) => void) | null>;
   handleScrollArrowVisibility: () => void;
   scrollArrowsMountedCountRef: React.RefObject<number>;
   getItemProps: (props?: HTMLProps & {
-    active?: boolean;
-    selected?: boolean;
+    active?: boolean | undefined;
+    selected?: boolean | undefined;
   }) => Record<string, unknown>;
   events: FloatingEvents;
-  valueRef: React.MutableRefObject<HTMLSpanElement | null>;
-  valuesRef: React.MutableRefObject<Array<any>>;
-  labelsRef: React.MutableRefObject<Array<string | null>>;
-  typingRef: React.MutableRefObject<boolean>;
-  selectionRef: React.MutableRefObject<{
+  valueRef: React.RefObject<HTMLSpanElement | null>;
+  valuesRef: React.RefObject<Array<any>>;
+  labelsRef: React.RefObject<Array<string | null>>;
+  typingRef: React.RefObject<boolean>;
+  selectionRef: React.RefObject<{
     allowUnselectedMouseUp: boolean;
     allowSelectedMouseUp: boolean;
   }>;
-  selectedItemTextRef: React.MutableRefObject<HTMLSpanElement | null>;
+  selectedItemTextRef: React.RefObject<HTMLSpanElement | null>;
   validation: UseFieldValidationReturnValue;
-  onOpenChangeComplete?: (open: boolean) => void;
-  keyboardActiveRef: React.MutableRefObject<boolean>;
+  onOpenChangeComplete?: ((open: boolean) => void) | undefined;
+  keyboardActiveRef: React.RefObject<boolean>;
   alignItemWithTriggerActiveRef: React.RefObject<boolean>;
-  initialValueRef: React.MutableRefObject<any>;
+  initialValueRef: React.RefObject<any>;
 }
 export declare const SelectRootContext: React.Context<SelectRootContext | null>;
 export declare const SelectFloatingContext: React.Context<import("../../floating-ui-react/components/FloatingRootStore.js").FloatingRootStore | null>;

package/esm/select/root/SelectRootContext.js

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

package/esm/select/scroll-arrow/SelectScrollArrow.d.ts

@@ -7,18 +7,30 @@ import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
  */
 export declare const SelectScrollArrow: React.ForwardRefExoticComponent<Omit<SelectScrollArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectScrollArrowState {
+  /**
+   * The direction of the element.
+   */
   direction: 'up' | 'down';
+  /**
+   * Whether the element is visible.
+   */
   visible: boolean;
+  /**
+   * The side of the anchor the component is placed on.
+   */
   side: Side | 'none';
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
-export interface SelectScrollArrowProps extends BaseUIComponentProps<'div', SelectScrollArrow.State> {
+export interface SelectScrollArrowProps extends BaseUIComponentProps<'div', SelectScrollArrowState> {
   direction: 'up' | 'down';
   /**
    * Whether to keep the HTML element in the DOM while the select popup is not scrollable.
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
 }
 export declare namespace SelectScrollArrow {
   type State = SelectScrollArrowState;

package/esm/select/scroll-arrow/SelectScrollArrow.js

@@ -67,12 +67,12 @@ export const SelectScrollArrow = /*#__PURE__*/React.forwardRef(function SelectSc
       }
     }
   });
-  const state = React.useMemo(() => ({
+  const state = {
     direction,
     visible,
     side,
     transitionStatus
-  }), [direction, visible, side, transitionStatus]);
+  };
   const defaultProps = {
     'aria-hidden': true,
     children: direction === 'up' ? '▲' : '▼',

package/esm/select/scroll-down-arrow/SelectScrollDownArrow.d.ts

@@ -8,12 +8,12 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  */
 export declare const SelectScrollDownArrow: React.ForwardRefExoticComponent<Omit<SelectScrollDownArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectScrollDownArrowState {}
-export interface SelectScrollDownArrowProps extends BaseUIComponentProps<'div', SelectScrollDownArrow.State> {
+export interface SelectScrollDownArrowProps extends BaseUIComponentProps<'div', SelectScrollDownArrowState> {
   /**
    * Whether to keep the HTML element in the DOM while the select popup is not scrollable.
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
 }
 export declare namespace SelectScrollDownArrow {
   type State = SelectScrollDownArrowState;

package/esm/select/scroll-down-arrow/SelectScrollDownArrowDataAttributes.js

@@ -21,6 +21,6 @@ export let SelectScrollDownArrowDataAttributes = function (SelectScrollDownArrow
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'none' | 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  SelectScrollDownArrowDataAttributes["side"] = "data-side";
+  SelectScrollDownArrowDataAttributes[SelectScrollDownArrowDataAttributes["side"] = CommonPopupDataAttributes.side] = "side";
   return SelectScrollDownArrowDataAttributes;
 }({});

package/esm/select/scroll-up-arrow/SelectScrollUpArrow.d.ts

@@ -8,12 +8,12 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  */
 export declare const SelectScrollUpArrow: React.ForwardRefExoticComponent<Omit<SelectScrollUpArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectScrollUpArrowState {}
-export interface SelectScrollUpArrowProps extends BaseUIComponentProps<'div', SelectScrollUpArrow.State> {
+export interface SelectScrollUpArrowProps extends BaseUIComponentProps<'div', SelectScrollUpArrowState> {
   /**
    * Whether to keep the HTML element in the DOM while the select popup is not scrollable.
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
 }
 export declare namespace SelectScrollUpArrow {
   type State = SelectScrollUpArrowState;

package/esm/select/scroll-up-arrow/SelectScrollUpArrowDataAttributes.js

@@ -21,6 +21,6 @@ export let SelectScrollUpArrowDataAttributes = function (SelectScrollUpArrowData
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'none' | 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  SelectScrollUpArrowDataAttributes["side"] = "data-side";
+  SelectScrollUpArrowDataAttributes[SelectScrollUpArrowDataAttributes["side"] = CommonPopupDataAttributes.side] = "side";
   return SelectScrollUpArrowDataAttributes;
 }({});

package/esm/select/store.d.ts

@@ -2,17 +2,19 @@ import { Store } from '@base-ui/utils/store';
 import { type InteractionType } from '@base-ui/utils/useEnhancedClickHandler';
 import type { TransitionStatus } from "../utils/useTransitionStatus.js";
 import type { HTMLProps } from "../utils/types.js";
+import { type Group } from "../utils/resolveValueLabel.js";
 export type State = {
   id: string | undefined;
+  labelId: string | undefined;
   modal: boolean;
   multiple: boolean;
   items: Record<string, React.ReactNode> | ReadonlyArray<{
     label: React.ReactNode;
     value: any;
-  }> | undefined;
+  }> | ReadonlyArray<Group<any>> | undefined;
   itemToStringLabel: ((item: any) => string) | undefined;
   itemToStringValue: ((item: any) => string) | undefined;
-  isItemEqualToValue: (item: any, value: any) => boolean;
+  isItemEqualToValue: (itemValue: any, selectedValue: any) => boolean;
   value: any;
   open: boolean;
   mounted: boolean;
@@ -33,15 +35,16 @@ export type State = {
 export type SelectStore = Store<State>;
 export declare const selectors: {
   id: (state: State) => string | undefined;
+  labelId: (state: State) => string | undefined;
   modal: (state: State) => boolean;
   multiple: (state: State) => boolean;
-  items: (state: State) => Record<string, import("react").ReactNode> | readonly {
+  items: (state: State) => readonly Group<any>[] | Record<string, import("react").ReactNode> | readonly {
     label: React.ReactNode;
     value: any;
   }[] | undefined;
   itemToStringLabel: (state: State) => ((item: any) => string) | undefined;
   itemToStringValue: (state: State) => ((item: any) => string) | undefined;
-  isItemEqualToValue: (state: State) => (item: any, value: any) => boolean;
+  isItemEqualToValue: (state: State) => (itemValue: any, selectedValue: any) => boolean;
   value: (state: State) => any;
   hasSelectedValue: (state: State) => boolean;
   hasNullItemLabel: (state: State, enabled: boolean) => boolean;
@@ -53,7 +56,7 @@ export declare const selectors: {
   activeIndex: (state: State) => number | null;
   selectedIndex: (state: State) => number | null;
   isActive: (state: State, index: number) => boolean;
-  isSelected: (state: State, index: number, candidate: any) => boolean;
+  isSelected: (state: State, index: number, itemValue: any) => boolean;
   isSelectedByFocus: (state: State, index: number) => boolean;
   popupProps: (state: State) => HTMLProps;
   triggerProps: (state: State) => HTMLProps;

package/esm/select/store.js

@@ -3,6 +3,7 @@ import { compareItemEquality } from "../utils/itemEquality.js";
 import { hasNullItemLabel, stringifyAsValue } from "../utils/resolveValueLabel.js";
 export const selectors = {
   id: createSelector(state => state.id),
+  labelId: createSelector(state => state.labelId),
   modal: createSelector(state => state.modal),
   multiple: createSelector(state => state.multiple),
   items: createSelector(state => state.items),
@@ -35,11 +36,11 @@ export const selectors = {
   activeIndex: createSelector(state => state.activeIndex),
   selectedIndex: createSelector(state => state.selectedIndex),
   isActive: createSelector((state, index) => state.activeIndex === index),
-  isSelected: createSelector((state, index, candidate) => {
+  isSelected: createSelector((state, index, itemValue) => {
     const comparer = state.isItemEqualToValue;
     const storeValue = state.value;
     if (state.multiple) {
-      return Array.isArray(storeValue) && storeValue.some(item => compareItemEquality(item, candidate, comparer));
+      return Array.isArray(storeValue) && storeValue.some(selectedItem => compareItemEquality(itemValue, selectedItem, comparer));
     }
 
     // `selectedIndex` is only updated after the items mount for the first time,
@@ -47,7 +48,7 @@ export const selectors = {
     if (state.selectedIndex === index && state.selectedIndex !== null) {
       return true;
     }
-    return compareItemEquality(storeValue, candidate, comparer);
+    return compareItemEquality(itemValue, storeValue, comparer);
   }),
   isSelectedByFocus: createSelector((state, index) => {
     return state.selectedIndex === index;

package/esm/select/trigger/SelectTrigger.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.js";
-import type { FieldRoot } from "../../field/root/FieldRoot.js";
+import type { FieldRootState } from "../../field/root/FieldRoot.js";
 /**
  * A button that opens the select popup.
  * Renders a `<button>` element.
@@ -8,7 +8,7 @@ import type { FieldRoot } from "../../field/root/FieldRoot.js";
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
 export declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export interface SelectTriggerState extends FieldRoot.State {
+export interface SelectTriggerState extends FieldRootState {
   /**
    * Whether the select popup is currently open.
    */
@@ -26,10 +26,12 @@ export interface SelectTriggerState extends FieldRoot.State {
    */
   placeholder: boolean;
 }
-export interface SelectTriggerProps extends NativeButtonProps, BaseUIComponentProps<'button', SelectTrigger.State> {
+export interface SelectTriggerProps extends NativeButtonProps, BaseUIComponentProps<'button', SelectTriggerState> {
   children?: React.ReactNode;
-  /** Whether the component should ignore user interaction. */
-  disabled?: boolean;
+  /**
+   * Whether the component should ignore user interaction.
+   */
+  disabled?: boolean | undefined;
 }
 export declare namespace SelectTrigger {
   type State = SelectTriggerState;

package/esm/select/trigger/SelectTrigger.js

@@ -21,6 +21,7 @@ import { useButton } from "../../use-button/index.js";
 import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
 import { useLabelableId } from "../../labelable-provider/useLabelableId.js";
+import { resolveAriaLabelledBy } from "../../utils/resolveAriaLabelledBy.js";
 const BOUNDARY_OFFSET = 2;
 const SELECTED_DELAY = 400;
 const UNSELECTED_DELAY = 200;
@@ -53,7 +54,7 @@ export const SelectTrigger = /*#__PURE__*/React.forwardRef(function SelectTrigge
     disabled: fieldDisabled
   } = useFieldRootContext();
   const {
-    labelId
+    labelId: fieldLabelId
   } = useLabelableContext();
   const {
     store,
@@ -73,10 +74,12 @@ export const SelectTrigger = /*#__PURE__*/React.forwardRef(function SelectTrigge
   const positionerElement = useStore(store, selectors.positionerElement);
   const listElement = useStore(store, selectors.listElement);
   const rootId = useStore(store, selectors.id);
+  const selectLabelId = useStore(store, selectors.labelId);
   const hasSelectedValue = useStore(store, selectors.hasSelectedValue);
   const shouldCheckNullItemLabel = !hasSelectedValue && open;
   const hasNullItemLabel = useStore(store, selectors.hasNullItemLabel, shouldCheckNullItemLabel);
   const id = idProp ?? rootId;
+  const ariaLabelledBy = resolveAriaLabelledBy(fieldLabelId, selectLabelId);
   useLabelableId({
     id
   });
@@ -142,7 +145,7 @@ export const SelectTrigger = /*#__PURE__*/React.forwardRef(function SelectTrigge
     'aria-expanded': open ? 'true' : 'false',
     'aria-haspopup': 'listbox',
     'aria-controls': open ? ariaControlsId : undefined,
-    'aria-labelledby': labelId,
+    'aria-labelledby': ariaLabelledBy,
     'aria-readonly': readOnly || undefined,
     'aria-required': required || undefined,
     tabIndex: disabled ? -1 : 0,
@@ -215,14 +218,14 @@ export const SelectTrigger = /*#__PURE__*/React.forwardRef(function SelectTrigge
   // ensure nested useButton does not overwrite the combobox role:
   // <Toolbar.Button render={<Select.Trigger />} />
   props.role = 'combobox';
-  const state = React.useMemo(() => ({
+  const state = {
     ...fieldState,
     open,
     disabled,
     value,
     readOnly,
     placeholder: !hasSelectedValue
-  }), [fieldState, open, disabled, value, readOnly, hasSelectedValue]);
+  };
   return useRenderElement('button', componentProps, {
     ref: [forwardedRef, triggerRef],
     state,

package/esm/select/value/SelectValue.d.ts

@@ -12,8 +12,12 @@ export interface SelectValueState {
    * The value of the currently selected item.
    */
   value: any;
+  /**
+   * Whether the placeholder is being displayed.
+   */
+  placeholder: boolean;
 }
-export interface SelectValueProps extends Omit<BaseUIComponentProps<'span', SelectValue.State>, 'children'> {
+export interface SelectValueProps extends Omit<BaseUIComponentProps<'span', SelectValueState>, 'children'> {
   /**
    * Accepts a function that returns a `ReactNode` to format the selected value.
    * @example

package/esm/select/value/SelectValue.js

@@ -34,10 +34,10 @@ export const SelectValue = /*#__PURE__*/React.forwardRef(function SelectValue(co
   const hasSelectedValue = useStore(store, selectors.hasSelectedValue);
   const shouldCheckNullItemLabel = !hasSelectedValue && placeholder != null && childrenProp == null;
   const hasNullLabel = useStore(store, selectors.hasNullItemLabel, shouldCheckNullItemLabel);
-  const state = React.useMemo(() => ({
+  const state = {
     value,
     placeholder: !hasSelectedValue
-  }), [value, hasSelectedValue]);
+  };
   let children = null;
   if (typeof childrenProp === 'function') {
     children = childrenProp(value);

package/esm/separator/Separator.d.ts

@@ -7,12 +7,12 @@ import type { BaseUIComponentProps, Orientation } from "../utils/types.js";
  * Documentation: [Base UI Separator](https://base-ui.com/react/components/separator)
  */
 export declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface SeparatorProps extends BaseUIComponentProps<'div', Separator.State> {
+export interface SeparatorProps extends BaseUIComponentProps<'div', SeparatorState> {
   /**
    * The orientation of the separator.
    * @default 'horizontal'
    */
-  orientation?: Orientation;
+  orientation?: Orientation | undefined;
 }
 export interface SeparatorState {
   /**

package/esm/separator/Separator.js

@@ -16,9 +16,9 @@ export const Separator = /*#__PURE__*/React.forwardRef(function SeparatorCompone
     orientation = 'horizontal',
     ...elementProps
   } = componentProps;
-  const state = React.useMemo(() => ({
+  const state = {
     orientation
-  }), [orientation]);
+  };
   const element = useRenderElement('div', componentProps, {
     state,
     ref: forwardedRef,

package/esm/slider/control/SliderControl.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
-import type { SliderRoot } from "../root/SliderRoot.js";
+import type { SliderRootState } from "../root/SliderRoot.js";
 /**
  * The clickable, interactive part of the slider.
  * Renders a `<div>` element.
@@ -8,8 +8,9 @@ import type { SliderRoot } from "../root/SliderRoot.js";
  * Documentation: [Base UI Slider](https://base-ui.com/react/components/slider)
  */
 export declare const SliderControl: React.ForwardRefExoticComponent<Omit<SliderControlProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface SliderControlProps extends BaseUIComponentProps<'div', SliderRoot.State> {}
+export interface SliderControlState extends SliderRootState {}
+export interface SliderControlProps extends BaseUIComponentProps<'div', SliderControlState> {}
 export declare namespace SliderControl {
-  type State = SliderRoot.State;
+  type State = SliderControlState;
   type Props = SliderControlProps;
 }

package/esm/slider/control/SliderControl.js

@@ -75,7 +75,6 @@ export const SliderControl = /*#__PURE__*/React.forwardRef(function SliderContro
   const {
     disabled,
     dragging,
-    validation,
     inset,
     lastChangedValueRef,
     lastChangeReasonRef,
@@ -271,7 +270,6 @@ export const SliderControl = /*#__PURE__*/React.forwardRef(function SliderContro
     const finger = fingerCoords != null ? getFingerState(fingerCoords) : null;
     if (finger != null) {
       const commitReason = lastChangeReasonRef.current;
-      validation.commit(lastChangedValueRef.current ?? finger.value);
       onValueCommitted(lastChangedValueRef.current ?? finger.value, createGenericEventDetails(commitReason, nativeEvent));
     }
     if ('pointerType' in nativeEvent && controlRef.current?.hasPointerCapture(nativeEvent.pointerId)) {

package/esm/slider/index.d.ts

@@ -1,5 +1,6 @@
 export * as Slider from "./index.parts.js";
 export type * from "./root/SliderRoot.js";
+export type * from "./label/SliderLabel.js";
 export type * from "./value/SliderValue.js";
 export type * from "./control/SliderControl.js";
 export type * from "./track/SliderTrack.js";

package/esm/slider/index.parts.d.ts

@@ -1,4 +1,5 @@
 export { SliderRoot as Root } from "./root/SliderRoot.js";
+export { SliderLabel as Label } from "./label/SliderLabel.js";
 export { SliderValue as Value } from "./value/SliderValue.js";
 export { SliderControl as Control } from "./control/SliderControl.js";
 export { SliderTrack as Track } from "./track/SliderTrack.js";

package/esm/slider/index.parts.js

@@ -1,4 +1,5 @@
 export { SliderRoot as Root } from "./root/SliderRoot.js";
+export { SliderLabel as Label } from "./label/SliderLabel.js";
 export { SliderValue as Value } from "./value/SliderValue.js";
 export { SliderControl as Control } from "./control/SliderControl.js";
 export { SliderTrack as Track } from "./track/SliderTrack.js";