@unpunnyfuns/swatchbook-blocks 0.69.1 → 1.0.0-alpha.1

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import './style.css';
 import { COLOR_FORMATS } from "@unpunnyfuns/swatchbook-core/color-formats";
 import { formatColor, parseColor } from "@unpunnyfuns/swatchbook-core/format-color";
-import { createContext, memo, useCallback, useContext, useDeferredValue, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { createContext, memo, useCallback, useContext, useDeferredValue, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { getVariance, listPaths, resolveAllWithProvenanceAt } from "@unpunnyfuns/swatchbook-core/graph";
 import { makeCssVar } from "@unpunnyfuns/swatchbook-core/css-var";
 import { SWATCHBOOK_STYLE_ELEMENT_ID, ensureStyleElement } from "@unpunnyfuns/swatchbook-core/style-element";
@@ -11,6 +11,7 @@ import { dataAttr } from "@unpunnyfuns/swatchbook-core/data-attr";
 import { matchPath } from "@unpunnyfuns/swatchbook-core/match-path";
 import { fuzzyFilter } from "@unpunnyfuns/swatchbook-core/fuzzy";
 import cx from "clsx";
+import { useWindowVirtualizer } from "@tanstack/react-virtual";
 //#region src/internal/channel.ts
 let channel = null;
 const pending = /* @__PURE__ */ new Set();
@@ -4969,12 +4970,120 @@ function TokenTableView({ rows, activeTheme, cssVarPrefix, activeAxes, colorForm
 		deferredQuery,
 		searchable
 	]);
+	const VIRTUALIZE_THRESHOLD = 50;
+	const scrollParentRef = useRef(null);
+	const [scrollMargin, setScrollMargin] = useState(0);
+	const virtualize = typeof window !== "undefined" && visibleRows.length >= VIRTUALIZE_THRESHOLD;
+	useLayoutEffect(() => {
+		if (!virtualize) return;
+		const el = scrollParentRef.current;
+		if (!el) return;
+		const update = () => setScrollMargin(el.getBoundingClientRect().top + window.scrollY);
+		update();
+		const observer = new ResizeObserver(update);
+		observer.observe(document.body);
+		window.addEventListener("resize", update);
+		return () => {
+			observer.disconnect();
+			window.removeEventListener("resize", update);
+		};
+	}, [virtualize]);
+	const virtualizer = useWindowVirtualizer({
+		count: virtualize ? visibleRows.length : 0,
+		estimateSize: () => 40,
+		overscan: 8,
+		scrollMargin
+	});
+	const virtualItems = virtualize ? virtualizer.getVirtualItems() : [];
+	const padTop = virtualItems.length > 0 ? (virtualItems[0]?.start ?? 0) - scrollMargin : 0;
+	const padBottom = virtualItems.length > 0 ? virtualizer.getTotalSize() - ((virtualItems[virtualItems.length - 1]?.end ?? 0) - scrollMargin) : 0;
 	const handleRowClick = useCallback((path) => {
 		if (onSelect) onSelect(path);
 		else setSelectedPath(path);
 	}, [onSelect, setSelectedPath]);
 	const matchSuffix = searchable && query.trim() !== "" ? ` · ${visibleRows.length} matching "${query.trim()}"` : "";
 	const captionText = caption ?? `${rows.length} token${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""}${type ? ` · $type=${type}` : ""}${matchSuffix} · ${activeTheme}`;
+	const renderRow = (row, rowIndex, measureRef) => {
+		const token = row.token;
+		return /* @__PURE__ */ jsxs("tr", {
+			ref: measureRef,
+			"data-index": rowIndex,
+			"aria-rowindex": rowIndex + 2,
+			className: "sb-token-table__row",
+			onClick: () => handleRowClick(row.path),
+			onKeyDown: (e) => {
+				if (e.key === "Enter" || e.key === " ") {
+					e.preventDefault();
+					handleRowClick(row.path);
+				}
+			},
+			tabIndex: 0,
+			"aria-haspopup": "dialog",
+			"aria-label": `Inspect ${row.path}`,
+			"data-testid": "token-table-row",
+			"data-path": row.path,
+			children: [
+				/* @__PURE__ */ jsx("td", {
+					className: cx("sb-token-table__td", "sb-token-table__path"),
+					"data-deprecated": enabledIndicators.deprecation && row.isDeprecated ? "true" : void 0,
+					children: row.path
+				}),
+				/* @__PURE__ */ jsx("td", {
+					className: "sb-token-table__td",
+					children: /* @__PURE__ */ jsxs("span", {
+						className: "sb-token-table__value-cell",
+						children: [
+							row.type && /* @__PURE__ */ jsx("span", {
+								className: "sb-token-table__type-pill",
+								children: row.type
+							}),
+							row.isColor && /* @__PURE__ */ jsx("span", {
+								className: "sb-token-table__swatch",
+								style: { background: row.cssVar },
+								"aria-hidden": true
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "sb-token-table__value-text",
+								title: row.value,
+								"data-testid": "token-table-value",
+								children: row.value
+							}),
+							row.outOfGamut && /* @__PURE__ */ jsx("span", {
+								title: "Out of sRGB gamut for this format",
+								"aria-label": "out of gamut",
+								className: "sb-token-table__gamut-warn",
+								children: "⚠"
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "sb-token-table__copy-wrap",
+								onClick: (e) => e.stopPropagation(),
+								onKeyDown: (e) => e.stopPropagation(),
+								role: "presentation",
+								children: /* @__PURE__ */ jsx(CopyButton$1, {
+									value: row.value,
+									label: `Copy value ${row.value}`,
+									className: "sb-token-table__copy"
+								})
+							})
+						]
+					})
+				}),
+				/* @__PURE__ */ jsx("td", {
+					className: "sb-token-table__td sb-token-table__refs",
+					children: token && /* @__PURE__ */ jsx(RowIndicators, {
+						path: row.path,
+						token,
+						root: void 0,
+						variance: row.variance,
+						colorFormat,
+						canReference: (p) => validPaths.has(p),
+						onReferenceClick: (p) => setSelectedPath(p),
+						enabled: enabledIndicators
+					})
+				})
+			]
+		}, row.path);
+	};
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
 		...blockWrapperAttrs(cssVarPrefix, activeAxes),
 		children: /* @__PURE__ */ jsx("div", {
@@ -5005,114 +5114,62 @@ function TokenTableView({ rows, activeTheme, cssVarPrefix, activeAxes, colorForm
 			}),
 			/* @__PURE__ */ jsxs("table", {
 				className: "sb-token-table__table",
+				"aria-rowcount": visibleRows.length + 1,
 				children: [
 					/* @__PURE__ */ jsx("caption", {
 						className: "sb-token-table__caption",
 						children: captionText
 					}),
-					/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-						/* @__PURE__ */ jsx("th", {
-							className: cx("sb-token-table__th", "sb-token-table__th--path"),
-							children: "Path"
-						}),
-						/* @__PURE__ */ jsx("th", {
-							className: cx("sb-token-table__th", "sb-token-table__th--value"),
-							children: "Value"
-						}),
-						/* @__PURE__ */ jsx("th", {
-							className: "sb-token-table__th sb-token-table__th--refs",
-							children: /* @__PURE__ */ jsx("span", {
-								className: "sb-token-table__sr-status",
-								children: "References and status"
+					/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", {
+						"aria-rowindex": 1,
+						children: [
+							/* @__PURE__ */ jsx("th", {
+								className: cx("sb-token-table__th", "sb-token-table__th--path"),
+								children: "Path"
+							}),
+							/* @__PURE__ */ jsx("th", {
+								className: cx("sb-token-table__th", "sb-token-table__th--value"),
+								children: "Value"
+							}),
+							/* @__PURE__ */ jsx("th", {
+								className: "sb-token-table__th sb-token-table__th--refs",
+								children: /* @__PURE__ */ jsx("span", {
+									className: "sb-token-table__sr-status",
+									children: "References and status"
+								})
 							})
-						})
-					] }) }),
-					/* @__PURE__ */ jsxs("tbody", { children: [visibleRows.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsxs("td", {
-						colSpan: 3,
-						className: "sb-token-table__td sb-token-table__empty-row",
+						]
+					}) }),
+					/* @__PURE__ */ jsxs("tbody", {
+						ref: scrollParentRef,
 						children: [
-							"No tokens match \"",
-							query.trim(),
-							"\"."
+							visibleRows.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsxs("td", {
+								colSpan: 3,
+								className: "sb-token-table__td sb-token-table__empty-row",
+								children: [
+									"No tokens match \"",
+									query.trim(),
+									"\"."
+								]
+							}) }),
+							!virtualize && visibleRows.map((row, i) => renderRow(row, i)),
+							virtualize && padTop > 0 && /* @__PURE__ */ jsx("tr", {
+								"aria-hidden": "true",
+								style: { height: padTop },
+								children: /* @__PURE__ */ jsx("td", { colSpan: 3 })
+							}),
+							virtualize && virtualItems.map((vi) => {
+								const row = visibleRows[vi.index];
+								if (!row) return null;
+								return renderRow(row, vi.index, virtualizer.measureElement);
+							}),
+							virtualize && padBottom > 0 && /* @__PURE__ */ jsx("tr", {
+								"aria-hidden": "true",
+								style: { height: padBottom },
+								children: /* @__PURE__ */ jsx("td", { colSpan: 3 })
+							})
 						]
-					}) }), visibleRows.map((row) => {
-						const token = row.token;
-						return /* @__PURE__ */ jsxs("tr", {
-							className: "sb-token-table__row",
-							onClick: () => handleRowClick(row.path),
-							onKeyDown: (e) => {
-								if (e.key === "Enter" || e.key === " ") {
-									e.preventDefault();
-									handleRowClick(row.path);
-								}
-							},
-							tabIndex: 0,
-							"aria-haspopup": "dialog",
-							"aria-label": `Inspect ${row.path}`,
-							"data-testid": "token-table-row",
-							"data-path": row.path,
-							children: [
-								/* @__PURE__ */ jsx("td", {
-									className: cx("sb-token-table__td", "sb-token-table__path"),
-									"data-deprecated": enabledIndicators.deprecation && row.isDeprecated ? "true" : void 0,
-									children: row.path
-								}),
-								/* @__PURE__ */ jsx("td", {
-									className: "sb-token-table__td",
-									children: /* @__PURE__ */ jsxs("span", {
-										className: "sb-token-table__value-cell",
-										children: [
-											row.type && /* @__PURE__ */ jsx("span", {
-												className: "sb-token-table__type-pill",
-												children: row.type
-											}),
-											row.isColor && /* @__PURE__ */ jsx("span", {
-												className: "sb-token-table__swatch",
-												style: { background: row.cssVar },
-												"aria-hidden": true
-											}),
-											/* @__PURE__ */ jsx("span", {
-												className: "sb-token-table__value-text",
-												title: row.value,
-												"data-testid": "token-table-value",
-												children: row.value
-											}),
-											row.outOfGamut && /* @__PURE__ */ jsx("span", {
-												title: "Out of sRGB gamut for this format",
-												"aria-label": "out of gamut",
-												className: "sb-token-table__gamut-warn",
-												children: "⚠"
-											}),
-											/* @__PURE__ */ jsx("span", {
-												className: "sb-token-table__copy-wrap",
-												onClick: (e) => e.stopPropagation(),
-												onKeyDown: (e) => e.stopPropagation(),
-												role: "presentation",
-												children: /* @__PURE__ */ jsx(CopyButton$1, {
-													value: row.value,
-													label: `Copy value ${row.value}`,
-													className: "sb-token-table__copy"
-												})
-											})
-										]
-									})
-								}),
-								/* @__PURE__ */ jsx("td", {
-									className: "sb-token-table__td sb-token-table__refs",
-									children: token && /* @__PURE__ */ jsx(RowIndicators, {
-										path: row.path,
-										token,
-										root: void 0,
-										variance: row.variance,
-										colorFormat,
-										canReference: (p) => validPaths.has(p),
-										onReferenceClick: (p) => setSelectedPath(p),
-										enabled: enabledIndicators
-									})
-								})
-							]
-						}, row.path);
-					})] })
+					})
 				]
 			}),
 			selectedPath !== null && /* @__PURE__ */ jsx(DetailOverlay, {