pixelize-design-library 1.1.55 → 1.1.57

package/dist/Components/ButtonGroupIcon/ButtonGoupIconProps.d.ts

@@ -29,4 +29,5 @@ export type ButtonGroupIconProps = {
     menulistStyle?: React.CSSProperties;
     menuItemStyle?: React.CSSProperties;
     isLoading?: boolean;
+    divider?: boolean;
 };

package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.d.ts

@@ -2,4 +2,4 @@ import React from "react";
 import { ButtonGroupIconProps } from "./ButtonGoupIconProps";
 export default function ButtonGroupIcon({ leftIcon, rightIcon, onLeftIconClick, onRightIconClick, buttonText, onButtonClick, onButtongroupClick, size, variant, color, buttonGroupStyle, buttonGroupLeftIconStyle, buttonGroupRightIconStyle, buttonStyle, onBlurLeftIcon, onBlurRightIcon, dropdownOptions, // New prop for dropdown options
 onDropdownOptionClick, // New prop to handle option clicks
-rightIconDropdown, menulistStyle, menuItemStyle, isLoading, }: ButtonGroupIconProps): React.JSX.Element;
+rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider, }: ButtonGroupIconProps): React.JSX.Element;

package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.js

@@ -27,11 +27,12 @@ var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 function ButtonGroupIcon(_a) {
+    var _b, _c;
     var leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, onLeftIconClick = _a.onLeftIconClick, onRightIconClick = _a.onRightIconClick, buttonText = _a.buttonText, onButtonClick = _a.onButtonClick, onButtongroupClick = _a.onButtongroupClick, size = _a.size, variant = _a.variant, color = _a.color, buttonGroupStyle = _a.buttonGroupStyle, buttonGroupLeftIconStyle = _a.buttonGroupLeftIconStyle, buttonGroupRightIconStyle = _a.buttonGroupRightIconStyle, buttonStyle = _a.buttonStyle, onBlurLeftIcon = _a.onBlurLeftIcon, onBlurRightIcon = _a.onBlurRightIcon, dropdownOptions = _a.dropdownOptions, // New prop for dropdown options
     onDropdownOptionClick = _a.onDropdownOptionClick, // New prop to handle option clicks
-    rightIconDropdown = _a.rightIconDropdown, menulistStyle = _a.menulistStyle, menuItemStyle = _a.menuItemStyle, isLoading = _a.isLoading;
+    rightIconDropdown = _a.rightIconDropdown, menulistStyle = _a.menulistStyle, menuItemStyle = _a.menuItemStyle, isLoading = _a.isLoading, _d = _a.divider, divider = _d === void 0 ? true : _d;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _b = (0, react_1.useState)(false), isDropdownOpen = _b[0], setIsDropdownOpen = _b[1];
+    var _e = (0, react_1.useState)(false), isDropdownOpen = _e[0], setIsDropdownOpen = _e[1];
     var handleRightIconClick = function () {
         setIsDropdownOpen(!isDropdownOpen);
         if (onRightIconClick) {
@@ -57,7 +58,7 @@ function ButtonGroupIcon(_a) {
                 "&:hover": {
                     backgroundColor: theme.colors.primary[400],
                 },
-            } }, buttonText),
+            }, borderLeft: "1px solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[300]), borderRight: "1px solid ".concat((_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[300]) }, buttonText),
         rightIcon && rightIconDropdown ? (react_1.default.createElement(react_2.Menu, { isOpen: isDropdownOpen, onClose: function () { return setIsDropdownOpen(false); } },
             react_1.default.createElement(react_2.MenuButton, { as: react_2.IconButton, "aria-label": "Right icon button", icon: rightIcon, onClick: handleRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: {
                     backgroundColor: theme.colors.primary[500],
@@ -66,9 +67,16 @@ function ButtonGroupIcon(_a) {
                     },
                 } }),
             react_1.default.createElement(react_2.Box, { sx: { zIndex: 99 } },
-                react_1.default.createElement(react_2.MenuList, { style: menulistStyle }, dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map(function (option, index) { return (react_1.default.createElement(react_2.MenuItem, { key: index, onClick: function (event) { return handleMenuClick(event, option); }, style: menuItemStyle }, option === null || option === void 0 ? void 0 :
-                    option.image,
-                    option.label)); }))))) : (rightIcon && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Right icon button", icon: rightIcon, onClick: onRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: {
+                react_1.default.createElement(react_2.MenuList, { style: menulistStyle }, dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map(function (option, index) {
+                    var _a;
+                    return (react_1.default.createElement(react_2.MenuItem, { key: index, onClick: function (event) { return handleMenuClick(event, option); }, style: menuItemStyle, borderBottom: divider ? "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[300]) : undefined, sx: {
+                            "&:last-child": {
+                                borderBottom: "none",
+                            },
+                        } }, option === null || option === void 0 ? void 0 :
+                        option.image,
+                        option.label));
+                }))))) : (rightIcon && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Right icon button", icon: rightIcon, onClick: onRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: {
                 backgroundColor: theme.colors.primary[500],
                 "&:hover": {
                     backgroundColor: theme.colors.primary[400],

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

@@ -10,6 +10,7 @@ type PaginationProps = Pick<TableProps, "isVisiblity" | "columns"> & {
     handleColumnVisibilityChange: (header: string | number) => void;
     setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
     dataLength: number;
+    isServerPagination: boolean;
 };
-declare const Pagination: ({ isVisiblity, columns, visibleColumns, paginationText, handlePageSizeChange, rowsPerPage, currentPage, pages, handleColumnVisibilityChange, setCurrentPage, dataLength, }: PaginationProps) => React.JSX.Element;
+declare const Pagination: ({ isVisiblity, columns, visibleColumns, paginationText, handlePageSizeChange, rowsPerPage, currentPage, pages, handleColumnVisibilityChange, setCurrentPage, dataLength, isServerPagination, }: PaginationProps) => React.JSX.Element;
 export default Pagination;

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

@@ -8,7 +8,7 @@ var icons_1 = require("@chakra-ui/icons");
 var react_2 = require("@chakra-ui/react");
 var fa_1 = require("react-icons/fa");
 var Pagination = function (_a) {
-    var isVisiblity = _a.isVisiblity, columns = _a.columns, visibleColumns = _a.visibleColumns, paginationText = _a.paginationText, handlePageSizeChange = _a.handlePageSizeChange, rowsPerPage = _a.rowsPerPage, currentPage = _a.currentPage, pages = _a.pages, handleColumnVisibilityChange = _a.handleColumnVisibilityChange, setCurrentPage = _a.setCurrentPage, dataLength = _a.dataLength;
+    var isVisiblity = _a.isVisiblity, columns = _a.columns, visibleColumns = _a.visibleColumns, paginationText = _a.paginationText, handlePageSizeChange = _a.handlePageSizeChange, rowsPerPage = _a.rowsPerPage, currentPage = _a.currentPage, pages = _a.pages, handleColumnVisibilityChange = _a.handleColumnVisibilityChange, setCurrentPage = _a.setCurrentPage, dataLength = _a.dataLength, isServerPagination = _a.isServerPagination;
     var pageSizeOptions = [1, 2, 3, 4, 5, 10, 20, 30, 40, 50, 75, 100].filter(function (size) { return size <= dataLength; });
     var isLeftDisabled = currentPage === 0;
     var isRightDisabled = currentPage >= pages - 1;
@@ -19,9 +19,9 @@ var Pagination = function (_a) {
                 react_1.default.createElement(react_2.MenuList, { overflow: "scroll", zIndex: "2" }, columns.map(function (header, index) { return (react_1.default.createElement(react_2.MenuItem, { key: index },
                     react_1.default.createElement(react_2.Checkbox, { isChecked: visibleColumns[header.label], size: "sm", onChange: function () { return handleColumnVisibilityChange(header.label); } }, header.label))); }))))),
         react_1.default.createElement(react_2.Text, { mr: 4, fontSize: 12 }, paginationText),
-        react_1.default.createElement(react_2.Select, { onChange: handlePageSizeChange, value: rowsPerPage, mr: 4, size: "xs", width: 20 },
+        !isServerPagination && (react_1.default.createElement(react_2.Select, { onChange: handlePageSizeChange, value: rowsPerPage, mr: 4, size: "xs", width: 20 },
             react_1.default.createElement("option", { value: 0 }),
-            pageSizeOptions.map(function (size, index) { return (react_1.default.createElement("option", { key: index, value: size }, size)); })),
+            pageSizeOptions.map(function (size, index) { return (react_1.default.createElement("option", { key: index, value: size }, size)); }))),
         react_1.default.createElement(react_2.Flex, null,
             react_1.default.createElement(react_2.IconButton, { mx: 1, "aria-label": "left-icon", color: isLeftDisabled ? "gray" : "black", rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: function () { return setCurrentPage(0); } },
                 react_1.default.createElement(fa_1.FaAngleDoubleLeft, null)),

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

@@ -77,7 +77,9 @@ var TableBody = function (_a) {
     }, [freezedBgColor, freezedTextColor, noBorders, theme.colors, isActionFreeze]);
     if (isLoading) {
         var totalVisibleColumns = Object.values(visibleColumns).filter(Boolean).length +
-            (isCheckbox ? 1 : 0);
+            (isCheckbox ? 1 : 0) +
+            (isContent ? 1 : 0) +
+            (isLink ? 1 : 0);
         return (react_2.default.createElement(TableLoading_1.TableBodyLoading, { noOfColumns: totalVisibleColumns, borderColor: theme.colors.gray[300] }));
     }
     if (data.length === 0) {
@@ -90,7 +92,7 @@ var TableBody = function (_a) {
                 react_2.default.createElement(react_1.Box, { textAlign: "center", fontSize: 14 },
                     react_2.default.createElement("p", null, "No data found")))));
     }
-    return (react_2.default.createElement(react_2.default.Fragment, null, data.slice(startRow, endRow).map(function (row, index) {
+    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);

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

@@ -27,12 +27,12 @@ var react_1 = __importStar(require("react"));
 var icons_1 = require("@chakra-ui/icons");
 var react_2 = require("@chakra-ui/react");
 var fa_1 = require("react-icons/fa");
-var functions_1 = require("../Utils/functions");
+var table_1 = require("../../../Utils/table");
 var TableFilters = (0, react_1.memo)(function (_a) {
     var header = _a.header, setColumnsSearch = _a.setColumnsSearch, columnsSearch = _a.columnsSearch, onClose = _a.onClose;
     var searchRef = (0, react_1.useRef)(null);
     var _b = (0, react_1.useState)(false), refreshDataOnOpen = _b[0], setRefreshDataOnOpen = _b[1];
-    var debounceRef = (0, functions_1.debounce)(function (value) {
+    var debounceRef = (0, table_1.debounce)(function (value) {
         setColumnsSearch(value);
     }, 700);
     (0, react_1.useEffect)(function () {

package/dist/Components/Table/Components/TableHeader.js

@@ -71,7 +71,7 @@ var TableHeader = function (_a) {
     var RenderView = (0, react_2.useCallback)(function () {
         var _a;
         var BgColor = isActionFreeze ? freezedBgColor : headerBgColor;
-        return (react_2.default.createElement(react_1.Th, { w: 2, p: 0, backgroundColor: BgColor, border: noBorders ? "none" : "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[300]), position: isActionFreeze ? "sticky" : "relative", className: "columns sticky-columns", right: "0px", zIndex: 1, boxShadow: "2px 0 5px rgba(0, 0, 0, 0.1)" },
+        return (react_2.default.createElement(react_1.Th, { w: 2, p: 0, minW: "2.065rem", backgroundColor: BgColor, border: noBorders ? "none" : "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[300]), position: isActionFreeze ? "sticky" : "relative", className: "columns sticky-columns", right: "0px", zIndex: 1, boxShadow: "2px 0 5px rgba(0, 0, 0, 0.1)" },
             react_2.default.createElement(react_1.Box, { display: "flex", justifyContent: "center" },
                 react_2.default.createElement(lu_1.LuFileSymlink, { fontSize: 16 }))));
     }, [

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

@@ -7,8 +7,11 @@ type UseTableProps = {
     selections?: (string | number)[];
     columns: TableHeaderProps[];
     onSelection?: (selected: (string | number)[]) => void;
+    tablePreferences?: Record<string, any>;
+    savePreferences?: (data: Record<string, any>) => void;
+    noOfRowsPerPage?: number;
 };
-declare const useTable: ({ tableBorderColor, data, isPagination, selections, columns, onSelection, }: UseTableProps) => {
+declare const useTable: ({ tableBorderColor, data, isPagination, selections, columns, onSelection, tablePreferences, savePreferences, noOfRowsPerPage, }: UseTableProps) => {
     tableData: DataObject[];
     tableContainerStyles: {
         borderRadius: string;

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

@@ -23,25 +23,32 @@ 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 = 5;
+var defaultPageSize = 50;
 var useTable = function (_a) {
-    var tableBorderColor = _a.tableBorderColor, data = _a.data, isPagination = _a.isPagination, selections = _a.selections, columns = _a.columns, onSelection = _a.onSelection;
+    var tableBorderColor = _a.tableBorderColor, data = _a.data, isPagination = _a.isPagination, selections = _a.selections, columns = _a.columns, onSelection = _a.onSelection, tablePreferences = _a.tablePreferences, savePreferences = _a.savePreferences, noOfRowsPerPage = _a.noOfRowsPerPage;
     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)(defaultPageSize), rowsPerPage = _f[0], setRowsPerPage = _f[1];
-    var _g = (0, react_1.useState)(columns.reduce(function (acc, curr) {
-        var _a;
-        return (__assign(__assign({}, acc), (_a = {}, _a[curr.label] = true, _a)));
-    }, {})), visibleColumns = _g[0], setVisibleColumns = _g[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)({}), visibleColumns = _g[0], setVisibleColumns = _g[1];
     var tableData = (0, react_1.useMemo)(function () { return data; }, [data]);
     var _h = (0, react_1.useState)(tableData), filteredData = _h[0], setFilteredData = _h[1];
     (0, react_1.useEffect)(function () {
         setFilteredData(tableData);
     }, [tableData]);
+    (0, react_1.useEffect)(function () {
+        var _a;
+        var nonVisibility = (_a = tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.nonVisibility) !== null && _a !== void 0 ? _a : [];
+        var column = columns.reduce(function (acc, curr) {
+            var _a;
+            var _b;
+            return (__assign(__assign({}, acc), (_a = {}, _a[curr.label] = !nonVisibility.includes((_b = curr.id) === null || _b === void 0 ? void 0 : _b.toString().toLowerCase()), _a)));
+        }, {});
+        setVisibleColumns(column);
+    }, [columns, tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.nonVisibility]);
     var tableContainerStyles = (0, react_1.useMemo)(function () {
         var _a;
         return ({
@@ -112,10 +119,13 @@ var useTable = function (_a) {
         onSelection && onSelection(selectedItems);
     }, [onSelection, selection, tableData]);
     var handleColumnVisibilityChange = function (header) {
-        setVisibleColumns(function (prev) {
-            var _a;
-            return (__assign(__assign({}, prev), (_a = {}, _a[header] = !prev[header], _a)));
-        });
+        var _a;
+        var visibility = __assign(__assign({}, visibleColumns), (_a = {}, _a[header] = !visibleColumns[header], _a));
+        setVisibleColumns(visibility);
+        savePreferences &&
+            savePreferences(__assign(__assign({}, tablePreferences), { nonVisibility: Object.keys(visibility)
+                    .filter(function (key) { return !visibility[key]; })
+                    .map(function (item) { return item.toLowerCase(); }) }));
     };
     return {
         tableData: tableData,

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

@@ -1,4 +1,4 @@
 import React from "react";
 import { TableProps } from "./TableProps";
 import "./Table.css";
-export default function Table({ data, columns, onSelection, isLoading, isCheckbox, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, tableBorderColor, noBorders, isPagination, onRowClick, selections, isActionFreeze, }: TableProps): React.JSX.Element;
+export default function Table({ data, columns, onSelection, isLoading, isCheckbox, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, tableBorderColor, noBorders, isPagination, onRowClick, selections, isActionFreeze, preferencesUrl, preferencesKey, preferencesName, preferencesPage, authToken, paginationMode, noOfRowsPerPage, totalPages, onPagination, }: TableProps): React.JSX.Element;

package/dist/Components/Table/Table.js

@@ -35,53 +35,66 @@ var TableBody_1 = __importDefault(require("./Components/TableBody"));
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var useTable_1 = __importDefault(require("./Components/useTable"));
 require("./Table.css");
-var functions_1 = require("./Utils/functions");
+var table_1 = require("../../Utils/table");
+var usePreferences_1 = require("../../Hooks/usePreferences");
 function Table(_a) {
     var _b, _c, _d;
-    var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _e = _a.isCheckbox, isCheckbox = _e === void 0 ? false : _e, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _f = _a.noBorders, noBorders = _f === void 0 ? false : _f, _g = _a.isPagination, isPagination = _g === void 0 ? true : _g, onRowClick = _a.onRowClick, selections = _a.selections, _h = _a.isActionFreeze, isActionFreeze = _h === void 0 ? true : _h;
+    var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _e = _a.isCheckbox, isCheckbox = _e === void 0 ? false : _e, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _f = _a.noBorders, noBorders = _f === void 0 ? false : _f, _g = _a.isPagination, isPagination = _g === void 0 ? true : _g, onRowClick = _a.onRowClick, selections = _a.selections, _h = _a.isActionFreeze, isActionFreeze = _h === void 0 ? true : _h, _j = _a.preferencesUrl, preferencesUrl = _j === void 0 ? "https://pixelize.memron.net:5001/api/UserPreference" : _j, _k = _a.preferencesKey, preferencesKey = _k === void 0 ? "" : _k, _l = _a.preferencesName, preferencesName = _l === void 0 ? "" : _l, _m = _a.preferencesPage, preferencesPage = _m === void 0 ? "" : _m, _o = _a.authToken, authToken = _o === void 0 ? "" : _o, _p = _a.paginationMode, paginationMode = _p === void 0 ? "client" : _p, _q = _a.noOfRowsPerPage, noOfRowsPerPage = _q === void 0 ? 50 : _q, _r = _a.totalPages, totalPages = _r === void 0 ? 0 : _r, onPagination = _a.onPagination;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _j = (0, react_1.useState)({}), columnsSearch = _j[0], setColumnsSearch = _j[1];
-    var _k = (0, useTable_1.default)({
+    var _s = (0, react_1.useState)({}), columnsSearch = _s[0], setColumnsSearch = _s[1];
+    var _t = (0, usePreferences_1.useGetPreferences)({
+        baseUrl: preferencesUrl,
+        page: preferencesPage,
+        key: preferencesKey,
+        name: preferencesName,
+        authToken: authToken,
+    }), preferences = _t.preferences, loading = _t.loading;
+    var savePreferences = (0, usePreferences_1.useSavePreferences)({
+        baseUrl: preferencesUrl,
+        page: preferencesPage,
+        key: preferencesKey,
+        name: preferencesName,
+        authToken: authToken,
+    }).savePreferences;
+    var isTableLoading = (0, react_1.useMemo)(function () {
+        return loading || isLoading;
+    }, [loading, isLoading]);
+    var tablePreferences = (0, react_1.useMemo)(function () {
+        if (preferences.length) {
+            return preferences[0].json;
+        }
+        return {};
+    }, [preferences]);
+    var _u = (0, useTable_1.default)({
         tableBorderColor: tableBorderColor,
         data: data,
         isPagination: isPagination,
         selections: selections,
         columns: columns,
         onSelection: onSelection,
-    }), tableData = _k.tableData, tableContainerStyles = _k.tableContainerStyles, isContent = _k.isContent, isLink = _k.isLink, headerRefs = _k.headerRefs, columnWidths = _k.columnWidths, visibleColumns = _k.visibleColumns, handleSort = _k.handleSort, handleCheckbox = _k.handleCheckbox, filteredData = _k.filteredData, startRow = _k.startRow, endRow = _k.endRow, selection = _k.selection, columnsSort = _k.columnsSort, currentPage = _k.currentPage, pages = _k.pages, rowsPerPage = _k.rowsPerPage, handleColumnVisibilityChange = _k.handleColumnVisibilityChange, handlePageSizeChange = _k.handlePageSizeChange, setCurrentPage = _k.setCurrentPage;
+        tablePreferences: tablePreferences,
+        savePreferences: savePreferences,
+        noOfRowsPerPage: noOfRowsPerPage,
+    }), tableData = _u.tableData, tableContainerStyles = _u.tableContainerStyles, isContent = _u.isContent, isLink = _u.isLink, headerRefs = _u.headerRefs, columnWidths = _u.columnWidths, visibleColumns = _u.visibleColumns, handleSort = _u.handleSort, handleCheckbox = _u.handleCheckbox, filteredData = _u.filteredData, startRow = _u.startRow, endRow = _u.endRow, selection = _u.selection, columnsSort = _u.columnsSort, currentPage = _u.currentPage, pages = _u.pages, rowsPerPage = _u.rowsPerPage, handleColumnVisibilityChange = _u.handleColumnVisibilityChange, handlePageSizeChange = _u.handlePageSizeChange, setCurrentPage = _u.setCurrentPage;
     var _filteredData = (0, react_1.useMemo)(function () {
-        return (0, functions_1.searchAndSortData)(filteredData, columnsSearch);
+        return (0, table_1.searchAndSortData)(filteredData, columnsSearch);
     }, [columnsSearch, filteredData]);
-    var RenderPagination = (0, react_1.useCallback)(function () {
-        if (!isPagination || !filteredData.length)
-            return null;
-        return (react_1.default.createElement(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: "".concat(startRow + 1, " to ").concat(endRow, " of ").concat(tableData.length), handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, visibleColumns: visibleColumns, handleColumnVisibilityChange: handleColumnVisibilityChange, isVisiblity: true }));
-    }, [
-        columns,
-        currentPage,
-        endRow,
-        filteredData.length,
-        handleColumnVisibilityChange,
-        handlePageSizeChange,
-        isPagination,
-        pages,
-        rowsPerPage,
-        setCurrentPage,
-        startRow,
-        tableData.length,
-        visibleColumns,
-    ]);
+    (0, react_1.useEffect)(function () {
+        if (onPagination) {
+            onPagination(currentPage + 1, noOfRowsPerPage);
+        }
+    }, [currentPage, onPagination, noOfRowsPerPage]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(react_2.TableContainer, { sx: tableContainerStyles },
             react_1.default.createElement(react_3.Table, { variant: "simple", size: "sm", overflowX: "scroll", minW: "100%", className: "table_wrapper" },
                 react_1.default.createElement(react_3.Thead, { position: "sticky", top: 0, zIndex: 2 },
-                    react_1.default.createElement(TableHeader_1.default, { columns: columns, isCheckbox: isCheckbox, headerBgColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : theme.colors.backgroundColor.muted, headerTextColor: headerTextColor !== null && headerTextColor !== void 0 ? headerTextColor : (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[600], freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[600], visibleColumns: visibleColumns, handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isLoading, checked: tableData.length !== 0 && selection.length === tableData.length
+                    react_1.default.createElement(TableHeader_1.default, { columns: columns, isCheckbox: isCheckbox, headerBgColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : theme.colors.backgroundColor.muted, headerTextColor: headerTextColor !== null && headerTextColor !== void 0 ? headerTextColor : (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[600], freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[600], visibleColumns: visibleColumns, 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 })),
                 react_1.default.createElement(react_3.Tbody, null,
-                    react_1.default.createElement(TableBody_1.default, { data: _filteredData, columns: columns, startRow: startRow, endRow: endRow, visibleColumns: visibleColumns, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isLoading, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze })))),
-        react_1.default.createElement(RenderPagination, null)));
+                    react_1.default.createElement(TableBody_1.default, { data: _filteredData, columns: columns, startRow: startRow, endRow: endRow, visibleColumns: visibleColumns, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze })))),
+        isPagination && (react_1.default.createElement(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: totalPages !== null && totalPages !== void 0 ? totalPages : pages, paginationText: "".concat(startRow + 1, " to ").concat(endRow, " of ").concat(tableData.length), handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: paginationMode === "server", visibleColumns: visibleColumns, handleColumnVisibilityChange: handleColumnVisibilityChange, isVisiblity: true }))));
 }
 exports.default = Table;

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

@@ -19,6 +19,15 @@ export type TableProps = {
     selections?: (string | number)[];
     onRowClick?: (row: DataObject, header: Record<string | number, string | number>) => void;
     isActionFreeze?: boolean;
+    preferencesUrl?: string;
+    preferencesKey?: string;
+    preferencesName?: string;
+    preferencesPage?: string;
+    authToken?: string;
+    paginationMode?: "client" | "server";
+    noOfRowsPerPage?: number;
+    totalPages?: number;
+    onPagination?: (page: number, noOfRecords: number) => void;
 };
 export type DataObject = {
     [key: string]: string | number | any;

package/dist/Hooks/usePreferences.d.ts

@@ -0,0 +1,24 @@
+type PreferencesProps = {
+    baseUrl: string;
+    key?: string;
+    page?: string;
+    name?: string;
+    authToken?: string;
+};
+type PreferencesResponseProps = {
+    json: Record<string, any>;
+    key: string;
+    name: string;
+    page: string;
+    preference_id: string;
+};
+declare const useGetPreferences: ({ baseUrl, key, page, name, authToken, }: PreferencesProps) => {
+    preferences: PreferencesResponseProps[];
+    loading: boolean;
+};
+declare const useSavePreferences: ({ baseUrl, key, page, name, authToken, }: PreferencesProps) => {
+    savePreferences: (data?: Record<string, any>) => void;
+    loading: boolean;
+    error: null;
+};
+export { useGetPreferences, useSavePreferences };

package/dist/Hooks/usePreferences.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSavePreferences = exports.useGetPreferences = void 0;
+var react_1 = require("react");
+var constructUrl = function (_a) {
+    var baseUrl = _a.baseUrl, key = _a.key, page = _a.page, name = _a.name;
+    var params = new URLSearchParams();
+    if (page) {
+        params.append("page", page);
+    }
+    if (key) {
+        params.append("key", key);
+    }
+    if (name) {
+        params.append("name", name);
+    }
+    var queryString = params.toString();
+    return "".concat(baseUrl).concat(queryString ? "?".concat(queryString) : "");
+};
+var useGetPreferences = function (_a) {
+    var _b = _a.baseUrl, baseUrl = _b === void 0 ? "" : _b, _c = _a.key, key = _c === void 0 ? "" : _c, _d = _a.page, page = _d === void 0 ? "" : _d, _e = _a.name, name = _e === void 0 ? "" : _e, _f = _a.authToken, authToken = _f === void 0 ? "" : _f;
+    var _g = (0, react_1.useState)([]), preferences = _g[0], setPreferences = _g[1];
+    var _h = (0, react_1.useState)(false), loading = _h[0], setLoading = _h[1];
+    (0, react_1.useEffect)(function () {
+        if (!baseUrl) {
+            return;
+        }
+        setLoading(true);
+        var url = constructUrl({ baseUrl: baseUrl, key: key, page: page, name: name });
+        fetch(url, {
+            headers: {
+                Authorization: authToken,
+            },
+        })
+            .then(function (response) { return response.json(); })
+            .then(function (data) { return setPreferences(data); })
+            .catch(function (error) { return console.error(error); })
+            .finally(function () { return setLoading(false); });
+    }, [baseUrl]);
+    return { preferences: preferences, loading: loading };
+};
+exports.useGetPreferences = useGetPreferences;
+var useSavePreferences = function (_a) {
+    var _b = _a.baseUrl, baseUrl = _b === void 0 ? "" : _b, _c = _a.key, key = _c === void 0 ? "" : _c, _d = _a.page, page = _d === void 0 ? "" : _d, _e = _a.name, name = _e === void 0 ? "" : _e, _f = _a.authToken, authToken = _f === void 0 ? "" : _f;
+    var _g = (0, react_1.useState)(false), loading = _g[0], setLoading = _g[1];
+    var _h = (0, react_1.useState)(null), error = _h[0], setError = _h[1];
+    var savePreferences = function (data) {
+        if (data === void 0) { data = {}; }
+        setLoading(true);
+        fetch(baseUrl, {
+            method: "POST",
+            headers: {
+                Authorization: authToken,
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+                key: key,
+                page: page,
+                name: name,
+                json: data,
+            }),
+        })
+            .then(function (response) { return response.json(); })
+            .then(function (data) { return console.log(data); })
+            .catch(function (error) { return setError(error); })
+            .finally(function () { return setLoading(false); });
+    };
+    return { savePreferences: savePreferences, loading: loading, error: error };
+};
+exports.useSavePreferences = useSavePreferences;

package/dist/Utils/table.d.ts

@@ -7,3 +7,5 @@ export declare function SortMultiColumnData(data: Record<string, string | number
 export declare const getPreviousColumnWidth: (columns: KaTableProps["columns"], key: string) => any;
 export declare const getFieldType: (header: string, data: DataObject[]) => "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function";
 export declare const calculateLeftOffset: (columns: number[], index: number) => number;
+export declare const searchAndSortData: (data: DataObject[], searchValues: Record<string, string>) => DataObject[];
+export declare function debounce<T extends (...args: any[]) => void>(func: T, delay: number): (...args: Parameters<T>) => void;

package/dist/Utils/table.js

@@ -9,7 +9,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.calculateLeftOffset = exports.getFieldType = exports.getPreviousColumnWidth = exports.SortMultiColumnData = void 0;
+exports.debounce = exports.searchAndSortData = exports.calculateLeftOffset = exports.getFieldType = exports.getPreviousColumnWidth = exports.SortMultiColumnData = void 0;
 function SortMultiColumnData(data, sortConfig) {
     if (!sortConfig.length)
         return data;
@@ -39,15 +39,6 @@ var getPreviousColumnWidth = function (columns, key) {
     return 0;
 };
 exports.getPreviousColumnWidth = getPreviousColumnWidth;
-// export function calculateLeftOffset(columns: any, currentIndex: number) {
-//   let offset = 0;
-//   for (let i = 0; i < currentIndex; i++) {
-//     if (columns[i].isFreeze) {
-//       offset += columns[i].width || 100;
-//     }
-//   }
-//   return offset;
-// }
 var getFieldType = function (header, data) {
     for (var _i = 0, data_1 = data; _i < data_1.length; _i++) {
         var row = data_1[_i];
@@ -62,3 +53,46 @@ var calculateLeftOffset = function (columns, index) {
     return columns.slice(0, index).reduce(function (sum, width) { return sum + width; }, 0);
 };
 exports.calculateLeftOffset = calculateLeftOffset;
+var searchAndSortData = function (data, searchValues) {
+    var filteredData = data.filter(function (item) {
+        return Object.keys(searchValues).every(function (key) {
+            var searchValue = searchValues[key].toLowerCase();
+            return item[key].toString().toLowerCase().includes(searchValue);
+        });
+    });
+    return filteredData.sort(function (a, b) {
+        var aMatchCount = 0;
+        var bMatchCount = 0;
+        Object.keys(searchValues).forEach(function (key) {
+            var searchValue = searchValues[key].toLowerCase();
+            if (a[key] && a[key].toString().toLowerCase() === searchValue) {
+                aMatchCount++;
+            }
+            if (b[key] && b[key].toString().toLowerCase() === searchValue) {
+                bMatchCount++;
+            }
+            if (a[key] && a[key].toString().toLowerCase().includes(searchValue)) {
+                aMatchCount += 0.5;
+            }
+            if (b[key] && b[key].toString().toLowerCase().includes(searchValue)) {
+                bMatchCount += 0.5;
+            }
+        });
+        return bMatchCount - aMatchCount;
+    });
+};
+exports.searchAndSortData = searchAndSortData;
+function debounce(func, delay) {
+    var timer;
+    return function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        clearTimeout(timer);
+        timer = setTimeout(function () {
+            func.apply(void 0, args);
+        }, delay);
+    };
+}
+exports.debounce = debounce;

package/dist/index.d.ts

@@ -39,5 +39,6 @@ import VerifyEmailOtp from "./Components/EmailCards/VerifyEmailOtp/VerifyEmailOt
 import withTheme from "./withTheme";
 import { useCustomTheme } from "./Theme/useCustomTheme";
 import { ThemesList } from "./Theme";
-export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, InputTextArea, KaTable, TableActionCreator, TableEnums, TableProps, TableModel, TableUtils, TableFun, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PinInput, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Search, Select, SelectSearch, SideBar, Skeletons, Switch, Table, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, };
+import { debounce } from "./Utils/table";
+export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, InputTextArea, KaTable, TableActionCreator, TableEnums, TableProps, TableModel, TableUtils, TableFun, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PinInput, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Search, Select, SelectSearch, SideBar, Skeletons, Switch, Table, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
 export default withTheme;

package/dist/index.js

@@ -28,7 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextInput = exports.Table = exports.Switch = exports.Skeletons = exports.SideBar = exports.SelectSearch = exports.Select = exports.Search = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.PinInput = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.TableFun = exports.TableUtils = exports.TableModel = exports.TableProps = exports.TableEnums = exports.TableActionCreator = exports.KaTable = exports.InputTextArea = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
-exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = void 0;
+exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = void 0;
 var Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
 exports.Accordian = Accordion_1.default;
 var AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
@@ -127,4 +127,6 @@ var useCustomTheme_1 = require("./Theme/useCustomTheme");
 Object.defineProperty(exports, "useCustomTheme", { enumerable: true, get: function () { return useCustomTheme_1.useCustomTheme; } });
 var Theme_1 = require("./Theme");
 Object.defineProperty(exports, "ThemesList", { enumerable: true, get: function () { return Theme_1.ThemesList; } });
+var table_1 = require("./Utils/table");
+Object.defineProperty(exports, "debounce", { enumerable: true, get: function () { return table_1.debounce; } });
 exports.default = withTheme_1.default;

package/package.json

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