pixelize-design-library 2.2.121 → 2.2.122

package/dist/Components/DatePicker/SingleDatePicker.js

@@ -176,6 +176,7 @@ var getFormatForPickerType = function (pickerType, dateFormat) {
     if (pickerType === "time") {
         var hasDate = /[dDmMyY]/.test(dateFormat);
         if (hasDate) {
+            // eslint-disable-next-line no-useless-escape
             var timeMatch = dateFormat.match(/[dDmMyY\/\-\s\.]+\s*([hHmsSaA\/\-\s:]+)$/);
             if (timeMatch && timeMatch[1]) {
                 return timeMatch[1].trim();
@@ -185,27 +186,24 @@ var getFormatForPickerType = function (pickerType, dateFormat) {
     }
     return dateFormat;
 };
-var usesAmPm = function (format) { return /(^|[^a-zA-Z])a([^a-zA-Z]|$)/i.test(format); };
-var sanitizeTimeInput = function (raw, format) {
-    var _a;
-    var ampm = usesAmPm(format);
-    var only = raw.replace(/[^0-9aApPmM:\s]/g, "");
-    if (/H{1,2}:m{1,2}/.test(format) || /h{1,2}:m{1,2}/i.test(format)) {
-        var digits = only.replace(/[^0-9]/g, "");
-        var hh = digits.slice(0, 2);
-        var mm = digits.slice(2, 4);
-        var out = hh;
-        if (mm.length)
-            out += ":" + mm;
-        if (ampm) {
-            var suffix = (((_a = only.match(/(am|pm)/i)) === null || _a === void 0 ? void 0 : _a[0]) || "").toUpperCase();
-            if (suffix)
-                out += " " + suffix;
-        }
-        return out;
-    }
-    return only;
-};
+// const usesAmPm = (format: string): boolean => /(^|[^a-zA-Z])a([^a-zA-Z]|$)/i.test(format);
+// const sanitizeTimeInput = (raw: string, format: string): string => {
+//   const ampm = usesAmPm(format);
+//   const only = raw.replace(/[^0-9aApPmM:\s]/g, "");
+//   if (/H{1,2}:m{1,2}/.test(format) || /h{1,2}:m{1,2}/i.test(format)) {
+//     const digits = only.replace(/[^0-9]/g, "");
+//     const hh = digits.slice(0, 2);
+//     const mm = digits.slice(2, 4);
+//     let out = hh;
+//     if (mm.length) out += ":" + mm;
+//     if (ampm) {
+//       const suffix = (only.match(/(am|pm)/i)?.[0] || "").toUpperCase();
+//       if (suffix) out += " " + suffix;
+//     }
+//     return out;
+//   }
+//   return only;
+// };
 var normalizeTimeBuffer = function (tokenChar, rawBuffer, segmentLength, is12Hour) {
     if (!tokenChar)
         return { value: rawBuffer, completed: rawBuffer.length >= segmentLength };
@@ -215,7 +213,7 @@ var normalizeTimeBuffer = function (tokenChar, rawBuffer, segmentLength, is12Hou
         return { value: buf, completed: buf.length >= segmentLength };
     }
     if (t === "h") {
-        var maxHour = is12Hour ? 12 : 24;
+        // const maxHour = is12Hour ? 12 : 24;
         if (buf.length === 1) {
             var d = parseInt(buf[0], 10);
             var firstMax = is12Hour ? 1 : 2;
@@ -338,7 +336,7 @@ var SingleDatePicker = function (props) {
     var _t = (0, react_1.useState)(""), inputValue = _t[0], setInputValue = _t[1];
     var _u = (0, react_1.useState)(false), isTyping = _u[0], setIsTyping = _u[1];
     var _v = (0, react_1.useState)(false), isMaskActive = _v[0], setIsMaskActive = _v[1];
-    var _w = (0, react_1.useState)(0), currentSegmentIndex = _w[0], setCurrentSegmentIndex = _w[1];
+    var _w = (0, react_1.useState)(0), setCurrentSegmentIndex = _w[1];
     var lastSegmentIndexRef = (0, react_1.useRef)(0);
     var resetCommitGuardAndOpen = function () {
         didCommitRef.current = false;
@@ -542,7 +540,7 @@ var SingleDatePicker = function (props) {
             document.removeEventListener("mousedown", handleClickOutside, true);
             document.removeEventListener("click", handleClickOutside, true);
         };
-    }, [isOpen, tempDate, activeFormat]);
+    }, [isOpen, tempDate, activeFormat]); // eslint-disable-line react-hooks/exhaustive-deps
     var ensureMaskValue = (0, react_1.useCallback)(function () {
         var _a, _b, _c, _d;
         if (!enableMask) {

package/dist/Components/DatePicker/TimeOnlyPicker.js

@@ -30,7 +30,6 @@ exports.TimeOnlyPicker = void 0;
 var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
 var date_fns_1 = require("date-fns");
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var FormLabel_1 = require("../Common/FormLabel");
 var HelperText_1 = __importDefault(require("../Common/HelperText"));
 var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
@@ -41,16 +40,15 @@ var formatToPlaceholder = function (formatStr) {
 };
 var TimeOnlyPicker = function (props) {
     var _a;
-    var id = props.id, name = props.name, label = props.label, isRequired = props.isRequired, isInformation = props.isInformation, informationMessage = props.informationMessage, error = props.error, errorMessage = props.errorMessage, helperText = props.helperText, placeholderText = props.placeholderText, _b = props.dateFormat, dateFormat = _b === void 0 ? "HH:mm" : _b, _c = props.autoComplete, autoComplete = _c === void 0 ? "off" : _c, disabled = props.disabled, _d = props.width, width = _d === void 0 ? "100%" : _d, _e = props.disableToday, disableToday = _e === void 0 ? false : _e;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _f = (0, react_2.useDisclosure)(), isOpen = _f.isOpen, onOpen = _f.onOpen, onClose = _f.onClose;
+    var id = props.id, label = props.label, isRequired = props.isRequired, isInformation = props.isInformation, informationMessage = props.informationMessage, error = props.error, errorMessage = props.errorMessage, helperText = props.helperText, placeholderText = props.placeholderText, _b = props.dateFormat, dateFormat = _b === void 0 ? "HH:mm" : _b, disabled = props.disabled, _c = props.width, width = _c === void 0 ? "100%" : _c, _d = props.disableToday, disableToday = _d === void 0 ? false : _d;
+    var _e = (0, react_2.useDisclosure)(), isOpen = _e.isOpen, onOpen = _e.onOpen, onClose = _e.onClose;
     var popoverRef = (0, react_1.useRef)(null);
     var triggerRef = (0, react_1.useRef)(null);
     var inputWrapperRef = (0, react_1.useRef)(null);
     var today = new Date();
     var tomorrow = (0, date_fns_1.addDays)(today, 1);
     var selectedDate = ((_a = props.value) !== null && _a !== void 0 ? _a : props.selectedDate);
-    var _g = (0, react_1.useState)(selectedDate ? new Date(selectedDate) : null), tempDate = _g[0], setTempDate = _g[1];
+    var _f = (0, react_1.useState)(selectedDate ? new Date(selectedDate) : null), tempDate = _f[0], setTempDate = _f[1];
     (0, react_1.useEffect)(function () {
         setTempDate(selectedDate ? new Date(selectedDate) : null);
     }, [selectedDate]);

package/dist/Components/DatePicker/TimePicker.js

@@ -45,7 +45,7 @@ var TimePicker = function (_a) {
         if (is12HourFormat) {
             setAmpm(rawHour >= 12 ? "PM" : "AM");
         }
-    }, [date, is12HourFormat]);
+    }, [date, is12HourFormat]); // eslint-disable-line react-hooks/exhaustive-deps
     var convertTo24Hour = function (hr, meridiem) {
         if (meridiem === "AM")
             return hr === 12 ? 0 : hr;

package/dist/Components/DatePicker/TimePickerInput.js

@@ -120,9 +120,9 @@ var TimePickerInput = function (_a) {
     var inputRef = (0, react_1.useRef)(null);
     var _c = (0, react_1.useState)(""), digits = _c[0], setDigits = _c[1];
     var digitsRef = (0, react_1.useRef)("");
-    var _d = (0, react_1.useState)(false), isFocused = _d[0], setIsFocused = _d[1];
+    var _d = (0, react_1.useState)(false), setIsFocused = _d[1];
     var isFocusedRef = (0, react_1.useRef)(false);
-    var _e = (0, react_1.useState)("hour"), activeSegment = _e[0], setActiveSegment = _e[1];
+    var _e = (0, react_1.useState)("hour"), setActiveSegment = _e[1];
     var is12Hour = (0, react_1.useMemo)(function () { return /h{1,2}/i.test(dateFormat) && !/H{1,2}/.test(dateFormat); }, [dateFormat]);
     var placeholderText = (0, react_1.useMemo)(function () { return placeholder || formatToPlaceholder(dateFormat); }, [placeholder, dateFormat]);
     var ampmRef = (0, react_1.useRef)("AM");

package/dist/Components/FeedbackForm/FeedbackForm.js

@@ -61,6 +61,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
+// eslint-disable-next-line no-control-regex, no-useless-escape
 var emailRegex = /^(?:[a-zA-Z0-9_'^&\/+{}=?`|~!-]+(?:\.[a-zA-Z0-9_'^&\/+{}=?`|~!-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-zA-Z-]*[a-zA-Z]:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]+)\])$/;
 function FeedbackForm(props) {
     var _this = this;

package/dist/Components/KanbanBoard/AccountCard.d.ts

@@ -1,11 +1,12 @@
 import React from "react";
 import { Account, KanbanBoardProps } from "./KanbanBoardProps";
-declare const AccountCard: ({ account, index, onDelete, onOpen, isExpanded, onToggleExpand, }: {
+declare const AccountCard: ({ account, index, onDelete, onOpen, isExpanded, onToggleExpand, isDeletable, }: {
     account: Account;
     index: number;
     onDelete: KanbanBoardProps["onDelete"];
     onOpen: KanbanBoardProps["onOpen"];
     isExpanded?: boolean | undefined;
     onToggleExpand?: (() => void) | undefined;
+    isDeletable?: boolean | undefined;
 }) => React.JSX.Element;
 export default AccountCard;

package/dist/Components/KanbanBoard/AccountCard.js

@@ -34,9 +34,9 @@ var AccountRow_1 = __importDefault(require("./AccountRow"));
 var excludeKeys = ["id", "details"];
 var AccountCard = function (_a) {
     var _b, _c, _d, _e, _f, _g;
-    var account = _a.account, index = _a.index, onDelete = _a.onDelete, onOpen = _a.onOpen, _h = _a.isExpanded, isExpanded = _h === void 0 ? false : _h, onToggleExpand = _a.onToggleExpand;
+    var account = _a.account, index = _a.index, onDelete = _a.onDelete, onOpen = _a.onOpen, _h = _a.isExpanded, isExpanded = _h === void 0 ? false : _h, onToggleExpand = _a.onToggleExpand, _j = _a.isDeletable, isDeletable = _j === void 0 ? true : _j;
     var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
-    var _j = (0, react_1.useState)(false), showMore = _j[0], setShowMore = _j[1];
+    var _k = (0, react_1.useState)(false), showMore = _k[0], setShowMore = _k[1];
     var keys = Object.keys(account).filter(function (key) { return typeof account[key] === "string" && !excludeKeys.includes(key); });
     var visibleKeys = isExpanded ? keys : keys.slice(0, 4);
     // Handle the show more/less toggle
@@ -57,9 +57,9 @@ var AccountCard = function (_a) {
                     isExpanded ? react_1.default.createElement(lucide_react_1.ChevronUp, { size: 14 }) : react_1.default.createElement(lucide_react_1.ChevronDown, { size: 14 }))),
                 react_1.default.createElement(react_2.Spacer, null),
                 react_1.default.createElement(react_2.HStack, { spacing: 2 },
-                    react_1.default.createElement(react_2.Tooltip, { label: "Delete" },
-                        react_1.default.createElement(lucide_react_1.Trash2, { size: 16, color: (_f = colors === null || colors === void 0 ? void 0 : colors.red) === null || _f === void 0 ? void 0 : _f[600], onClick: function () { return onDelete === null || onDelete === void 0 ? void 0 : onDelete(account); }, cursor: "pointer" })),
+                    isDeletable && (react_1.default.createElement(react_2.Tooltip, { label: "Delete" },
+                        react_1.default.createElement(lucide_react_1.Trash2, { size: 16, color: (_f = colors === null || colors === void 0 ? void 0 : colors.red) === null || _f === void 0 ? void 0 : _f[600], onClick: function () { return onDelete === null || onDelete === void 0 ? void 0 : onDelete(account); }, cursor: "pointer", "aria-label": "Delete" }))),
                     react_1.default.createElement(react_2.Tooltip, { label: "Open" },
-                        react_1.default.createElement(lucide_react_1.ExternalLink, { size: 16, color: (_g = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _g === void 0 ? void 0 : _g[600], onClick: function () { return onOpen === null || onOpen === void 0 ? void 0 : onOpen(account); }, cursor: "pointer" })))))));
+                        react_1.default.createElement(lucide_react_1.ExternalLink, { size: 16, color: (_g = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _g === void 0 ? void 0 : _g[600], onClick: function () { return onOpen === null || onOpen === void 0 ? void 0 : onOpen(account); }, cursor: "pointer", "aria-label": "Open" })))))));
 };
 exports.default = AccountCard;

package/dist/Components/KanbanBoard/AccountCard.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/Components/KanbanBoard/AccountCard.test.js

@@ -0,0 +1,63 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+var AccountCard_1 = __importDefault(require("./AccountCard"));
+jest.mock("../../Theme/useCustomTheme", function () { return ({
+    useCustomTheme: function () { return ({
+        colors: {
+            background: { 500: "#fff" },
+            gray: { 200: "#eee", 700: "#333" },
+            primary: { 500: "#3182ce" },
+            red: { 600: "#e53e3e" },
+            blue: { 600: "#3182ce" },
+            text: {},
+        },
+    }); },
+}); });
+var mockAccount = {
+    id: "1",
+    name: "Test Account",
+    email: "test@example.com",
+};
+var defaultProps = {
+    account: mockAccount,
+    index: 0,
+    onDelete: jest.fn(),
+    onOpen: jest.fn(),
+};
+describe("AccountCard – permissions", function () {
+    it("renders the delete icon when isDeletable is true (default)", function () {
+        (0, react_2.render)(react_1.default.createElement(AccountCard_1.default, __assign({}, defaultProps)));
+        expect(react_2.screen.getByLabelText("Delete")).toBeInTheDocument();
+    });
+    it("hides the delete icon when isDeletable is false", function () {
+        (0, react_2.render)(react_1.default.createElement(AccountCard_1.default, __assign({}, defaultProps, { isDeletable: false })));
+        expect(react_2.screen.queryByLabelText("Delete")).not.toBeInTheDocument();
+    });
+    it("renders the open (ExternalLink) icon regardless of isDeletable", function () {
+        (0, react_2.render)(react_1.default.createElement(AccountCard_1.default, __assign({}, defaultProps, { isDeletable: false })));
+        expect(react_2.screen.getByLabelText("Open")).toBeInTheDocument();
+    });
+    it("calls onDelete when delete icon is clicked and isDeletable is true", function () {
+        var onDelete = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(AccountCard_1.default, __assign({}, defaultProps, { onDelete: onDelete, isDeletable: true })));
+        react_2.screen.getByLabelText("Delete").click();
+        expect(onDelete).toHaveBeenCalledWith(mockAccount);
+    });
+});

package/dist/Components/KanbanBoard/KanbanBoard.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { KanbanBoardProps } from "./KanbanBoardProps";
-declare const KanbanBoard: ({ data, onDrag, onDelete, onOpen, onColumnDelete, isLoading, kanbanSelect, kanbanEdit, kanbanCreate, virtualization, }: KanbanBoardProps) => React.JSX.Element;
+declare const KanbanBoard: ({ data, onDrag, onDelete, onOpen, onColumnDelete, isLoading, kanbanSelect, kanbanEdit, kanbanCreate, virtualization, permissions, }: KanbanBoardProps) => React.JSX.Element | null;
 export default KanbanBoard;

package/dist/Components/KanbanBoard/KanbanBoard.js

@@ -57,8 +57,12 @@ var HeaderActions_1 = __importDefault(require("../Header/HeaderActions"));
 var MeasuredItem_1 = __importDefault(require("./MeasuredItem"));
 var KanbanBoard = function (_a) {
     var _b, _c, _d, _e, _f, _g, _h;
-    var data = _a.data, onDrag = _a.onDrag, onDelete = _a.onDelete, onOpen = _a.onOpen, onColumnDelete = _a.onColumnDelete, _j = _a.isLoading, isLoading = _j === void 0 ? false : _j, kanbanSelect = _a.kanbanSelect, kanbanEdit = _a.kanbanEdit, kanbanCreate = _a.kanbanCreate, virtualization = _a.virtualization;
+    var data = _a.data, onDrag = _a.onDrag, onDelete = _a.onDelete, onOpen = _a.onOpen, onColumnDelete = _a.onColumnDelete, _j = _a.isLoading, isLoading = _j === void 0 ? false : _j, kanbanSelect = _a.kanbanSelect, kanbanEdit = _a.kanbanEdit, kanbanCreate = _a.kanbanCreate, virtualization = _a.virtualization, permissions = _a.permissions;
     var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
+    var canDrag = (permissions === null || permissions === void 0 ? void 0 : permissions.isEditable) !== false;
+    var canDelete = (permissions === null || permissions === void 0 ? void 0 : permissions.isDeletable) !== false;
+    var canCreate = (permissions === null || permissions === void 0 ? void 0 : permissions.isCreatable) !== false;
+    var canView = (permissions === null || permissions === void 0 ? void 0 : permissions.isViewable) !== false;
     var _k = (0, react_1.useState)(data), columns = _k[0], setColumns = _k[1];
     var _l = (0, react_1.useState)(600), containerHeight = _l[0], setContainerHeight = _l[1];
     var _m = (0, react_1.useState)(null), hoveredColumn = _m[0], setHoveredColumn = _m[1];
@@ -160,12 +164,14 @@ var KanbanBoard = function (_a) {
         return (react_1.default.createElement("div", { style: style },
             react_1.default.createElement(MeasuredItem_1.default, { index: index, setSize: function (i, h) { return setSize(i, h, colId); } },
                 react_1.default.createElement("div", { style: { marginBottom: 12 } },
-                    react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id }, function (provided) { return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: provided.draggableProps.style }),
-                        react_1.default.createElement(AccountCard_1.default, { key: account.id, account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: function () { return toggleExpand(account.id, colId, index); } }))); }))),
+                    react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id, isDragDisabled: !canDrag }, function (provided) { return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: provided.draggableProps.style }),
+                        react_1.default.createElement(AccountCard_1.default, { key: account.id, account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: function () { return toggleExpand(account.id, colId, index); }, isDeletable: canDelete }))); }))),
             index === items.length - 1 && placeholder));
     };
+    if (!canView)
+        return null;
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(HeaderActions_1.default, { select: kanbanSelect, edit: kanbanEdit, create: kanbanCreate }),
+        react_1.default.createElement(HeaderActions_1.default, { select: kanbanSelect, edit: canDrag ? kanbanEdit : undefined, create: canCreate ? kanbanCreate : undefined }),
         react_1.default.createElement(dnd_1.DragDropContext, { onDragEnd: onDragEnd },
             react_1.default.createElement(react_2.Box, { ref: containerRef, bg: (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[200], minH: "".concat(containerHeight, "px"), position: "relative", overflow: "hidden", mt: 2 },
                 react_1.default.createElement(react_2.Flex, { gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%", 
@@ -214,13 +220,9 @@ var KanbanBoard = function (_a) {
                                     : "0.125rem solid " + ((_d = colors.gray) === null || _d === void 0 ? void 0 : _d[200])), display: "flex", flexDirection: "column", flexShrink: 0, overflow: "hidden", height: "".concat(containerHeight - 60, "px"), onMouseEnter: function () { return setHoveredColumn(colId); }, onMouseLeave: function () { return setHoveredColumn(null); } }),
                                 react_1.default.createElement(react_2.Flex, { width: "95%", height: "2.75rem", borderRadius: "0.25rem", borderLeft: "0.188rem solid", borderLeftColor: (_e = column.color) !== null && _e !== void 0 ? _e : (_f = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _f === void 0 ? void 0 : _f[500], background: (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[100], align: "center", px: 2, m: 2, flexShrink: 0, justifyContent: "space-between", position: "relative" },
                                     react_1.default.createElement(react_2.Text, { fontWeight: "600", fontSize: "1rem", color: (_h = colors === null || colors === void 0 ? void 0 : colors.text) === null || _h === void 0 ? void 0 : _h[700] }, column.title),
-                                    hoveredColumn === colId && column.items.length > 0 && (react_1.default.createElement(react_2.Box, { as: lucide_react_1.Trash2, size: 16, cursor: "pointer", color: (_j = colors === null || colors === void 0 ? void 0 : colors.text) === null || _j === void 0 ? void 0 : _j[600], _hover: { color: (_k = colors === null || colors === void 0 ? void 0 : colors.red) === null || _k === void 0 ? void 0 : _k[600] }, onClick: function () { return handleColumnDelete(colId); }, transition: "color 0.2s ease" })),
-                                    !(hoveredColumn === colId && column.items.length > 0) && (react_1.default.createElement(react_2.Box, { width: "16px", height: "16px" }))),
-                                react_1.default.createElement(react_2.Box
-                                // px={2}
-                                // pb={2}
-                                , { 
-                                    // px={2}
+                                    canDelete && hoveredColumn === colId && column.items.length > 0 && (react_1.default.createElement(react_2.Box, { as: lucide_react_1.Trash2, size: 16, cursor: "pointer", color: (_j = colors === null || colors === void 0 ? void 0 : colors.text) === null || _j === void 0 ? void 0 : _j[600], _hover: { color: (_k = colors === null || colors === void 0 ? void 0 : colors.red) === null || _k === void 0 ? void 0 : _k[600] }, onClick: function () { return handleColumnDelete(colId); }, transition: "color 0.2s ease" })),
+                                    !(canDelete && hoveredColumn === colId && column.items.length > 0) && (react_1.default.createElement(react_2.Box, { width: "16px", height: "16px" }))),
+                                react_1.default.createElement(react_2.Box, { px: 2, 
                                     // pb={2}
                                     flex: "1", overflowY: "auto", width: "100%", 
                                     // mr={1} // Add right margin to create gap for scrollbar
@@ -255,6 +257,7 @@ var KanbanBoard = function (_a) {
                                         "&": {
                                             scrollbarGutter: "stable both-edges",
                                         },
+                                        cursor: canDrag ? "grab" : "not-allowed",
                                     } }, virtualization ? (react_1.default.createElement(react_window_1.VariableSizeList, { ref: function (el) {
                                         if (el)
                                             listRefs.current[colId] = el;
@@ -264,10 +267,10 @@ var KanbanBoard = function (_a) {
                                         placeholder: provided.placeholder,
                                     } }, Row)) : (react_1.default.createElement(react_2.Box, null,
                                     column.items.map(function (account, index) { return (react_1.default.createElement("div", { key: account.id, style: { marginBottom: 12 } },
-                                        react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id }, function (provided) { return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: provided.draggableProps.style }),
+                                        react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id, isDragDisabled: !canDrag }, function (provided) { return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: provided.draggableProps.style }),
                                             react_1.default.createElement(AccountCard_1.default, { account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: function () {
                                                     return toggleExpand(account.id, colId, index);
-                                                } }))); }))); }),
+                                                }, isDeletable: canDelete }))); }))); }),
                                     provided.placeholder)))));
                         }));
                     }))))));

package/dist/Components/KanbanBoard/KanbanBoard.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/Components/KanbanBoard/KanbanBoard.test.js

@@ -0,0 +1,100 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+var KanbanBoard_1 = __importDefault(require("./KanbanBoard"));
+jest.mock("../../Theme/useCustomTheme", function () { return ({
+    useCustomTheme: function () { return ({
+        colors: {
+            background: { 100: "#f9f9f9", 500: "#fff" },
+            gray: { 100: "#f0f0f0", 200: "#eee", 300: "#ddd", 400: "#ccc", 500: "#bbb", 700: "#333" },
+            primary: { 500: "#3182ce" },
+            blue: { 50: "#ebf8ff", 500: "#3182ce", 600: "#3182ce" },
+            red: { 600: "#e53e3e" },
+            text: { 500: "#555", 600: "#444", 700: "#333" },
+            secondary: { 500: "#805ad5" },
+        },
+    }); },
+}); });
+jest.mock("@hello-pangea/dnd", function () { return ({
+    DragDropContext: function (_a) {
+        var children = _a.children;
+        return react_1.default.createElement("div", null, children);
+    },
+    Droppable: function (_a) {
+        var children = _a.children;
+        return children({ innerRef: function () { }, droppableProps: {}, placeholder: null }, { isDraggingOver: false });
+    },
+    Draggable: function (_a) {
+        var children = _a.children, isDragDisabled = _a.isDragDisabled;
+        var provided = {
+            innerRef: function () { },
+            draggableProps: { "data-drag-disabled": isDragDisabled },
+            dragHandleProps: {},
+        };
+        return children(provided, { isDragging: false });
+    },
+}); });
+jest.mock("react-window", function () { return ({
+    VariableSizeList: function () { return null; },
+}); });
+var sampleData = {
+    col1: {
+        id: "col1",
+        title: "To Do",
+        color: "#3182ce",
+        items: [
+            { id: "1", name: "Account A", email: "a@example.com" },
+            { id: "2", name: "Account B", email: "b@example.com" },
+        ],
+    },
+};
+describe("KanbanBoard – permissions", function () {
+    describe("isDeletable", function () {
+        it("shows card delete icons when permissions.isDeletable is true", function () {
+            (0, react_2.render)(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData, permissions: { isDeletable: true } }));
+            expect(react_2.screen.getAllByLabelText("Delete").length).toBeGreaterThan(0);
+        });
+        it("hides card delete icons when permissions.isDeletable is false", function () {
+            (0, react_2.render)(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData, permissions: { isDeletable: false } }));
+            expect(react_2.screen.queryByLabelText("Delete")).not.toBeInTheDocument();
+        });
+        it("shows card delete icons when permissions prop is omitted (default allow)", function () {
+            (0, react_2.render)(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData }));
+            expect(react_2.screen.getAllByLabelText("Delete").length).toBeGreaterThan(0);
+        });
+    });
+    describe("isCreatable", function () {
+        var kanbanCreate = { isCreatable: true, label: "Create New" };
+        it("shows the create button when permissions.isCreatable is true", function () {
+            (0, react_2.render)(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData, kanbanCreate: kanbanCreate, permissions: { isCreatable: true } }));
+            expect(react_2.screen.getByText("Create New")).toBeInTheDocument();
+        });
+        it("hides the create button when permissions.isCreatable is false", function () {
+            (0, react_2.render)(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData, kanbanCreate: kanbanCreate, permissions: { isCreatable: false } }));
+            expect(react_2.screen.queryByText("Create New")).not.toBeInTheDocument();
+        });
+    });
+    describe("isEditable", function () {
+        var kanbanEdit = { isEditable: true, label: "Edit Layout" };
+        it("shows the edit button when permissions.isEditable is true", function () {
+            (0, react_2.render)(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData, kanbanEdit: kanbanEdit, permissions: { isEditable: true } }));
+            expect(react_2.screen.getByText("Edit Layout")).toBeInTheDocument();
+        });
+        it("hides the edit button when permissions.isEditable is false", function () {
+            (0, react_2.render)(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData, kanbanEdit: kanbanEdit, permissions: { isEditable: false } }));
+            expect(react_2.screen.queryByText("Edit Layout")).not.toBeInTheDocument();
+        });
+        it("sets isDragDisabled on cards when permissions.isEditable is false", function () {
+            (0, react_2.render)(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData, permissions: { isEditable: false } }));
+            var disabledDraggables = react_2.screen
+                .getAllByRole("generic")
+                .filter(function (el) { return el.getAttribute("data-drag-disabled") === "true"; });
+            expect(disabledDraggables.length).toBeGreaterThan(0);
+        });
+    });
+});

package/dist/Components/KanbanBoard/KanbanBoardProps.d.ts

@@ -39,4 +39,10 @@ export type KanbanBoardProps = {
         label?: string;
     };
     virtualization?: boolean;
+    permissions?: {
+        isEditable?: boolean;
+        isCreatable?: boolean;
+        isDeletable?: boolean;
+        isViewable?: boolean;
+    };
 };

package/dist/Components/Notification/Notification.js

@@ -37,9 +37,9 @@ var Notification = function (_a) {
     var warningColor = (colors === null || colors === void 0 ? void 0 : colors.warningColor) || theme.colors.semantic.warning;
     var errorColor = (colors === null || colors === void 0 ? void 0 : colors.errorColor) || theme.colors.semantic.error;
     var successColor = (colors === null || colors === void 0 ? void 0 : colors.successColor) || theme.colors.semantic.success;
-    var startDate = notification.startDate
+    var startDate = (0, react_1.useMemo)(function () { return notification.startDate
         ? new Date(notification.startDate)
-        : null;
+        : null; }, [notification.startDate]);
     var _c = (0, react_1.useMemo)(function () {
         var targetDate = notification.dueDate
             ? new Date(notification.dueDate)

package/dist/Components/ProductDetails/ProductDetails.js

@@ -9,7 +9,6 @@ var ProductImageSlider_1 = __importDefault(require("./ProductImageSlider"));
 var ProductLabel_1 = __importDefault(require("../ProductCard/ProductLabel"));
 var ProductTags_1 = __importDefault(require("../ProductCard/ProductTags"));
 var ProductDtlPrice_1 = __importDefault(require("./ProductDtlPrice"));
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var Button_1 = __importDefault(require("../Button/Button"));
 var lucide_react_1 = require("lucide-react");
 var ProductReview_1 = __importDefault(require("../ProductCard/ProductReview"));
@@ -17,7 +16,6 @@ var FormattedDescription_1 = __importDefault(require("../Common/FormattedDescrip
 var ProductDetails = function (_a) {
     var _b, _c, _d, _e, _f;
     var id = _a.id, price = _a.price, label = _a.label, shortdesc = _a.shortdesc, tags = _a.tags, images = _a.images, batch = _a.batch, category = _a.category, onAddToCart = _a.onAddToCart, onNotifyMe = _a.onNotifyMe, onOptionChange = _a.onOptionChange, addToCart = _a.addToCart, goToCart = _a.goToCart, OnGoToCart = _a.OnGoToCart, rating = _a.rating, reviews = _a.reviews, notifyMe = _a.notifyMe, _g = _a.isQtyEditable, isQtyEditable = _g === void 0 ? false : _g, _h = _a.displayRating, displayRating = _h === void 0 ? true : _h;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
     var isMobile = (0, react_2.useBreakpointValue)({ base: true, md: false });
     var _j = react_1.default.useState(price === null || price === void 0 ? void 0 : price[0]), selectedOption = _j[0], setSelectedOption = _j[1];
     var _k = react_1.default.useState(1), qty = _k[0], setQty = _k[1];

package/dist/Components/SideBar/SecondaryBar.js

@@ -39,7 +39,6 @@ var SecondaryBar = function (_a) {
     var _l = (0, react_1.useState)(defaultCollapsed), collapsed = _l[0], setCollapsed = _l[1];
     var width = collapsed ? collapsedWidth : expandedWidth;
     var showText = !collapsed;
-    var textMaxWidth = expandedWidth !== null && expandedWidth !== void 0 ? expandedWidth : "10rem";
     return (react_1.default.createElement(react_2.Box, { transition: "all 0.3s", pos: "sticky", top: 0, h: "100vh", w: width, bg: (_d = (_c = (_b = theme.colors.sidebar) === null || _b === void 0 ? void 0 : _b.background) === null || _c === void 0 ? void 0 : _c[400]) !== null && _d !== void 0 ? _d : theme.colors.gray[800], boxShadow: theme.shadows.md, zIndex: 1 },
         react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 0 },
             react_1.default.createElement(react_2.Flex, { align: "center", justify: showText ? "space-between" : "center", px: showText ? "0.75rem" : 0, h: "3.91rem", overflow: "hidden" },

package/package.json

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