@plumile/ui 0.1.55 → 0.1.57

package/lib/esm/components/charts/billingUsageLineChart.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"billingUsageLineChart.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
+{"version":3,"file":"billingUsageLineChart.css.js","names":[],"sources":["../../../../src/components/charts/billingUsageLineChart.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../theme/sprinkles.css.js';\n\nexport const chartContainer = style([\n  sprinkles({\n    width: 'full',\n    borderWidth: 'px',\n    borderStyle: 'solid',\n    borderColor: 'borderLight',\n    borderRadius: 'lg',\n    backgroundColor: 'surface',\n    paddingY: 2,\n    paddingX: 2,\n  }),\n  {\n    height: '260px',\n    '@media': {\n      'screen and (min-width: 768px)': {\n        height: '340px',\n      },\n    },\n  },\n]);\n\nexport const tooltip = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1.5,\n  borderWidth: 'px',\n  borderStyle: 'solid',\n  borderColor: 'border',\n  borderRadius: 'md',\n  backgroundColor: 'surfaceElevated',\n  paddingY: 2,\n  paddingX: 2.5,\n  boxShadow: 'lg',\n});\n\nexport const tooltipDate = sprinkles({\n  fontSize: 'xs',\n  color: 'textMuted',\n  fontWeight: 'medium',\n  margin: 0,\n});\n\nexport const tooltipRow = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  gap: 3,\n  fontSize: 'sm',\n  color: 'text',\n});\n\nexport const tooltipRowLabel = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: 1.5,\n});\n\nexport const tooltipSwatch = style([\n  sprinkles({\n    width: 2,\n    height: 2,\n    borderRadius: 'full',\n  }),\n]);\n"],"mappings":""}

package/lib/esm/components/data-table/DataTable.css.js

@@ -0,0 +1,84 @@
+/* empty css                                   */
+/* empty css                         */
+import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
+//#region src/components/data-table/DataTable.css.ts
+var t = e({
+	defaultClassName: "ysn8463 ysn8460 txvbqb9io txvbqbai6 txvbqbu6f txvbqb1k",
+	variantClassNames: { kind: {
+		default: "ysn8464 ysn8461 txvbqbuzn txvbqbwf txvbqb1ro txvbqb1qf txvbqb1co txvbqbl6f",
+		brandTable: "ysn8465 ysn8462 txvbqbuzj txvbqb1qo txvbqb1px txvbqb12f txvbqbl6x"
+	} },
+	defaultVariants: { kind: "default" },
+	compoundVariants: []
+}), n = e({
+	defaultClassName: "ysn8468",
+	variantClassNames: { kind: {
+		default: "ysn8469 ysn8466 txvbqb12f txvbqb1qf txvbqb62o txvbqb3no txvbqbv2t",
+		brandTable: "ysn846a ysn8467 txvbqbuzj txvbqb12f txvbqb1qf txvbqb62o txvbqb3s6"
+	} },
+	defaultVariants: { kind: "default" },
+	compoundVariants: []
+}), r = "ysn846b txvbqb9ix txvbqbu6f txvbqbc6", i = "var(--ysn846c)", a = "var(--ysn846d)", o = "var(--ysn846e)", s = e({
+	defaultClassName: "ysn846j ysn846f txvbqbco txvbqb9io txvbqbaj6 txvbqbao6 txvbqbl6f txvbqbt6f txvbqbuw6",
+	variantClassNames: { kind: {
+		default: "ysn846k ysn846h ysn846g txvbqbv8p txvbqbamo",
+		brandTable: "ysn846l ysn846i txvbqbnuf txvbqboho txvbqbp5x txvbqblxo txvbqbv7p txvbqbamx txvbqb8o txvbqbeef txvbqb66 txvbqb54x"
+	} },
+	defaultVariants: { kind: "default" },
+	compoundVariants: []
+}), c = e({
+	defaultClassName: "ysn846o ysn846m txvbqb9io txvbqbai6",
+	variantClassNames: { kind: {
+		default: "ysn846p",
+		brandTable: "ysn846q ysn846n txvbqbuzj"
+	} },
+	defaultVariants: { kind: "default" },
+	compoundVariants: []
+}), l = e({
+	defaultClassName: "ysn846w ysn846r txvbqbc6 txvbqb1qf txvbqb12f txvbqb9ix txvbqb78 txvbqb6x txvbqb7k",
+	variantClassNames: { kind: {
+		default: "ysn846x ysn846t ysn846s txvbqbv2r txvbqb3of txvbqb62o",
+		brandTable: "ysn846y ysn846v ysn846u txvbqbuzj txvbqb3s6 txvbqb62o"
+	} },
+	defaultVariants: { kind: "default" },
+	compoundVariants: []
+}), u = e({
+	defaultClassName: "ysn84611",
+	variantClassNames: { kind: {
+		default: "ysn84612 ysn846z txvbqbv2v",
+		brandTable: "ysn84613 ysn84610 txvbqbuzj"
+	} },
+	defaultVariants: { kind: "default" },
+	compoundVariants: []
+}), d = e({
+	defaultClassName: "ysn84616",
+	variantClassNames: { kind: {
+		default: "ysn84617 ysn84614 txvbqbv2r",
+		brandTable: "ysn84618 ysn84615 txvbqbuzj"
+	} },
+	defaultVariants: { kind: "default" },
+	compoundVariants: []
+}), f = e({
+	defaultClassName: "ysn8461d ysn84619 txvbqbco txvbqb9io txvbqbao6 txvbqbk4x txvbqbl6f",
+	variantClassNames: { kind: {
+		default: "ysn8461e ysn8461b ysn8461a txvbqbv8r",
+		brandTable: "ysn8461f ysn8461c txvbqbnuf txvbqboho txvbqbp5x txvbqblxo txvbqbv8p txvbqbamo txvbqb8x txvbqb54x"
+	} },
+	defaultVariants: { kind: "default" },
+	compoundVariants: []
+}), p = "ysn8461g txvbqbamo txvbqbv8p", m = "ysn8461h txvbqbv8p", h = "ysn8461i", g = "ysn8461j txvbqb96 txvbqbv8r txvbqbt5x", _ = e({
+	defaultClassName: "ysn8461k",
+	variantClassNames: { minVisibleAt: {
+		sm: "ysn8461l",
+		md: "ysn8461m",
+		lg: "ysn8461n",
+		xl: "ysn8461o",
+		xxl: "ysn8461p"
+	} },
+	defaultVariants: {},
+	compoundVariants: []
+});
+//#endregion
+export { c as body, f as cell, t as container, g as emptyCell, h as emptyRow, n as header, s as headerCell, r as headerRow, _ as hideBelowRecipe, p as primaryCell, m as primaryHeaderCell, l as row, u as rowEven, d as rowOdd, a as tableCellFontSizeVar, i as tableCellPaddingVar, o as tableEmptyRowPaddingVar };
+
+//# sourceMappingURL=DataTable.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.css.js","names":[],"sources":["../../../../src/components/data-table/DataTable.css.ts"],"sourcesContent":["import {\n  createVar,\n  fallbackVar,\n  style,\n  type StyleRule,\n} from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { vars } from '../../theme/themeContract.js';\n\nimport {\n  DATA_TABLE_BREAKPOINT_ENTRIES,\n  type DataTableBreakpoint,\n} from './tableBreakpoints.js';\nimport { sprinkles } from '../../theme/sprinkles.css.js';\n\nexport const container = recipe({\n  base: sprinkles({\n    display: 'flex',\n    flexDirection: 'column',\n    width: 'full',\n    containerType: 'inline-size',\n  }),\n  variants: {\n    kind: {\n      default: sprinkles({\n        backgroundColor: 'white',\n        borderColor: 'border',\n        borderRadius: 'lg',\n        borderStyle: 'solid',\n        borderWidth: 'default',\n        overflow: 'hidden',\n      }),\n      brandTable: sprinkles({\n        backgroundColor: 'transparent',\n        borderRadius: 'none',\n        borderStyle: 'none',\n        borderWidth: 0,\n        overflow: 'visible',\n      }),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const header = recipe({\n  variants: {\n    kind: {\n      default: sprinkles({\n        borderWidth: 0,\n        borderStyle: 'solid',\n        borderBottomWidth: 'default',\n        borderBottomColor: 'border',\n        backgroundColor: 'surfaceSecondary',\n      }),\n      brandTable: sprinkles({\n        backgroundColor: 'transparent',\n        borderWidth: 0,\n        borderStyle: 'solid',\n        borderBottomWidth: 'default',\n        borderBottomColor: 'brandSecondaryOrange-20',\n      }),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const headerRow = sprinkles({\n  display: 'grid',\n  width: 'full',\n  alignItems: 'stretch',\n});\n\nexport const tableCellPaddingVar = createVar();\nexport const tableCellFontSizeVar = createVar();\nexport const tableEmptyRowPaddingVar = createVar();\n\nexport const headerCell = recipe({\n  base: sprinkles({\n    alignItems: 'center',\n    display: 'flex',\n    flexShrink: 0,\n    gap: 2,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  }),\n  variants: {\n    kind: {\n      default: style([\n        sprinkles({\n          color: 'text',\n          fontWeight: 'semibold',\n        }),\n        {\n          padding: fallbackVar(\n            tableCellPaddingVar,\n            `${vars.spacing[3]} ${vars.spacing[4]}`,\n          ),\n          fontSize: fallbackVar(tableCellFontSizeVar, vars.fontSize.sm),\n          borderRight: `1px solid ${vars.colors.border}`,\n          selectors: {\n            '&:last-child': {\n              borderRight: 'none',\n            },\n          },\n        },\n      ]),\n      brandTable: sprinkles({\n        color: 'black-300',\n        fontWeight: 'bold',\n        fontSize: 'xs',\n        letterSpacing: 'caps',\n        textTransform: 'uppercase',\n        paddingY: 4,\n        paddingX: 0,\n        borderRightWidth: 0,\n      }),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const body = recipe({\n  base: sprinkles({\n    display: 'flex',\n    flexDirection: 'column',\n  }),\n  variants: {\n    kind: {\n      default: {},\n      brandTable: sprinkles({\n        backgroundColor: 'transparent',\n      }),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const row = recipe({\n  base: sprinkles({\n    alignItems: 'stretch',\n    borderStyle: 'solid',\n    borderWidth: 0,\n    display: 'grid',\n    transitionProperty: 'colors',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n  }),\n  variants: {\n    kind: {\n      default: style([\n        sprinkles({\n          backgroundColor: 'surface',\n          borderBottomColor: 'borderLight',\n          borderBottomWidth: 'default',\n        }),\n        {\n          selectors: {\n            '&:last-child': {\n              borderBottomWidth: 0,\n            },\n            '&:hover': {\n              backgroundColor: vars.colors.surfaceSecondary,\n            },\n          },\n        },\n      ]),\n      brandTable: style([\n        sprinkles({\n          backgroundColor: 'transparent',\n          borderBottomColor: 'brandSecondaryOrange-20',\n          borderBottomWidth: 'default',\n        }),\n        {\n          selectors: {\n            '&:last-child': {\n              borderBottomWidth: 0,\n            },\n            '&:hover': {\n              backgroundColor: 'transparent',\n            },\n          },\n        },\n      ]),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const rowEven = recipe({\n  variants: {\n    kind: {\n      default: sprinkles({\n        backgroundColor: 'surfaceMuted',\n      }),\n      brandTable: sprinkles({\n        backgroundColor: 'transparent',\n      }),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const rowOdd = recipe({\n  variants: {\n    kind: {\n      default: sprinkles({\n        backgroundColor: 'surface',\n      }),\n      brandTable: sprinkles({\n        backgroundColor: 'transparent',\n      }),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const cell = recipe({\n  base: sprinkles({\n    alignItems: 'center',\n    display: 'flex',\n    gap: 2,\n    minWidth: 0,\n    overflow: 'hidden',\n  }),\n  variants: {\n    kind: {\n      default: style([\n        sprinkles({\n          color: 'textSecondary',\n        }),\n        {\n          padding: fallbackVar(\n            tableCellPaddingVar,\n            `${vars.spacing[3]} ${vars.spacing[4]}`,\n          ),\n          fontSize: fallbackVar(tableCellFontSizeVar, vars.fontSize.sm),\n          borderRight: `1px solid ${vars.colors.borderLight}`,\n          selectors: {\n            '&:last-child': {\n              borderRight: 'none',\n            },\n          },\n        },\n      ]),\n      brandTable: sprinkles({\n        color: 'text',\n        fontWeight: 'semibold',\n        fontSize: 'sm',\n        paddingY: 4,\n        paddingX: 0,\n        borderRightWidth: 0,\n      }),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const primaryCell = sprinkles({\n  fontWeight: 'semibold',\n  color: 'text',\n});\n\nexport const primaryHeaderCell = sprinkles({\n  color: 'text',\n});\n\nexport const emptyRow = style({\n  padding: fallbackVar(\n    tableEmptyRowPaddingVar,\n    `${vars.spacing[6]} ${vars.spacing[4]}`,\n  ),\n});\n\nexport const emptyCell = sprinkles({\n  fontSize: 'base',\n  color: 'textSecondary',\n  textAlign: 'center',\n});\n\nconst hideBelowMap: Record<DataTableBreakpoint, StyleRule> = {} as Record<\n  DataTableBreakpoint,\n  StyleRule\n>;\n\nDATA_TABLE_BREAKPOINT_ENTRIES.forEach(([breakpoint, width]) => {\n  hideBelowMap[breakpoint] = {\n    '@container': {\n      [`(max-width: ${width - 0.5}px)`]: {\n        visibility: 'hidden',\n        opacity: 0,\n        pointerEvents: 'none',\n        paddingInline: 0,\n        paddingBlock: 0,\n        borderRight: 'none',\n        overflow: 'hidden',\n      },\n    },\n  };\n});\n\nexport const hideBelowRecipe = recipe({\n  variants: {\n    minVisibleAt: hideBelowMap,\n  },\n});\n"],"mappings":""}

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

@@ -0,0 +1,74 @@
+import { cx as e } from "../../theme/tools.js";
+import { useUiTranslation as t } from "../../i18n/useUiTranslation.js";
+import { body as n, cell as r, container as i, emptyCell as a, emptyRow as o, header as s, headerCell as c, headerRow as l, hideBelowRecipe as u, primaryCell as d, primaryHeaderCell as f, row as p, rowEven as m, rowOdd as h } from "./DataTable.css.js";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+//#region src/components/data-table/DataTable.tsx
+var y = "minmax(0, 1fr)", b = (e) => e == null ? null : u({ minVisibleAt: e }), x = (e, t) => typeof t == "string" && t !== "" ? { gridTemplateColumns: t } : { gridTemplateColumns: `repeat(${e}, ${y})` }, S = ({ columns: u, rows: y, getRowId: S, emptyState: C, className: w, headerClassName: T, bodyClassName: E, rowClassName: D, gridTemplateClassName: O, gridTemplateColumns: k, kind: A, classes: j }) => {
+	let { t: M } = t(), N = A ?? "default", P = /* @__PURE__ */ _("div", {
+		className: e(a, j?.emptyCell),
+		children: M("common.table.empty")
+	}), F = C ?? P, I = y.length === 0, L;
+	O ?? (L = x(u.length, k));
+	let R = [];
+	O != null && R.push(O);
+	let z;
+	return z = I ? /* @__PURE__ */ _("div", {
+		className: e(o, j?.emptyRow),
+		role: "row",
+		children: /* @__PURE__ */ _("div", {
+			role: "cell",
+			children: F
+		})
+	}) : /* @__PURE__ */ _(g, { children: y.map((t, n) => {
+		let i = S(t, n), a = [p({ kind: N }), j?.row];
+		n % 2 == 0 ? a.push(m({ kind: N }), j?.rowEven) : a.push(h({ kind: N }), j?.rowOdd);
+		for (let e of R) a.push(e);
+		if (D != null) {
+			let e = D(t, n);
+			e != null && a.push(e);
+		}
+		return /* @__PURE__ */ _("div", {
+			role: "row",
+			className: e(...a),
+			style: L,
+			children: u.map((n) => {
+				let i = [r({ kind: N }), j?.cell], a = b(n.minVisibleAt);
+				a != null && i.push(a), n.className != null && i.push(n.className), n.isPrimary && i.push(d, j?.primaryCell);
+				let o = n.cell(t);
+				return /* @__PURE__ */ _("div", {
+					role: "cell",
+					className: e(...i),
+					children: o
+				}, n.id);
+			})
+		}, i);
+	}) }), /* @__PURE__ */ v("div", {
+		className: e(i({ kind: N }), j?.container, w),
+		role: "table",
+		children: [/* @__PURE__ */ _("div", {
+			className: e(s({ kind: N }), j?.header, T),
+			role: "rowgroup",
+			children: /* @__PURE__ */ _("div", {
+				className: e(l, j?.headerRow, ...R),
+				role: "row",
+				style: L,
+				children: u.map((t) => {
+					let n = [c({ kind: N }), j?.headerCell], r = b(t.minVisibleAt);
+					return r != null && n.push(r), t.className != null && n.push(t.className), t.isPrimary && n.push(f, j?.primaryHeaderCell), /* @__PURE__ */ _("div", {
+						role: "columnheader",
+						className: e(...n),
+						children: t.header
+					}, t.id);
+				})
+			})
+		}), /* @__PURE__ */ _("div", {
+			className: e(n({ kind: N }), j?.body, E),
+			role: "rowgroup",
+			children: z
+		})]
+	});
+};
+//#endregion
+export { S as DataTable };
+
+//# sourceMappingURL=DataTable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.js","names":[],"sources":["../../../../src/components/data-table/DataTable.tsx"],"sourcesContent":["import { type CSSProperties, type JSX } 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};\n\nexport type GetRowId<Row> = (row: Row, index: number) => string;\n\nexport type DataTableKind = NonNullable<\n  Parameters<typeof styles.container>[0]\n>['kind'];\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  classes?: SlotClasses<DataTableSlot>;\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  classes,\n}: DataTableProps<Row>): JSX.Element => {\n  const { t } = useUiTranslation();\n  const resolvedKind: DataTableKind = kind ?? 'default';\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\n  let inlineTemplateStyle: CSSProperties | undefined;\n  if (gridTemplateClassName == null) {\n    inlineTemplateStyle = buildInlineTemplate(\n      columns.length,\n      gridTemplateColumns,\n    );\n  }\n\n  const sharedRowClasses: string[] = [];\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          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\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  return (\n    <div\n      className={cx(\n        styles.container({ kind: resolvedKind }),\n        classes?.container,\n        className,\n      )}\n      role=\"table\"\n    >\n      <div\n        className={cx(\n          styles.header({ kind: resolvedKind }),\n          classes?.header,\n          headerClassName,\n        )}\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\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          classes?.body,\n          bodyClassName,\n        )}\n        role=\"rowgroup\"\n      >\n        {rowsContent}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/lib/esm/components/data-table/TableCell.css.js

@@ -0,0 +1,18 @@
+/* empty css                                   */
+/* empty css                         */
+import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
+//#region src/components/data-table/TableCell.css.ts
+var t = "x6ceqz0 txvbqbu6f txvbqb9io txvbqbco txvbqbao6 txvbqbv8p", n = e({
+	defaultClassName: "x6ceqz1",
+	variantClassNames: { align: {
+		start: "x6ceqz2",
+		center: "x6ceqz3",
+		end: "x6ceqz4"
+	} },
+	defaultVariants: { align: "start" },
+	compoundVariants: []
+}), r = "x6ceqz5 txvbqbv8p", i = "x6ceqz6 txvbqbv8p txvbqbuw6", a = "x6ceqz7 txvbqbv8p txvbqbuw6", o = "x6ceqz8 txvbqbv8r txvbqb8o", s = "x6ceqz9 txvbqbl6f txvbqbt6f txvbqbuw6", c = "x6ceqza txvbqbuwx";
+//#endregion
+export { n as alignRecipe, t as base, a as date, s as ellipsis, o as muted, i as number, c as summary, r as text };
+
+//# sourceMappingURL=TableCell.css.js.map

package/lib/esm/components/data-table/TableCell.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCell.css.js","names":[],"sources":["../../../../src/components/data-table/TableCell.css.ts"],"sourcesContent":["import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../theme/sprinkles.css.js';\n\nexport const base = sprinkles({\n  width: 'full',\n  display: 'flex',\n  alignItems: 'center',\n  gap: 2,\n  color: 'text',\n});\n\nexport const alignRecipe = recipe({\n  variants: {\n    align: {\n      start: { justifyContent: 'flex-start', textAlign: 'left' },\n      center: { justifyContent: 'center', textAlign: 'center' },\n      end: { justifyContent: 'flex-end', textAlign: 'right' },\n    },\n  },\n  defaultVariants: {\n    align: 'start',\n  },\n});\n\nexport type AlignRecipeVariants = RecipeVariants<typeof alignRecipe>;\n\nexport const text = sprinkles({\n  color: 'text',\n});\n\nexport const number = sprinkles({\n  color: 'text',\n  whiteSpace: 'nowrap',\n});\n\nexport const date = sprinkles({\n  color: 'text',\n  whiteSpace: 'nowrap',\n});\n\nexport const muted = sprinkles({\n  color: 'textSecondary',\n  fontSize: 'xs',\n});\n\nexport const ellipsis = sprinkles({\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n});\n\nexport const summary = sprinkles({\n  whiteSpace: 'pre-wrap',\n});\n"],"mappings":""}

package/lib/esm/components/data-table/TableCell.js

@@ -0,0 +1,75 @@
+import { cx as e } from "../../theme/tools.js";
+import { Badge as t } from "../../atomic/atoms/badge/Badge.js";
+import { FormattedDate as n } from "../../atomic/atoms/formatted-date/FormattedDate.js";
+import { date as r, muted as i, number as a, text as o } from "./TableCell.css.js";
+import { TableCellBase as s } from "./TableCellBase.js";
+import { jsx as c } from "react/jsx-runtime";
+import { useMemo as l } from "react";
+//#region src/components/data-table/TableCell.tsx
+var u = "—", d = u, f = { maximumFractionDigits: 2 }, p = {
+	dateStyle: "medium",
+	timeStyle: "short"
+}, m = {
+	Base: s,
+	Text: ({ value: t, fallback: n = d, children: r, ellipsis: i = !1, className: a }) => {
+		let l = r ?? t;
+		if (l == null) l = n;
+		else if (typeof l == "string") {
+			let e = l.trim();
+			l = e.length === 0 ? n : e;
+		}
+		return /* @__PURE__ */ c(s, {
+			ellipsis: i,
+			className: e(o, a),
+			children: l
+		});
+	},
+	Number: ({ value: e, fallback: t = d, locale: n, formatOptions: r = f }) => /* @__PURE__ */ c(s, {
+		align: "end",
+		className: a,
+		children: l(() => {
+			if (e == null || Number.isNaN(Number(e))) return t;
+			try {
+				return new Intl.NumberFormat(n, r).format(e);
+			} catch {
+				return String(e);
+			}
+		}, [
+			e,
+			t,
+			n,
+			r
+		])
+	}),
+	Status: ({ label: e, tone: n, isLoading: r = !1 }) => /* @__PURE__ */ c(s, { children: /* @__PURE__ */ c(t, {
+		tone: n,
+		loading: r,
+		children: e
+	}) }),
+	Date: ({ value: e, fallback: t = u, locale: i, options: a = p }) => /* @__PURE__ */ c(s, {
+		className: r,
+		children: /* @__PURE__ */ c(n, {
+			value: e,
+			fallback: t,
+			locale: i,
+			options: a
+		})
+	}),
+	Badge: ({ label: e, tone: n }) => /* @__PURE__ */ c(s, { children: /* @__PURE__ */ c(t, {
+		tone: n,
+		children: e
+	}) }),
+	Actions: ({ children: e, className: t }) => /* @__PURE__ */ c(s, {
+		align: "end",
+		className: t,
+		children: e
+	}),
+	Muted: ({ children: e }) => /* @__PURE__ */ c("span", {
+		className: i,
+		children: e
+	})
+};
+//#endregion
+export { m as TableCell };
+
+//# sourceMappingURL=TableCell.js.map

package/lib/esm/components/data-table/TableCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCell.js","names":[],"sources":["../../../../src/components/data-table/TableCell.tsx"],"sourcesContent":["import { type JSX, type ReactNode, useMemo } from 'react';\n\nimport { Badge } from '../../atomic/atoms/badge/Badge.js';\nimport { FormattedDate } from '../../atomic/atoms/formatted-date/FormattedDate.js';\n\nimport * as styles from './TableCell.css.js';\nimport { TableCellBase, type TableCellBaseProps } from './TableCellBase.js';\nimport { cx } from '../../theme/tools.js';\n\ntype BadgeTone =\n  | 'neutral'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'danger'\n  | 'accent';\n\ntype TextCellProps = {\n  value?: string | null | undefined;\n  fallback?: string;\n  children?: ReactNode;\n  ellipsis?: boolean;\n  className?: string;\n};\n\ntype NumberCellProps = {\n  value: number | null | undefined;\n  fallback?: string;\n  locale?: string;\n  formatOptions?: Intl.NumberFormatOptions;\n};\n\ntype StatusCellProps = {\n  label: string;\n  tone: BadgeTone;\n  isLoading?: boolean;\n};\n\ntype DateCellProps = {\n  value: string | null | undefined;\n  fallback?: string;\n  locale?: string;\n  options?: Intl.DateTimeFormatOptions;\n};\n\ntype BadgeCellProps = {\n  label: string;\n  tone: BadgeTone;\n};\n\ntype ActionsCellProps = TableCellBaseProps;\n\nconst FALLBACK_REFERENCE = '—';\nconst DEFAULT_TEXT_FALLBACK = FALLBACK_REFERENCE;\n\nconst DefaultNumberFormat: Intl.NumberFormatOptions = {\n  maximumFractionDigits: 2,\n};\n\nconst DefaultDateOptions: Intl.DateTimeFormatOptions = {\n  dateStyle: 'medium',\n  timeStyle: 'short',\n};\n\nconst Text = ({\n  value,\n  fallback = DEFAULT_TEXT_FALLBACK,\n  children,\n  ellipsis = false,\n  className,\n}: TextCellProps): JSX.Element => {\n  let content: ReactNode = children ?? value;\n\n  if (content == null) {\n    content = fallback;\n  } else if (typeof content === 'string') {\n    const trimmed = content.trim();\n    if (trimmed.length === 0) {\n      content = fallback;\n    } else {\n      content = trimmed;\n    }\n  }\n\n  return (\n    <TableCellBase ellipsis={ellipsis} className={cx(styles.text, className)}>\n      {content}\n    </TableCellBase>\n  );\n};\n\nconst NumberCell = ({\n  value,\n  fallback = DEFAULT_TEXT_FALLBACK,\n  locale,\n  formatOptions = DefaultNumberFormat,\n}: NumberCellProps): JSX.Element => {\n  const formatted = useMemo(() => {\n    if (value == null || Number.isNaN(Number(value))) {\n      return fallback;\n    }\n\n    try {\n      return new Intl.NumberFormat(locale, formatOptions).format(value);\n    } catch {\n      return String(value);\n    }\n  }, [value, fallback, locale, formatOptions]);\n\n  return (\n    <TableCellBase align=\"end\" className={styles.number}>\n      {formatted}\n    </TableCellBase>\n  );\n};\n\nconst Status = ({\n  label,\n  tone,\n  isLoading = false,\n}: StatusCellProps): JSX.Element => {\n  return (\n    <TableCellBase>\n      <Badge tone={tone} loading={isLoading}>\n        {label}\n      </Badge>\n    </TableCellBase>\n  );\n};\n\nconst DateCell = ({\n  value,\n  fallback = FALLBACK_REFERENCE,\n  locale,\n  options = DefaultDateOptions,\n}: DateCellProps): JSX.Element => {\n  return (\n    <TableCellBase className={styles.date}>\n      <FormattedDate\n        value={value}\n        fallback={fallback}\n        locale={locale}\n        options={options}\n      />\n    </TableCellBase>\n  );\n};\n\nconst BadgeCell = ({ label, tone }: BadgeCellProps): JSX.Element => {\n  return (\n    <TableCellBase>\n      <Badge tone={tone}>{label}</Badge>\n    </TableCellBase>\n  );\n};\n\nconst Actions = ({ children, className }: ActionsCellProps): JSX.Element => {\n  return (\n    <TableCellBase align=\"end\" className={className}>\n      {children}\n    </TableCellBase>\n  );\n};\n\nconst Muted = ({ children }: { children: ReactNode }): JSX.Element => {\n  return <span className={styles.muted}>{children}</span>;\n};\n\nexport const TableCell = {\n  Base: TableCellBase,\n  Text,\n  Number: NumberCell,\n  Status,\n  Date: DateCell,\n  Badge: BadgeCell,\n  Actions,\n  Muted,\n};\n\nexport type { TextCellProps, NumberCellProps, StatusCellProps, DateCellProps };\n"],"mappings":";;;;;;;;AAoDA,IAAM,IAAqB,KACrB,IAAwB,GAExB,IAAgD,EACpD,uBAAuB,GACxB,EAEK,IAAiD;CACrD,WAAW;CACX,WAAW;CACZ,EA0GY,IAAY;CACvB,MAAM;CACN,OA1GY,EACZ,UACA,cAAW,GACX,aACA,cAAW,IACX,mBACgC;EAChC,IAAI,IAAqB,KAAY;AAErC,MAAI,KAAW,KACb,KAAU;WACD,OAAO,KAAY,UAAU;GACtC,IAAM,IAAU,EAAQ,MAAM;AAC9B,GAGE,IAHE,EAAQ,WAAW,IACX,IAEA;;AAId,SACE,kBAAC,GAAD;GAAyB;GAAU,WAAW,EAAG,GAAa,EAAU;aACrE;GACa,CAAA;;CAoFlB,SAhFkB,EAClB,UACA,cAAW,GACX,WACA,mBAAgB,QAed,kBAAC,GAAD;EAAe,OAAM;EAAM,WAAW;YAbtB,QAAc;AAC9B,OAAI,KAAS,QAAQ,OAAO,MAAM,OAAO,EAAM,CAAC,CAC9C,QAAO;AAGT,OAAI;AACF,WAAO,IAAI,KAAK,aAAa,GAAQ,EAAc,CAAC,OAAO,EAAM;WAC3D;AACN,WAAO,OAAO,EAAM;;KAErB;GAAC;GAAO;GAAU;GAAQ;GAAc,CAAC;EAK1B,CAAA;CA4DlB,SAxDc,EACd,UACA,SACA,eAAY,SAGV,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;EAAa;EAAM,SAAS;YACzB;EACK,CAAA,EACM,CAAA;CA+ClB,OA3CgB,EAChB,UACA,cAAW,GACX,WACA,aAAU,QAGR,kBAAC,GAAD;EAAe,WAAW;YACxB,kBAAC,GAAD;GACS;GACG;GACF;GACC;GACT,CAAA;EACY,CAAA;CA8BlB,QA1BiB,EAAE,UAAO,cAExB,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;EAAa;YAAO;EAAc,CAAA,EACpB,CAAA;CAuBlB,UAnBe,EAAE,aAAU,mBAEzB,kBAAC,GAAD;EAAe,OAAM;EAAiB;EACnC;EACa,CAAA;CAgBlB,QAZa,EAAE,kBACR,kBAAC,QAAD;EAAM,WAAW;EAAe;EAAgB,CAAA;CAYxD"}

package/lib/esm/components/data-table/TableCellBase.js

@@ -0,0 +1,19 @@
+import { cx as e } from "../../theme/tools.js";
+import { alignRecipe as t, base as n, ellipsis as r } from "./TableCell.css.js";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/data-table/TableCellBase.tsx
+var a = ({ children: a, className: o, align: s = "start", ellipsis: c = !1 }) => {
+	let l = [
+		n,
+		t({ align: s }),
+		o
+	];
+	return c && l.push(r), /* @__PURE__ */ i("div", {
+		className: e(...l),
+		children: a
+	});
+};
+//#endregion
+export { a as TableCellBase };
+
+//# sourceMappingURL=TableCellBase.js.map

package/lib/esm/components/data-table/TableCellBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCellBase.js","names":[],"sources":["../../../../src/components/data-table/TableCellBase.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport * as styles from './TableCell.css.js';\nimport { cx } from '../../theme/tools.js';\nimport type { RecipeVariants } from '@vanilla-extract/recipes';\n\ntype Alignment = NonNullable<\n  NonNullable<RecipeVariants<typeof styles.alignRecipe>>['align']\n>;\n\nexport type TableCellBaseProps = {\n  children: ReactNode;\n  className?: string;\n  align?: Alignment;\n  ellipsis?: boolean;\n};\n\nexport const TableCellBase = ({\n  children,\n  className,\n  align = 'start',\n  ellipsis = false,\n}: TableCellBaseProps): JSX.Element => {\n  const classNames = [styles.base, styles.alignRecipe({ align }), className];\n\n  if (ellipsis) {\n    classNames.push(styles.ellipsis);\n  }\n\n  return <div className={cx(...classNames)}>{children}</div>;\n};\n"],"mappings":";;;;AAiBA,IAAa,KAAiB,EAC5B,aACA,cACA,WAAQ,SACR,UAAA,IAAW,SAC0B;CACrC,IAAM,IAAa;EAAC;EAAa,EAAmB,EAAE,UAAO,CAAC;EAAE;EAAU;AAM1E,QAJI,KACF,EAAW,KAAK,EAAgB,EAG3B,kBAAC,OAAD;EAAK,WAAW,EAAG,GAAG,EAAW;EAAG;EAAe,CAAA"}

package/lib/esm/components/data-table/VirtualizedConnectionTable.css.js

@@ -0,0 +1,8 @@
+/* empty css                                   */
+/* empty css                                          */
+//#region src/components/data-table/VirtualizedConnectionTable.css.ts
+var e = "_1ifyzte0 txvbqbuw6 txvbqbl6f txvbqbt6f txvbqbk4x", t = "_1ifyzte1 txvbqbpsf", n = "_1ifyzte2 txvbqbu6f", r = "_1ifyzte3 txvbqbu6f txvbqbc4x";
+//#endregion
+export { t as bodyViewport, r as sentinel, e as singleLineCell, n as spacer };
+
+//# sourceMappingURL=VirtualizedConnectionTable.css.js.map

package/lib/esm/components/data-table/VirtualizedConnectionTable.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualizedConnectionTable.css.js","names":[],"sources":["../../../../src/components/data-table/VirtualizedConnectionTable.css.ts"],"sourcesContent":["import { sprinkles } from '../../theme/sprinkles.css.js';\n\nexport const singleLineCell = sprinkles({\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  minWidth: 0,\n});\n\nexport const bodyViewport = sprinkles({\n  position: 'relative',\n});\n\nexport const spacer = sprinkles({\n  width: 'full',\n});\n\nexport const sentinel = sprinkles({\n  width: 'full',\n  height: 1,\n});\n"],"mappings":""}

package/lib/esm/components/data-table/VirtualizedConnectionTable.js

@@ -0,0 +1,191 @@
+import { cx as e } from "../../theme/tools.js";
+import { useUiTranslation as t } from "../../i18n/useUiTranslation.js";
+import { body as n, cell as r, container as i, emptyRow as a, header as o, headerCell as s, headerRow as c, hideBelowRecipe as l, primaryCell as u, primaryHeaderCell as d, row as f, rowEven as p, rowOdd as m } from "./DataTable.css.js";
+import { bodyViewport as ee, sentinel as te, singleLineCell as ne, spacer as h } from "./VirtualizedConnectionTable.css.js";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { useCallback as v, useEffect as y, useLayoutEffect as b, useMemo as x, useRef as S, useState as re } from "react";
+//#region src/components/data-table/VirtualizedConnectionTable.tsx
+var C = "minmax(0, 1fr)", ie = (e, t) => typeof t == "string" && t !== "" ? { gridTemplateColumns: t } : { gridTemplateColumns: `repeat(${e}, ${C})` }, w = (e) => e == null ? null : l({ minVisibleAt: e }), T = (e) => {
+	let t = e;
+	for (; t != null;) {
+		let { overflowY: e } = window.getComputedStyle(t);
+		if (e === "auto" || e === "scroll" || e === "overlay") return t;
+		t = t.parentElement;
+	}
+	return null;
+}, E = (e, t, n) => Math.min(n, Math.max(t, e)), D = ({ columns: l, rows: C, getRowId: D, emptyState: ae, className: oe, gridTemplateColumns: O, kind: se, classes: k, virtualization: A, infiniteScroll: j, hasNextPage: ce = !1, isLoadingMore: le = !1, onLoadMore: M }) => {
+	let { t: ue } = t(), N = se ?? "default", P = S(null), F = S(null), I = S(null), L = S(null), R = S(null), z = S(!1), B = A?.enabled === !0, V = x(() => {
+		if (!B) return null;
+		let e = A.rowHeightPx;
+		return typeof e == "number" && Number.isFinite(e) && e > 0 ? e : 56;
+	}, [B, A]), H = x(() => {
+		if (!B) return 0;
+		let e = 10, t = A.overscan;
+		return typeof t == "number" && Number.isFinite(t) && (e = t), Math.max(0, e);
+	}, [B, A]), U = j?.thresholdPx ?? 800, W = j?.autoLoad ?? !0, G = j?.enabled === !0, K = G && ce && !le && M != null, q = v(() => {
+		M?.();
+	}, [M]), [de, fe] = re(() => ({
+		startIndex: 0,
+		endIndex: Math.min(C.length, 50)
+	})), J = x(() => ie(l.length, O), [l.length, O]), Y = v((t, n, i) => {
+		let a = D(t, n), o = [f({ kind: N }), k?.row];
+		n % 2 == 0 ? o.push(p({ kind: N }), k?.rowEven) : o.push(m({ kind: N }), k?.rowOdd);
+		let s = { ...J };
+		return typeof i == "number" && (s.height = i), /* @__PURE__ */ g("div", {
+			role: "row",
+			className: e(...o),
+			style: s,
+			children: l.map((n) => {
+				let i = [
+					r({ kind: N }),
+					ne,
+					k?.cell
+				], a = w(n.minVisibleAt);
+				return a != null && i.push(a), n.className != null && i.push(n.className), n.isPrimary && i.push(u, k?.primaryCell), /* @__PURE__ */ g("div", {
+					role: "cell",
+					className: e(...i),
+					children: n.cell(t)
+				}, n.id);
+			})
+		}, a);
+	}, [
+		k,
+		l,
+		D,
+		J,
+		N
+	]), X = v(() => {
+		if (!B) return;
+		let e = V;
+		if (e == null) return;
+		let t = F.current;
+		if (t == null) return;
+		let n = L.current, r = n?.clientHeight ?? window.innerHeight, i = n?.getBoundingClientRect().top ?? 0, a = t.getBoundingClientRect().top - i, o = Math.max(0, -a), s = o + r, c = C.length * e, l = E(s, 0, c), u = E(o, 0, c), d = Math.floor(u / e) - H, f = Math.ceil(l / e) + H, p = E(d, 0, C.length), m = E(f, p, C.length);
+		fe((e) => e.startIndex === p && e.endIndex === m ? e : {
+			startIndex: p,
+			endIndex: m
+		}), W && K && c - l <= U && !z.current && (z.current = !0, q(), window.setTimeout(() => {
+			z.current = !1;
+		}, 250));
+	}, [
+		W,
+		K,
+		B,
+		H,
+		V,
+		C.length,
+		U,
+		q
+	]), Z = v(() => {
+		R.current ??= window.requestAnimationFrame(() => {
+			R.current = null, X();
+		});
+	}, [X]);
+	b(() => {
+		if (!B) return;
+		let e = P.current;
+		e != null && (L.current = T(e), Z());
+	}, [B, Z]), y(() => {
+		if (!B) return;
+		let e = L.current ?? window, t = () => {
+			Z();
+		};
+		return e.addEventListener("scroll", t, { passive: !0 }), window.addEventListener("resize", t), () => {
+			e.removeEventListener("scroll", t), window.removeEventListener("resize", t);
+		};
+	}, [B, Z]), y(() => {
+		if (B || !G || !W || !K) return;
+		let e = I.current;
+		if (e == null) return;
+		let t = L.current, n = new IntersectionObserver((e) => {
+			let [t] = e;
+			t != null && t.isIntersecting && !z.current && (z.current = !0, q(), window.setTimeout(() => {
+				z.current = !1;
+			}, 250));
+		}, {
+			root: t,
+			rootMargin: `0px 0px ${U}px 0px`
+		});
+		return n.observe(e), () => {
+			n.disconnect();
+		};
+	}, [
+		W,
+		K,
+		G,
+		B,
+		U,
+		q
+	]), b(() => {
+		if (B) return;
+		let e = P.current;
+		e != null && (L.current = T(e));
+	}, [B]);
+	let pe = /* @__PURE__ */ g("div", {
+		className: e(o({ kind: N }), k?.header),
+		role: "rowgroup",
+		children: /* @__PURE__ */ g("div", {
+			className: e(c, k?.headerRow),
+			role: "row",
+			style: J,
+			children: l.map((t) => {
+				let n = [s({ kind: N }), k?.headerCell], r = w(t.minVisibleAt);
+				return r != null && n.push(r), t.className != null && n.push(t.className), t.isPrimary && n.push(d, k?.primaryHeaderCell), /* @__PURE__ */ g("div", {
+					role: "columnheader",
+					className: e(...n),
+					children: t.header
+				}, t.id);
+			})
+		})
+	}), Q;
+	if (C.length === 0) Q = /* @__PURE__ */ g("div", {
+		className: e(a, k?.emptyRow),
+		role: "row",
+		children: /* @__PURE__ */ g("div", {
+			role: "cell",
+			children: ae ?? /* @__PURE__ */ g("div", {
+				className: e("ysn8461j txvbqb96 txvbqbv8r txvbqbt5x", k?.emptyCell),
+				children: ue("common.table.empty")
+			})
+		})
+	});
+	else if (B && V != null) {
+		let { startIndex: e, endIndex: t } = de, n = e * V, r = (C.length - t) * V, i = C.slice(e, t);
+		Q = /* @__PURE__ */ _("div", {
+			className: ee,
+			ref: F,
+			children: [
+				/* @__PURE__ */ g("div", {
+					className: h,
+					style: { height: n }
+				}),
+				i.map((t, n) => Y(t, e + n, V)),
+				/* @__PURE__ */ g("div", {
+					className: h,
+					style: { height: r }
+				})
+			]
+		});
+	} else Q = /* @__PURE__ */ g("div", {
+		ref: F,
+		children: C.map((e, t) => Y(e, t, null))
+	});
+	let $ = null;
+	return !B && G && W && ($ = /* @__PURE__ */ g("div", {
+		ref: I,
+		className: te
+	})), /* @__PURE__ */ _("div", {
+		ref: P,
+		className: e(i({ kind: N }), k?.container, oe),
+		role: "table",
+		children: [pe, /* @__PURE__ */ _("div", {
+			className: e(n({ kind: N }), k?.body),
+			role: "rowgroup",
+			children: [Q, $]
+		})]
+	});
+};
+//#endregion
+export { D as VirtualizedConnectionTable };
+
+//# sourceMappingURL=VirtualizedConnectionTable.js.map

package/lib/esm/components/data-table/VirtualizedConnectionTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualizedConnectionTable.js","names":[],"sources":["../../../../src/components/data-table/VirtualizedConnectionTable.tsx"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  type CSSProperties,\n  type JSX,\n} from 'react';\n\nimport type { DataTableBreakpoint } from './tableBreakpoints.js';\nimport type { DataTableColumn, DataTableKind, GetRowId } from './DataTable.js';\nimport * as dataTableStyles from './DataTable.css.js';\nimport * as styles from './VirtualizedConnectionTable.css.js';\n\nimport { cx } from '../../theme/tools.js';\nimport { useUiTranslation } from '../../i18n/useUiTranslation.js';\nimport type { SlotClasses } from '../../styles/slots.js';\n\nexport type VirtualizationConfig = {\n  enabled: boolean;\n  rowHeightPx: number;\n  overscan: number;\n};\n\nexport type InfiniteScrollConfig = {\n  enabled: boolean;\n  thresholdPx?: number;\n  autoLoad?: boolean;\n};\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 VirtualizedConnectionTableProps<Row> = {\n  columns: readonly DataTableColumn<Row>[];\n  rows: readonly Row[];\n  getRowId: GetRowId<Row>;\n  emptyState?: JSX.Element;\n  className?: string;\n  gridTemplateColumns?: string;\n  kind?: DataTableKind;\n  classes?: SlotClasses<DataTableSlot>;\n\n  virtualization?: VirtualizationConfig;\n\n  infiniteScroll?: InfiniteScrollConfig;\n  hasNextPage?: boolean;\n  isLoadingMore?: boolean;\n  onLoadMore?: () => void;\n};\n\nconst DEFAULT_TEMPLATE_CELL = 'minmax(0, 1fr)';\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\nconst getVisibilityClass = (minVisibleAt?: DataTableBreakpoint) => {\n  if (minVisibleAt == null) {\n    return null;\n  }\n  return dataTableStyles.hideBelowRecipe({ minVisibleAt });\n};\n\nconst findScrollParent = (el: HTMLElement | null): HTMLElement | null => {\n  let current: HTMLElement | null = el;\n  while (current != null) {\n    const style = window.getComputedStyle(current);\n    const { overflowY } = style;\n    if (\n      overflowY === 'auto' ||\n      overflowY === 'scroll' ||\n      overflowY === 'overlay'\n    ) {\n      return current;\n    }\n    current = current.parentElement;\n  }\n  return null;\n};\n\ntype VirtualWindow = {\n  startIndex: number;\n  endIndex: number;\n};\n\nconst clamp = (value: number, min: number, max: number): number => {\n  return Math.min(max, Math.max(min, value));\n};\n\nexport const VirtualizedConnectionTable = <Row,>({\n  columns,\n  rows,\n  getRowId,\n  emptyState,\n  className,\n  gridTemplateColumns,\n  kind,\n  classes,\n  virtualization,\n  infiniteScroll,\n  hasNextPage = false,\n  isLoadingMore = false,\n  onLoadMore,\n}: VirtualizedConnectionTableProps<Row>): JSX.Element => {\n  const { t } = useUiTranslation();\n  const resolvedKind: DataTableKind = kind ?? 'default';\n  const containerRef = useRef<HTMLDivElement>(null);\n  const bodyRef = useRef<HTMLDivElement>(null);\n  const sentinelRef = useRef<HTMLDivElement>(null);\n  const scrollParentRef = useRef<HTMLElement | null>(null);\n  const rafRef = useRef<number | null>(null);\n  const loadMoreCooldownRef = useRef(false);\n\n  const isVirtualized = virtualization?.enabled === true;\n  const rowHeightPx = useMemo(() => {\n    if (!isVirtualized) {\n      return null;\n    }\n\n    const configuredRowHeight = virtualization.rowHeightPx;\n    if (\n      typeof configuredRowHeight === 'number' &&\n      Number.isFinite(configuredRowHeight) &&\n      configuredRowHeight > 0\n    ) {\n      return configuredRowHeight;\n    }\n\n    return 56;\n  }, [isVirtualized, virtualization]);\n\n  const overscan = useMemo(() => {\n    if (!isVirtualized) {\n      return 0;\n    }\n\n    let nextOverscan = 10;\n    const configuredOverscan = virtualization.overscan;\n    if (\n      typeof configuredOverscan === 'number' &&\n      Number.isFinite(configuredOverscan)\n    ) {\n      nextOverscan = configuredOverscan;\n    }\n    return Math.max(0, nextOverscan);\n  }, [isVirtualized, virtualization]);\n\n  const thresholdPx = infiniteScroll?.thresholdPx ?? 800;\n  const autoLoad = infiniteScroll?.autoLoad ?? true;\n  const infiniteEnabled = infiniteScroll?.enabled === true;\n\n  const canLoadMore =\n    infiniteEnabled && hasNextPage && !isLoadingMore && onLoadMore != null;\n\n  const triggerLoadMore = useCallback(() => {\n    if (onLoadMore == null) {\n      return;\n    }\n    onLoadMore();\n  }, [onLoadMore]);\n\n  const [windowState, setWindowState] = useState<VirtualWindow>(() => {\n    return { startIndex: 0, endIndex: Math.min(rows.length, 50) };\n  });\n\n  const inlineTemplateStyle = useMemo(() => {\n    return buildInlineTemplate(columns.length, gridTemplateColumns);\n  }, [columns.length, gridTemplateColumns]);\n\n  const renderRow = useCallback(\n    (row: Row, index: number, heightPx?: number | null): JSX.Element => {\n      const rowId = getRowId(row, index);\n      const rowClasses = [\n        dataTableStyles.row({ kind: resolvedKind }),\n        classes?.row,\n      ];\n      if (index % 2 === 0) {\n        rowClasses.push(\n          dataTableStyles.rowEven({ kind: resolvedKind }),\n          classes?.rowEven,\n        );\n      } else {\n        rowClasses.push(\n          dataTableStyles.rowOdd({ kind: resolvedKind }),\n          classes?.rowOdd,\n        );\n      }\n      const rowStyle: CSSProperties = { ...inlineTemplateStyle };\n      if (typeof heightPx === 'number') {\n        rowStyle.height = heightPx;\n      }\n      return (\n        <div\n          key={rowId}\n          role=\"row\"\n          className={cx(...rowClasses)}\n          style={rowStyle}\n        >\n          {columns.map((column) => {\n            const cellClasses = [\n              dataTableStyles.cell({ kind: resolvedKind }),\n              styles.singleLineCell,\n              classes?.cell,\n            ];\n            const visibilityClass = getVisibilityClass(column.minVisibleAt);\n            if (visibilityClass != null) {\n              cellClasses.push(visibilityClass);\n            }\n            if (column.className != null) {\n              cellClasses.push(column.className);\n            }\n            if (column.isPrimary) {\n              cellClasses.push(\n                dataTableStyles.primaryCell,\n                classes?.primaryCell,\n              );\n            }\n            return (\n              <div key={column.id} role=\"cell\" className={cx(...cellClasses)}>\n                {column.cell(row)}\n              </div>\n            );\n          })}\n        </div>\n      );\n    },\n    [classes, columns, getRowId, inlineTemplateStyle, resolvedKind],\n  );\n\n  const computeVirtualWindow = useCallback(() => {\n    if (!isVirtualized) {\n      return;\n    }\n    const height = rowHeightPx;\n    if (height == null) {\n      return;\n    }\n    const bodyEl = bodyRef.current;\n    if (bodyEl == null) {\n      return;\n    }\n\n    const scrollParent = scrollParentRef.current;\n    const viewportHeight = scrollParent?.clientHeight ?? window.innerHeight;\n    const parentRectTop = scrollParent?.getBoundingClientRect().top ?? 0;\n    const bodyRectTop = bodyEl.getBoundingClientRect().top;\n    const relativeTop = bodyRectTop - parentRectTop;\n    const visibleTop = Math.max(0, -relativeTop);\n    const visibleBottom = visibleTop + viewportHeight;\n\n    const totalHeight = rows.length * height;\n    const clampedBottom = clamp(visibleBottom, 0, totalHeight);\n    const clampedTop = clamp(visibleTop, 0, totalHeight);\n\n    const rawStart = Math.floor(clampedTop / height) - overscan;\n    const rawEnd = Math.ceil(clampedBottom / height) + overscan;\n\n    const startIndex = clamp(rawStart, 0, rows.length);\n    const endIndex = clamp(rawEnd, startIndex, rows.length);\n\n    setWindowState((prev) => {\n      if (prev.startIndex === startIndex && prev.endIndex === endIndex) {\n        return prev;\n      }\n      return { startIndex, endIndex };\n    });\n\n    if (\n      autoLoad &&\n      canLoadMore &&\n      totalHeight - clampedBottom <= thresholdPx &&\n      !loadMoreCooldownRef.current\n    ) {\n      loadMoreCooldownRef.current = true;\n      triggerLoadMore();\n      window.setTimeout(() => {\n        loadMoreCooldownRef.current = false;\n      }, 250);\n    }\n  }, [\n    autoLoad,\n    canLoadMore,\n    isVirtualized,\n    overscan,\n    rowHeightPx,\n    rows.length,\n    thresholdPx,\n    triggerLoadMore,\n  ]);\n\n  const scheduleCompute = useCallback(() => {\n    if (rafRef.current != null) {\n      return;\n    }\n    rafRef.current = window.requestAnimationFrame(() => {\n      rafRef.current = null;\n      computeVirtualWindow();\n    });\n  }, [computeVirtualWindow]);\n\n  useLayoutEffect(() => {\n    if (!isVirtualized) {\n      return;\n    }\n    const container = containerRef.current;\n    if (container == null) {\n      return;\n    }\n    scrollParentRef.current = findScrollParent(container);\n    scheduleCompute();\n  }, [isVirtualized, scheduleCompute]);\n\n  useEffect(() => {\n    if (!isVirtualized) {\n      return undefined;\n    }\n    const scrollParent = scrollParentRef.current;\n    const target: HTMLElement | Window = scrollParent ?? window;\n\n    const handler = () => {\n      scheduleCompute();\n    };\n\n    target.addEventListener('scroll', handler, { passive: true });\n    window.addEventListener('resize', handler);\n\n    return () => {\n      target.removeEventListener('scroll', handler);\n      window.removeEventListener('resize', handler);\n    };\n  }, [isVirtualized, scheduleCompute]);\n\n  useEffect(() => {\n    if (isVirtualized) {\n      return undefined;\n    }\n    if (!infiniteEnabled || !autoLoad || !canLoadMore) {\n      return undefined;\n    }\n    const sentinel = sentinelRef.current;\n    if (sentinel == null) {\n      return undefined;\n    }\n\n    const scrollParent = scrollParentRef.current;\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        const [entry] = entries;\n        if (entry == null) {\n          return;\n        }\n\n        if (entry.isIntersecting && !loadMoreCooldownRef.current) {\n          loadMoreCooldownRef.current = true;\n          triggerLoadMore();\n          window.setTimeout(() => {\n            loadMoreCooldownRef.current = false;\n          }, 250);\n        }\n      },\n      {\n        root: scrollParent,\n        rootMargin: `0px 0px ${thresholdPx}px 0px`,\n      },\n    );\n\n    observer.observe(sentinel);\n    return () => {\n      observer.disconnect();\n    };\n  }, [\n    autoLoad,\n    canLoadMore,\n    infiniteEnabled,\n    isVirtualized,\n    thresholdPx,\n    triggerLoadMore,\n  ]);\n\n  useLayoutEffect(() => {\n    if (isVirtualized) {\n      return;\n    }\n    const container = containerRef.current;\n    if (container == null) {\n      return;\n    }\n    scrollParentRef.current = findScrollParent(container);\n  }, [isVirtualized]);\n\n  const headerRow = (\n    <div\n      className={cx(\n        dataTableStyles.header({ kind: resolvedKind }),\n        classes?.header,\n      )}\n      role=\"rowgroup\"\n    >\n      <div\n        className={cx(dataTableStyles.headerRow, classes?.headerRow)}\n        role=\"row\"\n        style={inlineTemplateStyle}\n      >\n        {columns.map((column) => {\n          const headerClasses = [\n            dataTableStyles.headerCell({ kind: resolvedKind }),\n            classes?.headerCell,\n          ];\n          const visibilityClass = getVisibilityClass(column.minVisibleAt);\n          if (visibilityClass != null) {\n            headerClasses.push(visibilityClass);\n          }\n          if (column.className != null) {\n            headerClasses.push(column.className);\n          }\n          if (column.isPrimary) {\n            headerClasses.push(\n              dataTableStyles.primaryHeaderCell,\n              classes?.primaryHeaderCell,\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\n  let bodyRows: JSX.Element;\n  if (rows.length === 0) {\n    bodyRows = (\n      <div\n        className={cx(dataTableStyles.emptyRow, classes?.emptyRow)}\n        role=\"row\"\n      >\n        <div role=\"cell\">\n          {emptyState ?? (\n            <div className={cx(dataTableStyles.emptyCell, classes?.emptyCell)}>\n              {t('common.table.empty')}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  } else if (isVirtualized && rowHeightPx != null) {\n    const { startIndex, endIndex } = windowState;\n    const topSpacerHeight = startIndex * rowHeightPx;\n    const bottomSpacerHeight = (rows.length - endIndex) * rowHeightPx;\n    const slice = rows.slice(startIndex, endIndex);\n    bodyRows = (\n      <div className={styles.bodyViewport} ref={bodyRef}>\n        <div className={styles.spacer} style={{ height: topSpacerHeight }} />\n        {slice.map((row, sliceIndex) => {\n          const absoluteIndex = startIndex + sliceIndex;\n          return renderRow(row, absoluteIndex, rowHeightPx);\n        })}\n        <div className={styles.spacer} style={{ height: bottomSpacerHeight }} />\n      </div>\n    );\n  } else {\n    bodyRows = (\n      <div ref={bodyRef}>\n        {rows.map((row, index) => {\n          return renderRow(row, index, null);\n        })}\n      </div>\n    );\n  }\n\n  let sentinelNode: JSX.Element | null = null;\n  if (!isVirtualized && infiniteEnabled && autoLoad) {\n    sentinelNode = <div ref={sentinelRef} className={styles.sentinel} />;\n  }\n\n  return (\n    <div\n      ref={containerRef}\n      className={cx(\n        dataTableStyles.container({ kind: resolvedKind }),\n        classes?.container,\n        className,\n      )}\n      role=\"table\"\n    >\n      {headerRow}\n      <div\n        className={cx(\n          dataTableStyles.body({ kind: resolvedKind }),\n          classes?.body,\n        )}\n        role=\"rowgroup\"\n      >\n        {bodyRows}\n        {sentinelNode}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/lib/esm/components/data-table/tableBreakpoints.js

@@ -0,0 +1,31 @@
+import { containerQueries as e } from "../../theme/containerQueries.js";
+//#region src/components/data-table/tableBreakpoints.ts
+var t = /\(min-width:\s*(\d+(?:\.\d+)?)px\)/i, n = [
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"xxl"
+];
+function r(e, n) {
+	let r = t.exec(n);
+	if (r == null) throw Error(`[DataTable] Format de media query inattendu pour le point de rupture « ${e} » : ${n}`);
+	let [, i] = r;
+	if (i == null) throw Error(`[DataTable] Impossible d'extraire la valeur numérique pour le point de rupture « ${e} » à partir de la media query : ${n}`);
+	return Number.parseFloat(i);
+}
+function i(t) {
+	let n = e[t];
+	if (n == null) throw Error(`[DataTable] Aucun container query défini pour le point de rupture « ${t} ».`);
+	return n;
+}
+function a() {
+	let e = {};
+	for (let t of n) e[t] = r(t, i(t));
+	return e;
+}
+var o = Object.freeze(a()), s = Object.entries(o).map(([e, t]) => [e, t]);
+//#endregion
+export { o as DATA_TABLE_BREAKPOINTS, s as DATA_TABLE_BREAKPOINT_ENTRIES };
+
+//# sourceMappingURL=tableBreakpoints.js.map