@ixfx/components 0.15.5 → 0.16.1

package/dist/{flat-list-DXMyDiSH.d.ts → flat-list-CT9kX3TQ.d.ts}

@@ -1,9 +1,11 @@
 import "./icon-CDGprSdE.js";
-import { j as TreeDataModel } from "./tree-component-C6UHO-w9.js";
+import { M as TreeDataModel } from "./tree-component-DgfkxmVY.js";
 import { o as TreeNode, r as TreeFilterPredicate, t as LoadChildrenCallback } from "./types-Jky6oNAp.js";
-import "./crumbs.js";
+import { a as ViewStateBase, t as GetViewStateOptions } from "./types-LU1u0CB8.js";
+import "./index-9ttcdwlL.js";
+import "./crumb-navigation-BbqfmkYs.js";
 import { i as ListInteractionMode, l as ListSelectionMode } from "./list-selection-types-PjKdhF-a.js";
-import { r as VerticalListElement } from "./vertical-list-D8MksoTp.js";
+import { r as VerticalListElement } from "./vertical-list-SAx56U-l.js";
 import { LitElement, PropertyValues } from "lit";
 //#region src/flat-list/types.d.ts
 /** How branches and leaves are ordered within one level. */
@@ -46,6 +48,15 @@ type FlatListEditCommitDetail = {
 type FlatListEditCancelDetail = {
   readonly node: TreeNode;
 };
+/**
+ * `ixfx-flat-list` view state. `selected`, `focus` and `scroll` belong to the
+ * level at `path`; they are held until that level is shown, then handed to
+ * the inner list.
+ */
+type FlatListViewState = ViewStateBase & {
+  /** Keys from the root (excluded) to the level shown — the `path` property. */
+  readonly path?: readonly string[];
+};
 type FlatListNavigateEvent = CustomEvent<FlatListNavigateDetail>;
 type FlatListSelectEvent = CustomEvent<FlatListSelectDetail>;
 type FlatListActivateEvent = CustomEvent<FlatListActivateDetail>;
@@ -164,6 +175,18 @@ declare class FlatListElement extends LitElement {
   navigateInto(key: string): boolean;
   /** Move to the parent level. Returns false at the root. */
   navigateUp(): boolean;
+  /**
+   * Snapshot the level shown (`path`) and, from the inner list, its selection,
+   * cursor and scroll. Includes a saved level not reached yet.
+   */
+  getViewState(options?: GetViewStateOptions<FlatListViewState>): FlatListViewState;
+  /**
+   * 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: Partial<FlatListViewState>): void;
+  clearPendingViewState(): void;
   disconnectedCallback(): void;
   protected willUpdate(changed: PropertyValues): void;
   protected updated(changed: PropertyValues): void;
@@ -180,4 +203,4 @@ interface FlatListElement {
   addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
 }
 //#endregion
-export { FlatListSelectEvent as _, FlatListContextMenuDetail as a, FlatListDropEvent as c, FlatListEditCommitDetail as d, FlatListEditCommitEvent as f, FlatListSelectDetail as g, FlatListNavigateEvent as h, FlatListBranchOrder as i, FlatListEditCancelDetail as l, FlatListNavigateDetail as m, FlatListActivateDetail as n, FlatListContextMenuEvent as o, FlatListElementEventMap as p, FlatListActivateEvent as r, FlatListDropDetail as s, FlatListElement as t, FlatListEditCancelEvent as u };
+export { FlatListSelectEvent as _, FlatListContextMenuDetail as a, FlatListDropEvent as c, FlatListEditCommitDetail as d, FlatListEditCommitEvent as f, FlatListSelectDetail as g, FlatListNavigateEvent as h, FlatListBranchOrder as i, FlatListEditCancelDetail as l, FlatListNavigateDetail as m, FlatListActivateDetail as n, FlatListContextMenuEvent as o, FlatListElementEventMap as p, FlatListActivateEvent as r, FlatListDropDetail as s, FlatListElement as t, FlatListEditCancelEvent as u, FlatListViewState as v };

package/dist/flat-list.d.ts

@@ -1,2 +1,2 @@
-import { _ as FlatListSelectEvent, a as FlatListContextMenuDetail, c as FlatListDropEvent, d as FlatListEditCommitDetail, f as FlatListEditCommitEvent, g as FlatListSelectDetail, h as FlatListNavigateEvent, i as FlatListBranchOrder, l as FlatListEditCancelDetail, m as FlatListNavigateDetail, n as FlatListActivateDetail, o as FlatListContextMenuEvent, p as FlatListElementEventMap, r as FlatListActivateEvent, s as FlatListDropDetail, t as FlatListElement, u as FlatListEditCancelEvent } from "./flat-list-DXMyDiSH.js";
-export { type FlatListActivateDetail, type FlatListActivateEvent, type FlatListBranchOrder, type FlatListContextMenuDetail, type FlatListContextMenuEvent, type FlatListDropDetail, type FlatListDropEvent, type FlatListEditCancelDetail, type FlatListEditCancelEvent, type FlatListEditCommitDetail, type FlatListEditCommitEvent, FlatListElement, type FlatListElementEventMap, type FlatListNavigateDetail, type FlatListNavigateEvent, type FlatListSelectDetail, type FlatListSelectEvent };
+import { _ as FlatListSelectEvent, a as FlatListContextMenuDetail, c as FlatListDropEvent, d as FlatListEditCommitDetail, f as FlatListEditCommitEvent, g as FlatListSelectDetail, h as FlatListNavigateEvent, i as FlatListBranchOrder, l as FlatListEditCancelDetail, m as FlatListNavigateDetail, n as FlatListActivateDetail, o as FlatListContextMenuEvent, p as FlatListElementEventMap, r as FlatListActivateEvent, s as FlatListDropDetail, t as FlatListElement, u as FlatListEditCancelEvent, v as FlatListViewState } from "./flat-list-CT9kX3TQ.js";
+export { type FlatListActivateDetail, type FlatListActivateEvent, type FlatListBranchOrder, type FlatListContextMenuDetail, type FlatListContextMenuEvent, type FlatListDropDetail, type FlatListDropEvent, type FlatListEditCancelDetail, type FlatListEditCancelEvent, type FlatListEditCommitDetail, type FlatListEditCommitEvent, FlatListElement, type FlatListElementEventMap, type FlatListNavigateDetail, type FlatListNavigateEvent, type FlatListSelectDetail, type FlatListSelectEvent, type FlatListViewState };

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-DyKPKGxK.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}