pixelize-design-library 2.2.193 → 2.2.195

package/dist/Components/Table/Components/HeaderActions.js

@@ -18,18 +18,22 @@ var react_1 = require("@chakra-ui/react");
 var lucide_react_1 = require("lucide-react");
 var react_2 = __importDefault(require("react"));
 var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+var Divider_1 = __importDefault(require("../../Divider/Divider"));
 var ListItem = function (_a) {
-    var _b, _c;
-    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;
+    var _b, _c, _d;
+    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;
     var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
-    var styledIcon = react_2.default.cloneElement(icon, {
+    var styledIcon = icon ? react_2.default.cloneElement(icon, {
         color: "currentColor",
         size: "1.25rem",
-    });
-    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
-            ? { color: hoverColor ? hoverColor : (_c = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _c === void 0 ? void 0 : _c[500] } // ✅ hover updates both
-            : {}, transition: "color 0.2s ease" // ✅ smooth animation
-     },
+    }) : null;
+    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
+            ? {
+                color: hoverColor ? hoverColor : (_c = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _c === void 0 ? void 0 : _c[500],
+                bg: ((_d = colors === null || colors === void 0 ? void 0 : colors.background) === null || _d === void 0 ? void 0 : _d[100]) || "gray.50",
+            }
+            : {}, transition: "all 0.2s ease" },
+        customComponent,
         styledIcon,
         " ",
         name));
@@ -38,11 +42,17 @@ var HeaderActions = function (_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k;
     var actions = _a.actions, selections = _a.selections;
     var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
-    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] },
-        ((_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] })),
-        ((_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] })),
+    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" },
+        ((_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] })),
+        ((_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] })),
         ((_j = actions === null || actions === void 0 ? void 0 : actions.items) === null || _j === void 0 ? void 0 : _j.length)
-            ? (_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 }))); })
+            ? (_k = actions === null || actions === void 0 ? void 0 : actions.items) === null || _k === void 0 ? void 0 : _k.map(function (item, index) {
+                if ("type" in item && item.type === "divider") {
+                    return react_2.default.createElement(Divider_1.default, { key: index });
+                }
+                var actionItem = item;
+                return react_2.default.createElement(ListItem, __assign({ key: index }, actionItem, { selections: selections }));
+            })
             : null));
 };
 exports.default = HeaderActions;

package/dist/Components/Table/Table.js

@@ -199,7 +199,7 @@ function Table(_a) {
             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" },
                 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 }))),
             react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
-                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]) },
+                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]) },
                     filterSidebar && (react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement(react_2.Box, { position: "relative", display: "inline-block" },
                             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) {
                                 react_1.default.createElement(lucide_react_1.X, { size: 10, strokeWidth: 3 })))),
                         react_1.default.createElement(Divider_1.default, null))),
                     react_1.default.createElement(TableSearch_1.default, { onSearch: onGlobalSearch }),
-                    isTableSettings && tableData.length > 0 && (react_1.default.createElement(react_1.default.Fragment, null,
+                    isTableSettings && (react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement(Divider_1.default, null),
                         react_1.default.createElement(TableSettings_1.default, { columns: columnsList, onSave: function (cols) { return handleColumnPreferences(cols); }, tableSettings: tableSettings }))),
-                    selection.length ? (react_1.default.createElement(react_1.default.Fragment, null,
+                    headerActions && (react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement(Divider_1.default, null),
-                        react_1.default.createElement(HeaderActions_1.default, { actions: headerActions, selections: selection }))) : null,
+                        react_1.default.createElement(HeaderActions_1.default, { actions: headerActions, selections: selection }))),
                     react_1.default.createElement(ActiveFilters_1.default, { columns: columnsList, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch }),
                     react_1.default.createElement(react_2.Box, { ml: "auto", display: "flex", alignItems: "center", gap: 2 },
                         (isPagination || isServerPagination) && !isCompactHeader && (react_1.default.createElement(react_2.Box, { flex: "0 0 auto" },

package/dist/Components/Table/TableProps.d.ts

@@ -66,11 +66,16 @@ export type HeaderActionsProps = {
         enabled?: boolean;
         onClick?: (selection: (string | number)[]) => void;
     };
-    items?: {
-        icon: React.ReactElement;
+    items?: ({
+        icon?: React.ReactElement;
         name: string;
         onClick?: (selection: (string | number)[]) => void;
-    }[];
+        isHoverEnabled?: boolean;
+        hoverColor?: string;
+        customComponent?: React.ReactNode;
+    } | {
+        type: "divider";
+    })[];
 };
 export type DataObject = {
     [key: string]: string | number | any;

package/dist/Components/ToolTip/ToolTip.js

@@ -7,6 +7,6 @@ exports.default = ToolTip;
 var react_1 = __importDefault(require("react"));
 var react_2 = require("@chakra-ui/react");
 function ToolTip(_a) {
-    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;
-    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));
+    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;
+    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));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.2.193",
+  "version": "2.2.195",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",

package/.claude/settings.local.json

@@ -1,15 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(git ls-tree *)",
-      "Bash(npx --no-install tsc --noEmit)",
-      "Bash(git fsck *)",
-      "Bash(npx tsc *)",
-      "Bash(curl -s http://localhost:5174/ -o /dev/null -w \"HTTP %{http_code}\\\\n\")",
-      "Bash(curl -s \"http://localhost:5174/src/Components/Table/Components/TableBody.tsx\" -o /dev/null -w \"transform TableBody: HTTP %{http_code}\\\\n\")",
-      "Read(//private/tmp/**)",
-      "Bash(npx jest *)",
-      "Bash(pkill -f \"vite\")"
-    ]
-  }
-}