pixelize-design-library 2.2.179 → 2.2.182

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { TableProps } from "../TableProps";
-type PaginationProps = Pick<TableProps, "isVisiblity" | "columns"> & {
+type PaginationProps = Pick<TableProps, "isVisiblity" | "columns" | "paginationSelectOptions"> & {
     paginationText: string;
     handlePageSizeChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
     rowsPerPage: number;
@@ -9,7 +9,6 @@ type PaginationProps = Pick<TableProps, "isVisiblity" | "columns"> & {
     setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
     dataLength: number;
     isServerPagination: boolean;
-    pageSizeOptions?: (number | string)[];
 };
-declare const Pagination: ({ paginationText, handlePageSizeChange, rowsPerPage, currentPage, pages, setCurrentPage, dataLength, isServerPagination, pageSizeOptions, }: PaginationProps) => React.JSX.Element;
+declare const Pagination: ({ paginationText, handlePageSizeChange, rowsPerPage, currentPage, pages, setCurrentPage, dataLength, isServerPagination, paginationSelectOptions, }: PaginationProps) => React.JSX.Element;
 export default Pagination;

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

@@ -8,26 +8,24 @@ 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 paginationText = _a.paginationText, handlePageSizeChange = _a.handlePageSizeChange, rowsPerPage = _a.rowsPerPage, currentPage = _a.currentPage, pages = _a.pages, setCurrentPage = _a.setCurrentPage, dataLength = _a.dataLength, isServerPagination = _a.isServerPagination, pageSizeOptions = _a.pageSizeOptions;
-    var computedOptions = pageSizeOptions && pageSizeOptions.length
-        ? pageSizeOptions
+    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);
     // const isLeftDisabled = currentPage === 0;
     // const isRightDisabled = currentPage >= pages - 1;
     var isLeftDisabled = dataLength === 0 || currentPage === 0;
     var isRightDisabled = dataLength === 0 || currentPage >= pages - 1;
     return (react_1.default.createElement(react_2.Flex, { justify: "flex-end", align: "center", minW: 0, overflow: "hidden", flexWrap: "nowrap" },
-        !isServerPagination && (react_1.default.createElement(react_2.Select, { onChange: handlePageSizeChange, value: rowsPerPage, size: "xs", borderRadius: 3, width: 20, isDisabled: dataLength === 0 },
-            !pageSizeOptions && dataLength < 100 ? react_1.default.createElement("option", { value: 0 }) : null,
-            computedOptions.map(function (size, index) {
-                return (react_1.default.createElement("option", { key: index, value: size }, String(size)));
-            }))),
-        dataLength > 0 && (react_1.default.createElement(react_2.Flex, null,
+        (!isServerPagination || paginationSelectOptions) && (react_1.default.createElement(react_2.Select, { onChange: handlePageSizeChange, value: rowsPerPage, size: "xs", borderRadius: 3, width: 20, isDisabled: dataLength === 0 },
+            !paginationSelectOptions && dataLength < 100 ? react_1.default.createElement("option", { value: 0 }) : null,
+            computedOptions.map(function (size, index) { return (react_1.default.createElement("option", { key: index, value: size }, String(size))); }))),
+        dataLength > 0 && (react_1.default.createElement(react_2.Flex, { w: "100%" },
             react_1.default.createElement(react_2.IconButton, { "aria-label": "first-page", color: isLeftDisabled ? "gray" : "black", rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: function () { return setCurrentPage(0); } },
                 react_1.default.createElement(lucide_react_1.ChevronsLeft, null)),
             react_1.default.createElement(react_2.IconButton, { "aria-label": "previous-page", color: isLeftDisabled ? "gray" : "black", rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: function () { return currentPage > 0 && setCurrentPage(currentPage - 1); } },
                 react_1.default.createElement(lucide_react_1.ChevronLeft, null)),
-            react_1.default.createElement(react_2.Text, { mt: 3, fontSize: 12 }, paginationText),
+            react_1.default.createElement(react_2.Text, { mt: 3, fontSize: 12, whiteSpace: "nowrap" }, paginationText),
             react_1.default.createElement(react_2.IconButton, { "aria-label": "next-page", color: isRightDisabled ? "gray" : "black", rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: function () {
                     return currentPage < pages - 1 && setCurrentPage(currentPage + 1);
                 } },

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

@@ -94,6 +94,7 @@ var TableBody = function (_a) {
                     react_2.default.createElement("p", null, "No data found")))));
     }
     return (react_2.default.createElement(react_2.default.Fragment, null, data.map(function (row, index) {
+        var _a;
         var rowIndex = startRow + index;
         var isExpanded = expandedRows.has(rowIndex);
         var isChecked = selections.includes(row.id);
@@ -105,7 +106,7 @@ var TableBody = function (_a) {
                         },
                     }
                     : {} },
-                isContent && (react_2.default.createElement(RenderContent, { rowIndex: rowIndex, isExpanded: isExpanded, isContent: !!(row === null || row === void 0 ? void 0 : row.content) })),
+                isContent && (react_2.default.createElement(RenderContent, { rowIndex: rowIndex, isExpanded: isExpanded, isContent: !!((_a = row === null || row === void 0 ? void 0 : row.content) === null || _a === void 0 ? void 0 : _a.call(row)) })),
                 isCheckbox && react_2.default.createElement(RenderCheckbox, { row: row, isChecked: isChecked }),
                 columns.map(function (header, headerIndex) {
                     var _a, _b, _c, _d, _e, _f, _g;
@@ -121,7 +122,6 @@ var TableBody = function (_a) {
                         row: row,
                         freezedBgColor: freezedBgColor,
                         index: index,
-                        theme: theme,
                     }).leftOffset;
                     return (react_2.default.createElement(react_1.Td, { maxWidth: 500, minWidth: 120, height: 45, key: headerIndex + 1, onClick: function () {
                             return !header.node

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

@@ -40,7 +40,7 @@ declare const useTable: ({ tableBorderColor, data, isPagination, selections, onS
     rowsPerPage: number;
     setCurrentPage: import("react").Dispatch<import("react").SetStateAction<number>>;
     columnsList: TableHeaderProps[];
-    handleColumnPreferences: (cols: any) => void;
+    handleColumnPreferences: (columns: any) => void;
     handleGlobalSearch: (query: string) => void;
 };
 export default useTable;

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

@@ -46,18 +46,16 @@ var useTable = function (_a) {
     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 _g = (0, react_1.useState)(function () {
+    (0, react_1.useEffect)(function () {
+        if (noOfRowsPerPage !== undefined) {
+            setRowsPerPage(noOfRowsPerPage);
+        }
+    }, [noOfRowsPerPage]);
+    var tableData = (0, react_1.useMemo)(function () { return data; }, [data]);
+    var _g = (0, react_1.useState)(tableData), filteredData = _g[0], setFilteredData = _g[1];
+    var _h = (0, react_1.useState)(function () {
         return columns.map(function (col) { return (__assign({}, col)); });
-    }), columnsList = _g[0], setColumnsList = _g[1];
-    // Stable refs for callbacks that shouldn't appear in deps
-    var onSelectionRef = (0, react_1.useRef)(onSelection);
-    onSelectionRef.current = onSelection;
-    var dataRef = (0, react_1.useRef)(data);
-    dataRef.current = data;
-    var tablePreferencesRef = (0, react_1.useRef)(tablePreferences);
-    tablePreferencesRef.current = tablePreferences;
-    var savePreferencesRef = (0, react_1.useRef)(savePreferences);
-    savePreferencesRef.current = savePreferences;
+    }), columnsList = _h[0], setColumnsList = _h[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 : [];
@@ -74,6 +72,9 @@ var useTable = function (_a) {
             setColumnsList(columns.map(function (col) { return (__assign({}, col)); }));
         }
     }, [tablePreferences, columns]);
+    (0, react_1.useEffect)(function () {
+        setFilteredData(tableData);
+    }, [tableData]);
     var tableContainerStyles = (0, react_1.useMemo)(function () {
         var _a;
         return ({
@@ -85,99 +86,93 @@ var useTable = function (_a) {
             overflowY: "auto",
         });
     }, [tableBorderColor, theme]);
-    var isContent = (0, react_1.useMemo)(function () { return data.some(function (o) { return o.content; }); }, [data]);
-    var isLink = (0, react_1.useMemo)(function () { return data.some(function (o) { return o.onLink || o.onDelete || o.onEdit; }); }, [data]);
+    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]);
     (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);
     }, []);
     var pages = (0, react_1.useMemo)(function () {
         if (isServerPagination) {
-            return Math.ceil(totalRecords / (noOfRowsPerPage !== null && noOfRowsPerPage !== void 0 ? noOfRowsPerPage : 1));
+            return Math.ceil(totalRecords / (rowsPerPage || 1));
         }
-        return isPagination ? Math.ceil(data.length / rowsPerPage) : 0;
+        return isPagination ? Math.ceil(tableData.length / rowsPerPage) : 0;
     }, [
         isPagination,
         rowsPerPage,
-        data.length,
+        tableData.length,
         totalRecords,
         isServerPagination,
-        noOfRowsPerPage,
     ]);
     var startRow = (0, react_1.useMemo)(function () { return (!isPagination ? 0 : currentPage * rowsPerPage); }, [currentPage, isPagination, rowsPerPage]);
-    var endRow = (0, react_1.useMemo)(function () { return (!isPagination ? data.length : startRow + rowsPerPage); }, [isPagination, rowsPerPage, startRow, data.length]);
-    // Sort once (only re-runs when data or sort config changes, not on page change)
-    var sortedData = (0, react_1.useMemo)(function () {
-        if (isServerPagination)
-            return data;
-        return (0, table_1.SortMultiColumnData)(data, columnsSort);
-    }, [data, columnsSort, isServerPagination]);
-    // Paginate from the already-sorted data
-    var filteredData = (0, react_1.useMemo)(function () {
-        if (isServerPagination)
-            return sortedData;
-        return sortedData.slice(startRow, endRow);
-    }, [sortedData, startRow, endRow, isServerPagination]);
-    var handlePageSizeChange = (0, react_1.useCallback)(function (event) {
+    var endRow = (0, react_1.useMemo)(function () { return (!isPagination ? tableData.length : startRow + rowsPerPage); }, [isPagination, rowsPerPage, startRow, tableData.length]);
+    (0, react_1.useEffect)(function () {
+        if (isServerPagination) {
+            return setFilteredData(tableData);
+        }
+        var sortedData = (0, table_1.SortMultiColumnData)(tableData, columnsSort);
+        var data = sortedData.slice(startRow, endRow);
+        return setFilteredData(data);
+    }, [columnsSort, startRow, endRow, tableData, isServerPagination]);
+    var handlePageSizeChange = function (event) {
         var value = Number(event.target.value);
         setRowsPerPage(value !== 0 ? value : defaultPageSize);
         if (onNoOfRowsPerPageChange) {
             onNoOfRowsPerPageChange(value !== 0 ? value : defaultPageSize);
         }
         setCurrentPage(0);
-    }, [onNoOfRowsPerPageChange]);
-    // Stable: uses functional updater so columnsSort is not a dependency
+    };
     var handleSort = (0, react_1.useCallback)(function (field, sort) {
         if (!sort)
             return;
-        setColumnsSort(function (prev) {
-            var next = __spreadArray([], prev, true);
-            var existingIndex = next.findIndex(function (s) { return s.column === field; });
-            if (existingIndex === -1) {
-                next.push({ column: field, direction: "asc" });
-            }
-            else {
-                next[existingIndex] = __assign(__assign({}, next[existingIndex]), { direction: sort });
-            }
-            return next;
-        });
-    }, []);
+        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]);
     (0, react_1.useEffect)(function () {
         setSelection(selections !== null && selections !== void 0 ? selections : []);
     }, [selections]);
-    // Stable: uses functional updater + refs so selection/data are not dependencies
     var handleCheckbox = (0, react_1.useCallback)(function (id) {
-        setSelection(function (prev) {
-            var _a;
-            var currentData = dataRef.current;
-            var selectedItems;
-            if (id === 0) {
-                selectedItems =
-                    prev.length === currentData.length
-                        ? []
-                        : currentData.map(function (item) { return item.id; });
-            }
-            else if (prev.includes(id)) {
-                selectedItems = prev.filter(function (item) { return item !== id; });
+        var selectedItems = [];
+        if (id === 0) {
+            if (selection.length === tableData.length) {
+                selectedItems = [];
             }
             else {
-                selectedItems = __spreadArray(__spreadArray([], prev, true), [id], false);
+                selectedItems = tableData.map(function (item) { return item.id; });
             }
-            (_a = onSelectionRef.current) === null || _a === void 0 ? void 0 : _a.call(onSelectionRef, selectedItems);
-            return selectedItems;
-        });
-    }, []);
-    var handleColumnPreferences = (0, react_1.useCallback)(function (cols) {
-        var _a;
-        setColumnsList(cols);
-        (_a = savePreferencesRef.current) === null || _a === void 0 ? void 0 : _a.call(savePreferencesRef, __assign(__assign({}, tablePreferencesRef.current), { columns: cols }));
-    }, []);
-    var handleGlobalSearch = (0, react_1.useCallback)(function (query) {
-        // Not used inside Table.tsx render path (Table uses its own _filteredData memo),
-        // but kept for API compatibility.
-    }, []);
+        }
+        else if (selection.includes(id)) {
+            selectedItems = selection.filter(function (item) { return item !== id; });
+        }
+        else {
+            selectedItems = __spreadArray(__spreadArray([], selection, true), [id], false);
+        }
+        setSelection(selectedItems);
+        onSelection && onSelection(selectedItems);
+    }, [onSelection, selection, tableData]);
+    var handleColumnPreferences = function (columns) {
+        setColumnsList(columns);
+        savePreferences &&
+            savePreferences(__assign(__assign({}, tablePreferences), { columns: columns }));
+    };
+    var handleGlobalSearch = function (query) {
+        if (!query)
+            setFilteredData(tableData);
+        setFilteredData((0, table_1.globalSearchFilter)(tableData, query));
+    };
     return {
-        tableData: data,
+        tableData: tableData,
         tableContainerStyles: tableContainerStyles,
         isContent: isContent,
         isLink: isLink,

package/dist/Components/Table/Table.js

@@ -56,17 +56,16 @@ var TableSearch_1 = __importDefault(require("./Components/TableSearch"));
 var ActiveFilters_1 = __importDefault(require("./Components/ActiveFilters"));
 var lucide_react_1 = require("lucide-react");
 var MotionBox = (0, framer_motion_1.motion)(react_2.Box);
-var DEFAULT_PREFERENCES = {
-    url: "",
-    token: "",
-    key: "",
-    name: "",
-    page: "",
-    orgId: "",
-};
 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 ? DEFAULT_PREFERENCES : _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
+    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 ? {
+        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
     // onColumnFilter
     ;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
@@ -120,10 +119,30 @@ function Table(_a) {
     }, [columnsSearch, filteredData]);
     var onPaginationRef = (0, react_1.useRef)(onPagination);
     onPaginationRef.current = onPagination;
+    var prevPageRef = (0, react_1.useRef)(currentPage);
     (0, react_1.useEffect)(function () {
-        var _a;
-        (_a = onPaginationRef.current) === null || _a === void 0 ? void 0 : _a.call(onPaginationRef, currentPage + 1, noOfRowsPerPage);
-    }, [currentPage, noOfRowsPerPage]);
+        if (onPaginationRef.current) {
+            var prevPage = prevPageRef.current;
+            var direction = void 0;
+            if (currentPage === 0) {
+                direction = "first";
+            }
+            else if (currentPage === pages - 1) {
+                direction = "last";
+            }
+            else if (currentPage > prevPage) {
+                direction = "next";
+            }
+            else {
+                direction = "prev";
+            }
+            var record = direction === "next" || direction === "last"
+                ? (tableData.length > 0 ? tableData[tableData.length - 1] : undefined)
+                : (tableData.length > 0 ? tableData[0] : undefined);
+            onPaginationRef.current(currentPage + 1, rowsPerPage, record, direction);
+            prevPageRef.current = currentPage;
+        }
+    }, [currentPage, rowsPerPage, pages]);
     var tablePaginationText = "".concat(startRow + 1, " - ").concat(endRow > tableData.length ? tableData.length : endRow, " of ").concat(isServerPagination ? totalRecords : tableData.length);
     var controlsHeight = 45;
     var estimatedRowHeight = 45;
@@ -205,13 +224,13 @@ function Table(_a) {
                     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 1 280px", minW: 0, overflow: "hidden" },
-                            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, pageSizeOptions: paginationSelectOptions, isVisiblity: true }))),
+                            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" },
                             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.PopoverContent, { maxW: "18rem", p: 2, overflow: "hidden" },
+                            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, pageSizeOptions: paginationSelectOptions, isVisiblity: true }))))))),
+                                    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 }))))))),
                 react_1.default.createElement(react_2.TableContainer, { ref: tableContainerRef, position: "relative", h: isTableLoading ? tableMaxH : undefined, maxH: !isTableLoading ? tableMaxH : undefined, pb: isTableLoading ? 0 : compactScrollbarPadding, overflowY: isCompactRows ? "hidden" : "auto", overflowX: "auto", sx: {
                         '&::-webkit-scrollbar': {
                             width: '6px',

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

@@ -23,7 +23,7 @@ export type TableProps = {
     paginationMode?: "client" | "server";
     noOfRowsPerPage?: number;
     totalRecords?: number;
-    onPagination?: (page: number, noOfRecords: number) => void;
+    onPagination?: (page: number, noOfRecords: number, record: DataObject | undefined, direction: "next" | "prev" | "first" | "last") => void;
     onNoOfRowsPerPageChange?: (noOfRows: number) => void;
     paginationSelectOptions?: (number | string)[];
     tableMaxHeight?: number;

package/dist/Hooks/usePreferences.js

@@ -28,32 +28,17 @@ var useGetPreferences = function (_a) {
         if (!baseUrl) {
             return;
         }
-        var controller = new AbortController();
         setLoading(true);
         var url = constructUrl({ baseUrl: baseUrl, key: key, page: page, name: name, orgId: orgId });
         fetch(url, {
             headers: {
                 Authorization: authToken,
             },
-            signal: controller.signal,
         })
             .then(function (response) { return response.json(); })
-            .then(function (data) {
-            if (!controller.signal.aborted) {
-                setPreferences(data);
-            }
-        })
-            .catch(function (error) {
-            if (!controller.signal.aborted) {
-                console.error(error);
-            }
-        })
-            .finally(function () {
-            if (!controller.signal.aborted) {
-                setLoading(false);
-            }
-        });
-        return function () { return controller.abort(); };
+            .then(function (data) { return setPreferences(data); })
+            .catch(function (error) { return console.error(error); })
+            .finally(function () { return setLoading(false); });
         /* eslint-disable */
     }, [baseUrl]);
     return { preferences: preferences, loading: loading };

package/dist/Utils/table.d.ts

@@ -23,9 +23,8 @@ type TableCellCalculationProps = {
     row: DataObject;
     freezedBgColor?: string;
     index: number;
-    theme: Record<string, any>;
 };
-export declare const TableCellCalculation: ({ isFrozen, columnWidths, headerIndex, isCheckbox, header, row, freezedBgColor, index, theme, }: TableCellCalculationProps) => {
+export declare const TableCellCalculation: ({ isFrozen, columnWidths, headerIndex, isCheckbox, header, row, freezedBgColor, index, }: TableCellCalculationProps) => {
     leftOffset: number;
     cellBgColor: any;
     rowBgColor: any;

package/dist/Utils/table.js

@@ -49,6 +49,7 @@ exports.debounce = debounce;
 exports.useDebounce = useDebounce;
 exports.globalSearchFilter = globalSearchFilter;
 var react_1 = __importStar(require("react"));
+var useCustomTheme_1 = require("../Theme/useCustomTheme");
 function SortMultiColumnData(data, sortConfig) {
     if (!sortConfig.length)
         return data;
@@ -209,7 +210,8 @@ var pageSizeCalculation = function (records) {
 exports.pageSizeCalculation = pageSizeCalculation;
 var TableCellCalculation = function (_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    var isFrozen = _a.isFrozen, columnWidths = _a.columnWidths, headerIndex = _a.headerIndex, isCheckbox = _a.isCheckbox, header = _a.header, row = _a.row, freezedBgColor = _a.freezedBgColor, index = _a.index, theme = _a.theme;
+    var isFrozen = _a.isFrozen, columnWidths = _a.columnWidths, headerIndex = _a.headerIndex, isCheckbox = _a.isCheckbox, header = _a.header, row = _a.row, freezedBgColor = _a.freezedBgColor, index = _a.index;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
     var leftOffset = isFrozen
         ? (0, exports.calculateLeftOffset)(columnWidths, headerIndex) + (isCheckbox ? 50 : 0)
         : 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.2.179",
+  "version": "2.2.182",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",