pixelize-design-library 2.3.6 → 2.3.8

package/dist/Components/Table/components/TableBody.js

@@ -36,59 +36,58 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DENSITY_CONFIG = void 0;
-var react_1 = require("@chakra-ui/react");
-var react_2 = __importStar(require("react"));
-var table_1 = require("../../../Utils/table");
-var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
-var TableLoading_1 = require("./TableLoading");
-var TableActions_1 = __importDefault(require("./TableActions"));
-var lucide_react_1 = require("lucide-react");
-var Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
-var TableGroupRow_1 = __importDefault(require("./TableGroupRow"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const react_2 = __importStar(require("react"));
+const table_1 = require("../../../Utils/table");
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const TableLoading_1 = require("./TableLoading");
+const TableActions_1 = __importDefault(require("./TableActions"));
+const lucide_react_1 = require("lucide-react");
+const Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
+const TableGroupRow_1 = __importDefault(require("./TableGroupRow"));
 // Density → row height (px) + cell vertical padding. The padding (not just the
 // min-height) is what drives perceived row size, so compact tightens both.
-exports.DENSITY_CONFIG = {
+const DENSITY_CONFIG = {
     compact: { height: 32, py: "0.125rem" },
     normal: { height: 40, py: "0.5rem" },
     comfortable: { height: 52, py: "0.875rem" },
 };
+const getRowId = (row) => row.id;
+const getRowContent = (row) => typeof row.content === "function"
+    ? row.content
+    : undefined;
 // Monday-style status cell: the whole cell is filled with the status color and
 // the label is centered in white.
-var StatusCell = function (_a) {
-    var value = _a.value;
-    return (react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center", justifyContent: "center", w: "100%", h: "100%", px: "0.5rem", fontSize: "0.75rem", fontWeight: 600, color: "white", textAlign: "center", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, value));
-};
-var EMPTY_SX = {};
-var EMPTY_HOVER = {};
-var TableRow = react_2.default.memo(function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
-    var row = _a.row, rowIndex = _a.rowIndex, index = _a.index, isChecked = _a.isChecked, isExpanded = _a.isExpanded, isContent = _a.isContent, isLink = _a.isLink, isCheckbox = _a.isCheckbox, isLoading = _a.isLoading, isActionFreeze = _a.isActionFreeze, columns = _a.columns, leftOffsets = _a.leftOffsets, noBorders = _a.noBorders, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, theme = _a.theme, borderStyle = _a.borderStyle, hoverStyle = _a.hoverStyle, rowHeight = _a.rowHeight, cellPy = _a.cellPy, palette = _a.palette, accentColor = _a.accentColor, handleCheckbox = _a.handleCheckbox, onRowClick = _a.onRowClick, toggleRowExpansion = _a.toggleRowExpansion, onMeasure = _a.onMeasure;
+const StatusCell = ({ value }) => ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", justifyContent: "center", w: "100%", h: "100%", px: "0.5rem", fontSize: "0.75rem", fontWeight: 600, color: "white", textAlign: "center", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: value }));
+const EMPTY_HOVER = {};
+const TableRow = react_2.default.memo(({ row, rowIndex, isChecked, isExpanded, isContent, isLink, isCheckbox, isLoading, isActionFreeze, columns, leftOffsets, noBorders, freezedBgColor, freezedTextColor, theme, borderStyle, hoverStyle, rowHeight, cellPy, palette, accentColor, handleCheckbox, onRowClick, toggleRowExpansion, onMeasure, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
     // Selected-row tint applied per-cell (NOT a blanket `& td` override) so status
     // cells keep their solid color + white text instead of white-on-tint.
-    var selectedBg = (_d = (_c = (_b = theme.colors.primary) === null || _b === void 0 ? void 0 : _b.opacity) === null || _c === void 0 ? void 0 : _c[16]) !== null && _d !== void 0 ? _d : (_e = theme.colors.disabled) === null || _e === void 0 ? void 0 : _e[100];
+    const selectedBg = (_c = (_b = (_a = theme.colors.primary) === null || _a === void 0 ? void 0 : _a.opacity) === null || _b === void 0 ? void 0 : _b[16]) !== null && _c !== void 0 ? _c : (_d = theme.colors.disabled) === null || _d === void 0 ? void 0 : _d[100];
     // Sticky/frozen cells overlay scrolling content, so their selected background
     // must be OPAQUE — paint the (translucent) tint over an opaque base.
-    var selectedFrozenBg = "linear-gradient(0deg, ".concat(selectedBg, ", ").concat(selectedBg, "), ").concat((_h = (_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.background) === null || _g === void 0 ? void 0 : _g[50]) !== null && _h !== void 0 ? _h : "#fff");
+    const selectedFrozenBg = `linear-gradient(0deg, ${selectedBg}, ${selectedBg}), ${(_g = (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.background) === null || _f === void 0 ? void 0 : _f[50]) !== null && _g !== void 0 ? _g : "#fff"}`;
     // Measured-height virtualization: report this row's real height (main + any
     // expanded panel) so the windower can place variable/expandable rows exactly.
-    var mainRowRef = (0, react_2.useRef)(null);
-    var expandedRowRef = (0, react_2.useRef)(null);
-    var hasContent = !!row.content;
-    (0, react_2.useLayoutEffect)(function () {
+    const mainRowRef = (0, react_2.useRef)(null);
+    const expandedRowRef = (0, react_2.useRef)(null);
+    const hasContent = !!getRowContent(row);
+    (0, react_2.useLayoutEffect)(() => {
         if (!onMeasure)
             return;
-        var measure = function () {
+        const measure = () => {
             var _a, _b, _c, _d;
-            var main = (_b = (_a = mainRowRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0;
-            var exp = isExpanded && hasContent ? (_d = (_c = expandedRowRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight) !== null && _d !== void 0 ? _d : 0 : 0;
-            var h = main + exp;
+            const main = (_b = (_a = mainRowRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0;
+            const exp = isExpanded && hasContent ? (_d = (_c = expandedRowRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight) !== null && _d !== void 0 ? _d : 0 : 0;
+            const h = main + exp;
             if (h > 0)
-                onMeasure(row.id, h);
+                onMeasure(getRowId(row), h);
         };
         measure();
-        var raf = requestAnimationFrame(measure);
-        var ro;
+        const raf = requestAnimationFrame(measure);
+        let ro;
         if (typeof ResizeObserver !== "undefined") {
             ro = new ResizeObserver(measure);
             if (mainRowRef.current)
@@ -96,71 +95,69 @@ var TableRow = react_2.default.memo(function (_a) {
             if (expandedRowRef.current)
                 ro.observe(expandedRowRef.current);
         }
-        return function () {
+        return () => {
             cancelAnimationFrame(raf);
             ro === null || ro === void 0 ? void 0 : ro.disconnect();
         };
-    }, [onMeasure, isExpanded, hasContent, row.id]);
-    var handleCellClick = (0, react_2.useCallback)(function (header) {
+    }, [onMeasure, isExpanded, hasContent, row]);
+    const handleCellClick = (0, react_2.useCallback)((header) => {
         if (!header.node && onRowClick) {
             onRowClick(row, { label: header.label, id: header.id });
         }
     }, [row, onRowClick]);
-    var firstDataColIndex = columns.findIndex(function (c) { return !c.isHidden; });
-    var accentSx = accentColor ? "inset 3px 0 0 ".concat(accentColor) : undefined;
+    const firstDataColIndex = columns.findIndex((c) => !c.isHidden);
+    const accentSx = accentColor ? `inset 3px 0 0 ${accentColor}` : undefined;
     // Pinned/frozen columns get a tinted, opaque background so the frozen pane reads
     // as one piece with its header (and so sticky cells cover scrolling content).
-    var frozenCellBg = (_m = freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : (_l = (_k = (_j = theme.colors) === null || _j === void 0 ? void 0 : _j.table) === null || _k === void 0 ? void 0 : _k.hover) === null || _l === void 0 ? void 0 : _l[100]) !== null && _m !== void 0 ? _m : (_p = (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.background) === null || _p === void 0 ? void 0 : _p[100];
-    return (react_2.default.createElement(react_2.default.Fragment, null,
-        react_2.default.createElement(react_1.Tr, { ref: mainRowRef, opacity: isLoading ? 0.4 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "opacity 0.2s" },
-            isContent && (react_2.default.createElement(react_1.Td, { w: "6", p: 0, fontSize: 14, background: isChecked ? selectedFrozenBg : frozenCellBg, color: freezedTextColor, position: "sticky", borderBottom: borderStyle, boxShadow: accentSx, boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns" }, !!(row === null || row === void 0 ? void 0 : row.content) && (react_2.default.createElement(react_1.IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: (_q = theme.colors) === null || _q === void 0 ? void 0 : _q.gray[600], icon: isExpanded ? (react_2.default.createElement(lucide_react_1.ChevronDown, { fontSize: 16 })) : (react_2.default.createElement(lucide_react_1.ChevronRight, { fontSize: 16 })), _hover: { transform: "scale(1.1)" }, size: "sm", onClick: function () { return toggleRowExpansion(rowIndex); }, variant: "ghost" })))),
-            isCheckbox && (react_2.default.createElement(react_1.Td, { w: "6", fontSize: 14, fontWeight: 600, color: (_s = (_r = theme.colors) === null || _r === void 0 ? void 0 : _r.background) === null || _s === void 0 ? void 0 : _s[50], textTransform: "capitalize", background: isChecked ? selectedFrozenBg : frozenCellBg, position: "sticky", borderBottom: borderStyle, boxShadow: !isContent ? accentSx : undefined, boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns" },
-                react_2.default.createElement(Checkbox_1.default, { "aria-label": "Select all rows", onChange: function () { return handleCheckbox(row.id); }, isChecked: isChecked }))),
-            columns.map(function (header, headerIndex) {
-                var _a, _b, _c, _d, _e, _f, _g;
-                if (header.isHidden)
-                    return null;
-                var isFrozen = header.isFreeze;
-                var isFirstDataCell = !isContent && !isCheckbox && headerIndex === firstDataColIndex;
-                var isStatus = header.type === "status" && !header.node;
-                var rawStatus = String((_a = row[header.id]) !== null && _a !== void 0 ? _a : "");
-                var statusColor = isStatus
-                    ? (0, table_1.pickTableColor)(rawStatus, palette, (_b = header.statusColors) === null || _b === void 0 ? void 0 : _b[rawStatus])
-                    : null;
-                return (react_2.default.createElement(react_1.Td, { maxWidth: 500, minWidth: 120, height: "".concat(rowHeight, "px"), py: isStatus && statusColor ? 0 : cellPy, px: isStatus && statusColor ? 0 : undefined, key: headerIndex + 1, onClick: function () { return handleCellClick(header); }, fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffsets[headerIndex] : undefined, zIndex: isFrozen ? 1 : 0, background: isStatus && statusColor ? statusColor.solid : isChecked ? (isFrozen ? selectedFrozenBg : selectedBg) : isFrozen ? frozenCellBg : (_c = theme.colors.background) === null || _c === void 0 ? void 0 : _c[50], textOverflow: "ellipsis", boxShadow: isFirstDataCell ? accentSx : undefined, borderBottom: noBorders
-                        ? "none"
-                        : "0.063rem solid ".concat((_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[isFrozen || isChecked ? 300 : 200]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns"), boxSizing: "border-box", color: isStatus && statusColor ? "white" : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.text) === null || _f === void 0 ? void 0 : _f[500], _hover: isStatus && statusColor
-                        ? EMPTY_HOVER
-                        : ((_g = row.cellStyle) === null || _g === void 0 ? void 0 : _g[header.id]) || row.rowStyle
-                            ? EMPTY_HOVER
-                            : hoverStyle }, isStatus && statusColor ? (react_2.default.createElement(StatusCell, { value: (0, table_1.normalizeTableCellValue)(row[header.id]) })) : (react_2.default.createElement(react_1.Box, { display: "block", overflow: "hidden", whiteSpace: "normal", overflowWrap: "break-word" }, (0, table_1.normalizeTableCellValue)(header.node ? header.node(row) : row[header.id])))));
-            }),
-            isLink && (react_2.default.createElement(react_1.Td, { w: 2, p: 0, fontSize: 14, background: isChecked ? (isActionFreeze ? selectedFrozenBg : selectedBg) : isActionFreeze ? frozenCellBg : (_u = (_t = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _t === void 0 ? void 0 : _t.background) === null || _u === void 0 ? void 0 : _u[50], color: freezedTextColor, position: isActionFreeze ? "sticky" : "relative", borderBottom: borderStyle, boxSizing: "border-box", right: 0, zIndex: 1, className: "columns sticky-columns".concat(isActionFreeze ? "-right" : "") }, (row.onLink || row.onEdit || row.onDelete) && (react_2.default.createElement(TableActions_1.default, { row: row }))))),
-        row.content && isExpanded && (react_2.default.createElement(react_1.Tr, { ref: expandedRowRef },
-            react_2.default.createElement(react_1.Td, { colSpan: columns.length +
-                    (isCheckbox ? 1 : 0) +
-                    (isContent ? 1 : 0) +
-                    (isLink ? 1 : 0), p: 2 },
-                react_2.default.createElement(react_1.Box, { p: 2, bg: theme.colors.white, borderRadius: "md" }, row === null || row === void 0 ? void 0 : row.content(row)))))));
+    const frozenCellBg = (_l = freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : (_k = (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.table) === null || _j === void 0 ? void 0 : _j.hover) === null || _k === void 0 ? void 0 : _k[100]) !== null && _l !== void 0 ? _l : (_o = (_m = theme.colors) === null || _m === void 0 ? void 0 : _m.background) === null || _o === void 0 ? void 0 : _o[100];
+    const cellStyles = row.cellStyle;
+    const rowStyle = row.rowStyle;
+    const rowContent = getRowContent(row);
+    return ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Tr, { ref: mainRowRef, opacity: isLoading ? 0.4 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "opacity 0.2s", children: [isContent && ((0, jsx_runtime_1.jsx)(react_1.Td, { w: "6", p: 0, fontSize: 14, background: isChecked ? selectedFrozenBg : frozenCellBg, color: freezedTextColor, position: "sticky", borderBottom: borderStyle, boxShadow: accentSx, boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns", children: !!(row === null || row === void 0 ? void 0 : row.content) && ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: (_p = theme.colors) === null || _p === void 0 ? void 0 : _p.gray[600], icon: isExpanded ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { fontSize: 16 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { fontSize: 16 })), _hover: { transform: "scale(1.1)" }, size: "sm", onClick: () => toggleRowExpansion(rowIndex), variant: "ghost" })) })), isCheckbox && ((0, jsx_runtime_1.jsx)(react_1.Td, { w: "6", fontSize: 14, fontWeight: 600, color: (_r = (_q = theme.colors) === null || _q === void 0 ? void 0 : _q.background) === null || _r === void 0 ? void 0 : _r[50], textTransform: "capitalize", background: isChecked ? selectedFrozenBg : frozenCellBg, position: "sticky", borderBottom: borderStyle, boxShadow: !isContent ? accentSx : undefined, boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns", children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { "aria-label": "Select all rows", onChange: () => handleCheckbox(getRowId(row)), isChecked: isChecked }) })), columns.map((header, headerIndex) => {
+                        var _a, _b, _c, _d, _e, _f;
+                        if (header.isHidden)
+                            return null;
+                        const isFrozen = header.isFreeze;
+                        const isFirstDataCell = !isContent && !isCheckbox && headerIndex === firstDataColIndex;
+                        const isStatus = header.type === "status" && !header.node;
+                        const rawStatus = String((_a = row[header.id]) !== null && _a !== void 0 ? _a : "");
+                        const statusColor = isStatus
+                            ? (0, table_1.pickTableColor)(rawStatus, palette, (_b = header.statusColors) === null || _b === void 0 ? void 0 : _b[rawStatus])
+                            : null;
+                        return ((0, jsx_runtime_1.jsx)(react_1.Td, { maxWidth: 500, minWidth: 120, height: `${rowHeight}px`, py: isStatus && statusColor ? 0 : cellPy, px: isStatus && statusColor ? 0 : undefined, onClick: () => handleCellClick(header), fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffsets[headerIndex] : undefined, zIndex: isFrozen ? 1 : 0, background: isStatus && statusColor ? statusColor.solid : isChecked ? (isFrozen ? selectedFrozenBg : selectedBg) : isFrozen ? frozenCellBg : (_c = theme.colors.background) === null || _c === void 0 ? void 0 : _c[50], textOverflow: "ellipsis", boxShadow: isFirstDataCell ? accentSx : undefined, borderBottom: noBorders
+                                ? "none"
+                                : `0.063rem solid ${(_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[isFrozen || isChecked ? 300 : 200]}`, className: `columns ${isFrozen ? "sticky-columns" : "scrollable-columns"}`, boxSizing: "border-box", color: isStatus && statusColor ? "white" : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.text) === null || _f === void 0 ? void 0 : _f[500], _hover: isStatus && statusColor
+                                ? EMPTY_HOVER
+                                : (cellStyles === null || cellStyles === void 0 ? void 0 : cellStyles[header.id]) || rowStyle
+                                    ? EMPTY_HOVER
+                                    : hoverStyle, children: isStatus && statusColor ? ((0, jsx_runtime_1.jsx)(StatusCell, { value: (0, table_1.normalizeTableCellValue)(row[header.id]) })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "block", overflow: "hidden", whiteSpace: "normal", overflowWrap: "break-word", children: (0, table_1.normalizeTableCellValue)(header.node ? header.node(row) : row[header.id]) })) }, headerIndex + 1));
+                    }), isLink && ((0, jsx_runtime_1.jsx)(react_1.Td, { w: 2, p: 0, fontSize: 14, background: isChecked ? (isActionFreeze ? selectedFrozenBg : selectedBg) : isActionFreeze ? frozenCellBg : (_t = (_s = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _s === void 0 ? void 0 : _s.background) === null || _t === void 0 ? void 0 : _t[50], color: freezedTextColor, position: isActionFreeze ? "sticky" : "relative", borderBottom: borderStyle, boxSizing: "border-box", right: 0, zIndex: 1, className: `columns sticky-columns${isActionFreeze ? "-right" : ""}`, children: (row.onLink || row.onEdit || row.onDelete) ? ((0, jsx_runtime_1.jsx)(TableActions_1.default, { row: row })) : null }))] }), rowContent && isExpanded && ((0, jsx_runtime_1.jsx)(react_1.Tr, { ref: expandedRowRef, children: (0, jsx_runtime_1.jsx)(react_1.Td, { colSpan: columns.length +
+                        (isCheckbox ? 1 : 0) +
+                        (isContent ? 1 : 0) +
+                        (isLink ? 1 : 0), p: 2, children: (0, jsx_runtime_1.jsx)(react_1.Box, { p: 2, bg: theme.colors.white, borderRadius: "md", children: rowContent(row) }) }) }))] }));
 });
-var TableBody = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
-    var data = _a.data, isCheckbox = _a.isCheckbox, columns = _a.columns, startRow = _a.startRow, columnWidths = _a.columnWidths, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, selections = _a.selections, isLoading = _a.isLoading, onRowClick = _a.onRowClick, isContent = _a.isContent, isLink = _a.isLink, isActionFreeze = _a.isActionFreeze, loadingSkeletonRows = _a.loadingSkeletonRows, scrollContainerRef = _a.scrollContainerRef, density = _a.density, accentColors = _a.accentColors, groups = _a.groups, onAddItem = _a.onAddItem, emptyState = _a.emptyState;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _u = (0, react_2.useState)(new Set()), expandedRows = _u[0], setExpandedRows = _u[1];
-    var _v = (0, react_2.useState)(new Set()), collapsedGroups = _v[0], setCollapsedGroups = _v[1];
-    var toggleGroup = (0, react_2.useCallback)(function (value) {
-        setCollapsedGroups(function (prev) {
-            var next = new Set(prev);
-            next.has(value) ? next.delete(value) : next.add(value);
+const TableBody = ({ data, isCheckbox, columns, startRow, columnWidths, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, selections, isLoading, onRowClick, isContent, isLink, isActionFreeze, loadingSkeletonRows, scrollContainerRef, density, accentColors, groups, onAddItem, emptyState, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const [expandedRows, setExpandedRows] = (0, react_2.useState)(new Set());
+    const [collapsedGroups, setCollapsedGroups] = (0, react_2.useState)(new Set());
+    const toggleGroup = (0, react_2.useCallback)((value) => {
+        setCollapsedGroups((prev) => {
+            const next = new Set(prev);
+            if (next.has(value)) {
+                next.delete(value);
+            }
+            else {
+                next.add(value);
+            }
             return next;
         });
     }, []);
-    var selectionsSet = (0, react_2.useMemo)(function () { return new Set(selections); }, [selections]);
-    var palette = (0, react_2.useMemo)(function () { return (0, table_1.buildTablePalette)(theme); }, [theme]);
-    var densityConfig = (_b = exports.DENSITY_CONFIG[density !== null && density !== void 0 ? density : "normal"]) !== null && _b !== void 0 ? _b : exports.DENSITY_CONFIG.normal;
-    var rowHeight = densityConfig.height;
-    var cellPy = densityConfig.py;
+    const selectionsSet = (0, react_2.useMemo)(() => new Set(selections), [selections]);
+    const palette = (0, react_2.useMemo)(() => (0, table_1.buildTablePalette)(theme), [theme]);
+    const densityConfig = (_a = DENSITY_CONFIG[density !== null && density !== void 0 ? density : "normal"]) !== null && _a !== void 0 ? _a : DENSITY_CONFIG.normal;
+    const rowHeight = densityConfig.height;
+    const cellPy = densityConfig.py;
     // --- Row virtualization ---------------------------------------------------
     // Rows are a fixed 45px tall (see the `height={45}` on every <Td/> below),
     // and the scroll viewport is capped at ~500px, so only ~11 rows are ever
@@ -172,77 +169,77 @@ var TableBody = function (_a) {
     // Expandable `content` rows are supported via measured heights (see
     // `measuredHeights` / `onMeasure` below) — each rendered row reports its real
     // height, so the window places variable/expanded rows exactly.
-    var ROW_HEIGHT = rowHeight;
-    var GROUP_HEADER_H = 42;
-    var OVERSCAN = 6;
-    var VIRTUALIZE_THRESHOLD = 30;
-    var ESTIMATED_EXPAND = 120; // assumed extra height for an expanded-but-not-yet-measured row
-    var shouldVirtualize = data.length > VIRTUALIZE_THRESHOLD;
+    const ROW_HEIGHT = rowHeight;
+    const GROUP_HEADER_H = 42;
+    const OVERSCAN = 6;
+    const VIRTUALIZE_THRESHOLD = 30;
+    const ESTIMATED_EXPAND = 120; // assumed extra height for an expanded-but-not-yet-measured row
+    const shouldVirtualize = data.length > VIRTUALIZE_THRESHOLD;
     // Grouped mode has no pager, so it virtualizes too (when no expandable rows):
     // group headers + rows form one flat sequence that we window over.
-    var groupRowCount = groups ? groups.reduce(function (n, g) { return n + g.rows.length; }, 0) : 0;
-    var groupVirtualize = !!groups && !isContent && groupRowCount > VIRTUALIZE_THRESHOLD;
-    var _w = (0, react_2.useState)(0), scrollTop = _w[0], setScrollTop = _w[1];
-    var _x = (0, react_2.useState)(0), viewportH = _x[0], setViewportH = _x[1];
+    const groupRowCount = groups ? groups.reduce((n, g) => n + g.rows.length, 0) : 0;
+    const groupVirtualize = !!groups && !isContent && groupRowCount > VIRTUALIZE_THRESHOLD;
+    const [scrollTop, setScrollTop] = (0, react_2.useState)(0);
+    const [viewportH, setViewportH] = (0, react_2.useState)(0);
     // Measured row heights keyed by row id (stable across scroll/paging).
-    var _y = (0, react_2.useState)(new Map()), measuredHeights = _y[0], setMeasuredHeights = _y[1];
-    var reportHeight = (0, react_2.useCallback)(function (id, h) {
-        setMeasuredHeights(function (prev) {
+    const [measuredHeights, setMeasuredHeights] = (0, react_2.useState)(new Map());
+    const reportHeight = (0, react_2.useCallback)((id, h) => {
+        setMeasuredHeights((prev) => {
             if (prev.get(id) === h)
                 return prev;
-            var next = new Map(prev);
+            const next = new Map(prev);
             next.set(id, h);
             return next;
         });
     }, []);
-    (0, react_2.useEffect)(function () {
-        var el = scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : scrollContainerRef.current;
+    (0, react_2.useEffect)(() => {
+        const el = scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : scrollContainerRef.current;
         if (!el || !(shouldVirtualize || groupVirtualize))
             return;
-        var onScroll = function () { return setScrollTop(el.scrollTop); };
-        var measure = function () { return setViewportH(el.clientHeight); };
+        const onScroll = () => setScrollTop(el.scrollTop);
+        const measure = () => setViewportH(el.clientHeight);
         measure();
         setScrollTop(el.scrollTop);
         el.addEventListener("scroll", onScroll, { passive: true });
         window.addEventListener("resize", measure);
-        return function () {
+        return () => {
             el.removeEventListener("scroll", onScroll);
             window.removeEventListener("resize", measure);
         };
     }, [scrollContainerRef, shouldVirtualize, groupVirtualize, data.length, groupRowCount]);
     // New page: jump back to the top so the window recomputes from row 0.
-    (0, react_2.useEffect)(function () {
+    (0, react_2.useEffect)(() => {
         if (!shouldVirtualize)
             return;
-        var el = scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : scrollContainerRef.current;
+        const el = scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : scrollContainerRef.current;
         if (el)
             el.scrollTop = 0;
         setScrollTop(0);
     }, [startRow, shouldVirtualize, scrollContainerRef]);
-    var total = data.length;
-    var firstIndex = 0;
-    var lastIndex = total;
-    var topPad = 0;
-    var bottomPad = 0;
+    const total = data.length;
+    let firstIndex = 0;
+    let lastIndex = total;
+    let topPad = 0;
+    let bottomPad = 0;
     if (shouldVirtualize) {
-        var vh = viewportH || 500;
+        const vh = viewportH || 500;
         // Prefix-sum offsets using measured heights (exact for rendered rows) and
         // estimates for not-yet-measured rows (ROW_HEIGHT, + ESTIMATED_EXPAND if expanded).
-        var offsets = new Array(total + 1);
+        const offsets = new Array(total + 1);
         offsets[0] = 0;
-        for (var i = 0; i < total; i++) {
-            var id = data[i].id;
-            var measured = measuredHeights.get(id);
-            var h = measured != null
+        for (let i = 0; i < total; i++) {
+            const id = getRowId(data[i]);
+            const measured = measuredHeights.get(id);
+            const h = measured != null
                 ? measured
                 : ROW_HEIGHT + (expandedRows.has(startRow + i) ? ESTIMATED_EXPAND : 0);
             offsets[i + 1] = offsets[i] + h;
         }
-        var totalH = offsets[total];
-        var top_1 = scrollTop - OVERSCAN * ROW_HEIGHT;
-        var bottom = scrollTop + vh + OVERSCAN * ROW_HEIGHT;
+        const totalH = offsets[total];
+        const top = scrollTop - OVERSCAN * ROW_HEIGHT;
+        const bottom = scrollTop + vh + OVERSCAN * ROW_HEIGHT;
         firstIndex = 0;
-        while (firstIndex < total && offsets[firstIndex + 1] <= top_1)
+        while (firstIndex < total && offsets[firstIndex + 1] <= top)
             firstIndex++;
         lastIndex = firstIndex;
         while (lastIndex < total && offsets[lastIndex] < bottom)
@@ -252,10 +249,10 @@ var TableBody = function (_a) {
         topPad = offsets[firstIndex];
         bottomPad = totalH - offsets[lastIndex];
     }
-    var visibleRows = shouldVirtualize ? data.slice(firstIndex, lastIndex) : data;
-    var toggleRowExpansion = (0, react_2.useCallback)(function (rowIndex) {
-        setExpandedRows(function (prev) {
-            var newSet = new Set(prev);
+    const visibleRows = shouldVirtualize ? data.slice(firstIndex, lastIndex) : data;
+    const toggleRowExpansion = (0, react_2.useCallback)((rowIndex) => {
+        setExpandedRows((prev) => {
+            const newSet = new Set(prev);
             if (newSet.has(rowIndex)) {
                 newSet.delete(rowIndex);
             }
@@ -265,108 +262,82 @@ var TableBody = function (_a) {
             return newSet;
         });
     }, []);
-    var totalVisibleColumns = (0, react_2.useMemo)(function () {
-        return columns.filter(function (o) { return !o.isHidden; }).length +
-            (isCheckbox ? 1 : 0) +
-            (isContent ? 1 : 0) +
-            (isLink ? 1 : 0);
-    }, [columns, isCheckbox, isContent, isLink]);
-    var leftOffsets = (0, react_2.useMemo)(function () {
-        var checkboxOffset = isCheckbox ? 50 : 0;
-        return columnWidths.map(function (_, idx) {
-            return columnWidths.slice(0, idx).reduce(function (sum, w) { return sum + w; }, 0) + checkboxOffset;
-        });
+    const totalVisibleColumns = (0, react_2.useMemo)(() => columns.filter((o) => !o.isHidden).length +
+        (isCheckbox ? 1 : 0) +
+        (isContent ? 1 : 0) +
+        (isLink ? 1 : 0), [columns, isCheckbox, isContent, isLink]);
+    const leftOffsets = (0, react_2.useMemo)(() => {
+        const checkboxOffset = isCheckbox ? 50 : 0;
+        return columnWidths.map((_, idx) => columnWidths.slice(0, idx).reduce((sum, w) => sum + w, 0) + checkboxOffset);
     }, [columnWidths, isCheckbox]);
-    var borderStyle = (0, react_2.useMemo)(function () { var _a; return noBorders ? "none" : "0.063rem solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.border[500]); }, [noBorders, (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.border]);
-    var hoverStyle = (0, react_2.useMemo)(function () {
+    const borderStyle = (0, react_2.useMemo)(() => { var _a; return noBorders ? "none" : `0.063rem solid ${(_a = theme.colors) === null || _a === void 0 ? void 0 : _a.border[500]}`; }, [noBorders, (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.border]);
+    const hoverStyle = (0, react_2.useMemo)(() => {
         var _a, _b, _c, _d, _e;
         return ({
             backgroundColor: (_c = (_b = (_a = theme.colors.table) === null || _a === void 0 ? void 0 : _a.hover) === null || _b === void 0 ? void 0 : _b[300]) !== null && _c !== void 0 ? _c : (_e = (_d = theme.colors.secondary) === null || _d === void 0 ? void 0 : _d.opacity) === null || _e === void 0 ? void 0 : _e[4],
         });
-    }, [(_d = theme.colors.table) === null || _d === void 0 ? void 0 : _d.hover, (_e = theme.colors.secondary) === null || _e === void 0 ? void 0 : _e.opacity]);
+    }, [(_c = theme.colors.table) === null || _c === void 0 ? void 0 : _c.hover, (_d = theme.colors.secondary) === null || _d === void 0 ? void 0 : _d.opacity]);
     if (isLoading && data.length === 0) {
-        return (react_2.default.createElement(TableLoading_1.TableBodyLoading, { noOfColumns: totalVisibleColumns, borderColor: theme.colors.gray[300], rowsCount: typeof loadingSkeletonRows === "number" ? loadingSkeletonRows : 4 }));
+        return ((0, jsx_runtime_1.jsx)(TableLoading_1.TableBodyLoading, { noOfColumns: totalVisibleColumns, borderColor: theme.colors.gray[300], rowsCount: typeof loadingSkeletonRows === "number" ? loadingSkeletonRows : 4 }));
     }
     if (!isLoading && data.length === 0) {
-        var isStructured = emptyState && typeof emptyState === "object" && !react_2.default.isValidElement(emptyState);
-        var es = isStructured ? emptyState : null;
-        return (react_2.default.createElement(react_1.Tr, { backgroundColor: (_f = theme.colors.background) === null || _f === void 0 ? void 0 : _f[50] },
-            react_2.default.createElement(react_1.Td, { colSpan: totalVisibleColumns, textAlign: "center", py: 10, border: "none" }, emptyState && !isStructured ? emptyState : (react_2.default.createElement(react_1.Box, { display: "flex", flexDirection: "column", alignItems: "center", gap: 2, color: (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray) === null || _h === void 0 ? void 0 : _h[500] },
-                (es === null || es === void 0 ? void 0 : es.icon) && react_2.default.createElement(react_1.Box, { fontSize: "1.75rem", color: (_k = (_j = theme.colors) === null || _j === void 0 ? void 0 : _j.gray) === null || _k === void 0 ? void 0 : _k[400] }, es.icon),
-                react_2.default.createElement(react_1.Box, { fontSize: "0.95rem", fontWeight: 600, color: (_m = (_l = theme.colors) === null || _l === void 0 ? void 0 : _l.text) === null || _m === void 0 ? void 0 : _m[700] }, (_o = es === null || es === void 0 ? void 0 : es.title) !== null && _o !== void 0 ? _o : "No data found"),
-                (es === null || es === void 0 ? void 0 : es.description) && (react_2.default.createElement(react_1.Box, { fontSize: "0.8125rem", color: (_q = (_p = theme.colors) === null || _p === void 0 ? void 0 : _p.gray) === null || _q === void 0 ? void 0 : _q[500] }, es.description)))))));
+        const isStructured = emptyState && typeof emptyState === "object" && !react_2.default.isValidElement(emptyState);
+        const es = isStructured ? emptyState : null;
+        return ((0, jsx_runtime_1.jsx)(react_1.Tr, { backgroundColor: (_e = theme.colors.background) === null || _e === void 0 ? void 0 : _e[50], children: (0, jsx_runtime_1.jsx)(react_1.Td, { colSpan: totalVisibleColumns, textAlign: "center", py: 10, border: "none", children: emptyState && !isStructured ? emptyState : ((0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", flexDirection: "column", alignItems: "center", gap: 2, color: (_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.gray) === null || _g === void 0 ? void 0 : _g[500], children: [(es === null || es === void 0 ? void 0 : es.icon) && (0, jsx_runtime_1.jsx)(react_1.Box, { fontSize: "1.75rem", color: (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.gray) === null || _j === void 0 ? void 0 : _j[400], children: es.icon }), (0, jsx_runtime_1.jsx)(react_1.Box, { fontSize: "0.95rem", fontWeight: 600, color: (_l = (_k = theme.colors) === null || _k === void 0 ? void 0 : _k.text) === null || _l === void 0 ? void 0 : _l[700], children: (_m = es === null || es === void 0 ? void 0 : es.title) !== null && _m !== void 0 ? _m : "No data found" }), (es === null || es === void 0 ? void 0 : es.description) && ((0, jsx_runtime_1.jsx)(react_1.Box, { fontSize: "0.8125rem", color: (_p = (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.gray) === null || _p === void 0 ? void 0 : _p[500], children: es.description }))] })) }) }));
     }
     // --- Monday-style grouped board render (virtualized when large) -----------
     if (groups) {
         // Flatten groups → one sequence of header/row items so it can be windowed.
-        var items = [];
-        for (var _i = 0, groups_1 = groups; _i < groups_1.length; _i++) {
-            var g = groups_1[_i];
-            items.push({ kind: "header", g: g });
+        const items = [];
+        for (const g of groups) {
+            items.push({ kind: "header", g });
             if (!collapsedGroups.has(g.value)) {
-                for (var _z = 0, _0 = g.rows; _z < _0.length; _z++) {
-                    var row = _0[_z];
-                    items.push({ kind: "row", g: g, row: row });
-                }
+                for (const row of g.rows)
+                    items.push({ kind: "row", g, row });
             }
         }
-        var firstI_1 = 0;
-        var lastI = items.length;
-        var gTopPad = 0;
-        var gBottomPad = 0;
+        let firstI = 0;
+        let lastI = items.length;
+        let gTopPad = 0;
+        let gBottomPad = 0;
         if (groupVirtualize) {
-            var heights_2 = items.map(function (it) { return (it.kind === "header" ? GROUP_HEADER_H : rowHeight); });
-            var offsets_1 = [];
-            var acc = 0;
-            for (var _1 = 0, heights_1 = heights_2; _1 < heights_1.length; _1++) {
-                var h = heights_1[_1];
-                offsets_1.push(acc);
+            const heights = items.map((it) => (it.kind === "header" ? GROUP_HEADER_H : rowHeight));
+            const offsets = [];
+            let acc = 0;
+            for (const h of heights) {
+                offsets.push(acc);
                 acc += h;
             }
-            var totalH = acc;
-            var vh = viewportH || 500;
-            var top_2 = scrollTop - OVERSCAN * rowHeight;
-            var bottom = scrollTop + vh + OVERSCAN * rowHeight;
-            firstI_1 = items.findIndex(function (_, i) { return offsets_1[i] + heights_2[i] > top_2; });
-            if (firstI_1 < 0)
-                firstI_1 = items.length;
+            const totalH = acc;
+            const vh = viewportH || 500;
+            const top = scrollTop - OVERSCAN * rowHeight;
+            const bottom = scrollTop + vh + OVERSCAN * rowHeight;
+            firstI = items.findIndex((_, i) => offsets[i] + heights[i] > top);
+            if (firstI < 0)
+                firstI = items.length;
             lastI = items.length;
-            for (var i = firstI_1; i < items.length; i++) {
-                if (offsets_1[i] > bottom) {
+            for (let i = firstI; i < items.length; i++) {
+                if (offsets[i] > bottom) {
                     lastI = i;
                     break;
                 }
             }
-            gTopPad = (_r = offsets_1[firstI_1]) !== null && _r !== void 0 ? _r : 0;
-            gBottomPad = totalH - (lastI > firstI_1 ? offsets_1[lastI - 1] + heights_2[lastI - 1] : gTopPad);
+            gTopPad = (_q = offsets[firstI]) !== null && _q !== void 0 ? _q : 0;
+            gBottomPad = totalH - (lastI > firstI ? offsets[lastI - 1] + heights[lastI - 1] : gTopPad);
         }
-        var windowItems = groupVirtualize ? items.slice(firstI_1, lastI) : items;
-        return (react_2.default.createElement(react_2.default.Fragment, null,
-            gTopPad > 0 && (react_2.default.createElement("tr", { "aria-hidden": "true", style: { height: gTopPad } },
-                react_2.default.createElement("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: gTopPad } }))),
-            windowItems.map(function (it, k) {
-                var _a;
-                return it.kind === "header" ? (react_2.default.createElement(TableGroupRow_1.default, { key: "h-".concat(it.g.value), label: it.g.label, value: it.g.value, count: it.g.rows.length, color: it.g.color, collapsed: collapsedGroups.has(it.g.value), colSpan: totalVisibleColumns, onToggle: function () { return toggleGroup(it.g.value); }, onAddItem: onAddItem })) : (react_2.default.createElement(TableRow, { key: (_a = it.row.id) !== null && _a !== void 0 ? _a : "r-".concat(firstI_1 + k), row: it.row, rowIndex: firstI_1 + k, index: firstI_1 + k, isChecked: selectionsSet.has(it.row.id), isExpanded: expandedRows.has(firstI_1 + k), isContent: isContent, isLink: isLink, isCheckbox: isCheckbox, isLoading: isLoading, isActionFreeze: isActionFreeze, columns: columns, leftOffsets: leftOffsets, noBorders: noBorders, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, theme: theme, borderStyle: borderStyle, hoverStyle: hoverStyle, rowHeight: rowHeight, cellPy: cellPy, palette: palette, accentColor: it.g.color.solid, handleCheckbox: handleCheckbox, onRowClick: onRowClick, toggleRowExpansion: toggleRowExpansion }));
-            }),
-            gBottomPad > 0 && (react_2.default.createElement("tr", { "aria-hidden": "true", style: { height: gBottomPad } },
-                react_2.default.createElement("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: gBottomPad } })))));
+        const windowItems = groupVirtualize ? items.slice(firstI, lastI) : items;
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [gTopPad > 0 && ((0, jsx_runtime_1.jsx)("tr", { "aria-hidden": "true", style: { height: gTopPad }, children: (0, jsx_runtime_1.jsx)("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: gTopPad } }) })), windowItems.map((it, k) => {
+                    var _a;
+                    return it.kind === "header" ? ((0, jsx_runtime_1.jsx)(TableGroupRow_1.default, { label: it.g.label, value: it.g.value, count: it.g.rows.length, color: it.g.color, collapsed: collapsedGroups.has(it.g.value), colSpan: totalVisibleColumns, onToggle: () => toggleGroup(it.g.value), onAddItem: onAddItem }, `h-${it.g.value}`)) : ((0, jsx_runtime_1.jsx)(TableRow, { row: it.row, rowIndex: firstI + k, index: firstI + k, isChecked: selectionsSet.has(getRowId(it.row)), isExpanded: expandedRows.has(firstI + k), isContent: isContent, isLink: isLink, isCheckbox: isCheckbox, isLoading: isLoading, isActionFreeze: isActionFreeze, columns: columns, leftOffsets: leftOffsets, noBorders: noBorders, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, theme: theme, borderStyle: borderStyle, hoverStyle: hoverStyle, rowHeight: rowHeight, cellPy: cellPy, palette: palette, accentColor: it.g.color.solid, handleCheckbox: handleCheckbox, onRowClick: onRowClick, toggleRowExpansion: toggleRowExpansion }, (_a = getRowId(it.row)) !== null && _a !== void 0 ? _a : `r-${firstI + k}`));
+                }), gBottomPad > 0 && ((0, jsx_runtime_1.jsx)("tr", { "aria-hidden": "true", style: { height: gBottomPad }, children: (0, jsx_runtime_1.jsx)("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: gBottomPad } }) }))] }));
     }
-    return (react_2.default.createElement(react_2.default.Fragment, null,
-        isLoading && data.length > 0 && (react_2.default.createElement(react_1.Tr, null,
-            react_2.default.createElement(react_1.Td, { colSpan: totalVisibleColumns, p: 0, border: "none", position: "relative", height: 0 },
-                react_2.default.createElement(react_1.Box, { position: "absolute", top: 4, left: "50%", transform: "translateX(-50%)", zIndex: 10 },
-                    react_2.default.createElement(react_1.Spinner, { size: "sm", color: ((_t = (_s = theme.colors) === null || _s === void 0 ? void 0 : _s.primary) === null || _t === void 0 ? void 0 : _t[500]) || "blue.500" }))))),
-        shouldVirtualize && topPad > 0 && (react_2.default.createElement("tr", { "aria-hidden": "true", style: { height: topPad } },
-            react_2.default.createElement("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: topPad } }))),
-        visibleRows.map(function (row, i) {
-            var _a;
-            var index = firstIndex + i;
-            var rowIndex = startRow + index;
-            var isExpanded = expandedRows.has(rowIndex);
-            var isChecked = selectionsSet.has(row.id);
-            return (react_2.default.createElement(TableRow, { key: (_a = row.id) !== null && _a !== void 0 ? _a : rowIndex, row: row, rowIndex: rowIndex, index: index, isChecked: isChecked, isExpanded: isExpanded, isContent: isContent, isLink: isLink, isCheckbox: isCheckbox, isLoading: isLoading, isActionFreeze: isActionFreeze, columns: columns, leftOffsets: leftOffsets, noBorders: noBorders, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, theme: theme, borderStyle: borderStyle, hoverStyle: hoverStyle, rowHeight: rowHeight, cellPy: cellPy, palette: palette, accentColor: accentColors === null || accentColors === void 0 ? void 0 : accentColors[row.id], handleCheckbox: handleCheckbox, onRowClick: onRowClick, toggleRowExpansion: toggleRowExpansion, onMeasure: shouldVirtualize ? reportHeight : undefined }));
-        }),
-        shouldVirtualize && bottomPad > 0 && (react_2.default.createElement("tr", { "aria-hidden": "true", style: { height: bottomPad } },
-            react_2.default.createElement("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: bottomPad } })))));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isLoading && data.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.Tr, { children: (0, jsx_runtime_1.jsx)(react_1.Td, { colSpan: totalVisibleColumns, p: 0, border: "none", position: "relative", height: 0, children: (0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", top: 4, left: "50%", transform: "translateX(-50%)", zIndex: 10, children: (0, jsx_runtime_1.jsx)(react_1.Spinner, { size: "sm", color: ((_s = (_r = theme.colors) === null || _r === void 0 ? void 0 : _r.primary) === null || _s === void 0 ? void 0 : _s[500]) || "blue.500" }) }) }) })), shouldVirtualize && topPad > 0 && ((0, jsx_runtime_1.jsx)("tr", { "aria-hidden": "true", style: { height: topPad }, children: (0, jsx_runtime_1.jsx)("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: topPad } }) })), visibleRows.map((row, i) => {
+                var _a;
+                const index = firstIndex + i;
+                const rowIndex = startRow + index;
+                const isExpanded = expandedRows.has(rowIndex);
+                const isChecked = selectionsSet.has(getRowId(row));
+                return ((0, jsx_runtime_1.jsx)(TableRow, { row: row, rowIndex: rowIndex, index: index, isChecked: isChecked, isExpanded: isExpanded, isContent: isContent, isLink: isLink, isCheckbox: isCheckbox, isLoading: isLoading, isActionFreeze: isActionFreeze, columns: columns, leftOffsets: leftOffsets, noBorders: noBorders, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, theme: theme, borderStyle: borderStyle, hoverStyle: hoverStyle, rowHeight: rowHeight, cellPy: cellPy, palette: palette, accentColor: accentColors === null || accentColors === void 0 ? void 0 : accentColors[getRowId(row)], handleCheckbox: handleCheckbox, onRowClick: onRowClick, toggleRowExpansion: toggleRowExpansion, onMeasure: shouldVirtualize ? reportHeight : undefined }, (_a = getRowId(row)) !== null && _a !== void 0 ? _a : rowIndex));
+            }), shouldVirtualize && bottomPad > 0 && ((0, jsx_runtime_1.jsx)("tr", { "aria-hidden": "true", style: { height: bottomPad }, children: (0, jsx_runtime_1.jsx)("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: bottomPad } }) }))] }));
 };
 exports.default = TableBody;

package/dist/Components/Table/components/TableGroupRow.d.ts

@@ -13,3 +13,4 @@ type Props = {
 /** Monday-style colored, collapsible group header row. */
 export declare const TableGroupRow: React.FC<Props>;
 export default TableGroupRow;
+//# sourceMappingURL=TableGroupRow.d.ts.map

package/dist/Components/Table/components/TableGroupRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableGroupRow.d.ts","sourceRoot":"","sources":["../../../../src/Components/Table/components/TableGroupRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAGzD,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,iBAAiB,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;CACnD,CAAC;AAEF,0DAA0D;AAC1D,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAqEzC,CAAC;AAEF,eAAe,aAAa,CAAC"}