@parallelworks/ui 0.19.0 → 0.19.1

package/dist/file-explorer/FileRowsWindow.js

@@ -0,0 +1,92 @@
+import { useSlots, useStrings } from "../components/Provider.js";
+import { FileIcon, FolderIcon } from "../icons.js";
+import { canPreview } from "./FilePreview/previewType.js";
+import { getNodeIcon } from "./helpers.js";
+import { FileRow } from "./FileRow.js";
+import { LoadMoreRow } from "./LoadMoreRow.js";
+import { useEffect } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/file-explorer/FileRowsWindow.tsx
+/** `start`/`end` include scrollMargin but getTotalSize() does not, so the margin
+*  has to come back out of both. */
+function spacerHeights(items, totalSize, scrollMargin) {
+	const first = items[0];
+	const last = items[items.length - 1];
+	if (!first || !last) return {
+		top: 0,
+		bottom: 0
+	};
+	return {
+		top: Math.max(0, first.start - scrollMargin),
+		bottom: Math.max(0, totalSize - (last.end - scrollMargin))
+	};
+}
+/** Must stay a single child of `<Table>`: Table re-keys children by traversal
+*  index, so a count that varied with scroll position would remount every row. */
+function FileRowsWindow({ items, padTop, padBottom, nodes, checkedItems, activeIndex, rowIdPrefix, scrollEl, loadMore, getItems, openMenu, onOpen, onToggleCheck, onPreview }) {
+	const { storageIconUrl } = useSlots();
+	const storageIconAlt = useStrings().fileExplorer.chrome.storageIconAlt;
+	useNestedScrollerWarning(scrollEl, nodes.length);
+	useRowPitchAudit(scrollEl, nodes, items);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		padTop > 0 && /* @__PURE__ */ jsx(Spacer, { height: padTop }, "pad-top"),
+		items.map((item) => {
+			const node = nodes[item.index];
+			if (!node) return loadMore ? /* @__PURE__ */ jsx(LoadMoreRow, {
+				rowId: `${rowIdPrefix}-${item.index}`,
+				rowIndex: item.index + 2,
+				loading: loadMore.loading,
+				error: loadMore.error,
+				auto: loadMore.auto,
+				root: scrollEl,
+				onLoadMore: loadMore.onLoadMore
+			}, "load-more") : null;
+			const icon = getNodeIcon(node, storageIconUrl, storageIconAlt) ?? (node.type === "directory" ? /* @__PURE__ */ jsx(FolderIcon, { className: "h-4 w-4 text-sky-500/80" }) : /* @__PURE__ */ jsx(FileIcon, { className: "h-4 w-4 theme-muted-text" }));
+			return /* @__PURE__ */ jsx(FileRow, {
+				rowId: `${rowIdPrefix}-${item.index}`,
+				rowIndex: item.index + 2,
+				active: item.index === activeIndex,
+				node,
+				icon,
+				checked: checkedItems.has(node.path),
+				canPreview: canPreview(node),
+				getItems: () => getItems(node),
+				openMenu,
+				onOpen,
+				onToggleCheck,
+				onPreview
+			}, node.path);
+		}),
+		padBottom > 0 && /* @__PURE__ */ jsx(Spacer, { height: padBottom }, "pad-bottom")
+	] });
+}
+function Spacer({ height }) {
+	return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("tr", {
+		"aria-hidden": "true",
+		className: "border-0",
+		children: /* @__PURE__ */ jsx("td", {
+			colSpan: 5,
+			style: {
+				height,
+				padding: 0
+			}
+		})
+	}) });
+}
+/** A nested overflow container stealing the scroll leaves the virtualizer at
+*  scrollTop 0 forever, rendering only the first window. */
+function useNestedScrollerWarning(scrollEl, count) {
+	useEffect(() => {}, [scrollEl, count]);
+}
+/** The constants must equal the row *pitch*, not the row's own height —
+*  under border-collapse the shared border sits between rows. A 1px error
+*  compounds to 10,000px across a 10k-row directory. */
+function useRowPitchAudit(scrollEl, nodes, items) {
+	useEffect(() => {}, [
+		scrollEl,
+		nodes,
+		items
+	]);
+}
+//#endregion
+export { FileRowsWindow, spacerHeights };

package/dist/file-explorer/FileTable.js

@@ -0,0 +1,172 @@
+import { Table } from "../components/Table.js";
+import { listTableFixedProps } from "../list/ListTable.js";
+import { fileRowHeight } from "./FileRow.js";
+import { FileRowsWindow, spacerHeights } from "./FileRowsWindow.js";
+import { FileTableHeaders } from "./FileTableHeaders.js";
+import cx from "classnames";
+import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useVirtualizer } from "@tanstack/react-virtual";
+//#region src/file-explorer/FileTable.tsx
+/** The file table. Give it a `key` of the folder path: a folder change must reset
+*  the cursor, the scroll offset and the virtualizer's measurements, and a remount
+*  does all three without a synchronising effect. */
+function FileTable({ nodes, checkedItems, allSelected, someSelected, onSelectAll, getItems, openMenu, onOpen, onToggleCheck, onPreview, loadMore }) {
+	const [scrollEl, setScrollEl] = useState(null);
+	const [activeIndex, setActiveIndex] = useState(-1);
+	const [theadHeight, setTheadHeight] = useState(0);
+	const rowIdPrefix = useId();
+	useLayoutEffect(() => {
+		const thead = scrollEl?.querySelector("thead");
+		if (thead instanceof HTMLElement) setTheadHeight(thead.offsetHeight);
+	}, [scrollEl]);
+	const getRowKey = useCallback((index) => nodes[index]?.path ?? "load-more", [nodes]);
+	const estimateSize = useCallback((index) => {
+		const node = nodes[index];
+		return node ? fileRowHeight(node) : 45;
+	}, [nodes]);
+	const virtualizer = useVirtualizer({
+		count: nodes.length + (loadMore ? 1 : 0),
+		getScrollElement: () => scrollEl,
+		estimateSize,
+		getItemKey: getRowKey,
+		overscan: 8,
+		scrollMargin: theadHeight
+	});
+	const moveCursor = useCallback((next) => {
+		const clamped = Math.min(nodes.length - 1, Math.max(0, next));
+		setActiveIndex(clamped);
+		virtualizer.scrollToIndex(clamped);
+	}, [nodes.length, virtualizer]);
+	const handleOpen = useCallback((node) => {
+		setActiveIndex(nodes.findIndex((n) => n.path === node.path));
+		onOpen(node);
+	}, [nodes, onOpen]);
+	const rowIndexOf = useCallback((target) => {
+		const tr = target instanceof HTMLElement ? target.closest("tr") : null;
+		if (!tr?.id.startsWith(`${rowIdPrefix}-`)) return -1;
+		const index = Number(tr.id.slice(rowIdPrefix.length + 1));
+		return Number.isInteger(index) ? index : -1;
+	}, [rowIdPrefix]);
+	const handleKeyDown = useCallback((e) => {
+		if (nodes.length === 0) return;
+		const page = Math.max(1, Math.floor((scrollEl?.clientHeight ?? 0) / 45));
+		const fromRow = e.target === e.currentTarget ? -1 : rowIndexOf(e.target);
+		const from = fromRow >= 0 ? fromRow : activeIndex;
+		const step = (delta) => from < 0 ? 0 : from + delta;
+		const go = (next) => {
+			e.preventDefault();
+			if (e.target !== e.currentTarget) e.currentTarget.focus({ preventScroll: true });
+			moveCursor(next);
+		};
+		switch (e.key) {
+			case "ArrowDown":
+				go(step(1));
+				return;
+			case "ArrowUp":
+				go(step(-1));
+				return;
+			case "PageDown":
+				go(step(page));
+				return;
+			case "PageUp":
+				go(step(-page));
+				return;
+			case "Home":
+				go(0);
+				return;
+			case "End":
+				go(nodes.length - 1);
+				return;
+		}
+		if (e.target !== e.currentTarget || from < 0) return;
+		const node = nodes[from];
+		if (!node) return;
+		if (e.key === "Enter") {
+			e.preventDefault();
+			onOpen(node);
+		} else if (e.key === " ") {
+			e.preventDefault();
+			onToggleCheck(node, !checkedItems.has(node.path));
+		}
+	}, [
+		nodes,
+		activeIndex,
+		scrollEl,
+		moveCursor,
+		onOpen,
+		onToggleCheck,
+		checkedItems,
+		rowIndexOf
+	]);
+	const items = virtualizer.getVirtualItems();
+	const { top, bottom } = spacerHeights(items, virtualizer.getTotalSize(), theadHeight);
+	const incomplete = !!loadMore;
+	const anchorRef = useRef(null);
+	const wasIncomplete = useRef(incomplete);
+	const visibleStart = virtualizer.range?.startIndex;
+	useEffect(() => {
+		if (visibleStart !== void 0) anchorRef.current = nodes[visibleStart]?.path ?? null;
+	}, [visibleStart, nodes]);
+	useLayoutEffect(() => {
+		if (wasIncomplete.current && !incomplete) {
+			const index = anchorRef.current ? nodes.findIndex((node) => node.path === anchorRef.current) : -1;
+			if (index > 0) virtualizer.scrollToIndex(index, { align: "start" });
+		}
+		wasIncomplete.current = incomplete;
+	}, [
+		incomplete,
+		nodes,
+		virtualizer
+	]);
+	const activeRowId = useMemo(() => activeIndex >= 0 && items.some((i) => i.index === activeIndex) ? `${rowIdPrefix}-${activeIndex}` : void 0, [
+		activeIndex,
+		items,
+		rowIdPrefix
+	]);
+	const handleFocus = (e) => {
+		if (e.target !== e.currentTarget || activeIndex >= 0 || nodes.length === 0) return;
+		setActiveIndex(Math.min(virtualizer.range?.startIndex ?? 0, nodes.length - 1));
+	};
+	return /* @__PURE__ */ jsx("div", {
+		ref: setScrollEl,
+		className: "h-full overflow-auto",
+		children: /* @__PURE__ */ jsxs(Table, {
+			...listTableFixedProps,
+			className: cx(listTableFixedProps.className, "group/grid focus:outline-none"),
+			wrapperClassName: "overflow-x-auto",
+			tableProps: {
+				role: "grid",
+				"aria-label": "Files",
+				"aria-rowcount": loadMore ? -1 : nodes.length + 1,
+				"aria-multiselectable": true,
+				tabIndex: 0,
+				onKeyDown: handleKeyDown,
+				onFocus: handleFocus,
+				...activeRowId && { "aria-activedescendant": activeRowId }
+			},
+			children: [/* @__PURE__ */ jsx(FileTableHeaders, {
+				allSelected,
+				someSelected,
+				onSelectAll
+			}), /* @__PURE__ */ jsx(FileRowsWindow, {
+				items,
+				padTop: top,
+				padBottom: bottom,
+				nodes,
+				checkedItems,
+				activeIndex,
+				rowIdPrefix,
+				scrollEl,
+				loadMore,
+				getItems,
+				openMenu,
+				onOpen: handleOpen,
+				onToggleCheck,
+				onPreview
+			})]
+		})
+	});
+}
+//#endregion
+export { FileTable };

package/dist/file-explorer/FileTableHeaders.js

@@ -0,0 +1,49 @@
+import { useStrings } from "../components/Provider.js";
+import { Table } from "../components/Table.js";
+import { ListActionsHeader } from "../list/ListTable.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/file-explorer/FileTableHeaders.tsx
+/** Carries `isTableHeader` so `Table` hoists these into `<thead>`; a bare fragment
+*  would land in `<tbody>`, since Children.toArray only flattens arrays. */
+function FileTableHeaders({ allSelected, someSelected, onSelectAll }) {
+	const t = useStrings().fileExplorer;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(Table.Header, {
+			caps: false,
+			className: "py-2",
+			style: { minWidth: 200 },
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2.5",
+				children: [/* @__PURE__ */ jsx("input", {
+					type: "checkbox",
+					"aria-label": t.chrome.selectAll,
+					className: "h-4 w-4 cursor-pointer rounded border-(--theme-border) text-blue-500 focus:ring-blue-500 focus:ring-offset-0",
+					ref: (el) => {
+						if (el) el.indeterminate = someSelected && !allSelected;
+					},
+					onChange: onSelectAll,
+					checked: allSelected
+				}), /* @__PURE__ */ jsx("span", { children: t.chrome.name })]
+			})
+		}),
+		/* @__PURE__ */ jsx(Table.Header, {
+			caps: false,
+			className: "w-[14%] py-2",
+			children: "Size"
+		}),
+		/* @__PURE__ */ jsx(Table.Header, {
+			caps: false,
+			className: "w-[14%] py-2",
+			children: "Type"
+		}),
+		/* @__PURE__ */ jsx(Table.Header, {
+			caps: false,
+			className: "w-[22%] py-2",
+			children: "Last Modified"
+		}),
+		/* @__PURE__ */ jsx(ListActionsHeader, { actionCount: 1 })
+	] });
+}
+FileTableHeaders.isTableHeader = true;
+//#endregion
+export { FileTableHeaders };

package/dist/file-explorer/LoadMoreRow.js

@@ -0,0 +1,46 @@
+import { useStrings } from "../components/Provider.js";
+import Loader from "../components/Loader.js";
+import { useNearEnd } from "./useNearEnd.js";
+import { useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function LoadMoreRow({ rowId, rowIndex, loading, error, auto, root, onLoadMore }) {
+	const t = useStrings().fileExplorer;
+	const ref = useRef(null);
+	useNearEnd(ref, {
+		active: auto && !loading && !error,
+		root,
+		onNear: onLoadMore
+	});
+	return /* @__PURE__ */ jsx("tr", {
+		ref,
+		id: rowId,
+		"aria-rowindex": rowIndex,
+		style: { height: 45 },
+		children: /* @__PURE__ */ jsx("td", {
+			colSpan: 5,
+			className: "px-4 text-sm theme-muted-text",
+			children: error ? /* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx("span", { children: error }), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "cursor-pointer underline theme-link",
+					onClick: onLoadMore,
+					children: t.retry
+				})]
+			}) : loading ? /* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx(Loader, {
+					size: 16,
+					full: false
+				}), /* @__PURE__ */ jsx("span", { children: t.loadingMore })]
+			}) : /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "cursor-pointer underline theme-link",
+				onClick: onLoadMore,
+				children: t.loadMore
+			})
+		})
+	});
+}
+//#endregion
+export { LoadMoreRow };