pixelize-design-library 2.4.1-beta.11 → 2.4.1-beta.13

package/dist/esm/Components/Table/components/HeaderActions.js

@@ -0,0 +1,47 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box } from "@chakra-ui/react";
+import { SquarePen, Trash2 } from "lucide-react";
+import React from "react";
+import { useCustomTheme } from "../../../Theme/useCustomTheme";
+import { accentTextOnCanvas } from "../../../Theme/tokens/builders/accentText";
+import VeritcalDivider from "../../Divider/Divider";
+const ListItem = ({ icon, name, onClick, selections, isHoverEnabled = false, hoverColor, customComponent, }) => {
+    var _a, _b, _c;
+    const { colors } = useCustomTheme();
+    const styledIcon = icon ? React.cloneElement(icon, {
+        color: "currentColor",
+        size: "1.25rem",
+    }) : null;
+    // A `customComponent` may itself be focusable, and a button must never wrap one.
+    const isButton = !!onClick && !customComponent;
+    return (_jsxs(Box, { as: isButton ? "button" : undefined, type: isButton ? "button" : undefined, bg: "transparent", textAlign: "left", fontSize: "inherit", fontWeight: "inherit", fontFamily: "inherit", display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", onClick: () => onClick && onClick(selections), color: (_a = colors === null || colors === void 0 ? void 0 : colors.text) === null || _a === void 0 ? void 0 : _a[500], px: 2, py: 1, borderRadius: "md", _hover: isHoverEnabled
+            ? {
+                color: hoverColor ? hoverColor : (_b = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _b === void 0 ? void 0 : _b[500],
+                bg: ((_c = colors === null || colors === void 0 ? void 0 : colors.background) === null || _c === void 0 ? void 0 : _c[100]) || "gray.50",
+            }
+            : {}, transition: "all 0.2s ease", children: [customComponent, styledIcon, " ", name] }));
+};
+const HeaderActions = ({ actions, selections, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const { colors } = useCustomTheme();
+    const hasSelections = selections.length > 0;
+    return (_jsxs(Box, { display: "flex", gap: 2, fontSize: "0.875rem", fontWeight: 400, color: accentTextOnCanvas(colors === null || colors === void 0 ? void 0 : colors.secondary, (_a = colors === null || colors === void 0 ? void 0 : colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main), alignItems: "center", children: [(_b = actions === null || actions === void 0 ? void 0 : actions.items) === null || _b === void 0 ? void 0 : _b.map((item, index) => {
+                if ("type" in item)
+                    return null;
+                const actionItem = item;
+                if (actionItem.isStatic) {
+                    return (_jsx(ListItem, { ...actionItem, selections: selections }, `static-${index}`));
+                }
+                return null;
+            }), hasSelections && (_jsxs(_Fragment, { children: [((_c = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _c === void 0 ? void 0 : _c.enabled) && (_jsx(ListItem, { icon: _jsx(Trash2, { className: "w-4 h-4" }), name: "Delete", onClick: (_d = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _d === void 0 ? void 0 : _d.onClick, selections: selections, isHoverEnabled: true, hoverColor: (_e = colors === null || colors === void 0 ? void 0 : colors.red) === null || _e === void 0 ? void 0 : _e[500] })), ((_f = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _f === void 0 ? void 0 : _f.enabled) && (_jsx(ListItem, { icon: _jsx(SquarePen, { className: "w-4 h-4" }), name: "Mass Update", onClick: (_g = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _g === void 0 ? void 0 : _g.onClick, selections: selections, isHoverEnabled: true, hoverColor: (_h = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _h === void 0 ? void 0 : _h[500] })), (_j = actions === null || actions === void 0 ? void 0 : actions.items) === null || _j === void 0 ? void 0 : _j.map((item, index) => {
+                        if ("type" in item && item.type === "divider") {
+                            return _jsx(VeritcalDivider, {}, index);
+                        }
+                        const actionItem = item;
+                        if (!actionItem.isStatic) {
+                            return (_jsx(ListItem, { ...actionItem, selections: selections }, `dynamic-${index}`));
+                        }
+                        return null;
+                    })] }))] }));
+};
+export default HeaderActions;

package/dist/esm/Components/Table/components/Pagination.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo } from "react";
+import { Flex, IconButton, Select, Text } from "@chakra-ui/react";
+import { pageSizeCalculation } from "../../../Utils/table";
+import { useCustomTheme } from "../../../Theme/useCustomTheme";
+import ToolTip from "../../ToolTip/ToolTip";
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, } from "lucide-react";
+const Pagination = React.memo(({ paginationText, handlePageSizeChange, rowsPerPage, currentPage, pages, setCurrentPage, dataLength, isServerPagination, paginationSelectOptions, }) => {
+    const computedOptions = useMemo(() => paginationSelectOptions && paginationSelectOptions.length
+        ? paginationSelectOptions
+        : pageSizeCalculation(dataLength), [paginationSelectOptions, dataLength]);
+    const theme = useCustomTheme();
+    // const isLeftDisabled = currentPage === 0;
+    // const isRightDisabled = currentPage >= pages - 1;
+    const isLeftDisabled = dataLength === 0 || currentPage === 0;
+    const isRightDisabled = dataLength === 0 || currentPage >= pages - 1;
+    return (_jsxs(Flex, { justify: "flex-end", align: "center", flexWrap: "nowrap", children: [(!isServerPagination || paginationSelectOptions) && (_jsxs(Select, { onChange: handlePageSizeChange, value: rowsPerPage, size: "xs", borderRadius: 3, width: "auto", minW: "4.5rem", isDisabled: dataLength === 0, children: [!paginationSelectOptions && dataLength < 100 ? _jsx("option", { value: 0 }) : null, computedOptions.map((size, index) => (_jsx("option", { value: String(size), children: String(size) }, index)))] })), dataLength > 0 && (_jsxs(Flex, { w: "100%", children: [_jsx(ToolTip, { label: "First", placement: "top", children: _jsx(IconButton, { "aria-label": "first-page", color: isLeftDisabled ? theme.colors.gray[400] : theme.colors.text[500], rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: () => setCurrentPage(0), _hover: !isLeftDisabled ? { color: theme.colors.primary[500] } : {}, children: _jsx(ChevronsLeft, {}) }) }), _jsx(ToolTip, { label: "Previous", placement: "top", children: _jsx(IconButton, { "aria-label": "previous-page", color: isLeftDisabled ? theme.colors.gray[400] : theme.colors.text[500], rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: () => currentPage > 0 && setCurrentPage(currentPage - 1), _hover: !isLeftDisabled ? { color: theme.colors.primary[500] } : {}, children: _jsx(ChevronLeft, {}) }) }), _jsx(Text, { mt: 3, fontSize: 12, whiteSpace: "nowrap", color: theme.colors.text[500], children: paginationText }), _jsx(ToolTip, { label: "Next", placement: "top", children: _jsx(IconButton, { "aria-label": "next-page", color: isRightDisabled ? theme.colors.gray[400] : theme.colors.text[500], rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: () => currentPage < pages - 1 && setCurrentPage(currentPage + 1), _hover: !isRightDisabled ? { color: theme.colors.primary[500] } : {}, children: _jsx(ChevronRight, {}) }) }), _jsx(ToolTip, { label: "Last", placement: "top", children: _jsx(IconButton, { "aria-label": "last-page", color: isRightDisabled ? theme.colors.gray[400] : theme.colors.text[500], rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: () => setCurrentPage(pages - 1), _hover: !isRightDisabled ? { color: theme.colors.primary[500] } : {}, children: _jsx(ChevronsRight, {}) }) })] }))] }));
+});
+export default Pagination;

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

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useRef, useState } from "react";
+import { Button, IconButton, Popover, PopoverBody, PopoverContent, PopoverTrigger, Portal, VStack, } from "@chakra-ui/react";
+import { EllipsisVertical, ExternalLink, Pencil, Trash2 } from "lucide-react";
+import { useCustomTheme } from "../../../Theme/useCustomTheme";
+const TableActions = React.memo(({ row }) => {
+    var _a, _b, _c;
+    const [isOpen, setIsOpen] = useState(false);
+    const ref = useRef(null);
+    const theme = useCustomTheme();
+    // Listen for "close-all-popovers"
+    useEffect(() => {
+        const handler = () => setIsOpen(false);
+        window.addEventListener("close-all-popovers", handler);
+        return () => window.removeEventListener("close-all-popovers", handler);
+    }, []);
+    // Detect outside click
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (ref.current && !ref.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            // ✅ Use click instead of mousedown
+            document.addEventListener("click", handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener("click", handleClickOutside);
+        };
+    }, [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 (_jsx(Popover, { placement: "bottom-start", isOpen: isOpen, onClose: handleClose, closeOnBlur: false, children: _jsxs("div", { ref: ref, children: [_jsx(PopoverTrigger, { children: _jsx(IconButton, { "aria-label": "Actions", color: theme.colors.text[900], icon: _jsx(EllipsisVertical, { size: 17 }), size: "sm", p: 0, variant: "ghost", _hover: { transform: "scale(1.2)" }, onClick: () => (isOpen ? handleClose() : handleOpen()) }) }), isOpen && (_jsx(Portal, { children: _jsx(PopoverContent, { w: "auto", minW: "100px", boxShadow: "lg", p: 0, zIndex: 999, children: _jsx(PopoverBody, { p: 0, m: 0, children: _jsxs(VStack, { align: "stretch", spacing: 1, p: 0, m: 0, children: [row.onLink && (_jsxs(Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", borderBottom: `1px solid ${(_a = theme.colors) === null || _a === void 0 ? void 0 : _a.border[500]}`, borderRadius: 0, gap: 2, onClick: () => {
+                                            var _a;
+                                            (_a = row.onLink) === null || _a === void 0 ? void 0 : _a.call(row, row);
+                                            handleClose();
+                                        }, children: [_jsx(ExternalLink, { size: 17 }), " View"] })), row.onEdit && (_jsxs(Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, borderBottom: `1px solid ${(_b = theme.colors) === null || _b === void 0 ? void 0 : _b.border[500]}`, borderRadius: 0, onClick: () => {
+                                            var _a;
+                                            (_a = row.onEdit) === null || _a === void 0 ? void 0 : _a.call(row, row);
+                                            handleClose();
+                                        }, children: [_jsx(Pencil, { size: 17 }), " Edit"] })), row.actions && ((_c = row === null || row === void 0 ? void 0 : row.actions) === null || _c === void 0 ? void 0 : _c.call(row)), row.onDelete && (_jsxs(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: [_jsx(Trash2, { size: 17 }), " Delete"] })), !row.onLink && !row.onEdit && !row.onDelete && !row.actions && (_jsx(Button, { size: "sm", variant: "ghost", isDisabled: true, justifyContent: "center", children: "No actions" }))] }) }) }) }))] }) }));
+});
+TableActions.displayName = "TableActions";
+export default TableActions;

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

@@ -0,0 +1,337 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, IconButton, Spinner, Td, Tr } from "@chakra-ui/react";
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { normalizeTableCellValue, buildTablePalette, pickTableColor } from "../../../Utils/table";
+import { useCustomTheme } from "../../../Theme/useCustomTheme";
+import { onFilled, isDarkCanvas } from "../../../Theme/tokens/builders/accentText";
+import { TableBodyLoading } from "./TableLoading";
+import TableActions from "./TableActions";
+import { getTableRowHoverStyle } from "./tableRowHoverStyle";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import CheckBox from "../../Checkbox/Checkbox";
+import TableGroupRow from "./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.
+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 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 StatusCell = ({ value, onSolid }) => (_jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", w: "100%", h: "100%", px: "0.5rem", fontSize: "0.75rem", fontWeight: 600, color: onSolid, textAlign: "center", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: value }));
+const EMPTY_HOVER = {};
+const TableRow = React.memo(({ row, rowIndex, isChecked, isExpanded, isContent, isLink, isCheckbox, isLoading, isActionFreeze, columns, leftOffsets, noBorders, freezedBgColor, freezedTextColor, theme, borderStyle, selectedBg, selectedFrozenBg, hoverStyle, rowHeight, cellPy, palette, accentColor, ariaRowIndex, handleCheckbox, onRowClick, toggleRowExpansion, onMeasure, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    // Measured-height virtualization: report this row's real height (main + any
+    // expanded panel) so the windower can place variable/expandable rows exactly.
+    const mainRowRef = useRef(null);
+    const expandedRowRef = useRef(null);
+    const hasContent = !!getRowContent(row);
+    useLayoutEffect(() => {
+        if (!onMeasure)
+            return;
+        const measure = () => {
+            var _a, _b, _c, _d;
+            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(getRowId(row), h);
+        };
+        measure();
+        const raf = requestAnimationFrame(measure);
+        let ro;
+        if (typeof ResizeObserver !== "undefined") {
+            ro = new ResizeObserver(measure);
+            if (mainRowRef.current)
+                ro.observe(mainRowRef.current);
+            if (expandedRowRef.current)
+                ro.observe(expandedRowRef.current);
+        }
+        return () => {
+            cancelAnimationFrame(raf);
+            ro === null || ro === void 0 ? void 0 : ro.disconnect();
+        };
+    }, [onMeasure, isExpanded, hasContent, row]);
+    const handleCellClick = useCallback((header) => {
+        if (!header.node && onRowClick) {
+            onRowClick(row, { label: header.label, id: header.id });
+        }
+    }, [row, onRowClick]);
+    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).
+    const frozenCellBg = (_d = freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[100]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.background) === null || _f === void 0 ? void 0 : _f[100];
+    const cellStyles = row.cellStyle;
+    const rowStyle = row.rowStyle;
+    const rowContent = getRowContent(row);
+    return (_jsxs(React.Fragment, { children: [_jsxs(Tr, { ref: mainRowRef, "aria-rowindex": ariaRowIndex, opacity: isLoading ? 0.4 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "opacity 0.2s", children: [isContent && (_jsx(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) && (_jsx(IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray[600], icon: isExpanded ? (_jsx(ChevronDown, { fontSize: 16 })) : (_jsx(ChevronRight, { fontSize: 16 })), _hover: { transform: "scale(1.1)" }, size: "sm", onClick: () => toggleRowExpansion(rowIndex), variant: "ghost" })) })), isCheckbox && (_jsx(Td, { w: "6", fontSize: 14, fontWeight: 600, color: (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.background) === null || _j === void 0 ? void 0 : _j[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: _jsx(CheckBox, { "aria-label": `Select row ${rowIndex + 1}`, onChange: () => handleCheckbox(getRowId(row)), isChecked: isChecked }) })), columns.map((header, headerIndex) => {
+                        var _a, _b, _c, _d, _e, _f, _g, _h;
+                        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
+                            ? pickTableColor(rawStatus, palette, (_b = header.statusColors) === null || _b === void 0 ? void 0 : _b[rawStatus], theme)
+                            : null;
+                        // Guards a `statusColor` built by an older external caller that predates `onSolid`.
+                        const statusOnSolid = statusColor
+                            ? (_c = statusColor.onSolid) !== null && _c !== void 0 ? _c : onFilled((_d = statusColor.solid) !== null && _d !== void 0 ? _d : "#8B3FC8", theme.colors.white, theme.colors.black)
+                            : undefined;
+                        return (_jsx(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 : (_e = theme.colors.background) === null || _e === void 0 ? void 0 : _e[50], textOverflow: "ellipsis", boxShadow: isFirstDataCell ? accentSx : undefined, borderBottom: noBorders
+                                ? "none"
+                                : `0.063rem solid ${(_f = theme.colors) === null || _f === void 0 ? void 0 : _f.gray[isFrozen || isChecked ? 300 : 200]}`, className: `columns ${isFrozen ? "sticky-columns" : "scrollable-columns"}`, boxSizing: "border-box", color: isStatus && statusColor ? statusOnSolid : (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.text) === null || _h === void 0 ? void 0 : _h[500], _hover: isStatus && statusColor
+                                ? EMPTY_HOVER
+                                : (cellStyles === null || cellStyles === void 0 ? void 0 : cellStyles[header.id]) || rowStyle
+                                    ? EMPTY_HOVER
+                                    : hoverStyle, children: isStatus && statusColor ? (_jsx(StatusCell, { value: normalizeTableCellValue(row[header.id]), onSolid: statusOnSolid })) : (_jsx(Box, { display: "block", overflow: "hidden", whiteSpace: "normal", overflowWrap: "break-word", children: normalizeTableCellValue(header.node ? header.node(row) : row[header.id]) })) }, headerIndex + 1));
+                    }), isLink && (_jsx(Td, { w: 2, p: 0, fontSize: 14, background: isChecked ? (isActionFreeze ? selectedFrozenBg : selectedBg) : isActionFreeze ? frozenCellBg : (_l = (_k = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _k === void 0 ? void 0 : _k.background) === null || _l === void 0 ? void 0 : _l[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) ? (_jsx(TableActions, { row: row })) : null }))] }), rowContent && isExpanded && (_jsx(Tr, { ref: expandedRowRef, children: _jsx(Td, { colSpan: columns.length +
+                        (isCheckbox ? 1 : 0) +
+                        (isContent ? 1 : 0) +
+                        (isLink ? 1 : 0), p: 2, children: _jsx(Box, { p: 2, bg: (_m = theme.colors.background) === null || _m === void 0 ? void 0 : _m[50], borderRadius: "md", children: rowContent(row) }) }) }))] }));
+});
+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, _t, _u, _v, _w, _x, _y, _z;
+    const theme = useCustomTheme();
+    const [expandedRows, setExpandedRows] = useState(new Set());
+    const [collapsedGroups, setCollapsedGroups] = useState(new Set());
+    const toggleGroup = useCallback((value) => {
+        setCollapsedGroups((prev) => {
+            const next = new Set(prev);
+            if (next.has(value)) {
+                next.delete(value);
+            }
+            else {
+                next.add(value);
+            }
+            return next;
+        });
+    }, []);
+    const selectionsSet = useMemo(() => new Set(selections), [selections]);
+    const palette = useMemo(() => 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
+    // visible. Mounting all 50/100 page rows is what makes paging freeze. We
+    // render only the rows inside the viewport (+ overscan) and reserve the
+    // remaining height with empty spacer rows. Spacer rows (rather than CSS
+    // transforms) keep the table in normal flow so the sticky header and
+    // `position: sticky` frozen columns keep working.
+    // 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.
+    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.
+    const groupRowCount = groups ? groups.reduce((n, g) => n + g.rows.length, 0) : 0;
+    const groupVirtualize = !!groups && !isContent && groupRowCount > VIRTUALIZE_THRESHOLD;
+    const [scrollTop, setScrollTop] = useState(0);
+    const [viewportH, setViewportH] = useState(0);
+    // Measured row heights keyed by row id (stable across scroll/paging).
+    const [measuredHeights, setMeasuredHeights] = useState(new Map());
+    const reportHeight = useCallback((id, h) => {
+        setMeasuredHeights((prev) => {
+            if (prev.get(id) === h)
+                return prev;
+            const next = new Map(prev);
+            next.set(id, h);
+            return next;
+        });
+    }, []);
+    useEffect(() => {
+        const el = scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : scrollContainerRef.current;
+        if (!el || !(shouldVirtualize || groupVirtualize))
+            return;
+        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 () => {
+            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.
+    useEffect(() => {
+        if (!shouldVirtualize)
+            return;
+        const el = scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : scrollContainerRef.current;
+        if (el)
+            el.scrollTop = 0;
+        setScrollTop(0);
+    }, [startRow, shouldVirtualize, 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 = useMemo(() => {
+        if (!shouldVirtualize)
+            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) ? ESTIMATED_EXPAND : 0);
+            acc[i + 1] = acc[i] + h;
+        }
+        return acc;
+    }, [shouldVirtualize, total, data, measuredHeights, expandedRows, 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;
+        while (firstIndex < total && offsets[firstIndex + 1] <= top)
+            firstIndex++;
+        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 = useRef(onRowClick);
+    onRowClickRef.current = onRowClick;
+    const handleRowClick = 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 = useCallback((rowIndex) => {
+        setExpandedRows((prev) => {
+            const newSet = new Set(prev);
+            if (newSet.has(rowIndex)) {
+                newSet.delete(rowIndex);
+            }
+            else {
+                newSet.add(rowIndex);
+            }
+            return newSet;
+        });
+    }, []);
+    const totalVisibleColumns = useMemo(() => columns.filter((o) => !o.isHidden).length +
+        (isCheckbox ? 1 : 0) +
+        (isContent ? 1 : 0) +
+        (isLink ? 1 : 0), [columns, isCheckbox, isContent, isLink]);
+    const leftOffsets = useMemo(() => {
+        const checkboxOffset = isCheckbox ? 50 : 0;
+        return columnWidths.map((_, idx) => columnWidths.slice(0, idx).reduce((sum, w) => sum + w, 0) + checkboxOffset);
+    }, [columnWidths, isCheckbox]);
+    const borderStyle = 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]);
+    // 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 = (_e = (_d = (_c = theme.colors.primary) === null || _c === void 0 ? void 0 : _c.opacity) === null || _d === void 0 ? void 0 : _d[16]) !== null && _e !== void 0 ? _e : (_f = theme.colors.disabled) === null || _f === void 0 ? void 0 : _f[100];
+    // 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}), ${(_j = (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.background) === null || _h === void 0 ? void 0 : _h[50]) !== null && _j !== void 0 ? _j : "#fff"}`;
+    // Dark mode needs a much brighter fill to be visible against a near-black row (`table.hover[300]`
+    // sits within ~1.2:1 of it) plus a flipped ink color so the existing (light-tuned) cell text
+    // stays legible on that brighter fill — see `tableRowHoverStyle.ts`.
+    const isDark = isDarkCanvas((_l = (_k = theme.colors.backgroundColor) === null || _k === void 0 ? void 0 : _k.main) !== null && _l !== void 0 ? _l : "#ffffff");
+    const hoverStyle = useMemo(() => getTableRowHoverStyle(theme.colors, isDark), [theme.colors, isDark]);
+    // 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 = useMemo(() => {
+        if (!groups)
+            return null;
+        const list = [];
+        for (const g of groups) {
+            list.push({ kind: "header", g });
+            if (!collapsedGroups.has(g.value)) {
+                for (const row of g.rows)
+                    list.push({ kind: "row", g, row });
+            }
+        }
+        return list;
+    }, [groups, collapsedGroups]);
+    const groupMetrics = useMemo(() => {
+        if (!groupItems || !groupVirtualize)
+            return null;
+        const heights = groupItems.map((it) => (it.kind === "header" ? GROUP_HEADER_H : rowHeight));
+        const offsets = [];
+        let acc = 0;
+        for (const h of heights) {
+            offsets.push(acc);
+            acc += h;
+        }
+        return { heights, offsets, totalH: acc };
+    }, [groupItems, groupVirtualize, rowHeight, GROUP_HEADER_H]);
+    if (isLoading && data.length === 0) {
+        return (_jsx(TableBodyLoading, { noOfColumns: totalVisibleColumns, borderColor: theme.colors.gray[300], rowsCount: typeof loadingSkeletonRows === "number" ? loadingSkeletonRows : 4 }));
+    }
+    if (!isLoading && data.length === 0) {
+        const isStructured = emptyState && typeof emptyState === "object" && !React.isValidElement(emptyState);
+        const es = isStructured ? emptyState : null;
+        return (_jsx(Tr, { backgroundColor: (_m = theme.colors.background) === null || _m === void 0 ? void 0 : _m[50], children: _jsx(Td, { colSpan: totalVisibleColumns, textAlign: "center", py: 10, border: "none", children: emptyState && !isStructured ? emptyState : (_jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", gap: 2, color: (_p = (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.gray) === null || _p === void 0 ? void 0 : _p[500], children: [(es === null || es === void 0 ? void 0 : es.icon) && _jsx(Box, { fontSize: "1.75rem", color: (_r = (_q = theme.colors) === null || _q === void 0 ? void 0 : _q.gray) === null || _r === void 0 ? void 0 : _r[400], children: es.icon }), _jsx(Box, { fontSize: "0.95rem", fontWeight: 600, color: (_t = (_s = theme.colors) === null || _s === void 0 ? void 0 : _s.text) === null || _t === void 0 ? void 0 : _t[700], children: (_u = es === null || es === void 0 ? void 0 : es.title) !== null && _u !== void 0 ? _u : "No data found" }), (es === null || es === void 0 ? void 0 : es.description) && (_jsx(Box, { fontSize: "0.8125rem", color: (_w = (_v = theme.colors) === null || _v === void 0 ? void 0 : _v.gray) === null || _w === void 0 ? void 0 : _w[500], children: es.description }))] })) }) }));
+    }
+    // --- 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 = (_x = offsets[firstI]) !== null && _x !== void 0 ? _x : 0;
+            gBottomPad = totalH - (lastI > firstI ? offsets[lastI - 1] + heights[lastI - 1] : gTopPad);
+        }
+        const windowItems = groupVirtualize ? items.slice(firstI, lastI) : items;
+        return (_jsxs(_Fragment, { children: [gTopPad > 0 && (_jsx("tr", { "aria-hidden": "true", style: { height: gTopPad }, children: _jsx("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: gTopPad } }) })), windowItems.map((it, k) => {
+                    var _a;
+                    return it.kind === "header" ? (_jsx(TableGroupRow, { 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}`)) : (_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, selectedBg: selectedBg, selectedFrozenBg: selectedFrozenBg, hoverStyle: hoverStyle, rowHeight: rowHeight, cellPy: cellPy, palette: palette, accentColor: it.g.color.solid, ariaRowIndex: firstI + k + 2, handleCheckbox: handleCheckbox, onRowClick: rowClickHandler, toggleRowExpansion: toggleRowExpansion }, (_a = getRowId(it.row)) !== null && _a !== void 0 ? _a : `r-${firstI + k}`));
+                }), gBottomPad > 0 && (_jsx("tr", { "aria-hidden": "true", style: { height: gBottomPad }, children: _jsx("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: gBottomPad } }) }))] }));
+    }
+    return (_jsxs(_Fragment, { children: [isLoading && data.length > 0 && (_jsx(Tr, { children: _jsx(Td, { colSpan: totalVisibleColumns, p: 0, border: "none", position: "relative", height: 0, children: _jsx(Box, { position: "absolute", top: 4, left: "50%", transform: "translateX(-50%)", zIndex: 10, children: _jsx(Spinner, { size: "sm", color: ((_z = (_y = theme.colors) === null || _y === void 0 ? void 0 : _y.primary) === null || _z === void 0 ? void 0 : _z[500]) || "blue.500" }) }) }) })), shouldVirtualize && topPad > 0 && (_jsx("tr", { "aria-hidden": "true", style: { height: topPad }, children: _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 (_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, selectedBg: selectedBg, selectedFrozenBg: selectedFrozenBg, hoverStyle: hoverStyle, rowHeight: rowHeight, cellPy: cellPy, palette: palette, accentColor: accentColors === null || accentColors === void 0 ? void 0 : accentColors[getRowId(row)], ariaRowIndex: index + 2, handleCheckbox: handleCheckbox, onRowClick: rowClickHandler, toggleRowExpansion: toggleRowExpansion, onMeasure: shouldVirtualize ? reportHeight : undefined }, (_a = getRowId(row)) !== null && _a !== void 0 ? _a : rowIndex));
+            }), shouldVirtualize && bottomPad > 0 && (_jsx("tr", { "aria-hidden": "true", style: { height: bottomPad }, children: _jsx("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: bottomPad } }) }))] }));
+};
+export default TableBody;

package/dist/esm/Components/Table/components/TableGroupRow.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, IconButton, Td, Text, Tr } from "@chakra-ui/react";
+import { ChevronDown, ChevronRight, Plus } from "lucide-react";
+import { useCustomTheme } from "../../../Theme/useCustomTheme";
+/** Monday-style colored, collapsible group header row. */
+export const TableGroupRow = ({ label, value, count, color, collapsed, colSpan, ariaRowIndex, onToggle, onAddItem, }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const theme = useCustomTheme();
+    return (_jsx(Tr, { "aria-rowindex": ariaRowIndex, children: _jsx(Td, { colSpan: colSpan, p: 0, border: "none", children: _jsxs(Flex, { align: "center", gap: 2, px: 3, py: 2, bg: color.soft, boxShadow: `inset 4px 0 0 ${color.solid}`, borderBottom: `0.063rem solid ${(_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.border) === null || _b === void 0 ? void 0 : _b[500]}`, children: [_jsx(IconButton, { "aria-label": collapsed ? "Expand group" : "Collapse group", size: "xs", variant: "ghost", color: color.text, onClick: onToggle, icon: collapsed ? _jsx(ChevronRight, { size: 16 }) : _jsx(ChevronDown, { size: 16 }) }), _jsx(Text, { fontSize: "0.8125rem", fontWeight: 700, color: color.text, isTruncated: true, maxW: "20rem", children: label }), _jsx(Box, { as: "span", fontSize: "0.6875rem", fontWeight: 600, color: color.text, bg: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.background) === null || _d === void 0 ? void 0 : _d[50], borderRadius: "full", px: "0.5rem", py: "0.0625rem", children: count }), onAddItem && (_jsxs(Flex, { as: "button", type: "button", align: "center", gap: 1, ml: "auto", px: 2, py: 1, borderRadius: "md", fontSize: "0.75rem", fontWeight: 500, color: (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.text) === null || _f === void 0 ? void 0 : _f[500], _hover: { bg: "whiteAlpha.500", color: color.text }, onClick: () => onAddItem(value), children: [_jsx(Plus, { size: 14 }), " Add item"] }))] }) }) }));
+};
+export default TableGroupRow;

package/dist/esm/Components/Table/components/TableHeader.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Spinner, Th, Tr } from "@chakra-ui/react";
+import { memo, useState } from "react";
+import { calculateLeftOffset } from "../../../Utils/table";
+import { useCustomTheme } from "../../../Theme/useCustomTheme";
+import { accentTextOnCanvas } from "../../../Theme/tokens/builders/accentText";
+import TableFilters from "../filters/TableFilters";
+import { ChevronDown, ChevronsUpDown, ChevronUp } from "lucide-react";
+import CheckBox from "../../Checkbox/Checkbox";
+const TableHeader = ({ columns, isCheckbox, handleSort, headerRefs, columnWidths, columnsSort, headerBgColor, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, isContent, isLink, isActionFreeze, setColumnsSearch, columnsSearch, isSelecting, }) => {
+    const [openFilterId, setOpenFilterId] = useState(null);
+    return (_jsxs(Tr, { pr: 0, "aria-rowindex": 1, children: [isContent && _jsx(ContentSpacerCell, { noBorders: noBorders }), isCheckbox && (_jsx(SelectAllCell, { freezedTextColor: freezedTextColor, noBorders: noBorders, isSelecting: isSelecting, isLoading: isLoading, checked: checked, handleCheckbox: handleCheckbox })), columns.map((header, index) => {
+                if (header === null || header === void 0 ? void 0 : header.isHidden)
+                    return null;
+                return (_jsx(ColumnHeader, { header: header, index: index, columnWidths: columnWidths, handleSort: handleSort, isCheckbox: isCheckbox, headerBgColor: headerBgColor, freezedBgColor: freezedBgColor, noBorders: noBorders, columnsSort: columnsSort, headerRefs: headerRefs, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch, openFilterId: openFilterId, setOpenFilterId: setOpenFilterId }, header.label));
+            }), isLink && _jsx(ViewSpacerCell, { noBorders: noBorders, isActionFreeze: isActionFreeze })] }));
+};
+export default memo(TableHeader);
+const SelectAllCell = memo(({ freezedTextColor, noBorders, isSelecting, isLoading, checked, handleCheckbox, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const theme = useCustomTheme();
+    return (_jsx(Th, { scope: "col", w: 6, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[50], position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 9, borderBottom: noBorders ? "none" : `0.063rem solid ${(_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray[300]}`, children: isSelecting ? (_jsx(Spinner, { size: "sm", color: (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.primary) === null || _j === void 0 ? void 0 : _j[500] })) : (_jsx(CheckBox, { "aria-label": "Select all rows", variant: "outline", onChange: () => handleCheckbox(0), isChecked: isLoading ? false : checked === true, isIndeterminate: checked === "indeterminate" })) }));
+});
+const ContentSpacerCell = memo(({ noBorders }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const theme = useCustomTheme();
+    return (_jsx(Th, { scope: "col", w: 6, minW: "35px", p: 0, backgroundColor: (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[50], borderBottom: noBorders ? "none" : `0.063rem solid ${(_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray[300]}`, position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 1 }));
+});
+const ViewSpacerCell = memo(({ noBorders, isActionFreeze, }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const theme = useCustomTheme();
+    return (_jsx(Th, { scope: "col", w: 2, p: 0, minW: "2.065rem", backgroundColor: (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[50], borderBottom: noBorders ? "none" : `0.063rem solid ${(_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray[300]}`, position: isActionFreeze ? "sticky" : "relative", className: `columns sticky-columns`, right: "0px", zIndex: 1 }));
+});
+const SortingIcon = memo(({ label, sortState, isVisible, handleSortClick, }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const theme = useCustomTheme();
+    return (_jsxs(Box, { as: "button", type: "button", "aria-label": `Sort by ${label}`, display: "inline-flex", alignItems: "center", justifyContent: "center", cursor: "pointer", ml: 2, p: 0, border: "none", bg: "transparent", lineHeight: "1", onClick: handleSortClick, transition: "color 0.2s ease-in-out, opacity 0.2s ease-in-out", 
+        // Kept out of view until hover/focus so the header looks exactly as it did,
+        // while staying in the DOM and reachable by Tab.
+        opacity: isVisible ? 1 : 0, _focus: { opacity: 1 }, _focusVisible: { opacity: 1 }, color: theme.colors.gray[600], _hover: {
+            opacity: 1,
+            color: accentTextOnCanvas(theme.colors.secondary, (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[50]),
+        }, children: [sortState === "none" && _jsx(ChevronsUpDown, { size: 14 }), sortState === "asc" && _jsx(ChevronUp, { size: 14 }), sortState === "desc" && _jsx(ChevronDown, { size: 14 })] }));
+});
+const ColumnHeader = memo(({ header, index, columnWidths, isCheckbox, noBorders, columnsSort, headerRefs, columnsSearch, setColumnsSearch, handleSort, openFilterId, setOpenFilterId, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
+    const [isHovered, setIsHovered] = useState(false);
+    const theme = useCustomTheme();
+    const isFrozen = header.isFreeze;
+    const leftOffset = isFrozen
+        ? calculateLeftOffset(columnWidths, index) + (isCheckbox ? 50 : 0)
+        : undefined;
+    const isSorting = header.isSort
+        ? columnsSort.find((o) => o.column === header.id)
+        : undefined;
+    const activeSorts = columnsSort.filter((o) => o.direction !== "none");
+    const sortPriority = activeSorts.length > 1 && isSorting && isSorting.direction !== "none"
+        ? activeSorts.findIndex((o) => o.column === header.id) + 1
+        : 0;
+    const ariaSort = (isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) === "asc"
+        ? "ascending"
+        : (isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) === "desc"
+            ? "descending"
+            : undefined;
+    // const TextColor = isFrozen ? freezedTextColor : headerTextColor;
+    const handleMouseDown = (e) => {
+        const parentBox = e.target
+            .parentElement;
+        const th = parentBox.parentElement;
+        const startX = e.pageX;
+        const startWidth = th.offsetWidth;
+        const onMouseMove = (moveEvent) => {
+            const newWidth = startWidth + (moveEvent.pageX - startX);
+            th.style.width = `${newWidth}px`;
+        };
+        const onMouseUp = () => {
+            document.removeEventListener("mousemove", onMouseMove);
+            document.removeEventListener("mouseup", onMouseUp);
+        };
+        document.addEventListener("mousemove", onMouseMove);
+        document.addEventListener("mouseup", onMouseUp);
+    };
+    const isSortActive = !!(isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) && isSorting.direction !== "none";
+    return (_jsx(Th, { scope: "col", ref: (el) => (headerRefs.current[index] = el), "aria-sort": ariaSort, textTransform: "capitalize", fontSize: 13, fontWeight: 600, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, minWidth: 120, backgroundColor: (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[50], maxWidth: 500, zIndex: isFrozen ? 2 : 1, py: 2, pr: 0, overflow: "hidden", borderTop: "none", borderBottom: noBorders ? "none" : `0.063rem solid ${(_g = theme.colors) === null || _g === void 0 ? void 0 : _g.border[500]}`, borderRight: noBorders ? "none" : `0.063rem solid ${(_k = (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.boxborder) === null || _j === void 0 ? void 0 : _j[300]) !== null && _k !== void 0 ? _k : (_l = theme.colors) === null || _l === void 0 ? void 0 : _l.gray[200]}`, className: `columns ${isFrozen ? "sticky-columns" : "scrollable-columns"}`, height: 45, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: _jsxs(Box, { display: "flex", color: accentTextOnCanvas(theme.colors.secondary, (_q = (_p = (_o = (_m = theme.colors) === null || _m === void 0 ? void 0 : _m.table) === null || _o === void 0 ? void 0 : _o.hover) === null || _p === void 0 ? void 0 : _p[200]) !== null && _q !== void 0 ? _q : (_s = (_r = theme.colors) === null || _r === void 0 ? void 0 : _r.secondary) === null || _s === void 0 ? void 0 : _s[50]), lineHeight: "1.25rem", justifyContent: "space-between", alignItems: "center", position: "relative", children: [_jsx(Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", display: "inline-block", overflow: "hidden", children: header.label }), _jsxs(Box, { display: "inline-flex", alignItems: "center", children: [header.isSort && (_jsx(SortingIcon, { label: String(header.label), sortState: (_t = isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) !== null && _t !== void 0 ? _t : "none", isVisible: isHovered || isSortActive, handleSortClick: () => {
+                                let direction = "asc";
+                                if ((isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) === "asc") {
+                                    direction = "desc";
+                                }
+                                else if ((isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) === "desc") {
+                                    direction = "none";
+                                }
+                                handleSort(header.id, direction);
+                            } })), sortPriority > 0 && (_jsx(Box, { as: "span", ml: 1, fontSize: "0.625rem", fontWeight: 700, lineHeight: "1", borderRadius: "full", px: "0.3rem", py: "0.1rem", bg: (_w = (_v = (_u = theme.colors) === null || _u === void 0 ? void 0 : _u.primary) === null || _v === void 0 ? void 0 : _v.opacity) === null || _w === void 0 ? void 0 : _w[16], color: (_y = (_x = theme.colors) === null || _x === void 0 ? void 0 : _x.primary) === null || _y === void 0 ? void 0 : _y[600], children: sortPriority })), _jsx(TableFilters, { header: header, setColumnsSearch: (searchVal) => setColumnsSearch((prev) => ({
+                                ...prev,
+                                [header.id]: searchVal,
+                            })), columnsSearch: columnsSearch[header.id] || "", onClose: () => {
+                                setIsHovered(false);
+                                setOpenFilterId(null);
+                            }, isOpen: openFilterId === header.id, onOpen: () => setOpenFilterId(header.id) })] }), _jsx("div", { className: "resize-handle", onMouseDown: handleMouseDown })] }) }, index + 1));
+});

package/dist/esm/Components/Table/components/TableLoading.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Skeleton, SkeletonText, Table, Tbody, Td, Th, Thead, Tr, } from "@chakra-ui/react";
+const TableLoading = () => {
+    return (_jsx(Box, { overflowX: "auto", p: 4, children: _jsxs(Table, { variant: "simple", width: "full", children: [_jsx(Thead, { children: _jsxs(Tr, { children: [_jsx(Th, { p: 2, children: _jsx(Skeleton, { height: "20px" }) }), _jsx(Th, { p: 2, children: _jsx(Skeleton, { height: "20px" }) }), _jsx(Th, { p: 2, children: _jsx(Skeleton, { height: "20px" }) }), _jsx(Th, { p: 2, children: _jsx(Skeleton, { height: "20px" }) })] }) }), _jsx(Tbody, { children: Array.from({ length: 5 }).map((_, rowIndex) => (_jsxs(Tr, { children: [_jsx(Td, { p: 2, children: _jsx(SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) }), _jsx(Td, { p: 2, children: _jsx(SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) }), _jsx(Td, { p: 2, children: _jsx(SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) }), _jsx(Td, { p: 2, children: _jsx(SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) })] }, rowIndex))) })] }) }));
+};
+export default TableLoading;
+export const TableBodyLoading = ({ noOfColumns, borderColor, rowsCount = 4, rowHeight = 45, }) => {
+    return (_jsx(_Fragment, { children: Array.from({ length: rowsCount }).map((_, index) => {
+            return (_jsx(Tr, { children: _jsx(Td, { colSpan: noOfColumns, textAlign: "center", border: `1px solid ${borderColor}`, px: 2, pt: 2, pb: 0, height: `${rowHeight}px`, boxSizing: "border-box", children: _jsx(Skeleton, { height: "15px", variant: "shine" }) }) }, index));
+        }) }));
+};