@parallelworks/ui 0.52.0 → 0.53.0

package/dist/file-explorer/FileTable.js

@@ -12,7 +12,7 @@ import { useVirtualizer } from "@tanstack/react-virtual";
 /** 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 }) {
+function FileTable({ nodes, checkedItems, allSelected, someSelected, onSelectAll, getItems, openMenu, onOpen, onToggleCheck, onPreview, pathHref, loadMore }) {
 	const [scrollEl, setScrollEl] = useState(null);
 	const [activeIndex, setActiveIndex] = useState(-1);
 	const [theadHeight, setTheadHeight] = useState(0);
@@ -165,7 +165,8 @@ function FileTable({ nodes, checkedItems, allSelected, someSelected, onSelectAll
 				openMenu,
 				onOpen: handleOpen,
 				onToggleCheck,
-				onPreview
+				onPreview,
+				pathHref
 			})]
 		})
 	});

package/dist/file-explorer/TreeView.d.ts

@@ -13,6 +13,10 @@ interface TreeViewProps {
     onDropToFolder: (folderPath: string, files: FileList | DataTransferItemList) => void;
     onContextMenu: (e: React.MouseEvent, node: TreeNode) => void;
     onPreviewFile: (node: TreeNode) => void;
+    /** The URL of a path; set, each row is a link to its path. */
+    pathHref?: ((path: string) => string) | undefined;
+    /** A plain click on a row's link, which moves to its path on its own. */
+    onFollowLink?: ((node: TreeNode) => void) | undefined;
     /** Directories with pages left to fetch, and how to fetch them. */
     paging?: {
         incompletePaths: ReadonlySet<string>;
@@ -23,5 +27,5 @@ interface TreeViewProps {
 }
 /** The sidebar tree, flattened and windowed. The flat array is the single source
  *  of truth for rendering, arrow keys and ARIA. */
-export declare function TreeView({ rootNodes, parentToChildrenMap, expandedPaths, selectedPath, loadingPaths, onToggleExpand, onSelect, onDropToFolder, onContextMenu, onPreviewFile, paging, }: TreeViewProps): import("react").JSX.Element;
+export declare function TreeView({ rootNodes, parentToChildrenMap, expandedPaths, selectedPath, loadingPaths, onToggleExpand, onSelect, onDropToFolder, onContextMenu, onPreviewFile, pathHref, onFollowLink, paging, }: TreeViewProps): import("react").JSX.Element;
 export {};

package/dist/file-explorer/TreeView.js

@@ -3,8 +3,9 @@ import { ChevronRightIcon, FolderIcon, FolderOpenIcon } from "../icons.js";
 import { isDev } from "../dev.js";
 import { positionKeys } from "../components/keys.js";
 import { useStrings } from "../components/Provider.js";
+import { AppLink, isPlainClick } from "../components/AppLink.js";
 import { Skeleton } from "../components/Skeleton.js";
-import { getParentPath } from "./lib/utils.js";
+import { carriesFiles, getParentPath } from "./lib/utils.js";
 import { canPreview } from "./FilePreview/previewType.js";
 import { getNodeIcon } from "./helpers.js";
 import { edgeRow, findRowIndex, firstChildRow, flattenTreeRows, nextFileLimit, parentRow, stepRow } from "./treeRows.js";
@@ -23,7 +24,7 @@ function rowHeight(row) {
 }
 /** The sidebar tree, flattened and windowed. The flat array is the single source
 *  of truth for rendering, arrow keys and ARIA. */
-function TreeView({ rootNodes, parentToChildrenMap, expandedPaths, selectedPath, loadingPaths, onToggleExpand, onSelect, onDropToFolder, onContextMenu, onPreviewFile, paging }) {
+function TreeView({ rootNodes, parentToChildrenMap, expandedPaths, selectedPath, loadingPaths, onToggleExpand, onSelect, onDropToFolder, onContextMenu, onPreviewFile, pathHref, onFollowLink, paging }) {
 	const [scrollEl, setScrollEl] = useState(null);
 	const treeLabel = useStrings().fileExplorer.chrome.folders;
 	const [fileLimits, setFileLimits] = useState(() => /* @__PURE__ */ new Map());
@@ -151,6 +152,8 @@ function TreeView({ rootNodes, parentToChildrenMap, expandedPaths, selectedPath,
 			}) : /* @__PURE__ */ jsx(TreeRowItem, {
 				row,
 				isSelected: row.node.path === selectedPath,
+				href: pathHref?.(row.node.path),
+				onFollowLink,
 				onToggleExpand,
 				onSelect,
 				onDropToFolder,
@@ -269,6 +272,7 @@ function useSpringLoadedDrop({ node, dropPath, isDirectory, isExpanded, onToggle
 		dragHandlers: {
 			onDragEnter: (e) => {
 				e.preventDefault();
+				if (!carriesFiles(e.dataTransfer)) return;
 				e.stopPropagation();
 				hoverCount.current += 1;
 				setDragActive(true);
@@ -280,6 +284,7 @@ function useSpringLoadedDrop({ node, dropPath, isDirectory, isExpanded, onToggle
 			onDragOver: (e) => e.preventDefault(),
 			onDragLeave: (e) => {
 				e.preventDefault();
+				if (!carriesFiles(e.dataTransfer)) return;
 				e.stopPropagation();
 				hoverCount.current -= 1;
 				if (hoverCount.current > 0) return;
@@ -287,8 +292,9 @@ function useSpringLoadedDrop({ node, dropPath, isDirectory, isExpanded, onToggle
 				clear();
 			},
 			onDrop: (e) => {
-				e.stopPropagation();
 				e.preventDefault();
+				if (!carriesFiles(e.dataTransfer)) return;
+				e.stopPropagation();
 				hoverCount.current = 0;
 				setDragActive(false);
 				clear();
@@ -300,8 +306,9 @@ function useSpringLoadedDrop({ node, dropPath, isDirectory, isExpanded, onToggle
 /** Keys a row handles itself: Enter, Space, and Right or Left on a folder that
 *  can open or close. The keys that move between rows delegate upward, where
 *  the flat array is. There is no typeahead. */
-function dispatchRowKey(e, { node, isDirectory, isExpanded, onSelect, onToggleExpand, onDelegate }) {
+function dispatchRowKey(e, { node, isDirectory, isExpanded, isLink, onSelect, onToggleExpand, onDelegate }) {
 	if (e.key === "Enter") {
+		if (isLink && (e.metaKey || e.ctrlKey || e.shiftKey)) return;
 		e.preventDefault();
 		onSelect(e);
 		return;
@@ -319,7 +326,7 @@ function dispatchRowKey(e, { node, isDirectory, isExpanded, onSelect, onToggleEx
 	}
 	onDelegate(e, node);
 }
-var TreeRowItem = memo(function TreeRowItem({ row, isSelected, onToggleExpand, onSelect, onDropToFolder, onContextMenu, onKeyDown }) {
+var TreeRowItem = memo(function TreeRowItem({ row, isSelected, href, onFollowLink, onToggleExpand, onSelect, onDropToFolder, onContextMenu, onKeyDown }) {
 	const { node, depth, isExpanded } = row;
 	const isDirectory = node.type === "directory";
 	const { dragActive, dragHandlers } = useSpringLoadedDrop({
@@ -335,40 +342,57 @@ var TreeRowItem = memo(function TreeRowItem({ row, isSelected, onToggleExpand, o
 		onSelect(node.path, node);
 		if (isDirectory) onToggleExpand(node.path);
 	};
+	const handleLinkClick = (e) => {
+		if (!isPlainClick(e)) return;
+		onFollowLink?.(node);
+		if (isDirectory) onToggleExpand(node.path);
+	};
 	const handleKeyDown = (e) => dispatchRowKey(e, {
 		node,
 		isDirectory,
 		isExpanded,
+		isLink: !!href,
 		onSelect: handleSelect,
 		onToggleExpand,
 		onDelegate: onKeyDown
 	});
 	const customIcon = getNodeIcon(node);
 	const label = isDirectory && node.storageId && node.displayName ? node.displayName : node.name;
+	const tabIndex = isSelected ? 0 : -1;
+	const itemProps = {
+		className: cx("group relative flex items-center gap-1.5 pr-2 py-1 rounded-md cursor-pointer", "transition-colors duration-150", "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--theme-link)", isSelected ? "bg-(--theme-accent)/15 font-medium" : dragActive ? "theme-hover" : "hover:theme-hover"),
+		style: indentStyle(depth, isDirectory),
+		onContextMenu: (e) => onContextMenu(e, node),
+		"aria-level": depth + 1,
+		"aria-posinset": row.posInSet,
+		"aria-setsize": row.setSize,
+		"aria-selected": isSelected,
+		...isDirectory && { "aria-expanded": isExpanded },
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(RowIcons, {
+			isDirectory,
+			isExpanded,
+			customIcon
+		}), /* @__PURE__ */ jsx("span", {
+			className: "text-sm truncate",
+			children: label
+		})] })
+	};
 	return /* @__PURE__ */ jsxs("div", {
 		className: cx("relative h-full rounded-md transition-[box-shadow,background-color] duration-150", dragActive && "ring-1 ring-(--theme-link)/60"),
 		...dragHandlers,
-		children: [/* @__PURE__ */ jsx(IndentGuides, { depth }), /* @__PURE__ */ jsxs("div", {
-			className: cx("group relative flex items-center gap-1.5 pr-2 py-1 rounded-md cursor-pointer", "transition-colors duration-150", "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--theme-link)", isSelected ? "bg-(--theme-accent)/15 font-medium" : dragActive ? "theme-hover" : "hover:theme-hover"),
-			style: indentStyle(depth, isDirectory),
-			onClick: handleSelect,
-			onKeyDown: handleKeyDown,
-			onContextMenu: (e) => onContextMenu(e, node),
+		children: [/* @__PURE__ */ jsx(IndentGuides, { depth }), href ? /* @__PURE__ */ jsx(AppLink, {
+			...itemProps,
 			role: "treeitem",
-			"aria-level": depth + 1,
-			"aria-posinset": row.posInSet,
-			"aria-setsize": row.setSize,
-			"aria-selected": isSelected,
-			...isDirectory && { "aria-expanded": isExpanded },
-			tabIndex: isSelected ? 0 : -1,
-			children: [/* @__PURE__ */ jsx(RowIcons, {
-				isDirectory,
-				isExpanded,
-				customIcon
-			}), /* @__PURE__ */ jsx("span", {
-				className: "text-sm truncate",
-				children: label
-			})]
+			tabIndex,
+			href,
+			onClick: handleLinkClick,
+			onKeyDown: handleKeyDown
+		}) : /* @__PURE__ */ jsx("div", {
+			...itemProps,
+			role: "treeitem",
+			tabIndex,
+			onClick: handleSelect,
+			onKeyDown: handleKeyDown
 		})]
 	});
 });

package/dist/file-explorer/helpers.js

@@ -9,7 +9,7 @@ import { Skeleton } from "../components/Skeleton.js";
 import { formatBytes } from "../format.js";
 import { useElapsed } from "../components/relativeTime.js";
 import { ListSkeleton } from "../list/ListTable.js";
-import { getFileExtension } from "./lib/utils.js";
+import { carriesFiles, getFileExtension } from "./lib/utils.js";
 import { CorsError } from "./lib/errors.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState, useTransition } from "react";
@@ -467,13 +467,13 @@ function DragDropZone({ onDropFiles, children, className = "" }) {
 		className: cx("transition-[box-shadow,background-color] duration-150", className, isDragging && "ring-1 ring-(--theme-link) ring-inset bg-(--theme-link)/5"),
 		onDragOver: (e) => {
 			e.preventDefault();
-			if (onDropFiles) setIsDragging(true);
+			if (onDropFiles && carriesFiles(e.dataTransfer)) setIsDragging(true);
 		},
 		onDragLeave: () => setIsDragging(false),
 		onDrop: (e) => {
 			e.preventDefault();
 			setIsDragging(false);
-			if (!onDropFiles) return;
+			if (!onDropFiles || !carriesFiles(e.dataTransfer)) return;
 			onDropFiles(e.dataTransfer.items.length ? e.dataTransfer.items : e.dataTransfer.files);
 		},
 		children

package/dist/file-explorer/lib/utils.d.ts

@@ -32,6 +32,9 @@ export declare function attachmentDisposition(filename: string): string;
 export declare function getDirectoryPrefixFromNode(node: TreeNode): string;
 export declare function pruneNodesInsideSelectedDirectories(nodes: TreeNode[]): TreeNode[];
 export declare function collectObjectKeysToDelete(nodes: TreeNode[], listKeysUnderPrefix: (prefix: string) => Promise<string[]>): Promise<string[]>;
+/** True when a drag carries files or folders, not a link or text, such as a
+ *  row's own link dragged across the explorer. */
+export declare function carriesFiles(dataTransfer: DataTransfer): boolean;
 export declare function getUriScheme(uri: string): string;
 export declare function removeLeadingSlash(path: string): string;
 export declare function removeLeadingAndTrailingSlashes(path: string): string;

package/dist/file-explorer/lib/utils.js

@@ -229,6 +229,11 @@ async function collectObjectKeysToDelete(nodes, listKeysUnderPrefix) {
 	}
 	return Array.from(keys);
 }
+/** True when a drag carries files or folders, not a link or text, such as a
+*  row's own link dragged across the explorer. */
+function carriesFiles(dataTransfer) {
+	return Array.from(dataTransfer.types).includes("Files");
+}
 function getUriScheme(uri) {
 	return uri.match(/^([a-z0-9+.-]+):\/\//i)?.[1] ?? "";
 }
@@ -290,4 +295,4 @@ function getUploadSessionETA(totalLoadedBytes, totalSizeBytes, lastProgressTime,
 	};
 }
 //#endregion
-export { attachmentDisposition, calculateUploadNodesTotalSize, collectObjectKeysToDelete, createTreeBuilder, ensureTrailingSlash, getDirectoryNameError, getDirectoryObjectPath, getDirectoryPrefixFromNode, getFileExtension, getNodeChildren, getNodeName, getObjectKeyFromNode, getParentPath, getUploadNodesFromDataTransferItems, getUploadSessionETA, getUriScheme, isClientValid, pruneNodesInsideSelectedDirectories, removeLeadingAndTrailingSlashes, removeLeadingSlash };
+export { attachmentDisposition, calculateUploadNodesTotalSize, carriesFiles, collectObjectKeysToDelete, createTreeBuilder, ensureTrailingSlash, getDirectoryNameError, getDirectoryObjectPath, getDirectoryPrefixFromNode, getFileExtension, getNodeChildren, getNodeName, getObjectKeyFromNode, getParentPath, getUploadNodesFromDataTransferItems, getUploadSessionETA, getUriScheme, isClientValid, pruneNodesInsideSelectedDirectories, removeLeadingAndTrailingSlashes, removeLeadingSlash };

package/dist/form/Wizard/utils.js

@@ -1,3 +1,4 @@
+import { isDev } from "../../dev.js";
 //#region src/form/Wizard/utils.ts
 function isWizardMeta(value) {
 	return typeof value === "object" && value !== null && "wizard" in value;
@@ -16,7 +17,7 @@ function parseWizardConfig(options) {
 		stepOrder.push(key);
 	}
 	if (stepOrder.length === 0) {
-		if (process.env.NODE_ENV !== "production") console.warn("Wizard mode enabled but no steps found");
+		if (isDev()) console.warn("Wizard mode enabled but no steps found");
 		return null;
 	}
 	return {

package/dist/list/ActionToolbar.js

@@ -2,6 +2,7 @@ import { cx } from "../cx.js";
 import { buttonClasses } from "../components/buttonClasses.js";
 import { MoreIcon } from "../icons.js";
 import { MenuPopup, MenuSeparator } from "../components/Menu.js";
+import { isDev } from "../dev.js";
 import { Tooltip } from "../components/Tooltip.js";
 import { useStrings } from "../components/Provider.js";
 import { AppLink } from "../components/AppLink.js";
@@ -321,7 +322,7 @@ var warnedPrimary = /* @__PURE__ */ new Set();
 /** Warns in development when more than one action is primary: the fill marks
 *  the one next step, so two of them mark none. */
 function warnIfManyPrimary(items) {
-	if (process.env.NODE_ENV === "production") return;
+	if (!isDev()) return;
 	const labels = items.flatMap((item) => "label" in item && item.primary ? [item.label] : []);
 	const names = labels.map((label) => `"${label}"`).join(", ");
 	if (labels.length < 2 || warnedPrimary.has(names)) return;
@@ -332,7 +333,7 @@ var warnedIcons = /* @__PURE__ */ new Set();
 /** Warns in development when two actions share an icon: folded to their icons
 *  in a narrow toolbar, they would look the same. */
 function warnIfIconsRepeat(items) {
-	if (process.env.NODE_ENV === "production") return;
+	if (!isDev()) return;
 	const byIcon = /* @__PURE__ */ new Map();
 	for (const item of items) {
 		if ("element" in item || !isValidElement(item.icon) || typeof item.icon.type === "string") continue;

package/dist/list/ListPage.js

@@ -89,7 +89,7 @@ function ListRow({ href, onActivate, items, goTo, openMenu, pinnedActions, selec
 	const pinnedLabels = new Set((pinnedActions ?? []).map((a) => a.label));
 	const hasOverflowItems = items.some((item) => !isMenuDivider(item) && (isMenuSubmenu(item) || !pinnedLabels.has(item.label)));
 	return /* @__PURE__ */ jsxs("tr", {
-		className: cx("group", selected ? "bg-(--theme-accent-subtle)/60" : menuActive ? "theme-hover" : "hover:theme-hover", (href || onActivate || selectionActive) && "cursor-pointer", stretch && "relative [&_:is(a,button,input,label):not([data-row-link])]:relative [&_:is(a,button,input,label):not([data-row-link])]:z-[1]", className),
+		className: cx("group", selected ? "bg-(--theme-accent-subtle)/60" : menuActive ? "theme-hover" : "hover:theme-hover", (href || onActivate || selectionActive) && "cursor-pointer", stretch && "relative [&_:is(a,button,input,label,[role=checkbox]):not([data-row-link])]:relative [&_:is(a,button,input,label,[role=checkbox]):not([data-row-link])]:z-[1]", className),
 		onClick: handleRowClick,
 		...rowContextMenuProps(openRowMenu, items),
 		children: [

package/dist/list/ListTable.d.ts

@@ -28,6 +28,11 @@ export declare const listTableFixedProps: {
 /** True inside a `ListRow` whose name link should take the whole row's
  *  clicks: it navigates, and no selection claims plain clicks. */
 export declare const StretchRowLinkContext: import("react").Context<boolean>;
+export declare const STRETCHED_LINK = "after:absolute after:inset-0 after:content-[''] focus-visible:outline-none focus-visible:after:outline-2 focus-visible:after:-outline-offset-2 focus-visible:after:outline-(--theme-link)";
+/** The row a `STRETCHED_LINK` covers: its box, with the row's other controls
+ *  raised above the link so they keep their own clicks. A checkbox is a
+ *  `role="checkbox"` span, not an input, so the role names it. */
+export declare const STRETCHED_LINK_ROW = "relative [&_:is(a,button,input,label,[role=checkbox]):not([data-row-link])]:relative [&_:is(a,button,input,label,[role=checkbox]):not([data-row-link])]:z-[1]";
 export declare function NameCell({ icon, name, subtitle, href, badge, title, children, }: {
     icon: ReactNode;
     name: string;

package/dist/list/ListTable.js

@@ -37,6 +37,10 @@ var listTableFixedProps = {
 *  clicks: it navigates, and no selection claims plain clicks. */
 var StretchRowLinkContext = createContext(false);
 var STRETCHED_LINK = "after:absolute after:inset-0 after:content-[''] focus-visible:outline-none focus-visible:after:outline-2 focus-visible:after:-outline-offset-2 focus-visible:after:outline-(--theme-link)";
+/** The row a `STRETCHED_LINK` covers: its box, with the row's other controls
+*  raised above the link so they keep their own clicks. A checkbox is a
+*  `role="checkbox"` span, not an input, so the role names it. */
+var STRETCHED_LINK_ROW = "relative [&_:is(a,button,input,label,[role=checkbox]):not([data-row-link])]:relative [&_:is(a,button,input,label,[role=checkbox]):not([data-row-link])]:z-[1]";
 function NameCell({ icon, name, subtitle, href, badge, title, children }) {
 	const stretch = useContext(StretchRowLinkContext);
 	const inner = /* @__PURE__ */ jsxs(Fragment, { children: [icon, /* @__PURE__ */ jsxs("div", {
@@ -58,7 +62,7 @@ function NameCell({ icon, name, subtitle, href, badge, title, children }) {
 		children: [href ? /* @__PURE__ */ jsx(AppLink, {
 			href,
 			"data-row-link": stretch || void 0,
-			className: cx("group/namecell flex items-center gap-2.5 min-w-0 cursor-pointer", stretch && STRETCHED_LINK),
+			className: cx("group/namecell flex items-center gap-2.5 min-w-0 cursor-pointer", stretch && "after:absolute after:inset-0 after:content-[''] focus-visible:outline-none focus-visible:after:outline-2 focus-visible:after:-outline-offset-2 focus-visible:after:outline-(--theme-link)"),
 			children: inner
 		}) : /* @__PURE__ */ jsx("div", {
 			className: "flex items-center gap-2.5 min-w-0",
@@ -203,4 +207,4 @@ function ListActionsHeader({ view, actionCount = 0, className }) {
 }
 ListActionsHeader.isTableHeader = true;
 //#endregion
-export { GroupRow, HEADERS_OFF, ListActionsHeader, ListError, ListSelectAllHeader, ListSkeleton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, StretchRowLinkContext, actionsColumnWidth, listTableFixedProps, listTableProps };
+export { GroupRow, HEADERS_OFF, ListActionsHeader, ListError, ListSelectAllHeader, ListSkeleton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, STRETCHED_LINK, STRETCHED_LINK_ROW, StretchRowLinkContext, actionsColumnWidth, listTableFixedProps, listTableProps };