@ixfx/components 0.7.3 → 0.7.5

package/dist/{tree-Ch4W8qXQ.js → tree-DAii2A1g.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, t as createTreeListSearchAdapter } from "./incr-search-DpbSJtgj.js";
+import { n as animateListItemIn, r as animateListItemOut } from "./list-item-animation-DuiwgN3l.js";
+import "./interaction-Cr13azbM.js";
 import { t as collectDataResult } from "./data-provider-35TyWclX.js";
 import { LitElement, css, html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
 import { createCommandRegistry } from "@clinth/ui-commands";
+import { repeat } from "lit/directives/repeat.js";
 //#region src/common/tree-data-model.ts
 function findNode(root, key) {
 	if (root.item.key === key) return root;
@@ -198,6 +201,8 @@ var TreeDataModel = class {
 };
 //#endregion
 //#region src/tree/tree-base.ts
+/** Above this many rows entering / leaving at once, skip the animation entirely. */
+const MAX_ANIMATED_ROWS = 50;
 let TreeBaseElement = class TreeBaseElement extends LitElement {
 	constructor(..._args) {
 		super(..._args);
@@ -220,8 +225,19 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 			}
 		});
 		this._focusedDepth = 0;
+		this.search = new ListSearchController(this, { adapter: createTreeListSearchAdapter(this, {
+			labelSelector: `.tree-label`,
+			highlightKey: `incr-search-highlight`
+		}) });
 		this.#config = { indent: 20 };
+		this.#renderedKeys = [];
+		this.#lastNodeByKey = /* @__PURE__ */ new Map();
+		this.#enteringKeys = /* @__PURE__ */ new Set();
+		this.#leaving = /* @__PURE__ */ new Map();
+		this.#leavingAnimating = /* @__PURE__ */ new Set();
+		this.#treeAnimReady = false;
 		this.#onKeyDown = (event) => {
+			if (this.search.isOpen) return;
 			const nodes = this.#getAllNodes();
 			if (nodes.length === 0) return;
 			if ((event.ctrlKey || event.metaKey) && event.key === `a`) {
@@ -282,7 +298,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 							bubbles: true,
 							composed: true
 						}));
-					} else if (current.depth > 1) {
+					} else if (current.depth > 0) {
 						const parentDepth = current.depth - 1;
 						for (let i = currentIdx - 1; i >= 0; i--) if (nodes[i].depth === parentDepth) {
 							this.#setFocusedIndex(i);
@@ -342,12 +358,111 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 	get selectedNodes() {
 		return this._selectedNodes;
 	}
+	#unregisterSearchCommands;
+	#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.#ownedRegistry) return;
+		this.search.setModes(this.#effectiveSearchModes());
+		this.#unregisterSearchCommands?.();
+		this.#unregisterSearchCommands = registerListSearchCommands(this.#ownedRegistry, this.search);
+	}
 	#pendingNode;
 	#pendingController;
 	#modelUnsubscribe;
 	#anchor;
 	#ownedRegistry;
 	#config;
+	#renderedKeys;
+	#lastNodeByKey;
+	#enteringKeys;
+	#leaving;
+	#leavingAnimating;
+	#treeAnimReady;
+	willUpdate(changedProps) {
+		super.willUpdate(changedProps);
+		this.#diffVisibleNodes();
+	}
+	#diffVisibleNodes() {
+		const nodes = this.root ? this.#getAllNodes() : [];
+		const nowKeys = new Set(nodes.map((n) => n.node.item.key));
+		this.#enteringKeys.clear();
+		if (this.#treeAnimReady && this.#renderedKeys.length > 0) {
+			const prevSet = new Set(this.#renderedKeys);
+			for (const { node } of nodes) if (!prevSet.has(node.item.key)) this.#enteringKeys.add(node.item.key);
+			if (this.#enteringKeys.size > MAX_ANIMATED_ROWS) this.#enteringKeys.clear();
+			for (const key of this.#renderedKeys) if (!nowKeys.has(key) && !this.#leaving.has(key)) {
+				const last = this.#lastNodeByKey.get(key);
+				if (last) this.#leaving.set(key, last);
+			}
+		}
+		for (const key of [...this.#leaving.keys()]) if (nowKeys.has(key)) {
+			this.#leaving.delete(key);
+			this.#leavingAnimating.delete(key);
+		}
+		if (this.#leaving.size > MAX_ANIMATED_ROWS) {
+			this.#leaving.clear();
+			this.#leavingAnimating.clear();
+		}
+	}
+	/** True while `node` is a fading ghost row (removed / collapsed, still animating out). */
+	_isLeaving(node) {
+		return this.#leaving.has(node.item.key);
+	}
+	/**
+	* True when `filterPredicate` is set and neither `node` nor any descendant
+	* matches — the row should carry the `filtered` class (`display: none`).
+	*/
+	_isFilteredOut(node, depth) {
+		return this.filterPredicate !== void 0 && !this.#matchesFilter(node, depth);
+	}
+	/** Splice the fading ghost rows back into the visible list near where they were. */
+	#weaveLeaving(nodes) {
+		if (this.#leaving.size === 0) return nodes;
+		const result = [...nodes];
+		const indexOfKey = (key) => result.findIndex((e) => e.node.item.key === key);
+		for (const [key, entry] of this.#leaving) {
+			const prevIdx = this.#renderedKeys.indexOf(key);
+			let insertAt = result.length;
+			for (let j = prevIdx + 1; j < this.#renderedKeys.length; j++) {
+				const at = indexOfKey(this.#renderedKeys[j]);
+				if (at !== -1) {
+					insertAt = at;
+					break;
+				}
+			}
+			result.splice(insertAt, 0, entry);
+		}
+		return result;
+	}
+	#runItemAnimations() {
+		if (this.#enteringKeys.size > 0) {
+			for (const el of this.renderRoot.querySelectorAll(`.item`)) {
+				const key = el.dataset.key;
+				if (key !== void 0 && this.#enteringKeys.has(key)) animateListItemIn(el);
+			}
+			this.#enteringKeys.clear();
+		}
+		if (this.#leaving.size > 0) for (const el of this.renderRoot.querySelectorAll(`.item.leaving`)) {
+			const key = el.dataset.key;
+			if (key === void 0 || this.#leavingAnimating.has(key)) continue;
+			this.#leavingAnimating.add(key);
+			animateListItemOut(el).then(() => {
+				this.#leaving.delete(key);
+				this.#leavingAnimating.delete(key);
+				this.requestUpdate();
+			});
+		}
+		const visible = this.root ? this.#getAllNodes() : [];
+		this.#renderedKeys = visible.map((n) => n.node.item.key);
+		this.#lastNodeByKey.clear();
+		for (const entry of visible) this.#lastNodeByKey.set(entry.node.item.key, entry);
+		this.#treeAnimReady = true;
+	}
 	updated(changedProps) {
 		if (changedProps.has(`root`) && this.root) {
 			this.#abortPending();
@@ -382,6 +497,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		if (changedProps.has(`selectedNode`) && this.selectedNode) {
 			if (changedProps.get(`selectedNode`) !== this.selectedNode) this.tickled.setTickled(this.selectedNode.item.key);
 		}
+		this.#runItemAnimations();
 	}
 	connectedCallback() {
 		super.connectedCallback();
@@ -400,11 +516,14 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 			execute: () => this.deselectAll()
 		});
 		this.registry = registry;
+		this.#syncSearchCommands();
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.#modelUnsubscribe?.();
 		this.#modelUnsubscribe = void 0;
+		this.#unregisterSearchCommands?.();
+		this.#unregisterSearchCommands = void 0;
 		if (this.#ownedRegistry) {
 			this.#ownedRegistry.unregister(`select-all`);
 			this.#ownedRegistry.unregister(`deselect-all`);
@@ -502,6 +621,28 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		if (!keyPath) return false;
 		return this.navigateTo(keyPath);
 	}
+	/** Expand ancestors + move the cursor to `key`, without touching the selection (search "navigate" mode). */
+	revealKey(key) {
+		if (!this.root?.children) return false;
+		const path = this.#findNodePath(this.root.children, (n) => n.item.key === key);
+		if (!path) return false;
+		for (let i = 0; i < path.length - 1; i++) {
+			this.#applyExclusivity(path[i]);
+			this._expandedKeys.add(path[i]);
+		}
+		this.tickled.setTickled(key);
+		this.requestUpdate();
+		this.updateComplete.then(() => this.#scrollKeyIntoView(key));
+		return true;
+	}
+	/** Replace the selection with `nodes` (subject to `selectionFilter`) — search "select" mode. */
+	selectMany(nodes) {
+		const prev = new Set(this._selectedNodes);
+		this._selectedNodes = new Set([...nodes].filter((n) => this.#canSelect(n)));
+		this.selectedNode = [...this._selectedNodes].at(-1);
+		this.#dispatchSelect(prev);
+		this.requestUpdate();
+	}
 	getNodes() {
 		if (!this.root?.children) return [];
 		const result = [];
@@ -546,9 +687,9 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 			}
 		}
 	}
-	renderNodeContent(node, _depth) {
+	renderNodeContent(node, depth) {
 		const isBranch = node.item.isLeaf !== true;
-		const isExpanded = this._isExpanded(node);
+		const isExpanded = this._isExpanded(node, depth);
 		return html`
       <span class="tree-caret">
         ${isBranch ? html`<ixfx-icon class="caret-icon" name="chevron-down" .rotate=${isExpanded ? nothing : `-90deg`}></ixfx-icon>` : ``}
@@ -829,9 +970,9 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 	_isFocused(node) {
 		return this.tickled.isTickled(node.item.key);
 	}
-	_isExpanded(node) {
+	_isExpanded(node, depth = 0) {
 		if (this._expandedKeys.has(node.item.key)) return true;
-		if (this.filterPredicate && node.children) return node.children.some((child) => this.#matchesFilter(child, 0));
+		if (this.filterPredicate && node.children) return node.children.some((child) => this.#matchesFilter(child, depth + 1));
 		return false;
 	}
 	#matchesFilter(node, depth) {
@@ -905,14 +1046,14 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 				node: n,
 				depth: d
 			});
-			if (this._expandedKeys.has(n.item.key) && n.children) for (const child of n.children) visit(child, d + 1);
+			if (n.children && this._isExpanded(n, d)) for (const child of n.children) visit(child, d + 1);
 		};
 		if (node.children) for (const child of node.children) visit(child, depth + 1);
 		return result;
 	}
 	#getAllNodes() {
 		if (!this.root) return [];
-		return this.#getVisibleNodes(this.root, 0);
+		return this.#getVisibleNodes(this.root, -1);
 	}
 	#getFocusedIndex() {
 		const nodes = this.#getAllNodes();
@@ -962,18 +1103,19 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
       >
         ${this.root ? this.#renderNodes(nodes) : nothing}
       </div>
+      ${this.search.renderField()}
     `;
 	}
 	#onDblClick;
 	#renderNodes(nodes) {
-		if (nodes.length === 0 && this.#pendingNode) return html`
+		if (nodes.length === 0 && this.#pendingNode && this.#leaving.size === 0) return html`
         <div class="tree-loading">
           ${this.renderLoadingIndicator()}
         </div>
       `;
 		return html`
       <ul class="tree-list" role="tree">
-        ${nodes.map(({ node, depth }) => this._renderNode(node, depth))}
+        ${repeat(this.#weaveLeaving(nodes), ({ node }) => node.item.key, ({ node, depth }) => this._renderNode(node, depth))}
       </ul>
     `;
 	}
@@ -981,15 +1123,17 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		const selected = this._isSelected(node);
 		const tickled = this._isFocused(node);
 		const isBranch = node.item.isLeaf !== true;
-		const isExpanded = this._isExpanded(node);
+		const isExpanded = this._isExpanded(node, depth);
 		const isPending = this.#pendingNode === node;
-		const isFiltered = this.filterPredicate !== void 0 && !this.#matchesFilter(node, depth);
+		const isFiltered = this._isFilteredOut(node, depth);
+		const isLeaving = this._isLeaving(node);
 		return html`
       <li
-        class="item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${isBranch ? `branch` : `leaf`} ${isFiltered ? `filtered` : ``}"
+        class="item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${isBranch ? `branch` : `leaf`} ${isFiltered ? `filtered` : ``} ${isLeaving ? `leaving` : ``}"
         role="treeitem"
         aria-selected=${selected}
         aria-expanded=${isBranch ? isExpanded : nothing}
+        aria-hidden=${isLeaving ? `true` : nothing}
         aria-level=${depth + 1}
         data-key=${node.item.key}
         style=${`--depth: ${depth}`}
@@ -1016,6 +1160,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 			themeFallbacks,
 			tickledStyles,
 			tickledItemStyles,
+			listSearchStyles,
 			css`
       :host {
       --tree-bg: var(--surface-3);
@@ -1026,16 +1171,23 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
       --tree-caret-size: 10px;
       --tree-radius: var(--radius-s);
 
+      position: relative;
       display: block;
-      overflow: auto;
+      overflow: hidden;
       box-sizing: border-box;
       background: var(--tree-bg);
       color: var(--tree-text);
     }
 
+    /* min-height (not height) so the tree still grows to its content when the
+       host has no explicit height; when it does, this fills it and scrolls.
+       The scroll lives here, not on :host, so the search popover (a sibling of
+       #container, positioned against :host) stays put while the list scrolls. */
     #container {
       outline: none;
       min-height: 100%;
+      max-height: 100%;
+      overflow: auto;
     }
 
     .tree-list {
@@ -1110,6 +1262,12 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
       display: none;
     }
 
+    /* Fading-out ghost row (see #runItemAnimations) — inert while it collapses. */
+    .item.leaving {
+      pointer-events: none;
+      overflow: hidden;
+    }
+
     ::highlight(incr-search-highlight) {
       background: var(--search-highlight-bg, var(--accent));
       color: var(--search-highlight-color, var(--accent-text, #fff));
@@ -1143,6 +1301,11 @@ __decorate([property({
 	attribute: `disable-keyboard-navigation`
 })], TreeBaseElement.prototype, "disableKeyboardNavigation", void 0);
 __decorate([property({ attribute: false })], TreeBaseElement.prototype, "registry", void 0);
+__decorate([property({
+	type: String,
+	attribute: `search-modes`,
+	reflect: true
+})], TreeBaseElement.prototype, "searchModes", void 0);
 __decorate([state()], TreeBaseElement.prototype, "_expandedKeys", void 0);
 __decorate([state()], TreeBaseElement.prototype, "_focusedDepth", void 0);
 TreeBaseElement = __decorate([safeCustomElement(`ixfx-tree-base`)], TreeBaseElement);
@@ -1169,11 +1332,11 @@ let TreeListElement = class TreeListElement extends TreeBaseElement {
 			if (node.item.icon) this.#depthsWithIcons.add(depth);
 			if (node.children) for (const child of node.children) visit(child, depth + 1);
 		};
-		if (this.root) visit(this.root, 0);
+		if (this.root) visit(this.root, -1);
 	}
 	renderNodeContent(node, depth) {
 		const isBranch = node.item.isLeaf !== true;
-		const isExpanded = this._isExpanded(node);
+		const isExpanded = this._isExpanded(node, depth);
 		const icon = node.item.icon;
 		const tooltip = node.item.tooltip;
 		const caretAndLabel = html`
@@ -1219,16 +1382,19 @@ let TreeListElement = class TreeListElement extends TreeBaseElement {
 		const selected = this._isSelected(node);
 		const tickled = this._isFocused(node);
 		const isBranch = node.item.isLeaf !== true;
-		const isExpanded = this._isExpanded(node);
+		const isExpanded = this._isExpanded(node, depth);
 		const isPending = this._pendingNode === node;
 		const hasIconAtDepth = this.#depthsWithIcons.has(depth);
+		const isLeaving = this._isLeaving(node);
+		const isFiltered = this._isFilteredOut(node, depth);
 		return html`
       <li
-        class="item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${isBranch ? `branch` : `leaf`} ${hasIconAtDepth ? `has-icon-at-depth` : ``}"
+        class="item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${isBranch ? `branch` : `leaf`} ${hasIconAtDepth ? `has-icon-at-depth` : ``} ${isLeaving ? `leaving` : ``} ${isFiltered ? `filtered` : ``}"
         data-key=${node.item.key}
         role="treeitem"
         aria-selected=${selected}
         aria-expanded=${isBranch ? isExpanded : nothing}
+        aria-hidden=${isLeaving ? `true` : nothing}
         aria-level=${depth + 1}
         style=${`--depth: ${depth}`}
         @click=${(e) => this._handleItemClick(node, depth, e)}
@@ -1368,29 +1534,24 @@ var TreeController = class {
 	navigateToValue(predicate) {
 		const treePath = this.#findTreePath(this.#root, predicate);
 		if (!treePath) return false;
+		let currentColumn = this.#element.root?.children ?? [];
 		const keys = [];
 		for (let i = 1; i < treePath.length; i++) {
 			const treeNode = treePath[i];
 			const key = this.#options.valueToItem(treeNode.getValue(), treeNode).key;
 			keys.push(key);
 			if (i < treePath.length - 1) {
-				const currentChildren = i === 1 ? this.#element.root?.children ?? [] : this.#findInChildren(this.#element.root?.children ?? [], keys);
-				const treeNodeMap = this.#nodeToTree;
-				const node = currentChildren.find((n) => n.item.key === key);
+				const node = currentColumn.find((n) => n.item.key === key);
 				if (!node) return false;
 				if (node.children === void 0) {
-					const mapped = treeNodeMap.get(node);
+					const mapped = this.#nodeToTree.get(node);
 					if (mapped) node.children = this.#childrenOf(mapped);
 				}
+				currentColumn = node.children ?? [];
 			}
 		}
 		return this.#element.navigateTo(keys);
 	}
-	#findInChildren(children, keys) {
-		if (keys.length === 0) return children;
-		const key = keys[0];
-		return children.find((n) => n.item.key === key)?.children ?? [];
-	}
 	#childrenOf(treeNode) {
 		return Array.from(treeNode.children(), (child) => this.#toTreeNode(child));
 	}
@@ -1419,4 +1580,4 @@ var TreeController = class {
 //#endregion
 export { TreeDataModel as i, TreeListElement as n, TreeBaseElement as r, TreeController as t };
 
-//# sourceMappingURL=tree-Ch4W8qXQ.js.map
+//# sourceMappingURL=tree-DAii2A1g.js.map