@base-ui/react 1.6.0 → 1.7.0

package/combobox/input/ComboboxInput.js

@@ -24,8 +24,8 @@ var _ComboboxPositionerContext = require("../positioner/ComboboxPositionerContex
 var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
 var _reasons = require("../../internals/reasons");
 var _DirectionContext = require("../../internals/direction-context/DirectionContext");
-var _resolveAriaLabelledBy = require("../../utils/resolveAriaLabelledBy");
 var _ComboboxInternalDismissButton = require("../utils/ComboboxInternalDismissButton");
+var _parts = require("../utils/parts");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A text input to search for items in the list.
@@ -57,9 +57,6 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
   const positioning = (0, _ComboboxPositionerContext.useComboboxPositionerContext)(true);
   const hasPositionerParent = Boolean(positioning);
   const store = (0, _ComboboxRootContext.useComboboxRootContext)();
-  const {
-    filteredItems
-  } = (0, _ComboboxRootContext.useComboboxDerivedItemsContext)();
   // `inputValue` can't be placed in the store.
   // https://github.com/mui/base-ui/issues/2703
   const inputValue = (0, _ComboboxRootContext.useComboboxInputValueContext)();
@@ -76,19 +73,16 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
   const open = (0, _store.useStore)(store, _store2.selectors.open);
   const mounted = (0, _store.useStore)(store, _store2.selectors.mounted);
   const selectedValue = (0, _store.useStore)(store, _store2.selectors.selectedValue);
-  const popupSideValue = (0, _store.useStore)(store, _store2.selectors.popupSide);
-  const positionerElement = (0, _store.useStore)(store, _store2.selectors.positionerElement);
   const rootId = (0, _store.useStore)(store, _store2.selectors.id);
   const inline = (0, _store.useStore)(store, _store2.selectors.inline);
   const modal = (0, _store.useStore)(store, _store2.selectors.modal);
   const autoHighlightEnabled = Boolean(autoHighlightMode);
-  const popupSide = mounted && positionerElement ? popupSideValue : null;
+  const popupSide = (0, _parts.usePopupSide)(store);
   const disabled = fieldDisabled || comboboxDisabled || disabledProp;
-  const listEmpty = filteredItems.length === 0;
+  const listEmpty = (0, _parts.useListEmpty)();
   const isInsidePopup = hasPositionerParent || inline;
   const focusManagerModal = !isInsidePopup || modal;
   const id = (0, _useBaseUiId.useBaseUiId)(idProp ?? (!isInsidePopup ? rootId : undefined));
-  const ariaLabelledBy = (0, _resolveAriaLabelledBy.resolveAriaLabelledBy)(fieldLabelId, undefined);
   const fieldStateForInput = hasPositionerParent ? _constants.DEFAULT_FIELD_STATE_ATTRIBUTES : fieldState;
   const [composingValue, setComposingValue] = React.useState(null);
   const isComposingRef = React.useRef(false);
@@ -106,7 +100,17 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
       inputOwnsFormValue
     });
   });
-  const validationProps = hasPositionerParent || !validation ? elementProps : validation.getValidationProps(disabled, elementProps);
+  const validationProps = hasPositionerParent ? elementProps : validation.getValidationProps(disabled, elementProps);
+  function clearHighlight() {
+    store.state.setIndices({
+      activeIndex: null,
+      selectedIndex: null,
+      type: store.state.keyboardActiveRef.current ? _reasons.REASONS.keyboard : _reasons.REASONS.pointer
+    });
+  }
+  function markPointerActive() {
+    store.state.keyboardActiveRef.current = false;
+  }
   const state = {
     ...fieldStateForInput,
     open,
@@ -124,9 +128,7 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
       highlightedChipIndex
     } = comboboxChipsContext;
     const renderedChipsCount = comboboxChipsContext.chipsRef.current.length;
-    const isRtl = direction === 'rtl';
-    const previousChipKey = isRtl ? 'ArrowRight' : 'ArrowLeft';
-    const nextChipKey = isRtl ? 'ArrowLeft' : 'ArrowRight';
+    const [previousChipKey, nextChipKey] = (0, _parts.getChipNavigationKeys)(direction);
     if (highlightedChipIndex !== undefined) {
       if (event.key === previousChipKey) {
         event.preventDefault();
@@ -145,14 +147,8 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
       } else if (event.key === 'Backspace' || event.key === 'Delete') {
         event.preventDefault();
         // Move highlight appropriately after removal.
-        const computedNextIndex = highlightedChipIndex >= selectedValue.length - 1 ? selectedValue.length - 2 : highlightedChipIndex;
-        // If the computed index is negative, treat it as no highlight.
-        nextIndex = computedNextIndex >= 0 ? computedNextIndex : undefined;
-        store.state.setIndices({
-          activeIndex: null,
-          selectedIndex: null,
-          type: 'keyboard'
-        });
+        nextIndex = (0, _parts.getIndexAfterChipRemoval)(highlightedChipIndex, selectedValue.length);
+        clearHighlight();
       }
       return nextIndex;
     }
@@ -161,13 +157,6 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
     if (event.key === previousChipKey && (event.currentTarget.selectionStart ?? 0) === 0 && selectedValue.length > 0) {
       event.preventDefault();
       nextIndex = renderedChipsCount > 0 ? renderedChipsCount - 1 : undefined;
-    } else if (event.key === 'Backspace' && event.currentTarget.value === '' && selectedValue.length > 0) {
-      store.state.setIndices({
-        activeIndex: null,
-        selectedIndex: null,
-        type: 'keyboard'
-      });
-      event.preventDefault();
     }
     return nextIndex;
   }
@@ -175,11 +164,10 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
     state,
     ref: [forwardedRef, store.state.inputRef, setInputElement],
     props: [inputProps, triggerProps, {
-      type: 'text',
-      value: componentProps.value ?? composingValue ?? inputValue,
+      value: composingValue ?? inputValue,
       'aria-readonly': readOnly || undefined,
       'aria-required': required || undefined,
-      'aria-labelledby': ariaLabelledBy,
+      'aria-labelledby': fieldLabelId,
       disabled,
       readOnly,
       required: selectionMode === 'none' ? required : undefined,
@@ -234,11 +222,23 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
         store.state.setInputValue(next, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputChange, event.nativeEvent));
       },
       onChange(event) {
+        const nativeEvent = event.nativeEvent;
         // Autofill may not provide `inputType` (Chrome) or may report
         // `insertReplacementText` (Firefox).
-        const inputType = event.nativeEvent.inputType;
+        const inputType = nativeEvent.inputType;
         const autofillLikeInput = !inputType || inputType === 'insertReplacementText';
+        // During composition the input is always considered typed into.
         const shouldOpenOnInput = isComposingRef.current || !autofillLikeInput;
+        function maybeOpenOnInput(trimmed) {
+          if (readOnly || disabled || !trimmed || !shouldOpenOnInput) {
+            return;
+          }
+          store.state.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputChange, nativeEvent));
+          // When autoHighlight is enabled, keep the highlight (will be set to 0 in root).
+          if (!autoHighlightEnabled) {
+            clearHighlight();
+          }
+        }
 
         // During IME composition, avoid propagating controlled updates to prevent
         // filtering the options prematurely so `Empty` won't show incorrectly.
@@ -250,38 +250,23 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
           const nextVal = event.currentTarget.value;
           setComposingValue(nextVal);
           if (nextVal === '' && !store.state.openOnInputClick && !store.state.inputInsidePopup) {
-            store.state.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputClear, event.nativeEvent));
+            store.state.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputClear, nativeEvent));
           }
           const trimmed = nextVal.trim();
           const shouldMaintainHighlight = autoHighlightEnabled && trimmed !== '';
-          if (!readOnly && !disabled && trimmed) {
-            if (shouldOpenOnInput) {
-              store.state.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputChange, event.nativeEvent));
-              if (!autoHighlightEnabled) {
-                store.state.setIndices({
-                  activeIndex: null,
-                  selectedIndex: null,
-                  type: store.state.keyboardActiveRef.current ? 'keyboard' : 'pointer'
-                });
-              }
-            }
-          }
+          maybeOpenOnInput(trimmed);
           if (open && store.state.activeIndex !== null && !shouldMaintainHighlight) {
-            store.state.setIndices({
-              activeIndex: null,
-              selectedIndex: null,
-              type: store.state.keyboardActiveRef.current ? 'keyboard' : 'pointer'
-            });
+            clearHighlight();
           }
           return;
         }
-        const inputChangeDetails = (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputChange, event.nativeEvent);
+        const inputChangeDetails = (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputChange, nativeEvent);
         store.state.setInputValue(event.currentTarget.value, inputChangeDetails);
         if (inputChangeDetails.isCanceled) {
           return;
         }
         const empty = event.currentTarget.value === '';
-        const clearDetails = (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputClear, event.nativeEvent);
+        const clearDetails = (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputClear, nativeEvent);
         if (empty && !store.state.inputInsidePopup) {
           if (selectionMode === 'single') {
             store.state.setSelectedValue(null, clearDetails);
@@ -290,30 +275,13 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
             store.state.setOpen(false, clearDetails);
           }
         }
-        const trimmed = event.currentTarget.value.trim();
-        if (!readOnly && !disabled && trimmed) {
-          if (shouldOpenOnInput) {
-            store.state.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputChange, event.nativeEvent));
-            // When autoHighlight is enabled, keep the highlight (will be set to 0 in root).
-            if (!autoHighlightEnabled) {
-              store.state.setIndices({
-                activeIndex: null,
-                selectedIndex: null,
-                type: store.state.keyboardActiveRef.current ? 'keyboard' : 'pointer'
-              });
-            }
-          }
-        }
+        maybeOpenOnInput(event.currentTarget.value.trim());
 
         // When the user types, ensure the list resets its highlight so that
         // virtual focus returns to the input (aria-activedescendant is
         // cleared).
         if (open && store.state.activeIndex !== null && !autoHighlightEnabled) {
-          store.state.setIndices({
-            activeIndex: null,
-            selectedIndex: null,
-            type: store.state.keyboardActiveRef.current ? 'keyboard' : 'pointer'
-          });
+          clearHighlight();
         }
       },
       onKeyDown(event) {
@@ -359,11 +327,7 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
           const removalIndex = renderedChipsCount > 0 ? renderedChipsCount - 1 : selectedValue.length - 1;
           const newValue = selectedValue.filter((_, index) => index !== removalIndex);
           // If the removed item was also the active (highlighted) item, clear highlight
-          store.state.setIndices({
-            activeIndex: null,
-            selectedIndex: null,
-            type: store.state.keyboardActiveRef.current ? 'keyboard' : 'pointer'
-          });
+          clearHighlight();
           store.state.setSelectedValue(newValue, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none, event.nativeEvent));
           return;
         }
@@ -393,20 +357,11 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
             return;
           }
           (0, _utils.stopEvent)(event);
-          const listItem = store.state.listRef.current[activeIndex];
-          if (listItem) {
-            store.state.selectionEventRef.current = nativeEvent;
-            listItem.click();
-            store.state.selectionEventRef.current = null;
-          }
+          (0, _parts.clickHighlightedItem)(store, activeIndex, nativeEvent);
         }
       },
-      onPointerMove() {
-        store.state.keyboardActiveRef.current = false;
-      },
-      onPointerDown() {
-        store.state.keyboardActiveRef.current = false;
-      }
+      onPointerMove: markPointerActive,
+      onPointerDown: markPointerActive
     }, validationProps],
     stateAttributesMapping: _stateAttributesMapping.triggerStateAttributesMapping
   });

package/combobox/input/ComboboxInput.mjs

@@ -6,7 +6,7 @@ import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { platform } from '@base-ui/utils/platform';
 import { useBaseUiId } from "../../internals/useBaseUiId.mjs";
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
-import { useComboboxDerivedItemsContext, useComboboxInputValueContext, useComboboxRootContext } from "../root/ComboboxRootContext.mjs";
+import { useComboboxInputValueContext, useComboboxRootContext } from "../root/ComboboxRootContext.mjs";
 import { triggerStateAttributesMapping } from "../utils/stateAttributesMapping.mjs";
 import { selectors } from "../store.mjs";
 import { DEFAULT_FIELD_ROOT_CONTEXT, FieldRootContext, useFieldRootContext } from "../../internals/field-root-context/FieldRootContext.mjs";
@@ -18,8 +18,8 @@ import { useComboboxPositionerContext } from "../positioner/ComboboxPositionerCo
 import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.mjs";
 import { REASONS } from "../../internals/reasons.mjs";
 import { useDirection } from "../../internals/direction-context/DirectionContext.mjs";
-import { resolveAriaLabelledBy } from "../../utils/resolveAriaLabelledBy.mjs";
 import { ComboboxInternalDismissButton } from "../utils/ComboboxInternalDismissButton.mjs";
+import { clickHighlightedItem, getChipNavigationKeys, getIndexAfterChipRemoval, useListEmpty, usePopupSide } from "../utils/parts.mjs";
 
 /**
  * A text input to search for items in the list.
@@ -52,9 +52,6 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
   const positioning = useComboboxPositionerContext(true);
   const hasPositionerParent = Boolean(positioning);
   const store = useComboboxRootContext();
-  const {
-    filteredItems
-  } = useComboboxDerivedItemsContext();
   // `inputValue` can't be placed in the store.
   // https://github.com/mui/base-ui/issues/2703
   const inputValue = useComboboxInputValueContext();
@@ -71,19 +68,16 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
   const open = useStore(store, selectors.open);
   const mounted = useStore(store, selectors.mounted);
   const selectedValue = useStore(store, selectors.selectedValue);
-  const popupSideValue = useStore(store, selectors.popupSide);
-  const positionerElement = useStore(store, selectors.positionerElement);
   const rootId = useStore(store, selectors.id);
   const inline = useStore(store, selectors.inline);
   const modal = useStore(store, selectors.modal);
   const autoHighlightEnabled = Boolean(autoHighlightMode);
-  const popupSide = mounted && positionerElement ? popupSideValue : null;
+  const popupSide = usePopupSide(store);
   const disabled = fieldDisabled || comboboxDisabled || disabledProp;
-  const listEmpty = filteredItems.length === 0;
+  const listEmpty = useListEmpty();
   const isInsidePopup = hasPositionerParent || inline;
   const focusManagerModal = !isInsidePopup || modal;
   const id = useBaseUiId(idProp ?? (!isInsidePopup ? rootId : undefined));
-  const ariaLabelledBy = resolveAriaLabelledBy(fieldLabelId, undefined);
   const fieldStateForInput = hasPositionerParent ? DEFAULT_FIELD_STATE_ATTRIBUTES : fieldState;
   const [composingValue, setComposingValue] = React.useState(null);
   const isComposingRef = React.useRef(false);
@@ -101,7 +95,17 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
       inputOwnsFormValue
     });
   });
-  const validationProps = hasPositionerParent || !validation ? elementProps : validation.getValidationProps(disabled, elementProps);
+  const validationProps = hasPositionerParent ? elementProps : validation.getValidationProps(disabled, elementProps);
+  function clearHighlight() {
+    store.state.setIndices({
+      activeIndex: null,
+      selectedIndex: null,
+      type: store.state.keyboardActiveRef.current ? REASONS.keyboard : REASONS.pointer
+    });
+  }
+  function markPointerActive() {
+    store.state.keyboardActiveRef.current = false;
+  }
   const state = {
     ...fieldStateForInput,
     open,
@@ -119,9 +123,7 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
       highlightedChipIndex
     } = comboboxChipsContext;
     const renderedChipsCount = comboboxChipsContext.chipsRef.current.length;
-    const isRtl = direction === 'rtl';
-    const previousChipKey = isRtl ? 'ArrowRight' : 'ArrowLeft';
-    const nextChipKey = isRtl ? 'ArrowLeft' : 'ArrowRight';
+    const [previousChipKey, nextChipKey] = getChipNavigationKeys(direction);
     if (highlightedChipIndex !== undefined) {
       if (event.key === previousChipKey) {
         event.preventDefault();
@@ -140,14 +142,8 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
       } else if (event.key === 'Backspace' || event.key === 'Delete') {
         event.preventDefault();
         // Move highlight appropriately after removal.
-        const computedNextIndex = highlightedChipIndex >= selectedValue.length - 1 ? selectedValue.length - 2 : highlightedChipIndex;
-        // If the computed index is negative, treat it as no highlight.
-        nextIndex = computedNextIndex >= 0 ? computedNextIndex : undefined;
-        store.state.setIndices({
-          activeIndex: null,
-          selectedIndex: null,
-          type: 'keyboard'
-        });
+        nextIndex = getIndexAfterChipRemoval(highlightedChipIndex, selectedValue.length);
+        clearHighlight();
       }
       return nextIndex;
     }
@@ -156,13 +152,6 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
     if (event.key === previousChipKey && (event.currentTarget.selectionStart ?? 0) === 0 && selectedValue.length > 0) {
       event.preventDefault();
       nextIndex = renderedChipsCount > 0 ? renderedChipsCount - 1 : undefined;
-    } else if (event.key === 'Backspace' && event.currentTarget.value === '' && selectedValue.length > 0) {
-      store.state.setIndices({
-        activeIndex: null,
-        selectedIndex: null,
-        type: 'keyboard'
-      });
-      event.preventDefault();
     }
     return nextIndex;
   }
@@ -170,11 +159,10 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
     state,
     ref: [forwardedRef, store.state.inputRef, setInputElement],
     props: [inputProps, triggerProps, {
-      type: 'text',
-      value: componentProps.value ?? composingValue ?? inputValue,
+      value: composingValue ?? inputValue,
       'aria-readonly': readOnly || undefined,
       'aria-required': required || undefined,
-      'aria-labelledby': ariaLabelledBy,
+      'aria-labelledby': fieldLabelId,
       disabled,
       readOnly,
       required: selectionMode === 'none' ? required : undefined,
@@ -229,11 +217,23 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
         store.state.setInputValue(next, createChangeEventDetails(REASONS.inputChange, event.nativeEvent));
       },
       onChange(event) {
+        const nativeEvent = event.nativeEvent;
         // Autofill may not provide `inputType` (Chrome) or may report
         // `insertReplacementText` (Firefox).
-        const inputType = event.nativeEvent.inputType;
+        const inputType = nativeEvent.inputType;
         const autofillLikeInput = !inputType || inputType === 'insertReplacementText';
+        // During composition the input is always considered typed into.
         const shouldOpenOnInput = isComposingRef.current || !autofillLikeInput;
+        function maybeOpenOnInput(trimmed) {
+          if (readOnly || disabled || !trimmed || !shouldOpenOnInput) {
+            return;
+          }
+          store.state.setOpen(true, createChangeEventDetails(REASONS.inputChange, nativeEvent));
+          // When autoHighlight is enabled, keep the highlight (will be set to 0 in root).
+          if (!autoHighlightEnabled) {
+            clearHighlight();
+          }
+        }
 
         // During IME composition, avoid propagating controlled updates to prevent
         // filtering the options prematurely so `Empty` won't show incorrectly.
@@ -245,38 +245,23 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
           const nextVal = event.currentTarget.value;
           setComposingValue(nextVal);
           if (nextVal === '' && !store.state.openOnInputClick && !store.state.inputInsidePopup) {
-            store.state.setOpen(false, createChangeEventDetails(REASONS.inputClear, event.nativeEvent));
+            store.state.setOpen(false, createChangeEventDetails(REASONS.inputClear, nativeEvent));
           }
           const trimmed = nextVal.trim();
           const shouldMaintainHighlight = autoHighlightEnabled && trimmed !== '';
-          if (!readOnly && !disabled && trimmed) {
-            if (shouldOpenOnInput) {
-              store.state.setOpen(true, createChangeEventDetails(REASONS.inputChange, event.nativeEvent));
-              if (!autoHighlightEnabled) {
-                store.state.setIndices({
-                  activeIndex: null,
-                  selectedIndex: null,
-                  type: store.state.keyboardActiveRef.current ? 'keyboard' : 'pointer'
-                });
-              }
-            }
-          }
+          maybeOpenOnInput(trimmed);
           if (open && store.state.activeIndex !== null && !shouldMaintainHighlight) {
-            store.state.setIndices({
-              activeIndex: null,
-              selectedIndex: null,
-              type: store.state.keyboardActiveRef.current ? 'keyboard' : 'pointer'
-            });
+            clearHighlight();
           }
           return;
         }
-        const inputChangeDetails = createChangeEventDetails(REASONS.inputChange, event.nativeEvent);
+        const inputChangeDetails = createChangeEventDetails(REASONS.inputChange, nativeEvent);
         store.state.setInputValue(event.currentTarget.value, inputChangeDetails);
         if (inputChangeDetails.isCanceled) {
           return;
         }
         const empty = event.currentTarget.value === '';
-        const clearDetails = createChangeEventDetails(REASONS.inputClear, event.nativeEvent);
+        const clearDetails = createChangeEventDetails(REASONS.inputClear, nativeEvent);
         if (empty && !store.state.inputInsidePopup) {
           if (selectionMode === 'single') {
             store.state.setSelectedValue(null, clearDetails);
@@ -285,30 +270,13 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
             store.state.setOpen(false, clearDetails);
           }
         }
-        const trimmed = event.currentTarget.value.trim();
-        if (!readOnly && !disabled && trimmed) {
-          if (shouldOpenOnInput) {
-            store.state.setOpen(true, createChangeEventDetails(REASONS.inputChange, event.nativeEvent));
-            // When autoHighlight is enabled, keep the highlight (will be set to 0 in root).
-            if (!autoHighlightEnabled) {
-              store.state.setIndices({
-                activeIndex: null,
-                selectedIndex: null,
-                type: store.state.keyboardActiveRef.current ? 'keyboard' : 'pointer'
-              });
-            }
-          }
-        }
+        maybeOpenOnInput(event.currentTarget.value.trim());
 
         // When the user types, ensure the list resets its highlight so that
         // virtual focus returns to the input (aria-activedescendant is
         // cleared).
         if (open && store.state.activeIndex !== null && !autoHighlightEnabled) {
-          store.state.setIndices({
-            activeIndex: null,
-            selectedIndex: null,
-            type: store.state.keyboardActiveRef.current ? 'keyboard' : 'pointer'
-          });
+          clearHighlight();
         }
       },
       onKeyDown(event) {
@@ -354,11 +322,7 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
           const removalIndex = renderedChipsCount > 0 ? renderedChipsCount - 1 : selectedValue.length - 1;
           const newValue = selectedValue.filter((_, index) => index !== removalIndex);
           // If the removed item was also the active (highlighted) item, clear highlight
-          store.state.setIndices({
-            activeIndex: null,
-            selectedIndex: null,
-            type: store.state.keyboardActiveRef.current ? 'keyboard' : 'pointer'
-          });
+          clearHighlight();
           store.state.setSelectedValue(newValue, createChangeEventDetails(REASONS.none, event.nativeEvent));
           return;
         }
@@ -388,20 +352,11 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
             return;
           }
           stopEvent(event);
-          const listItem = store.state.listRef.current[activeIndex];
-          if (listItem) {
-            store.state.selectionEventRef.current = nativeEvent;
-            listItem.click();
-            store.state.selectionEventRef.current = null;
-          }
+          clickHighlightedItem(store, activeIndex, nativeEvent);
         }
       },
-      onPointerMove() {
-        store.state.keyboardActiveRef.current = false;
-      },
-      onPointerDown() {
-        store.state.keyboardActiveRef.current = false;
-      }
+      onPointerMove: markPointerActive,
+      onPointerDown: markPointerActive
     }, validationProps],
     stateAttributesMapping: triggerStateAttributesMapping
   });

package/combobox/input-group/ComboboxInputGroup.d.mts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../internals/types.mjs";
 import type { FieldRoot } from "../../field/root/FieldRoot.mjs";
-import type { Side } from "../../utils/useAnchorPositioning.mjs";
+import type { Side } from "../../internals/useAnchorPositioning.mjs";
 /**
  * A wrapper for the input and its associated controls.
  * Renders a `<div>` element.

package/combobox/input-group/ComboboxInputGroup.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../internals/types.js";
 import type { FieldRoot } from "../../field/root/FieldRoot.js";
-import type { Side } from "../../utils/useAnchorPositioning.js";
+import type { Side } from "../../internals/useAnchorPositioning.js";
 /**
  * A wrapper for the input and its associated controls.
  * Renders a `<div>` element.

package/combobox/input-group/ComboboxInputGroup.js

@@ -15,6 +15,7 @@ var _ComboboxRootContext = require("../root/ComboboxRootContext");
 var _store2 = require("../store");
 var _stateAttributesMapping = require("../utils/stateAttributesMapping");
 var _handleInputPress = require("../utils/handleInputPress");
+var _parts = require("../utils/parts");
 var _element = require("../../floating-ui-react/utils/element");
 /**
  * A wrapper for the input and its associated controls.
@@ -33,20 +34,14 @@ const ComboboxInputGroup = exports.ComboboxInputGroup = /*#__PURE__*/React.forwa
     state: fieldState
   } = (0, _FieldRootContext.useFieldRootContext)();
   const store = (0, _ComboboxRootContext.useComboboxRootContext)();
-  const {
-    filteredItems
-  } = (0, _ComboboxRootContext.useComboboxDerivedItemsContext)();
   const open = (0, _store.useStore)(store, _store2.selectors.open);
-  const mounted = (0, _store.useStore)(store, _store2.selectors.mounted);
-  const popupSideValue = (0, _store.useStore)(store, _store2.selectors.popupSide);
-  const positionerElement = (0, _store.useStore)(store, _store2.selectors.positionerElement);
   const comboboxDisabled = (0, _store.useStore)(store, _store2.selectors.disabled);
   const readOnly = (0, _store.useStore)(store, _store2.selectors.readOnly);
   const hasSelectedValue = (0, _store.useStore)(store, _store2.selectors.hasSelectedValue);
   const selectionMode = (0, _store.useStore)(store, _store2.selectors.selectionMode);
-  const popupSide = mounted && positionerElement ? popupSideValue : null;
+  const popupSide = (0, _parts.usePopupSide)(store);
   const disabled = comboboxDisabled;
-  const listEmpty = filteredItems.length === 0;
+  const listEmpty = (0, _parts.useListEmpty)();
   const placeholder = selectionMode === 'none' ? false : !hasSelectedValue;
   const state = {
     ...fieldState,

package/combobox/input-group/ComboboxInputGroup.mjs

@@ -5,10 +5,11 @@ import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useStore } from '@base-ui/utils/store';
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
 import { useFieldRootContext } from "../../internals/field-root-context/FieldRootContext.mjs";
-import { useComboboxDerivedItemsContext, useComboboxRootContext } from "../root/ComboboxRootContext.mjs";
+import { useComboboxRootContext } from "../root/ComboboxRootContext.mjs";
 import { selectors } from "../store.mjs";
 import { triggerStateAttributesMapping } from "../utils/stateAttributesMapping.mjs";
 import { handleInputPress } from "../utils/handleInputPress.mjs";
+import { useListEmpty, usePopupSide } from "../utils/parts.mjs";
 import { contains } from "../../floating-ui-react/utils/element.mjs";
 
 /**
@@ -28,20 +29,14 @@ export const ComboboxInputGroup = /*#__PURE__*/React.forwardRef(function Combobo
     state: fieldState
   } = useFieldRootContext();
   const store = useComboboxRootContext();
-  const {
-    filteredItems
-  } = useComboboxDerivedItemsContext();
   const open = useStore(store, selectors.open);
-  const mounted = useStore(store, selectors.mounted);
-  const popupSideValue = useStore(store, selectors.popupSide);
-  const positionerElement = useStore(store, selectors.positionerElement);
   const comboboxDisabled = useStore(store, selectors.disabled);
   const readOnly = useStore(store, selectors.readOnly);
   const hasSelectedValue = useStore(store, selectors.hasSelectedValue);
   const selectionMode = useStore(store, selectors.selectionMode);
-  const popupSide = mounted && positionerElement ? popupSideValue : null;
+  const popupSide = usePopupSide(store);
   const disabled = comboboxDisabled;
-  const listEmpty = filteredItems.length === 0;
+  const listEmpty = useListEmpty();
   const placeholder = selectionMode === 'none' ? false : !hasSelectedValue;
   const state = {
     ...fieldState,