pixelize-design-library 2.2.188 → 2.2.190

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

@@ -10,47 +10,88 @@ var __assign = (this && this.__assign) || function () {
     };
     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 = __importDefault(require("react"));
+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 = function (_a) {
+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)();
-    // Get active filters (columns that have a search value)
-    var activeFilters = 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];
-        var column = columns.find(function (col) { return col.id === columnId; });
-        return {
-            columnId: columnId,
-            label: (column === null || column === void 0 ? void 0 : column.label) || columnId,
-            value: value.trim(),
-        };
-    });
+    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]);
     if (activeFilters.length === 0) {
         return null;
     }
-    var handleRemoveFilter = function (columnId) {
+    var handleRemoveFilter = (0, react_1.useCallback)(function (columnId) {
         setColumnsSearch(function (prev) {
             var newSearch = __assign({}, prev);
             delete newSearch[columnId];
             return newSearch;
         });
-    };
-    var handleClearAll = function () {
+    }, [setColumnsSearch]);
+    var handleClearAll = (0, react_1.useCallback)(function () {
         setColumnsSearch({});
-    };
+    }, [setColumnsSearch]);
     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',
@@ -87,5 +128,5 @@ var ActiveFilters = function (_a) {
             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/Components/Pagination.d.ts

@@ -10,5 +10,5 @@ type PaginationProps = Pick<TableProps, "isVisiblity" | "columns" | "paginationS
     dataLength: number;
     isServerPagination: boolean;
 };
-declare const Pagination: ({ paginationText, handlePageSizeChange, rowsPerPage, currentPage, pages, setCurrentPage, dataLength, isServerPagination, paginationSelectOptions, }: PaginationProps) => React.JSX.Element;
+declare const Pagination: React.MemoExoticComponent<({ paginationText, handlePageSizeChange, rowsPerPage, currentPage, pages, setCurrentPage, dataLength, isServerPagination, paginationSelectOptions, }: PaginationProps) => React.JSX.Element>;
 export default Pagination;

package/dist/Components/Table/Components/Pagination.js

@@ -1,17 +1,49 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+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 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
 var table_1 = require("../../../Utils/table");
 var lucide_react_1 = require("lucide-react");
-var Pagination = function (_a) {
+var Pagination = react_1.default.memo(function (_a) {
     var paginationText = _a.paginationText, handlePageSizeChange = _a.handlePageSizeChange, rowsPerPage = _a.rowsPerPage, currentPage = _a.currentPage, pages = _a.pages, setCurrentPage = _a.setCurrentPage, dataLength = _a.dataLength, isServerPagination = _a.isServerPagination, paginationSelectOptions = _a.paginationSelectOptions;
-    var computedOptions = paginationSelectOptions && paginationSelectOptions.length
-        ? paginationSelectOptions
-        : (0, table_1.pageSizeCalculation)(dataLength);
+    var computedOptions = (0, react_1.useMemo)(function () {
+        return paginationSelectOptions && paginationSelectOptions.length
+            ? paginationSelectOptions
+            : (0, table_1.pageSizeCalculation)(dataLength);
+    }, [paginationSelectOptions, dataLength]);
     // const isLeftDisabled = currentPage === 0;
     // const isRightDisabled = currentPage >= pages - 1;
     var isLeftDisabled = dataLength === 0 || currentPage === 0;
@@ -32,5 +64,5 @@ var Pagination = function (_a) {
                 react_1.default.createElement(lucide_react_1.ChevronRight, null)),
             react_1.default.createElement(react_2.IconButton, { "aria-label": "last-page", color: isRightDisabled ? "gray" : "black", rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: function () { return setCurrentPage(pages - 1); } },
                 react_1.default.createElement(lucide_react_1.ChevronsRight, null))))));
-};
+});
 exports.default = Pagination;

package/dist/Components/Table/Components/TableFilters.js

@@ -35,7 +35,6 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
-var table_1 = require("../../../Utils/table");
 var lucide_react_1 = require("lucide-react");
 var TableFilters = (0, react_1.memo)(function (_a) {
     var _b, _c;
@@ -43,9 +42,16 @@ var TableFilters = (0, react_1.memo)(function (_a) {
     var theme = (0, react_2.useTheme)();
     var searchRef = (0, react_1.useRef)(null);
     var _d = (0, react_1.useState)(false), refreshDataOnOpen = _d[0], setRefreshDataOnOpen = _d[1];
-    var debounceRef = (0, table_1.debounce)(function (value) {
-        setColumnsSearch(value);
-    }, 700);
+    var setColumnsSearchRef = (0, react_1.useRef)(setColumnsSearch);
+    setColumnsSearchRef.current = setColumnsSearch;
+    var debounceTimerRef = (0, react_1.useRef)(null);
+    var debouncedSearch = (0, react_1.useCallback)(function (value) {
+        if (debounceTimerRef.current)
+            clearTimeout(debounceTimerRef.current);
+        debounceTimerRef.current = setTimeout(function () {
+            setColumnsSearchRef.current(value);
+        }, 700);
+    }, []);
     (0, react_1.useEffect)(function () {
         if (columnsSearch.length && searchRef.current) {
             searchRef.current.value = columnsSearch;
@@ -77,7 +83,7 @@ var TableFilters = (0, react_1.memo)(function (_a) {
                             react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Search, color: "gray.400", boxSize: 4 })),
                         react_1.default.createElement(react_2.Input, { autoFocus: true, placeholder: "Search ".concat(header.label, "..."), size: "xs", ref: searchRef, onChange: function (e) {
                                 e.stopPropagation();
-                                debounceRef(e.target.value);
+                                debouncedSearch(e.target.value);
                             }, onFocus: function (e) { return e.stopPropagation(); } })))))));
 });
 exports.default = TableFilters;

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

@@ -38,14 +38,15 @@ var mergeColumnWithPreference = function (pref, originalCol) {
     return next;
 };
 var useTable = function (_a) {
+    var _b, _c;
     var tableBorderColor = _a.tableBorderColor, data = _a.data, isPagination = _a.isPagination, selections = _a.selections, onSelection = _a.onSelection, tablePreferences = _a.tablePreferences, savePreferences = _a.savePreferences, noOfRowsPerPage = _a.noOfRowsPerPage, isServerPagination = _a.isServerPagination, totalRecords = _a.totalRecords, columns = _a.columns, onNoOfRowsPerPageChange = _a.onNoOfRowsPerPageChange, defaultVisibleColumns = _a.defaultVisibleColumns;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var headerRefs = (0, react_1.useRef)([]);
-    var _b = (0, react_1.useState)([]), columnWidths = _b[0], setColumnWidths = _b[1];
-    var _c = (0, react_1.useState)(selections !== null && selections !== void 0 ? selections : []), selection = _c[0], setSelection = _c[1];
-    var _d = (0, react_1.useState)([]), columnsSort = _d[0], setColumnsSort = _d[1];
-    var _e = (0, react_1.useState)(0), currentPage = _e[0], setCurrentPage = _e[1];
-    var _f = (0, react_1.useState)(noOfRowsPerPage !== null && noOfRowsPerPage !== void 0 ? noOfRowsPerPage : defaultPageSize), rowsPerPage = _f[0], setRowsPerPage = _f[1];
+    var _d = (0, react_1.useState)([]), columnWidths = _d[0], setColumnWidths = _d[1];
+    var _e = (0, react_1.useState)(selections !== null && selections !== void 0 ? selections : []), selection = _e[0], setSelection = _e[1];
+    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;
@@ -54,12 +55,12 @@ var useTable = function (_a) {
         }
     }
     var tableData = data;
-    var _g = (0, react_1.useState)(function () {
+    var _j = (0, react_1.useState)(function () {
         return columns.map(function (col, i) {
             var _a;
             return (__assign(__assign({}, col), { isHidden: defaultVisibleColumns ? i >= defaultVisibleColumns : ((_a = col.isHidden) !== null && _a !== void 0 ? _a : false) }));
         });
-    }), columnsList = _g[0], setColumnsList = _g[1];
+    }), columnsList = _j[0], setColumnsList = _j[1];
     (0, react_1.useEffect)(function () {
         var _a;
         var columnPreference = (_a = tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.columns) !== null && _a !== void 0 ? _a : [];
@@ -90,8 +91,18 @@ var useTable = function (_a) {
             overflowY: "auto",
         });
     }, [tableBorderColor, theme]);
-    var isContent = (0, react_1.useMemo)(function () { return tableData.some(function (o) { return o.content; }); }, [tableData]);
-    var isLink = (0, react_1.useMemo)(function () { return tableData.some(function (o) { return o.onLink || o.onDelete || o.onEdit; }); }, [tableData]);
+    var prevIsContent = (0, react_1.useRef)(false);
+    var prevIsLink = (0, react_1.useRef)(false);
+    var isContent = (0, react_1.useMemo)(function () {
+        var result = tableData.some(function (o) { return o.content; });
+        prevIsContent.current = result;
+        return result;
+    }, [tableData.length === 0 ? 0 : (_b = tableData[0]) === null || _b === void 0 ? void 0 : _b.id, tableData.length]); // eslint-disable-line react-hooks/exhaustive-deps
+    var isLink = (0, react_1.useMemo)(function () {
+        var result = tableData.some(function (o) { return o.onLink || o.onDelete || o.onEdit; });
+        prevIsLink.current = result;
+        return result;
+    }, [tableData.length === 0 ? 0 : (_c = tableData[0]) === null || _c === void 0 ? void 0 : _c.id, tableData.length]); // eslint-disable-line react-hooks/exhaustive-deps
     (0, react_1.useEffect)(function () {
         var widths = headerRefs.current.map(function (ref) { return (ref === null || ref === void 0 ? void 0 : ref.offsetWidth) || 0; });
         setColumnWidths(widths);
@@ -128,24 +139,25 @@ var useTable = function (_a) {
     var handleSort = (0, react_1.useCallback)(function (field, sort) {
         if (!sort)
             return;
-        var newSortState = __spreadArray([], columnsSort, true);
-        var existingIndex = newSortState.findIndex(function (sort) { return sort.column === field; });
-        if (existingIndex === -1) {
-            newSortState.push({
-                column: field,
-                direction: "asc", // Default to ascending when adding a column
-            });
-        }
-        else {
-            var existingSort = newSortState[existingIndex];
-            existingSort.direction = sort;
-        }
-        setColumnsSort(newSortState);
-    }, [columnsSort]);
+        setColumnsSort(function (prev) {
+            var newSortState = __spreadArray([], prev, true);
+            var existingIndex = newSortState.findIndex(function (s) { return s.column === field; });
+            if (existingIndex === -1) {
+                newSortState.push({
+                    column: field,
+                    direction: "asc",
+                });
+            }
+            else {
+                newSortState[existingIndex] = __assign(__assign({}, newSortState[existingIndex]), { direction: sort });
+            }
+            return newSortState;
+        });
+    }, []);
     (0, react_1.useEffect)(function () {
         setSelection(selections !== null && selections !== void 0 ? selections : []);
     }, [selections]);
-    var _h = (0, react_1.useState)(false), isSelecting = _h[0], setIsSelecting = _h[1];
+    var _k = (0, react_1.useState)(false), isSelecting = _k[0], setIsSelecting = _k[1];
     var selectionRef = (0, react_1.useRef)(selection);
     selectionRef.current = selection;
     var onSelectionRef = (0, react_1.useRef)(onSelection);