pixelize-design-library 1.1.51 → 1.1.53

package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.js

@@ -65,7 +65,7 @@ function ButtonGroupIcon(_a) {
                         backgroundColor: theme.colors.primary[400],
                     },
                 } }),
-            react_1.default.createElement(react_2.Portal, null,
+            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: {

package/dist/Components/NavigationBar/NavigationBar.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var react_2 = require("@chakra-ui/react");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var fi_1 = require("react-icons/fi");
 function NavBar(_a) {
     var userAvathar = _a.userAvathar, userName = _a.userName, navMenu = _a.navMenu, moreIcon = _a.moreIcon, handleNavOnClick = _a.handleNavOnClick, handleLogout = _a.handleLogout, logoutText = _a.logoutText, navigationBarText = _a.navigationBarText;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
@@ -19,18 +20,27 @@ function NavBar(_a) {
                         react_1.default.createElement(react_2.MenuButton, { as: react_2.Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0 },
                             react_1.default.createElement(react_2.Avatar, { size: "sm", name: userName, src: userAvathar })),
                         react_1.default.createElement(react_2.MenuList, { alignItems: "center", zIndex: 5 },
-                            react_1.default.createElement("br", null),
+                            react_1.default.createElement(react_2.Center, { py: 4 },
+                                react_1.default.createElement(react_2.Avatar, { size: "xl", name: userName, src: userAvathar })),
                             react_1.default.createElement(react_2.Center, null,
-                                react_1.default.createElement(react_2.Avatar, { size: "2xl", name: userName, src: userAvathar })),
-                            react_1.default.createElement("br", null),
-                            react_1.default.createElement(react_2.Center, null,
-                                react_1.default.createElement("p", null, userName)),
-                            react_1.default.createElement("br", null),
+                                react_1.default.createElement(react_2.Text, { fontWeight: 500 }, userName)),
                             react_1.default.createElement(react_2.MenuDivider, null), navMenu === null || navMenu === void 0 ? void 0 :
-                            navMenu.map(function (menu) { return (react_1.default.createElement("div", { onClick: function () { return handleNavOnClick(menu.url); }, key: menu.title },
-                                react_1.default.createElement(react_2.MenuItem, null, menu.title))); }),
+                            navMenu.map(function (menu) { return (react_1.default.createElement(react_2.MenuItem, { onClick: function () { return handleNavOnClick(menu.url); }, key: menu.title, sx: {
+                                    fontWeight: 500,
+                                    gap: theme.space["2"],
+                                }, _hover: {
+                                    backgroundColor: theme.colors.primary["50"],
+                                } },
+                                menu.icon && react_1.default.createElement(react_2.Box, null, menu === null || menu === void 0 ? void 0 : menu.icon),
+                                react_1.default.createElement(react_2.Box, null, menu.title))); }),
                             react_1.default.createElement(react_2.MenuDivider, null),
-                            react_1.default.createElement("div", { onClick: handleLogout, key: "logout" },
-                                react_1.default.createElement(react_2.MenuItem, null, logoutText)))))))));
+                            react_1.default.createElement(react_2.MenuItem, { onClick: handleLogout, sx: {
+                                    fontWeight: 500,
+                                    gap: theme.space["2"],
+                                }, _hover: {
+                                    backgroundColor: theme.colors.primary["50"],
+                                } },
+                                react_1.default.createElement(react_2.Box, null, react_1.default.createElement(fi_1.FiLogOut, null)),
+                                react_1.default.createElement(react_2.Box, null, logoutText)))))))));
 }
 exports.default = NavBar;

package/dist/Components/NavigationBar/NavigationBarProps.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export type NavbarProps = {
     userAvathar: string;
     userName: string;
@@ -11,4 +12,5 @@ export type NavbarProps = {
 export type MenuProps = {
     title: string;
     url: string;
+    icon?: React.ReactNode;
 };

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

@@ -102,20 +102,37 @@ var TableBody = function (_a) {
                             backgroundColor: theme.colors.gray[100],
                         },
                     }
-                    : {}, _hover: {
-                    "& > td": {
-                        backgroundColor: theme.colors.gray[100],
-                    },
-                } },
+                    : {} },
                 isContent && (react_2.default.createElement(RenderContent, { rowIndex: rowIndex, isExpanded: isExpanded, isContent: !!row.content })),
                 isCheckbox && react_2.default.createElement(RenderCheckbox, { row: row, isChecked: isChecked }),
                 columns.map(function (header, headerIndex) {
-                    var _a;
+                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
                     var isFrozen = header.isFreeze;
                     var leftOffset = isFrozen
                         ? (0, table_1.calculateLeftOffset)(columnWidths, headerIndex) +
                             (isCheckbox ? 50 : 0)
                         : 0;
+                    var cellBgColor = undefined;
+                    var cellTextColor = undefined;
+                    if ((_a = row.cellStyle) === null || _a === void 0 ? void 0 : _a[header.id]) {
+                        cellBgColor =
+                            (_d = (_c = (_b = row.cellStyle) === null || _b === void 0 ? void 0 : _b[header.id]) === null || _c === void 0 ? void 0 : _c.bg) !== null && _d !== void 0 ? _d : theme.colors.backgroundColor.light;
+                        cellTextColor =
+                            (_g = (_f = (_e = row.cellStyle) === null || _e === void 0 ? void 0 : _e[header.id]) === null || _f === void 0 ? void 0 : _f.color) !== null && _g !== void 0 ? _g : undefined;
+                    }
+                    else if (isFrozen) {
+                        cellBgColor = freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : undefined;
+                        cellTextColor = freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : undefined;
+                    }
+                    else if (index % 2 === 1) {
+                        cellBgColor = theme.colors.backgroundColor.light;
+                    }
+                    var rowBgColor = undefined;
+                    var rowTextColor = undefined;
+                    if (row.rowStyle) {
+                        rowBgColor = (_h = row.rowStyle) === null || _h === void 0 ? void 0 : _h.bg;
+                        rowTextColor = (_j = row.rowStyle) === null || _j === void 0 ? void 0 : _j.color;
+                    }
                     return (visibleColumns[header.label] && (react_2.default.createElement(react_1.Td, { maxWidth: 500, minWidth: 120, key: headerIndex + 1, onClick: function () {
                             return !header.node
                                 ? handleRowClick(row, {
@@ -123,13 +140,13 @@ var TableBody = function (_a) {
                                     id: header.id,
                                 })
                                 : null;
-                        }, fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, zIndex: isFrozen ? 1 : 0, backgroundColor: isFrozen
-                            ? freezedBgColor
-                            : index % 2 === 1
-                                ? theme.colors.backgroundColor.light
-                                : "white", textOverflow: "ellipsis", border: noBorders
+                        }, fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, zIndex: isFrozen ? 1 : 0, backgroundColor: cellBgColor !== null && cellBgColor !== void 0 ? cellBgColor : rowBgColor, textOverflow: "ellipsis", border: noBorders
                             ? "none"
-                            : "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[isFrozen || isChecked ? 300 : 200]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns"), boxSizing: "border-box", color: isFrozen ? freezedTextColor : undefined },
+                            : "1px solid ".concat((_k = theme.colors) === null || _k === void 0 ? void 0 : _k.gray[isFrozen || isChecked ? 300 : 200]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns"), boxSizing: "border-box", color: cellTextColor !== null && cellTextColor !== void 0 ? cellTextColor : rowTextColor, _hover: ((_l = row.cellStyle) === null || _l === void 0 ? void 0 : _l[header.id]) || row.rowStyle
+                            ? {}
+                            : {
+                                backgroundColor: theme.colors.gray[100],
+                            } },
                         react_2.default.createElement(react_1.Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block", overflow: "hidden" }, header.node ? header.node(row) : row[header.id]))));
                 }),
                 isLink && react_2.default.createElement(RenderView, { row: row, bgcolor: freezeViewColor })),

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 table_1 = require("../../../Utils/table");
+var functions_1 = require("../Utils/functions");
 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, table_1.debounce)(function (value) {
+    var debounceRef = (0, functions_1.debounce)(function (value) {
         setColumnsSearch(value);
     }, 700);
     (0, react_1.useEffect)(function () {

package/dist/Components/Table/Table.js

@@ -35,7 +35,7 @@ var TableBody_1 = __importDefault(require("./Components/TableBody"));
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var useTable_1 = __importDefault(require("./Components/useTable"));
 require("./Table.css");
-var table_1 = require("../../Utils/table");
+var functions_1 = require("./Utils/functions");
 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;
@@ -50,7 +50,7 @@ function Table(_a) {
         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;
     var _filteredData = (0, react_1.useMemo)(function () {
-        return (0, table_1.searchAndSortData)(filteredData, columnsSearch);
+        return (0, functions_1.searchAndSortData)(filteredData, columnsSearch);
     }, [columnsSearch, filteredData]);
     var RenderPagination = (0, react_1.useCallback)(function () {
         if (!isPagination || !filteredData.length)

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

@@ -0,0 +1,3 @@
+import { DataObject } from "../TableProps";
+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/Components/Table/Utils/functions.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.debounce = exports.searchAndSortData = void 0;
+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/Utils/table.d.ts

@@ -7,5 +7,3 @@ 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.debounce = exports.searchAndSortData = exports.calculateLeftOffset = exports.getFieldType = exports.getPreviousColumnWidth = exports.SortMultiColumnData = void 0;
+exports.calculateLeftOffset = exports.getFieldType = exports.getPreviousColumnWidth = exports.SortMultiColumnData = void 0;
 function SortMultiColumnData(data, sortConfig) {
     if (!sortConfig.length)
         return data;
@@ -39,6 +39,15 @@ 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];
@@ -53,46 +62,3 @@ 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,6 +39,5 @@ import VerifyEmailOtp from "./Components/EmailCards/VerifyEmailOtp/VerifyEmailOt
 import withTheme from "./withTheme";
 import { useCustomTheme } from "./Theme/useCustomTheme";
 import { ThemesList } from "./Theme";
-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 { 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, };
 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.debounce = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = void 0;
+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,6 +127,4 @@ 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.51",
+  "version": "1.1.53",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",