@ixfx/components 0.15.4 → 0.16.0

package/dist/flat-list.js

@@ -3,9 +3,10 @@ import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
 import "./icon-1gpwtPx8.js";
 import { t as collectDataResult } from "./data-provider-35TyWclX.js";
-import "./crumbs.js";
+import { t as ViewStateController } from "./view-state-controller-BdyXWUUM.js";
+import { n as resolveKeyPath } from "./crumb-navigation-YnFVFqrx.js";
 import { n as appearanceColor, t as appearanceAbsent } from "./item-appearance-BjcMyauw.js";
-import "./vertical-list.js";
+import "./vertical-list-1V1Vg2O5.js";
 import { LitElement, css, html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
 //#region src/flat-list/flat-list.ts
@@ -46,6 +47,15 @@ function findKeyPath(root, target) {
 		if (sub) return [child.item.key, ...sub];
 	}
 }
+function levelState(state) {
+	const { selected, focus, scroll } = state;
+	if (selected === void 0 && focus === void 0 && scroll === void 0) return void 0;
+	return {
+		selected,
+		focus,
+		scroll
+	};
+}
 function orderRows(children, branchOrder, sort) {
 	const rows = children.map((node) => ({
 		key: node.item.key,
@@ -78,6 +88,17 @@ let FlatListElement = class FlatListElement extends LitElement {
 		this.#lastPath = [];
 		this.#selected = /* @__PURE__ */ new Set();
 		this.#direction = `jump`;
+		this.#viewState = new ViewStateController(this, {
+			kind: `flat-list`,
+			capture: () => this.getViewState()
+		});
+		this.#keepFocus = false;
+		this.#ownPath = this.path;
+		this.#onInnerViewState = (e) => {
+			e.stopPropagation();
+			const reason = e.detail.reason;
+			if (e.target === this.list && reason !== `restore`) this.#viewState.notify(reason);
+		};
 		this.#canDropOn = (el, dataTransfer) => {
 			const node = this.#nodeForElement(el);
 			return !!node && (this.canDrop?.(node, dataTransfer) ?? true);
@@ -137,6 +158,11 @@ let FlatListElement = class FlatListElement extends LitElement {
 			}));
 		};
 		this.#onListSelect = (e) => {
+			if (!this.#viewState.isRestoring && this.#pendingLevel?.selected) this.#pendingLevel = {
+				...this.#pendingLevel,
+				selected: void 0
+			};
+			this.#viewState.notify();
 			const previous = this.#selected;
 			const nodes = [...e.detail.selectedKeys].map((k) => this.#nodeForKey(k)).filter((n) => n !== void 0);
 			this.#selected = new Set(nodes);
@@ -174,6 +200,7 @@ let FlatListElement = class FlatListElement extends LitElement {
 			if (e.defaultPrevented || e.ctrlKey || e.metaKey || e.altKey || e.shiftKey) return;
 			const origin = e.composedPath()[0];
 			if (origin instanceof HTMLInputElement || origin instanceof HTMLTextAreaElement) return;
+			this.#keepFocus = false;
 			if (e.key === `ArrowRight` || e.key === `ArrowLeft` || e.key === `Backspace`) TickledController.ignoreHoverUntilPointerMoves();
 			if (e.key === `ArrowRight`) {
 				const node = this.#nodeForKey(this.list?.tickledKey);
@@ -232,6 +259,15 @@ let FlatListElement = class FlatListElement extends LitElement {
 	#direction;
 	/** Leaf key to select once the list shows its level (set when a leaf crumb is chosen). */
 	#pendingSelectKey;
+	#viewState;
+	/** Saved level still being reached (keys not loaded yet). */
+	#pendingPath;
+	/** Saved `selected` / `focus` / `scroll` for the saved level, handed to the inner list once it is shown. */
+	#pendingLevel;
+	/** A restored cursor was handed to the inner list: don't park the cursor on the first row. */
+	#keepFocus;
+	/** The last `path` this component set itself — anything else came from the host. */
+	#ownPath;
 	/** The inner list, for registry / search commands and other advanced use. */
 	get list() {
 		return this.renderRoot.querySelector(`ixfx-vertical-list`) ?? void 0;
@@ -287,12 +323,82 @@ let FlatListElement = class FlatListElement extends LitElement {
 	}
 	#setPath(path, direction) {
 		if (sameKeys(path, this.path)) return;
+		if (!this.#viewState.isRestoring) {
+			this.#pendingPath = void 0;
+			this.#pendingLevel = void 0;
+			this.#keepFocus = false;
+		}
+		this.#viewState.notify();
+		this.#ownPath = path;
 		this.#lastPath = this.path;
 		this.#direction = direction;
 		this.list?.search.close();
 		this.list?.clearSelection();
 		this.path = path;
 	}
+	/**
+	* Snapshot the level shown (`path`) and, from the inner list, its selection,
+	* cursor and scroll. Includes a saved level not reached yet.
+	*/
+	getViewState(options) {
+		const withPending = options?.includePending ?? true;
+		const level = (withPending ? this.#pendingLevel : void 0) ?? this.#captureLevel(withPending);
+		return this.#viewState.shape({
+			path: [...(withPending ? this.#pendingPath : void 0) ?? this.path],
+			...level
+		}, options);
+	}
+	/**
+	* Go to a saved level. Keys not loaded yet are reached as they load (the
+	* level shown is always loaded); `selected` / `focus` / `scroll` apply once
+	* that level is shown.
+	*/
+	setViewState(state) {
+		if (!this.#viewState.accepts(state)) return;
+		const level = levelState(state);
+		if (state.path) this.#pendingPath = [...state.path];
+		if (level) this.#pendingLevel = {
+			...this.#pendingLevel,
+			...level
+		};
+		this.#reconcilePath();
+		this.requestUpdate();
+	}
+	clearPendingViewState() {
+		this.#pendingPath = void 0;
+		this.#pendingLevel = void 0;
+		this.list?.clearPendingViewState();
+	}
+	/** Show the deepest loaded level of the pending path; loading it brings the next key in. */
+	#reconcilePath() {
+		const keys = this.#pendingPath;
+		const root = this.#root;
+		if (!keys || !root) return;
+		const r = resolveKeyPath(root, keys);
+		if (r.done) this.#pendingPath = void 0;
+		const reach = keys.slice(0, r.nodes.length - 1);
+		if (!sameKeys(reach, this.path)) this.#viewState.restoring(() => this.#setPath(reach, `jump`));
+	}
+	/** The inner list's selection / cursor / scroll. */
+	#captureLevel(withPending) {
+		const inner = this.list?.getViewState({ includePending: withPending });
+		return inner && {
+			selected: inner.selected,
+			focus: inner.focus,
+			scroll: inner.scroll
+		};
+	}
+	/** The saved level is shown: give it its selection, cursor and scroll. */
+	#handOffLevel() {
+		const list = this.list;
+		const level = this.#pendingLevel;
+		if (!list || !level) return;
+		this.#pendingLevel = void 0;
+		if (level.focus !== void 0) this.#keepFocus = true;
+		this.#viewState.restoring(() => list.setViewState(level));
+	}
+	/** The inner parts' own view-state events must not pass for this element's. */
+	#onInnerViewState;
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.#modelUnsubscribe?.();
@@ -312,8 +418,18 @@ let FlatListElement = class FlatListElement extends LitElement {
 				this.#refreshRows(true);
 			});
 		}
+		if (changed.has(`path`) && this.path !== this.#ownPath) {
+			this.#ownPath = this.path;
+			this.#pendingPath = void 0;
+			this.#viewState.notify();
+		}
 		const valid = resolvePath(this.#root, this.path).length - 1;
-		if (this.#root && valid < this.path.length) this.path = this.path.slice(0, valid);
+		if (this.#root && valid < this.path.length) {
+			this.#pendingPath ??= this.path;
+			this.#pendingLevel ??= this.#captureLevel(true);
+			this.path = this.#ownPath = this.path.slice(0, valid);
+		}
+		this.#reconcilePath();
 		if ([
 			`root`,
 			`model`,
@@ -325,6 +441,7 @@ let FlatListElement = class FlatListElement extends LitElement {
 		].some((p) => changed.has(p))) this.#refreshRows(changed.has(`root`) || changed.has(`model`) || changed.has(`loadChildren`));
 	}
 	updated(changed) {
+		if (this.#pendingLevel && !this.#pendingPath) this.#handOffLevel();
 		if (changed.has(`path`) && !sameKeys(this.path, this.#lastPath) && this.#root) {
 			const node = this.currentNode;
 			if (node) {
@@ -436,7 +553,7 @@ let FlatListElement = class FlatListElement extends LitElement {
 		this.#pendingSelectKey = void 0;
 		this.#pendingFocusKey = void 0;
 		if (select) list.selectKeys([select]);
-		if (focusKey !== void 0) list.focusKey(focusKey);
+		if (focusKey !== void 0 && !this.#keepFocus) list.focusKey(focusKey);
 		if (hadFocus) list.focus();
 	}
 	/** Two stable formatters, so toggling `validateEdit` rebuilds the rows with or without edit hooks. */
@@ -464,6 +581,7 @@ let FlatListElement = class FlatListElement extends LitElement {
           ?with-up=${this.withUp}
           ?hide-root=${this.hideRoot}
           @select=${this.#onCrumbSelect}
+          @view-state-change=${this.#onInnerViewState}
         ></ixfx-crumb-navigation>
         <div class="toolbar" part="toolbar" ?hidden=${!this._hasToolbar}>
           <slot @slotchange=${this.#onToolbarSlotChange}></slot>
@@ -494,6 +612,7 @@ let FlatListElement = class FlatListElement extends LitElement {
           @list-edit-cancel=${this.#onListEditCancel}
           @list-select=${this.#onListSelect}
           @list-activate=${this.#onListActivate}
+          @view-state-change=${this.#onInnerViewState}
           @keydown=${this.#onKeyDown}
           @focusin=${this.#syncFocusVisible}
           @focusout=${this.#syncFocusVisible}