@plumile/ui 0.1.122 → 0.1.130

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

@@ -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

@@ -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":";;;;;AAqFA,IAAM,IAAwB,kBAExB,KAAsB,MACtB,KAAgB,OACX,OAGF,EAAuB,EAAE,iBAAc,CAAC,EAG3C,KACJ,GACA,MAEI,OAAO,KAAwB,YAAY,MAAwB,KAC9D,EAAE,wBAAqB,GAEzB,EACL,qBAAqB,UAAU,EAAY,IAAI,EAAsB,IACtE,EAMU,KAAmB,EAC9B,YACA,SACA,aACA,eACA,eACA,qBACA,mBACA,iBACA,0BACA,wBACA,SACA,YACA,mBACA,oBAAiB,QACjB,aACA,YACA,cACA,mBACA,wBACsC;CACtC,IAAM,EAAE,SAAM,GAAkB,EAC1B,IAA8B,KAAQ,WAExC,IADsB,KAAa,EAAE,qBAAqB;CAE9D,AAAI,KAAkB,SACpB,IAAiB,KAAA;CAEnB,IAAM,IACJ,kBAAC,OAAD;EAAK,WAAW,EAAG,GAAkB,GAAS,UAAU;YACrD,EAAE,qBAAqB;EACpB,CAAA,EAEF,IAAqB,KAAc,GACnC,IAAY,EAAK,WAAW,GAC5B,IAAyB,MAAmB,aAE9C;CACJ,AAAI,MACF,IAAsB,EACpB,EAAQ,QACR,EACD;CAEH,IAAI,IAAmC;CACvC,AAAI,GAAgB,WAAW,OAC7B,IAAoB;CAEtB,IAAI;CACJ,AAAI,GAAgB,aAAa,SAC/B,IAAc,EAAE,KAAK,EAAe,WAAW;CAIjD,IAAM,IAA6B,CACjC,EAAqB,EAAE,SAFiB,KAAW,WAEF,CAAC,CACnD;CACD,AAAI,KAAyB,QAC3B,EAAiB,KAAK,EAAsB;CAG9C,IAAI;CACJ,AAOE,IAPE,IAEA,kBAAC,OAAD;EAAK,WAAW,EAAG,GAAiB,GAAS,SAAS;EAAE,MAAK;YAC3D,kBAAC,OAAD;GAAK,MAAK;aAAQ;GAAyB,CAAA;EACvC,CAAA,GAIN,kBAAA,IAAA,EAAA,UACG,EAAK,KAAK,GAAK,MAAU;EACxB,IAAM,IAAQ,EAAS,GAAK,EAAM,EAC5B,IAAa,CAAC,GAAW,EAAE,MAAM,GAAc,CAAC,EAAE,GAAS,IAAI,EAC/D,IAAQ,IAAW,GAAK,EAAM;EAIpC,AAHI,KAAS,QACX,EAAW,KAAK,EAAsB,EAAE,UAAO,CAAC,CAAC,EAE/C,IAAQ,KAAM,IAChB,EAAW,KACT,EAAe,EAAE,MAAM,GAAc,CAAC,EACtC,GAAS,QACV,GAED,EAAW,KACT,EAAc,EAAE,MAAM,GAAc,CAAC,EACrC,GAAS,OACV;EAEH,KAAK,IAAM,KAAe,GACxB,EAAW,KAAK,EAAY;EAG9B,IAAI,KAAgB,MAAM;GACxB,IAAM,IAAc,EAAa,GAAK,EAAM;GAC5C,AAAI,KAAe,QACjB,EAAW,KAAK,EAAY;;EAIhC,OACE,kBAAC,OAAD;GAEE,MAAK;GACL,WAAW,EAAG,GAAG,EAAW;GAC5B,OAAO;aAEN,EAAQ,KAAK,MAAW;IACvB,IAAM,IAAc,CAClB,EAAY,EAAE,MAAM,GAAc,CAAC,EACnC,GAAS,KACV,EACK,IAAkB,EAAmB,EAAO,aAAa;IAY/D,AAVI,KAAmB,QACrB,EAAY,KAAK,EAAgB,EAG/B,EAAO,aAAa,QACtB,EAAY,KAAK,EAAO,UAAU,EAEhC,EAAO,aACT,EAAY,KAAK,GAAoB,GAAS,YAAY,EAExD,EAAO,SAAS,QAClB,EAAY,KAAK,EAAmB,EAAE,OAAO,EAAO,OAAO,CAAC,CAAC;IAG/D,IAAM,IAAU,EAAO,KAAK,EAAI;IAEhC,OACE,kBAAC,OAAD;KAEE,MAAK;KACL,WAAW,EAAG,GAAG,EAAY;eAE5B;KACG,EALC,EAAO,GAKR;KAER;GACE,EAtCC,EAsCD;GAER,EACD,CAAA;CAIP,IAAI,IAA6C,MAC7C,IAAwC;CAM5C,OALI,MACF,IAA8B,GAC9B,IAAyB,IAIzB,kBAAC,OAAD;EACE,WAAW,EACT,EAAiB,EAAE,MAAM,GAAc,CAAC,EACxC,GACA,GAAS,WACT,GACD;EACD,MAAK;EACL,cAAY;EACZ,mBAAiB;EACjB,oBAAkB;YAVpB,CAYE,kBAAC,OAAD;GACE,WAAW,EACT,EAAc,EAAE,MAAM,GAAc,CAAC,EACrC,GACA,GAAS,QACT,GACD;GACD,OAAO;GACP,MAAK;aAEL,kBAAC,OAAD;IACE,WAAW,EACT,GACA,GAAS,WACT,GAAG,EACJ;IACD,MAAK;IACL,OAAO;cAEN,EAAQ,KAAK,MAAW;KACvB,IAAM,IAAgB,CACpB,EAAkB,EAAE,MAAM,GAAc,CAAC,EACzC,GAAS,WACV,EACK,IAAkB,EAAmB,EAAO,aAAa;KAkB/D,OAjBI,KAAmB,QACrB,EAAc,KAAK,EAAgB,EAGjC,EAAO,aAAa,QACtB,EAAc,KAAK,EAAO,UAAU,EAElC,EAAO,aACT,EAAc,KACZ,GACA,GAAS,kBACV,EAEC,EAAO,SAAS,QAClB,EAAc,KAAK,EAAmB,EAAE,OAAO,EAAO,OAAO,CAAC,CAAC,EAI/D,kBAAC,OAAD;MAEE,MAAK;MACL,WAAW,EAAG,GAAG,EAAc;gBAE9B,EAAO;MACJ,EALC,EAAO,GAKR;MAER;IACE,CAAA;GACF,CAAA,EAEN,kBAAC,OAAD;GACE,WAAW,EACT,EAAY,EAAE,MAAM,GAAc,CAAC,EACnC,GACA,GAAS,MACT,GACD;GACD,MAAK;GACL,oBAAkB;aARpB,CAUG,GACA,EACG;KACF;;GAIG,IAAS;CACpB;CACA;CACD"}
+{"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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"}

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

@@ -1,14 +1,16 @@
 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, emptyRow as c, header as l, headerCell as u, headerRow as ee, hideBelowRecipe as d, primaryCell as te, primaryHeaderCell as ne, row as re, rowEven as ie, rowOdd as ae } from "./DataTable.css.js";
-import { bodyViewport as oe, sentinel as se, singleLineCell as ce, spacer as f } from "./VirtualizedConnectionTable.css.js";
-import { useCallback as p, useEffect as le, useLayoutEffect as ue, useMemo as m, useRef as h, useState as de } from "react";
-import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { buildDataTableInlineTemplate as oe } from "../../internal/data-table/layout.js";
+import { bodyViewport as se, sentinel as ce, singleLineCell as le, spacer as f } from "./VirtualizedConnectionTable.css.js";
+import { clamp as ue, computeVirtualWindowBounds as de, isVerticallyScrollable as p, shouldTriggerInfiniteLoad as fe } from "../../internal/data-table/virtualization.js";
+import { useCallback as m, useEffect as h, useLayoutEffect as g, useMemo as _, useRef as v, useState as pe } from "react";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
 //#region src/components/data-table/VirtualizedConnectionTable.tsx
-var v = "minmax(0, 1fr)", y = (e, t) => typeof t == "string" && t !== "" ? { gridTemplateColumns: t } : { gridTemplateColumns: `repeat(${e}, ${v})` }, b = (e) => e == null ? null : d({ minVisibleAt: e }), x = ({ overflowY: e, scrollHeight: t, clientHeight: n }) => e !== "auto" && e !== "scroll" && e !== "overlay" ? !1 : t > n + 1, S = (e) => {
+var x = (e) => e == null ? null : d({ minVisibleAt: e }), S = (e) => {
 	let t = e;
 	for (; t != null;) {
-		if (x({
+		if (p({
 			overflowY: window.getComputedStyle(t).overflowY,
 			scrollHeight: t.scrollHeight,
 			clientHeight: t.clientHeight
@@ -16,43 +18,37 @@ var v = "minmax(0, 1fr)", y = (e, t) => typeof t == "string" && t !== "" ? { gri
 		t = t.parentElement;
 	}
 	return null;
-}, C = (e, t, n) => Math.min(n, Math.max(t, e)), fe = ({ autoLoad: e, canLoadMore: t, totalHeight: n, visibleBottom: r, thresholdPx: i, isCoolingDown: a }) => !e || !t || a ? !1 : n - r <= i, pe = ({ rowCount: e, rowHeightPx: t, overscan: n, visibleTop: r, visibleBottom: i }) => {
-	let a = e * t, o = C(i, 0, a), s = C(r, 0, a), c = Math.floor(s / t) - n, l = Math.ceil(o / t) + n, u = C(c, 0, e);
-	return {
-		startIndex: u,
-		endIndex: C(l, u, e)
-	};
-}, me = ({ columns: d, rows: v, getRowId: x, emptyState: me, className: he, gridTemplateColumns: ge, kind: _e, classes: w, bodyScrollMode: T = "page", virtualization: E, infiniteScroll: D, hasNextPage: ve = !1, isLoadingMore: ye = !1, onLoadMore: O, ariaLabel: be, ariaLabelledBy: k }) => {
+}, C = ({ columns: d, rows: p, getRowId: C, emptyState: me, className: he, gridTemplateColumns: ge, kind: _e, classes: w, bodyScrollMode: T = "page", virtualization: E, infiniteScroll: D, hasNextPage: ve = !1, isLoadingMore: ye = !1, onLoadMore: O, ariaLabel: be, ariaLabelledBy: k }) => {
 	let { t: A } = t(), j = _e ?? "default", M = be ?? A("common.table.label");
 	k != null && (M = void 0);
-	let N = h(null), P = h(null), F = h(null), I = h(null), L = h(null), R = h(null), z = h(!1), B = E?.enabled === !0, V = m(() => {
+	let N = v(null), P = v(null), F = v(null), I = v(null), L = v(null), R = v(null), z = v(!1), B = E?.enabled === !0, V = _(() => {
 		if (!B) return null;
 		let e = E.rowHeightPx;
 		return typeof e == "number" && Number.isFinite(e) && e > 0 ? e : 56;
-	}, [B, E]), H = m(() => {
+	}, [B, E]), H = _(() => {
 		if (!B) return 0;
 		let e = 10, t = E.overscan;
 		return typeof t == "number" && Number.isFinite(t) && (e = t), Math.max(0, e);
-	}, [B, E]), U = D?.thresholdPx ?? 800, W = D?.autoLoad ?? !0, G = D?.enabled === !0, K = T === "contained", q = G && ve && !ye && O != null, J = p(() => {
+	}, [B, E]), U = D?.thresholdPx ?? 800, W = D?.autoLoad ?? !0, G = D?.enabled === !0, K = T === "contained", q = G && ve && !ye && O != null, J = m(() => {
 		O?.();
-	}, [O]), [xe, Se] = de(() => ({
+	}, [O]), [xe, Se] = pe(() => ({
 		startIndex: 0,
-		endIndex: Math.min(v.length, 50)
-	})), Y = m(() => y(d.length, ge), [d.length, ge]), Ce = p((t, r, i) => {
-		let o = x(t, r), s = [re({ kind: j }), w?.row];
+		endIndex: Math.min(p.length, 50)
+	})), Y = _(() => oe(d.length, ge), [d.length, ge]), Ce = m((t, r, i) => {
+		let o = C(t, r), s = [re({ kind: j }), w?.row];
 		r % 2 == 0 ? s.push(ie({ kind: j }), w?.rowEven) : s.push(ae({ kind: j }), w?.rowOdd);
 		let c = { ...Y };
-		return typeof i == "number" && (c.height = i), /* @__PURE__ */ g("div", {
+		return typeof i == "number" && (c.height = i), /* @__PURE__ */ y("div", {
 			role: "row",
 			className: e(...s),
 			style: c,
 			children: d.map((r) => {
 				let i = [
 					a({ kind: j }),
-					ce,
+					le,
 					w?.cell
-				], o = b(r.minVisibleAt);
-				return o != null && i.push(o), r.className != null && i.push(r.className), r.isPrimary && i.push(te, w?.primaryCell), r.align != null && i.push(n({ align: r.align })), /* @__PURE__ */ g("div", {
+				], o = x(r.minVisibleAt);
+				return o != null && i.push(o), r.className != null && i.push(r.className), r.isPrimary && i.push(te, w?.primaryCell), r.align != null && i.push(n({ align: r.align })), /* @__PURE__ */ y("div", {
 					role: "cell",
 					className: e(...i),
 					children: r.cell(t)
@@ -62,10 +58,10 @@ var v = "minmax(0, 1fr)", y = (e, t) => typeof t == "string" && t !== "" ? { gri
 	}, [
 		w,
 		d,
-		x,
+		C,
 		Y,
 		j
-	]), X = p(() => {
+	]), X = m(() => {
 		if (!B) return;
 		let e = V;
 		if (e == null) return;
@@ -77,8 +73,8 @@ var v = "minmax(0, 1fr)", y = (e, t) => typeof t == "string" && t !== "" ? { gri
 			let e = r?.getBoundingClientRect().top ?? 0, n = t.getBoundingClientRect().top - e;
 			a = Math.max(0, -n);
 		}
-		let o = a + i, s = v.length * e, c = C(o, 0, s), { startIndex: l, endIndex: u } = pe({
-			rowCount: v.length,
+		let o = a + i, s = p.length * e, c = ue(o, 0, s), { startIndex: l, endIndex: u } = de({
+			rowCount: p.length,
 			rowHeightPx: e,
 			overscan: H,
 			visibleTop: a,
@@ -104,15 +100,15 @@ var v = "minmax(0, 1fr)", y = (e, t) => typeof t == "string" && t !== "" ? { gri
 		B,
 		H,
 		V,
-		v.length,
+		p.length,
 		U,
 		J
-	]), Z = p(() => {
+	]), Z = m(() => {
 		R.current ??= window.requestAnimationFrame(() => {
 			R.current = null, X();
 		});
 	}, [X]);
-	ue(() => {
+	g(() => {
 		if (!B) return;
 		let e = N.current;
 		e != null && (K ? L.current = P.current : L.current = S(e), Z());
@@ -120,7 +116,7 @@ var v = "minmax(0, 1fr)", y = (e, t) => typeof t == "string" && t !== "" ? { gri
 		K,
 		B,
 		Z
-	]), le(() => {
+	]), h(() => {
 		if (!B) return;
 		let e = L.current ?? window, t = () => {
 			Z();
@@ -128,7 +124,7 @@ var v = "minmax(0, 1fr)", y = (e, t) => typeof t == "string" && t !== "" ? { gri
 		return e.addEventListener("scroll", t, { passive: !0 }), window.addEventListener("resize", t), () => {
 			e.removeEventListener("scroll", t), window.removeEventListener("resize", t);
 		};
-	}, [B, Z]), le(() => {
+	}, [B, Z]), h(() => {
 		if (B || !G || !W || !q) return;
 		let e = I.current;
 		if (e == null) return;
@@ -151,21 +147,21 @@ var v = "minmax(0, 1fr)", y = (e, t) => typeof t == "string" && t !== "" ? { gri
 		B,
 		U,
 		J
-	]), ue(() => {
+	]), g(() => {
 		if (B) return;
 		let e = N.current;
 		e != null && (K ? L.current = P.current : L.current = S(e));
 	}, [K, B]);
-	let we = /* @__PURE__ */ g("div", {
+	let we = /* @__PURE__ */ y("div", {
 		className: e(l({ kind: j }), w?.header),
 		role: "rowgroup",
-		children: /* @__PURE__ */ g("div", {
+		children: /* @__PURE__ */ y("div", {
 			className: e(ee, w?.headerRow),
 			role: "row",
 			style: Y,
 			children: d.map((t) => {
-				let r = [u({ kind: j }), w?.headerCell], i = b(t.minVisibleAt);
-				return i != null && r.push(i), t.className != null && r.push(t.className), t.isPrimary && r.push(ne, w?.primaryHeaderCell), t.align != null && r.push(n({ align: t.align })), /* @__PURE__ */ g("div", {
+				let r = [u({ kind: j }), w?.headerCell], i = x(t.minVisibleAt);
+				return i != null && r.push(i), t.className != null && r.push(t.className), t.isPrimary && r.push(ne, w?.primaryHeaderCell), t.align != null && r.push(n({ align: t.align })), /* @__PURE__ */ y("div", {
 					role: "columnheader",
 					className: e(...r),
 					children: t.header
@@ -173,52 +169,52 @@ var v = "minmax(0, 1fr)", y = (e, t) => typeof t == "string" && t !== "" ? { gri
 			})
 		})
 	}), Q;
-	if (v.length === 0) Q = /* @__PURE__ */ g("div", {
+	if (p.length === 0) Q = /* @__PURE__ */ y("div", {
 		className: e(c, w?.emptyRow),
 		role: "row",
-		children: /* @__PURE__ */ g("div", {
+		children: /* @__PURE__ */ y("div", {
 			role: "cell",
-			children: me ?? /* @__PURE__ */ g("div", {
+			children: me ?? /* @__PURE__ */ y("div", {
 				className: e("ysn84624 txvbqb9w txvbqb19cb txvbqb16fa", w?.emptyCell),
 				children: A("common.table.empty")
 			})
 		})
 	});
 	else if (B && V != null) {
-		let { startIndex: e, endIndex: t } = xe, n = e * V, r = (v.length - t) * V, i = v.slice(e, t);
-		Q = /* @__PURE__ */ _("div", {
-			className: oe,
+		let { startIndex: e, endIndex: t } = xe, n = e * V, r = (p.length - t) * V, i = p.slice(e, t);
+		Q = /* @__PURE__ */ b("div", {
+			className: se,
 			ref: F,
 			children: [
-				/* @__PURE__ */ g("div", {
+				/* @__PURE__ */ y("div", {
 					className: f,
 					style: { height: n }
 				}),
 				i.map((t, n) => Ce(t, e + n, V)),
-				/* @__PURE__ */ g("div", {
+				/* @__PURE__ */ y("div", {
 					className: f,
 					style: { height: r }
 				})
 			]
 		});
-	} else Q = /* @__PURE__ */ g("div", {
+	} else Q = /* @__PURE__ */ y("div", {
 		ref: F,
-		children: v.map((e, t) => Ce(e, t, null))
+		children: p.map((e, t) => Ce(e, t, null))
 	});
 	let Te = null;
-	!B && G && W && (Te = /* @__PURE__ */ g("div", {
+	!B && G && W && (Te = /* @__PURE__ */ y("div", {
 		ref: I,
-		className: se
+		className: ce
 	}));
 	let Ee = null, $ = null;
-	return K && (Ee = s, $ = i), /* @__PURE__ */ _("div", {
+	return K && (Ee = s, $ = i), /* @__PURE__ */ b("div", {
 		ref: N,
 		className: e(o({ kind: j }), Ee, w?.container, he),
 		role: "table",
 		"aria-label": M,
 		"aria-labelledby": k,
 		"data-scroll-mode": T,
-		children: [we, /* @__PURE__ */ _("div", {
+		children: [we, /* @__PURE__ */ b("div", {
 			ref: P,
 			className: e(r({ kind: j }), $, w?.body),
 			role: "rowgroup",
@@ -226,16 +222,8 @@ var v = "minmax(0, 1fr)", y = (e, t) => typeof t == "string" && t !== "" ? { gri
 			children: [Q, Te]
 		})]
 	});
-}, he = {
-	buildInlineTemplate: y,
-	getVisibilityClass: b,
-	isVerticallyScrollable: x,
-	findScrollParent: S,
-	clamp: C,
-	shouldTriggerInfiniteLoad: fe,
-	computeVirtualWindowBounds: pe
 };
 //#endregion
-export { me as VirtualizedConnectionTable, he as __test };
+export { C as VirtualizedConnectionTable };
 
 //# sourceMappingURL=VirtualizedConnectionTable.js.map

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

@@ -1 +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 {\n  DataTableBodyScrollMode,\n  DataTableColumn,\n  DataTableKind,\n  GetRowId,\n} 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  bodyScrollMode?: DataTableBodyScrollMode;\n\n  virtualization?: VirtualizationConfig;\n\n  infiniteScroll?: InfiniteScrollConfig;\n  hasNextPage?: boolean;\n  isLoadingMore?: boolean;\n  onLoadMore?: () => void;\n  ariaLabel?: string;\n  ariaLabelledBy?: string;\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 isVerticallyScrollable = ({\n  overflowY,\n  scrollHeight,\n  clientHeight,\n}: {\n  overflowY: string;\n  scrollHeight: number;\n  clientHeight: number;\n}): boolean => {\n  if (\n    overflowY !== 'auto' &&\n    overflowY !== 'scroll' &&\n    overflowY !== 'overlay'\n  ) {\n    return false;\n  }\n  return scrollHeight > clientHeight + 1;\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    if (\n      isVerticallyScrollable({\n        overflowY: style.overflowY,\n        scrollHeight: current.scrollHeight,\n        clientHeight: current.clientHeight,\n      })\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\ntype ComputeVirtualWindowInput = {\n  rowCount: number;\n  rowHeightPx: number;\n  overscan: number;\n  visibleTop: number;\n  visibleBottom: number;\n};\n\ntype ShouldTriggerInfiniteLoadInput = {\n  autoLoad: boolean;\n  canLoadMore: boolean;\n  totalHeight: number;\n  visibleBottom: number;\n  thresholdPx: number;\n  isCoolingDown: boolean;\n};\n\nconst clamp = (value: number, min: number, max: number): number => {\n  return Math.min(max, Math.max(min, value));\n};\n\nconst shouldTriggerInfiniteLoad = ({\n  autoLoad,\n  canLoadMore,\n  totalHeight,\n  visibleBottom,\n  thresholdPx,\n  isCoolingDown,\n}: ShouldTriggerInfiniteLoadInput): boolean => {\n  if (!autoLoad || !canLoadMore || isCoolingDown) {\n    return false;\n  }\n  return totalHeight - visibleBottom <= thresholdPx;\n};\n\nconst computeVirtualWindowBounds = ({\n  rowCount,\n  rowHeightPx,\n  overscan,\n  visibleTop,\n  visibleBottom,\n}: ComputeVirtualWindowInput): VirtualWindow => {\n  const totalHeight = rowCount * rowHeightPx;\n  const clampedBottom = clamp(visibleBottom, 0, totalHeight);\n  const clampedTop = clamp(visibleTop, 0, totalHeight);\n\n  const rawStart = Math.floor(clampedTop / rowHeightPx) - overscan;\n  const rawEnd = Math.ceil(clampedBottom / rowHeightPx) + overscan;\n\n  const startIndex = clamp(rawStart, 0, rowCount);\n  const endIndex = clamp(rawEnd, startIndex, rowCount);\n\n  return { startIndex, endIndex };\n};\n\nexport const VirtualizedConnectionTable = <Row,>({\n  columns,\n  rows,\n  getRowId,\n  emptyState,\n  className,\n  gridTemplateColumns,\n  kind,\n  classes,\n  bodyScrollMode = 'page',\n  virtualization,\n  infiniteScroll,\n  hasNextPage = false,\n  isLoadingMore = false,\n  onLoadMore,\n  ariaLabel,\n  ariaLabelledBy,\n}: VirtualizedConnectionTableProps<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 containerRef = useRef<HTMLDivElement>(null);\n  const bodyScrollerRef = 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  const hasContainedBodyScroll = bodyScrollMode === 'contained';\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            if (column.align != null) {\n              cellClasses.push(\n                dataTableStyles.alignRecipe({ align: column.align }),\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 bodyScroller = bodyScrollerRef.current;\n    const scrollParent = scrollParentRef.current;\n    let viewportHeight = scrollParent?.clientHeight ?? window.innerHeight;\n    let visibleTop = 0;\n    if (hasContainedBodyScroll && bodyScroller != null) {\n      viewportHeight = bodyScroller.clientHeight;\n      visibleTop = bodyScroller.scrollTop;\n    } else {\n      const parentRectTop = scrollParent?.getBoundingClientRect().top ?? 0;\n      const bodyRectTop = bodyEl.getBoundingClientRect().top;\n      const relativeTop = bodyRectTop - parentRectTop;\n      visibleTop = Math.max(0, -relativeTop);\n    }\n    const visibleBottom = visibleTop + viewportHeight;\n\n    const totalHeight = rows.length * height;\n    const clampedBottom = clamp(visibleBottom, 0, totalHeight);\n    const { startIndex, endIndex } = computeVirtualWindowBounds({\n      rowCount: rows.length,\n      rowHeightPx: height,\n      overscan,\n      visibleTop,\n      visibleBottom,\n    });\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      shouldTriggerInfiniteLoad({\n        autoLoad,\n        canLoadMore,\n        totalHeight,\n        visibleBottom: clampedBottom,\n        thresholdPx,\n        isCoolingDown: loadMoreCooldownRef.current,\n      })\n    ) {\n      loadMoreCooldownRef.current = true;\n      triggerLoadMore();\n      window.setTimeout(() => {\n        loadMoreCooldownRef.current = false;\n      }, 250);\n    }\n  }, [\n    autoLoad,\n    canLoadMore,\n    hasContainedBodyScroll,\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    if (hasContainedBodyScroll) {\n      scrollParentRef.current = bodyScrollerRef.current;\n    } else {\n      scrollParentRef.current = findScrollParent(container);\n    }\n    scheduleCompute();\n  }, [hasContainedBodyScroll, 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    if (hasContainedBodyScroll) {\n      scrollParentRef.current = bodyScrollerRef.current;\n    } else {\n      scrollParentRef.current = findScrollParent(container);\n    }\n  }, [hasContainedBodyScroll, 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          if (column.align != null) {\n            headerClasses.push(\n              dataTableStyles.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\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  let containedContainerClassName: string | null = null;\n  let containedBodyClassName: string | null = null;\n  if (hasContainedBodyScroll) {\n    containedContainerClassName = dataTableStyles.containerWithContainedBody;\n    containedBodyClassName = dataTableStyles.bodyContained;\n  }\n\n  return (\n    <div\n      ref={containerRef}\n      className={cx(\n        dataTableStyles.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      {headerRow}\n      <div\n        ref={bodyScrollerRef}\n        className={cx(\n          dataTableStyles.body({ kind: resolvedKind }),\n          containedBodyClassName,\n          classes?.body,\n        )}\n        role=\"rowgroup\"\n        data-scroll-mode={bodyScrollMode}\n      >\n        {bodyRows}\n        {sentinelNode}\n      </div>\n    </div>\n  );\n};\n\nexport const __test = {\n  buildInlineTemplate,\n  getVisibilityClass,\n  isVerticallyScrollable,\n  findScrollParent,\n  clamp,\n  shouldTriggerInfiniteLoad,\n  computeVirtualWindowBounds,\n} as const;\n"],"mappings":";;;;;;;AAyEA,IAAM,IAAwB,kBAExB,KACJ,GACA,MAEI,OAAO,KAAwB,YAAY,MAAwB,KAC9D,EAAE,wBAAqB,GAEzB,EACL,qBAAqB,UAAU,EAAY,IAAI,EAAsB,IACtE,EAGG,KAAsB,MACtB,KAAgB,OACX,OAEF,EAAgC,EAAE,iBAAc,CAAC,EAGpD,KAA0B,EAC9B,cACA,iBACA,sBAOE,MAAc,UACd,MAAc,YACd,MAAc,YAEP,KAEF,IAAe,IAAe,GAGjC,KAAoB,MAA+C;CACvE,IAAI,IAA8B;CAClC,OAAO,KAAW,OAAM;EAEtB,IACE,EAAuB;GACrB,WAHU,OAAO,iBAAiB,EAGvB,CAAM;GACjB,cAAc,EAAQ;GACtB,cAAc,EAAQ;GACvB,CAAC,EAEF,OAAO;EAET,IAAU,EAAQ;;CAEpB,OAAO;GAyBH,KAAS,GAAe,GAAa,MAClC,KAAK,IAAI,GAAK,KAAK,IAAI,GAAK,EAAM,CAAC,EAGtC,MAA6B,EACjC,aACA,gBACA,gBACA,kBACA,gBACA,uBAEI,CAAC,KAAY,CAAC,KAAe,IACxB,KAEF,IAAc,KAAiB,GAGlC,MAA8B,EAClC,aACA,gBACA,aACA,eACA,uBAC8C;CAC9C,IAAM,IAAc,IAAW,GACzB,IAAgB,EAAM,GAAe,GAAG,EAAY,EACpD,IAAa,EAAM,GAAY,GAAG,EAAY,EAE9C,IAAW,KAAK,MAAM,IAAa,EAAY,GAAG,GAClD,IAAS,KAAK,KAAK,IAAgB,EAAY,GAAG,GAElD,IAAa,EAAM,GAAU,GAAG,EAAS;CAG/C,OAAO;EAAE;EAAY,UAFJ,EAAM,GAAQ,GAAY,EAEtB;EAAU;GAGpB,MAAoC,EAC/C,YACA,SACA,aACA,gBACA,eACA,yBACA,UACA,YACA,oBAAiB,QACjB,mBACA,mBACA,kBAAc,IACd,oBAAgB,IAChB,eACA,eACA,wBACuD;CACvD,IAAM,EAAE,SAAM,GAAkB,EAC1B,IAA8B,MAAQ,WAExC,IADsB,MAAa,EAAE,qBAAqB;CAE9D,AAAI,KAAkB,SACpB,IAAiB,KAAA;CAEnB,IAAM,IAAe,EAAuB,KAAK,EAC3C,IAAkB,EAAuB,KAAK,EAC9C,IAAU,EAAuB,KAAK,EACtC,IAAc,EAAuB,KAAK,EAC1C,IAAkB,EAA2B,KAAK,EAClD,IAAS,EAAsB,KAAK,EACpC,IAAsB,EAAO,GAAM,EAEnC,IAAgB,GAAgB,YAAY,IAC5C,IAAc,QAAc;EAChC,IAAI,CAAC,GACH,OAAO;EAGT,IAAM,IAAsB,EAAe;EAS3C,OAPE,OAAO,KAAwB,YAC/B,OAAO,SAAS,EAAoB,IACpC,IAAsB,IAEf,IAGF;IACN,CAAC,GAAe,EAAe,CAAC,EAE7B,IAAW,QAAc;EAC7B,IAAI,CAAC,GACH,OAAO;EAGT,IAAI,IAAe,IACb,IAAqB,EAAe;EAO1C,OALE,OAAO,KAAuB,YAC9B,OAAO,SAAS,EAAmB,KAEnC,IAAe,IAEV,KAAK,IAAI,GAAG,EAAa;IAC/B,CAAC,GAAe,EAAe,CAAC,EAE7B,IAAc,GAAgB,eAAe,KAC7C,IAAW,GAAgB,YAAY,IACvC,IAAkB,GAAgB,YAAY,IAC9C,IAAyB,MAAmB,aAE5C,IACJ,KAAmB,MAAe,CAAC,MAAiB,KAAc,MAE9D,IAAkB,QAAkB;EACpC,KAGQ;IACX,CAAC,EAAW,CAAC,EAEV,CAAC,IAAa,MAAkB,UAC7B;EAAE,YAAY;EAAG,UAAU,KAAK,IAAI,EAAK,QAAQ,GAAG;EAAE,EAC7D,EAEI,IAAsB,QACnB,EAAoB,EAAQ,QAAQ,GAAoB,EAC9D,CAAC,EAAQ,QAAQ,GAAoB,CAAC,EAEnC,KAAY,GACf,GAAU,GAAe,MAA0C;EAClE,IAAM,IAAQ,EAAS,GAAK,EAAM,EAC5B,IAAa,CACjB,GAAoB,EAAE,MAAM,GAAc,CAAC,EAC3C,GAAS,IACV;EACD,AAAI,IAAQ,KAAM,IAChB,EAAW,KACT,GAAwB,EAAE,MAAM,GAAc,CAAC,EAC/C,GAAS,QACV,GAED,EAAW,KACT,GAAuB,EAAE,MAAM,GAAc,CAAC,EAC9C,GAAS,OACV;EAEH,IAAM,IAA0B,EAAE,GAAG,GAAqB;EAI1D,OAHI,OAAO,KAAa,aACtB,EAAS,SAAS,IAGlB,kBAAC,OAAD;GAEE,MAAK;GACL,WAAW,EAAG,GAAG,EAAW;GAC5B,OAAO;aAEN,EAAQ,KAAK,MAAW;IACvB,IAAM,IAAc;KAClB,EAAqB,EAAE,MAAM,GAAc,CAAC;KAC5C;KACA,GAAS;KACV,EACK,IAAkB,EAAmB,EAAO,aAAa;IAkB/D,OAjBI,KAAmB,QACrB,EAAY,KAAK,EAAgB,EAE/B,EAAO,aAAa,QACtB,EAAY,KAAK,EAAO,UAAU,EAEhC,EAAO,aACT,EAAY,KACV,IACA,GAAS,YACV,EAEC,EAAO,SAAS,QAClB,EAAY,KACV,EAA4B,EAAE,OAAO,EAAO,OAAO,CAAC,CACrD,EAGD,kBAAC,OAAD;KAAqB,MAAK;KAAO,WAAW,EAAG,GAAG,EAAY;eAC3D,EAAO,KAAK,EAAI;KACb,EAFI,EAAO,GAEX;KAER;GACE,EAnCC,EAmCD;IAGV;EAAC;EAAS;EAAS;EAAU;EAAqB;EAAa,CAChE,EAEK,IAAuB,QAAkB;EAC7C,IAAI,CAAC,GACH;EAEF,IAAM,IAAS;EACf,IAAI,KAAU,MACZ;EAEF,IAAM,IAAS,EAAQ;EACvB,IAAI,KAAU,MACZ;EAGF,IAAM,IAAe,EAAgB,SAC/B,IAAe,EAAgB,SACjC,IAAiB,GAAc,gBAAgB,OAAO,aACtD,IAAa;EACjB,IAAI,KAA0B,KAAgB,MAE5C,AADA,IAAiB,EAAa,cAC9B,IAAa,EAAa;OACrB;GACL,IAAM,IAAgB,GAAc,uBAAuB,CAAC,OAAO,GAE7D,IADc,EAAO,uBAAuB,CAAC,MACjB;GAClC,IAAa,KAAK,IAAI,GAAG,CAAC,EAAY;;EAExC,IAAM,IAAgB,IAAa,GAE7B,IAAc,EAAK,SAAS,GAC5B,IAAgB,EAAM,GAAe,GAAG,EAAY,EACpD,EAAE,eAAY,gBAAa,GAA2B;GAC1D,UAAU,EAAK;GACf,aAAa;GACb;GACA;GACA;GACD,CAAC;EASF,AAPA,IAAgB,MACV,EAAK,eAAe,KAAc,EAAK,aAAa,IAC/C,IAEF;GAAE;GAAY;GAAU,CAC/B,EAGA,GAA0B;GACxB;GACA;GACA;GACA,eAAe;GACf;GACA,eAAe,EAAoB;GACpC,CAAC,KAEF,EAAoB,UAAU,IAC9B,GAAiB,EACjB,OAAO,iBAAiB;GACtB,EAAoB,UAAU;KAC7B,IAAI;IAER;EACD;EACA;EACA;EACA;EACA;EACA;EACA,EAAK;EACL;EACA;EACD,CAAC,EAEI,IAAkB,QAAkB;EACpC,AAGJ,EAAO,YAAU,OAAO,4BAA4B;GAElD,AADA,EAAO,UAAU,MACjB,GAAsB;IACtB;IACD,CAAC,EAAqB,CAAC;CAsF1B,AApFA,SAAsB;EACpB,IAAI,CAAC,GACH;EAEF,IAAM,IAAY,EAAa;EAC3B,KAAa,SAGb,IACF,EAAgB,UAAU,EAAgB,UAE1C,EAAgB,UAAU,EAAiB,EAAU,EAEvD,GAAiB;IAChB;EAAC;EAAwB;EAAe;EAAgB,CAAC,EAE5D,SAAgB;EACd,IAAI,CAAC,GACH;EAGF,IAAM,IADe,EAAgB,WACgB,QAE/C,UAAgB;GACpB,GAAiB;;EAMnB,OAHA,EAAO,iBAAiB,UAAU,GAAS,EAAE,SAAS,IAAM,CAAC,EAC7D,OAAO,iBAAiB,UAAU,EAAQ,QAE7B;GAEX,AADA,EAAO,oBAAoB,UAAU,EAAQ,EAC7C,OAAO,oBAAoB,UAAU,EAAQ;;IAE9C,CAAC,GAAe,EAAgB,CAAC,EAEpC,SAAgB;EAId,IAHI,KAGA,CAAC,KAAmB,CAAC,KAAY,CAAC,GACpC;EAEF,IAAM,IAAW,EAAY;EAC7B,IAAI,KAAY,MACd;EAGF,IAAM,IAAe,EAAgB,SAE/B,IAAW,IAAI,sBAClB,MAAY;GACX,IAAM,CAAC,KAAS;GACZ,KAAS,QAIT,EAAM,kBAAkB,CAAC,EAAoB,YAC/C,EAAoB,UAAU,IAC9B,GAAiB,EACjB,OAAO,iBAAiB;IACtB,EAAoB,UAAU;MAC7B,IAAI;KAGX;GACE,MAAM;GACN,YAAY,WAAW,EAAY;GACpC,CACF;EAGD,OADA,EAAS,QAAQ,EAAS,QACb;GACX,EAAS,YAAY;;IAEtB;EACD;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,EAEF,SAAsB;EACpB,IAAI,GACF;EAEF,IAAM,IAAY,EAAa;EAC3B,KAAa,SAGb,IACF,EAAgB,UAAU,EAAgB,UAE1C,EAAgB,UAAU,EAAiB,EAAU;IAEtD,CAAC,GAAwB,EAAc,CAAC;CAE3C,IAAM,KACJ,kBAAC,OAAD;EACE,WAAW,EACT,EAAuB,EAAE,MAAM,GAAc,CAAC,EAC9C,GAAS,OACV;EACD,MAAK;YAEL,kBAAC,OAAD;GACE,WAAW,EAAG,IAA2B,GAAS,UAAU;GAC5D,MAAK;GACL,OAAO;aAEN,EAAQ,KAAK,MAAW;IACvB,IAAM,IAAgB,CACpB,EAA2B,EAAE,MAAM,GAAc,CAAC,EAClD,GAAS,WACV,EACK,IAAkB,EAAmB,EAAO,aAAa;IAkB/D,OAjBI,KAAmB,QACrB,EAAc,KAAK,EAAgB,EAEjC,EAAO,aAAa,QACtB,EAAc,KAAK,EAAO,UAAU,EAElC,EAAO,aACT,EAAc,KACZ,IACA,GAAS,kBACV,EAEC,EAAO,SAAS,QAClB,EAAc,KACZ,EAA4B,EAAE,OAAO,EAAO,OAAO,CAAC,CACrD,EAGD,kBAAC,OAAD;KAEE,MAAK;KACL,WAAW,EAAG,GAAG,EAAc;eAE9B,EAAO;KACJ,EALC,EAAO,GAKR;KAER;GACE,CAAA;EACF,CAAA,EAGJ;CACJ,IAAI,EAAK,WAAW,GAClB,IACE,kBAAC,OAAD;EACE,WAAW,EAAG,GAA0B,GAAS,SAAS;EAC1D,MAAK;YAEL,kBAAC,OAAD;GAAK,MAAK;aACP,MACC,kBAAC,OAAD;IAAK,WAAW,EAAG,2CAA2B,GAAS,UAAU;cAC9D,EAAE,qBAAqB;IACpB,CAAA;GAEJ,CAAA;EACF,CAAA;MAEH,IAAI,KAAiB,KAAe,MAAM;EAC/C,IAAM,EAAE,eAAY,gBAAa,IAC3B,IAAkB,IAAa,GAC/B,KAAsB,EAAK,SAAS,KAAY,GAChD,IAAQ,EAAK,MAAM,GAAY,EAAS;EAC9C,IACE,kBAAC,OAAD;GAAK,WAAW;GAAqB,KAAK;aAA1C;IACE,kBAAC,OAAD;KAAK,WAAW;KAAe,OAAO,EAAE,QAAQ,GAAiB;KAAI,CAAA;IACpE,EAAM,KAAK,GAAK,MAER,GAAU,GADK,IAAa,GACE,EAAY,CACjD;IACF,kBAAC,OAAD;KAAK,WAAW;KAAe,OAAO,EAAE,QAAQ,GAAoB;KAAI,CAAA;IACpE;;QAGR,IACE,kBAAC,OAAD;EAAK,KAAK;YACP,EAAK,KAAK,GAAK,MACP,GAAU,GAAK,GAAO,KAAK,CAClC;EACE,CAAA;CAIV,IAAI,KAAmC;CACvC,AAAI,CAAC,KAAiB,KAAmB,MACvC,KAAe,kBAAC,OAAD;EAAK,KAAK;EAAa,WAAW;EAAmB,CAAA;CAGtE,IAAI,KAA6C,MAC7C,IAAwC;CAM5C,OALI,MACF,KAA8B,GAC9B,IAAyB,IAIzB,kBAAC,OAAD;EACE,KAAK;EACL,WAAW,EACT,EAA0B,EAAE,MAAM,GAAc,CAAC,EACjD,IACA,GAAS,WACT,GACD;EACD,MAAK;EACL,cAAY;EACZ,mBAAiB;EACjB,oBAAkB;YAXpB,CAaG,IACD,kBAAC,OAAD;GACE,KAAK;GACL,WAAW,EACT,EAAqB,EAAE,MAAM,GAAc,CAAC,EAC5C,GACA,GAAS,KACV;GACD,MAAK;GACL,oBAAkB;aARpB,CAUG,GACA,GACG;KACF;;GAIG,KAAS;CACpB;CACA;CACA;CACA;CACA;CACA;CACA;CACD"}
+{"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 {\n  DataTableBodyScrollMode,\n  DataTableColumn,\n  DataTableKind,\n  GetRowId,\n} from './DataTable.js';\nimport * as dataTableStyles from './DataTable.css.js';\nimport * as styles from './VirtualizedConnectionTable.css.js';\n\nimport { buildDataTableInlineTemplate } from '../../internal/data-table/layout.js';\nimport {\n  clamp,\n  computeVirtualWindowBounds,\n  isVerticallyScrollable,\n  shouldTriggerInfiniteLoad,\n  type VirtualWindow,\n} from '../../internal/data-table/virtualization.js';\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  bodyScrollMode?: DataTableBodyScrollMode;\n\n  virtualization?: VirtualizationConfig;\n\n  infiniteScroll?: InfiniteScrollConfig;\n  hasNextPage?: boolean;\n  isLoadingMore?: boolean;\n  onLoadMore?: () => void;\n  ariaLabel?: string;\n  ariaLabelledBy?: string;\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    if (\n      isVerticallyScrollable({\n        overflowY: style.overflowY,\n        scrollHeight: current.scrollHeight,\n        clientHeight: current.clientHeight,\n      })\n    ) {\n      return current;\n    }\n    current = current.parentElement;\n  }\n  return null;\n};\n\nexport const VirtualizedConnectionTable = <Row,>({\n  columns,\n  rows,\n  getRowId,\n  emptyState,\n  className,\n  gridTemplateColumns,\n  kind,\n  classes,\n  bodyScrollMode = 'page',\n  virtualization,\n  infiniteScroll,\n  hasNextPage = false,\n  isLoadingMore = false,\n  onLoadMore,\n  ariaLabel,\n  ariaLabelledBy,\n}: VirtualizedConnectionTableProps<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 containerRef = useRef<HTMLDivElement>(null);\n  const bodyScrollerRef = 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  const hasContainedBodyScroll = bodyScrollMode === 'contained';\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 buildDataTableInlineTemplate(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            if (column.align != null) {\n              cellClasses.push(\n                dataTableStyles.alignRecipe({ align: column.align }),\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 bodyScroller = bodyScrollerRef.current;\n    const scrollParent = scrollParentRef.current;\n    let viewportHeight = scrollParent?.clientHeight ?? window.innerHeight;\n    let visibleTop = 0;\n    if (hasContainedBodyScroll && bodyScroller != null) {\n      viewportHeight = bodyScroller.clientHeight;\n      visibleTop = bodyScroller.scrollTop;\n    } else {\n      const parentRectTop = scrollParent?.getBoundingClientRect().top ?? 0;\n      const bodyRectTop = bodyEl.getBoundingClientRect().top;\n      const relativeTop = bodyRectTop - parentRectTop;\n      visibleTop = Math.max(0, -relativeTop);\n    }\n    const visibleBottom = visibleTop + viewportHeight;\n\n    const totalHeight = rows.length * height;\n    const clampedBottom = clamp(visibleBottom, 0, totalHeight);\n    const { startIndex, endIndex } = computeVirtualWindowBounds({\n      rowCount: rows.length,\n      rowHeightPx: height,\n      overscan,\n      visibleTop,\n      visibleBottom,\n    });\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      shouldTriggerInfiniteLoad({\n        autoLoad,\n        canLoadMore,\n        totalHeight,\n        visibleBottom: clampedBottom,\n        thresholdPx,\n        isCoolingDown: loadMoreCooldownRef.current,\n      })\n    ) {\n      loadMoreCooldownRef.current = true;\n      triggerLoadMore();\n      window.setTimeout(() => {\n        loadMoreCooldownRef.current = false;\n      }, 250);\n    }\n  }, [\n    autoLoad,\n    canLoadMore,\n    hasContainedBodyScroll,\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    if (hasContainedBodyScroll) {\n      scrollParentRef.current = bodyScrollerRef.current;\n    } else {\n      scrollParentRef.current = findScrollParent(container);\n    }\n    scheduleCompute();\n  }, [hasContainedBodyScroll, 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    if (hasContainedBodyScroll) {\n      scrollParentRef.current = bodyScrollerRef.current;\n    } else {\n      scrollParentRef.current = findScrollParent(container);\n    }\n  }, [hasContainedBodyScroll, 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          if (column.align != null) {\n            headerClasses.push(\n              dataTableStyles.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\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  let containedContainerClassName: string | null = null;\n  let containedBodyClassName: string | null = null;\n  if (hasContainedBodyScroll) {\n    containedContainerClassName = dataTableStyles.containerWithContainedBody;\n    containedBodyClassName = dataTableStyles.bodyContained;\n  }\n\n  return (\n    <div\n      ref={containerRef}\n      className={cx(\n        dataTableStyles.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      {headerRow}\n      <div\n        ref={bodyScrollerRef}\n        className={cx(\n          dataTableStyles.body({ kind: resolvedKind }),\n          containedBodyClassName,\n          classes?.body,\n        )}\n        role=\"rowgroup\"\n        data-scroll-mode={bodyScrollMode}\n      >\n        {bodyRows}\n        {sentinelNode}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}