pixelize-design-library 1.1.51 → 1.1.52

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.js +1 -1
  2. package/dist/Components/NavigationBar/NavigationBar.js +20 -10
  3. package/dist/Components/NavigationBar/NavigationBarProps.d.ts +2 -0
  4. package/dist/Components/Table/Components/TableFilters.js +2 -2
  5. package/dist/Components/Table/Table.js +2 -2
  6. package/dist/Components/Table/Utils/functions.d.ts +3 -0
  7. package/dist/Components/Table/Utils/functions.js +46 -0
  8. package/dist/Utils/table.d.ts +0 -2
  9. package/dist/Utils/table.js +10 -44
  10. package/dist/index.d.ts +1 -2
  11. package/dist/index.js +1 -3
  12. package/package.json +1 -1
package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.js CHANGED
@@ -65,7 +65,7 @@ function ButtonGroupIcon(_a) {
65
65
  backgroundColor: theme.colors.primary[400],
66
66
  },
67
67
  } }),
68
- react_1.default.createElement(react_2.Portal, null,
68
+ react_1.default.createElement(react_2.Box, { sx: { zIndex: 99 } },
69
69
  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 :
70
70
  option.image,
71
71
  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 CHANGED
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
6
6
  var react_1 = __importDefault(require("react"));
7
7
  var react_2 = require("@chakra-ui/react");
8
8
  var useCustomTheme_1 = require("../../Theme/useCustomTheme");
9
+ var fi_1 = require("react-icons/fi");
9
10
  function NavBar(_a) {
10
11
  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;
11
12
  var theme = (0, useCustomTheme_1.useCustomTheme)();
@@ -19,18 +20,27 @@ function NavBar(_a) {
19
20
  react_1.default.createElement(react_2.MenuButton, { as: react_2.Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0 },
20
21
  react_1.default.createElement(react_2.Avatar, { size: "sm", name: userName, src: userAvathar })),
21
22
  react_1.default.createElement(react_2.MenuList, { alignItems: "center", zIndex: 5 },
22
- react_1.default.createElement("br", null),
23
+ react_1.default.createElement(react_2.Center, { py: 4 },
24
+ react_1.default.createElement(react_2.Avatar, { size: "xl", name: userName, src: userAvathar })),
23
25
  react_1.default.createElement(react_2.Center, null,
24
- react_1.default.createElement(react_2.Avatar, { size: "2xl", name: userName, src: userAvathar })),
25
- react_1.default.createElement("br", null),
26
- react_1.default.createElement(react_2.Center, null,
27
- react_1.default.createElement("p", null, userName)),
28
- react_1.default.createElement("br", null),
26
+ react_1.default.createElement(react_2.Text, { fontWeight: 500 }, userName)),
29
27
  react_1.default.createElement(react_2.MenuDivider, null), navMenu === null || navMenu === void 0 ? void 0 :
30
- navMenu.map(function (menu) { return (react_1.default.createElement("div", { onClick: function () { return handleNavOnClick(menu.url); }, key: menu.title },
31
- react_1.default.createElement(react_2.MenuItem, null, menu.title))); }),
28
+ navMenu.map(function (menu) { return (react_1.default.createElement(react_2.MenuItem, { onClick: function () { return handleNavOnClick(menu.url); }, key: menu.title, sx: {
29
+ fontWeight: 500,
30
+ gap: theme.space["2"],
31
+ }, _hover: {
32
+ backgroundColor: theme.colors.primary["50"],
33
+ } },
34
+ menu.icon && react_1.default.createElement(react_2.Box, null, menu === null || menu === void 0 ? void 0 : menu.icon),
35
+ react_1.default.createElement(react_2.Box, null, menu.title))); }),
32
36
  react_1.default.createElement(react_2.MenuDivider, null),
33
- react_1.default.createElement("div", { onClick: handleLogout, key: "logout" },
34
- react_1.default.createElement(react_2.MenuItem, null, logoutText)))))))));
37
+ react_1.default.createElement(react_2.MenuItem, { onClick: handleLogout, sx: {
38
+ fontWeight: 500,
39
+ gap: theme.space["2"],
40
+ }, _hover: {
41
+ backgroundColor: theme.colors.primary["50"],
42
+ } },
43
+ react_1.default.createElement(react_2.Box, null, react_1.default.createElement(fi_1.FiLogOut, null)),
44
+ react_1.default.createElement(react_2.Box, null, logoutText)))))))));
35
45
  }
36
46
  exports.default = NavBar;
package/dist/Components/NavigationBar/NavigationBarProps.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  export type NavbarProps = {
2
3
  userAvathar: string;
3
4
  userName: string;
@@ -11,4 +12,5 @@ export type NavbarProps = {
11
12
  export type MenuProps = {
12
13
  title: string;
13
14
  url: string;
15
+ icon?: React.ReactNode;
14
16
  };
package/dist/Components/Table/Components/TableFilters.js CHANGED
@@ -27,12 +27,12 @@ var react_1 = __importStar(require("react"));
27
27
  var icons_1 = require("@chakra-ui/icons");
28
28
  var react_2 = require("@chakra-ui/react");
29
29
  var fa_1 = require("react-icons/fa");
30
- var table_1 = require("../../../Utils/table");
30
+ var functions_1 = require("../Utils/functions");
31
31
  var TableFilters = (0, react_1.memo)(function (_a) {
32
32
  var header = _a.header, setColumnsSearch = _a.setColumnsSearch, columnsSearch = _a.columnsSearch, onClose = _a.onClose;
33
33
  var searchRef = (0, react_1.useRef)(null);
34
34
  var _b = (0, react_1.useState)(false), refreshDataOnOpen = _b[0], setRefreshDataOnOpen = _b[1];
35
- var debounceRef = (0, table_1.debounce)(function (value) {
35
+ var debounceRef = (0, functions_1.debounce)(function (value) {
36
36
  setColumnsSearch(value);
37
37
  }, 700);
38
38
  (0, react_1.useEffect)(function () {
package/dist/Components/Table/Table.js CHANGED
@@ -35,7 +35,7 @@ var TableBody_1 = __importDefault(require("./Components/TableBody"));
35
35
  var useCustomTheme_1 = require("../../Theme/useCustomTheme");
36
36
  var useTable_1 = __importDefault(require("./Components/useTable"));
37
37
  require("./Table.css");
38
- var table_1 = require("../../Utils/table");
38
+ var functions_1 = require("./Utils/functions");
39
39
  function Table(_a) {
40
40
  var _b, _c, _d;
41
41
  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) {
50
50
  onSelection: onSelection,
51
51
  }), 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;
52
52
  var _filteredData = (0, react_1.useMemo)(function () {
53
- return (0, table_1.searchAndSortData)(filteredData, columnsSearch);
53
+ return (0, functions_1.searchAndSortData)(filteredData, columnsSearch);
54
54
  }, [columnsSearch, filteredData]);
55
55
  var RenderPagination = (0, react_1.useCallback)(function () {
56
56
  if (!isPagination || !filteredData.length)
package/dist/Components/Table/Utils/functions.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { DataObject } from "../TableProps";
2
+ export declare const searchAndSortData: (data: DataObject[], searchValues: Record<string, string>) => DataObject[];
3
+ export declare function debounce<T extends (...args: any[]) => void>(func: T, delay: number): (...args: Parameters<T>) => void;
package/dist/Components/Table/Utils/functions.js ADDED
@@ -0,0 +1,46 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.debounce = exports.searchAndSortData = void 0;
4
+ var searchAndSortData = function (data, searchValues) {
5
+ var filteredData = data.filter(function (item) {
6
+ return Object.keys(searchValues).every(function (key) {
7
+ var searchValue = searchValues[key].toLowerCase();
8
+ return item[key].toString().toLowerCase().includes(searchValue);
9
+ });
10
+ });
11
+ return filteredData.sort(function (a, b) {
12
+ var aMatchCount = 0;
13
+ var bMatchCount = 0;
14
+ Object.keys(searchValues).forEach(function (key) {
15
+ var searchValue = searchValues[key].toLowerCase();
16
+ if (a[key] && a[key].toString().toLowerCase() === searchValue) {
17
+ aMatchCount++;
18
+ }
19
+ if (b[key] && b[key].toString().toLowerCase() === searchValue) {
20
+ bMatchCount++;
21
+ }
22
+ if (a[key] && a[key].toString().toLowerCase().includes(searchValue)) {
23
+ aMatchCount += 0.5;
24
+ }
25
+ if (b[key] && b[key].toString().toLowerCase().includes(searchValue)) {
26
+ bMatchCount += 0.5;
27
+ }
28
+ });
29
+ return bMatchCount - aMatchCount;
30
+ });
31
+ };
32
+ exports.searchAndSortData = searchAndSortData;
33
+ function debounce(func, delay) {
34
+ var timer;
35
+ return function () {
36
+ var args = [];
37
+ for (var _i = 0; _i < arguments.length; _i++) {
38
+ args[_i] = arguments[_i];
39
+ }
40
+ clearTimeout(timer);
41
+ timer = setTimeout(function () {
42
+ func.apply(void 0, args);
43
+ }, delay);
44
+ };
45
+ }
46
+ exports.debounce = debounce;
package/dist/Utils/table.d.ts CHANGED
@@ -7,5 +7,3 @@ export declare function SortMultiColumnData(data: Record<string, string | number
7
7
  export declare const getPreviousColumnWidth: (columns: KaTableProps["columns"], key: string) => any;
8
8
  export declare const getFieldType: (header: string, data: DataObject[]) => "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function";
9
9
  export declare const calculateLeftOffset: (columns: number[], index: number) => number;
10
- export declare const searchAndSortData: (data: DataObject[], searchValues: Record<string, string>) => DataObject[];
11
- export declare function debounce<T extends (...args: any[]) => void>(func: T, delay: number): (...args: Parameters<T>) => void;
package/dist/Utils/table.js CHANGED
@@ -9,7 +9,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
9
9
  return to.concat(ar || Array.prototype.slice.call(from));
10
10
  };
11
11
  Object.defineProperty(exports, "__esModule", { value: true });
12
- exports.debounce = exports.searchAndSortData = exports.calculateLeftOffset = exports.getFieldType = exports.getPreviousColumnWidth = exports.SortMultiColumnData = void 0;
12
+ exports.calculateLeftOffset = exports.getFieldType = exports.getPreviousColumnWidth = exports.SortMultiColumnData = void 0;
13
13
  function SortMultiColumnData(data, sortConfig) {
14
14
  if (!sortConfig.length)
15
15
  return data;
@@ -39,6 +39,15 @@ var getPreviousColumnWidth = function (columns, key) {
39
39
  return 0;
40
40
  };
41
41
  exports.getPreviousColumnWidth = getPreviousColumnWidth;
42
+ // export function calculateLeftOffset(columns: any, currentIndex: number) {
43
+ // let offset = 0;
44
+ // for (let i = 0; i < currentIndex; i++) {
45
+ // if (columns[i].isFreeze) {
46
+ // offset += columns[i].width || 100;
47
+ // }
48
+ // }
49
+ // return offset;
50
+ // }
42
51
  var getFieldType = function (header, data) {
43
52
  for (var _i = 0, data_1 = data; _i < data_1.length; _i++) {
44
53
  var row = data_1[_i];
@@ -53,46 +62,3 @@ var calculateLeftOffset = function (columns, index) {
53
62
  return columns.slice(0, index).reduce(function (sum, width) { return sum + width; }, 0);
54
63
  };
55
64
  exports.calculateLeftOffset = calculateLeftOffset;
56
- var searchAndSortData = function (data, searchValues) {
57
- var filteredData = data.filter(function (item) {
58
- return Object.keys(searchValues).every(function (key) {
59
- var searchValue = searchValues[key].toLowerCase();
60
- return item[key].toString().toLowerCase().includes(searchValue);
61
- });
62
- });
63
- return filteredData.sort(function (a, b) {
64
- var aMatchCount = 0;
65
- var bMatchCount = 0;
66
- Object.keys(searchValues).forEach(function (key) {
67
- var searchValue = searchValues[key].toLowerCase();
68
- if (a[key] && a[key].toString().toLowerCase() === searchValue) {
69
- aMatchCount++;
70
- }
71
- if (b[key] && b[key].toString().toLowerCase() === searchValue) {
72
- bMatchCount++;
73
- }
74
- if (a[key] && a[key].toString().toLowerCase().includes(searchValue)) {
75
- aMatchCount += 0.5;
76
- }
77
- if (b[key] && b[key].toString().toLowerCase().includes(searchValue)) {
78
- bMatchCount += 0.5;
79
- }
80
- });
81
- return bMatchCount - aMatchCount;
82
- });
83
- };
84
- exports.searchAndSortData = searchAndSortData;
85
- function debounce(func, delay) {
86
- var timer;
87
- return function () {
88
- var args = [];
89
- for (var _i = 0; _i < arguments.length; _i++) {
90
- args[_i] = arguments[_i];
91
- }
92
- clearTimeout(timer);
93
- timer = setTimeout(function () {
94
- func.apply(void 0, args);
95
- }, delay);
96
- };
97
- }
98
- exports.debounce = debounce;
package/dist/index.d.ts CHANGED
@@ -39,6 +39,5 @@ import VerifyEmailOtp from "./Components/EmailCards/VerifyEmailOtp/VerifyEmailOt
39
39
  import withTheme from "./withTheme";
40
40
  import { useCustomTheme } from "./Theme/useCustomTheme";
41
41
  import { ThemesList } from "./Theme";
42
- import { debounce } from "./Utils/table";
43
- 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, };
42
+ 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, };
44
43
  export default withTheme;
package/dist/index.js CHANGED
@@ -28,7 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
28
28
  };
29
29
  Object.defineProperty(exports, "__esModule", { value: true });
30
30
  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;
31
- exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = void 0;
31
+ exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = void 0;
32
32
  var Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
33
33
  exports.Accordian = Accordion_1.default;
34
34
  var AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
@@ -127,6 +127,4 @@ var useCustomTheme_1 = require("./Theme/useCustomTheme");
127
127
  Object.defineProperty(exports, "useCustomTheme", { enumerable: true, get: function () { return useCustomTheme_1.useCustomTheme; } });
128
128
  var Theme_1 = require("./Theme");
129
129
  Object.defineProperty(exports, "ThemesList", { enumerable: true, get: function () { return Theme_1.ThemesList; } });
130
- var table_1 = require("./Utils/table");
131
- Object.defineProperty(exports, "debounce", { enumerable: true, get: function () { return table_1.debounce; } });
132
130
  exports.default = withTheme_1.default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "1.1.51",
3
+ "version": "1.1.52",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",