@protobase/ui 0.63.3 → 0.63.5

package/dist/inline-child-table/line-row.js

@@ -1,16 +1,12 @@
 import { cn } from "../lib/cn.js";
-import { lineTotalCents } from "../mocks/invoices.js";
 import { lineGrid } from "./columns.js";
-import { formatMoney } from "../format/money.js";
 import { LineMenu } from "./line-menu.js";
-import { NumberCell } from "./number-cell.js";
 import { text } from "./messages.js";
 import { GripVertical } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useSortable } from "@dnd-kit/sortable";
 //#region src/inline-child-table/line-row.tsx
-const parseEuros = (typed) => Math.round(Number(typed.replace(",", ".").replace(/[^0-9.]/g, "")) * 100);
-const LineRow = ({ line, position, count, reorderable, editable, onChange, onRemove, onMove }) => {
+const LineRow = ({ line, name, columns, position, count, reorderable, onRemove, onMove, error }) => {
 	const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = useSortable({
 		id: line.id,
 		disabled: !reorderable
@@ -23,7 +19,7 @@ const LineRow = ({ line, position, count, reorderable, editable, onChange, onRem
 		label: text("moveDown"),
 		disabled: position === count - 1,
 		onSelect: () => onMove(position + 1)
-	}] : [], ...editable ? [{
+	}] : [], ...onRemove ? [{
 		label: text("removeLine"),
 		destructive: true,
 		onSelect: onRemove
@@ -31,60 +27,36 @@ const LineRow = ({ line, position, count, reorderable, editable, onChange, onRem
 	return /* @__PURE__ */ jsxs("div", {
 		ref: setNodeRef,
 		"data-line-id": line.id,
+		"aria-invalid": error ? true : void 0,
 		style: {
 			transform: transform ? `translate3d(0, ${transform.y}px, 0)` : void 0,
 			transition
 		},
-		className: cn("group relative border-b border-border bg-background px-2 py-1 last:border-b-0 hover:bg-surface", lineGrid, isDragging && "z-10 bg-surface opacity-80 shadow-pop"),
+		className: cn("group relative border-b border-border bg-background px-2 py-1 last:border-b-0 hover:bg-surface", lineGrid, isDragging && "z-10 bg-surface opacity-80 shadow-pop", error && "bg-danger-soft"),
 		children: [
 			reorderable ? /* @__PURE__ */ jsx("button", {
 				ref: setActivatorNodeRef,
 				type: "button",
-				"aria-label": text("dragToReorder", line.description),
+				"aria-label": text("dragToReorder", name),
 				...attributes,
 				...listeners,
 				style: { touchAction: "none" },
 				className: "flex size-7 cursor-grab items-center justify-center rounded text-faint-foreground opacity-60 hover:bg-muted hover:opacity-100 focus-visible:opacity-100 active:cursor-grabbing pointer-coarse:size-11",
 				children: /* @__PURE__ */ jsx(GripVertical, { className: "size-4" })
 			}) : /* @__PURE__ */ jsx("span", {}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "min-w-0",
-				children: [/* @__PURE__ */ jsx("p", {
-					className: "truncate text-foreground",
-					children: line.description
-				}), /* @__PURE__ */ jsx("p", {
-					className: "font-mono text-[11px] text-faint-foreground",
-					children: line.productId
-				})]
-			}),
-			editable ? /* @__PURE__ */ jsx(NumberCell, {
-				label: text("quantity"),
-				value: line.quantity,
-				format: String,
-				parse: (typed) => Math.round(Number(typed)),
-				onCommit: (quantity) => onChange({ quantity })
-			}) : /* @__PURE__ */ jsx("span", {
-				className: "px-2 text-right tabular-nums",
-				children: line.quantity
-			}),
-			editable ? /* @__PURE__ */ jsx(NumberCell, {
-				label: text("unitPrice"),
-				value: line.unitPriceCents,
-				format: (cents) => (cents / 100).toFixed(2),
-				parse: parseEuros,
-				onCommit: (unitPriceCents) => onChange({ unitPriceCents })
-			}) : /* @__PURE__ */ jsx("span", {
-				className: "px-2 text-right tabular-nums",
-				children: (line.unitPriceCents / 100).toFixed(2)
-			}),
-			/* @__PURE__ */ jsx("span", {
-				className: "px-2 text-right font-medium tabular-nums text-foreground",
-				children: formatMoney(lineTotalCents(line))
-			}),
+			columns.map((column) => /* @__PURE__ */ jsx("div", {
+				className: cn("min-w-0", column.align === "right" && "text-right"),
+				children: column.cell(line)
+			}, column.key)),
 			menu.length > 0 ? /* @__PURE__ */ jsx(LineMenu, {
-				label: text("actionsFor", line.description),
+				label: text("actionsFor", name),
 				items: menu
-			}) : /* @__PURE__ */ jsx("span", {})
+			}) : /* @__PURE__ */ jsx("span", {}),
+			error && /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "col-span-full px-2 pb-1 text-xs text-danger-text",
+				children: error
+			})
 		]
 	});
 };

package/dist/inline-child-table/messages.js

@@ -9,20 +9,13 @@ const text = defineMessages({
 		dropped: (name, place, count) => `${name} was dropped at line ${place} of ${count}.`,
 		droppedAtStart: (name) => `${name} was dropped where it started.`,
 		cancelled: (name, place) => `Moving ${name} was cancelled. It is back at line ${place}.`,
-		item: "Item",
-		qty: "Qty",
-		quantity: "Quantity",
-		unitPrice: "Unit price",
-		lineTotal: "Line total",
 		addLine: "Add line",
+		noLines: "No lines yet.",
 		moveUp: "Move up",
 		moveDown: "Move down",
 		removeLine: "Remove line",
 		dragToReorder: (name) => `Drag to reorder ${name}`,
-		actionsFor: (name) => `Actions for ${name}`,
-		subtotal: "Subtotal",
-		vat: (percent) => `VAT ${percent}%`,
-		total: "Total"
+		actionsFor: (name) => `Actions for ${name}`
 	},
 	nl: {
 		instructions: "Druk op spatie of enter op de sleepgreep om een regel op te pakken. Verplaats hem met de pijltjestoetsen omhoog en omlaag, zet hem neer met spatie of enter, en annuleer met escape. Het regelmenu heeft ook Omhoog en Omlaag.",
@@ -32,20 +25,13 @@ const text = defineMessages({
 		dropped: (name, place, count) => `${name} is neergezet op regel ${place} van ${count}.`,
 		droppedAtStart: (name) => `${name} is neergezet waar hij begon.`,
 		cancelled: (name, place) => `Verplaatsen van ${name} is geannuleerd. Hij staat weer op regel ${place}.`,
-		item: "Artikel",
-		qty: "Aantal",
-		quantity: "Aantal",
-		unitPrice: "Stukprijs",
-		lineTotal: "Regeltotaal",
 		addLine: "Regel toevoegen",
+		noLines: "Nog geen regels.",
 		moveUp: "Omhoog",
 		moveDown: "Omlaag",
 		removeLine: "Regel verwijderen",
 		dragToReorder: (name) => `Sleep om ${name} te verplaatsen`,
-		actionsFor: (name) => `Acties voor ${name}`,
-		subtotal: "Subtotaal",
-		vat: (percent) => `Btw ${percent}%`,
-		total: "Totaal"
+		actionsFor: (name) => `Acties voor ${name}`
 	}
 });
 //#endregion

package/dist/notifications/bell/notification-item.js

@@ -1,6 +1,6 @@
 import { cn } from "../../lib/cn.js";
-import { formatRelativeTime } from "../../format/date.js";
 import { toneDots } from "../../primitives/badge.js";
+import { formatRelativeTime } from "../../format/date.js";
 import { RouteLink } from "../../primitives/route-link.js";
 import { text } from "./messages.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/organizations/invitation-page.js

@@ -2,8 +2,8 @@ import { useAuth } from "../auth/auth-provider.js";
 import { cn } from "../lib/cn.js";
 import { Spinner } from "../primitives/spinner.js";
 import { Button, buttonClass } from "../primitives/button.js";
-import { Input } from "../primitives/input.js";
 import { RouteLink } from "../primitives/route-link.js";
+import { Input } from "../primitives/input.js";
 import { authMessage } from "../auth/auth-messages.js";
 import { useAction } from "./use-action.js";
 import { text } from "./messages.js";

package/dist/package.js

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

package/dist/primitives/dialog.d.ts

@@ -9,7 +9,12 @@ export type DialogProps = {
   children?: ReactNode;
   /** Room for a row of cards or a table in the body, instead of a short question. */
   wide?: boolean;
+  /** Names the dialog in its layer's `data-dialog` (empty without), for code that asks whether an element sits in it. */
+  name?: string;
 };
-/** A modal with a title, optional body and action buttons. Closes on Escape and on a click outside. */
-export declare const Dialog: ({ title, description, onClose, actions, children, wide }: DialogProps) => import("react").JSX.Element;
+/**
+ * A modal with a title, optional body and action buttons. Closes on Escape and on a click outside. It is portalled to
+ * the body, so no stacking context of the page it opens from, such as a sticky column, puts page content above it.
+ */
+export declare const Dialog: ({ title, description, onClose, actions, children, wide, name }: DialogProps) => import("react").ReactPortal;
 //#endregion

package/dist/primitives/dialog.js

@@ -2,12 +2,17 @@ import { cn } from "../lib/cn.js";
 import { useFocusTrap } from "../lib/use-focus-trap.js";
 import { useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
 //#region src/primitives/dialog.tsx
-/** A modal with a title, optional body and action buttons. Closes on Escape and on a click outside. */
-const Dialog = ({ title, description, onClose, actions, children, wide = false }) => {
+/**
+* A modal with a title, optional body and action buttons. Closes on Escape and on a click outside. It is portalled to
+* the body, so no stacking context of the page it opens from, such as a sticky column, puts page content above it.
+*/
+const Dialog = ({ title, description, onClose, actions, children, wide = false, name }) => {
 	const panel = useRef(null);
 	useFocusTrap(panel, true, onClose);
-	return /* @__PURE__ */ jsx("div", {
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		"data-dialog": name ?? "",
 		className: "fixed inset-0 z-[90] flex items-center justify-center bg-backdrop/30 p-4 pb-[calc(1rem+var(--pb-safe-bottom))] pl-[calc(1rem+var(--pb-safe-left))] pr-[calc(1rem+var(--pb-safe-right))] pt-[calc(1rem+var(--pb-safe-top))]",
 		onMouseDown: (event) => event.target === event.currentTarget && onClose(),
 		children: /* @__PURE__ */ jsxs("div", {
@@ -36,7 +41,7 @@ const Dialog = ({ title, description, onClose, actions, children, wide = false }
 				})
 			]
 		})
-	});
+	}), document.body);
 };
 //#endregion
 export { Dialog };

package/dist/record-view/field.js

@@ -1,7 +1,7 @@
 import { Button } from "../primitives/button.js";
+import { Avatar } from "../primitives/avatar.js";
 import { text } from "./messages.js";
 import { FieldControlContext } from "../primitives/field-control.js";
-import { Avatar } from "../primitives/avatar.js";
 import { useId } from "react";
 import { TriangleAlert } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/record-view/messages.js

@@ -14,8 +14,6 @@ const text = defineMessages({
 		lastEditedBy: "Last edited by",
 		lastUpdated: (ago) => `Last updated ${ago}`,
 		viewing: (count) => `${count} viewing`,
-		savingSubject: (subject) => `Saving ${subject}...`,
-		subjectSaved: (subject) => `${subject} saved`,
 		tabs: "Tabs"
 	},
 	nl: {
@@ -31,8 +29,6 @@ const text = defineMessages({
 		lastEditedBy: "Laatst bewerkt door",
 		lastUpdated: (ago) => `Laatst bijgewerkt ${ago}`,
 		viewing: (count) => `${count} kijken mee`,
-		savingSubject: (subject) => `${subject} bewaren...`,
-		subjectSaved: (subject) => `${subject} bewaard`,
 		tabs: "Tabbladen"
 	}
 });

package/dist/record-view/record-header.js

@@ -1,6 +1,6 @@
-import { text } from "./messages.js";
-import { AvatarStack } from "../primitives/avatar.js";
 import { Badge } from "../primitives/badge.js";
+import { AvatarStack } from "../primitives/avatar.js";
+import { text } from "./messages.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/record-view/record-header.tsx
 const RecordHeader = ({ collection, title, status, lastEditedBy, presence = [], actions }) => {