pixelize-design-library 2.2.179 → 2.2.183

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,
+    return (react_1.default.createElement(react_2.Flex, { justify: "flex-end", align: "center", flexWrap: "nowrap" },
+        (!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

@@ -45,10 +45,10 @@ var TableActions_1 = __importDefault(require("./TableActions"));
 var lucide_react_1 = require("lucide-react");
 var Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
 var TableBody = function (_a) {
-    var _b, _c, _d;
+    var _b, _c, _d, _e, _f;
     var data = _a.data, isCheckbox = _a.isCheckbox, columns = _a.columns, startRow = _a.startRow, columnWidths = _a.columnWidths, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, selections = _a.selections, isLoading = _a.isLoading, onRowClick = _a.onRowClick, isContent = _a.isContent, isLink = _a.isLink, isActionFreeze = _a.isActionFreeze, loadingSkeletonRows = _a.loadingSkeletonRows;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _e = (0, react_2.useState)(new Set()), expandedRows = _e[0], setExpandedRows = _e[1];
+    var _g = (0, react_2.useState)(new Set()), expandedRows = _g[0], setExpandedRows = _g[1];
     var toggleRowExpansion = function (rowIndex) {
         setExpandedRows(function (prev) {
             var newSet = new Set(prev);
@@ -84,68 +84,73 @@ var TableBody = function (_a) {
         (isCheckbox ? 1 : 0) +
         (isContent ? 1 : 0) +
         (isLink ? 1 : 0);
-    if (isLoading) {
+    if (isLoading && data.length === 0) {
         return (react_2.default.createElement(TableLoading_1.TableBodyLoading, { noOfColumns: totalVisibleColumns, borderColor: theme.colors.gray[300], rowsCount: typeof loadingSkeletonRows === "number" ? loadingSkeletonRows : 4 }));
     }
-    if (data.length === 0) {
+    if (!isLoading && data.length === 0) {
         return (react_2.default.createElement(react_1.Tr, { backgroundColor: (_b = theme.colors.background) === null || _b === void 0 ? void 0 : _b[50] },
             react_2.default.createElement(react_1.Td, { colSpan: totalVisibleColumns, textAlign: "center", py: 4 },
                 react_2.default.createElement(react_1.Box, { textAlign: "center", fontSize: 14, color: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.text) === null || _d === void 0 ? void 0 : _d[500] },
                     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 rowIndex = startRow + index;
-        var isExpanded = expandedRows.has(rowIndex);
-        var isChecked = selections.includes(row.id);
-        return (react_2.default.createElement(react_2.default.Fragment, { key: rowIndex },
-            react_2.default.createElement(react_1.Tr, { key: index + 1, sx: isChecked
-                    ? {
-                        "& td": {
-                            backgroundColor: theme.colors.disabled[100],
-                        },
-                    }
-                    : {} },
-                isContent && (react_2.default.createElement(RenderContent, { rowIndex: rowIndex, isExpanded: isExpanded, isContent: !!(row === null || row === void 0 ? void 0 : row.content) })),
-                isCheckbox && react_2.default.createElement(RenderCheckbox, { row: row, isChecked: isChecked }),
-                columns.map(function (header, headerIndex) {
-                    var _a, _b, _c, _d, _e, _f, _g;
-                    if (header.isHidden)
-                        return null;
-                    var isFrozen = header.isFreeze;
-                    var leftOffset = (0, table_1.TableCellCalculation)({
-                        isFrozen: isFrozen,
-                        columnWidths: columnWidths,
-                        headerIndex: headerIndex,
-                        isCheckbox: isCheckbox,
-                        header: header,
-                        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
-                                ? handleRowClick(row, {
-                                    label: header.label,
-                                    id: header.id,
-                                })
-                                : null;
-                        }, fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, zIndex: isFrozen ? 1 : 0, backgroundColor: (_a = theme.colors.background) === null || _a === void 0 ? void 0 : _a[50], textOverflow: "ellipsis", borderBottom: noBorders
-                            ? "none"
-                            : "0.063rem solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[isFrozen || isChecked ? 300 : 200]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns"), boxSizing: "border-box", color: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.text) === null || _d === void 0 ? void 0 : _d[500], _hover: ((_e = row.cellStyle) === null || _e === void 0 ? void 0 : _e[header.id]) || row.rowStyle
-                            ? {}
-                            : {
-                                backgroundColor: (_g = (_f = theme.colors.secondary) === null || _f === void 0 ? void 0 : _f.opacity) === null || _g === void 0 ? void 0 : _g[4],
-                            } },
-                        react_2.default.createElement(react_1.Box, { display: "block", overflow: "hidden", whiteSpace: "normal", overflowWrap: "break-word" }, (0, table_1.normalizeTableCellValue)(header.node ? header.node(row) : row[header.id]))));
-                }),
-                isLink && react_2.default.createElement(RenderView, { row: row })),
-            row.content && isExpanded && (react_2.default.createElement(react_1.Tr, null,
-                react_2.default.createElement(react_1.Td, { colSpan: columns.length +
-                        (isCheckbox ? 1 : 0) +
-                        (isContent ? 1 : 0) +
-                        (isLink ? 1 : 0), p: 2 },
-                    react_2.default.createElement(react_1.Box, { p: 2, bg: theme.colors.white, borderRadius: "md" }, row === null || row === void 0 ? void 0 : row.content(row)))))));
-    })));
+    return (react_2.default.createElement(react_2.default.Fragment, null,
+        isLoading && data.length > 0 && (react_2.default.createElement(react_1.Tr, null,
+            react_2.default.createElement(react_1.Td, { colSpan: totalVisibleColumns, p: 0, border: "none", position: "relative", height: 0 },
+                react_2.default.createElement(react_1.Box, { position: "absolute", top: 4, left: "50%", transform: "translateX(-50%)", zIndex: 10 },
+                    react_2.default.createElement(react_1.Spinner, { size: "sm", color: ((_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.primary) === null || _f === void 0 ? void 0 : _f[500]) || "blue.500" }))))),
+        data.map(function (row, index) {
+            var rowIndex = startRow + index;
+            var isExpanded = expandedRows.has(rowIndex);
+            var isChecked = selections.includes(row.id);
+            return (react_2.default.createElement(react_2.default.Fragment, { key: rowIndex },
+                react_2.default.createElement(react_1.Tr, { key: index + 1, opacity: isLoading ? 0.4 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "opacity 0.2s", sx: isChecked
+                        ? {
+                            "& td": {
+                                backgroundColor: theme.colors.disabled[100],
+                            },
+                        }
+                        : {} },
+                    isContent && (react_2.default.createElement(RenderContent, { rowIndex: rowIndex, isExpanded: isExpanded, isContent: !!(row === null || row === void 0 ? void 0 : row.content) })),
+                    isCheckbox && react_2.default.createElement(RenderCheckbox, { row: row, isChecked: isChecked }),
+                    columns.map(function (header, headerIndex) {
+                        var _a, _b, _c, _d, _e, _f, _g;
+                        if (header.isHidden)
+                            return null;
+                        var isFrozen = header.isFreeze;
+                        var leftOffset = (0, table_1.TableCellCalculation)({
+                            isFrozen: isFrozen,
+                            columnWidths: columnWidths,
+                            headerIndex: headerIndex,
+                            isCheckbox: isCheckbox,
+                            header: header,
+                            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
+                                    ? handleRowClick(row, {
+                                        label: header.label,
+                                        id: header.id,
+                                    })
+                                    : null;
+                            }, fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, zIndex: isFrozen ? 1 : 0, backgroundColor: (_a = theme.colors.background) === null || _a === void 0 ? void 0 : _a[50], textOverflow: "ellipsis", borderBottom: noBorders
+                                ? "none"
+                                : "0.063rem solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[isFrozen || isChecked ? 300 : 200]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns"), boxSizing: "border-box", color: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.text) === null || _d === void 0 ? void 0 : _d[500], _hover: ((_e = row.cellStyle) === null || _e === void 0 ? void 0 : _e[header.id]) || row.rowStyle
+                                ? {}
+                                : {
+                                    backgroundColor: (_g = (_f = theme.colors.secondary) === null || _f === void 0 ? void 0 : _f.opacity) === null || _g === void 0 ? void 0 : _g[4],
+                                } },
+                            react_2.default.createElement(react_1.Box, { display: "block", overflow: "hidden", whiteSpace: "normal", overflowWrap: "break-word" }, (0, table_1.normalizeTableCellValue)(header.node ? header.node(row) : row[header.id]))));
+                    }),
+                    isLink && react_2.default.createElement(RenderView, { row: row })),
+                row.content && isExpanded && (react_2.default.createElement(react_1.Tr, null,
+                    react_2.default.createElement(react_1.Td, { colSpan: columns.length +
+                            (isCheckbox ? 1 : 0) +
+                            (isContent ? 1 : 0) +
+                            (isLink ? 1 : 0), p: 2 },
+                        react_2.default.createElement(react_1.Box, { p: 2, bg: theme.colors.white, borderRadius: "md" }, row === null || row === void 0 ? void 0 : row.content(row)))))));
+        })));
 };
 exports.default = TableBody;

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

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

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

@@ -23,7 +23,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("react");
 var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 var table_1 = require("../../../Utils/table");
-var defaultPageSize = 50;
+var defaultPageSize = 20;
 var mergeColumnWithPreference = function (pref, originalCol) {
     if (!pref || typeof pref !== "object") {
         return __assign({}, originalCol);
@@ -46,18 +46,17 @@ 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 prevRowsPerPageProp = (0, react_1.useRef)(noOfRowsPerPage);
+    if (noOfRowsPerPage !== prevRowsPerPageProp.current) {
+        prevRowsPerPageProp.current = noOfRowsPerPage;
+        if (noOfRowsPerPage !== undefined && noOfRowsPerPage !== rowsPerPage) {
+            setRowsPerPage(noOfRowsPerPage);
+        }
+    }
+    var tableData = data;
     var _g = (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;
     (0, react_1.useEffect)(function () {
         var _a;
         var columnPreference = (_a = tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.columns) !== null && _a !== void 0 ? _a : [];
@@ -85,99 +84,87 @@ 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 endRow = (0, react_1.useMemo)(function () { return (!isPagination ? tableData.length : startRow + rowsPerPage); }, [isPagination, rowsPerPage, startRow, tableData.length]);
     var filteredData = (0, react_1.useMemo)(function () {
-        if (isServerPagination)
-            return sortedData;
+        if (isServerPagination) {
+            return tableData;
+        }
+        var sortedData = (0, table_1.SortMultiColumnData)(tableData, columnsSort);
         return sortedData.slice(startRow, endRow);
-    }, [sortedData, startRow, endRow, isServerPagination]);
-    var handlePageSizeChange = (0, react_1.useCallback)(function (event) {
+    }, [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 }));
+    };
     return {
-        tableData: data,
+        tableData: tableData,
         tableContainerStyles: tableContainerStyles,
         isContent: isContent,
         isLink: isLink,
@@ -197,7 +184,6 @@ var useTable = function (_a) {
         setCurrentPage: setCurrentPage,
         columnsList: columnsList,
         handleColumnPreferences: handleColumnPreferences,
-        handleGlobalSearch: handleGlobalSearch,
     };
 };
 exports.default = useTable;

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]);
     var tablePaginationText = "".concat(startRow + 1, " - ").concat(endRow > tableData.length ? tableData.length : endRow, " of ").concat(isServerPagination ? totalRecords : tableData.length);
     var controlsHeight = 45;
     var estimatedRowHeight = 45;
@@ -204,14 +223,14 @@ function Table(_a) {
                         react_1.default.createElement(HeaderActions_1.default, { actions: headerActions, selections: selection }))) : null,
                     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 }))),
+                        (isPagination || isServerPagination) && !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" },
                             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,7 +23,7 @@ type TableCellCalculationProps = {
     row: DataObject;
     freezedBgColor?: string;
     index: number;
-    theme: Record<string, any>;
+    theme: any;
 };
 export declare const TableCellCalculation: ({ isFrozen, columnWidths, headerIndex, isCheckbox, header, row, freezedBgColor, index, theme, }: TableCellCalculationProps) => {
     leftOffset: number;

package/package.json

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