@galaxy-io/dls 1.2.0 → 1.2.2

package/dist/styles.css

@@ -159,13 +159,12 @@
 .s1we9pi1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}
 .ezfy353{position:absolute;top:0;left:0;right:0;bottom:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;pointer-events:none;}.ezfy353>*{pointer-events:auto;}
 .l1pcw3m6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;height:var(--l1pcw3m6-0);}.l1pcw3m6>td{border-bottom:0.5px solid var(--l1pcw3m6-1);background-color:var(--l1pcw3m6-2);}
-.eo1carc{display:block;width:100%;height:var(--eo1carc-0);pointer-events:none;}
-.e8l9d05{display:block;width:100%;height:100%;padding:0;border:none;background:transparent;box-sizing:border-box;}
-.e12m9dma{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:30;}
-.e1birhg7{position:absolute;top:var(--e1birhg7-0);left:var(--e1birhg7-1);width:var(--e1birhg7-2);display:-ms-grid;display:grid;-ms-grid-columns:44px minmax(0, 1fr);grid-template-columns:44px minmax(0, 1fr);box-sizing:border-box;background-color:var(--e1birhg7-3);border-bottom:var(--e1birhg7-4);overflow:hidden;contain:layout paint;overscroll-behavior:auto;pointer-events:auto;}
-.e2tyxoq{background-color:var(--e2tyxoq-0);border-right:0.5px solid var(--e2tyxoq-1);min-width:44px;}
-.ew9y6zt{min-width:0;width:100%;border-top:0.5px solid var(--ew9y6zt-0);}
-.e2jf90d{width:100%;box-sizing:border-box;overscroll-behavior:auto;}
+.eo1carc{display:block;width:100%;min-width:var(--eo1carc-0);}
+.e8l9d05{display:block;width:100%;padding:0;box-sizing:border-box;background-color:var(--e8l9d05-0);border-bottom:var(--e8l9d05-1);}
+.e12m9dma{position:-webkit-sticky;position:sticky;left:0;width:var(--e12m9dma-0);display:-ms-grid;display:grid;-ms-grid-columns:44px minmax(0, 1fr);grid-template-columns:44px minmax(0, 1fr);box-sizing:border-box;}
+.e1birhg7{background-color:var(--e1birhg7-0);border-right:0.5px solid var(--e1birhg7-1);min-width:44px;}
+.e2tyxoq{min-width:0;width:100%;border-top:0.5px solid var(--e2tyxoq-0);}
+.ew9y6zt{width:100%;box-sizing:border-box;overscroll-behavior:auto;}
 .c1bx58xl{position:var(--c1bx58xl-0);z-index:var(--c1bx58xl-1);left:var(--c1bx58xl-2);right:var(--c1bx58xl-3);-webkit-flex:var(--c1bx58xl-4);-ms-flex:var(--c1bx58xl-4);flex:var(--c1bx58xl-4);padding:0 12px;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:var(--c1bx58xl-5);-ms-flex-pack:var(--c1bx58xl-5);-webkit-justify-content:var(--c1bx58xl-5);justify-content:var(--c1bx58xl-5);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:var(--c1bx58xl-6);background-color:var(--c1bx58xl-7);border-right:var(--c1bx58xl-8);border-left:var(--c1bx58xl-9);}.c1bx58xl:hover{background-color:var(--c1bx58xl-10);}
 .sgqglvy{width:6px;height:6px;border-radius:50%;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin-right:6px;background-color:var(--sgqglvy-0);}
 .ejxsxoj{position:absolute;inset:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 4px;z-index:1;background-color:var(--ejxsxoj-0);border:1.5px solid var(--ejxsxoj-1);border-radius:2px;}

package/dist/table/InfiniteTable.d.ts

@@ -1,5 +1,11 @@
 import React, { type ReactNode } from "react";
 import { type OnChangeFn as TanstackOnChangeFn, type Row as TanstackRow, type RowSelectionState as TanstackRowSelectionState, type SortingState as TanstackSortingState, type Table as TanstackTable } from "@tanstack/react-table";
+export declare enum TableVariant {
+    BASE = "BASE",
+    PRIMARY = "PRIMARY",
+    SECONDARY = "SECONDARY",
+    TERTIARY = "TERTIARY"
+}
 export declare enum TableDensity {
     SMALL = "SMALL",
     MEDIUM = "MEDIUM",
@@ -53,6 +59,7 @@ export interface InfiniteTableProps<TData> {
     fillWidth?: boolean;
     fillHeight?: boolean;
     density?: TableDensity;
+    variant?: TableVariant;
     hasNextPage?: boolean;
     isFetchingNextPage?: boolean;
     fetchNextPage?: () => void;

package/dist/table/InfiniteTable.js

@@ -6,11 +6,18 @@ import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
 /* empty css                        */
 import { styled } from "@linaria/react";
 import { match } from "ts-pattern";
-import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CaretDownIcon, CaretRightIcon, CaretUpDownIcon, SortAscendingIcon, SortDescendingIcon } from "@phosphor-icons/react";
 import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
 //#region src/table/InfiniteTable.tsx
+var TableVariant = /* @__PURE__ */ function(TableVariant) {
+	TableVariant["BASE"] = "BASE";
+	TableVariant["PRIMARY"] = "PRIMARY";
+	TableVariant["SECONDARY"] = "SECONDARY";
+	TableVariant["TERTIARY"] = "TERTIARY";
+	return TableVariant;
+}({});
 var TableDensity = /* @__PURE__ */ function(TableDensity) {
 	TableDensity["SMALL"] = "SMALL";
 	TableDensity["MEDIUM"] = "MEDIUM";
@@ -46,6 +53,15 @@ var TABLE_DENSITY_TO_BUTTON_SIZE_MAP = {
 	["MEDIUM"]: ButtonSize.SMALL,
 	["LARGE"]: ButtonSize.MEDIUM
 };
+function getVariantBackgroundColor(theme, variant) {
+	return match(variant).with("BASE", () => theme.color.background.base).with("PRIMARY", () => theme.color.background.primary).with("SECONDARY", () => theme.color.background.secondary).with("TERTIARY", () => theme.color.background.tertiary).with(void 0, () => theme.color.background.primary).exhaustive();
+}
+function getVariantHoverBackgroundColor(theme, variant) {
+	return match(variant).with("BASE", () => theme.color.background.tertiary).with("PRIMARY", () => theme.color.background.tertiary).with("SECONDARY", () => theme.color.background.tertiary).with("TERTIARY", () => theme.color.background.secondary).with(void 0, () => theme.color.background.tertiary).exhaustive();
+}
+function getVariantSelectedBackgroundColor(theme, variant) {
+	return match(variant).with("BASE", () => theme.color.background.secondary).with("PRIMARY", () => theme.color.background.secondary).with("SECONDARY", () => theme.color.background.primary).with("TERTIARY", () => theme.color.background.primary).with(void 0, () => theme.color.background.secondary).exhaustive();
+}
 var _exp = () => ({ $width, $fillWidth }) => {
 	if ($fillWidth) return "100%";
 	if ($width) return getCssSizeValue($width);
@@ -89,15 +105,15 @@ var TableBody = /*#__PURE__*/ styled("tbody")({
 });
 var _exp4 = () => ({ $isClickable }) => $isClickable ? "pointer" : "default";
 var _exp5 = () => ({ $density }) => match($density).with("SMALL", () => "32px").with("MEDIUM", () => "48px").with("LARGE", () => "56px").with(void 0, () => "48px").exhaustive();
-var _exp6 = () => ({ $isSelected, theme }) => $isSelected ? theme.color.background.secondary : theme.color.background.primary;
+var _exp6 = () => ({ $isSelected, $variant, theme }) => $isSelected ? getVariantSelectedBackgroundColor(theme, $variant) : getVariantBackgroundColor(theme, $variant);
 var _exp7 = () => ({ $isExpanded, $isLastRow, theme }) => {
 	if ($isExpanded || $isLastRow) return "none";
 	return `0.5px solid ${theme.color.border.primary}`;
 };
-var _exp8 = () => ({ $isClickable, $isSelected, theme }) => {
-	if ($isSelected) return theme.color.background.secondary;
-	if ($isClickable) return theme.color.background.tertiary;
-	return theme.color.background.primary;
+var _exp8 = () => ({ $isClickable, $isSelected, $variant, theme }) => {
+	if ($isSelected) return getVariantSelectedBackgroundColor(theme, $variant);
+	if ($isClickable) return getVariantHoverBackgroundColor(theme, $variant);
+	return getVariantBackgroundColor(theme, $variant);
 };
 var TableRow = withTheme(/*#__PURE__*/ styled("tr")({
 	name: "TableRow",
@@ -134,7 +150,7 @@ var _exp10 = () => ({ $maxWidth }) => {
 };
 var _exp11 = () => ({ $align }) => match($align).with("LEFT", () => "left").with("CENTER", () => "center").with("RIGHT", () => "right").with(void 0, () => "left").exhaustive();
 var _exp12 = () => ({ theme }) => theme.color.border.primary;
-var _exp13 = () => ({ theme }) => theme.color.background.primary;
+var _exp13 = () => ({ $variant, theme }) => getVariantBackgroundColor(theme, $variant);
 var _exp14 = () => ({ $align }) => match($align).with("LEFT", () => "flex-start").with("CENTER", () => "center").with("RIGHT", () => "flex-end").with(void 0, () => "flex-start").exhaustive();
 var _exp15 = () => ({ $isSortable }) => {
 	if ($isSortable) return "pointer";
@@ -200,8 +216,8 @@ var _exp25 = () => ({ $maxWidth }) => {
 };
 var _exp26 = () => ({ $align }) => match($align).with("LEFT", () => "left").with("CENTER", () => "center").with("RIGHT", () => "right").with(void 0, () => "left").exhaustive();
 var _exp27 = () => ({ $align }) => match($align).with("LEFT", () => "flex-start").with("CENTER", () => "center").with("RIGHT", () => "flex-end").with(void 0, () => "flex-start").exhaustive();
-var _exp28 = () => ({ $pin, theme }) => {
-	if ($pin) return theme.color.background.primary;
+var _exp28 = () => ({ $pin, $variant, theme }) => {
+	if ($pin) return getVariantBackgroundColor(theme, $variant);
 	return "transparent";
 };
 var _exp29 = () => ({ $pin }) => {
@@ -266,7 +282,7 @@ var EmptyContentWrapper = /*#__PURE__*/ styled("div")({
 });
 var _exp35 = () => ({ $density }) => match($density).with("SMALL", () => "32px").with("MEDIUM", () => "48px").with("LARGE", () => "56px").with(void 0, () => "48px").exhaustive();
 var _exp36 = () => ({ theme }) => theme.color.border.primary;
-var _exp37 = () => ({ theme }) => theme.color.background.primary;
+var _exp37 = () => ({ $variant, theme }) => getVariantBackgroundColor(theme, $variant);
 var LoadingRowWrapper = withTheme(/*#__PURE__*/ styled("tr")({
 	name: "LoadingRowWrapper",
 	class: "l1pcw3m6",
@@ -277,72 +293,59 @@ var LoadingRowWrapper = withTheme(/*#__PURE__*/ styled("tr")({
 		"l1pcw3m6-2": [_exp37()]
 	}
 }));
-var _exp38 = () => ({ $height }) => `${$height}px`;
-var ExpandedSpacerRow = /*#__PURE__*/ styled("tr")({
-	name: "ExpandedSpacerRow",
+var _exp38 = () => ({ $minWidth }) => `${$minWidth}px`;
+var ExpandedRow = /*#__PURE__*/ styled("tr")({
+	name: "ExpandedRow",
 	class: "eo1carc",
 	propsAsIs: false,
 	vars: { "eo1carc-0": [_exp38()] }
 });
-var ExpandedSpacerCell = withTheme(/*#__PURE__*/ styled("td")({
-	name: "ExpandedSpacerCell",
+var _exp39 = () => ({ $variant, theme }) => getVariantBackgroundColor(theme, $variant);
+var _exp40 = () => ({ $isLastRow, theme }) => $isLastRow ? "none" : `0.5px solid ${theme.color.border.primary}`;
+var ExpandedRowCell = withTheme(/*#__PURE__*/ styled("td")({
+	name: "ExpandedRowCell",
 	class: "e8l9d05",
-	propsAsIs: false
-}));
-var ExpandedOverlayLayer = /*#__PURE__*/ styled("div")({
-	name: "ExpandedOverlayLayer",
-	class: "e12m9dma",
-	propsAsIs: false
-});
-var _exp39 = () => ({ $top }) => `${$top}px`;
-var _exp40 = () => ({ $left }) => `${$left}px`;
-var _exp41 = () => ({ $width }) => `${$width}px`;
-var _exp43 = () => ({ theme }) => theme.color.background.primary;
-var _exp44 = () => ({ $isLastRow, theme }) => $isLastRow ? "none" : `0.5px solid ${theme.color.border.primary}`;
-var ExpandedOverlay = withTheme(/*#__PURE__*/ styled("div")({
-	name: "ExpandedOverlay",
-	class: "e1birhg7",
 	propsAsIs: false,
 	vars: {
-		"e1birhg7-0": [_exp39()],
-		"e1birhg7-1": [_exp40()],
-		"e1birhg7-2": [_exp41()],
-		"e1birhg7-3": [_exp43()],
-		"e1birhg7-4": [_exp44()]
+		"e8l9d05-0": [_exp39()],
+		"e8l9d05-1": [_exp40()]
 	}
 }));
-var _exp45 = () => ({ theme }) => theme.color.background.primary;
-var _exp46 = () => ({ theme }) => theme.color.border.primary;
+var _exp41 = () => ({ $width }) => $width !== void 0 ? `${$width}px` : "100%";
+var ExpandedViewport = /*#__PURE__*/ styled("div")({
+	name: "ExpandedViewport",
+	class: "e12m9dma",
+	propsAsIs: false,
+	vars: { "e12m9dma-0": [_exp41()] }
+});
+var _exp43 = () => ({ $variant, theme }) => getVariantBackgroundColor(theme, $variant);
+var _exp44 = () => ({ theme }) => theme.color.border.primary;
 var ExpandedGutter = withTheme(/*#__PURE__*/ styled("div")({
 	name: "ExpandedGutter",
-	class: "e2tyxoq",
+	class: "e1birhg7",
 	propsAsIs: false,
 	vars: {
-		"e2tyxoq-0": [_exp45()],
-		"e2tyxoq-1": [_exp46()]
+		"e1birhg7-0": [_exp43()],
+		"e1birhg7-1": [_exp44()]
 	}
 }));
-var _exp48 = () => ({ theme }) => theme.color.border.primary;
+var _exp46 = () => ({ theme }) => theme.color.border.primary;
 var ExpandedBody = withTheme(/*#__PURE__*/ styled("div")({
 	name: "ExpandedBody",
-	class: "ew9y6zt",
+	class: "e2tyxoq",
 	propsAsIs: false,
-	vars: { "ew9y6zt-0": [_exp48()] }
+	vars: { "e2tyxoq-0": [_exp46()] }
 }));
 var ExpandedContent = /*#__PURE__*/ styled("div")({
 	name: "ExpandedContent",
-	class: "e2jf90d",
+	class: "ew9y6zt",
 	propsAsIs: false
 });
 function InfiniteTable(props) {
-	const { columns, data, getRowId, height, width, fillWidth, fillHeight, density = "MEDIUM", hasNextPage, isFetchingNextPage, fetchNextPage, enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange, enableSorting = false, enableMultiSort = false, sorting, onSortingChange, manualSorting = false, isLoading = false, isError = false, loadingRowCount = 5, contentWhenEmpty, contentWhenError, noHeader = false, noLastRowBorder = false, noLastRowPadding = false, onRowClick, onRowDoubleClick, onRowExpand, onTableReady } = props;
-	const outerContainerRef = useRef(null);
+	const { columns, data, getRowId, height, width, fillWidth, fillHeight, density = "MEDIUM", variant = "PRIMARY", hasNextPage, isFetchingNextPage, fetchNextPage, enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange, enableSorting = false, enableMultiSort = false, sorting, onSortingChange, manualSorting = false, isLoading = false, isError = false, loadingRowCount = 5, contentWhenEmpty, contentWhenError, noHeader = false, noLastRowBorder = false, noLastRowPadding = false, onRowClick, onRowDoubleClick, onRowExpand, onTableReady } = props;
 	const scrollContainerRef = useRef(null);
-	const expandedOverlayRef = useRef(null);
-	const queueWheelScrollRef = useRef(null);
-	const syncExpandedOverlayLayoutRafRef = useRef(null);
 	const [expandedRowId, setExpandedRowId] = useState(null);
-	const [expandedOverlayLayout, setExpandedOverlayLayout] = useState(null);
+	const [scrollContainerClientWidth, setScrollContainerClientWidth] = useState(null);
 	const resolvedColumns = useMemo(() => {
 		if (!onRowExpand) return columns;
 		return [{
@@ -394,6 +397,7 @@ function InfiniteTable(props) {
 		});
 		return offsets;
 	}, [resolvedColumns]);
+	const totalColumnMinWidth = useMemo(() => resolvedColumns.reduce((sum, col) => sum + (col.size ?? col.minSize ?? 0), 0), [resolvedColumns]);
 	const table = useReactTable({
 		data,
 		columns: useMemo(() => resolvedColumns.map((col) => ({
@@ -457,8 +461,6 @@ function InfiniteTable(props) {
 		onTableReady?.(table);
 	}, [table, onTableReady]);
 	const { rows } = table.getRowModel();
-	const expandedRow = expandedRowId ? rows.find((row) => row.id === expandedRowId) : void 0;
-	const isExpandedRowLast = expandedRow ? rows[rows.length - 1]?.id === expandedRow.id : false;
 	useEffect(() => {
 		if (!onRowExpand && expandedRowId !== null) setExpandedRowId(null);
 	}, [expandedRowId, onRowExpand]);
@@ -466,74 +468,21 @@ function InfiniteTable(props) {
 		if (expandedRowId === null) return;
 		if (!rows.some((row) => row.id === expandedRowId)) setExpandedRowId(null);
 	}, [expandedRowId, rows]);
-	const syncExpandedOverlayLayout = useCallback(() => {
-		if (!expandedRow || !onRowExpand) {
-			setExpandedOverlayLayout(null);
-			return;
-		}
-		const outerContainer = outerContainerRef.current;
-		const scrollContainer = scrollContainerRef.current;
-		const overlayElement = expandedOverlayRef.current;
-		if (!outerContainer || !scrollContainer || !overlayElement) return;
-		const expandedRowAnchor = scrollContainer.querySelector("[data-gx-expanded-row-anchor=\"true\"]");
-		if (!expandedRowAnchor) return;
-		const outerRect = outerContainer.getBoundingClientRect();
-		const scrollRect = scrollContainer.getBoundingClientRect();
-		const rowRect = expandedRowAnchor.getBoundingClientRect();
-		const overlayRect = overlayElement.getBoundingClientRect();
-		const nextLayout = {
-			top: rowRect.bottom - outerRect.top,
-			left: scrollRect.left - outerRect.left,
-			width: scrollContainer.clientWidth,
-			height: overlayRect.height
-		};
-		setExpandedOverlayLayout((currentLayout) => {
-			if (currentLayout && currentLayout.top === nextLayout.top && currentLayout.left === nextLayout.left && currentLayout.width === nextLayout.width && currentLayout.height === nextLayout.height) return currentLayout;
-			return nextLayout;
-		});
-	}, [expandedRow, onRowExpand]);
-	const scheduleSyncExpandedOverlayLayout = useCallback(() => {
-		if (syncExpandedOverlayLayoutRafRef.current !== null) return;
-		syncExpandedOverlayLayoutRafRef.current = requestAnimationFrame(() => {
-			syncExpandedOverlayLayoutRafRef.current = null;
-			syncExpandedOverlayLayout();
-		});
-	}, [syncExpandedOverlayLayout]);
 	useLayoutEffect(() => {
-		syncExpandedOverlayLayout();
-		return () => {
-			if (syncExpandedOverlayLayoutRafRef.current !== null) {
-				cancelAnimationFrame(syncExpandedOverlayLayoutRafRef.current);
-				syncExpandedOverlayLayoutRafRef.current = null;
-			}
-		};
-	}, [syncExpandedOverlayLayout]);
-	useEffect(() => {
-		if (!expandedRow || !onRowExpand) return;
-		const scrollContainer = scrollContainerRef.current;
-		const overlayElement = expandedOverlayRef.current;
-		if (!scrollContainer || !overlayElement) return;
-		scrollContainer.addEventListener("scroll", scheduleSyncExpandedOverlayLayout, { passive: true });
-		window.addEventListener("resize", scheduleSyncExpandedOverlayLayout);
-		if (typeof ResizeObserver === "undefined") return () => {
-			scrollContainer.removeEventListener("scroll", scheduleSyncExpandedOverlayLayout);
-			window.removeEventListener("resize", scheduleSyncExpandedOverlayLayout);
-		};
-		const resizeObserver = new ResizeObserver(() => {
-			scheduleSyncExpandedOverlayLayout();
-		});
-		resizeObserver.observe(scrollContainer);
-		resizeObserver.observe(overlayElement);
-		return () => {
-			scrollContainer.removeEventListener("scroll", scheduleSyncExpandedOverlayLayout);
-			window.removeEventListener("resize", scheduleSyncExpandedOverlayLayout);
-			resizeObserver.disconnect();
+		const container = scrollContainerRef.current;
+		if (!container) return;
+		const measure = () => {
+			setScrollContainerClientWidth((currentWidth) => currentWidth === container.clientWidth ? currentWidth : container.clientWidth);
 		};
-	}, [
-		expandedRow,
-		onRowExpand,
-		scheduleSyncExpandedOverlayLayout
-	]);
+		measure();
+		if (typeof ResizeObserver === "undefined") {
+			window.addEventListener("resize", measure);
+			return () => window.removeEventListener("resize", measure);
+		}
+		const resizeObserver = new ResizeObserver(measure);
+		resizeObserver.observe(container);
+		return () => resizeObserver.disconnect();
+	}, []);
 	useEffect(() => {
 		const container = scrollContainerRef.current;
 		if (!container || !fetchNextPage) return;
@@ -581,26 +530,19 @@ function InfiniteTable(props) {
 			}
 			return false;
 		};
-		queueWheelScrollRef.current = queueWheelScroll;
 		const onWheel = (e) => {
 			queueWheelScroll(e.deltaX, e.deltaY);
 		};
 		container.addEventListener("wheel", onWheel, { passive: true });
 		return () => {
-			queueWheelScrollRef.current = null;
 			container.removeEventListener("wheel", onWheel);
 			if (rafId !== null) cancelAnimationFrame(rafId);
 		};
 	}, [isFetchingNextPage]);
-	const handleExpandedOverlayWheel = useCallback((event) => {
-		if (queueWheelScrollRef.current?.(event.deltaX, event.deltaY) ?? false) {
-			event.preventDefault();
-			event.stopPropagation();
-		}
-	}, []);
 	const renderLoadingRows = () => {
 		return Array.from({ length: loadingRowCount }).map((_, rowIndex) => /* @__PURE__ */ jsx(LoadingRowWrapper, {
 			$density: density,
+			$variant: variant,
 			children: resolvedColumns.map((col) => /* @__PURE__ */ jsx(TableDataCell, {
 				$width: col.size,
 				$minWidth: col.minSize,
@@ -609,6 +551,7 @@ function InfiniteTable(props) {
 				$pinnedOffset: pinnedOffsets.get(col.id),
 				$align: col.align,
 				$density: density,
+				$variant: variant,
 				children: col.cellLoading ? col.cellLoading() : null
 			}, col.id))
 		}, `loading-${rowIndex}`));
@@ -617,95 +560,91 @@ function InfiniteTable(props) {
 	const showLoading = isLoading && data.length === 0;
 	const showError = isError && data.length === 0;
 	return /* @__PURE__ */ jsxs(TableOuterContainer, {
-		ref: outerContainerRef,
 		$width: width,
 		$height: height,
 		$fillWidth: fillWidth,
 		$fillHeight: fillHeight,
-		children: [
-			/* @__PURE__ */ jsx(TableScrollContainer, {
-				ref: scrollContainerRef,
-				$noLastRowPadding: noLastRowPadding,
-				children: /* @__PURE__ */ jsxs(StyledTable, { children: [!noHeader && /* @__PURE__ */ jsx(TableHead, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableHeaderRow, { children: headerGroup.headers.map((header) => {
-					const columnMeta = header.column.columnDef.meta;
-					const canSort = header.column.getCanSort();
-					return /* @__PURE__ */ jsx(TableHeaderCell, {
-						$width: header.column.columnDef.size,
-						$minWidth: header.column.columnDef.minSize,
-						$maxWidth: header.column.columnDef.maxSize,
-						$pin: columnMeta?.pin,
-						$pinnedOffset: pinnedOffsets.get(header.column.id),
-						$align: columnMeta?.align,
-						$isSortable: canSort,
-						$density: density,
-						$isExpandCell: header.column.id === EXPAND_COLUMN_ID,
-						onClick: canSort ? header.column.getToggleSortingHandler() : void 0,
-						children: /* @__PURE__ */ jsxs(HeaderContentWrapper, { children: [flexRender(header.column.columnDef.header, header.getContext()), canSort && /* @__PURE__ */ jsx(SortIconWrapper, { children: header.column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx(Icon, {
-							component: SortAscendingIcon,
-							size: 12,
-							variant: IconVariant.TERTIARY
-						}) : header.column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx(Icon, {
-							component: SortDescendingIcon,
-							size: 12,
-							variant: IconVariant.TERTIARY
-						}) : /* @__PURE__ */ jsx(Icon, {
-							component: CaretUpDownIcon,
-							size: 12,
-							variant: IconVariant.TERTIARY
-						}) })] })
-					}, header.id);
-				}) }, headerGroup.id)) }), /* @__PURE__ */ jsxs(TableBody, { children: [showLoading ? renderLoadingRows() : showError ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
-					colSpan: resolvedColumns.length,
-					children: typeof contentWhenError === "function" ? contentWhenError() : contentWhenError ?? /* @__PURE__ */ jsx(Text, {
-						variant: TextVariant.ERROR,
-						children: "Error loading data"
+		children: [/* @__PURE__ */ jsx(TableScrollContainer, {
+			ref: scrollContainerRef,
+			$noLastRowPadding: noLastRowPadding,
+			children: /* @__PURE__ */ jsxs(StyledTable, { children: [!noHeader && /* @__PURE__ */ jsx(TableHead, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableHeaderRow, { children: headerGroup.headers.map((header) => {
+				const columnMeta = header.column.columnDef.meta;
+				const canSort = header.column.getCanSort();
+				return /* @__PURE__ */ jsx(TableHeaderCell, {
+					$width: header.column.columnDef.size,
+					$minWidth: header.column.columnDef.minSize,
+					$maxWidth: header.column.columnDef.maxSize,
+					$pin: columnMeta?.pin,
+					$pinnedOffset: pinnedOffsets.get(header.column.id),
+					$align: columnMeta?.align,
+					$isSortable: canSort,
+					$density: density,
+					$variant: variant,
+					$isExpandCell: header.column.id === EXPAND_COLUMN_ID,
+					onClick: canSort ? header.column.getToggleSortingHandler() : void 0,
+					children: /* @__PURE__ */ jsxs(HeaderContentWrapper, { children: [flexRender(header.column.columnDef.header, header.getContext()), canSort && /* @__PURE__ */ jsx(SortIconWrapper, { children: header.column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx(Icon, {
+						component: SortAscendingIcon,
+						size: 12,
+						variant: IconVariant.TERTIARY
+					}) : header.column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx(Icon, {
+						component: SortDescendingIcon,
+						size: 12,
+						variant: IconVariant.TERTIARY
+					}) : /* @__PURE__ */ jsx(Icon, {
+						component: CaretUpDownIcon,
+						size: 12,
+						variant: IconVariant.TERTIARY
+					}) })] })
+				}, header.id);
+			}) }, headerGroup.id)) }), /* @__PURE__ */ jsxs(TableBody, { children: [showLoading ? renderLoadingRows() : showError ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+				colSpan: resolvedColumns.length,
+				children: typeof contentWhenError === "function" ? contentWhenError() : contentWhenError ?? /* @__PURE__ */ jsx(Text, {
+					variant: TextVariant.ERROR,
+					children: "Error loading data"
+				})
+			}) }) : rows.map((row, index) => {
+				const isSelected = row.getIsSelected();
+				const isExpanded = onRowExpand !== void 0 && row.id === expandedRowId;
+				const isLastRow = index === rows.length - 1;
+				return /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsx(TableRow, {
+					$isClickable: !!onRowClick,
+					$isSelected: isSelected,
+					$density: density,
+					$variant: variant,
+					$isExpanded: isExpanded,
+					$isLastRow: noLastRowBorder && isLastRow && !isExpanded,
+					onClick: onRowClick ? (e) => onRowClick(row, e) : void 0,
+					onDoubleClick: onRowDoubleClick ? (e) => onRowDoubleClick(row, e) : void 0,
+					children: row.getVisibleCells().map((cell) => {
+						const columnMeta = cell.column.columnDef.meta;
+						return /* @__PURE__ */ jsx(TableDataCell, {
+							$width: cell.column.columnDef.size,
+							$minWidth: cell.column.columnDef.minSize,
+							$maxWidth: cell.column.columnDef.maxSize,
+							$pin: columnMeta?.pin,
+							$pinnedOffset: pinnedOffsets.get(cell.column.id),
+							$align: columnMeta?.align,
+							$density: density,
+							$variant: variant,
+							$isExpandCell: cell.column.id === EXPAND_COLUMN_ID,
+							children: flexRender(cell.column.columnDef.cell, cell.getContext())
+						}, cell.id);
 					})
-				}) }) : rows.map((row, index) => {
-					const isSelected = row.getIsSelected();
-					const isExpanded = onRowExpand !== void 0 && row.id === expandedRowId;
-					const isLastRow = index === rows.length - 1;
-					return /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsx(TableRow, {
-						"data-gx-expanded-row-anchor": isExpanded ? "true" : void 0,
-						$isClickable: !!onRowClick,
-						$isSelected: isSelected,
-						$density: density,
-						$isExpanded: isExpanded,
-						$isLastRow: noLastRowBorder && isLastRow && !isExpanded,
-						onClick: onRowClick ? (e) => onRowClick(row, e) : void 0,
-						onDoubleClick: onRowDoubleClick ? (e) => onRowDoubleClick(row, e) : void 0,
-						children: row.getVisibleCells().map((cell) => {
-							const columnMeta = cell.column.columnDef.meta;
-							return /* @__PURE__ */ jsx(TableDataCell, {
-								$width: cell.column.columnDef.size,
-								$minWidth: cell.column.columnDef.minSize,
-								$maxWidth: cell.column.columnDef.maxSize,
-								$pin: columnMeta?.pin,
-								$pinnedOffset: pinnedOffsets.get(cell.column.id),
-								$align: columnMeta?.align,
-								$density: density,
-								$isExpandCell: cell.column.id === EXPAND_COLUMN_ID,
-								children: flexRender(cell.column.columnDef.cell, cell.getContext())
-							}, cell.id);
+				}), isExpanded && onRowExpand && /* @__PURE__ */ jsx(ExpandedRow, {
+					$minWidth: totalColumnMinWidth,
+					children: /* @__PURE__ */ jsx(ExpandedRowCell, {
+						colSpan: resolvedColumns.length,
+						$variant: variant,
+						$isLastRow: noLastRowBorder && isLastRow,
+						children: /* @__PURE__ */ jsxs(ExpandedViewport, {
+							$width: scrollContainerClientWidth ?? void 0,
+							children: [/* @__PURE__ */ jsx(ExpandedGutter, { $variant: variant }), /* @__PURE__ */ jsx(ExpandedBody, { children: /* @__PURE__ */ jsx(ExpandedContent, { children: onRowExpand(row) }) })]
 						})
-					}), isExpanded && /* @__PURE__ */ jsx(ExpandedSpacerRow, {
-						$height: expandedOverlayLayout?.height ?? 0,
-						children: /* @__PURE__ */ jsx(ExpandedSpacerCell, { colSpan: resolvedColumns.length })
-					})] }, row.id);
-				}), isFetchingNextPage && renderLoadingRows()] })] })
-			}),
-			expandedRow && onRowExpand && /* @__PURE__ */ jsx(ExpandedOverlayLayer, { children: /* @__PURE__ */ jsxs(ExpandedOverlay, {
-				ref: expandedOverlayRef,
-				$isLastRow: noLastRowBorder && isExpandedRowLast,
-				$left: expandedOverlayLayout?.left ?? 0,
-				$top: expandedOverlayLayout?.top ?? 0,
-				$width: expandedOverlayLayout?.width ?? scrollContainerRef.current?.clientWidth ?? 0,
-				onWheel: handleExpandedOverlayWheel,
-				style: { visibility: expandedOverlayLayout ? "visible" : "hidden" },
-				children: [/* @__PURE__ */ jsx(ExpandedGutter, {}), /* @__PURE__ */ jsx(ExpandedBody, { children: /* @__PURE__ */ jsx(ExpandedContent, { children: onRowExpand(expandedRow) }) })]
-			}) }),
-			isEmpty && contentWhenEmpty && /* @__PURE__ */ jsx(EmptyContentWrapper, { children: contentWhenEmpty })
-		]
+					})
+				})] }, row.id);
+			}), isFetchingNextPage && renderLoadingRows()] })] })
+		}), isEmpty && contentWhenEmpty && /* @__PURE__ */ jsx(EmptyContentWrapper, { children: contentWhenEmpty })]
 	});
 }
 //#endregion
-export { ColumnAlign, ColumnPin, TableDensity, InfiniteTable as default, estimateColumnWidth };
+export { ColumnAlign, ColumnPin, TableDensity, TableVariant, InfiniteTable as default, estimateColumnWidth };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@galaxy-io/dls",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "Galaxy Design Language System",
   "license": "UNLICENSED",
   "type": "module",