@protobase/ui 0.21.2 → 0.21.3

package/dist/data-grid/truncated-text.js

@@ -0,0 +1,16 @@
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/data-grid/truncated-text.tsx
+const offerWhole = (text) => (event) => {
+	const span = event.currentTarget;
+	if (span.scrollWidth > Math.ceil(span.getBoundingClientRect().width)) span.title = text;
+	else span.removeAttribute("title");
+};
+/** Text cut to one line with an ellipsis, that shows whole as a tooltip when hovered while cut. */
+const TruncatedText = ({ text, className }) => /* @__PURE__ */ jsx("span", {
+	className: cn("truncate", className),
+	onMouseEnter: offerWhole(text),
+	children: text
+});
+//#endregion
+export { TruncatedText };

package/dist/data-grid/use-fitted-columns.js

@@ -0,0 +1,28 @@
+import { fitColumns } from "./content-widths.js";
+import { useMemo, useState } from "react";
+//#region src/data-grid/use-fitted-columns.ts
+const sizesOf = (specs) => Object.fromEntries(specs.map(({ id, width, minWidth, fixed }) => [id, {
+	width,
+	minWidth,
+	fixed
+}]));
+/**
+* `columns` sized by the first rows shown, fitted once per set of columns: later pages, filters and sorts keep those
+* widths, so columns never jump while scrolling, and a longer value later on is cut, with the whole of it on hover.
+*/
+const useFittedColumns = (columns, rows) => {
+	const key = columns.map((spec) => spec.id).sort().join(" ");
+	const [fitted, setFitted] = useState();
+	const current = fitted?.key === key ? fitted : void 0;
+	if (!current && rows.length > 0) setFitted({
+		key,
+		sizes: sizesOf(fitColumns(columns, rows))
+	});
+	const sizes = current?.sizes;
+	return useMemo(() => sizes ? columns.map((spec) => ({
+		...spec,
+		...sizes[spec.id]
+	})) : columns, [columns, sizes]);
+};
+//#endregion
+export { useFittedColumns };

package/dist/data-grid/use-pinned-columns.js

@@ -3,14 +3,15 @@ import { useCallback, useState } from "react";
 //#region src/data-grid/use-pinned-columns.ts
 /**
 * The ids of the columns pinned to the left, in pin order. With a `storageKey` the choice is kept in local storage
-* (per user and resource); `initial` applies until the user has chosen.
+* (per user and resource); `initial` applies until the user has chosen, as it is on each render.
 */
 const usePinnedColumns = (storageKey, initial = []) => {
-	const [pinned, setPinned] = useState(() => (storageKey ? readPinned(localStorage, storageKey) : void 0) ?? initial);
-	return [pinned, useCallback((next) => {
-		setPinned(next);
+	const [chosen, setChosen] = useState(() => storageKey ? readPinned(localStorage, storageKey) : void 0);
+	const update = useCallback((next) => {
+		setChosen(next);
 		if (storageKey) writePinned(localStorage, storageKey, next);
-	}, [storageKey])];
+	}, [storageKey]);
+	return [chosen ?? initial, update];
 };
 //#endregion
 export { usePinnedColumns };

package/dist/live/columns-from-model.js

@@ -1,6 +1,8 @@
+import { recordTitleField } from "./model-helpers.js";
 import { humanize } from "./naming.js";
-import { isMarkdown } from "../markdown/markdown-hint.js";
+import { badgeWidth, headerWidth } from "../data-grid/content-widths.js";
 import { markdownExcerpt } from "../markdown/markdown-excerpt.js";
+import { isMarkdown } from "../markdown/markdown-hint.js";
 import { enumLabel } from "@protobase/schema";
 //#region src/live/columns-from-model.ts
 const tones = {
@@ -37,10 +39,6 @@ const widths = {
 	user: 130,
 	file: 180
 };
-/** Room for a header at 12px plus cell padding, the sort arrow and the column menu button. */
-const headerWidth = (header, sortable) => Math.ceil(header.length * 7.2) + 24 + (sortable ? 16 : 0) + 28;
-/** A status badge: dot, padding and the longest label. */
-const badgeWidth = (labels) => Math.ceil(Math.max(0, ...labels.map((label) => label.length)) * 7.2) + 56;
 const fixedKinds = /* @__PURE__ */ new Set([
 	"datetime",
 	"date",
@@ -67,6 +65,7 @@ const currencyCents = (value) => Math.round(Number.parseFloat(String(value)) * 1
 const listColumnNames = (resource, view) => view?.list?.columns ?? Object.keys(resource.fields).slice(0, 6);
 /** Grid columns for `names`, by default the view's list: kinds follow the field types and the view's format hints. */
 const columnsFromModel = (resource, view, highlight = [], names = listColumnNames(resource, view)) => {
+	const title = recordTitleField(resource, view);
 	return names.flatMap((name, index) => {
 		const field = resource.fields[name];
 		if (!field) return [];
@@ -82,6 +81,7 @@ const columnsFromModel = (resource, view, highlight = [], names = listColumnName
 			sortable: field.sortable,
 			minWidth: Math.max(kind === "id" ? 150 : 0, headerWidth(viewField?.label ?? humanize(name), field.sortable), kind === "status" ? badgeWidth(Object.values(labels)) : 0, suffixWidth > 0 ? widths[kind] + suffixWidth : 0),
 			...fixedKinds.has(kind) && { fixed: true },
+			...name === title && { title: true },
 			...highlight.includes(name) && { highlight: true },
 			...field.type === "enum" && {
 				tones: Object.fromEntries((field.enumValues ?? []).map((value) => [value, toneFor(value)])),
@@ -102,4 +102,4 @@ const columnsFromModel = (resource, view, highlight = [], names = listColumnName
 	});
 };
 //#endregion
-export { columnsFromModel, headerWidth, listColumnNames, toneFor };
+export { columnsFromModel, listColumnNames, toneFor };

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.21.2";
+var version = "0.21.3";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };