pixelize-design-library 2.4.1 → 2.4.2-beta.1

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

@@ -0,0 +1,335 @@
+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.js";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { onFilled, isDarkCanvas } from "../../../Theme/tokens/builders/accentText.js";
+import { TableBodyLoading } from "./TableLoading.js";
+import TableActions from "./TableActions.js";
+import { getTableRowHoverStyle } from "./tableRowHoverStyle.js";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import CheckBox from "../../Checkbox/Checkbox.js";
+import TableGroupRow from "./TableGroupRow.js";
+// 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, }) => {
+    // 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 = freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.table.hover[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: "0px", 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: theme.colors.textMuted, 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: theme.colors.background[50], textTransform: "capitalize", background: isChecked ? selectedFrozenBg : frozenCellBg, position: "sticky", borderBottom: borderStyle, boxShadow: !isContent ? accentSx : undefined, boxSizing: "border-box", left: "0px", 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;
+                        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(statusColor.solid, 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 : theme.colors.background[50], textOverflow: "ellipsis", boxShadow: isFirstDataCell ? accentSx : undefined, borderBottom: noBorders
+                                ? "none"
+                                : `0.063rem solid ${theme.colors.boxborder[isFrozen || isChecked ? 300 : 200]}`, className: `columns ${isFrozen ? "sticky-columns" : "scrollable-columns"}`, boxSizing: "border-box", color: isStatus && statusColor ? statusOnSolid : theme.colors.text[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 : theme.colors.background[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: theme.colors.background[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;
+    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(() => noBorders ? "none" : `0.063rem solid ${theme.colors.border[500]}`, [noBorders, theme.colors.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 = theme.colors.primary.opacity[16];
+    // Sticky/frozen cells overlay scrolling content, so their selected background
+    // must be OPAQUE — paint the (translucent) tint over an opaque base.
+    const selectedFrozenBg = `linear-gradient(0deg, ${selectedBg}, ${selectedBg}), ${theme.colors.background[50]}`;
+    // Dark mode lifts the hover fill to `table.hover[500]`; `[300]` sits ~1.2:1 from the canvas.
+    // No ink flip needed — see `tableRowHoverStyle.ts`.
+    const isDark = isDarkCanvas(theme.colors.backgroundColor.main);
+    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.boxborder[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: theme.colors.background[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: theme.colors.textMuted, children: [(es === null || es === void 0 ? void 0 : es.icon) && _jsx(Box, { fontSize: "1.75rem", color: theme.colors.textMuted, children: es.icon }), _jsx(Box, { fontSize: "0.95rem", fontWeight: 600, color: theme.colors.text[700], children: (_b = es === null || es === void 0 ? void 0 : es.title) !== null && _b !== void 0 ? _b : "No data found" }), (es === null || es === void 0 ? void 0 : es.description) && (_jsx(Box, { fontSize: "0.8125rem", color: theme.colors.textMuted, 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 = (_c = offsets[firstI]) !== null && _c !== void 0 ? _c : 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: theme.colors.accentText }) }) }) })), 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,10 @@
+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.js";
+/** Monday-style colored, collapsible group header row. */
+export const TableGroupRow = ({ label, value, count, color, collapsed, colSpan, ariaRowIndex, onToggle, onAddItem, }) => {
+    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 ${theme.colors.border[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: theme.colors.background[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: theme.colors.text[500], _hover: { bg: theme.colors.background[50], 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,96 @@
+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.js";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { accentTextOnCanvas } from "../../../Theme/tokens/builders/accentText.js";
+import TableFilters from "../filters/TableFilters.js";
+import { ChevronDown, ChevronsUpDown, ChevronUp } from "lucide-react";
+import CheckBox from "../../Checkbox/Checkbox.js";
+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, }) => {
+    const theme = useCustomTheme();
+    return (_jsx(Th, { scope: "col", w: 6, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: theme.colors.table.hover[200], position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 9, borderBottom: noBorders ? "none" : `0.063rem solid ${theme.colors.border[500]}`, children: isSelecting ? (_jsx(Spinner, { size: "sm", color: theme.colors.accentText })) : (_jsx(CheckBox, { "aria-label": "Select all rows", variant: "outline", onChange: () => handleCheckbox(0), isChecked: isLoading ? false : checked === true, isIndeterminate: checked === "indeterminate" })) }));
+});
+const ContentSpacerCell = memo(({ noBorders }) => {
+    const theme = useCustomTheme();
+    return (_jsx(Th, { scope: "col", w: 6, minW: "35px", p: 0, backgroundColor: theme.colors.table.hover[200], borderBottom: noBorders ? "none" : `0.063rem solid ${theme.colors.border[500]}`, position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 1 }));
+});
+const ViewSpacerCell = memo(({ noBorders, isActionFreeze, }) => {
+    const theme = useCustomTheme();
+    return (_jsx(Th, { scope: "col", w: 2, p: 0, minW: "2.065rem", backgroundColor: theme.colors.table.hover[200], borderBottom: noBorders ? "none" : `0.063rem solid ${theme.colors.border[500]}`, position: isActionFreeze ? "sticky" : "relative", className: `columns sticky-columns`, right: "0px", zIndex: 1 }));
+});
+const SortingIcon = memo(({ label, sortState, isVisible, handleSortClick, }) => {
+    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.textMuted, _hover: {
+            opacity: 1,
+            color: accentTextOnCanvas(theme.colors.secondary, theme.colors.table.hover[200]),
+        }, 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;
+    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: theme.colors.table.hover[200], maxWidth: 500, zIndex: isFrozen ? 2 : 1, py: 2, pr: 0, overflow: "hidden", borderTop: "none", borderBottom: noBorders ? "none" : `0.063rem solid ${theme.colors.border[500]}`, borderRight: noBorders ? "none" : `0.063rem solid ${theme.colors.boxborder[300]}`, 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, theme.colors.table.hover[200]), 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: (_a = isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) !== null && _a !== void 0 ? _a : "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: theme.colors.primary.opacity[16], color: accentTextOnCanvas(theme.colors.primary, theme.colors.table.hover[200]), 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));
+        }) }));
+};

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Box, Icon, IconButton, Input, InputGroup, InputRightElement, } from "@chakra-ui/react";
+import { Search, X } from "lucide-react";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { useDebounce } from "../../../Utils/table.js";
+import ToolTip from "../../ToolTip/ToolTip.js";
+const TableSearch = ({ onSearch }) => {
+    const { colors } = useCustomTheme();
+    const [showInput, setShowInput] = useState(false);
+    const [query, setQuery] = useState("");
+    const handleSearchClick = () => {
+        setShowInput((prev) => !prev);
+        if (showInput) {
+            setQuery("");
+            if (query)
+                onSearch === null || onSearch === void 0 ? void 0 : onSearch(""); // clear search on close
+        }
+    };
+    const handleDebounce = useDebounce((value) => {
+        onSearch === null || onSearch === void 0 ? void 0 : onSearch(value);
+    }, 700);
+    const handleInputChange = (e) => {
+        const value = e.target.value;
+        setQuery(value);
+        handleDebounce(value);
+    };
+    return (_jsxs(Box, { display: "flex", alignItems: "center", gap: "2", children: [!showInput && (_jsx(ToolTip, { label: "Search", placement: "top", children: _jsx(IconButton, { "aria-label": "Search", icon: _jsx(Icon, { as: Search, transform: "scaleX(-1)", boxSize: 5 }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", cursor: "pointer", color: colors.text[500], onClick: handleSearchClick, _hover: { color: colors.accentText } }) })), showInput ? (_jsxs(InputGroup, { maxW: "12.5rem", transition: "all 0.3s ease", children: [_jsx(Input, { placeholder: "Search...", value: query, onChange: handleInputChange, size: "sm", borderRadius: "md", borderColor: colors.border[500], _focus: { borderColor: colors.accentText }, autoFocus: true }), _jsx(InputRightElement, { display: "flex", alignItems: "center", height: "2rem", children: _jsx(IconButton, { "aria-label": "Clear search", icon: _jsx(Icon, { as: X }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", color: colors.text[500], cursor: "pointer", onClick: handleSearchClick }) })] })) : null] }));
+};
+export default TableSearch;

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

@@ -0,0 +1,21 @@
+/**
+ * Per-cell hover fill for a table row. `table.hover[300]` works in light mode — a pale tint on a
+ * white canvas — but in dark mode that rung sits within ~10 lightness points of the near-black
+ * canvas, computing to ~1.2:1: invisible, as QA reported.
+ *
+ * The first fix for that overshot to `background[900]`, the palette's BRIGHTEST rung (~10:1), and
+ * had to invert the row's ink to keep it readable — a near-white slab in a dark table. Dark-mode
+ * hover is a *lifted surface*, not an inversion: `table.hover[500]` is a visible step up from the
+ * canvas while staying dark enough that the row's resting `text[500]` ink is still legible, so no
+ * `color` flip is needed. Pinned by tableRowHoverStyle.test.ts.
+ */
+export const getTableRowHoverStyle = (colors, isDark) => {
+    if (isDark) {
+        return {
+            backgroundColor: colors.table.hover[500],
+        };
+    }
+    return {
+        backgroundColor: colors.table.hover[300],
+    };
+};

package/dist/esm/Components/Table/filterTypes.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/Table/filters/ActiveFilters.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useMemo } from "react";
+import { Box, Flex, Text, IconButton } from "@chakra-ui/react";
+import { X } from "lucide-react";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { accentTextOnCanvas } from "../../../Theme/tokens/builders/accentText.js";
+import VeritcalDivider from "../../Divider/Divider.js";
+const ActiveFilters = React.memo(({ columns, columnsSearch, setColumnsSearch, }) => {
+    const theme = useCustomTheme();
+    const columnLabelMap = useMemo(() => {
+        const map = new Map();
+        for (const col of columns) {
+            map.set(col.id, col.label);
+        }
+        return map;
+    }, [columns]);
+    const activeFilters = useMemo(() => Object.entries(columnsSearch)
+        .filter(([, value]) => value && value.trim() !== "")
+        .map(([columnId, value]) => ({
+        columnId,
+        label: columnLabelMap.get(columnId) || columnId,
+        value: value.trim(),
+    })), [columnsSearch, columnLabelMap]);
+    const handleRemoveFilter = useCallback((columnId) => {
+        setColumnsSearch((prev) => {
+            const newSearch = { ...prev };
+            delete newSearch[columnId];
+            return newSearch;
+        });
+    }, [setColumnsSearch]);
+    const handleClearAll = useCallback(() => {
+        setColumnsSearch({});
+    }, [setColumnsSearch]);
+    if (activeFilters.length === 0) {
+        return null;
+    }
+    return (_jsx(Box, { px: 2, py: 1, bg: theme.colors.background[100], overflowX: "auto", sx: {
+            '&::-webkit-scrollbar': {
+                height: '6px',
+            },
+            '&::-webkit-scrollbar-track': {
+                background: theme.colors.gray[100],
+                borderRadius: 'base',
+            },
+            '&::-webkit-scrollbar-thumb': {
+                background: theme.colors.gray[400],
+                borderRadius: 'base',
+            },
+            '&::-webkit-scrollbar-thumb:hover': {
+                background: theme.colors.gray[500],
+            },
+            scrollbarWidth: 'thin',
+            scrollbarColor: `${theme.colors.gray[400]} ${theme.colors.gray[100]}`,
+        }, children: _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, flexWrap: "nowrap", minW: "max-content", children: [activeFilters.length > 0 && _jsx(VeritcalDivider, {}), activeFilters.map((filter) => (_jsxs(Flex, { alignItems: "center", gap: 1, px: 2, py: 1, bg: theme.colors.blue[50], borderRadius: "md", border: `0.063rem solid ${theme.colors.blue[200]}`, flexShrink: 0, children: [_jsxs(Text, { fontSize: "sm", color: accentTextOnCanvas(theme.colors.blue, theme.colors.blue[50]), whiteSpace: "nowrap", children: [_jsxs(Text, { as: "span", fontWeight: 600, children: [filter.label, ":"] }), " ", filter.value] }), _jsx(IconButton, { "aria-label": `Remove filter for ${filter.label}`, icon: _jsx(X, { size: 14 }), size: "xs", variant: "ghost", onClick: () => handleRemoveFilter(filter.columnId), _hover: {
+                                bg: theme.colors.blue[100],
+                            }, minW: "auto", h: "auto", p: 0.5, flexShrink: 0 })] }, filter.columnId))), activeFilters.length > 1 && (_jsx(Text, { as: "p", className: "clear-all-text", "aria-label": "Clear All", fontSize: "sm", color: accentTextOnCanvas(theme.colors.blue, theme.colors.background[100]), cursor: "pointer", fontWeight: 500, onClick: handleClearAll, _hover: {
+                        textDecoration: "underline",
+                    }, flexShrink: 0, whiteSpace: "nowrap", children: "Clear All" }))] }) }));
+});
+export default ActiveFilters;