pixelize-design-library 2.2.194 → 2.2.195

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 (5) hide show
  1. package/dist/Components/Table/Components/HeaderActions.js +22 -12
  2. package/dist/Components/Table/Table.js +4 -4
  3. package/dist/Components/Table/TableProps.d.ts +8 -3
  4. package/dist/Components/ToolTip/ToolTip.js +2 -2
  5. package/package.json +1 -1
package/dist/Components/Table/Components/HeaderActions.js CHANGED
@@ -18,18 +18,22 @@ var react_1 = require("@chakra-ui/react");
18
18
  var lucide_react_1 = require("lucide-react");
19
19
  var react_2 = __importDefault(require("react"));
20
20
  var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
21
+ var Divider_1 = __importDefault(require("../../Divider/Divider"));
21
22
  var ListItem = function (_a) {
22
- var _b, _c;
23
- var icon = _a.icon, name = _a.name, onClick = _a.onClick, selections = _a.selections, _d = _a.isHoverEnabled, isHoverEnabled = _d === void 0 ? false : _d, hoverColor = _a.hoverColor;
23
+ var _b, _c, _d;
24
+ var icon = _a.icon, name = _a.name, onClick = _a.onClick, selections = _a.selections, _e = _a.isHoverEnabled, isHoverEnabled = _e === void 0 ? false : _e, hoverColor = _a.hoverColor, customComponent = _a.customComponent;
24
25
  var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
25
- var styledIcon = react_2.default.cloneElement(icon, {
26
+ var styledIcon = icon ? react_2.default.cloneElement(icon, {
26
27
  color: "currentColor",
27
28
  size: "1.25rem",
28
- });
29
- return (react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", onClick: function () { return onClick && onClick(selections); }, color: (_b = colors === null || colors === void 0 ? void 0 : colors.text) === null || _b === void 0 ? void 0 : _b[500], _hover: isHoverEnabled
30
- ? { color: hoverColor ? hoverColor : (_c = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _c === void 0 ? void 0 : _c[500] } // ✅ hover updates both
31
- : {}, transition: "color 0.2s ease" // ✅ smooth animation
32
- },
29
+ }) : null;
30
+ return (react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", onClick: function () { return onClick && onClick(selections); }, color: (_b = colors === null || colors === void 0 ? void 0 : colors.text) === null || _b === void 0 ? void 0 : _b[500], px: 2, py: 1, borderRadius: "md", _hover: isHoverEnabled
31
+ ? {
32
+ color: hoverColor ? hoverColor : (_c = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _c === void 0 ? void 0 : _c[500],
33
+ bg: ((_d = colors === null || colors === void 0 ? void 0 : colors.background) === null || _d === void 0 ? void 0 : _d[100]) || "gray.50",
34
+ }
35
+ : {}, transition: "all 0.2s ease" },
36
+ customComponent,
33
37
  styledIcon,
34
38
  " ",
35
39
  name));
@@ -38,11 +42,17 @@ var HeaderActions = function (_a) {
38
42
  var _b, _c, _d, _e, _f, _g, _h, _j, _k;
39
43
  var actions = _a.actions, selections = _a.selections;
40
44
  var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
41
- return (react_2.default.createElement(react_1.Box, { display: "flex", gap: 4, fontSize: "0.875rem", fontWeight: 400, color: (_b = colors === null || colors === void 0 ? void 0 : colors.secondary) === null || _b === void 0 ? void 0 : _b[500] },
42
- ((_c = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _c === void 0 ? void 0 : _c.enabled) && (react_2.default.createElement(ListItem, { icon: react_2.default.createElement(lucide_react_1.Trash2, { className: "w-4 h-4" }), name: "Delete", onClick: (_d = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _d === void 0 ? void 0 : _d.onClick, selections: selections, isHoverEnabled: true, hoverColor: (_e = colors === null || colors === void 0 ? void 0 : colors.red) === null || _e === void 0 ? void 0 : _e[500] })),
43
- ((_f = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _f === void 0 ? void 0 : _f.enabled) && (react_2.default.createElement(ListItem, { icon: react_2.default.createElement(lucide_react_1.SquarePen, { className: "w-4 h-4" }), name: "Mass Update", onClick: (_g = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _g === void 0 ? void 0 : _g.onClick, selections: selections, isHoverEnabled: true, hoverColor: (_h = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _h === void 0 ? void 0 : _h[500] })),
45
+ return (react_2.default.createElement(react_1.Box, { display: "flex", gap: 2, fontSize: "0.875rem", fontWeight: 400, color: (_b = colors === null || colors === void 0 ? void 0 : colors.secondary) === null || _b === void 0 ? void 0 : _b[500], alignItems: "center" },
46
+ ((_c = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _c === void 0 ? void 0 : _c.enabled) && selections.length > 0 && (react_2.default.createElement(ListItem, { icon: react_2.default.createElement(lucide_react_1.Trash2, { className: "w-4 h-4" }), name: "Delete", onClick: (_d = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _d === void 0 ? void 0 : _d.onClick, selections: selections, isHoverEnabled: true, hoverColor: (_e = colors === null || colors === void 0 ? void 0 : colors.red) === null || _e === void 0 ? void 0 : _e[500] })),
47
+ ((_f = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _f === void 0 ? void 0 : _f.enabled) && selections.length > 0 && (react_2.default.createElement(ListItem, { icon: react_2.default.createElement(lucide_react_1.SquarePen, { className: "w-4 h-4" }), name: "Mass Update", onClick: (_g = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _g === void 0 ? void 0 : _g.onClick, selections: selections, isHoverEnabled: true, hoverColor: (_h = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _h === void 0 ? void 0 : _h[500] })),
44
48
  ((_j = actions === null || actions === void 0 ? void 0 : actions.items) === null || _j === void 0 ? void 0 : _j.length)
45
- ? (_k = actions === null || actions === void 0 ? void 0 : actions.items) === null || _k === void 0 ? void 0 : _k.map(function (item) { return (react_2.default.createElement(ListItem, __assign({}, item, { selections: selections }))); })
49
+ ? (_k = actions === null || actions === void 0 ? void 0 : actions.items) === null || _k === void 0 ? void 0 : _k.map(function (item, index) {
50
+ if ("type" in item && item.type === "divider") {
51
+ return react_2.default.createElement(Divider_1.default, { key: index });
52
+ }
53
+ var actionItem = item;
54
+ return react_2.default.createElement(ListItem, __assign({ key: index }, actionItem, { selections: selections }));
55
+ })
46
56
  : null));
47
57
  };
48
58
  exports.default = HeaderActions;
package/dist/Components/Table/Table.js CHANGED
@@ -199,7 +199,7 @@ function Table(_a) {
199
199
  filterMode === "sidebar" && (react_1.default.createElement(MotionBox, { initial: { width: 0 }, animate: { width: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? 180 : 0 }, transition: { type: "tween", duration: 0.5 }, overflow: "hidden", flexShrink: 0, borderRight: "1px solid", borderColor: (_g = theme.colors.border) === null || _g === void 0 ? void 0 : _g[500], style: { height: controlsHeight + tableMaxH }, minHeight: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? "32rem" : "auto" },
200
200
  react_1.default.createElement(LeftFilterPane_1.default, { height: controlsHeight + tableMaxH, theme: theme, sections: (_h = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _h !== void 0 ? _h : [], 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, filterMode: filterMode }))),
201
201
  react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
202
- 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: (_k = (_j = theme.colors) === null || _j === void 0 ? void 0 : _j.background) === null || _k === void 0 ? void 0 : _k[50], borderBottom: "0.063rem solid ".concat((_l = theme.colors.border) === null || _l === void 0 ? void 0 : _l[500]) },
202
+ react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 0, height: controlsHeight, gap: 1, flexWrap: "nowrap", bg: (_k = (_j = theme.colors) === null || _j === void 0 ? void 0 : _j.background) === null || _k === void 0 ? void 0 : _k[50], borderBottom: "0.063rem solid ".concat((_l = theme.colors.border) === null || _l === void 0 ? void 0 : _l[500]) },
203
203
  filterSidebar && (react_1.default.createElement(react_1.default.Fragment, null,
204
204
  react_1.default.createElement(react_2.Box, { position: "relative", display: "inline-block" },
205
205
  react_1.default.createElement(react_3.Icon, { as: lucide_react_1.Filter, transform: "scaleX(-1)", cursor: "pointer", boxSize: 4, color: sidebarActiveCount > 0 ? (_o = (_m = theme.colors) === null || _m === void 0 ? void 0 : _m.primary) === null || _o === void 0 ? void 0 : _o[500] : (_q = (_p = theme.colors) === null || _p === void 0 ? void 0 : _p.text) === null || _q === void 0 ? void 0 : _q[500], onClick: filterMode === "modal" ? onFilterModalOpen : filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterSidebarToggle }),
@@ -216,12 +216,12 @@ function Table(_a) {
216
216
  react_1.default.createElement(lucide_react_1.X, { size: 10, strokeWidth: 3 })))),
217
217
  react_1.default.createElement(Divider_1.default, null))),
218
218
  react_1.default.createElement(TableSearch_1.default, { onSearch: onGlobalSearch }),
219
- isTableSettings && tableData.length > 0 && (react_1.default.createElement(react_1.default.Fragment, null,
219
+ isTableSettings && (react_1.default.createElement(react_1.default.Fragment, null,
220
220
  react_1.default.createElement(Divider_1.default, null),
221
221
  react_1.default.createElement(TableSettings_1.default, { columns: columnsList, onSave: function (cols) { return handleColumnPreferences(cols); }, tableSettings: tableSettings }))),
222
- selection.length ? (react_1.default.createElement(react_1.default.Fragment, null,
222
+ headerActions && (react_1.default.createElement(react_1.default.Fragment, null,
223
223
  react_1.default.createElement(Divider_1.default, null),
224
- react_1.default.createElement(HeaderActions_1.default, { actions: headerActions, selections: selection }))) : null,
224
+ react_1.default.createElement(HeaderActions_1.default, { actions: headerActions, selections: selection }))),
225
225
  react_1.default.createElement(ActiveFilters_1.default, { columns: columnsList, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch }),
226
226
  react_1.default.createElement(react_2.Box, { ml: "auto", display: "flex", alignItems: "center", gap: 2 },
227
227
  (isPagination || isServerPagination) && !isCompactHeader && (react_1.default.createElement(react_2.Box, { flex: "0 0 auto" },
package/dist/Components/Table/TableProps.d.ts CHANGED
@@ -66,11 +66,16 @@ export type HeaderActionsProps = {
66
66
  enabled?: boolean;
67
67
  onClick?: (selection: (string | number)[]) => void;
68
68
  };
69
- items?: {
70
- icon: React.ReactElement;
69
+ items?: ({
70
+ icon?: React.ReactElement;
71
71
  name: string;
72
72
  onClick?: (selection: (string | number)[]) => void;
73
- }[];
73
+ isHoverEnabled?: boolean;
74
+ hoverColor?: string;
75
+ customComponent?: React.ReactNode;
76
+ } | {
77
+ type: "divider";
78
+ })[];
74
79
  };
75
80
  export type DataObject = {
76
81
  [key: string]: string | number | any;
package/dist/Components/ToolTip/ToolTip.js CHANGED
@@ -7,6 +7,6 @@ exports.default = ToolTip;
7
7
  var react_1 = __importDefault(require("react"));
8
8
  var react_2 = require("@chakra-ui/react");
9
9
  function ToolTip(_a) {
10
- var placement = _a.placement, label = _a.label, children = _a.children, hasArrow = _a.hasArrow, fontSize = _a.fontSize, bg = _a.bg, color = _a.color, isDisabled = _a.isDisabled, isOpen = _a.isOpen, defaultIsOpen = _a.defaultIsOpen, openDelay = _a.openDelay, closeDelay = _a.closeDelay, arrowSize = _a.arrowSize, closeOnClick = _a.closeOnClick, size = _a.size, width = _a.width, height = _a.height, arrowPadding = _a.arrowPadding, arrowShadowColor = _a.arrowShadowColor, direction = _a.direction, gutter = _a.gutter, onClose = _a.onClose, modifiers = _a.modifiers, closeOnPointerDown = _a.closeOnPointerDown, styles = _a.styles;
11
- return (react_1.default.createElement(react_2.Tooltip, { label: label, placement: placement, hasArrow: hasArrow, fontSize: fontSize, bg: bg, color: color, isDisabled: isDisabled, isOpen: isOpen, defaultIsOpen: defaultIsOpen, openDelay: openDelay, closeDelay: closeDelay, arrowSize: arrowSize, closeOnClick: closeOnClick, size: size, width: width, height: height, arrowPadding: arrowPadding, arrowShadowColor: arrowShadowColor, direction: direction, gutter: gutter, onClose: onClose, modifiers: modifiers, closeOnPointerDown: closeOnPointerDown, style: styles }, children));
10
+ var _b = _a.placement, placement = _b === void 0 ? "top" : _b, label = _a.label, children = _a.children, _c = _a.hasArrow, hasArrow = _c === void 0 ? true : _c, _d = _a.fontSize, fontSize = _d === void 0 ? "14px" : _d, _e = _a.bg, bg = _e === void 0 ? "#12161B" : _e, _f = _a.color, color = _f === void 0 ? "white" : _f, isDisabled = _a.isDisabled, isOpen = _a.isOpen, defaultIsOpen = _a.defaultIsOpen, _g = _a.openDelay, openDelay = _g === void 0 ? 0 : _g, _h = _a.closeDelay, closeDelay = _h === void 0 ? 0 : _h, _j = _a.arrowSize, arrowSize = _j === void 0 ? 10 : _j, _k = _a.closeOnClick, closeOnClick = _k === void 0 ? false : _k, size = _a.size, width = _a.width, height = _a.height, arrowPadding = _a.arrowPadding, arrowShadowColor = _a.arrowShadowColor, direction = _a.direction, _l = _a.gutter, gutter = _l === void 0 ? 8 : _l, onClose = _a.onClose, modifiers = _a.modifiers, closeOnPointerDown = _a.closeOnPointerDown, styles = _a.styles;
11
+ return (react_1.default.createElement(react_2.Tooltip, { label: label, placement: placement, hasArrow: hasArrow, fontSize: fontSize, bg: bg, color: color, isDisabled: isDisabled, isOpen: isOpen, defaultIsOpen: defaultIsOpen, openDelay: openDelay, closeDelay: closeDelay, arrowSize: arrowSize, closeOnClick: closeOnClick, size: size, width: width, height: height, arrowPadding: arrowPadding, arrowShadowColor: arrowShadowColor, direction: direction, gutter: gutter, onClose: onClose, modifiers: modifiers, closeOnPointerDown: closeOnPointerDown, style: styles, px: 3, py: 2, borderRadius: "8px", fontWeight: "400", lineHeight: "1.5", maxW: "300px" }, children));
12
12
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "2.2.194",
3
+ "version": "2.2.195",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",