@base-ui/react 1.3.0 → 1.4.1

package/combobox/root/AriaCombobox.js

@@ -12,31 +12,31 @@ var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useOnFirstRender = require("@base-ui/utils/useOnFirstRender");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useMergedRefs = require("@base-ui/utils/useMergedRefs");
+var _useValueAsRef = require("@base-ui/utils/useValueAsRef");
 var _visuallyHidden = require("@base-ui/utils/visuallyHidden");
 var _useRefWithInit = require("@base-ui/utils/useRefWithInit");
 var _store = require("@base-ui/utils/store");
-var _useValueAsRef = require("@base-ui/utils/useValueAsRef");
+var _empty = require("@base-ui/utils/empty");
 var _floatingUiReact = require("../../floating-ui-react");
 var _utils = require("../../floating-ui-react/utils");
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
-var _reasons = require("../../utils/reasons");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
 var _ComboboxRootContext = require("./ComboboxRootContext");
 var _store2 = require("../store");
-var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
-var _FieldRootContext = require("../../field/root/FieldRootContext");
-var _useField = require("../../field/useField");
-var _FormContext = require("../../form/FormContext");
-var _useLabelableId = require("../../labelable-provider/useLabelableId");
+var _useOpenChangeComplete = require("../../internals/useOpenChangeComplete");
+var _FieldRootContext = require("../../internals/field-root-context/FieldRootContext");
+var _useRegisterFieldControl = require("../../internals/field-register-control/useRegisterFieldControl");
+var _FormContext = require("../../internals/form-context/FormContext");
+var _useLabelableId = require("../../internals/labelable-provider/useLabelableId");
 var _utils2 = require("./utils");
 var _useFilter = require("./utils/useFilter");
-var _useTransitionStatus = require("../../utils/useTransitionStatus");
-var _constants = require("../../utils/constants");
+var _useTransitionStatus = require("../../internals/useTransitionStatus");
 var _useOpenInteractionType = require("../../utils/useOpenInteractionType");
-var _useValueChanged = require("../../utils/useValueChanged");
-var _noop = require("../../utils/noop");
-var _resolveValueLabel = require("../../utils/resolveValueLabel");
-var _itemEquality = require("../../utils/itemEquality");
-var _constants2 = require("./utils/constants");
+var _useValueChanged = require("../../internals/useValueChanged");
+var _noop = require("../../internals/noop");
+var _resolveValueLabel = require("../../internals/resolveValueLabel");
+var _itemEquality = require("../../internals/itemEquality");
+var _constants = require("./utils/constants");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @internal
@@ -51,9 +51,12 @@ function AriaCombobox(props) {
     onSelectedValueChange,
     defaultInputValue: defaultInputValueProp,
     inputValue: inputValueProp,
+    open: openProp,
+    defaultOpen = false,
     selectionMode = 'none',
     onItemHighlighted: onItemHighlightedProp,
     name: nameProp,
+    form,
     disabled: disabledProp = false,
     readOnly = false,
     required = false,
@@ -115,7 +118,7 @@ function AriaCombobox(props) {
   const chipsContainerRef = React.useRef(null);
   const clearRef = React.useRef(null);
   const selectionEventRef = React.useRef(null);
-  const lastHighlightRef = React.useRef(_constants2.INITIAL_LAST_HIGHLIGHT);
+  const lastHighlightRef = React.useRef(_constants.INITIAL_LAST_HIGHLIGHT);
   const pendingQueryHighlightRef = React.useRef(null);
 
   /**
@@ -144,7 +147,7 @@ function AriaCombobox(props) {
   }
   const [selectedValue, setSelectedValueUnwrapped] = (0, _useControlled.useControlled)({
     controlled: selectedValueProp,
-    default: multiple ? defaultSelectedValue ?? _constants.EMPTY_ARRAY : defaultSelectedValue,
+    default: multiple ? defaultSelectedValue ?? _empty.EMPTY_ARRAY : defaultSelectedValue,
     name: 'Combobox',
     state: 'selectedValue'
   });
@@ -179,8 +182,8 @@ function AriaCombobox(props) {
     state: 'inputValue'
   });
   const [open, setOpenUnwrapped] = (0, _useControlled.useControlled)({
-    controlled: props.open,
-    default: props.defaultOpen,
+    controlled: openProp,
+    default: defaultOpen,
     name: 'Combobox',
     state: 'open'
   });
@@ -192,7 +195,7 @@ function AriaCombobox(props) {
   const shouldIgnoreExternalFiltering = hasItems && hasFilteredItemsProp && shouldBypassFiltering;
   const flatItems = React.useMemo(() => {
     if (!items) {
-      return _constants.EMPTY_ARRAY;
+      return _empty.EMPTY_ARRAY;
     }
     if (isGrouped) {
       return items.flatMap(group => group.items);
@@ -204,7 +207,7 @@ function AriaCombobox(props) {
       return filteredItemsProp;
     }
     if (!items) {
-      return _constants.EMPTY_ARRAY;
+      return _empty.EMPTY_ARRAY;
     }
     if (isGrouped) {
       const groupedItems = items;
@@ -282,6 +285,7 @@ function AriaCombobox(props) {
     allValuesRef,
     selectionEventRef,
     name,
+    form,
     disabled,
     readOnly,
     required,
@@ -320,7 +324,7 @@ function AriaCombobox(props) {
     setIndices: _noop.NOOP,
     onItemHighlighted: _noop.NOOP,
     handleSelection: _noop.NOOP,
-    getItemProps: () => _constants.EMPTY_OBJECT,
+    getItemProps: () => _empty.EMPTY_OBJECT,
     forceMount: _noop.NOOP,
     requestSubmit: _noop.NOOP
   })).current;
@@ -355,13 +359,11 @@ function AriaCombobox(props) {
     openMethod,
     triggerProps
   } = (0, _useOpenInteractionType.useOpenInteractionType)(open);
-  (0, _useField.useField)({
+  const getFieldValue = (0, _useStableCallback.useStableCallback)(() => fieldStringValue);
+  (0, _useRegisterFieldControl.useRegisterFieldControl)(inputInsidePopup ? triggerRef : inputRef, {
     id,
-    name,
-    commit: validation.commit,
     value: fieldRawValue,
-    controlRef: inputInsidePopup ? triggerRef : inputRef,
-    getValue: () => fieldStringValue
+    getValue: getFieldValue
   });
   const forceMount = (0, _useStableCallback.useStableCallback)(() => {
     if (items) {
@@ -385,8 +387,8 @@ function AriaCombobox(props) {
       return;
     }
     if (options.activeIndex === null) {
-      if (lastHighlightRef.current !== _constants2.INITIAL_LAST_HIGHLIGHT) {
-        lastHighlightRef.current = _constants2.INITIAL_LAST_HIGHLIGHT;
+      if (lastHighlightRef.current !== _constants.INITIAL_LAST_HIGHLIGHT) {
+        lastHighlightRef.current = _constants.INITIAL_LAST_HIGHLIGHT;
         onItemHighlighted(undefined, (0, _createBaseUIEventDetails.createGenericEventDetails)(type, undefined, {
           index: -1
         }));
@@ -542,9 +544,9 @@ function AriaCombobox(props) {
     if (!store.state.submitOnItemClick) {
       return;
     }
-    const form = store.state.inputElement?.form;
-    if (form && typeof form.requestSubmit === 'function') {
-      form.requestSubmit();
+    const formElement = validation.inputRef.current?.form ?? store.state.inputElement?.form;
+    if (formElement && typeof formElement.requestSubmit === 'function') {
+      formElement.requestSubmit();
     }
   });
   const handleUnmount = (0, _useStableCallback.useStableCallback)(() => {
@@ -662,8 +664,8 @@ function AriaCombobox(props) {
         store.set('activeIndex', 0);
         return;
       }
-      if (lastHighlightRef.current !== _constants2.INITIAL_LAST_HIGHLIGHT) {
-        lastHighlightRef.current = _constants2.INITIAL_LAST_HIGHLIGHT;
+      if (lastHighlightRef.current !== _constants.INITIAL_LAST_HIGHLIGHT) {
+        lastHighlightRef.current = _constants.INITIAL_LAST_HIGHLIGHT;
         store.state.onItemHighlighted(undefined, (0, _createBaseUIEventDetails.createGenericEventDetails)(_reasons.REASONS.none, undefined, {
           index: -1
         }));
@@ -671,8 +673,8 @@ function AriaCombobox(props) {
       return;
     }
     if (storeActiveIndex >= candidateItems.length) {
-      if (lastHighlightRef.current !== _constants2.INITIAL_LAST_HIGHLIGHT) {
-        lastHighlightRef.current = _constants2.INITIAL_LAST_HIGHLIGHT;
+      if (lastHighlightRef.current !== _constants.INITIAL_LAST_HIGHLIGHT) {
+        lastHighlightRef.current = _constants.INITIAL_LAST_HIGHLIGHT;
         store.state.onItemHighlighted(undefined, (0, _createBaseUIEventDetails.createGenericEventDetails)(_reasons.REASONS.none, undefined, {
           index: -1
         }));
@@ -682,7 +684,7 @@ function AriaCombobox(props) {
     }
     const itemValue = candidateItems[storeActiveIndex];
     const previouslyHighlightedItemValue = lastHighlightRef.current.value;
-    const isSameItem = previouslyHighlightedItemValue !== _constants2.NO_ACTIVE_VALUE && (0, _itemEquality.compareItemEquality)(itemValue, previouslyHighlightedItemValue, store.state.isItemEqualToValue);
+    const isSameItem = previouslyHighlightedItemValue !== _constants.NO_ACTIVE_VALUE && (0, _itemEquality.compareItemEquality)(itemValue, previouslyHighlightedItemValue, store.state.isItemEqualToValue);
     if (lastHighlightRef.current.index !== storeActiveIndex || !isSameItem) {
       lastHighlightRef.current = {
         value: itemValue,
@@ -799,9 +801,9 @@ function AriaCombobox(props) {
     enabled: !readOnly && !disabled && openOnInputClick,
     event: 'mousedown-only',
     toggle: false,
-    // Apply a small delay for touch to let iOS viewport centering settle.
+    // Apply a small delay for touch to let mobile viewport/keyboard positioning settle.
     // This avoids top-bottom flip flickers if the preferred position is "top" when first tapping.
-    touchOpenDelay: inputInsidePopup ? 0 : 50,
+    touchOpenDelay: inputInsidePopup ? 0 : 100,
     reason: _reasons.REASONS.inputPress
   });
   const dismiss = (0, _floatingUiReact.useDismiss)(floatingRootContext, {
@@ -838,7 +840,7 @@ function AriaCombobox(props) {
     // Floating UI tests don't require `role="row"` wrappers, so retains the number API.
     cols: grid ? 2 : 1,
     orientation: grid ? 'horizontal' : undefined,
-    disabledIndices: _constants.EMPTY_ARRAY,
+    disabledIndices: _empty.EMPTY_ARRAY,
     onNavigate(nextActiveIndex, event) {
       // Retain the highlight only while actually transitioning out or closed.
       if (!event && !open || transitionStatus === 'ending') {
@@ -894,6 +896,7 @@ function AriaCombobox(props) {
       getItemProps,
       selectionMode,
       name,
+      form,
       disabled,
       readOnly,
       required,
@@ -910,7 +913,7 @@ function AriaCombobox(props) {
       hasInputValue,
       requestSubmit
     });
-  }, [store, id, selectedValue, open, mounted, transitionStatus, items, getFloatingProps, getReferenceProps, getItemProps, openMethod, triggerProps, selectionMode, name, disabled, readOnly, required, validation, grid, isGrouped, virtualized, onOpenChangeComplete, openOnInputClick, itemToStringLabel, modal, isItemEqualToValue, submitOnItemClick, hasInputValue, inlineProp, requestSubmit, autoHighlightMode]);
+  }, [store, id, selectedValue, open, mounted, transitionStatus, items, getFloatingProps, getReferenceProps, getItemProps, openMethod, triggerProps, selectionMode, name, disabled, readOnly, required, validation, grid, isGrouped, virtualized, onOpenChangeComplete, openOnInputClick, itemToStringLabel, modal, isItemEqualToValue, submitOnItemClick, hasInputValue, inlineProp, requestSubmit, autoHighlightMode, form]);
   const hiddenInputRef = (0, _useMergedRefs.useMergedRefs)(inputRefProp, validation.inputRef);
   const itemsContextValue = React.useMemo(() => ({
     query,
@@ -934,11 +937,12 @@ function AriaCombobox(props) {
       const currentSerializedValue = (0, _resolveValueLabel.stringifyAsValue)(value, itemToStringValue);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
         type: "hidden",
+        form: form,
         name: name,
         value: currentSerializedValue
       }, currentSerializedValue);
     });
-  }, [multiple, selectedValue, name, itemToStringValue]);
+  }, [multiple, selectedValue, form, name, itemToStringValue]);
   const children = /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [props.children, /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
       ...validation.getInputValidationProps({
@@ -956,7 +960,7 @@ function AriaCombobox(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() {
             // Browser autofill only writes a single scalar value.
@@ -972,8 +976,15 @@ function AriaCombobox(props) {
               return;
             }
             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;
@@ -995,6 +1006,7 @@ function AriaCombobox(props) {
         }
       }),
       id: id && hiddenInputName == null ? `${id}-hidden-input` : undefined,
+      form: form,
       name: hiddenInputName,
       autoComplete: formAutoComplete,
       disabled: disabled,
@@ -1004,7 +1016,8 @@ function AriaCombobox(props) {
       ref: hiddenInputRef,
       style: hiddenInputName ? _visuallyHidden.visuallyHiddenInput : _visuallyHidden.visuallyHidden,
       tabIndex: -1,
-      "aria-hidden": true
+      "aria-hidden": true,
+      suppressHydrationWarning: true
     }), hiddenInputs]
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComboboxRootContext.ComboboxRootContext.Provider, {

package/combobox/root/utils/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createCollatorItemFilter = createCollatorItemFilter;
 exports.createSingleSelectionCollatorFilter = createSingleSelectionCollatorFilter;
-var _resolveValueLabel = require("../../../utils/resolveValueLabel");
+var _resolveValueLabel = require("../../../internals/resolveValueLabel");
 /**
  * Enhanced filter using Intl.Collator for more robust string matching.
  * Uses the provided `itemToStringLabel` function if available, otherwise falls back to:

package/combobox/root/utils/useFilter.d.ts

@@ -1,16 +1,5 @@
-export interface UseFilterOptions extends Intl.CollatorOptions {
-  /**
-   * The locale to use for string comparison.
-   * Defaults to the user's runtime locale.
-   */
-  locale?: Intl.LocalesArgument | undefined;
-}
-export interface Filter {
-  contains: <Item>(item: Item, query: string, itemToString?: (item: Item) => string) => boolean;
-  startsWith: <Item>(item: Item, query: string, itemToString?: (item: Item) => string) => boolean;
-  endsWith: <Item>(item: Item, query: string, itemToString?: (item: Item) => string) => boolean;
-}
-declare function getFilter(options?: UseFilterOptions): Filter;
+import { type Filter, type GetFilterParameters as UseFilterOptions, getFilter } from "../../../internals/filter.js";
+export type { Filter, UseFilterOptions };
 /**
  * Matches items against a query using `Intl.Collator` for robust string matching.
  */
@@ -29,5 +18,4 @@ export interface UseComboboxFilterOptions extends UseFilterOptions {
 /**
  * Matches items against a query using `Intl.Collator` for robust string matching.
  */
-export declare function useComboboxFilter(options?: UseComboboxFilterOptions): Filter;
-export {};
+export declare function useComboboxFilter(options?: UseComboboxFilterOptions): Filter;

package/combobox/root/utils/useFilter.js

@@ -9,67 +9,11 @@ exports.useComboboxFilter = useComboboxFilter;
 exports.useCoreFilter = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _index = require("./index");
-var _resolveValueLabel = require("../../../utils/resolveValueLabel");
-const filterCache = new Map();
-function stringifyLocale(locale) {
-  if (Array.isArray(locale)) {
-    return locale.map(value => stringifyLocale(value)).join(',');
-  }
-  if (locale == null) {
-    return '';
-  }
-  return String(locale);
-}
-function getFilter(options = {}) {
-  const mergedOptions = {
-    usage: 'search',
-    sensitivity: 'base',
-    ignorePunctuation: true,
-    ...options
-  };
-  const cacheKey = `${stringifyLocale(options.locale)}|${JSON.stringify(mergedOptions)}`;
-  const cachedFilter = filterCache.get(cacheKey);
-  if (cachedFilter) {
-    return cachedFilter;
-  }
-  const collator = new Intl.Collator(options.locale, mergedOptions);
-  const filter = {
-    contains(item, query, itemToString) {
-      if (!query) {
-        return true;
-      }
-      const itemString = (0, _resolveValueLabel.stringifyAsLabel)(item, itemToString);
-      for (let i = 0; i <= itemString.length - query.length; i += 1) {
-        if (collator.compare(itemString.slice(i, i + query.length), query) === 0) {
-          return true;
-        }
-      }
-      return false;
-    },
-    startsWith(item, query, itemToString) {
-      if (!query) {
-        return true;
-      }
-      const itemString = (0, _resolveValueLabel.stringifyAsLabel)(item, itemToString);
-      return collator.compare(itemString.slice(0, query.length), query) === 0;
-    },
-    endsWith(item, query, itemToString) {
-      if (!query) {
-        return true;
-      }
-      const itemString = (0, _resolveValueLabel.stringifyAsLabel)(item, itemToString);
-      const queryLength = query.length;
-      return itemString.length >= queryLength && collator.compare(itemString.slice(itemString.length - queryLength), query) === 0;
-    }
-  };
-  filterCache.set(cacheKey, filter);
-  return filter;
-}
-
+var _filter = require("../../../internals/filter");
 /**
  * Matches items against a query using `Intl.Collator` for robust string matching.
  */
-const useCoreFilter = exports.useCoreFilter = getFilter;
+const useCoreFilter = exports.useCoreFilter = _filter.getFilter;
 /**
  * Matches items against a query using `Intl.Collator` for robust string matching.
  */
@@ -79,7 +23,7 @@ function useComboboxFilter(options = {}) {
     value,
     ...collatorOptions
   } = options;
-  const coreFilter = getFilter(collatorOptions);
+  const coreFilter = (0, _filter.getFilter)(collatorOptions);
   const contains = React.useCallback((item, query, itemToString) => {
     if (multiple) {
       return (0, _index.createCollatorItemFilter)(coreFilter, itemToString)(item, query);

package/combobox/row/ComboboxRow.d.ts

@@ -1,9 +1,11 @@
 import * as React from 'react';
-import { BaseUIComponentProps } from "../../utils/types.js";
+import { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * Displays a single row of items in a grid list.
  * Enable `grid` on the root component to turn the listbox into a grid.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export declare const ComboboxRow: React.ForwardRefExoticComponent<Omit<ComboboxRowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxRowState {}

package/combobox/row/ComboboxRow.js

@@ -7,18 +7,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ComboboxRow = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _ComboboxRowContext = require("./ComboboxRowContext");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Displays a single row of items in a grid list.
  * Enable `grid` on the root component to turn the listbox into a grid.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxRow = exports.ComboboxRow = /*#__PURE__*/React.forwardRef(function ComboboxRow(componentProps, forwardedRef) {
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {

package/combobox/status/ComboboxStatus.d.ts

@@ -1,9 +1,15 @@
 import * as React from 'react';
-import { BaseUIComponentProps } from "../../utils/types.js";
+import { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * Displays a status message whose content changes are announced politely to screen readers.
  * Useful for conveying the status of an asynchronously loaded list.
+ * This component's root element must remain mounted in the DOM to announce
+ * changes consistently across screen readers. Avoid hiding or removing the
+ * component itself with `display: none`, `hidden`, `aria-hidden`, or conditional
+ * rendering. Prefer updating or conditionally rendering its children instead.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export declare const ComboboxStatus: React.ForwardRefExoticComponent<Omit<ComboboxStatusProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxStatusState {}

package/combobox/status/ComboboxStatus.js

@@ -7,21 +7,32 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ComboboxStatus = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
+var _useInitialLiveRegionTextMutation = require("../utils/useInitialLiveRegionTextMutation");
 /**
  * Displays a status message whose content changes are announced politely to screen readers.
  * Useful for conveying the status of an asynchronously loaded list.
+ * This component's root element must remain mounted in the DOM to announce
+ * changes consistently across screen readers. Avoid hiding or removing the
+ * component itself with `display: none`, `hidden`, `aria-hidden`, or conditional
+ * rendering. Prefer updating or conditionally rendering its children instead.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxStatus = exports.ComboboxStatus = /*#__PURE__*/React.forwardRef(function ComboboxStatus(componentProps, forwardedRef) {
   const {
     render,
     className,
+    style,
+    children: childrenProp,
     ...elementProps
   } = componentProps;
+  const statusRef = (0, _useInitialLiveRegionTextMutation.useInitialLiveRegionTextMutation)();
   return (0, _useRenderElement.useRenderElement)('div', componentProps, {
-    ref: forwardedRef,
+    ref: [forwardedRef, statusRef],
     props: [{
+      children: childrenProp,
       role: 'status',
       'aria-live': 'polite',
       'aria-atomic': true

package/combobox/store.d.ts

@@ -1,7 +1,7 @@
 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 { TransitionStatus } from "../internals/useTransitionStatus.js";
+import type { HTMLProps } from "../internals/types.js";
 import type { Side } from "../utils/useAnchorPositioning.js";
 import type { AriaCombobox } from "./root/AriaCombobox.js";
 export type State = {
@@ -60,6 +60,7 @@ export type State = {
   }) => Record<string, unknown>;
   requestSubmit: () => void;
   name: string | undefined;
+  form: string | undefined;
   disabled: boolean;
   readOnly: boolean;
   required: boolean;
@@ -79,7 +80,6 @@ export type ComboboxStore = Store<State>;
 export declare const selectors: {
   id: (state: State) => string | undefined;
   labelId: (state: State) => string | undefined;
-  query: (state: State) => string;
   items: (state: State) => readonly any[] | undefined;
   selectedValue: (state: State) => any;
   hasSelectionChips: (state: State) => boolean;
@@ -110,25 +110,13 @@ export declare const selectors: {
   openMethod: (state: State) => InteractionType | null;
   inputInsidePopup: (state: State) => boolean;
   selectionMode: (state: State) => "none" | "multiple" | "single";
-  listRef: (state: State) => import("react").RefObject<(HTMLElement | null)[]>;
-  labelsRef: (state: State) => import("react").RefObject<(string | null)[]>;
-  popupRef: (state: State) => import("react").RefObject<HTMLDivElement | null>;
-  emptyRef: (state: State) => import("react").RefObject<HTMLDivElement | null>;
-  inputRef: (state: State) => import("react").RefObject<HTMLInputElement | null>;
-  keyboardActiveRef: (state: State) => import("react").RefObject<boolean>;
-  chipsContainerRef: (state: State) => import("react").RefObject<HTMLDivElement | null>;
-  clearRef: (state: State) => import("react").RefObject<HTMLButtonElement | null>;
-  valuesRef: (state: State) => import("react").RefObject<any[]>;
-  allValuesRef: (state: State) => import("react").RefObject<any[]>;
   name: (state: State) => string | undefined;
+  form: (state: State) => string | undefined;
   disabled: (state: State) => boolean;
   readOnly: (state: State) => boolean;
   required: (state: State) => boolean;
   grid: (state: State) => boolean;
-  isGrouped: (state: State) => boolean;
   virtualized: (state: State) => boolean;
-  onOpenChangeComplete: (state: State) => (open: boolean) => void;
-  openOnInputClick: (state: State) => boolean;
   itemToStringLabel: (state: State) => ((item: any) => string) | undefined;
   isItemEqualToValue: (state: State) => (itemValue: any, selectedValue: any) => boolean;
   modal: (state: State) => boolean;

package/combobox/store.js

@@ -5,12 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.selectors = void 0;
 var _store = require("@base-ui/utils/store");
-var _itemEquality = require("../utils/itemEquality");
-var _resolveValueLabel = require("../utils/resolveValueLabel");
+var _itemEquality = require("../internals/itemEquality");
+var _resolveValueLabel = require("../internals/resolveValueLabel");
 const selectors = exports.selectors = {
   id: (0, _store.createSelector)(state => state.id),
   labelId: (0, _store.createSelector)(state => state.labelId),
-  query: (0, _store.createSelector)(state => state.query),
   items: (0, _store.createSelector)(state => state.items),
   selectedValue: (0, _store.createSelector)(state => state.selectedValue),
   hasSelectionChips: (0, _store.createSelector)(state => {
@@ -62,25 +61,13 @@ const selectors = exports.selectors = {
   openMethod: (0, _store.createSelector)(state => state.openMethod),
   inputInsidePopup: (0, _store.createSelector)(state => state.inputInsidePopup),
   selectionMode: (0, _store.createSelector)(state => state.selectionMode),
-  listRef: (0, _store.createSelector)(state => state.listRef),
-  labelsRef: (0, _store.createSelector)(state => state.labelsRef),
-  popupRef: (0, _store.createSelector)(state => state.popupRef),
-  emptyRef: (0, _store.createSelector)(state => state.emptyRef),
-  inputRef: (0, _store.createSelector)(state => state.inputRef),
-  keyboardActiveRef: (0, _store.createSelector)(state => state.keyboardActiveRef),
-  chipsContainerRef: (0, _store.createSelector)(state => state.chipsContainerRef),
-  clearRef: (0, _store.createSelector)(state => state.clearRef),
-  valuesRef: (0, _store.createSelector)(state => state.valuesRef),
-  allValuesRef: (0, _store.createSelector)(state => state.allValuesRef),
   name: (0, _store.createSelector)(state => state.name),
+  form: (0, _store.createSelector)(state => state.form),
   disabled: (0, _store.createSelector)(state => state.disabled),
   readOnly: (0, _store.createSelector)(state => state.readOnly),
   required: (0, _store.createSelector)(state => state.required),
   grid: (0, _store.createSelector)(state => state.grid),
-  isGrouped: (0, _store.createSelector)(state => state.isGrouped),
   virtualized: (0, _store.createSelector)(state => state.virtualized),
-  onOpenChangeComplete: (0, _store.createSelector)(state => state.onOpenChangeComplete),
-  openOnInputClick: (0, _store.createSelector)(state => state.openOnInputClick),
   itemToStringLabel: (0, _store.createSelector)(state => state.itemToStringLabel),
   isItemEqualToValue: (0, _store.createSelector)(state => state.isItemEqualToValue),
   modal: (0, _store.createSelector)(state => state.modal),

package/combobox/trigger/ComboboxTrigger.d.ts

@@ -1,10 +1,12 @@
 import * as React from 'react';
-import { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.js";
+import { BaseUIComponentProps, NativeButtonProps } from "../../internals/types.js";
 import type { FieldRootState } from "../../field/root/FieldRoot.js";
 import type { Side } from "../../utils/useAnchorPositioning.js";
 /**
  * A button that opens the popup.
  * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export declare const ComboboxTrigger: React.ForwardRefExoticComponent<Omit<ComboboxTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export interface ComboboxTriggerState extends FieldRootState {

package/combobox/trigger/ComboboxTrigger.js

@@ -11,25 +11,27 @@ var _store = require("@base-ui/utils/store");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useTimeout = require("@base-ui/utils/useTimeout");
 var _owner = require("@base-ui/utils/owner");
-var _useRenderElement = require("../../utils/useRenderElement");
-var _useButton = require("../../use-button");
+var _useRenderElement = require("../../internals/useRenderElement");
+var _useButton = require("../../internals/use-button");
 var _ComboboxRootContext = require("../root/ComboboxRootContext");
 var _stateAttributesMapping = require("../utils/stateAttributesMapping");
 var _store2 = require("../store");
-var _FieldRootContext = require("../../field/root/FieldRootContext");
-var _LabelableContext = require("../../labelable-provider/LabelableContext");
+var _FieldRootContext = require("../../internals/field-root-context/FieldRootContext");
+var _LabelableContext = require("../../internals/labelable-provider/LabelableContext");
 var _utils = require("../../floating-ui-react/utils");
 var _getPseudoElementBounds = require("../../utils/getPseudoElementBounds");
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
-var _reasons = require("../../utils/reasons");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
 var _floatingUiReact = require("../../floating-ui-react");
-var _useLabelableId = require("../../labelable-provider/useLabelableId");
+var _useLabelableId = require("../../internals/labelable-provider/useLabelableId");
 var _resolveAriaLabelledBy = require("../../utils/resolveAriaLabelledBy");
 const BOUNDARY_OFFSET = 2;
 
 /**
  * A button that opens the popup.
  * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxTrigger = exports.ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTrigger(componentProps, forwardedRef) {
   const {
@@ -38,6 +40,7 @@ const ComboboxTrigger = exports.ComboboxTrigger = /*#__PURE__*/React.forwardRef(
     nativeButton = true,
     disabled: disabledProp = false,
     id: idProp,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -133,7 +136,7 @@ const ComboboxTrigger = exports.ComboboxTrigger = /*#__PURE__*/React.forwardRef(
     disabled,
     popupSide,
     listEmpty,
-    placeholder: !hasSelectedValue
+    placeholder: selectionMode === 'none' ? false : !hasSelectedValue
   };
   const setTriggerElement = (0, _useStableCallback.useStableCallback)(element => {
     store.set('triggerElement', element);