@aquera/nile-elements 1.7.2 → 1.7.4

package/dist/src/nile-combobox/nile-combobox.js

@@ -30,6 +30,7 @@ import { ComboboxSelectionManager } from './selection-manager.js';
 import { ComboboxSearchManager } from './search-manager.js';
 import { ComboboxRenderer } from './renderer.js';
 import { ComboboxPortalManager } from './portal-manager.js';
+import { hasGroups, flattenRows, filterRows, getOptionRows } from './group-utils.js';
 import { VisibilityManager } from '../utilities/visibility-manager.js';
 /**
  * @summary A data-driven combobox with virtualized options, inline search, multi-select tags,
@@ -120,6 +121,14 @@ let NileCombobox = class NileCombobox extends NileElement {
         this.selectedOptions = [];
         /** The items displayed after filtering. Renderer reads from this. */
         this.filteredData = [];
+        /**
+         * Mixed (header + option) row list, only populated when `data` contains
+         * group entries (`type: 'group'`). When non-empty, the listbox renders from
+         * this instead of `filteredData`. `filteredData` stays in sync as the
+         * option-only projection so existing select-all / strict-match / etc. logic
+         * keeps working unchanged.
+         */
+        this.filteredRows = [];
         /** The complete unfiltered dataset (preserved for re-filtering). */
         this.originalData = [];
         this.showNoResults = false;
@@ -128,6 +137,12 @@ let NileCombobox = class NileCombobox extends NileElement {
         this.showSelectedOnly = false;
         this.selectAllChecked = false;
         this.selectAllIndeterminate = false;
+        /**
+         * Index into `filteredRows` of the group header that should be pinned at
+         * the top of the (virtualized) listbox right now. -1 means none.
+         * Recomputed on scroll.
+         */
+        this.stickyHeaderIndex = -1;
         // ── Public properties ──
         this.name = '';
         this.data = [];
@@ -169,6 +184,13 @@ let NileCombobox = class NileCombobox extends NileElement {
          * non-disabled options (respects the active search filter).
          */
         this.selectAllEnabled = false;
+        /**
+         * When true (default), data-driven group headers stick to the top of the
+         * listbox while scrolling through that group's options (Atlassian-style).
+         * Works in both plain and virtualized rendering modes. Set to false for
+         * inline-only headers that scroll away with their options.
+         */
+        this.stickyGroupHeader = true;
         this.portal = false;
         this.hoist = false;
         this.placement = 'bottom';
@@ -201,6 +223,7 @@ let NileCombobox = class NileCombobox extends NileElement {
         this.gridRows = 0;
         /** Width of each column in horizontal grid mode (px). */
         this.gridColumnWidth = 160;
+        this.lastVirtualizerGrouped = false;
     }
     // ── Accessors ──
     get validity() {
@@ -261,6 +284,51 @@ let NileCombobox = class NileCombobox extends NileElement {
     get isHorizontalGrid() {
         return this.gridRows > 0 && this.gridColumns <= 1;
     }
+    /** True when the source data contains at least one group entry. */
+    get hasGroupedData() {
+        const base = this.originalData.length > 0 ? this.originalData : this.data;
+        return hasGroups(base);
+    }
+    /**
+     * Walk filteredRows and find the index of the deepest group header whose
+     * virtual position is at or above `scrollTop`. That's the header that
+     * should be pinned at the top of the listbox right now.
+     */
+    updateStickyHeader(scrollTop) {
+        if (!this.stickyGroupHeader || !this.hasGroupedData) {
+            if (this.stickyHeaderIndex !== -1)
+                this.stickyHeaderIndex = -1;
+            return;
+        }
+        let offset = 0;
+        let stuck = -1;
+        for (let i = 0; i < this.filteredRows.length; i++) {
+            const row = this.filteredRows[i];
+            const size = row.kind === 'header' ? 32 : 38;
+            if (offset > scrollTop)
+                break;
+            if (row.kind === 'header')
+                stuck = i;
+            offset += size;
+        }
+        if (stuck !== this.stickyHeaderIndex)
+            this.stickyHeaderIndex = stuck;
+    }
+    /** Recursively keep only options whose value is in `selectedSet`; drop empty groups. */
+    pruneTreeBySelection(items, selectedSet) {
+        const out = [];
+        for (const item of items) {
+            if (item && typeof item === 'object' && item.type === 'group' && Array.isArray(item.options)) {
+                const kept = this.pruneTreeBySelection(item.options, selectedSet);
+                if (kept.length > 0)
+                    out.push({ ...item, options: kept });
+            }
+            else if (selectedSet.has(String(this.getItemValue(item)))) {
+                out.push(item);
+            }
+        }
+        return out;
+    }
     get hasActiveFilter() {
         return !!this.searchValue || this.showSelectedOnly;
     }
@@ -277,6 +345,9 @@ let NileCombobox = class NileCombobox extends NileElement {
         if (this.gridColumns > 1) {
             return Math.ceil(this.filteredData.length / this.gridColumns);
         }
+        if (this.hasGroupedData) {
+            return this.filteredRows.length;
+        }
         return this.filteredData.length;
     }
     get virtualColumnCount() {
@@ -298,12 +369,20 @@ let NileCombobox = class NileCombobox extends NileElement {
         else {
             const virtualizer = this.virtualizerCtrl.getVirtualizer();
             const count = this.virtualRowCount;
-            if (virtualizer.options.count !== count) {
+            const grouped = this.hasGroupedData;
+            const countChanged = virtualizer.options.count !== count;
+            const modeChanged = this.lastVirtualizerGrouped !== grouped;
+            if (countChanged || modeChanged) {
+                const estimateSize = grouped
+                    ? (index) => (this.filteredRows[index]?.kind === 'header' ? 32 : 38)
+                    : () => 38;
                 virtualizer.setOptions({
                     ...virtualizer.options,
                     count,
+                    estimateSize,
                 });
                 virtualizer.measure();
+                this.lastVirtualizerGrouped = grouped;
             }
         }
     }
@@ -334,7 +413,10 @@ let NileCombobox = class NileCombobox extends NileElement {
     }
     // ── Selection ──
     syncSelection() {
-        const items = this.originalData.length > 0 ? this.originalData : this.data;
+        const baseData = this.originalData.length > 0 ? this.originalData : this.data;
+        const items = this.hasGroupedData
+            ? getOptionRows(flattenRows(baseData)).map(r => r.item)
+            : baseData;
         this.selectedOptions = ComboboxSelectionManager.createOptionsFromValues(this.value, items, this.getDisplayText.bind(this), this.renderItemConfig?.getValue);
         if (!this.multiple) {
             const label = this.selectedOptions[0]?.getTextLabel() ?? '';
@@ -649,15 +731,34 @@ let NileCombobox = class NileCombobox extends NileElement {
     }
     filterOptions(search, preserveScroll = false) {
         const baseData = this.originalData.length > 0 ? this.originalData : this.data;
-        let source = baseData;
-        if (this.showSelectedOnly) {
-            const selectedValues = Array.isArray(this.value) ? this.value : [this.value];
-            const selectedSet = new Set(selectedValues.map(v => String(v)));
-            source = baseData.filter((item) => selectedSet.has(String(this.getItemValue(item))));
+        if (this.hasGroupedData) {
+            // Grouped path: filter the tree, derive options-only projection.
+            let tree = baseData;
+            if (this.showSelectedOnly) {
+                const selectedValues = Array.isArray(this.value) ? this.value : [this.value];
+                const selectedSet = new Set(selectedValues.map(v => String(v)));
+                tree = this.pruneTreeBySelection(baseData, selectedSet);
+            }
+            const { rows } = filterRows(tree, search, this.getSearchText.bind(this));
+            this.filteredRows = rows;
+            this.filteredData = getOptionRows(rows).map(r => r.item);
+            this.showNoResults = this.filteredData.length === 0;
+            // Recompute sticky header at current scroll (defaults to top on filter).
+            const st = this.scrollElementRef.value?.scrollTop ?? 0;
+            this.updateStickyHeader(st);
+        }
+        else {
+            let source = baseData;
+            if (this.showSelectedOnly) {
+                const selectedValues = Array.isArray(this.value) ? this.value : [this.value];
+                const selectedSet = new Set(selectedValues.map(v => String(v)));
+                source = baseData.filter((item) => selectedSet.has(String(this.getItemValue(item))));
+            }
+            const { filteredItems, showNoResults } = this.searchManager.filter(search, source, this.getSearchText.bind(this));
+            this.filteredData = filteredItems;
+            this.filteredRows = [];
+            this.showNoResults = showNoResults;
         }
-        const { filteredItems, showNoResults } = this.searchManager.filter(search, source, this.getSearchText.bind(this));
-        this.filteredData = filteredItems;
-        this.showNoResults = showNoResults;
         this.portalManager.resetMeasuredHeight();
         if (!preserveScroll) {
             this.resetScrollPosition();
@@ -684,7 +785,10 @@ let NileCombobox = class NileCombobox extends NileElement {
             return;
         if (!this.multiple) {
             if (this.strict) {
-                const allItems = this.originalData.length > 0 ? this.originalData : this.data;
+                const baseData = this.originalData.length > 0 ? this.originalData : this.data;
+                const allItems = this.hasGroupedData
+                    ? getOptionRows(flattenRows(baseData)).map(r => r.item)
+                    : baseData;
                 const match = allItems.find((item) => this.getDisplayText(item).toLowerCase() === this.searchValue.toLowerCase());
                 if (match) {
                     const val = this.getItemValue(match);
@@ -812,26 +916,14 @@ let NileCombobox = class NileCombobox extends NileElement {
         if (this.selectedOptions.length === 0)
             return;
         this.showSelectedOnly = !this.showSelectedOnly;
-        if (this.showSelectedOnly) {
+        if (this.showSelectedOnly)
             this.searchValue = '';
-            const selectedValues = Array.isArray(this.value) ? this.value : [this.value];
-            this.filteredData = this.originalData.filter((item) => {
-                const iv = this.getItemValue(item);
-                return selectedValues.some(val => String(val) === String(iv));
-            });
-        }
-        else {
-            this.filteredData = [...this.originalData];
-        }
-        this.portalManager.resetMeasuredHeight();
-        this.resetScrollPosition();
-        this.updateSelectAllState();
-        this.requestUpdate();
+        this.filterOptions(this.searchValue);
     }
     clearAll() {
         this.showSelectedOnly = false;
         this.value = this.multiple ? [] : '';
-        this.filteredData = [...this.originalData];
+        this.filterOptions('');
         this.syncSelection();
         this.emit('nile-change', { value: this.value, name: this.name });
         this.emit('nile-clear', { value: this.value, name: this.name });
@@ -839,9 +931,10 @@ let NileCombobox = class NileCombobox extends NileElement {
     }
     // ── Scroll ──
     onScroll(e) {
+        const target = e.target;
+        this.updateStickyHeader(target.scrollTop);
         if (this.showSelectedOnly)
             return;
-        const target = e.target;
         this.emit('nile-scroll', { scrollTop: target.scrollTop, scrollLeft: target.scrollLeft, name: this.name });
         if (!this.scrolling) {
             this.scrolling = true;
@@ -893,8 +986,14 @@ let NileCombobox = class NileCombobox extends NileElement {
         if (this.originalData.length === 0 && this.data.length > 0) {
             this.originalData = [...this.data];
         }
-        this.filteredData = [...(this.originalData.length > 0 ? this.originalData : this.data)];
-        this.showNoResults = this.filteredData.length === 0;
+        if (this.hasGroupedData) {
+            this.filterOptions(this.searchValue);
+        }
+        else {
+            this.filteredData = [...(this.originalData.length > 0 ? this.originalData : this.data)];
+            this.filteredRows = [];
+            this.showNoResults = this.filteredData.length === 0;
+        }
         await stopAnimations(this);
         if (this.popup?.popup) {
             this.popup.popup.style.visibility = 'hidden';
@@ -944,7 +1043,13 @@ let NileCombobox = class NileCombobox extends NileElement {
         if (this.data.length > 0 && !this.showSelectedOnly) {
             this.originalData = [...this.data];
         }
-        this.filteredData = [...this.data];
+        if (this.hasGroupedData) {
+            this.filterOptions(this.searchValue);
+        }
+        else {
+            this.filteredData = [...this.data];
+            this.filteredRows = [];
+        }
         this.syncSelection();
         this.updateSelectAllState();
         if (!this.optionsLoading && !this.loading && this.data.length === 0) {
@@ -1189,6 +1294,21 @@ let NileCombobox = class NileCombobox extends NileElement {
       </button>
     `;
     }
+    renderStickyHeaderOverlay(grouped, useVirtual) {
+        if (!this.stickyGroupHeader || !grouped || !useVirtual)
+            return html ``;
+        const idx = this.stickyHeaderIndex;
+        if (idx < 0 || idx >= this.filteredRows.length)
+            return html ``;
+        const row = this.filteredRows[idx];
+        if (row.kind !== 'header')
+            return html ``;
+        return html `
+      <div class="combobox__group-sticky-overlay">
+        ${ComboboxRenderer.renderGroupHeader(row)}
+      </div>
+    `;
+    }
     renderListbox() {
         const showAddOption = this.allowCustomValue
             && this.searchValue.trim()
@@ -1204,7 +1324,10 @@ let NileCombobox = class NileCombobox extends NileElement {
             return this.renderHorizontalListbox(!!showAddOption);
         }
         const isGrid = this.gridColumns > 1 || this.isBidirectionalGrid;
-        const useVirtual = ComboboxRenderer.shouldUseVirtualizer(this.filteredData, this.gridColumns);
+        const grouped = this.hasGroupedData && !isGrid;
+        const useVirtual = grouped
+            ? this.filteredRows.length >= 5
+            : ComboboxRenderer.shouldUseVirtualizer(this.filteredData, this.gridColumns);
         const virtualizer = this.virtualizerCtrl.getVirtualizer();
         const virtualItems = (useVirtual || isGrid) ? virtualizer.getVirtualItems() : [];
         const totalSize = (useVirtual || isGrid) ? virtualizer.getTotalSize() : 0;
@@ -1225,13 +1348,18 @@ let NileCombobox = class NileCombobox extends NileElement {
       >
         ${this.renderLoader()}
         ${this.renderSelectAll()}
+        ${this.renderStickyHeaderOverlay(grouped, useVirtual)}
         ${this.showNoResults && !this.optionsLoading && !this.loading
             ? this.renderEmptyState()
             : isGrid
                 ? ComboboxRenderer.renderVirtualizedGrid(virtualItems, totalSize, this.filteredData, this.value, this.multiple, this.gridColumns, this.getDisplayText.bind(this), this.getItemValue.bind(this), this.optionsLoading || this.loading, this.allowHtmlLabel, this.renderItemConfig?.getDescription ? this.getItemDescription.bind(this) : undefined, this.renderItemConfig?.getPrefix ? this.getItemPrefix.bind(this) : undefined, this.renderItemConfig?.getSuffix ? this.getItemSuffix.bind(this) : undefined, this.isBidirectionalGrid ? this.gridColumnWidth : undefined)
-                : useVirtual
-                    ? ComboboxRenderer.renderVirtualizedOptions(virtualItems, totalSize, this.filteredData, this.value, this.multiple, this.getDisplayText.bind(this), this.getItemValue.bind(this), this.optionsLoading || this.loading, this.allowHtmlLabel, virtualizer.measureElement, this.renderItemConfig?.getDescription ? this.getItemDescription.bind(this) : undefined, this.renderItemConfig?.getPrefix ? this.getItemPrefix.bind(this) : undefined, this.renderItemConfig?.getSuffix ? this.getItemSuffix.bind(this) : undefined)
-                    : ComboboxRenderer.renderPlainOptions(this.filteredData, this.value, this.multiple, this.getDisplayText.bind(this), this.getItemValue.bind(this), this.showNoResults, this.noResultsMessage, this.optionsLoading || this.loading, this.onScroll.bind(this), this.allowHtmlLabel, this.renderItemConfig?.getDescription ? this.getItemDescription.bind(this) : undefined, this.renderItemConfig?.getPrefix ? this.getItemPrefix.bind(this) : undefined, this.renderItemConfig?.getSuffix ? this.getItemSuffix.bind(this) : undefined, undefined, this.hasActiveFilter ? this.noResultsSubtitle : undefined)}
+                : grouped
+                    ? (useVirtual
+                        ? ComboboxRenderer.renderRowsVirtualized(virtualItems, totalSize, this.filteredRows, this.value, this.multiple, this.getDisplayText.bind(this), this.getItemValue.bind(this), this.optionsLoading || this.loading, this.allowHtmlLabel, this.renderItemConfig?.getDescription ? this.getItemDescription.bind(this) : undefined, this.renderItemConfig?.getPrefix ? this.getItemPrefix.bind(this) : undefined, this.renderItemConfig?.getSuffix ? this.getItemSuffix.bind(this) : undefined)
+                        : ComboboxRenderer.renderRowsPlain(this.filteredRows, this.value, this.multiple, this.getDisplayText.bind(this), this.getItemValue.bind(this), this.showNoResults, this.noResultsMessage, this.optionsLoading || this.loading, this.onScroll.bind(this), this.allowHtmlLabel, this.renderItemConfig?.getDescription ? this.getItemDescription.bind(this) : undefined, this.renderItemConfig?.getPrefix ? this.getItemPrefix.bind(this) : undefined, this.renderItemConfig?.getSuffix ? this.getItemSuffix.bind(this) : undefined, undefined, this.hasActiveFilter ? this.noResultsSubtitle : undefined))
+                    : useVirtual
+                        ? ComboboxRenderer.renderVirtualizedOptions(virtualItems, totalSize, this.filteredData, this.value, this.multiple, this.getDisplayText.bind(this), this.getItemValue.bind(this), this.optionsLoading || this.loading, this.allowHtmlLabel, virtualizer.measureElement, this.renderItemConfig?.getDescription ? this.getItemDescription.bind(this) : undefined, this.renderItemConfig?.getPrefix ? this.getItemPrefix.bind(this) : undefined, this.renderItemConfig?.getSuffix ? this.getItemSuffix.bind(this) : undefined)
+                        : ComboboxRenderer.renderPlainOptions(this.filteredData, this.value, this.multiple, this.getDisplayText.bind(this), this.getItemValue.bind(this), this.showNoResults, this.noResultsMessage, this.optionsLoading || this.loading, this.onScroll.bind(this), this.allowHtmlLabel, this.renderItemConfig?.getDescription ? this.getItemDescription.bind(this) : undefined, this.renderItemConfig?.getPrefix ? this.getItemPrefix.bind(this) : undefined, this.renderItemConfig?.getSuffix ? this.getItemSuffix.bind(this) : undefined, undefined, this.hasActiveFilter ? this.noResultsSubtitle : undefined)}
         ${showAddOption ? html `
           <div @mouseup=${(e) => { e.stopPropagation(); this.addCustomValue(this.searchValue.trim()); }}>
             ${ComboboxRenderer.renderAddCustomOption(this.searchValue.trim(), this.multiple)}
@@ -1375,6 +1503,9 @@ __decorate([
 __decorate([
     state()
 ], NileCombobox.prototype, "filteredData", void 0);
+__decorate([
+    state()
+], NileCombobox.prototype, "filteredRows", void 0);
 __decorate([
     state()
 ], NileCombobox.prototype, "originalData", void 0);
@@ -1396,6 +1527,9 @@ __decorate([
 __decorate([
     state()
 ], NileCombobox.prototype, "selectAllIndeterminate", void 0);
+__decorate([
+    state()
+], NileCombobox.prototype, "stickyHeaderIndex", void 0);
 __decorate([
     property()
 ], NileCombobox.prototype, "name", void 0);
@@ -1470,6 +1604,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'select-all-enabled' })
 ], NileCombobox.prototype, "selectAllEnabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'sticky-group-header' })
+], NileCombobox.prototype, "stickyGroupHeader", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NileCombobox.prototype, "portal", void 0);