@protobase/ui 0.45.15 → 0.45.16

package/dist/data-grid/column-resize.js

@@ -0,0 +1,17 @@
+/**
+* The width a column dragged `delta` pixels from `start` takes, never below `minColumnWidth`, or below `start` for a
+* column the app made narrower than that, such as one of check marks.
+*/
+const resizedWidth = (start, delta) => Math.max(Math.min(64, start), Math.round(start + delta));
+/**
+* `specs` with the widths a resize set them to: those columns take that width whole, even below the minimum width the
+* app gave them, as `resizedWidth` keeps them usable.
+*/
+const withResizedWidths = (specs, widths) => specs.map((spec) => spec.id in widths ? {
+	...spec,
+	fixed: true,
+	width: widths[spec.id],
+	minWidth: void 0
+} : spec);
+//#endregion
+export { resizedWidth, withResizedWidths };

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

@@ -10,6 +10,8 @@ import { useHorizontalScroll } from "./use-horizontal-scroll.js";
 import { usePinnedColumns } from "./use-pinned-columns.js";
 import { defaultPins } from "./default-pins.js";
 import { useFittedColumns } from "./use-fitted-columns.js";
+import { withResizedWidths } from "./column-resize.js";
+import { useColumnResize } from "./use-column-resize.js";
 import { GridHeader } from "./grid-header.js";
 import { DataRow, SkeletonRow } from "./grid-row.js";
 import { usePagedRows } from "./use-paged-rows.js";
@@ -94,7 +96,10 @@ const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0,
 		firstIndex,
 		lastIndex
 	]);
-	const sized = useFittedColumns(columns, data);
+	const headerRef = useRef(null);
+	const resize = useColumnResize(headerRef);
+	const fitted = useFittedColumns(columns, data);
+	const sized = useMemo(() => withResizedWidths(fitted, resize.widths), [fitted, resize.widths]);
 	const table = useTable({
 		features,
 		columns: tableColumns,
@@ -117,7 +122,6 @@ const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0,
 	const trailing = rowActions && rowActions.length > 0 ? 40 : 0;
 	const minScale = narrow ? 1 : desktopMinScale;
 	const horizontal = useHorizontalScroll();
-	const headerRef = useRef(null);
 	const onBodyScroll = () => {
 		horizontal.onScroll();
 		if (headerRef.current && horizontal.ref.current) headerRef.current.scrollLeft = horizontal.ref.current.scrollLeft;
@@ -169,6 +173,8 @@ const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0,
 				lastPinned,
 				scrolled: horizontal.scrolled,
 				onTogglePin: togglePin,
+				resize,
+				widths: resize.widths,
 				selectable,
 				selectedCount,
 				onClearSelection: () => setRowSelection({})

package/dist/data-grid/grid-header.js

@@ -4,6 +4,7 @@ import { text } from "./messages.js";
 import { gridTemplate } from "./grid-template.js";
 import { isRightAligned } from "./column-spec.js";
 import { HeaderMenu, unsortableText } from "./header-menu.js";
+import { ResizeHandle } from "./resize-handle.js";
 import { ArrowDown, ArrowUp, ChevronsUpDown } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/data-grid/grid-header.tsx
@@ -19,7 +20,7 @@ const HeaderLabel = ({ spec }) => /* @__PURE__ */ jsxs(Fragment, { children: [/*
 	className: "rounded bg-primary px-1 text-[10px] font-semibold uppercase leading-4 text-primary-foreground",
 	children: text("new")
 })] });
-const GridHeader = ({ cells, specs, gutter, selectedCount, selectable, trailing, minScale, pins = {}, lastPinned, scrolled, onTogglePin, onClearSelection }) => /* @__PURE__ */ jsxs("div", {
+const GridHeader = ({ cells, specs, gutter, selectedCount, selectable, trailing, minScale, pins = {}, lastPinned, scrolled, onTogglePin, resize, widths = {}, onClearSelection }) => /* @__PURE__ */ jsxs("div", {
 	className: "grid h-8 shrink-0 items-center border-b bg-surface text-body font-medium text-muted-foreground",
 	style: { gridTemplateColumns: gridTemplate(specs, gutter, trailing, minScale) },
 	role: "row",
@@ -44,25 +45,34 @@ const GridHeader = ({ cells, specs, gutter, selectedCount, selectable, trailing,
 			return /* @__PURE__ */ jsxs("div", {
 				"data-col-id": spec.id,
 				style: pinned ? { left: pins[spec.id] } : void 0,
-				className: cn("group/cell flex h-full min-w-0 items-center", pinned && "sticky z-10 bg-inherit", pinned && scrolled && spec.id === lastPinned && "shadow-[1px_0_0_var(--border),4px_0_6px_-2px_rgb(0_0_0/0.12)]", spec.highlight && "bg-primary-soft text-primary-text"),
-				children: [spec.sortable ? /* @__PURE__ */ jsxs("button", {
-					type: "button",
-					onClick: onSort,
-					className: cn("group/head flex h-full min-w-0 flex-1 items-center gap-1 pl-3 pr-1 text-left", isRightAligned(spec.kind) && "justify-end", "hover:text-foreground", sorted && "text-foreground"),
-					children: [/* @__PURE__ */ jsx(HeaderLabel, { spec }), /* @__PURE__ */ jsx(SortIcon, { sorted })]
-				}) : /* @__PURE__ */ jsx("div", {
-					title: unsortableText(),
-					className: cn("flex h-full min-w-0 flex-1 items-center gap-1 pl-3 pr-1 text-left", isRightAligned(spec.kind) && "justify-end"),
-					children: /* @__PURE__ */ jsx(HeaderLabel, { spec })
-				}), /* @__PURE__ */ jsx("div", {
-					className: "pr-1.5",
-					children: /* @__PURE__ */ jsx(HeaderMenu, {
+				className: cn("group/cell flex h-full min-w-0 items-center", pinned ? "sticky z-10 bg-inherit" : "relative", pinned && scrolled && spec.id === lastPinned && "shadow-[1px_0_0_var(--border),4px_0_6px_-2px_rgb(0_0_0/0.12)]", spec.highlight && "bg-primary-soft text-primary-text"),
+				children: [
+					spec.sortable ? /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						onClick: onSort,
+						className: cn("group/head flex h-full min-w-0 flex-1 items-center gap-1 pl-3 pr-1 text-left", isRightAligned(spec.kind) && "justify-end", "hover:text-foreground", sorted && "text-foreground"),
+						children: [/* @__PURE__ */ jsx(HeaderLabel, { spec }), /* @__PURE__ */ jsx(SortIcon, { sorted })]
+					}) : /* @__PURE__ */ jsx("div", {
+						title: unsortableText(),
+						className: cn("flex h-full min-w-0 flex-1 items-center gap-1 pl-3 pr-1 text-left", isRightAligned(spec.kind) && "justify-end"),
+						children: /* @__PURE__ */ jsx(HeaderLabel, { spec })
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "pr-1.5",
+						children: /* @__PURE__ */ jsx(HeaderMenu, {
+							header: spec.header,
+							pinned,
+							sortable: Boolean(spec.sortable),
+							onTogglePin: () => onTogglePin(spec.id)
+						})
+					}),
+					resize && /* @__PURE__ */ jsx(ResizeHandle, {
+						id: spec.id,
 						header: spec.header,
-						pinned,
-						sortable: Boolean(spec.sortable),
-						onTogglePin: () => onTogglePin(spec.id)
+						width: widths[spec.id],
+						resize
 					})
-				})]
+				]
 			}, spec.id);
 		}),
 		trailing ? /* @__PURE__ */ jsx("div", { className: "sticky right-0 z-10 h-full bg-inherit" }) : null

package/dist/data-grid/messages.js

@@ -6,6 +6,7 @@ const text = defineMessages({
 		columnMenu: (header) => `${header} column menu`,
 		unpin: "Unpin",
 		pinToLeft: "Pin to left",
+		resizeColumn: (header) => `Resize ${header} column`,
 		selected: (count) => `${count} selected`,
 		no: "No",
 		shownIn: (zone) => `Shown in ${zone}`,
@@ -28,6 +29,7 @@ const text = defineMessages({
 		columnMenu: (header) => `Kolommenu ${header}`,
 		unpin: "Losmaken",
 		pinToLeft: "Links vastzetten",
+		resizeColumn: (header) => `Breedte kolom ${header}`,
 		selected: (count) => `${count} geselecteerd`,
 		no: "Nee",
 		shownIn: (zone) => `Getoond in ${zone}`,

package/dist/data-grid/resize-handle.js

@@ -0,0 +1,21 @@
+import { text } from "./messages.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/data-grid/resize-handle.tsx
+/**
+* The right edge of a header cell, dragged to make its column wider or narrower. It sits beside the sort button rather
+* than in it, so a drag never sorts.
+*/
+const ResizeHandle = ({ id, header, width, resize }) => /* @__PURE__ */ jsx("div", {
+	role: "separator",
+	"aria-orientation": "vertical",
+	"aria-label": text("resizeColumn", header),
+	"aria-valuemin": 64,
+	"aria-valuenow": width,
+	tabIndex: 0,
+	onPointerDown: (event) => resize.onPointerDown(id, event),
+	onKeyDown: (event) => resize.onKeyDown(id, event),
+	className: "group/resize absolute inset-y-0 right-0 z-10 flex w-2 cursor-col-resize touch-none justify-end outline-none",
+	children: /* @__PURE__ */ jsx("div", { className: "h-full w-0.5 bg-transparent group-hover/resize:bg-primary group-focus-visible/resize:bg-primary group-active/resize:bg-primary" })
+});
+//#endregion
+export { ResizeHandle };

package/dist/data-grid/use-column-resize.js

@@ -0,0 +1,51 @@
+import { resizedWidth } from "./column-resize.js";
+import { useState } from "react";
+//#region src/data-grid/use-column-resize.ts
+/** The widths every header cell has now, by column id, so that resizing one column leaves the others as they are. */
+const measuredWidths = (header) => Object.fromEntries([...header.querySelectorAll("[data-col-id]")].map((cell) => [cell.dataset.colId, cell.offsetWidth]));
+/**
+* Column widths the user sets by dragging a header cell's edge, or with the arrow keys on it, by column id. They live
+* as long as the grid does: a reload or another page shows the app's widths again.
+*/
+const useColumnResize = (header) => {
+	const [widths, setWidths] = useState({});
+	const startWidths = () => ({
+		...header.current ? measuredWidths(header.current) : {},
+		...widths
+	});
+	const onPointerDown = (id, event) => {
+		if (event.button !== 0) return;
+		event.preventDefault();
+		const start = startWidths();
+		const startX = event.clientX;
+		const onMove = (move) => setWidths({
+			...start,
+			[id]: resizedWidth(start[id] ?? 0, move.clientX - startX)
+		});
+		const onEnd = () => {
+			window.removeEventListener("pointermove", onMove);
+			window.removeEventListener("pointerup", onEnd);
+			window.removeEventListener("pointercancel", onEnd);
+		};
+		window.addEventListener("pointermove", onMove);
+		window.addEventListener("pointerup", onEnd);
+		window.addEventListener("pointercancel", onEnd);
+	};
+	const onKeyDown = (id, event) => {
+		const delta = event.key === "ArrowRight" ? 16 : event.key === "ArrowLeft" ? -16 : 0;
+		if (delta === 0) return;
+		event.preventDefault();
+		const start = startWidths();
+		setWidths({
+			...start,
+			[id]: resizedWidth(start[id] ?? 0, delta)
+		});
+	};
+	return {
+		widths,
+		onPointerDown,
+		onKeyDown
+	};
+};
+//#endregion
+export { useColumnResize };

package/dist/package.js

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