@ixfx/components 0.7.3 → 0.7.5

package/dist/data-grid.js

@@ -1,12 +1,15 @@
-import { t as TickledController } from "./tickled-controller-h9GmJ_bU.js";
+import { t as TickledController } from "./tickled-controller-C66DgJHl.js";
 import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrAHEj1q.js";
 import { t as themeFallbacks } from "./fallbacks-DNI9xt0F.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
-import "./interaction-D5XdKzbR.js";
+import { i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES } from "./incr-search-DpbSJtgj.js";
+import { i as listItemFadeKeyframes } from "./list-item-animation-DuiwgN3l.js";
+import "./interaction-Cr13azbM.js";
 import { t as createDragGhost } from "./drag-ghost-DtSDvjri.js";
-import "./menu-DMzjkVnK.js";
+import "./menu-Bg90Qr0B.js";
 import { LitElement, css, html, nothing } from "lit";
 import { property, query, state } from "lit/decorators.js";
+import { createCommandRegistry } from "@clinth/ui-commands";
 import { repeat } from "lit/directives/repeat.js";
 //#region src/data-grid/data-grid.ts
 let DataGridElement = class DataGridElement extends LitElement {
@@ -24,6 +27,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 		this.groupBy = null;
 		this.allowGrouping = false;
 		this.crossGroupSelection = false;
+		this.columnMenu = `auto`;
 		this._columnFormatters = /* @__PURE__ */ new Map();
 		this._selectedKeys = /* @__PURE__ */ new Set();
 		this._scrollTop = 0;
@@ -46,10 +50,18 @@ let DataGridElement = class DataGridElement extends LitElement {
 		this._sortedRows = [];
 		this._flat = [];
 		this._flatKeys = [];
+		this.#searchKeyByRow = /* @__PURE__ */ new Map();
+		this.search = new ListSearchController(this, { adapter: this.#createSearchAdapter() });
+		this.#prevFlatKeys = [];
+		this.#enteringRowKeys = /* @__PURE__ */ new Set();
+		this.#rowReflowTimer = 0;
+		this.#dataGridRenderedOnce = false;
 		this._visibleColumns = [];
 		this._colOffsets = [];
 		this._colWidthSum = 0;
 		this._raf = 0;
+		this.#appendInProgress = false;
+		this.#resortRaf = 0;
 		this._drag = null;
 		this._onFocusOut = (e) => {
 			if (this._suppressBlurCommit) return;
@@ -244,6 +256,8 @@ let DataGridElement = class DataGridElement extends LitElement {
 			themeFallbacks,
 			tickledStyles,
 			tickledItemStyles,
+			listItemFadeKeyframes,
+			listSearchStyles,
 			css`
     :host {
       --data-grid-row-height: 28px;
@@ -252,6 +266,7 @@ let DataGridElement = class DataGridElement extends LitElement {
       --data-grid-header-bg: var(--surface-2);
       --data-grid-border: var(--border);
       --data-grid-header-text: var(--surface-3-text);
+      position: relative;
       display: block;
       overflow: hidden;
       border: var(--data-grid-border);
@@ -300,6 +315,22 @@ let DataGridElement = class DataGridElement extends LitElement {
     .row.item.tickled { background: var(--item-bg-tickled); border: var(--item-border-tickled); color: var(--item-text-tickled); }
     .row.item.selected { background: var(--item-bg-selected); border: var(--item-border-selected); color: var(--item-text-selected); }
     .row.item.selected.tickled { background: var(--item-bg-selected-tickled); }
+
+    /* Insertion / removal animation. Only while [reflowing] — the ~0.3s after
+       the row set changes — do rows slide (their top transitions) to make or
+       close a gap; a freshly inserted row also fades in. Kept scoped so it
+       never fires while scrolling the virtualised list. */
+    :host([reflowing]) .row.item,
+    :host([reflowing]) .group-row {
+      transition: top var(--data-grid-row-move-duration, 200ms) cubic-bezier(0.2, 0, 0, 1);
+    }
+    .row.item.entering {
+      animation: ixfx-list-item-in var(--data-grid-row-move-duration, 200ms) ease both;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :host([reflowing]) .row.item, :host([reflowing]) .group-row { transition: none; }
+      .row.item.entering { animation: none; }
+    }
     .cell {
       flex-shrink: 0; display: flex; align-items: center; padding: 0 var(--space-s);
       overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-right: var(--border-subtle);
@@ -329,17 +360,89 @@ let DataGridElement = class DataGridElement extends LitElement {
   `
 		];
 	}
+	#searchRegistry;
+	#unregisterSearchCommands;
+	#searchKeyByRow;
+	/** Command registry carrying this grid's `list.search.*` commands. */
+	get registry() {
+		return this.#searchRegistry;
+	}
+	#rowSearchText(row) {
+		if (this.rowSearchText) return this.rowSearchText(row);
+		const rec = row;
+		return this._visibleColumns.map((c) => String(rec[c.key] ?? ``)).join(` `);
+	}
+	#createSearchAdapter() {
+		return {
+			getItems: () => {
+				this.#searchKeyByRow.clear();
+				this._sortedRows.forEach((r, i) => this.#searchKeyByRow.set(r, this.getRowKey(r, i)));
+				return this._sortedRows;
+			},
+			getLabel: (row) => this.#rowSearchText(row),
+			getKey: (row) => this.#searchKeyByRow.get(row) ?? String(this._sortedRows.indexOf(row)),
+			focusItem: (row) => {
+				if (row === void 0) return;
+				const key = this.#searchKeyByRow.get(row);
+				if (key !== void 0) this.tickleRow(key);
+			},
+			selectItems: (rows) => {
+				this.selectKeys(rows.map((r) => this.#searchKeyByRow.get(r)).filter((k) => k !== void 0));
+			},
+			applyFilter: (matched) => {
+				this.filterPredicate = matched === void 0 ? void 0 : (row) => {
+					const k = this.#searchKeyByRow.get(row);
+					return k === void 0 || matched.has(k);
+				};
+			}
+		};
+	}
+	#effectiveSearchModes() {
+		const raw = this.searchModes?.trim();
+		if (raw === void 0) return [...LIST_SEARCH_MODES];
+		const requested = new Set(raw.split(/\s+/));
+		return LIST_SEARCH_MODES.filter((m) => requested.has(m));
+	}
+	#syncSearchCommands() {
+		if (!this.#searchRegistry) return;
+		this.search.setModes(this.#effectiveSearchModes());
+		this.#unregisterSearchCommands?.();
+		this.#unregisterSearchCommands = registerListSearchCommands(this.#searchRegistry, this.search);
+	}
+	/** Row-key snapshot from the previous update, for the insertion / removal animation. */
+	#prevFlatKeys;
+	#enteringRowKeys;
+	#rowReflowTimer;
+	#dataGridRenderedOnce;
+	#appendInProgress;
+	#resortRaf;
 	connectedCallback() {
 		super.connectedCallback();
 		if (!this.hasAttribute(`tabindex`)) this.tabIndex = 0;
 		this.addEventListener(`keydown`, this._onKeyDown);
 		this.addEventListener(`focusout`, this._onFocusOut);
+		this.#searchRegistry ??= createCommandRegistry();
+		this.#syncSearchCommands();
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.removeEventListener(`keydown`, this._onKeyDown);
 		this.removeEventListener(`focusout`, this._onFocusOut);
 		cancelAnimationFrame(this._raf);
+		this.#unregisterSearchCommands?.();
+		this.#unregisterSearchCommands = void 0;
+		this.#searchRegistry = void 0;
+		if (this.#rowReflowTimer) {
+			clearTimeout(this.#rowReflowTimer);
+			this.#rowReflowTimer = 0;
+		}
+	}
+	/**
+	* Dispatch a command to this grid — routes through the command registry so
+	* `list.search.*` (and any other registered commands) work.
+	*/
+	dispatch(commandId, args) {
+		this.#searchRegistry?.invoke(commandId, args);
 	}
 	firstUpdated() {
 		new ResizeObserver(() => {
@@ -366,8 +469,11 @@ let DataGridElement = class DataGridElement extends LitElement {
 	willUpdate(changed) {
 		super.willUpdate(changed);
 		this.setAttribute(`data-input-mode`, this._tickled.inputMode);
-		if (changed.has(`rows`) || changed.has(`sortState`) || changed.has(`columns`) || changed.has(`groupBy`) || changed.has(`groupLabel`)) this._sortedRows = this._applySort([...this.rows]);
-		this._rebuildFlat();
+		if (changed.has(`searchModes`)) this.#syncSearchCommands();
+		if (!this.#appendInProgress) {
+			if (changed.has(`rows`) || changed.has(`sortState`) || changed.has(`columns`) || changed.has(`groupBy`) || changed.has(`groupLabel`)) this._sortedRows = this._applySort([...this.rows]);
+			this._rebuildFlat();
+		}
 		this._visibleColumns = this.columns.filter((c) => c.visible !== false);
 		let off = 0;
 		this._colOffsets = this._visibleColumns.map((c) => {
@@ -377,6 +483,40 @@ let DataGridElement = class DataGridElement extends LitElement {
 		});
 		this._colWidthSum = off;
 		if (this.interactionMode === `checked`) this._colWidthSum += 28;
+		this.#noteFlatMutation();
+	}
+	/**
+	* Diff the row-key list against the previous update. Rows that appeared get an
+	* enter fade; any add/remove opens a short `[reflowing]` window so the rows
+	* that shift slide (their `top` transitions) instead of snapping. Bounded in
+	* time so it never bleeds into scroll virtualisation.
+	*/
+	#noteFlatMutation() {
+		const now = this._flatKeys;
+		const prev = this.#prevFlatKeys;
+		this.#prevFlatKeys = now.slice();
+		if (!this.#dataGridRenderedOnce) {
+			this.#dataGridRenderedOnce = true;
+			return;
+		}
+		if (prev.length === 0 || now.length === 0) {
+			this.#enteringRowKeys.clear();
+			return;
+		}
+		const before = new Set(prev);
+		const after = new Set(now);
+		const added = now.filter((k) => !before.has(k));
+		const removed = prev.filter((k) => !after.has(k));
+		if (added.length === now.length || added.length === 0 && removed.length === 0) return;
+		this.#enteringRowKeys = new Set(added);
+		this.toggleAttribute(`reflowing`, true);
+		if (this.#rowReflowTimer) clearTimeout(this.#rowReflowTimer);
+		this.#rowReflowTimer = window.setTimeout(() => {
+			this.#rowReflowTimer = 0;
+			this.#enteringRowKeys.clear();
+			this.toggleAttribute(`reflowing`, false);
+			this.requestUpdate();
+		}, 320);
 	}
 	_getGroupKey(row) {
 		if (!this.groupBy) return null;
@@ -384,18 +524,23 @@ let DataGridElement = class DataGridElement extends LitElement {
 		return String(this.groupBy(row));
 	}
 	_rebuildFlat() {
+		const filtered = this.filterPredicate !== void 0;
+		const source = filtered ? this._sortedRows.filter((r) => this.filterPredicate(r)) : this._sortedRows;
 		if (!this.groupBy) {
-			this._flat = this._sortedRows.map((r, i) => ({
-				type: `row`,
-				key: this.getRowKey(r, i),
-				row: r,
-				idx: i
-			}));
+			this._flat = source.map((r, i) => {
+				const idx = filtered ? this._sortedRows.indexOf(r) : i;
+				return {
+					type: `row`,
+					key: this.getRowKey(r, idx),
+					row: r,
+					idx
+				};
+			});
 			this._flatKeys = this._flat.map((f) => f.key);
 			return;
 		}
 		const groups = /* @__PURE__ */ new Map();
-		for (const r of this._sortedRows) {
+		for (const r of source) {
 			const k = this._getGroupKey(r) ?? ``;
 			const arr = groups.get(k);
 			if (arr) arr.push(r);
@@ -624,6 +769,102 @@ let DataGridElement = class DataGridElement extends LitElement {
 	_getRowForKey(key) {
 		return this._flat.find((f) => f.key === key)?.row;
 	}
+	/** The selected row keys (read-only). */
+	get selectedKeys() {
+		return this._selectedKeys;
+	}
+	/** Replace the selection with these row keys (clamped to known rows). */
+	set selectedKeys(keys) {
+		this.selectKeys(keys);
+	}
+	/**
+	* Replace the selection with the given row keys. Unknown keys are dropped;
+	* in a single-select mode only the last surviving key is kept;
+	* `selectionMode="none"` clears. Fires `datagrid-select` with the previous
+	* set when the selection actually changes.
+	*/
+	selectKeys(keys) {
+		const known = new Set(this._flat.filter((f) => f.type === `row`).map((f) => f.key));
+		let next = new Set([...keys].filter((k) => known.has(k)));
+		const multi = this.selectionMode === `multiple` || this.interactionMode === `checked` || this.interactionMode === `sticky` || this.interactionMode === `vscode`;
+		if (this.selectionMode === `none`) next = /* @__PURE__ */ new Set();
+		else if (!multi && next.size > 1) {
+			const last = [...next].at(-1);
+			next = last === void 0 ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([last]);
+		}
+		const prev = new Set(this._selectedKeys);
+		if (prev.size === next.size && [...next].every((k) => prev.has(k))) return;
+		this._selectedKeys = next;
+		this._anchorKey = [...next].at(-1);
+		this.dispatchEvent(new CustomEvent(`datagrid-select`, {
+			detail: {
+				selectedKeys: new Set(next),
+				previous: prev
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	/** The row key under the cursor, or `undefined`. */
+	get tickledKey() {
+		return this._tickled.tickledId;
+	}
+	/** Move the cursor to this row key and scroll it into view. */
+	tickleRow(key) {
+		if (!this._flatKeys.includes(key)) return;
+		this._tickled.focus(key);
+		this._scrollRowIntoView(key);
+	}
+	/**
+	* Append rows without the full O(n log n) rebuild that reassigning `rows`
+	* incurs. `rows` still gets a new array reference (reactivity is preserved),
+	* but the derived arrays are extended over the appended slice only. When a
+	* sort is active the new rows show unsorted for one frame, then a single
+	* coalesced re-sort runs. Scroll position, selection and cursor are kept.
+	*/
+	appendRows(rows) {
+		if (rows.length === 0) return;
+		const startIdx = this.rows.length;
+		this.#appendInProgress = true;
+		this.rows = [...this.rows, ...rows];
+		const appended = this.rows.slice(startIdx);
+		if (this._sortedRows.length === startIdx) this._sortedRows = [...this._sortedRows, ...appended];
+		else {
+			this._sortedRows = this._applySort([...this.rows]);
+			this._rebuildFlat();
+			this.#appendInProgress = false;
+			this.requestUpdate();
+			return;
+		}
+		this.#appendToFlat(appended, startIdx);
+		this.#appendInProgress = false;
+		this.requestUpdate();
+		if (this.sortState != null) {
+			cancelAnimationFrame(this.#resortRaf);
+			this.#resortRaf = requestAnimationFrame(() => {
+				this._sortedRows = this._applySort([...this.rows]);
+				this._rebuildFlat();
+				this.requestUpdate();
+			});
+		}
+	}
+	#appendToFlat(appended, startIdx) {
+		if (this.groupBy) {
+			this._rebuildFlat();
+			return;
+		}
+		for (let j = 0; j < appended.length; j++) {
+			const idx = startIdx + j;
+			const key = this.getRowKey(appended[j], idx);
+			this._flat.push({
+				type: `row`,
+				key,
+				row: appended[j],
+				idx
+			});
+			this._flatKeys.push(key);
+		}
+	}
 	_replaceSelection(key) {
 		if (this.selectionMode === `none`) return;
 		const prev = new Set(this._selectedKeys);
@@ -979,6 +1220,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 			return last >= 0 ? this._colOffsets[last] + (this._visibleColumns[last].width ?? 150) : 0;
 		})()}px"></div>` : nothing}
           </div>
+          ${this.columnMenu === `none` ? nothing : html`
           <ixfx-menu-trigger label="⚙" placement="bottom-end" @menu-command=${(e) => {
 			const cmd = e.detail.command;
 			const checked = e.detail.checked;
@@ -1018,7 +1260,7 @@ let DataGridElement = class DataGridElement extends LitElement {
                 </ixfx-menu-radio-group>
               ` : nothing}
             </ixfx-menu-container>
-          </ixfx-menu-trigger>
+          </ixfx-menu-trigger>`}
         </div>
         <div class="viewport" @scroll=${this._onScroll}>
           <div class="spacer" style="height:${this._flat.length * rh}px; width:${this._colWidthSum}px">
@@ -1035,7 +1277,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 			const selected = this._selectedKeys.has(rowKey);
 			const tickled = this._tickled.isTickled(rowKey);
 			return html`
-                <div class="row item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``}" style="top:${absIdx * rh}px; height:${rh}px"
+                <div class="row item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${this.#enteringRowKeys.has(rowKey) ? `entering` : ``}" style="top:${absIdx * rh}px; height:${rh}px"
                   data-key=${rowKey}
                   @click=${(e) => {
 				this._onRowClick(rowKey, null, e);
@@ -1168,6 +1410,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 		})}
           </div>
         </div>
+        ${this.search.renderField()}
       </div>
     `;
 	}
@@ -1206,7 +1449,18 @@ __decorate([property({
 	attribute: `cross-group-selection`,
 	reflect: true
 })], DataGridElement.prototype, "crossGroupSelection", void 0);
+__decorate([property({
+	type: String,
+	attribute: `column-menu`
+})], DataGridElement.prototype, "columnMenu", void 0);
 __decorate([property({ attribute: false })], DataGridElement.prototype, "globalFormatter", void 0);
+__decorate([property({ attribute: false })], DataGridElement.prototype, "filterPredicate", void 0);
+__decorate([property({ attribute: false })], DataGridElement.prototype, "rowSearchText", void 0);
+__decorate([property({
+	type: String,
+	attribute: `search-modes`,
+	reflect: true
+})], DataGridElement.prototype, "searchModes", void 0);
 __decorate([state()], DataGridElement.prototype, "_selectedKeys", void 0);
 __decorate([state()], DataGridElement.prototype, "_scrollTop", void 0);
 __decorate([state()], DataGridElement.prototype, "_scrollLeft", void 0);