@base-ui/react 1.2.0 → 1.4.0

package/select/root/SelectRoot.d.ts

@@ -1,9 +1,10 @@
 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.
+ * Doesn't render its own HTML element.
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
@@ -19,6 +20,11 @@ export interface SelectRootProps<Value, Multiple extends boolean | undefined = f
    * Identifies the field when a form is submitted.
    */
   name?: string | undefined;
+  /**
+   * Identifies the form that owns the hidden input.
+   * Useful when the select is rendered outside the form.
+   */
+  form?: string | undefined;
   /**
    * Provides a hint to the browser for autofill.
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete
@@ -101,10 +107,10 @@ export interface SelectRootProps<Value, Multiple extends boolean | undefined = f
    * <Select.Root items={items} />
    * ```
    */
-  items?: (Record<string, React.ReactNode> | ReadonlyArray<{
+  items?: Record<string, React.ReactNode> | ReadonlyArray<{
     label: React.ReactNode;
     value: any;
-  }>) | undefined;
+  }> | 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.
@@ -121,15 +127,15 @@ export interface SelectRootProps<Value, Multiple extends boolean | undefined = f
    */
   isItemEqualToValue?: ((itemValue: Value, value: Value) => boolean) | undefined;
   /**
-   * The uncontrolled value of the select when it’s initially rendered.
+   * 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) | undefined;
+  defaultValue?: SelectValueType<Value, Multiple> | null | undefined;
   /**
    * The value of the select. Use when controlled.
    */
-  value?: (SelectValueType<Value, Multiple> | null) | undefined;
+  value?: SelectValueType<Value, Multiple> | null | undefined;
   /**
    * Event handler called when the value of the select changes.
    */

package/select/root/SelectRoot.js

@@ -11,6 +11,7 @@ var _visuallyHidden = require("@base-ui/utils/visuallyHidden");
 var _useMergedRefs = require("@base-ui/utils/useMergedRefs");
 var _useRefWithInit = require("@base-ui/utils/useRefWithInit");
 var _useOnFirstRender = require("@base-ui/utils/useOnFirstRender");
+var _usePreviousValue = require("@base-ui/utils/usePreviousValue");
 var _useControlled = require("@base-ui/utils/useControlled");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
@@ -19,6 +20,7 @@ var _store = require("@base-ui/utils/store");
 var _floatingUiReact = require("../../floating-ui-react");
 var _SelectRootContext = require("./SelectRootContext");
 var _FieldRootContext = require("../../field/root/FieldRootContext");
+var _useRegisterFieldControl = require("../../field/root/useRegisterFieldControl");
 var _useLabelableId = require("../../labelable-provider/useLabelableId");
 var _useTransitionStatus = require("../../utils/useTransitionStatus");
 var _store2 = require("../store");
@@ -26,17 +28,17 @@ var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _reasons = require("../../utils/reasons");
 var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
 var _FormContext = require("../../form/FormContext");
-var _useField = require("../../field/useField");
 var _resolveValueLabel = require("../../utils/resolveValueLabel");
 var _constants = require("../../utils/constants");
 var _itemEquality = require("../../utils/itemEquality");
 var _useValueChanged = require("../../utils/useValueChanged");
 var _useOpenInteractionType = require("../../utils/useOpenInteractionType");
+var _scrollEdges = require("../../utils/scrollEdges");
 var _mergeProps = require("../../merge-props");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Groups all parts of the select.
- * Doesn’t render its own HTML element.
+ * Doesn't render its own HTML element.
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
@@ -50,6 +52,7 @@ function SelectRoot(props) {
     defaultOpen = false,
     onOpenChange,
     name: nameProp,
+    form,
     autoComplete,
     disabled: disabledProp = false,
     readOnly = false,
@@ -120,11 +123,11 @@ function SelectRoot(props) {
   } = (0, _useTransitionStatus.useTransitionStatus)(open);
   const {
     openMethod,
-    triggerProps: interactionTypeProps,
-    reset: resetOpenInteractionType
+    triggerProps: interactionTypeProps
   } = (0, _useOpenInteractionType.useOpenInteractionType)(open);
   const store = (0, _useRefWithInit.useRefWithInit)(() => new _store.Store({
     id: generatedId,
+    labelId: undefined,
     modal,
     multiple,
     itemToStringLabel,
@@ -152,6 +155,8 @@ function SelectRoot(props) {
   const selectedIndex = (0, _store.useStore)(store, _store2.selectors.selectedIndex);
   const triggerElement = (0, _store.useStore)(store, _store2.selectors.triggerElement);
   const positionerElement = (0, _store.useStore)(store, _store2.selectors.positionerElement);
+  const previousOpenMethod = (0, _usePreviousValue.usePreviousValue)(openMethod);
+  const renderedOpenMethod = openMethod ?? previousOpenMethod;
   const serializedValue = React.useMemo(() => {
     if (multiple && Array.isArray(value) && value.length === 0) {
       return '';
@@ -165,13 +170,11 @@ function SelectRoot(props) {
     return (0, _resolveValueLabel.stringifyAsValue)(value, itemToStringValue);
   }, [multiple, value, itemToStringValue]);
   const controlRef = (0, _useValueAsRef.useValueAsRef)(store.state.triggerElement);
-  (0, _useField.useField)({
+  const getFieldValue = (0, _useStableCallback.useStableCallback)(() => fieldStringValue);
+  (0, _useRegisterFieldControl.useRegisterFieldControl)(controlRef, {
     id: generatedId,
-    commit: validation.commit,
     value,
-    controlRef,
-    name,
-    getValue: () => fieldStringValue
+    getValue: getFieldValue
   });
   const initialValueRef = React.useRef(value);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
@@ -241,8 +244,10 @@ function SelectRoot(props) {
   });
   const handleUnmount = (0, _useStableCallback.useStableCallback)(() => {
     setMounted(false);
-    store.set('activeIndex', null);
-    resetOpenInteractionType();
+    store.update({
+      activeIndex: null,
+      openMethod: null
+    });
     onOpenChangeComplete?.(false);
   });
   (0, _useOpenChangeComplete.useOpenChangeComplete)({
@@ -270,10 +275,10 @@ function SelectRoot(props) {
     if (!scroller) {
       return;
     }
-    const viewportTop = scroller.scrollTop;
-    const viewportBottom = scroller.scrollTop + scroller.clientHeight;
-    const shouldShowUp = viewportTop > 1;
-    const shouldShowDown = viewportBottom < scroller.scrollHeight - 1;
+    const maxScrollTop = (0, _scrollEdges.getMaxScrollOffset)(scroller.scrollHeight, scroller.clientHeight);
+    const scrollTop = (0, _scrollEdges.normalizeScrollOffset)(scroller.scrollTop, maxScrollTop);
+    const shouldShowUp = scrollTop > 0;
+    const shouldShowDown = scrollTop < maxScrollTop;
     if (store.state.scrollUpArrowVisible !== shouldShowUp) {
       store.set('scrollUpArrowVisible', shouldShowUp);
     }
@@ -309,9 +314,7 @@ function SelectRoot(props) {
       }
       store.set('activeIndex', nextActiveIndex);
     },
-    // Implement our own listeners since `onPointerLeave` on each option fires while scrolling with
-    // the `alignItemWithTrigger=true`, causing a performance issue on Chrome.
-    focusItemOnHover: false
+    focusItemOnHover: highlightItemOnHover
   });
   const typeahead = (0, _floatingUiReact.useTypeahead)(floatingContext, {
     enabled: !readOnly && !disabled && (open || !multiple),
@@ -326,8 +329,6 @@ 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;
     }
   });
@@ -362,9 +363,9 @@ function SelectRoot(props) {
       itemToStringLabel,
       itemToStringValue,
       isItemEqualToValue,
-      openMethod
+      openMethod: renderedOpenMethod
     });
-  }, [store, generatedId, modal, multiple, value, open, mounted, transitionStatus, getFloatingProps, mergedTriggerProps, items, itemToStringLabel, itemToStringValue, isItemEqualToValue, openMethod]);
+  }, [store, generatedId, modal, multiple, value, open, mounted, transitionStatus, getFloatingProps, mergedTriggerProps, items, itemToStringLabel, itemToStringValue, isItemEqualToValue, renderedOpenMethod]);
   const contextValue = React.useMemo(() => ({
     store,
     name,
@@ -398,6 +399,7 @@ function SelectRoot(props) {
   }), [store, name, required, disabled, readOnly, multiple, itemToStringLabel, itemToStringValue, highlightItemOnHover, setValue, setOpen, getItemProps, floatingContext.context.events, validation, onOpenChangeComplete, handleScrollArrowVisibility]);
   const ref = (0, _useMergedRefs.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;
@@ -406,11 +408,12 @@ function SelectRoot(props) {
       const currentSerializedValue = (0, _resolveValueLabel.stringifyAsValue)(v, itemToStringValue);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
         type: "hidden",
+        form: form,
         name: name,
         value: currentSerializedValue
       }, currentSerializedValue);
     });
-  }, [multiple, value, name, itemToStringValue]);
+  }, [multiple, value, form, name, itemToStringValue]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectRootContext.SelectRootContext.Provider, {
     value: contextValue,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SelectRootContext.SelectFloatingContext.Provider, {
@@ -421,7 +424,6 @@ function SelectRoot(props) {
             // Move focus to the trigger element when the hidden input is focused.
             store.state.triggerElement?.focus({
               // Supported in Chrome from 144 (January 2026)
-              // @ts-expect-error - focusVisible is not yet in the lib.dom.d.ts
               focusVisible: true
             });
           },
@@ -431,7 +433,7 @@ function SelectRoot(props) {
             if (event.nativeEvent.defaultPrevented) {
               return;
             }
-            const nextValue = event.target.value;
+            const nextValue = event.currentTarget.value;
             const details = (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none, event.nativeEvent);
             function handleChange() {
               if (multiple) {
@@ -441,8 +443,15 @@ function SelectRoot(props) {
 
               // Handle single selection: match against registered values using serialization
               const matchingValue = valuesRef.current.find(v => {
-                const candidate = (0, _resolveValueLabel.stringifyAsValue)(v, itemToStringValue);
-                if (candidate.toLowerCase() === nextValue.toLowerCase()) {
+                // Try matching by value first (e.g., "US" for country code)
+                const candidateValue = (0, _resolveValueLabel.stringifyAsValue)(v, itemToStringValue);
+                if (candidateValue.toLowerCase() === nextValue.toLowerCase()) {
+                  return true;
+                }
+                // Also try matching by label for browser autofill compatibility
+                // (browsers autofill with displayed text like "United States", not the underlying value)
+                const candidateLabel = (0, _resolveValueLabel.stringifyAsLabel)(v, itemToStringLabel);
+                if (candidateLabel.toLowerCase() === nextValue.toLowerCase()) {
                   return true;
                 }
                 return false;
@@ -459,7 +468,9 @@ function SelectRoot(props) {
             queueMicrotask(handleChange);
           }
         }),
-        name: multiple ? undefined : name,
+        id: generatedId && hiddenInputName == null ? `${generatedId}-hidden-input` : undefined,
+        form: form,
+        name: hiddenInputName,
         autoComplete: autoComplete,
         value: serializedValue,
         disabled: disabled,
@@ -468,7 +479,8 @@ function SelectRoot(props) {
         ref: ref,
         style: name ? _visuallyHidden.visuallyHiddenInput : _visuallyHidden.visuallyHidden,
         tabIndex: -1,
-        "aria-hidden": true
+        "aria-hidden": true,
+        suppressHydrationWarning: true
       }), hiddenInputs]
     })
   });

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

@@ -7,12 +7,24 @@ 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.

package/select/scroll-arrow/SelectScrollArrow.js

@@ -15,6 +15,7 @@ var _SelectPositionerContext = require("../positioner/SelectPositionerContext");
 var _useTransitionStatus = require("../../utils/useTransitionStatus");
 var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
 var _useRenderElement = require("../../utils/useRenderElement");
+var _scrollEdges = require("../../utils/scrollEdges");
 var _store2 = require("../store");
 /**
  * @internal
@@ -23,10 +24,12 @@ const SelectScrollArrow = exports.SelectScrollArrow = /*#__PURE__*/React.forward
   const {
     render,
     className,
+    style,
     direction,
     keepMounted = false,
     ...elementProps
   } = componentProps;
+  const isUp = direction === 'up';
   const {
     store,
     popupRef,
@@ -39,14 +42,14 @@ const SelectScrollArrow = exports.SelectScrollArrow = /*#__PURE__*/React.forward
     scrollDownArrowRef,
     scrollUpArrowRef
   } = (0, _SelectPositionerContext.useSelectPositionerContext)();
-  const visibleSelector = direction === 'up' ? _store2.selectors.scrollUpArrowVisible : _store2.selectors.scrollDownArrowVisible;
+  const visibleSelector = isUp ? _store2.selectors.scrollUpArrowVisible : _store2.selectors.scrollDownArrowVisible;
   const stateVisible = (0, _store.useStore)(store, visibleSelector);
   const openMethod = (0, _store.useStore)(store, _store2.selectors.openMethod);
 
   // Scroll arrows are disabled for touch modality as they are a hover-only element.
   const visible = stateVisible && openMethod !== 'touch';
   const timeout = (0, _useTimeout.useTimeout)();
-  const scrollArrowRef = direction === 'up' ? scrollUpArrowRef : scrollDownArrowRef;
+  const scrollArrowRef = isUp ? scrollUpArrowRef : scrollDownArrowRef;
   const {
     transitionStatus,
     setMounted
@@ -80,7 +83,7 @@ const SelectScrollArrow = exports.SelectScrollArrow = /*#__PURE__*/React.forward
   };
   const defaultProps = {
     'aria-hidden': true,
-    children: direction === 'up' ? '▲' : '▼',
+    children: isUp ? '▲' : '▼',
     style: {
       position: 'absolute'
     },
@@ -96,72 +99,25 @@ const SelectScrollArrow = exports.SelectScrollArrow = /*#__PURE__*/React.forward
         }
         store.set('activeIndex', null);
         handleScrollArrowVisibility();
-        const isScrolledToTop = scroller.scrollTop === 0;
-        const isScrolledToBottom = Math.round(scroller.scrollTop + scroller.clientHeight) >= scroller.scrollHeight;
-        const list = listRef.current;
+        const maxScrollTop = (0, _scrollEdges.getMaxScrollOffset)(scroller.scrollHeight, scroller.clientHeight);
+        const scrollTop = (0, _scrollEdges.normalizeScrollOffset)(scroller.scrollTop, maxScrollTop);
+        const isScrolledToEdge = scrollTop === (isUp ? 0 : maxScrollTop);
+        const items = listRef.current;
+        if (scrollTop !== scroller.scrollTop) {
+          scroller.scrollTop = scrollTop;
+        }
 
         // Fallback when there are no items registered yet.
-        if (list.length === 0) {
-          if (direction === 'up') {
-            store.set('scrollUpArrowVisible', !isScrolledToTop);
-          } else {
-            store.set('scrollDownArrowVisible', !isScrolledToBottom);
-          }
+        if (items.length === 0) {
+          store.set(isUp ? 'scrollUpArrowVisible' : 'scrollDownArrowVisible', !isScrolledToEdge);
         }
-        if (direction === 'up' && isScrolledToTop || direction === 'down' && isScrolledToBottom) {
+        if (isScrolledToEdge) {
           timeout.clear();
           return;
         }
-        if ((store.state.listElement || popupRef.current) && listRef.current && listRef.current.length > 0) {
-          const items = listRef.current;
+        if (items.length > 0) {
           const scrollArrowHeight = scrollArrowRef.current?.offsetHeight || 0;
-          if (direction === 'up') {
-            let firstVisibleIndex = 0;
-            const scrollTop = scroller.scrollTop + scrollArrowHeight;
-            for (let i = 0; i < items.length; i += 1) {
-              const item = items[i];
-              if (item) {
-                const itemTop = item.offsetTop;
-                if (itemTop >= scrollTop) {
-                  firstVisibleIndex = i;
-                  break;
-                }
-              }
-            }
-            const targetIndex = Math.max(0, firstVisibleIndex - 1);
-            if (targetIndex < firstVisibleIndex) {
-              const targetItem = items[targetIndex];
-              if (targetItem) {
-                scroller.scrollTop = Math.max(0, targetItem.offsetTop - scrollArrowHeight);
-              }
-            } else {
-              // Already at the first item; ensure we reach the absolute top to account for group labels.
-              scroller.scrollTop = 0;
-            }
-          } else {
-            let lastVisibleIndex = items.length - 1;
-            const scrollBottom = scroller.scrollTop + scroller.clientHeight - scrollArrowHeight;
-            for (let i = 0; i < items.length; i += 1) {
-              const item = items[i];
-              if (item) {
-                const itemBottom = item.offsetTop + item.offsetHeight;
-                if (itemBottom > scrollBottom) {
-                  lastVisibleIndex = Math.max(0, i - 1);
-                  break;
-                }
-              }
-            }
-            const targetIndex = Math.min(items.length - 1, lastVisibleIndex + 1);
-            if (targetIndex > lastVisibleIndex) {
-              const targetItem = items[targetIndex];
-              if (targetItem) {
-                scroller.scrollTop = targetItem.offsetTop + targetItem.offsetHeight - scroller.clientHeight + scrollArrowHeight;
-              }
-            } else {
-              // Already at the last item; ensure we reach the true bottom.
-              scroller.scrollTop = scroller.scrollHeight - scroller.clientHeight;
-            }
-          }
+          scroller.scrollTop = getTargetScrollTop(items, isUp, scrollTop, scroller.clientHeight, scrollArrowHeight, maxScrollTop);
         }
         timeout.start(40, scrollNextItem);
       }
@@ -182,4 +138,32 @@ const SelectScrollArrow = exports.SelectScrollArrow = /*#__PURE__*/React.forward
   }
   return element;
 });
-if (process.env.NODE_ENV !== "production") SelectScrollArrow.displayName = "SelectScrollArrow";
+if (process.env.NODE_ENV !== "production") SelectScrollArrow.displayName = "SelectScrollArrow";
+function getTargetScrollTop(items, isUp, scrollTop, clientHeight, scrollArrowHeight, maxScrollTop) {
+  if (isUp) {
+    let firstVisibleIndex = 0;
+    const visibleTop = scrollTop + scrollArrowHeight - _scrollEdges.SCROLL_EDGE_TOLERANCE_PX;
+    for (let i = 0; i < items.length; i += 1) {
+      const item = items[i];
+      if (item && item.offsetTop >= visibleTop) {
+        firstVisibleIndex = i;
+        break;
+      }
+    }
+    const targetIndex = Math.max(0, firstVisibleIndex - 1);
+    const targetItem = items[targetIndex];
+    return targetIndex < firstVisibleIndex && targetItem ? (0, _scrollEdges.normalizeScrollOffset)(targetItem.offsetTop - scrollArrowHeight, maxScrollTop) : 0;
+  }
+  let lastVisibleIndex = items.length - 1;
+  const visibleBottom = scrollTop + clientHeight - scrollArrowHeight + _scrollEdges.SCROLL_EDGE_TOLERANCE_PX;
+  for (let i = 0; i < items.length; i += 1) {
+    const item = items[i];
+    if (item && item.offsetTop + item.offsetHeight > visibleBottom) {
+      lastVisibleIndex = Math.max(0, i - 1);
+      break;
+    }
+  }
+  const targetIndex = Math.min(items.length - 1, lastVisibleIndex + 1);
+  const targetItem = items[targetIndex];
+  return targetIndex > lastVisibleIndex && targetItem ? (0, _scrollEdges.normalizeScrollOffset)(targetItem.offsetTop + targetItem.offsetHeight - clientHeight + scrollArrowHeight, maxScrollTop) : maxScrollTop;
+}

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

@@ -8,7 +8,7 @@ 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

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

@@ -8,7 +8,7 @@ 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

package/select/store.d.ts

@@ -2,14 +2,16 @@ 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: (itemValue: any, selectedValue: any) => boolean;
@@ -33,9 +35,10 @@ 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;

package/select/store.js

@@ -9,6 +9,7 @@ var _itemEquality = require("../utils/itemEquality");
 var _resolveValueLabel = require("../utils/resolveValueLabel");
 const selectors = exports.selectors = {
   id: (0, _store.createSelector)(state => state.id),
+  labelId: (0, _store.createSelector)(state => state.labelId),
   modal: (0, _store.createSelector)(state => state.modal),
   multiple: (0, _store.createSelector)(state => state.multiple),
   items: (0, _store.createSelector)(state => state.items),

package/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,9 +26,11 @@ 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. */
+  /**
+   * Whether the component should ignore user interaction.
+   */
   disabled?: boolean | undefined;
 }
 export declare namespace SelectTrigger {

package/select/trigger/SelectTrigger.js

@@ -27,6 +27,7 @@ var _useButton = require("../../use-button");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _reasons = require("../../utils/reasons");
 var _useLabelableId = require("../../labelable-provider/useLabelableId");
+var _resolveAriaLabelledBy = require("../../utils/resolveAriaLabelledBy");
 const BOUNDARY_OFFSET = 2;
 const SELECTED_DELAY = 400;
 const UNSELECTED_DELAY = 200;
@@ -49,6 +50,7 @@ const SelectTrigger = exports.SelectTrigger = /*#__PURE__*/React.forwardRef(func
     id: idProp,
     disabled: disabledProp = false,
     nativeButton = true,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -59,7 +61,7 @@ const SelectTrigger = exports.SelectTrigger = /*#__PURE__*/React.forwardRef(func
     disabled: fieldDisabled
   } = (0, _FieldRootContext.useFieldRootContext)();
   const {
-    labelId
+    labelId: fieldLabelId
   } = (0, _LabelableContext.useLabelableContext)();
   const {
     store,
@@ -79,10 +81,12 @@ const SelectTrigger = exports.SelectTrigger = /*#__PURE__*/React.forwardRef(func
   const positionerElement = (0, _store.useStore)(store, _store2.selectors.positionerElement);
   const listElement = (0, _store.useStore)(store, _store2.selectors.listElement);
   const rootId = (0, _store.useStore)(store, _store2.selectors.id);
+  const selectLabelId = (0, _store.useStore)(store, _store2.selectors.labelId);
   const hasSelectedValue = (0, _store.useStore)(store, _store2.selectors.hasSelectedValue);
   const shouldCheckNullItemLabel = !hasSelectedValue && open;
   const hasNullItemLabel = (0, _store.useStore)(store, _store2.selectors.hasNullItemLabel, shouldCheckNullItemLabel);
   const id = idProp ?? rootId;
+  const ariaLabelledBy = (0, _resolveAriaLabelledBy.resolveAriaLabelledBy)(fieldLabelId, selectLabelId);
   (0, _useLabelableId.useLabelableId)({
     id
   });
@@ -148,7 +152,7 @@ const SelectTrigger = exports.SelectTrigger = /*#__PURE__*/React.forwardRef(func
     '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,

package/select/value/SelectValue.d.ts

@@ -17,7 +17,7 @@ export interface SelectValueState {
    */
   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/select/value/SelectValue.js

@@ -28,6 +28,7 @@ const SelectValue = exports.SelectValue = /*#__PURE__*/React.forwardRef(function
     render,
     children: childrenProp,
     placeholder,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/separator/Separator.d.ts

@@ -7,7 +7,7 @@ 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'

package/separator/Separator.js

@@ -19,6 +19,7 @@ const Separator = exports.Separator = /*#__PURE__*/React.forwardRef(function Sep
     className,
     render,
     orientation = 'horizontal',
+    style,
     ...elementProps
   } = componentProps;
   const state = {

package/separator/SeparatorDataAttributes.d.ts

@@ -0,0 +1,7 @@
+export declare enum SeparatorDataAttributes {
+  /**
+   * Indicates the orientation of the separator.
+   * @type {'horizontal' | 'vertical'}
+   */
+  orientation = "data-orientation",
+}