pixelize-design-library 2.2.198 → 2.3.1-beta.2

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

@@ -0,0 +1,303 @@
+"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.DENSITY_CONFIG = void 0;
+var react_1 = require("@chakra-ui/react");
+var react_2 = __importStar(require("react"));
+var table_1 = require("../../../Utils/table");
+var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+var TableLoading_1 = require("./TableLoading");
+var TableActions_1 = __importDefault(require("./TableActions"));
+var lucide_react_1 = require("lucide-react");
+var Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
+var TableGroupRow_1 = __importDefault(require("./TableGroupRow"));
+// Density → row height (px) + cell vertical padding. The padding (not just the
+// min-height) is what drives perceived row size, so compact tightens both.
+exports.DENSITY_CONFIG = {
+    compact: { height: 32, py: "0.125rem" },
+    normal: { height: 40, py: "0.5rem" },
+    comfortable: { height: 52, py: "0.875rem" },
+};
+// Monday-style status cell: the whole cell is filled with the status color and
+// the label is centered in white.
+var StatusCell = function (_a) {
+    var value = _a.value;
+    return (react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center", justifyContent: "center", w: "100%", h: "100%", px: "0.5rem", fontSize: "0.75rem", fontWeight: 600, color: "white", textAlign: "center", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, value));
+};
+var EMPTY_SX = {};
+var EMPTY_HOVER = {};
+var TableRow = react_2.default.memo(function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var row = _a.row, rowIndex = _a.rowIndex, index = _a.index, isChecked = _a.isChecked, isExpanded = _a.isExpanded, isContent = _a.isContent, isLink = _a.isLink, isCheckbox = _a.isCheckbox, isLoading = _a.isLoading, isActionFreeze = _a.isActionFreeze, columns = _a.columns, leftOffsets = _a.leftOffsets, noBorders = _a.noBorders, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, theme = _a.theme, borderStyle = _a.borderStyle, hoverStyle = _a.hoverStyle, rowHeight = _a.rowHeight, cellPy = _a.cellPy, palette = _a.palette, accentColor = _a.accentColor, handleCheckbox = _a.handleCheckbox, onRowClick = _a.onRowClick, toggleRowExpansion = _a.toggleRowExpansion;
+    var checkedSx = (0, react_2.useMemo)(function () {
+        var _a, _b, _c;
+        return isChecked ? {
+            "& td": { backgroundColor: (_c = (_b = (_a = theme.colors.primary) === null || _a === void 0 ? void 0 : _a.opacity) === null || _b === void 0 ? void 0 : _b[16]) !== null && _c !== void 0 ? _c : theme.colors.disabled[100] },
+        } : EMPTY_SX;
+    }, [isChecked, (_b = theme.colors.primary) === null || _b === void 0 ? void 0 : _b.opacity, theme.colors.disabled]);
+    var handleCellClick = (0, react_2.useCallback)(function (header) {
+        if (!header.node && onRowClick) {
+            onRowClick(row, { label: header.label, id: header.id });
+        }
+    }, [row, onRowClick]);
+    var firstDataColIndex = columns.findIndex(function (c) { return !c.isHidden; });
+    var accentSx = accentColor ? "inset 3px 0 0 ".concat(accentColor) : undefined;
+    return (react_2.default.createElement(react_2.default.Fragment, null,
+        react_2.default.createElement(react_1.Tr, { opacity: isLoading ? 0.4 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "opacity 0.2s", sx: checkedSx },
+            isContent && (react_2.default.createElement(react_1.Td, { w: "6", p: 0, fontSize: 14, backgroundColor: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.background) === null || _d === void 0 ? void 0 : _d[50], color: freezedTextColor, position: "sticky", borderBottom: borderStyle, boxShadow: accentSx, boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns" }, !!(row === null || row === void 0 ? void 0 : row.content) && (react_2.default.createElement(react_1.IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.gray[600], icon: isExpanded ? (react_2.default.createElement(lucide_react_1.ChevronDown, { fontSize: 16 })) : (react_2.default.createElement(lucide_react_1.ChevronRight, { fontSize: 16 })), _hover: { transform: "scale(1.1)" }, size: "sm", onClick: function () { return toggleRowExpansion(rowIndex); }, variant: "ghost" })))),
+            isCheckbox && (react_2.default.createElement(react_1.Td, { w: "6", fontSize: 14, fontWeight: 600, color: (_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.background) === null || _g === void 0 ? void 0 : _g[50], textTransform: "capitalize", backgroundColor: (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.background) === null || _j === void 0 ? void 0 : _j[50], position: "sticky", borderBottom: borderStyle, boxShadow: !isContent ? accentSx : undefined, boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns" },
+                react_2.default.createElement(Checkbox_1.default, { "aria-label": "Select all rows", onChange: function () { return handleCheckbox(row.id); }, isChecked: isChecked }))),
+            columns.map(function (header, headerIndex) {
+                var _a, _b, _c, _d, _e, _f, _g;
+                if (header.isHidden)
+                    return null;
+                var isFrozen = header.isFreeze;
+                var isFirstDataCell = !isContent && !isCheckbox && headerIndex === firstDataColIndex;
+                var isStatus = header.type === "status" && !header.node;
+                var rawStatus = String((_a = row[header.id]) !== null && _a !== void 0 ? _a : "");
+                var statusColor = isStatus
+                    ? (0, table_1.pickTableColor)(rawStatus, palette, (_b = header.statusColors) === null || _b === void 0 ? void 0 : _b[rawStatus])
+                    : null;
+                return (react_2.default.createElement(react_1.Td, { maxWidth: 500, minWidth: 120, height: "".concat(rowHeight, "px"), py: isStatus && statusColor ? 0 : cellPy, px: isStatus && statusColor ? 0 : undefined, key: headerIndex + 1, onClick: function () { return handleCellClick(header); }, fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffsets[headerIndex] : undefined, zIndex: isFrozen ? 1 : 0, backgroundColor: isStatus && statusColor ? statusColor.solid : (_c = theme.colors.background) === null || _c === void 0 ? void 0 : _c[50], textOverflow: "ellipsis", boxShadow: isFirstDataCell ? accentSx : undefined, borderBottom: noBorders
+                        ? "none"
+                        : "0.063rem solid ".concat((_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[isFrozen || isChecked ? 300 : 200]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns"), boxSizing: "border-box", color: isStatus && statusColor ? "white" : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.text) === null || _f === void 0 ? void 0 : _f[500], _hover: isStatus && statusColor
+                        ? EMPTY_HOVER
+                        : ((_g = row.cellStyle) === null || _g === void 0 ? void 0 : _g[header.id]) || row.rowStyle
+                            ? EMPTY_HOVER
+                            : hoverStyle }, isStatus && statusColor ? (react_2.default.createElement(StatusCell, { value: (0, table_1.normalizeTableCellValue)(row[header.id]) })) : (react_2.default.createElement(react_1.Box, { display: "block", overflow: "hidden", whiteSpace: "normal", overflowWrap: "break-word" }, (0, table_1.normalizeTableCellValue)(header.node ? header.node(row) : row[header.id])))));
+            }),
+            isLink && (react_2.default.createElement(react_1.Td, { w: 2, p: 0, fontSize: 14, backgroundColor: (_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".concat(isActionFreeze ? "-right" : "") }, (row.onLink || row.onEdit || row.onDelete) && (react_2.default.createElement(TableActions_1.default, { row: row }))))),
+        row.content && isExpanded && (react_2.default.createElement(react_1.Tr, null,
+            react_2.default.createElement(react_1.Td, { colSpan: columns.length +
+                    (isCheckbox ? 1 : 0) +
+                    (isContent ? 1 : 0) +
+                    (isLink ? 1 : 0), p: 2 },
+                react_2.default.createElement(react_1.Box, { p: 2, bg: theme.colors.white, borderRadius: "md" }, row === null || row === void 0 ? void 0 : row.content(row)))))));
+});
+var TableBody = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    var data = _a.data, isCheckbox = _a.isCheckbox, columns = _a.columns, startRow = _a.startRow, columnWidths = _a.columnWidths, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, selections = _a.selections, isLoading = _a.isLoading, onRowClick = _a.onRowClick, isContent = _a.isContent, isLink = _a.isLink, isActionFreeze = _a.isActionFreeze, loadingSkeletonRows = _a.loadingSkeletonRows, scrollContainerRef = _a.scrollContainerRef, density = _a.density, accentColors = _a.accentColors, groups = _a.groups, onAddItem = _a.onAddItem, emptyState = _a.emptyState;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var _u = (0, react_2.useState)(new Set()), expandedRows = _u[0], setExpandedRows = _u[1];
+    var _v = (0, react_2.useState)(new Set()), collapsedGroups = _v[0], setCollapsedGroups = _v[1];
+    var toggleGroup = (0, react_2.useCallback)(function (value) {
+        setCollapsedGroups(function (prev) {
+            var next = new Set(prev);
+            next.has(value) ? next.delete(value) : next.add(value);
+            return next;
+        });
+    }, []);
+    var selectionsSet = (0, react_2.useMemo)(function () { return new Set(selections); }, [selections]);
+    var palette = (0, react_2.useMemo)(function () { return (0, table_1.buildTablePalette)(theme); }, [theme]);
+    var densityConfig = (_b = exports.DENSITY_CONFIG[density !== null && density !== void 0 ? density : "normal"]) !== null && _b !== void 0 ? _b : exports.DENSITY_CONFIG.normal;
+    var rowHeight = densityConfig.height;
+    var cellPy = densityConfig.py;
+    // --- 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.
+    // Disabled when expandable content rows are present, since those break the
+    // fixed-height assumption.
+    var ROW_HEIGHT = rowHeight;
+    var GROUP_HEADER_H = 42;
+    var OVERSCAN = 6;
+    var VIRTUALIZE_THRESHOLD = 30;
+    var shouldVirtualize = !isContent && data.length > VIRTUALIZE_THRESHOLD;
+    // Grouped mode has no pager, so it virtualizes too (when no expandable rows):
+    // group headers + rows form one flat sequence that we window over.
+    var groupRowCount = groups ? groups.reduce(function (n, g) { return n + g.rows.length; }, 0) : 0;
+    var groupVirtualize = !!groups && !isContent && groupRowCount > VIRTUALIZE_THRESHOLD;
+    var _w = (0, react_2.useState)(0), scrollTop = _w[0], setScrollTop = _w[1];
+    var _x = (0, react_2.useState)(0), viewportH = _x[0], setViewportH = _x[1];
+    (0, react_2.useEffect)(function () {
+        var el = scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : scrollContainerRef.current;
+        if (!el || !(shouldVirtualize || groupVirtualize))
+            return;
+        var onScroll = function () { return setScrollTop(el.scrollTop); };
+        var measure = function () { return setViewportH(el.clientHeight); };
+        measure();
+        setScrollTop(el.scrollTop);
+        el.addEventListener("scroll", onScroll, { passive: true });
+        window.addEventListener("resize", measure);
+        return function () {
+            el.removeEventListener("scroll", onScroll);
+            window.removeEventListener("resize", measure);
+        };
+    }, [scrollContainerRef, shouldVirtualize, groupVirtualize, data.length, groupRowCount]);
+    // New page: jump back to the top so the window recomputes from row 0.
+    (0, react_2.useEffect)(function () {
+        if (!shouldVirtualize)
+            return;
+        var el = scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : scrollContainerRef.current;
+        if (el)
+            el.scrollTop = 0;
+        setScrollTop(0);
+    }, [startRow, shouldVirtualize, scrollContainerRef]);
+    var total = data.length;
+    var firstIndex = 0;
+    var lastIndex = total;
+    if (shouldVirtualize) {
+        var vh = viewportH || 500;
+        firstIndex = Math.max(0, Math.floor(scrollTop / ROW_HEIGHT) - OVERSCAN);
+        var count = Math.ceil(vh / ROW_HEIGHT) + OVERSCAN * 2;
+        lastIndex = Math.min(total, firstIndex + count);
+    }
+    var visibleRows = shouldVirtualize ? data.slice(firstIndex, lastIndex) : data;
+    var topPad = firstIndex * ROW_HEIGHT;
+    var bottomPad = (total - lastIndex) * ROW_HEIGHT;
+    var toggleRowExpansion = (0, react_2.useCallback)(function (rowIndex) {
+        setExpandedRows(function (prev) {
+            var newSet = new Set(prev);
+            if (newSet.has(rowIndex)) {
+                newSet.delete(rowIndex);
+            }
+            else {
+                newSet.add(rowIndex);
+            }
+            return newSet;
+        });
+    }, []);
+    var totalVisibleColumns = (0, react_2.useMemo)(function () {
+        return columns.filter(function (o) { return !o.isHidden; }).length +
+            (isCheckbox ? 1 : 0) +
+            (isContent ? 1 : 0) +
+            (isLink ? 1 : 0);
+    }, [columns, isCheckbox, isContent, isLink]);
+    var leftOffsets = (0, react_2.useMemo)(function () {
+        var checkboxOffset = isCheckbox ? 50 : 0;
+        return columnWidths.map(function (_, idx) {
+            return columnWidths.slice(0, idx).reduce(function (sum, w) { return sum + w; }, 0) + checkboxOffset;
+        });
+    }, [columnWidths, isCheckbox]);
+    var borderStyle = (0, react_2.useMemo)(function () { var _a; return noBorders ? "none" : "0.063rem solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.border[500]); }, [noBorders, (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.border]);
+    var hoverStyle = (0, react_2.useMemo)(function () {
+        var _a, _b, _c, _d, _e;
+        return ({
+            backgroundColor: (_c = (_b = (_a = theme.colors.table) === null || _a === void 0 ? void 0 : _a.hover) === null || _b === void 0 ? void 0 : _b[300]) !== null && _c !== void 0 ? _c : (_e = (_d = theme.colors.secondary) === null || _d === void 0 ? void 0 : _d.opacity) === null || _e === void 0 ? void 0 : _e[4],
+        });
+    }, [(_d = theme.colors.table) === null || _d === void 0 ? void 0 : _d.hover, (_e = theme.colors.secondary) === null || _e === void 0 ? void 0 : _e.opacity]);
+    if (isLoading && data.length === 0) {
+        return (react_2.default.createElement(TableLoading_1.TableBodyLoading, { noOfColumns: totalVisibleColumns, borderColor: theme.colors.gray[300], rowsCount: typeof loadingSkeletonRows === "number" ? loadingSkeletonRows : 4 }));
+    }
+    if (!isLoading && data.length === 0) {
+        var isStructured = emptyState && typeof emptyState === "object" && !react_2.default.isValidElement(emptyState);
+        var es = isStructured ? emptyState : null;
+        return (react_2.default.createElement(react_1.Tr, { backgroundColor: (_f = theme.colors.background) === null || _f === void 0 ? void 0 : _f[50] },
+            react_2.default.createElement(react_1.Td, { colSpan: totalVisibleColumns, textAlign: "center", py: 10, border: "none" }, emptyState && !isStructured ? emptyState : (react_2.default.createElement(react_1.Box, { display: "flex", flexDirection: "column", alignItems: "center", gap: 2, color: (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray) === null || _h === void 0 ? void 0 : _h[500] },
+                (es === null || es === void 0 ? void 0 : es.icon) && react_2.default.createElement(react_1.Box, { fontSize: "1.75rem", color: (_k = (_j = theme.colors) === null || _j === void 0 ? void 0 : _j.gray) === null || _k === void 0 ? void 0 : _k[400] }, es.icon),
+                react_2.default.createElement(react_1.Box, { fontSize: "0.95rem", fontWeight: 600, color: (_m = (_l = theme.colors) === null || _l === void 0 ? void 0 : _l.text) === null || _m === void 0 ? void 0 : _m[700] }, (_o = es === null || es === void 0 ? void 0 : es.title) !== null && _o !== void 0 ? _o : "No data found"),
+                (es === null || es === void 0 ? void 0 : es.description) && (react_2.default.createElement(react_1.Box, { fontSize: "0.8125rem", color: (_q = (_p = theme.colors) === null || _p === void 0 ? void 0 : _p.gray) === null || _q === void 0 ? void 0 : _q[500] }, es.description)))))));
+    }
+    // --- Monday-style grouped board render (virtualized when large) -----------
+    if (groups) {
+        // Flatten groups → one sequence of header/row items so it can be windowed.
+        var items = [];
+        for (var _i = 0, groups_1 = groups; _i < groups_1.length; _i++) {
+            var g = groups_1[_i];
+            items.push({ kind: "header", g: g });
+            if (!collapsedGroups.has(g.value)) {
+                for (var _y = 0, _z = g.rows; _y < _z.length; _y++) {
+                    var row = _z[_y];
+                    items.push({ kind: "row", g: g, row: row });
+                }
+            }
+        }
+        var firstI_1 = 0;
+        var lastI = items.length;
+        var gTopPad = 0;
+        var gBottomPad = 0;
+        if (groupVirtualize) {
+            var heights_2 = items.map(function (it) { return (it.kind === "header" ? GROUP_HEADER_H : rowHeight); });
+            var offsets_1 = [];
+            var acc = 0;
+            for (var _0 = 0, heights_1 = heights_2; _0 < heights_1.length; _0++) {
+                var h = heights_1[_0];
+                offsets_1.push(acc);
+                acc += h;
+            }
+            var totalH = acc;
+            var vh = viewportH || 500;
+            var top_1 = scrollTop - OVERSCAN * rowHeight;
+            var bottom = scrollTop + vh + OVERSCAN * rowHeight;
+            firstI_1 = items.findIndex(function (_, i) { return offsets_1[i] + heights_2[i] > top_1; });
+            if (firstI_1 < 0)
+                firstI_1 = items.length;
+            lastI = items.length;
+            for (var i = firstI_1; i < items.length; i++) {
+                if (offsets_1[i] > bottom) {
+                    lastI = i;
+                    break;
+                }
+            }
+            gTopPad = (_r = offsets_1[firstI_1]) !== null && _r !== void 0 ? _r : 0;
+            gBottomPad = totalH - (lastI > firstI_1 ? offsets_1[lastI - 1] + heights_2[lastI - 1] : gTopPad);
+        }
+        var windowItems = groupVirtualize ? items.slice(firstI_1, lastI) : items;
+        return (react_2.default.createElement(react_2.default.Fragment, null,
+            gTopPad > 0 && (react_2.default.createElement("tr", { "aria-hidden": "true", style: { height: gTopPad } },
+                react_2.default.createElement("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: gTopPad } }))),
+            windowItems.map(function (it, k) {
+                var _a;
+                return it.kind === "header" ? (react_2.default.createElement(TableGroupRow_1.default, { key: "h-".concat(it.g.value), label: it.g.label, value: it.g.value, count: it.g.rows.length, color: it.g.color, collapsed: collapsedGroups.has(it.g.value), colSpan: totalVisibleColumns, onToggle: function () { return toggleGroup(it.g.value); }, onAddItem: onAddItem })) : (react_2.default.createElement(TableRow, { key: (_a = it.row.id) !== null && _a !== void 0 ? _a : "r-".concat(firstI_1 + k), row: it.row, rowIndex: firstI_1 + k, index: firstI_1 + k, isChecked: selectionsSet.has(it.row.id), isExpanded: expandedRows.has(firstI_1 + k), isContent: isContent, isLink: isLink, isCheckbox: isCheckbox, isLoading: isLoading, isActionFreeze: isActionFreeze, columns: columns, leftOffsets: leftOffsets, noBorders: noBorders, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, theme: theme, borderStyle: borderStyle, hoverStyle: hoverStyle, rowHeight: rowHeight, cellPy: cellPy, palette: palette, accentColor: it.g.color.solid, handleCheckbox: handleCheckbox, onRowClick: onRowClick, toggleRowExpansion: toggleRowExpansion }));
+            }),
+            gBottomPad > 0 && (react_2.default.createElement("tr", { "aria-hidden": "true", style: { height: gBottomPad } },
+                react_2.default.createElement("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: gBottomPad } })))));
+    }
+    return (react_2.default.createElement(react_2.default.Fragment, null,
+        isLoading && data.length > 0 && (react_2.default.createElement(react_1.Tr, null,
+            react_2.default.createElement(react_1.Td, { colSpan: totalVisibleColumns, p: 0, border: "none", position: "relative", height: 0 },
+                react_2.default.createElement(react_1.Box, { position: "absolute", top: 4, left: "50%", transform: "translateX(-50%)", zIndex: 10 },
+                    react_2.default.createElement(react_1.Spinner, { size: "sm", color: ((_t = (_s = theme.colors) === null || _s === void 0 ? void 0 : _s.primary) === null || _t === void 0 ? void 0 : _t[500]) || "blue.500" }))))),
+        shouldVirtualize && topPad > 0 && (react_2.default.createElement("tr", { "aria-hidden": "true", style: { height: topPad } },
+            react_2.default.createElement("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: topPad } }))),
+        visibleRows.map(function (row, i) {
+            var _a;
+            var index = firstIndex + i;
+            var rowIndex = startRow + index;
+            var isExpanded = expandedRows.has(rowIndex);
+            var isChecked = selectionsSet.has(row.id);
+            return (react_2.default.createElement(TableRow, { key: (_a = row.id) !== null && _a !== void 0 ? _a : rowIndex, row: row, rowIndex: rowIndex, index: index, isChecked: isChecked, isExpanded: isExpanded, isContent: isContent, isLink: isLink, isCheckbox: isCheckbox, isLoading: isLoading, isActionFreeze: isActionFreeze, columns: columns, leftOffsets: leftOffsets, noBorders: noBorders, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, theme: theme, borderStyle: borderStyle, hoverStyle: hoverStyle, rowHeight: rowHeight, cellPy: cellPy, palette: palette, accentColor: accentColors === null || accentColors === void 0 ? void 0 : accentColors[row.id], handleCheckbox: handleCheckbox, onRowClick: onRowClick, toggleRowExpansion: toggleRowExpansion }));
+        }),
+        shouldVirtualize && bottomPad > 0 && (react_2.default.createElement("tr", { "aria-hidden": "true", style: { height: bottomPad } },
+            react_2.default.createElement("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: bottomPad } })))));
+};
+exports.default = TableBody;

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

@@ -0,0 +1,15 @@
+import React from "react";
+import { TablePaletteColor } from "../../../Utils/table";
+type Props = {
+    label: string;
+    value: string | number;
+    count: number;
+    color: TablePaletteColor;
+    collapsed: boolean;
+    colSpan: 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;

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

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableGroupRow = void 0;
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+/** Monday-style colored, collapsible group header row. */
+var TableGroupRow = function (_a) {
+    var _b, _c, _d, _e, _f, _g;
+    var label = _a.label, value = _a.value, count = _a.count, color = _a.color, collapsed = _a.collapsed, colSpan = _a.colSpan, onToggle = _a.onToggle, onAddItem = _a.onAddItem;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    return (react_1.default.createElement(react_2.Tr, null,
+        react_1.default.createElement(react_2.Td, { colSpan: colSpan, p: 0, border: "none" },
+            react_1.default.createElement(react_2.Flex, { align: "center", gap: 2, px: 3, py: 2, bg: color.soft, boxShadow: "inset 4px 0 0 ".concat(color.solid), borderBottom: "0.063rem solid ".concat((_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.border) === null || _c === void 0 ? void 0 : _c[500]) },
+                react_1.default.createElement(react_2.IconButton, { "aria-label": collapsed ? "Expand group" : "Collapse group", size: "xs", variant: "ghost", color: color.text, onClick: onToggle, icon: collapsed ? react_1.default.createElement(lucide_react_1.ChevronRight, { size: 16 }) : react_1.default.createElement(lucide_react_1.ChevronDown, { size: 16 }) }),
+                react_1.default.createElement(react_2.Text, { fontSize: "0.8125rem", fontWeight: 700, color: color.text, isTruncated: true, maxW: "20rem" }, label),
+                react_1.default.createElement(react_2.Box, { as: "span", fontSize: "0.6875rem", fontWeight: 600, color: color.text, bg: (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50], borderRadius: "full", px: "0.5rem", py: "0.0625rem" }, count),
+                onAddItem && (react_1.default.createElement(react_2.Flex, { as: "button", type: "button", align: "center", gap: 1, ml: "auto", px: 2, py: 1, borderRadius: "md", fontSize: "0.75rem", fontWeight: 500, color: (_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.text) === null || _g === void 0 ? void 0 : _g[500], _hover: { bg: "whiteAlpha.500", color: color.text }, onClick: function () { return onAddItem(value); } },
+                    react_1.default.createElement(lucide_react_1.Plus, { size: 14 }),
+                    " Add item"))))));
+};
+exports.TableGroupRow = TableGroupRow;
+exports.default = exports.TableGroupRow;

package/dist/Components/Table/{Components → components}/TableHeader.js

@@ -51,7 +51,7 @@ var react_1 = require("@chakra-ui/react");
 var react_2 = __importStar(require("react"));
 var table_1 = require("../../../Utils/table");
 var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
-var TableFilters_1 = __importDefault(require("./TableFilters"));
+var TableFilters_1 = __importDefault(require("../filters/TableFilters"));
 var lucide_react_1 = require("lucide-react");
 var Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
 var TableHeader = function (_a) {
@@ -59,8 +59,8 @@ var TableHeader = function (_a) {
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var _b = (0, react_2.useState)(null), openFilterId = _b[0], setOpenFilterId = _b[1];
     var RenderCheckbox = (0, react_2.useCallback)(function () {
-        var _a, _b, _c, _d, _e;
-        return (react_2.default.createElement(react_1.Th, { w: 6, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.secondary) === null || _b === void 0 ? void 0 : _b[50], borderY: noBorders ? "none" : "0.063rem solid ".concat((_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 9, boxShadow: theme.shadows.md }, isSelecting ? (react_2.default.createElement(react_1.Spinner, { size: "sm", color: (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.primary) === null || _e === void 0 ? void 0 : _e[500] })) : (react_2.default.createElement(Checkbox_1.default, { "aria-label": "Select all rows", variant: "outline", onChange: function () { return handleCheckbox(0); }, isChecked: isLoading ? false : checked === true, isIndeterminate: checked === "indeterminate" }))));
+        var _a, _b, _c, _d;
+        return (react_2.default.createElement(react_1.Th, { w: 6, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.secondary) === null || _b === void 0 ? void 0 : _b[50], position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 9 }, isSelecting ? (react_2.default.createElement(react_1.Spinner, { size: "sm", color: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.primary) === null || _d === void 0 ? void 0 : _d[500] })) : (react_2.default.createElement(Checkbox_1.default, { "aria-label": "Select all rows", variant: "outline", onChange: function () { return handleCheckbox(0); }, isChecked: isLoading ? false : checked === true, isIndeterminate: checked === "indeterminate" }))));
     }, [
         checked,
         freezedTextColor,
@@ -75,8 +75,12 @@ var TableHeader = function (_a) {
         return (react_2.default.createElement(react_1.Th, { w: 6, minW: "35px", p: 0, backgroundColor: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.secondary) === null || _b === void 0 ? void 0 : _b[50], borderY: noBorders ? "none" : "0.063rem solid ".concat((_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 1, boxShadow: theme.shadows.md }));
     }, [noBorders, theme.colors]);
     var RenderView = (0, react_2.useCallback)(function () {
-        var _a, _b, _c;
-        return (react_2.default.createElement(react_1.Th, { w: 2, p: 0, minW: "2.065rem", backgroundColor: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.secondary) === null || _b === void 0 ? void 0 : _b[50], borderY: noBorders ? "none" : "0.063rem solid ".concat((_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[300]), position: isActionFreeze ? "sticky" : "relative", className: "columns sticky-columns", right: "0px", zIndex: 1, boxShadow: theme.shadows.md }));
+        var _a, _b;
+        return (react_2.default.createElement(react_1.Th, { w: 2, p: 0, minW: "2.065rem", backgroundColor: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.secondary) === null || _b === void 0 ? void 0 : _b[50], 
+            // borderY={
+            //   noBorders ? "none" : `0.063rem solid ${theme.colors?.gray[300]}`
+            // }
+            position: isActionFreeze ? "sticky" : "relative", className: "columns sticky-columns", right: "0px", zIndex: 1 }));
     }, [noBorders, theme.colors, isActionFreeze]);
     return (react_2.default.createElement(react_1.Tr, { pr: 0 },
         isContent && react_2.default.createElement(RenderConent, null),
@@ -99,9 +103,9 @@ var SortingIcon = (0, react_2.memo)(function (_a) {
         sortState === "desc" && react_2.default.createElement(lucide_react_1.ChevronDown, { size: 14 })));
 });
 var ColumnHeader = (0, react_2.memo)(function (_a) {
-    var _b, _c, _d, _e, _f;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
     var header = _a.header, index = _a.index, columnWidths = _a.columnWidths, isCheckbox = _a.isCheckbox, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, columnsSort = _a.columnsSort, headerRefs = _a.headerRefs, columnsSearch = _a.columnsSearch, setColumnsSearch = _a.setColumnsSearch, handleSort = _a.handleSort, openFilterId = _a.openFilterId, setOpenFilterId = _a.setOpenFilterId;
-    var _g = (0, react_2.useState)(false), isHovered = _g[0], setIsHovered = _g[1];
+    var _v = (0, react_2.useState)(false), isHovered = _v[0], setIsHovered = _v[1];
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var isFrozen = header.isFreeze;
     var leftOffset = isFrozen
@@ -110,6 +114,15 @@ var ColumnHeader = (0, react_2.memo)(function (_a) {
     var isSorting = header.isSort
         ? columnsSort.find(function (o) { return o.column === header.id; })
         : undefined;
+    var activeSorts = columnsSort.filter(function (o) { return o.direction !== "none"; });
+    var sortPriority = activeSorts.length > 1 && isSorting && isSorting.direction !== "none"
+        ? activeSorts.findIndex(function (o) { return o.column === header.id; }) + 1
+        : 0;
+    var 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;
     var handleMouseDown = function (e) {
         var parentBox = e.target
@@ -144,11 +157,12 @@ var ColumnHeader = (0, react_2.memo)(function (_a) {
     }, [handleSort]);
     var isFiltersEnabled = (isHovered && header.isSort) ||
         ((isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) && isSorting.direction !== "none");
-    return (react_2.default.createElement(react_1.Th, { key: index + 1, ref: function (el) { return (headerRefs.current[index] = el); }, textTransform: "capitalize", fontSize: 16, fontWeight: 600, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, minWidth: 120, backgroundColor: (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.secondary) === null || _c === void 0 ? void 0 : _c[50], maxWidth: 500, zIndex: isFrozen ? 2 : 1, py: 2, pr: 0, overflow: "hidden", borderY: noBorders ? "none" : "0.063rem solid ".concat((_d = theme.colors) === null || _d === void 0 ? void 0 : _d.border[500]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns"), height: 45, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } },
-        react_2.default.createElement(react_1.Box, { display: "flex", color: (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[500], lineHeight: "1.25rem", justifyContent: "space-between", alignItems: "center", position: "relative" },
+    return (react_2.default.createElement(react_1.Th, { key: index + 1, ref: function (el) { return (headerRefs.current[index] = el); }, "aria-sort": ariaSort, textTransform: "capitalize", fontSize: 13, fontWeight: 600, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, minWidth: 120, backgroundColor: (_e = (_d = (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.table) === null || _c === void 0 ? void 0 : _c.hover) === null || _d === void 0 ? void 0 : _d[200]) !== null && _e !== void 0 ? _e : (_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.secondary) === null || _g === void 0 ? void 0 : _g[50], maxWidth: 500, zIndex: isFrozen ? 2 : 1, py: 2, pr: 0, overflow: "hidden", borderTop: "none", borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_h = theme.colors) === null || _h === void 0 ? void 0 : _h.border[500]), borderRight: noBorders ? "none" : "0.063rem solid ".concat((_l = (_k = (_j = theme.colors) === null || _j === void 0 ? void 0 : _j.boxborder) === null || _k === void 0 ? void 0 : _k[300]) !== null && _l !== void 0 ? _l : (_m = theme.colors) === null || _m === void 0 ? void 0 : _m.gray[200]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns"), height: 45, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } },
+        react_2.default.createElement(react_1.Box, { display: "flex", color: (_p = (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.secondary) === null || _p === void 0 ? void 0 : _p[500], lineHeight: "1.25rem", justifyContent: "space-between", alignItems: "center", position: "relative" },
             react_2.default.createElement(react_1.Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", display: "inline-block", overflow: "hidden" }, header.label),
             react_2.default.createElement(react_1.Box, { display: "inline-flex", alignItems: "center" },
                 isFiltersEnabled && (react_2.default.createElement(Sorting, { isSorting: isSorting, header: header })),
+                sortPriority > 0 && (react_2.default.createElement(react_1.Box, { as: "span", ml: 1, fontSize: "0.625rem", fontWeight: 700, lineHeight: "1", borderRadius: "full", px: "0.3rem", py: "0.1rem", bg: (_s = (_r = (_q = theme.colors) === null || _q === void 0 ? void 0 : _q.primary) === null || _r === void 0 ? void 0 : _r.opacity) === null || _s === void 0 ? void 0 : _s[16], color: (_u = (_t = theme.colors) === null || _t === void 0 ? void 0 : _t.primary) === null || _u === void 0 ? void 0 : _u[600] }, sortPriority)),
                 react_2.default.createElement(TableFilters_1.default, { header: header, setColumnsSearch: function (searchVal) {
                         return setColumnsSearch(function (prev) {
                             var _a;

package/dist/Components/Table/{LeftFilterPane.js → filters/LeftFilterPane.js}

@@ -61,12 +61,12 @@ var react_2 = require("@chakra-ui/react");
 var lucide_react_1 = require("lucide-react");
 var framer_motion_1 = require("framer-motion");
 var react_3 = require("@chakra-ui/react");
-var Checkbox_1 = __importDefault(require("../Checkbox/Checkbox"));
-var RadioButton_1 = require("../RadioButton/RadioButton");
+var Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
+var RadioButton_1 = require("../../RadioButton/RadioButton");
 var TextOperationControls_1 = require("./TextOperationControls");
 var SelectOperationControls_1 = require("./SelectOperationControls");
 var CompactSelect_1 = __importDefault(require("./CompactSelect"));
-var DatePicker_1 = __importDefault(require("../DatePicker/DatePicker"));
+var DatePicker_1 = __importDefault(require("../../DatePicker/DatePicker"));
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 var LABEL_MAX_LENGTH = 18;
 function formatHeaderLabel(label) {

package/dist/Components/Table/{TableSettings → settings}/TableSettings.d.ts

@@ -1,8 +1,10 @@
 import React from "react";
-import { TableProps } from "../TableProps";
-declare const TableSettings: ({ columns, onSave, tableSettings, }: {
+import { TableDensity, TableProps } from "../TableProps";
+declare const TableSettings: ({ columns, onSave, density, onDensityChange, }: {
     columns: TableProps["columns"];
     onSave: (updatedColumns: TableProps["columns"]) => void;
     tableSettings?: TableProps["tableSettings"];
+    density?: TableDensity;
+    onDensityChange?: (d: TableDensity) => void;
 }) => React.JSX.Element;
 export default TableSettings;

package/dist/Components/Table/settings/TableSettings.js

@@ -0,0 +1,141 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 });
+var react_1 = require("@chakra-ui/react");
+var react_2 = __importStar(require("react"));
+var framer_motion_1 = require("framer-motion");
+var ManageColumns_1 = __importDefault(require("./ManageColumns"));
+var Button_1 = __importDefault(require("../../Button/Button"));
+var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+var lucide_react_1 = require("lucide-react");
+var MotionModalContent = (0, framer_motion_1.motion)(react_1.ModalContent);
+var DENSITY_OPTIONS = [
+    { value: "compact", label: "Compact", desc: "Tight rows — fit more data on screen" },
+    { value: "normal", label: "Normal", desc: "Balanced default spacing" },
+    { value: "comfortable", label: "Comfortable", desc: "Roomy rows, easier scanning" },
+];
+var TableSettings = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    var columns = _a.columns, onSave = _a.onSave, _p = _a.density, density = _p === void 0 ? "normal" : _p, onDensityChange = _a.onDensityChange;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var childInputMethodsRef = (0, react_2.useRef)({});
+    var _q = (0, react_2.useState)(false), settingsOpen = _q[0], setSettingsOpen = _q[1];
+    var _r = (0, react_2.useState)(0), selectedIndex = _r[0], setSelectedIndex = _r[1];
+    var _s = (0, react_2.useState)(columns), items = _s[0], setItems = _s[1];
+    var handleSave = (0, react_2.useCallback)(function () {
+        onSave(items);
+        setSettingsOpen(false);
+    }, [onSave, items]);
+    var handleOpen = (0, react_2.useCallback)(function () {
+        setItems(columns);
+        setSettingsOpen(true);
+    }, [columns]);
+    var tabStyle = {
+        fontSize: "13px",
+        fontWeight: 500,
+        px: 4,
+        py: 2,
+        borderBottom: "2px solid transparent",
+        color: (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c[400],
+        _selected: {
+            borderBottom: "2px solid ".concat(theme.colors.primary[600]),
+            color: theme.colors.primary[600],
+            fontWeight: 600,
+        },
+        _hover: { color: (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.text) === null || _e === void 0 ? void 0 : _e[600] },
+    };
+    return (react_2.default.createElement(react_1.Box, null,
+        react_2.default.createElement(react_1.Box, { display: "flex", justifyContent: "flex-end", cursor: "pointer", transition: "all 0.2s ease", _hover: { transform: "scale(1.1)" } },
+            react_2.default.createElement(lucide_react_1.Settings, { onClick: handleOpen, size: "1.25rem", color: (_g = (_f = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _f === void 0 ? void 0 : _f.text) === null || _g === void 0 ? void 0 : _g[500] })),
+        react_2.default.createElement(react_1.Modal, { isOpen: settingsOpen, onClose: function () { return setSettingsOpen(false); }, size: "md" },
+            react_2.default.createElement(react_1.ModalOverlay, null),
+            react_2.default.createElement(MotionModalContent, { mt: "0", top: "0", position: "absolute", borderTopRadius: "0", initial: { y: "-100%", opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: "-100%", opacity: 0 }, transition: { duration: 0.4, ease: "easeOut" }, padding: "0", minW: "620px", minH: "520px", maxH: "90vh", display: "flex", flexDirection: "column", bg: (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.background) === null || _j === void 0 ? void 0 : _j[50], overflow: "hidden" },
+                react_2.default.createElement(react_1.ModalCloseButton, { top: 3, right: 3, zIndex: 2 }),
+                react_2.default.createElement(react_1.Tabs, { index: selectedIndex, onChange: setSelectedIndex, variant: "unstyled", display: "flex", flexDirection: "column", flex: "1", minH: 0 },
+                    react_2.default.createElement(react_1.Box, { pt: 4, px: 4 },
+                        react_2.default.createElement(react_1.Text, { fontWeight: 600, fontSize: "md", mb: 3 }, "Table Settings"),
+                        react_2.default.createElement(react_1.TabList, { gap: 0, borderBottom: "1px solid", borderColor: (_l = (_k = theme.colors) === null || _k === void 0 ? void 0 : _k.border) === null || _l === void 0 ? void 0 : _l[200] },
+                            react_2.default.createElement(react_1.Tab, __assign({}, tabStyle), "Density"),
+                            react_2.default.createElement(react_1.Tab, __assign({}, tabStyle), "Manage Columns"))),
+                    react_2.default.createElement(react_1.ModalBody, { px: 4, py: 3, flex: "1", overflowY: "auto", sx: {
+                            "&::-webkit-scrollbar": { width: "3px", height: "3px" },
+                            "&::-webkit-scrollbar-track": { background: theme.colors.gray[100], borderRadius: "2px" },
+                            "&::-webkit-scrollbar-thumb": { background: theme.colors.gray[400], borderRadius: "2px" },
+                            "&::-webkit-scrollbar-thumb:hover": { background: theme.colors.gray[500] },
+                            scrollbarWidth: "thin",
+                            scrollbarColor: "".concat(theme.colors.gray[400], " ").concat(theme.colors.gray[100]),
+                        } },
+                        react_2.default.createElement(react_1.TabPanels, null,
+                            react_2.default.createElement(react_1.TabPanel, { px: 0, py: 1 },
+                                react_2.default.createElement(react_1.Flex, { direction: "column", gap: 2 }, DENSITY_OPTIONS.map(function (opt) {
+                                    var _a;
+                                    var selected = density === opt.value;
+                                    return (react_2.default.createElement(react_1.Flex, { as: "button", type: "button", key: opt.value, align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "0.5rem", border: "1px solid", borderColor: selected ? theme.colors.primary[500] : (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[300], bg: selected ? theme.colors.primary.opacity[8] : "transparent", transition: "all 0.15s", _hover: { borderColor: theme.colors.primary[400] }, onClick: function () { return onDensityChange === null || onDensityChange === void 0 ? void 0 : onDensityChange(opt.value); } },
+                                        react_2.default.createElement(react_1.Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.primary[500] : theme.colors.gray[400], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }, selected && react_2.default.createElement(lucide_react_1.Check, { size: 11, color: theme.colors.primary[500], strokeWidth: 3 })),
+                                        react_2.default.createElement(react_1.Box, { textAlign: "left" },
+                                            react_2.default.createElement(react_1.Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700] }, opt.label),
+                                            react_2.default.createElement(react_1.Text, { fontSize: "11px", color: theme.colors.gray[500] }, opt.desc))));
+                                }))),
+                            react_2.default.createElement(react_1.TabPanel, { px: 0, py: 0 },
+                                react_2.default.createElement(react_1.Box, { sx: {
+                                        "& [role='listitem'], & > div > div": {
+                                            py: "4px !important",
+                                            minHeight: "unset !important",
+                                        },
+                                        "& label": { fontSize: "13px !important" },
+                                        "& .chakra-checkbox": { gap: "8px !important" },
+                                        "& .chakra-checkbox__label": { fontSize: "13px !important" },
+                                        "& [draggable]": { py: "5px !important" },
+                                    } },
+                                    react_2.default.createElement(ManageColumns_1.default, { columns: columns, items: items, setItems: setItems, childInputMethodsRef: childInputMethodsRef })))))),
+                react_2.default.createElement(react_1.ModalFooter, { gap: "0.5rem", borderTop: "1px solid", borderColor: (_o = (_m = theme.colors) === null || _m === void 0 ? void 0 : _m.border) === null || _o === void 0 ? void 0 : _o[200], pt: 3, pb: 3, px: 4 },
+                    react_2.default.createElement(Button_1.default, { label: "Close", size: "sm", onClick: function () { return setSettingsOpen(false); }, variant: "outline", colorScheme: "red" }),
+                    react_2.default.createElement(Button_1.default, { label: "Save", size: "sm", onClick: handleSave }))))));
+};
+exports.default = TableSettings;