@protobase/ui 0.14.0 → 0.14.1

package/dist/data-grid/data-grid.js

@@ -15,7 +15,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useTable } from "@tanstack/react-table";
 //#region src/data-grid/data-grid.tsx
 const headerHeight = 32;
-const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0, onScrollIndex, latencyMs = 150, sort: controlledSort, onSortChange, onOpenRow, rowActions, bulkActions, pinKey, defaultPinned, rowNumbers = true, compact = false, selectable = true, fit = false, className }) => {
+const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0, onScrollIndex, latencyMs = 150, sort: controlledSort, onSortChange, onOpenRow, rowActions, bulkActions, pinKey, defaultPinned, rowNumbers = true, compact = false, selectable = true, fit = false, scroll = "own", className }) => {
 	const rowHeight = compact ? 28 : 36;
 	const [pinned, setPinned] = usePinnedColumns(pinKey, defaultPinned);
 	const columns = useMemo(() => {
@@ -50,16 +50,16 @@ const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0,
 		reverse,
 		total
 	]);
-	const { ref, onScroll, viewport, top, geometry, rows: virtualRows, first: firstIndex, last: lastIndex } = useVirtualRows({
+	const [startIndex] = useState(initialScrollIndex);
+	const { ref, top, geometry, rows: virtualRows, first: firstIndex, last: lastIndex } = useVirtualRows({
 		total,
 		rowHeight,
-		initialIndex: initialScrollIndex,
+		initialIndex: startIndex,
 		inset: headerHeight
 	});
 	const narrow = !useIsDesktop();
 	const gutter = narrow || !rowNumbers ? 40 : gutterWidthFor(total);
-	const bodyHeight = Math.max(0, viewport - headerHeight);
-	const topIndex = Math.floor(top / rowHeight);
+	const topIndex = Math.floor(Math.max(0, top) / rowHeight);
 	useEffect(() => onScrollIndex?.(topIndex), [topIndex, onScrollIndex]);
 	const getRow = usePagedRows({
 		total,
@@ -99,9 +99,14 @@ const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0,
 	const trailing = rowActions && rowActions.length > 0 ? 40 : 0;
 	const minScale = narrow ? 1 : desktopMinScale;
 	const horizontal = useHorizontalScroll();
+	const headerRef = useRef(null);
+	const onBodyScroll = () => {
+		horizontal.onScroll();
+		if (headerRef.current && horizontal.ref.current) headerRef.current.scrollLeft = horizontal.ref.current.scrollLeft;
+	};
 	const [pins, setPins] = useState({});
 	useLayoutEffect(() => {
-		const header = horizontal.ref.current?.querySelector("[role=row]");
+		const header = headerRef.current?.querySelector("[role=row]");
 		if (!header) return;
 		let left = gutter;
 		const next = {};
@@ -118,89 +123,91 @@ const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0,
 		sorted: header.column.getIsSorted(),
 		onSort: (event) => header.column.getToggleSortingHandler()?.(event)
 	})));
-	const visibleRows = Math.max(1, Math.floor(bodyHeight / rowHeight));
-	const first = Math.min(total, Math.floor(top / rowHeight) + 1);
-	const last = Math.min(total, first + visibleRows - 1);
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("flex min-h-0 flex-col overflow-hidden rounded-lg border bg-background", className),
-		style: fit ? { height: headerHeight + total * rowHeight + 2 } : void 0,
-		children: [/* @__PURE__ */ jsx("div", {
+	const minWidth = gridMinWidth(columns, gutter, trailing, minScale);
+	const own = scroll === "own";
+	const header = /* @__PURE__ */ jsx("div", {
+		ref: headerRef,
+		className: cn("sticky z-20 shrink-0 overflow-hidden", own ? "top-0" : "top-[var(--pb-sticky-top,0px)]"),
+		children: /* @__PURE__ */ jsx("div", {
+			style: { minWidth },
+			children: /* @__PURE__ */ jsx(GridHeader, {
+				cells: headerCells,
+				specs: columns,
+				gutter,
+				trailing,
+				minScale,
+				pins,
+				lastPinned,
+				scrolled: horizontal.scrolled,
+				onTogglePin: togglePin,
+				selectable,
+				selectedCount,
+				onClearSelection: () => setRowSelection({})
+			})
+		})
+	});
+	const body = /* @__PURE__ */ jsx("div", {
+		ref: horizontal.attach,
+		onScroll: onBodyScroll,
+		className: "overflow-x-auto overflow-y-hidden overscroll-x-contain [-webkit-overflow-scrolling:touch]",
+		children: /* @__PURE__ */ jsx("div", {
 			ref,
-			onScroll,
-			className: "relative min-h-0 flex-1 overflow-y-auto overflow-x-hidden",
-			role: "grid",
-			"aria-rowcount": total,
-			children: /* @__PURE__ */ jsx("div", {
-				style: { height: geometry.contentHeight || void 0 },
-				children: /* @__PURE__ */ jsx("div", {
-					className: "sticky top-0",
-					style: { height: viewport },
-					children: viewport > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
-						ref: horizontal.attach,
-						onScroll: horizontal.onScroll,
-						className: "h-full overflow-x-auto overflow-y-hidden overscroll-x-contain [-webkit-overflow-scrolling:touch]",
-						children: /* @__PURE__ */ jsxs("div", {
-							className: "flex h-full flex-col",
-							style: { minWidth: gridMinWidth(columns, gutter, trailing, minScale) },
-							children: [/* @__PURE__ */ jsx(GridHeader, {
-								cells: headerCells,
-								specs: columns,
-								gutter,
-								trailing,
-								minScale,
-								pins,
-								lastPinned,
-								scrolled: horizontal.scrolled,
-								onTogglePin: togglePin,
-								selectable,
-								selectedCount,
-								onClearSelection: () => setRowSelection({})
-							}), /* @__PURE__ */ jsx("div", {
-								className: "relative min-h-0 flex-1 overflow-clip",
-								children: loaded.map(({ index, offset, row }) => {
-									const frame = {
-										specs: columns,
-										gutter,
-										index,
-										offset,
-										height: rowHeight,
-										selectable,
-										trailing,
-										minScale,
-										scrolled: horizontal.scrolled,
-										pins,
-										lastPinned
-									};
-									const tableRow = row ? tableRows.get(row.id) : void 0;
-									if (!tableRow) return /* @__PURE__ */ jsx(SkeletonRow, { ...frame }, `skeleton-${index}`);
-									const actions = trailing && row ? availableActions(rowActions, row) : [];
-									return /* @__PURE__ */ jsx(DataRow, {
-										...frame,
-										selected: tableRow.getIsSelected(),
-										onToggle: () => tableRow.toggleSelected(),
-										onOpen: onOpenRow && row ? () => onOpenRow(row) : void 0,
-										menu: row && actions.length > 0 ? /* @__PURE__ */ jsx(RowMenu, {
-											row,
-											actions
-										}) : void 0,
-										cells: tableRow.getAllCells().map((cell) => ({
-											spec: columns.find((spec) => spec.id === cell.column.id),
-											content: /* @__PURE__ */ jsx(table.FlexRender, { cell })
-										}))
-									}, row?.id);
-								})
-							})]
-						})
-					}), horizontal.more && /* @__PURE__ */ jsx("div", {
-						"aria-hidden": true,
-						className: "pointer-events-none absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-foreground/15 to-transparent"
-					})] })
-				})
+			className: "relative",
+			style: {
+				minWidth,
+				height: geometry.contentHeight
+			},
+			children: loaded.map(({ index, offset, row }) => {
+				const frame = {
+					specs: columns,
+					gutter,
+					index,
+					offset,
+					height: rowHeight,
+					selectable,
+					trailing,
+					minScale,
+					scrolled: horizontal.scrolled,
+					pins,
+					lastPinned
+				};
+				const tableRow = row ? tableRows.get(row.id) : void 0;
+				if (!tableRow) return /* @__PURE__ */ jsx(SkeletonRow, { ...frame }, `skeleton-${index}`);
+				const actions = trailing && row ? availableActions(rowActions, row) : [];
+				return /* @__PURE__ */ jsx(DataRow, {
+					...frame,
+					selected: tableRow.getIsSelected(),
+					onToggle: () => tableRow.toggleSelected(),
+					onOpen: onOpenRow && row ? () => onOpenRow(row) : void 0,
+					menu: row && actions.length > 0 ? /* @__PURE__ */ jsx(RowMenu, {
+						row,
+						actions
+					}) : void 0,
+					cells: tableRow.getAllCells().map((cell) => ({
+						spec: columns.find((spec) => spec.id === cell.column.id),
+						content: /* @__PURE__ */ jsx(table.FlexRender, { cell })
+					}))
+				}, row?.id);
 			})
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		role: "grid",
+		"aria-rowcount": total,
+		className: cn("flex flex-col rounded-lg border bg-background", own ? "min-h-0 overflow-hidden" : "overflow-clip", className),
+		style: fit && own ? { height: headerHeight + total * rowHeight + 2 } : void 0,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cn("relative", own && "flex min-h-0 flex-1 flex-col"),
+			children: [own ? /* @__PURE__ */ jsxs("div", {
+				className: "min-h-0 flex-1 overflow-y-auto overflow-x-hidden",
+				children: [header, body]
+			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [header, body] }), horizontal.more && /* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				className: "pointer-events-none absolute inset-y-0 right-0 z-20 w-8 bg-gradient-to-l from-foreground/15 to-transparent"
+			})]
 		}), !fit && /* @__PURE__ */ jsx(GridFooter, {
 			total,
-			first,
-			last,
+			className: own ? void 0 : "sticky bottom-[var(--pb-sticky-bottom,0px)] z-20",
 			selectedCount,
 			bulkActions: bulkActions?.map((action) => ({
 				label: action.label(selectedCount),

package/dist/data-grid/geometry.js

@@ -1,6 +1,7 @@
 //#region src/data-grid/geometry.ts
 /** Browsers cap element height (about 17M px in the strictest); stay well below it. */
 const maxContentHeight = 1e7;
+/** The list's height in the page, `contentHeight`: its true height, or the cap when the rows need more. */
 const gridGeometry = (total, rowHeight, viewportHeight) => {
 	const trueHeight = total * rowHeight;
 	const contentHeight = Math.min(trueHeight, maxContentHeight);
@@ -13,13 +14,32 @@ const gridGeometry = (total, rowHeight, viewportHeight) => {
 		maxScroll: Math.max(0, contentHeight - viewportHeight)
 	};
 };
-/** Maps the native scroll position onto the virtual (true) pixel offset. */
-const topFromScroll = (geometry, scrollTop) => geometry.maxScroll === 0 ? 0 : scrollTop / geometry.maxScroll * geometry.maxTop;
-const scrollFromTop = (geometry, top) => geometry.maxTop === 0 ? 0 : top / geometry.maxTop * geometry.maxScroll;
-const clampTop = (geometry, top) => Math.min(Math.max(0, top), geometry.maxTop);
+/**
+* The offset into the rows (the virtual offset) shown at `position`, how far the top of the view is into the list.
+* They are the same unless the list is capped: then the capped range maps onto all the rows, and a position before or
+* after it moves one to one.
+*/
+const topFromScroll = (geometry, position) => {
+	if (!geometry.scaled || position <= 0) return position;
+	if (position >= geometry.maxScroll) return geometry.maxTop + position - geometry.maxScroll;
+	return position / geometry.maxScroll * geometry.maxTop;
+};
+const scrollFromTop = (geometry, top) => {
+	if (!geometry.scaled || top <= 0) return top;
+	if (top >= geometry.maxTop) return geometry.maxScroll + top - geometry.maxTop;
+	return top / geometry.maxTop * geometry.maxScroll;
+};
+/**
+* Where row `index` is drawn in the list when the view at `position` shows the rows from `top`: its own place, or in a
+* capped list its place relative to the view, so that it scrolls with the page until the next draw.
+*/
+const rowOffset = (geometry, index, top, position) => {
+	const offset = index * geometry.rowHeight;
+	return geometry.scaled ? offset - top + position : offset;
+};
 /** The rows drawn for a scroll offset: those in a viewport of `height`, and `overscan` more on each side. */
 const rowsInView = (total, top, rowHeight, height, overscan) => {
-	const first = Math.max(0, Math.floor(top / rowHeight) - overscan);
+	const first = Math.min(total, Math.max(0, Math.floor(top / rowHeight) - overscan));
 	const last = Math.min(total - 1, Math.floor((top + height) / rowHeight) + overscan);
 	return {
 		first,
@@ -27,4 +47,4 @@ const rowsInView = (total, top, rowHeight, height, overscan) => {
 	};
 };
 //#endregion
-export { clampTop, gridGeometry, maxContentHeight, rowsInView, scrollFromTop, topFromScroll };
+export { gridGeometry, maxContentHeight, rowOffset, rowsInView, scrollFromTop, topFromScroll };

package/dist/data-grid/grid-footer.js

@@ -2,9 +2,10 @@ import { cn } from "../lib/cn.js";
 import { formatApproxRows, formatInt } from "../format/number.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/data-grid/grid-footer.tsx
-const GridFooter = ({ total, first, last, selectedCount, bulkActions = [] }) => /* @__PURE__ */ jsxs("div", {
-	className: "flex h-9 shrink-0 items-center justify-between border-t bg-surface px-3 text-xs text-muted-foreground",
-	children: [/* @__PURE__ */ jsxs("span", {
+/** How many rows match and, with rows selected, how many and what can be done with them. */
+const GridFooter = ({ total, selectedCount, bulkActions = [], className }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex h-9 shrink-0 items-center border-t bg-surface px-3 text-xs text-muted-foreground", className),
+	children: /* @__PURE__ */ jsxs("span", {
 		className: "flex items-center tabular-nums",
 		children: [
 			formatApproxRows(total),
@@ -19,15 +20,7 @@ const GridFooter = ({ total, first, last, selectedCount, bulkActions = [] }) =>
 				children: action.label
 			}, action.label))
 		]
-	}), /* @__PURE__ */ jsxs("span", {
-		className: "tabular-nums",
-		children: [
-			"Rows ",
-			formatInt(first),
-			" – ",
-			formatInt(last)
-		]
-	})]
+	})
 });
 //#endregion
 export { GridFooter };

package/dist/data-grid/scroll-parent.js

@@ -0,0 +1,35 @@
+//#region src/data-grid/scroll-parent.ts
+/**
+* The element that scrolls `element` up and down: its nearest ancestor that scrolls vertically, or the page's
+* scrolling element when none does.
+*/
+const scrollParent = (element) => {
+	const page = document.scrollingElement ?? document.documentElement;
+	for (let parent = element.parentElement; parent && parent !== page && parent !== document.body; parent = parent.parentElement) if (/auto|scroll/.test(getComputedStyle(parent).overflowY)) return parent;
+	return page;
+};
+const isPage = (scroller) => scroller === (document.scrollingElement ?? document.documentElement);
+/** Where scroll events of `scroller` are sent: the window for the page. */
+const scrollEvents = (scroller) => isPage(scroller) ? window : scroller;
+const padding = (value) => Number.parseFloat(value) || 0;
+/**
+* The part of `scroller` content shows in, in viewport coordinates: its box less its scroll padding, which is where
+* sticky bars over it say they are.
+*/
+const visibleArea = (scroller) => {
+	const style = getComputedStyle(scroller);
+	const box = isPage(scroller) ? {
+		top: 0,
+		height: scroller.clientHeight
+	} : {
+		top: scroller.getBoundingClientRect().top + scroller.clientTop,
+		height: scroller.clientHeight
+	};
+	const top = padding(style.scrollPaddingTop);
+	return {
+		top: box.top + top,
+		height: Math.max(0, box.height - top - padding(style.scrollPaddingBottom))
+	};
+};
+//#endregion
+export { scrollEvents, scrollParent, visibleArea };

package/dist/data-grid/use-virtual-rows.js

@@ -1,30 +1,135 @@
-import { rowsInView } from "./geometry.js";
-import { useGridScroll } from "./use-grid-scroll.js";
+import { gridGeometry, rowOffset, rowsInView, scrollFromTop, topFromScroll } from "./geometry.js";
+import { scrollEvents, scrollParent, visibleArea } from "./scroll-parent.js";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
 //#region src/data-grid/use-virtual-rows.ts
 const overscan = 6;
+const viewRows = (view, total, rowHeight) => {
+	const geometry = gridGeometry(total, rowHeight, view.height);
+	const top = topFromScroll(geometry, view.position);
+	return {
+		geometry,
+		top,
+		topIndex: Math.floor(Math.max(0, top) / rowHeight),
+		...rowsInView(total, top, rowHeight, view.height, overscan)
+	};
+};
 /**
-* Rows of a fixed height over a proxy scroller, so any number of rows scrolls at native speed: `ref` and `onScroll` go
-* on the scrolling element, and each drawn row sits at `offset` from the top of the viewport's rows, below `inset`.
+* Rows of a fixed height in a list as tall as all of them, scrolled natively by whatever scrolls it: the nearest
+* scrolling ancestor, or the page. Only the rows in view, and `overscan` more on each side, are drawn: `ref` goes on the
+* list's element, `geometry.contentHeight` tall, and each drawn row sits at `offset` from its top. Nothing listens for
+* wheel or touch: the list follows the scroll position, and draws again only when other rows come into view.
 * `first` and `last` are the indexes of the drawn rows, overscan included.
 */
-const useVirtualRows = ({ total, rowHeight, initialIndex, inset = 0, settle }) => {
-	const scroll = useGridScroll(total, rowHeight, initialIndex);
-	const { ref, onScroll, viewport, geometry, scrollTo } = scroll;
-	const top = settle ? settle(scroll.top) : scroll.top;
-	const { first, last } = rowsInView(total, top, rowHeight, Math.max(0, viewport - inset), overscan);
+const useVirtualRows = ({ total, rowHeight, initialIndex, inset = 0, settle, ready = true }) => {
+	const ref = useRef(null);
+	const scroller = useRef(null);
+	const [view, setView] = useState({
+		position: 0,
+		height: 0
+	});
+	const options = useRef({
+		total,
+		rowHeight,
+		initialIndex,
+		inset,
+		ready
+	});
+	options.current = {
+		total,
+		rowHeight,
+		initialIndex,
+		inset,
+		ready
+	};
+	const read = useCallback(() => {
+		const content = ref.current;
+		if (!content || !scroller.current) return void 0;
+		const area = visibleArea(scroller.current);
+		const hidden = options.current.inset;
+		return {
+			position: area.top + hidden - content.getBoundingClientRect().top,
+			height: Math.max(0, area.height - hidden)
+		};
+	}, []);
+	const shown = useRef(view);
+	shown.current = view;
+	const measure = useCallback(() => {
+		const next = read();
+		if (!next) return;
+		const current = shown.current;
+		const { total, rowHeight } = options.current;
+		const before = viewRows(current, total, rowHeight);
+		const after = viewRows(next, total, rowHeight);
+		const sameRows = !after.geometry.scaled && before.first === after.first && before.last === after.last && before.topIndex === after.topIndex;
+		if (current.height === next.height && (current.position === next.position || sameRows)) return;
+		shown.current = next;
+		setView(next);
+	}, [read]);
+	const start = useRef({
+		pending: true,
+		laidOut: false
+	});
+	const begin = useCallback(() => {
+		if (!start.current.pending || !start.current.laidOut || !options.current.ready) return;
+		const view = read();
+		const parent = scroller.current;
+		if (!view || !parent) return;
+		start.current.pending = false;
+		const { total, rowHeight, initialIndex } = options.current;
+		if (initialIndex > 0) parent.scrollTop += scrollFromTop(gridGeometry(total, rowHeight, view.height), initialIndex * rowHeight) - view.position;
+		else if (view.position > 0) parent.scrollTop = 0;
+	}, [read]);
+	useLayoutEffect(() => {
+		const content = ref.current;
+		if (!content) return;
+		const parent = scrollParent(content);
+		scroller.current = parent;
+		const events = scrollEvents(parent);
+		events.addEventListener("scroll", measure, { passive: true });
+		window.addEventListener("resize", measure, { passive: true });
+		const observer = new ResizeObserver(() => {
+			start.current.laidOut = true;
+			begin();
+			measure();
+		});
+		observer.observe(parent);
+		observer.observe(content);
+		measure();
+		return () => {
+			events.removeEventListener("scroll", measure);
+			window.removeEventListener("resize", measure);
+			observer.disconnect();
+			scroller.current = null;
+		};
+	}, [measure, begin]);
+	useLayoutEffect(() => {
+		begin();
+		measure();
+	});
+	/** Scrolls to a virtual offset, for a layout change that keeps a row in view. */
+	const scrollTo = useCallback((top) => {
+		const current = read();
+		if (!current || !scroller.current) return;
+		const geometry = gridGeometry(options.current.total, options.current.rowHeight, current.height);
+		scroller.current.scrollTop += scrollFromTop(geometry, top) - current.position;
+		measure();
+	}, [read, measure]);
+	const drawn = viewRows(view, total, rowHeight);
+	const top = settle ? settle(drawn.top) : drawn.top;
+	const { first, last } = settle ? rowsInView(total, top, rowHeight, view.height, overscan) : drawn;
+	const rows = Array.from({ length: last - first + 1 }, (_, offset) => ({
+		index: first + offset,
+		offset: rowOffset(drawn.geometry, first + offset, top, view.position)
+	}));
 	return {
 		ref,
-		onScroll,
-		viewport,
+		height: view.height,
 		top,
-		geometry,
-		scrollTo,
-		rows: Array.from({ length: last - first + 1 }, (_, offset) => ({
-			index: first + offset,
-			offset: (first + offset) * rowHeight - top
-		})),
+		geometry: drawn.geometry,
+		rows,
 		first,
-		last
+		last,
+		scrollTo
 	};
 };
 //#endregion

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.14.0";
+var version = "0.14.1";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };