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

package/index.d.ts

@@ -1781,6 +1781,8 @@ interface InputLabelProps$1 extends HasClassName, HasTheme {
     children: JSXElement;
     /** Native htmlFor property. */
     htmlFor: string;
+    /** Native id property. */
+    id?: string;
     /** Whether the component is required or not. */
     isRequired?: boolean;
     /** ref to the root element */
@@ -1813,6 +1815,8 @@ interface TextFieldProps$1 extends HasClassName, HasTheme, HasAriaDisabled, HasD
     helperId?: string;
     /** Generated error id for accessibility attributes. */
     errorId?: string;
+    /** Generated label id for accessibility attributes (used to link the clear button to the field label). */
+    labelId?: string;
     /** Whether the component is required or not. */
     isRequired?: boolean;
     /** Whether the text field is displayed with valid style or not. */
@@ -1842,7 +1846,7 @@ interface TextFieldProps$1 extends HasClassName, HasTheme, HasAriaDisabled, HasD
     /** Ref to the component root. */
     ref?: CommonRef;
 }
-type TextFieldPropsToOverride = 'input' | 'IconButton' | 'labelProps' | 'textFieldRef' | 'clearButtonProps' | 'helperId' | 'errorId' | 'isAnyDisabled' | 'isFocus';
+type TextFieldPropsToOverride = 'input' | 'IconButton' | 'labelProps' | 'textFieldRef' | 'clearButtonProps' | 'helperId' | 'errorId' | 'labelId' | 'isAnyDisabled' | 'isFocus';
 
 /**
  * Defines the props of the component.
@@ -1950,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.
+     *
+     * - `'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`.
+     */
+    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.
      *
-     * Set to false when you handle filtering yourself (e.g. async search, consumer-side
-     * pre-filtering). Options will not be auto-filtered.
+     * @default false (true when filter is 'off')
      */
-    autoFilter?: boolean;
+    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",
@@ -7107,15 +7124,17 @@ const {
  * @param existingAriaDescribedBy Existing aria-describedby value to merge
  * @return Object containing helperId, errorId, and combined describedById
  */
-function generateAccessibilityIds(helper, error, generatedId, existingAriaDescribedBy) {
+function generateAccessibilityIds(helper, error, generatedId, existingAriaDescribedBy, label) {
   const helperId = helper ? `text-field-helper-${generatedId}` : undefined;
   const errorId = error ? `text-field-error-${generatedId}` : undefined;
+  const labelId = label ? `text-field-label-${generatedId}` : undefined;
   const describedByIds = [errorId, helperId, existingAriaDescribedBy].filter(Boolean);
   const describedById = describedByIds.length === 0 ? undefined : describedByIds.join(' ');
   return {
     helperId,
     errorId,
-    describedById
+    describedById,
+    labelId
   };
 }
 
@@ -7148,6 +7167,7 @@ const TextField$1 = props => {
     textFieldRef,
     helperId,
     errorId,
+    labelId,
     theme,
     value,
     afterElement,
@@ -7179,6 +7199,7 @@ const TextField$1 = props => {
       className: element$K('header'),
       children: [label && InputLabel$1({
         ...labelProps,
+        id: labelId,
         htmlFor: textFieldId,
         className: element$K('label'),
         isRequired,
@@ -7213,6 +7234,7 @@ const TextField$1 = props => {
         icon: isValid ? mdiCheckCircle : mdiAlertCircle,
         size: Size.xxs
       }), clearButtonProps && isNotEmpty && !isAnyDisabled && /*#__PURE__*/jsx(IconButton, {
+        "aria-describedby": labelId,
         ...clearButtonProps,
         className: element$K('input-clear'),
         icon: mdiCloseCircle,
@@ -7500,8 +7522,9 @@ const TextField = forwardRef((props, ref) => {
   const {
     helperId,
     errorId,
-    describedById
-  } = generateAccessibilityIds(helper, error, generatedTextFieldId, forwardedProps['aria-describedby']);
+    describedById,
+    labelId
+  } = generateAccessibilityIds(helper, error, generatedTextFieldId, forwardedProps['aria-describedby'], label);
   const [isFocus, setFocus] = useState(false);
 
   /**
@@ -7571,6 +7594,7 @@ const TextField = forwardRef((props, ref) => {
     afterElement,
     hasError,
     helperId,
+    labelId,
     multiline,
     maxLength,
     isRequired,
@@ -7617,7 +7641,8 @@ const ComboboxInput = forwardRef((props, ref) => {
     inputRef: externalInputRef,
     toggleButtonProps,
     onSelect,
-    autoFilter,
+    filter,
+    openOnFocus,
     ...otherProps
   } = props;
   const internalInputRef = useRef(null);
@@ -7639,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();
@@ -7656,6 +7682,7 @@ const ComboboxInput = forwardRef((props, ref) => {
     ref,
     listboxId,
     isOpen,
+    filter,
     inputRef: mergedInputRef,
     textFieldRef: anchorRef,
     toggleButtonProps,
@@ -8149,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
@@ -9595,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.