pixelize-design-library 3.0.1-beta.1 → 3.1.1

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

@@ -0,0 +1,107 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const surfaceRaised_1 = require("../../../Theme/tokens/builders/surfaceRaised");
+const assignRef = (ref, value) => {
+    if (typeof ref === "function")
+        ref(value);
+    else if (ref)
+        ref.current = value;
+};
+const TriggerAnchor = (0, react_1.forwardRef)(({ target }, ref) => {
+    (0, react_1.useLayoutEffect)(() => {
+        assignRef(ref, target.current);
+        return () => assignRef(ref, null);
+    }, [ref, target]);
+    return null;
+});
+TriggerAnchor.displayName = "TriggerAnchor";
+const TableActions = react_1.default.memo(({ row }) => {
+    var _a;
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const ref = (0, react_1.useRef)(null);
+    const triggerRef = (0, react_1.useRef)(null);
+    const popoverId = (0, react_1.useId)();
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    (0, react_1.useEffect)(() => {
+        if (!isOpen)
+            return;
+        const trigger = triggerRef.current;
+        const closeAll = () => setIsOpen(false);
+        const handleClickOutside = (event) => {
+            if (ref.current && !ref.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        window.addEventListener("close-all-popovers", closeAll);
+        document.addEventListener("click", handleClickOutside);
+        return () => {
+            window.removeEventListener("close-all-popovers", closeAll);
+            document.removeEventListener("click", handleClickOutside);
+            requestAnimationFrame(() => {
+                if (document.activeElement === document.body)
+                    trigger === null || trigger === void 0 ? void 0 : trigger.focus({ preventScroll: true });
+            });
+        };
+    }, [isOpen]);
+    const handleOpen = () => {
+        window.dispatchEvent(new Event("close-all-popovers")); // close others
+        setIsOpen(true);
+    };
+    const handleClose = () => setIsOpen(false);
+    // ✅ if row itself is missing, render nothing
+    if (!row)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, children: [(0, jsx_runtime_1.jsx)(react_2.IconButton, { ref: triggerRef, id: `popover-trigger-${popoverId}`, "aria-label": "Actions", "aria-haspopup": "dialog", "aria-expanded": isOpen, "aria-controls": `popover-content-${popoverId}`, color: theme.colors.text[900], icon: (0, jsx_runtime_1.jsx)(lucide_react_1.EllipsisVertical, { size: 17 }), size: "sm", p: 0, variant: "ghost", _hover: { transform: "scale(1.2)" }, onClick: () => (isOpen ? handleClose() : handleOpen()) }), isOpen && ((0, jsx_runtime_1.jsxs)(react_2.Popover, { id: popoverId, placement: "bottom-start", isOpen: true, onClose: handleClose, closeOnBlur: false, returnFocusOnClose: false, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverAnchor, { children: (0, jsx_runtime_1.jsx)(TriggerAnchor, { target: triggerRef }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { w: "auto", minW: "100px", boxShadow: "lg", p: 0, zIndex: 999, bg: theme.colors.surfaceRaised, children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 0, m: 0, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 1, p: 0, m: 0, children: [row.onLink && ((0, jsx_runtime_1.jsxs)(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", borderBottom: `1px solid ${(0, surfaceRaised_1.raisedRule)(theme.colors)}`, borderRadius: 0, gap: 2, onClick: () => {
+                                                var _a;
+                                                (_a = row.onLink) === null || _a === void 0 ? void 0 : _a.call(row, row);
+                                                handleClose();
+                                            }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 17 }), " View"] })), row.onEdit && ((0, jsx_runtime_1.jsxs)(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, borderBottom: `1px solid ${(0, surfaceRaised_1.raisedRule)(theme.colors)}`, borderRadius: 0, onClick: () => {
+                                                var _a;
+                                                (_a = row.onEdit) === null || _a === void 0 ? void 0 : _a.call(row, row);
+                                                handleClose();
+                                            }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 17 }), " Edit"] })), row.actions && ((_a = row === null || row === void 0 ? void 0 : row.actions) === null || _a === void 0 ? void 0 : _a.call(row)), row.onDelete && ((0, jsx_runtime_1.jsxs)(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", colorScheme: "red", gap: 2, borderRadius: 0, onClick: () => {
+                                                var _a;
+                                                (_a = row.onDelete) === null || _a === void 0 ? void 0 : _a.call(row, row);
+                                                handleClose();
+                                            }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 17 }), " Delete"] })), !row.onLink && !row.onEdit && !row.onDelete && !row.actions && ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", variant: "ghost", isDisabled: true, justifyContent: "center", children: "No actions" }))] }) }) }) })] }))] }));
+});
+TableActions.displayName = "TableActions";
+exports.default = TableActions;

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

@@ -0,0 +1,4 @@
+import { TableBodyPageProps } from "../TableProps";
+export declare const findFirstVisibleIndex: (offsets: number[], total: number, target: number) => number;
+declare const TableBody: ({ data, isCheckbox, columns, startRow, rowsPerPage, columnWidths, slotWidth, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, selections, isLoading, onRowClick, isContent, isLink, isActionFreeze, loadingSkeletonRows, scrollContainerRef, density, stripe, accentColors, groups, onAddItem, emptyState, rowDetail, expandedIds, }: TableBodyPageProps) => import("react/jsx-runtime").JSX.Element;
+export default TableBody;

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

@@ -0,0 +1,498 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findFirstVisibleIndex = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const react_2 = __importStar(require("react"));
+const react_dom_1 = require("react-dom");
+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"));
+const TableVariantContext_1 = require("../variants/TableVariantContext");
+const pillInk_1 = require("../variants/pillInk");
+const EmptyState_1 = __importDefault(require("../../EmptyState/EmptyState"));
+const rowMetrics_1 = require("./rowMetrics");
+const columnLabel_1 = require("../columnLabel");
+const motion_1 = require("../../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../../Theme/chakra/motion");
+const rowDetail_1 = require("./rowDetail");
+const rowMeasurer_1 = require("./rowMeasurer");
+const borderWidths_1 = require("../../../Theme/tokens/primitives/borderWidths");
+const activationKey_1 = require("../../Common/activationKey");
+const rowFocusRing_1 = require("./rowFocusRing");
+const getRowId = (row) => row.id;
+const getRowContent = (row) => typeof row.content === "function"
+    ? row.content
+    : undefined;
+// Smallest index i in [0, total] where offsets[i+1] > target; offsets is sorted.
+const findFirstVisibleIndex = (offsets, total, target) => {
+    let lo = 0;
+    let hi = total;
+    while (lo < hi) {
+        const mid = (lo + hi) >>> 1;
+        if (offsets[mid + 1] <= target) {
+            lo = mid + 1;
+        }
+        else {
+            hi = mid;
+        }
+    }
+    return lo;
+};
+exports.findFirstVisibleIndex = findFirstVisibleIndex;
+// Monday-style status cell: the whole cell is filled with the status color and
+// the label is centered in whichever of white/black clears AA against that fill —
+// the fill can be a consumer hex we can't know in advance is light or dark.
+const BLEED_JUSTIFY = {
+    start: "flex-start",
+    center: "center",
+    end: "flex-end",
+};
+const StatusCell = ({ value, onSolid, align, }) => ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", justifyContent: BLEED_JUSTIFY[align !== null && align !== void 0 ? align : "center"], w: "100%", h: "100%", px: "0.5rem", fontSize: "0.75rem", fontWeight: 600, color: onSolid, textAlign: align !== null && align !== void 0 ? align : "center", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: value }));
+// Studio's status cell: a contained chip on the tone's soft rung. Same tone pair
+// the group header already uses, so an override hex behaves identically in both.
+const StatusPill = ({ value, soft, ink, radius, }) => ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "inline-flex", alignItems: "center", maxW: "100%", px: "0.5rem", py: "0.125rem", borderRadius: radius, bg: soft, color: ink, fontSize: "0.75rem", fontWeight: 600, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: value }));
+const EMPTY_HOVER = {};
+const NO_OFFSETS = [];
+const TableRow = react_2.default.memo(({ row, rowIndex, isChecked, isExpanded, isContent, isLink, isCheckbox, isLoading, isActionFreeze, columns, leftOffsets, noBorders, freezedBgColor, freezedTextColor, theme, borderStyle, selectedBg, selectedFrozenBg, hoverStyle, rowHeight, cellPy, palette, accentColor, isStriped, rowDetail, isDetailOpen = false, detailLeft = 0, detailColSpan = 0, ariaRowIndex, handleCheckbox, onRowClick, toggleRowExpansion, measurer, }) => {
+    const mainRowRef = (0, react_2.useRef)(null);
+    const expandedRowRef = (0, react_2.useRef)(null);
+    const detailRowRef = (0, react_2.useRef)(null);
+    const hasContent = !!getRowContent(row);
+    const detailNode = rowDetail ? rowDetail.render(row) : null;
+    const hasDetail = detailNode !== null && detailNode !== undefined;
+    const detailOpen = isDetailOpen && hasDetail;
+    const rowId = getRowId(row);
+    const detailIds = rowDetail ? (0, rowDetail_1.detailDomIds)(rowDetail.idPrefix, rowId) : null;
+    const expandedOpen = isExpanded && hasContent;
+    (0, react_2.useLayoutEffect)(() => {
+        if (!measurer)
+            return;
+        const parts = [mainRowRef.current, expandedOpen ? expandedRowRef.current : null, detailOpen ? detailRowRef.current : null];
+        return measurer.track(rowId, parts.filter((el) => el !== null));
+    }, [measurer, rowId, expandedOpen, detailOpen]);
+    const handleCellClick = (0, react_2.useCallback)((header) => {
+        if (!header.node && onRowClick) {
+            onRowClick(row, {
+                label: (0, columnLabel_1.isPrimitiveLabel)(header.label) ? header.label : (0, columnLabel_1.columnLabelText)(header),
+                id: header.id,
+            });
+        }
+    }, [row, onRowClick]);
+    const keyboardHeader = onRowClick && !isLoading ? columns.find((c) => !c.isHidden && !c.node) : undefined;
+    const handleRowKeyDown = (0, react_2.useCallback)((event) => {
+        if (event.target !== event.currentTarget || event.repeat || !keyboardHeader)
+            return;
+        (0, activationKey_1.onActivationKey)(() => handleCellClick(keyboardHeader))(event);
+    }, [keyboardHeader, handleCellClick]);
+    const variant = (0, TableVariantContext_1.useTableVariant)();
+    const firstDataColIndex = columns.findIndex((c) => !c.isHidden);
+    const accentSx = accentColor ? `inset 3px 0 0 ${accentColor}` : undefined;
+    // A selected row earns the leading bar only where a group accent isn't already
+    // claiming that edge — the group's identity is the scarcer signal.
+    const leadSx = variant.row.showSelectedBar && isChecked && !accentColor
+        ? `inset 3px 0 0 ${variant.row.selectedBarColor}`
+        : accentSx;
+    const restsOnIndex = variant.slot.rest === "index";
+    const rowSx = {
+        ...(keyboardHeader ? (0, rowFocusRing_1.rowFocusRingSx)(theme.colors) : {}),
+        ...(variant.row.hoverScope === "row"
+            ? { "&:hover > td[data-hoverable='true']": { backgroundColor: variant.row.hoverBg } }
+            : {}),
+        // opacity, not display: a hidden-by-display checkbox leaves the a11y tree and
+        // cannot be tabbed to, so `:focus-within` would never fire to bring it back.
+        ...(restsOnIndex
+            ? {
+                "& .table-slot-box": { opacity: isChecked ? 1 : 0 },
+                "& .table-slot-index": { opacity: isChecked ? 0 : 1 },
+                "&:hover .table-slot-box, &:focus-within .table-slot-box": { opacity: 1 },
+                "&:hover .table-slot-index, &:focus-within .table-slot-index": { opacity: 0 },
+                "@media (pointer: coarse)": {
+                    "& .table-slot-box": { opacity: 1 },
+                    "& .table-slot-index": { opacity: 0 },
+                },
+            }
+            : {}),
+    };
+    // 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).
+    const frozenCellBg = freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.table.hover[100];
+    const cellStyles = row.cellStyle;
+    const rowStyle = row.rowStyle;
+    const chromeHoverable = rowStyle ? "false" : "true";
+    const rowContent = getRowContent(row);
+    const restBg = isStriped ? variant.row.stripeBg : theme.colors.background[50];
+    return ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Tr, { ref: mainRowRef, "aria-rowindex": ariaRowIndex, tabIndex: keyboardHeader ? 0 : undefined, onKeyDown: keyboardHeader ? handleRowKeyDown : undefined, opacity: isLoading ? 0.4 : 1, pointerEvents: isLoading ? "none" : "auto", transition: (0, motion_1.transitionFor)(["opacity"], "base"), sx: { ...rowSx, ...(0, motion_2.reducedMotionSx)() }, children: [isContent && ((0, jsx_runtime_1.jsx)(react_1.Td, { w: "6", p: 0, fontSize: "sm", background: isChecked ? selectedFrozenBg : frozenCellBg, color: freezedTextColor, position: "sticky", borderBottom: borderStyle, boxShadow: leadSx, boxSizing: "border-box", "data-hoverable": chromeHoverable, left: "0px", zIndex: 1, className: "columns sticky-columns", children: hasContent && ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: theme.colors.textMuted, icon: isExpanded ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, {})) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, {})), _hover: { transform: "scale(1.1)" }, size: "sm", onClick: () => toggleRowExpansion(rowIndex), variant: "ghost" })) })), isCheckbox && ((0, jsx_runtime_1.jsx)(react_1.Td, { w: variant.slot.width, minW: variant.slot.width, px: variant.slot.centered ? 0 : undefined, textAlign: variant.slot.centered ? "center" : undefined, fontSize: "sm", fontWeight: 600, color: theme.colors.background[50], textTransform: "capitalize", background: isChecked ? selectedFrozenBg : frozenCellBg, position: "sticky", borderBottom: borderStyle, boxShadow: !isContent ? leadSx : undefined, "data-hoverable": chromeHoverable, boxSizing: "border-box", left: "0px", zIndex: 1, className: "columns sticky-columns", children: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: restsOnIndex ? "grid" : undefined, placeItems: "center", children: [restsOnIndex && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", className: "table-slot-index", gridArea: "1 / 1", color: variant.slot.indexInk, fontSize: "0.6875rem", fontWeight: 500, transition: (0, motion_1.transitionFor)(["opacity"]), sx: { fontVariantNumeric: "tabular-nums", ...(0, motion_2.reducedMotionSx)() }, children: rowIndex + 1 })), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", className: restsOnIndex ? "table-slot-box" : undefined, gridArea: restsOnIndex ? "1 / 1" : undefined, display: "flex", alignItems: "center", justifyContent: "center", transition: (0, motion_1.transitionFor)(["opacity"]), sx: (0, motion_2.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { "aria-label": `Select row ${rowIndex + 1}`, onChange: () => handleCheckbox(getRowId(row)), isChecked: isChecked }) })] }) })), rowDetail && detailIds && ((0, jsx_runtime_1.jsx)(react_1.Td, { w: `${rowDetail_1.DETAIL_SLOT_PX}px`, minW: `${rowDetail_1.DETAIL_SLOT_PX}px`, maxW: `${rowDetail_1.DETAIL_SLOT_PX}px`, p: 0, textAlign: "center", background: isChecked ? selectedFrozenBg : frozenCellBg, position: "sticky", borderBottom: borderStyle, boxShadow: !isContent && !isCheckbox ? leadSx : undefined, "data-hoverable": chromeHoverable, boxSizing: "border-box", left: `${detailLeft}px`, zIndex: 1, className: "columns sticky-columns", children: hasDetail && ((0, jsx_runtime_1.jsx)(rowDetail_1.RowDetailToggle, { isOpen: detailOpen, detailId: detailIds.detailId, color: theme.colors.textMuted, theme: theme, onToggle: () => rowDetail.toggle(getRowId(row)) })) })), columns.map((header, headerIndex) => {
+                        var _a, _b, _c, _d;
+                        if (header.isHidden)
+                            return null;
+                        const isFrozen = header.isFreeze;
+                        const isFirstDataCell = !isContent && !isCheckbox && !rowDetail && headerIndex === firstDataColIndex;
+                        const isStatus = header.type === "status" && !header.node;
+                        const rawStatus = String((_a = row[header.id]) !== null && _a !== void 0 ? _a : "");
+                        const statusColor = isStatus
+                            ? (_c = (_b = header.statusPalette) === null || _b === void 0 ? void 0 : _b[rawStatus]) !== null && _c !== void 0 ? _c : (0, table_1.pickTableColor)(rawStatus, palette, (_d = header.statusColors) === null || _d === void 0 ? void 0 : _d[rawStatus], theme)
+                            : null;
+                        const isBleed = variant.cells.statusFill === "bleed" && !!statusColor;
+                        const bleedBg = statusColor === null || statusColor === void 0 ? void 0 : statusColor.soft;
+                        const bleedInk = statusColor === null || statusColor === void 0 ? void 0 : statusColor.text;
+                        const canHover = !isBleed && !((cellStyles === null || cellStyles === void 0 ? void 0 : cellStyles[header.id]) || rowStyle);
+                        return ((0, jsx_runtime_1.jsx)(react_1.Td, { maxWidth: 500, minWidth: 120, height: `${rowHeight}px`, py: isBleed ? 0 : cellPy, px: isBleed ? 0 : undefined, id: hasDetail && headerIndex === firstDataColIndex ? detailIds === null || detailIds === void 0 ? void 0 : detailIds.cellId : undefined, onClick: () => handleCellClick(header), fontSize: "sm", fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? `${leftOffsets[headerIndex]}px` : undefined, zIndex: isFrozen ? 1 : 0, background: isBleed ? bleedBg : isChecked ? (isFrozen ? selectedFrozenBg : selectedBg) : isFrozen ? frozenCellBg : restBg, textAlign: isBleed ? undefined : header.align, textOverflow: "ellipsis", boxShadow: isFirstDataCell ? leadSx : undefined, borderBottom: noBorders
+                                ? "none"
+                                : `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${isFrozen || isChecked
+                                    ? variant.row.frozenRuleColor
+                                    : variant.row.ruleColor}`, className: `columns ${isFrozen ? "sticky-columns" : "scrollable-columns"}`, boxSizing: "border-box", color: isBleed ? bleedInk : variant.cells.ink, "data-hoverable": canHover ? "true" : "false", _hover: variant.row.hoverScope === "row" || !canHover
+                                ? EMPTY_HOVER
+                                : hoverStyle, children: isBleed ? ((0, jsx_runtime_1.jsx)(StatusCell, { value: (0, table_1.normalizeTableCellValue)(row[header.id]), onSolid: bleedInk, align: header.align })) : isStatus && statusColor ? ((0, jsx_runtime_1.jsx)(StatusPill, { value: (0, table_1.normalizeTableCellValue)(row[header.id]), soft: statusColor.soft, ink: (0, pillInk_1.resolvePillInk)(statusColor.text, statusColor.soft, theme.colors.background[50]), radius: variant.cells.pillRadius })) : ((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: "sm", background: isChecked ? (isActionFreeze ? selectedFrozenBg : selectedBg) : isActionFreeze ? frozenCellBg : restBg, 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.background[50], borderRadius: "lg", children: rowContent(row) }) }) })), detailOpen && detailIds && ((0, jsx_runtime_1.jsx)(rowDetail_1.RowDetailRow, { ref: detailRowRef, id: detailIds.detailId, labelledBy: detailIds.cellId, colSpan: detailColSpan, bg: theme.colors.backgroundColor.secondary, borderColor: variant.row.ruleColor, noBorders: noBorders, children: detailNode }))] }));
+});
+const isStructuredEmpty = (value) => !!value && typeof value === "object" && !react_2.default.isValidElement(value);
+const TableEmpty = ({ emptyState }) => {
+    const structured = isStructuredEmpty(emptyState) ? emptyState : undefined;
+    const iconNode = structured === null || structured === void 0 ? void 0 : structured.icon;
+    const icon = (0, react_2.useMemo)(() => (iconNode ? () => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: iconNode }) : undefined), [iconNode]);
+    if (emptyState && !structured)
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: emptyState });
+    return ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { size: "sm", minH: `${rowMetrics_1.EMPTY_STATE_HEIGHT}px`, title: structured === null || structured === void 0 ? void 0 : structured.title, description: structured === null || structured === void 0 ? void 0 : structured.description, icon: icon }));
+};
+const TableBody = ({ data, isCheckbox, columns, startRow, rowsPerPage, columnWidths, slotWidth, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, selections, isLoading, onRowClick, isContent, isLink, isActionFreeze, loadingSkeletonRows, scrollContainerRef, density, stripe = false, accentColors, groups, onAddItem, emptyState, rowDetail, expandedIds, }) => {
+    var _a;
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const variant = (0, TableVariantContext_1.useTableVariant)();
+    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;
+        });
+    }, []);
+    const selectionsSet = (0, react_2.useMemo)(() => new Set(selections), [selections]);
+    const palette = (0, react_2.useMemo)(() => (0, table_1.buildTablePalette)(theme), [theme]);
+    const { height: rowHeight, py: cellPy } = rowMetrics_1.DENSITY_ROWS[density !== null && density !== void 0 ? density : "normal"];
+    // Windowing: only rows inside the viewport (+ overscan) mount; spacer rows (not transforms)
+    // reserve the rest so sticky header/frozen columns keep working. Rows report measured heights.
+    const ROW_HEIGHT = rowHeight;
+    const OVERSCAN = 6;
+    const VIRTUALIZE_THRESHOLD = 30;
+    const ESTIMATED_EXPAND = 120; // assumed extra height for an expanded-but-not-yet-measured row
+    const detailWidth = rowDetail ? rowDetail_1.DETAIL_SLOT_PX : 0;
+    const detailLeft = isCheckbox ? slotWidth : 0;
+    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.
+    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).
+    const [measuredHeights, setMeasuredHeights] = (0, react_2.useState)(new Map());
+    // NOTE: flushSync lands the batch before paint, as the old per-row layout effect did.
+    const applyHeights = (0, react_2.useCallback)((heights) => {
+        (0, react_dom_1.flushSync)(() => setMeasuredHeights((prev) => {
+            let next = prev;
+            heights.forEach((h, id) => {
+                if (next.get(id) === h)
+                    return;
+                if (next === prev)
+                    next = new Map(prev);
+                next.set(id, h);
+            });
+            return next;
+        }));
+    }, []);
+    const measurer = (0, rowMeasurer_1.useRowMeasurer)(applyHeights);
+    (0, react_2.useEffect)(() => {
+        const el = scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : scrollContainerRef.current;
+        if (!el || !(shouldVirtualize || groupVirtualize))
+            return;
+        let rafId = null;
+        const onScroll = () => {
+            if (rafId != null)
+                return;
+            rafId = requestAnimationFrame(() => {
+                rafId = null;
+                setScrollTop(el.scrollTop);
+            });
+        };
+        // NOTE: the sticky header covers the top of the scroller, so rows only get what is left.
+        const measure = () => {
+            const head = el.querySelector("thead");
+            setViewportH(el.clientHeight - (head ? head.offsetHeight : 0));
+        };
+        measure();
+        setScrollTop(el.scrollTop);
+        el.addEventListener("scroll", onScroll, { passive: true });
+        window.addEventListener("resize", measure);
+        return () => {
+            el.removeEventListener("scroll", onScroll);
+            window.removeEventListener("resize", measure);
+            if (rafId != null)
+                cancelAnimationFrame(rafId);
+        };
+    }, [scrollContainerRef, shouldVirtualize, groupVirtualize, data.length, groupRowCount]);
+    // Reset only on a real page change, never merely from the virtualization
+    // threshold flipping or rows being appended (infinite scroll/load-more).
+    const sliceKey = `${startRow}|${rowsPerPage}`;
+    const prevSliceKeyRef = (0, react_2.useRef)(sliceKey);
+    (0, react_2.useEffect)(() => {
+        const changed = prevSliceKeyRef.current !== sliceKey;
+        prevSliceKeyRef.current = sliceKey;
+        if (!changed)
+            return;
+        const el = scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : scrollContainerRef.current;
+        if (el)
+            el.scrollTop = 0;
+        setScrollTop(0);
+    }, [sliceKey, scrollContainerRef]);
+    const total = data.length;
+    // Prefix-sum offsets using measured heights (exact for rendered rows) and
+    // estimates for not-yet-measured rows (ROW_HEIGHT, + ESTIMATED_EXPAND if expanded).
+    // Independent of scrollTop, so scrolling reuses it instead of rebuilding it.
+    const offsets = (0, react_2.useMemo)(() => {
+        if (!shouldVirtualize || groups)
+            return null;
+        const acc = new Array(total + 1);
+        acc[0] = 0;
+        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) || (expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.has(id)) ? ESTIMATED_EXPAND : 0);
+            acc[i + 1] = acc[i] + h;
+        }
+        return acc;
+    }, [shouldVirtualize, groups, total, data, measuredHeights, expandedRows, expandedIds, startRow, ROW_HEIGHT, ESTIMATED_EXPAND]);
+    let firstIndex = 0;
+    let lastIndex = total;
+    let topPad = 0;
+    let bottomPad = 0;
+    if (shouldVirtualize && offsets) {
+        const vh = viewportH || 500;
+        const totalH = offsets[total];
+        const top = scrollTop - OVERSCAN * ROW_HEIGHT;
+        const bottom = scrollTop + vh + OVERSCAN * ROW_HEIGHT;
+        firstIndex = (0, exports.findFirstVisibleIndex)(offsets, total, top);
+        lastIndex = firstIndex;
+        while (lastIndex < total && offsets[lastIndex] < bottom)
+            lastIndex++;
+        if (lastIndex < firstIndex)
+            lastIndex = firstIndex;
+        topPad = offsets[firstIndex];
+        bottomPad = totalH - offsets[lastIndex];
+    }
+    const visibleRows = shouldVirtualize ? data.slice(firstIndex, lastIndex) : data;
+    // Consumers pass a fresh closure each render; the ref keeps memoized rows valid.
+    const onRowClickRef = (0, react_2.useRef)(onRowClick);
+    onRowClickRef.current = onRowClick;
+    const handleRowClick = (0, react_2.useCallback)((row, header) => {
+        var _a;
+        (_a = onRowClickRef.current) === null || _a === void 0 ? void 0 : _a.call(onRowClickRef, row, header);
+    }, []);
+    const rowClickHandler = onRowClick ? handleRowClick : undefined;
+    const toggleRowExpansion = (0, react_2.useCallback)((rowIndex) => {
+        setExpandedRows((prev) => {
+            const newSet = new Set(prev);
+            if (newSet.has(rowIndex)) {
+                newSet.delete(rowIndex);
+            }
+            else {
+                newSet.add(rowIndex);
+            }
+            return newSet;
+        });
+    }, []);
+    const totalVisibleColumns = (0, react_2.useMemo)(() => columns.filter((o) => !o.isHidden).length +
+        (isCheckbox ? 1 : 0) +
+        (isContent ? 1 : 0) +
+        (rowDetail ? 1 : 0) +
+        (isLink ? 1 : 0), [columns, isCheckbox, isContent, isLink, rowDetail]);
+    const hasFrozenColumn = (0, react_2.useMemo)(() => columns.some((column) => column.isFreeze), [columns]);
+    const leftOffsets = (0, react_2.useMemo)(() => {
+        if (!hasFrozenColumn)
+            return NO_OFFSETS;
+        const checkboxOffset = (isCheckbox ? slotWidth : 0) + detailWidth;
+        return columnWidths.map((_, idx) => columnWidths.slice(0, idx).reduce((sum, w) => sum + w, 0) + checkboxOffset);
+    }, [hasFrozenColumn, columnWidths, isCheckbox, slotWidth, detailWidth]);
+    const borderStyle = (0, react_2.useMemo)(() => noBorders ? "none" : `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${variant.row.ruleColor}`, [noBorders, variant.row.ruleColor]);
+    // 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.
+    const selectedBg = variant.row.selectedBg;
+    // Sticky/frozen cells overlay scrolling content, so their selected background
+    // must be OPAQUE — paint the (translucent) tint over an opaque base.
+    const selectedFrozenBg = `linear-gradient(0deg, ${selectedBg}, ${selectedBg}), ${theme.colors.background[50]}`;
+    // Dark mode lifts the hover fill to `table.hover[500]`; `[300]` sits ~1.2:1 from the canvas.
+    // No ink flip needed — see `tableRowHoverStyle.ts`.
+    const hoverStyle = (0, react_2.useMemo)(() => ({ backgroundColor: variant.row.hoverBg }), [variant.row.hoverBg]);
+    // Flatten groups → one sequence of header/row items so it can be windowed.
+    // Independent of scrollTop, so scrolling reuses it instead of re-flattening.
+    const groupItems = (0, react_2.useMemo)(() => {
+        if (!groups)
+            return null;
+        const list = [];
+        for (const g of groups) {
+            list.push({ kind: "header", g });
+            if (!collapsedGroups.has(g.value)) {
+                g.rows.forEach((row, pos) => list.push({ kind: "row", g, row, pos }));
+            }
+        }
+        return list;
+    }, [groups, collapsedGroups]);
+    const groupMetrics = (0, react_2.useMemo)(() => {
+        if (!groupItems || !groupVirtualize)
+            return null;
+        const heights = groupItems.map((it) => {
+            var _a;
+            if (it.kind === "header")
+                return rowMetrics_1.GROUP_HEADER_HEIGHT;
+            if (!rowDetail)
+                return rowHeight;
+            const id = getRowId(it.row);
+            return (_a = measuredHeights.get(id)) !== null && _a !== void 0 ? _a : rowHeight + ((expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.has(id)) ? ESTIMATED_EXPAND : 0);
+        });
+        const offsets = [];
+        let acc = 0;
+        for (const h of heights) {
+            offsets.push(acc);
+            acc += h;
+        }
+        return { heights, offsets, totalH: acc };
+    }, [groupItems, groupVirtualize, rowHeight, rowDetail, measuredHeights, expandedIds, ESTIMATED_EXPAND]);
+    // Clamp scrollTop back when a shorter data set leaves it past the new content height.
+    (0, react_2.useEffect)(() => {
+        const totalH = shouldVirtualize && offsets ? offsets[total] : groupVirtualize && groupMetrics ? groupMetrics.totalH : null;
+        if (totalH == null)
+            return;
+        const maxScrollTop = Math.max(0, totalH - viewportH);
+        if (scrollTop > maxScrollTop) {
+            const el = scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : scrollContainerRef.current;
+            if (el)
+                el.scrollTop = maxScrollTop;
+            setScrollTop(maxScrollTop);
+        }
+    }, [shouldVirtualize, offsets, total, groupVirtualize, groupMetrics, viewportH, scrollTop, scrollContainerRef]);
+    // Prune measured heights for rows no longer in data so the map stays bounded.
+    (0, react_2.useEffect)(() => {
+        setMeasuredHeights((prev) => {
+            if (prev.size === 0)
+                return prev;
+            const ids = new Set(data.map(getRowId));
+            let changed = false;
+            const next = new Map();
+            prev.forEach((h, id) => {
+                if (ids.has(id)) {
+                    next.set(id, h);
+                }
+                else {
+                    changed = true;
+                }
+            });
+            return changed ? next : prev;
+        });
+    }, [data]);
+    if (isLoading && data.length === 0) {
+        const dataColumns = columns.filter((o) => !o.isHidden).length;
+        const cells = [
+            ...(isContent ? ["blank"] : []),
+            ...(isCheckbox ? ["checkbox"] : []),
+            ...(rowDetail ? ["blank"] : []),
+            ...Array.from({ length: dataColumns || TableLoading_1.LOADING_PLACEHOLDER_COLUMNS }, () => "bar"),
+            ...(isLink ? ["blank"] : []),
+        ];
+        return ((0, jsx_runtime_1.jsx)(TableLoading_1.TableBodyLoading, { noOfColumns: cells.length, cells: cells, borderColor: variant.row.ruleColor, rowsCount: typeof loadingSkeletonRows === "number" ? loadingSkeletonRows : 4, rowHeight: rowHeight }));
+    }
+    if (!isLoading && data.length === 0) {
+        return ((0, jsx_runtime_1.jsx)(react_1.Tr, { backgroundColor: theme.colors.background[50], children: (0, jsx_runtime_1.jsx)(react_1.Td, { colSpan: totalVisibleColumns, p: 0, border: "none", children: (0, jsx_runtime_1.jsx)(TableEmpty, { emptyState: emptyState }) }) }));
+    }
+    // --- Monday-style grouped board render (virtualized when large) -----------
+    if (groups) {
+        const items = groupItems !== null && groupItems !== void 0 ? groupItems : [];
+        let firstI = 0;
+        let lastI = items.length;
+        let gTopPad = 0;
+        let gBottomPad = 0;
+        if (groupVirtualize && groupMetrics) {
+            const { heights, offsets, totalH } = groupMetrics;
+            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 (let i = firstI; i < items.length; i++) {
+                if (offsets[i] > bottom) {
+                    lastI = i;
+                    break;
+                }
+            }
+            gTopPad = (_a = offsets[firstI]) !== null && _a !== void 0 ? _a : 0;
+            gBottomPad = totalH - (lastI > firstI ? offsets[lastI - 1] + heights[lastI - 1] : gTopPad);
+        }
+        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, ariaRowIndex: firstI + k + 2, onToggle: () => toggleGroup(it.g.value), onAddItem: onAddItem }, `h-${it.g.value}`)) : ((0, jsx_runtime_1.jsx)(TableRow, { row: it.row, rowIndex: 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, selectedBg: selectedBg, selectedFrozenBg: selectedFrozenBg, hoverStyle: hoverStyle, rowHeight: rowHeight, cellPy: cellPy, palette: palette, accentColor: it.g.color.solid, isStriped: stripe && it.pos % 2 === 1, rowDetail: rowDetail, isDetailOpen: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.has(getRowId(it.row))), detailLeft: rowDetail ? detailLeft : 0, detailColSpan: totalVisibleColumns, ariaRowIndex: firstI + k + 2, handleCheckbox: handleCheckbox, onRowClick: rowClickHandler, toggleRowExpansion: toggleRowExpansion, measurer: groupVirtualize && rowDetail ? measurer : undefined }, (_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 ((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: theme.colors.accentText }) }) }) })), 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, 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, selectedBg: selectedBg, selectedFrozenBg: selectedFrozenBg, hoverStyle: hoverStyle, rowHeight: rowHeight, cellPy: cellPy, palette: palette, accentColor: accentColors === null || accentColors === void 0 ? void 0 : accentColors[getRowId(row)], isStriped: stripe && index % 2 === 1, rowDetail: rowDetail, isDetailOpen: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.has(getRowId(row))), detailLeft: rowDetail ? detailLeft : 0, detailColSpan: totalVisibleColumns, ariaRowIndex: index + 2, handleCheckbox: handleCheckbox, onRowClick: rowClickHandler, toggleRowExpansion: toggleRowExpansion, measurer: shouldVirtualize ? measurer : 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

@@ -0,0 +1,16 @@
+import React from "react";
+import { TablePaletteColor } from "../../../Utils/table";
+type Props = {
+    label: string;
+    value: string | number;
+    count: number;
+    color: TablePaletteColor;
+    collapsed: boolean;
+    colSpan: number;
+    ariaRowIndex?: number;
+    onToggle: () => void;
+    onAddItem?: (groupValue: string | number) => void;
+};
+/** Monday-style colored, collapsible group header row. */
+export declare const TableGroupRow: React.FC<Props>;
+export default TableGroupRow;