pixelize-design-library 2.2.189 → 2.2.191

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

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

package/dist/Components/Editor/Editor.js

@@ -1,46 +1,12 @@
 "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 = __importStar(require("react"));
+exports.default = Editor;
+var react_1 = __importDefault(require("react"));
 var jodit_react_1 = __importDefault(require("jodit-react"));
-var Editor = react_1.default.memo(function Editor(_a) {
+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;
-    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;
+    return (react_1.default.createElement(jodit_react_1.default, { key: key, config: config, value: value, ref: editorRef, className: className, onChange: onChange, onBlur: onBlur }));
+}

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

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

package/dist/Components/KanbanBoard/AccountCard.js

@@ -1,52 +1,19 @@
 "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 = __importStar(require("react"));
+var react_1 = __importDefault(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 = react_1.default.memo(function (_a) {
+var AccountCard = 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 = (0, react_1.useMemo)(function () { return Object.keys(account).filter(function (key) { return typeof account[key] === "string" && !excludeKeys.includes(key); }); }, [account]);
+    var keys = Object.keys(account).filter(function (key) { return typeof account[key] === "string" && !excludeKeys.includes(key); });
     var visibleKeys = isExpanded ? keys : keys.slice(0, 4);
     var handleToggle = function () {
         onToggleExpand === null || onToggleExpand === void 0 ? void 0 : onToggleExpand();
@@ -70,5 +37,5 @@ var AccountCard = react_1.default.memo(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,31 +70,6 @@ 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];
@@ -216,37 +191,6 @@ 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]);
     // update height for an item
     var setSize = (0, react_1.useCallback)(function (index, size, colId) {
         var key = "".concat(colId, "-").concat(index);
@@ -260,10 +204,10 @@ var KanbanBoard = function (_a) {
             listRefs.current[colId].resetAfterIndex(index);
         }
     }, []);
-    var getItemSize = (0, react_1.useCallback)(function (index, _items, colId) {
+    var getItemSize = function (index, _items, colId) {
         var key = "".concat(colId, "-").concat(index);
-        return (sizes[key] || 80) + 12;
-    }, [sizes]);
+        return (sizes[key] || 180) + 12; // Add margin to the measured height
+    };
     // Calculate container height
     (0, react_1.useEffect)(function () {
         var calculateDimensions = function () {
@@ -347,15 +291,32 @@ 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);
     };
-    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]);
+    // 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 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];
@@ -430,14 +391,17 @@ 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: noItems, colors: colors })),
+                    (noItems === null || noItems === void 0 ? void 0 : noItems.isVisible) && column.items.length === 0 && (react_1.default.createElement(NoItemsTemplate, { column: column })),
                     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,
+                        }, width: "100%", itemData: {
+                            items: column.items,
+                            colId: colId,
+                        } }, Row)) : (react_1.default.createElement(react_2.Box, null,
                         column.items.map(function (account, index) { return (react_1.default.createElement("div", { key: account.id, style: { marginBottom: 12 } },
                             react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id, isDragDisabled: !canDrag }, function (dragProvided) {
                                 var _a;

package/dist/Components/MultiSelect/MultiSelect.js

@@ -78,14 +78,17 @@ 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 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 _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 inputRef = (0, react_1.useRef)(null);
-    var handleInputChange = (0, react_1.useCallback)(function (e) {
+    (0, react_1.useEffect)(function () {
+        setOptions(value);
+    }, [value]);
+    var handleInputChange = function (e) {
         setInputValue(e.target.value);
         setLocalError("");
-    }, []);
+    };
     var validateEmail = function (email) {
         var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
         return emailRegex.test(email);
@@ -99,17 +102,23 @@ function MultiSelect(_a) {
             var existingOption = options.find(function (option) { return option.label === inputValue; });
             if (!existingOption) {
                 var newOption = { id: generateUniqueId(), label: inputValue };
-                onValueChange(__spreadArray(__spreadArray([], options, true), [newOption], false));
+                var updatedOptions = __spreadArray(__spreadArray([], options, true), [newOption], false);
+                setOptions(updatedOptions);
+                onValueChange(updatedOptions);
                 setInputValue("");
             }
         }
         else if (e.key === "Backspace" && inputValue === "") {
-            onValueChange(options.slice(0, -1));
+            var updatedOptions = options.slice(0, -1); // Remove the last item
+            setOptions(updatedOptions);
+            onValueChange(updatedOptions);
         }
     };
-    var handleRemove = (0, react_1.useCallback)(function (optionToRemove) {
-        onValueChange(options.filter(function (option) { return option.id !== optionToRemove.id; }));
-    }, [options, onValueChange]);
+    var handleRemove = function (optionToRemove) {
+        var updatedOptions = options.filter(function (option) { return option.id !== optionToRemove.id; });
+        setOptions(updatedOptions);
+        onValueChange(updatedOptions);
+    };
     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,7 +67,6 @@ 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;
@@ -111,16 +110,13 @@ var SearchSelect = function (_a) {
         : normalizeSingleValue(value)
             ? [normalizeSingleValue(value)]
             : [];
-    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;
+    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()); });
     (0, react_1.useEffect)(function () {
         var delayDebounce = setTimeout(function () {
-            var _a;
-            (_a = onSearchRef.current) === null || _a === void 0 ? void 0 : _a.call(onSearchRef, inputValue);
+            onSearch === null || onSearch === void 0 ? void 0 : onSearch(inputValue);
         }, 1000);
         return function () { return clearTimeout(delayDebounce); };
-    }, [inputValue]);
+    }, [inputValue, onSearch]);
     (0, react_1.useEffect)(function () {
         if (pagination === null || pagination === void 0 ? void 0 : pagination.limit) {
             setHasMore(options.length % pagination.limit === 0);
@@ -146,8 +142,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; });
@@ -171,15 +167,16 @@ var SearchSelect = function (_a) {
         }
         setInputValue("");
     };
-    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 isSelected = function (id) {
+        return selectedValues.some(function (v) { return v.id === id; });
+    };
     var isValidIcon = function (icon) {
         return react_1.default.isValidElement(icon);
     };
-    var allFilteredSelected = (0, react_1.useMemo)(function () {
-        return filteredOptions.length > 0 &&
-            filteredOptions.every(function (opt) { return selectedIdsSet.has(opt.id); });
-    }, [filteredOptions, selectedIdsSet]);
+    var allFilteredSelected = filteredOptions.length > 0 &&
+        filteredOptions.every(function (opt) {
+            return selectedValues.some(function (sel) { return sel.id === opt.id; });
+        });
     var handleScroll = (0, react_1.useCallback)(function (e) {
         if (!pagination ||
             !pagination.onScroll ||
@@ -277,17 +274,13 @@ 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(Checkbox_1.default, { isChecked: allFilteredSelected, sx: { pointerEvents: "none" }, size: s.checkboxSize }),
+                react_1.default.createElement(react_2.Checkbox, { isChecked: allFilteredSelected, 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 && 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.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.Spinner, { size: s.spinnerSize }),
-                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)))))),
+                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)))); }))),
             (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"))))),

package/dist/Components/Table/Components/ActiveFilters.js

@@ -10,88 +10,47 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-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 = __importStar(require("react"));
+var react_1 = __importDefault(require("react"));
 var react_2 = require("@chakra-ui/react");
 var lucide_react_1 = require("lucide-react");
 var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 var Divider_1 = __importDefault(require("../../Divider/Divider"));
-var ActiveFilters = react_1.default.memo(function (_a) {
+var ActiveFilters = function (_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j;
     var columns = _a.columns, columnsSearch = _a.columnsSearch, setColumnsSearch = _a.setColumnsSearch;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var columnLabelMap = (0, react_1.useMemo)(function () {
-        var map = new Map();
-        for (var _i = 0, columns_1 = columns; _i < columns_1.length; _i++) {
-            var col = columns_1[_i];
-            map.set(col.id, col.label);
-        }
-        return map;
-    }, [columns]);
-    var activeFilters = (0, react_1.useMemo)(function () {
-        return Object.entries(columnsSearch)
-            .filter(function (_a) {
-            var _ = _a[0], value = _a[1];
-            return value && value.trim() !== "";
-        })
-            .map(function (_a) {
-            var columnId = _a[0], value = _a[1];
-            return ({
-                columnId: columnId,
-                label: columnLabelMap.get(columnId) || columnId,
-                value: value.trim(),
-            });
-        });
-    }, [columnsSearch, columnLabelMap]);
-    if (activeFilters.length === 0) {
-        return null;
-    }
-    var handleRemoveFilter = (0, react_1.useCallback)(function (columnId) {
+    // Get active filters (columns that have a search value)
+    var activeFilters = Object.entries(columnsSearch)
+        .filter(function (_a) {
+        var _ = _a[0], value = _a[1];
+        return value && value.trim() !== "";
+    })
+        .map(function (_a) {
+        var columnId = _a[0], value = _a[1];
+        var column = columns.find(function (col) { return col.id === columnId; });
+        return {
+            columnId: columnId,
+            label: (column === null || column === void 0 ? void 0 : column.label) || columnId,
+            value: value.trim(),
+        };
+    });
+    var handleRemoveFilter = function (columnId) {
         setColumnsSearch(function (prev) {
             var newSearch = __assign({}, prev);
             delete newSearch[columnId];
             return newSearch;
         });
-    }, [setColumnsSearch]);
-    var handleClearAll = (0, react_1.useCallback)(function () {
+    };
+    var handleClearAll = function () {
         setColumnsSearch({});
-    }, [setColumnsSearch]);
+    };
+    if (activeFilters.length === 0) {
+        return null;
+    }
     return (react_1.default.createElement(react_2.Box, { px: 2, py: 1, bg: ((_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.background) === null || _c === void 0 ? void 0 : _c[100]) || ((_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray) === null || _e === void 0 ? void 0 : _e[50]), overflowX: "auto", sx: {
             '&::-webkit-scrollbar': {
                 height: '6px',
@@ -128,5 +87,5 @@ var ActiveFilters = react_1.default.memo(function (_a) {
             activeFilters.length > 1 && (react_1.default.createElement(react_2.Text, { as: "p", className: "clear-all-text", "aria-label": "Clear All", fontSize: "sm", color: ((_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.blue) === null || _g === void 0 ? void 0 : _g[600]) || ((_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.primary) === null || _j === void 0 ? void 0 : _j[600]), cursor: "pointer", fontWeight: 500, onClick: handleClearAll, _hover: {
                     textDecoration: "underline",
                 }, flexShrink: 0, whiteSpace: "nowrap" }, "Clear All")))));
-});
+};
 exports.default = ActiveFilters;

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

@@ -10,5 +10,5 @@ type PaginationProps = Pick<TableProps, "isVisiblity" | "columns" | "paginationS
     dataLength: number;
     isServerPagination: boolean;
 };
-declare const Pagination: React.MemoExoticComponent<({ paginationText, handlePageSizeChange, rowsPerPage, currentPage, pages, setCurrentPage, dataLength, isServerPagination, paginationSelectOptions, }: PaginationProps) => React.JSX.Element>;
+declare const Pagination: ({ paginationText, handlePageSizeChange, rowsPerPage, currentPage, pages, setCurrentPage, dataLength, isServerPagination, paginationSelectOptions, }: PaginationProps) => React.JSX.Element;
 export default Pagination;

package/dist/Components/Table/Components/Pagination.js

@@ -1,49 +1,17 @@
 "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 = __importStar(require("react"));
+var react_1 = __importDefault(require("react"));
 var react_2 = require("@chakra-ui/react");
 var table_1 = require("../../../Utils/table");
 var lucide_react_1 = require("lucide-react");
-var Pagination = react_1.default.memo(function (_a) {
+var Pagination = function (_a) {
     var paginationText = _a.paginationText, handlePageSizeChange = _a.handlePageSizeChange, rowsPerPage = _a.rowsPerPage, currentPage = _a.currentPage, pages = _a.pages, setCurrentPage = _a.setCurrentPage, dataLength = _a.dataLength, isServerPagination = _a.isServerPagination, paginationSelectOptions = _a.paginationSelectOptions;
-    var computedOptions = (0, react_1.useMemo)(function () {
-        return paginationSelectOptions && paginationSelectOptions.length
-            ? paginationSelectOptions
-            : (0, table_1.pageSizeCalculation)(dataLength);
-    }, [paginationSelectOptions, dataLength]);
+    var computedOptions = paginationSelectOptions && paginationSelectOptions.length
+        ? paginationSelectOptions
+        : (0, table_1.pageSizeCalculation)(dataLength);
     // const isLeftDisabled = currentPage === 0;
     // const isRightDisabled = currentPage >= pages - 1;
     var isLeftDisabled = dataLength === 0 || currentPage === 0;
@@ -64,5 +32,5 @@ var Pagination = react_1.default.memo(function (_a) {
                 react_1.default.createElement(lucide_react_1.ChevronRight, null)),
             react_1.default.createElement(react_2.IconButton, { "aria-label": "last-page", color: isRightDisabled ? "gray" : "black", rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: function () { return setCurrentPage(pages - 1); } },
                 react_1.default.createElement(lucide_react_1.ChevronsRight, null))))));
-});
+};
 exports.default = Pagination;