@octane-xplat/ui 0.6.0 → 0.7.1

package/dist/web/VirtualList.web.tsrx.js

@@ -0,0 +1,622 @@
+import { applyEscapeProps } from "./escape-props.web.js";
+import { layoutChildProps } from "./layout-child.web.js";
+import { VirtualListSizeIndex, createVirtualListEntries, estimateVirtualListSizes, virtualListMeasurementKey, virtualListRange } from "./virtual-list-layout.js";
+import { __s, bag3, bag4, bag6, bagOf, child, clone, createScopedElement, drainFrag, forBlock, hookSlots, ifBlock, queueRefAttach, queueRefDetach, setStyleProperty, sibling, snapshotSpread, template, useEffect, useRef, useState } from "octane";
+import { bindSignalChild, bindSignalHostPropSources, compilerMemoRegion, enableSignalBindings, hookMemoCreate, hookMemoEqual, hookMemoPublish3, replaceRef } from "octane/internal/client";
+//#region src/VirtualList.web.tsrx
+enableSignalBindings(1, true);
+var _t$0 = /* @__PURE__ */ template("<div class=\"vx-virtual-list-header\"></div>");
+var _t$1 = /* @__PURE__ */ template("<!>", 0, 1);
+var _t$2 = /* @__PURE__ */ template("<div class=\"vx-virtual-list-separator\"></div>");
+var _t$3 = /* @__PURE__ */ template("<div class=\"vx-virtual-list-row\" data-vx-row=\"true\"><div class=\"vx-virtual-list-item\"></div><!></div>");
+var _t$4 = /* @__PURE__ */ template("<div class=\"vx-virtual-list-spacer\" aria-hidden=\"true\"></div><!><div class=\"vx-virtual-list-spacer\" aria-hidden=\"true\"></div>", 0, 1);
+var _t$5 = /* @__PURE__ */ template("<div class=\"vx-virtual-list-footer\"></div>");
+var _t$6 = /* @__PURE__ */ template("<div><!><!><!></div>");
+var _hs$ = /* @__PURE__ */ hookSlots(19);
+var _rm$2 = [
+	"r",
+	"b",
+	"a"
+];
+function __then$0(__props, __s, __extra) {
+	const bindObservedNode = __extra[0];
+	const props = __extra[1];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1;
+		const _root = clone(_t$0);
+		queueRefAttach(__s, _m1 = (node) => bindObservedNode("header", node, { kind: "header" }), _m0 = _root);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
+		_b = bag4(__s, _root, _m0, _m1, null, void 0);
+		__s.refFields = _rm$2;
+	} else {
+		const _r = (node) => bindObservedNode("header", node, { kind: "header" });
+		if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
+	}
+	_b.e = bindSignalChild(__s, _b.e, 1, _b.a, props.renderHeader(), "b:94822c57", null, void 0, void 0, void 0, true);
+}
+function __then$4(__props, __s, __extra) {
+	const __block = __s.block;
+	const props = __extra[3];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1;
+		const _root = clone(_t$1);
+		_m0 = __block.parentNode;
+		_m1 = child(_root);
+		drainFrag(_root, __block.parentNode, __block.endMarker);
+		_b = bag4(__s, null, _m0, _m1, null, void 0);
+	}
+	_b.e = bindSignalChild(__s, _b.e, 1, _b.a, props.renderEmpty ? createScopedElement("div", { className: "vx-virtual-list-empty" }, () => props.renderEmpty()) : null, "b:e8241bf2", _b.b, true, void 0, true, void 0);
+}
+var _key$7 = (entry) => entry.rowKey;
+function __then$10(__props, __s, __extra) {
+	const props = __extra[0];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0;
+		const _root = clone(_t$2);
+		_m0 = _root;
+		_b = bag3(__s, _root, _m0, null, void 0);
+	}
+	_b.d = bindSignalChild(__s, _b.d, 1, _b.a, props.renderSeparator?.(), "b:d89a1727", null, void 0, void 0, void 0, true);
+}
+var _rm$13 = [
+	"r",
+	"b",
+	"a"
+];
+function __item$8(entry, __s, __extra) {
+	const bindObservedNode = __extra[0];
+	const entries = __extra[1];
+	const hasSeparator = __extra[2];
+	const props = __extra[3];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1, _m2, _m3;
+		const _root = clone(_t$3);
+		queueRefAttach(__s, _m1 = (node) => bindObservedNode("row:" + virtualListMeasurementKey(entry.rowKey, hasSeparator && entry.index < entries.length - 1), node, {
+			kind: "row",
+			rowKey: entry.rowKey
+		}), _m0 = _root);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
+		_m2 = sibling(child(_root), 1);
+		_m3 = child(_root);
+		_b = bag6(__s, _root, _m0, _m1, _m2, _m3, null, void 0);
+		__s.refFields = _rm$13;
+	} else {
+		const _r = (node) => bindObservedNode("row:" + virtualListMeasurementKey(entry.rowKey, hasSeparator && entry.index < entries.length - 1), node, {
+			kind: "row",
+			rowKey: entry.rowKey
+		});
+		if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
+	}
+	_b.g = bindSignalChild(__s, _b.g, 1, _b.d, props.renderItem(entry.item, entry.index), "b:a1d755a0", null, void 0, void 0, void 0, true);
+	{
+		const __ifCondition = hasSeparator && entry.index < entries.length - 1;
+		ifBlock(__s, 2, _b.a, __ifCondition, __then$10, null, _b.c, __ifCondition ? [props] : void 0);
+	}
+}
+function __else$6(__props, __s, __extra) {
+	const __block = __s.block;
+	const bindObservedNode = __extra[0];
+	const entries = __extra[1];
+	const hasSeparator = __extra[2];
+	const props = __extra[3];
+	const range = __extra[4];
+	const visibleEntries = __extra[5];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m1, _m3, _m4, _m5;
+		const _root = clone(_t$4);
+		const _el0 = child(_root);
+		_m1 = _el0;
+		_m3 = sibling(_el0, 2);
+		_m4 = __block.parentNode;
+		_m5 = sibling(_el0, 1);
+		drainFrag(_root, __block.parentNode, __block.endMarker);
+		_b = bag6(__s, null, __s, _m1, __s, _m3, _m4, _m5);
+	}
+	{
+		const _v = range.top;
+		if (_b.a !== _v) {
+			setStyleProperty(_b.b, "height", _v, "", _b.a);
+			_b.a = _v;
+		}
+	}
+	{
+		const _v = range.bottom;
+		if (_b.c !== _v) {
+			setStyleProperty(_b.d, "height", _v, "", _b.c);
+			_b.c = _v;
+		}
+	}
+	forBlock(__s, 1, _b.e, visibleEntries, _key$7, __item$8, 58, [
+		bindObservedNode,
+		entries,
+		hasSeparator,
+		props
+	], null, _b.f, true, "f3hnb6e");
+}
+var _rm$18 = [
+	"r",
+	"b",
+	"a"
+];
+function __then$16(__props, __s, __extra) {
+	const bindObservedNode = __extra[0];
+	const props = __extra[1];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1;
+		const _root = clone(_t$5);
+		queueRefAttach(__s, _m1 = (node) => bindObservedNode("footer", node, { kind: "footer" }), _m0 = _root);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
+		_b = bag4(__s, _root, _m0, _m1, null, void 0);
+		__s.refFields = _rm$18;
+	} else {
+		const _r = (node) => bindObservedNode("footer", node, { kind: "footer" });
+		if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
+	}
+	_b.e = bindSignalChild(__s, _b.e, 1, _b.a, props.renderFooter(), "b:d63031d4", null, void 0, void 0, void 0, true);
+}
+var _rm$20 = [
+	"s",
+	"p",
+	"o"
+];
+function sameSize(a, b) {
+	return Math.abs(a - b) < .5;
+}
+var VirtualList = /* @__PURE__ */ __s(function VirtualList(props, __s, __extra) {
+	const __memoRegion = compilerMemoRegion(__s, _hs$ + 0);
+	let __hk = __memoRegion.hooks;
+	if (__hk === void 0) __memoRegion.hooks = __hk = hookMemoCreate(5);
+	let __hkd0, __hkd1, __hkd2;
+	const entries = (__hkd0 = props.items, __hkd1 = props.keyExtractor, __hkd2 = props.getItemType, __hk[0] !== true || !hookMemoEqual(__hk[1], __hkd0) || !hookMemoEqual(__hk[2], __hkd1) || !hookMemoEqual(__hk[3], __hkd2) ? hookMemoPublish3(__hk, 0, createVirtualListEntries(props.items, props.keyExtractor, props.getItemType), __hkd0, __hkd1, __hkd2) : __hk[4]);
+	const [windowVersion, setWindowVersion] = useState(0, _hs$ + 0);
+	const sizeIndexRef = useRef(new VirtualListSizeIndex(), _hs$ + 1);
+	const sizeCacheRef = useRef(/* @__PURE__ */ new Map(), _hs$ + 2);
+	const entriesRef = useRef([], _hs$ + 3);
+	const indexByRowKeyRef = useRef(/* @__PURE__ */ new Map(), _hs$ + 4);
+	const scrollRef = useRef(null, _hs$ + 5);
+	const scrollOffsetRef = useRef(0, _hs$ + 6);
+	const viewportHeightRef = useRef(0, _hs$ + 7);
+	const viewportWidthRef = useRef(0, _hs$ + 8);
+	const headerHeightRef = useRef(0, _hs$ + 9);
+	const footerHeightRef = useRef(0, _hs$ + 10);
+	const observerRef = useRef(null, _hs$ + 11);
+	const estimateScheduledRef = useRef(false, _hs$ + 12);
+	const nodesBySlotRef = useRef(/* @__PURE__ */ new Map(), _hs$ + 13);
+	const metaByNodeRef = useRef(/* @__PURE__ */ new WeakMap(), _hs$ + 14);
+	const rangeRef = useRef({
+		start: -1,
+		end: -1,
+		top: -1,
+		bottom: -1
+	}, _hs$ + 15);
+	const handlersRef = useRef(() => {}, _hs$ + 16);
+	const hasSeparator = Boolean(props.renderSeparator);
+	const hasSeparatorRef = useRef(hasSeparator, _hs$ + 17);
+	hasSeparatorRef.current = hasSeparator;
+	function rebuildLayout(nextEntries, width) {
+		entriesRef.current = nextEntries;
+		const indexByKey = /* @__PURE__ */ new Map();
+		const activeMeasurements = /* @__PURE__ */ new Set();
+		for (const entry of nextEntries) {
+			indexByKey.set(entry.rowKey, entry.index);
+			const cacheKey = virtualListMeasurementKey(entry.rowKey, hasSeparatorRef.current && entry.index < nextEntries.length - 1);
+			activeMeasurements.add(cacheKey);
+		}
+		for (const cacheKey of sizeCacheRef.current.keys()) if (!activeMeasurements.has(cacheKey)) sizeCacheRef.current.delete(cacheKey);
+		indexByRowKeyRef.current = indexByKey;
+		sizeIndexRef.current.reset(estimateVirtualListSizes(nextEntries, hasSeparatorRef.current, width, sizeCacheRef.current));
+	}
+	if (entries !== entriesRef.current) rebuildLayout(entries, viewportWidthRef.current);
+	function currentRange() {
+		const listOffset = Math.max(0, scrollOffsetRef.current - headerHeightRef.current);
+		return virtualListRange(sizeIndexRef.current, listOffset, viewportHeightRef.current, viewportHeightRef.current);
+	}
+	function refreshWindow() {
+		const next = currentRange();
+		const previous = rangeRef.current;
+		if (next.start !== previous.start || next.end !== previous.end || !sameSize(next.top, previous.top) || !sameSize(next.bottom, previous.bottom)) {
+			rangeRef.current = next;
+			setWindowVersion((version) => version + 1);
+		}
+	}
+	function captureAnchor() {
+		const listOffset = scrollOffsetRef.current - headerHeightRef.current;
+		if (listOffset < 0 || entriesRef.current.length === 0) return null;
+		const index = sizeIndexRef.current.indexAt(listOffset);
+		const entry = entriesRef.current[index];
+		if (!entry) return null;
+		return {
+			rowKey: entry.rowKey,
+			index,
+			within: listOffset - sizeIndexRef.current.prefix(index)
+		};
+	}
+	function restoreAnchor(anchor) {
+		if (!anchor) return;
+		const index = indexByRowKeyRef.current.get(anchor.rowKey);
+		if (index === void 0) return;
+		const nextOffset = Math.max(0, headerHeightRef.current + sizeIndexRef.current.prefix(index) + anchor.within);
+		if (sameSize(nextOffset, scrollOffsetRef.current)) return;
+		scrollOffsetRef.current = nextOffset;
+		if (scrollRef.current) scrollRef.current.scrollTop = nextOffset;
+	}
+	function scheduleEstimateRebuild() {
+		if (estimateScheduledRef.current) return;
+		estimateScheduledRef.current = true;
+		Promise.resolve().then(() => {
+			estimateScheduledRef.current = false;
+			const anchor = captureAnchor();
+			rebuildLayout(entriesRef.current, viewportWidthRef.current);
+			restoreAnchor(anchor);
+			refreshWindow();
+		});
+	}
+	function recordRowSize(rowKey, width, height) {
+		if (!Number.isFinite(height) || height < 0) return;
+		const index = indexByRowKeyRef.current.get(rowKey);
+		if (index === void 0) return;
+		if (!entriesRef.current[index]) return;
+		const hasRowSeparator = hasSeparatorRef.current && index < entriesRef.current.length - 1;
+		const cacheKey = virtualListMeasurementKey(rowKey, hasRowSeparator);
+		sizeCacheRef.current.set(cacheKey, {
+			width,
+			height
+		});
+		const anchor = captureAnchor();
+		const delta = sizeIndexRef.current.set(index, height);
+		if (Math.abs(delta) >= .5) {
+			if (anchor && index < anchor.index) restoreAnchor(anchor);
+			refreshWindow();
+		}
+		scheduleEstimateRebuild();
+	}
+	function bindObservedNode(slot, node, meta) {
+		const previous = nodesBySlotRef.current.get(slot);
+		if (previous && previous !== node) {
+			observerRef.current?.unobserve(previous);
+			metaByNodeRef.current.delete(previous);
+			nodesBySlotRef.current.delete(slot);
+		}
+		if (!node) {
+			if (previous) {
+				observerRef.current?.unobserve(previous);
+				metaByNodeRef.current.delete(previous);
+				nodesBySlotRef.current.delete(slot);
+			}
+			return;
+		}
+		nodesBySlotRef.current.set(slot, node);
+		metaByNodeRef.current.set(node, meta);
+		observerRef.current?.observe(node);
+	}
+	handlersRef.current = (meta, entry) => {
+		if (meta.kind === "viewport") {
+			const width = scrollRef.current?.clientWidth ?? entry.contentRect.width;
+			const height = scrollRef.current?.clientHeight ?? entry.contentRect.height;
+			const widthChanged = !sameSize(width, viewportWidthRef.current);
+			viewportHeightRef.current = height;
+			if (widthChanged) {
+				const anchor = captureAnchor();
+				viewportWidthRef.current = width;
+				rebuildLayout(entriesRef.current, width);
+				restoreAnchor(anchor);
+			}
+			refreshWindow();
+			return;
+		}
+		const height = entry.contentRect.height;
+		if (meta.kind === "row") {
+			recordRowSize(meta.rowKey, entry.contentRect.width, height);
+			return;
+		}
+		if (meta.kind === "header" && !sameSize(height, headerHeightRef.current)) {
+			const anchor = captureAnchor();
+			headerHeightRef.current = height;
+			restoreAnchor(anchor);
+			refreshWindow();
+		} else if (meta.kind === "footer" && !sameSize(height, footerHeightRef.current)) {
+			footerHeightRef.current = height;
+			refreshWindow();
+		}
+	};
+	useEffect(() => {
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver((records) => {
+			for (const record of records) {
+				const meta = metaByNodeRef.current.get(record.target);
+				if (meta) handlersRef.current(meta, record);
+			}
+		});
+		observerRef.current = observer;
+		for (const node of nodesBySlotRef.current.values()) observer.observe(node);
+		return () => {
+			observer.disconnect();
+			observerRef.current = null;
+		};
+	}, [], _hs$ + 18);
+	function onScroll(event) {
+		const root = event.currentTarget;
+		scrollOffsetRef.current = root.scrollTop;
+		refreshWindow();
+	}
+	const range = currentRange();
+	rangeRef.current = range;
+	const visibleEntries = entries.slice(range.start, range.end);
+	const style = {
+		...props.style,
+		minHeight: props.style?.minHeight ?? 0,
+		overflowY: "auto",
+		overflowX: "hidden",
+		overflowAnchor: "none"
+	};
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1, _m2, _m3, _m4, _m5, _m6, _m7, _m8, _m9, _m10, _m11, _m12, _m13, _m14, _m15, _m16, _m17, _m18;
+		const _root = clone(_t$6);
+		_m0 = (node) => {
+			scrollRef.current = node;
+			if (node) applyEscapeProps(node, props);
+			bindObservedNode("viewport", node, { kind: "viewport" });
+		};
+		_m1 = props.id;
+		_m2 = ["vx-virtual-list", props.className];
+		_m3 = snapshotSpread(layoutChildProps(props, style));
+		_m4 = props.accessibilityRole;
+		_m5 = props.accessibilityLabel;
+		_m6 = props.accessible === false ? true : void 0;
+		_m7 = props.accessibilityHint;
+		_m8 = props.accessibilityValue;
+		_m9 = props.accessibilityState?.disabled;
+		_m10 = props.accessibilityState?.selected;
+		_m11 = props.accessibilityState?.checked;
+		_m12 = props.accessibilityLiveRegion === "none" ? "off" : props.accessibilityLiveRegion;
+		_m13 = onScroll;
+		_m14 = _root;
+		_m15 = bindSignalHostPropSources(__s, void 0, _root, [
+			[
+				false,
+				"ref",
+				_m0
+			],
+			[
+				false,
+				"id",
+				_m1
+			],
+			[
+				false,
+				"className",
+				_m2
+			],
+			[true, _m3],
+			[
+				false,
+				"role",
+				_m4
+			],
+			[
+				false,
+				"aria-label",
+				_m5
+			],
+			[
+				false,
+				"aria-hidden",
+				_m6
+			],
+			[
+				false,
+				"aria-description",
+				_m7
+			],
+			[
+				false,
+				"aria-valuetext",
+				_m8
+			],
+			[
+				false,
+				"aria-disabled",
+				_m9
+			],
+			[
+				false,
+				"aria-selected",
+				_m10
+			],
+			[
+				false,
+				"aria-checked",
+				_m11
+			],
+			[
+				false,
+				"aria-live",
+				_m12
+			],
+			[
+				false,
+				"onScroll",
+				_m13
+			]
+		], "b:5767fa6f", true);
+		const _el0 = child(_root);
+		_m16 = _el0;
+		const _el1 = sibling(_el0, 1);
+		_m17 = _el1;
+		_m18 = sibling(_el1, 1);
+		_b = bagOf(__s, _root, {
+			a: _m0,
+			b: _m1,
+			c: _m2,
+			d: _m3,
+			e: _m4,
+			f: _m5,
+			g: _m6,
+			h: _m7,
+			i: _m8,
+			j: _m9,
+			k: _m10,
+			l: _m11,
+			m: _m12,
+			n: _m13,
+			o: _m14,
+			p: _m15,
+			q: _m16,
+			r: _m17,
+			s: _m18
+		});
+		__s.refFields = _rm$20;
+	} else {
+		{
+			const _v = (node) => {
+				scrollRef.current = node;
+				if (node) applyEscapeProps(node, props);
+				bindObservedNode("viewport", node, { kind: "viewport" });
+			};
+			if (_b.a !== _v) _b.a = _v;
+		}
+		{
+			const _v = props.id;
+			if (_b.b !== _v) _b.b = _v;
+		}
+		{
+			const _v = ["vx-virtual-list", props.className];
+			if (_b.c !== _v) _b.c = _v;
+		}
+		_b.d = snapshotSpread(layoutChildProps(props, style));
+		{
+			const _v = props.accessibilityRole;
+			if (_b.e !== _v) _b.e = _v;
+		}
+		{
+			const _v = props.accessibilityLabel;
+			if (_b.f !== _v) _b.f = _v;
+		}
+		{
+			const _v = props.accessible === false ? true : void 0;
+			if (_b.g !== _v) _b.g = _v;
+		}
+		{
+			const _v = props.accessibilityHint;
+			if (_b.h !== _v) _b.h = _v;
+		}
+		{
+			const _v = props.accessibilityValue;
+			if (_b.i !== _v) _b.i = _v;
+		}
+		{
+			const _v = props.accessibilityState?.disabled;
+			if (_b.j !== _v) _b.j = _v;
+		}
+		{
+			const _v = props.accessibilityState?.selected;
+			if (_b.k !== _v) _b.k = _v;
+		}
+		{
+			const _v = props.accessibilityState?.checked;
+			if (_b.l !== _v) _b.l = _v;
+		}
+		{
+			const _v = props.accessibilityLiveRegion === "none" ? "off" : props.accessibilityLiveRegion;
+			if (_b.m !== _v) _b.m = _v;
+		}
+		{
+			const _v = onScroll;
+			if (_b.n !== _v) _b.n = _v;
+		}
+		_b.p = bindSignalHostPropSources(__s, _b.p, _b.o, [
+			[
+				false,
+				"ref",
+				_b.a
+			],
+			[
+				false,
+				"id",
+				_b.b
+			],
+			[
+				false,
+				"className",
+				_b.c
+			],
+			[true, _b.d],
+			[
+				false,
+				"role",
+				_b.e
+			],
+			[
+				false,
+				"aria-label",
+				_b.f
+			],
+			[
+				false,
+				"aria-hidden",
+				_b.g
+			],
+			[
+				false,
+				"aria-description",
+				_b.h
+			],
+			[
+				false,
+				"aria-valuetext",
+				_b.i
+			],
+			[
+				false,
+				"aria-disabled",
+				_b.j
+			],
+			[
+				false,
+				"aria-selected",
+				_b.k
+			],
+			[
+				false,
+				"aria-checked",
+				_b.l
+			],
+			[
+				false,
+				"aria-live",
+				_b.m
+			],
+			[
+				false,
+				"onScroll",
+				_b.n
+			]
+		], "b:5767fa6f", true);
+	}
+	{
+		const __ifCondition$ = props.renderHeader;
+		ifBlock(__s, 1, _b.o, __ifCondition$, __then$0, null, _b.q, __ifCondition$ ? [bindObservedNode, props] : void 0);
+	}
+	ifBlock(__s, 2, _b.o, entries.length === 0, __then$4, __else$6, _b.r, [
+		bindObservedNode,
+		entries,
+		hasSeparator,
+		props,
+		range,
+		visibleEntries
+	]);
+	{
+		const __ifCondition$2 = props.renderFooter;
+		ifBlock(__s, 3, _b.o, __ifCondition$2, __then$16, null, _b.s, __ifCondition$2 ? [bindObservedNode, props] : void 0);
+	}
+});
+//#endregion
+export { VirtualList };