pixelize-design-library 2.2.188 → 2.2.190

package/debug-storybook.log

@@ -0,0 +1,72 @@
+[14:50:38.093] [INFO] storybook v10.2.16
+[14:50:40.124] [DEBUG] Getting package.json info for /Users/mahesh/Applications/Pixelize/CRM/Micro-Components/package.json...
+[14:50:40.126] [WARN] You are currently using Storybook 10.2.16 but you have packages which are incompatible with it:
+
+- @storybook/addon-essentials@8.6.14 which depends on 8.6.14
+ Repo: https://github.com/storybookjs/storybook/tree/next/code/addons/essentials
+- @storybook/addon-interactions@8.6.14 which depends on 8.6.14
+ Repo: https://github.com/storybookjs/storybook/tree/next/code/addons/interactions
+- @storybook/test@8.6.15 which depends on 8.6.15
+ Repo: https://github.com/storybookjs/storybook/tree/next/code/lib/test
+
+Please consider updating your packages or contacting the maintainers for compatibility details.
+
+For more details on compatibility guidance, see:
+https://github.com/storybookjs/storybook/issues/32836
+[14:50:40.147] [ERROR] SB_CORE-SERVER_0002 (CriticalPresetLoadError): Storybook failed to load the following preset: @storybook/react-vite/preset.
+
+Please check whether your setup is correct, the Storybook dependencies (and their peer dependencies) are installed correctly and there are no package version clashes.
+
+If you believe this is a bug, please open an issue on Github.
+
+Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@storybook/react-vite' imported from /Users/mahesh/.npm/_npx/6fe9a9991b157df1/node_modules/storybook/dist/_node-chunks/chunk-EBZ4DOUR.js
+    at packageResolve (node:internal/modules/esm/resolve:873:9)
+    at moduleResolve (node:internal/modules/esm/resolve:946:18)
+    at defaultResolve (node:internal/modules/esm/resolve:1188:11)
+    at nextResolve (node:internal/modules/esm/hooks:864:28)
+    at Hooks.resolve (node:internal/modules/esm/hooks:306:30)
+    at MessagePort.handleMessage (node:internal/modules/esm/worker:196:24)
+    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:831:20)
+    at MessagePort.<anonymous> (node:internal/per_context/messageport:23:28)
+
+More info: 
+
+    at loadPreset (file:///Users/mahesh/.npm/_npx/6fe9a9991b157df1/node_modules/storybook/dist/_node-chunks/chunk-UXMBIWPQ.js:10081:13)
+    at async Promise.all (index 0)
+    at async loadPresets (file:///Users/mahesh/.npm/_npx/6fe9a9991b157df1/node_modules/storybook/dist/_node-chunks/chunk-UXMBIWPQ.js:10090:73)
+    at async getPresets (file:///Users/mahesh/.npm/_npx/6fe9a9991b157df1/node_modules/storybook/dist/_node-chunks/chunk-UXMBIWPQ.js:10121:23)
+    at async buildDevStandalone (file:///Users/mahesh/.npm/_npx/6fe9a9991b157df1/node_modules/storybook/dist/core-server/index.js:7661:17)
+    at async withTelemetry (file:///Users/mahesh/.npm/_npx/6fe9a9991b157df1/node_modules/storybook/dist/_node-chunks/chunk-CSGMAQQ4.js:218:12)
+    at async dev (file:///Users/mahesh/.npm/_npx/6fe9a9991b157df1/node_modules/storybook/dist/bin/core.js:2734:3)
+    at async _Command.<anonymous> (file:///Users/mahesh/.npm/_npx/6fe9a9991b157df1/node_modules/storybook/dist/bin/core.js:2804:92)
+[14:50:40.152] [WARN] Broken build, fix the error above.
+You may need to refresh the browser.
+[14:50:40.159] [WARN]   Failed to load preset: {"name":"/Users/mahesh/Applications/Pixelize/CRM/Micro-Components/node_modules/@storybook/addon-essentials/dist/preset.js"} on level 2
+[14:50:40.159] [ERROR] Error: Cannot find module 'storybook/internal/common'
+Require stack:
+- ./node_modules/@storybook/addon-essentials/dist/preset.js
+    at Module._resolveFilename (node:internal/modules/cjs/loader:1212:15)
+    at Module._load (node:internal/modules/cjs/loader:1043:27)
+    at Module.require (node:internal/modules/cjs/loader:1298:19)
+    at require (node:internal/modules/helpers:182:18)
+    at Object.<anonymous> (./node_modules/@storybook/addon-essentials/dist/preset.js:4:14)
+    at Module._compile (node:internal/modules/cjs/loader:1529:14)
+    at Module._extensions..js (node:internal/modules/cjs/loader:1613:10)
+    at Module.load (node:internal/modules/cjs/loader:1275:32)
+    at Module._load (node:internal/modules/cjs/loader:1096:12)
+    at cjsLoader (node:internal/modules/esm/translators:298:15)
+[14:50:40.161] [WARN]   Failed to load preset: {"name":"/Users/mahesh/Applications/Pixelize/CRM/Micro-Components/node_modules/@storybook/addon-interactions/dist/preset.js"} on level 2
+[14:50:40.161] [ERROR] Error: Cannot find module 'storybook/internal/common'
+Require stack:
+- ./node_modules/@storybook/addon-interactions/dist/preset.js
+    at Module._resolveFilename (node:internal/modules/cjs/loader:1212:15)
+    at Module._load (node:internal/modules/cjs/loader:1043:27)
+    at Module.require (node:internal/modules/cjs/loader:1298:19)
+    at require (node:internal/modules/helpers:182:18)
+    at Object.<anonymous> (./node_modules/@storybook/addon-interactions/dist/preset.js:4:14)
+    at Module._compile (node:internal/modules/cjs/loader:1529:14)
+    at Module._extensions..js (node:internal/modules/cjs/loader:1613:10)
+    at Module.load (node:internal/modules/cjs/loader:1275:32)
+    at Module._load (node:internal/modules/cjs/loader:1096:12)
+    at cjsLoader (node:internal/modules/esm/translators:298:15)
+[14:50:40.164] [INFO] Storybook collects completely anonymous usage telemetry. We use it to shape Storybook's roadmap and prioritize features. You can learn more, including how to opt out, at https://storybook.js.org/telemetry

package/dist/Assets/defaultLogo.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useCustomTheme } from "../Theme/useCustomTheme";
+
+const DefaultLogo = () => {
+  const theme = useCustomTheme();
+  return (
+    <svg
+      width="12.09"
+      height="15.95"
+      viewBox="0 0 31 29"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M30.4999 6.26137V7.81058H15.9761H14.8787V22.8508V28.8862H12.5226C9.6824 28.8862 7.32632 26.4656 7.06812 23.3995C7.06812 23.2381 7.06812 23.0444 7.06812 22.8508V18.3323C7.06812 18.2677 7.06812 18.2032 7.06812 18.1063V15.5889V6.2291C7.06812 2.80793 9.84378 -5.72205e-06 13.2972 -5.72205e-06H24.8517C28.0147 0.355021 30.4676 3.00158 30.4676 6.2291L30.4999 6.26137Z"
+        fill={theme.colors.black}
+      />
+      <path
+        d="M7.10053 23.3672H7.03598C5.16402 23.2381 3.48571 22.4635 2.25926 21.3338C0.871428 20.0428 0 18.2677 0 16.3312V15.6211H7.06825V18.1386C7.06825 18.2032 7.06825 18.2677 7.06825 18.3645V22.883C7.06825 23.0767 7.06825 23.2381 7.06825 23.4317L7.10053 23.3672Z"
+        fill={theme.colors.black}
+      />
+      <path
+        d="M30.4678 12.0063V15.6211V17.1703C30.4678 20.6238 26.272 23.3994 21.0757 23.3994H14.8789V22.8508V15.6211H22.6572V7.81056C22.6895 7.81056 30.5001 7.81056 30.5001 7.81056V11.5868C30.5001 11.7159 30.5001 11.8772 30.5001 12.0063H30.4678Z"
+        fill={theme.colors.black}
+      />
+    </svg>
+
+  )
+};
+
+export default DefaultLogo;

package/dist/Components/Editor/Editor.d.ts

@@ -1,3 +1,4 @@
 import React from "react";
 import { EditorProps } from "./EditorProps";
-export default function Editor({ value, key, config, editorRef, className, onChange, onBlur, }: EditorProps): React.JSX.Element;
+declare const Editor: React.NamedExoticComponent<EditorProps>;
+export default Editor;

package/dist/Components/Editor/Editor.js

@@ -1,12 +1,46 @@
 "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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = Editor;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var jodit_react_1 = __importDefault(require("jodit-react"));
-function Editor(_a) {
+var Editor = react_1.default.memo(function Editor(_a) {
     var value = _a.value, key = _a.key, config = _a.config, editorRef = _a.editorRef, className = _a.className, onChange = _a.onChange, onBlur = _a.onBlur;
-    return (react_1.default.createElement(jodit_react_1.default, { key: key, config: config, value: value, ref: editorRef, className: className, onChange: onChange, onBlur: onBlur }));
-}
+    var stableConfig = (0, react_1.useMemo)(function () { return config; }, [JSON.stringify(config)]); // eslint-disable-line react-hooks/exhaustive-deps
+    return (react_1.default.createElement(jodit_react_1.default, { key: key, config: stableConfig, value: value, ref: editorRef, className: className, onChange: onChange, onBlur: onBlur }));
+});
+exports.default = Editor;

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

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

package/dist/Components/KanbanBoard/AccountCard.js

@@ -1,19 +1,52 @@
 "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 __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_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
 var lucide_react_1 = require("lucide-react");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var AccountRow_1 = __importDefault(require("./AccountRow"));
 var excludeKeys = ["id", "details"];
-var AccountCard = function (_a) {
+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 colors = (0, useCustomTheme_1.useCustomTheme)().colors;
-    var keys = Object.keys(account).filter(function (key) { return typeof account[key] === "string" && !excludeKeys.includes(key); });
+    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();
@@ -37,5 +70,5 @@ var AccountCard = function (_a) {
                         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" })))))));
-};
+});
 exports.default = AccountCard;

package/dist/Components/KanbanBoard/KanbanBoard.js

@@ -70,6 +70,31 @@ var OverflowTooltipText_1 = __importDefault(require("../SideBar/components/Overf
 var Button_1 = __importDefault(require("../Button/Button"));
 /** Narrow rail width when a column is horizontally collapsed. */
 var COLLAPSED_KANBAN_COLUMN_WIDTH = "2.75rem";
+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;
+    var account = items[index];
+    if (!account) {
+        return react_1.default.createElement("div", { style: style });
+    }
+    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, isDragDisabled: !canDrag }, function (provided) {
+                    var _a;
+                    return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: provided.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, { 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 }))));
+                })))));
+});
+var NoItemsTemplate = react_1.default.memo(function (_a) {
+    var _b;
+    var column = _a.column, noItems = _a.noItems, colors = _a.colors;
+    return (react_1.default.createElement(react_2.Box, null,
+        react_1.default.createElement(react_2.Flex, { flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 2 },
+            react_1.default.createElement(react_2.Text, { fontSize: "sm", color: (_b = colors === null || colors === void 0 ? void 0 : colors.text) === null || _b === void 0 ? void 0 : _b[600], textAlign: "center", mt: 4 }, (noItems === null || noItems === void 0 ? void 0 : noItems.text) || "No items in this column"),
+            !(noItems === null || noItems === void 0 ? void 0 : noItems.isEmptyTextOnly) && (react_1.default.createElement(Button_1.default, { onClick: function () { var _a; return (_a = noItems === null || noItems === void 0 ? void 0 : noItems.onClick) === null || _a === void 0 ? void 0 : _a.call(noItems, column); }, size: "xs" }, (noItems === null || noItems === void 0 ? void 0 : noItems.buttonText) || "Add Item")))));
+});
 function reorderColumnEntries(entries, startIndex, endIndex) {
     var result = Array.from(entries);
     var removed = result.splice(startIndex, 1)[0];
@@ -191,6 +216,38 @@ var KanbanBoard = function (_a) {
     var containerRef = (0, react_1.useRef)(null);
     // store measured heights
     var _4 = (0, react_1.useState)({}), sizes = _4[0], setSizes = _4[1];
+    var hasMountedSizes = (0, react_1.useRef)(false);
+    // Prune stale size entries when columns change (skip first render)
+    (0, react_1.useEffect)(function () {
+        if (!hasMountedSizes.current) {
+            hasMountedSizes.current = true;
+            return;
+        }
+        setSizes(function (prev) {
+            if (Object.keys(prev).length === 0)
+                return prev;
+            var validKeys = new Set();
+            for (var _i = 0, _a = Object.entries(columns); _i < _a.length; _i++) {
+                var _b = _a[_i], colId = _b[0], col = _b[1];
+                for (var i = 0; i < col.items.length; i++) {
+                    validKeys.add("".concat(colId, "-").concat(i));
+                }
+            }
+            var pruned = {};
+            var changed = false;
+            for (var _c = 0, _d = Object.keys(prev); _c < _d.length; _c++) {
+                var key = _d[_c];
+                if (validKeys.has(key)) {
+                    pruned[key] = prev[key];
+                }
+                else {
+                    changed = true;
+                }
+            }
+            return changed ? pruned : prev;
+        });
+    }, [columns]);
+    var DEFAULT_ITEM_HEIGHT = 130;
     // update height for an item
     var setSize = (0, react_1.useCallback)(function (index, size, colId) {
         var key = "".concat(colId, "-").concat(index);
@@ -201,13 +258,13 @@ var KanbanBoard = function (_a) {
             return __assign(__assign({}, prev), (_a = {}, _a[key] = size, _a));
         });
         if (listRefs.current[colId]) {
-            listRefs.current[colId].resetAfterIndex(index);
+            listRefs.current[colId].resetAfterIndex(0);
         }
     }, []);
-    var getItemSize = function (index, _items, colId) {
+    var getItemSize = (0, react_1.useCallback)(function (index, _items, colId) {
         var key = "".concat(colId, "-").concat(index);
-        return (sizes[key] || 180) + 12; // Add margin to the measured height
-    };
+        return (sizes[key] || DEFAULT_ITEM_HEIGHT) + 12;
+    }, [sizes]);
     // Calculate container height
     (0, react_1.useEffect)(function () {
         var calculateDimensions = function () {
@@ -291,32 +348,15 @@ var KanbanBoard = function (_a) {
         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);
     };
-    // row renderer
-    var Row = function (_a) {
-        var index = _a.index, style = _a.style, data = _a.data;
-        var items = data.items, colId = data.colId;
-        var account = items[index];
-        if (!account) {
-            return react_1.default.createElement("div", { style: style });
-        }
-        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, isDragDisabled: !canDrag }, function (provided) {
-                        var _a;
-                        return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: provided.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, { 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 }))));
-                    })))));
-    };
-    var NoItemsTemplate = function (_a) {
-        var _b;
-        var column = _a.column;
-        return (react_1.default.createElement(react_2.Box, null,
-            react_1.default.createElement(react_2.Flex, { flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 2 },
-                react_1.default.createElement(react_2.Text, { fontSize: "sm", color: (_b = colors === null || colors === void 0 ? void 0 : colors.text) === null || _b === void 0 ? void 0 : _b[600], textAlign: "center", mt: 4 }, (noItems === null || noItems === void 0 ? void 0 : noItems.text) || "No items in this column"),
-                !(noItems === null || noItems === void 0 ? void 0 : noItems.isEmptyTextOnly) && (react_1.default.createElement(Button_1.default, { onClick: function () { var _a; return (_a = noItems === null || noItems === void 0 ? void 0 : noItems.onClick) === null || _a === void 0 ? void 0 : _a.call(noItems, column); }, size: "xs" }, (noItems === null || noItems === void 0 ? void 0 : noItems.buttonText) || "Add Item")))));
-    };
+    var rowBaseProps = (0, react_1.useMemo)(function () { return ({
+        canDrag: canDrag,
+        expanded: expanded,
+        onDelete: onDelete,
+        onOpen: onOpen,
+        canDelete: canDelete,
+        setSize: setSize,
+        toggleExpand: toggleExpand,
+    }); }, [canDrag, expanded, onDelete, onOpen, canDelete, setSize, toggleExpand]);
     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];
@@ -391,17 +431,14 @@ var KanbanBoard = function (_a) {
                         },
                         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 === 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: {
-                            items: column.items,
-                            colId: colId,
-                        } }, Row)) : (react_1.default.createElement(react_2.Box, null,
+                        }, 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: { marginBottom: 12 } },
                             react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id, isDragDisabled: !canDrag }, function (dragProvided) {
                                 var _a;

package/dist/Components/MultiSelect/MultiSelect.js

@@ -78,17 +78,14 @@ function MultiSelect(_a) {
     var value = _a.value, onValueChange = _a.onValueChange, _d = _a.width, width = _d === void 0 ? "100%" : _d, _e = _a.label, label = _e === void 0 ? "label" : _e, _f = _a.isRequired, isRequired = _f === void 0 ? true : _f, _g = _a.isInformation, isInformation = _g === void 0 ? false : _g, _h = _a.informationMessage, informationMessage = _h === void 0 ? "" : _h, name = _a.name, id = _a.id, _j = _a.placeholderText, placeholderText = _j === void 0 ? "Type valid email and press enter" : _j, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, _k = _a.size, size = _k === void 0 ? "md" : _k, inputStyle = _a.inputStyle, helperText = _a.helperText, error = _a.error, errorMessage = _a.errorMessage;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var s = (0, searchSelectSize_1.getSearchSelectSizeStyles)((size || "md"));
-    var _l = (0, react_1.useState)(value), options = _l[0], setOptions = _l[1];
-    var _m = (0, react_1.useState)(""), inputValue = _m[0], setInputValue = _m[1];
-    var _o = (0, react_1.useState)(""), localError = _o[0], setLocalError = _o[1];
+    var options = value;
+    var _l = (0, react_1.useState)(""), inputValue = _l[0], setInputValue = _l[1];
+    var _m = (0, react_1.useState)(""), localError = _m[0], setLocalError = _m[1];
     var inputRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(function () {
-        setOptions(value);
-    }, [value]);
-    var handleInputChange = function (e) {
+    var handleInputChange = (0, react_1.useCallback)(function (e) {
         setInputValue(e.target.value);
         setLocalError("");
-    };
+    }, []);
     var validateEmail = function (email) {
         var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
         return emailRegex.test(email);
@@ -102,23 +99,17 @@ function MultiSelect(_a) {
             var existingOption = options.find(function (option) { return option.label === inputValue; });
             if (!existingOption) {
                 var newOption = { id: generateUniqueId(), label: inputValue };
-                var updatedOptions = __spreadArray(__spreadArray([], options, true), [newOption], false);
-                setOptions(updatedOptions);
-                onValueChange(updatedOptions);
+                onValueChange(__spreadArray(__spreadArray([], options, true), [newOption], false));
                 setInputValue("");
             }
         }
         else if (e.key === "Backspace" && inputValue === "") {
-            var updatedOptions = options.slice(0, -1); // Remove the last item
-            setOptions(updatedOptions);
-            onValueChange(updatedOptions);
+            onValueChange(options.slice(0, -1));
         }
     };
-    var handleRemove = function (optionToRemove) {
-        var updatedOptions = options.filter(function (option) { return option.id !== optionToRemove.id; });
-        setOptions(updatedOptions);
-        onValueChange(updatedOptions);
-    };
+    var handleRemove = (0, react_1.useCallback)(function (optionToRemove) {
+        onValueChange(options.filter(function (option) { return option.id !== optionToRemove.id; }));
+    }, [options, onValueChange]);
     return (react_1.default.createElement(react_2.Box, { width: width },
         label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })),
         react_1.default.createElement(react_2.Flex, { wrap: "wrap", gap: s.gap, align: "center", px: s.px, border: "1px solid", borderColor: error || localError

package/dist/Components/SearchSelect/SearchSelect.js

@@ -67,6 +67,7 @@ var HelperText_1 = __importDefault(require("../Common/HelperText"));
 var ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 var SelectTruncatedLabel_1 = __importDefault(require("./SelectTruncatedLabel"));
 var searchSelectSize_1 = require("./searchSelectSize");
+var Checkbox_1 = __importDefault(require("../Checkbox/Checkbox"));
 var normalizeSingleValue = function (val) {
     if (typeof val === "object" && val !== null && "id" in val && "label" in val) {
         return val;
@@ -110,13 +111,16 @@ var SearchSelect = function (_a) {
         : normalizeSingleValue(value)
             ? [normalizeSingleValue(value)]
             : [];
-    var filteredOptions = options.filter(function (option) { var _a, _b; return (_b = (_a = option === null || option === void 0 ? void 0 : option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes(inputValue === null || inputValue === void 0 ? void 0 : inputValue.toLowerCase()); });
+    var filteredOptions = (0, react_1.useMemo)(function () { return options.filter(function (option) { var _a, _b; return (_b = (_a = option === null || option === void 0 ? void 0 : option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes(inputValue === null || inputValue === void 0 ? void 0 : inputValue.toLowerCase()); }); }, [options, inputValue]);
+    var onSearchRef = (0, react_1.useRef)(onSearch);
+    onSearchRef.current = onSearch;
     (0, react_1.useEffect)(function () {
         var delayDebounce = setTimeout(function () {
-            onSearch === null || onSearch === void 0 ? void 0 : onSearch(inputValue);
+            var _a;
+            (_a = onSearchRef.current) === null || _a === void 0 ? void 0 : _a.call(onSearchRef, inputValue);
         }, 1000);
         return function () { return clearTimeout(delayDebounce); };
-    }, [inputValue, onSearch]);
+    }, [inputValue]);
     (0, react_1.useEffect)(function () {
         if (pagination === null || pagination === void 0 ? void 0 : pagination.limit) {
             setHasMore(options.length % pagination.limit === 0);
@@ -142,8 +146,8 @@ var SearchSelect = function (_a) {
         else {
             onSelect === null || onSelect === void 0 ? void 0 : onSelect(option);
             setIsOpen(false);
+            setInputValue("");
         }
-        setInputValue("");
     };
     var handleRemove = function (id) {
         var updated = selectedValues.filter(function (v) { return v.id !== id; });
@@ -167,16 +171,15 @@ var SearchSelect = function (_a) {
         }
         setInputValue("");
     };
-    var isSelected = function (id) {
-        return selectedValues.some(function (v) { return v.id === id; });
-    };
+    var selectedIdsSet = (0, react_1.useMemo)(function () { return new Set(selectedValues.map(function (v) { return v.id; })); }, [selectedValues]);
+    var isSelected = (0, react_1.useCallback)(function (id) { return selectedIdsSet.has(id); }, [selectedIdsSet]);
     var isValidIcon = function (icon) {
         return react_1.default.isValidElement(icon);
     };
-    var allFilteredSelected = filteredOptions.length > 0 &&
-        filteredOptions.every(function (opt) {
-            return selectedValues.some(function (sel) { return sel.id === opt.id; });
-        });
+    var allFilteredSelected = (0, react_1.useMemo)(function () {
+        return filteredOptions.length > 0 &&
+            filteredOptions.every(function (opt) { return selectedIdsSet.has(opt.id); });
+    }, [filteredOptions, selectedIdsSet]);
     var handleScroll = (0, react_1.useCallback)(function (e) {
         if (!pagination ||
             !pagination.onScroll ||
@@ -274,13 +277,17 @@ var SearchSelect = function (_a) {
                         }, "aria-label": "toggle-dropdown", display: "flex", alignItems: "center" }, isOpen ? (react_1.default.createElement(lucide_react_1.ChevronUp, { size: s.chevronSize })) : (react_1.default.createElement(lucide_react_1.ChevronDown, { size: s.chevronSize }))))))),
         isOpen && (react_1.default.createElement(react_2.Box, { position: "absolute", zIndex: 10, width: "100%", maxH: "20rem", borderWidth: 1, borderRadius: "sm", bg: theme.colors.white, boxShadow: "md", display: "flex", flexDirection: "column" },
             isMultiple && isSelectAll && (react_1.default.createElement(react_2.Box, { py: s.optionRowPy, px: 3, cursor: "pointer", onClick: handleSelectAll, display: "flex", alignItems: "center", gap: 2, borderBottom: "0.063rem solid ".concat(theme.colors.gray[100]) },
-                react_1.default.createElement(react_2.Checkbox, { isChecked: allFilteredSelected, pointerEvents: "none", size: s.checkboxSize }),
+                react_1.default.createElement(Checkbox_1.default, { isChecked: allFilteredSelected, sx: { pointerEvents: "none" }, size: s.checkboxSize }),
                 react_1.default.createElement(react_2.Text, { fontSize: s.dropdownTextFontSize }, allFilteredSelected ? "Unselect All" : "Select All"))),
-            react_1.default.createElement(react_2.Box, { flex: "1", overflowY: "auto", onScroll: handleScroll, maxH: "15rem", borderBottom: "0.063rem solid", borderColor: theme.colors.gray[200] }, isOptionLoading ? (react_1.default.createElement(react_2.Box, { py: s.optionRowPy, px: 3, display: "flex", alignItems: "center", gap: 2, minH: s.optionRowMinH },
+            react_1.default.createElement(react_2.Box, { flex: "1", overflowY: "auto", onScroll: handleScroll, maxH: "15rem", borderBottom: "0.063rem solid", borderColor: theme.colors.gray[200] }, isOptionLoading && filteredOptions.length === 0 ? (react_1.default.createElement(react_2.Box, { py: s.optionRowPy, px: 3, display: "flex", alignItems: "center", gap: 2, minH: s.optionRowMinH },
                 react_1.default.createElement(react_2.Spinner, { size: s.spinnerSize }),
-                react_1.default.createElement(react_2.Text, { fontSize: s.dropdownTextFontSize }, loadingText))) : filteredOptions.length === 0 ? (react_1.default.createElement(react_2.Text, { p: 3, fontSize: s.dropdownTextFontSize, color: theme.colors.gray[500] }, "No results found")) : (filteredOptions.map(function (option) { return (react_1.default.createElement(react_2.Box, { key: option.id, py: s.optionRowPy, px: 3, minH: s.optionRowMinH, cursor: "pointer", bg: isSelected(option.id) ? theme.colors.gray[100] : "transparent", _hover: { bg: theme.colors.gray[50] }, onClick: function () { return handleSelect(option); }, display: "flex", alignItems: "center", gap: 2, borderBottom: "0.063rem solid ".concat(theme.colors.gray[100]) },
-                isMultiple && (react_1.default.createElement(react_2.Checkbox, { isChecked: isSelected(option.id), pointerEvents: "none", colorScheme: "blue", size: s.checkboxSize })),
-                option.view ? (react_1.default.createElement(react_1.default.Fragment, null, option.view)) : (react_1.default.createElement(react_2.Text, { fontSize: s.dropdownTextFontSize }, option.label)))); }))),
+                react_1.default.createElement(react_2.Text, { fontSize: s.dropdownTextFontSize }, loadingText))) : !isOptionLoading && filteredOptions.length === 0 ? (react_1.default.createElement(react_2.Text, { p: 3, fontSize: s.dropdownTextFontSize, color: theme.colors.gray[500] }, "No results found")) : (react_1.default.createElement(react_1.default.Fragment, null,
+                filteredOptions.map(function (option) { return (react_1.default.createElement(react_2.Box, { key: option.id, py: s.optionRowPy, px: 3, minH: s.optionRowMinH, cursor: "pointer", bg: isSelected(option.id) ? theme.colors.gray[100] : "transparent", _hover: { bg: theme.colors.gray[50] }, onClick: function () { return handleSelect(option); }, display: "flex", alignItems: "center", gap: 2, borderBottom: "0.063rem solid ".concat(theme.colors.gray[100]) },
+                    isMultiple && (react_1.default.createElement(Checkbox_1.default, { isChecked: isSelected(option.id), sx: { pointerEvents: "none" }, size: s.checkboxSize })),
+                    option.view ? (react_1.default.createElement(react_1.default.Fragment, null, option.view)) : (react_1.default.createElement(react_2.Text, { fontSize: s.dropdownTextFontSize }, option.label)))); }),
+                ((pagination === null || pagination === void 0 ? void 0 : pagination.scrollLoading) || (isOptionLoading && filteredOptions.length > 0)) && (react_1.default.createElement(react_2.Box, { py: s.optionRowPy, px: 3, display: "flex", alignItems: "center", justifyContent: "center", gap: 2, minH: s.optionRowMinH },
+                    react_1.default.createElement(react_2.Spinner, { size: s.spinnerSize }),
+                    react_1.default.createElement(react_2.Text, { fontSize: s.dropdownTextFontSize }, loadingText)))))),
             (addNew === null || addNew === void 0 ? void 0 : addNew.enabled) && (react_1.default.createElement(react_2.Box, { py: s.optionRowPy, px: 3, borderTop: "0.063rem solid", borderColor: theme.colors.gray[200], bg: theme.colors.white, display: "flex", alignItems: "center", gap: 2, minH: s.optionRowMinH, cursor: "pointer", onClick: addNew.onClick, _hover: { bg: theme.colors.gray[50] } },
                 addNew.icon || react_1.default.createElement(lucide_react_1.Plus, { size: s.addNewIconSize }),
                 react_1.default.createElement(react_2.Text, { fontSize: s.dropdownTextFontSize }, addNew.text || "Add New"))))),