@parallelworks/ui 0.84.1 → 0.85.0

package/dist/list/ListTable.js

@@ -1,5 +1,6 @@
 import { cx } from "../cx.js";
 import { ErrorIcon } from "../icons.js";
+import { Tooltip } from "../components/Tooltip.js";
 import { useStrings } from "../components/Provider.js";
 import { AppLink } from "../components/AppLink.js";
 import { positionKeys } from "../components/keys.js";
@@ -95,32 +96,18 @@ function NameCell({ icon, iconTile = false, name, subtitle, href, badge, title,
 }
 /** A row's column text: muted 13px, or monospace for an ID, a path or a
 *  hash. The style sits on the text rather than the cell, so it carries over
-*  when a narrow list stacks the column under the name. */
+*  when a narrow list stacks the column under the name. Text wider than its
+*  column is cut off with an ellipsis, and shows whole in a tooltip. */
 function ListCellText({ mono = false, className, children }) {
-	return /* @__PURE__ */ jsx("span", {
-		className: cx("text-(--theme-muted-text-color)", mono ? "font-mono text-xs" : "text-[13px]", className),
+	const text = /* @__PURE__ */ jsx("span", {
+		className: cx("block min-w-0 truncate text-(--theme-muted-text-color)", mono ? "font-mono text-xs" : "text-[13px]", className),
 		children
 	});
-}
-function GroupRow({ label, count, colSpan }) {
-	return /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsxs("td", {
-		colSpan,
-		className: "bg-(--theme-muted-panel-bg) py-1.5 text-xs font-medium",
-		children: [
-			/* @__PURE__ */ jsx("span", {
-				className: "text-(--theme-app)",
-				children: label
-			}),
-			/* @__PURE__ */ jsx("span", {
-				className: "mx-1.5 opacity-50",
-				children: "·"
-			}),
-			/* @__PURE__ */ jsx("span", {
-				className: "text-(--theme-muted-text-color)",
-				children: count
-			})
-		]
-	}) });
+	return typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx(Tooltip, {
+		content: children,
+		overflowOnly: true,
+		children: text
+	}) : text;
 }
 /** Says a list couldn't load. It never shows the error's own text, which is
 *  the server's words, in its language and not written for the reader. */
@@ -228,7 +215,7 @@ function ListActionsHeader({ view, actionCount = 0, className }) {
 	const { common } = useStrings();
 	if (view && !view.showActions) return null;
 	const width = view ? view.actionsWidth : actionsColumnWidth(actionCount);
-	const floating = !!view && !view.alwaysShowActions && view.actionsWidth === actionsColumnWidth(0);
+	const floating = !!view && !view.alwaysShowActions && !view.lastColumnLocked && view.actionsWidth === actionsColumnWidth(0);
 	return /* @__PURE__ */ jsx(Table.Header, {
 		caps: false,
 		style: {
@@ -244,4 +231,4 @@ function ListActionsHeader({ view, actionCount = 0, className }) {
 }
 ListActionsHeader.isTableHeader = true;
 //#endregion
-export { FLOATING_ACTIONS_LANE, GroupRow, HEADERS_OFF, ListActionsHeader, ListCellText, ListError, ListSelectAllHeader, ListSkeleton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, STRETCHED_LINK, STRETCHED_LINK_ROW, StretchRowLinkContext, actionsColumnWidth, listTableFixedProps, listTableProps };
+export { FLOATING_ACTIONS_LANE, HEADERS_OFF, ListActionsHeader, ListCellText, ListError, ListSelectAllHeader, ListSkeleton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, STRETCHED_LINK, STRETCHED_LINK_ROW, StretchRowLinkContext, actionsColumnWidth, listTableFixedProps, listTableProps };

package/dist/list/ListViewControls.d.ts

@@ -1,4 +1,4 @@
-import type { ListView } from './listView.js';
+import { type ListView } from './listView.js';
 import type { ListFilters } from './useListFilters.js';
 export declare function ListDisplayMenu<T>({ view, label }: {
     view: ListView<T>;

package/dist/list/ListViewControls.js

@@ -10,6 +10,7 @@ import { InfoTip } from "../components/InfoTip.js";
 import { Switch } from "../components/Switch.js";
 import { Select } from "../components/Select.js";
 import { AddFilterMenu } from "./ListFilterBar.js";
+import { isLocked } from "./listView.js";
 import { Menu } from "@base-ui/react/menu";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -20,7 +21,7 @@ var pillClassName = "whitespace-nowrap rounded-full border border-(--theme-borde
 var SECTION_LABEL = "mb-2 text-[11px] font-medium uppercase tracking-wide text-(--theme-muted-text-color)";
 function ListDisplayMenu({ view, label }) {
 	const { common, list: t } = useStrings();
-	const toggleable = view.columns.filter((c) => !c.alwaysVisible);
+	const toggleable = view.columns.filter((c) => !isLocked(c));
 	const hasGrouping = view.groupBys.length > 0;
 	const orderDirLabel = view.orderDir === "asc" ? t.ascending : t.descending;
 	return /* @__PURE__ */ jsxs(Popover, {

package/dist/list/index.d.ts

@@ -1,8 +1,8 @@
 export { ActionToolbar, type ToolbarAction, ToolbarButton, type ToolbarItem, } from './ActionToolbar.js';
 export { type ActiveFilter, applyFilterList, DATE_PRESETS, type DatePreset, dateFilterRange, decodeFilters, encodeFilters, type FilterField, type FilterKind, type FilterOperator, type FilterOption, type FilterRowValue, filterParamKeys, matchFilter, sameFilters, withFilterParams, } from './filterModel.js';
 export { AddFilterMenu, type AddFilterMenuProps, FilterChip, ListFilterBar, type ListFilterBarProps, } from './ListFilterBar.js';
-export { ListColumns, ListPage, type ListPageEmpty, type ListPageProps, ListRow, ListRowActionsProvider, useListNavigate, } from './ListPage.js';
-export { actionsColumnWidth, GroupRow, ListActionsHeader, ListCellText, ListError, ListSelectAllHeader, ListSkeleton, listTableFixedProps, listTableProps, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, } from './ListTable.js';
+export { GroupRow, ListColumns, ListPage, type ListPageEmpty, type ListPageProps, ListRow, ListRowActionsProvider, useListNavigate, } from './ListPage.js';
+export { actionsColumnWidth, ListActionsHeader, ListCellText, ListError, ListSelectAllHeader, ListSkeleton, listTableFixedProps, listTableProps, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, } from './ListTable.js';
 export { ListToolbar, type ListToolbarProps } from './ListToolbar.js';
 export { ListDisplayMenu, ListFilterMenu } from './ListViewControls.js';
 export { ListCount, type ListSearch, ListSearchControl, useListSearch, } from './listSearch.js';

package/dist/list/index.js

@@ -1,13 +1,13 @@
 import { ActionToolbar, ToolbarButton } from "./ActionToolbar.js";
 import { DATE_PRESETS, applyFilterList, dateFilterRange, decodeFilters, encodeFilters, filterParamKeys, matchFilter, sameFilters, withFilterParams } from "./filterModel.js";
 import { AddFilterMenu, FilterChip, ListFilterBar } from "./ListFilterBar.js";
-import { GroupRow, ListActionsHeader, ListCellText, ListError, ListSelectAllHeader, ListSkeleton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, actionsColumnWidth, listTableFixedProps, listTableProps } from "./ListTable.js";
+import { ListActionsHeader, ListCellText, 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 { GroupRow, ListColumns, ListPage, ListRow, ListRowActionsProvider, useListNavigate } from "./ListPage.js";
+import { useListFilters } from "./useListFilters.js";
+import { DEFAULT_ORDER, FAVORITE_ORDER, useListView } from "./listView.js";
 import { ListDisplayMenu, ListFilterMenu } from "./ListViewControls.js";
 import { ListCount, ListSearchControl, useListSearch } from "./listSearch.js";
 import { ListToolbar } from "./ListToolbar.js";
-import { useListFilters } from "./useListFilters.js";
-import { DEFAULT_ORDER, FAVORITE_ORDER, useListView } from "./listView.js";
 import { HoverCardRow, UserHoverCard } from "./UserHoverCard.js";
 export { ActionToolbar, AddFilterMenu, DATE_PRESETS, DEFAULT_ORDER, FAVORITE_ORDER, FilterChip, GroupRow, HoverCardRow, ListActionsHeader, ListCellText, ListColumns, ListCount, ListDisplayMenu, ListError, ListFilterBar, ListFilterMenu, ListPage, ListRow, ListRowActionsProvider, ListSearchControl, ListSelectAllHeader, ListSkeleton, ListToolbar, MoreButton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, ToolbarButton, UserHoverCard, actionsColumnWidth, applyFilterList, assembleRowMenu, dateFilterRange, decodeFilters, encodeFilters, filterParamKeys, listTableFixedProps, listTableProps, matchFilter, rowContextMenuProps, sameFilters, useCopySubmenu, useListFilters, useListNavigate, useListSearch, useListView, useRowMenuActive, withFilterParams };

package/dist/list/listView.d.ts

@@ -7,8 +7,13 @@ export interface ColumnDef {
     key: string;
     label: string;
     headerClassName?: string;
-    /** Pinned on — never offered in the column picker (e.g. the Name column). */
+    /** Pinned on — never offered in the column picker — and the list's name
+     * column, which keeps a minimum width so it can't be crushed. */
     alwaysVisible?: boolean;
+    /** Always shown and never offered in the column picker, at its own width:
+     * for a column such as a delete button's, which `alwaysVisible` would widen
+     * to a name's minimum. */
+    locked?: boolean;
     /** Hidden until the user turns it on in the Display menu. */
     defaultHidden?: boolean;
     /** NOT a table column (no header) — appears in picker and isVisible, but excluded from visibleColumns. */
@@ -25,12 +30,21 @@ export interface ColumnDef {
      * then sorts the list: it shows, and sets, the same order as Display
      * options' Ordering. */
     orderBy?: string;
+    /** The column's width, such as `'12%'` or `128`, set on its header. In a
+     * fixed-layout list (`listTableFixedProps`), where every column without one
+     * takes an equal share, give the other columns a width each and leave the
+     * name without one, so it takes what they leave. A percentage is a share of
+     * the list: when narrower widths drop columns, the shares they held go to
+     * the columns left, each in proportion to its own, the name's among them. */
+    width?: string | number;
     /** `end` sets the header and the cells against the column's far edge, for
      * figures, sizes and times that compare best lined up on their last digit. */
     align?: 'start' | 'end';
 }
 /** Column responsive importance; `low` drops before `medium`. See {@link ColumnDef.priority}. */
 type ColumnPriority = 'low' | 'medium';
+/** Whether a column is always shown and kept out of the column picker. */
+export declare function isLocked(col: ColumnDef): boolean;
 interface GroupByOption {
     value: string;
     label: string;
@@ -113,6 +127,10 @@ export interface ListViewChrome {
     /** Per visible column, whether it stacks under the first on a narrow
      * container ({@link ColumnDef.stack}); `ListRow` reads entry `i`. */
     columnStacks: boolean[];
+    /** Whether the last column is a locked one, such as a delete button's: the
+     * row's `⋯` then keeps a lane of its own after it rather than floating over
+     * it on hover. */
+    lastColumnLocked?: boolean | undefined;
     /** The list's filters, which `ListPage` shows as a row of chips under its toolbar. */
     filterState?: ListFilters | undefined;
 }

package/dist/list/listView.js

@@ -11,6 +11,10 @@ var PRIORITY_SHOW_CLASS = {
 function stacks(col, i) {
 	return i > 0 && !col.priority && col.stack !== false;
 }
+/** Whether a column is always shown and kept out of the column picker. */
+function isLocked(col) {
+	return Boolean(col.alwaysVisible || col.locked);
+}
 function columnResponsiveClass(col, i) {
 	if (stacks(col, i)) return PRIORITY_SHOW_CLASS.medium;
 	return col.priority ? PRIORITY_SHOW_CLASS[col.priority] : "";
@@ -55,7 +59,7 @@ function useListView({ storageKey, sharedFiltersKey, columns, groupBys = [], def
 	]);
 	const defaultGroupByValue = defaultGroupBy ?? groupBys[0]?.value ?? "";
 	const defaultOrderByValue = isFavorite ? DEFAULT_ORDER : defaultOrderBy ?? orderBys[0]?.value ?? "";
-	const defaultHiddenKeys = useMemo(() => columns.filter((c) => c.defaultHidden && !c.alwaysVisible).map((c) => c.key), [columns]);
+	const defaultHiddenKeys = useMemo(() => columns.filter((c) => c.defaultHidden && !isLocked(c)).map((c) => c.key), [columns]);
 	const defaultPinnedKeys = useMemo(() => actions.filter((a) => a.defaultPinned).map((a) => a.key), [actions]);
 	const [hiddenKeys, setHiddenKeys] = usePersistedState(`${storageKey}:hiddenColumns`, defaultHiddenKeys);
 	const [pinnedKeys, setPinnedKeys] = usePersistedState(`${storageKey}:pinnedActions`, defaultPinnedKeys);
@@ -84,11 +88,13 @@ function useListView({ storageKey, sharedFiltersKey, columns, groupBys = [], def
 	const actionsWidth = effectiveShowActions ? actionsColumnWidth(pinnedCount) : 0;
 	const isVisible = useCallback((key) => {
 		const col = columns.find((c) => c.key === key);
-		return Boolean(col?.alwaysVisible) || !hiddenKeys.includes(key);
+		return col !== void 0 && isLocked(col) || !hiddenKeys.includes(key);
 	}, [columns, hiddenKeys]);
-	const visibleColumns = useMemo(() => columns.filter((c) => !c.inline && (c.alwaysVisible || !hiddenKeys.includes(c.key))), [columns, hiddenKeys]);
+	const visibleColumns = useMemo(() => columns.filter((c) => !c.inline && (isLocked(c) || !hiddenKeys.includes(c.key))), [columns, hiddenKeys]);
 	const columnClasses = useMemo(() => visibleColumns.map(columnClass), [visibleColumns]);
 	const columnStacks = useMemo(() => visibleColumns.map(stacks), [visibleColumns]);
+	const last = visibleColumns.at(-1);
+	const lastColumnLocked = visibleColumns.length > 1 && last !== void 0 && !last.alwaysVisible && isLocked(last);
 	const toggleColumn = useCallback((key) => setHiddenKeys((prev) => prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key]), [setHiddenKeys]);
 	const { add, update, remove } = filterState;
 	const setFacetValues = useCallback((key, values) => {
@@ -183,6 +189,7 @@ function useListView({ storageKey, sharedFiltersKey, columns, groupBys = [], def
 		visibleColumns,
 		columnClasses,
 		columnStacks,
+		lastColumnLocked,
 		isVisible,
 		pinnedCount,
 		actionsWidth,
@@ -230,4 +237,4 @@ function facetField(facet) {
 	};
 }
 //#endregion
-export { DEFAULT_ORDER, FAVORITE_ORDER, useListView };
+export { DEFAULT_ORDER, FAVORITE_ORDER, isLocked, useListView };