pixelize-design-library 1.1.23 → 1.1.25

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.
@@ -16,4 +16,15 @@ export type ButtonGroupIconProps = {
16
16
  buttonStyle?: React.CSSProperties;
17
17
  onBlurLeftIcon?: () => void;
18
18
  onBlurRightIcon?: () => void;
19
+ dropdownOptions?: {
20
+ label: string;
21
+ id: string | number;
22
+ }[];
23
+ onDropdownOptionClick?: (option: {
24
+ label: string;
25
+ id: string | number;
26
+ }) => void;
27
+ rightIconDropdown?: boolean;
28
+ menulistStyle?: React.CSSProperties;
29
+ menuItemStyle?: React.CSSProperties;
19
30
  };
@@ -1,3 +1,5 @@
1
1
  import React from "react";
2
2
  import { ButtonGroupIconProps } from "./ButtonGoupIconProps";
3
- export default function ButtonGroupIcon({ leftIcon, rightIcon, onLeftIconClick, onRightIconClick, buttonText, onButtonClick, onButtongroupClick, size, variant, color, buttonGroupStyle, buttonGroupLeftIconStyle, buttonGroupRightIconStyle, buttonStyle, onBlurLeftIcon, onBlurRightIcon, }: ButtonGroupIconProps): React.JSX.Element;
3
+ 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
4
+ onDropdownOptionClick, // New prop to handle option clicks
5
+ rightIconDropdown, menulistStyle, menuItemStyle }: ButtonGroupIconProps): React.JSX.Element;
@@ -1,14 +1,49 @@
1
1
  "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
4
24
  };
5
25
  Object.defineProperty(exports, "__esModule", { value: true });
6
- var react_1 = __importDefault(require("react"));
26
+ var react_1 = __importStar(require("react"));
7
27
  var react_2 = require("@chakra-ui/react");
8
28
  var useCustomTheme_1 = require("../../Theme/useCustomTheme");
9
29
  function ButtonGroupIcon(_a) {
10
- 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;
30
+ 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
31
+ onDropdownOptionClick = _a.onDropdownOptionClick, // New prop to handle option clicks
32
+ rightIconDropdown = _a.rightIconDropdown, menulistStyle = _a.menulistStyle, menuItemStyle = _a.menuItemStyle;
11
33
  var theme = (0, useCustomTheme_1.useCustomTheme)();
34
+ var _b = (0, react_1.useState)(false), isDropdownOpen = _b[0], setIsDropdownOpen = _b[1];
35
+ var handleRightIconClick = function () {
36
+ setIsDropdownOpen(!isDropdownOpen);
37
+ if (onRightIconClick) {
38
+ onRightIconClick();
39
+ }
40
+ };
41
+ var handleMenuClick = function (option) { return function () {
42
+ setIsDropdownOpen(false);
43
+ if (onDropdownOptionClick) {
44
+ onDropdownOptionClick(option);
45
+ }
46
+ }; };
12
47
  return (react_1.default.createElement(react_2.ButtonGroup, { size: size, isAttached: true, variant: variant, onClick: onButtongroupClick, colorScheme: color, style: buttonGroupStyle },
13
48
  leftIcon && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Left icon button", icon: leftIcon, onClick: onLeftIconClick, onBlur: onBlurLeftIcon, style: buttonGroupLeftIconStyle, sx: {
14
49
  backgroundColor: theme.colors.primary[500],
@@ -22,7 +57,15 @@ function ButtonGroupIcon(_a) {
22
57
  backgroundColor: theme.colors.primary[400],
23
58
  },
24
59
  } }, buttonText),
25
- rightIcon && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Right icon button", icon: rightIcon, onClick: onRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: {
60
+ rightIcon && rightIconDropdown ? (react_1.default.createElement(react_2.Menu, { isOpen: isDropdownOpen, onClose: function () { return setIsDropdownOpen(false); } },
61
+ 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: {
62
+ backgroundColor: theme.colors.primary[500],
63
+ "&:hover": {
64
+ backgroundColor: theme.colors.primary[400],
65
+ },
66
+ } }),
67
+ react_1.default.createElement(react_2.Portal, null,
68
+ 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: handleMenuClick(option), style: menuItemStyle }, option.label)); }))))) : rightIcon && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Right icon button", icon: rightIcon, onClick: onRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: {
26
69
  backgroundColor: theme.colors.primary[500],
27
70
  "&:hover": {
28
71
  backgroundColor: theme.colors.primary[400],
@@ -68,9 +68,8 @@ var Dropdown = (0, react_1.forwardRef)(function (_a, ref) {
68
68
  ButtonText));
69
69
  var TextToggle = (react_1.default.createElement(react_2.Flex, { onClick: onToggle, align: "center", style: dropDownButtonStyle, cursor: "pointer" },
70
70
  DropdownIcon,
71
- " \u00A0 ",
71
+ " ",
72
72
  text,
73
- " \u00A0",
74
73
  isVisibleIconShow && react_1.default.createElement(react_2.Icon, { as: fi_1.FiChevronDown })));
75
74
  return dropdownType === "button" ? ButtonToggle : TextToggle;
76
75
  };
@@ -27,7 +27,6 @@ var react_1 = __importStar(require("react"));
27
27
  var react_2 = require("@chakra-ui/react");
28
28
  var bs_1 = require("react-icons/bs");
29
29
  var fa_1 = require("react-icons/fa");
30
- var fi_1 = require("react-icons/fi");
31
30
  var CustomHeader = function (_a) {
32
31
  var column = _a.column, onSortChange = _a.onSortChange, onMenuItemClick = _a.onMenuItemClick, menuItems = _a.menuItems, columnVisibility = _a.columnVisibility;
33
32
  // console.log(columnVisibility, "columnVisibility");
@@ -79,29 +78,27 @@ var CustomHeader = function (_a) {
79
78
  display: "flex",
80
79
  justifyContent: "space-between",
81
80
  alignItems: "center",
82
- } },
83
- react_1.default.createElement(fi_1.FiInfo, null),
84
- menuItems && (react_1.default.createElement(react_2.Menu, null,
85
- isOpen && (react_1.default.createElement(react_2.MenuButton, { ref: filterButtonRef, as: react_2.IconButton, "aria-label": "More options", icon: react_1.default.createElement(bs_1.BsThreeDots, null), size: "sm", variant: "ghost", sx: {
86
- _hover: {
87
- background: "none",
88
- },
89
- _active: {
90
- background: "none",
91
- },
92
- } })),
93
- react_1.default.createElement(react_2.Portal, null,
94
- react_1.default.createElement(react_2.MenuList, { sx: {
95
- boxShadow: "0px 0px 20px 11px rgba(0, 0, 0, 0.1)",
96
- borderRadius: "8px",
97
- padding: "8px",
98
- backgroundColor: "white",
99
- }, onMouseLeave: onClose }, menuItems === null || menuItems === void 0 ? void 0 : menuItems.map(function (item, index) { return (react_1.default.createElement(react_1.default.Fragment, { key: index },
100
- item.submenu ? (react_1.default.createElement(react_2.MenuItem, { closeOnSelect: false, onClick: handleSubmenuToggle }, item.label)) : (react_1.default.createElement(react_2.MenuItem, { onClick: function () { return handleMenuItemClick(item.action); } }, item.label)),
101
- isSubmenuOpen && item.submenu && submenuPosition && (react_1.default.createElement(react_2.Box, { position: "absolute", top: submenuPosition.top, left: submenuPosition.left, zIndex: 1, boxShadow: "0px 0px 20px 11px rgba(0, 0, 0, 0.1)", borderRadius: "8px", backgroundColor: "white", padding: "8px", width: "200px" },
102
- react_1.default.createElement(react_2.MenuGroup, { onMouseLeave: onClose }, item.submenu.map(function (subItem, subIndex) { return (react_1.default.createElement(react_2.MenuItem, { key: subIndex, closeOnSelect: true, onClick: function () {
103
- return handleMenuItemClick(subItem.action);
104
- } }, subItem.label)); })))))); }))))))),
81
+ } }, menuItems && (react_1.default.createElement(react_2.Menu, null,
82
+ isOpen && (react_1.default.createElement(react_2.MenuButton, { ref: filterButtonRef, as: react_2.IconButton, "aria-label": "More options", icon: react_1.default.createElement(bs_1.BsThreeDots, null), size: "sm", variant: "ghost", sx: {
83
+ _hover: {
84
+ background: "none",
85
+ },
86
+ _active: {
87
+ background: "none",
88
+ },
89
+ } })),
90
+ react_1.default.createElement(react_2.Portal, null,
91
+ react_1.default.createElement(react_2.MenuList, { sx: {
92
+ boxShadow: "0px 0px 20px 11px rgba(0, 0, 0, 0.1)",
93
+ borderRadius: "8px",
94
+ padding: "8px",
95
+ backgroundColor: "white",
96
+ }, onMouseLeave: onClose }, menuItems === null || menuItems === void 0 ? void 0 : menuItems.map(function (item, index) { return (react_1.default.createElement(react_1.default.Fragment, { key: index },
97
+ item.submenu ? (react_1.default.createElement(react_2.MenuItem, { closeOnSelect: false, onClick: handleSubmenuToggle }, item.label)) : (react_1.default.createElement(react_2.MenuItem, { onClick: function () { return handleMenuItemClick(item.action); } }, item.label)),
98
+ isSubmenuOpen && item.submenu && submenuPosition && (react_1.default.createElement(react_2.Box, { position: "absolute", top: submenuPosition.top, left: submenuPosition.left, zIndex: 1, boxShadow: "0px 0px 20px 11px rgba(0, 0, 0, 0.1)", borderRadius: "8px", backgroundColor: "white", padding: "8px", width: "200px" },
99
+ react_1.default.createElement(react_2.MenuGroup, { onMouseLeave: onClose }, item.submenu.map(function (subItem, subIndex) { return (react_1.default.createElement(react_2.MenuItem, { key: subIndex, closeOnSelect: true, onClick: function () {
100
+ return handleMenuItemClick(subItem.action);
101
+ } }, subItem.label)); })))))); }))))))),
105
102
  react_1.default.createElement(react_2.Box, { sx: { position: "absolute", right: 20, top: 0 } }, isOpen && (react_1.default.createElement(react_2.Flex, { alignItems: "center" },
106
103
  react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", backgroundColor: "white", padding: sortState === "asc" ? "1px" : "2px", borderRadius: "10px", flexDirection: "column", width: "20px", height: "20px", onClick: handleSortClick, cursor: "pointer", boxShadow: "0px 0px 20px 11px rgba(0, 0, 0, 0.1)", transition: "transform 0.2s ease-in-out", _hover: { transform: "scale(1.1)" } },
107
104
  react_1.default.createElement(react_2.Box, { transition: "opacity 0.2s ease-in-out", opacity: sortState === "none" ? 1 : 0, position: "absolute" },
@@ -46,7 +46,7 @@ require("./ka-table.css");
46
46
  var useMergedChildComponents_1 = __importDefault(require("./useMergedChildComponents"));
47
47
  var selectionCellColumn = {
48
48
  key: "select-cell",
49
- width: 65,
49
+ width: 50,
50
50
  columnFreeze: true,
51
51
  customHeader: false,
52
52
  className: "select-cell",
@@ -33,6 +33,6 @@ var SelectionCell = function (_a) {
33
33
  }
34
34
  }
35
35
  };
36
- return react_1.default.createElement("input", { type: "checkbox", checked: selected, onChange: onChangeHandle });
36
+ return react_1.default.createElement("input", { type: "checkbox", checked: selected, onChange: onChangeHandle, style: { marginLeft: "37%" } });
37
37
  };
38
38
  exports.default = react_1.default.memo(SelectionCell);
@@ -49,6 +49,6 @@ var SelectionHeader = function (_a) {
49
49
  else {
50
50
  table.deselectAllFilteredRows();
51
51
  }
52
- } }));
52
+ }, style: { marginLeft: "40%" } }));
53
53
  };
54
54
  exports.default = react_1.default.memo(SelectionHeader);
@@ -4,22 +4,10 @@
4
4
  border-color: #2caa3d;
5
5
  }
6
6
 
7
- /* .ka-thead-row,
8
- .ka-row {
9
- border: 1px solid #d0d4e4;
10
- }
11
-
12
- .ka-thead-cell,
13
- .ka-cell {
14
- border-right: 1px solid #d0d4e4;
15
- } */
16
-
17
- .ka-thead-cell {
18
- text-align: center;
19
- padding: 7px 10px;
7
+ .ka-thead-cell {
8
+ padding: 7px 7px;
20
9
  }
21
10
  .ka-cell {
22
- text-align: center;
23
11
  padding: 7px 0px;
24
12
  }
25
13
 
@@ -32,6 +20,7 @@
32
20
  overflow: hidden;
33
21
  text-overflow: ellipsis;
34
22
  white-space: nowrap;
23
+ padding-left:5%;
35
24
  }
36
25
  .ka-row {
37
26
  box-sizing: unset;
@@ -41,4 +30,4 @@
41
30
  .ka-table-wrapper {
42
31
  border-bottom: 2px solid #d8d9db;
43
32
  border-right: 2px solid #d8d9db;
44
- }
33
+ } /**/
@@ -133,7 +133,7 @@ var useMergedChildComponents = function (childComponents, onSortChange, onMenuIt
133
133
  if (props.column.columnFreeze) {
134
134
  var stickyLeft = getPreviousColumnWidth(columns, props.column.key);
135
135
  return {
136
- style: __assign(__assign({}, props.column.style), { position: "sticky", left: stickyLeft, zIndex: 3, backgroundColor: "#d9d9db", textAlign: "center" }),
136
+ style: __assign(__assign({}, props.column.style), { position: "sticky", left: stickyLeft, zIndex: 3, backgroundColor: "#d9d9db" }),
137
137
  };
138
138
  }
139
139
  },
@@ -1,3 +1,3 @@
1
1
  import React from "react";
2
2
  import { NavbarProps } from "./NavigationBarProps";
3
- export default function NavBar({ userAvathar, userName, navMenu, moreIcon, handleNavOnClick, handleLogout, logoutText, }: NavbarProps): React.JSX.Element;
3
+ export default function NavBar({ userAvathar, userName, navMenu, moreIcon, handleNavOnClick, handleLogout, logoutText, navigationBarText }: NavbarProps): React.JSX.Element;
@@ -7,11 +7,11 @@ var react_1 = __importDefault(require("react"));
7
7
  var react_2 = require("@chakra-ui/react");
8
8
  var useCustomTheme_1 = require("../../Theme/useCustomTheme");
9
9
  function NavBar(_a) {
10
- var userAvathar = _a.userAvathar, userName = _a.userName, navMenu = _a.navMenu, moreIcon = _a.moreIcon, handleNavOnClick = _a.handleNavOnClick, handleLogout = _a.handleLogout, logoutText = _a.logoutText;
10
+ 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
11
  var theme = (0, useCustomTheme_1.useCustomTheme)();
12
12
  return (react_1.default.createElement(react_2.Box, { bg: theme.colors.backgroundColor.light, px: 4, boxShadow: theme.shadows.sm },
13
13
  react_1.default.createElement(react_2.Flex, { h: 16, alignItems: "center", justifyContent: "space-between" },
14
- react_1.default.createElement(react_2.Box, null, "Text"),
14
+ react_1.default.createElement(react_2.Box, null, navigationBarText),
15
15
  react_1.default.createElement(react_2.Flex, { alignItems: "center" },
16
16
  react_1.default.createElement(react_2.Stack, { direction: "row", spacing: 7 },
17
17
  react_1.default.createElement(react_2.Menu, null,
@@ -6,6 +6,7 @@ export type NavbarProps = {
6
6
  handleNavOnClick: (url: string) => void;
7
7
  handleLogout: () => void;
8
8
  logoutText: string;
9
+ navigationBarText?: string;
9
10
  };
10
11
  export type MenuProps = {
11
12
  title: string;
@@ -1,3 +1,3 @@
1
1
  import React from "react";
2
2
  import { NoteTextAreaProps } from "./NoteTextAreaProps";
3
- export default function NoteTextArea({ width, handleSubmit, handleCancel, value, title, file, isEditable, saveButtonLoading, }: NoteTextAreaProps): React.JSX.Element;
3
+ export default function NoteTextArea({ width, handleSubmit, handleCancel, value, title, file, isEditable, saveButtonLoading, maxFileSize, maxFilesSizeError, }: NoteTextAreaProps): React.JSX.Element;
@@ -87,15 +87,17 @@ var Button = styled_1.default.button(templateObject_8 || (templateObject_8 = __m
87
87
  var CancelButton = styled_1.default.button(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n border: none;\n color: #5e5c5c;\n padding: 3px 15px;\n text-align: center;\n text-decoration: none;\n background: white;\n font-size: 1rem;\n margin-right: 5px;\n border-radius: 5px;\n"], ["\n border: none;\n color: #5e5c5c;\n padding: 3px 15px;\n text-align: center;\n text-decoration: none;\n background: white;\n font-size: 1rem;\n margin-right: 5px;\n border-radius: 5px;\n"])));
88
88
  var FileViewer = styled_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 300px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 300px;\n"])));
89
89
  var FileEdit = (0, styled_1.default)(fi_1.FiX)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n cursor: pointer;\n color: #ff0000;\n"], ["\n cursor: pointer;\n color: #ff0000;\n"])));
90
+ var ErrorText = styled_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n color: #ff0000;\n font-size: 0.8rem;\n margin-top: 8px;\n"], ["\n color: #ff0000;\n font-size: 0.8rem;\n margin-top: 8px;\n"])));
90
91
  function NoteTextArea(_a) {
91
- var _b = _a.width, width = _b === void 0 ? "100%" : _b, handleSubmit = _a.handleSubmit, handleCancel = _a.handleCancel, value = _a.value, title = _a.title, file = _a.file, _c = _a.isEditable, isEditable = _c === void 0 ? false : _c, saveButtonLoading = _a.saveButtonLoading;
92
+ var _b = _a.width, width = _b === void 0 ? "100%" : _b, handleSubmit = _a.handleSubmit, handleCancel = _a.handleCancel, value = _a.value, title = _a.title, file = _a.file, _c = _a.isEditable, isEditable = _c === void 0 ? false : _c, saveButtonLoading = _a.saveButtonLoading, _d = _a.maxFileSize, maxFileSize = _d === void 0 ? 1 * 1024 * 1024 : _d, _e = _a.maxFilesSizeError, maxFilesSizeError = _e === void 0 ? "Some files are too large. Maximum allowed size is" : _e;
92
93
  var theme = (0, useCustomTheme_1.useCustomTheme)();
93
94
  var noteAreaRef = (0, react_1.useRef)(null);
94
- var _d = (0, react_1.useState)(false), isActive = _d[0], setIsActive = _d[1];
95
- var _e = (0, react_1.useState)(""), noteValue = _e[0], setNoteValue = _e[1];
96
- var _f = (0, react_1.useState)(""), titleValue = _f[0], setTitleValue = _f[1];
97
- var _g = (0, react_1.useState)(false), titleShow = _g[0], setTitleShow = _g[1];
98
- var _h = (0, react_1.useState)([]), files = _h[0], setFiles = _h[1];
95
+ var _f = (0, react_1.useState)(false), isActive = _f[0], setIsActive = _f[1];
96
+ var _g = (0, react_1.useState)(""), noteValue = _g[0], setNoteValue = _g[1];
97
+ var _h = (0, react_1.useState)(""), titleValue = _h[0], setTitleValue = _h[1];
98
+ var _j = (0, react_1.useState)(false), titleShow = _j[0], setTitleShow = _j[1];
99
+ var _k = (0, react_1.useState)([]), files = _k[0], setFiles = _k[1];
100
+ var _l = (0, react_1.useState)(""), fileError = _l[0], setFileError = _l[1];
99
101
  (0, react_1.useEffect)(function () {
100
102
  if (isEditable) {
101
103
  setIsActive(true);
@@ -145,6 +147,7 @@ function NoteTextArea(_a) {
145
147
  setTitleShow(false);
146
148
  setFiles([]);
147
149
  }
150
+ setFileError("");
148
151
  };
149
152
  var handleNoteChange = function (event) {
150
153
  setNoteValue(event.target.value);
@@ -200,12 +203,20 @@ function NoteTextArea(_a) {
200
203
  react_1.default.createElement("div", { style: { display: "flex", alignItems: "center" } },
201
204
  react_1.default.createElement(FileUploadLabel, { htmlFor: "file-upload" },
202
205
  react_1.default.createElement(fi_1.FiPaperclip, null),
203
- react_1.default.createElement("input", { id: "file-upload", type: "file", style: { display: "none" }, onChange: function (event) {
204
- if (event.target.files && event.target.files.length > 0) {
205
- var filesArray = Array.from(event.target.files);
206
- setFiles(__spreadArray(__spreadArray([], files, true), filesArray, true));
206
+ react_1.default.createElement("input", { id: "file-upload", type: "file", style: { display: "none" }, onChange: function (e) {
207
+ var newFiles = Array.from(e.target.files || []);
208
+ var validFiles = newFiles.filter(function (file) { return file.size <= maxFileSize; });
209
+ var invalidFiles = newFiles.filter(function (file) { return file.size > maxFileSize; });
210
+ if (invalidFiles.length > 0) {
211
+ setFileError("".concat(maxFilesSizeError, " ").concat(formatBytes(maxFileSize), "."));
207
212
  }
208
- } })),
213
+ else {
214
+ setFileError("");
215
+ }
216
+ if (validFiles.length > 0) {
217
+ setFiles(function (prevFiles) { return __spreadArray(__spreadArray([], prevFiles, true), validFiles, true); });
218
+ }
219
+ }, multiple: true })),
209
220
  !titleShow && (react_1.default.createElement(react_1.default.Fragment, null,
210
221
  react_1.default.createElement("div", { style: {
211
222
  height: "15px",
@@ -224,6 +235,8 @@ function NoteTextArea(_a) {
224
235
  saveButtonLoading && (react_1.default.createElement("span", { style: { marginRight: "6px" } },
225
236
  react_1.default.createElement(react_2.Spinner, { thickness: "2px", speed: "0.75s", emptyColor: "gray.200", color: "blue.500", size: "xs" }))),
226
237
  "Save"))),
238
+ fileError && react_1.default.createElement(ErrorText, null, fileError),
239
+ " ",
227
240
  files.length > 0 && (react_1.default.createElement("div", null, files.map(function (item, index) { return (react_1.default.createElement(FileViewer, { key: index },
228
241
  react_1.default.createElement(react_1.default.Fragment, null,
229
242
  react_1.default.createElement("span", null, shortenFileName(item.name)),
@@ -233,4 +246,4 @@ function NoteTextArea(_a) {
233
246
  } }))); }))))))));
234
247
  }
235
248
  exports.default = NoteTextArea;
236
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
249
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
@@ -7,4 +7,6 @@ export type NoteTextAreaProps = {
7
7
  isEditable?: boolean;
8
8
  handleCancel?: (isActive: boolean) => void;
9
9
  saveButtonLoading: boolean;
10
+ maxFileSize?: number;
11
+ maxFilesSizeError?: string;
10
12
  };
@@ -1,3 +1,3 @@
1
1
  import React from "react";
2
2
  import { chakraSelectProps } from "./SelectProps";
3
- export default function Select({ placeholder, size, variant, icon, bg, borderColor, color, onChange, onBlur, onFocus, errorBorderColor, isDisabled, isReadOnly, isRequired, value, colorScheme, label, error, errorMessage, helperText, options, width, formControlStyle, isInformation, informationMessage, }: chakraSelectProps): React.JSX.Element;
3
+ export default function Select({ placeholder, size, variant, icon, bg, borderColor, color, onChange, onBlur, onFocus, errorBorderColor, isDisabled, isReadOnly, isRequired, value, colorScheme, label, error, errorMessage, helperText, options, width, formControlStyle, isInformation, informationMessage, selectStyle }: chakraSelectProps): React.JSX.Element;
@@ -32,7 +32,7 @@ var FormLabel_1 = require("../Common/FormLabel");
32
32
  var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
33
33
  var HelperText_1 = __importDefault(require("../Common/HelperText"));
34
34
  function Select(_a) {
35
- var _b = _a.placeholder, placeholder = _b === void 0 ? "Select Option" : _b, _c = _a.size, size = _c === void 0 ? "sm" : _c, _d = _a.variant, variant = _d === void 0 ? "outline" : _d, icon = _a.icon, bg = _a.bg, borderColor = _a.borderColor, color = _a.color, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, errorBorderColor = _a.errorBorderColor, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, _f = _a.value, value = _f === void 0 ? "" : _f, colorScheme = _a.colorScheme, label = _a.label, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, _g = _a.options, options = _g === void 0 ? [] : _g, _h = _a.width, width = _h === void 0 ? 500 : _h, formControlStyle = _a.formControlStyle, _j = _a.isInformation, isInformation = _j === void 0 ? false : _j, informationMessage = _a.informationMessage;
35
+ var _b = _a.placeholder, placeholder = _b === void 0 ? "Select Option" : _b, _c = _a.size, size = _c === void 0 ? "sm" : _c, _d = _a.variant, variant = _d === void 0 ? "outline" : _d, icon = _a.icon, bg = _a.bg, borderColor = _a.borderColor, color = _a.color, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, errorBorderColor = _a.errorBorderColor, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, _f = _a.value, value = _f === void 0 ? "" : _f, colorScheme = _a.colorScheme, label = _a.label, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, _g = _a.options, options = _g === void 0 ? [] : _g, _h = _a.width, width = _h === void 0 ? 500 : _h, formControlStyle = _a.formControlStyle, _j = _a.isInformation, isInformation = _j === void 0 ? false : _j, informationMessage = _a.informationMessage, selectStyle = _a.selectStyle;
36
36
  var getOptionsList = (0, react_1.useCallback)(function () {
37
37
  if (!options.length)
38
38
  return react_1.default.createElement("option", { value: "" }, "No Options");
@@ -47,7 +47,7 @@ function Select(_a) {
47
47
  };
48
48
  return (react_1.default.createElement(react_2.FormControl, { isInvalid: error, style: formControlStyle, width: width },
49
49
  label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })),
50
- react_1.default.createElement(react_2.Select, { placeholder: placeholder, size: size, variant: "flushed", icon: icon, bg: bg, borderColor: borderColor, color: color, isInvalid: error, value: value, onChange: handleOnChange, width: width, onBlur: onBlur, onFocus: onFocus, isDisabled: isDisabled, isReadOnly: isReadOnly, colorScheme: colorScheme, errorBorderColor: errorBorderColor }, getOptionsList()),
50
+ react_1.default.createElement(react_2.Select, { placeholder: placeholder, size: size, variant: "flushed", icon: icon, bg: bg, borderColor: borderColor, color: color, isInvalid: error, value: value, onChange: handleOnChange, width: width, onBlur: onBlur, onFocus: onFocus, isDisabled: isDisabled, isReadOnly: isReadOnly, colorScheme: colorScheme, errorBorderColor: errorBorderColor, style: selectStyle }, getOptionsList()),
51
51
  error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
52
52
  helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
53
53
  }
@@ -11,6 +11,7 @@ export type chakraSelectProps = Pick<SelectProps, "placeholder" | "size" | "vari
11
11
  formControlStyle?: React.CSSProperties;
12
12
  isInformation?: boolean;
13
13
  informationMessage?: string;
14
+ selectStyle?: React.CSSProperties;
14
15
  };
15
16
  export type OptionProp = {
16
17
  id: string | number;
@@ -11,9 +11,9 @@ var react_1 = __importDefault(require("react"));
11
11
  var styled_1 = __importDefault(require("@emotion/styled"));
12
12
  var fa_1 = require("react-icons/fa");
13
13
  var react_2 = require("@chakra-ui/react");
14
- var TimelineContainer = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n padding: 0px 24px;\n margin: 0 auto;\n width: 100%;\n max-width: 800px;\n"], ["\n position: relative;\n padding: 0px 24px;\n margin: 0 auto;\n width: 100%;\n max-width: 800px;\n"])));
15
- var Line = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n left: 50%;\n top: 0;\n bottom: 0;\n width: 2px;\n background-color: #d2d9e0;\n transform: translateX(-50%);\n"], ["\n position: absolute;\n left: 50%;\n top: 0;\n bottom: 0;\n width: 2px;\n background-color: #d2d9e0;\n transform: translateX(-50%);\n"])));
16
- var EventContainer = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: ", ";\n width: 100%;\n // padding: 1rem 0 1rem 0;\n box-sizing: border-box;\n position: relative;\n margin-bottom: 24px;\n align-items: center; /* Center alignment for dot and event content */\n text-align: ", ";\n"], ["\n display: flex;\n justify-content: ", ";\n width: 100%;\n // padding: 1rem 0 1rem 0;\n box-sizing: border-box;\n position: relative;\n margin-bottom: 24px;\n align-items: center; /* Center alignment for dot and event content */\n text-align: ", ";\n"])), function (_a) {
14
+ var TimelineContainer = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n padding: 0px 24px;\n margin: 0 auto;\n width: 100%;\n max-width: 800px;\n @media (max-width: 768px) {\n padding: 0px 16px;\n max-width: 100%;\n }\n"], ["\n position: relative;\n padding: 0px 24px;\n margin: 0 auto;\n width: 100%;\n max-width: 800px;\n @media (max-width: 768px) {\n padding: 0px 16px;\n max-width: 100%;\n }\n"])));
15
+ var Line = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n left: 50%;\n top: 0;\n bottom: 0;\n width: 2px;\n background-color: #d2d9e0;\n transform: translateX(-50%);\n @media (max-width: 768px) {\n left: 25px; /* Move the line towards the left */\n }\n"], ["\n position: absolute;\n left: 50%;\n top: 0;\n bottom: 0;\n width: 2px;\n background-color: #d2d9e0;\n transform: translateX(-50%);\n @media (max-width: 768px) {\n left: 25px; /* Move the line towards the left */\n }\n"])));
16
+ var EventContainer = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: ", ";\n width: 100%;\n // padding: 1rem 0 1rem 0;\n box-sizing: border-box;\n position: relative;\n margin-bottom: 24px;\n align-items: center; /* Center alignment for dot and event content */\n text-align: ", ";\n @media (max-width: 768px) {\n flex-direction: column;\n text-align: left;\n align-items: flex-start;\n }\n"], ["\n display: flex;\n justify-content: ", ";\n width: 100%;\n // padding: 1rem 0 1rem 0;\n box-sizing: border-box;\n position: relative;\n margin-bottom: 24px;\n align-items: center; /* Center alignment for dot and event content */\n text-align: ", ";\n @media (max-width: 768px) {\n flex-direction: column;\n text-align: left;\n align-items: flex-start;\n }\n"])), function (_a) {
17
17
  var isLeft = _a.isLeft;
18
18
  return (isLeft ? "flex-end" : "flex-start");
19
19
  }, function (_a) {
@@ -21,7 +21,7 @@ var EventContainer = styled_1.default.div(templateObject_3 || (templateObject_3
21
21
  return (isLeft ? "left" : "right");
22
22
  });
23
23
  var Event = styled_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n // background: white;\n // padding: 16px;\n // border: 1px solid #007bff;\n // border-radius: 8px;\n // width: 40%;\n position: relative;\n display: flex;\n align-items: center;\n cursor: pointer; /* Indicates that the event is clickable */\n"], ["\n // background: white;\n // padding: 16px;\n // border: 1px solid #007bff;\n // border-radius: 8px;\n // width: 40%;\n position: relative;\n display: flex;\n align-items: center;\n cursor: pointer; /* Indicates that the event is clickable */\n"])));
24
- var Dot = styled_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: absolute;\n left: 50%;\n width: 30px;\n height: 30px;\n background-color: #f4f7ff;\n border-radius: 50%;\n transform: translateX(-50%);\n padding: 6px;\n border: 1px solid #d2d9e0;\n"], ["\n position: absolute;\n left: 50%;\n width: 30px;\n height: 30px;\n background-color: #f4f7ff;\n border-radius: 50%;\n transform: translateX(-50%);\n padding: 6px;\n border: 1px solid #d2d9e0;\n"])));
24
+ var Dot = styled_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: absolute;\n left: 50%;\n width: 30px;\n height: 30px;\n background-color: #f4f7ff;\n border-radius: 50%;\n transform: translateX(-50%);\n padding: 6px;\n border: 1px solid #d2d9e0;\n @media (max-width: 768px) {\n left: 20px; /* Move dot closer to the left */\n transform: translateX(0); /* Remove horizontal centering */\n }\n"], ["\n position: absolute;\n left: 50%;\n width: 30px;\n height: 30px;\n background-color: #f4f7ff;\n border-radius: 50%;\n transform: translateX(-50%);\n padding: 6px;\n border: 1px solid #d2d9e0;\n @media (max-width: 768px) {\n left: 20px; /* Move dot closer to the left */\n transform: translateX(0); /* Remove horizontal centering */\n }\n"])));
25
25
  // const Arrow = styled.div<{ isLeft: boolean }>`
26
26
  // position: absolute;
27
27
  // left: ${({ isLeft }) => (isLeft ? "-10px " : "100%")};
@@ -43,11 +43,11 @@ var EventTitle = styled_1.default.h3(templateObject_7 || (templateObject_7 = __m
43
43
  // margin: 0;
44
44
  // `;
45
45
  var EventDate = styled_1.default.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: block;\n margin-top: 8px;\n color: #6c757d;\n"], ["\n display: block;\n margin-top: 8px;\n color: #6c757d;\n"])));
46
- var EventTime = styled_1.default.span(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n left: ", ";\n position: absolute;\n color: #6c757d;\n"], ["\n left: ", ";\n position: absolute;\n color: #6c757d;\n"])), function (_a) {
46
+ var EventTime = styled_1.default.span(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n left: ", ";\n position: absolute;\n color: #6c757d;\n @media (max-width: 768px) {\n position: relative;\n left: auto;\n margin-left: 40px;\n }\n"], ["\n left: ", ";\n position: absolute;\n color: #6c757d;\n @media (max-width: 768px) {\n position: relative;\n left: auto;\n margin-left: 40px;\n }\n"])), function (_a) {
47
47
  var isLeft = _a.isLeft;
48
48
  return (isLeft ? "38% " : "53%");
49
49
  });
50
- var EventGroupDate = styled_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 400;\n color: #464f62;\n box-sizing: border-box;\n width: 180px;\n padding: 5px 25px;\n text-align: center;\n background-color: #f4f7ff;\n border: 1px solid #d2d9e0;\n border-radius: 5px;\n margin: 0 auto; /* Center horizontally */\n display: flex;\n align-items: center; /* Center vertically */\n justify-content: center; /* Center horizontally */\n"], ["\n font-size: 1rem;\n font-weight: 400;\n color: #464f62;\n box-sizing: border-box;\n width: 180px;\n padding: 5px 25px;\n text-align: center;\n background-color: #f4f7ff;\n border: 1px solid #d2d9e0;\n border-radius: 5px;\n margin: 0 auto; /* Center horizontally */\n display: flex;\n align-items: center; /* Center vertically */\n justify-content: center; /* Center horizontally */\n"])));
50
+ var EventGroupDate = styled_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 400;\n color: #464f62;\n box-sizing: border-box;\n width: 180px;\n padding: 5px 25px;\n text-align: center;\n background-color: #f4f7ff;\n border: 1px solid #d2d9e0;\n border-radius: 5px;\n margin: 0 auto; /* Center horizontally */\n display: flex;\n align-items: center; /* Center vertically */\n justify-content: center; /* Center horizontally */\n @media (max-width: 768px) {\n width: auto;\n padding: 5px 10px;\n }\n"], ["\n font-size: 1rem;\n font-weight: 400;\n color: #464f62;\n box-sizing: border-box;\n width: 180px;\n padding: 5px 25px;\n text-align: center;\n background-color: #f4f7ff;\n border: 1px solid #d2d9e0;\n border-radius: 5px;\n margin: 0 auto; /* Center horizontally */\n display: flex;\n align-items: center; /* Center vertically */\n justify-content: center; /* Center horizontally */\n @media (max-width: 768px) {\n width: auto;\n padding: 5px 10px;\n }\n"])));
51
51
  var EventGroupSeparator = styled_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
52
52
  var EventGroupHeader = styled_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n position: relative;\n margin-bottom: 24px;\n"], ["\n position: relative;\n margin-bottom: 24px;\n"])));
53
53
  // const FlexContainer = styled.div`
@@ -60,9 +60,9 @@ var dataArray = Array(5)
60
60
  .map(function (_, index) { return ({
61
61
  column1: index % 2 === 0,
62
62
  column2: "column:2 row:".concat(index + 1),
63
- column3: index + 5,
64
- column4: index + 10,
65
- column5: index + 15,
63
+ column3: "column:3 row:".concat(index + 1),
64
+ column4: "column:4 row:".concat(index + 1),
65
+ column5: "column:5 row:".concat(index + 1),
66
66
  column6: index + 20,
67
67
  column7: index + 25,
68
68
  column8: index + 30,
@@ -80,7 +80,7 @@ var columns = [
80
80
  key: "column1",
81
81
  title: "Column 1",
82
82
  dataType: DataType.Boolean,
83
- width: 150,
83
+ width: 100,
84
84
  columnFreeze: true,
85
85
  customHeader: false,
86
86
  },
@@ -9,7 +9,7 @@ var fi_1 = require("react-icons/fi");
9
9
  var Button_1 = __importDefault(require("../Components/Button/Button"));
10
10
  var ButtonPage = function () {
11
11
  return (react_1.default.createElement("div", null,
12
- react_1.default.createElement(ButtonGroupIcon_1.default, { buttonText: "hello", rightIcon: react_1.default.createElement(fi_1.FiHome, null), size: "md", variant: "solid" }),
12
+ react_1.default.createElement(ButtonGroupIcon_1.default, { buttonText: "hello", rightIcon: react_1.default.createElement(fi_1.FiHome, null), leftIcon: react_1.default.createElement(fi_1.FiHome, null), size: "md", variant: "solid" }),
13
13
  react_1.default.createElement("br", null),
14
14
  react_1.default.createElement("br", null),
15
15
  react_1.default.createElement("br", null),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "1.1.23",
3
+ "version": "1.1.25",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",