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

package/components-and-utils.css

@@ -5020,6 +5020,22 @@ table {
 }
 .lumx-combobox-popover__scroll {
   overflow-y: auto;
+  scroll-snap-type: y proximity;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .lumx-combobox-popover__scroll {
+    scroll-behavior: smooth;
+  }
+}
+.lumx-combobox-popover__scroll::before {
+  content: "";
+  display: block;
+  scroll-snap-align: start;
+}
+.lumx-combobox-popover__scroll::after {
+  content: "";
+  display: block;
+  scroll-snap-align: end;
 }
 
 .lumx-combobox-popover:empty, .lumx-combobox-popover:not(:has(.lumx-combobox-option)):not(:has(.lumx-combobox-state)):not(:has(.lumx-combobox-option-skeleton)),

package/js/components/Combobox/ComboboxInput.d.ts

@@ -17,6 +17,11 @@ export interface ComboboxInputProps extends HasClassName, HasTheme {
     toggleButtonProps?: Record<string, any>;
     /** Toggle callback for the chevron button. */
     handleToggle?(): void;
+    /**
+     * Controls how the combobox filters options as the user types.
+     * When `'off'`, the input is rendered as `readOnly`.
+     */
+    filter?: 'auto' | 'manual' | 'off';
 }
 /**
  * Injected framework-specific components for ComboboxInput rendering.

package/js/components/Combobox/setupComboboxInput.d.ts

@@ -2,14 +2,22 @@ import type { ComboboxCallbacks, ComboboxHandle } from './types';
 /** Options for configuring the input-mode combobox controller. */
 export interface SetupComboboxInputOptions extends ComboboxCallbacks {
     /**
-     * When true (default), the combobox automatically filters options as the user types.
-     * Each registered `Combobox.Option` receives filter state updates and hides itself
-     * when it does not match the current input value.
+     * Controls how the combobox filters options as the user types.
      *
-     * Set to false when you want to handle filtering yourself (e.g. async search,
-     * consumer-side pre-filtering). Options will not be registered for auto-filtering.
+     * - `'auto'` (default) — Options are automatically filtered client-side.
+     * - `'manual'` — Filtering is the consumer's responsibility.
+     * - `'off'` — Like `'manual'`, and `openOnFocus` defaults to `true`.
+     *   The core template renders the input as `readOnly`.
      */
-    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;
 }
 /**
  * Set up a combobox with an input trigger (autocomplete/filter pattern).

package/lumx.css

@@ -5701,6 +5701,22 @@ table {
 }
 .lumx-combobox-popover__scroll {
   overflow-y: auto;
+  scroll-snap-type: y proximity;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .lumx-combobox-popover__scroll {
+    scroll-behavior: smooth;
+  }
+}
+.lumx-combobox-popover__scroll::before {
+  content: "";
+  display: block;
+  scroll-snap-align: start;
+}
+.lumx-combobox-popover__scroll::after {
+  content: "";
+  display: block;
+  scroll-snap-align: end;
 }
 
 .lumx-combobox-popover:empty, .lumx-combobox-popover:not(:has(.lumx-combobox-option)):not(:has(.lumx-combobox-state)):not(:has(.lumx-combobox-option-skeleton)),

package/package.json

@@ -7,7 +7,7 @@
     },
     "dependencies": {
         "@floating-ui/dom": "^1.7.5",
-        "@lumx/icons": "^4.11.0-next.5",
+        "@lumx/icons": "^4.11.0-next.6",
         "classnames": "^2.3.2",
         "focus-visible": "^5.0.2",
         "lodash": "4.18.1",
@@ -69,7 +69,7 @@
         "update-version-changelog": "yarn version-changelog ../../CHANGELOG.md"
     },
     "sideEffects": false,
-    "version": "4.11.0-next.5",
+    "version": "4.11.0-next.6",
     "devDependencies": {
         "@rollup/plugin-typescript": "^12.3.0",
         "@testing-library/dom": "^10.4.1",

package/scss/components/combobox/_index.scss

@@ -18,6 +18,21 @@
 
     &__scroll {
         overflow-y: auto;
+        scroll-snap-type: y proximity;
+        @media (prefers-reduced-motion: no-preference) {
+            scroll-behavior: smooth;
+        }
+
+        &::before {
+          content: '';
+          display: block;
+          scroll-snap-align: start;
+        }
+        &::after {
+          content: '';
+          display: block;
+          scroll-snap-align: end;
+        }
     }
 }