@lumx/core 4.9.0-next.1 → 4.9.0-next.10

package/js/utils/focusNavigation/types.d.ts

@@ -39,10 +39,30 @@ export interface ListNavigationOptions {
      */
     itemActiveSelector?: string;
 }
-/** Focus navigation controller interface for 1D lists. */
+/** Options for 2D grid navigation. */
+export interface GridNavigationOptions {
+    type: 'grid';
+    /** The container element (grid root) to scan for rows and cells. */
+    container: HTMLElement;
+    /** CSS selector to identify row elements within the container. */
+    rowSelector: string;
+    /** CSS selector to identify cell elements within each row. */
+    cellSelector: string;
+    /**
+     * Predicate to determine if a row should be included in navigation.
+     * Rows for which this returns `false` are skipped.
+     * Default: all rows are visible.
+     */
+    isRowVisible?: (row: HTMLElement) => boolean;
+    /** Whether navigation wraps at boundaries. Default: false. */
+    wrap?: boolean;
+}
+/** Union of all navigation option types. */
+export type NavigationOptions = ListNavigationOptions | GridNavigationOptions;
+/** Focus navigation controller interface — works for both 1D lists and 2D grids. */
 export interface FocusNavigationController {
     /** The navigation structure type. */
-    readonly type: 'list';
+    readonly type: 'list' | 'grid';
     /** The currently active item, or null if no item is active. */
     readonly activeItem: HTMLElement | null;
     /** Whether an item is currently active. */
@@ -60,7 +80,8 @@ export interface FocusNavigationController {
     goToItem(item: HTMLElement): boolean;
     /**
      * Navigate by offset from the current item.
-     * Positive offsets move forward, negative move backward.
+     * In list mode, moves by items. In grid mode, moves by rows.
+     * Positive offsets move forward/down, negative move backward/up.
      */
     goToOffset(offset: number): boolean;
     /**
@@ -70,12 +91,12 @@ export interface FocusNavigationController {
     goToItemMatching(predicate: (item: HTMLElement) => boolean): boolean;
     /** Clear the active item — no item is active after this call. */
     clear(): void;
-    /** Navigate up (previous item in vertical list). */
+    /** Navigate up (previous item in vertical list, previous row in grid). */
     goUp(): boolean;
-    /** Navigate down (next item in vertical list). */
+    /** Navigate down (next item in vertical list, next row in grid). */
     goDown(): boolean;
-    /** Navigate left (previous item in horizontal list). */
+    /** Navigate left (previous item in horizontal list, previous cell in grid). */
     goLeft(): boolean;
-    /** Navigate right (next item in horizontal list). */
+    /** Navigate right (next item in horizontal list, next cell in grid). */
     goRight(): boolean;
 }

package/js/utils/typeahead/index.d.ts

@@ -0,0 +1,29 @@
+/** Typeahead interface. */
+export interface Typeahead {
+    /**
+     * Handle a printable character keypress.
+     * @param key The character typed.
+     * @param currentItem The currently active item.
+     * @returns The matched item, or null.
+     */
+    handle(key: string, currentItem: HTMLElement | null): HTMLElement | null;
+    /** Reset the accumulated search string. */
+    reset(): void;
+}
+/**
+ * Create a typeahead controller for keyboard navigation in list-like widgets
+ * (combobox, menu, listbox, tree, etc.).
+ *
+ * Accumulates typed characters and matches them against item labels.
+ * Supports single-char cycling (e.g. pressing "a" repeatedly cycles through
+ * items starting with "a") and multi-char prefix matching.
+ *
+ * Uses a {@link TreeWalker} for lazy DOM traversal — items are visited one
+ * at a time without materializing the full list.
+ *
+ * @param getWalker Callback returning a fresh TreeWalker over navigable items, or null if unavailable.
+ * @param getItemValue Callback extracting the text label from an item element.
+ * @param signal AbortSignal for cleanup.
+ * @returns Typeahead instance.
+ */
+export declare function createTypeahead(getWalker: () => TreeWalker | null, getItemValue: (item: HTMLElement) => string, signal: AbortSignal): Typeahead;

package/lumx.css

@@ -5686,6 +5686,38 @@ table {
   text-overflow: ellipsis;
 }
 
+/* ==========================================================================
+   Combobox
+   ========================================================================== */
+.lumx-combobox-popover {
+  overflow-y: auto;
+}
+
+.lumx-combobox-popover:empty, .lumx-combobox-popover:not(:has(.lumx-combobox-option)):not(:has(.lumx-combobox-state)):not(:has(.lumx-combobox-option-skeleton)),
+.lumx-combobox-list:empty,
+.lumx-combobox-list:not(:has(.lumx-combobox-option)):not(:has(.lumx-combobox-state)):not(:has(.lumx-combobox-option-skeleton)) {
+  display: none;
+}
+
+.lumx-combobox-state {
+  text-align: center;
+}
+
+.lumx-combobox-option-skeleton .lumx-skeleton-typography {
+  width: min(65%, 200px);
+}
+.lumx-combobox-option-skeleton:nth-child(3n+1) .lumx-skeleton-typography {
+  width: min(70%, 230px);
+}
+.lumx-combobox-option-skeleton:nth-child(3n+2) .lumx-skeleton-typography {
+  width: min(55%, 170px);
+}
+
+.lumx-combobox-option-more-info__popover {
+  max-width: 256px;
+  padding: 16px;
+}
+
 /* ==========================================================================
    Comment block
    ========================================================================== */
@@ -8785,7 +8817,7 @@ table {
   color: var(--lumx-color-dark-N);
   background-color: transparent;
 }
-.lumx-list-item__link[data-focus-visible-added] {
+.lumx-list-item__link[data-focus-visible-added], .lumx-list-item__link:has([data-focus-visible-added]) {
   outline: 2px solid var(--lumx-color-dark-N);
   outline-offset: -2px;
 }
@@ -8882,14 +8914,14 @@ table {
 
 /* Section
    ========================================================================== */
-.lumx-list-section:not(:first-child):not(.lumx-list-section + .lumx-list-section):not(.lumx-list-divider + .lumx-list-section)::before {
+.lumx-list-section:not([hidden]) ~ .lumx-list-section:not(.lumx-list-section:not([hidden]) + .lumx-list-section):not(.lumx-list-divider + .lumx-list-section)::before {
   content: "";
   display: block;
   height: 1px;
   margin: 8px 0;
   background-color: var(--lumx-color-dark-L5);
 }
-.lumx-list-section:not(:last-child):not(:has(+ .lumx-list-divider))::after {
+.lumx-list-section:not(:last-child):not(:has(+ .lumx-list-divider)):not(:has(+ [hidden]))::after {
   content: "";
   display: block;
   height: 1px;
@@ -10536,7 +10568,7 @@ table {
   color: var(--lumx-color-dark-N);
   background-color: transparent;
 }
-.lumx-side-navigation-item__link[data-focus-visible-added] {
+.lumx-side-navigation-item__link[data-focus-visible-added], .lumx-side-navigation-item__link:has([data-focus-visible-added]) {
   outline: 2px solid var(--lumx-color-dark-N);
   outline-offset: -2px;
 }

package/package.json

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

package/scss/_components_classes.scss

@@ -3,6 +3,7 @@
 @import "./components/button/index";
 @import "./components/checkbox/index";
 @import "./components/chip/index";
+@import "./components/combobox/index";
 @import "./components/comment-block/index";
 @import "./components/date-picker/index";
 @import "./components/dialog/index";
@@ -49,4 +50,4 @@
 @import "./components/toolbar/index";
 @import "./components/tooltip/index";
 @import "./components/uploader/index";
-@import "./components/user-block/index";
+@import "./components/user-block/index";

package/scss/components/combobox/_index.scss

@@ -0,0 +1,44 @@
+/* ==========================================================================
+   Combobox
+   ========================================================================== */
+
+.#{$lumx-base-prefix}-combobox-popover {
+    overflow-y: auto;
+}
+
+// Hide popover and list when there is no option, no state, and no skeleton
+.#{$lumx-base-prefix}-combobox-popover,
+.#{$lumx-base-prefix}-combobox-list {
+    &:empty,
+    &:not(:has(.#{$lumx-base-prefix}-combobox-option)):not(:has(.#{$lumx-base-prefix}-combobox-state)):not(
+        :has(.#{$lumx-base-prefix}-combobox-option-skeleton)
+    ) {
+        display: none;
+    }
+}
+
+.#{$lumx-base-prefix}-combobox-state {
+    text-align: center;
+}
+
+// Skeleton option placeholders — width variation via :nth-child cycling
+.#{$lumx-base-prefix}-combobox-option-skeleton {
+    .#{$lumx-base-prefix}-skeleton-typography {
+        width: min(65%, 200px);
+    }
+
+    &:nth-child(3n + 1) .#{$lumx-base-prefix}-skeleton-typography {
+        width: min(70%, 230px);
+    }
+
+    &:nth-child(3n + 2) .#{$lumx-base-prefix}-skeleton-typography {
+        width: min(55%, 170px);
+    }
+}
+
+.#{$lumx-base-prefix}-combobox-option-more-info {
+    &__popover {
+        max-width: $lumx-size-xxl;
+        padding: $lumx-spacing-unit-big;
+    }
+}

package/scss/components/list/_mixins.scss

@@ -1,4 +1,4 @@
-@use "sass:map";
+@use 'sass:map';
 
 @mixin lumx-list() {
     padding: $lumx-spacing-unit 0;
@@ -12,7 +12,7 @@
     text-decoration: none;
     outline: none;
 
-    @if $size == "huge" {
+    @if $size == 'huge' {
         align-items: flex-start;
         padding-top: $lumx-spacing-unit * 2;
         padding-bottom: $lumx-spacing-unit * 2;
@@ -30,23 +30,24 @@
     width: 100%;
     cursor: pointer;
     text-align: left;
-    @include lumx-state(lumx-base-const("state", "DEFAULT"), lumx-base-const("emphasis", "LOW"), "dark");
+    @include lumx-state(lumx-base-const('state', 'DEFAULT'), lumx-base-const('emphasis', 'LOW'), 'dark');
 
-    &[data-focus-visible-added] {
-        outline: 2px solid lumx-color-variant("dark", "N");
+    &[data-focus-visible-added],
+    &:has([data-focus-visible-added]) {
+        outline: 2px solid lumx-color-variant('dark', 'N');
         outline-offset: -2px;
     }
 
-    &:not([aria-disabled="true"]) {
+    &:not([aria-disabled='true']) {
         &:hover,
         &[data-lumx-hover],
         &[data-focus-visible-added] {
-            @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "dark");
+            @include lumx-state(lumx-base-const('state', 'HOVER'), lumx-base-const('emphasis', 'LOW'), 'dark');
         }
 
         &:active,
-        &[data-lumx-active], {
-            @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "dark");
+        &[data-lumx-active] {
+            @include lumx-state(lumx-base-const('state', 'ACTIVE'), lumx-base-const('emphasis', 'LOW'), 'dark');
         }
     }
 }
@@ -54,25 +55,33 @@
 @mixin lumx-list-item-highlighted() {
     cursor: pointer;
 
-    @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "dark");
+    @include lumx-state(lumx-base-const('state', 'HOVER'), lumx-base-const('emphasis', 'LOW'), 'dark');
 
     &:active {
-        @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "dark");
+        @include lumx-state(lumx-base-const('state', 'ACTIVE'), lumx-base-const('emphasis', 'LOW'), 'dark');
     }
 }
 
 @mixin lumx-list-item-selected($component: null) {
-    @include lumx-state-as-selected(lumx-base-const("state", "DEFAULT"), lumx-base-const("theme", "LIGHT"), $component);
+    @include lumx-state-as-selected(lumx-base-const('state', 'DEFAULT'), lumx-base-const('theme', 'LIGHT'), $component);
 
     &:hover,
     &[data-lumx-hover],
     &[data-focus-visible-added] {
-        @include lumx-state-as-selected(lumx-base-const("state", "HOVER"), lumx-base-const("theme", "LIGHT"), $component);
+        @include lumx-state-as-selected(
+            lumx-base-const('state', 'HOVER'),
+            lumx-base-const('theme', 'LIGHT'),
+            $component
+        );
     }
 
     &:active,
-    &[data-lumx-active], {
-        @include lumx-state-as-selected(lumx-base-const("state", "ACTIVE"), lumx-base-const("theme", "LIGHT"), $component);
+    &[data-lumx-active] {
+        @include lumx-state-as-selected(
+            lumx-base-const('state', 'ACTIVE'),
+            lumx-base-const('theme', 'LIGHT'),
+            $component
+        );
     }
 }
 
@@ -85,17 +94,17 @@
 @mixin lumx-list-item-before($size) {
     @include lumx-list-item-edge($size);
 
-    @if $size == "tiny" {
-        width: map.get($lumx-sizes, lumx-base-const("size", "S"));
+    @if $size == 'tiny' {
+        width: map.get($lumx-sizes, lumx-base-const('size', 'S'));
         margin-right: $lumx-spacing-unit;
     } @else {
-        width: map.get($lumx-sizes, lumx-base-const("size", "M"));
+        width: map.get($lumx-sizes, lumx-base-const('size', 'M'));
         margin-right: $lumx-spacing-unit * 2;
     }
 }
 
 @mixin lumx-list-item-content() {
-    @include lumx-typography("body1");
+    @include lumx-typography('body1');
 
     flex: 1 1 auto;
 }
@@ -103,7 +112,7 @@
 @mixin lumx-list-item-after($size) {
     @include lumx-list-item-edge($size);
 
-    @if $size == "tiny" {
+    @if $size == 'tiny' {
         margin-left: $lumx-spacing-unit;
     } @else {
         margin-left: $lumx-spacing-unit * 2;
@@ -111,16 +120,16 @@
 }
 
 @mixin lumx-list-subheader() {
-    @include lumx-typography("overline");
+    @include lumx-typography('overline');
 
     display: flex;
     align-items: center;
-    height: map.get($lumx-list-item-sizes, "tiny");
-    color: lumx-color-variant("dark", "L2");
+    height: map.get($lumx-list-item-sizes, 'tiny');
+    color: lumx-color-variant('dark', 'L2');
 }
 
 @mixin lumx-list-subheader-icon {
-    @include lumx-icon-size(lumx-base-const("size", "XXS"));
+    @include lumx-icon-size(lumx-base-const('size', 'XXS'));
 
     margin-right: $lumx-spacing-unit;
 }
@@ -128,15 +137,19 @@
 @mixin lumx-list-divider() {
     height: 1px;
     margin: $lumx-spacing-unit 0;
-    background-color: lumx-color-variant("dark", $lumx-divider-color-variant);
+    background-color: lumx-color-variant('dark', $lumx-divider-color-variant);
 }
 
 @mixin lumx-list-auto-section-divider() {
     $divider: '.#{$lumx-base-prefix}-list-divider';
-
-    // Insert a divider before each section NOT directly following another section or an explicit divider.
-    // Avoids double dividers when two sections are adjacent or when a ListDivider separates them.
-    &:not(:first-child):not(& + &):not(#{$divider} + &) {
+    $section: &;
+
+    // Insert a divider before each section that:
+    // 1. Is not directly following another visible section (avoids double dividers)
+    // 2. Is not directly following an explicit divider
+    // 3. Has at least one preceding visible section (uses `~` general sibling combinator
+    //    so hidden-first-sections don't get a spurious top divider)
+    #{$section}:not([hidden]) ~ &:not(#{$section}:not([hidden]) + &):not(#{$divider} + &) {
         &::before {
             content: '';
             display: block;
@@ -145,8 +158,9 @@
     }
 
     // Insert a divider after each section that is not the last child
-    // and not directly followed by an explicit divider.
-    &:not(:last-child):not(:has(+ #{$divider})) {
+    // and not directly followed by an explicit divider or a hidden element
+    // (when followed by a hidden element, the next visible section's ::before handles the divider).
+    &:not(:last-child):not(:has(+ #{$divider})):not(:has(+ [hidden])) {
         &::after {
             content: '';
             display: block;
@@ -156,10 +170,10 @@
 }
 
 @mixin lumx-list-item-padding($size) {
-    @if $size == "big" {
+    @if $size == 'big' {
         padding-right: $lumx-spacing-unit * 2;
         padding-left: $lumx-spacing-unit * 2;
-    } @else if $size == "huge" {
+    } @else if $size == 'huge' {
         padding-right: $lumx-spacing-unit * 3;
         padding-left: $lumx-spacing-unit * 3;
     }

package/stories/types.d.ts

@@ -18,6 +18,8 @@ interface StoryDecorators {
     withValueOnChange?: (options?: {
         valueProp?: string;
         valueTransform?: (v: any) => any;
+        onChangeProp?: string;
+        valueExtract?: (v: any) => any;
     }) => Decorator;
     /** Decorator forcing a minimum screen size for Chromatic snapshots */
     withChromaticForceScreenSize?: () => Decorator;