@galaxy-io/dls 1.0.3

package/dist/table/InfiniteTable.js

@@ -0,0 +1,711 @@
+import { withTheme } from "../theme/GalaxyTheme.js";
+import { getCssSizeValue } from "../utils/linaria.js";
+import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
+import Icon, { IconVariant } from "../icons/Icon.js";
+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 { 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 TableDensity = /* @__PURE__ */ function(TableDensity) {
+	TableDensity["SMALL"] = "SMALL";
+	TableDensity["MEDIUM"] = "MEDIUM";
+	TableDensity["LARGE"] = "LARGE";
+	return TableDensity;
+}({});
+var ColumnPin = /* @__PURE__ */ function(ColumnPin) {
+	ColumnPin["LEFT"] = "LEFT";
+	ColumnPin["RIGHT"] = "RIGHT";
+	return ColumnPin;
+}({});
+var ColumnAlign = /* @__PURE__ */ function(ColumnAlign) {
+	ColumnAlign["LEFT"] = "LEFT";
+	ColumnAlign["CENTER"] = "CENTER";
+	ColumnAlign["RIGHT"] = "RIGHT";
+	return ColumnAlign;
+}({});
+/**
+* Estimate column width based on header name and sample data values.
+* Useful for auto-sizing table columns based on content.
+*/
+var estimateColumnWidth = (columnName, sampleValues, options = {}) => {
+	const { minWidth = 80, maxWidth = 400, charWidth = 8, padding = 32 } = options;
+	const headerLength = columnName.length;
+	const maxValueLength = sampleValues.reduce((max, val) => Math.max(max, String(val).length), 0);
+	const estimatedWidth = Math.max(headerLength, maxValueLength) * charWidth + padding;
+	return Math.max(minWidth, Math.min(maxWidth, estimatedWidth));
+};
+var EXPAND_COLUMN_ID = "__expand__";
+var EXPAND_COLUMN_WIDTH = 44;
+var TABLE_DENSITY_TO_BUTTON_SIZE_MAP = {
+	["SMALL"]: ButtonSize.SMALL,
+	["MEDIUM"]: ButtonSize.SMALL,
+	["LARGE"]: ButtonSize.MEDIUM
+};
+var _exp = () => ({ $width, $fillWidth }) => {
+	if ($fillWidth) return "100%";
+	if ($width) return getCssSizeValue($width);
+	return "auto";
+};
+var _exp2 = () => ({ $height, $fillHeight }) => {
+	if ($fillHeight) return "100%";
+	if ($height) return getCssSizeValue($height);
+	return "auto";
+};
+var TableOuterContainer = withTheme(/*#__PURE__*/ styled("div")({
+	name: "TableOuterContainer",
+	class: "t15fnb8v",
+	propsAsIs: false,
+	vars: {
+		"t15fnb8v-0": [_exp()],
+		"t15fnb8v-1": [_exp2()]
+	}
+}));
+var _exp3 = () => ({ $noLastRowPadding }) => $noLastRowPadding ? "0" : "8px";
+var TableScrollContainer = /*#__PURE__*/ styled("div")({
+	name: "TableScrollContainer",
+	class: "t1xd4vnx",
+	propsAsIs: false,
+	vars: { "t1xd4vnx-0": [_exp3()] }
+});
+var StyledTable = /*#__PURE__*/ styled("table")({
+	name: "StyledTable",
+	class: "sk741d9",
+	propsAsIs: false
+});
+var TableHead = /*#__PURE__*/ styled("thead")({
+	name: "TableHead",
+	class: "t7f6tk3",
+	propsAsIs: false
+});
+var TableBody = /*#__PURE__*/ styled("tbody")({
+	name: "TableBody",
+	class: "tl0vwdj",
+	propsAsIs: false
+});
+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 _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 TableRow = withTheme(/*#__PURE__*/ styled("tr")({
+	name: "TableRow",
+	class: "t1ikcerv",
+	propsAsIs: false,
+	vars: {
+		"t1ikcerv-0": [_exp4()],
+		"t1ikcerv-1": [_exp5()],
+		"t1ikcerv-2": [_exp6()],
+		"t1ikcerv-3": [_exp7()],
+		"t1ikcerv-4": [_exp8()]
+	}
+}));
+var TableHeaderRow = withTheme(/*#__PURE__*/ styled("tr")({
+	name: "TableHeaderRow",
+	class: "tswwjja",
+	propsAsIs: false
+}));
+var _exp9 = () => ({ $density, $isExpandCell }) => {
+	if ($isExpandCell) return "4px 6px";
+	return `8px ${match($density).with("SMALL", () => "12px").with("MEDIUM", () => "16px").with("LARGE", () => "20px").with(void 0, () => "16px").exhaustive()}`;
+};
+var _exp0 = () => ({ $width }) => {
+	if ($width) return `0 0 ${$width}px`;
+	return "1 1 0";
+};
+var _exp1 = () => ({ $minWidth }) => {
+	if ($minWidth) return `${$minWidth}px`;
+	return "0";
+};
+var _exp10 = () => ({ $maxWidth }) => {
+	if ($maxWidth) return `${$maxWidth}px`;
+	return "none";
+};
+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 _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";
+	return "default";
+};
+var _exp16 = () => ({ $pin }) => {
+	if ($pin) return 25;
+	return 20;
+};
+var _exp17 = () => ({ $pin, $pinnedOffset }) => {
+	if ($pin === "LEFT" && $pinnedOffset !== void 0) return `${$pinnedOffset}px`;
+	return "auto";
+};
+var _exp18 = () => ({ $pin, $pinnedOffset }) => {
+	if ($pin === "RIGHT" && $pinnedOffset !== void 0) return `${$pinnedOffset}px`;
+	return "auto";
+};
+var _exp19 = () => ({ $pin, theme }) => {
+	if ($pin === "LEFT") return `0.5px solid ${theme.color.border.primary}`;
+	return "none";
+};
+var _exp20 = () => ({ $pin, theme }) => {
+	if ($pin === "RIGHT") return `0.5px solid ${theme.color.border.primary}`;
+	return "none";
+};
+var TableHeaderCell = withTheme(/*#__PURE__*/ styled("th")({
+	name: "TableHeaderCell",
+	class: "t9wn1rd",
+	propsAsIs: false,
+	vars: {
+		"t9wn1rd-0": [_exp9()],
+		"t9wn1rd-1": [_exp0()],
+		"t9wn1rd-2": [_exp1()],
+		"t9wn1rd-3": [_exp10()],
+		"t9wn1rd-4": [_exp11()],
+		"t9wn1rd-5": [_exp12()],
+		"t9wn1rd-6": [_exp13()],
+		"t9wn1rd-7": [_exp14()],
+		"t9wn1rd-8": [_exp15()],
+		"t9wn1rd-9": [_exp16()],
+		"t9wn1rd-10": [_exp17()],
+		"t9wn1rd-11": [_exp18()],
+		"t9wn1rd-12": [_exp19()],
+		"t9wn1rd-13": [_exp20()]
+	}
+}));
+var _exp21 = () => ({ $density, $isExpandCell }) => {
+	if ($isExpandCell) return "4px 6px";
+	return `8px ${match($density).with("SMALL", () => "12px").with("MEDIUM", () => "16px").with("LARGE", () => "20px").with(void 0, () => "16px").exhaustive()}`;
+};
+var _exp22 = () => ({ theme }) => theme.color.text.primary;
+var _exp23 = () => ({ $width }) => {
+	if ($width) return `0 0 ${$width}px`;
+	return "1 1 0";
+};
+var _exp24 = () => ({ $minWidth }) => {
+	if ($minWidth) return `${$minWidth}px`;
+	return "0";
+};
+var _exp25 = () => ({ $maxWidth }) => {
+	if ($maxWidth) return `${$maxWidth}px`;
+	return "none";
+};
+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;
+	return "transparent";
+};
+var _exp29 = () => ({ $pin }) => {
+	if ($pin) return "sticky";
+	return "static";
+};
+var _exp30 = () => ({ $pin }) => {
+	if ($pin) return 5;
+	return "auto";
+};
+var _exp31 = () => ({ $pin, $pinnedOffset }) => {
+	if ($pin === "LEFT" && $pinnedOffset !== void 0) return `${$pinnedOffset}px`;
+	return "auto";
+};
+var _exp32 = () => ({ $pin, $pinnedOffset }) => {
+	if ($pin === "RIGHT" && $pinnedOffset !== void 0) return `${$pinnedOffset}px`;
+	return "auto";
+};
+var _exp33 = () => ({ $pin, theme }) => {
+	if ($pin === "LEFT") return `0.5px solid ${theme.color.border.primary}`;
+	return "none";
+};
+var _exp34 = () => ({ $pin, theme }) => {
+	if ($pin === "RIGHT") return `0.5px solid ${theme.color.border.primary}`;
+	return "none";
+};
+var TableDataCell = withTheme(/*#__PURE__*/ styled("td")({
+	name: "TableDataCell",
+	class: "thlukz9",
+	propsAsIs: false,
+	vars: {
+		"thlukz9-0": [_exp21()],
+		"thlukz9-1": [_exp22()],
+		"thlukz9-2": [_exp23()],
+		"thlukz9-3": [_exp24()],
+		"thlukz9-4": [_exp25()],
+		"thlukz9-5": [_exp26()],
+		"thlukz9-6": [_exp27()],
+		"thlukz9-7": [_exp28()],
+		"thlukz9-8": [_exp29()],
+		"thlukz9-9": [_exp30()],
+		"thlukz9-10": [_exp31()],
+		"thlukz9-11": [_exp32()],
+		"thlukz9-12": [_exp33()],
+		"thlukz9-13": [_exp34()]
+	}
+}));
+var HeaderContentWrapper = /*#__PURE__*/ styled("div")({
+	name: "HeaderContentWrapper",
+	class: "h1oppwyt",
+	propsAsIs: false
+});
+var SortIconWrapper = /*#__PURE__*/ styled("div")({
+	name: "SortIconWrapper",
+	class: "s1we9pi1",
+	propsAsIs: false
+});
+var EmptyContentWrapper = /*#__PURE__*/ styled("div")({
+	name: "EmptyContentWrapper",
+	class: "ezfy353",
+	propsAsIs: false
+});
+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 LoadingRowWrapper = withTheme(/*#__PURE__*/ styled("tr")({
+	name: "LoadingRowWrapper",
+	class: "l1pcw3m6",
+	propsAsIs: false,
+	vars: {
+		"l1pcw3m6-0": [_exp35()],
+		"l1pcw3m6-1": [_exp36()],
+		"l1pcw3m6-2": [_exp37()]
+	}
+}));
+var _exp38 = () => ({ $height }) => `${$height}px`;
+var ExpandedSpacerRow = /*#__PURE__*/ styled("tr")({
+	name: "ExpandedSpacerRow",
+	class: "eo1carc",
+	propsAsIs: false,
+	vars: { "eo1carc-0": [_exp38()] }
+});
+var ExpandedSpacerCell = withTheme(/*#__PURE__*/ styled("td")({
+	name: "ExpandedSpacerCell",
+	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()]
+	}
+}));
+var _exp45 = () => ({ theme }) => theme.color.background.primary;
+var _exp46 = () => ({ theme }) => theme.color.border.primary;
+var ExpandedGutter = withTheme(/*#__PURE__*/ styled("div")({
+	name: "ExpandedGutter",
+	class: "e2tyxoq",
+	propsAsIs: false,
+	vars: {
+		"e2tyxoq-0": [_exp45()],
+		"e2tyxoq-1": [_exp46()]
+	}
+}));
+var _exp48 = () => ({ theme }) => theme.color.border.primary;
+var ExpandedBody = withTheme(/*#__PURE__*/ styled("div")({
+	name: "ExpandedBody",
+	class: "ew9y6zt",
+	propsAsIs: false,
+	vars: { "ew9y6zt-0": [_exp48()] }
+}));
+var ExpandedContent = /*#__PURE__*/ styled("div")({
+	name: "ExpandedContent",
+	class: "e2jf90d",
+	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 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 resolvedColumns = useMemo(() => {
+		if (!onRowExpand) return columns;
+		return [{
+			id: EXPAND_COLUMN_ID,
+			header: () => null,
+			size: EXPAND_COLUMN_WIDTH,
+			minSize: EXPAND_COLUMN_WIDTH,
+			maxSize: EXPAND_COLUMN_WIDTH,
+			pin: "LEFT",
+			align: "CENTER",
+			cell: ({ row }) => {
+				const isExpanded = expandedRowId === row.id;
+				const buttonSize = TABLE_DENSITY_TO_BUTTON_SIZE_MAP[density];
+				return /* @__PURE__ */ jsx(Button, {
+					"aria-expanded": isExpanded,
+					"aria-label": isExpanded ? "Collapse row" : "Expand row",
+					icon: isExpanded ? CaretDownIcon : CaretRightIcon,
+					onClick: (event) => {
+						event.stopPropagation();
+						setExpandedRowId((currentRowId) => currentRowId === row.id ? null : row.id);
+					},
+					variant: ButtonVariant.TERTIARY,
+					size: buttonSize
+				});
+			},
+			cellLoading: () => null
+		}, ...columns];
+	}, [
+		columns,
+		density,
+		expandedRowId,
+		onRowExpand
+	]);
+	const pinnedOffsets = useMemo(() => {
+		const offsets = /* @__PURE__ */ new Map();
+		let leftOffset = 0;
+		let rightOffset = 0;
+		resolvedColumns.forEach((col) => {
+			if (col.pin === "LEFT") {
+				offsets.set(col.id, leftOffset);
+				leftOffset += col.size ?? 150;
+			}
+		});
+		[...resolvedColumns].reverse().forEach((col) => {
+			if (col.pin === "RIGHT") {
+				offsets.set(col.id, rightOffset);
+				rightOffset += col.size ?? 150;
+			}
+		});
+		return offsets;
+	}, [resolvedColumns]);
+	const table = useReactTable({
+		data,
+		columns: useMemo(() => resolvedColumns.map((col) => ({
+			id: col.id,
+			accessorFn: col.accessorFn,
+			header: ({ table }) => {
+				if (typeof col.header === "function") return col.header({ table });
+				return /* @__PURE__ */ jsx(HeaderContentWrapper, { children: /* @__PURE__ */ jsx(Text, {
+					variant: TextVariant.TERTIARY,
+					weight: TextWeight.MEDIUM,
+					size: TextSize.BODY_SM,
+					children: col.header ?? col.id
+				}) });
+			},
+			cell: (info) => {
+				if (col.cell) return col.cell({
+					value: info.getValue(),
+					row: info.row
+				});
+				const value = info.getValue();
+				if (typeof value === "string") return /* @__PURE__ */ jsx(Text, {
+					size: TextSize.BODY_SM,
+					children: value
+				});
+				if (typeof value === "number" || typeof value === "boolean" || typeof value === "bigint") return /* @__PURE__ */ jsx(Text, {
+					size: TextSize.BODY_SM,
+					children: String(value)
+				});
+				return /* @__PURE__ */ jsx(Text, {
+					size: TextSize.BODY_SM,
+					children: ""
+				});
+			},
+			size: col.size,
+			minSize: col.minSize,
+			maxSize: col.maxSize,
+			enableSorting: col.enableSorting ?? false,
+			sortDescFirst: col.sortDescFirst,
+			meta: {
+				pin: col.pin,
+				align: col.align,
+				cellLoading: col.cellLoading
+			}
+		})), [resolvedColumns]),
+		getRowId: getRowId ? (row, index) => getRowId(row, index) : void 0,
+		getCoreRowModel: getCoreRowModel(),
+		getSortedRowModel: enableSorting && !manualSorting ? getSortedRowModel() : void 0,
+		state: {
+			...sorting !== void 0 && { sorting },
+			...rowSelection !== void 0 && { rowSelection }
+		},
+		...onSortingChange !== void 0 && { onSortingChange },
+		...onRowSelectionChange !== void 0 && { onRowSelectionChange },
+		enableRowSelection,
+		enableMultiRowSelection,
+		enableSorting,
+		enableMultiSort,
+		manualSorting
+	});
+	useEffect(() => {
+		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]);
+	useEffect(() => {
+		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();
+		};
+	}, [
+		expandedRow,
+		onRowExpand,
+		scheduleSyncExpandedOverlayLayout
+	]);
+	useEffect(() => {
+		const container = scrollContainerRef.current;
+		if (!container || !fetchNextPage) return;
+		const onScroll = () => {
+			const { scrollHeight, scrollTop, clientHeight } = container;
+			if (scrollHeight - scrollTop - clientHeight < 500 && hasNextPage && !isFetchingNextPage) fetchNextPage();
+		};
+		container.addEventListener("scroll", onScroll);
+		return () => container.removeEventListener("scroll", onScroll);
+	}, [
+		hasNextPage,
+		isFetchingNextPage,
+		fetchNextPage
+	]);
+	useEffect(() => {
+		const container = scrollContainerRef.current;
+		if (!container) return;
+		let pendingScroll = {
+			deltaX: 0,
+			deltaY: 0
+		};
+		let rafId = null;
+		const applyScroll = () => {
+			if (pendingScroll.deltaY !== 0 || pendingScroll.deltaX !== 0) {
+				container.scrollTop += pendingScroll.deltaY;
+				container.scrollLeft += pendingScroll.deltaX;
+				pendingScroll = {
+					deltaX: 0,
+					deltaY: 0
+				};
+			}
+			rafId = null;
+		};
+		const queueWheelScroll = (deltaX, deltaY) => {
+			if (isFetchingNextPage && deltaY > 0) {
+				if (container.scrollHeight - container.scrollTop - container.clientHeight < 200) return false;
+			}
+			const canScrollY = deltaY > 0 && container.scrollTop < container.scrollHeight - container.clientHeight || deltaY < 0 && container.scrollTop > 0;
+			const canScrollX = deltaX > 0 && container.scrollLeft < container.scrollWidth - container.clientWidth || deltaX < 0 && container.scrollLeft > 0;
+			if (canScrollY || canScrollX) {
+				pendingScroll.deltaY += deltaY;
+				pendingScroll.deltaX += deltaX;
+				if (rafId === null) rafId = requestAnimationFrame(applyScroll);
+				return true;
+			}
+			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,
+			children: resolvedColumns.map((col) => /* @__PURE__ */ jsx(TableDataCell, {
+				$width: col.size,
+				$minWidth: col.minSize,
+				$maxWidth: col.maxSize,
+				$pin: col.pin,
+				$pinnedOffset: pinnedOffsets.get(col.id),
+				$align: col.align,
+				$density: density,
+				children: col.cellLoading ? col.cellLoading() : null
+			}, col.id))
+		}, `loading-${rowIndex}`));
+	};
+	const isEmpty = data.length === 0 && !isLoading;
+	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"
+					})
+				}) }) : 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 && /* @__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 })
+		]
+	});
+}
+//#endregion
+export { ColumnAlign, ColumnPin, TableDensity, InfiniteTable as default, estimateColumnWidth };