npm - pixelize-design-library - Versions diffs - 2.3.1-beta.2 → 2.3.1-beta.20 - Mend

pixelize-design-library 2.3.1-beta.2 → 2.3.1-beta.20

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 (165) hide show

package/dist/Components/FilePreview/FilePreview.js ADDED Viewed

@@ -0,0 +1,190 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilePreviewTrigger = exports.FilePreview = void 0;
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var framer_motion_1 = require("framer-motion");
+var lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+var MotionContent = (0, framer_motion_1.motion)(react_2.ModalContent);
+var inferKind = function (url, fileName) {
+    var src = (fileName || url).split("?")[0].toLowerCase();
+    if (/\.(png|jpe?g|gif|webp|svg|bmp|avif)$/.test(src))
+        return "image";
+    if (/\.pdf$/.test(src))
+        return "pdf";
+    if (/\.(mp4|webm|ogg|mov)$/.test(src))
+        return "video";
+    return "other";
+};
+var downloadFile = function (fileUrl, fileName) { return __awaiter(void 0, void 0, void 0, function () {
+    var res, blob, url, link, _a;
+    return __generator(this, function (_b) {
+        switch (_b.label) {
+            case 0:
+                _b.trys.push([0, 3, , 4]);
+                return [4 /*yield*/, fetch(fileUrl)];
+            case 1:
+                res = _b.sent();
+                return [4 /*yield*/, res.blob()];
+            case 2:
+                blob = _b.sent();
+                url = window.URL.createObjectURL(blob);
+                link = document.createElement("a");
+                link.href = url;
+                link.download = fileName || "file";
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+                window.URL.revokeObjectURL(url);
+                return [3 /*break*/, 4];
+            case 3:
+                _a = _b.sent();
+                window.open(fileUrl, "_blank", "noopener,noreferrer");
+                return [3 /*break*/, 4];
+            case 4: return [2 /*return*/];
+        }
+    });
+}); };
+var FilePreview = function (_a) {
+    var _b, _c, _d, _e, _f;
+    var isOpen = _a.isOpen, onClose = _a.onClose, fileUrl = _a.fileUrl, fileName = _a.fileName, fileType = _a.fileType, _g = _a.hideDownload, hideDownload = _g === void 0 ? false : _g, _h = _a.size, size = _h === void 0 ? "xl" : _h;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var _j = (0, react_1.useState)(1), zoom = _j[0], setZoom = _j[1];
+    var _k = (0, react_1.useState)(0), rotation = _k[0], setRotation = _k[1];
+    var kind = fileType || inferKind(fileUrl, fileName);
+    var reset = function () {
+        setZoom(1);
+        setRotation(0);
+    };
+    var handleClose = function () {
+        reset();
+        onClose();
+    };
+    var renderBody = function () {
+        var _a, _b, _c, _d;
+        if (kind === "image") {
+            return (react_1.default.createElement(react_2.Flex, { justify: "center", align: "center", minH: "200px", overflow: "hidden" },
+                react_1.default.createElement(react_2.Image, { src: fileUrl, alt: fileName || "preview", maxW: "100%", transform: "scale(".concat(zoom, ") rotate(").concat(rotation, "deg)"), transition: "transform 0.2s ease", objectFit: "contain" })));
+        }
+        if (kind === "pdf") {
+            return (react_1.default.createElement(react_2.Box, { as: "embed", src: fileUrl, type: "application/pdf", width: "100%", height: "70vh", borderRadius: "8px" }));
+        }
+        if (kind === "video") {
+            return (react_1.default.createElement(react_2.Box, { as: "video", src: fileUrl, controls: true, width: "100%", borderRadius: "8px" }));
+        }
+        return (react_1.default.createElement(react_2.Flex, { direction: "column", align: "center", justify: "center", py: 12, gap: 3 },
+            react_1.default.createElement(lucide_react_1.FileQuestion, { size: 48, color: (_b = (_a = theme.colors.gray) === null || _a === void 0 ? void 0 : _a[400]) !== null && _b !== void 0 ? _b : "#A0AEC0" }),
+            react_1.default.createElement(react_2.Text, { color: (_d = (_c = theme.colors.gray) === null || _c === void 0 ? void 0 : _c[600]) !== null && _d !== void 0 ? _d : "#4A5568", fontSize: "sm" }, "Preview isn't available for this file type."),
+            !hideDownload && (react_1.default.createElement(react_2.Flex, { as: "button", align: "center", gap: 2, px: 4, py: 2, borderRadius: "8px", bg: theme.colors.primary[500], color: theme.colors.white, fontSize: "sm", fontWeight: 500, onClick: function () { return downloadFile(fileUrl, fileName); } },
+                react_1.default.createElement(lucide_react_1.Download, { size: 16 }),
+                " Download file"))));
+    };
+    return (react_1.default.createElement(react_2.Modal, { isOpen: isOpen, onClose: handleClose, size: size, isCentered: true },
+        react_1.default.createElement(react_2.ModalOverlay, { bg: "blackAlpha.600", backdropFilter: "blur(4px)" }),
+        react_1.default.createElement(MotionContent, { borderRadius: "16px", overflow: "hidden", initial: { opacity: 0, scale: 0.96, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, transition: { duration: 0.2, ease: "easeOut" } },
+            react_1.default.createElement(react_2.Flex, { align: "center", justify: "space-between", px: 4, py: 3, borderBottom: "1px solid", borderColor: (_c = (_b = theme.colors.gray) === null || _b === void 0 ? void 0 : _b[100]) !== null && _c !== void 0 ? _c : "#EDF2F7" },
+                react_1.default.createElement(ToolTip_1.default, { label: fileName || "File", placement: "bottom" },
+                    react_1.default.createElement(react_2.Text, { fontSize: "sm", fontWeight: 600, maxW: "60%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, fileName || "Preview")),
+                react_1.default.createElement(react_2.Flex, { align: "center", gap: 1 },
+                    kind === "image" && (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(ToolTip_1.default, { label: "Zoom out", placement: "bottom" },
+                            react_1.default.createElement(react_2.IconButton, { "aria-label": "Zoom out", size: "sm", variant: "ghost", icon: react_1.default.createElement(lucide_react_1.Minus, { size: 16 }), onClick: function () { return setZoom(function (z) { return Math.max(0.25, z - 0.25); }); } })),
+                        react_1.default.createElement(ToolTip_1.default, { label: "Zoom in", placement: "bottom" },
+                            react_1.default.createElement(react_2.IconButton, { "aria-label": "Zoom in", size: "sm", variant: "ghost", icon: react_1.default.createElement(lucide_react_1.Plus, { size: 16 }), onClick: function () { return setZoom(function (z) { return Math.min(4, z + 0.25); }); } })),
+                        react_1.default.createElement(ToolTip_1.default, { label: "Rotate", placement: "bottom" },
+                            react_1.default.createElement(react_2.IconButton, { "aria-label": "Rotate", size: "sm", variant: "ghost", icon: react_1.default.createElement(lucide_react_1.RotateCw, { size: 16 }), onClick: function () { return setRotation(function (r) { return (r + 90) % 360; }); } })))),
+                    !hideDownload && (react_1.default.createElement(ToolTip_1.default, { label: "Download", placement: "bottom" },
+                        react_1.default.createElement(react_2.IconButton, { "aria-label": "Download", size: "sm", variant: "ghost", color: (_f = (_e = (_d = theme.colors.semantic) === null || _d === void 0 ? void 0 : _d.success) === null || _e === void 0 ? void 0 : _e[500]) !== null && _f !== void 0 ? _f : "#16A34A", icon: react_1.default.createElement(lucide_react_1.Download, { size: 18 }), onClick: function () { return downloadFile(fileUrl, fileName); } }))),
+                    react_1.default.createElement(react_2.ModalCloseButton, { position: "static" }))),
+            react_1.default.createElement(react_2.ModalBody, { p: 5 }, renderBody()))));
+};
+exports.FilePreview = FilePreview;
+/** Thumbnail with a hover "preview" affordance that opens {@link FilePreview}. */
+var FilePreviewTrigger = function (_a) {
+    var fileUrl = _a.fileUrl, fileName = _a.fileName, fileType = _a.fileType, _b = _a.thumbWidth, thumbWidth = _b === void 0 ? "100px" : _b, _c = _a.thumbHeight, thumbHeight = _c === void 0 ? "60px" : _c, _d = _a.hideDownload, hideDownload = _d === void 0 ? false : _d;
+    var _e = (0, react_2.useDisclosure)(), isOpen = _e.isOpen, onOpen = _e.onOpen, onClose = _e.onClose;
+    var kind = fileType || inferKind(fileUrl, fileName);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(react_2.Box, { position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center", role: "group", maxW: thumbWidth, minW: "40px", minH: thumbHeight, borderRadius: "8px", overflow: "hidden", cursor: "pointer", onClick: onOpen },
+            kind === "image" ? (react_1.default.createElement(react_2.Image, { src: fileUrl, alt: fileName || "file", maxH: thumbHeight, maxW: thumbWidth, objectFit: "contain", borderRadius: "8px" })) : (react_1.default.createElement(react_2.Flex, { align: "center", justify: "center", boxSize: thumbHeight, bg: "gray.100", borderRadius: "8px" },
+                react_1.default.createElement(lucide_react_1.Eye, { size: 18 }))),
+            react_1.default.createElement(react_2.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", bg: "blackAlpha.500", color: "white", opacity: 0, transition: "opacity 0.15s ease", _groupHover: { opacity: 1 } },
+                react_1.default.createElement(lucide_react_1.Eye, { size: 18 }))),
+        react_1.default.createElement(exports.FilePreview, { isOpen: isOpen, onClose: onClose, fileUrl: fileUrl, fileName: fileName, fileType: fileType, hideDownload: hideDownload })));
+};
+exports.FilePreviewTrigger = FilePreviewTrigger;
+exports.default = exports.FilePreview;

package/dist/Components/FilePreview/FilePreviewProps.d.ts ADDED Viewed

@@ -0,0 +1,26 @@
+export type FilePreviewKind = "image" | "pdf" | "video" | "other";
+export interface FilePreviewProps {
+    isOpen: boolean;
+    onClose: () => void;
+    /** URL of the file to preview. */
+    fileUrl: string;
+    /** Display name (also used as the download filename). */
+    fileName?: string;
+    /** Force a renderer. When omitted it is inferred from the file extension. */
+    fileType?: FilePreviewKind;
+    /** Hide the download action. */
+    hideDownload?: boolean;
+    /** Modal size. */
+    size?: "md" | "lg" | "xl" | "2xl" | "full";
+}
+export interface FilePreviewTriggerProps {
+    /** URL of the file. */
+    fileUrl: string;
+    fileName?: string;
+    fileType?: FilePreviewKind;
+    /** Thumbnail max width. */
+    thumbWidth?: string;
+    /** Thumbnail max height. */
+    thumbHeight?: string;
+    hideDownload?: boolean;
+}

package/dist/Components/FilePreview/FilePreviewProps.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";
2	+ Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/KanbanBoard/AccountCard.js CHANGED Viewed

@@ -43,32 +43,35 @@ var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var AccountRow_1 = __importDefault(require("./AccountRow"));
 var excludeKeys = ["id", "details"];
 var AccountCard = react_1.default.memo(function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h;
-    var account = _a.account, onDelete = _a.onDelete, onOpen = _a.onOpen, _j = _a.isExpanded, isExpanded = _j === void 0 ? false : _j, onToggleExpand = _a.onToggleExpand, _k = _a.isDeletable, isDeletable = _k === void 0 ? true : _k;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    var account = _a.account, onDelete = _a.onDelete, onOpen = _a.onOpen, _s = _a.isExpanded, isExpanded = _s === void 0 ? false : _s, onToggleExpand = _a.onToggleExpand, _t = _a.isDeletable, isDeletable = _t === void 0 ? true : _t;
     var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
     var keys = (0, react_1.useMemo)(function () { return Object.keys(account).filter(function (key) { return typeof account[key] === "string" && !excludeKeys.includes(key); }); }, [account]);
     var visibleKeys = isExpanded ? keys : keys.slice(0, 4);
     var handleToggle = function () {
         onToggleExpand === null || onToggleExpand === void 0 ? void 0 : onToggleExpand();
     };
-    return (react_1.default.createElement(react_2.Box, { width: "100%", borderRadius: "0.25rem", borderWidth: "0.063rem", background: (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[200], border: "0.1rem solid ".concat((_c = colors.gray) === null || _c === void 0 ? void 0 : _c[200]), p: 2, boxSizing: "border-box", minHeight: isExpanded ? "180px" : "80px", transition: "border-color 0.15s ease", _hover: {
-            borderColor: (_d = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _d === void 0 ? void 0 : _d[200],
+    return (react_1.default.createElement(react_2.Box, { role: "group", width: "100%", borderRadius: "0.625rem", background: (_b = colors === null || colors === void 0 ? void 0 : colors.white) !== null && _b !== void 0 ? _b : "#fff", border: "0.063rem solid ".concat((_d = (_c = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[200]), boxShadow: "0 0.063rem 0.125rem rgba(0,0,0,0.04)", p: 3, boxSizing: "border-box", minHeight: isExpanded ? "180px" : "80px", transition: "border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease", _hover: {
+            borderColor: (_f = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _f === void 0 ? void 0 : _f[300],
+            boxShadow: "0 0.25rem 0.75rem rgba(0,0,0,0.08)",
+            transform: "translateY(-0.063rem)",
         } },
-        react_1.default.createElement(react_2.VStack, { align: "start", spacing: 0.5, fontSize: "0.875rem", color: (_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[700] },
+        react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 1, fontSize: "0.875rem", color: (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[700] },
             visibleKeys.map(function (key) { return (react_1.default.createElement(AccountRow_1.default, { key: key, label: key.replace(/\b\w/g, function (c) { return c.toUpperCase(); }), value: account[key] })); }),
             react_1.default.createElement(react_2.Collapse, { in: isExpanded && account.details !== undefined, animateOpacity: true },
-                react_1.default.createElement(react_2.Text, { pt: 2 }, account.details)),
+                react_1.default.createElement(react_2.Text, { pt: 2, fontSize: "0.8125rem", color: (_h = colors === null || colors === void 0 ? void 0 : colors.text) === null || _h === void 0 ? void 0 : _h[600] }, account.details)),
             react_1.default.createElement(react_2.Flex, { justify: "space-between", w: "full", pt: 2, alignItems: "center" },
-                keys.length > 4 && (react_1.default.createElement(react_2.Text, { color: (_f = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _f === void 0 ? void 0 : _f[500], fontSize: "sm", fontWeight: "medium", cursor: "pointer", onClick: handleToggle, display: "flex", alignItems: "center", gap: 2 },
+                keys.length > 4 ? (react_1.default.createElement(react_2.Text, { color: (_j = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _j === void 0 ? void 0 : _j[600], fontSize: "0.75rem", fontWeight: 600, cursor: "pointer", onClick: handleToggle, display: "flex", alignItems: "center", gap: 1, _hover: { color: (_k = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _k === void 0 ? void 0 : _k[700] } },
                     "Show ",
                     isExpanded ? "less" : "more",
                     " ",
-                    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 },
-                    isDeletable && (react_1.default.createElement(react_2.Tooltip, { label: "Delete" },
-                        react_1.default.createElement(lucide_react_1.Trash2, { size: 16, color: (_g = colors === null || colors === void 0 ? void 0 : colors.red) === null || _g === void 0 ? void 0 : _g[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: (_h = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _h === void 0 ? void 0 : _h[600], onClick: function () { return onOpen === null || onOpen === void 0 ? void 0 : onOpen(account); }, cursor: "pointer", "aria-label": "Open" })))))));
+                    isExpanded ? react_1.default.createElement(lucide_react_1.ChevronUp, { size: 13 }) : react_1.default.createElement(lucide_react_1.ChevronDown, { size: 13 }))) : (react_1.default.createElement(react_2.Spacer, null)),
+                react_1.default.createElement(react_2.HStack, { spacing: 1, opacity: 0, transition: "opacity 0.15s ease", _groupHover: { opacity: 1 } },
+                    isDeletable && (react_1.default.createElement(react_2.Tooltip, { label: "Delete", hasArrow: true },
+                        react_1.default.createElement(react_2.Flex, { align: "center", justify: "center", boxSize: "1.625rem", borderRadius: "0.375rem", cursor: "pointer", color: (_l = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _l === void 0 ? void 0 : _l[500], transition: "background 0.15s ease, color 0.15s ease", _hover: { bg: (_m = colors === null || colors === void 0 ? void 0 : colors.red) === null || _m === void 0 ? void 0 : _m[50], color: (_o = colors === null || colors === void 0 ? void 0 : colors.red) === null || _o === void 0 ? void 0 : _o[600] }, onClick: function () { return onDelete === null || onDelete === void 0 ? void 0 : onDelete(account); }, "aria-label": "Delete" },
+                            react_1.default.createElement(lucide_react_1.Trash2, { size: 15 })))),
+                    react_1.default.createElement(react_2.Tooltip, { label: "Open", hasArrow: true },
+                        react_1.default.createElement(react_2.Flex, { align: "center", justify: "center", boxSize: "1.625rem", borderRadius: "0.375rem", cursor: "pointer", color: (_p = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _p === void 0 ? void 0 : _p[500], transition: "background 0.15s ease, color 0.15s ease", _hover: { bg: (_q = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _q === void 0 ? void 0 : _q[50], color: (_r = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _r === void 0 ? void 0 : _r[600] }, onClick: function () { return onOpen === null || onOpen === void 0 ? void 0 : onOpen(account); }, "aria-label": "Open" },
+                            react_1.default.createElement(lucide_react_1.ExternalLink, { size: 15 }))))))));
 });
 exports.default = AccountCard;

package/dist/Components/KanbanBoard/KanbanBoard.js CHANGED Viewed

@@ -71,6 +71,9 @@ var Button_1 = __importDefault(require("../Button/Button"));
 /** Narrow rail width when a column is horizontally collapsed. */
 var COLLAPSED_KANBAN_COLUMN_WIDTH = "2.75rem";
 var KANBAN_CARD_GAP = 12;
+// Top buffer above the first card so its border + hover lift aren't clipped by the
+// scroll/virtualized list's top edge.
+var KANBAN_LIST_TOP_PAD = 6;
 var KanbanRow = react_1.default.memo(function (_a) {
     var index = _a.index, style = _a.style, data = _a.data;
     var items = data.items, colId = data.colId, canDrag = data.canDrag, expanded = data.expanded, onDelete = data.onDelete, onOpen = data.onOpen, canDelete = data.canDelete, setSize = data.setSize, toggleExpand = data.toggleExpand;
@@ -79,7 +82,7 @@ var KanbanRow = react_1.default.memo(function (_a) {
         return react_1.default.createElement("div", { style: style });
     }
     return (react_1.default.createElement("div", { style: style },
-        react_1.default.createElement("div", { style: { paddingBottom: KANBAN_CARD_GAP } },
+        react_1.default.createElement("div", { style: { paddingBottom: KANBAN_CARD_GAP, paddingTop: index === 0 ? KANBAN_LIST_TOP_PAD : 0 } },
             react_1.default.createElement(MeasuredItem_1.default, { index: index, setSize: function (i, h) { return setSize(i, h, colId); } },
                 react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id, isDragDisabled: !canDrag }, function (provided) {
                     var _a;
@@ -259,13 +262,14 @@ var KanbanBoard = function (_a) {
                 return prev;
             return __assign(__assign({}, prev), (_a = {}, _a[key] = size, _a));
         });
+        // Only recompute from the row that changed downward (cheaper than resetting all).
         if (listRefs.current[colId]) {
-            listRefs.current[colId].resetAfterIndex(0);
+            listRefs.current[colId].resetAfterIndex(index);
         }
     }, []);
     var getItemSize = (0, react_1.useCallback)(function (index, _items, colId) {
         var key = "".concat(colId, "-").concat(index);
-        return (sizes[key] || DEFAULT_ITEM_HEIGHT) + KANBAN_CARD_GAP;
+        return (sizes[key] || DEFAULT_ITEM_HEIGHT) + KANBAN_CARD_GAP + (index === 0 ? KANBAN_LIST_TOP_PAD : 0);
     }, [sizes]);
     // Calculate container height
     (0, react_1.useEffect)(function () {
@@ -281,8 +285,9 @@ var KanbanBoard = function (_a) {
             window.removeEventListener("resize", calculateDimensions);
         };
     }, [isBoardLoading]);
-    // toggle expand/collapse
-    var toggleExpand = function (id, colId, index) {
+    // toggle expand/collapse — memoized so it doesn't bust `rowBaseProps`/itemData
+    // every render (which would re-render every virtualized row).
+    var toggleExpand = (0, react_1.useCallback)(function (id, colId, index) {
         setExpanded(function (prev) {
             var _a;
             var newExpanded = __assign(__assign({}, prev), (_a = {}, _a[id] = !prev[id], _a));
@@ -291,9 +296,9 @@ var KanbanBoard = function (_a) {
             }
             return newExpanded;
         });
-    };
+    }, []);
     // drag handler
-    var onDragEnd = function (result) {
+    var onDragEnd = (0, react_1.useCallback)(function (result) {
         var _a, _b;
         var source = result.source, destination = result.destination, type = result.type;
         if (!destination)
@@ -344,12 +349,12 @@ var KanbanBoard = function (_a) {
                 toIndex: destination.index,
             });
         }
-    };
-    var handleColumnDelete = function (colId) {
+    }, [columns, onDrag, onColumnReorder]);
+    var handleColumnDelete = (0, react_1.useCallback)(function (colId) {
         var _a, _b;
         var columnIds = ((_b = (_a = columns[colId]) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.map(function (item) { return item.id; })) || [];
         onColumnDelete === null || onColumnDelete === void 0 ? void 0 : onColumnDelete(columnIds);
-    };
+    }, [columns, onColumnDelete]);
     var rowBaseProps = (0, react_1.useMemo)(function () { return ({
         canDrag: canDrag,
         expanded: expanded,
@@ -359,6 +364,16 @@ var KanbanBoard = function (_a) {
         setSize: setSize,
         toggleExpand: toggleExpand,
     }); }, [canDrag, expanded, onDelete, onOpen, canDelete, setSize, toggleExpand]);
+    // Stable per-column itemData so unrelated board re-renders (e.g. column hover)
+    // don't change the reference react-window hands to every row → no row re-renders.
+    var itemDataByCol = (0, react_1.useMemo)(function () {
+        var map = {};
+        for (var _i = 0, _a = Object.entries(columns); _i < _a.length; _i++) {
+            var _b = _a[_i], colId = _b[0], column = _b[1];
+            map[colId] = __assign(__assign({}, rowBaseProps), { items: column.items, colId: colId });
+        }
+        return map;
+    }, [columns, rowBaseProps]);
     var renderColumnDroppable = function (colId, column, columnDragHandleProps, isColCollapsed) { return (react_1.default.createElement(dnd_1.Droppable, { droppableId: colId, key: colId, mode: virtualization ? "virtual" : "standard", renderClone: function (provided, _snapshot, rubric) {
             var _a;
             var item = column.items[rubric.source.index];
@@ -366,89 +381,89 @@ var KanbanBoard = function (_a) {
                     return toggleExpand(item.id, colId, rubric.source.index);
                 }, isDeletable: canDelete }))));
         } }, function (provided, snapshot) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7;
-        return (react_1.default.createElement(react_2.Box, __assign({ ref: provided.innerRef }, provided.droppableProps, { width: isColCollapsed ? COLLAPSED_KANBAN_COLUMN_WIDTH : columnWidth, borderRadius: "0.5rem", borderWidth: "0.063rem", background: snapshot.isDraggingOver
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10;
+        return (react_1.default.createElement(react_2.Box, __assign({ ref: provided.innerRef }, provided.droppableProps, { width: isColCollapsed ? COLLAPSED_KANBAN_COLUMN_WIDTH : columnWidth, borderRadius: "0.75rem", background: snapshot.isDraggingOver
                 ? (_a = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _a === void 0 ? void 0 : _a[50]
-                : (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[100], border: "".concat(snapshot.isDraggingOver
-                ? "0.5px dashed " + ((_c = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _c === void 0 ? void 0 : _c[300])
-                : "0.125rem solid " + ((_d = colors.gray) === null || _d === void 0 ? void 0 : _d[200])), display: "flex", flexDirection: "column", flexShrink: 0, overflow: isColCollapsed ? "visible" : "hidden", height: "".concat(containerHeight - 60, "px"), transition: "width 0.2s ease", onMouseEnter: function () { return setHoveredColumn(colId); }, onMouseLeave: function () { return setHoveredColumn(null); } }),
+                : (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[100], border: "0.063rem ".concat(snapshot.isDraggingOver ? "dashed" : "solid", " ").concat(snapshot.isDraggingOver
+                ? (_c = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _c === void 0 ? void 0 : _c[300]
+                : (_e = (_d = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _d === void 0 ? void 0 : _d[200]) !== null && _e !== void 0 ? _e : (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[200]), transition: "background 0.15s ease, border-color 0.15s ease, width 0.2s ease", display: "flex", flexDirection: "column", flexShrink: 0, overflow: isColCollapsed ? "visible" : "hidden", height: "".concat(containerHeight - 60, "px"), onMouseEnter: function () { return setHoveredColumn(colId); }, onMouseLeave: function () { return setHoveredColumn(null); } }),
             isColCollapsed ? (react_1.default.createElement(react_2.Flex, { direction: "column", align: "stretch", flex: "1", width: "100%", minH: 0, overflow: "visible", position: "relative" },
-                react_1.default.createElement(react_2.Flex, { as: "header", direction: "column", align: "center", flexShrink: 0, width: "100%", py: 3, px: 1, gap: 3, borderTop: "0.25rem solid", borderTopColor: (_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], bg: (_g = colors === null || colors === void 0 ? void 0 : colors.background) === null || _g === void 0 ? void 0 : _g[100], position: "relative", zIndex: 1 },
+                react_1.default.createElement(react_2.Flex, { as: "header", direction: "column", align: "center", flexShrink: 0, width: "100%", py: 3, px: 1, gap: 3, borderTop: "0.25rem solid", borderTopColor: (_g = column.color) !== null && _g !== void 0 ? _g : (_h = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _h === void 0 ? void 0 : _h[500], bg: (_j = colors === null || colors === void 0 ? void 0 : colors.background) === null || _j === void 0 ? void 0 : _j[100], position: "relative", zIndex: 1 },
                     enableColumnReorder && columnDragHandleProps ? (react_1.default.createElement(react_2.Flex, __assign({ align: "center", justify: "center", flexShrink: 0, cursor: "grab" }, columnDragHandleProps),
-                        react_1.default.createElement(react_2.Box, { as: lucide_react_1.GripVertical, size: 14, color: (_h = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _h === void 0 ? void 0 : _h[400] }))) : null,
-                    enableColumnCollapse && (react_1.default.createElement(react_2.Flex, { flexShrink: 0, w: "100%", justify: "center", bg: (_j = colors === null || colors === void 0 ? void 0 : colors.background) === null || _j === void 0 ? void 0 : _j[100], position: "relative", zIndex: 3 },
+                        react_1.default.createElement(react_2.Box, { as: lucide_react_1.GripVertical, size: 14, color: (_k = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _k === void 0 ? void 0 : _k[400] }))) : null,
+                    enableColumnCollapse && (react_1.default.createElement(react_2.Flex, { flexShrink: 0, w: "100%", justify: "center", bg: (_l = colors === null || colors === void 0 ? void 0 : colors.background) === null || _l === void 0 ? void 0 : _l[100], position: "relative", zIndex: 3 },
                         react_1.default.createElement(react_2.IconButton, { "aria-label": "Expand column", icon: react_1.default.createElement(lucide_react_1.ChevronRight, { size: 14 }), variant: "ghost", size: "xs", minW: "1.5rem", h: "1.75rem", onClick: function () { return toggleColumnCollapsed(colId); } }))),
-                    react_1.default.createElement(react_2.Text, { as: "span", fontWeight: "700", fontSize: "0.75rem", color: (_k = colors === null || colors === void 0 ? void 0 : colors.text) === null || _k === void 0 ? void 0 : _k[700], sx: {
+                    react_1.default.createElement(react_2.Text, { as: "span", fontWeight: "700", fontSize: "0.75rem", color: (_m = colors === null || colors === void 0 ? void 0 : colors.text) === null || _m === void 0 ? void 0 : _m[700], sx: {
                             writingMode: "vertical-rl",
                             textOrientation: "mixed",
                         }, maxH: "".concat(Math.max(120, containerHeight - 200), "px"), overflow: "hidden", lineHeight: "1.2", title: column.title }, column.title),
-                    react_1.default.createElement(react_2.Badge, { minW: "1.25rem", h: "1.25rem", borderRadius: "999px", border: "1px solid", borderColor: (_l = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _l === void 0 ? void 0 : _l[300], display: "flex", backgroundColor: (_m = colors === null || colors === void 0 ? void 0 : colors.background) === null || _m === void 0 ? void 0 : _m[100], alignItems: "center", justifyContent: "center", color: (_o = colors === null || colors === void 0 ? void 0 : colors.text) === null || _o === void 0 ? void 0 : _o[900], fontWeight: 600, fontSize: "10px" }, (_p = column === null || column === void 0 ? void 0 : column.items) === null || _p === void 0 ? void 0 : _p.length)),
-                column.customNode ? (react_1.default.createElement(react_2.Box, { flexShrink: 0, minH: COLLAPSED_CUSTOM_NODE_TOP_RESERVE, w: "100%", bg: (_q = colors === null || colors === void 0 ? void 0 : colors.background) === null || _q === void 0 ? void 0 : _q[100], "aria-hidden": true })) : null,
-                column.customNode ? (react_1.default.createElement(react_2.Box, { as: "section", "aria-label": "Column summary", flex: "1", minH: 0, w: "100%", overflow: "visible", py: 2, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "flex-start", bg: (_r = colors === null || colors === void 0 ? void 0 : colors.background) === null || _r === void 0 ? void 0 : _r[100], position: "relative", zIndex: 2 },
+                    react_1.default.createElement(react_2.Badge, { minW: "1.25rem", h: "1.25rem", borderRadius: "999px", border: "1px solid", borderColor: (_o = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _o === void 0 ? void 0 : _o[300], display: "flex", backgroundColor: (_p = colors === null || colors === void 0 ? void 0 : colors.background) === null || _p === void 0 ? void 0 : _p[100], alignItems: "center", justifyContent: "center", color: (_q = colors === null || colors === void 0 ? void 0 : colors.text) === null || _q === void 0 ? void 0 : _q[900], fontWeight: 600, fontSize: "10px" }, (_r = column === null || column === void 0 ? void 0 : column.items) === null || _r === void 0 ? void 0 : _r.length)),
+                column.customNode ? (react_1.default.createElement(react_2.Box, { flexShrink: 0, minH: COLLAPSED_CUSTOM_NODE_TOP_RESERVE, w: "100%", bg: (_s = colors === null || colors === void 0 ? void 0 : colors.background) === null || _s === void 0 ? void 0 : _s[100], "aria-hidden": true })) : null,
+                column.customNode ? (react_1.default.createElement(react_2.Box, { as: "section", "aria-label": "Column summary", flex: "1", minH: 0, w: "100%", overflow: "visible", py: 2, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "flex-start", bg: (_t = colors === null || colors === void 0 ? void 0 : colors.background) === null || _t === void 0 ? void 0 : _t[100], position: "relative", zIndex: 2 },
                     react_1.default.createElement(react_2.Box, { position: "relative", transform: "rotate(90deg)", transformOrigin: "center center", marginTop: '1rem' },
-                        react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 1, minW: "max-content", fontSize: "xs", color: (_s = colors === null || colors === void 0 ? void 0 : colors.text) === null || _s === void 0 ? void 0 : _s[600] }, column.customNode())))) : (react_1.default.createElement(react_2.Box, { flex: "1", minH: 0 })))) : (react_1.default.createElement(react_2.Flex, { width: "95%", h: !isColCollapsed && !!((_t = column.customNode) === null || _t === void 0 ? void 0 : _t.call(column)) ? "auto" : "2.75rem", borderRadius: "0.25rem", borderLeft: "0.188rem solid", borderLeftColor: (_u = column.color) !== null && _u !== void 0 ? _u : (_v = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _v === void 0 ? void 0 : _v[500], background: (_w = colors === null || colors === void 0 ? void 0 : colors.background) === null || _w === void 0 ? void 0 : _w[300], align: "center", px: 2, m: 2, flexShrink: 0, justifyContent: "space-between", position: "relative", gap: 2 },
-                react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 2 },
-                    enableColumnReorder && columnDragHandleProps ? (react_1.default.createElement(react_2.Flex, __assign({ align: "center", justify: "center", flexShrink: 0, cursor: "grab" }, columnDragHandleProps),
-                        react_1.default.createElement(react_2.Box, { as: lucide_react_1.GripVertical, size: 14, color: (_x = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _x === void 0 ? void 0 : _x[400] }))) : null,
-                    react_1.default.createElement(react_2.Flex, { direction: "column", gap: 1, mt: !isColCollapsed && !!((_y = column.customNode) === null || _y === void 0 ? void 0 : _y.call(column)) ? "1" : "0" },
-                        react_1.default.createElement(react_2.Text, { as: "span", fontWeight: "600", fontSize: "0.875rem", color: (_z = colors === null || colors === void 0 ? void 0 : colors.text) === null || _z === void 0 ? void 0 : _z[700], noOfLines: 1, flex: "1", minW: 0 },
-                            react_1.default.createElement(OverflowTooltipText_1.default, { placement: "top" }, column.title)),
-                        !!((_0 = column.customNode) === null || _0 === void 0 ? void 0 : _0.call(column)) ? (react_1.default.createElement(react_2.Box, { as: "section", "aria-label": "Column summary", width: "95%", flexShrink: 0, fontSize: "xs", mb: 1, color: (_1 = colors === null || colors === void 0 ? void 0 : colors.text) === null || _1 === void 0 ? void 0 : _1[600] }, column.customNode())) : null)),
+                        react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 1, minW: "max-content", fontSize: "xs", color: (_u = colors === null || colors === void 0 ? void 0 : colors.text) === null || _u === void 0 ? void 0 : _u[600] }, column.customNode())))) : (react_1.default.createElement(react_2.Box, { flex: "1", minH: 0 })))) : (react_1.default.createElement(react_2.Flex, { width: "100%", h: !isColCollapsed && !!((_v = column.customNode) === null || _v === void 0 ? void 0 : _v.call(column)) ? "auto" : "2.75rem", align: !isColCollapsed && !!((_w = column.customNode) === null || _w === void 0 ? void 0 : _w.call(column)) ? "flex-start" : "center", px: 3, py: 2, flexShrink: 0, justifyContent: "space-between", position: "relative", gap: 2, borderBottom: "0.063rem solid ".concat((_y = (_x = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _x === void 0 ? void 0 : _x[100]) !== null && _y !== void 0 ? _y : (_z = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _z === void 0 ? void 0 : _z[100]) },
+                react_1.default.createElement(react_2.Flex, { direction: "column", gap: 1, minW: 0, flex: "1" },
+                    react_1.default.createElement(react_2.Flex, { align: "center", gap: 2, minW: 0 },
+                        react_1.default.createElement(react_2.Box, { boxSize: "0.625rem", borderRadius: "full", bg: (_0 = column.color) !== null && _0 !== void 0 ? _0 : (_1 = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _1 === void 0 ? void 0 : _1[500], flexShrink: 0 }),
+                        enableColumnReorder && columnDragHandleProps ? (react_1.default.createElement(react_2.Flex, __assign({ align: "center", justify: "center", flexShrink: 0, cursor: "grab" }, columnDragHandleProps),
+                            react_1.default.createElement(react_2.Box, { as: lucide_react_1.GripVertical, size: 14, color: (_2 = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _2 === void 0 ? void 0 : _2[400] }))) : null,
+                        react_1.default.createElement(react_2.Text, { as: "span", fontWeight: "600", fontSize: "0.875rem", color: (_3 = colors === null || colors === void 0 ? void 0 : colors.text) === null || _3 === void 0 ? void 0 : _3[700], noOfLines: 1, minW: 0 },
+                            react_1.default.createElement(OverflowTooltipText_1.default, { placement: "top" }, column.title))),
+                    !!((_4 = column.customNode) === null || _4 === void 0 ? void 0 : _4.call(column)) ? (react_1.default.createElement(react_2.Box, { as: "section", "aria-label": "Column summary", width: "100%", flexShrink: 0, fontSize: "xs", color: (_5 = colors === null || colors === void 0 ? void 0 : colors.text) === null || _5 === void 0 ? void 0 : _5[600] }, column.customNode())) : null),
                 react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 2 },
-                    react_1.default.createElement(react_2.Badge, { minW: { base: "20px", sm: "22px", md: "24px" }, h: { base: "20px", sm: "22px", md: "24px" }, borderRadius: "999px", border: "1px solid", backgroundColor: (_2 = colors === null || colors === void 0 ? void 0 : colors.background) === null || _2 === void 0 ? void 0 : _2[100], borderColor: (_3 = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _3 === void 0 ? void 0 : _3[300], display: "flex", alignItems: "center", justifyContent: "center", color: (_4 = colors === null || colors === void 0 ? void 0 : colors.text) === null || _4 === void 0 ? void 0 : _4[900], fontWeight: 600, fontSize: { base: "10px", sm: "11px", md: "12px" } }, (_5 = column === null || column === void 0 ? void 0 : column.items) === null || _5 === void 0 ? void 0 : _5.length),
+                    react_1.default.createElement(react_2.Badge, { minW: "1.5rem", h: "1.5rem", px: 2, borderRadius: "999px", backgroundColor: (_6 = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _6 === void 0 ? void 0 : _6[100], display: "flex", alignItems: "center", justifyContent: "center", color: (_7 = colors === null || colors === void 0 ? void 0 : colors.text) === null || _7 === void 0 ? void 0 : _7[700], fontWeight: 600, fontSize: "0.625rem" }, (_8 = column === null || column === void 0 ? void 0 : column.items) === null || _8 === void 0 ? void 0 : _8.length),
                     enableColumnCollapse && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Collapse column", icon: react_1.default.createElement(lucide_react_1.ChevronLeft, { size: 14 }), variant: "ghost", size: "xs", minW: "1.5rem", h: "1.75rem", flexShrink: 0, onClick: function () { return toggleColumnCollapsed(colId); } })),
                     canDelete &&
                         hoveredColumn === colId &&
-                        column.items.length > 0 && (react_1.default.createElement(react_2.Box, { as: lucide_react_1.Trash2, size: 16, cursor: "pointer", color: (_6 = colors === null || colors === void 0 ? void 0 : colors.text) === null || _6 === void 0 ? void 0 : _6[600], _hover: { color: (_7 = colors === null || colors === void 0 ? void 0 : colors.red) === null || _7 === void 0 ? void 0 : _7[600] }, onClick: function () { return handleColumnDelete(colId); }, transition: "color 0.2s ease", flexShrink: 0 })),
+                        column.items.length > 0 && (react_1.default.createElement(react_2.Box, { as: lucide_react_1.Trash2, size: 16, cursor: "pointer", color: (_9 = colors === null || colors === void 0 ? void 0 : colors.text) === null || _9 === void 0 ? void 0 : _9[600], _hover: { color: (_10 = colors === null || colors === void 0 ? void 0 : colors.red) === null || _10 === void 0 ? void 0 : _10[600] }, onClick: function () { return handleColumnDelete(colId); }, transition: "color 0.2s ease", flexShrink: 0 })),
                     !(canDelete &&
                         hoveredColumn === colId &&
                         column.items.length > 0) && react_1.default.createElement(react_2.Box, { width: "16px", height: "16px", flexShrink: 0 })))),
-            !isColCollapsed && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(react_2.Box, { px: 2, flex: "1", overflowY: "auto", width: "100%", sx: {
-                        overflowY: "auto",
-                        overflowX: "hidden",
-                        scrollbarWidth: "thin",
-                        scrollbarColor: "var(--chakra-colors-gray-300) transparent",
-                        "&::-webkit-scrollbar": {
-                            width: "6px !important",
-                            height: "6px !important",
-                        },
-                        "&::-webkit-scrollbar-track": {
-                            background: "gray.100",
-                            borderRadius: "3px",
-                            marginTop: "4px",
-                            marginBottom: "4px",
-                        },
-                        "&::-webkit-scrollbar-thumb": {
-                            background: "gray.300",
-                            borderRadius: "3px",
-                            border: "1px solid",
-                            borderColor: "gray.100",
-                        },
-                        "&::-webkit-scrollbar-thumb:hover": {
-                            background: "gray.400",
-                        },
-                        "&": {
-                            scrollbarGutter: "stable both-edges",
-                        },
-                        cursor: canDrag ? "grab" : "not-allowed",
-                    } },
-                    (noItems === null || noItems === void 0 ? void 0 : noItems.isVisible) && column.items.length === 0 && (react_1.default.createElement(NoItemsTemplate, { column: column, noItems: noItems, colors: colors })),
-                    virtualization ? (react_1.default.createElement(react_window_1.VariableSizeList, { ref: function (el) {
-                            if (el)
-                                listRefs.current[colId] = el;
-                        }, height: containerHeight - 150, itemCount: column.items.length +
-                            (snapshot.isUsingPlaceholder ? 1 : 0), itemSize: function (index) {
-                            return getItemSize(index, column.items, colId);
-                        }, width: "100%", itemData: __assign(__assign({}, rowBaseProps), { items: column.items, colId: colId }) }, KanbanRow)) : (react_1.default.createElement(react_2.Box, null,
-                        column.items.map(function (account, index) { return (react_1.default.createElement("div", { key: account.id, style: { paddingBottom: KANBAN_CARD_GAP } },
-                            react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id, isDragDisabled: !canDrag }, function (dragProvided) {
-                                var _a;
-                                return (react_1.default.createElement("div", __assign({ ref: dragProvided.innerRef }, dragProvided.draggableProps, dragProvided.dragHandleProps, { style: dragProvided.draggableProps.style }), (account === null || account === void 0 ? void 0 : account.customNode) ? (_a = account === null || account === void 0 ? void 0 : account.customNode) === null || _a === void 0 ? void 0 : _a.call(account) : (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)))))));
+            !isColCollapsed && (react_1.default.createElement(react_2.Box, { px: 2, flex: "1", overflowY: "auto", width: "100%", sx: {
+                    overflowY: "auto",
+                    overflowX: "hidden",
+                    scrollbarWidth: "thin",
+                    scrollbarColor: "var(--chakra-colors-gray-300) transparent",
+                    "&::-webkit-scrollbar": {
+                        width: "6px !important",
+                        height: "6px !important",
+                    },
+                    "&::-webkit-scrollbar-track": {
+                        background: "gray.100",
+                        borderRadius: "3px",
+                        marginTop: "4px",
+                        marginBottom: "4px",
+                    },
+                    "&::-webkit-scrollbar-thumb": {
+                        background: "gray.300",
+                        borderRadius: "3px",
+                        border: "1px solid",
+                        borderColor: "gray.100",
+                    },
+                    "&::-webkit-scrollbar-thumb:hover": {
+                        background: "gray.400",
+                    },
+                    "&": {
+                        scrollbarGutter: "stable both-edges",
+                    },
+                    cursor: canDrag ? "grab" : "not-allowed",
+                } },
+                (noItems === null || noItems === void 0 ? void 0 : noItems.isVisible) && column.items.length === 0 && (react_1.default.createElement(NoItemsTemplate, { column: column, noItems: noItems, colors: colors })),
+                virtualization ? (react_1.default.createElement(react_window_1.VariableSizeList, { ref: function (el) {
+                        if (el)
+                            listRefs.current[colId] = el;
+                    }, height: containerHeight - 150, itemCount: column.items.length +
+                        (snapshot.isUsingPlaceholder ? 1 : 0), itemSize: function (index) {
+                        return getItemSize(index, column.items, colId);
+                    }, width: "100%", itemData: itemDataByCol[colId] }, KanbanRow)) : (react_1.default.createElement(react_2.Box, null,
+                    column.items.map(function (account, index) { return (react_1.default.createElement("div", { key: account.id, style: { paddingBottom: KANBAN_CARD_GAP, paddingTop: index === 0 ? KANBAN_LIST_TOP_PAD : 0 } },
+                        react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id, isDragDisabled: !canDrag }, function (dragProvided) {
+                            var _a;
+                            return (react_1.default.createElement("div", __assign({ ref: dragProvided.innerRef }, dragProvided.draggableProps, dragProvided.dragHandleProps, { style: dragProvided.draggableProps.style }), (account === null || account === void 0 ? void 0 : account.customNode) ? (_a = account === null || account === void 0 ? void 0 : account.customNode) === null || _a === void 0 ? void 0 : _a.call(account) : (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))))));
     })); };
     if (!canView)
         return null;

package/dist/Components/LazyWrapper/LazyWrapper.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import React from "react";
+export interface LazyWrapperProps {
+    children: React.ReactNode;
+    /** Custom fallback node. Overrides the default spinner. */
+    fallback?: React.ReactNode;
+    /** Min height of the default fallback container. */
+    minHeight?: string;
+}
+declare const LazyWrapper: React.FC<LazyWrapperProps>;
+export default LazyWrapper;