cortena-ui 1.3.0 → 1.3.1

package/dist/index.d.ts

@@ -1108,7 +1108,10 @@ interface ExportSheet {
   records: ExportCell[][];
 }
 export declare function toSheet<Row extends RowData>(table: DataTableTable<Row>, rows?: DataTableRow<Row>[]): ExportSheet;
-/** RFC 4180 text: comma separated, CRLF lines, quotes doubled. */
+/**
+ * RFC 4180 text: comma separated, CRLF lines, quotes doubled. A cell that a
+ * spreadsheet would read as a formula is prefixed with `'` so it stays text.
+ */
 export declare function toCsv<Row extends RowData>(table: DataTableTable<Row>, rows?: DataTableRow<Row>[]): string;
 export declare function downloadCsv<Row extends RowData>(table: DataTableTable<Row>, fileName?: string, rows?: DataTableRow<Row>[]): void;
 /**
@@ -1351,7 +1354,7 @@ declare function AvatarFallback({ className, ...props }: Avatar$1.Fallback.Props
 //#endregion
 //#region src/components/badge.d.ts
 declare const badgeVariants: (props?: ({
-  variant?: "default" | "success" | "warn" | "destructive" | "danger" | "info" | "warning" | "neutral" | "secondary" | "outline" | null | undefined;
+  variant?: "default" | "success" | "warn" | "destructive" | "danger" | "info" | "secondary" | "outline" | "warning" | "neutral" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface BadgeProps extends React$1.ComponentProps<"span">, VariantProps<typeof badgeVariants> {}
 declare function Badge({ className, variant, ...props }: BadgeProps): React$1.JSX.Element;
@@ -1454,7 +1457,7 @@ declare function BreadcrumbEllipsis({ className, children, ...props }: React$1.C
  * rendered element, which is Base UI's equivalent.
  */
 declare const buttonVariants: (props?: ({
-  variant?: "link" | "destructive" | "secondary" | "outline" | "primary" | "ghost" | "soft" | null | undefined;
+  variant?: "destructive" | "primary" | "secondary" | "outline" | "ghost" | "soft" | "link" | null | undefined;
   size?: "sm" | "md" | "lg" | "icon" | "icon-sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface ButtonProps extends React$1.ComponentProps<typeof Button$1>, VariantProps<typeof buttonVariants> {}

package/dist/index.js

@@ -950,14 +950,28 @@ function useNivoTheme() {
 }
 //#endregion
 //#region src/components/chart/nivo-charts.tsx
-const lazy = (load) => React.lazy(async () => ({ default: await load() }));
-const HeatMapSvg = lazy(async () => (await import("@nivo/heatmap")).ResponsiveHeatMap);
-const HeatMapCanvas = lazy(async () => (await import("@nivo/heatmap")).ResponsiveHeatMapCanvas);
-const CalendarSvg = lazy(async () => (await import("@nivo/calendar")).ResponsiveCalendar);
-const CalendarCanvas = lazy(async () => (await import("@nivo/calendar")).ResponsiveCalendarCanvas);
-const TreeMapSvg = lazy(async () => (await import("@nivo/treemap")).ResponsiveTreeMap);
-const TreeMapCanvas = lazy(async () => (await import("@nivo/treemap")).ResponsiveTreeMapCanvas);
-const SunburstSvg = lazy(async () => (await import("@nivo/sunburst")).ResponsiveSunburst);
+const loaders = {
+	"heatmap-svg": async () => (await import("@nivo/heatmap")).ResponsiveHeatMap,
+	"heatmap-canvas": async () => (await import("@nivo/heatmap")).ResponsiveHeatMapCanvas,
+	"calendar-svg": async () => (await import("@nivo/calendar")).ResponsiveCalendar,
+	"calendar-canvas": async () => (await import("@nivo/calendar")).ResponsiveCalendarCanvas,
+	"treemap-svg": async () => (await import("@nivo/treemap")).ResponsiveTreeMap,
+	"treemap-canvas": async () => (await import("@nivo/treemap")).ResponsiveTreeMapCanvas,
+	"sunburst-svg": async () => (await import("@nivo/sunburst")).ResponsiveSunburst
+};
+let chunks = /* @__PURE__ */ new Map();
+function chunk(name) {
+	let component = chunks.get(name);
+	if (!component) {
+		component = React.lazy(async () => ({ default: await loaders[name]() }));
+		chunks.set(name, component);
+	}
+	return component;
+}
+/** Forget every loaded-or-failed Nivo chunk, so the next render loads it again. */
+function resetNivoChunks() {
+	chunks = /* @__PURE__ */ new Map();
+}
 /**
 * Resolved series colours for Nivo: config colours are `var()` strings, which
 * Nivo cannot use, so a configured colour is resolved through the container's
@@ -1007,7 +1021,7 @@ function NivoChart({ type, data, config, renderer, scale, legend, valueFormatter
 	const labelOn = (d) => onFill(d.color);
 	switch (type) {
 		case "heatmap": {
-			const Component = canvas ? HeatMapCanvas : HeatMapSvg;
+			const Component = chunk(canvas ? "heatmap-canvas" : "heatmap-svg");
 			const rows = isMatrix(data) ? matrixToSeries(data) : data;
 			const cells = rows.reduce((n, r) => n + r.data.length, 0);
 			const colorConfig = scale === "diverging" ? {
@@ -1056,7 +1070,7 @@ function NivoChart({ type, data, config, renderer, scale, legend, valueFormatter
 			});
 		}
 		case "calendar": {
-			const Component = canvas ? CalendarCanvas : CalendarSvg;
+			const Component = chunk(canvas ? "calendar-canvas" : "calendar-svg");
 			const days = data;
 			const range = calendarRange(days, from, to);
 			return /* @__PURE__ */ jsx(Component, {
@@ -1090,7 +1104,7 @@ function NivoChart({ type, data, config, renderer, scale, legend, valueFormatter
 			});
 		}
 		case "treemap": {
-			const Component = canvas ? TreeMapCanvas : TreeMapSvg;
+			const Component = chunk(canvas ? "treemap-canvas" : "treemap-svg");
 			const tree = data;
 			return /* @__PURE__ */ jsx(Component, {
 				data: tree,
@@ -1117,8 +1131,9 @@ function NivoChart({ type, data, config, renderer, scale, legend, valueFormatter
 			});
 		}
 		case "sunburst": {
+			const Component = chunk("sunburst-svg");
 			const tree = data;
-			return /* @__PURE__ */ jsx(SunburstSvg, {
+			return /* @__PURE__ */ jsx(Component, {
 				data: tree,
 				id: treeIdentity(tree),
 				value: "value",
@@ -1404,13 +1419,33 @@ function seriesKeys(type, data, indexBy, keys) {
 		case "calendar": return [];
 	}
 }
+/**
+* Catches a Nivo chunk that failed to load. Recovering takes two things,
+* because `React.lazy` memoises a rejection for the life of the page: fresh
+* lazy components ({@link resetNivoChunks}) and a boundary that leaves its
+* failed state. `resetKey` does the second on its own when the chart changes,
+* and the fallback gets a `retry` that does both.
+*/
 var ChunkBoundary = class extends React.Component {
-	state = { failed: false };
+	state = {
+		failed: false,
+		key: this.props.resetKey
+	};
 	static getDerivedStateFromError() {
 		return { failed: true };
 	}
+	static getDerivedStateFromProps(props, state) {
+		return props.resetKey === state.key ? null : {
+			failed: false,
+			key: props.resetKey
+		};
+	}
+	retry = () => {
+		resetNivoChunks();
+		this.setState({ failed: false });
+	};
 	render() {
-		return this.state.failed ? this.props.fallback : this.props.children;
+		return this.state.failed ? this.props.fallback(this.retry) : this.props.children;
 	}
 };
 /**
@@ -1450,7 +1485,18 @@ function Chart({ type, data, config, renderer = "svg", indexBy, keys, stacked, s
 	else if (errorText) body = /* @__PURE__ */ jsx(ChartError, { children: errorText });
 	else if (empty) body = /* @__PURE__ */ jsx(ChartEmpty, { children: emptyMessage });
 	else if (engine === "nivo") body = /* @__PURE__ */ jsx(ChunkBoundary, {
-		fallback: /* @__PURE__ */ jsx(ChartError, { children: "Chart could not be loaded" }),
+		resetKey: `${type}|${renderer}`,
+		fallback: (retry) => /* @__PURE__ */ jsxs(ChartError, { children: [
+			"Chart could not be loaded.",
+			" ",
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-slot": "chart-retry",
+				onClick: retry,
+				className: "underline underline-offset-2",
+				children: "Retry"
+			})
+		] }),
 		children: /* @__PURE__ */ jsx(React.Suspense, {
 			fallback: /* @__PURE__ */ jsx(ChartLoading, {}),
 			children: /* @__PURE__ */ jsx(NivoChart, {
@@ -1904,12 +1950,25 @@ function toSheet(table, rows = exportRows(table)) {
 		}))
 	};
 }
+/**
+* Text a spreadsheet would evaluate rather than display. Excel, Sheets and
+* LibreOffice all treat a leading `=`, `+`, `-` or `@` as the start of a
+* formula, and a leading tab or CR as whitespace they strip before looking
+* again — so `\t=cmd|'/c calc'!A1` is a formula too. Only strings are checked:
+* a number, boolean or Date cell cannot carry one, and prefixing `-5` would
+* turn a number column into text.
+*/
+const FORMULA_START = /^[=+\-@\t\r]/;
 function csvField(value) {
 	if (value == null) return "";
-	const text = value instanceof Date ? value.toISOString() : String(value);
+	let text = value instanceof Date ? value.toISOString() : String(value);
+	if (typeof value === "string" && FORMULA_START.test(text)) text = `'${text}`;
 	return /[",\n\r]/.test(text) ? `"${text.replace(/"/g, "\"\"")}"` : text;
 }
-/** RFC 4180 text: comma separated, CRLF lines, quotes doubled. */
+/**
+* RFC 4180 text: comma separated, CRLF lines, quotes doubled. A cell that a
+* spreadsheet would read as a formula is prefixed with `'` so it stays text.
+*/
 function toCsv(table, rows) {
 	const { headers, records } = toSheet(table, rows);
 	return [headers, ...records].map((line) => line.map(csvField).join(",")).join("\r\n");
@@ -2596,14 +2655,20 @@ function useLocalStrategy(source, query, mode) {
 	const targetPage = infinite ? loadedForScope.length : query.page;
 	const needs = infinite ? loadedForScope.length < wantedPages : !(state.scopeKey === scopeKey && state.page === query.page && state.pages.length > 0);
 	const requestKey = `${scopeKey}|${targetPage}|${tick}`;
+	const fetchRef = React.useRef(fetch);
+	React.useEffect(() => {
+		fetchRef.current = fetch;
+	});
+	const hasFetch = Boolean(fetch);
 	React.useEffect(() => {
-		if (!fetch || !needs) return;
+		const run = fetchRef.current;
+		if (!run || !needs) return;
 		const controller = new AbortController();
 		setState((s) => ({
 			...s,
 			isFetching: true
 		}));
-		fetch({
+		run({
 			...scope,
 			page: targetPage
 		}, controller.signal).then((result) => {
@@ -2625,7 +2690,7 @@ function useLocalStrategy(source, query, mode) {
 		});
 		return () => controller.abort();
 	}, [
-		fetch,
+		hasFetch,
 		requestKey,
 		needs
 	]);
@@ -5127,14 +5192,21 @@ const buttonSize = z.enum([
 	"lg"
 ]).describe("Control size.");
 /**
+* Root-relative means one slash and then a path. `//evil.example/x` is
+* protocol-relative — the browser resolves it against the page's scheme and
+* goes off-origin — and `/\evil.example` is the same trick, because browsers
+* treat a backslash after the leading slash as a second slash.
+*/
+const rootRelative = (value) => value.startsWith("/") && value[1] !== "/" && value[1] !== "\\";
+/**
 * A URL an agent may point at.
 *
 * Restricted by scheme rather than sanitised after the fact: `javascript:` and
 * friends never reach the DOM because they never pass validation, so the
 * component gets an error card instead.
 */
-const httpUrl = z.string().refine((value) => /^https?:\/\//i.test(value) || value.startsWith("/") || value.startsWith("#"), "Must be an http(s), root-relative or fragment URL.").describe("Destination URL (http, https, root-relative or fragment).");
-const imageUrl = z.string().refine((value) => /^https?:\/\//i.test(value) || /^data:image\//i.test(value) || value.startsWith("/"), "Must be an http(s), root-relative or data:image URL.").describe("Image URL (http, https, root-relative or data:image).");
+const httpUrl = z.string().refine((value) => /^https?:\/\//i.test(value) || rootRelative(value) || value.startsWith("#"), "Must be an http(s), root-relative or fragment URL.").describe("Destination URL (http, https, root-relative or fragment).");
+const imageUrl = z.string().refine((value) => /^https?:\/\//i.test(value) || /^data:image\//i.test(value) || rootRelative(value), "Must be an http(s), root-relative or data:image URL.").describe("Image URL (http, https, root-relative or data:image).");
 /** Every chart type the Chart composite draws, Recharts and Nivo alike. */
 const chartType = z.enum([
 	"bar",