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

package/dist/Components/Table/Table.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -41,46 +52,46 @@ var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
 var react_3 = require("@chakra-ui/react");
 var framer_motion_1 = require("framer-motion");
-var LeftFilterPane_1 = __importDefault(require("./LeftFilterPane"));
-var Pagination_1 = __importDefault(require("./Components/Pagination"));
-var TableHeader_1 = __importDefault(require("./Components/TableHeader"));
-var TableBody_1 = __importDefault(require("./Components/TableBody"));
+var LeftFilterPane_1 = __importDefault(require("./filters/LeftFilterPane"));
+var Pagination_1 = __importDefault(require("./components/Pagination"));
+var TableHeader_1 = __importDefault(require("./components/TableHeader"));
+var TableBody_1 = __importDefault(require("./components/TableBody"));
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var useTable_1 = __importDefault(require("./Components/useTable"));
+var useTable_1 = __importDefault(require("./hooks/useTable"));
 var table_1 = require("../../Utils/table");
 var usePreferences_1 = require("../../Hooks/usePreferences");
-var TableSettings_1 = __importDefault(require("./TableSettings/TableSettings"));
-var HeaderActions_1 = __importDefault(require("./Components/HeaderActions"));
+var TableSettings_1 = __importDefault(require("./settings/TableSettings"));
+var HeaderActions_1 = __importDefault(require("./components/HeaderActions"));
 var Divider_1 = __importDefault(require("../Divider/Divider"));
-var TableSearch_1 = __importDefault(require("./Components/TableSearch"));
-var ActiveFilters_1 = __importDefault(require("./Components/ActiveFilters"));
+var TableSearch_1 = __importDefault(require("./components/TableSearch"));
+var ActiveFilters_1 = __importDefault(require("./filters/ActiveFilters"));
 var lucide_react_1 = require("lucide-react");
 var MotionBox = (0, framer_motion_1.motion)(react_2.Box);
 function Table(_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
-    var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _0 = _a.isCheckbox, isCheckbox = _0 === void 0 ? false : _0, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _1 = _a.noBorders, noBorders = _1 === void 0 ? false : _1, _2 = _a.isPagination, isPagination = _2 === void 0 ? true : _2, onRowClick = _a.onRowClick, selections = _a.selections, _3 = _a.isActionFreeze, isActionFreeze = _3 === void 0 ? true : _3, _4 = _a.preferences, preferences = _4 === void 0 ? {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
+    var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _9 = _a.isCheckbox, isCheckbox = _9 === void 0 ? false : _9, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _10 = _a.noBorders, noBorders = _10 === void 0 ? false : _10, _11 = _a.isPagination, isPagination = _11 === void 0 ? true : _11, onRowClick = _a.onRowClick, selections = _a.selections, _12 = _a.isActionFreeze, isActionFreeze = _12 === void 0 ? true : _12, _13 = _a.preferences, preferences = _13 === void 0 ? {
         url: "",
         token: "",
         key: "",
         name: "",
         page: "",
         orgId: "",
-    } : _4, _5 = _a.paginationMode, paginationMode = _5 === void 0 ? "client" : _5, _6 = _a.noOfRowsPerPage, noOfRowsPerPage = _6 === void 0 ? 50 : _6, _7 = _a.totalRecords, totalRecords = _7 === void 0 ? 0 : _7, onPagination = _a.onPagination, _8 = _a.isTableSettings, isTableSettings = _8 === void 0 ? false : _8, headerActions = _a.headerActions, onGlobalSearch = _a.onGlobalSearch, onNoOfRowsPerPageChange = _a.onNoOfRowsPerPageChange, paginationSelectOptions = _a.paginationSelectOptions, tableMaxHeight = _a.tableMaxHeight, minVisibleRows = _a.minVisibleRows, maxVisibleRows = _a.maxVisibleRows, autoFitViewport = _a.autoFitViewport, tableSettings = _a.tableSettings, filterSidebar = _a.filterSidebar, loadingSkeletonRows = _a.loadingSkeletonRows, defaultVisibleColumns = _a.defaultVisibleColumns;
+    } : _13, _14 = _a.paginationMode, paginationMode = _14 === void 0 ? "client" : _14, _15 = _a.infiniteScroll, infiniteScroll = _15 === void 0 ? false : _15, hasMore = _a.hasMore, _16 = _a.isLoadingMore, isLoadingMore = _16 === void 0 ? false : _16, _17 = _a.noOfRowsPerPage, noOfRowsPerPage = _17 === void 0 ? 50 : _17, _18 = _a.totalRecords, totalRecords = _18 === void 0 ? 0 : _18, onPagination = _a.onPagination, _19 = _a.isTableSettings, isTableSettings = _19 === void 0 ? false : _19, headerActions = _a.headerActions, onGlobalSearch = _a.onGlobalSearch, onNoOfRowsPerPageChange = _a.onNoOfRowsPerPageChange, paginationSelectOptions = _a.paginationSelectOptions, tableMaxHeight = _a.tableMaxHeight, minVisibleRows = _a.minVisibleRows, maxVisibleRows = _a.maxVisibleRows, autoFitViewport = _a.autoFitViewport, tableSettings = _a.tableSettings, filterSidebar = _a.filterSidebar, loadingSkeletonRows = _a.loadingSkeletonRows, defaultVisibleColumns = _a.defaultVisibleColumns, _20 = _a.density, density = _20 === void 0 ? "normal" : _20, stripe = _a.stripe, groupBy = _a.groupBy, groupColors = _a.groupColors, onAddItem = _a.onAddItem, emptyState = _a.emptyState;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _9 = (0, react_1.useState)({}), columnsSearch = _9[0], setColumnsSearch = _9[1];
+    var _21 = (0, react_1.useState)({}), columnsSearch = _21[0], setColumnsSearch = _21[1];
     var tableContainerRef = (0, react_1.useRef)(null);
-    var _10 = (0, react_2.useDisclosure)(), isFilterModalOpen = _10.isOpen, onFilterModalOpen = _10.onOpen, onFilterModalClose = _10.onClose;
+    var _22 = (0, react_2.useDisclosure)(), isFilterModalOpen = _22.isOpen, onFilterModalOpen = _22.onOpen, onFilterModalClose = _22.onClose;
     var filterMode = (_b = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterMode) !== null && _b !== void 0 ? _b : "sidebar";
-    var _11 = (0, react_1.useState)(500), viewportAvailableH = _11[0], setViewportAvailableH = _11[1];
+    var _23 = (0, react_1.useState)(500), viewportAvailableH = _23[0], setViewportAvailableH = _23[1];
     var isServerPagination = paginationMode === "server";
-    var _12 = (0, usePreferences_1.useGetPreferences)({
+    var _24 = (0, usePreferences_1.useGetPreferences)({
         baseUrl: preferences.url,
         page: preferences.page,
         key: preferences.key,
         name: preferences.name,
         authToken: preferences.token,
         orgId: preferences.orgId,
-    }), tablePreferencesData = _12.preferences, loading = _12.loading;
+    }), tablePreferencesData = _24.preferences, loading = _24.loading;
     var savePreferences = (0, usePreferences_1.useSavePreferences)({
         baseUrl: preferences.url,
         page: preferences.page,
@@ -98,7 +109,7 @@ function Table(_a) {
         }
         return {};
     }, [tablePreferencesData]);
-    var _13 = (0, useTable_1.default)({
+    var _25 = (0, useTable_1.default)({
         tableBorderColor: tableBorderColor,
         data: data,
         isPagination: isPagination,
@@ -112,10 +123,37 @@ function Table(_a) {
         isServerPagination: isServerPagination,
         onNoOfRowsPerPageChange: onNoOfRowsPerPageChange,
         defaultVisibleColumns: defaultVisibleColumns,
-    }), tableData = _13.tableData, isContent = _13.isContent, isLink = _13.isLink, headerRefs = _13.headerRefs, columnWidths = _13.columnWidths, handleSort = _13.handleSort, handleCheckbox = _13.handleCheckbox, filteredData = _13.filteredData, startRow = _13.startRow, endRow = _13.endRow, selection = _13.selection, columnsSort = _13.columnsSort, currentPage = _13.currentPage, pages = _13.pages, rowsPerPage = _13.rowsPerPage, handlePageSizeChange = _13.handlePageSizeChange, setCurrentPage = _13.setCurrentPage, columnsList = _13.columnsList, handleColumnPreferences = _13.handleColumnPreferences, isSelecting = _13.isSelecting;
+    }), tableData = _25.tableData, isContent = _25.isContent, isLink = _25.isLink, headerRefs = _25.headerRefs, columnWidths = _25.columnWidths, handleSort = _25.handleSort, handleCheckbox = _25.handleCheckbox, filteredData = _25.filteredData, startRow = _25.startRow, endRow = _25.endRow, selection = _25.selection, columnsSort = _25.columnsSort, currentPage = _25.currentPage, pages = _25.pages, rowsPerPage = _25.rowsPerPage, handlePageSizeChange = _25.handlePageSizeChange, setCurrentPage = _25.setCurrentPage, columnsList = _25.columnsList, handleColumnPreferences = _25.handleColumnPreferences, isSelecting = _25.isSelecting;
+    // Density is managed here so the Table Settings tab can change + persist it
+    // (seeded from the prop, then from saved preferences when they load).
+    var _26 = (0, react_1.useState)(density), densityState = _26[0], setDensityState = _26[1];
+    (0, react_1.useEffect)(function () {
+        if (tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.density)
+            setDensityState(tablePreferences.density);
+    }, [tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.density]);
+    var handleDensityChange = function (d) {
+        setDensityState(d);
+        savePreferences === null || savePreferences === void 0 ? void 0 : savePreferences(__assign(__assign({}, tablePreferences), { columns: columnsList, density: d }));
+    };
     var _filteredData = (0, react_1.useMemo)(function () {
         return (0, table_1.searchAndSortData)(filteredData, columnsSearch);
     }, [columnsSearch, filteredData]);
+    // --- Monday-style grouping (client-side). When active, pagination is hidden
+    // and the body renders colored, collapsible groups over the full dataset. ---
+    var isGrouped = !!groupBy && !isServerPagination;
+    // Infinite scroll (server mode, not grouped): load more on scroll-near-bottom.
+    var canInfinite = infiniteScroll && !isGrouped;
+    var groupPalette = (0, react_1.useMemo)(function () { return (0, table_1.buildTablePalette)(theme); }, [theme]);
+    var groupedSource = (0, react_1.useMemo)(function () {
+        if (!isGrouped)
+            return [];
+        return (0, table_1.searchAndSortData)((0, table_1.SortMultiColumnData)(tableData, columnsSort), columnsSearch);
+    }, [isGrouped, tableData, columnsSort, columnsSearch]);
+    var renderGroups = (0, react_1.useMemo)(function () {
+        if (!isGrouped)
+            return undefined;
+        return (0, table_1.groupRows)(groupedSource, groupBy).map(function (g) { return (__assign(__assign({}, g), { color: (0, table_1.pickTableColor)(g.value, groupPalette, groupColors === null || groupColors === void 0 ? void 0 : groupColors[g.value]) })); });
+    }, [isGrouped, groupedSource, groupBy, groupPalette, groupColors]);
     var onPaginationRef = (0, react_1.useRef)(onPagination);
     onPaginationRef.current = onPagination;
     var prevPageRef = (0, react_1.useRef)(currentPage);
@@ -147,7 +185,10 @@ function Table(_a) {
         : "".concat(startRow + 1, " - ").concat(endRow > tableData.length ? tableData.length : endRow, " of ").concat(tableData.length); }, [startRow, rowsPerPage, totalRecords, endRow, tableData.length]);
     var controlsHeight = 45;
     var estimatedRowHeight = 45;
-    var actualRows = _filteredData.length;
+    // In grouped mode the rendered rows come from the full grouped source, not the
+    // paged slice — base the height on that so a 1-result search isn't clipped.
+    var actualRows = isGrouped ? groupedSource.length : _filteredData.length;
+    var isEmptyState = !isTableLoading && actualRows === 0;
     var loadingRowsCount = typeof loadingSkeletonRows === "number" ? Math.max(1, loadingSkeletonRows) : 4;
     var minRows = typeof minVisibleRows === "number"
         ? Math.max(0, minVisibleRows)
@@ -171,13 +212,46 @@ function Table(_a) {
         return function () { return window.removeEventListener("resize", compute); };
     }, [autoFitViewport]);
     var heightRowsCount = isTableLoading ? loadingRowsCount : visibleRowsCount;
-    var isCompactRows = heightRowsCount <= 1 && !(filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar);
-    var rowsHeight = (heightRowsCount * estimatedRowHeight) + estimatedRowHeight;
+    var isCompactRows = heightRowsCount <= 1 && !(filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) && !isGrouped && !isEmptyState;
+    var rowsHeight = heightRowsCount * estimatedRowHeight + estimatedRowHeight;
+    if (isGrouped)
+        rowsHeight += ((_c = renderGroups === null || renderGroups === void 0 ? void 0 : renderGroups.length) !== null && _c !== void 0 ? _c : 1) * 42; // group header rows
+    if (isEmptyState)
+        rowsHeight = Math.max(rowsHeight, 200); // room for the empty state
     var dynamicMaxH = Math.min(500, rowsHeight);
     var fittedMaxH = autoFitViewport ? Math.min(dynamicMaxH, viewportAvailableH) : dynamicMaxH;
     var tableMaxH = typeof tableMaxHeight === "number" ? tableMaxHeight : (isCompactRows ? rowsHeight + 8 : fittedMaxH);
     var isCompactHeader = (0, react_2.useBreakpointValue)({ base: true, md: true, lg: false });
     var compactScrollbarPadding = isCompactRows ? 4 : 0;
+    // Infinite scroll: reuse onPagination("next") when scrolled near the bottom.
+    var infiniteRef = (0, react_1.useRef)({ isLoadingMore: isLoadingMore, isTableLoading: isTableLoading, hasMore: hasMore, rowsPerPage: rowsPerPage, dataLen: tableData.length, lastRecord: tableData[tableData.length - 1], totalRecords: totalRecords, isServerPagination: isServerPagination });
+    infiniteRef.current = { isLoadingMore: isLoadingMore, isTableLoading: isTableLoading, hasMore: hasMore, rowsPerPage: rowsPerPage, dataLen: tableData.length, lastRecord: tableData[tableData.length - 1], totalRecords: totalRecords, isServerPagination: isServerPagination };
+    (0, react_1.useEffect)(function () {
+        if (!canInfinite)
+            return;
+        var el = tableContainerRef.current;
+        if (!el)
+            return;
+        var onScroll = function () {
+            var _a;
+            var s = infiniteRef.current;
+            if (s.isLoadingMore || s.isTableLoading)
+                return;
+            var more = typeof s.hasMore === "boolean"
+                ? s.hasMore
+                : s.isServerPagination
+                    ? s.dataLen < s.totalRecords
+                    : false;
+            if (!more)
+                return;
+            if (el.scrollHeight - el.scrollTop - el.clientHeight < 160) {
+                var nextPage = Math.floor(s.dataLen / (s.rowsPerPage || 1)) + 1;
+                (_a = onPaginationRef.current) === null || _a === void 0 ? void 0 : _a.call(onPaginationRef, nextPage, s.rowsPerPage, s.lastRecord, "next");
+            }
+        };
+        el.addEventListener("scroll", onScroll, { passive: true });
+        return function () { return el.removeEventListener("scroll", onScroll); };
+    }, [canInfinite]);
     var sidebarActiveCount = (0, react_1.useMemo)(function () {
         if (!(filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected))
             return 0;
@@ -188,22 +262,22 @@ function Table(_a) {
             return acc + (Array.isArray(items) ? items.length : 0);
         }, 0);
     }, [filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected]);
-    return (react_1.default.createElement(react_2.Box, { bg: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.background) === null || _d === void 0 ? void 0 : _d[50], border: "0.063rem solid ".concat((_e = theme.colors.border) === null || _e === void 0 ? void 0 : _e[500]), borderRadius: 3 },
+    return (react_1.default.createElement(react_2.Box, { bg: (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50], border: "0.063rem solid ".concat((_f = theme.colors.border) === null || _f === void 0 ? void 0 : _f[500]), borderRadius: 3 },
         filterSidebar && filterMode === "modal" && (react_1.default.createElement(react_2.Modal, { isOpen: isFilterModalOpen, onClose: onFilterModalClose, size: "4xl", scrollBehavior: "inside" },
             react_1.default.createElement(react_2.ModalOverlay, null),
             react_1.default.createElement(react_2.ModalContent, { my: 0, top: "10%", position: "fixed", left: "auto", right: "auto" },
                 react_1.default.createElement(react_2.ModalCloseButton, { size: "sm" }),
                 react_1.default.createElement(react_2.ModalBody, { p: 0 },
-                    react_1.default.createElement(LeftFilterPane_1.default, { theme: theme, sections: (_f = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _f !== void 0 ? _f : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: function (sel) { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply) === null || _a === void 0 ? void 0 : _a.call(filterSidebar, sel); onFilterModalClose(); }, onClear: function () { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler) === null || _a === void 0 ? void 0 : _a.call(filterSidebar); }, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }))))),
+                    react_1.default.createElement(LeftFilterPane_1.default, { theme: theme, sections: (_g = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _g !== void 0 ? _g : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: function (sel) { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply) === null || _a === void 0 ? void 0 : _a.call(filterSidebar, sel); onFilterModalClose(); }, onClear: function () { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler) === null || _a === void 0 ? void 0 : _a.call(filterSidebar); }, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }))))),
         react_1.default.createElement(react_2.Flex, { align: "start" },
-            filterMode === "sidebar" && (react_1.default.createElement(MotionBox, { initial: { width: 0 }, animate: { width: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? 180 : 0 }, transition: { type: "tween", duration: 0.5 }, overflow: "hidden", flexShrink: 0, borderRight: "1px solid", borderColor: (_g = theme.colors.border) === null || _g === void 0 ? void 0 : _g[500], style: { height: controlsHeight + tableMaxH }, minHeight: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? "32rem" : "auto" },
-                react_1.default.createElement(LeftFilterPane_1.default, { height: controlsHeight + tableMaxH, theme: theme, sections: (_h = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _h !== void 0 ? _h : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply, onClear: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }))),
+            filterMode === "sidebar" && (react_1.default.createElement(MotionBox, { initial: { width: 0 }, animate: { width: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? 180 : 0 }, transition: { type: "tween", duration: 0.5 }, overflow: "hidden", flexShrink: 0, borderRight: "1px solid", borderColor: (_h = theme.colors.border) === null || _h === void 0 ? void 0 : _h[500], style: { height: controlsHeight + tableMaxH }, minHeight: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? "32rem" : "auto" },
+                react_1.default.createElement(LeftFilterPane_1.default, { height: controlsHeight + tableMaxH, theme: theme, sections: (_j = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _j !== void 0 ? _j : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply, onClear: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }))),
             react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
-                react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 0, height: controlsHeight, gap: 1, flexWrap: "nowrap", bg: (_k = (_j = theme.colors) === null || _j === void 0 ? void 0 : _j.background) === null || _k === void 0 ? void 0 : _k[50], borderBottom: "0.063rem solid ".concat((_l = theme.colors.border) === null || _l === void 0 ? void 0 : _l[500]) },
+                react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 0, height: controlsHeight, gap: 3, flexWrap: "nowrap", bg: (_l = (_k = theme.colors) === null || _k === void 0 ? void 0 : _k.background) === null || _l === void 0 ? void 0 : _l[50], borderBottom: "0.063rem solid ".concat((_m = theme.colors.border) === null || _m === void 0 ? void 0 : _m[500]) },
                     filterSidebar && (react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement(react_2.Box, { position: "relative", display: "inline-block" },
-                            react_1.default.createElement(react_3.Icon, { as: lucide_react_1.Filter, transform: "scaleX(-1)", cursor: "pointer", boxSize: 4, color: sidebarActiveCount > 0 ? (_o = (_m = theme.colors) === null || _m === void 0 ? void 0 : _m.primary) === null || _o === void 0 ? void 0 : _o[500] : (_q = (_p = theme.colors) === null || _p === void 0 ? void 0 : _p.text) === null || _q === void 0 ? void 0 : _q[500], onClick: filterMode === "modal" ? onFilterModalOpen : filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterSidebarToggle }),
-                            sidebarActiveCount > 0 && (react_1.default.createElement(react_2.Box, { position: "absolute", top: "-6px", right: "-10px", bg: (_s = (_r = theme.colors) === null || _r === void 0 ? void 0 : _r.primary) === null || _s === void 0 ? void 0 : _s[500], color: "white", borderRadius: "full", p: "1px", cursor: "pointer", onClick: function (e) {
+                            react_1.default.createElement(react_3.Icon, { as: lucide_react_1.Filter, transform: "scaleX(-1)", cursor: "pointer", boxSize: 4, color: sidebarActiveCount > 0 ? (_p = (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.primary) === null || _p === void 0 ? void 0 : _p[500] : (_r = (_q = theme.colors) === null || _q === void 0 ? void 0 : _q.text) === null || _r === void 0 ? void 0 : _r[500], onClick: filterMode === "modal" ? onFilterModalOpen : filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterSidebarToggle }),
+                            sidebarActiveCount > 0 && (react_1.default.createElement(react_2.Box, { position: "absolute", top: "-6px", right: "-10px", bg: (_t = (_s = theme.colors) === null || _s === void 0 ? void 0 : _s.primary) === null || _t === void 0 ? void 0 : _t[500], color: "white", borderRadius: "full", p: "1px", cursor: "pointer", onClick: function (e) {
                                     var _a;
                                     e.stopPropagation();
                                     if (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler) {
@@ -212,23 +286,23 @@ function Table(_a) {
                                     else {
                                         (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply) === null || _a === void 0 ? void 0 : _a.call(filterSidebar, {});
                                     }
-                                }, _hover: { bg: (_u = (_t = theme.colors) === null || _t === void 0 ? void 0 : _t.red) === null || _u === void 0 ? void 0 : _u[600] }, display: "flex", alignItems: "center", justifyContent: "center", zIndex: 2 },
+                                }, _hover: { bg: (_v = (_u = theme.colors) === null || _u === void 0 ? void 0 : _u.red) === null || _v === void 0 ? void 0 : _v[600] }, display: "flex", alignItems: "center", justifyContent: "center", zIndex: 2 },
                                 react_1.default.createElement(lucide_react_1.X, { size: 10, strokeWidth: 3 })))),
                         react_1.default.createElement(Divider_1.default, null))),
                     react_1.default.createElement(TableSearch_1.default, { onSearch: onGlobalSearch }),
                     isTableSettings && (react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement(Divider_1.default, null),
-                        react_1.default.createElement(TableSettings_1.default, { columns: columnsList, onSave: function (cols) { return handleColumnPreferences(cols); }, tableSettings: tableSettings }))),
+                        react_1.default.createElement(TableSettings_1.default, { columns: columnsList, onSave: function (cols) { return handleColumnPreferences(cols); }, tableSettings: tableSettings, density: densityState, onDensityChange: handleDensityChange }))),
                     headerActions && (react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement(Divider_1.default, null),
                         react_1.default.createElement(HeaderActions_1.default, { actions: headerActions, selections: selection }))),
                     react_1.default.createElement(ActiveFilters_1.default, { columns: columnsList, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch }),
                     react_1.default.createElement(react_2.Box, { ml: "auto", display: "flex", alignItems: "center", gap: 2 },
-                        (isPagination || isServerPagination) && !isCompactHeader && (react_1.default.createElement(react_2.Box, { flex: "0 0 auto" },
+                        (isPagination || isServerPagination) && !isGrouped && !canInfinite && !isCompactHeader && (react_1.default.createElement(react_2.Box, { flex: "0 0 auto" },
                             react_1.default.createElement(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions, isVisiblity: true }))),
-                        (isPagination || isServerPagination) && isCompactHeader && tableData.length > 0 && (react_1.default.createElement(react_2.Popover, { placement: "bottom-end" },
+                        (isPagination || isServerPagination) && !isGrouped && !canInfinite && isCompactHeader && tableData.length > 0 && (react_1.default.createElement(react_2.Popover, { placement: "bottom-end" },
                             react_1.default.createElement(react_2.PopoverTrigger, null,
-                                react_1.default.createElement(react_2.IconButton, { "aria-label": "More", size: "sm", variant: "ghost", icon: react_1.default.createElement(lucide_react_1.EllipsisVertical, { size: 18, color: (_w = (_v = theme.colors) === null || _v === void 0 ? void 0 : _v.text) === null || _w === void 0 ? void 0 : _w[500] }) })),
+                                react_1.default.createElement(react_2.IconButton, { "aria-label": "More", size: "sm", variant: "ghost", icon: react_1.default.createElement(lucide_react_1.EllipsisVertical, { size: 18, color: (_x = (_w = theme.colors) === null || _w === void 0 ? void 0 : _w.text) === null || _x === void 0 ? void 0 : _x[500] }) })),
                             react_1.default.createElement(react_2.PopoverContent, { maxW: "22rem", p: 2, overflow: "hidden" },
                                 react_1.default.createElement(react_2.PopoverBody, { p: 0 },
                                     react_1.default.createElement(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions, isVisiblity: true }))))))),
@@ -259,7 +333,11 @@ function Table(_a) {
                     } },
                     react_1.default.createElement(react_3.Table, { variant: "simple", size: "sm", minW: "100%", className: "table_wrapper", sx: {
                             width: "100%",
-                            borderCollapse: "collapse",
+                            // `separate` (not `collapse`) so sticky header cells paint an opaque
+                            // background over their borders — collapsed borders bleed scrolling
+                            // content through the seams.
+                            borderCollapse: "separate",
+                            borderSpacing: 0,
                             "th .resize-handle": {
                                 position: "absolute",
                                 top: 0,
@@ -271,12 +349,15 @@ function Table(_a) {
                                 zIndex: 999,
                             },
                         } },
-                        react_1.default.createElement(react_3.Thead, { position: "sticky", top: 0, zIndex: 4 },
-                            react_1.default.createElement(TableHeader_1.default, { columns: columnsList, isCheckbox: isCheckbox, headerBgColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : theme.colors.backgroundColor.muted, headerTextColor: headerTextColor !== null && headerTextColor !== void 0 ? headerTextColor : (_x = theme.colors) === null || _x === void 0 ? void 0 : _x.gray[600], freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_y = theme.colors) === null || _y === void 0 ? void 0 : _y.gray[600], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: tableData.length !== 0 && selection.length === tableData.length
+                        react_1.default.createElement(react_3.Thead, { position: "sticky", top: 0, zIndex: 4, bg: (_0 = (_z = (_y = theme.colors.table) === null || _y === void 0 ? void 0 : _y.hover) === null || _z === void 0 ? void 0 : _z[200]) !== null && _0 !== void 0 ? _0 : (_1 = theme.colors.secondary) === null || _1 === void 0 ? void 0 : _1[50] },
+                            react_1.default.createElement(TableHeader_1.default, { columns: columnsList, isCheckbox: isCheckbox, headerBgColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : theme.colors.backgroundColor.muted, headerTextColor: headerTextColor !== null && headerTextColor !== void 0 ? headerTextColor : (_2 = theme.colors) === null || _2 === void 0 ? void 0 : _2.gray[600], freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_3 = theme.colors) === null || _3 === void 0 ? void 0 : _3.gray[600], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: tableData.length !== 0 && selection.length === tableData.length
                                     ? true
                                     : selection.length === 0
                                         ? false
                                         : "indeterminate", isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch, isSelecting: isSelecting })),
                         react_1.default.createElement(react_3.Tbody, null,
-                            react_1.default.createElement(TableBody_1.default, { data: _filteredData, columns: columnsList, startRow: startRow, endRow: endRow, scrollContainerRef: tableContainerRef, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_z = theme.colors) === null || _z === void 0 ? void 0 : _z.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze }))))))));
+                            react_1.default.createElement(TableBody_1.default, { data: isGrouped ? groupedSource : _filteredData, groups: renderGroups, onAddItem: onAddItem, columns: columnsList, startRow: isGrouped ? 0 : startRow, endRow: endRow, scrollContainerRef: tableContainerRef, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_4 = theme.colors) === null || _4 === void 0 ? void 0 : _4.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, density: densityState, stripe: stripe, emptyState: emptyState }))),
+                    canInfinite && isLoadingMore && (react_1.default.createElement(react_2.Flex, { justify: "center", align: "center", py: 3, gap: 2 },
+                        react_1.default.createElement(react_2.Spinner, { size: "sm", color: (_6 = (_5 = theme.colors) === null || _5 === void 0 ? void 0 : _5.primary) === null || _6 === void 0 ? void 0 : _6[500] }),
+                        react_1.default.createElement(react_2.Box, { fontSize: "0.75rem", color: (_8 = (_7 = theme.colors) === null || _7 === void 0 ? void 0 : _7.text) === null || _8 === void 0 ? void 0 : _8[500] }, "Loading more\u2026"))))))));
 }

package/dist/Components/Table/TableProps.d.ts

@@ -1,8 +1,20 @@
-import { Dispatch, MutableRefObject, SetStateAction } from "react";
+import { Dispatch, MutableRefObject, ReactNode, SetStateAction } from "react";
 import { FilterSidebarProps } from "../FilterSidebar/FilterSidebar";
+export type TableDensity = "compact" | "normal" | "comfortable";
+export type TableEmptyState = {
+    icon?: ReactNode;
+    title?: string;
+    description?: string;
+};
 export type TableProps = {
     data: DataObject[];
     columns: TableHeaderProps[];
+    groupBy?: string | number;
+    groupColors?: Record<string | number, string>;
+    onAddItem?: (groupValue: string | number) => void;
+    density?: TableDensity;
+    stripe?: boolean;
+    emptyState?: TableEmptyState | ReactNode;
     handleExportChange?: (value: string) => void | undefined;
     exportOptions?: ExportOption[];
     exportLabel?: string;
@@ -21,6 +33,9 @@ export type TableProps = {
     onRowClick?: (row: DataObject, header: Record<string | number, string | number>) => void;
     isActionFreeze?: boolean;
     paginationMode?: "client" | "server";
+    infiniteScroll?: boolean;
+    hasMore?: boolean;
+    isLoadingMore?: boolean;
     noOfRowsPerPage?: number;
     totalRecords?: number;
     onPagination?: (page: number, noOfRecords: number, record: DataObject | undefined, direction: "next" | "prev" | "first" | "last") => void;
@@ -88,6 +103,8 @@ export type TableHeaderProps = {
     isSearch?: boolean;
     isFreeze?: boolean;
     isHidden?: boolean;
+    type?: "status";
+    statusColors?: Record<string, string>;
     node?: (data: DataObject) => JSX.Element | string | number | undefined;
 };
 export type ExportOption = {
@@ -116,7 +133,7 @@ export type TableHeaderPageProps = Pick<TableProps, "columns" | "isCheckbox" | "
     columnsSearch: Record<string, string>;
     isSelecting?: boolean;
 };
-export type TableBodyPageProps = Pick<TableProps, "columns" | "isCheckbox" | "data" | "freezedBgColor" | "freezedTextColor" | "noBorders" | "isLoading" | "loadingSkeletonRows" | "onRowClick" | "isActionFreeze"> & {
+export type TableBodyPageProps = Pick<TableProps, "columns" | "isCheckbox" | "data" | "freezedBgColor" | "freezedTextColor" | "noBorders" | "isLoading" | "loadingSkeletonRows" | "onRowClick" | "isActionFreeze" | "density" | "stripe" | "emptyState"> & {
     startRow: number;
     endRow: number;
     columnWidths: number[];
@@ -125,6 +142,21 @@ export type TableBodyPageProps = Pick<TableProps, "columns" | "isCheckbox" | "da
     isContent: boolean;
     isLink: boolean;
     scrollContainerRef?: MutableRefObject<HTMLDivElement | null>;
+    /** Optional per-row id → accent color (Monday group stripe). */
+    accentColors?: Record<string | number, string>;
+    /** When provided, the body renders as a grouped (Monday) board instead of a flat list. */
+    groups?: TableRenderGroup[];
+    onAddItem?: (groupValue: string | number) => void;
+};
+export type TableRenderGroup = {
+    value: string | number;
+    label: string;
+    color: {
+        solid: string;
+        soft: string;
+        text: string;
+    };
+    rows: DataObject[];
 };
 export type TableFiltersProps = {
     header: DataObject;

package/dist/Components/Table/filters/ActiveFilters.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { TableHeaderProps } from "../TableProps";
+interface ActiveFiltersProps {
+    columns: TableHeaderProps[];
+    columnsSearch: Record<string, string>;
+    setColumnsSearch: React.Dispatch<React.SetStateAction<Record<string, string>>>;
+}
+declare const ActiveFilters: React.FC<ActiveFiltersProps>;
+export default ActiveFilters;

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

@@ -0,0 +1,132 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+var Divider_1 = __importDefault(require("../../Divider/Divider"));
+var ActiveFilters = react_1.default.memo(function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j;
+    var columns = _a.columns, columnsSearch = _a.columnsSearch, setColumnsSearch = _a.setColumnsSearch;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var columnLabelMap = (0, react_1.useMemo)(function () {
+        var map = new Map();
+        for (var _i = 0, columns_1 = columns; _i < columns_1.length; _i++) {
+            var col = columns_1[_i];
+            map.set(col.id, col.label);
+        }
+        return map;
+    }, [columns]);
+    var activeFilters = (0, react_1.useMemo)(function () {
+        return Object.entries(columnsSearch)
+            .filter(function (_a) {
+            var _ = _a[0], value = _a[1];
+            return value && value.trim() !== "";
+        })
+            .map(function (_a) {
+            var columnId = _a[0], value = _a[1];
+            return ({
+                columnId: columnId,
+                label: columnLabelMap.get(columnId) || columnId,
+                value: value.trim(),
+            });
+        });
+    }, [columnsSearch, columnLabelMap]);
+    var handleRemoveFilter = (0, react_1.useCallback)(function (columnId) {
+        setColumnsSearch(function (prev) {
+            var newSearch = __assign({}, prev);
+            delete newSearch[columnId];
+            return newSearch;
+        });
+    }, [setColumnsSearch]);
+    var handleClearAll = (0, react_1.useCallback)(function () {
+        setColumnsSearch({});
+    }, [setColumnsSearch]);
+    if (activeFilters.length === 0) {
+        return null;
+    }
+    return (react_1.default.createElement(react_2.Box, { px: 2, py: 1, bg: ((_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.background) === null || _c === void 0 ? void 0 : _c[100]) || ((_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray) === null || _e === void 0 ? void 0 : _e[50]), overflowX: "auto", sx: {
+            '&::-webkit-scrollbar': {
+                height: '6px',
+            },
+            '&::-webkit-scrollbar-track': {
+                background: theme.colors.gray[100],
+                borderRadius: '3px',
+            },
+            '&::-webkit-scrollbar-thumb': {
+                background: theme.colors.gray[400],
+                borderRadius: '3px',
+            },
+            '&::-webkit-scrollbar-thumb:hover': {
+                background: theme.colors.gray[500],
+            },
+            scrollbarWidth: 'thin',
+            scrollbarColor: "".concat(theme.colors.gray[400], " ").concat(theme.colors.gray[100]),
+        } },
+        react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 2, flexWrap: "nowrap", minW: "max-content" },
+            activeFilters.length > 0 && react_1.default.createElement(Divider_1.default, null),
+            activeFilters.map(function (filter) {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+                return (react_1.default.createElement(react_2.Flex, { key: filter.columnId, alignItems: "center", gap: 1, px: 2, py: 1, bg: ((_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.blue) === null || _b === void 0 ? void 0 : _b[50]) || ((_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.primary) === null || _d === void 0 ? void 0 : _d[50]), borderRadius: "md", border: "0.063rem solid ".concat(((_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.blue) === null || _f === void 0 ? void 0 : _f[200]) || ((_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.primary) === null || _h === void 0 ? void 0 : _h[200])), flexShrink: 0 },
+                    react_1.default.createElement(react_2.Text, { fontSize: "sm", color: (_k = (_j = theme.colors) === null || _j === void 0 ? void 0 : _j.gray) === null || _k === void 0 ? void 0 : _k[700], whiteSpace: "nowrap" },
+                        react_1.default.createElement(react_2.Text, { as: "span", fontWeight: 600 },
+                            filter.label,
+                            ":"),
+                        " ",
+                        filter.value),
+                    react_1.default.createElement(react_2.IconButton, { "aria-label": "Remove filter for ".concat(filter.label), icon: react_1.default.createElement(lucide_react_1.X, { size: 14 }), size: "xs", variant: "ghost", onClick: function () { return handleRemoveFilter(filter.columnId); }, _hover: {
+                            bg: ((_m = (_l = theme.colors) === null || _l === void 0 ? void 0 : _l.blue) === null || _m === void 0 ? void 0 : _m[100]) || ((_p = (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.primary) === null || _p === void 0 ? void 0 : _p[100]),
+                        }, minW: "auto", h: "auto", p: 0.5, flexShrink: 0 })));
+            }),
+            activeFilters.length > 1 && (react_1.default.createElement(react_2.Text, { as: "p", className: "clear-all-text", "aria-label": "Clear All", fontSize: "sm", color: ((_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.blue) === null || _g === void 0 ? void 0 : _g[600]) || ((_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.primary) === null || _j === void 0 ? void 0 : _j[600]), cursor: "pointer", fontWeight: 500, onClick: handleClearAll, _hover: {
+                    textDecoration: "underline",
+                }, flexShrink: 0, whiteSpace: "nowrap" }, "Clear All")))));
+});
+exports.default = ActiveFilters;

package/dist/Components/Table/filters/CompactSelect.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+export type Options = {
+    id: string | number;
+    label: string;
+};
+type Props = {
+    options: Options[];
+    value?: Options;
+    placeholder?: string;
+    height?: string | number;
+    onSelect?: (option: Options) => void;
+    size?: "xs" | "sm";
+};
+declare const CompactSelect: React.FC<Props>;
+export default CompactSelect;

package/dist/Components/Table/filters/CompactSelect.js

@@ -0,0 +1,69 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var CompactSelect = function (_a) {
+    var options = _a.options, value = _a.value, _b = _a.placeholder, placeholder = _b === void 0 ? "Select" : _b, _c = _a.height, height = _c === void 0 ? "22px" : _c, onSelect = _a.onSelect, _d = _a.size, size = _d === void 0 ? "xs" : _d;
+    var _e = (0, react_1.useState)(false), isOpen = _e[0], setIsOpen = _e[1];
+    var _f = (0, react_1.useState)(""), query = _f[0], setQuery = _f[1];
+    var filtered = (0, react_1.useMemo)(function () {
+        var q = query.trim().toLowerCase();
+        if (!q)
+            return options;
+        return options.filter(function (o) { return (o.label || "").toLowerCase().includes(q); });
+    }, [query, options]);
+    return (react_1.default.createElement(react_2.Popover, { isOpen: isOpen, onClose: function () { return setIsOpen(false); }, placement: "bottom-start" },
+        react_1.default.createElement(react_2.PopoverTrigger, null,
+            react_1.default.createElement(react_2.Box, { as: "button", type: "button", w: "100%", h: typeof height === "number" ? "".concat(height, "px") : height, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, px: 2, border: "0.063rem solid", borderColor: "gray.300", bg: "white", borderRadius: "0.25rem", onClick: function () { return setIsOpen(function (prev) { return !prev; }); } },
+                react_1.default.createElement(react_2.Text, { fontSize: size === "xs" ? "0.75rem" : "0.875rem", color: "gray.800", noOfLines: 1, textAlign: "left" }, (value === null || value === void 0 ? void 0 : value.label) || placeholder),
+                isOpen ? react_1.default.createElement(lucide_react_1.ChevronUp, { size: 12 }) : react_1.default.createElement(lucide_react_1.ChevronDown, { size: 12 }))),
+        react_1.default.createElement(react_2.Portal, null,
+            react_1.default.createElement(react_2.PopoverContent, { w: "100%", maxW: "14rem", p: 0, zIndex: 1600 },
+                react_1.default.createElement(react_2.PopoverBody, { p: 2 },
+                    react_1.default.createElement(react_2.VStack, { spacing: 2, align: "stretch" },
+                        react_1.default.createElement(react_2.Input, { size: size, placeholder: "Search", value: query, onChange: function (e) { return setQuery(e.target.value); }, sx: { fontSize: "0.75rem", height: "22px" } }),
+                        react_1.default.createElement(react_2.Box, { maxH: "12rem", overflowY: "auto", borderTop: "1px solid", borderColor: "gray.100" },
+                            filtered.map(function (opt) { return (react_1.default.createElement(react_2.Box, { key: opt.id, px: 2, py: 1, cursor: "pointer", _hover: { bg: "gray.50" }, bg: (value === null || value === void 0 ? void 0 : value.id) === opt.id ? "gray.100" : "transparent", onClick: function () {
+                                    onSelect === null || onSelect === void 0 ? void 0 : onSelect(opt);
+                                    setIsOpen(false);
+                                    setQuery("");
+                                } },
+                                react_1.default.createElement(react_2.Text, { fontSize: "0.75rem" }, opt.label))); }),
+                            filtered.length === 0 && (react_1.default.createElement(react_2.Box, { px: 2, py: 2 },
+                                react_1.default.createElement(react_2.Text, { fontSize: "0.75rem", color: "gray.500" }, "No results"))))))))));
+};
+exports.default = CompactSelect;