pixelize-design-library 2.3.1-beta.1 → 2.3.1-beta.10

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

@@ -63,13 +63,44 @@ 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 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;
     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]);
+    // 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 });
@@ -78,7 +109,7 @@ var TableRow = react_2.default.memo(function (_a) {
     var firstDataColIndex = columns.findIndex(function (c) { return !c.isHidden; });
     var accentSx = accentColor ? "inset 3px 0 0 ".concat(accentColor) : undefined;
     return (react_2.default.createElement(react_2.default.Fragment, null,
-        react_2.default.createElement(react_1.Tr, { opacity: isLoading ? 0.4 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "opacity 0.2s", sx: checkedSx },
+        react_2.default.createElement(react_1.Tr, { ref: mainRowRef, opacity: isLoading ? 0.4 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "opacity 0.2s", sx: checkedSx },
             isContent && (react_2.default.createElement(react_1.Td, { w: "6", p: 0, fontSize: 14, backgroundColor: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.background) === null || _d === void 0 ? void 0 : _d[50], color: freezedTextColor, position: "sticky", borderBottom: borderStyle, boxShadow: accentSx, boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns" }, !!(row === null || row === void 0 ? void 0 : row.content) && (react_2.default.createElement(react_1.IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.gray[600], icon: isExpanded ? (react_2.default.createElement(lucide_react_1.ChevronDown, { fontSize: 16 })) : (react_2.default.createElement(lucide_react_1.ChevronRight, { fontSize: 16 })), _hover: { transform: "scale(1.1)" }, size: "sm", onClick: function () { return toggleRowExpansion(rowIndex); }, variant: "ghost" })))),
             isCheckbox && (react_2.default.createElement(react_1.Td, { w: "6", fontSize: 14, fontWeight: 600, color: (_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.background) === null || _g === void 0 ? void 0 : _g[50], textTransform: "capitalize", backgroundColor: (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.background) === null || _j === void 0 ? void 0 : _j[50], position: "sticky", borderBottom: borderStyle, boxShadow: !isContent ? accentSx : undefined, boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns" },
                 react_2.default.createElement(Checkbox_1.default, { "aria-label": "Select all rows", onChange: function () { return handleCheckbox(row.id); }, isChecked: isChecked }))),
@@ -102,7 +133,7 @@ var TableRow = react_2.default.memo(function (_a) {
                             : 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,
+        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 +166,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 +219,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 +301,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 +315,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 +361,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 → components}/TableHeader.js

@@ -59,8 +59,8 @@ var TableHeader = function (_a) {
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var _b = (0, react_2.useState)(null), openFilterId = _b[0], setOpenFilterId = _b[1];
     var RenderCheckbox = (0, react_2.useCallback)(function () {
-        var _a, _b, _c, _d;
-        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;
+        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, borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[300]) }, isSelecting ? (react_2.default.createElement(react_1.Spinner, { size: "sm", color: (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.primary) === null || _e === void 0 ? void 0 : _e[500] })) : (react_2.default.createElement(Checkbox_1.default, { "aria-label": "Select all rows", variant: "outline", onChange: function () { return handleCheckbox(0); }, isChecked: isLoading ? false : checked === true, isIndeterminate: checked === "indeterminate" }))));
     }, [
         checked,
         freezedTextColor,
@@ -72,15 +72,11 @@ var TableHeader = function (_a) {
     ]);
     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 }));
+        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], borderBottom: 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 }));
     }, [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;
+        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], borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[300]), position: isActionFreeze ? "sticky" : "relative", className: "columns sticky-columns", right: "0px", zIndex: 1 }));
     }, [noBorders, theme.colors, isActionFreeze]);
     return (react_2.default.createElement(react_1.Tr, { pr: 0 },
         isContent && react_2.default.createElement(RenderConent, null),

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

@@ -41,7 +41,7 @@ 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;
 };
 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) {
@@ -187,10 +187,11 @@ var useTable = function (_a) {
             (_a = onSelectionRef.current) === null || _a === void 0 ? void 0 : _a.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,

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;