npm - @plumile/ui - Versions diffs - 0.1.122 → 0.1.125 - Mend

@plumile/ui 0.1.122 → 0.1.125

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (54) hide show

package/lib/esm/__tests__/reactDomTestUtils.js ADDED Viewed

@@ -0,0 +1,48 @@
+import { afterAll as e, afterEach as t } from "../node_modules/@vitest/runner/dist/chunk-artifact.js";
+import { act as n } from "react";
+import { createRoot as r } from "react-dom/client";
+//#region src/__tests__/reactDomTestUtils.tsx
+var i = /* @__PURE__ */ new Map(), a, o = !1, s = async () => {
+	let e = [...i.keys()];
+	for (let t of e) await n(async () => {
+		t.unmount();
+	}), i.get(t)?.remove(), i.delete(t);
+	document.body.innerHTML = "";
+}, c = () => {
+	o || (o = !0, a = Object.getOwnPropertyDescriptor(globalThis, "IS_REACT_ACT_ENVIRONMENT"), Object.defineProperty(globalThis, "IS_REACT_ACT_ENVIRONMENT", {
+		value: !0,
+		configurable: !0
+	}), t(async () => {
+		await s();
+	}), e(() => {
+		if (a == null) {
+			Reflect.deleteProperty(globalThis, "IS_REACT_ACT_ENVIRONMENT");
+			return;
+		}
+		Object.defineProperty(globalThis, "IS_REACT_ACT_ENVIRONMENT", a);
+	}));
+}, l = async (e, t) => {
+	let a = t?.container ?? document.createElement("div");
+	document.body.contains(a) || document.body.append(a);
+	let o = r(a);
+	i.set(o, a);
+	let s = async (e) => {
+		await n(async () => {
+			o.render(e);
+		});
+	};
+	return await s(e), {
+		container: a,
+		root: o,
+		rerender: s,
+		unmount: async () => {
+			i.has(o) && (await n(async () => {
+				o.unmount();
+			}), a.remove(), i.delete(o));
+		}
+	};
+};
+//#endregion
+export { n as act, s as cleanupReactDomTests, l as renderReactDom, c as setupReactDomTests };
+//# sourceMappingURL=reactDomTestUtils.js.map

package/lib/esm/__tests__/reactDomTestUtils.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"reactDomTestUtils.js","names":[],"sources":["../../../src/__tests__/reactDomTestUtils.tsx"],"sourcesContent":["import { act, type ReactNode } from 'react';\nimport { createRoot, type Root } from 'react-dom/client';\nimport { afterAll, afterEach } from 'vitest';\n\ntype RenderReactDomResult = {\n container: HTMLDivElement;\n root: Root;\n rerender: (node: ReactNode) => Promise<void>;\n unmount: () => Promise<void>;\n};\n\nconst mountedRoots = new Map<Root, HTMLDivElement>();\n\nlet previousActEnvironmentDescriptor: PropertyDescriptor | null | undefined;\nlet isSetup = false;\n\nexport { act };\n\nexport const cleanupReactDomTests = async (): Promise<void> => {\n const roots = [...mountedRoots.keys()];\n for (const root of roots) {\n await act(async () => {\n root.unmount();\n });\n\n const container = mountedRoots.get(root);\n container?.remove();\n mountedRoots.delete(root);\n }\n\n document.body.innerHTML = '';\n};\n\nexport const setupReactDomTests = (): void => {\n if (isSetup) {\n return;\n }\n\n isSetup = true;\n previousActEnvironmentDescriptor = Object.getOwnPropertyDescriptor(\n globalThis,\n 'IS_REACT_ACT_ENVIRONMENT',\n );\n\n Object.defineProperty(globalThis, 'IS_REACT_ACT_ENVIRONMENT', {\n value: true,\n configurable: true,\n });\n\n afterEach(async () => {\n await cleanupReactDomTests();\n });\n\n afterAll(() => {\n if (previousActEnvironmentDescriptor == null) {\n Reflect.deleteProperty(globalThis, 'IS_REACT_ACT_ENVIRONMENT');\n return;\n }\n\n Object.defineProperty(\n globalThis,\n 'IS_REACT_ACT_ENVIRONMENT',\n previousActEnvironmentDescriptor,\n );\n });\n};\n\nexport const renderReactDom = async (\n node: ReactNode,\n options?: {\n container?: HTMLDivElement;\n },\n): Promise<RenderReactDomResult> => {\n const container = options?.container ?? document.createElement('div');\n if (!document.body.contains(container)) {\n document.body.append(container);\n }\n\n const root = createRoot(container);\n mountedRoots.set(root, container);\n\n const rerender = async (nextNode: ReactNode): Promise<void> => {\n await act(async () => {\n root.render(nextNode);\n });\n };\n\n const unmount = async (): Promise<void> => {\n if (!mountedRoots.has(root)) {\n return;\n }\n\n await act(async () => {\n root.unmount();\n });\n container.remove();\n mountedRoots.delete(root);\n };\n\n await rerender(node);\n\n return {\n container,\n root,\n rerender,\n unmount,\n };\n};\n"],"mappings":";;;;AAWA,IAAM,oBAAe,IAAI,KAA2B,EAEhD,GACA,IAAU,IAID,IAAuB,YAA2B;CAC7D,IAAM,IAAQ,CAAC,GAAG,EAAa,MAAM,CAAC;CACtC,KAAK,IAAM,KAAQ,GAOjB,AANA,MAAM,EAAI,YAAY;EACpB,EAAK,SAAS;GACd,EAGF,EAD+B,IAAI,EACnC,EAAW,QAAQ,EACnB,EAAa,OAAO,EAAK;CAG3B,SAAS,KAAK,YAAY;GAGf,UAAiC;CACxC,MAIJ,IAAU,IACV,IAAmC,OAAO,yBACxC,YACA,2BACD,EAED,OAAO,eAAe,YAAY,4BAA4B;EAC5D,OAAO;EACP,cAAc;EACf,CAAC,EAEF,EAAU,YAAY;EACpB,MAAM,GAAsB;GAC5B,EAEF,QAAe;EACb,IAAI,KAAoC,MAAM;GAC5C,QAAQ,eAAe,YAAY,2BAA2B;GAC9D;;EAGF,OAAO,eACL,YACA,4BACA,EACD;GACD;GAGS,IAAiB,OAC5B,GACA,MAGkC;CAClC,IAAM,IAAY,GAAS,aAAa,SAAS,cAAc,MAAM;CACrE,AAAK,SAAS,KAAK,SAAS,EAAU,IACpC,SAAS,KAAK,OAAO,EAAU;CAGjC,IAAM,IAAO,EAAW,EAAU;CAClC,EAAa,IAAI,GAAM,EAAU;CAEjC,IAAM,IAAW,OAAO,MAAuC;EAC7D,MAAM,EAAI,YAAY;GACpB,EAAK,OAAO,EAAS;IACrB;;CAiBJ,OAFA,MAAM,EAAS,EAAK,EAEb;EACL;EACA;EACA;EACA,qBAlByC;GACpC,EAAa,IAAI,EAAK,KAI3B,MAAM,EAAI,YAAY;IACpB,EAAK,SAAS;KACd,EACF,EAAU,QAAQ,EAClB,EAAa,OAAO,EAAK;;EAU1B"}

package/lib/esm/atomic/molecules/markdown/components/MarkdownHeading.css.js CHANGED Viewed

@@ -1,4 +1,5 @@
 /* empty css                                         */
+/* empty css                             */
 /* empty css                               */
 import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
 //#region src/atomic/molecules/markdown/components/MarkdownHeading.css.ts

package/lib/esm/atomic/molecules/markdown/components/MarkdownTable.css.js CHANGED Viewed

@@ -1,6 +1,5 @@
 /* empty css                                         */
 /* empty css                             */
-/* empty css                             */
 //#region src/atomic/molecules/markdown/components/MarkdownTable.css.ts
 var e = "tr18yy0 txvbqb196b txvbqb17h txvbqb2gm txvbqb2et txvbqb1uy txvbqbn8h txvbqbusr txvbqbuvn", t = "tr18yy2 tr18yy1 txvbqbbl8 txvbqbana txvbqbtqh txvbqb17w0";
 //#endregion

package/lib/esm/components/charts/MetricHistoryChart.js CHANGED Viewed

@@ -1,30 +1,12 @@
 import { vars as e } from "../../theme/themeContract.js";
 import { chartContainer as t, emptyState as n, tooltip as r, tooltipDate as i, tooltipRow as a, tooltipRowLabel as o, tooltipSwatch as s } from "./metricHistoryChart.css.js";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { ResponsiveLine as u } from "@nivo/line";
+import { formatAxisTimestamp as c, formatDefaultTimestamp as l, formatDefaultValue as u } from "../../internal/charts/metricHistoryChartHelpers.js";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { ResponsiveLine as p } from "@nivo/line";
 //#region src/components/charts/MetricHistoryChart.tsx
-function d(e, t) {
-	let n = new Intl.NumberFormat(void 0, { maximumFractionDigits: 2 }).format(e);
-	return t == null || t.length === 0 ? n : `${n} ${t}`;
-}
-function f(e) {
-	let t = new Date(e);
-	return Number.isNaN(t.getTime()) ? e : t.toLocaleString(void 0, {
-		month: "short",
-		day: "2-digit",
-		hour: "2-digit",
-		minute: "2-digit"
-	});
-}
-function p(e) {
-	return e.toLocaleTimeString(void 0, {
-		hour: "2-digit",
-		minute: "2-digit"
-	});
-}
-var m = ({ ariaLabel: m, emptyMessage: h = "No data", formatTimestamp: g = f, formatValue: _ = d, series: v }) => {
+var m = ({ ariaLabel: m, emptyMessage: h = "No data", formatTimestamp: g = l, formatValue: _ = u, series: v }) => {
 	let y = v.filter((e) => e.data.length > 0);
-	if (y.length === 0) return /* @__PURE__ */ c("div", {
+	if (y.length === 0) return /* @__PURE__ */ d("div", {
 		className: n,
 		children: h
 	});
@@ -33,9 +15,9 @@ var m = ({ ariaLabel: m, emptyMessage: h = "No data", formatTimestamp: g = f, fo
 		label: e.label,
 		unit: e.unit
 	}]));
-	return /* @__PURE__ */ c("div", {
+	return /* @__PURE__ */ d("div", {
 		className: t,
-		children: /* @__PURE__ */ c(u, {
+		children: /* @__PURE__ */ d(p, {
 			data: y.map((e) => ({
 				id: e.id,
 				data: e.data.map((e) => ({
@@ -77,7 +59,7 @@ var m = ({ ariaLabel: m, emptyMessage: h = "No data", formatTimestamp: g = f, fo
 			axisTop: null,
 			axisRight: null,
 			axisBottom: {
-				format: (e) => e instanceof Date ? p(e) : "",
+				format: (e) => e instanceof Date ? c(e) : "",
 				tickSize: 0,
 				tickPadding: 10,
 				tickValues: "every 15 minutes"
@@ -129,7 +111,7 @@ var m = ({ ariaLabel: m, emptyMessage: h = "No data", formatTimestamp: g = f, fo
 			sliceTooltip: ({ slice: e }) => {
 				let t = e.points[0], n = String(e.id);
 				t?.data.x instanceof Date && (n = t.data.x.toISOString());
-				let u = [...e.points].map((e) => {
+				let c = [...e.points].map((e) => {
 					let t = Number(e.data.y);
 					if (typeof e.data.y == "number" && (t = e.data.y), Number.isNaN(t)) return null;
 					let n = String(e.seriesId), r = b[n];
@@ -141,21 +123,21 @@ var m = ({ ariaLabel: m, emptyMessage: h = "No data", formatTimestamp: g = f, fo
 						unit: r?.unit
 					};
 				}).filter((e) => e != null);
-				return /* @__PURE__ */ l("div", {
+				return /* @__PURE__ */ f("div", {
 					className: r,
-					children: [/* @__PURE__ */ c("p", {
+					children: [/* @__PURE__ */ d("p", {
 						className: i,
 						children: g(n)
-					}), u.map((e) => /* @__PURE__ */ l("div", {
+					}), c.map((e) => /* @__PURE__ */ f("div", {
 						className: a,
-						children: [/* @__PURE__ */ l("span", {
+						children: [/* @__PURE__ */ f("span", {
 							className: o,
-							children: [/* @__PURE__ */ c("span", {
+							children: [/* @__PURE__ */ d("span", {
 								className: s,
 								style: { backgroundColor: e.color },
 								"aria-hidden": !0
-							}), /* @__PURE__ */ c("span", { children: e.label })]
-						}), /* @__PURE__ */ c("strong", { children: _(e.value, e.unit) })]
+							}), /* @__PURE__ */ d("span", { children: e.label })]
+						}), /* @__PURE__ */ d("strong", { children: _(e.value, e.unit) })]
 					}, `${e.seriesId}-${n}`))]
 				});
 			},
@@ -164,12 +146,8 @@ var m = ({ ariaLabel: m, emptyMessage: h = "No data", formatTimestamp: g = f, fo
 			ariaLabel: m
 		})
 	});
-}, h = {
-	formatDefaultValue: d,
-	formatDefaultTimestamp: f,
-	formatAxisTimestamp: p
 };
 //#endregion
-export { m as MetricHistoryChart, m as default, h as __test };
+export { m as MetricHistoryChart, m as default };
 //# sourceMappingURL=MetricHistoryChart.js.map

package/lib/esm/components/charts/MetricHistoryChart.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MetricHistoryChart.js","names":[],"sources":["../../../../src/components/charts/MetricHistoryChart.tsx"],"sourcesContent":["import { ResponsiveLine, type SliceTooltipProps } from '@nivo/line';\nimport type { JSX } from 'react';\n\nimport * as styles from './metricHistoryChart.css.js';\nimport { vars } from '../../theme/themeContract.js';\n\nexport type MetricHistoryChartPoint = {\n x: string;\n y: number;\n};\n\nexport type MetricHistoryChartSerie = {\n id: string;\n label: string;\n color: string;\n unit?: string;\n data: readonly MetricHistoryChartPoint[];\n};\n\ntype SlicePointPayload = {\n seriesId: string;\n label: string;\n value: number;\n color: string;\n unit?: string;\n};\n\nexport type MetricHistoryChartProps = {\n series: readonly MetricHistoryChartSerie[];\n ariaLabel: string;\n formatValue?: (value: number, unit?: string) => string;\n formatTimestamp?: (value: string) => string;\n emptyMessage?: string;\n};\n\n/*\n Formats metric values with an optional unit suffix.\n /\nfunction formatDefaultValue(value: number, unit?: string): string {\n const formatted = new Intl.NumberFormat(undefined, {\n maximumFractionDigits: 2,\n }).format(value);\n\n if (unit == null \|\| unit.length === 0) {\n return formatted;\n }\n\n return `${formatted} ${unit}`;\n}\n\n/\n Formats an ISO timestamp for tooltip display.\n /\nfunction formatDefaultTimestamp(value: string): string {\n const parsed = new Date(value);\n if (Number.isNaN(parsed.getTime())) {\n return value;\n }\n\n return parsed.toLocaleString(undefined, {\n month: 'short',\n day: '2-digit',\n hour: '2-digit',\n minute: '2-digit',\n });\n}\n\n/\n Formats chart axis ticks as localized times.\n */\nfunction formatAxisTimestamp(value: Date): string {\n return value.toLocaleTimeString(undefined, {\n hour: '2-digit',\n minute: '2-digit',\n });\n}\n\nexport const MetricHistoryChart = ({\n ariaLabel,\n emptyMessage = 'No data',\n formatTimestamp = formatDefaultTimestamp,\n formatValue = formatDefaultValue,\n series,\n}: MetricHistoryChartProps): JSX.Element => {\n const visibleSeries = series.filter((serie) => {\n return serie.data.length > 0;\n });\n\n if (visibleSeries.length === 0) {\n return <div className={styles.emptyState}>{emptyMessage}</div>;\n }\n\n const metadataById = Object.fromEntries(\n visibleSeries.map((serie) => {\n return [\n serie.id,\n {\n color: serie.color,\n label: serie.label,\n unit: serie.unit,\n },\n ];\n }),\n );\n\n const data = visibleSeries.map((serie) => {\n return {\n id: serie.id,\n data: serie.data.map((point) => {\n return {\n x: new Date(point.x),\n y: point.y,\n };\n }),\n };\n });\n\n const legends = [\n {\n anchor: 'bottom' as const,\n direction: 'row' as const,\n translateY: 56,\n itemWidth: 110,\n itemHeight: 16,\n itemsSpacing: 8,\n symbolSize: 10,\n symbolShape: 'circle' as const,\n itemTextColor: vars.colors.textSecondary,\n data: visibleSeries.map((serie) => {\n return {\n id: serie.id,\n label: serie.label,\n color: serie.color,\n };\n }),\n },\n ];\n\n const sliceTooltip = ({\n slice,\n }: SliceTooltipProps<(typeof data)[number]>): JSX.Element => {\n const firstPoint = slice.points[0];\n let timestampValue = String(slice.id);\n if (firstPoint?.data.x instanceof Date) {\n timestampValue = firstPoint.data.x.toISOString();\n }\n\n const points = [...slice.points]\n .map((point): SlicePointPayload \| null => {\n let value = Number(point.data.y);\n if (typeof point.data.y === 'number') {\n value = point.data.y;\n }\n\n if (Number.isNaN(value)) {\n return null;\n }\n\n const seriesId = String(point.seriesId);\n const metadata = metadataById[seriesId];\n\n return {\n seriesId,\n label: metadata?.label ?? seriesId,\n value,\n color: point.seriesColor,\n unit: metadata?.unit,\n };\n })\n .filter((point): point is SlicePointPayload => {\n return point != null;\n });\n\n return (\n <div className={styles.tooltip}>\n <p className={styles.tooltipDate}>{formatTimestamp(timestampValue)}</p>\n {points.map((point) => {\n return (\n <div\n key={`${point.seriesId}-${timestampValue}`}\n className={styles.tooltipRow}\n >\n <span className={styles.tooltipRowLabel}>\n <span\n className={styles.tooltipSwatch}\n style={{ backgroundColor: point.color }}\n aria-hidden\n />\n <span>{point.label}</span>\n </span>\n <strong>{formatValue(point.value, point.unit)}</strong>\n </div>\n );\n })}\n </div>\n );\n };\n\n return (\n <div className={styles.chartContainer}>\n <ResponsiveLine\n data={data}\n margin={{ top: 14, right: 16, bottom: 74, left: 52 }}\n colors={(serie) => {\n return metadataById[String(serie.id)]?.color ?? vars.colors.primary;\n }}\n xScale={{\n type: 'time',\n format: 'native',\n precision: 'minute',\n useUTC: false,\n }}\n xFormat=\"time:%Y-%m-%dT%H:%M:%S.%LZ\"\n yScale={{ type: 'linear', min: 'auto', max: 'auto' }}\n curve=\"monotoneX\"\n lineWidth={2.5}\n pointSize={4}\n pointBorderWidth={2}\n pointBorderColor={{ from: 'seriesColor', modifiers: [['darker', 0.2]] }}\n enableArea\n areaOpacity={0.1}\n enableGridX={false}\n enableGridY\n axisTop={null}\n axisRight={null}\n axisBottom={{\n format: (value) => {\n if (!(value instanceof Date)) {\n return '';\n }\n\n return formatAxisTimestamp(value);\n },\n tickSize: 0,\n tickPadding: 10,\n tickValues: 'every 15 minutes',\n }}\n axisLeft={{\n tickSize: 0,\n tickPadding: 8,\n tickValues: 5,\n format: (value) => {\n if (typeof value !== 'number') {\n return '';\n }\n\n return new Intl.NumberFormat(undefined, {\n notation: 'compact',\n maximumFractionDigits: 1,\n }).format(value);\n },\n }}\n enablePoints\n useMesh\n legends={legends}\n theme={{\n grid: {\n line: {\n stroke: vars.colors.borderLight,\n },\n },\n axis: {\n ticks: {\n text: {\n fill: vars.colors.textMuted,\n fontSize: 12,\n },\n },\n },\n crosshair: {\n line: {\n stroke: vars.colors.border,\n strokeWidth: 1,\n strokeDasharray: '4 4',\n },\n },\n tooltip: {\n container: {\n background: 'transparent',\n boxShadow: 'none',\n padding: 0,\n },\n },\n }}\n sliceTooltip={sliceTooltip}\n enableSlices=\"x\"\n role=\"img\"\n ariaLabel={ariaLabel}\n />\n </div>\n );\n};\n\nexport default MetricHistoryChart;\n\nexport const __test = {\n formatDefaultValue,\n formatDefaultTimestamp,\n formatAxisTimestamp,\n} as const;\n"],"mappings":"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"}
1	+ {"version":3,"file":"MetricHistoryChart.js","names":[],"sources":["../../../../src/components/charts/MetricHistoryChart.tsx"],"sourcesContent":["import { ResponsiveLine, type SliceTooltipProps } from '@nivo/line';\nimport type { JSX } from 'react';\n\nimport * as styles from './metricHistoryChart.css.js';\nimport {\n formatAxisTimestamp,\n formatDefaultTimestamp,\n formatDefaultValue,\n} from '../../internal/charts/metricHistoryChartHelpers.js';\nimport { vars } from '../../theme/themeContract.js';\n\nexport type MetricHistoryChartPoint = {\n x: string;\n y: number;\n};\n\nexport type MetricHistoryChartSerie = {\n id: string;\n label: string;\n color: string;\n unit?: string;\n data: readonly MetricHistoryChartPoint[];\n};\n\ntype SlicePointPayload = {\n seriesId: string;\n label: string;\n value: number;\n color: string;\n unit?: string;\n};\n\nexport type MetricHistoryChartProps = {\n series: readonly MetricHistoryChartSerie[];\n ariaLabel: string;\n formatValue?: (value: number, unit?: string) => string;\n formatTimestamp?: (value: string) => string;\n emptyMessage?: string;\n};\n\nexport const MetricHistoryChart = ({\n ariaLabel,\n emptyMessage = 'No data',\n formatTimestamp = formatDefaultTimestamp,\n formatValue = formatDefaultValue,\n series,\n}: MetricHistoryChartProps): JSX.Element => {\n const visibleSeries = series.filter((serie) => {\n return serie.data.length > 0;\n });\n\n if (visibleSeries.length === 0) {\n return <div className={styles.emptyState}>{emptyMessage}</div>;\n }\n\n const metadataById = Object.fromEntries(\n visibleSeries.map((serie) => {\n return [\n serie.id,\n {\n color: serie.color,\n label: serie.label,\n unit: serie.unit,\n },\n ];\n }),\n );\n\n const data = visibleSeries.map((serie) => {\n return {\n id: serie.id,\n data: serie.data.map((point) => {\n return {\n x: new Date(point.x),\n y: point.y,\n };\n }),\n };\n });\n\n const legends = [\n {\n anchor: 'bottom' as const,\n direction: 'row' as const,\n translateY: 56,\n itemWidth: 110,\n itemHeight: 16,\n itemsSpacing: 8,\n symbolSize: 10,\n symbolShape: 'circle' as const,\n itemTextColor: vars.colors.textSecondary,\n data: visibleSeries.map((serie) => {\n return {\n id: serie.id,\n label: serie.label,\n color: serie.color,\n };\n }),\n },\n ];\n\n const sliceTooltip = ({\n slice,\n }: SliceTooltipProps<(typeof data)[number]>): JSX.Element => {\n const firstPoint = slice.points[0];\n let timestampValue = String(slice.id);\n if (firstPoint?.data.x instanceof Date) {\n timestampValue = firstPoint.data.x.toISOString();\n }\n\n const points = [...slice.points]\n .map((point): SlicePointPayload \| null => {\n let value = Number(point.data.y);\n if (typeof point.data.y === 'number') {\n value = point.data.y;\n }\n\n if (Number.isNaN(value)) {\n return null;\n }\n\n const seriesId = String(point.seriesId);\n const metadata = metadataById[seriesId];\n\n return {\n seriesId,\n label: metadata?.label ?? seriesId,\n value,\n color: point.seriesColor,\n unit: metadata?.unit,\n };\n })\n .filter((point): point is SlicePointPayload => {\n return point != null;\n });\n\n return (\n <div className={styles.tooltip}>\n <p className={styles.tooltipDate}>{formatTimestamp(timestampValue)}</p>\n {points.map((point) => {\n return (\n <div\n key={`${point.seriesId}-${timestampValue}`}\n className={styles.tooltipRow}\n >\n <span className={styles.tooltipRowLabel}>\n <span\n className={styles.tooltipSwatch}\n style={{ backgroundColor: point.color }}\n aria-hidden\n />\n <span>{point.label}</span>\n </span>\n <strong>{formatValue(point.value, point.unit)}</strong>\n </div>\n );\n })}\n </div>\n );\n };\n\n return (\n <div className={styles.chartContainer}>\n <ResponsiveLine\n data={data}\n margin={{ top: 14, right: 16, bottom: 74, left: 52 }}\n colors={(serie) => {\n return metadataById[String(serie.id)]?.color ?? vars.colors.primary;\n }}\n xScale={{\n type: 'time',\n format: 'native',\n precision: 'minute',\n useUTC: false,\n }}\n xFormat=\"time:%Y-%m-%dT%H:%M:%S.%LZ\"\n yScale={{ type: 'linear', min: 'auto', max: 'auto' }}\n curve=\"monotoneX\"\n lineWidth={2.5}\n pointSize={4}\n pointBorderWidth={2}\n pointBorderColor={{ from: 'seriesColor', modifiers: [['darker', 0.2]] }}\n enableArea\n areaOpacity={0.1}\n enableGridX={false}\n enableGridY\n axisTop={null}\n axisRight={null}\n axisBottom={{\n format: (value) => {\n if (!(value instanceof Date)) {\n return '';\n }\n\n return formatAxisTimestamp(value);\n },\n tickSize: 0,\n tickPadding: 10,\n tickValues: 'every 15 minutes',\n }}\n axisLeft={{\n tickSize: 0,\n tickPadding: 8,\n tickValues: 5,\n format: (value) => {\n if (typeof value !== 'number') {\n return '';\n }\n\n return new Intl.NumberFormat(undefined, {\n notation: 'compact',\n maximumFractionDigits: 1,\n }).format(value);\n },\n }}\n enablePoints\n useMesh\n legends={legends}\n theme={{\n grid: {\n line: {\n stroke: vars.colors.borderLight,\n },\n },\n axis: {\n ticks: {\n text: {\n fill: vars.colors.textMuted,\n fontSize: 12,\n },\n },\n },\n crosshair: {\n line: {\n stroke: vars.colors.border,\n strokeWidth: 1,\n strokeDasharray: '4 4',\n },\n },\n tooltip: {\n container: {\n background: 'transparent',\n boxShadow: 'none',\n padding: 0,\n },\n },\n }}\n sliceTooltip={sliceTooltip}\n enableSlices=\"x\"\n role=\"img\"\n ariaLabel={ariaLabel}\n />\n </div>\n );\n};\n\nexport default MetricHistoryChart;\n"],"mappings":"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"}

package/lib/esm/components/charts/TimeSeriesLineChart.js CHANGED Viewed

@@ -1,23 +1,11 @@
 import { vars as e } from "../../theme/themeContract.js";
 import { chartContainer as t, tooltip as n, tooltipDate as r, tooltipRow as i, tooltipRowLabel as a, tooltipSwatch as o } from "./timeSeriesLineChart.css.js";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { ResponsiveLine as l } from "@nivo/line";
+import { formatDayTick as s, getVisibleDayTicks as c } from "../../internal/charts/timeSeriesLineChartHelpers.js";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { ResponsiveLine as d } from "@nivo/line";
 //#region src/components/charts/TimeSeriesLineChart.tsx
-var u = 6;
-function d(e) {
-	let t = e[0];
-	if (t == null || t.data.length <= u) return t == null ? [] : t.data.map((e) => e.x);
-	let n = Math.ceil(t.data.length / u), r = t.data.filter((e, t) => t % n === 0).map((e) => e.x), i = t.data.at(-1);
-	return i != null && r.at(-1) !== i.x && r.push(i.x), r;
-}
-function f(e) {
-	return (/* @__PURE__ */ new Date(`${e}T00:00:00Z`)).toLocaleDateString(void 0, {
-		month: "short",
-		day: "2-digit"
-	});
-}
-var p = (u) => {
-	let { ariaLabel: p, categoryColorById: m, categoryLabel: h, categoryOrder: g, formatValue: _, series: v } = u, y = d(v), b = g, x = (e) => b.includes(e), S = [{
+var f = (f) => {
+	let { ariaLabel: p, categoryColorById: m, categoryLabel: h, categoryOrder: g, formatValue: _, series: v } = f, y = c(v), b = g, x = (e) => b.includes(e), S = [{
 		anchor: "bottom",
 		direction: "row",
 		translateY: 56,
@@ -33,9 +21,9 @@ var p = (u) => {
 			color: m[e]
 		}))
 	}];
-	return /* @__PURE__ */ s("div", {
+	return /* @__PURE__ */ l("div", {
 		className: t,
-		children: /* @__PURE__ */ s(l, {
+		children: /* @__PURE__ */ l(d, {
 			data: v,
 			margin: {
 				top: 14,
@@ -66,7 +54,7 @@ var p = (u) => {
 			axisRight: null,
 			axisBottom: {
 				tickValues: y,
-				format: (e) => f(String(e)),
+				format: (e) => s(String(e)),
 				tickSize: 0,
 				tickPadding: 10
 			},
@@ -100,31 +88,31 @@ var p = (u) => {
 				} }
 			},
 			sliceTooltip: ({ slice: e }) => {
-				let t = String(e.id), l = g[0] ?? null, u = [...e.points].map((e) => {
+				let t = String(e.id), c = g[0] ?? null, d = [...e.points].map((e) => {
 					let t = 0;
 					typeof e.data.y == "number" && (t = e.data.y);
-					let n = l;
+					let n = c;
 					return typeof e.seriesId == "string" && x(e.seriesId) && (n = e.seriesId), n == null ? null : {
 						seriesId: n,
 						data: { y: t },
 						color: e.seriesColor
 					};
 				}).filter((e) => e != null).sort((e, t) => g.indexOf(e.seriesId) - g.indexOf(t.seriesId));
-				return /* @__PURE__ */ c("div", {
+				return /* @__PURE__ */ u("div", {
 					className: n,
-					children: [/* @__PURE__ */ s("p", {
+					children: [/* @__PURE__ */ l("p", {
 						className: r,
-						children: f(t)
-					}), u.map((e) => /* @__PURE__ */ c("div", {
+						children: s(t)
+					}), d.map((e) => /* @__PURE__ */ u("div", {
 						className: i,
-						children: [/* @__PURE__ */ c("span", {
+						children: [/* @__PURE__ */ u("span", {
 							className: a,
-							children: [/* @__PURE__ */ s("span", {
+							children: [/* @__PURE__ */ l("span", {
 								className: o,
 								style: { backgroundColor: e.color },
 								"aria-hidden": !0
-							}), /* @__PURE__ */ s("span", { children: h(e.seriesId) })]
-						}), /* @__PURE__ */ s("strong", { children: _(e.data.y) })]
+							}), /* @__PURE__ */ l("span", { children: h(e.seriesId) })]
+						}), /* @__PURE__ */ l("strong", { children: _(e.data.y) })]
 					}, `${t}-${e.seriesId}`))]
 				});
 			},
@@ -133,8 +121,8 @@ var p = (u) => {
 			ariaLabel: p
 		})
 	});
-}, m = { formatDayTick: f };
+};
 //#endregion
-export { p as TimeSeriesLineChart, p as default, m as __test };
+export { f as TimeSeriesLineChart, f as default };
 //# sourceMappingURL=TimeSeriesLineChart.js.map

package/lib/esm/components/charts/TimeSeriesLineChart.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TimeSeriesLineChart.js","names":[],"sources":["../../../../src/components/charts/TimeSeriesLineChart.tsx"],"sourcesContent":["import { ResponsiveLine, type SliceTooltipProps } from '@nivo/line';\nimport type { JSX } from 'react';\n\nimport * as styles from './timeSeriesLineChart.css.js';\nimport { vars } from '../../theme/themeContract.js';\n\nexport type TimeSeriesLineChartPoint = {\n x: string;\n y: number;\n};\n\nexport type TimeSeriesLineChartSerie<Category extends string> = {\n id: Category;\n data: readonly TimeSeriesLineChartPoint[];\n};\n\ntype SlicePointPayload<Category extends string> = {\n seriesId: Category;\n data: {\n y: number;\n };\n color: string;\n};\n\nexport type TimeSeriesLineChartProps<Category extends string> = {\n series: readonly TimeSeriesLineChartSerie<Category>[];\n categoryOrder: readonly Category[];\n categoryColorById: Readonly<Record<Category, string>>;\n categoryLabel: (category: Category) => string;\n formatValue: (value: number) => string;\n ariaLabel: string;\n};\n\nconst MAX_X_TICKS = 6;\n\n/*\n Limits the number of visible day ticks while always keeping the last point.\n /\nfunction getVisibleDayTicks<Category extends string>(\n series: readonly TimeSeriesLineChartSerie<Category>[],\n): readonly string[] {\n const firstSerie = series[0];\n if (firstSerie == null \|\| firstSerie.data.length <= MAX_X_TICKS) {\n if (firstSerie == null) {\n return [];\n }\n\n return firstSerie.data.map((point) => {\n return point.x;\n });\n }\n\n const step = Math.ceil(firstSerie.data.length / MAX_X_TICKS);\n const visibleTicks = firstSerie.data\n .filter((_, index) => {\n return index % step === 0;\n })\n .map((point) => {\n return point.x;\n });\n\n const lastPoint = firstSerie.data.at(-1);\n if (lastPoint != null && visibleTicks.at(-1) !== lastPoint.x) {\n visibleTicks.push(lastPoint.x);\n }\n\n return visibleTicks;\n}\n\n/\n Formats a `YYYY-MM-DD` key into a short month/day label for the x-axis.\n */\nfunction formatDayTick(dayKey: string): string {\n const parsed = new Date(`${dayKey}T00:00:00Z`);\n return parsed.toLocaleDateString(undefined, {\n month: 'short',\n day: '2-digit',\n });\n}\n\nexport const TimeSeriesLineChart = <Category extends string>(\n props: TimeSeriesLineChartProps<Category>,\n): JSX.Element => {\n const {\n ariaLabel,\n categoryColorById,\n categoryLabel,\n categoryOrder,\n formatValue,\n series,\n } = props;\n\n const visibleTicks = getVisibleDayTicks(series);\n const categoryOrderString = categoryOrder as readonly string[];\n const isCategory = (value: string): value is Category => {\n return categoryOrderString.includes(value);\n };\n\n const legends = [\n {\n anchor: 'bottom' as const,\n direction: 'row' as const,\n translateY: 56,\n itemWidth: 90,\n itemHeight: 16,\n itemsSpacing: 8,\n symbolSize: 10,\n symbolShape: 'circle' as const,\n itemTextColor: vars.colors.textSecondary,\n data: categoryOrder.map((category) => {\n return {\n id: category,\n label: categoryLabel(category),\n color: categoryColorById[category],\n };\n }),\n },\n ];\n\n const colorById = (serie: { id: string \| number }): string => {\n if (typeof serie.id !== 'string' \|\| !isCategory(serie.id)) {\n return vars.colors.primary;\n }\n\n return categoryColorById[serie.id];\n };\n\n const sliceTooltip = ({\n slice,\n }: SliceTooltipProps<TimeSeriesLineChartSerie<Category>>): JSX.Element => {\n const dayKey = String(slice.id);\n const fallbackCategory = categoryOrder[0] ?? null;\n const points = [...slice.points]\n .map((point): SlicePointPayload<Category> \| null => {\n let credits = 0;\n if (typeof point.data.y === 'number') {\n credits = point.data.y;\n }\n\n let seriesId = fallbackCategory;\n if (typeof point.seriesId === 'string' && isCategory(point.seriesId)) {\n seriesId = point.seriesId;\n }\n if (seriesId == null) {\n return null;\n }\n\n return {\n seriesId,\n data: { y: credits },\n color: point.seriesColor,\n };\n })\n .filter((point): point is SlicePointPayload<Category> => {\n return point != null;\n })\n .sort((left, right) => {\n const leftIndex = categoryOrder.indexOf(left.seriesId);\n const rightIndex = categoryOrder.indexOf(right.seriesId);\n\n return leftIndex - rightIndex;\n });\n\n return (\n <div className={styles.tooltip}>\n <p className={styles.tooltipDate}>{formatDayTick(dayKey)}</p>\n {points.map((point) => {\n return (\n <div\n key={`${dayKey}-${point.seriesId}`}\n className={styles.tooltipRow}\n >\n <span className={styles.tooltipRowLabel}>\n <span\n className={styles.tooltipSwatch}\n style={{ backgroundColor: point.color }}\n aria-hidden\n />\n <span>{categoryLabel(point.seriesId)}</span>\n </span>\n <strong>{formatValue(point.data.y)}</strong>\n </div>\n );\n })}\n </div>\n );\n };\n\n return (\n <div className={styles.chartContainer}>\n <ResponsiveLine\n data={series}\n margin={{ top: 14, right: 16, bottom: 74, left: 52 }}\n colors={colorById}\n xScale={{ type: 'point' }}\n yScale={{ type: 'linear', min: 0, max: 'auto' }}\n curve=\"monotoneX\"\n lineWidth={2.5}\n pointSize={4}\n pointBorderWidth={2}\n pointBorderColor={{ from: 'seriesColor', modifiers: [['darker', 0.2]] }}\n enableArea\n areaOpacity={0.1}\n enableGridX={false}\n enableGridY\n axisTop={null}\n axisRight={null}\n axisBottom={{\n tickValues: visibleTicks,\n format: (value) => {\n return formatDayTick(String(value));\n },\n tickSize: 0,\n tickPadding: 10,\n }}\n axisLeft={{\n tickSize: 0,\n tickPadding: 8,\n tickValues: 5,\n format: (value) => {\n if (typeof value !== 'number') {\n return '';\n }\n\n return new Intl.NumberFormat('en-US', {\n notation: 'compact',\n maximumFractionDigits: 1,\n }).format(value);\n },\n }}\n enablePoints\n useMesh\n legends={legends}\n theme={{\n grid: {\n line: {\n stroke: vars.colors.borderLight,\n },\n },\n axis: {\n ticks: {\n text: {\n fill: vars.colors.textMuted,\n fontSize: 12,\n },\n },\n },\n crosshair: {\n line: {\n stroke: vars.colors.border,\n strokeWidth: 1,\n strokeDasharray: '4 4',\n },\n },\n tooltip: {\n container: {\n background: 'transparent',\n boxShadow: 'none',\n padding: 0,\n },\n },\n }}\n sliceTooltip={sliceTooltip}\n enableSlices=\"x\"\n role=\"img\"\n ariaLabel={ariaLabel}\n />\n </div>\n );\n};\n\nexport default TimeSeriesLineChart;\n\nexport const __test = {\n formatDayTick,\n} as const;\n"],"mappings":"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"}
1	+ {"version":3,"file":"TimeSeriesLineChart.js","names":[],"sources":["../../../../src/components/charts/TimeSeriesLineChart.tsx"],"sourcesContent":["import { ResponsiveLine, type SliceTooltipProps } from '@nivo/line';\nimport type { JSX } from 'react';\n\nimport * as styles from './timeSeriesLineChart.css.js';\nimport {\n formatDayTick,\n getVisibleDayTicks,\n} from '../../internal/charts/timeSeriesLineChartHelpers.js';\nimport { vars } from '../../theme/themeContract.js';\n\nexport type TimeSeriesLineChartPoint = {\n x: string;\n y: number;\n};\n\nexport type TimeSeriesLineChartSerie<Category extends string> = {\n id: Category;\n data: readonly TimeSeriesLineChartPoint[];\n};\n\ntype SlicePointPayload<Category extends string> = {\n seriesId: Category;\n data: {\n y: number;\n };\n color: string;\n};\n\nexport type TimeSeriesLineChartProps<Category extends string> = {\n series: readonly TimeSeriesLineChartSerie<Category>[];\n categoryOrder: readonly Category[];\n categoryColorById: Readonly<Record<Category, string>>;\n categoryLabel: (category: Category) => string;\n formatValue: (value: number) => string;\n ariaLabel: string;\n};\n\nexport const TimeSeriesLineChart = <Category extends string>(\n props: TimeSeriesLineChartProps<Category>,\n): JSX.Element => {\n const {\n ariaLabel,\n categoryColorById,\n categoryLabel,\n categoryOrder,\n formatValue,\n series,\n } = props;\n\n const visibleTicks = getVisibleDayTicks(series);\n const categoryOrderString = categoryOrder as readonly string[];\n const isCategory = (value: string): value is Category => {\n return categoryOrderString.includes(value);\n };\n\n const legends = [\n {\n anchor: 'bottom' as const,\n direction: 'row' as const,\n translateY: 56,\n itemWidth: 90,\n itemHeight: 16,\n itemsSpacing: 8,\n symbolSize: 10,\n symbolShape: 'circle' as const,\n itemTextColor: vars.colors.textSecondary,\n data: categoryOrder.map((category) => {\n return {\n id: category,\n label: categoryLabel(category),\n color: categoryColorById[category],\n };\n }),\n },\n ];\n\n const colorById = (serie: { id: string \| number }): string => {\n if (typeof serie.id !== 'string' \|\| !isCategory(serie.id)) {\n return vars.colors.primary;\n }\n\n return categoryColorById[serie.id];\n };\n\n const sliceTooltip = ({\n slice,\n }: SliceTooltipProps<TimeSeriesLineChartSerie<Category>>): JSX.Element => {\n const dayKey = String(slice.id);\n const fallbackCategory = categoryOrder[0] ?? null;\n const points = [...slice.points]\n .map((point): SlicePointPayload<Category> \| null => {\n let credits = 0;\n if (typeof point.data.y === 'number') {\n credits = point.data.y;\n }\n\n let seriesId = fallbackCategory;\n if (typeof point.seriesId === 'string' && isCategory(point.seriesId)) {\n seriesId = point.seriesId;\n }\n if (seriesId == null) {\n return null;\n }\n\n return {\n seriesId,\n data: { y: credits },\n color: point.seriesColor,\n };\n })\n .filter((point): point is SlicePointPayload<Category> => {\n return point != null;\n })\n .sort((left, right) => {\n const leftIndex = categoryOrder.indexOf(left.seriesId);\n const rightIndex = categoryOrder.indexOf(right.seriesId);\n\n return leftIndex - rightIndex;\n });\n\n return (\n <div className={styles.tooltip}>\n <p className={styles.tooltipDate}>{formatDayTick(dayKey)}</p>\n {points.map((point) => {\n return (\n <div\n key={`${dayKey}-${point.seriesId}`}\n className={styles.tooltipRow}\n >\n <span className={styles.tooltipRowLabel}>\n <span\n className={styles.tooltipSwatch}\n style={{ backgroundColor: point.color }}\n aria-hidden\n />\n <span>{categoryLabel(point.seriesId)}</span>\n </span>\n <strong>{formatValue(point.data.y)}</strong>\n </div>\n );\n })}\n </div>\n );\n };\n\n return (\n <div className={styles.chartContainer}>\n <ResponsiveLine\n data={series}\n margin={{ top: 14, right: 16, bottom: 74, left: 52 }}\n colors={colorById}\n xScale={{ type: 'point' }}\n yScale={{ type: 'linear', min: 0, max: 'auto' }}\n curve=\"monotoneX\"\n lineWidth={2.5}\n pointSize={4}\n pointBorderWidth={2}\n pointBorderColor={{ from: 'seriesColor', modifiers: [['darker', 0.2]] }}\n enableArea\n areaOpacity={0.1}\n enableGridX={false}\n enableGridY\n axisTop={null}\n axisRight={null}\n axisBottom={{\n tickValues: visibleTicks,\n format: (value) => {\n return formatDayTick(String(value));\n },\n tickSize: 0,\n tickPadding: 10,\n }}\n axisLeft={{\n tickSize: 0,\n tickPadding: 8,\n tickValues: 5,\n format: (value) => {\n if (typeof value !== 'number') {\n return '';\n }\n\n return new Intl.NumberFormat('en-US', {\n notation: 'compact',\n maximumFractionDigits: 1,\n }).format(value);\n },\n }}\n enablePoints\n useMesh\n legends={legends}\n theme={{\n grid: {\n line: {\n stroke: vars.colors.borderLight,\n },\n },\n axis: {\n ticks: {\n text: {\n fill: vars.colors.textMuted,\n fontSize: 12,\n },\n },\n },\n crosshair: {\n line: {\n stroke: vars.colors.border,\n strokeWidth: 1,\n strokeDasharray: '4 4',\n },\n },\n tooltip: {\n container: {\n background: 'transparent',\n boxShadow: 'none',\n padding: 0,\n },\n },\n }}\n sliceTooltip={sliceTooltip}\n enableSlices=\"x\"\n role=\"img\"\n ariaLabel={ariaLabel}\n />\n </div>\n );\n};\n\nexport default TimeSeriesLineChart;\n"],"mappings":"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"}

package/lib/esm/components/data-table/DataTable.js CHANGED Viewed

@@ -1,47 +1,48 @@
 import { cx as e } from "../../theme/tools.js";
 import { useUiTranslation as t } from "../../i18n/useUiTranslation.js";
-import { alignRecipe as n, body as r, bodyContained as i, cell as a, container as o, containerWithContainedBody as s, densityRecipe as c, emptyCell as l, emptyRow as u, header as d, headerCell as f, headerRow as p, hideBelowRecipe as m, primaryCell as h, primaryHeaderCell as g, row as ee, rowEven as _, rowOdd as v, rowStateRecipe as y, stickyHeader as b } from "./DataTable.css.js";
-import { Fragment as te, jsx as x, jsxs as S } from "react/jsx-runtime";
+import { alignRecipe as n, body as r, bodyContained as i, cell as a, container as o, containerWithContainedBody as s, densityRecipe as ee, emptyCell as te, emptyRow as ne, header as re, headerCell as c, headerRow as l, hideBelowRecipe as u, primaryCell as d, primaryHeaderCell as f, row as p, rowEven as m, rowOdd as h, rowStateRecipe as g, stickyHeader as _ } from "./DataTable.css.js";
+import { buildDataTableInlineTemplate as v } from "../../internal/data-table/layout.js";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
 //#region src/components/data-table/DataTable.tsx
-var C = "minmax(0, 1fr)", w = (e) => e == null ? null : m({ minVisibleAt: e }), T = (e, t) => typeof t == "string" && t !== "" ? { gridTemplateColumns: t } : { gridTemplateColumns: `repeat(${e}, ${C})` }, E = ({ columns: m, rows: C, getRowId: E, emptyState: D, className: ne, headerClassName: re, bodyClassName: ie, rowClassName: O, gridTemplateClassName: k, gridTemplateColumns: A, kind: j, density: M, headerBehavior: N, bodyScrollMode: P = "page", rowState: F, classes: I, ariaLabel: L, ariaLabelledBy: R, bodyFooterNode: z }) => {
+var S = (e) => e == null ? null : u({ minVisibleAt: e }), C = ({ columns: u, rows: C, getRowId: ie, emptyState: w, className: T, headerClassName: E, bodyClassName: D, rowClassName: O, gridTemplateClassName: k, gridTemplateColumns: A, kind: j, density: M, headerBehavior: N, bodyScrollMode: P = "page", rowState: F, classes: I, ariaLabel: L, ariaLabelledBy: R, bodyFooterNode: z }) => {
 	let { t: B } = t(), V = j ?? "default", H = L ?? B("common.table.label");
 	R != null && (H = void 0);
-	let U = /* @__PURE__ */ x("div", {
-		className: e(l, I?.emptyCell),
+	let U = /* @__PURE__ */ b("div", {
+		className: e(te, I?.emptyCell),
 		children: B("common.table.empty")
-	}), W = D ?? U, G = C.length === 0, K = P === "contained", q;
-	k ?? (q = T(m.length, A));
+	}), W = w ?? U, G = C.length === 0, K = P === "contained", q;
+	k ?? (q = v(u.length, A));
 	let J = null;
-	N?.sticky === !0 && (J = b);
+	N?.sticky === !0 && (J = _);
 	let Y;
 	N?.offsetTop != null && (Y = { top: N.offsetTop });
-	let X = [c({ density: M ?? "default" })];
+	let X = [ee({ density: M ?? "default" })];
 	k != null && X.push(k);
 	let Z;
-	Z = G ? /* @__PURE__ */ x("div", {
-		className: e(u, I?.emptyRow),
+	Z = G ? /* @__PURE__ */ b("div", {
+		className: e(ne, I?.emptyRow),
 		role: "row",
-		children: /* @__PURE__ */ x("div", {
+		children: /* @__PURE__ */ b("div", {
 			role: "cell",
 			children: W
 		})
-	}) : /* @__PURE__ */ x(te, { children: C.map((t, r) => {
-		let i = E(t, r), o = [ee({ kind: V }), I?.row], s = F?.(t, r);
-		s != null && o.push(y({ state: s })), r % 2 == 0 ? o.push(_({ kind: V }), I?.rowEven) : o.push(v({ kind: V }), I?.rowOdd);
+	}) : /* @__PURE__ */ b(y, { children: C.map((t, r) => {
+		let i = ie(t, r), o = [p({ kind: V }), I?.row], s = F?.(t, r);
+		s != null && o.push(g({ state: s })), r % 2 == 0 ? o.push(m({ kind: V }), I?.rowEven) : o.push(h({ kind: V }), I?.rowOdd);
 		for (let e of X) o.push(e);
 		if (O != null) {
 			let e = O(t, r);
 			e != null && o.push(e);
 		}
-		return /* @__PURE__ */ x("div", {
+		return /* @__PURE__ */ b("div", {
 			role: "row",
 			className: e(...o),
 			style: q,
-			children: m.map((r) => {
-				let i = [a({ kind: V }), I?.cell], o = w(r.minVisibleAt);
-				o != null && i.push(o), r.className != null && i.push(r.className), r.isPrimary && i.push(h, I?.primaryCell), r.align != null && i.push(n({ align: r.align }));
+			children: u.map((r) => {
+				let i = [a({ kind: V }), I?.cell], o = S(r.minVisibleAt);
+				o != null && i.push(o), r.className != null && i.push(r.className), r.isPrimary && i.push(d, I?.primaryCell), r.align != null && i.push(n({ align: r.align }));
 				let s = r.cell(t);
-				return /* @__PURE__ */ x("div", {
+				return /* @__PURE__ */ b("div", {
 					role: "cell",
 					className: e(...i),
 					children: s
@@ -50,41 +51,38 @@ var C = "minmax(0, 1fr)", w = (e) => e == null ? null : m({ minVisibleAt: e }),
 		}, i);
 	}) });
 	let Q = null, $ = null;
-	return K && (Q = s, $ = i), /* @__PURE__ */ S("div", {
-		className: e(o({ kind: V }), Q, I?.container, ne),
+	return K && (Q = s, $ = i), /* @__PURE__ */ x("div", {
+		className: e(o({ kind: V }), Q, I?.container, T),
 		role: "table",
 		"aria-label": H,
 		"aria-labelledby": R,
 		"data-scroll-mode": P,
-		children: [/* @__PURE__ */ x("div", {
-			className: e(d({ kind: V }), J, I?.header, re),
+		children: [/* @__PURE__ */ b("div", {
+			className: e(re({ kind: V }), J, I?.header, E),
 			style: Y,
 			role: "rowgroup",
-			children: /* @__PURE__ */ x("div", {
-				className: e(p, I?.headerRow, ...X),
+			children: /* @__PURE__ */ b("div", {
+				className: e(l, I?.headerRow, ...X),
 				role: "row",
 				style: q,
-				children: m.map((t) => {
-					let r = [f({ kind: V }), I?.headerCell], i = w(t.minVisibleAt);
-					return i != null && r.push(i), t.className != null && r.push(t.className), t.isPrimary && r.push(g, I?.primaryHeaderCell), t.align != null && r.push(n({ align: t.align })), /* @__PURE__ */ x("div", {
+				children: u.map((t) => {
+					let r = [c({ kind: V }), I?.headerCell], i = S(t.minVisibleAt);
+					return i != null && r.push(i), t.className != null && r.push(t.className), t.isPrimary && r.push(f, I?.primaryHeaderCell), t.align != null && r.push(n({ align: t.align })), /* @__PURE__ */ b("div", {
 						role: "columnheader",
 						className: e(...r),
 						children: t.header
 					}, t.id);
 				})
 			})
-		}), /* @__PURE__ */ S("div", {
-			className: e(r({ kind: V }), $, I?.body, ie),
+		}), /* @__PURE__ */ x("div", {
+			className: e(r({ kind: V }), $, I?.body, D),
 			role: "rowgroup",
 			"data-scroll-mode": P,
 			children: [Z, z]
 		})]
 	});
-}, D = {
-	getVisibilityClass: w,
-	buildInlineTemplate: T
 };
 //#endregion
-export { E as DataTable, D as __test };
+export { C as DataTable };
 //# sourceMappingURL=DataTable.js.map

package/lib/esm/components/data-table/DataTable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DataTable.js","names":[],"sources":["../../../../src/components/data-table/DataTable.tsx"],"sourcesContent":["import { type CSSProperties, type JSX, type ReactNode } from 'react';\n\nimport * as styles from './DataTable.css.js';\nimport type { DataTableBreakpoint } from './tableBreakpoints.js';\nimport { cx } from '../../theme/tools.js';\nimport { useUiTranslation } from '../../i18n/useUiTranslation.js';\nimport type { SlotClasses } from '../../styles/slots.js';\n\nexport type DataTableColumn<Row> = {\n id: string;\n header: JSX.Element \| string;\n cell: (row: Row) => JSX.Element \| string \| null;\n minVisibleAt?: DataTableBreakpoint;\n className?: string;\n isPrimary?: boolean;\n align?: 'left' \| 'center' \| 'right';\n priority?: 'primary' \| 'important' \| 'secondary' \| 'debug';\n mobileRole?:\n \| 'title'\n \| 'subtitle'\n \| 'meta'\n \| 'badge'\n \| 'status'\n \| 'action'\n \| 'hidden';\n};\n\nexport type GetRowId<Row> = (row: Row, index: number) => string;\n\nexport type DataTableKind = NonNullable<\n Parameters<typeof styles.container>[0]\n>['kind'];\n\nexport type DataTableDensity = NonNullable<\n Parameters<typeof styles.densityRecipe>[0]\n>['density'];\n\nexport type DataTableRowState = NonNullable<\n Parameters<typeof styles.rowStateRecipe>[0]\n>['state'];\n\nexport type DataTableHeaderBehavior = {\n sticky?: boolean;\n offsetTop?: number;\n};\n\nexport type DataTableBodyScrollMode = 'page' \| 'contained';\n\ntype DataTableSlot =\n \| 'container'\n \| 'header'\n \| 'headerRow'\n \| 'headerCell'\n \| 'primaryHeaderCell'\n \| 'body'\n \| 'row'\n \| 'rowEven'\n \| 'rowOdd'\n \| 'cell'\n \| 'primaryCell'\n \| 'emptyRow'\n \| 'emptyCell';\n\nexport type DataTableProps<Row> = {\n columns: readonly DataTableColumn<Row>[];\n rows: readonly Row[];\n getRowId: GetRowId<Row>;\n emptyState?: JSX.Element;\n className?: string;\n headerClassName?: string;\n bodyClassName?: string;\n rowClassName?: (row: Row, index: number) => string \| null \| undefined;\n gridTemplateClassName?: string;\n gridTemplateColumns?: string;\n kind?: DataTableKind;\n density?: DataTableDensity;\n headerBehavior?: DataTableHeaderBehavior;\n bodyScrollMode?: DataTableBodyScrollMode;\n rowState?: (row: Row, index: number) => DataTableRowState;\n classes?: SlotClasses<DataTableSlot>;\n ariaLabel?: string;\n ariaLabelledBy?: string;\n bodyFooterNode?: ReactNode;\n};\n\nconst DEFAULT_TEMPLATE_CELL = 'minmax(0, 1fr)';\n\nconst getVisibilityClass = (minVisibleAt?: DataTableBreakpoint) => {\n if (minVisibleAt == null) {\n return null;\n }\n\n return styles.hideBelowRecipe({ minVisibleAt });\n};\n\nconst buildInlineTemplate = (\n columnCount: number,\n gridTemplateColumns?: string,\n): CSSProperties => {\n if (typeof gridTemplateColumns === 'string' && gridTemplateColumns !== '') {\n return { gridTemplateColumns };\n }\n return {\n gridTemplateColumns: `repeat(${columnCount}, ${DEFAULT_TEMPLATE_CELL})`,\n };\n};\n\n/*\n Generic responsive data table component.\n */\nexport const DataTable = <Row,>({\n columns,\n rows,\n getRowId,\n emptyState,\n className,\n headerClassName,\n bodyClassName,\n rowClassName,\n gridTemplateClassName,\n gridTemplateColumns,\n kind,\n density,\n headerBehavior,\n bodyScrollMode = 'page',\n rowState,\n classes,\n ariaLabel,\n ariaLabelledBy,\n bodyFooterNode,\n}: DataTableProps<Row>): JSX.Element => {\n const { t } = useUiTranslation();\n const resolvedKind: DataTableKind = kind ?? 'default';\n const resolvedAriaLabel = ariaLabel ?? t('common.table.label');\n let tableAriaLabel: string \| undefined = resolvedAriaLabel;\n if (ariaLabelledBy != null) {\n tableAriaLabel = undefined;\n }\n const defaultEmptyState = (\n <div className={cx(styles.emptyCell, classes?.emptyCell)}>\n {t('common.table.empty')}\n </div>\n ) as JSX.Element;\n const resolvedEmptyState = emptyState ?? defaultEmptyState;\n const showEmpty = rows.length === 0;\n const hasContainedBodyScroll = bodyScrollMode === 'contained';\n\n let inlineTemplateStyle: CSSProperties \| undefined;\n if (gridTemplateClassName == null) {\n inlineTemplateStyle = buildInlineTemplate(\n columns.length,\n gridTemplateColumns,\n );\n }\n let headerStickyClass: string \| null = null;\n if (headerBehavior?.sticky === true) {\n headerStickyClass = styles.stickyHeader;\n }\n let headerStyle: CSSProperties \| undefined;\n if (headerBehavior?.offsetTop != null) {\n headerStyle = { top: headerBehavior.offsetTop };\n }\n\n const resolvedDensity: DataTableDensity = density ?? 'default';\n const sharedRowClasses: string[] = [\n styles.densityRecipe({ density: resolvedDensity }),\n ];\n if (gridTemplateClassName != null) {\n sharedRowClasses.push(gridTemplateClassName);\n }\n\n let rowsContent: JSX.Element;\n if (showEmpty) {\n rowsContent = (\n <div className={cx(styles.emptyRow, classes?.emptyRow)} role=\"row\">\n <div role=\"cell\">{resolvedEmptyState}</div>\n </div>\n );\n } else {\n rowsContent = (\n <>\n {rows.map((row, index) => {\n const rowId = getRowId(row, index);\n const rowClasses = [styles.row({ kind: resolvedKind }), classes?.row];\n const state = rowState?.(row, index);\n if (state != null) {\n rowClasses.push(styles.rowStateRecipe({ state }));\n }\n if (index % 2 === 0) {\n rowClasses.push(\n styles.rowEven({ kind: resolvedKind }),\n classes?.rowEven,\n );\n } else {\n rowClasses.push(\n styles.rowOdd({ kind: resolvedKind }),\n classes?.rowOdd,\n );\n }\n for (const sharedClass of sharedRowClasses) {\n rowClasses.push(sharedClass);\n }\n\n if (rowClassName != null) {\n const customClass = rowClassName(row, index);\n if (customClass != null) {\n rowClasses.push(customClass);\n }\n }\n\n return (\n <div\n key={rowId}\n role=\"row\"\n className={cx(...rowClasses)}\n style={inlineTemplateStyle}\n >\n {columns.map((column) => {\n const cellClasses = [\n styles.cell({ kind: resolvedKind }),\n classes?.cell,\n ];\n const visibilityClass = getVisibilityClass(column.minVisibleAt);\n\n if (visibilityClass != null) {\n cellClasses.push(visibilityClass);\n }\n\n if (column.className != null) {\n cellClasses.push(column.className);\n }\n if (column.isPrimary) {\n cellClasses.push(styles.primaryCell, classes?.primaryCell);\n }\n if (column.align != null) {\n cellClasses.push(styles.alignRecipe({ align: column.align }));\n }\n\n const content = column.cell(row);\n\n return (\n <div\n key={column.id}\n role=\"cell\"\n className={cx(...cellClasses)}\n >\n {content}\n </div>\n );\n })}\n </div>\n );\n })}\n </>\n );\n }\n\n let containedContainerClassName: string \| null = null;\n let containedBodyClassName: string \| null = null;\n if (hasContainedBodyScroll) {\n containedContainerClassName = styles.containerWithContainedBody;\n containedBodyClassName = styles.bodyContained;\n }\n\n return (\n <div\n className={cx(\n styles.container({ kind: resolvedKind }),\n containedContainerClassName,\n classes?.container,\n className,\n )}\n role=\"table\"\n aria-label={tableAriaLabel}\n aria-labelledby={ariaLabelledBy}\n data-scroll-mode={bodyScrollMode}\n >\n <div\n className={cx(\n styles.header({ kind: resolvedKind }),\n headerStickyClass,\n classes?.header,\n headerClassName,\n )}\n style={headerStyle}\n role=\"rowgroup\"\n >\n <div\n className={cx(\n styles.headerRow,\n classes?.headerRow,\n ...sharedRowClasses,\n )}\n role=\"row\"\n style={inlineTemplateStyle}\n >\n {columns.map((column) => {\n const headerClasses = [\n styles.headerCell({ kind: resolvedKind }),\n classes?.headerCell,\n ];\n const visibilityClass = getVisibilityClass(column.minVisibleAt);\n if (visibilityClass != null) {\n headerClasses.push(visibilityClass);\n }\n\n if (column.className != null) {\n headerClasses.push(column.className);\n }\n if (column.isPrimary) {\n headerClasses.push(\n styles.primaryHeaderCell,\n classes?.primaryHeaderCell,\n );\n }\n if (column.align != null) {\n headerClasses.push(styles.alignRecipe({ align: column.align }));\n }\n\n return (\n <div\n key={column.id}\n role=\"columnheader\"\n className={cx(...headerClasses)}\n >\n {column.header}\n </div>\n );\n })}\n </div>\n </div>\n\n <div\n className={cx(\n styles.body({ kind: resolvedKind }),\n containedBodyClassName,\n classes?.body,\n bodyClassName,\n )}\n role=\"rowgroup\"\n data-scroll-mode={bodyScrollMode}\n >\n {rowsContent}\n {bodyFooterNode}\n </div>\n </div>\n );\n};\n\nexport const __test = {\n getVisibilityClass,\n buildInlineTemplate,\n} as const;\n"],"mappings":"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"}
1	+ {"version":3,"file":"DataTable.js","names":[],"sources":["../../../../src/components/data-table/DataTable.tsx"],"sourcesContent":["import { type CSSProperties, type JSX, type ReactNode } from 'react';\n\nimport * as styles from './DataTable.css.js';\nimport type { DataTableBreakpoint } from './tableBreakpoints.js';\nimport { buildDataTableInlineTemplate } from '../../internal/data-table/layout.js';\nimport { cx } from '../../theme/tools.js';\nimport { useUiTranslation } from '../../i18n/useUiTranslation.js';\nimport type { SlotClasses } from '../../styles/slots.js';\n\nexport type DataTableColumn<Row> = {\n id: string;\n header: JSX.Element \| string;\n cell: (row: Row) => JSX.Element \| string \| null;\n minVisibleAt?: DataTableBreakpoint;\n className?: string;\n isPrimary?: boolean;\n align?: 'left' \| 'center' \| 'right';\n priority?: 'primary' \| 'important' \| 'secondary' \| 'debug';\n mobileRole?:\n \| 'title'\n \| 'subtitle'\n \| 'meta'\n \| 'badge'\n \| 'status'\n \| 'action'\n \| 'hidden';\n};\n\nexport type GetRowId<Row> = (row: Row, index: number) => string;\n\nexport type DataTableKind = NonNullable<\n Parameters<typeof styles.container>[0]\n>['kind'];\n\nexport type DataTableDensity = NonNullable<\n Parameters<typeof styles.densityRecipe>[0]\n>['density'];\n\nexport type DataTableRowState = NonNullable<\n Parameters<typeof styles.rowStateRecipe>[0]\n>['state'];\n\nexport type DataTableHeaderBehavior = {\n sticky?: boolean;\n offsetTop?: number;\n};\n\nexport type DataTableBodyScrollMode = 'page' \| 'contained';\n\ntype DataTableSlot =\n \| 'container'\n \| 'header'\n \| 'headerRow'\n \| 'headerCell'\n \| 'primaryHeaderCell'\n \| 'body'\n \| 'row'\n \| 'rowEven'\n \| 'rowOdd'\n \| 'cell'\n \| 'primaryCell'\n \| 'emptyRow'\n \| 'emptyCell';\n\nexport type DataTableProps<Row> = {\n columns: readonly DataTableColumn<Row>[];\n rows: readonly Row[];\n getRowId: GetRowId<Row>;\n emptyState?: JSX.Element;\n className?: string;\n headerClassName?: string;\n bodyClassName?: string;\n rowClassName?: (row: Row, index: number) => string \| null \| undefined;\n gridTemplateClassName?: string;\n gridTemplateColumns?: string;\n kind?: DataTableKind;\n density?: DataTableDensity;\n headerBehavior?: DataTableHeaderBehavior;\n bodyScrollMode?: DataTableBodyScrollMode;\n rowState?: (row: Row, index: number) => DataTableRowState;\n classes?: SlotClasses<DataTableSlot>;\n ariaLabel?: string;\n ariaLabelledBy?: string;\n bodyFooterNode?: ReactNode;\n};\n\nconst getVisibilityClass = (minVisibleAt?: DataTableBreakpoint) => {\n if (minVisibleAt == null) {\n return null;\n }\n\n return styles.hideBelowRecipe({ minVisibleAt });\n};\n\n/*\n Generic responsive data table component.\n */\nexport const DataTable = <Row,>({\n columns,\n rows,\n getRowId,\n emptyState,\n className,\n headerClassName,\n bodyClassName,\n rowClassName,\n gridTemplateClassName,\n gridTemplateColumns,\n kind,\n density,\n headerBehavior,\n bodyScrollMode = 'page',\n rowState,\n classes,\n ariaLabel,\n ariaLabelledBy,\n bodyFooterNode,\n}: DataTableProps<Row>): JSX.Element => {\n const { t } = useUiTranslation();\n const resolvedKind: DataTableKind = kind ?? 'default';\n const resolvedAriaLabel = ariaLabel ?? t('common.table.label');\n let tableAriaLabel: string \| undefined = resolvedAriaLabel;\n if (ariaLabelledBy != null) {\n tableAriaLabel = undefined;\n }\n const defaultEmptyState = (\n <div className={cx(styles.emptyCell, classes?.emptyCell)}>\n {t('common.table.empty')}\n </div>\n ) as JSX.Element;\n const resolvedEmptyState = emptyState ?? defaultEmptyState;\n const showEmpty = rows.length === 0;\n const hasContainedBodyScroll = bodyScrollMode === 'contained';\n\n let inlineTemplateStyle: CSSProperties \| undefined;\n if (gridTemplateClassName == null) {\n inlineTemplateStyle = buildDataTableInlineTemplate(\n columns.length,\n gridTemplateColumns,\n );\n }\n let headerStickyClass: string \| null = null;\n if (headerBehavior?.sticky === true) {\n headerStickyClass = styles.stickyHeader;\n }\n let headerStyle: CSSProperties \| undefined;\n if (headerBehavior?.offsetTop != null) {\n headerStyle = { top: headerBehavior.offsetTop };\n }\n\n const resolvedDensity: DataTableDensity = density ?? 'default';\n const sharedRowClasses: string[] = [\n styles.densityRecipe({ density: resolvedDensity }),\n ];\n if (gridTemplateClassName != null) {\n sharedRowClasses.push(gridTemplateClassName);\n }\n\n let rowsContent: JSX.Element;\n if (showEmpty) {\n rowsContent = (\n <div className={cx(styles.emptyRow, classes?.emptyRow)} role=\"row\">\n <div role=\"cell\">{resolvedEmptyState}</div>\n </div>\n );\n } else {\n rowsContent = (\n <>\n {rows.map((row, index) => {\n const rowId = getRowId(row, index);\n const rowClasses = [styles.row({ kind: resolvedKind }), classes?.row];\n const state = rowState?.(row, index);\n if (state != null) {\n rowClasses.push(styles.rowStateRecipe({ state }));\n }\n if (index % 2 === 0) {\n rowClasses.push(\n styles.rowEven({ kind: resolvedKind }),\n classes?.rowEven,\n );\n } else {\n rowClasses.push(\n styles.rowOdd({ kind: resolvedKind }),\n classes?.rowOdd,\n );\n }\n for (const sharedClass of sharedRowClasses) {\n rowClasses.push(sharedClass);\n }\n\n if (rowClassName != null) {\n const customClass = rowClassName(row, index);\n if (customClass != null) {\n rowClasses.push(customClass);\n }\n }\n\n return (\n <div\n key={rowId}\n role=\"row\"\n className={cx(...rowClasses)}\n style={inlineTemplateStyle}\n >\n {columns.map((column) => {\n const cellClasses = [\n styles.cell({ kind: resolvedKind }),\n classes?.cell,\n ];\n const visibilityClass = getVisibilityClass(column.minVisibleAt);\n\n if (visibilityClass != null) {\n cellClasses.push(visibilityClass);\n }\n\n if (column.className != null) {\n cellClasses.push(column.className);\n }\n if (column.isPrimary) {\n cellClasses.push(styles.primaryCell, classes?.primaryCell);\n }\n if (column.align != null) {\n cellClasses.push(styles.alignRecipe({ align: column.align }));\n }\n\n const content = column.cell(row);\n\n return (\n <div\n key={column.id}\n role=\"cell\"\n className={cx(...cellClasses)}\n >\n {content}\n </div>\n );\n })}\n </div>\n );\n })}\n </>\n );\n }\n\n let containedContainerClassName: string \| null = null;\n let containedBodyClassName: string \| null = null;\n if (hasContainedBodyScroll) {\n containedContainerClassName = styles.containerWithContainedBody;\n containedBodyClassName = styles.bodyContained;\n }\n\n return (\n <div\n className={cx(\n styles.container({ kind: resolvedKind }),\n containedContainerClassName,\n classes?.container,\n className,\n )}\n role=\"table\"\n aria-label={tableAriaLabel}\n aria-labelledby={ariaLabelledBy}\n data-scroll-mode={bodyScrollMode}\n >\n <div\n className={cx(\n styles.header({ kind: resolvedKind }),\n headerStickyClass,\n classes?.header,\n headerClassName,\n )}\n style={headerStyle}\n role=\"rowgroup\"\n >\n <div\n className={cx(\n styles.headerRow,\n classes?.headerRow,\n ...sharedRowClasses,\n )}\n role=\"row\"\n style={inlineTemplateStyle}\n >\n {columns.map((column) => {\n const headerClasses = [\n styles.headerCell({ kind: resolvedKind }),\n classes?.headerCell,\n ];\n const visibilityClass = getVisibilityClass(column.minVisibleAt);\n if (visibilityClass != null) {\n headerClasses.push(visibilityClass);\n }\n\n if (column.className != null) {\n headerClasses.push(column.className);\n }\n if (column.isPrimary) {\n headerClasses.push(\n styles.primaryHeaderCell,\n classes?.primaryHeaderCell,\n );\n }\n if (column.align != null) {\n headerClasses.push(styles.alignRecipe({ align: column.align }));\n }\n\n return (\n <div\n key={column.id}\n role=\"columnheader\"\n className={cx(...headerClasses)}\n >\n {column.header}\n </div>\n );\n })}\n </div>\n </div>\n\n <div\n className={cx(\n styles.body({ kind: resolvedKind }),\n containedBodyClassName,\n classes?.body,\n bodyClassName,\n )}\n role=\"rowgroup\"\n data-scroll-mode={bodyScrollMode}\n >\n {rowsContent}\n {bodyFooterNode}\n </div>\n </div>\n );\n};\n"],"mappings":"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"}