@lumx/react 4.11.0-next.5 → 4.11.0-next.6

package/index.d.ts

@@ -1954,13 +1954,22 @@ interface ComboboxInputProps extends TextFieldProps {
         value: string;
     }) => void;
     /**
-     * When true (default), the combobox automatically filters options as the user types.
-     * Each `Combobox.Option` registers itself and hides when it doesn't match the input value.
+     * Controls how the combobox filters options as the user types.
      *
-     * Set to false when you handle filtering yourself (e.g. async search, consumer-side
-     * pre-filtering). Options will not be auto-filtered.
+     * - `'auto'` (default) — Options are automatically filtered client-side.
+     * - `'manual'` — Filtering is the consumer's responsibility.
+     * - `'off'` — Like `'manual'`, but the input is rendered as `readOnly`
+     *   and `openOnFocus` defaults to `true`.
      */
-    autoFilter?: boolean;
+    filter?: 'auto' | 'manual' | 'off';
+    /**
+     * When true, the combobox opens automatically when the input receives focus.
+     * When false (default, unless `filter` is `'off'`), the combobox only opens
+     * on click, typing, or keyboard navigation.
+     *
+     * @default false (true when filter is 'off')
+     */
+    openOnFocus?: boolean;
 }
 
 /**

package/index.js

@@ -3371,6 +3371,7 @@ function setupListbox(handle, signal, notify) {
   const trigger = handle.trigger;
   const listbox = handle.listbox;
   const isGrid = listbox.getAttribute('role') === 'grid';
+  const itemSelector = '[role="option"]';
 
   // ── Focus navigation ──────────────────────────────────────
 
@@ -3378,13 +3379,25 @@ function setupListbox(handle, signal, notify) {
     onActivate: item => {
       item.setAttribute('data-focus-visible-added', 'true');
       trigger.setAttribute('aria-activedescendant', item.id);
-      // Scroll to the element in listbox or else the item
-      const toScrollTo = item.closest('[role=listbox] > *') || item;
-      toScrollTo.scrollIntoView({
-        behavior: 'smooth',
-        block: 'nearest'
-      });
       notify('activeDescendantChange', item.id);
+      requestAnimationFrame(() => {
+        // Last item in listbox
+        const lastItem = !isGrid &&
+        // Last item: find last element containing itemSelector and not followed by elements containing itemSelector and then get the itemSelector inside
+        listbox.querySelector(`:scope > :has(${itemSelector}):not(:has(~ * ${itemSelector})) ${itemSelector}`);
+        if (item === lastItem) {
+          // Scroll to the end of the listbox (shouldsnap to the end of the scroll container thanks to CSS scroll snap)
+          listbox.lastElementChild?.scrollIntoView({
+            block: 'nearest'
+          });
+        } else {
+          // Scroll to the element in listbox or else the item
+          const toScrollTo = item.closest('[role=listbox] > *') || item;
+          toScrollTo.scrollIntoView({
+            block: 'nearest'
+          });
+        }
+      });
     },
     onDeactivate: item => {
       item.removeAttribute('data-focus-visible-added');
@@ -3406,9 +3419,7 @@ function setupListbox(handle, signal, notify) {
   } else {
     focusNav = createListFocusNavigation({
       container: listbox,
-      // Filtered options don't render [role="option"] at all (they render only a
-      // hidden placeholder), so no :not([data-filtered]) filter is needed here.
-      itemSelector: '[role="option"]',
+      itemSelector,
       getActiveItem: () => {
         const id = trigger.getAttribute('aria-activedescendant');
         return id ? document.getElementById(id) : null;
@@ -6876,9 +6887,11 @@ const ComboboxButton = Object.assign(forwardRefPolymorphic((props, ref) => {
  */
 function setupComboboxInput(input, options) {
   const {
-    autoFilter = true,
+    filter = 'auto',
     onSelect: optionOnSelect
   } = options;
+  const openOnFocus = options.openOnFocus ?? filter === 'off';
+  const autoFilter = filter === 'auto';
 
   /** Check if the input is disabled (native `disabled` attribute or `aria-disabled="true"`). */
   const isDisabled = () => input.disabled || input.getAttribute('aria-disabled') === 'true';
@@ -6931,11 +6944,13 @@ function setupComboboxInput(input, options) {
       signal
     });
 
-    // Open on focus.
+    // Open on focus (only when openOnFocus is enabled).
     input.addEventListener('focus', () => {
       if (isDisabled()) return;
       combobox.focusNav?.clear();
-      combobox.setIsOpen(true);
+      if (openOnFocus) {
+        combobox.setIsOpen(true);
+      }
     }, {
       signal
     });
@@ -7040,6 +7055,7 @@ const ComboboxInput$1 = (props, {
     textFieldRef,
     toggleButtonProps,
     handleToggle,
+    filter,
     theme,
     ...forwardedProps
   } = props;
@@ -7049,6 +7065,7 @@ const ComboboxInput$1 = (props, {
   const isAnyDisabled = disabledState.disabled || disabledState['aria-disabled'] || undefined;
   return /*#__PURE__*/jsx(TextField, {
     autoComplete: "off",
+    readOnly: filter === 'off' || undefined,
     ...forwardedProps,
     ref: ref,
     role: "combobox",
@@ -7624,7 +7641,8 @@ const ComboboxInput = forwardRef((props, ref) => {
     inputRef: externalInputRef,
     toggleButtonProps,
     onSelect,
-    autoFilter,
+    filter,
+    openOnFocus,
     ...otherProps
   } = props;
   const internalInputRef = useRef(null);
@@ -7646,14 +7664,15 @@ const ComboboxInput = forwardRef((props, ref) => {
         onChangeRef.current?.(option.value);
         onSelectRef.current?.(option);
       },
-      autoFilter
+      filter,
+      openOnFocus
     });
     setHandle(handle);
     return () => {
       handle.destroy();
       setHandle(null);
     };
-  }, [autoFilter, setHandle]);
+  }, [filter, openOnFocus, setHandle]);
   const handleToggle = useCallback(() => {
     setIsOpen(!isOpen);
     internalInputRef.current?.focus();
@@ -7663,6 +7682,7 @@ const ComboboxInput = forwardRef((props, ref) => {
     ref,
     listboxId,
     isOpen,
+    filter,
     inputRef: mergedInputRef,
     textFieldRef: anchorRef,
     toggleButtonProps,
@@ -8156,7 +8176,7 @@ function useComboboxOptionContext() {
 /**
  * Combobox.Option component - wraps ListItem with option role and data-value.
  *
- * When autoFilter is enabled on the parent Combobox.Input, each option registers itself
+ * When filter="auto" is enabled on the parent Combobox.Input, each option registers itself
  * with the combobox handle (via an internal ref to its root <li>). When the filter changes,
  * the handle calls back with the new match state. When filtered out, the core template renders
  * a bare `<li hidden>` — no ARIA roles, no CSS classes — keeping the element in the DOM so
@@ -9602,7 +9622,7 @@ ListSection.defaultProps = DEFAULT_PROPS$U;
  *
  * Returns null when children is empty so the section header is not rendered as an orphan.
  *
- * When autoFilter is active, the section registers itself with the combobox handle.
+ * When filter="auto" is active, the section registers itself with the combobox handle.
  * The handle monitors registered options within this section and notifies when all
  * are filtered out. When hidden, the core template renders a bare `<li hidden>` wrapper
  * so children (options) stay mounted and registered.