@ixfx/components 0.10.3 → 0.10.4

package/dist/{vertical-list-DdaYcvHQ.d.ts → vertical-list-DfcNsa4p.d.ts}

@@ -1,6 +1,7 @@
 import { F as ListDragPreviewSourceResolver, P as ListDragPreviewRenderer, R as ListNativeDragStartEvent } from "./tree-component-DGmKBbpy.js";
-import { S as ListSearchController } from "./index-BXafRK-_.js";
-import { i as ListInteractionMode, l as ListSelectionMode, r as ListElementEventMap } from "./list-selection-types-B5ioL-dG.js";
+import { n as ListViewportChangeEvent } from "./list-viewport-types-BRZsLcvp.js";
+import { S as ListSearchController } from "./index-CsaQwNkz.js";
+import { i as ListInteractionMode, l as ListSelectionMode, r as ListElementEventMap } from "./list-selection-types-PjKdhF-a.js";
 import { LitElement, PropertyValues } from "lit";
 import { CommandId, CommandRegistry } from "@clinth/ui-commands";
 //#region src/vertical-list/vertical-list.d.ts
@@ -123,6 +124,12 @@ declare class VerticalListElement extends LitElement {
   get registry(): CommandRegistry<unknown> | undefined;
   connectedCallback(): void;
   disconnectedCallback(): void;
+  /**
+   * The shadow scroll list only exists after the first render; start
+   * watching it so resizes move the window (virtualized) and the visible
+   * set (plain) too.
+   */
+  protected firstUpdated(): void;
   updated(changed: PropertyValues): void;
   /** The most recently selected item, or `undefined` if nothing is selected. */
   get selectedItem(): Element | undefined;
@@ -241,8 +248,9 @@ declare global {
   interface HTMLElementEventMap extends VerticalListElementEventMap {}
 }
 interface VerticalListElementEventMap extends ListElementEventMap {
+  'vertical-list-viewport-change': ListViewportChangeEvent;
   'list-native-drag-start': ListNativeDragStartEvent<Element>;
 }
 //#endregion
 export { VerticalListElementEventMap as i, CustomCheckboxOptions as n, VerticalListElement as r, AddItemOptions as t };
-//# sourceMappingURL=vertical-list-DdaYcvHQ.d.ts.map
+//# sourceMappingURL=vertical-list-DfcNsa4p.d.ts.map

package/dist/vertical-list-DfcNsa4p.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vertical-list-DfcNsa4p.d.ts","names":[],"sources":["../src/vertical-list/vertical-list.ts"],"mappings":";;;;;;;UA0DiB;EACf,WAAW;EACX;EACA;;UAGe;;;;;;EAMf;;cAuBW,4BAA4B;;EAEvC,eAAe;EAGf,iBAAiB;EAGjB,mBAAmB,IAAI;;;;;;EAQvB;;;;;;;;;;;;;;;;;;;EAqBA,oBAAoB,gCAAgC;;;;;;EAQpD;;;;;;EAQA;;;;;EAOA,qBAAqB,wBAAwB;EAG7C,mBAAmB,8BAA8B;;;;;;;;;;;EAajD;;;;;EAOA;;;;;;;;;EAWA,aAAa,eAAe;;;;;;;;;;;;;;;;;;EAoB5B;;;;;;EAQA;mBAyCiB;UAeT;UA6EA;;WA6EC,QAAM,qBAAA;;MAYX,YAAY;EA2BP;EAsBA;;;;;;YA4BU;EAwDV,QAAQ,SAAS;;MA8EtB,gBAAgB;;MAKhB,iBAAiB,YAAY;EAIjC,QAAQ,MAAM,kBAAkB,UAAU;;;;;;;EA4B1C,WAAW,MAAM,UAAU;;EA2B3B,YAAY,OAAO,SAAS,WAAW;EAIvC;;;;;;EAmBA,SAAS,gBAAgB;;;;;;EAwBzB,SAAS,WAAW,WAAW,OAAO;EAItC,OAAO,MAAM;EAIb,WAAW,OAAO,SAAS;EAI3B,SAAS,MAAM;EAIf;EAIA;;MAQI,gBAAgB;;MAKhB;;EAMJ,WAAW,MAAM;;EAKjB,gBAAgB,MAAM;;EAKtB,mBAAmB,MAAM;;;;;;EASzB,SAAS;;EAgCT,aAAa,cAAc;;;;;;;;EAW3B;;;;;;;EAuBA;EAsBE,eAAe,0CAA0C,UAAU;;;;;EA2CrE,YAAY,MAAM;;;;;;;;;;;EAclB,WAAW,aAAa;UA2fhB;UAgBA;UAOA;UAiBA;;;;;;;UA4GA;;;;;UAuBA;UAcA;UAYA;UAQA;UAWA;UAMA;UAIA;UAwDA;UAUA;UAMA;SAUQ,sBAAM;EAuKb,wBAAM;;QAeT;YACI;IACR,sBAAsB;;YAGd,4BAA4B;;UAGvB,oCAAoC;EACnD,iCAAiC;EACjC,0BAA0B,yBAAyB"}

package/dist/vertical-list.d.ts

@@ -1,4 +1,5 @@
 import { I as ListDragSource, L as ListNativeDragStartDetail, M as ListDragPreview, N as ListDragPreviewContext, P as ListDragPreviewRenderer, R as ListNativeDragStartEvent, j as ListDragEntry } from "./tree-component-DGmKBbpy.js";
-import { a as ListItemClickDetail, c as ListSelectEvent, d as ListTickleEvent, i as ListInteractionMode, l as ListSelectionMode, n as ListActivateEvent, o as ListItemClickEvent, r as ListElementEventMap, s as ListSelectDetail, t as ListActivateDetail, u as ListTickleDetail } from "./list-selection-types-B5ioL-dG.js";
-import { i as VerticalListElementEventMap, n as CustomCheckboxOptions, r as VerticalListElement, t as AddItemOptions } from "./vertical-list-DdaYcvHQ.js";
-export { AddItemOptions, CustomCheckboxOptions, type ListActivateDetail, type ListActivateEvent, type ListDragEntry, type ListDragPreview, type ListDragPreviewContext, type ListDragPreviewRenderer, type ListDragSource, type ListElementEventMap, type ListInteractionMode, type ListItemClickDetail, type ListItemClickEvent, type ListNativeDragStartDetail, type ListNativeDragStartEvent, type ListSelectDetail, type ListSelectEvent, type ListSelectionMode, type ListTickleDetail, type ListTickleEvent, VerticalListElement, VerticalListElementEventMap };
+import { n as ListViewportChangeEvent, t as ListViewportChangeDetail } from "./list-viewport-types-BRZsLcvp.js";
+import { a as ListItemClickDetail, c as ListSelectEvent, d as ListTickleEvent, i as ListInteractionMode, l as ListSelectionMode, n as ListActivateEvent, o as ListItemClickEvent, r as ListElementEventMap, s as ListSelectDetail, t as ListActivateDetail, u as ListTickleDetail } from "./list-selection-types-PjKdhF-a.js";
+import { i as VerticalListElementEventMap, n as CustomCheckboxOptions, r as VerticalListElement, t as AddItemOptions } from "./vertical-list-DfcNsa4p.js";
+export { AddItemOptions, CustomCheckboxOptions, type ListActivateDetail, type ListActivateEvent, type ListDragEntry, type ListDragPreview, type ListDragPreviewContext, type ListDragPreviewRenderer, type ListDragSource, type ListElementEventMap, type ListInteractionMode, type ListItemClickDetail, type ListItemClickEvent, type ListNativeDragStartDetail, type ListNativeDragStartEvent, type ListSelectDetail, type ListSelectEvent, type ListSelectionMode, type ListTickleDetail, type ListTickleEvent, type ListViewportChangeDetail, type ListViewportChangeEvent, VerticalListElement, VerticalListElementEventMap };

package/dist/vertical-list.js

@@ -15,6 +15,12 @@ const ITEM_SELECTOR = `li:not([data-virtual-spacer]), [data-list-item]:not([data
 * vertical rows are shorter relative to the viewport, so 3.
 */
 const VIRTUAL_OVERSCAN = 3;
+/** Shallow key-array equality, treating `undefined` (never dispatched) as different. */
+function sameKeys(a, b) {
+	if (a === void 0 || a.length !== b.length) return false;
+	for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
+	return true;
+}
 let VerticalListElement = class VerticalListElement extends LitElement {
 	constructor(..._args) {
 		super(..._args);
@@ -129,11 +135,11 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 			highlightKey: `vertical-list-search`
 		}) });
 		this.#onScroll = () => {
-			if (!this.#virtualActive()) return;
 			if (this.#scrollRaf !== 0) return;
 			this.#scrollRaf = requestAnimationFrame(() => {
 				this.#scrollRaf = 0;
 				this.#syncVirtualWindow();
+				this.#emitViewportChangeIfChanged();
 			});
 		};
 		this._onPointerOver = (e) => {
@@ -226,6 +232,9 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 	#suspendAdapterRebuild;
 	#scrollRaf;
 	#resizeObserver;
+	/** Key sets as of the last viewport-change dispatch, for dedupe. */
+	#lastViewportRenderedKeys;
+	#lastViewportVisibleKeys;
 	#topSpacer;
 	#bottomSpacer;
 	/** Last measured viewport height — kept so a 0 read can't collapse the window. */
@@ -353,6 +362,14 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 		}
 	}
 	/**
+	* The shadow scroll list only exists after the first render; start
+	* watching it so resizes move the window (virtualized) and the visible
+	* set (plain) too.
+	*/
+	firstUpdated() {
+		this.#ensureResizeObserved();
+	}
+	/**
 	* Animate in items appended to the light DOM (however they got there —
 	* {@link addItem}, direct `appendChild`, a framework binding). A bulk populate
 	* (roughly everything at once) is left alone, as are the wrapper `<li>`s the
@@ -362,6 +379,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 		if (!this.isConnected) return;
 		if (this.#virtualActive()) {
 			this.#syncVirtualWindow(this.#reconcileRecords(records));
+			this.#scheduleViewportChangeEmit();
 			return;
 		}
 		const fresh = [];
@@ -372,6 +390,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 			this.#animatedItems.add(node);
 			fresh.push(node);
 		}
+		this.#scheduleViewportChangeEmit();
 		if (fresh.length === 0) return;
 		if (this.#isBulkPopulate(fresh.length)) return;
 		for (const el of fresh) animateListItemIn(el);
@@ -925,6 +944,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 		if (!ul) return;
 		this.#resizeObserver ??= new ResizeObserver(() => {
 			this.#syncVirtualWindow();
+			this.#scheduleViewportChangeEmit();
 		});
 		this.#resizeObserver.observe(ul);
 	}
@@ -1004,6 +1024,32 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 		this._syncItemStates();
 		this._syncNativeDraggable();
 		this.#nativeDrag.refreshDraggable();
+		this.#scheduleViewportChangeEmit();
+	}
+	/** Coalesce content/layout viewport checks to at most one animation frame. */
+	#scheduleViewportChangeEmit() {
+		if (this.#scrollRaf !== 0) return;
+		this.#scrollRaf = requestAnimationFrame(() => {
+			this.#scrollRaf = 0;
+			this.#syncVirtualWindow();
+			this.#emitViewportChangeIfChanged();
+		});
+	}
+	/**
+	* Dispatch `vertical-list-viewport-change` with the current key sets — unless
+	* neither set changed since the last dispatch, so coalesced frames and
+	* no-op scrolls stay silent.
+	*/
+	#emitViewportChangeIfChanged() {
+		const renderedKeys = this.renderedKeys();
+		const visibleKeys = this.visibleKeys();
+		if (sameKeys(this.#lastViewportRenderedKeys, renderedKeys) && sameKeys(this.#lastViewportVisibleKeys, visibleKeys)) return;
+		this.#lastViewportRenderedKeys = renderedKeys;
+		this.#lastViewportVisibleKeys = visibleKeys;
+		this._dispatch(`vertical-list-viewport-change`, {
+			renderedKeys,
+			visibleKeys
+		});
 	}
 	_getVisibleItems() {
 		return Array.from(this.querySelectorAll(ITEM_SELECTOR)).filter((el) => {