pixelize-design-library 2.2.119 → 2.2.121

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 (6) hide show
  1. package/dist/Components/Checkbox/Checkbox.js +12 -2
  2. package/dist/Components/SideBar/SideBar.js +1 -1
  3. package/dist/Components/SideBar/components/MenuItemBox.js +4 -4
  4. package/dist/Components/SideBar/components/TextTruncation.js +1 -1
  5. package/dist/Components/Table/Table.js +4 -4
  6. package/package.json +1 -1
package/dist/Components/Checkbox/Checkbox.js CHANGED
@@ -6,14 +6,24 @@ 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 FormLabel_1 = require("../Common/FormLabel");
10
9
  var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
11
10
  var HelperText_1 = __importDefault(require("../Common/HelperText"));
12
11
  function CheckBox(_a) {
13
12
  var label = _a.label, labelFontSize = _a.labelFontSize, showLabelTooltip = _a.showLabelTooltip, labelTooltip = _a.labelTooltip, labelClampLines = _a.labelClampLines, spacing = _a.spacing, isInvalid = _a.isInvalid, color = _a.color, iconColor = _a.iconColor, iconSize = _a.iconSize, isChecked = _a.isChecked, isIndeterminate = _a.isIndeterminate, onChange = _a.onChange, isDisabled = _a.isDisabled, size = _a.size, value = _a.value, defaultChecked = _a.defaultChecked, sx = _a.sx, isRequired = _a.isRequired, error = _a.error, errorMessage = _a.errorMessage, isInformation = _a.isInformation, informationMessage = _a.informationMessage, id = _a.id, helperText = _a.helperText, onClick = _a.onClick;
14
13
  var theme = (0, useCustomTheme_1.useCustomTheme)();
14
+ var clampStyles = labelClampLines
15
+ ? {
16
+ display: "-webkit-box",
17
+ WebkitLineClamp: labelClampLines,
18
+ WebkitBoxOrient: "vertical",
19
+ overflow: "hidden",
20
+ textOverflow: "ellipsis",
21
+ whiteSpace: "normal",
22
+ }
23
+ : {};
15
24
  return (react_1.default.createElement(react_1.default.Fragment, null,
16
- react_1.default.createElement(react_2.Checkbox, { onClick: onClick, spacing: spacing, isInvalid: isInvalid, colorScheme: color, iconColor: iconColor, iconSize: iconSize, isChecked: isChecked, isIndeterminate: isIndeterminate, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.gray[500], sx: sx, display: "flex", alignItems: "inherit" }, label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, fontSize: labelFontSize, showTooltip: showLabelTooltip, tooltipLabel: labelTooltip, clampLines: labelClampLines, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired }))),
25
+ react_1.default.createElement(react_2.Checkbox, { onClick: onClick, spacing: spacing, isInvalid: isInvalid, colorScheme: color, iconColor: iconColor, iconSize: iconSize, isChecked: isChecked, isIndeterminate: isIndeterminate, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.gray[500], sx: sx, display: "flex", alignItems: "inherit" }, label && (showLabelTooltip ? (react_1.default.createElement(react_2.Tooltip, { label: labelTooltip !== null && labelTooltip !== void 0 ? labelTooltip : label, hasArrow: true, placement: "top", bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem" },
26
+ react_1.default.createElement(react_2.Box, { as: "span", sx: clampStyles, fontSize: labelFontSize !== null && labelFontSize !== void 0 ? labelFontSize : "0.875rem", color: theme.colors.gray[600], fontWeight: 400 }, label))) : (react_1.default.createElement(react_2.Box, { as: "span", sx: clampStyles, fontSize: labelFontSize !== null && labelFontSize !== void 0 ? labelFontSize : "0.875rem", color: theme.colors.gray[600], fontWeight: 400 }, label)))),
17
27
  error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
18
28
  helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
19
29
  }
package/dist/Components/SideBar/SideBar.js CHANGED
@@ -31,7 +31,7 @@ function Sidebar(_a) {
31
31
  menus.find(function (m) { return String(m.id) === String(activeMenu); });
32
32
  var secondaryItems = (_b = activeTop === null || activeTop === void 0 ? void 0 : activeTop.secondaryItems) !== null && _b !== void 0 ? _b : [];
33
33
  return (react_1.default.createElement(react_2.Box, { transition: "all 0.5s", position: "sticky", height: "100vh", boxShadow: theme.shadows.lg, display: "flex", background: theme.colors.sidebar.background[500] },
34
- react_1.default.createElement(react_2.Box, { width: toggle ? "4.688rem" : "13rem", display: "flex", flexDirection: "column", justifyContent: "space-between" },
34
+ react_1.default.createElement(react_2.Box, { width: toggle ? "4.688rem" : "13rem", transition: "width 0.5s ease", display: "flex", flexDirection: "column", justifyContent: "space-between" },
35
35
  react_1.default.createElement(react_2.Flex, { flexDir: "column", w: "100%", alignItems: toggle ? "center" : "flex-start", as: "nav", h: "100vh" },
36
36
  isLoading ? (react_1.default.createElement(react_2.Box, { w: "100%", px: toggle ? 2 : 4, py: 2 }, toggle ? (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 4, justifyContent: "center" },
37
37
  react_1.default.createElement(react_2.Skeleton, { w: "30px", h: "30px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }))) : (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 4 },
package/dist/Components/SideBar/components/MenuItemBox.js CHANGED
@@ -63,9 +63,9 @@ var MenuItemBox = function (_a) {
63
63
  var buttonContent = (react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.625rem", justify: "space-between" },
64
64
  react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.625rem", overflow: "hidden" },
65
65
  react_1.default.createElement(react_2.Box, { position: "relative" },
66
- react_1.default.createElement(react_2.Icon, { as: icon, fontSize: "1.25rem", color: disabled ? theme.colors.gray[400] : theme.colors.white }),
66
+ react_1.default.createElement(react_2.Icon, { as: icon, fontSize: "1.25rem", verticalAlign: "middle", color: disabled ? theme.colors.gray[400] : theme.colors.white }),
67
67
  toggle && (badgeValue != null || hasSubmenuBadge) && (react_1.default.createElement(react_2.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.red[400] }))),
68
- !toggle && (react_1.default.createElement(TextTruncation_1.default, { open: isOpen, fontSize: "1rem", flex: "1" }, title))),
68
+ !toggle && (react_1.default.createElement(TextTruncation_1.default, { open: isOpen, fontSize: "1rem", lineHeight: "1", flex: "1" }, title))),
69
69
  !toggle && (react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.375rem" },
70
70
  (function () {
71
71
  var _a, _b, _c;
@@ -106,8 +106,8 @@ var MenuItemBox = function (_a) {
106
106
  backgroundColor: theme.colors.primary[700],
107
107
  }, opacity: sub.disabled ? 0.6 : 1, cursor: sub.disabled ? "not-allowed" : "pointer", pointerEvents: sub.disabled ? "none" : "auto", onClick: function () { return !sub.disabled && (handleClick === null || handleClick === void 0 ? void 0 : handleClick(sub)); }, display: "flex", alignItems: "center", justifyContent: "space-between", gap: "0.5rem", color: theme.colors.white },
108
108
  react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.5rem", overflow: "auto" },
109
- react_1.default.createElement(react_2.Icon, { as: sub.icon, fontSize: "1rem" }),
110
- react_1.default.createElement(TextTruncation_1.default, { fontSize: "0.875rem", fontWeight: "medium", open: isOpen }, sub.title)),
109
+ react_1.default.createElement(react_2.Icon, { as: sub.icon, fontSize: "1rem", verticalAlign: "middle" }),
110
+ react_1.default.createElement(TextTruncation_1.default, { fontSize: "0.875rem", fontWeight: "medium", lineHeight: "1", open: isOpen }, sub.title)),
111
111
  sub.locked ? (react_1.default.createElement(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "1rem" })) : (function () {
112
112
  var _a, _b, _c;
113
113
  var isObj = typeof sub.badge === "object" && sub.badge !== null;
package/dist/Components/SideBar/components/TextTruncation.js CHANGED
@@ -72,6 +72,6 @@ var TruncatedTextWithTooltip = function (_a) {
72
72
  return (react_1.default.createElement(react_1.default.Fragment, null,
73
73
  react_1.default.createElement(react_2.Tooltip, { label: children, isDisabled: !isTruncated, hasArrow: true, placement: "right" },
74
74
  react_1.default.createElement(react_2.Text, __assign({ ref: textRef, isTruncated: true, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", maxW: "100%" }, props), children)),
75
- react_1.default.createElement(react_2.Box, { ref: shadowRef, position: "absolute", visibility: "hidden", whiteSpace: "nowrap", fontSize: props.fontSize, fontWeight: props.fontWeight, fontFamily: props.fontFamily, lineHeight: props.lineHeight, px: props.px, py: props.py }, children)));
75
+ react_1.default.createElement(react_2.Box, { ref: shadowRef, position: "fixed", top: "-9999px", left: "-9999px", visibility: "hidden", whiteSpace: "nowrap", fontSize: props.fontSize, fontWeight: props.fontWeight, fontFamily: props.fontFamily, lineHeight: props.lineHeight, px: props.px, py: props.py }, children)));
76
76
  };
77
77
  exports.default = TruncatedTextWithTooltip;
package/dist/Components/Table/Table.js CHANGED
@@ -159,7 +159,7 @@ function Table(_a) {
159
159
  react_1.default.createElement(LeftFilterPane_1.default, { height: controlsHeight + tableMaxH, theme: theme, sections: (_f = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _f !== void 0 ? _f : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply, onClear: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading })),
160
160
  react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
161
161
  react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 0, height: controlsHeight, gap: 2, flexWrap: "nowrap", bg: (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.background) === null || _h === void 0 ? void 0 : _h[50], borderBottom: "0.063rem solid ".concat((_j = theme.colors.border) === null || _j === void 0 ? void 0 : _j[500]) },
162
- filterSidebar && (react_1.default.createElement(react_1.default.Fragment, null,
162
+ filterSidebar && tableData.length > 0 && (react_1.default.createElement(react_1.default.Fragment, null,
163
163
  react_1.default.createElement(react_2.Box, { position: "relative", display: "inline-block" },
164
164
  react_1.default.createElement(react_3.Icon, { as: lucide_react_1.Filter, transform: "scaleX(-1)", cursor: "pointer", boxSize: 4, color: sidebarActiveCount > 0 ? (_l = (_k = theme.colors) === null || _k === void 0 ? void 0 : _k.primary) === null || _l === void 0 ? void 0 : _l[500] : (_o = (_m = theme.colors) === null || _m === void 0 ? void 0 : _m.text) === null || _o === void 0 ? void 0 : _o[500], onClick: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterSidebarToggle }),
165
165
  sidebarActiveCount > 0 && (react_1.default.createElement(react_2.Box, { position: "absolute", top: "-6px", right: "-10px", bg: (_q = (_p = theme.colors) === null || _p === void 0 ? void 0 : _p.primary) === null || _q === void 0 ? void 0 : _q[500], color: "white", borderRadius: "full", p: "1px", cursor: "pointer", onClick: function (e) {
@@ -174,8 +174,8 @@ function Table(_a) {
174
174
  }, _hover: { bg: (_s = (_r = theme.colors) === null || _r === void 0 ? void 0 : _r.red) === null || _s === void 0 ? void 0 : _s[600] }, display: "flex", alignItems: "center", justifyContent: "center", zIndex: 2 },
175
175
  react_1.default.createElement(lucide_react_1.X, { size: 10, strokeWidth: 3 })))),
176
176
  react_1.default.createElement(Divider_1.default, null))),
177
- react_1.default.createElement(TableSearch_1.default, { onSearch: onGlobalSearch }),
178
- isTableSettings && (react_1.default.createElement(react_1.default.Fragment, null,
177
+ tableData.length > 0 && react_1.default.createElement(TableSearch_1.default, { onSearch: onGlobalSearch }),
178
+ isTableSettings && tableData.length > 0 && (react_1.default.createElement(react_1.default.Fragment, null,
179
179
  react_1.default.createElement(Divider_1.default, null),
180
180
  react_1.default.createElement(TableSettings_1.default, { columns: columnsList, onSave: function (cols) { return handleColumnPreferences(cols); }, tableSettings: tableSettings }))),
181
181
  selection.length ? (react_1.default.createElement(react_1.default.Fragment, null,
@@ -185,7 +185,7 @@ function Table(_a) {
185
185
  react_1.default.createElement(react_2.Box, { ml: "auto", display: "flex", alignItems: "center", gap: 2 },
186
186
  (isPagination || isServerPagination) && !isCompactHeader && (react_1.default.createElement(react_2.Box, { flex: "0 1 280px", minW: 0, overflow: "hidden" },
187
187
  react_1.default.createElement(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, pageSizeOptions: paginationSelectOptions, isVisiblity: true }))),
188
- (isPagination || isServerPagination) && isCompactHeader && (react_1.default.createElement(react_2.Popover, { placement: "bottom-end" },
188
+ (isPagination || isServerPagination) && isCompactHeader && tableData.length > 0 && (react_1.default.createElement(react_2.Popover, { placement: "bottom-end" },
189
189
  react_1.default.createElement(react_2.PopoverTrigger, null,
190
190
  react_1.default.createElement(react_2.IconButton, { "aria-label": "More", size: "sm", variant: "ghost", icon: react_1.default.createElement(lucide_react_1.EllipsisVertical, { size: 18, color: (_u = (_t = theme.colors) === null || _t === void 0 ? void 0 : _t.text) === null || _u === void 0 ? void 0 : _u[500] }) })),
191
191
  react_1.default.createElement(react_2.PopoverContent, { maxW: "18rem", p: 2, overflow: "hidden" },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "2.2.119",
3
+ "version": "2.2.121",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",