@plumile/ui 0.1.114 → 0.1.116

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

@@ -1,14 +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, cell as i, container as a, emptyRow as o, header as s, headerCell as c, headerRow as l, hideBelowRecipe as u, primaryCell as d, primaryHeaderCell as ee, row as te, rowEven as ne, rowOdd as re } from "./DataTable.css.js";
-import { bodyViewport as ie, sentinel as ae, singleLineCell as oe, spacer as f } from "./VirtualizedConnectionTable.css.js";
-import { useCallback as p, useEffect as m, useLayoutEffect as se, useMemo as h, useRef as g, useState as ce } from "react";
-import { jsx as _, jsxs as v } from "react/jsx-runtime";
+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";
 //#region src/components/data-table/VirtualizedConnectionTable.tsx
-var y = "minmax(0, 1fr)", b = (e, t) => typeof t == "string" && t !== "" ? { gridTemplateColumns: t } : { gridTemplateColumns: `repeat(${e}, ${y})` }, x = (e) => e == null ? null : u({ minVisibleAt: e }), S = ({ overflowY: e, scrollHeight: t, clientHeight: n }) => e !== "auto" && e !== "scroll" && e !== "overlay" ? !1 : t > n + 1, C = (e) => {
+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) => {
 	let t = e;
 	for (; t != null;) {
-		if (S({
+		if (x({
 			overflowY: window.getComputedStyle(t).overflowY,
 			scrollHeight: t.scrollHeight,
 			clientHeight: t.clientHeight
@@ -16,210 +16,226 @@ var y = "minmax(0, 1fr)", b = (e, t) => typeof t == "string" && t !== "" ? { gri
 		t = t.parentElement;
 	}
 	return null;
-}, w = (e, t, n) => Math.min(n, Math.max(t, e)), T = ({ autoLoad: e, canLoadMore: t, totalHeight: n, visibleBottom: r, thresholdPx: i, isCoolingDown: a }) => !e || !t || a ? !1 : n - r <= i, E = ({ rowCount: e, rowHeightPx: t, overscan: n, visibleTop: r, visibleBottom: i }) => {
-	let a = e * t, o = w(i, 0, a), s = w(r, 0, a), c = Math.floor(s / t) - n, l = Math.ceil(o / t) + n, u = w(c, 0, e);
+}, 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: w(l, u, e)
+		endIndex: C(l, u, e)
 	};
-}, D = ({ columns: u, rows: y, getRowId: S, emptyState: D, className: O, gridTemplateColumns: le, kind: ue, classes: k, virtualization: A, infiniteScroll: j, hasNextPage: de = !1, isLoadingMore: fe = !1, onLoadMore: M, ariaLabel: pe, ariaLabelledBy: N }) => {
-	let { t: P } = t(), F = ue ?? "default", I = pe ?? P("common.table.label");
-	N != null && (I = void 0);
-	let L = g(null), R = g(null), z = g(null), B = g(null), V = g(null), H = g(!1), U = A?.enabled === !0, W = h(() => {
-		if (!U) return null;
-		let e = A.rowHeightPx;
+}, 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 }) => {
+	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(() => {
+		if (!B) return null;
+		let e = E.rowHeightPx;
 		return typeof e == "number" && Number.isFinite(e) && e > 0 ? e : 56;
-	}, [U, A]), G = h(() => {
-		if (!U) return 0;
-		let e = 10, t = A.overscan;
+	}, [B, E]), H = m(() => {
+		if (!B) return 0;
+		let e = 10, t = E.overscan;
 		return typeof t == "number" && Number.isFinite(t) && (e = t), Math.max(0, e);
-	}, [U, A]), K = j?.thresholdPx ?? 800, q = j?.autoLoad ?? !0, J = j?.enabled === !0, Y = J && de && !fe && M != null, X = p(() => {
-		M?.();
-	}, [M]), [me, he] = ce(() => ({
+	}, [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(() => {
+		O?.();
+	}, [O]), [xe, Se] = de(() => ({
 		startIndex: 0,
-		endIndex: Math.min(y.length, 50)
-	})), Z = h(() => b(u.length, le), [u.length, le]), ge = p((t, r, a) => {
-		let o = S(t, r), s = [te({ kind: F }), k?.row];
-		r % 2 == 0 ? s.push(ne({ kind: F }), k?.rowEven) : s.push(re({ kind: F }), k?.rowOdd);
-		let c = { ...Z };
-		return typeof a == "number" && (c.height = a), /* @__PURE__ */ _("div", {
+		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];
+		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", {
 			role: "row",
 			className: e(...s),
 			style: c,
-			children: u.map((r) => {
-				let a = [
-					i({ kind: F }),
-					oe,
-					k?.cell
-				], o = x(r.minVisibleAt);
-				return o != null && a.push(o), r.className != null && a.push(r.className), r.isPrimary && a.push(d, k?.primaryCell), r.align != null && a.push(n({ align: r.align })), /* @__PURE__ */ _("div", {
+			children: d.map((r) => {
+				let i = [
+					a({ kind: j }),
+					ce,
+					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", {
 					role: "cell",
-					className: e(...a),
+					className: e(...i),
 					children: r.cell(t)
 				}, r.id);
 			})
 		}, o);
 	}, [
-		k,
-		u,
-		S,
-		Z,
-		F
-	]), _e = p(() => {
-		if (!U) return;
-		let e = W;
+		w,
+		d,
+		x,
+		Y,
+		j
+	]), X = p(() => {
+		if (!B) return;
+		let e = V;
 		if (e == null) return;
-		let t = R.current;
+		let t = F.current;
 		if (t == null) return;
-		let n = B.current, r = n?.clientHeight ?? window.innerHeight, i = n?.getBoundingClientRect().top ?? 0, a = t.getBoundingClientRect().top - i, o = Math.max(0, -a), s = o + r, c = y.length * e, l = w(s, 0, c), { startIndex: u, endIndex: d } = E({
-			rowCount: y.length,
+		let n = P.current, r = L.current, i = r?.clientHeight ?? window.innerHeight, a = 0;
+		if (K && 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 = v.length * e, c = C(o, 0, s), { startIndex: l, endIndex: u } = pe({
+			rowCount: v.length,
 			rowHeightPx: e,
-			overscan: G,
-			visibleTop: o,
-			visibleBottom: s
+			overscan: H,
+			visibleTop: a,
+			visibleBottom: o
 		});
-		he((e) => e.startIndex === u && e.endIndex === d ? e : {
-			startIndex: u,
-			endIndex: d
-		}), T({
-			autoLoad: q,
-			canLoadMore: Y,
-			totalHeight: c,
-			visibleBottom: l,
-			thresholdPx: K,
-			isCoolingDown: H.current
-		}) && (H.current = !0, X(), window.setTimeout(() => {
-			H.current = !1;
+		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;
 		}, 250));
 	}, [
-		q,
-		Y,
-		U,
-		G,
 		W,
-		y.length,
+		q,
 		K,
-		X
-	]), Q = p(() => {
-		V.current ??= window.requestAnimationFrame(() => {
-			V.current = null, _e();
+		B,
+		H,
+		V,
+		v.length,
+		U,
+		J
+	]), Z = p(() => {
+		R.current ??= window.requestAnimationFrame(() => {
+			R.current = null, X();
 		});
-	}, [_e]);
-	se(() => {
-		if (!U) return;
-		let e = L.current;
-		e != null && (B.current = C(e), Q());
-	}, [U, Q]), m(() => {
-		if (!U) return;
-		let e = B.current ?? window, t = () => {
-			Q();
+	}, [X]);
+	ue(() => {
+		if (!B) return;
+		let e = N.current;
+		e != null && (K ? L.current = P.current : L.current = S(e), Z());
+	}, [
+		K,
+		B,
+		Z
+	]), le(() => {
+		if (!B) return;
+		let e = L.current ?? window, t = () => {
+			Z();
 		};
 		return e.addEventListener("scroll", t, { passive: !0 }), window.addEventListener("resize", t), () => {
 			e.removeEventListener("scroll", t), window.removeEventListener("resize", t);
 		};
-	}, [U, Q]), m(() => {
-		if (U || !J || !q || !Y) return;
-		let e = z.current;
+	}, [B, Z]), le(() => {
+		if (B || !G || !W || !q) return;
+		let e = I.current;
 		if (e == null) return;
-		let t = B.current, n = new IntersectionObserver((e) => {
+		let t = L.current, n = new IntersectionObserver((e) => {
 			let [t] = e;
-			t != null && t.isIntersecting && !H.current && (H.current = !0, X(), window.setTimeout(() => {
-				H.current = !1;
+			t != null && t.isIntersecting && !z.current && (z.current = !0, J(), window.setTimeout(() => {
+				z.current = !1;
 			}, 250));
 		}, {
 			root: t,
-			rootMargin: `0px 0px ${K}px 0px`
+			rootMargin: `0px 0px ${U}px 0px`
 		});
 		return n.observe(e), () => {
 			n.disconnect();
 		};
 	}, [
+		W,
 		q,
-		Y,
-		J,
+		G,
+		B,
 		U,
-		K,
-		X
-	]), se(() => {
-		if (U) return;
-		let e = L.current;
-		e != null && (B.current = C(e));
-	}, [U]);
-	let ve = /* @__PURE__ */ _("div", {
-		className: e(s({ kind: F }), k?.header),
+		J
+	]), ue(() => {
+		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", {
+		className: e(l({ kind: j }), w?.header),
 		role: "rowgroup",
-		children: /* @__PURE__ */ _("div", {
-			className: e(l, k?.headerRow),
+		children: /* @__PURE__ */ g("div", {
+			className: e(ee, w?.headerRow),
 			role: "row",
-			style: Z,
-			children: u.map((t) => {
-				let r = [c({ kind: F }), k?.headerCell], i = x(t.minVisibleAt);
-				return i != null && r.push(i), t.className != null && r.push(t.className), t.isPrimary && r.push(ee, k?.primaryHeaderCell), t.align != null && r.push(n({ align: t.align })), /* @__PURE__ */ _("div", {
+			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", {
 					role: "columnheader",
 					className: e(...r),
 					children: t.header
 				}, t.id);
 			})
 		})
-	}), $;
-	if (y.length === 0) $ = /* @__PURE__ */ _("div", {
-		className: e(o, k?.emptyRow),
+	}), Q;
+	if (v.length === 0) Q = /* @__PURE__ */ g("div", {
+		className: e(c, w?.emptyRow),
 		role: "row",
-		children: /* @__PURE__ */ _("div", {
+		children: /* @__PURE__ */ g("div", {
 			role: "cell",
-			children: D ?? /* @__PURE__ */ _("div", {
-				className: e("ysn84621 txvbqb97 txvbqbva1 txvbqbt6y", k?.emptyCell),
-				children: P("common.table.empty")
+			children: me ?? /* @__PURE__ */ g("div", {
+				className: e("ysn84624 txvbqb97 txvbqbva1 txvbqbt6y", w?.emptyCell),
+				children: A("common.table.empty")
 			})
 		})
 	});
-	else if (U && W != null) {
-		let { startIndex: e, endIndex: t } = me, n = e * W, r = (y.length - t) * W, i = y.slice(e, t);
-		$ = /* @__PURE__ */ v("div", {
-			className: ie,
-			ref: R,
+	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,
+			ref: F,
 			children: [
-				/* @__PURE__ */ _("div", {
+				/* @__PURE__ */ g("div", {
 					className: f,
 					style: { height: n }
 				}),
-				i.map((t, n) => ge(t, e + n, W)),
-				/* @__PURE__ */ _("div", {
+				i.map((t, n) => Ce(t, e + n, V)),
+				/* @__PURE__ */ g("div", {
 					className: f,
 					style: { height: r }
 				})
 			]
 		});
-	} else $ = /* @__PURE__ */ _("div", {
-		ref: R,
-		children: y.map((e, t) => ge(e, t, null))
+	} else Q = /* @__PURE__ */ g("div", {
+		ref: F,
+		children: v.map((e, t) => Ce(e, t, null))
 	});
-	let ye = null;
-	return !U && J && q && (ye = /* @__PURE__ */ _("div", {
-		ref: z,
-		className: ae
-	})), /* @__PURE__ */ v("div", {
-		ref: L,
-		className: e(a({ kind: F }), k?.container, O),
+	let Te = null;
+	!B && G && W && (Te = /* @__PURE__ */ g("div", {
+		ref: I,
+		className: se
+	}));
+	let Ee = null, $ = null;
+	return K && (Ee = s, $ = i), /* @__PURE__ */ _("div", {
+		ref: N,
+		className: e(o({ kind: j }), Ee, w?.container, he),
 		role: "table",
-		"aria-label": I,
-		"aria-labelledby": N,
-		children: [ve, /* @__PURE__ */ v("div", {
-			className: e(r({ kind: F }), k?.body),
+		"aria-label": M,
+		"aria-labelledby": k,
+		"data-scroll-mode": T,
+		children: [we, /* @__PURE__ */ _("div", {
+			ref: P,
+			className: e(r({ kind: j }), $, w?.body),
 			role: "rowgroup",
-			children: [$, ye]
+			"data-scroll-mode": T,
+			children: [Q, Te]
 		})]
 	});
-}, O = {
-	buildInlineTemplate: b,
-	getVisibilityClass: x,
-	isVerticallyScrollable: S,
-	findScrollParent: C,
-	clamp: w,
-	shouldTriggerInfiniteLoad: T,
-	computeVirtualWindowBounds: E
+}, he = {
+	buildInlineTemplate: y,
+	getVisibilityClass: b,
+	isVerticallyScrollable: x,
+	findScrollParent: S,
+	clamp: C,
+	shouldTriggerInfiniteLoad: fe,
+	computeVirtualWindowBounds: pe
 };
 //#endregion
-export { D as VirtualizedConnectionTable, O as __test };
+export { me as VirtualizedConnectionTable, he as __test };
 
 //# 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 { DataTableColumn, DataTableKind, GetRowId } from './DataTable.js';\nimport * as dataTableStyles from './DataTable.css.js';\nimport * as styles from './VirtualizedConnectionTable.css.js';\n\nimport { cx } from '../../theme/tools.js';\nimport { useUiTranslation } from '../../i18n/useUiTranslation.js';\nimport type { SlotClasses } from '../../styles/slots.js';\n\nexport type VirtualizationConfig = {\n  enabled: boolean;\n  rowHeightPx: number;\n  overscan: number;\n};\n\nexport type InfiniteScrollConfig = {\n  enabled: boolean;\n  thresholdPx?: number;\n  autoLoad?: boolean;\n};\n\ntype DataTableSlot =\n  | 'container'\n  | 'header'\n  | 'headerRow'\n  | 'headerCell'\n  | 'primaryHeaderCell'\n  | 'body'\n  | 'row'\n  | 'rowEven'\n  | 'rowOdd'\n  | 'cell'\n  | 'primaryCell'\n  | 'emptyRow'\n  | 'emptyCell';\n\nexport type VirtualizedConnectionTableProps<Row> = {\n  columns: readonly DataTableColumn<Row>[];\n  rows: readonly Row[];\n  getRowId: GetRowId<Row>;\n  emptyState?: JSX.Element;\n  className?: string;\n  gridTemplateColumns?: string;\n  kind?: DataTableKind;\n  classes?: SlotClasses<DataTableSlot>;\n\n  virtualization?: VirtualizationConfig;\n\n  infiniteScroll?: InfiniteScrollConfig;\n  hasNextPage?: boolean;\n  isLoadingMore?: boolean;\n  onLoadMore?: () => void;\n  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  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 bodyRef = useRef<HTMLDivElement>(null);\n  const sentinelRef = useRef<HTMLDivElement>(null);\n  const scrollParentRef = useRef<HTMLElement | null>(null);\n  const rafRef = useRef<number | null>(null);\n  const loadMoreCooldownRef = useRef(false);\n\n  const isVirtualized = virtualization?.enabled === true;\n  const rowHeightPx = useMemo(() => {\n    if (!isVirtualized) {\n      return null;\n    }\n\n    const configuredRowHeight = virtualization.rowHeightPx;\n    if (\n      typeof configuredRowHeight === 'number' &&\n      Number.isFinite(configuredRowHeight) &&\n      configuredRowHeight > 0\n    ) {\n      return configuredRowHeight;\n    }\n\n    return 56;\n  }, [isVirtualized, virtualization]);\n\n  const overscan = useMemo(() => {\n    if (!isVirtualized) {\n      return 0;\n    }\n\n    let nextOverscan = 10;\n    const configuredOverscan = virtualization.overscan;\n    if (\n      typeof configuredOverscan === 'number' &&\n      Number.isFinite(configuredOverscan)\n    ) {\n      nextOverscan = configuredOverscan;\n    }\n    return Math.max(0, nextOverscan);\n  }, [isVirtualized, virtualization]);\n\n  const thresholdPx = infiniteScroll?.thresholdPx ?? 800;\n  const autoLoad = infiniteScroll?.autoLoad ?? true;\n  const infiniteEnabled = infiniteScroll?.enabled === true;\n\n  const canLoadMore =\n    infiniteEnabled && hasNextPage && !isLoadingMore && onLoadMore != null;\n\n  const triggerLoadMore = useCallback(() => {\n    if (onLoadMore == null) {\n      return;\n    }\n    onLoadMore();\n  }, [onLoadMore]);\n\n  const [windowState, setWindowState] = useState<VirtualWindow>(() => {\n    return { startIndex: 0, endIndex: Math.min(rows.length, 50) };\n  });\n\n  const inlineTemplateStyle = useMemo(() => {\n    return buildInlineTemplate(columns.length, gridTemplateColumns);\n  }, [columns.length, gridTemplateColumns]);\n\n  const renderRow = useCallback(\n    (row: Row, index: number, heightPx?: number | null): JSX.Element => {\n      const rowId = getRowId(row, index);\n      const rowClasses = [\n        dataTableStyles.row({ kind: resolvedKind }),\n        classes?.row,\n      ];\n      if (index % 2 === 0) {\n        rowClasses.push(\n          dataTableStyles.rowEven({ kind: resolvedKind }),\n          classes?.rowEven,\n        );\n      } else {\n        rowClasses.push(\n          dataTableStyles.rowOdd({ kind: resolvedKind }),\n          classes?.rowOdd,\n        );\n      }\n      const rowStyle: CSSProperties = { ...inlineTemplateStyle };\n      if (typeof heightPx === 'number') {\n        rowStyle.height = heightPx;\n      }\n      return (\n        <div\n          key={rowId}\n          role=\"row\"\n          className={cx(...rowClasses)}\n          style={rowStyle}\n        >\n          {columns.map((column) => {\n            const cellClasses = [\n              dataTableStyles.cell({ kind: resolvedKind }),\n              styles.singleLineCell,\n              classes?.cell,\n            ];\n            const visibilityClass = getVisibilityClass(column.minVisibleAt);\n            if (visibilityClass != null) {\n              cellClasses.push(visibilityClass);\n            }\n            if (column.className != null) {\n              cellClasses.push(column.className);\n            }\n            if (column.isPrimary) {\n              cellClasses.push(\n                dataTableStyles.primaryCell,\n                classes?.primaryCell,\n              );\n            }\n            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 scrollParent = scrollParentRef.current;\n    const viewportHeight = scrollParent?.clientHeight ?? window.innerHeight;\n    const parentRectTop = scrollParent?.getBoundingClientRect().top ?? 0;\n    const bodyRectTop = bodyEl.getBoundingClientRect().top;\n    const relativeTop = bodyRectTop - parentRectTop;\n    const visibleTop = Math.max(0, -relativeTop);\n    const visibleBottom = visibleTop + viewportHeight;\n\n    const totalHeight = rows.length * height;\n    const clampedBottom = clamp(visibleBottom, 0, totalHeight);\n    const { 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    isVirtualized,\n    overscan,\n    rowHeightPx,\n    rows.length,\n    thresholdPx,\n    triggerLoadMore,\n  ]);\n\n  const scheduleCompute = useCallback(() => {\n    if (rafRef.current != null) {\n      return;\n    }\n    rafRef.current = window.requestAnimationFrame(() => {\n      rafRef.current = null;\n      computeVirtualWindow();\n    });\n  }, [computeVirtualWindow]);\n\n  useLayoutEffect(() => {\n    if (!isVirtualized) {\n      return;\n    }\n    const container = containerRef.current;\n    if (container == null) {\n      return;\n    }\n    scrollParentRef.current = findScrollParent(container);\n    scheduleCompute();\n  }, [isVirtualized, scheduleCompute]);\n\n  useEffect(() => {\n    if (!isVirtualized) {\n      return undefined;\n    }\n    const scrollParent = scrollParentRef.current;\n    const target: HTMLElement | Window = scrollParent ?? window;\n\n    const handler = () => {\n      scheduleCompute();\n    };\n\n    target.addEventListener('scroll', handler, { passive: true });\n    window.addEventListener('resize', handler);\n\n    return () => {\n      target.removeEventListener('scroll', handler);\n      window.removeEventListener('resize', handler);\n    };\n  }, [isVirtualized, scheduleCompute]);\n\n  useEffect(() => {\n    if (isVirtualized) {\n      return undefined;\n    }\n    if (!infiniteEnabled || !autoLoad || !canLoadMore) {\n      return undefined;\n    }\n    const sentinel = sentinelRef.current;\n    if (sentinel == null) {\n      return undefined;\n    }\n\n    const scrollParent = scrollParentRef.current;\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        const [entry] = entries;\n        if (entry == null) {\n          return;\n        }\n\n        if (entry.isIntersecting && !loadMoreCooldownRef.current) {\n          loadMoreCooldownRef.current = true;\n          triggerLoadMore();\n          window.setTimeout(() => {\n            loadMoreCooldownRef.current = false;\n          }, 250);\n        }\n      },\n      {\n        root: scrollParent,\n        rootMargin: `0px 0px ${thresholdPx}px 0px`,\n      },\n    );\n\n    observer.observe(sentinel);\n    return () => {\n      observer.disconnect();\n    };\n  }, [\n    autoLoad,\n    canLoadMore,\n    infiniteEnabled,\n    isVirtualized,\n    thresholdPx,\n    triggerLoadMore,\n  ]);\n\n  useLayoutEffect(() => {\n    if (isVirtualized) {\n      return;\n    }\n    const container = containerRef.current;\n    if (container == null) {\n      return;\n    }\n    scrollParentRef.current = findScrollParent(container);\n  }, [isVirtualized]);\n\n  const headerRow = (\n    <div\n      className={cx(\n        dataTableStyles.header({ kind: resolvedKind }),\n        classes?.header,\n      )}\n      role=\"rowgroup\"\n    >\n      <div\n        className={cx(dataTableStyles.headerRow, classes?.headerRow)}\n        role=\"row\"\n        style={inlineTemplateStyle}\n      >\n        {columns.map((column) => {\n          const headerClasses = [\n            dataTableStyles.headerCell({ kind: resolvedKind }),\n            classes?.headerCell,\n          ];\n          const visibilityClass = getVisibilityClass(column.minVisibleAt);\n          if (visibilityClass != null) {\n            headerClasses.push(visibilityClass);\n          }\n          if (column.className != null) {\n            headerClasses.push(column.className);\n          }\n          if (column.isPrimary) {\n            headerClasses.push(\n              dataTableStyles.primaryHeaderCell,\n              classes?.primaryHeaderCell,\n            );\n          }\n          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  return (\n    <div\n      ref={containerRef}\n      className={cx(\n        dataTableStyles.container({ kind: resolvedKind }),\n        classes?.container,\n        className,\n      )}\n      role=\"table\"\n      aria-label={tableAriaLabel}\n      aria-labelledby={ariaLabelledBy}\n    >\n      {headerRow}\n      <div\n        className={cx(\n          dataTableStyles.body({ kind: resolvedKind }),\n          classes?.body,\n        )}\n        role=\"rowgroup\"\n      >\n        {bodyRows}\n        {sentinelNode}\n      </div>\n    </div>\n  );\n};\n\nexport const __test = {\n  buildInlineTemplate,\n  getVisibilityClass,\n  isVerticallyScrollable,\n  findScrollParent,\n  clamp,\n  shouldTriggerInfiniteLoad,\n  computeVirtualWindowBounds,\n} as const;\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} 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":"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"}

package/lib/esm/components/layout/AppShell.js

@@ -1,7 +1,7 @@
 import { PageShell as e } from "./PageShell.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/components/layout/AppShell.tsx
-var n = ({ sidebar: n, children: r, breadcrumbSlot: i, desktopSidebarOpen: a, mobileSidebar: o, onOpenDesktopSidebar: s, openDesktopSidebarLabel: c, actions: l, tabs: u }) => /* @__PURE__ */ t(e, {
+var n = ({ sidebar: n, children: r, breadcrumbSlot: i, desktopSidebarOpen: a, mobileSidebar: o, onOpenDesktopSidebar: s, openDesktopSidebarLabel: c, actions: l, tabs: u, contentScrollMode: d }) => /* @__PURE__ */ t(e, {
 	sidebar: n,
 	mobileSidebar: o,
 	desktopSidebarOpen: a,
@@ -10,6 +10,7 @@ var n = ({ sidebar: n, children: r, breadcrumbSlot: i, desktopSidebarOpen: a, mo
 	breadcrumbSlot: i,
 	actions: l,
 	tabs: u,
+	contentScrollMode: d,
 	children: r
 });
 //#endregion

package/lib/esm/components/layout/AppShell.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.js","names":[],"sources":["../../../../src/components/layout/AppShell.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport {\n  PageShell,\n  type PageShellActions,\n  type PageShellTab,\n} from './PageShell.js';\n\nexport type AppShellProps = {\n  sidebar: ReactNode;\n  mobileSidebar?: ReactNode;\n  desktopSidebarOpen?: boolean;\n  onOpenDesktopSidebar?: () => void;\n  openDesktopSidebarLabel?: string;\n  children: ReactNode;\n  breadcrumbSlot?: ReactNode;\n  actions?: PageShellActions;\n  tabs?: PageShellTab[];\n};\n\nexport const AppShell = ({\n  sidebar,\n  children,\n  breadcrumbSlot,\n  desktopSidebarOpen,\n  mobileSidebar,\n  onOpenDesktopSidebar,\n  openDesktopSidebarLabel,\n  actions,\n  tabs,\n}: AppShellProps): JSX.Element => {\n  return (\n    <PageShell\n      sidebar={sidebar}\n      mobileSidebar={mobileSidebar}\n      desktopSidebarOpen={desktopSidebarOpen}\n      onOpenDesktopSidebar={onOpenDesktopSidebar}\n      openDesktopSidebarLabel={openDesktopSidebarLabel}\n      breadcrumbSlot={breadcrumbSlot}\n      actions={actions}\n      tabs={tabs}\n    >\n      {children}\n    </PageShell>\n  );\n};\n\nexport default AppShell;\n"],"mappings":";;;AAoBA,IAAa,KAAY,EACvB,YACA,aACA,mBACA,uBACA,kBACA,yBACA,4BACA,YACA,cAGE,kBAAC,GAAD;CACW;CACM;CACK;CACE;CACG;CACT;CACP;CACH;CAEL;CACS,CAAA"}
+{"version":3,"file":"AppShell.js","names":[],"sources":["../../../../src/components/layout/AppShell.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport {\n  PageShell,\n  type PageShellActions,\n  type PageShellContentScrollMode,\n  type PageShellTab,\n} from './PageShell.js';\n\nexport type AppShellProps = {\n  sidebar: ReactNode;\n  mobileSidebar?: ReactNode;\n  desktopSidebarOpen?: boolean;\n  onOpenDesktopSidebar?: () => void;\n  openDesktopSidebarLabel?: string;\n  children: ReactNode;\n  breadcrumbSlot?: ReactNode;\n  actions?: PageShellActions;\n  tabs?: PageShellTab[];\n  contentScrollMode?: PageShellContentScrollMode;\n};\n\nexport const AppShell = ({\n  sidebar,\n  children,\n  breadcrumbSlot,\n  desktopSidebarOpen,\n  mobileSidebar,\n  onOpenDesktopSidebar,\n  openDesktopSidebarLabel,\n  actions,\n  tabs,\n  contentScrollMode,\n}: AppShellProps): JSX.Element => {\n  return (\n    <PageShell\n      sidebar={sidebar}\n      mobileSidebar={mobileSidebar}\n      desktopSidebarOpen={desktopSidebarOpen}\n      onOpenDesktopSidebar={onOpenDesktopSidebar}\n      openDesktopSidebarLabel={openDesktopSidebarLabel}\n      breadcrumbSlot={breadcrumbSlot}\n      actions={actions}\n      tabs={tabs}\n      contentScrollMode={contentScrollMode}\n    >\n      {children}\n    </PageShell>\n  );\n};\n\nexport default AppShell;\n"],"mappings":";;;AAsBA,IAAa,KAAY,EACvB,YACA,aACA,mBACA,uBACA,kBACA,yBACA,4BACA,YACA,SACA,2BAGE,kBAAC,GAAD;CACW;CACM;CACK;CACE;CACG;CACT;CACP;CACH;CACa;CAElB;CACS,CAAA"}

package/lib/esm/components/layout/PageShell.css.js

@@ -2,16 +2,16 @@
 /* empty css                         */
 import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
 //#region src/components/layout/PageShell.css.ts
-var t = "_1kley2d0 txvbqb9ip txvbqbu7g txvbqbv49 txvbqbv07", n = "_1kley2d1 txvbqbnvy txvbqboj7 txvbqbp6g txvbqbly7 txvbqbcx7 txvbqbcge txvbqb9my txvbqbk5y", r = "_1kley2d2 txvbqb9ip txvbqbc7 txvbqbanp txvbqbaon txvbqbk5y txvbqbahy txvbqbaie txvbqbcgg txvbqbcge", i = "_1kley2d3 txvbqbpty txvbqbt7y txvbqbcx7 txvbqbaj7 txvbqb9ip txvbqbl7g", a = "_1kley2d4", o = "_1kley2d5", s = "_1kley2d7 _1kley2d6 txvbqb9ip txvbqbcgg", c = "_1kley2d8", l = "_1kley2d9", u = "_1kley2da txvbqb9hy txvbqb9jn txvbqbcp txvbqbdoy txvbqbtyp txvbqbc7p txvbqb1rp txvbqb1qg txvbqb1cp txvbqbwg txvbqbv41 txvbqbv9z txvbqbv txvbqbaj7", d = "_1kley2dc _1kley2db txvbqb9jg txvbqb9i5 txvbqbcp txvbqbdoy txvbqbtyp txvbqbc7p txvbqb1rp txvbqb1qg txvbqb1cp txvbqbwg txvbqbv41 txvbqbv9z txvbqbv txvbqbaj7 txvbqb77 txvbqb6x txvbqb7k", f = "_1kley2dd txvbqb9hy txvbqb9jn txvbqbpu7 txvbqbpte txvbqbpug txvbqbpve txvbqbt7y txvbqbt8w txvbqbuwg txvbqbcp txvbqbdoy txvbqbtyp txvbqbc7p txvbqb1rp txvbqb1qg txvbqb1cp txvbqbwg txvbqbv41 txvbqbv9z txvbqbv", p = "_1kley2de txvbqb9my txvbqbcgg txvbqbk5y txvbqbjh7 txvbqb9ip txvbqbai7 txvbqbv41 txvbqbl7g txvbqb1rp txvbqb1cp txvbqb1qg txvbqbwp txvbqb8qy", m = "_1kley2df txvbqbcgg txvbqbcge", h = "_1kley2dg txvbqb9ip txvbqbai7 txvbqbjh7 txvbqbcgg txvbqbcge", g = "_1kley2dh txvbqb9np txvbqbv41 txvbqb1ry txvbqb1cp txvbqb1qg txvbqbwp", _ = "_1kley2di", v = "_1kley2dk _1kley2dj txvbqbeg txvbqbv0t txvbqbb txvbqb9np txvbqbk6y txvbqbptg txvbqbtx7", y = "_1kley2dl txvbqb9i7 txvbqb9i5", b = "_1kley2dm txvbqbpty txvbqbt7y txvbqbuvp txvbqb9ip txvbqbai7 txvbqbaog txvbqbv41 txvbqb12g txvbqb1qg txvbqb62p txvbqb3ny txvbqbnwp txvbqbojy txvbqbly7 txvbqbp6p", x = "_1kley2dn txvbqb9ip txvbqbajy txvbqbcg txvbqbdpp txvbqbaop txvbqbu7g", S = "_1kley2do txvbqb9ip txvbqbcp txvbqbaog txvbqb9my txvbqbk5y", C = "_1kley2dp txvbqb9ip txvbqbai7 txvbqbao7 txvbqbk5y", w = "_1kley2dq txvbqb9ip txvbqbajy txvbqbcp txvbqb8v7 txvbqbqhy txvbqbfby txvbqbfcp txvbqblag txvbqbva1 txvbqb8p", T = "_1kley2dr txvbqb9ip txvbqbcp txvbqbany txvbqbjd7", E = "_1kley2dt _1kley2ds txvbqbv9z txvbqb3b txvbqbamg txvbqbl7g txvbqbt7g txvbqbuxg", D = "_1kley2du txvbqbv9z txvbqbamp txvbqbl7g txvbqbt7g txvbqbuxg", O = "_1kley2dv txvbqbvab txvbqb8p", k = "_1kley2dw txvbqb9ip txvbqbajy txvbqbao7 txvbqbdp7", A = "_1kley2dx txvbqb9jg", j = "_1kley2dy txvbqbu7g txvbqb9ip txvbqbajy txvbqbao7", M = e({
-	defaultClassName: "_1kley2d13 _1kley2d10 _1kley2dz txvbqbcp txvbqbv45 txvbqb1rp txvbqbva1 txvbqb9jg txvbqb8y txvbqbamg txvbqbn6y txvbqbn8y txvbqb3b txvbqb77 txvbqb6x txvbqb7k",
+var t = "_1kley2d0 txvbqb9ip txvbqbu7g txvbqbv49 txvbqbv07", n = "_1kley2d1 txvbqbnvy txvbqboj7 txvbqbp6g txvbqbly7 txvbqbcx7 txvbqbcge txvbqb9my txvbqbk5y", r = "_1kley2d2 txvbqbcx7 txvbqbjh7 txvbqbl7g", i = "_1kley2d3 txvbqb9ip txvbqbc7 txvbqbanp txvbqbaon txvbqbk5y txvbqbahy txvbqbaie txvbqbcgg txvbqbcge", a = "_1kley2d4 txvbqbpty txvbqbt7y txvbqbcx7 txvbqbaj7 txvbqb9ip txvbqbl7g", o = "_1kley2d5", s = "_1kley2d6", c = "_1kley2d8 _1kley2d7 txvbqb9ip txvbqbcgg", l = "_1kley2d9", u = "_1kley2da", d = "_1kley2db txvbqb9hy txvbqb9jn txvbqbcp txvbqbdoy txvbqbtyp txvbqbc7p txvbqb1rp txvbqb1qg txvbqb1cp txvbqbwg txvbqbv41 txvbqbv9z txvbqbv txvbqbaj7", f = "_1kley2dd _1kley2dc txvbqb9jg txvbqb9i5 txvbqbcp txvbqbdoy txvbqbtyp txvbqbc7p txvbqb1rp txvbqb1qg txvbqb1cp txvbqbwg txvbqbv41 txvbqbv9z txvbqbv txvbqbaj7 txvbqb77 txvbqb6x txvbqb7k", p = "_1kley2de txvbqb9hy txvbqb9jn txvbqbpu7 txvbqbpte txvbqbpug txvbqbpve txvbqbt7y txvbqbt8w txvbqbuwg txvbqbcp txvbqbdoy txvbqbtyp txvbqbc7p txvbqb1rp txvbqb1qg txvbqb1cp txvbqbwg txvbqbv41 txvbqbv9z txvbqbv", m = "_1kley2df txvbqb9my txvbqbcgg txvbqbk5y txvbqbjh7 txvbqb9ip txvbqbai7 txvbqbv41 txvbqbl7g txvbqb1rp txvbqb1cp txvbqb1qg txvbqbwp txvbqb8qy", h = "_1kley2dg txvbqbjh7 txvbqbl7g", g = "_1kley2dh txvbqbcgg txvbqbcge", _ = "_1kley2di txvbqb9ip txvbqbai7 txvbqbjh7 txvbqbcgg txvbqbcge", v = "_1kley2dj txvbqb9np txvbqbv41 txvbqb1ry txvbqb1cp txvbqb1qg txvbqbwp", y = "_1kley2dk", b = "_1kley2dm _1kley2dl txvbqbeg txvbqbv0t txvbqbb txvbqb9np txvbqbk6y txvbqbptg txvbqbtx7", x = "_1kley2dn txvbqb9i7 txvbqb9i5", S = "_1kley2do txvbqbpty txvbqbt7y txvbqbuvp txvbqb9ip txvbqbai7 txvbqbaog txvbqbv41 txvbqb12g txvbqb1qg txvbqb62p txvbqb3ny txvbqbnwp txvbqbojy txvbqbly7 txvbqbp6p", C = "_1kley2dp txvbqb9ip txvbqbajy txvbqbcg txvbqbdpp txvbqbaop txvbqbu7g", w = "_1kley2dq txvbqb9ip txvbqbcp txvbqbaog txvbqb9my txvbqbk5y", T = "_1kley2dr txvbqb9ip txvbqbai7 txvbqbao7 txvbqbk5y", E = "_1kley2ds txvbqb9ip txvbqbajy txvbqbcp txvbqb8v7 txvbqbqhy txvbqbfby txvbqbfcp txvbqblag txvbqbva1 txvbqb8p", D = "_1kley2dt txvbqb9ip txvbqbcp txvbqbany txvbqbjd7", O = "_1kley2dv _1kley2du txvbqbv9z txvbqb3b txvbqbamg txvbqbl7g txvbqbt7g txvbqbuxg", k = "_1kley2dw txvbqbv9z txvbqbamp txvbqbl7g txvbqbt7g txvbqbuxg", A = "_1kley2dx txvbqbvab txvbqb8p", j = "_1kley2dy txvbqb9ip txvbqbajy txvbqbao7 txvbqbdp7", M = "_1kley2dz txvbqb9jg", N = "_1kley2d10 txvbqbu7g txvbqb9ip txvbqbajy txvbqbao7", P = e({
+	defaultClassName: "_1kley2d15 _1kley2d12 _1kley2d11 txvbqbcp txvbqbv45 txvbqb1rp txvbqbva1 txvbqb9jg txvbqb8y txvbqbamg txvbqbn6y txvbqbn8y txvbqb3b txvbqb77 txvbqb6x txvbqb7k",
 	variantClassNames: {
 		state: {
-			default: "_1kley2d14",
-			active: "_1kley2d15 _1kley2d11 txvbqbv2z txvbqbv6f txvbqb8pg"
+			default: "_1kley2d16",
+			active: "_1kley2d17 _1kley2d13 txvbqbv2z txvbqbv6f txvbqb8pg"
 		},
 		mode: {
-			link: "_1kley2d16",
-			static: "_1kley2d17 _1kley2d12 txvbqbf"
+			link: "_1kley2d18",
+			static: "_1kley2d19 _1kley2d14 txvbqbf"
 		}
 	},
 	defaultVariants: {
@@ -19,8 +19,8 @@ var t = "_1kley2d0 txvbqb9ip txvbqbu7g txvbqbv49 txvbqbv07", n = "_1kley2d1 txvb
 		mode: "link"
 	},
 	compoundVariants: []
-}), N = "_1kley2d18 txvbqb9my txvbqbjh7 txvbqb9ip txvbqbai7 txvbqbl77 txvbqblbg txvbqblbe";
+}), F = "_1kley2d1a txvbqb9my txvbqbjh7 txvbqb9ip txvbqbai7 txvbqbl77 txvbqblbg txvbqblbe", I = "_1kley2d1b txvbqbl7g txvbqbjh7";
 //#endregion
-export { k as actionGroup, D as breadcrumbCurrent, T as breadcrumbItem, E as breadcrumbLink, w as breadcrumbList, C as breadcrumbNav, O as breadcrumbSeparator, N as content, d as desktopSidebarToggle, b as header, S as headerLeading, x as headerRow, p as mainColumn, m as mainColumnWithSidePanel, c as mobileSidebarBackdrop, l as mobileSidebarBackdropOpen, f as mobileSidebarClose, u as mobileSidebarToggle, n as page, r as pageWithSidePanel, A as secondaryAction, t as shell, h as sidePanel, _ as sidePanelResizable, v as sidePanelResizer, y as sidePanelResizerHiddenOnMobile, g as sidePanelSurface, i as sidebarColumn, a as sidebarColumnMobile, o as sidebarColumnMobileOpen, s as sidebarInner, M as tabRecipe, j as tabsRow };
+export { j as actionGroup, k as breadcrumbCurrent, D as breadcrumbItem, O as breadcrumbLink, E as breadcrumbList, T as breadcrumbNav, A as breadcrumbSeparator, F as content, I as contentContained, f as desktopSidebarToggle, S as header, w as headerLeading, C as headerRow, m as mainColumn, h as mainColumnContained, g as mainColumnWithSidePanel, l as mobileSidebarBackdrop, u as mobileSidebarBackdropOpen, p as mobileSidebarClose, d as mobileSidebarToggle, n as page, r as pageContained, i as pageWithSidePanel, M as secondaryAction, t as shell, _ as sidePanel, y as sidePanelResizable, b as sidePanelResizer, x as sidePanelResizerHiddenOnMobile, v as sidePanelSurface, a as sidebarColumn, o as sidebarColumnMobile, s as sidebarColumnMobileOpen, c as sidebarInner, P as tabRecipe, N as tabsRow };
 
 //# sourceMappingURL=PageShell.css.js.map