@ixfx/components 0.11.7 → 0.11.9

package/dist/detail-list.js

@@ -4,16 +4,20 @@ import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js"
 import "./icon-1gpwtPx8.js";
 import { t as DataController } from "./data-controller-DOlmqNKb.js";
 import { c as createElementListSearchAdapter, i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES, u as keyForElement } from "./incr-search-D91M4Ozq.js";
+import { a as toGroupKey, r as partitionByGroup } from "./grouping-RYPnHkrS.js";
 import { t as ListNativeDragController } from "./list-native-drag-controller-B9xO0XWn.js";
-import { r as ListDragSelectController, t as ListSelectionController } from "./list-selection-controller-SA4piSBi.js";
+import { r as ListDragSelectController, t as ListSelectionController } from "./list-selection-controller-BeE70lbB.js";
 import { n as animateListItemIn, r as animateListItemOut } from "./list-item-animation-BUoEKi5s.js";
 import { t as scrollFadeStyles } from "./scroll-fade-BrNUIYnm.js";
 import { n as appearanceColor, t as appearanceAbsent } from "./item-appearance-BjcMyauw.js";
+import "./list-group-header.js";
 import { LitElement, css, html, nothing, render } from "lit";
-import { property, query } from "lit/decorators.js";
+import { property, query, state } from "lit/decorators.js";
 import { createCommandRegistry } from "@clinth/ui-commands";
 //#region src/detail-list/detail-list.ts
 const ITEM_SELECTOR = `:scope > li`;
+const GROUP_HEADER_ATTR = `data-ixfx-group-header`;
+const GROUP_COLLAPSED_ATTR = `data-group-collapsed`;
 const SEARCH_HIGHLIGHT_KEY = `detail-list-search`;
 const NAV_KEYS = /* @__PURE__ */ new Set([
 	`ArrowDown`,
@@ -71,14 +75,26 @@ let DetailListElement = class DetailListElement extends LitElement {
 		this.keyProperty = ``;
 		this.itemWrap = `stop`;
 		this.itemsDraggable = false;
+		this.groupBy = null;
+		this.crossGroupSelection = false;
+		this._collapsedGroups = /* @__PURE__ */ new Set();
 		this.#itemData = /* @__PURE__ */ new WeakMap();
 		this.#grid = [];
 		this.#positions = /* @__PURE__ */ new Map();
+		this.#tops = /* @__PURE__ */ new Map();
 		this.#geometryScheduled = false;
 		this.#sortRaf = 0;
 		this.#viewportScrollRaf = 0;
 		this.#animatedItems = /* @__PURE__ */ new WeakSet();
 		this.#builtFromProvider = [];
+		this.#groupIndex = /* @__PURE__ */ new Map();
+		this.#groupList = [];
+		this.#headerEls = /* @__PURE__ */ new Map();
+		this.#seq = /* @__PURE__ */ new WeakMap();
+		this.#seqNext = 0;
+		this.#wasGrouped = false;
+		this.#groupsScheduled = false;
+		this.#groupByChanged = false;
 		this.#providerBuilt = 0;
 		this.#data = new DataController(this);
 		this.selection = new ListSelectionController({
@@ -89,6 +105,12 @@ let DetailListElement = class DetailListElement extends LitElement {
 				interactionMode: this.interactionMode
 			}),
 			getKey: keyForElement,
+			getGroupKey: (el) => this.#groupIndex.get(el) ?? null,
+			crossGroupSelection: () => this.crossGroupSelection,
+			getFallbackGroupKey: () => {
+				const t = this.tickled.tickledId;
+				return t ? this.#groupIndex.get(t) ?? null : null;
+			},
 			onChange: (selected, previous) => {
 				this._syncItemStates();
 				this._dispatch(`list-select`, {
@@ -170,6 +192,7 @@ let DetailListElement = class DetailListElement extends LitElement {
 				if (this._listEl) this._listEl.scrollLeft += dx;
 			},
 			shouldStart: (event) => {
+				if (this.#findGroupHeader(event.composedPath())) return false;
 				this.#blankItemPressPending = this.itemsDraggable && this.#isBlankItemPress(event);
 				return !this.itemsDraggable || this.#blankItemPressPending;
 			}
@@ -261,7 +284,13 @@ let DetailListElement = class DetailListElement extends LitElement {
 		};
 		this._onClick = (e) => {
 			if (this.#dragSelect.isDragging || this.#nativeDrag.isDragging || this.#postDragSuppressTimer !== 0) return;
-			const item = this._findListItem(e.composedPath());
+			const path = e.composedPath();
+			const header = this.#findGroupHeader(path);
+			if (header) {
+				this.toggleGroup(header.dataset.groupKey ?? ``);
+				return;
+			}
+			const item = this._findListItem(path);
 			if (!item) return;
 			this.focus();
 			this._dispatch(`list-item-click`, { item });
@@ -280,6 +309,8 @@ let DetailListElement = class DetailListElement extends LitElement {
 	#itemData;
 	#grid;
 	#positions;
+	/** Viewport-relative `top` per item at the last geometry pass — lines rows up across columns. */
+	#tops;
 	#geometryScheduled;
 	#sortRaf;
 	#viewportScrollRaf;
@@ -291,6 +322,17 @@ let DetailListElement = class DetailListElement extends LitElement {
 	/** Items that have already played (or been skipped for) their enter animation. */
 	#animatedItems;
 	#builtFromProvider;
+	/** Element → group key, for the selection controller. Empty while ungrouped. */
+	#groupIndex;
+	#groupList;
+	#headerEls;
+	/** Insertion sequence per item, so regrouping starts from the original order. */
+	#seq;
+	#seqNext;
+	#wasGrouped;
+	#groupsScheduled;
+	#groupByChanged;
+	#groupObserver;
 	#providerBuilt;
 	#data;
 	#nativeDragging;
@@ -407,6 +449,7 @@ let DetailListElement = class DetailListElement extends LitElement {
 			this.#processChildren();
 			this.#animateChildMutations(records);
 			this.#scheduleGeometry();
+			this.#scheduleGroups();
 		});
 		this.#mutationObserver.observe(this, {
 			childList: true,
@@ -416,6 +459,7 @@ let DetailListElement = class DetailListElement extends LitElement {
 		for (const el of this.querySelectorAll(ITEM_SELECTOR)) this.#animatedItems.add(el);
 		this.#searchRegistry ??= createCommandRegistry();
 		this.#syncSearchCommands();
+		this.#scheduleGroups();
 	}
 	/**
 	* Collapse-in items appended to the light DOM (however they got there). A bulk
@@ -457,6 +501,8 @@ let DetailListElement = class DetailListElement extends LitElement {
 		this.#resizeObserver = void 0;
 		this.#mutationObserver?.disconnect();
 		this.#mutationObserver = void 0;
+		this.#groupObserver?.disconnect();
+		this.#groupObserver = void 0;
 		this.#unregisterSearchCommands?.();
 		this.#unregisterSearchCommands = void 0;
 		this.#searchRegistry = void 0;
@@ -471,8 +517,22 @@ let DetailListElement = class DetailListElement extends LitElement {
 		this.#recomputeGeometry();
 		this._syncNativeDraggable();
 	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		if (changed.has(`groupBy`) && this.hasUpdated) {
+			if (this._collapsedGroups.size > 0) this._collapsedGroups = /* @__PURE__ */ new Set();
+			this.#groupByChanged = true;
+		}
+	}
 	updated(changed) {
 		super.updated(changed);
+		if (changed.has(`groupBy`) || changed.has(`groupLabel`) || changed.has(`_collapsedGroups`)) {
+			this.#scheduleGroups();
+			if (this.#groupByChanged) {
+				this.#groupByChanged = false;
+				this._dispatch(`list-group-change`, { groupBy: this.groupBy });
+			}
+		}
 		if (changed.has(`searchModes`)) this.#syncSearchCommands();
 		if (changed.has(`provider`)) {
 			this.#builtFromProvider = [];
@@ -489,6 +549,7 @@ let DetailListElement = class DetailListElement extends LitElement {
 		if (changed.has(`filterPredicate`)) {
 			this.#applyFilterPredicate();
 			this.#scheduleGeometry();
+			this.#scheduleGroups();
 		}
 		if (changed.has(`interactionMode`)) {
 			this.selection.clearAnchor();
@@ -528,6 +589,7 @@ let DetailListElement = class DetailListElement extends LitElement {
 		this.#ensureIcon(el);
 		if (this.sort !== `none`) this.#applySort();
 		if (this.interactionMode === `checked`) this._syncCheckboxes();
+		this.#scheduleGroups();
 	}
 	/**
 	* Collapse + fade `item` out, then detach it; the rows after it slide up to
@@ -537,6 +599,7 @@ let DetailListElement = class DetailListElement extends LitElement {
 		this.selection.deselect(item);
 		return animateListItemOut(item).then(() => {
 			item.remove();
+			this.#scheduleGroups();
 			if (this.interactionMode === `checked`) this._syncCheckboxes();
 			this.#recomputeGeometry();
 		});
@@ -547,6 +610,8 @@ let DetailListElement = class DetailListElement extends LitElement {
 	}
 	clearItems() {
 		this.replaceChildren();
+		this.#headerEls.clear();
+		this.#scheduleGroups();
 		this.selection.reset();
 		this.#builtFromProvider = [];
 		this.#providerBuilt = 0;
@@ -564,6 +629,7 @@ let DetailListElement = class DetailListElement extends LitElement {
 		}
 		if (this.sort !== `none`) this.#applySort();
 		if (this.interactionMode === `checked`) this._syncCheckboxes();
+		this.#scheduleGroups();
 	}
 	/**
 	* Get the source object behind an `<li>` built from an `items` array or
@@ -683,6 +749,7 @@ let DetailListElement = class DetailListElement extends LitElement {
 		if (this.interactionMode === `checked`) this._syncCheckboxes();
 		this._syncItemStates();
 		this.#scheduleGeometry();
+		this.#scheduleGroups();
 	}
 	#createItemEl(item, index) {
 		const li = document.createElement(`li`);
@@ -734,6 +801,7 @@ let DetailListElement = class DetailListElement extends LitElement {
 			if (this.interactionMode === `checked`) this._syncCheckboxes();
 			this._syncItemStates();
 			this.#scheduleGeometry();
+			this.#scheduleGroups();
 		} else {
 			this.#providerBuilt = 0;
 			this.#rebuildFromObjects(items);
@@ -752,6 +820,16 @@ let DetailListElement = class DetailListElement extends LitElement {
 		if (this.sort === `none`) return;
 		const rows = [...this.querySelectorAll(ITEM_SELECTOR)];
 		if (rows.length < 2) return;
+		if (this.#groupingActive()) {
+			this.#scheduleGroups();
+			return;
+		}
+		for (const el of this.#sortRows(rows)) this.appendChild(el);
+		this.#scheduleGeometry();
+		this.#scheduleGroups();
+	}
+	/** Stable sort of `rows` by the current `sort` / `sortBy` / `sortComparator`. */
+	#sortRows(rows) {
 		const dir = this.sort === `descending` ? -1 : 1;
 		const meta = (el) => ({
 			element: el,
@@ -781,9 +859,147 @@ let DetailListElement = class DetailListElement extends LitElement {
 			i
 		}));
 		indexed.sort((a, b) => cmp(a.el, b.el) * dir || a.i - b.i);
-		for (const { el } of indexed) this.appendChild(el);
+		return indexed.map(({ el }) => el);
+	}
+	#groupingActive() {
+		return this.groupBy !== null && this.groupBy !== void 0 && this.groupBy !== ``;
+	}
+	/** Coalesce regrouping to one pass per microtask (streaming batches, search keystrokes). */
+	#scheduleGroups() {
+		if (this.#groupsScheduled || !this.#groupingActive() && !this.#wasGrouped) return;
+		this.#groupsScheduled = true;
+		queueMicrotask(() => {
+			this.#groupsScheduled = false;
+			this.#syncGroups();
+		});
+	}
+	#groupValue(el, name) {
+		return this.#propertyValue(this.getItemData(el), name) ?? el.getAttribute(`data-${name}`);
+	}
+	#groupKeyOf(el) {
+		const by = this.groupBy;
+		if (typeof by === `string`) return toGroupKey(this.#groupValue(el, by));
+		return toGroupKey(by(this.getItemData(el), el));
+	}
+	#isItemVisible(el) {
+		return !el.hidden && (!this.filterPredicate || this.filterPredicate(el));
+	}
+	#headerFor(key) {
+		let header = this.#headerEls.get(key);
+		if (!header) {
+			header = document.createElement(`ixfx-list-group-header`);
+			header.setAttribute(GROUP_HEADER_ATTR, ``);
+			header.dataset.groupKey = key;
+			this.#headerEls.set(key, header);
+		}
+		return header;
+	}
+	/**
+	* Bring the light DOM into grouped order: original order → sort → partition
+	* into contiguous groups, each preceded by a header row. Idempotent — it only
+	* touches the DOM when the order actually changes, so it never loops through
+	* the mutation observer. Ungrouping restores the original (sorted) order.
+	*/
+	#syncGroups() {
+		const active = this.#groupingActive();
+		if (!active && !this.#wasGrouped) return;
+		const items = [...this.querySelectorAll(ITEM_SELECTOR)];
+		for (const el of items) if (!this.#seq.has(el)) this.#seq.set(el, this.#seqNext++);
+		let ordered = items.toSorted((a, b) => this.#seq.get(a) - this.#seq.get(b));
+		if (this.sort !== `none` && ordered.length > 1) ordered = this.#sortRows(ordered);
+		const nodes = [];
+		const info = [];
+		const index = /* @__PURE__ */ new Map();
+		const liveHeaders = /* @__PURE__ */ new Set();
+		if (active) {
+			const label = this.groupLabel;
+			const parts = partitionByGroup(ordered, (el) => this.#groupKeyOf(el), label ? (key, els) => label(key, els.map((el) => this.getItemData(el) ?? el)) : void 0);
+			for (const part of parts) {
+				const count = part.items.filter((el) => this.#isItemVisible(el)).length;
+				const collapsed = count > 0 && this._collapsedGroups.has(part.key);
+				if (count > 0) {
+					const header = this.#headerFor(part.key);
+					header.label = part.label;
+					header.count = count;
+					header.collapsed = collapsed;
+					liveHeaders.add(part.key);
+					nodes.push(header);
+					info.push({
+						key: part.key,
+						label: part.label,
+						count,
+						collapsed: this._collapsedGroups.has(part.key)
+					});
+				}
+				for (const el of part.items) {
+					index.set(el, part.key);
+					el.toggleAttribute(GROUP_COLLAPSED_ATTR, collapsed);
+					nodes.push(el);
+				}
+			}
+		} else {
+			for (const el of ordered) el.removeAttribute(GROUP_COLLAPSED_ATTR);
+			nodes.push(...ordered);
+		}
+		for (const [key, header] of this.#headerEls) if (!liveHeaders.has(key)) {
+			header.remove();
+			this.#headerEls.delete(key);
+		}
+		this.#groupIndex = index;
+		this.#groupList = info;
+		this.#wasGrouped = active;
+		const current = [...this.children].filter((c) => c.matches(`li`) || c.hasAttribute(GROUP_HEADER_ATTR));
+		if (current.length !== nodes.length || current.some((c, i) => c !== nodes[i])) this.append(...nodes);
+		if (this.tickled.tickledId?.hasAttribute(GROUP_COLLAPSED_ATTR)) this.tickled.focus(void 0);
+		this.#syncGroupObserver(active);
 		this.#scheduleGeometry();
 	}
+	/** Filter-search hides rows via `hidden` on the `<li>`s — regroup when that changes. */
+	#syncGroupObserver(active) {
+		if (!active) {
+			this.#groupObserver?.disconnect();
+			this.#groupObserver = void 0;
+			return;
+		}
+		if (this.#groupObserver || !this.isConnected) return;
+		this.#groupObserver = new MutationObserver(() => this.#scheduleGroups());
+		this.#groupObserver.observe(this, {
+			subtree: true,
+			attributes: true,
+			attributeFilter: [`hidden`]
+		});
+	}
+	/** Groups in display order (empty when ungrouped). */
+	get groups() {
+		return this.#groupList;
+	}
+	/** Collapse or expand one group. Fires `list-group-toggle` when the state changes. */
+	setGroupCollapsed(groupKey, collapsed) {
+		if (this._collapsedGroups.has(groupKey) === collapsed) return;
+		const next = new Set(this._collapsedGroups);
+		if (collapsed) next.add(groupKey);
+		else next.delete(groupKey);
+		this._collapsedGroups = next;
+		this._dispatch(`list-group-toggle`, {
+			groupKey,
+			collapsed
+		});
+	}
+	toggleGroup(groupKey) {
+		this.setGroupCollapsed(groupKey, !this._collapsedGroups.has(groupKey));
+	}
+	collapseAllGroups() {
+		for (const g of this.#groupList) this.setGroupCollapsed(g.key, true);
+	}
+	expandAllGroups() {
+		for (const key of [...this._collapsedGroups]) this.setGroupCollapsed(key, false);
+	}
+	#findGroupHeader(path) {
+		for (const target of path) {
+			if (target === this) break;
+			if (target instanceof HTMLElement && target.parentElement === this && target.hasAttribute(GROUP_HEADER_ATTR)) return target;
+		}
+	}
 	#scheduleGeometry() {
 		if (this.#geometryScheduled) return;
 		this.#geometryScheduled = true;
@@ -795,11 +1011,13 @@ let DetailListElement = class DetailListElement extends LitElement {
 	#recomputeGeometry() {
 		this.#grid = [];
 		this.#positions.clear();
+		this.#tops.clear();
 		if (!this.isConnected) return;
 		const columns = [];
 		for (const el of this._getVisibleItems()) {
 			const rect = el.getBoundingClientRect();
 			if (rect.width === 0 && rect.height === 0) continue;
+			this.#tops.set(el, rect.top);
 			let ci = columns.findIndex((c) => Math.abs(c.left - rect.left) <= 1);
 			if (ci === -1) {
 				columns.push({
@@ -920,6 +1138,30 @@ let DetailListElement = class DetailListElement extends LitElement {
 		const next = this.#findNextCheckable(cur.col, cur.row, 0, -1);
 		if (next) this.#navigateTo(next);
 	}
+	/**
+	* Left/Right target. Ungrouped lists keep the row-index rule. Grouped lists
+	* have headers at arbitrary heights, so an item's row index no longer equals
+	* its visual row — pick the item in the neighbouring column whose top is
+	* nearest the cursor's (ties go to the upper one).
+	*/
+	#horizontalTarget(from, dir) {
+		if (this.#groupList.length === 0) return this.#findNextCheckable(from.col, from.row, dir, 0);
+		const column = this.#grid[from.col + dir];
+		const current = this.tickled.tickledId;
+		const top = current ? this.#tops.get(current) : void 0;
+		if (!column || top === void 0) return void 0;
+		let best;
+		let bestDelta = Number.POSITIVE_INFINITY;
+		for (const el of column) {
+			if (!this._isCheckable(el)) continue;
+			const delta = Math.abs((this.#tops.get(el) ?? Number.POSITIVE_INFINITY) - top);
+			if (delta < bestDelta) {
+				best = el;
+				bestDelta = delta;
+			}
+		}
+		return best;
+	}
 	#navigateRight() {
 		this.#recomputeGeometry();
 		const cur = this.tickled.tickledId ? this.#positionOf(this.tickled.tickledId) : void 0;
@@ -927,7 +1169,7 @@ let DetailListElement = class DetailListElement extends LitElement {
 			this.#navigateTo(this.#findFirstCheckable());
 			return;
 		}
-		const next = this.#findNextCheckable(cur.col, cur.row, 1, 0);
+		const next = this.#horizontalTarget(cur, 1);
 		if (next) this.#navigateTo(next);
 		else if (this.itemWrap === `wrap`) this.#navigateTo(this.#findFirstCheckable());
 	}
@@ -938,13 +1180,14 @@ let DetailListElement = class DetailListElement extends LitElement {
 			this.#navigateTo(this.#findFirstCheckable());
 			return;
 		}
-		const next = this.#findNextCheckable(cur.col, cur.row, -1, 0);
+		const next = this.#horizontalTarget(cur, -1);
 		if (next) this.#navigateTo(next);
 		else if (this.itemWrap === `wrap`) this.#navigateTo(this.#findLastCheckable());
 	}
 	_getVisibleItems() {
 		return Array.from(this.querySelectorAll(ITEM_SELECTOR)).filter((el) => {
 			if (el.hidden) return false;
+			if (el.hasAttribute(GROUP_COLLAPSED_ATTR)) return false;
 			if (this.filterPredicate && !this.filterPredicate(el)) return false;
 			return true;
 		});
@@ -1233,6 +1476,20 @@ let DetailListElement = class DetailListElement extends LitElement {
       display: none !important;
     }
 
+    /* Rows of a collapsed group leave the flow; their header stays. */
+    ::slotted([data-group-collapsed]) {
+      display: none !important;
+    }
+
+    /* Group headers are rows in the column flow, the same size as an item. */
+    ::slotted(ixfx-list-group-header) {
+      box-sizing: border-box;
+      flex: none;
+      width: var(--detail-list-column-width, 220px);
+      height: var(--detail-list-item-height, 28px);
+      --list-group-header-height: var(--detail-list-group-header-height, var(--detail-list-item-height, 28px));
+    }
+
     ::slotted(li) {
       box-sizing: border-box;
       display: flex;
@@ -1409,6 +1666,14 @@ __decorate([property({
 })], DetailListElement.prototype, "itemsDraggable", void 0);
 __decorate([property({ attribute: false })], DetailListElement.prototype, "dragPreviewRenderer", void 0);
 __decorate([property({ attribute: false })], DetailListElement.prototype, "dragPreviewSource", void 0);
+__decorate([property({ attribute: `group-by` })], DetailListElement.prototype, "groupBy", void 0);
+__decorate([property({ attribute: false })], DetailListElement.prototype, "groupLabel", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `cross-group-selection`,
+	reflect: true
+})], DetailListElement.prototype, "crossGroupSelection", void 0);
+__decorate([state()], DetailListElement.prototype, "_collapsedGroups", void 0);
 __decorate([query(`ul`)], DetailListElement.prototype, "_listEl", void 0);
 DetailListElement = __decorate([safeCustomElement(`ixfx-detail-list`)], DetailListElement);
 //#endregion