@base-ui/react 1.4.0 → 1.5.0

package/combobox/root/AriaCombobox.js

@@ -16,27 +16,30 @@ 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 _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 _useRegisterFieldControl = require("../../field/root/useRegisterFieldControl");
-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 _popups = require("../../utils/popups");
+var _mergeProps = require("../../merge-props");
+var _resolveValueLabel = require("../../internals/resolveValueLabel");
+var _itemEquality = require("../../internals/itemEquality");
+var _constants = require("./utils/constants");
+var _DirectionContext = require("../../internals/direction-context/DirectionContext");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @internal
@@ -98,6 +101,7 @@ function AriaCombobox(props) {
     validationMode,
     validation
   } = (0, _FieldRootContext.useFieldRootContext)();
+  const direction = (0, _DirectionContext.useDirection)();
   const id = (0, _useLabelableId.useLabelableId)({
     id: idProp
   });
@@ -118,7 +122,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);
 
   /**
@@ -147,7 +151,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'
   });
@@ -195,7 +199,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);
@@ -207,7 +211,7 @@ function AriaCombobox(props) {
       return filteredItemsProp;
     }
     if (!items) {
-      return _constants.EMPTY_ARRAY;
+      return _empty.EMPTY_ARRAY;
     }
     if (isGrouped) {
       const groupedItems = items;
@@ -308,6 +312,7 @@ function AriaCombobox(props) {
     popupProps: {},
     inputProps: {},
     triggerProps: {},
+    itemProps: _empty.EMPTY_OBJECT,
     positionerElement: null,
     listElement: null,
     triggerElement: null,
@@ -316,6 +321,9 @@ function AriaCombobox(props) {
     popupSide: null,
     openMethod: null,
     inputInsidePopup: true,
+    // Avoid duplicate names in the server HTML. Popup inputs aren't rendered
+    // until after hydration, so the hidden input takes over then if needed.
+    inputOwnsFormValue: selectionMode === 'none',
     onOpenChangeComplete: onOpenChangeCompleteProp || _noop.NOOP,
     // Placeholder callbacks replaced on first render
     setOpen: _noop.NOOP,
@@ -324,7 +332,6 @@ function AriaCombobox(props) {
     setIndices: _noop.NOOP,
     onItemHighlighted: _noop.NOOP,
     handleSelection: _noop.NOOP,
-    getItemProps: () => _constants.EMPTY_OBJECT,
     forceMount: _noop.NOOP,
     requestSubmit: _noop.NOOP
   })).current;
@@ -349,6 +356,7 @@ function AriaCombobox(props) {
   const inputGroupElement = (0, _store.useStore)(store, _store2.selectors.inputGroupElement);
   const inline = (0, _store.useStore)(store, _store2.selectors.inline);
   const inputInsidePopup = (0, _store.useStore)(store, _store2.selectors.inputInsidePopup);
+  const inputOwnsFormValue = (0, _store.useStore)(store, _store2.selectors.inputOwnsFormValue);
   const triggerRef = (0, _useValueAsRef.useValueAsRef)(triggerElement);
   const {
     mounted,
@@ -359,12 +367,8 @@ function AriaCombobox(props) {
     openMethod,
     triggerProps
   } = (0, _useOpenInteractionType.useOpenInteractionType)(open);
-  const getFieldValue = (0, _useStableCallback.useStableCallback)(() => fieldStringValue);
-  (0, _useRegisterFieldControl.useRegisterFieldControl)(inputInsidePopup ? triggerRef : inputRef, {
-    id,
-    value: fieldRawValue,
-    getValue: getFieldValue
-  });
+  const getStringifiedValueForForm = (0, _useStableCallback.useStableCallback)(() => fieldStringValue);
+  (0, _useRegisterFieldControl.useRegisterFieldControl)(inputInsidePopup ? triggerRef : inputRef, id, fieldRawValue, getStringifiedValueForForm);
   const forceMount = (0, _useStableCallback.useStableCallback)(() => {
     if (items) {
       // Ensure typeahead works on a closed list.
@@ -387,8 +391,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
         }));
@@ -451,6 +455,16 @@ function AriaCombobox(props) {
     if (eventDetails.isCanceled) {
       return;
     }
+
+    // If reopening interrupts the close animation, handleUnmount won't run to clear the
+    // frozen closeQuery and pending popup input.
+    if (nextOpen && multiple && inputInsidePopup && !inline && closeQuery !== null) {
+      setQueryChangedAfterOpen(false);
+      setCloseQuery(null);
+      if (inputValue !== '') {
+        setInputValue('', (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputClear, eventDetails.event));
+      }
+    }
     if (!nextOpen && queryChangedAfterOpen) {
       if (single) {
         if (!inline) {
@@ -461,17 +475,22 @@ function AriaCombobox(props) {
           setQueryChangedAfterOpen(false);
         }
       } else if (multiple) {
-        if (inline || inputInsidePopup) {
+        if (!inline) {
+          // Freeze the current query so filtering remains stable while exiting.
+          setCloseQuery(query);
+        }
+        if (inputInsidePopup) {
           setIndices({
             activeIndex: null
           });
-        } else {
-          // Freeze the current query so filtering remains stable while exiting.
-          setCloseQuery(query);
         }
+
         // Clear the input immediately on close while retaining filtering via closeQuery for exit animations
-        // if the input is outside the popup.
-        setInputValue('', (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputClear, eventDetails.event));
+        // if the input is outside the popup. When the input is inside the popup, defer the clear until
+        // unmount so the filtered list doesn't flash to unfiltered during the exit animation.
+        if (!inputInsidePopup || inline) {
+          setInputValue('', (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputClear, eventDetails.event));
+        }
       }
     }
     setOpenUnwrapped(nextOpen);
@@ -664,8 +683,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
         }));
@@ -673,8 +692,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
         }));
@@ -684,7 +703,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,
@@ -840,7 +859,8 @@ 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,
+    rtl: direction === 'rtl',
+    disabledIndices: _empty.EMPTY_ARRAY,
     onNavigate(nextActiveIndex, event) {
       // Retain the highlight only while actually transitioning out or closed.
       if (!event && !open || transitionStatus === 'ending') {
@@ -858,18 +878,28 @@ function AriaCombobox(props) {
       }
     }
   });
-  const {
-    getReferenceProps,
-    getFloatingProps,
-    getItemProps
-  } = (0, _floatingUiReact.useInteractions)([role, click, dismiss, listNavigation]);
+  const inputProps = React.useMemo(() => (0, _mergeProps.mergeProps)(listNavigation.reference, dismiss.reference, click.reference, role.reference), [listNavigation.reference, dismiss.reference, click.reference, role.reference]);
+  const popupProps = React.useMemo(() => (0, _mergeProps.mergeProps)(_popups.FOCUSABLE_POPUP_PROPS, listNavigation.floating, dismiss.floating, role.floating), [listNavigation.floating, dismiss.floating, role.floating]);
+  const itemProps = React.useMemo(() => {
+    const listNavigationItemProps = listNavigation.item;
+    if (!listNavigationItemProps) {
+      return _empty.EMPTY_OBJECT;
+    }
+
+    // Combobox keeps focus on the input; item focus would incorrectly sync
+    // list navigation state from DOM focus.
+    return {
+      ...listNavigationItemProps,
+      onFocus: undefined
+    };
+  }, [listNavigation.item]);
   (0, _useOnFirstRender.useOnFirstRender)(() => {
     store.update({
       inline: inlineProp,
-      popupProps: getFloatingProps(),
-      inputProps: getReferenceProps(),
+      popupProps,
+      inputProps,
       triggerProps,
-      getItemProps,
+      itemProps,
       setOpen,
       setInputValue,
       setSelectedValue,
@@ -889,11 +919,11 @@ function AriaCombobox(props) {
       transitionStatus,
       items,
       inline: inlineProp,
-      popupProps: getFloatingProps(),
-      inputProps: getReferenceProps(),
+      popupProps,
+      inputProps,
       triggerProps,
       openMethod,
-      getItemProps,
+      itemProps,
       selectionMode,
       name,
       form,
@@ -911,9 +941,10 @@ function AriaCombobox(props) {
       isItemEqualToValue,
       submitOnItemClick,
       hasInputValue,
-      requestSubmit
+      requestSubmit,
+      inputOwnsFormValue: selectionMode === 'none' && (inlineProp || !store.state.inputInsidePopup)
     });
-  }, [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]);
+  }, [store, id, selectedValue, open, mounted, transitionStatus, items, popupProps, inputProps, itemProps, 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,
@@ -928,7 +959,7 @@ function AriaCombobox(props) {
     return (0, _resolveValueLabel.stringifyAsValue)(fieldRawValue, itemToStringValue);
   }, [fieldRawValue, itemToStringValue]);
   const hasMultipleSelection = multiple && Array.isArray(selectedValue) && selectedValue.length > 0;
-  const hiddenInputName = multiple || selectionMode === 'none' ? undefined : name;
+  const hiddenInputName = multiple || selectionMode === 'none' && inputOwnsFormValue ? undefined : name;
   const hiddenInputs = React.useMemo(() => {
     if (!multiple || !Array.isArray(selectedValue) || !name) {
       return null;
@@ -957,7 +988,9 @@ function AriaCombobox(props) {
         // Handle browser autofill.
         onChange(event) {
           // Workaround for https://github.com/facebook/react/issues/9023
-          if (event.nativeEvent.defaultPrevented) {
+          if (event.nativeEvent.defaultPrevented || disabled || readOnly) {
+            // Outside Field.Root, the event is not wrapped by mergeProps.
+            event.preventBaseUIHandler?.();
             return;
           }
           const nextValue = event.currentTarget.value;

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,25 +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 {
-  /**
-   * Returns whether the item matches the query anywhere.
-   */
-  contains: <Item>(item: Item, query: string, itemToString?: (item: Item) => string) => boolean;
-  /**
-   * Returns whether the item starts with the query.
-   */
-  startsWith: <Item>(item: Item, query: string, itemToString?: (item: Item) => string) => boolean;
-  /**
-   * Returns whether the item ends with the query.
-   */
-  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.
  */
@@ -38,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,5 +1,5 @@
 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.

package/combobox/row/ComboboxRow.js

@@ -7,7 +7,7 @@ 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");
 /**

package/combobox/status/ComboboxStatus.d.ts

@@ -1,5 +1,5 @@
 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.

package/combobox/status/ComboboxStatus.js

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

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 = {
@@ -21,6 +21,7 @@ export type State = {
   popupProps: HTMLProps;
   inputProps: HTMLProps;
   triggerProps: HTMLProps;
+  itemProps: HTMLProps;
   positionerElement: HTMLElement | null;
   listElement: HTMLElement | null;
   triggerElement: HTMLElement | null;
@@ -29,6 +30,7 @@ export type State = {
   popupSide: Side | null;
   openMethod: InteractionType | null;
   inputInsidePopup: boolean;
+  inputOwnsFormValue: boolean;
   selectionMode: 'single' | 'multiple' | 'none';
   listRef: React.RefObject<Array<HTMLElement | null>>;
   labelsRef: React.RefObject<Array<string | null>>;
@@ -54,10 +56,6 @@ export type State = {
   onItemHighlighted: (item: any, eventDetails: AriaCombobox.HighlightEventDetails) => void;
   forceMount: () => void;
   handleSelection: (event: MouseEvent | PointerEvent | KeyboardEvent, passedValue?: any) => void;
-  getItemProps: (props?: HTMLProps & {
-    active?: boolean | undefined;
-    selected?: boolean | undefined;
-  }) => Record<string, unknown>;
   requestSubmit: () => void;
   name: string | undefined;
   form: string | undefined;
@@ -97,10 +95,7 @@ export declare const selectors: {
   popupProps: (state: State) => HTMLProps;
   inputProps: (state: State) => HTMLProps;
   triggerProps: (state: State) => HTMLProps;
-  getItemProps: (state: State) => (props?: HTMLProps & {
-    active?: boolean | undefined;
-    selected?: boolean | undefined;
-  }) => Record<string, unknown>;
+  itemProps: (state: State) => HTMLProps;
   positionerElement: (state: State) => HTMLElement | null;
   listElement: (state: State) => HTMLElement | null;
   triggerElement: (state: State) => HTMLElement | null;
@@ -109,6 +104,7 @@ export declare const selectors: {
   popupSide: (state: State) => Side | null;
   openMethod: (state: State) => InteractionType | null;
   inputInsidePopup: (state: State) => boolean;
+  inputOwnsFormValue: (state: State) => boolean;
   selectionMode: (state: State) => "none" | "multiple" | "single";
   name: (state: State) => string | undefined;
   form: (state: State) => string | undefined;

package/combobox/store.js

@@ -5,8 +5,8 @@ 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),
@@ -51,7 +51,7 @@ const selectors = exports.selectors = {
   popupProps: (0, _store.createSelector)(state => state.popupProps),
   inputProps: (0, _store.createSelector)(state => state.inputProps),
   triggerProps: (0, _store.createSelector)(state => state.triggerProps),
-  getItemProps: (0, _store.createSelector)(state => state.getItemProps),
+  itemProps: (0, _store.createSelector)(state => state.itemProps),
   positionerElement: (0, _store.createSelector)(state => state.positionerElement),
   listElement: (0, _store.createSelector)(state => state.listElement),
   triggerElement: (0, _store.createSelector)(state => state.triggerElement),
@@ -60,6 +60,7 @@ const selectors = exports.selectors = {
   popupSide: (0, _store.createSelector)(state => state.popupSide),
   openMethod: (0, _store.createSelector)(state => state.openMethod),
   inputInsidePopup: (0, _store.createSelector)(state => state.inputInsidePopup),
+  inputOwnsFormValue: (0, _store.createSelector)(state => state.inputOwnsFormValue),
   selectionMode: (0, _store.createSelector)(state => state.selectionMode),
   name: (0, _store.createSelector)(state => state.name),
   form: (0, _store.createSelector)(state => state.form),

package/combobox/trigger/ComboboxTrigger.d.ts

@@ -1,5 +1,5 @@
 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";
 /**

package/combobox/trigger/ComboboxTrigger.js

@@ -11,19 +11,19 @@ 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;
 

package/combobox/trigger/ComboboxTriggerDataAttributes.d.ts

@@ -25,11 +25,11 @@ export declare enum ComboboxTriggerDataAttributes {
    */
   required = "data-required",
   /**
-   * Present when the component is in valid state (when wrapped in Field.Root).
+   * Present when the component is in a valid state (when wrapped in Field.Root).
    */
   valid = "data-valid",
   /**
-   * Present when the component is in invalid state (when wrapped in Field.Root).
+   * Present when the component is in an invalid state (when wrapped in Field.Root).
    */
   invalid = "data-invalid",
   /**

package/combobox/trigger/ComboboxTriggerDataAttributes.js

@@ -32,11 +32,11 @@ let ComboboxTriggerDataAttributes = exports.ComboboxTriggerDataAttributes = func
    */
   ComboboxTriggerDataAttributes["required"] = "data-required";
   /**
-   * Present when the component is in valid state (when wrapped in Field.Root).
+   * Present when the component is in a valid state (when wrapped in Field.Root).
    */
   ComboboxTriggerDataAttributes["valid"] = "data-valid";
   /**
-   * Present when the component is in invalid state (when wrapped in Field.Root).
+   * Present when the component is in an invalid state (when wrapped in Field.Root).
    */
   ComboboxTriggerDataAttributes["invalid"] = "data-invalid";
   /**

package/combobox/utils/ComboboxInternalDismissButton.js

@@ -8,11 +8,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.ComboboxInternalDismissButton = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useMergedRefs = require("@base-ui/utils/useMergedRefs");
-var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _visuallyHidden = require("@base-ui/utils/visuallyHidden");
-var _useButton = require("../../use-button");
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
-var _reasons = require("../../utils/reasons");
+var _useButton = require("../../internals/use-button");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
 var _ComboboxRootContext = require("../root/ComboboxRootContext");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
@@ -27,9 +26,9 @@ const ComboboxInternalDismissButton = exports.ComboboxInternalDismissButton = /*
     native: false
   });
   const mergedRef = (0, _useMergedRefs.useMergedRefs)(forwardedRef, buttonRef);
-  const handleDismiss = (0, _useStableCallback.useStableCallback)(event => {
+  function handleDismiss(event) {
     store.state.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.closePress, event.nativeEvent, event.currentTarget));
-  });
+  }
   const dismissProps = getButtonProps({
     onClick: handleDismiss
   });