@base-ui/react 1.1.0 → 1.2.0

package/combobox/index.parts.js

@@ -153,6 +153,12 @@ Object.defineProperty(exports, "useFilter", {
     return _useFilter.useComboboxFilter;
   }
 });
+Object.defineProperty(exports, "useFilteredItems", {
+  enumerable: true,
+  get: function () {
+    return _useFilteredItems.useFilteredItems;
+  }
+});
 var _ComboboxRoot = require("./root/ComboboxRoot");
 var _ComboboxValue = require("./value/ComboboxValue");
 var _ComboboxInput = require("./input/ComboboxInput");
@@ -177,4 +183,5 @@ var _ComboboxCollection = require("./collection/ComboboxCollection");
 var _ComboboxEmpty = require("./empty/ComboboxEmpty");
 var _ComboboxClear = require("./clear/ComboboxClear");
 var _separator = require("../separator");
-var _useFilter = require("./root/utils/useFilter");
+var _useFilter = require("./root/utils/useFilter");
+var _useFilteredItems = require("./root/utils/useFilteredItems");

package/combobox/input/ComboboxInput.d.ts

@@ -30,7 +30,7 @@ export interface ComboboxInputProps extends BaseUIComponentProps<'input', Combob
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
 }
 export declare namespace ComboboxInput {
   type State = ComboboxInputState;

package/combobox/input/ComboboxInput.js

@@ -56,8 +56,8 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
   // `inputValue` can't be placed in the store.
   // https://github.com/mui/base-ui/issues/2703
   const inputValue = (0, _ComboboxRootContext.useComboboxInputValueContext)();
-  const required = (0, _store.useStore)(store, _store2.selectors.required);
   const direction = (0, _DirectionContext.useDirection)();
+  const required = (0, _store.useStore)(store, _store2.selectors.required);
   const comboboxDisabled = (0, _store.useStore)(store, _store2.selectors.disabled);
   const readOnly = (0, _store.useStore)(store, _store2.selectors.readOnly);
   const name = (0, _store.useStore)(store, _store2.selectors.name);
@@ -80,6 +80,8 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
   const id = (0, _useBaseUiId.useBaseUiId)(idProp ?? (!isInsidePopup ? rootId : undefined));
   const [composingValue, setComposingValue] = React.useState(null);
   const isComposingRef = React.useRef(false);
+  const lastActiveIndexRef = React.useRef(null);
+  const shouldRestoreActiveIndexRef = React.useRef(false);
   const setInputElement = (0, _useStableCallback.useStableCallback)(element => {
     const nextIsInsidePopup = hasPositionerParent || store.state.inline;
     if (nextIsInsidePopup && !store.state.hasInputValue) {
@@ -90,14 +92,14 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
       inputInsidePopup: nextIsInsidePopup
     });
   });
-  const state = React.useMemo(() => ({
+  const state = {
     ...fieldState,
     open,
     disabled,
     readOnly,
     popupSide,
     listEmpty
-  }), [fieldState, open, disabled, readOnly, popupSide, listEmpty]);
+  };
   function handleKeyDown(event) {
     if (!comboboxChipsContext) {
       return undefined;
@@ -169,10 +171,31 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
       id,
       onFocus() {
         setFocused(true);
+        if (!inline || !shouldRestoreActiveIndexRef.current) {
+          return;
+        }
+        shouldRestoreActiveIndexRef.current = false;
+        const nextActiveIndex = lastActiveIndexRef.current;
+        if (nextActiveIndex == null ||
+        // `valuesRef` can be sparse, so guard against restoring a removed slot.
+        !Object.hasOwn(store.state.valuesRef.current, nextActiveIndex)) {
+          return;
+        }
+        store.state.setIndices({
+          activeIndex: nextActiveIndex
+        });
       },
       onBlur() {
         setTouched(true);
         setFocused(false);
+        const activeIndex = store.state.activeIndex;
+        if (inline && activeIndex !== null && autoHighlightMode !== 'always') {
+          lastActiveIndexRef.current = activeIndex;
+          shouldRestoreActiveIndexRef.current = true;
+          store.state.setIndices({
+            activeIndex: null
+          });
+        }
         if (validationMode === 'onBlur') {
           const valueToValidate = selectionMode === 'none' ? inputValue : selectedValue;
           validation.commit(valueToValidate);
@@ -192,6 +215,12 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
         store.state.setInputValue(next, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputChange, event.nativeEvent));
       },
       onChange(event) {
+        // Autofill may not provide `inputType` (Chrome) or may report
+        // `insertReplacementText` (Firefox).
+        const inputType = event.nativeEvent.inputType;
+        const autofillLikeInput = !inputType || inputType === 'insertReplacementText';
+        const shouldOpenOnInput = isComposingRef.current || !autofillLikeInput;
+
         // During IME composition, avoid propagating controlled updates to prevent
         // filtering the options prematurely so `Empty` won't show incorrectly.
         // We can't rely on this check for Android due to how it handles composition
@@ -206,8 +235,8 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
           }
           const trimmed = nextVal.trim();
           const shouldMaintainHighlight = autoHighlightEnabled && trimmed !== '';
-          if (!readOnly && !disabled) {
-            if (trimmed !== '') {
+          if (!readOnly && !disabled && trimmed) {
+            if (shouldOpenOnInput) {
               store.state.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputChange, event.nativeEvent));
               if (!autoHighlightEnabled) {
                 store.state.setIndices({
@@ -239,8 +268,8 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
           }
         }
         const trimmed = event.currentTarget.value.trim();
-        if (!readOnly && !disabled) {
-          if (trimmed !== '') {
+        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) {
@@ -313,11 +342,12 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
           store.state.setSelectedValue(newValue, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none, event.nativeEvent));
           return;
         }
+        const hadHighlightedChip = comboboxChipsContext?.highlightedChipIndex !== undefined;
         const nextIndex = handleKeyDown(event);
         comboboxChipsContext?.setHighlightedChipIndex(nextIndex);
         if (nextIndex !== undefined) {
           comboboxChipsContext?.chipsRef.current[nextIndex]?.focus();
-        } else {
+        } else if (hadHighlightedChip) {
           store.state.inputRef.current?.focus();
         }
 

package/combobox/item/ComboboxItem.d.ts

@@ -25,11 +25,11 @@ export interface ComboboxItemProps extends NonNativeButtonProps, Omit<BaseUIComp
    * An optional click handler for the item when selected.
    * It fires when clicking the item with the pointer, as well as when pressing `Enter` with the keyboard if the item is highlighted when the `Input` or `List` element has focus.
    */
-  onClick?: React.MouseEventHandler<HTMLElement>;
+  onClick?: BaseUIComponentProps<'div', ComboboxItemState>['onClick'] | undefined;
   /**
    * The index of the item in the list. Improves performance when specified by avoiding the need to calculate the index automatically from the DOM.
    */
-  index?: number;
+  index?: number | undefined;
   /**
    * A unique value that identifies this item.
    * @default null
@@ -39,7 +39,7 @@ export interface ComboboxItemProps extends NonNativeButtonProps, Omit<BaseUIComp
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
 }
 export declare namespace ComboboxItem {
   type State = ComboboxItemState;

package/combobox/item/ComboboxItem.js

@@ -27,7 +27,7 @@ const ComboboxItem = exports.ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*
   const {
     render,
     className,
-    value = null,
+    value: itemValue = null,
     index: indexProp,
     disabled = false,
     nativeButton = false,
@@ -43,7 +43,8 @@ const ComboboxItem = exports.ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*
   const store = (0, _ComboboxRootContext.useComboboxRootContext)();
   const isRow = (0, _ComboboxRowContext.useComboboxRowContext)();
   const {
-    flatFilteredItems
+    flatFilteredItems,
+    hasItems
   } = (0, _ComboboxRootContext.useComboboxDerivedItemsContext)();
   const open = (0, _store.useStore)(store, _store2.selectors.open);
   const selectionMode = (0, _store.useStore)(store, _store2.selectors.selectionMode);
@@ -51,12 +52,11 @@ const ComboboxItem = exports.ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*
   const virtualized = (0, _store.useStore)(store, _store2.selectors.virtualized);
   const isItemEqualToValue = (0, _store.useStore)(store, _store2.selectors.isItemEqualToValue);
   const selectable = selectionMode !== 'none';
-  const index = indexProp ?? (virtualized ? (0, _itemEquality.findItemIndex)(flatFilteredItems, value, isItemEqualToValue) : listItem.index);
+  const index = indexProp ?? (virtualized ? (0, _itemEquality.findItemIndex)(flatFilteredItems, itemValue, isItemEqualToValue) : listItem.index);
   const hasRegistered = listItem.index !== -1;
   const rootId = (0, _store.useStore)(store, _store2.selectors.id);
   const highlighted = (0, _store.useStore)(store, _store2.selectors.isActive, index);
-  const matchesSelectedValue = (0, _store.useStore)(store, _store2.selectors.isSelected, value);
-  const items = (0, _store.useStore)(store, _store2.selectors.items);
+  const matchesSelectedValue = (0, _store.useStore)(store, _store2.selectors.isSelected, itemValue);
   const getItemProps = (0, _store.useStore)(store, _store2.selectors.getItemProps);
   const itemRef = React.useRef(null);
   const id = rootId != null && hasRegistered ? `${rootId}-${index}` : undefined;
@@ -73,41 +73,41 @@ const ComboboxItem = exports.ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*
     };
   }, [hasRegistered, virtualized, index, indexProp, store]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    if (!hasRegistered || items) {
+    if (!hasRegistered || hasItems) {
       return undefined;
     }
     const visibleMap = store.state.valuesRef.current;
-    visibleMap[index] = value;
+    visibleMap[index] = itemValue;
 
     // Stable registry that doesn't depend on filtering. Assume that no
     // filtering had occurred at this point; otherwise, an `items` prop is
     // required.
     if (selectionMode !== 'none') {
-      store.state.allValuesRef.current.push(value);
+      store.state.allValuesRef.current.push(itemValue);
     }
     return () => {
       delete visibleMap[index];
     };
-  }, [hasRegistered, items, index, value, store, selectionMode]);
+  }, [hasRegistered, hasItems, index, itemValue, store, selectionMode]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (!open) {
       didPointerDownRef.current = false;
       return;
     }
-    if (!hasRegistered || items) {
+    if (!hasRegistered || hasItems) {
       return;
     }
     const selectedValue = store.state.selectedValue;
     const lastSelectedValue = Array.isArray(selectedValue) ? selectedValue[selectedValue.length - 1] : selectedValue;
-    if ((0, _itemEquality.compareItemEquality)(lastSelectedValue, value, isItemEqualToValue)) {
+    if ((0, _itemEquality.compareItemEquality)(itemValue, lastSelectedValue, isItemEqualToValue)) {
       store.set('selectedIndex', index);
     }
-  }, [hasRegistered, items, open, store, index, value, isItemEqualToValue]);
-  const state = React.useMemo(() => ({
+  }, [hasRegistered, hasItems, open, store, index, itemValue, isItemEqualToValue]);
+  const state = {
     disabled,
     selected,
     highlighted
-  }), [disabled, selected, highlighted]);
+  };
   const rootProps = getItemProps({
     active: highlighted,
     selected
@@ -124,7 +124,7 @@ const ComboboxItem = exports.ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*
   });
   function commitSelection(nativeEvent) {
     function selectItem() {
-      store.state.handleSelection(nativeEvent, value);
+      store.state.handleSelection(nativeEvent, itemValue);
     }
     if (store.state.submitOnItemClick) {
       ReactDOM.flushSync(selectItem);

package/combobox/item/ComboboxItemContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

package/combobox/item-indicator/ComboboxItemIndicator.d.ts

@@ -12,7 +12,7 @@ export interface ComboboxItemIndicatorProps extends BaseUIComponentProps<'span',
    * Whether to keep the HTML element in the DOM when the item is not selected.
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
 }
 export interface ComboboxItemIndicatorState {
   selected: boolean;

package/combobox/item-indicator/ComboboxItemIndicator.js

@@ -52,10 +52,10 @@ const Inner = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef((componentPr
     transitionStatus,
     setMounted
   } = (0, _useTransitionStatus.useTransitionStatus)(selected);
-  const state = React.useMemo(() => ({
+  const state = {
     selected,
     transitionStatus
-  }), [selected, transitionStatus]);
+  };
   const element = (0, _useRenderElement.useRenderElement)('span', componentProps, {
     ref: [forwardedRef, indicatorRef],
     state,

package/combobox/list/ComboboxList.js

@@ -65,9 +65,9 @@ const ComboboxList = exports.ComboboxList = /*#__PURE__*/React.forwardRef(functi
     }
     return children;
   }, [children]);
-  const state = React.useMemo(() => ({
+  const state = {
     empty
-  }), [empty]);
+  };
   const floatingId = floatingRootContext.useState('floatingId');
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,

package/combobox/popup/ComboboxPopup.d.ts

@@ -26,7 +26,7 @@ export interface ComboboxPopupProps extends BaseUIComponentProps<'div', Combobox
    * - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
    *   Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing.
    */
-  initialFocus?: boolean | React.RefObject<HTMLElement | null> | ((openType: InteractionType) => void | boolean | HTMLElement | null);
+  initialFocus?: (boolean | React.RefObject<HTMLElement | null> | ((openType: InteractionType) => void | boolean | HTMLElement | null)) | undefined;
   /**
    * Determines the element to focus when the popup is closed.
    *
@@ -36,7 +36,7 @@ export interface ComboboxPopupProps extends BaseUIComponentProps<'div', Combobox
    * - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
    *   Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing.
    */
-  finalFocus?: boolean | React.RefObject<HTMLElement | null> | ((closeType: InteractionType) => void | boolean | HTMLElement | null);
+  finalFocus?: (boolean | React.RefObject<HTMLElement | null> | ((closeType: InteractionType) => void | boolean | HTMLElement | null)) | undefined;
 }
 export declare namespace ComboboxPopup {
   type State = ComboboxPopupState;

package/combobox/popup/ComboboxPopup.js

@@ -48,7 +48,6 @@ const ComboboxPopup = exports.ComboboxPopup = /*#__PURE__*/React.forwardRef(func
   const transitionStatus = (0, _store.useStore)(store, _store2.selectors.transitionStatus);
   const inputInsidePopup = (0, _store.useStore)(store, _store2.selectors.inputInsidePopup);
   const inputElement = (0, _store.useStore)(store, _store2.selectors.inputElement);
-  const modal = (0, _store.useStore)(store, _store2.selectors.modal);
   const empty = filteredItems.length === 0;
   (0, _useOpenChangeComplete.useOpenChangeComplete)({
     open,
@@ -59,14 +58,14 @@ const ComboboxPopup = exports.ComboboxPopup = /*#__PURE__*/React.forwardRef(func
       }
     }
   });
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     side: positioning.side,
     align: positioning.align,
     anchorHidden: positioning.anchorHidden,
     transitionStatus,
     empty
-  }), [open, positioning.side, positioning.align, positioning.anchorHidden, transitionStatus, empty]);
+  };
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     ref: [forwardedRef, store.state.popupRef],
@@ -97,7 +96,7 @@ const ComboboxPopup = exports.ComboboxPopup = /*#__PURE__*/React.forwardRef(func
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingUiReact.FloatingFocusManager, {
     context: floatingRootContext,
     disabled: !mounted,
-    modal: inputInsidePopup ? modal : false,
+    modal: !inputInsidePopup,
     openInteractionType: openMethod,
     initialFocus: resolvedInitialFocus,
     returnFocus: resolvedFinalFocus,

package/combobox/popup/ComboboxPopupDataAttributes.js

@@ -26,12 +26,12 @@ let ComboboxPopupDataAttributes = exports.ComboboxPopupDataAttributes = function
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  ComboboxPopupDataAttributes["side"] = "data-side";
+  ComboboxPopupDataAttributes[ComboboxPopupDataAttributes["side"] = _popupStateMapping.CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  ComboboxPopupDataAttributes["align"] = "data-align";
+  ComboboxPopupDataAttributes[ComboboxPopupDataAttributes["align"] = _popupStateMapping.CommonPopupDataAttributes.align] = "align";
   /**
    * Present if animations should be instant.
    * @type {'click' | 'dismiss'}

package/combobox/portal/ComboboxPortal.d.ts

@@ -14,7 +14,7 @@ export interface ComboboxPortalProps extends FloatingPortal.Props<ComboboxPortal
    * Whether to keep the portal mounted in the DOM while the popup is hidden.
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
 }
 export declare namespace ComboboxPortal {
   type Props = ComboboxPortalProps;

package/combobox/portal/ComboboxPortalContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

package/combobox/positioner/ComboboxPositioner.js

@@ -18,6 +18,7 @@ var _useAnchorPositioning = require("../../utils/useAnchorPositioning");
 var _popupStateMapping = require("../../utils/popupStateMapping");
 var _ComboboxPortalContext = require("../portal/ComboboxPortalContext");
 var _constants = require("../../utils/constants");
+var _getDisabledMountTransitionStyles = require("../../utils/getDisabledMountTransitionStyles");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _store2 = require("../store");
 var _InternalBackdrop = require("../../utils/InternalBackdrop");
@@ -57,6 +58,7 @@ const ComboboxPositioner = exports.ComboboxPositioner = /*#__PURE__*/React.forwa
   const triggerElement = (0, _store.useStore)(store, _store2.selectors.triggerElement);
   const inputElement = (0, _store.useStore)(store, _store2.selectors.inputElement);
   const inputInsidePopup = (0, _store.useStore)(store, _store2.selectors.inputInsidePopup);
+  const transitionStatus = (0, _store.useStore)(store, _store2.selectors.transitionStatus);
   const empty = filteredItems.length === 0;
   const resolvedAnchor = anchor ?? (inputInsidePopup ? triggerElement : inputElement);
   const positioning = (0, _useAnchorPositioning.useAnchorPositioning)({
@@ -91,13 +93,13 @@ const ComboboxPositioner = exports.ComboboxPositioner = /*#__PURE__*/React.forwa
       style
     };
   }, [open, mounted, positioning.positionerStyles]);
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     side: positioning.side,
     align: positioning.align,
     anchorHidden: positioning.anchorHidden,
     empty
-  }), [open, positioning.side, positioning.align, positioning.anchorHidden, empty]);
+  };
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     store.set('popupSide', positioning.side);
   }, [store, positioning.side]);
@@ -116,7 +118,7 @@ const ComboboxPositioner = exports.ComboboxPositioner = /*#__PURE__*/React.forwa
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     ref: [forwardedRef, setPositionerElement],
-    props: [defaultProps, elementProps],
+    props: [defaultProps, (0, _getDisabledMountTransitionStyles.getDisabledMountTransitionStyles)(transitionStatus), elementProps],
     stateAttributesMapping: _popupStateMapping.popupStateMapping
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ComboboxPositionerContext.ComboboxPositionerContext.Provider, {

package/combobox/positioner/ComboboxPositionerDataAttributes.js

@@ -22,12 +22,12 @@ let ComboboxPositionerDataAttributes = exports.ComboboxPositionerDataAttributes
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  ComboboxPositionerDataAttributes["side"] = "data-side";
+  ComboboxPositionerDataAttributes[ComboboxPositionerDataAttributes["side"] = _popupStateMapping.CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  ComboboxPositionerDataAttributes["align"] = "data-align";
+  ComboboxPositionerDataAttributes[ComboboxPositionerDataAttributes["align"] = _popupStateMapping.CommonPopupDataAttributes.align] = "align";
   /**
    * Present when the items list is empty.
    */