@plumile/ui 0.1.134 → 0.1.142

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

@@ -1,16 +1,14 @@
-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 { 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";
+import { DataTableBody as e, DataTableEmptyRow as t, DataTableHeader as n, DataTableRoot as r, DataTableRow as i } from "./DataTable.js";
+import { resolveInfiniteRootMargin as a, shouldTriggerInfiniteLoad as o } from "../../internal/infinite/infiniteLoad.js";
+import { bodyViewport as s, sentinel as c, spacer as l } from "./VirtualizedConnectionTable.css.js";
+import { clamp as ee, computeVirtualWindowBounds as te, isVerticallyScrollable as u, shouldTriggerVirtualizedInfiniteLoad as ne } from "../../internal/data-table/virtualization.js";
+import { useCallback as d, useEffect as f, useLayoutEffect as p, useMemo as m, useRef as h, useState as re } from "react";
+import { Fragment as ie, jsx as g, jsxs as _ } from "react/jsx-runtime";
 //#region src/components/data-table/VirtualizedConnectionTable.tsx
-var x = (e) => e == null ? null : d({ minVisibleAt: e }), S = (e) => {
+var v = (e) => {
 	let t = e;
 	for (; t != null;) {
-		if (p({
+		if (u({
 			overflowY: window.getComputedStyle(t).overflowY,
 			scrollHeight: t.scrollHeight,
 			clientHeight: t.clientHeight
@@ -18,212 +16,221 @@ var x = (e) => e == null ? null : d({ minVisibleAt: e }), S = (e) => {
 		t = t.parentElement;
 	}
 	return null;
-}, 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 = 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;
+}, y = ({ columns: u, rows: y, getRowId: b, emptyState: ae, className: oe, headerClassName: se, bodyClassName: ce, rowClassName: x, gridTemplateClassName: S, gridTemplateColumns: C, kind: w, density: T, headerBehavior: le, rowState: E, classes: D, bodyScrollMode: O = "page", bodyFooterNode: ue, virtualization: k, infiniteScroll: A, hasNextPage: j = !1, isLoadingMore: M = !1, onLoadMore: N, ariaLabel: de, ariaLabelledBy: fe }) => {
+	let P = h(null), F = h(null), I = h(null), L = h(null), R = h(null), z = h(null), B = h(!1), V = k?.enabled === !0, H = m(() => {
+		if (!V) return null;
+		let e = k.rowHeightPx;
 		return typeof e == "number" && Number.isFinite(e) && e > 0 ? e : 56;
-	}, [B, E]), H = _(() => {
-		if (!B) return 0;
-		let e = 10, t = E.overscan;
+	}, [V, k]), U = m(() => {
+		if (!V) return 0;
+		let e = 10, t = k.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 = m(() => {
-		O?.();
-	}, [O]), [xe, Se] = pe(() => ({
+	}, [V, k]), W = A?.thresholdPx ?? 800, G = A?.autoLoad ?? !0, K = A?.enabled === !0, q = O === "contained", J = K && j && !M && N != null, Y = d(() => {
+		N?.();
+	}, [N]), [pe, me] = re(() => ({
 		startIndex: 0,
-		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__ */ y("div", {
-			role: "row",
-			className: e(...s),
-			style: c,
-			children: d.map((r) => {
-				let i = [
-					a({ kind: j }),
-					le,
-					w?.cell
-				], 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)
-				}, r.id);
-			})
-		}, o);
+		endIndex: Math.min(y.length, 50)
+	})), X = d((e, t, n) => {
+		let r = {};
+		return typeof n == "number" && (r.height = n), /* @__PURE__ */ g(i, {
+			row: e,
+			index: t,
+			columns: u,
+			getRowId: b,
+			kind: w,
+			density: T,
+			rowClassName: x,
+			rowState: E,
+			gridTemplateClassName: S,
+			gridTemplateColumns: C,
+			classes: D,
+			style: r,
+			cellMode: "singleLine"
+		}, b(e, t));
 	}, [
-		w,
-		d,
+		D,
+		u,
+		T,
+		b,
+		S,
 		C,
-		Y,
-		j
-	]), X = m(() => {
-		if (!B) return;
-		let e = V;
+		w,
+		x,
+		E
+	]), Z = d(() => {
+		if (!V) return;
+		let e = H;
 		if (e == null) return;
-		let t = F.current;
+		let t = I.current;
 		if (t == null) return;
-		let n = P.current, r = L.current, i = r?.clientHeight ?? window.innerHeight, a = 0;
-		if (K && n != null) i = n.clientHeight, a = n.scrollTop;
+		let n = F.current, r = R.current, i = r?.clientHeight ?? window.innerHeight, a = 0;
+		if (q && n != null) i = n.clientHeight, a = n.scrollTop;
 		else {
 			let e = r?.getBoundingClientRect().top ?? 0, n = t.getBoundingClientRect().top - e;
 			a = Math.max(0, -n);
 		}
-		let o = a + i, s = p.length * e, c = ue(o, 0, s), { startIndex: l, endIndex: u } = de({
-			rowCount: p.length,
+		let s = a + i, c = y.length * e, l = ee(s, 0, c), { startIndex: u, endIndex: d } = te({
+			rowCount: y.length,
 			rowHeightPx: e,
-			overscan: H,
+			overscan: U,
 			visibleTop: a,
-			visibleBottom: o
+			visibleBottom: s
 		});
-		Se((e) => e.startIndex === l && e.endIndex === u ? e : {
-			startIndex: l,
-			endIndex: u
-		}), fe({
-			autoLoad: W,
-			canLoadMore: q,
-			totalHeight: s,
-			visibleBottom: c,
-			thresholdPx: U,
-			isCoolingDown: z.current
-		}) && (z.current = !0, J(), window.setTimeout(() => {
-			z.current = !1;
+		me((e) => e.startIndex === u && e.endIndex === d ? e : {
+			startIndex: u,
+			endIndex: d
+		}), o({
+			enabled: K,
+			hasNext: j,
+			isLoading: M,
+			autoLoad: G,
+			isCoolingDown: B.current
+		}) && J && ne({
+			autoLoad: G,
+			canLoadMore: J,
+			totalHeight: c,
+			visibleBottom: l,
+			thresholdPx: W,
+			isCoolingDown: B.current
+		}) && (B.current = !0, Y(), window.setTimeout(() => {
+			B.current = !1;
 		}, 250));
 	}, [
-		W,
+		G,
+		J,
+		j,
 		q,
-		K,
-		B,
-		H,
 		V,
-		p.length,
+		K,
+		M,
 		U,
-		J
-	]), Z = m(() => {
-		R.current ??= window.requestAnimationFrame(() => {
-			R.current = null, X();
+		H,
+		y.length,
+		W,
+		Y
+	]), Q = d(() => {
+		z.current ??= window.requestAnimationFrame(() => {
+			z.current = null, Z();
 		});
-	}, [X]);
-	g(() => {
-		if (!B) return;
-		let e = N.current;
-		e != null && (K ? L.current = P.current : L.current = S(e), Z());
+	}, [Z]);
+	p(() => {
+		if (!V) return;
+		let e = P.current;
+		e != null && (q ? R.current = F.current : R.current = v(e), Q());
 	}, [
-		K,
-		B,
-		Z
-	]), h(() => {
-		if (!B) return;
-		let e = L.current ?? window, t = () => {
-			Z();
+		q,
+		V,
+		Q
+	]), f(() => {
+		if (!V) return;
+		let e = R.current ?? window, t = () => {
+			Q();
 		};
 		return e.addEventListener("scroll", t, { passive: !0 }), window.addEventListener("resize", t), () => {
 			e.removeEventListener("scroll", t), window.removeEventListener("resize", t);
 		};
-	}, [B, Z]), h(() => {
-		if (B || !G || !W || !q) return;
-		let e = I.current;
-		if (e == null) return;
-		let t = L.current, n = new IntersectionObserver((e) => {
+	}, [V, Q]), f(() => {
+		if (V || !o({
+			enabled: K,
+			hasNext: j,
+			isLoading: M,
+			autoLoad: G,
+			isCoolingDown: !1
+		}) || !J) return;
+		let e = L.current;
+		if (e == null || typeof window > "u" || typeof IntersectionObserver > "u") return;
+		let t = R.current, n = new IntersectionObserver((e) => {
 			let [t] = e;
-			t != null && t.isIntersecting && !z.current && (z.current = !0, J(), window.setTimeout(() => {
-				z.current = !1;
+			t != null && t.isIntersecting && o({
+				enabled: K,
+				hasNext: j,
+				isLoading: M,
+				autoLoad: G,
+				isCoolingDown: B.current
+			}) && (B.current = !0, Y(), window.setTimeout(() => {
+				B.current = !1;
 			}, 250));
 		}, {
 			root: t,
-			rootMargin: `0px 0px ${U}px 0px`
+			rootMargin: a({ thresholdPx: W })
 		});
 		return n.observe(e), () => {
 			n.disconnect();
 		};
 	}, [
-		W,
-		q,
 		G,
-		B,
-		U,
-		J
-	]), g(() => {
-		if (B) return;
-		let e = N.current;
-		e != null && (K ? L.current = P.current : L.current = S(e));
-	}, [K, B]);
-	let we = /* @__PURE__ */ y("div", {
-		className: e(l({ kind: j }), w?.header),
-		role: "rowgroup",
-		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 = 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
-				}, t.id);
-			})
-		})
-	}), Q;
-	if (p.length === 0) Q = /* @__PURE__ */ y("div", {
-		className: e(c, w?.emptyRow),
-		role: "row",
-		children: /* @__PURE__ */ y("div", {
-			role: "cell",
-			children: me ?? /* @__PURE__ */ y("div", {
-				className: e("ysn84625 txvbqb9w txvbqb19cb txvbqb16fa", w?.emptyCell),
-				children: A("common.table.empty")
-			})
-		})
+		J,
+		j,
+		K,
+		V,
+		M,
+		W,
+		Y
+	]), p(() => {
+		if (V) return;
+		let e = P.current;
+		e != null && (q ? R.current = F.current : R.current = v(e));
+	}, [q, V]);
+	let $;
+	if (y.length === 0) $ = /* @__PURE__ */ g(t, {
+		emptyState: ae,
+		density: T,
+		classes: D
 	});
-	else if (B && V != null) {
-		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,
+	else if (V && H != null) {
+		let { startIndex: e, endIndex: t } = pe, n = e * H, r = (y.length - t) * H, i = y.slice(e, t);
+		$ = /* @__PURE__ */ _("div", {
+			className: s,
+			ref: I,
 			children: [
-				/* @__PURE__ */ y("div", {
-					className: f,
+				/* @__PURE__ */ g("div", {
+					className: l,
 					style: { height: n }
 				}),
-				i.map((t, n) => Ce(t, e + n, V)),
-				/* @__PURE__ */ y("div", {
-					className: f,
+				i.map((t, n) => X(t, e + n, H)),
+				/* @__PURE__ */ g("div", {
+					className: l,
 					style: { height: r }
 				})
 			]
 		});
-	} else Q = /* @__PURE__ */ y("div", {
-		ref: F,
-		children: p.map((e, t) => Ce(e, t, null))
-	});
-	let Te = null;
-	!B && G && W && (Te = /* @__PURE__ */ y("div", {
-		ref: I,
-		className: ce
-	}));
-	let Ee = null, $ = null;
-	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__ */ b("div", {
-			ref: P,
-			className: e(r({ kind: j }), $, w?.body),
-			role: "rowgroup",
-			"data-scroll-mode": T,
-			children: [Q, Te]
+	} else $ = /* @__PURE__ */ g(ie, { children: y.map((e, t) => X(e, t, null)) });
+	let he = null;
+	return !V && K && G && (he = /* @__PURE__ */ g("div", {
+		ref: L,
+		className: c
+	})), /* @__PURE__ */ _(r, {
+		ref: P,
+		className: oe,
+		kind: w,
+		bodyScrollMode: O,
+		classes: D,
+		ariaLabel: de,
+		ariaLabelledBy: fe,
+		children: [/* @__PURE__ */ g(n, {
+			columns: u,
+			kind: w,
+			density: T,
+			headerBehavior: le,
+			headerClassName: se,
+			gridTemplateClassName: S,
+			gridTemplateColumns: C,
+			classes: D
+		}), /* @__PURE__ */ _(e, {
+			ref: F,
+			className: ce,
+			kind: w,
+			bodyScrollMode: O,
+			classes: D,
+			children: [
+				$,
+				he,
+				ue
+			]
 		})]
 	});
 };
 //#endregion
-export { C as VirtualizedConnectionTable };
+export { y 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 { 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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"}
+{"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  type ReactNode,\n} from 'react';\n\nimport {\n  DataTableBody,\n  DataTableEmptyRow,\n  DataTableHeader,\n  DataTableRoot,\n  DataTableRow,\n  type DataTableBodyScrollMode,\n  type DataTableColumn,\n  type DataTableDensity,\n  type DataTableHeaderBehavior,\n  type DataTableKind,\n  type DataTableRowState,\n  type DataTableSlot,\n  type GetRowId,\n} from './DataTable.js';\nimport * as styles from './VirtualizedConnectionTable.css.js';\n\nimport {\n  clamp,\n  computeVirtualWindowBounds,\n  isVerticallyScrollable,\n  shouldTriggerVirtualizedInfiniteLoad,\n  type VirtualWindow,\n} from '../../internal/data-table/virtualization.js';\nimport {\n  resolveInfiniteRootMargin,\n  shouldTriggerInfiniteLoad,\n} from '../../internal/infinite/infiniteLoad.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\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  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  rowState?: (row: Row, index: number) => DataTableRowState;\n  classes?: SlotClasses<DataTableSlot>;\n  bodyScrollMode?: DataTableBodyScrollMode;\n  bodyFooterNode?: ReactNode;\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 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  headerClassName,\n  bodyClassName,\n  rowClassName,\n  gridTemplateClassName,\n  gridTemplateColumns,\n  kind,\n  density,\n  headerBehavior,\n  rowState,\n  classes,\n  bodyScrollMode = 'page',\n  bodyFooterNode,\n  virtualization,\n  infiniteScroll,\n  hasNextPage = false,\n  isLoadingMore = false,\n  onLoadMore,\n  ariaLabel,\n  ariaLabelledBy,\n}: VirtualizedConnectionTableProps<Row>): JSX.Element => {\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 renderRow = useCallback(\n    (row: Row, index: number, heightPx?: number | null): JSX.Element => {\n      const rowStyle: CSSProperties = {};\n      if (typeof heightPx === 'number') {\n        rowStyle.height = heightPx;\n      }\n      return (\n        <DataTableRow\n          key={getRowId(row, index)}\n          row={row}\n          index={index}\n          columns={columns}\n          getRowId={getRowId}\n          kind={kind}\n          density={density}\n          rowClassName={rowClassName}\n          rowState={rowState}\n          gridTemplateClassName={gridTemplateClassName}\n          gridTemplateColumns={gridTemplateColumns}\n          classes={classes}\n          style={rowStyle}\n          cellMode=\"singleLine\"\n        />\n      );\n    },\n    [\n      classes,\n      columns,\n      density,\n      getRowId,\n      gridTemplateClassName,\n      gridTemplateColumns,\n      kind,\n      rowClassName,\n      rowState,\n    ],\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        enabled: infiniteEnabled,\n        hasNext: hasNextPage,\n        isLoading: isLoadingMore,\n        autoLoad,\n        isCoolingDown: loadMoreCooldownRef.current,\n      }) &&\n      canLoadMore &&\n      shouldTriggerVirtualizedInfiniteLoad({\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    hasNextPage,\n    hasContainedBodyScroll,\n    isVirtualized,\n    infiniteEnabled,\n    isLoadingMore,\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 (\n      !shouldTriggerInfiniteLoad({\n        enabled: infiniteEnabled,\n        hasNext: hasNextPage,\n        isLoading: isLoadingMore,\n        autoLoad,\n        isCoolingDown: false,\n      }) ||\n      !canLoadMore\n    ) {\n      return undefined;\n    }\n    const sentinel = sentinelRef.current;\n    if (sentinel == null) {\n      return undefined;\n    }\n    if (\n      typeof window === 'undefined' ||\n      typeof IntersectionObserver === 'undefined'\n    ) {\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 (\n          entry.isIntersecting &&\n          shouldTriggerInfiniteLoad({\n            enabled: infiniteEnabled,\n            hasNext: hasNextPage,\n            isLoading: isLoadingMore,\n            autoLoad,\n            isCoolingDown: loadMoreCooldownRef.current,\n          })\n        ) {\n          loadMoreCooldownRef.current = true;\n          triggerLoadMore();\n          window.setTimeout(() => {\n            loadMoreCooldownRef.current = false;\n          }, 250);\n        }\n      },\n      {\n        root: scrollParent,\n        rootMargin: resolveInfiniteRootMargin({ thresholdPx }),\n      },\n    );\n\n    observer.observe(sentinel);\n    return () => {\n      observer.disconnect();\n    };\n  }, [\n    autoLoad,\n    canLoadMore,\n    hasNextPage,\n    infiniteEnabled,\n    isVirtualized,\n    isLoadingMore,\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  let bodyRows: JSX.Element;\n  if (rows.length === 0) {\n    bodyRows = (\n      <DataTableEmptyRow\n        emptyState={emptyState}\n        density={density}\n        classes={classes}\n      />\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      <>\n        {rows.map((row, index) => {\n          return renderRow(row, index, null);\n        })}\n      </>\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    <DataTableRoot\n      ref={containerRef}\n      className={className}\n      kind={kind}\n      bodyScrollMode={bodyScrollMode}\n      classes={classes}\n      ariaLabel={ariaLabel}\n      ariaLabelledBy={ariaLabelledBy}\n    >\n      <DataTableHeader\n        columns={columns}\n        kind={kind}\n        density={density}\n        headerBehavior={headerBehavior}\n        headerClassName={headerClassName}\n        gridTemplateClassName={gridTemplateClassName}\n        gridTemplateColumns={gridTemplateColumns}\n        classes={classes}\n      />\n      <DataTableBody\n        ref={bodyScrollerRef}\n        className={bodyClassName}\n        kind={kind}\n        bodyScrollMode={bodyScrollMode}\n        classes={classes}\n      >\n        {bodyRows}\n        {sentinelNode}\n        {bodyFooterNode}\n      </DataTableBody>\n    </DataTableRoot>\n  );\n};\n"],"mappings":"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"}

package/lib/esm/components/feedback/InlineBanner.js

@@ -0,0 +1,49 @@
+import { cx as e } from "../../theme/tools.js";
+import { ModalCloseSvg as t } from "../../icons/ModalCloseSvg.js";
+import { actions as n, closeButton as r, container as i, content as a, description as o, title as s, toneRecipe as c } from "./inlineBanner.css.js";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { useTranslation as d } from "react-i18next";
+//#region src/components/feedback/InlineBanner.tsx
+var f = ({ tone: f = "info", title: p, children: m, actions: h, onDismiss: g, dismissLabel: _, className: v, role: y, ariaLive: b }) => {
+	let { t: x } = d("ui", { useSuspense: !1 }), S = typeof g == "function", C = _ ?? x("backoffice.inlineBanner.dismiss"), w = y;
+	w ?? (w = "status", f === "danger" && (w = "alert"));
+	let T = b;
+	T ?? (T = "polite", f === "danger" && (T = "assertive"));
+	let E = null;
+	p != null && (E = /* @__PURE__ */ l("div", {
+		className: s,
+		children: p
+	}));
+	let D = null;
+	m != null && (D = /* @__PURE__ */ l("div", {
+		className: o,
+		children: m
+	}));
+	let O = null;
+	return S && (O = /* @__PURE__ */ l("button", {
+		type: "button",
+		onClick: g,
+		className: r,
+		"aria-label": C,
+		children: /* @__PURE__ */ l(t, {
+			width: 18,
+			height: 18,
+			"aria-hidden": "true"
+		})
+	})), /* @__PURE__ */ u("div", {
+		className: e(i, c({ tone: f }), v),
+		role: w,
+		"aria-live": T,
+		children: [/* @__PURE__ */ u("div", {
+			className: a,
+			children: [E, D]
+		}), /* @__PURE__ */ u("div", {
+			className: n,
+			children: [h, O]
+		})]
+	});
+};
+//#endregion
+export { f as InlineBanner, f as default };
+
+//# sourceMappingURL=InlineBanner.js.map

package/lib/esm/components/feedback/InlineBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineBanner.js","names":[],"sources":["../../../../src/components/feedback/InlineBanner.tsx"],"sourcesContent":["import { type AriaRole, type JSX, type ReactNode } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport type { RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { ModalCloseSvg } from '../../icons/ModalCloseSvg.js';\nimport { cx } from '../../theme/tools.js';\n\nimport * as styles from './inlineBanner.css.js';\n\nexport type InlineBannerTone = NonNullable<\n  NonNullable<RecipeVariants<typeof styles.toneRecipe>>['tone']\n>;\n\nexport type InlineBannerProps = {\n  tone?: InlineBannerTone;\n  title?: ReactNode;\n  children?: ReactNode;\n  actions?: ReactNode;\n  onDismiss?: () => void;\n  dismissLabel?: string;\n  className?: string;\n  role?: AriaRole;\n  ariaLive?: 'off' | 'assertive' | 'polite';\n};\n\nexport const InlineBanner = ({\n  tone = 'info',\n  title,\n  children,\n  actions,\n  onDismiss,\n  dismissLabel,\n  className,\n  role,\n  ariaLive,\n}: InlineBannerProps): JSX.Element => {\n  const { t } = useTranslation('ui', { useSuspense: false });\n  const showDismiss = typeof onDismiss === 'function';\n  const resolvedDismissLabel =\n    dismissLabel ?? t('backoffice.inlineBanner.dismiss');\n  let resolvedRole = role;\n  if (resolvedRole == null) {\n    resolvedRole = 'status';\n    if (tone === 'danger') {\n      resolvedRole = 'alert';\n    }\n  }\n  let resolvedAriaLive = ariaLive;\n  if (resolvedAriaLive == null) {\n    resolvedAriaLive = 'polite';\n    if (tone === 'danger') {\n      resolvedAriaLive = 'assertive';\n    }\n  }\n\n  let titleNode: JSX.Element | null = null;\n  if (title != null) {\n    titleNode = <div className={styles.title}>{title}</div>;\n  }\n\n  let descriptionNode: JSX.Element | null = null;\n  if (children != null) {\n    descriptionNode = <div className={styles.description}>{children}</div>;\n  }\n\n  let dismissNode: JSX.Element | null = null;\n  if (showDismiss) {\n    dismissNode = (\n      <button\n        type=\"button\"\n        onClick={onDismiss}\n        className={styles.closeButton}\n        aria-label={resolvedDismissLabel}\n      >\n        <ModalCloseSvg width={18} height={18} aria-hidden=\"true\" />\n      </button>\n    );\n  }\n\n  return (\n    <div\n      className={cx(styles.container, styles.toneRecipe({ tone }), className)}\n      role={resolvedRole}\n      aria-live={resolvedAriaLive}\n    >\n      <div className={styles.content}>\n        {titleNode}\n        {descriptionNode}\n      </div>\n\n      <div className={styles.actions}>\n        {actions}\n        {dismissNode}\n      </div>\n    </div>\n  );\n};\n\nexport default InlineBanner;\n"],"mappings":";;;;;;AAyBA,IAAa,KAAgB,EAC3B,UAAO,QACP,OAAA,GACA,aACA,SAAA,GACA,cACA,iBACA,cACA,SACA,kBACoC;CACpC,IAAM,EAAE,SAAM,EAAe,MAAM,EAAE,aAAa,IAAO,CAAC,EACpD,IAAc,OAAO,KAAc,YACnC,IACJ,KAAgB,EAAE,kCAAkC,EAClD,IAAe;CACnB,AAAI,MACF,IAAe,UACX,MAAS,aACX,IAAe;CAGnB,IAAI,IAAmB;CACvB,AAAI,MACF,IAAmB,UACf,MAAS,aACX,IAAmB;CAIvB,IAAI,IAAgC;CACpC,AAAI,KAAS,SACX,IAAY,kBAAC,OAAD;EAAK,WAAW;YAAe;EAAY,CAAA;CAGzD,IAAI,IAAsC;CAC1C,AAAI,KAAY,SACd,IAAkB,kBAAC,OAAD;EAAK,WAAW;EAAqB;EAAe,CAAA;CAGxE,IAAI,IAAkC;CActC,OAbI,MACF,IACE,kBAAC,UAAD;EACE,MAAK;EACL,SAAS;EACT,WAAW;EACX,cAAY;YAEZ,kBAAC,GAAD;GAAe,OAAO;GAAI,QAAQ;GAAI,eAAY;GAAS,CAAA;EACpD,CAAA,GAKX,kBAAC,OAAD;EACE,WAAW,EAAG,GAAkB,EAAkB,EAAE,SAAM,CAAC,EAAE,EAAU;EACvE,MAAM;EACN,aAAW;YAHb,CAKE,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACG,GACA,EACG;MAEN,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACG,GACA,EACG;KACF"}

package/lib/esm/components/feedback/OperationFeedback.css.js

@@ -1,8 +1,8 @@
 /* empty css                                   */
 /* empty css                                 */
 //#region src/components/feedback/OperationFeedback.css.ts
-var e = "_19ozap70 txvbqbdr8 txvbqbf6i txvbqbffj txvbqb17w0", t = "_19ozap71 txvbqbdr8 txvbqbf91 txvbqbey txvbqbff6";
+var e = "_19ozap70 txvbqbdr8 txvbqbf6i txvbqbffj txvbqb17w0";
 //#endregion
-export { t as row, e as stack };
+export { e as stack };
 
 //# sourceMappingURL=OperationFeedback.css.js.map

package/lib/esm/components/feedback/OperationFeedback.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"OperationFeedback.css.js","names":[],"sources":["../../../../src/components/feedback/OperationFeedback.css.ts"],"sourcesContent":["import { sprinkles } from '../../theme/sprinkles.css.js';\n\nexport const stack = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 3,\n  width: 'full',\n});\n\nexport const row = sprinkles({\n  display: 'flex',\n  flexWrap: 'wrap',\n  alignItems: 'center',\n  gap: 2,\n});\n"],"mappings":""}
+{"version":3,"file":"OperationFeedback.css.js","names":[],"sources":["../../../../src/components/feedback/OperationFeedback.css.ts"],"sourcesContent":["import { sprinkles } from '../../theme/sprinkles.css.js';\n\nexport const stack = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 3,\n  width: 'full',\n});\n"],"mappings":""}