@parallelworks/ui 0.41.0 → 0.43.0

package/dist/components/comboboxItems.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+export interface ComboboxItem<Value = string> {
+    value: Value;
+    label: string;
+    description?: string | undefined;
+    icon?: ReactNode;
+    disabled?: boolean | undefined;
+}
+export interface ComboboxGroup<Value = string> {
+    label: string;
+    /** Leads the heading, such as a provider's logo. */
+    icon?: ReactNode;
+    /** Follows the label, such as who shared the group or a status like "Not responding". */
+    description?: string | undefined;
+    /** Empty for a group that only reports a status; a search finds it by its heading. */
+    items: readonly ComboboxLeaf<Value>[];
+}
+/** One item: an option, or a bare string labelled by its value. */
+export type ComboboxLeaf<Value = string> = ComboboxItem<Value> | (Value & string);
+/** Items, groups under headings, or both: items between groups list where they sit, without a heading. */
+export type ComboboxItems<Value = string> = readonly (ComboboxLeaf<Value> | ComboboxGroup<Value>)[];
+export declare function isComboboxGroup<Value>(item: ComboboxLeaf<Value> | ComboboxGroup<Value>): item is ComboboxGroup<Value>;
+/** Every item, out of their groups. */
+export declare function comboboxLeaves<Value>(items: ComboboxItems<Value>): ComboboxLeaf<Value>[];

package/dist/components/comboboxItems.js

@@ -0,0 +1,10 @@
+//#region src/components/comboboxItems.ts
+function isComboboxGroup(item) {
+	return typeof item === "object" && "items" in item;
+}
+/** Every item, out of their groups. */
+function comboboxLeaves(items) {
+	return items.flatMap((item) => isComboboxGroup(item) ? item.items : [item]);
+}
+//#endregion
+export { comboboxLeaves, isComboboxGroup };

package/dist/components/floating.d.ts

@@ -0,0 +1,14 @@
+/** Popups portal into the host's .ds-root when it has one, so they inherit the
+ *  design system's CSS variables; undefined lets the portal use document.body. */
+export declare function portalContainer(): HTMLElement | undefined;
+/** Above dialogs and sticky chrome; hidden while its anchor is scrolled out of view. */
+export declare const positionerClassName = "z-[10000] outline-none data-anchor-hidden:invisible";
+/** A panel of choices: a menu, a select's list, a combobox's list. */
+export declare const panelClassName = "rounded-lg border border-(--theme-border) bg-(--theme-app-bg) text-sm text-(--theme-app) shadow-(--theme-shadow-lg) outline-none origin-(--transform-origin) transition-[transform,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0";
+/** A row in a panel. */
+export declare const panelItemClassName = "flex w-full cursor-pointer select-none items-center gap-2 px-3 py-1.5 text-left outline-none data-highlighted:bg-(--theme-hover) data-highlighted:text-(--theme-hover-text) data-disabled:cursor-not-allowed data-disabled:opacity-50";
+/** A tooltip's or infotip's small inverted surface. */
+export declare const tipClassName = "rounded-md bg-(--theme-app) px-2 py-1 text-xs text-(--theme-app-bg) shadow-(--theme-shadow) whitespace-pre-line break-words data-instant:transition-none origin-(--transform-origin) transition-[transform,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0";
+export declare const tipArrowClassName = "size-2 rotate-45 bg-(--theme-app) data-[side=top]:-bottom-1 data-[side=bottom]:-top-1 data-[side=left]:-right-1 data-[side=right]:-left-1";
+/** A hover card's surface; the card sets its own width and padding. */
+export declare const cardClassName = "overflow-hidden rounded-xl border border-(--theme-border) bg-(--theme-panel-bg) text-(--theme-app) shadow-(--theme-shadow-lg) outline-none origin-(--transform-origin) transition-[transform,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0";

package/dist/components/floating.js

@@ -0,0 +1,21 @@
+//#region src/components/floating.ts
+/** Popups portal into the host's .ds-root when it has one, so they inherit the
+*  design system's CSS variables; undefined lets the portal use document.body. */
+function portalContainer() {
+	if (typeof document === "undefined") return;
+	return document.querySelector(".ds-root") ?? void 0;
+}
+/** Above dialogs and sticky chrome; hidden while its anchor is scrolled out of view. */
+var positionerClassName = "z-[10000] outline-none data-anchor-hidden:invisible";
+var enterExit = "origin-(--transform-origin) transition-[transform,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0";
+/** A panel of choices: a menu, a select's list, a combobox's list. */
+var panelClassName = `rounded-lg border border-(--theme-border) bg-(--theme-app-bg) text-sm text-(--theme-app) shadow-(--theme-shadow-lg) outline-none ${enterExit}`;
+/** A row in a panel. */
+var panelItemClassName = "flex w-full cursor-pointer select-none items-center gap-2 px-3 py-1.5 text-left outline-none data-highlighted:bg-(--theme-hover) data-highlighted:text-(--theme-hover-text) data-disabled:cursor-not-allowed data-disabled:opacity-50";
+/** A tooltip's or infotip's small inverted surface. */
+var tipClassName = `rounded-md bg-(--theme-app) px-2 py-1 text-xs text-(--theme-app-bg) shadow-(--theme-shadow) whitespace-pre-line break-words data-instant:transition-none ${enterExit}`;
+var tipArrowClassName = "size-2 rotate-45 bg-(--theme-app) data-[side=top]:-bottom-1 data-[side=bottom]:-top-1 data-[side=left]:-right-1 data-[side=right]:-left-1";
+/** A hover card's surface; the card sets its own width and padding. */
+var cardClassName = `overflow-hidden rounded-xl border border-(--theme-border) bg-(--theme-panel-bg) text-(--theme-app) shadow-(--theme-shadow-lg) outline-none ${enterExit}`;
+//#endregion
+export { cardClassName, panelClassName, panelItemClassName, portalContainer, positionerClassName, tipArrowClassName, tipClassName };

package/dist/components/search.d.ts

@@ -0,0 +1,2 @@
+/** Whether a query matches any of the texts, the way every picker in the package searches. */
+export declare function useQueryMatch(): (query: string, ...texts: (string | undefined)[]) => boolean;

package/dist/components/search.js

@@ -0,0 +1,14 @@
+import { useCallback } from "react";
+import { Combobox } from "@base-ui/react/combobox";
+//#region src/components/search.ts
+var fold = (text) => text.replaceAll("-", "");
+/** Whether a query matches any of the texts, the way every picker in the package searches. */
+function useQueryMatch() {
+	const { contains } = Combobox.useFilter();
+	return useCallback((query, ...texts) => {
+		const q = fold(query);
+		return texts.some((text) => text !== void 0 && contains(fold(text), q));
+	}, [contains]);
+}
+//#endregion
+export { useQueryMatch };

package/dist/editor/Editor.js

@@ -1,6 +1,6 @@
 import Loader from "../components/Loader.js";
-import { Suspense, lazy } from "react";
 import { jsx } from "react/jsx-runtime";
+import { Suspense, lazy } from "react";
 //#region src/editor/Editor.tsx
 var MonacoEditor = lazy(() => import("./Monaco.js"));
 function Editor(props) {

package/dist/editor/EditorField.js

@@ -1,32 +1,27 @@
 import { FieldWrapper } from "../form/FieldWrapper.js";
+import { useFieldValue } from "../form/useFieldValue.js";
 import Editor from "./Editor.js";
-import cx from "classnames";
-import { useMemo, useRef } from "react";
+import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
-import { useField, useFormikContext } from "formik";
+import { useMemo, useRef } from "react";
+import { useFormContext, useWatch } from "react-hook-form";
 //#region src/editor/EditorField.tsx
-function hasResetKeys(obj) {
-	return typeof obj === "object" && obj !== null && "editorKeyPostfix" in obj && typeof obj.editorKeyPostfix === "string";
-}
 function EditorField(props) {
-	const { field, label, labelPosition, disabled, onChange, tooltipComponent, spaceCompact, setFormDirty } = props;
+	const { field, label, labelPosition, disabled, onChange, tooltipComponent, spaceCompact } = props;
 	const fieldName = field.name ?? "";
-	const [fieldState] = useField(fieldName);
-	const { setFieldValue, setFieldTouched, values } = useFormikContext();
-	const debounceRef = useRef(null);
+	const [value, change] = useFieldValue(fieldName);
 	const touchedRef = useRef(false);
 	const handleChange = (val) => {
 		touchedRef.current = true;
-		if (debounceRef.current) clearTimeout(debounceRef.current);
-		debounceRef.current = setTimeout(() => {
-			onChange?.(val);
-			setFieldTouched(fieldName, true);
-			setFieldValue(fieldName, val);
-			setFormDirty(true);
-		}, 500);
+		onChange?.(val);
+		change(val);
 	};
-	let editorKeyPostfix = "";
-	if (hasResetKeys(values)) editorKeyPostfix = values.editorKeyPostfix;
+	const { control } = useFormContext();
+	const resetKey = useWatch({
+		control,
+		name: "editorKeyPostfix"
+	});
+	const editorKeyPostfix = typeof resetKey === "string" ? resetKey : "";
 	const postfixKey = useMemo(() => {
 		const randomKey = Math.random().toString(36).substring(7);
 		return editorKeyPostfix || randomKey;
@@ -41,8 +36,8 @@ function EditorField(props) {
 			ariaLabel: label,
 			height: "200px",
 			path: fieldName,
-			...touchedRef.current ? {} : { value: fieldState.value },
-			className: cx("bg-(--theme-input-bg) w-11 border focus:border rounded text-[10px] leading-4 pl-[6px]", disabled && "opacity-75"),
+			...touchedRef.current || value === void 0 ? {} : { value },
+			className: clsx("bg-(--theme-input-bg) w-11 border focus:border rounded text-[10px] leading-4 pl-[6px]", disabled && "opacity-75"),
 			readOnly: disabled,
 			onChange: handleChange,
 			language: field.options?.language || "shell"

package/dist/editor/FormCodePanel.js

@@ -1,14 +1,15 @@
-import { useNotify, useStrings, useWorkflowEngine } from "../components/Provider.js";
 import { FaCheck } from "../icons/fa/FaCheck.js";
 import { FiCopy } from "../icons/fi/FiCopy.js";
 import { LuEye } from "../icons/lu/LuEye.js";
 import { LuEyeOff } from "../icons/lu/LuEyeOff.js";
-import SwitchToggleSmall from "../components/SwitchToggleSmall.js";
+import { Tooltip } from "../components/Tooltip.js";
+import { useNotify, useStrings, useWorkflowEngine } from "../components/Provider.js";
+import { Switch } from "../components/Switch.js";
 import { flattenGroups, impureSetValueFromPath } from "../form/lib.js";
 import Editor from "./Editor.js";
-import cx from "classnames";
-import { useId, useRef, useState } from "react";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
 //#region src/editor/FormCodePanel.tsx
 var isObject = (value) => typeof value === "object" && value !== null;
 var shouldIgnoreField = (engine, fieldSchema, inputs, arrayIndex) => {
@@ -73,7 +74,6 @@ function FormCodePanel({ formJSON, data, mutate, height = "600px", disabled = fa
 	const engine = useWorkflowEngine();
 	const notify = useNotify();
 	const { common: t } = useStrings();
-	const uid = useId();
 	const [jsonHasErrors, setJsonHasErrors] = useState(false);
 	const [showHidden, setShowHidden] = useState(false);
 	const [copied, setCopied] = useState(false);
@@ -103,22 +103,22 @@ function FormCodePanel({ formJSON, data, mutate, height = "600px", disabled = fa
 		style: { height },
 		className: "flex w-full flex-col gap-2",
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: cx("flex min-h-0 flex-1 flex-col overflow-hidden rounded-md border", jsonHasErrors ? "border-red-500" : "border-(--theme-border)"),
+			className: clsx("flex min-h-0 flex-1 flex-col overflow-hidden rounded-md border", jsonHasErrors ? "border-red-500" : "border-(--theme-border)"),
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "bg-(--theme-muted-panel-bg) text-(--theme-muted-panel-color) flex shrink-0 items-center gap-3 border-b border-(--theme-border) px-3 py-2",
-				children: [hasHiddenFields && /* @__PURE__ */ jsxs("label", {
-					htmlFor: `${uid}-show-hidden`,
-					title: t.showHiddenFieldsHint,
-					className: "flex cursor-pointer select-none items-center gap-2 text-sm text-(--theme-app)",
-					children: [/* @__PURE__ */ jsx(SwitchToggleSmall, {
-						id: `${uid}-show-hidden`,
-						value: showHidden,
-						"aria-label": t.showHiddenFields,
-						onClick: () => setShowHidden((prev) => !prev)
-					}), /* @__PURE__ */ jsxs("span", {
-						className: "flex items-center gap-1.5",
-						children: [showHidden ? /* @__PURE__ */ jsx(LuEye, {}) : /* @__PURE__ */ jsx(LuEyeOff, {}), t.showHiddenFields]
-					})]
+				children: [hasHiddenFields && /* @__PURE__ */ jsx(Tooltip, {
+					content: t.showHiddenFieldsHint,
+					children: /* @__PURE__ */ jsxs("label", {
+						className: "flex cursor-pointer select-none items-center gap-2 text-sm text-(--theme-app)",
+						children: [/* @__PURE__ */ jsx(Switch, {
+							size: "sm",
+							checked: showHidden,
+							onCheckedChange: setShowHidden
+						}), /* @__PURE__ */ jsxs("span", {
+							className: "flex items-center gap-1.5",
+							children: [showHidden ? /* @__PURE__ */ jsx(LuEye, {}) : /* @__PURE__ */ jsx(LuEyeOff, {}), t.showHiddenFields]
+						})]
+					})
 				}), /* @__PURE__ */ jsxs("button", {
 					type: "button",
 					onClick: handleCopy,

package/dist/editor/Monaco.js

@@ -7,9 +7,9 @@ import { defineEditorThemes, getThemeName } from "./themes.js";
 import { setupMonacoWorkers } from "./workers.js";
 import { holdListeners, modelFor } from "./editorModel.js";
 import { ensureYamlLanguage } from "./yamlLanguage.js";
-import cx from "classnames";
-import { useEffect, useLayoutEffect, useRef } from "react";
+import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef } from "react";
 import * as monaco from "monaco-editor";
 //#region src/editor/Monaco.tsx
 setupMonacoWorkers();
@@ -116,7 +116,7 @@ function MonacoEditor({ className, disabled, onChange = noop, onValidate = noop,
 			width,
 			height
 		},
-		className: cx("relative border rounded", className),
+		className: clsx("relative border rounded", className),
 		ref: (ref) => {
 			if (ref && !monacoRef.current) {
 				defineEditorThemes(monaco.editor);

package/dist/file-explorer/FileExplorer.js

@@ -1,5 +1,3 @@
-import { safeUrl } from "../safeUrl.js";
-import { useNotify, useSlots, useStrings } from "../components/Provider.js";
 import { BiSolidTrashAlt } from "../icons/bi/BiSolidTrashAlt.js";
 import { BsArrowsCollapse } from "../icons/bs/BsArrowsCollapse.js";
 import { FaAngleDown } from "../icons/fa/FaAngleDown.js";
@@ -16,16 +14,21 @@ import { LuEye } from "../icons/lu/LuEye.js";
 import { MdRefresh } from "../icons/md/MdRefresh.js";
 import { PiShareBold } from "../icons/pi/PiShareBold.js";
 import { TbAlertTriangle } from "../icons/tb/TbAlertTriangle.js";
+import { MenuItem, MenuPopup, MenuSeparator } from "../components/Menu.js";
+import { safeUrl } from "../safeUrl.js";
 import { keyedByContent } from "../components/keys.js";
-import { TOOLTIP_ID, TooltipInfo } from "../components/Tooltip.js";
+import { Tooltip } from "../components/Tooltip.js";
+import { useNotify, useSlots, useStrings } from "../components/Provider.js";
 import { ConfirmModal } from "../components/ConfirmModal.js";
+import { useContextMenu } from "../components/ContextMenu.js";
 import CopyToClipboard, { CopyCodeBlock } from "../components/CopyToClipboard.js";
+import { InfoTip } from "../components/InfoTip.js";
 import { CreateModal } from "../components/CreateModal.js";
 import Loader from "../components/Loader.js";
-import { assembleRowMenu, useCopySubmenu, useRowMenu } from "../list/RowContextMenu.js";
 import { StatusBadge } from "../components/StatusBadge.js";
 import { Table } from "../components/Table.js";
 import { ListActionsHeader, ListSkeleton, listTableFixedProps, listTableProps } from "../list/ListTable.js";
+import { assembleRowMenu, useCopySubmenu } from "../list/rowMenu.js";
 import { calculateUploadNodesTotalSize, createTreeBuilder, formatFileSize, getDirectoryNameError, getDirectoryObjectPath, getNodeChildren, getObjectKeyFromNode, getParentPath, getUploadNodesFromDataTransferItems, getUriScheme, pruneNodesInsideSelectedDirectories, removeLeadingAndTrailingSlashes } from "./lib/utils.js";
 import { useFileExplorer } from "./FileExplorerContext.js";
 import { PREVIEW_URL_EXPIRES_IN, canPreview } from "./FilePreview/previewType.js";
@@ -39,11 +42,11 @@ import { FileTableHeaders } from "./FileTableHeaders.js";
 import { FileTable } from "./FileTable.js";
 import { advanceListing, beginLoadingMore, canAutoLoadMore, clearListingError, clearListingsUnder, hasMore, incompletePaths, isListed, isLoadingMore, loadMoreError, nextHydrationStep, recordListingError, replaceListing } from "./lib/paging.js";
 import { TreeView } from "./TreeView.js";
-import { Menu, MenuButton, MenuItem, MenuItems, MenuSeparator } from "@headlessui/react";
-import cx from "classnames";
+import { Menu } from "@base-ui/react/menu";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useEffectEvent, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { useLocalStorage } from "usehooks-ts";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { DateTime } from "luxon";
 import { Resizable } from "re-resizable";
 //#region src/file-explorer/FileExplorer.tsx
@@ -258,7 +261,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 	const [pendingDelete, setPendingDelete] = useState(null);
 	const [detailTab, setDetailTab] = useState("details");
 	useEffect(() => clearPreviewCache, []);
-	const { openMenu, contextMenu } = useRowMenu();
+	const { openMenu, contextMenu } = useContextMenu();
 	const [sidebarWidth, setSidebarWidth] = useLocalStorage(SIDEBAR_WIDTH_STORAGE_KEY, 300);
 	const handleToggleExpand = useCallback((path) => {
 		setExpandedPaths((prev) => {
@@ -630,7 +633,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 			key: "create-folder",
 			label: t.createFolder.action,
 			icon: /* @__PURE__ */ jsx(FaRegFolder, {}),
-			onSelect: () => openCreateFolder(node)
+			onClick: () => openCreateFolder(node)
 		}];
 	};
 	const buildRowMenu = (node) => {
@@ -644,20 +647,20 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 			key: "preview",
 			label: t.preview.preview,
 			icon: /* @__PURE__ */ jsx(LuEye, {}),
-			onSelect: () => openPreview(node)
+			onClick: () => openPreview(node)
 		});
 		if (isFile) {
 			actions.push({
 				key: "download",
 				label: t.preview.download,
 				icon: /* @__PURE__ */ jsx(FiDownload, {}),
-				onSelect: () => downloadNode(node)
+				onClick: () => downloadNode(node)
 			});
 			if (nodeCanShare) actions.push({
 				key: "share",
 				label: t.preview.shareFile,
 				icon: /* @__PURE__ */ jsx(PiShareBold, {}),
-				onSelect: () => onShareFileButtonClick(node)
+				onClick: () => onShareFileButtonClick(node)
 			});
 		}
 		actions.push(...getCreateFolderActions(node, storage));
@@ -667,13 +670,12 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 			label: t.preview.delete,
 			icon: /* @__PURE__ */ jsx(BiSolidTrashAlt, {}),
 			destructive: true,
-			onSelect: () => deleteNode(node)
+			onClick: () => deleteNode(node)
 		});
 		const lead = [{
-			kind: "action",
 			label: isFile ? t.preview.viewDetails : t.preview.openFolder,
 			icon: isFile ? /* @__PURE__ */ jsx(FiFileText, {}) : /* @__PURE__ */ jsx(FaRegFolder, {}),
-			onSelect: () => handleSelectTreeItem(node.path, node)
+			onClick: () => handleSelectTreeItem(node.path, node)
 		}];
 		const uriExtras = uris.map((value) => ({
 			label: `${getUriScheme(value).toUpperCase()} URI`,
@@ -694,7 +696,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 		if (items.length === 0) return;
 		e.preventDefault();
 		e.stopPropagation();
-		openMenu(e.clientX, e.clientY, items);
+		openMenu(e, items);
 	};
 	const renderBreadcrumb = () => {
 		const chain = [];
@@ -951,24 +953,24 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 							className: "flex items-center justify-end h-10 px-3 shrink-0 border-b theme-border",
 							children: /* @__PURE__ */ jsxs("div", {
 								className: "flex gap-x-0.5",
-								children: [/* @__PURE__ */ jsx("button", {
-									type: "button",
-									"aria-label": t.chrome.refresh,
-									"data-tooltip-id": TOOLTIP_ID,
-									"data-tooltip-content": "Refresh",
-									"data-tooltip-class-name": "z-50",
-									className: "inline-flex items-center justify-center h-7 w-7 rounded-md cursor-pointer theme-muted-text hover:theme-text hover:theme-hover transition-colors duration-150 focus:outline-none focus-visible:ring-1 focus-visible:ring-(--theme-link)",
-									onClick: () => handleRefresh(),
-									children: /* @__PURE__ */ jsx(MdRefresh, { className: "h-3.5 w-3.5" })
-								}), /* @__PURE__ */ jsx("button", {
-									type: "button",
-									"aria-label": t.chrome.collapse,
-									"data-tooltip-id": TOOLTIP_ID,
-									"data-tooltip-content": "Collapse All",
-									"data-tooltip-class-name": "z-50",
-									className: "inline-flex items-center justify-center h-7 w-7 rounded-md cursor-pointer theme-muted-text hover:theme-text hover:theme-hover transition-colors duration-150 focus:outline-none focus-visible:ring-1 focus-visible:ring-(--theme-link)",
-									onClick: collapseAll,
-									children: /* @__PURE__ */ jsx(BsArrowsCollapse, { className: "h-3.5 w-3.5" })
+								children: [/* @__PURE__ */ jsx(Tooltip, {
+									content: t.chrome.refresh,
+									children: /* @__PURE__ */ jsx("button", {
+										type: "button",
+										"aria-label": t.chrome.refresh,
+										className: "inline-flex items-center justify-center h-7 w-7 rounded-md cursor-pointer theme-muted-text hover:theme-text hover:theme-hover transition-colors duration-150 focus:outline-none focus-visible:ring-1 focus-visible:ring-(--theme-link)",
+										onClick: () => handleRefresh(),
+										children: /* @__PURE__ */ jsx(MdRefresh, { className: "h-3.5 w-3.5" })
+									})
+								}), /* @__PURE__ */ jsx(Tooltip, {
+									content: t.chrome.collapse,
+									children: /* @__PURE__ */ jsx("button", {
+										type: "button",
+										"aria-label": t.chrome.collapse,
+										className: "inline-flex items-center justify-center h-7 w-7 rounded-md cursor-pointer theme-muted-text hover:theme-text hover:theme-hover transition-colors duration-150 focus:outline-none focus-visible:ring-1 focus-visible:ring-(--theme-link)",
+										onClick: collapseAll,
+										children: /* @__PURE__ */ jsx(BsArrowsCollapse, { className: "h-3.5 w-3.5" })
+									})
 								})]
 							})
 						}), /* @__PURE__ */ jsx(TreeView, {
@@ -1028,10 +1030,9 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 									icon: getNodeIcon(rootNode, slots.storageIconUrl, t.chrome.storageIconAlt),
 									storageCount: getNodeChildren(parentToChildrenMap, rootNode.path).length,
 									getItems: () => [{
-										kind: "action",
 										label: t.preview.open,
 										icon: /* @__PURE__ */ jsx(FaRegFolder, {}),
-										onSelect: () => openUserNode(rootNode)
+										onClick: () => openUserNode(rootNode)
 									}],
 									openMenu,
 									onOpen: openUserNode
@@ -1041,7 +1042,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 							selectedStorage: null,
 							onRefresh: handleRefresh
 						})]
-					}) : !selectedNode ? /* @__PURE__ */ jsx(NoFileSelectedPreview, {}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					}) : !selectedNode ? /* @__PURE__ */ jsx(NoFileSelectedPreview, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
 						/* @__PURE__ */ jsxs("div", {
 							className: "flex items-center justify-between gap-3 px-4 h-12 shrink-0 border-b theme-border",
 							children: [renderBreadcrumb(), /* @__PURE__ */ jsxs("div", {
@@ -1093,7 +1094,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 											children: t.createFolder.action
 										})]
 									}),
-									selectedNodeCanWrite && selectedNodeCanUpload && /* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsxs(MenuButton, {
+									selectedNodeCanWrite && selectedNodeCanUpload && /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsxs(Menu.Trigger, {
 										"aria-label": t.chrome.upload,
 										className: "btn btn-info cursor-pointer flex items-center justify-between pr-0.5!",
 										disabled: selectedNode.type === "file" || !selectedNode.storageId,
@@ -1101,23 +1102,18 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 											className: "hidden md:inline",
 											children: t.chrome.upload
 										})] }), /* @__PURE__ */ jsx(FaAngleDown, { className: "h-4 w-4 ml-2" })]
-									}), /* @__PURE__ */ jsxs(MenuItems, {
-										transition: true,
-										anchor: "bottom end",
-										className: "theme-panel w-36 rounded-md border p-1 mt-1 shadow-lg z-50 origin-top-right transition duration-100\n                    ease-out data-closed:scale-95 data-closed:opacity-0 focus:outline-none",
-										children: [/* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsx("button", {
-											type: "button",
-											className: "text-sm rounded-sm hover:theme-hover cursor-pointer w-full items-center px-2 py-1.5",
+									}), /* @__PURE__ */ jsxs(MenuPopup, {
+										align: "end",
+										className: "w-36",
+										children: [/* @__PURE__ */ jsx(MenuItem, {
 											onClick: () => fileInputRef.current?.click(),
 											children: "Select Files"
-										}) }), /* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsx("button", {
-											type: "button",
-											className: "text-sm rounded-sm hover:theme-hover cursor-pointer w-full items-center px-2 py-1.5",
+										}), /* @__PURE__ */ jsx(MenuItem, {
 											onClick: () => folderInputRef.current?.click(),
 											children: "Select Folder"
-										}) })]
+										})]
 									})] }),
-									/* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsxs(MenuButton, {
+									/* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsxs(Menu.Trigger, {
 										"aria-label": t.chrome.download,
 										className: "btn btn-info cursor-pointer flex items-center justify-between pr-0.5!",
 										disabled: checkedItems.size === 0 && selectedNode.type !== "file" || hasFolderSelected() || !selectedNode.storageId,
@@ -1125,28 +1121,28 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 											className: "hidden md:inline",
 											children: t.chrome.download
 										})] }), /* @__PURE__ */ jsx(FaAngleDown, { className: "h-4 w-4 ml-2" })]
-									}), /* @__PURE__ */ jsxs(MenuItems, {
-										transition: true,
-										anchor: "bottom end",
-										className: "theme-panel w-72 rounded-md border p-1 mt-1 shadow-lg z-50 origin-top-right transition duration-100 \n                    ease-out data-closed:scale-95 data-closed:opacity-0 focus:outline-none",
-										children: [/* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsx("button", {
-											type: "button",
-											className: "text-sm rounded-sm hover:theme-hover cursor-pointer w-full items-center px-2 py-1.5",
+									}), /* @__PURE__ */ jsxs(MenuPopup, {
+										align: "end",
+										className: "w-72",
+										children: [/* @__PURE__ */ jsx(MenuItem, {
 											onClick: handleDownload,
 											children: t.chrome.downloadFromBrowser
-										}) }), downloadCommand && downloadCommandText && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(MenuSeparator, { className: "my-0.5 h-px theme-border" }), /* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
-											className: "text-sm w-full text-center pointer-events-none px-2 py-1.5",
-											children: downloadCommand.label
-										}), /* @__PURE__ */ jsx(CopyCodeBlock, {
-											textToCopy: downloadCommandText,
-											children: /* @__PURE__ */ jsx("div", {
-												className: "overflow-x-auto text-xs",
-												children: keyedByContent(downloadCommandText.split("\n"), (l) => l).map(({ key, item: line }) => /* @__PURE__ */ jsx("div", {
-													className: "whitespace-nowrap",
-													children: line
-												}, key))
-											})
-										})] }) })] })]
+										}), downloadCommand && downloadCommandText && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuSeparator, {}), /* @__PURE__ */ jsxs("div", {
+											className: "px-2 py-1.5",
+											children: [/* @__PURE__ */ jsx("p", {
+												className: "text-sm text-center pb-1.5",
+												children: downloadCommand.label
+											}), /* @__PURE__ */ jsx(CopyCodeBlock, {
+												textToCopy: downloadCommandText,
+												children: /* @__PURE__ */ jsx("div", {
+													className: "overflow-x-auto text-xs",
+													children: keyedByContent(downloadCommandText.split("\n"), (l) => l).map(({ key, item: line }) => /* @__PURE__ */ jsx("div", {
+														className: "whitespace-nowrap",
+														children: line
+													}, key))
+												})
+											})]
+										})] })]
 									})] }),
 									/* @__PURE__ */ jsxs("button", {
 										type: "button",
@@ -1217,7 +1213,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 							const createdDt = selectedNode.created ? DateTime.fromISO(selectedNode.created) : null;
 							const previewable = canPreview(selectedNode);
 							const effectiveTab = previewable ? detailTab : "details";
-							const tabClass = (active) => cx("mx-2.5 border-b-2 px-1 py-2.5 text-[13px] font-medium cursor-pointer transition-colors", active ? "theme-text border-(--theme-element)" : "theme-muted-text border-transparent hover:theme-text");
+							const tabClass = (active) => clsx("mx-2.5 border-b-2 px-1 py-2.5 text-[13px] font-medium cursor-pointer transition-colors", active ? "theme-text border-(--theme-element)" : "theme-muted-text border-transparent hover:theme-text");
 							return /* @__PURE__ */ jsxs("div", {
 								className: "flex h-full min-h-0 flex-col",
 								children: [/* @__PURE__ */ jsxs("div", {
@@ -1267,7 +1263,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 															className: "tabular-nums",
 															children: formatFileSize(selectedNode.size)
 														}),
-														modifiedDt && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+														modifiedDt && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
 															"aria-hidden": true,
 															children: "·"
 														}), /* @__PURE__ */ jsxs("span", { children: ["Modified ", modifiedDt.toRelative()] })] })
@@ -1284,9 +1280,9 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 											children: [/* @__PURE__ */ jsx(ShareFileButton, {
 												node: selectedNode,
 												onShare: onShareFileButtonClick
-											}), /* @__PURE__ */ jsx(TooltipInfo, {
+											}), /* @__PURE__ */ jsx(InfoTip, {
 												text: "This will generate a pre-signed URL for this file. Anyone with this link can temporarily access and download the file, even if they don't have an account. The link will automatically expire after 12 hours.",
-												place: "right"
+												side: "right"
 											})]
 										}),
 										/* @__PURE__ */ jsxs("div", {
@@ -1297,21 +1293,21 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 											}), /* @__PURE__ */ jsxs("dl", {
 												className: "grid grid-cols-[minmax(0,140px)_1fr] gap-x-6 gap-y-2 text-sm",
 												children: [
-													typeof selectedNode.size === "number" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("dt", {
+													typeof selectedNode.size === "number" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", {
 														className: "theme-muted-text",
 														children: t.chrome.size
 													}), /* @__PURE__ */ jsx("dd", {
 														className: "tabular-nums",
 														children: formatFileSize(selectedNode.size)
 													})] }),
-													selectedNode.contentType && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("dt", {
+													selectedNode.contentType && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", {
 														className: "theme-muted-text",
 														children: "Content Type"
 													}), /* @__PURE__ */ jsx("dd", {
 														className: "font-mono text-xs",
 														children: selectedNode.contentType
 													})] }),
-													createdDt && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("dt", {
+													createdDt && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", {
 														className: "theme-muted-text",
 														children: t.chrome.created
 													}), /* @__PURE__ */ jsxs("dd", { children: [
@@ -1322,7 +1318,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 															children: ["· ", createdDt.toRelative()]
 														})
 													] })] }),
-													modifiedDt && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("dt", {
+													modifiedDt && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", {
 														className: "theme-muted-text",
 														children: "Last Modified"
 													}), /* @__PURE__ */ jsxs("dd", { children: [
@@ -1333,14 +1329,14 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 															children: ["· ", modifiedDt.toRelative()]
 														})
 													] })] }),
-													selectedNode.hash && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("dt", {
+													selectedNode.hash && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", {
 														className: "theme-muted-text",
 														children: t.chrome.hash
 													}), /* @__PURE__ */ jsx("dd", {
 														className: "font-mono text-xs break-all",
 														children: selectedNode.hash.replace(/^"|"$/g, "")
 													})] }),
-													selectedNode.storageClass && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("dt", {
+													selectedNode.storageClass && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", {
 														className: "theme-muted-text",
 														children: "Storage Class"
 													}), /* @__PURE__ */ jsx("dd", {
@@ -1420,7 +1416,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 								}),
 								" ",
 								/* @__PURE__ */ jsx("span", {
-									className: cx(isUploadSizeExceeded(pendingUpload?.totalSize ?? 0) && "text-amber-800 font-semibold"),
+									className: clsx(isUploadSizeExceeded(pendingUpload?.totalSize ?? 0) && "text-amber-800 font-semibold"),
 									children: formatFileSize(pendingUpload?.totalSize ?? 0)
 								})
 							]

package/dist/file-explorer/FileExplorerContext.js

@@ -1,10 +1,10 @@
-import { useNotify, useStrings } from "../components/Provider.js";
 import { keyedByContent } from "../components/keys.js";
+import { useNotify, useStrings } from "../components/Provider.js";
 import { mapWithConcurrency } from "./lib/batch.js";
 import { calculateUploadNodesTotalSize, getUploadSessionETA, removeLeadingSlash } from "./lib/utils.js";
 import { UploadSessionToast } from "./toasts.js";
-import { createContext, use, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, use, useRef } from "react";
 //#region src/file-explorer/FileExplorerContext.tsx
 var UPLOAD_CONCURRENCY = 3;
 var FileExplorerContext = createContext(void 0);