@parallelworks/ui 0.51.0 → 0.52.0

package/dist/list/ListPage.d.ts

@@ -1,40 +1,29 @@
 import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 import type { OpenMenu } from '../components/ContextMenu.js';
 import { type MenuEntry } from '../components/MenuEntries.js';
-import { type PageHeaderBreadcrumb } from '../components/PageHeader.js';
 import type { ListView, ListViewChrome } from './listView.js';
 import { type RowAction } from './rowMenu.js';
-/** Negative offsets (admin/org) cancel the shell's pt-4 so rows don't peek through the gap above the pinned header. */
-declare const SECTION_STICKY_TOP: {
-    readonly main: 'top-0';
-    readonly kubernetes: 'top-0';
-    readonly admin: '-top-4';
-    readonly org: '-top-4';
-};
-export type ListSection = keyof typeof SECTION_STICKY_TOP;
 export declare function ListRowActionsProvider({ view, children, }: {
     view?: ListViewChrome | undefined;
     children: ReactNode;
 }): import("react").JSX.Element;
 export interface ListPageProps {
-    section?: ListSection;
-    /** Force edge-to-edge negative margin for a main-shell page nested under a padded route layout. */
-    shellPadded?: boolean;
-    /** Rendered inside a route layout that already owns the page header (e.g. a
-     * detail page's tab body). Skips this page's own header so the global
-     * breadcrumb strip stays visible, keeping only the toolbar. */
-    embedded?: boolean;
-    breadcrumbs?: PageHeaderBreadcrumb[] | undefined;
-    title?: ReactNode;
-    titleAction?: ReactNode;
-    actions?: ReactNode;
+    /** Reaches past the host's content padding (`p-4`) to the container's
+     *  edges, for a host whose page container is padded. A list runs edge to
+     *  edge so its rows' hover and dividers span the page. */
+    bleed?: boolean | undefined;
+    /** The list's search, filters and view controls, above the rows. The page's
+     *  trail and actions go in its `PageHeader`. */
     toolbar?: ReactNode;
     /** Omit on pages without a list view — rows show all actions by default. */
     view?: ListViewChrome | undefined;
     children: ReactNode;
 }
-export declare function ListPage({ section, shellPadded, embedded, breadcrumbs, title, titleAction, actions, toolbar, view, children, }: ListPageProps): import("react").JSX.Element;
+/** A list filling the page: its toolbar stays put while only the rows scroll. */
+export declare function ListPage({ bleed, toolbar, view, children }: ListPageProps): import("react").JSX.Element;
 export declare function ListRow({ href, onActivate, items, goTo, openMenu, pinnedActions, selected, selectionActive, onRowSelect, leading, className, children, }: {
+    /** Where the row goes. Its `NameCell` with the same href becomes a link
+     *  covering the row; a click the link doesn't catch still goes there. */
     href: string | null;
     /** Plain-click handler for rows that open something in place instead of navigating. */
     onActivate?: (() => void) | undefined;
@@ -53,7 +42,11 @@ export declare function ListRow({ href, onActivate, items, goTo, openMenu, pinne
     leading?: ReactNode;
     children: ReactNode;
 }): import("react").JSX.Element;
-/** Name column min-width is by role, not position, so a leading checkbox doesn't shift it. */
+/** Name column min-width is by role, not position, so a leading checkbox
+ *  doesn't shift it. A column with an `orderBy` the view offers sorts by it.
+ *  While the view's column headers are off, the header row collapses: its
+ *  cells still size the columns, but nobody sees or hears them, as with any
+ *  other display option that is off. */
 export declare function ListColumns<T>({ view }: {
     view: ListView<T>;
 }): import("react").JSX.Element;
@@ -62,4 +55,3 @@ export declare namespace ListColumns {
 }
 /** Stable `goTo` for whole-row navigation (`rowNavProps`, `ListRow`). */
 export declare function useListNavigate(): (to: string) => void;
-export {};

package/dist/list/ListPage.js

@@ -1,28 +1,14 @@
 import { cx } from "../cx.js";
 import { Tooltip } from "../components/Tooltip.js";
-import { useLink, useNavigation } from "../components/Provider.js";
+import { useNavigation } from "../components/Provider.js";
+import { AppLink, isPlainClick } from "../components/AppLink.js";
 import { isMenuDivider, isMenuSubmenu, useRunAction, warnIfInert } from "../components/MenuEntries.js";
-import { PageHeader } from "../components/PageHeader.js";
 import { Table } from "../components/Table.js";
-import { ListActionsHeader } from "./ListTable.js";
+import { ListActionsHeader, StretchRowLinkContext } from "./ListTable.js";
 import { MoreButton, rowContextMenuProps, useRowMenuActive } from "./rowMenu.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Children, cloneElement, createContext, isValidElement, useContext, useMemo } from "react";
 //#region src/list/ListPage.tsx
-/** Negative offsets (admin/org) cancel the shell's pt-4 so rows don't peek through the gap above the pinned header. */
-var SECTION_STICKY_TOP = {
-	main: "top-0",
-	kubernetes: "top-0",
-	admin: "-top-4",
-	org: "-top-4"
-};
-/** Whether the shell adds pt-4 padding that the edge-to-edge list must cancel with a negative margin. */
-var SECTION_SHELL_PADDED = {
-	main: false,
-	kubernetes: false,
-	admin: true,
-	org: true
-};
 /** Defaults mean rows outside a ListView fully show actions (no view = show everything). */
 var RowActionsContext = createContext({
 	show: true,
@@ -50,20 +36,13 @@ function ListRowActionsProvider({ view, children }) {
 		children
 	});
 }
-function ListPage({ section = "main", shellPadded, embedded = false, breadcrumbs, title, titleAction, actions, toolbar, view, children }) {
-	const cancelShellPadding = shellPadded ?? SECTION_SHELL_PADDED[section];
+/** A list filling the page: its toolbar stays put while only the rows scroll. */
+function ListPage({ bleed = false, toolbar, view, children }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: cx("flex h-full min-h-0 flex-col", cancelShellPadding && "-m-4"),
-		children: [embedded ? toolbar && /* @__PURE__ */ jsx("div", {
-			className: "px-4 py-1.5",
+		className: cx("flex h-full min-h-0 flex-col", bleed && "-m-4"),
+		children: [toolbar && /* @__PURE__ */ jsx("div", {
+			className: "shrink-0 px-4",
 			children: toolbar
-		}) : /* @__PURE__ */ jsx(PageHeader, {
-			stickyTopClassName: SECTION_STICKY_TOP[section],
-			breadcrumbs,
-			title,
-			titleAction,
-			actions,
-			toolbar
 		}), /* @__PURE__ */ jsx("div", {
 			className: "relative @container min-h-0 flex-1 overflow-auto",
 			children: /* @__PURE__ */ jsx(ListRowActionsProvider, {
@@ -96,24 +75,29 @@ function ListRow({ href, onActivate, items, goTo, openMenu, pinnedActions, selec
 		});
 		return cloneElement(el, { className: cx(el.props.className, cls) });
 	});
+	const stretch = !!href && !selectionActive;
 	const handleRowClick = (e) => {
 		if (e.target.closest("a,button,input,label")) return;
 		if (selectionActive && onRowSelect) {
 			onRowSelect(e);
 			return;
 		}
-		if (href) goTo(href);
-		else onActivate?.();
+		if (href) {
+			if (isPlainClick(e)) goTo(href);
+		} else onActivate?.();
 	};
 	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-blue-500/5" : menuActive ? "theme-hover" : "hover:theme-hover", (href || onActivate || selectionActive) && "cursor-pointer", 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):not([data-row-link])]:relative [&_:is(a,button,input,label):not([data-row-link])]:z-[1]", className),
 		onClick: handleRowClick,
 		...rowContextMenuProps(openRowMenu, items),
 		children: [
 			leading,
-			styledCells,
+			/* @__PURE__ */ jsx(StretchRowLinkContext.Provider, {
+				value: stretch,
+				children: styledCells
+			}),
 			showActions && /* @__PURE__ */ jsx(Table.Item, {
 				className: "relative py-2.5",
 				children: /* @__PURE__ */ jsxs("div", {
@@ -137,18 +121,20 @@ function ListRow({ href, onActivate, items, goTo, openMenu, pinnedActions, selec
 }
 function PinnedActionButton({ action, visible }) {
 	warnIfInert(action, "ListPage pinned action");
-	const Link = useLink();
 	const runAction = useRunAction();
 	const reason = action.disabled ? action.disabledReason : void 0;
 	const props = {
 		"aria-label": reason ? `${action.label}. ${reason}` : action.label,
-		className: cx("rounded p-1 cursor-pointer text-(--theme-muted-text-color) transition-colors hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app) aria-disabled:cursor-not-allowed aria-disabled:opacity-20 aria-disabled:hover:bg-transparent aria-disabled:hover:text-(--theme-muted-text-color) [&>svg]:h-4 [&>svg]:w-4", visible ? "opacity-100" : "opacity-0 group-hover:opacity-100 focus-visible:opacity-100")
+		className: cx("rounded p-1 cursor-pointer text-(--theme-muted-text-color) transition-colors hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app) focus-visible:outline-2 focus-visible:outline-(--theme-link) aria-disabled:cursor-not-allowed aria-disabled:opacity-20 aria-disabled:hover:bg-transparent aria-disabled:hover:text-(--theme-muted-text-color) [&>svg]:h-4 [&>svg]:w-4", visible ? "opacity-100" : "opacity-0 group-hover:opacity-100 focus-visible:opacity-100")
 	};
 	return /* @__PURE__ */ jsx(Tooltip, {
 		content: reason ?? action.label,
 		side: "bottom",
-		children: action.href && !action.disabled ? /* @__PURE__ */ jsx(Link, {
+		children: action.href ? /* @__PURE__ */ jsx(AppLink, {
 			href: action.href,
+			reloadDocument: action.reloadDocument,
+			target: action.target,
+			disabled: action.disabled,
 			...props,
 			children: action.icon
 		}) : /* @__PURE__ */ jsx("button", {
@@ -163,14 +149,27 @@ function PinnedActionButton({ action, visible }) {
 		})
 	});
 }
-/** Name column min-width is by role, not position, so a leading checkbox doesn't shift it. */
+function columnSort(view, orderBy) {
+	if (view.orderBy !== orderBy) return "none";
+	return view.orderDir === "asc" ? "ascending" : "descending";
+}
+/** Name column min-width is by role, not position, so a leading checkbox
+*  doesn't shift it. A column with an `orderBy` the view offers sorts by it.
+*  While the view's column headers are off, the header row collapses: its
+*  cells still size the columns, but nobody sees or hears them, as with any
+*  other display option that is off. */
 function ListColumns({ view }) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [view.visibleColumns.map((col, i) => /* @__PURE__ */ jsx(Table.Header, {
-		caps: false,
-		className: cx(col.headerClassName, view.columnClasses[i]),
-		style: col.alwaysVisible ? { minWidth: 200 } : void 0,
-		children: col.label
-	}, col.key)), /* @__PURE__ */ jsx(ListActionsHeader, { view })] });
+	return /* @__PURE__ */ jsxs(Fragment, { children: [view.visibleColumns.map((col, i) => {
+		const orderBy = view.orderBys.some((o) => o.value === col.orderBy) ? col.orderBy : void 0;
+		return /* @__PURE__ */ jsx(Table.Header, {
+			caps: false,
+			className: cx(col.headerClassName, view.columnClasses[i], !view.showColumnHeaders && "list-headers-off"),
+			style: col.alwaysVisible ? { minWidth: 200 } : void 0,
+			sort: orderBy === void 0 ? void 0 : columnSort(view, orderBy),
+			onSort: orderBy === void 0 ? void 0 : () => view.sortBy(orderBy),
+			children: col.label
+		}, col.key);
+	}), /* @__PURE__ */ jsx(ListActionsHeader, { view })] });
 }
 ListColumns.isTableHeader = true;
 /** Stable `goTo` for whole-row navigation (`rowNavProps`, `ListRow`). */

package/dist/list/ListTable.d.ts

@@ -1,27 +1,39 @@
-import type { ReactNode } from 'react';
-/** table-auto + horizontal scroll; the name column has a min-width floor so it can't be crushed. */
+import { type ReactNode } from 'react';
+/** Marks a header cell of a list whose column headers are off; see `listTableProps`. */
+export declare const HEADERS_OFF = "list-headers-off";
+/** table-auto; the name column has a min-width floor so it can't be crushed.
+ *  The header row sticks as the rows scroll, so the list's scrolling box
+ *  (`ListPage`'s body) scrolls it sideways too. */
 export declare const listTableProps: {
     readonly borderless: true;
+    readonly stickyHeader: true;
     readonly panel: false;
     readonly rounded: false;
-    readonly theadClassName: 'text-(--theme-muted-text-color)';
+    readonly theadClassName: 'bg-(--theme-app-bg) text-(--theme-muted-text-color) has-[.list-headers-off]:collapse';
     readonly tbodyClassName: 'divide-y border-b border-(--theme-border) divide-(--theme-border)';
     readonly className: 'table-auto w-full [&_td:first-child]:pl-4 [&_th:first-child]:pl-4 [&_td:last-child]:pr-4 [&_th:last-child]:pr-4';
 };
 /** Widths come only from the header row, so a windowed body cannot shift the
- *  columns as different content scrolls into view. */
+ *  columns as different content scrolls into view. The windowed table scrolls
+ *  in its own box, so its header doesn't stick. */
 export declare const listTableFixedProps: {
     readonly borderless: true;
     readonly panel: false;
     readonly rounded: false;
-    readonly theadClassName: 'text-(--theme-muted-text-color)';
+    readonly theadClassName: 'bg-(--theme-app-bg) text-(--theme-muted-text-color) has-[.list-headers-off]:collapse';
     readonly tbodyClassName: 'divide-y border-b border-(--theme-border) divide-(--theme-border)';
+    readonly stickyHeader: false;
     readonly className: string;
 };
+/** 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 function NameCell({ icon, name, subtitle, href, badge, title, children, }: {
     icon: ReactNode;
     name: string;
     subtitle?: string | undefined;
+    /** The name's link. Inside a `ListRow` with an `href`, the whole row is
+     *  this link, so give both the same URL. */
     href: string | null;
     badge?: ReactNode;
     title?: string | undefined;
@@ -34,9 +46,10 @@ export declare function GroupRow({ label, count, colSpan, }: {
     count: number;
     colSpan: number;
 }): import("react").JSX.Element;
-export declare function ListError({ error, noun }: {
+export declare function ListError({ error, noun, }: {
     error: unknown;
-    noun?: string;
+    /** What failed to load, as the heading names it: "Couldn't load clusters". */
+    noun?: string | undefined;
 }): import("react").JSX.Element;
 export declare function ListSkeleton({ rows }: {
     rows?: number;
@@ -54,6 +67,18 @@ export declare function RowSelectCheckbox({ checked, label, onToggle, }: {
     /** Gets the press, a click or a key, so a host can extend a range on Shift. */
     onToggle: (event: Event) => void;
 }): import("react").JSX.Element;
+/** The selection column's header: a checkbox that ticks every row, mixed while
+ *  only some are. `onToggle` selects them all, or clears them once all are. */
+export declare function ListSelectAllHeader({ selected, total, onToggle, }: {
+    /** How many rows are selected. */
+    selected: number;
+    /** How many rows there are to select. */
+    total: number;
+    onToggle: () => void;
+}): import("react").JSX.Element;
+export declare namespace ListSelectAllHeader {
+    var isTableHeader: boolean;
+}
 /** Sizes to fit pinned buttons + ⋯; below ~44rem only ⋯ remains. Pass a view's
  * chrome (structurally: showActions + actionsWidth) or actionCount. */
 export declare function ListActionsHeader({ view, actionCount, className, }: {

package/dist/list/ListTable.js

@@ -1,31 +1,44 @@
 import { cx } from "../cx.js";
 import { ErrorIcon } from "../icons.js";
 import { positionKeys } from "../components/keys.js";
-import { useLink, useStrings } from "../components/Provider.js";
+import { useStrings } from "../components/Provider.js";
+import { AppLink } from "../components/AppLink.js";
 import { Checkbox } from "../components/Checkbox.js";
 import { LoadingRegion, Skeleton } from "../components/Skeleton.js";
 import { Table } from "../components/Table.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
 //#region src/list/ListTable.tsx
 var NAME_TEXT = "font-medium text-[13px] leading-tight text-(--theme-app) truncate";
 var SUBTITLE_TEXT = "text-xs leading-tight text-(--theme-muted-text-color) truncate";
-/** table-auto + horizontal scroll; the name column has a min-width floor so it can't be crushed. */
+/** Marks a header cell of a list whose column headers are off; see `listTableProps`. */
+var HEADERS_OFF = "list-headers-off";
+/** table-auto; the name column has a min-width floor so it can't be crushed.
+*  The header row sticks as the rows scroll, so the list's scrolling box
+*  (`ListPage`'s body) scrolls it sideways too. */
 var listTableProps = {
 	borderless: true,
+	stickyHeader: true,
 	panel: false,
 	rounded: false,
-	theadClassName: "text-(--theme-muted-text-color)",
+	theadClassName: "bg-(--theme-app-bg) text-(--theme-muted-text-color) has-[.list-headers-off]:collapse",
 	tbodyClassName: "divide-y border-b border-(--theme-border) divide-(--theme-border)",
 	className: "table-auto w-full [&_td:first-child]:pl-4 [&_th:first-child]:pl-4 [&_td:last-child]:pr-4 [&_th:last-child]:pr-4"
 };
 /** Widths come only from the header row, so a windowed body cannot shift the
-*  columns as different content scrolls into view. */
+*  columns as different content scrolls into view. The windowed table scrolls
+*  in its own box, so its header doesn't stick. */
 var listTableFixedProps = {
 	...listTableProps,
+	stickyHeader: false,
 	className: listTableProps.className.replace("table-auto", "table-fixed")
 };
+/** True inside a `ListRow` whose name link should take the whole row's
+*  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)";
 function NameCell({ icon, name, subtitle, href, badge, title, children }) {
-	const Link = useLink();
+	const stretch = useContext(StretchRowLinkContext);
 	const inner = /* @__PURE__ */ jsxs(Fragment, { children: [icon, /* @__PURE__ */ jsxs("div", {
 		className: "min-w-0",
 		children: [/* @__PURE__ */ jsxs("div", {
@@ -42,9 +55,10 @@ function NameCell({ icon, name, subtitle, href, badge, title, children }) {
 	})] });
 	return /* @__PURE__ */ jsxs(Table.Item, {
 		className: "py-2.5",
-		children: [href ? /* @__PURE__ */ jsx(Link, {
+		children: [href ? /* @__PURE__ */ jsx(AppLink, {
 			href,
-			className: "group/namecell flex items-center gap-2.5 min-w-0 cursor-pointer",
+			"data-row-link": stretch || void 0,
+			className: cx("group/namecell flex items-center gap-2.5 min-w-0 cursor-pointer", stretch && STRETCHED_LINK),
 			children: inner
 		}) : /* @__PURE__ */ jsx("div", {
 			className: "flex items-center gap-2.5 min-w-0",
@@ -75,16 +89,20 @@ function GroupRow({ label, count, colSpan }) {
 		]
 	}) });
 }
-function ListError({ error, noun = "data" }) {
+function ListError({ error, noun }) {
 	const { list: t } = useStrings();
 	const message = error && typeof error === "object" && "message" in error ? String(error.message) : void 0;
 	return /* @__PURE__ */ jsxs("div", {
+		role: "alert",
 		className: "flex flex-col items-center justify-center gap-3 py-20 text-center",
-		children: [/* @__PURE__ */ jsx(ErrorIcon, { className: "h-10 w-10 text-red-400 opacity-80" }), /* @__PURE__ */ jsxs("div", {
+		children: [/* @__PURE__ */ jsx(ErrorIcon, {
+			"aria-hidden": "true",
+			className: "h-10 w-10 text-(--theme-error)"
+		}), /* @__PURE__ */ jsxs("div", {
 			className: "space-y-1",
 			children: [/* @__PURE__ */ jsx("p", {
 				className: "text-sm font-medium text-(--theme-app)",
-				children: t.couldNotLoad(noun)
+				children: t.couldNotLoad(noun ?? t.data)
 			}), message && /* @__PURE__ */ jsx("p", {
 				className: "max-w-md text-xs text-(--theme-muted-text-color)",
 				children: message
@@ -146,6 +164,24 @@ function RowSelectCheckbox({ checked, label, onToggle }) {
 		}
 	});
 }
+/** The selection column's header: a checkbox that ticks every row, mixed while
+*  only some are. `onToggle` selects them all, or clears them once all are. */
+function ListSelectAllHeader({ selected, total, onToggle }) {
+	const t = useStrings().list;
+	const all = total > 0 && selected >= total;
+	return /* @__PURE__ */ jsx(Table.Header, {
+		caps: false,
+		className: "w-10",
+		children: /* @__PURE__ */ jsx(Checkbox, {
+			"aria-label": t.selectAll,
+			checked: all,
+			indeterminate: selected > 0 && !all,
+			disabled: total === 0,
+			onCheckedChange: () => onToggle()
+		})
+	});
+}
+ListSelectAllHeader.isTableHeader = true;
 /** Sizes to fit pinned buttons + ⋯; below ~44rem only ⋯ remains. Pass a view's
 * chrome (structurally: showActions + actionsWidth) or actionCount. */
 function ListActionsHeader({ view, actionCount = 0, className }) {
@@ -158,7 +194,7 @@ function ListActionsHeader({ view, actionCount = 0, className }) {
 			width,
 			minWidth: width
 		},
-		className: cx("relative py-2 text-right @max-[43rem]:w-[52px]! @max-[43rem]:min-w-[52px]!", className),
+		className: cx("relative py-2 text-right @max-[44rem]:w-[52px]! @max-[44rem]:min-w-[52px]!", className),
 		children: /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
 			children: common.actions
@@ -167,4 +203,4 @@ function ListActionsHeader({ view, actionCount = 0, className }) {
 }
 ListActionsHeader.isTableHeader = true;
 //#endregion
-export { GroupRow, ListActionsHeader, ListError, ListSkeleton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, actionsColumnWidth, listTableFixedProps, listTableProps };
+export { GroupRow, HEADERS_OFF, ListActionsHeader, ListError, ListSelectAllHeader, ListSkeleton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, StretchRowLinkContext, actionsColumnWidth, listTableFixedProps, listTableProps };

package/dist/list/ListViewControls.js

@@ -4,10 +4,10 @@ import { MenuCheckboxItem, MenuPopup, MenuSubmenuTrigger } from "../components/M
 import { Tooltip } from "../components/Tooltip.js";
 import { useStrings } from "../components/Provider.js";
 import { useQueryMatch } from "../components/search.js";
-import { Switch } from "../components/Switch.js";
 import { IconButton } from "../components/IconButton.js";
 import { Popover } from "../components/Popover.js";
 import { InfoTip } from "../components/InfoTip.js";
+import { Switch } from "../components/Switch.js";
 import { Select } from "../components/Select.js";
 import { Menu } from "@base-ui/react/menu";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/list/UserHoverCard.js

@@ -1,15 +1,12 @@
 import { cx } from "../cx.js";
-import { CopyIcon } from "../icons.js";
-import { Tooltip } from "../components/Tooltip.js";
 import { useLink, useStrings } from "../components/Provider.js";
-import { useCopy } from "../components/useCopy.js";
 import { Avatar } from "../components/Avatar.js";
+import { CopyButton } from "../components/CopyButton.js";
 import { LoadingRegion, Skeleton } from "../components/Skeleton.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/list/UserHoverCard.tsx
 function UserHoverCard({ username, name, avatarSrc, badge, href, linkComponent, loading = false, children }) {
-	const { common, list: t } = useStrings();
-	const { copy } = useCopy();
+	const { list: t } = useStrings();
 	const SlotLink = useLink();
 	const Link = linkComponent ?? SlotLink;
 	const displayName = name || username;
@@ -36,7 +33,6 @@ function UserHoverCard({ username, name, avatarSrc, badge, href, linkComponent,
 		})]
 	})] });
 	const copyLabel = EMAIL.test(username) ? t.labelEmail : t.labelUsername;
-	const onCopy = () => void copy(username, { label: copyLabel });
 	return /* @__PURE__ */ jsxs("div", {
 		className: "w-64 p-3",
 		children: [/* @__PURE__ */ jsxs("div", {
@@ -48,15 +44,11 @@ function UserHoverCard({ username, name, avatarSrc, badge, href, linkComponent,
 			}) : /* @__PURE__ */ jsx("div", {
 				className: "flex min-w-0 flex-1 items-start gap-3",
 				children: header
-			}), username && /* @__PURE__ */ jsx(Tooltip, {
-				content: common.copyThing(copyLabel),
-				children: /* @__PURE__ */ jsx("button", {
-					type: "button",
-					"aria-label": common.copyThing(copyLabel),
-					onClick: onCopy,
-					className: cx("shrink-0 cursor-pointer rounded p-0.5 text-(--theme-muted-text-color) opacity-0 transition hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app) [&>svg]:h-3.5 [&>svg]:w-3.5", "hover:opacity-100 group-has-[[data-copy-value]:hover]/copy:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--theme-link) pointer-coarse:opacity-100"),
-					children: /* @__PURE__ */ jsx(CopyIcon, { "aria-hidden": "true" })
-				})
+			}), username && /* @__PURE__ */ jsx(CopyButton, {
+				text: username,
+				label: copyLabel,
+				size: "xs",
+				className: cx("-mr-1 opacity-0", "hover:opacity-100 group-has-[[data-copy-value]:hover]/copy:opacity-100 focus-visible:opacity-100 pointer-coarse:opacity-100")
 			})]
 		}), loading ? /* @__PURE__ */ jsxs(LoadingRegion, {
 			className: "mt-3 space-y-2 border-t border-(--theme-border) pt-3",

package/dist/list/index.d.ts

@@ -1,6 +1,6 @@
 export { ActionToolbar, stickyToolbarClasses, type ToolbarAction, ToolbarButton, type ToolbarItem, } from './ActionToolbar.js';
-export { ListColumns, ListPage, type ListPageProps, ListRow, ListRowActionsProvider, type ListSection, useListNavigate, } from './ListPage.js';
-export { actionsColumnWidth, GroupRow, ListActionsHeader, ListError, ListSkeleton, listTableFixedProps, listTableProps, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, } from './ListTable.js';
+export { ListColumns, ListPage, type ListPageProps, ListRow, ListRowActionsProvider, useListNavigate, } from './ListPage.js';
+export { actionsColumnWidth, GroupRow, ListActionsHeader, ListError, ListSelectAllHeader, ListSkeleton, listTableFixedProps, listTableProps, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, } from './ListTable.js';
 export { ListDisplayMenu, ListFilterMenu } from './ListViewControls.js';
 export { ListCount, type ListSearch, ListSearchControl, useListSearch, } from './listSearch.js';
 export { type ActionDef, type ColumnDef, DEFAULT_ORDER, FAVORITE_ORDER, type FilterFacet, type ListView, type ListViewChrome, type ListViewConfig, type OrderByOption, useListView, } from './listView.js';

package/dist/list/index.js

@@ -1,9 +1,9 @@
 import { ActionToolbar, ToolbarButton, stickyToolbarClasses } from "./ActionToolbar.js";
-import { GroupRow, ListActionsHeader, ListError, ListSkeleton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, actionsColumnWidth, listTableFixedProps, listTableProps } from "./ListTable.js";
+import { GroupRow, ListActionsHeader, ListError, ListSelectAllHeader, ListSkeleton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, actionsColumnWidth, listTableFixedProps, listTableProps } from "./ListTable.js";
 import { MoreButton, assembleRowMenu, rowContextMenuProps, useCopySubmenu, useRowMenuActive } from "./rowMenu.js";
 import { ListColumns, ListPage, ListRow, ListRowActionsProvider, useListNavigate } from "./ListPage.js";
 import { ListDisplayMenu, ListFilterMenu } from "./ListViewControls.js";
 import { ListCount, ListSearchControl, useListSearch } from "./listSearch.js";
 import { DEFAULT_ORDER, FAVORITE_ORDER, useListView } from "./listView.js";
 import { HoverCardRow, UserHoverCard } from "./UserHoverCard.js";
-export { ActionToolbar, DEFAULT_ORDER, FAVORITE_ORDER, GroupRow, HoverCardRow, ListActionsHeader, ListColumns, ListCount, ListDisplayMenu, ListError, ListFilterMenu, ListPage, ListRow, ListRowActionsProvider, ListSearchControl, ListSkeleton, MoreButton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, ToolbarButton, UserHoverCard, actionsColumnWidth, assembleRowMenu, listTableFixedProps, listTableProps, rowContextMenuProps, stickyToolbarClasses, useCopySubmenu, useListNavigate, useListSearch, useListView, useRowMenuActive };
+export { ActionToolbar, DEFAULT_ORDER, FAVORITE_ORDER, GroupRow, HoverCardRow, ListActionsHeader, ListColumns, ListCount, ListDisplayMenu, ListError, ListFilterMenu, ListPage, ListRow, ListRowActionsProvider, ListSearchControl, ListSelectAllHeader, ListSkeleton, MoreButton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, ToolbarButton, UserHoverCard, actionsColumnWidth, assembleRowMenu, listTableFixedProps, listTableProps, rowContextMenuProps, stickyToolbarClasses, useCopySubmenu, useListNavigate, useListSearch, useListView, useRowMenuActive };

package/dist/list/listSearch.js

@@ -1,5 +1,5 @@
-import { CloseIcon, RemoveIcon, SearchIcon } from "../icons.js";
 import { buttonClasses } from "../components/buttonClasses.js";
+import { CloseIcon, RemoveIcon, SearchIcon } from "../icons.js";
 import { Tooltip } from "../components/Tooltip.js";
 import { usePersistedState, useStrings } from "../components/Provider.js";
 import { isTextEntryContext } from "../components/shortcutKey.js";
@@ -7,6 +7,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
 //#region src/list/listSearch.tsx
 var NO_TERMS = [];
+var COUNT = new Intl.NumberFormat();
 /** Pass `enabled: false` to suspend the global ⌘F/`/` hijack (e.g. when search isn't shown and browser Find should stay active). */
 function useListSearch(enabled = true, storageKey) {
 	const [filter, setFilter] = useState("");
@@ -20,11 +21,6 @@ function useListSearch(enabled = true, storageKey) {
 	useEffect(() => {
 		if (!enabled) return;
 		const onKey = (e) => {
-			if (e.key === "Escape" && searchOpen) {
-				setSearchOpen(false);
-				setFilter("");
-				return;
-			}
 			if (isTextEntryContext(e.target)) return;
 			if ((e.key === "f" || e.key === "F") && (e.metaKey || e.ctrlKey)) {
 				e.preventDefault();
@@ -36,7 +32,7 @@ function useListSearch(enabled = true, storageKey) {
 		};
 		window.addEventListener("keydown", onKey);
 		return () => window.removeEventListener("keydown", onKey);
-	}, [searchOpen, enabled]);
+	}, [enabled]);
 	const openSearch = useCallback(() => setSearchOpen(true), []);
 	const closeSearch = useCallback(() => {
 		setSearchOpen(false);
@@ -94,8 +90,12 @@ function ListSearchControl({ search, placeholder, label: labelProp }) {
 				value: search.filter,
 				onChange: (e) => search.setFilter(e.target.value),
 				onFocus: search.openSearch,
+				"aria-label": label,
 				onKeyDown: (e) => {
-					if (e.key === "Enter") {
+					if (e.key === "Escape" && search.searchOpen) {
+						e.preventDefault();
+						search.closeSearch();
+					} else if (e.key === "Enter") {
 						e.preventDefault();
 						search.addTerm(search.filter);
 					} else if (e.key === "Backspace" && !search.filter) {
@@ -117,7 +117,7 @@ function ListSearchControl({ search, placeholder, label: labelProp }) {
 	});
 	return /* @__PURE__ */ jsx(Tooltip, {
 		content: label,
-		shortcut: "⌘+F",
+		shortcut: "/",
 		children: /* @__PURE__ */ jsx("button", {
 			type: "button",
 			onClick: search.openSearch,
@@ -132,11 +132,13 @@ function ListSearchControl({ search, placeholder, label: labelProp }) {
 	});
 }
 function ListCount({ total, matches, filterActive, noun, nounPlural }) {
+	const { list: t } = useStrings();
 	return /* @__PURE__ */ jsx("div", {
 		className: "flex items-center h-9",
 		children: /* @__PURE__ */ jsx("span", {
+			role: "status",
 			className: "text-[13px] text-(--theme-muted-text-color)",
-			children: filterActive ? `${matches} of ${total} ${nounPlural}` : `${total} ${total === 1 ? noun : nounPlural}`
+			children: filterActive ? t.matchCount(COUNT.format(matches), COUNT.format(total), nounPlural) : t.count(COUNT.format(total), total === 1 ? noun : nounPlural)
 		})
 	});
 }

package/dist/list/listView.d.ts

@@ -19,6 +19,10 @@ export interface ColumnDef {
      * column there: for something short that compares best lined up, like a
      * total. The first column never stacks; it is what the others stack under. */
     stack?: boolean;
+    /** The `value` of the {@link OrderByOption} this column sorts by. Its header
+     * then sorts the list: it shows, and sets, the same order as Display
+     * options' Ordering. */
+    orderBy?: string;
 }
 /** Column responsive importance; `low` drops before `medium`. See {@link ColumnDef.priority}. */
 type ColumnPriority = 'low' | 'medium';
@@ -65,6 +69,8 @@ export interface ListViewConfig<T> {
     actions?: ActionDef[];
     /** Explicit pinned-button count when not using actions+isPinned; sizes the actions column. */
     actionCount?: number;
+    /** Whether the column-header row shows before the user changes Display
+     * options (default true). */
     defaultShowColumnHeaders?: boolean;
     /** Whether row action affordances show before the user changes Display options. */
     defaultShowActions?: boolean;
@@ -111,6 +117,9 @@ export interface ListView<T> extends ListViewChrome {
     setOrderBy: (value: string) => void;
     orderDir: OrderDir;
     toggleOrderDir: () => void;
+    /** Orders by `value` ascending, or flips the direction when the list
+     * already orders by it: a sortable column header's click. */
+    sortBy: (value: string) => void;
     applyOrder: (rows: T[]) => T[];
     facets: FilterFacet<T>[];
     filters: Record<string, string[]>;
@@ -121,7 +130,7 @@ export interface ListView<T> extends ListViewChrome {
     actions: ActionDef[];
     isPinned: (key: string) => boolean;
     togglePinned: (key: string) => void;
-    /** Whether the table renders its column-header row (default off). */
+    /** Whether the table renders its column-header row (default on). */
     showColumnHeaders: boolean;
     toggleColumnHeaders: () => void;
     /** Toggle whether rows expose action affordances. */