pixelize-design-library 1.1.37 → 1.1.40

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 (11) hide show
  1. package/dist/Components/DatePicker/DatePicker.js +1 -1
  2. package/dist/Components/ProfileCard/ProfileCard.d.ts +1 -1
  3. package/dist/Components/ProfileCard/ProfileCard.js +5 -3
  4. package/dist/Components/ProfileCard/ProfileCardProps.d.ts +1 -0
  5. package/dist/Components/SideBar/SideBar.js +4 -4
  6. package/dist/Components/Table/Components/Pagination.d.ts +1 -1
  7. package/dist/Components/Table/Components/TableBody.js +3 -2
  8. package/dist/Components/Table/TableProps.d.ts +5 -5
  9. package/dist/Pages/datePick.d.ts +1 -1
  10. package/dist/Utils/table.d.ts +1 -1
  11. package/package.json +1 -1
package/dist/Components/DatePicker/DatePicker.js CHANGED
@@ -32,7 +32,7 @@ function DatePicker(_a) {
32
32
  ? dateTimeFormat
33
33
  ? dateTimeFormat
34
34
  : "MM/dd/yyyy h:mm aa"
35
- : dateFormat, showTimeSelect: showTimeSelect, timeFormat: timeFormat, timeIntervals: timeIntervals, timeCaption: timeCaption, id: id, name: name, customInput: react_1.default.createElement(react_2.Input, { size: "sm", bg: theme.colors.backgroundColor.light, style: { border: error ? "1px solid #DC143C" : "" } }) })),
35
+ : dateFormat, showTimeSelect: showTimeSelect, timeFormat: timeFormat, timeIntervals: timeIntervals, timeCaption: timeCaption, id: id, name: name, customInput: react_1.default.createElement(react_2.Input, { size: "sm", bg: theme.colors.backgroundColor.light, style: { border: error ? "2px solid #DC143C" : "" } }) })),
36
36
  error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
37
37
  helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
38
38
  }
package/dist/Components/ProfileCard/ProfileCard.d.ts CHANGED
@@ -9,4 +9,4 @@ export declare const ProfileCardBody: React.FC<{
9
9
  export declare const ProfileCardFooter: React.FC<{
10
10
  children: React.ReactNode;
11
11
  }>;
12
- export default function ProfileCard({ maxW, align, variant, direction, justify, children, size, color, overflow, dividercolor, dividersize, dividervariant, CardStyle, borderTopColor, borderLeftColor, }: ProfileCardProps): React.JSX.Element;
12
+ export default function ProfileCard({ maxW, align, variant, direction, justify, children, size, color, overflow, dividercolor, dividersize, dividervariant, CardStyle, CardHeaderStyle, borderTopColor, borderLeftColor, }: ProfileCardProps): React.JSX.Element;
package/dist/Components/ProfileCard/ProfileCard.js CHANGED
@@ -33,17 +33,19 @@ var ProfileCardFooter = function (_a) {
33
33
  };
34
34
  exports.ProfileCardFooter = ProfileCardFooter;
35
35
  function ProfileCard(_a) {
36
- var maxW = _a.maxW, align = _a.align, variant = _a.variant, direction = _a.direction, justify = _a.justify, children = _a.children, size = _a.size, color = _a.color, overflow = _a.overflow, _b = _a.dividercolor, dividercolor = _b === void 0 ? "#d5cfcf" : _b, _c = _a.dividersize, dividersize = _c === void 0 ? "0.5px" : _c, _d = _a.dividervariant, dividervariant = _d === void 0 ? "solid" : _d, CardStyle = _a.CardStyle, borderTopColor = _a.borderTopColor, borderLeftColor = _a.borderLeftColor;
36
+ var maxW = _a.maxW, align = _a.align, variant = _a.variant, direction = _a.direction, justify = _a.justify, children = _a.children, size = _a.size, color = _a.color, overflow = _a.overflow, _b = _a.dividercolor, dividercolor = _b === void 0 ? "#d5cfcf" : _b, _c = _a.dividersize, dividersize = _c === void 0 ? "0.5px" : _c, _d = _a.dividervariant, dividervariant = _d === void 0 ? "solid" : _d, CardStyle = _a.CardStyle, CardHeaderStyle = _a.CardHeaderStyle, borderTopColor = _a.borderTopColor, borderLeftColor = _a.borderLeftColor;
37
37
  var isReactElement = function (child) {
38
38
  return child !== null && typeof child === "object" && "type" in child;
39
39
  };
40
40
  var header = react_1.default.Children.toArray(children).find(function (child) { return isReactElement(child) && child.type === exports.ProfileCardHeader; });
41
41
  var body = react_1.default.Children.toArray(children).find(function (child) { return isReactElement(child) && child.type === exports.ProfileCardBody; });
42
42
  var footer = react_1.default.Children.toArray(children).find(function (child) { return isReactElement(child) && child.type === exports.ProfileCardFooter; });
43
- var StylesWithBorder = borderLeftColor ? __assign(__assign({}, CardStyle), { borderLeft: "2px solid #3182CE" }) : borderTopColor ? __assign(__assign({}, CardStyle), { borderTop: "2px solid #3182CE" }) : __assign({}, CardStyle);
43
+ var StylesWithBorder = borderLeftColor
44
+ ? __assign(__assign({}, CardStyle), { borderLeft: "2px solid #3182CE" }) : borderTopColor
45
+ ? __assign(__assign({}, CardStyle), { borderTop: "2px solid #3182CE" }) : __assign({}, CardStyle);
44
46
  return (react_1.default.createElement(react_2.Card, { maxW: maxW, align: align, variant: variant, direction: direction, justify: justify, size: size, overflow: overflow, colorScheme: color, style: StylesWithBorder },
45
47
  header && (react_1.default.createElement(react_1.default.Fragment, null,
46
- react_1.default.createElement(react_2.CardHeader, { style: { fontWeight: "bold" } }, header),
48
+ react_1.default.createElement(react_2.CardHeader, { sx: __assign(__assign({}, CardHeaderStyle), { fontWeight: "bold" }) }, header),
47
49
  react_1.default.createElement(react_2.Divider, { style: {
48
50
  borderColor: dividercolor,
49
51
  borderWidth: dividersize,
package/dist/Components/ProfileCard/ProfileCardProps.d.ts CHANGED
@@ -9,6 +9,7 @@ export type ProfileCardProps = Pick<CardProps, "direction" | "maxW" | "align" |
9
9
  dividersize?: string;
10
10
  dividervariant?: "solid" | "dashed" | "dotted" | "double" | "groove" | "ridge" | "inset" | "outset";
11
11
  CardStyle?: React.CSSProperties;
12
+ CardHeaderStyle?: React.CSSProperties;
12
13
  borderTopColor?: boolean;
13
14
  borderLeftColor?: boolean;
14
15
  };
package/dist/Components/SideBar/SideBar.js CHANGED
@@ -38,7 +38,7 @@ function Sidebar(_a) {
38
38
  return (react_1.default.createElement(react_2.Menu, { key: menu.title, placement: "right" },
39
39
  react_1.default.createElement(react_2.Link, { backgroundColor: activeMenu === menu.title && !toggle
40
40
  ? theme.colors.primary[500]
41
- : "none",
41
+ : "none", paddingLeft: toggle ? "" : "20px",
42
42
  // borderRadius={8}
43
43
  _hover: {
44
44
  textDecor: "none",
@@ -58,15 +58,15 @@ function Sidebar(_a) {
58
58
  menu.subMenu.map(function (subMenuItem) { return (react_1.default.createElement(react_2.MenuItem, { key: subMenuItem.title }, subMenuItem.title)); })))));
59
59
  })));
60
60
  }, [activeMenu, menus, handleMenuClick, toggle, theme.colors]);
61
- return (react_1.default.createElement(react_2.Flex, { pos: "sticky", h: "100vh", boxShadow: theme.shadows.lg, w: toggle ? "75px" : "200px", flexDir: "column", justifyContent: "space-between", background: theme.colors.backgroundColor.light },
61
+ return (react_1.default.createElement(react_2.Flex, { transition: "all 0.5s", pos: "sticky", h: "100vh", boxShadow: theme.shadows.lg, w: toggle ? "75px" : "200px", flexDir: "column", justifyContent: "space-between", background: theme.colors.backgroundColor.light },
62
62
  react_1.default.createElement(react_2.Flex, { flexDir: "column", w: "100%", alignItems: "center", as: "nav", h: "100vh" },
63
63
  logo ? (react_1.default.createElement(react_2.Flex, { mt: 5, alignItems: "center", gap: 5 },
64
64
  react_1.default.createElement(react_2.Image, { borderRadius: "full", boxSize: "45px", src: logo, alt: "Company Logo" }),
65
65
  react_1.default.createElement(react_2.Text, { display: toggle ? "none" : "flex", fontSize: 20, fontWeight: 800 }, companyName))) : (react_1.default.createElement(react_2.Box, { ml: "-8px", mt: 5, width: "100%", display: "flex", justifyContent: "center", alignItems: "center" },
66
66
  react_1.default.createElement(react_2.Text, { fontWeight: 800, fontSize: "1.3rem", textAlign: "center" }, toggle ? companyName[0] : companyName))),
67
- react_1.default.createElement(react_2.Flex, { position: "absolute", left: toggle ? "55px" : "180px", top: "60px", background: theme.colors.primary[500], borderRadius: "23px" },
67
+ react_1.default.createElement(react_2.Flex, { transition: "all 0.5s", position: "absolute", left: toggle ? "55px" : "180px", top: "60px", background: theme.colors.primary[500], borderRadius: "23px" },
68
68
  react_1.default.createElement(react_2.IconButton, { background: "none", icon: toggle ? (react_1.default.createElement(fi_1.FiChevronRight, { color: (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.white })) : (react_1.default.createElement(fi_1.FiChevronLeft, { color: (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.white })), _hover: { background: "none" }, onClick: changeToggle, "aria-label": "Toggle Navigation" })),
69
- react_1.default.createElement(react_2.Flex, { mt: 35, flexDir: "column", w: "100%", alignItems: toggle ? "center" : "flex-start", h: "100vh", overflow: "auto", css: Sidebar_1.FlexCss },
69
+ react_1.default.createElement(react_2.Flex, { mt: 50, flexDir: "column", w: "100%", alignItems: toggle ? "center" : "flex-start", h: "100vh", overflow: "auto", css: Sidebar_1.FlexCss },
70
70
  react_1.default.createElement(RenderMenuItems, null)))));
71
71
  }
72
72
  exports.default = Sidebar;
package/dist/Components/Table/Components/Pagination.d.ts CHANGED
@@ -7,7 +7,7 @@ type PaginationProps = Pick<TableProps, "isVisiblity" | "columns"> & {
7
7
  rowsPerPage: number;
8
8
  currentPage: number;
9
9
  pages: number;
10
- handleColumnVisibilityChange: (header: string) => void;
10
+ handleColumnVisibilityChange: (header: string | number) => void;
11
11
  setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
12
12
  dataLength: number;
13
13
  };
package/dist/Components/Table/Components/TableBody.js CHANGED
@@ -43,7 +43,7 @@ var TableBody = function (_a) {
43
43
  ? (0, table_1.calculateLeftOffset)(columnWidths, headerIndex) +
44
44
  (isCheckbox ? 50 : 0)
45
45
  : 0;
46
- return (visibleColumns[header.label] && (react_2.default.createElement(react_1.Td, { key: headerIndex + 1, onClick: function () {
46
+ return (visibleColumns[header.label] && (react_2.default.createElement(react_1.Td, { maxWidth: 500, minWidth: 120, key: headerIndex + 1, onClick: function () {
47
47
  return !header.node
48
48
  ? handleRowClick(row, {
49
49
  label: header.label,
@@ -56,7 +56,8 @@ var TableBody = function (_a) {
56
56
  ? theme.colors.backgroundColor.light
57
57
  : "white", textOverflow: "ellipsis", border: noBorders
58
58
  ? "none"
59
- : "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[isFrozen ? 300 : 200]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns"), boxSizing: "border-box", color: isFrozen ? freezedTextColor : undefined }, header.node ? header.node(row) : row[header.id])));
59
+ : "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[isFrozen ? 300 : 200]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns"), boxSizing: "border-box", color: isFrozen ? freezedTextColor : undefined },
60
+ react_2.default.createElement(react_1.Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block", overflow: "hidden" }, header.node ? header.node(row) : row[header.id]))));
60
61
  })));
61
62
  })));
62
63
  };
package/dist/Components/Table/TableProps.d.ts CHANGED
@@ -16,14 +16,14 @@ export type TableProps = {
16
16
  noBorders?: boolean;
17
17
  onSelection?: (selected: (string | number)[]) => void;
18
18
  isPagintaion?: boolean;
19
- onRowClick?: (row: DataObject, header: Record<string, string>) => void;
19
+ onRowClick?: (row: DataObject, header: Record<string | number, string | number>) => void;
20
20
  };
21
21
  export type DataObject = {
22
22
  [key: string]: string | number;
23
23
  };
24
24
  export type TableHeaderProps = {
25
- label: string;
26
- id: string;
25
+ label: string | number;
26
+ id: string | number;
27
27
  isSort?: boolean;
28
28
  isSearch?: boolean;
29
29
  isFreeze?: boolean;
@@ -34,12 +34,12 @@ export type ExportOption = {
34
34
  id: string;
35
35
  };
36
36
  export type ColumnSortingProps = {
37
- column: string;
37
+ column: string | number;
38
38
  direction: "asc" | "desc" | "none";
39
39
  };
40
40
  export type TableHeaderPageProps = Pick<TableProps, "columns" | "isCheckbox" | "headerBgColor" | "headerTextColor" | "freezedBgColor" | "freezedTextColor" | "noBorders" | "isLoading"> & {
41
41
  visibleColumns: Record<string, boolean>;
42
- handleSort: (label: string, type: "asc" | "desc" | "none") => void;
42
+ handleSort: (label: string | number, type: "asc" | "desc" | "none") => void;
43
43
  activeHeader?: string | null;
44
44
  isPopoverOpen?: boolean;
45
45
  closePopover?: () => void;
package/dist/Pages/datePick.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- import React from 'react';
1
+ import React from "react";
2
2
  declare const DatePick: () => React.JSX.Element;
3
3
  export default DatePick;
package/dist/Utils/table.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { KaTableProps } from "../Components/KaTable/KaTableProps";
2
2
  import { DataObject } from "../Components/Table/TableProps";
3
3
  export declare function SortMultiColumnData(data: Record<string, string | number>[], sortConfig: {
4
- column: string;
4
+ column: string | number;
5
5
  direction: string;
6
6
  }[]): Record<string, string | number>[];
7
7
  export declare const getPreviousColumnWidth: (columns: KaTableProps["columns"], key: string) => any;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "1.1.37",
3
+ "version": "1.1.40",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",