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

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

@@ -62,14 +62,45 @@ var StatusCell = function (_a) {
 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 _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+    var row = _a.row, rowIndex = _a.rowIndex, index = _a.index, isChecked = _a.isChecked, isExpanded = _a.isExpanded, isContent = _a.isContent, isLink = _a.isLink, isCheckbox = _a.isCheckbox, isLoading = _a.isLoading, isActionFreeze = _a.isActionFreeze, columns = _a.columns, leftOffsets = _a.leftOffsets, noBorders = _a.noBorders, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, theme = _a.theme, borderStyle = _a.borderStyle, hoverStyle = _a.hoverStyle, rowHeight = _a.rowHeight, cellPy = _a.cellPy, palette = _a.palette, accentColor = _a.accentColor, handleCheckbox = _a.handleCheckbox, onRowClick = _a.onRowClick, toggleRowExpansion = _a.toggleRowExpansion, onMeasure = _a.onMeasure;
+    // Selected-row tint applied per-cell (NOT a blanket `& td` override) so status
+    // cells keep their solid color + white text instead of white-on-tint.
+    var selectedBg = (_d = (_c = (_b = theme.colors.primary) === null || _b === void 0 ? void 0 : _b.opacity) === null || _c === void 0 ? void 0 : _c[16]) !== null && _d !== void 0 ? _d : (_e = theme.colors.disabled) === null || _e === void 0 ? void 0 : _e[100];
+    // Sticky/frozen cells overlay scrolling content, so their selected background
+    // must be OPAQUE — paint the (translucent) tint over an opaque base.
+    var selectedFrozenBg = "linear-gradient(0deg, ".concat(selectedBg, ", ").concat(selectedBg, "), ").concat((_h = (_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.background) === null || _g === void 0 ? void 0 : _g[50]) !== null && _h !== void 0 ? _h : "#fff");
+    // Measured-height virtualization: report this row's real height (main + any
+    // expanded panel) so the windower can place variable/expandable rows exactly.
+    var mainRowRef = (0, react_2.useRef)(null);
+    var expandedRowRef = (0, react_2.useRef)(null);
+    var hasContent = !!row.content;
+    (0, react_2.useLayoutEffect)(function () {
+        if (!onMeasure)
+            return;
+        var measure = function () {
+            var _a, _b, _c, _d;
+            var main = (_b = (_a = mainRowRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0;
+            var exp = isExpanded && hasContent ? (_d = (_c = expandedRowRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight) !== null && _d !== void 0 ? _d : 0 : 0;
+            var h = main + exp;
+            if (h > 0)
+                onMeasure(row.id, h);
+        };
+        measure();
+        var raf = requestAnimationFrame(measure);
+        var ro;
+        if (typeof ResizeObserver !== "undefined") {
+            ro = new ResizeObserver(measure);
+            if (mainRowRef.current)
+                ro.observe(mainRowRef.current);
+            if (expandedRowRef.current)
+                ro.observe(expandedRowRef.current);
+        }
+        return function () {
+            cancelAnimationFrame(raf);
+            ro === null || ro === void 0 ? void 0 : ro.disconnect();
+        };
+    }, [onMeasure, isExpanded, hasContent, row.id]);
     var handleCellClick = (0, react_2.useCallback)(function (header) {
         if (!header.node && onRowClick) {
             onRowClick(row, { label: header.label, id: header.id });
@@ -77,10 +108,13 @@ var TableRow = react_2.default.memo(function (_a) {
     }, [row, onRowClick]);
     var firstDataColIndex = columns.findIndex(function (c) { return !c.isHidden; });
     var accentSx = accentColor ? "inset 3px 0 0 ".concat(accentColor) : undefined;
+    // Pinned/frozen columns get a tinted, opaque background so the frozen pane reads
+    // as one piece with its header (and so sticky cells cover scrolling content).
+    var frozenCellBg = (_m = freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : (_l = (_k = (_j = theme.colors) === null || _j === void 0 ? void 0 : _j.table) === null || _k === void 0 ? void 0 : _k.hover) === null || _l === void 0 ? void 0 : _l[100]) !== null && _m !== void 0 ? _m : (_p = (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.background) === null || _p === void 0 ? void 0 : _p[100];
     return (react_2.default.createElement(react_2.default.Fragment, null,
-        react_2.default.createElement(react_1.Tr, { 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(react_1.Tr, { ref: mainRowRef, opacity: isLoading ? 0.4 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "opacity 0.2s" },
+            isContent && (react_2.default.createElement(react_1.Td, { w: "6", p: 0, fontSize: 14, background: isChecked ? selectedFrozenBg : frozenCellBg, color: freezedTextColor, position: "sticky", borderBottom: borderStyle, boxShadow: accentSx, boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns" }, !!(row === null || row === void 0 ? void 0 : row.content) && (react_2.default.createElement(react_1.IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: (_q = theme.colors) === null || _q === void 0 ? void 0 : _q.gray[600], icon: isExpanded ? (react_2.default.createElement(lucide_react_1.ChevronDown, { fontSize: 16 })) : (react_2.default.createElement(lucide_react_1.ChevronRight, { fontSize: 16 })), _hover: { transform: "scale(1.1)" }, size: "sm", onClick: function () { return toggleRowExpansion(rowIndex); }, variant: "ghost" })))),
+            isCheckbox && (react_2.default.createElement(react_1.Td, { w: "6", fontSize: 14, fontWeight: 600, color: (_s = (_r = theme.colors) === null || _r === void 0 ? void 0 : _r.background) === null || _s === void 0 ? void 0 : _s[50], textTransform: "capitalize", background: isChecked ? selectedFrozenBg : frozenCellBg, position: "sticky", borderBottom: borderStyle, boxShadow: !isContent ? accentSx : undefined, boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns" },
                 react_2.default.createElement(Checkbox_1.default, { "aria-label": "Select all rows", onChange: function () { return handleCheckbox(row.id); }, isChecked: isChecked }))),
             columns.map(function (header, headerIndex) {
                 var _a, _b, _c, _d, _e, _f, _g;
@@ -93,7 +127,7 @@ var TableRow = react_2.default.memo(function (_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
+                return (react_2.default.createElement(react_1.Td, { maxWidth: 500, minWidth: 120, height: "".concat(rowHeight, "px"), py: isStatus && statusColor ? 0 : cellPy, px: isStatus && statusColor ? 0 : undefined, key: headerIndex + 1, onClick: function () { return handleCellClick(header); }, fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffsets[headerIndex] : undefined, zIndex: isFrozen ? 1 : 0, background: isStatus && statusColor ? statusColor.solid : isChecked ? (isFrozen ? selectedFrozenBg : selectedBg) : isFrozen ? frozenCellBg : (_c = theme.colors.background) === null || _c === void 0 ? void 0 : _c[50], textOverflow: "ellipsis", boxShadow: isFirstDataCell ? accentSx : undefined, borderBottom: noBorders
                         ? "none"
                         : "0.063rem solid ".concat((_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[isFrozen || isChecked ? 300 : 200]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns"), boxSizing: "border-box", color: isStatus && statusColor ? "white" : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.text) === null || _f === void 0 ? void 0 : _f[500], _hover: isStatus && statusColor
                         ? EMPTY_HOVER
@@ -101,8 +135,8 @@ var TableRow = react_2.default.memo(function (_a) {
                             ? 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,
+            isLink && (react_2.default.createElement(react_1.Td, { w: 2, p: 0, fontSize: 14, background: isChecked ? (isActionFreeze ? selectedFrozenBg : selectedBg) : isActionFreeze ? frozenCellBg : (_u = (_t = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _t === void 0 ? void 0 : _t.background) === null || _u === void 0 ? void 0 : _u[50], color: freezedTextColor, position: isActionFreeze ? "sticky" : "relative", borderBottom: borderStyle, boxSizing: "border-box", right: 0, zIndex: 1, className: "columns sticky-columns".concat(isActionFreeze ? "-right" : "") }, (row.onLink || row.onEdit || row.onDelete) && (react_2.default.createElement(TableActions_1.default, { row: row }))))),
+        row.content && isExpanded && (react_2.default.createElement(react_1.Tr, { ref: expandedRowRef },
             react_2.default.createElement(react_1.Td, { colSpan: columns.length +
                     (isCheckbox ? 1 : 0) +
                     (isContent ? 1 : 0) +
@@ -135,19 +169,32 @@ var TableBody = function (_a) {
     // 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.
+    // Expandable `content` rows are supported via measured heights (see
+    // `measuredHeights` / `onMeasure` below) — each rendered row reports its real
+    // height, so the window places variable/expanded rows exactly.
     var ROW_HEIGHT = rowHeight;
     var GROUP_HEADER_H = 42;
     var OVERSCAN = 6;
     var VIRTUALIZE_THRESHOLD = 30;
-    var shouldVirtualize = !isContent && data.length > VIRTUALIZE_THRESHOLD;
+    var ESTIMATED_EXPAND = 120; // assumed extra height for an expanded-but-not-yet-measured row
+    var shouldVirtualize = data.length > VIRTUALIZE_THRESHOLD;
     // Grouped mode has no pager, so it virtualizes too (when no expandable rows):
     // group headers + rows form one flat sequence that we window over.
     var groupRowCount = groups ? groups.reduce(function (n, g) { return n + g.rows.length; }, 0) : 0;
     var groupVirtualize = !!groups && !isContent && groupRowCount > VIRTUALIZE_THRESHOLD;
     var _w = (0, react_2.useState)(0), scrollTop = _w[0], setScrollTop = _w[1];
     var _x = (0, react_2.useState)(0), viewportH = _x[0], setViewportH = _x[1];
+    // Measured row heights keyed by row id (stable across scroll/paging).
+    var _y = (0, react_2.useState)(new Map()), measuredHeights = _y[0], setMeasuredHeights = _y[1];
+    var reportHeight = (0, react_2.useCallback)(function (id, h) {
+        setMeasuredHeights(function (prev) {
+            if (prev.get(id) === h)
+                return prev;
+            var next = new Map(prev);
+            next.set(id, h);
+            return next;
+        });
+    }, []);
     (0, react_2.useEffect)(function () {
         var el = scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : scrollContainerRef.current;
         if (!el || !(shouldVirtualize || groupVirtualize))
@@ -175,15 +222,37 @@ var TableBody = function (_a) {
     var total = data.length;
     var firstIndex = 0;
     var lastIndex = total;
+    var topPad = 0;
+    var bottomPad = 0;
     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);
+        // Prefix-sum offsets using measured heights (exact for rendered rows) and
+        // estimates for not-yet-measured rows (ROW_HEIGHT, + ESTIMATED_EXPAND if expanded).
+        var offsets = new Array(total + 1);
+        offsets[0] = 0;
+        for (var i = 0; i < total; i++) {
+            var id = data[i].id;
+            var measured = measuredHeights.get(id);
+            var h = measured != null
+                ? measured
+                : ROW_HEIGHT + (expandedRows.has(startRow + i) ? ESTIMATED_EXPAND : 0);
+            offsets[i + 1] = offsets[i] + h;
+        }
+        var totalH = offsets[total];
+        var top_1 = scrollTop - OVERSCAN * ROW_HEIGHT;
+        var bottom = scrollTop + vh + OVERSCAN * ROW_HEIGHT;
+        firstIndex = 0;
+        while (firstIndex < total && offsets[firstIndex + 1] <= top_1)
+            firstIndex++;
+        lastIndex = firstIndex;
+        while (lastIndex < total && offsets[lastIndex] < bottom)
+            lastIndex++;
+        if (lastIndex < firstIndex)
+            lastIndex = firstIndex;
+        topPad = offsets[firstIndex];
+        bottomPad = totalH - offsets[lastIndex];
     }
     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);
@@ -235,8 +304,8 @@ var TableBody = function (_a) {
             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];
+                for (var _z = 0, _0 = g.rows; _z < _0.length; _z++) {
+                    var row = _0[_z];
                     items.push({ kind: "row", g: g, row: row });
                 }
             }
@@ -249,16 +318,16 @@ var TableBody = function (_a) {
             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];
+            for (var _1 = 0, heights_1 = heights_2; _1 < heights_1.length; _1++) {
+                var h = heights_1[_1];
                 offsets_1.push(acc);
                 acc += h;
             }
             var totalH = acc;
             var vh = viewportH || 500;
-            var top_1 = scrollTop - OVERSCAN * rowHeight;
+            var top_2 = scrollTop - OVERSCAN * rowHeight;
             var bottom = scrollTop + vh + OVERSCAN * rowHeight;
-            firstI_1 = items.findIndex(function (_, i) { return offsets_1[i] + heights_2[i] > top_1; });
+            firstI_1 = items.findIndex(function (_, i) { return offsets_1[i] + heights_2[i] > top_2; });
             if (firstI_1 < 0)
                 firstI_1 = items.length;
             lastI = items.length;
@@ -295,7 +364,7 @@ var TableBody = function (_a) {
             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 }));
+            return (react_2.default.createElement(TableRow, { key: (_a = row.id) !== null && _a !== void 0 ? _a : rowIndex, row: row, rowIndex: rowIndex, index: index, isChecked: isChecked, isExpanded: isExpanded, isContent: isContent, isLink: isLink, isCheckbox: isCheckbox, isLoading: isLoading, isActionFreeze: isActionFreeze, columns: columns, leftOffsets: leftOffsets, noBorders: noBorders, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, theme: theme, borderStyle: borderStyle, hoverStyle: hoverStyle, rowHeight: rowHeight, cellPy: cellPy, palette: palette, accentColor: accentColors === null || accentColors === void 0 ? void 0 : accentColors[row.id], handleCheckbox: handleCheckbox, onRowClick: onRowClick, toggleRowExpansion: toggleRowExpansion, onMeasure: shouldVirtualize ? reportHeight : undefined }));
         }),
         shouldVirtualize && bottomPad > 0 && (react_2.default.createElement("tr", { "aria-hidden": "true", style: { height: bottomPad } },
             react_2.default.createElement("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: bottomPad } })))));

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

@@ -70,19 +70,29 @@ var Harness = function (_a) {
                 react_1.default.createElement(react_3.Tbody, null,
                     react_1.default.createElement(TableBody_1.default, { data: makeData(count), columns: columns, startRow: 0, endRow: count, columnWidths: [120], isCheckbox: false, isContent: false, isLink: false, isActionFreeze: false, noBorders: false, selections: [], handleCheckbox: function () { }, scrollContainerRef: ref }))))));
 };
+// Windowing math (normal density): ROW_HEIGHT=40, OVERSCAN=6, viewport falls
+// back to 500px (jsdom clientHeight=0). Rows are unmeasured in jsdom, so every
+// row is estimated at 40px. bottom = 0 + 500 + 6*40 = 740 -> last rendered row
+// is the highest index with offset < 740 -> index 18 (offsets[18]=720). So rows
+// 0..18 (19 rows) render and the trailing spacer reserves (100-19)*40 px.
+var ROW_HEIGHT = 40;
+var VISIBLE_COUNT = 19;
+var LAST_VISIBLE = VISIBLE_COUNT - 1;
 describe("TableBody virtualization", function () {
     it("windows large pages and reserves height with spacer rows", function () {
         var _a = (0, react_2.render)(react_1.default.createElement(Harness, { count: 100 })), container = _a.container, queryByText = _a.queryByText;
-        // jsdom clientHeight=0 -> 500px fallback -> ceil(500/45)+12 = 24 rows
         expect(queryByText("Row 0")).toBeInTheDocument();
-        expect(queryByText("Row 23")).toBeInTheDocument();
+        expect(queryByText("Row ".concat(LAST_VISIBLE))).toBeInTheDocument();
         // Rows beyond the window are not mounted.
+        expect(queryByText("Row ".concat(LAST_VISIBLE + 1))).not.toBeInTheDocument();
         expect(queryByText("Row 50")).not.toBeInTheDocument();
         expect(queryByText("Row 99")).not.toBeInTheDocument();
         // A trailing spacer reserves the height of the unrendered rows.
         var spacers = container.querySelectorAll('tr[aria-hidden="true"]');
         expect(spacers.length).toBe(1);
-        expect(spacers[0]).toHaveStyle({ height: "".concat((100 - 24) * 45, "px") });
+        expect(spacers[0]).toHaveStyle({
+            height: "".concat((100 - VISIBLE_COUNT) * ROW_HEIGHT, "px"),
+        });
     });
     it("renders every row and no spacers below the threshold", function () {
         var _a = (0, react_2.render)(react_1.default.createElement(Harness, { count: 30 })), container = _a.container, queryByText = _a.queryByText;

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

@@ -1,4 +1,4 @@
 import React from "react";
 import { TableHeaderPageProps } from "../TableProps";
-declare const _default: React.MemoExoticComponent<({ columns, isCheckbox, handleSort, headerRefs, columnWidths, columnsSort, headerBgColor, headerTextColor, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, isContent, isLink, isActionFreeze, setColumnsSearch, columnsSearch, isSelecting, }: TableHeaderPageProps) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ columns, isCheckbox, handleSort, headerRefs, columnWidths, columnsSort, headerBgColor, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, isContent, isLink, isActionFreeze, setColumnsSearch, columnsSearch, isSelecting, }: TableHeaderPageProps) => React.JSX.Element>;
 export default _default;

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

@@ -55,12 +55,12 @@ 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) {
-    var columns = _a.columns, isCheckbox = _a.isCheckbox, handleSort = _a.handleSort, headerRefs = _a.headerRefs, columnWidths = _a.columnWidths, columnsSort = _a.columnsSort, headerBgColor = _a.headerBgColor, headerTextColor = _a.headerTextColor, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, checked = _a.checked, isLoading = _a.isLoading, isContent = _a.isContent, isLink = _a.isLink, isActionFreeze = _a.isActionFreeze, setColumnsSearch = _a.setColumnsSearch, columnsSearch = _a.columnsSearch, isSelecting = _a.isSelecting;
+    var columns = _a.columns, isCheckbox = _a.isCheckbox, handleSort = _a.handleSort, headerRefs = _a.headerRefs, columnWidths = _a.columnWidths, columnsSort = _a.columnsSort, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, checked = _a.checked, isLoading = _a.isLoading, isContent = _a.isContent, isLink = _a.isLink, isActionFreeze = _a.isActionFreeze, setColumnsSearch = _a.setColumnsSearch, columnsSearch = _a.columnsSearch, isSelecting = _a.isSelecting;
     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;
-        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" }))));
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        return (react_2.default.createElement(react_1.Th, { w: 6, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[50], position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 9, borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray[300]) }, isSelecting ? (react_2.default.createElement(react_1.Spinner, { size: "sm", color: (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.primary) === null || _j === void 0 ? void 0 : _j[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,
@@ -71,16 +71,12 @@ var TableHeader = function (_a) {
         theme.colors,
     ]);
     var RenderConent = (0, react_2.useCallback)(function () {
-        var _a, _b, _c;
-        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 }));
+        var _a, _b, _c, _d, _e, _f, _g;
+        return (react_2.default.createElement(react_1.Th, { w: 6, minW: "35px", p: 0, backgroundColor: (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[50], borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 1 }));
     }, [noBorders, theme.colors]);
     var RenderView = (0, react_2.useCallback)(function () {
-        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 }));
+        var _a, _b, _c, _d, _e, _f, _g;
+        return (react_2.default.createElement(react_1.Th, { w: 2, p: 0, minW: "2.065rem", backgroundColor: (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[50], borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_g = theme.colors) === null || _g === void 0 ? void 0 : _g.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),
@@ -88,7 +84,7 @@ var TableHeader = function (_a) {
         columns.map(function (header, index) {
             if (header === null || header === void 0 ? void 0 : header.isHidden)
                 return null;
-            return (react_2.default.createElement(ColumnHeader, { header: header, index: index, key: header.label, columnWidths: columnWidths, handleSort: handleSort, isCheckbox: isCheckbox, headerBgColor: headerBgColor, headerTextColor: headerTextColor, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, noBorders: noBorders, columnsSort: columnsSort, headerRefs: headerRefs, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch, openFilterId: openFilterId, setOpenFilterId: setOpenFilterId }));
+            return (react_2.default.createElement(ColumnHeader, { header: header, index: index, key: header.label, columnWidths: columnWidths, handleSort: handleSort, isCheckbox: isCheckbox, headerBgColor: headerBgColor, freezedBgColor: freezedBgColor, noBorders: noBorders, columnsSort: columnsSort, headerRefs: headerRefs, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch, openFilterId: openFilterId, setOpenFilterId: setOpenFilterId }));
         }),
         isLink && react_2.default.createElement(RenderView, null)));
 };
@@ -104,7 +100,7 @@ var SortingIcon = (0, react_2.memo)(function (_a) {
 });
 var ColumnHeader = (0, react_2.memo)(function (_a) {
     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 header = _a.header, index = _a.index, columnWidths = _a.columnWidths, isCheckbox = _a.isCheckbox, 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 _v = (0, react_2.useState)(false), isHovered = _v[0], setIsHovered = _v[1];
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var isFrozen = header.isFreeze;

package/dist/Components/Table/hooks/useTable.d.ts

@@ -41,7 +41,8 @@ declare const useTable: ({ tableBorderColor, data, isPagination, selections, onS
     rowsPerPage: number;
     setCurrentPage: import("react").Dispatch<import("react").SetStateAction<number>>;
     columnsList: TableHeaderProps[];
-    handleColumnPreferences: (columns: any) => void;
+    handleColumnPreferences: (columns: any, extra?: Record<string, any>) => void;
     isSelecting: boolean;
+    selectAllRowsRef: import("react").MutableRefObject<DataObject[] | null>;
 };
 export default useTable;

package/dist/Components/Table/hooks/useTable.js

@@ -47,13 +47,13 @@ var useTable = function (_a) {
     var _f = (0, react_1.useState)([]), columnsSort = _f[0], setColumnsSort = _f[1];
     var _g = (0, react_1.useState)(0), currentPage = _g[0], setCurrentPage = _g[1];
     var _h = (0, react_1.useState)(noOfRowsPerPage !== null && noOfRowsPerPage !== void 0 ? noOfRowsPerPage : defaultPageSize), rowsPerPage = _h[0], setRowsPerPage = _h[1];
-    var prevRowsPerPageProp = (0, react_1.useRef)(noOfRowsPerPage);
-    if (noOfRowsPerPage !== prevRowsPerPageProp.current) {
-        prevRowsPerPageProp.current = noOfRowsPerPage;
-        if (noOfRowsPerPage !== undefined && noOfRowsPerPage !== rowsPerPage) {
+    // Keep the internal page size in sync with the `noOfRowsPerPage` prop when the
+    // consumer changes it (e.g. a page-size control outside the table).
+    (0, react_1.useEffect)(function () {
+        if (noOfRowsPerPage !== undefined) {
             setRowsPerPage(noOfRowsPerPage);
         }
-    }
+    }, [noOfRowsPerPage]);
     var tableData = data;
     var _j = (0, react_1.useState)(function () {
         return columns.map(function (col, i) {
@@ -162,14 +162,26 @@ var useTable = function (_a) {
     selectionRef.current = selection;
     var onSelectionRef = (0, react_1.useRef)(onSelection);
     onSelectionRef.current = onSelection;
+    // Rows that "select all" should toggle. Defaults to `tableData`, but in grouped
+    // "load more" mode the parent points this at the accumulated/rendered rows so
+    // select-all covers everything on screen (not just the latest page).
+    var selectAllRowsRef = (0, react_1.useRef)(null);
     var handleCheckbox = (0, react_1.useCallback)(function (id) {
-        var _a;
+        var _a, _b;
         var current = selectionRef.current;
         if (id === 0) {
+            var rows = (_a = selectAllRowsRef.current) !== null && _a !== void 0 ? _a : tableData;
+            var ids_1 = rows.map(function (item) { return item.id; });
+            var idSet_1 = new Set(ids_1);
+            var currentSet_1 = new Set(current);
+            var allSelected_1 = ids_1.length > 0 && ids_1.every(function (i) { return currentSet_1.has(i); });
             setIsSelecting(true);
             setTimeout(function () {
                 var _a;
-                var selectedItems = current.length === tableData.length ? [] : tableData.map(function (item) { return item.id; });
+                // Toggle the rendered rows while preserving any selection outside them.
+                var selectedItems = allSelected_1
+                    ? current.filter(function (i) { return !idSet_1.has(i); })
+                    : Array.from(new Set(__spreadArray(__spreadArray([], current, true), ids_1, true)));
                 setSelection(selectedItems);
                 (_a = onSelectionRef.current) === null || _a === void 0 ? void 0 : _a.call(onSelectionRef, selectedItems);
                 setIsSelecting(false);
@@ -184,13 +196,14 @@ var useTable = function (_a) {
                 selectedItems = __spreadArray(__spreadArray([], current, true), [id], false);
             }
             setSelection(selectedItems);
-            (_a = onSelectionRef.current) === null || _a === void 0 ? void 0 : _a.call(onSelectionRef, selectedItems);
+            (_b = onSelectionRef.current) === null || _b === void 0 ? void 0 : _b.call(onSelectionRef, selectedItems);
         }
     }, [tableData]);
-    var handleColumnPreferences = function (columns) {
+    var handleColumnPreferences = function (columns, extra) {
+        if (extra === void 0) { extra = {}; }
         setColumnsList(columns);
         savePreferences &&
-            savePreferences(__assign(__assign({}, tablePreferences), { columns: columns }));
+            savePreferences(__assign(__assign(__assign({}, tablePreferences), { columns: columns }), extra));
     };
     return {
         tableData: tableData,
@@ -214,6 +227,7 @@ var useTable = function (_a) {
         columnsList: columnsList,
         handleColumnPreferences: handleColumnPreferences,
         isSelecting: isSelecting,
+        selectAllRowsRef: selectAllRowsRef,
     };
 };
 exports.default = useTable;

package/dist/Components/Table/settings/ManageColumns.test.js

@@ -97,6 +97,7 @@ jest.mock("../../../Theme/useCustomTheme", function () { return ({
             },
             red: { 50: "#fee", 200: "#fcc", 600: "#c00" },
             border: { 200: "#e2e8f0" },
+            text: { 500: "#555", 700: "#333" },
             white: "#fff",
         },
         shadows: { sm: "0 1px 2px rgba(0,0,0,0.05)" },

package/dist/Components/Table/settings/TableSettings.d.ts

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

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

@@ -43,6 +43,15 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -62,20 +71,23 @@ var DENSITY_OPTIONS = [
 ];
 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 columns = _a.columns, onSave = _a.onSave, _p = _a.density, density = _p === void 0 ? "normal" : _p, onDensityChange = _a.onDensityChange, groupBy = _a.groupBy;
     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];
+    // Group selection is applied on Save (not live), per "click Apply to group".
+    var _t = (0, react_2.useState)(groupBy), selectedGroup = _t[0], setSelectedGroup = _t[1];
     var handleSave = (0, react_2.useCallback)(function () {
-        onSave(items);
+        onSave(items, selectedGroup);
         setSettingsOpen(false);
-    }, [onSave, items]);
+    }, [onSave, items, selectedGroup]);
     var handleOpen = (0, react_2.useCallback)(function () {
         setItems(columns);
+        setSelectedGroup(groupBy);
         setSettingsOpen(true);
-    }, [columns]);
+    }, [columns, groupBy]);
     var tabStyle = {
         fontSize: "13px",
         fontWeight: 500,
@@ -102,7 +114,8 @@ var TableSettings = function (_a) {
                         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.Tab, __assign({}, tabStyle), "Manage Columns"),
+                            react_2.default.createElement(react_1.Tab, __assign({}, tabStyle), "Group"))),
                     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" },
@@ -133,7 +146,18 @@ var TableSettings = function (_a) {
                                         "& .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(ManageColumns_1.default, { columns: columns, items: items, setItems: setItems, childInputMethodsRef: childInputMethodsRef }))),
+                            react_2.default.createElement(react_1.TabPanel, { px: 0, py: 1 },
+                                react_2.default.createElement(react_1.Text, { fontSize: "12px", color: theme.colors.gray[500], mb: 2 }, "Group rows by a column. Click Save to apply."),
+                                react_2.default.createElement(react_1.Flex, { direction: "column", gap: 2 }, __spreadArray([{ id: undefined, label: "None (no grouping)" }], columns
+                                    .filter(function (c) { return !!c.columnType && !c.isHidden; })
+                                    .map(function (c) { return ({ id: c.id, label: String(c.label) }); }), true).map(function (opt) {
+                                    var _a, _b;
+                                    var selected = selectedGroup === opt.id;
+                                    return (react_2.default.createElement(react_1.Flex, { as: "button", type: "button", key: String((_a = opt.id) !== null && _a !== void 0 ? _a : "__none__"), align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "0.5rem", border: "1px solid", borderColor: selected ? theme.colors.primary[500] : (_b = theme.colors.boxborder) === null || _b === void 0 ? void 0 : _b[300], bg: selected ? theme.colors.primary.opacity[8] : "transparent", transition: "all 0.15s", _hover: { borderColor: theme.colors.primary[400] }, onClick: function () { return setSelectedGroup(opt.id); } },
+                                        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.Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700], textAlign: "left" }, opt.label)));
+                                })))))),
                 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 }))))));

package/dist/Components/Timeline/Timeline.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { TimelineProps } from "./TimelineProps";
-declare const Timeline: ({ timelineEvents }: TimelineProps) => React.JSX.Element;
+declare const Timeline: ({ timelineEvents, onEventClick }: TimelineProps) => React.JSX.Element;
 export default Timeline;