pixelize-design-library 2.0.13 → 2.0.15

package/README.md

@@ -51,7 +51,7 @@ PixelizeDesign Library Components Are Below
 - RadioButtonGroup,
 - Search,
 - Select,
-- SelectSearch,
+- SearchSelect,
 - SideBar,
 - Skeletons,
 - Switch,

package/dist/Components/KanbanBoard/KanbanBoard.js

@@ -53,10 +53,10 @@ var lucide_react_1 = require("lucide-react");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var AccountCard_1 = __importDefault(require("./AccountCard"));
 var KanbanBoard = function (_a) {
-    var _b;
-    var data = _a.data, onDrag = _a.onDrag, onDelete = _a.onDelete, onOpen = _a.onOpen, onColumnDelete = _a.onColumnDelete, _c = _a.isLoading, isLoading = _c === void 0 ? false : _c;
+    var _b, _c, _d;
+    var data = _a.data, onDrag = _a.onDrag, onDelete = _a.onDelete, onOpen = _a.onOpen, onColumnDelete = _a.onColumnDelete, _e = _a.isLoading, isLoading = _e === void 0 ? false : _e;
     var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
-    var _d = (0, react_1.useState)(data), columns = _d[0], setColumns = _d[1];
+    var _f = (0, react_1.useState)(data), columns = _f[0], setColumns = _f[1];
     var onDragEnd = function (result) {
         var _a, _b;
         var source = result.source, destination = result.destination;
@@ -89,20 +89,20 @@ var KanbanBoard = function (_a) {
         }
     };
     var handleColumnDelete = function (colId) {
-        var _a;
-        var columnIds = ((_a = columns[colId]) === null || _a === void 0 ? void 0 : _a.items.map(function (item) { return item.id; })) || [];
+        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);
     };
     return (react_1.default.createElement(dnd_1.DragDropContext, { onDragEnd: onDragEnd },
-        react_1.default.createElement(react_2.Flex, { gap: 4, p: 4, bg: (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[200], minH: "100vh", overflowX: "auto", maxWidth: "100vw" }, isLoading ? (Array.from({ length: 5 }).map(function (_, idx) {
+        react_1.default.createElement(react_2.Flex, { gap: 4, p: 4, bg: (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[200], minH: "100vh", overflowX: "auto", maxWidth: "100vw" }, isLoading ? ((_c = Array.from({ length: 5 })) === null || _c === void 0 ? void 0 : _c.map(function (_, idx) {
             var _a, _b;
             return (react_1.default.createElement(react_2.Box, { key: idx, width: "17.5rem", p: 4, borderRadius: "0.5rem", bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[100], border: "0.125rem solid ".concat((_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[200]), flexShrink: 0 },
                 react_1.default.createElement(react_2.Skeleton, { height: "2.75rem", mb: 4, borderRadius: "0.25rem" }),
                 react_1.default.createElement(react_2.SkeletonText, { mt: "4", noOfLines: 5, spacing: "4" })));
-        })) : (Object.entries(columns).map(function (_a) {
+        })) : ((_d = Object.entries(columns)) === null || _d === void 0 ? void 0 : _d.map(function (_a) {
             var colId = _a[0], column = _a[1];
             return (react_1.default.createElement(dnd_1.Droppable, { droppableId: colId.toString(), key: colId }, function (provided, snapshot) {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
                 return (react_1.default.createElement(react_2.Box, __assign({ ref: provided.innerRef }, provided.droppableProps, { width: "17.5rem", opacity: 1, borderRadius: "0.5rem", borderWidth: "0.063rem", background: snapshot.isDraggingOver
                         ? (_a = colors === null || colors === void 0 ? void 0 : colors.blue) === 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
@@ -111,8 +111,8 @@ var KanbanBoard = function (_a) {
                     react_1.default.createElement(react_2.Flex, { width: "16.5rem", height: "2.75rem", borderRadius: "0.25rem", borderLeft: "0.188rem solid", borderLeftColor: (_e = column.color) !== null && _e !== void 0 ? _e : (_f = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _f === void 0 ? void 0 : _f[500], background: (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[100], align: "center", px: 2, mb: 3, flexShrink: 0, m: 2, justifyContent: "space-between" },
                         react_1.default.createElement(react_2.Text, { fontWeight: "600", fontSize: "1rem", color: (_h = colors === null || colors === void 0 ? void 0 : colors.text) === null || _h === void 0 ? void 0 : _h[700] }, column.title),
                         react_1.default.createElement(react_2.Box, { as: lucide_react_1.Trash2, size: 16, cursor: "pointer", color: (_j = colors === null || colors === void 0 ? void 0 : colors.text) === null || _j === void 0 ? void 0 : _j[600], _hover: { color: (_k = colors === null || colors === void 0 ? void 0 : colors.red) === null || _k === void 0 ? void 0 : _k[600] }, onClick: function () { return handleColumnDelete(colId); } })),
-                    react_1.default.createElement(react_2.Box, { px: 2, pb: 2, overflowY: "auto", maxHeight: "calc(100vh - 7rem)", overflowX: "hidden" },
-                        column.items.map(function (account, index) { return (react_1.default.createElement(AccountCard_1.default, { key: account.id, account: account, index: index, onDelete: onDelete, onOpen: onOpen })); }),
+                    react_1.default.createElement(react_2.Box, { px: 2, pb: 2, overflowY: "auto", maxHeight: "calc(100vh - 7rem)", overflowX: "hidden" }, (_l = column.items) === null || _l === void 0 ? void 0 :
+                        _l.map(function (account, index) { return (react_1.default.createElement(AccountCard_1.default, { key: account.id, account: account, index: index, onDelete: onDelete, onOpen: onOpen })); }),
                         provided.placeholder)));
             }));
         })))));

package/dist/Components/SearchSelect/SearchSelect.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SearchSelectProps } from './SearchSelectProps';
+declare const SearchSelect: ({ id, label, options, onSelect, onSearch, isOptionLoading, isLoading, loadingText, placeholder, value, searchQuery, isMultiple, isRequired, error, errorMessage, helperText, width, size, chip, information, rightIcon, addNew, isSelectAll, pagination, insideSelect }: SearchSelectProps) => React.JSX.Element;
+export default SearchSelect;

package/dist/Components/SearchSelect/SearchSelect.js

@@ -0,0 +1,202 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+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_2 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var FormLabel_1 = require("../Common/FormLabel");
+var Tag_1 = __importDefault(require("../Tag/Tag"));
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
+var HelperText_1 = __importDefault(require("../Common/HelperText"));
+var ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+var SearchSelect = function (_a) {
+    var _b, _c, _d, _e;
+    var id = _a.id, label = _a.label, options = _a.options, onSelect = _a.onSelect, onSearch = _a.onSearch, _f = _a.isOptionLoading, isOptionLoading = _f === void 0 ? false : _f, _g = _a.isLoading, isLoading = _g === void 0 ? false : _g, _h = _a.loadingText, loadingText = _h === void 0 ? 'Loading...' : _h, _j = _a.placeholder, placeholder = _j === void 0 ? 'Select' : _j, value = _a.value, _k = _a.searchQuery, searchQuery = _k === void 0 ? '' : _k, _l = _a.isMultiple, isMultiple = _l === void 0 ? false : _l, _m = _a.isRequired, isRequired = _m === void 0 ? false : _m, _o = _a.error, error = _o === void 0 ? false : _o, errorMessage = _a.errorMessage, helperText = _a.helperText, _p = _a.width, width = _p === void 0 ? '100%' : _p, _q = _a.size, size = _q === void 0 ? 'md' : _q, chip = _a.chip, information = _a.information, rightIcon = _a.rightIcon, addNew = _a.addNew, _r = _a.isSelectAll, isSelectAll = _r === void 0 ? false : _r, pagination = _a.pagination, insideSelect = _a.insideSelect;
+    var _s = (0, react_1.useState)(searchQuery), inputValue = _s[0], setInputValue = _s[1];
+    var _t = (0, react_1.useState)(false), isOpen = _t[0], setIsOpen = _t[1];
+    var _u = (0, react_1.useState)(true), hasMore = _u[0], setHasMore = _u[1];
+    var inputRef = (0, react_1.useRef)(null);
+    var containerRef = (0, react_1.useRef)(null);
+    var scrollTimeoutRef = (0, react_1.useRef)(null);
+    var _v = (0, react_1.useState)(false), focused = _v[0], setFocused = _v[1];
+    var _w = (0, react_1.useState)(false), customSelectOpen = _w[0], setCustomSelectOpen = _w[1];
+    var customSelectRef = (0, react_1.useRef)(null);
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    (0, react_2.useOutsideClick)({
+        ref: containerRef,
+        handler: function () { return setIsOpen(false); },
+    });
+    var selectedValues = isMultiple
+        ? Array.isArray(value)
+            ? value
+            : []
+        : value
+            ? [value]
+            : [];
+    var filteredOptions = options.filter(function (option) {
+        return option.label.toLowerCase().includes(inputValue.toLowerCase());
+    });
+    (0, react_1.useEffect)(function () {
+        var delayDebounce = setTimeout(function () {
+            onSearch === null || onSearch === void 0 ? void 0 : onSearch(inputValue);
+        }, 1000);
+        return function () { return clearTimeout(delayDebounce); };
+    }, [inputValue, onSearch]);
+    (0, react_1.useEffect)(function () {
+        if (pagination === null || pagination === void 0 ? void 0 : pagination.limit) {
+            setHasMore(options.length % pagination.limit === 0);
+        }
+    }, [options.length, pagination === null || pagination === void 0 ? void 0 : pagination.limit]);
+    var handleSelect = function (option) {
+        if (isMultiple) {
+            var exists = selectedValues.find(function (v) { return v.id === option.id; });
+            var updated = exists
+                ? selectedValues.filter(function (v) { return v.id !== option.id; })
+                : __spreadArray(__spreadArray([], selectedValues, true), [option], false);
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect(updated);
+        }
+        else {
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect(option);
+            setIsOpen(false);
+        }
+        setInputValue('');
+    };
+    var handleRemove = function (id) {
+        var updated = selectedValues.filter(function (v) { return v.id !== id; });
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(updated);
+    };
+    var handleClearAll = function () {
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(isMultiple ? [] : undefined);
+        setInputValue('');
+    };
+    var handleSelectAll = function () {
+        var allSelected = filteredOptions.every(function (opt) {
+            return selectedValues.some(function (sel) { return sel.id === opt.id; });
+        });
+        if (allSelected) {
+            var updated = selectedValues.filter(function (sel) { return !filteredOptions.some(function (opt) { return opt.id === sel.id; }); });
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect(updated);
+        }
+        else {
+            var filteredNotSelected = filteredOptions.filter(function (opt) { return !selectedValues.some(function (sel) { return sel.id === opt.id; }); });
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect(__spreadArray(__spreadArray([], selectedValues, true), filteredNotSelected, true));
+        }
+        setInputValue('');
+    };
+    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 = 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 || pagination.scrollLoading || !hasMore)
+            return;
+        var target = e.currentTarget;
+        var nearBottom = target.scrollTop + target.clientHeight >= target.scrollHeight - 5;
+        if (nearBottom) {
+            if (scrollTimeoutRef.current)
+                clearTimeout(scrollTimeoutRef.current);
+            scrollTimeoutRef.current = setTimeout(function () {
+                var _a;
+                var startIndex = options.length + 1;
+                (_a = pagination.onScroll) === null || _a === void 0 ? void 0 : _a.call(pagination, startIndex, pagination.limit || 10, inputValue);
+            }, 200);
+        }
+    }, [pagination, options.length, inputValue, hasMore]);
+    (0, react_2.useOutsideClick)({
+        ref: customSelectRef,
+        handler: function () { return setCustomSelectOpen(false); },
+    });
+    var handleCustomSelect = (0, react_1.useCallback)(function (item) {
+        setCustomSelectOpen(false);
+        if (typeof (insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.onSelect) === 'function') {
+            insideSelect.onSelect(item);
+        }
+    }, [insideSelect]);
+    return (react_1.default.createElement(react_2.Box, { ref: containerRef, width: width, position: "relative" },
+        label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: information === null || information === void 0 ? void 0 : information.isInformation, informationMessage: information === null || information === void 0 ? void 0 : information.informationMessage })),
+        react_1.default.createElement(react_2.InputGroup, { size: size },
+            react_1.default.createElement(react_2.Box, { as: "div", w: "100%", minH: "2.375rem", px: 3, display: "flex", alignItems: "center", flexWrap: "wrap", gap: "0.375rem", border: "0.063rem solid", borderColor: error ? theme.colors.semantic.error[500] : theme.colors.primary[500], borderRadius: "0.25rem", bg: "white", boxShadow: focused ? error ? "0 0 0 0.125rem ".concat((_b = theme.colors.boxShadow) === null || _b === void 0 ? void 0 : _b.error) : "0 0 0 0.125rem ".concat((_c = theme.colors.boxShadow) === null || _c === void 0 ? void 0 : _c.primary) : 'none', transition: "box-shadow 0.2s, border-color 0.2s" },
+                insideSelect && (react_1.default.createElement(react_2.Box, { position: "relative", px: 2, py: 2.5, ref: customSelectRef, backgroundColor: theme.colors.gray[200], ml: "-12px", h: "-webkit-fill-available", borderRadius: "0.25rem 0 0 0.25rem", onClick: function () { return setCustomSelectOpen(function (prev) { return !prev; }); } },
+                    react_1.default.createElement(react_2.Box, { minW: "8rem", fontSize: "sm", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", maxW: 100 },
+                        react_1.default.createElement(react_2.Text, { maxW: "6rem", isTruncated: true, whiteSpace: "nowrap" }, (_d = insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.value) === null || _d === void 0 ? void 0 : _d.label),
+                        customSelectOpen ? react_1.default.createElement(lucide_react_1.ChevronUp, { size: 16 }) : react_1.default.createElement(lucide_react_1.ChevronDown, { size: 16 })),
+                    customSelectOpen && (react_1.default.createElement(react_2.Box, { position: "absolute", top: "100%", mt: "0.25rem", zIndex: 20, bg: "white", border: "1px solid", borderColor: "gray.300", borderRadius: "md", boxShadow: "md", width: "100%" }, (_e = insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.option) === null || _e === void 0 ? void 0 : _e.map(function (item) { return (react_1.default.createElement(react_2.Box, { key: item.id, px: 3, py: 2, fontSize: "sm", _hover: { bg: 'gray.100' }, cursor: "pointer", onClick: function () { return handleCustomSelect(item); } }, item.label)); }))))),
+                isMultiple
+                    ? selectedValues.slice(0, (chip === null || chip === void 0 ? void 0 : chip.maxChips) || selectedValues.length).map(function (item) { return (react_1.default.createElement(Tag_1.default, { key: item.id, label: (chip === null || chip === void 0 ? void 0 : chip.maxText) && item.label.length > chip.maxText
+                            ? item.label.slice(0, chip.maxText) + '…'
+                            : item.label, onIconClick: (chip === null || chip === void 0 ? void 0 : chip.onClick) ? function () { return handleRemove(item === null || item === void 0 ? void 0 : item.id); } : undefined, icon: (chip === null || chip === void 0 ? void 0 : chip.onClick) ? lucide_react_1.CircleX : undefined, colorScheme: "gray", size: "sm" })); })
+                    : selectedValues.length === 1 &&
+                        inputValue === '' && (react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[800] }, selectedValues[0].label)),
+                (chip === null || chip === void 0 ? void 0 : chip.maxChips) &&
+                    isMultiple &&
+                    selectedValues.length > chip.maxChips && (react_1.default.createElement(Tag_1.default, { key: "extra-count", label: "+ ".concat(selectedValues.length - chip.maxChips), colorScheme: "gray", size: "sm" })),
+                (!selectedValues.length || isMultiple || inputValue) && (react_1.default.createElement(react_2.Input, { ref: inputRef, variant: "unstyled", flex: "1", minW: "5rem", value: inputValue, onChange: function (e) { return setInputValue(e.target.value); }, onFocus: function () {
+                        setFocused(true);
+                        setIsOpen(true);
+                    }, onBlur: function () { return setFocused(false); }, placeholder: placeholder })),
+                react_1.default.createElement(react_2.Box, { ml: "auto", display: "flex", alignItems: "center", gap: 1 },
+                    selectedValues.length > 0 && (react_1.default.createElement(ToolTip_1.default, { placement: "top", label: "Remove All", hasArrow: true, bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem" },
+                        react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.X, { size: 12, color: theme.colors.black }), "aria-label": "Clear all", variant: "ghost", size: "sm", onClick: handleClearAll, sx: {
+                                bg: 'transparent',
+                                _hover: { bg: 'transparent' },
+                                _active: { bg: 'transparent' },
+                                _focus: { boxShadow: 'none', bg: 'transparent' },
+                            } }))),
+                    isLoading ? (react_1.default.createElement(react_2.Spinner, { size: "sm" })) : isValidIcon(rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.icon) ? (react_1.default.createElement(react_2.IconButton, { icon: rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.icon, "aria-label": "right-icon", variant: "ghost", size: "sm", onClick: rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.onClick })) : (react_1.default.createElement(react_2.Box, { as: "button", onClick: function () { return setIsOpen(function (prev) { return !prev; }); }, "aria-label": "toggle-dropdown", display: "flex", alignItems: "center" }, isOpen ? react_1.default.createElement(lucide_react_1.ChevronUp, { size: 18 }) : react_1.default.createElement(lucide_react_1.ChevronDown, { size: 18 })))))),
+        isOpen && (react_1.default.createElement(react_2.Box, { position: "absolute", zIndex: 10, width: "100%", maxH: "20rem", borderWidth: 1, borderRadius: "sm", bg: "white", boxShadow: "md", display: "flex", flexDirection: "column" },
+            isMultiple && isSelectAll && (react_1.default.createElement(react_2.Box, { p: 2, 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" }),
+                react_1.default.createElement(react_2.Text, { fontSize: "sm" }, 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, { p: 3, display: "flex", alignItems: "center", gap: 2 },
+                react_1.default.createElement(react_2.Spinner, { size: "sm" }),
+                react_1.default.createElement(react_2.Text, { fontSize: "sm" }, loadingText))) : filteredOptions.length === 0 ? (react_1.default.createElement(react_2.Text, { p: 3, fontSize: "sm", color: theme.colors.gray[500] }, "No results found")) : (filteredOptions.map(function (option) { return (react_1.default.createElement(react_2.Box, { key: option.id, p: 2, px: 3, 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" })),
+                react_1.default.createElement(react_2.Text, { fontSize: "sm" }, option.label))); }))),
+            (addNew === null || addNew === void 0 ? void 0 : addNew.enabled) && (react_1.default.createElement(react_2.Box, { p: 2, borderTop: "0.063rem solid", borderColor: theme.colors.gray[200], bg: "white", display: "flex", alignItems: "center", gap: 2, cursor: "pointer", onClick: addNew.onClick, _hover: { bg: theme.colors.gray[50] } },
+                addNew.icon || react_1.default.createElement(lucide_react_1.Plus, { size: 16 }),
+                react_1.default.createElement(react_2.Text, { fontSize: "sm" }, addNew.text || 'Add New'))))),
+        helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText }),
+        error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage })));
+};
+exports.default = SearchSelect;

package/dist/Components/SearchSelect/SearchSelectProps.d.ts

@@ -0,0 +1,60 @@
+/// <reference types="react" />
+export type SearchSelectProps = {
+    id?: string;
+    label?: string;
+    options: Options[];
+    onSelect?: (options: Options | Options[] | undefined) => void;
+    onSearch?: (value: string) => void;
+    isOptionLoading?: boolean;
+    isLoading?: boolean;
+    loadingText?: string;
+    placeholder?: string;
+    value?: Options[] | Options;
+    searchQuery?: string;
+    isMultiple?: boolean;
+    isRequired?: boolean;
+    error?: boolean;
+    errorMessage?: string;
+    helperText?: string;
+    width?: string | number;
+    size?: "xs" | "sm" | "md" | "lg";
+    chip?: {
+        maxChips?: number;
+        maxText?: number;
+        onClick?: (options: Options | Options[]) => void;
+    };
+    information?: {
+        isInformation?: boolean;
+        informationMessage?: string;
+    };
+    rightIcon?: {
+        icon?: React.ReactNode;
+        onClick?: () => void;
+    };
+    addNew?: {
+        enabled: boolean;
+        icon?: React.ReactNode;
+        text?: string;
+        onClick?: () => void;
+    };
+    isRemoveAllIcon?: boolean;
+    isSelectAll?: boolean;
+    pagination?: {
+        onScroll?: (startIndex: number, limit: number, query: string) => void;
+        limit?: number;
+        scrollLoading?: boolean;
+    };
+    virtualization?: boolean;
+    insideSelect?: {
+        onSelect?: (options: Options) => void;
+        value?: Options;
+        option?: Options[];
+    };
+};
+export type Options = {
+    id: string | number;
+    label: string;
+    email?: string;
+    profileUrl?: string;
+    color?: string;
+};

package/dist/Components/SearchSelect/SearchSelectProps.js

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

package/dist/Layout.js

@@ -29,7 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("@chakra-ui/react");
 var react_2 = __importStar(require("react"));
 var accordion_1 = __importDefault(require("./Pages/accordion"));
-var selectSearch_1 = __importDefault(require("./Pages/selectSearch"));
+var searchSelect_1 = __importDefault(require("./Pages/searchSelect"));
 var search_1 = __importDefault(require("./Pages/search"));
 var timeline_1 = __importDefault(require("./Pages/timeline"));
 var datePick_1 = __importDefault(require("./Pages/datePick"));
@@ -62,6 +62,7 @@ var TInput_1 = __importDefault(require("./Pages/TInput"));
 var kanbanboard_1 = __importDefault(require("./Pages/kanbanboard"));
 var Tag_1 = __importDefault(require("./Components/Tag/Tag"));
 var lucide_react_1 = require("lucide-react");
+var selectSearch_1 = __importDefault(require("./Pages/selectSearch"));
 var Layout = function () {
     var _a = (0, react_2.useState)(window.location.pathname), currentPath = _a[0], setCurrentPath = _a[1];
     var navigate = function (path) {
@@ -86,7 +87,9 @@ var Layout = function () {
                 return react_2.default.createElement(alertdialog_1.default, null);
             case "/accordion":
                 return react_2.default.createElement(accordion_1.default, null);
-            case "/selectsearch":
+            case "/searchSelect":
+                return react_2.default.createElement(searchSelect_1.default, null);
+            case "/selectSearch":
                 return react_2.default.createElement(selectSearch_1.default, null);
             case "/timeline":
                 return react_2.default.createElement(timeline_1.default, null);
@@ -147,7 +150,7 @@ var Layout = function () {
             case "/kanban":
                 return react_2.default.createElement(kanbanboard_1.default, null);
             case "/tag":
-                return (react_2.default.createElement(Tag_1.default, { label: "tag", icon: lucide_react_1.Home, size: "md", onIconClick: function () { return console.log("Icon"); }, onTagClick: function () { return console.log("Tag"); } }));
+                return (react_2.default.createElement(Tag_1.default, { label: "tag", icon: lucide_react_1.Home, size: "md", colorScheme: "gray", onIconClick: function () { return console.log("Icon"); }, onTagClick: function () { return console.log("Tag"); } }));
             case "/":
             default:
         }
@@ -158,7 +161,8 @@ var Layout = function () {
                 react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/"); }, variant: "outline" }, "Home"),
                 react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/alertdialog"); }, variant: "outline" }, "AlertDialog"),
                 react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/accordion"); }, variant: "outline" }, "Accordion"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/selectsearch"); }, variant: "outline" }, "Selectsearch"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/searchSelect"); }, variant: "outline" }, "searchSelect"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/selectSearch"); }, variant: "outline" }, "selectSearch"),
                 react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/timeline"); }, variant: "outline" }, "Timeline"),
                 react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/search"); }, variant: "outline" }, "Search"),
                 react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/datepicker"); }, variant: "outline" }, "Datepicker"),

package/dist/Pages/searchSelect.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const SearchSelect: () => React.JSX.Element;
+export default SearchSelect;

package/dist/Pages/searchSelect.js

@@ -0,0 +1,162 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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;
+    return g = { next: verb(0), "throw": verb(1), "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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+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 SearchSelect_1 = __importDefault(require("../Components/SearchSelect/SearchSelect"));
+var max = 149;
+var rrr = function (start, limit) {
+    var end = Math.min(start + limit, max + 1); // +1 to include `max` as valid
+    return Array.from({ length: end - start }, function (_, index) { return ({
+        id: (start + index).toString(),
+        label: "Option ".concat(start + index),
+    }); });
+};
+var delay = function (ms) { return new Promise(function (resolve) { return setTimeout(resolve, ms); }); };
+var SearchSelect = function () {
+    var _a = (0, react_1.useState)([{ id: "300", label: "mahesh" }]), selectedOptions = _a[0], setselectedOptions = _a[1];
+    var _b = (0, react_1.useState)(rrr(1, 50)), soptions = _b[0], setSoptions = _b[1]; // initial 50
+    var _c = (0, react_1.useState)(""), search = _c[0], setSearch = _c[1];
+    var _d = (0, react_1.useState)(false), paginationLoading = _d[0], setpaginationLoading = _d[1];
+    var _e = (0, react_1.useState)({ id: "3", label: "Hariharan J" }), customSelectValue = _e[0], setCustomSelectValue = _e[1];
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(SearchSelect_1.default, { label: "Users", id: "user-select", options: soptions, value: selectedOptions, isMultiple: true, onSelect: function (val) {
+                console.log("val", val);
+                setselectedOptions(val);
+            }, onSearch: function (query) { return setSearch(query); }, isOptionLoading: false, placeholder: "Search users...", searchQuery: search, chip: {
+                maxChips: 3,
+                onClick: function () { return console.log("chip removed"); },
+            }, isSelectAll: true, pagination: {
+                limit: 50,
+                scrollLoading: paginationLoading,
+                onScroll: function (startIndex, limit, query) { return __awaiter(void 0, void 0, void 0, function () {
+                    var newOptions;
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0:
+                                console.log("Fetching:", startIndex, limit, query);
+                                if (startIndex > max) {
+                                    console.log("No more data to load.");
+                                    return [2 /*return*/];
+                                }
+                                setpaginationLoading(true);
+                                return [4 /*yield*/, delay(1000)];
+                            case 1:
+                                _a.sent();
+                                newOptions = rrr(startIndex, limit);
+                                setpaginationLoading(false);
+                                if (newOptions.length === 0) {
+                                    console.log("No new options returned.");
+                                    return [2 /*return*/];
+                                }
+                                setSoptions(function (prev) { return __spreadArray(__spreadArray([], prev, true), newOptions, true); });
+                                return [2 /*return*/];
+                        }
+                    });
+                }); },
+            }, 
+            // width={"500px"}
+            addNew: {
+                enabled: true,
+                text: "Add new user",
+                onClick: function () { return console.log("Add New User"); },
+            }, 
+            // rightIcon={{
+            //   icon: <Plus size={16} />,
+            //   onClick: () => console.log("Clicked Right Icon"),
+            // }}
+            // error={true}
+            // errorMessage="hello"
+            virtualization: true, insideSelect: {
+                onSelect: function (val) { return setCustomSelectValue(val); },
+                value: customSelectValue,
+                option: [
+                    {
+                        "id": 3,
+                        "label": "Hariharan J",
+                    },
+                    {
+                        "id": 1,
+                        "label": "Karuppusamy S",
+                    },
+                    {
+                        "id": 2,
+                        "label": "SasiKumar M",
+                    },
+                    {
+                        "id": 4,
+                        "label": "Hariharan  Jeganathan",
+                    }
+                ]
+            } })));
+};
+exports.default = SearchSelect;

package/dist/index.d.ts

@@ -28,6 +28,7 @@ import ProgressBar from "./Components/ProgressBar/ProgressBar";
 import { RadioButton, RadioButtonGroup } from "./Components/RadioButton/RadioButton";
 import Search from "./Components/Search/Search";
 import Select from "./Components/Select/Select";
+import SearchSelect from "./Components/SearchSelect/SearchSelect";
 import SelectSearch from "./Components/SelectSearch/SelectSearch";
 import SideBar from "./Components/SideBar/SideBar";
 import Skeletons from "./Components/Skeletons/Skeletons";
@@ -44,5 +45,5 @@ import withTheme from "./withTheme";
 import { useCustomTheme } from "./Theme/useCustomTheme";
 import { ThemesList } from "./Theme";
 import { debounce } from "./Utils/table";
-export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, FormWrapper, HeaderActions, InputTextArea, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PinInput, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Search, Select, SelectSearch, SideBar, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
+export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, FormWrapper, HeaderActions, InputTextArea, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PinInput, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Search, Select, SearchSelect, SelectSearch, SideBar, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
 export default withTheme;

package/dist/index.js

@@ -27,8 +27,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.SideBar = exports.SelectSearch = exports.Select = exports.Search = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.PinInput = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputTextArea = exports.HeaderActions = exports.FormWrapper = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
-exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = void 0;
+exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.Select = exports.Search = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.PinInput = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputTextArea = exports.HeaderActions = exports.FormWrapper = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
+exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = void 0;
 var Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
 exports.Accordian = Accordion_1.default;
 var AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
@@ -99,6 +99,8 @@ var Search_1 = __importDefault(require("./Components/Search/Search"));
 exports.Search = Search_1.default;
 var Select_1 = __importDefault(require("./Components/Select/Select"));
 exports.Select = Select_1.default;
+var SearchSelect_1 = __importDefault(require("./Components/SearchSelect/SearchSelect"));
+exports.SearchSelect = SearchSelect_1.default;
 var SelectSearch_1 = __importDefault(require("./Components/SelectSearch/SelectSearch"));
 exports.SelectSearch = SelectSearch_1.default;
 var SideBar_1 = __importDefault(require("./Components/SideBar/SideBar"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.0.13",
+  "version": "2.0.15",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -16,7 +16,8 @@
     "react-apexcharts": "^1.4.1",
     "react-datepicker": "^7.3.0",
     "react-dom": "^18.3.1",
-    "react-scripts": "^5.0.1"
+    "react-scripts": "^5.0.1",
+    "react-window": "^1.8.11"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -55,6 +56,7 @@
     "@types/node": "^16.18.97",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
+    "@types/react-window": "^1.8.8",
     "autoprefixer": "^10.4.21",
     "copyfiles": "^2.4.1",
     "path": "^0.12.7",