@parallelworks/ui 0.22.0 → 0.24.0

package/dist/list/UserHoverCard.js

@@ -1,4 +1,6 @@
-import { useLink, useStrings } from "../components/Provider.js";
+import { useLink, useNotify, useStrings } from "../components/Provider.js";
+import { FiCopy } from "../icons/fi/FiCopy.js";
+import "../components/Tooltip.js";
 import { Avatar } from "../components/Avatar.js";
 import { HoverCardSurface, useHoverCard } from "./HoverCard.js";
 import cx from "classnames";
@@ -25,6 +27,7 @@ function HoverCardTrigger({ className, children, card }) {
 }
 function UserHoverCard({ x, y, onKeepOpen, onLeave, username, name, avatarSrc, badge, href, linkComponent, loading = false, relayoutKey, children }) {
 	const strings = useStrings();
+	const notify = useNotify();
 	const SlotLink = useLink();
 	const Link = linkComponent ?? SlotLink;
 	const displayName = name || username;
@@ -34,7 +37,7 @@ function UserHoverCard({ x, y, onKeepOpen, onLeave, username, name, avatarSrc, b
 		size: "lg",
 		className: "shrink-0"
 	}), /* @__PURE__ */ jsxs("div", {
-		className: "min-w-0 flex-1",
+		className: "flex min-h-10 min-w-0 flex-1 flex-col justify-between",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex flex-wrap items-center gap-x-1.5 gap-y-0.5",
 			children: [/* @__PURE__ */ jsx("span", {
@@ -45,10 +48,14 @@ function UserHoverCard({ x, y, onKeepOpen, onLeave, username, name, avatarSrc, b
 				children: badge
 			})]
 		}), /* @__PURE__ */ jsx("div", {
+			"data-copy-value": true,
 			className: "truncate text-xs text-(--theme-muted-text-color)",
 			children: username
 		})]
 	})] });
+	const t = strings.list;
+	const copyLabel = EMAIL.test(username) ? t.labelEmail : t.labelUsername;
+	const onCopy = () => navigator.clipboard?.writeText(username).then(() => notify.success(t.copied(copyLabel)), () => notify.error(t.couldntCopy(copyLabel)));
 	return /* @__PURE__ */ jsxs(HoverCardSurface, {
 		x,
 		y,
@@ -56,13 +63,24 @@ function UserHoverCard({ x, y, onKeepOpen, onLeave, username, name, avatarSrc, b
 		relayoutKey,
 		onKeepOpen,
 		onLeave,
-		children: [href ? /* @__PURE__ */ jsx(Link, {
-			to: href,
-			className: "flex items-start gap-3 transition-opacity hover:opacity-80",
-			children: header
-		}) : /* @__PURE__ */ jsx("div", {
-			className: "flex items-start gap-3",
-			children: header
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "group/copy flex items-end gap-1",
+			children: [href ? /* @__PURE__ */ jsx(Link, {
+				to: href,
+				className: "flex min-w-0 flex-1 items-start gap-3 transition-opacity hover:opacity-80",
+				children: header
+			}) : /* @__PURE__ */ jsx("div", {
+				className: "flex min-w-0 flex-1 items-start gap-3",
+				children: header
+			}), username && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": t.copy(copyLabel),
+				"data-tooltip-id": "global-tooltip",
+				"data-tooltip-content": t.copy(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(FiCopy, { "aria-hidden": "true" })
+			})]
 		}), loading ? /* @__PURE__ */ jsxs("div", {
 			role: "status",
 			"aria-label": strings.loading,
@@ -87,6 +105,7 @@ function UserHoverCard({ x, y, onKeepOpen, onLeave, username, name, avatarSrc, b
 		}) : null]
 	});
 }
+var EMAIL = /^[^\s@]+@[^\s@]+$/;
 var rowClasses = "flex gap-2 text-(--theme-muted-text-color)";
 /** One detail line of a hover card: a leading icon and its content. With
 * `onClick` the line is a button. */

package/dist/list/listView.d.ts

@@ -11,7 +11,14 @@ export interface ColumnDef {
     defaultHidden?: boolean;
     /** NOT a table column (no header) — appears in picker and isVisible, but excluded from visibleColumns. */
     inline?: boolean;
+    /** Drops below a container width instead of stacking (see `stack`). */
     priority?: ColumnPriority;
+    /** Below the `medium` width, a column without a `priority` gives up its cell
+     * and its content shows under the first column's instead, so a phone gets a
+     * row it can read rather than one running off the side. `false` keeps it a
+     * 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;
 }
 /** Column responsive importance; `low` drops before `medium`. See {@link ColumnDef.priority}. */
 type ColumnPriority = 'low' | 'medium';
@@ -79,6 +86,9 @@ export interface ListViewChrome {
     /** Responsive show/hide class per visible column (aligned to
      * {@link visibleColumns}); `ListColumns` and `ListRow` apply entry `i`. */
     columnClasses: string[];
+    /** Per visible column, whether it stacks under the first on a narrow
+     * container ({@link ColumnDef.stack}); `ListRow` reads entry `i`. */
+    columnStacks: boolean[];
 }
 export interface ListView<T> extends ListViewChrome {
     columns: ColumnDef[];

package/dist/list/listView.js

@@ -6,7 +6,12 @@ var PRIORITY_SHOW_CLASS = {
 	low: "hidden @[52rem]:table-cell",
 	medium: "hidden @[36rem]:table-cell"
 };
-function columnResponsiveClass(col) {
+/** Whether the column at index `i` of the visible ones stacks on a narrow container. */
+function stacks(col, i) {
+	return i > 0 && !col.priority && col.stack !== false;
+}
+function columnResponsiveClass(col, i) {
+	if (stacks(col, i)) return PRIORITY_SHOW_CLASS.medium;
 	return col.priority ? PRIORITY_SHOW_CLASS[col.priority] : "";
 }
 var DEFAULT_ORDER = "__default";
@@ -80,6 +85,7 @@ function useListView({ storageKey, sharedFiltersKey, columns, groupBys = [], def
 	}, [columns, hiddenKeys]);
 	const visibleColumns = useMemo(() => columns.filter((c) => !c.inline && (c.alwaysVisible || !hiddenKeys.includes(c.key))), [columns, hiddenKeys]);
 	const columnClasses = useMemo(() => visibleColumns.map(columnResponsiveClass), [visibleColumns]);
+	const columnStacks = useMemo(() => visibleColumns.map(stacks), [visibleColumns]);
 	const toggleColumn = useCallback((key) => setHiddenKeys((prev) => prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key]), [setHiddenKeys]);
 	const setFacetValues = useCallback((key, values) => {
 		const update = (prev) => {
@@ -171,6 +177,7 @@ function useListView({ storageKey, sharedFiltersKey, columns, groupBys = [], def
 		columns,
 		visibleColumns,
 		columnClasses,
+		columnStacks,
 		isVisible,
 		pinnedCount,
 		actionsWidth,