pixelize-design-library 1.1.20 → 1.1.22

package/dist/Components/SelectSearch/SelectSearch.js

@@ -1,4 +1,23 @@
 "use strict";
+// import React, {
+//   useCallback,
+//   useEffect,
+//   useMemo,
+//   useRef,
+//   useState,
+// } from "react";
+// import {
+//   Box,
+//   Input,
+//   Spinner,
+//   VStack,
+//   Text,
+//   InputGroup,
+//   InputRightElement,
+// } from "@chakra-ui/react";
+// import { selectOptions, SelectSearchProps } from "./SelectSearchProps";
+// import { TextLabel } from "../Common/FormLabel";
+// import { useCustomTheme } from "../../Theme/useCustomTheme";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -33,31 +52,496 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+// export default function SelectSearch({
+//   options,
+//   initialSelectedOption = null,
+//   onOptionSelect,
+//   inputOnchange,
+//   id,
+//   name,
+//   label,
+//   inputStyle,
+//   dropdownStyle,
+//   isOptionLoading,
+//   loadingText = "loading",
+//   boxStyle,
+//   placeholder = "Select Option",
+//   searchQuery = "",
+//   isInformation = false,
+//   informationMessage,
+//   rightIcon,
+//   rightElementStyle,
+//   isMultipleSelect,
+// }: Readonly<SelectSearchProps>) {
+//   const theme = useCustomTheme();
+//   // const [inputValue, setInputValue] = useState(
+//   //   initialSelectedOption ? initialSelectedOption?.label : ""
+//   // );
+//   const [selecedOption,setSelectedOption] = useState<any>([]);
+//   const [inputValue, setInputValue] = useState();
+//   const [isOpen, setIsOpen] = useState(false);
+//   const [position, setPosition] = useState<"above" | "below">("below");
+//   const inputRef = useRef<HTMLInputElement>(null);
+//   const dropdownRef = useRef<HTMLDivElement>(null);
+//   const filteredOptions = useMemo(() => {
+//     return options;
+//     // return options?.filter((option) =>
+//     //   option.label.toLowerCase().includes(inputValue.toLowerCase())
+//     // );
+//   }, [options, inputValue]);
+//   const handleOptionClick = useCallback(
+//     (option: selectOptions) => {
+//       if(isMultipleSelect){
+//         setSelectedOption((prev:any) => [...prev, option]);
+//       }else{
+//         setIsOpen(false);
+//         onOptionSelect(option);
+//       }
+//     },
+//     [onOptionSelect]
+//   );
+// console.log(selecedOption);
+//   // useEffect(() => {
+//   //   setInputValue(searchQuery);
+//   // }, [searchQuery]);
+//   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+//     // if (e.key === "Enter") {
+//     //   const matchingOption = options.find(
+//     //     (option) => option.label.toLowerCase() === inputValue.toLowerCase()
+//     //   );
+//     //   if (matchingOption) {
+//     //     handleOptionClick(matchingOption);
+//     //   }
+//     // }
+//   };
+//   const updateDropdownPosition = () => {
+//     if (inputRef.current && dropdownRef.current) {
+//       const inputRect = inputRef.current.getBoundingClientRect();
+//       const dropdownRect = dropdownRef.current.getBoundingClientRect();
+//       const viewportHeight = window.innerHeight;
+//       const spaceBelow = viewportHeight - inputRect.bottom + window.scrollY;
+//       const spaceAbove = inputRect.top + window.scrollY;
+//       if (spaceBelow >= dropdownRect.height) {
+//         setPosition("below");
+//       } else if (spaceAbove >= dropdownRect.height) {
+//         setPosition("above");
+//       } else {
+//         setPosition("below");
+//       }
+//     }
+//   };
+//   useEffect(() => {
+//     if (isOpen) {
+//       updateDropdownPosition();
+//     }
+//     const handleClickOutside = (event: MouseEvent) => {
+//       if (
+//         inputRef.current &&
+//         dropdownRef.current &&
+//         !inputRef.current.contains(event.target as Node) &&
+//         !dropdownRef.current.contains(event.target as Node)
+//       ) {
+//         setIsOpen(false);
+//       }
+//     };
+//     const handleScroll = () => {
+//       if (isOpen) {
+//         updateDropdownPosition();
+//       }
+//     };
+//     const handleResize = () => {
+//       if (isOpen) {
+//         updateDropdownPosition();
+//       }
+//     };
+//     document.addEventListener("mousedown", handleClickOutside);
+//     window.addEventListener("scroll", handleScroll);
+//     window.addEventListener("resize", handleResize);
+//     return () => {
+//       document.removeEventListener("mousedown", handleClickOutside);
+//       window.removeEventListener("scroll", handleScroll);
+//       window.removeEventListener("resize", handleResize);
+//     };
+//   }, [isOpen]);
+//   const RenderOptions = useCallback(() => {
+//     if (isOptionLoading) {
+//       return (
+//         <VStack py={2}>
+//           <Spinner size="sm" color="blue.500" />
+//           <Text color="blue.500">{loadingText}</Text>
+//         </VStack>
+//       );
+//     }
+//     if (filteredOptions?.length) {
+//       return filteredOptions.map((option) => (
+//         <Box
+//           key={option.id}
+//           px={4}
+//           py={2}
+//           cursor="pointer"
+//           _hover={{ backgroundColor: "blue.50" }}
+//           onClick={() => handleOptionClick(option)}
+//         >
+//           {option.label}
+//         </Box>
+//       ));
+//     }
+//     return (
+//       <Text px={4} py={2} color="gray.500">
+//         No options found
+//       </Text>
+//     );
+//   }, [filteredOptions, isOptionLoading, loadingText, handleOptionClick]);
+//   return (
+//     <Box
+//       display="flex"
+//       flexDirection="column"
+//       position="relative"
+//       sx={boxStyle}
+//     >
+//       {label && (
+//         <TextLabel
+//           label={label}
+//           id={id}
+//           isRequired={false}
+//           isInformation={isInformation}
+//           informationMessage={informationMessage}
+//         />
+//       )}
+//       <InputGroup>
+//         <Input
+//           ref={inputRef}
+//           variant="flushed"
+//           value={inputValue}
+//           onClick={() => setIsOpen(true)}
+//           onChange={(e) => inputOnchange(e.target.value)}
+//           placeholder={placeholder}
+//           onKeyDown={handleKeyDown}
+//           id={id}
+//           name={name}
+//           cursor="pointer"
+//           borderColor="gray.300"
+//           _hover={{ borderColor: "blue.500" }}
+//           _focus={{ borderColor: "blue.500" }}
+//           // {...inputStyle}
+//           style={{
+//             ...inputStyle,
+//             backgroundColor: theme.colors.backgroundColor.main,
+//             fontWeight: 800,
+//             color: theme.colors.gray[700],
+//             padding: "0 0.5rem",
+//             fontSize: 15,
+//             letterSpacing: 0.7,
+//           }}
+//         />
+//         {rightIcon && (
+//           <InputRightElement
+//             pointerEvents="none"
+//             children={rightIcon}
+//             style={{ ...rightElementStyle }}
+//           />
+//         )}
+//       </InputGroup>
+//       {isOpen && (
+//         <Box
+//           ref={dropdownRef}
+//           position="absolute"
+//           top={position === "below" ? "100%" : "auto"}
+//           bottom={position === "above" ? "100%" : "auto"}
+//           left={0}
+//           right={0}
+//           border="1px solid"
+//           borderColor="gray.300"
+//           borderRadius="md"
+//           bg="white"
+//           maxHeight="150px"
+//           overflowY="auto"
+//           zIndex={10}
+//           // {...dropdownStyle}
+//         >
+//           {RenderOptions()}
+//         </Box>
+//       )}
+//     </Box>
+//   );
+// }
+// import React, {
+//   useCallback,
+//   useEffect,
+//   useMemo,
+//   useRef,
+//   useState,
+// } from "react";
+// import {
+//   Box,
+//   Input,
+//   Spinner,
+//   VStack,
+//   Text,
+//   InputGroup,
+//   InputRightElement,
+// } from "@chakra-ui/react";
+// import { selectOptions, SelectSearchProps } from "./SelectSearchProps";
+// import { TextLabel } from "../Common/FormLabel";
+// import { useCustomTheme } from "../../Theme/useCustomTheme";
+// export default function SelectSearch({
+//   options,
+//   initialSelectedOption = null,
+//   onOptionSelect,
+//   inputOnchange,
+//   id,
+//   name,
+//   label,
+//   inputStyle,
+//   dropdownStyle,
+//   isOptionLoading,
+//   loadingText = "loading",
+//   boxStyle,
+//   placeholder = "Select Option",
+//   searchQuery = "",
+//   isInformation = false,
+//   informationMessage,
+//   rightIcon,
+//   rightElementStyle,
+//   isMultipleSelect,
+// }: Readonly<SelectSearchProps>) {
+//   const theme = useCustomTheme();
+//   const [selectedOptions, setSelectedOptions] = useState<any>([]);
+//   const [inputValue, setInputValue] = useState<any>("");
+//   const [isOpen, setIsOpen] = useState(false);
+//   const [position, setPosition] = useState<"above" | "below">("below");
+//   const inputRef = useRef<HTMLInputElement>(null);
+//   const dropdownRef = useRef<HTMLDivElement>(null);
+//   const filteredOptions = useMemo(() => {
+//     return options.filter(option =>
+//       option.label.toLowerCase().includes(inputValue.toLowerCase())
+//     );
+//   }, [options, inputValue]);
+//   const handleOptionClick = useCallback(
+//     (option: selectOptions) => {
+//       if (isMultipleSelect) {
+//         setSelectedOptions((prev:any) => {
+//           const isSelected = prev.some((selected:any) => selected.id === option.id);
+//           const newSelected = isSelected
+//             ? prev.filter((selected:any) => selected.id !== option.id) // Remove if already selected
+//             : [...prev, option]; // Add if not selected
+//           setInputValue(newSelected.map((opt:any) => opt.label).join(", ")); // Update input value
+//           return newSelected;
+//         });
+//       } else {
+//         setInputValue(option.label);
+//         setIsOpen(false);
+//         onOptionSelect(option); // Call the onOptionSelect for single select
+//       }
+//     },
+//     [isMultipleSelect, onOptionSelect]
+//   );
+//   const handleInputChange = (value:any) => {
+//     setInputValue(value);
+//     inputOnchange(value); // Call the inputOnchange prop
+//   };
+//   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+//     if (e.key === "Enter") {
+//       const matchingOption = options.find(
+//         option => option.label.toLowerCase() === inputValue.toLowerCase()
+//       );
+//       if (matchingOption) {
+//         handleOptionClick(matchingOption);
+//       }
+//     }
+//   };
+//   const updateDropdownPosition = () => {
+//     if (inputRef.current && dropdownRef.current) {
+//       const inputRect = inputRef.current.getBoundingClientRect();
+//       const dropdownRect = dropdownRef.current.getBoundingClientRect();
+//       const viewportHeight = window.innerHeight;
+//       const spaceBelow = viewportHeight - inputRect.bottom + window.scrollY;
+//       const spaceAbove = inputRect.top + window.scrollY;
+//       if (spaceBelow >= dropdownRect.height) {
+//         setPosition("below");
+//       } else if (spaceAbove >= dropdownRect.height) {
+//         setPosition("above");
+//       } else {
+//         setPosition("below");
+//       }
+//     }
+//   };
+//   useEffect(() => {
+//     if (isOpen) {
+//       updateDropdownPosition();
+//     }
+//     const handleClickOutside = (event: MouseEvent) => {
+//       if (
+//         inputRef.current &&
+//         dropdownRef.current &&
+//         !inputRef.current.contains(event.target as Node) &&
+//         !dropdownRef.current.contains(event.target as Node)
+//       ) {
+//         setIsOpen(false);
+//       }
+//     };
+//     document.addEventListener("mousedown", handleClickOutside);
+//     return () => {
+//       document.removeEventListener("mousedown", handleClickOutside);
+//     };
+//   }, [isOpen]);
+//   const RenderOptions = useCallback(() => {
+//     if (isOptionLoading) {
+//       return (
+//         <VStack py={2}>
+//           <Spinner size="sm" color="blue.500" />
+//           <Text color="blue.500">{loadingText}</Text>
+//         </VStack>
+//       );
+//     }
+//     if (filteredOptions?.length) {
+//       return filteredOptions.map(option => (
+//         <Box
+//           key={option.id}
+//           px={4}
+//           py={2}
+//           cursor="pointer"
+//           _hover={{ backgroundColor: "blue.50" }}
+//           onClick={() => handleOptionClick(option)}
+//         >
+//           {option.label}
+//         </Box>
+//       ));
+//     }
+//     return (
+//       <Text px={4} py={2} color="gray.500">
+//         No options found
+//       </Text>
+//     );
+//   }, [filteredOptions, isOptionLoading, loadingText, handleOptionClick]);
+//   return (
+//     <Box display="flex" flexDirection="column" position="relative" sx={boxStyle}>
+//       {label && (
+//         <TextLabel
+//           label={label}
+//           id={id}
+//           isRequired={false}
+//           isInformation={isInformation}
+//           informationMessage={informationMessage}
+//         />
+//       )}
+//       <InputGroup>
+//         <Input
+//           ref={inputRef}
+//           variant="flushed"
+//           value={inputValue}
+//           onClick={() => setIsOpen(true)}
+//           onChange={(e) => handleInputChange(e.target.value)}
+//           placeholder={placeholder}
+//           onKeyDown={handleKeyDown}
+//           id={id}
+//           name={name}
+//           cursor="pointer"
+//           borderColor="gray.300"
+//           _hover={{ borderColor: "blue.500" }}
+//           _focus={{ borderColor: "blue.500" }}
+//           style={{
+//             ...inputStyle,
+//             backgroundColor: theme.colors.backgroundColor.main,
+//             fontWeight: 800,
+//             color: theme.colors.gray[700],
+//             padding: "0 0.5rem",
+//             fontSize: 15,
+//             letterSpacing: 0.7,
+//           }}
+//         />
+//         {rightIcon && (
+//           <InputRightElement
+//             pointerEvents="none"
+//             children={rightIcon}
+//             style={{ ...rightElementStyle }}
+//           />
+//         )}
+//       </InputGroup>
+//       {isOpen && (
+//         <Box
+//           ref={dropdownRef}
+//           position="absolute"
+//           top={position === "below" ? "100%" : "auto"}
+//           bottom={position === "above" ? "100%" : "auto"}
+//           left={0}
+//           right={0}
+//           border="1px solid"
+//           borderColor="gray.300"
+//           borderRadius="md"
+//           bg="white"
+//           maxHeight="150px"
+//           overflowY="auto"
+//           zIndex={10}
+//         >
+//           {RenderOptions()}
+//         </Box>
+//       )}
+//     </Box>
+//   );
+// }
 var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
 var FormLabel_1 = require("../Common/FormLabel");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 function SelectSearch(_a) {
-    var options = _a.options, _b = _a.initialSelectedOption, initialSelectedOption = _b === void 0 ? null : _b, onOptionSelect = _a.onOptionSelect, inputOnchange = _a.inputOnchange, id = _a.id, name = _a.name, label = _a.label, inputStyle = _a.inputStyle, dropdownStyle = _a.dropdownStyle, isOptionLoading = _a.isOptionLoading, _c = _a.loadingText, loadingText = _c === void 0 ? "loading" : _c, boxStyle = _a.boxStyle, _d = _a.placeholder, placeholder = _d === void 0 ? "Select Option" : _d, _e = _a.searchQuery, searchQuery = _e === void 0 ? "" : _e, _f = _a.isInformation, isInformation = _f === void 0 ? false : _f, informationMessage = _a.informationMessage, rightIcon = _a.rightIcon, rightElementStyle = _a.rightElementStyle;
+    var options = _a.options, _b = _a.initialSelectedOption, initialSelectedOption = _b === void 0 ? null : _b, onOptionSelect = _a.onOptionSelect, inputOnchange = _a.inputOnchange, id = _a.id, name = _a.name, label = _a.label, inputStyle = _a.inputStyle, dropdownStyle = _a.dropdownStyle, isOptionLoading = _a.isOptionLoading, _c = _a.loadingText, loadingText = _c === void 0 ? "loading" : _c, boxStyle = _a.boxStyle, _d = _a.placeholder, placeholder = _d === void 0 ? "Select Option" : _d, _e = _a.searchQuery, searchQuery = _e === void 0 ? "" : _e, _f = _a.isInformation, isInformation = _f === void 0 ? false : _f, informationMessage = _a.informationMessage, rightIcon = _a.rightIcon, rightElementStyle = _a.rightElementStyle, isMultipleSelect = _a.isMultipleSelect, onOptionMultiSelect = _a.onOptionMultiSelect;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _g = (0, react_1.useState)(initialSelectedOption ? initialSelectedOption.label : ""), inputValue = _g[0], setInputValue = _g[1];
-    var _h = (0, react_1.useState)(false), isOpen = _h[0], setIsOpen = _h[1];
-    var _j = (0, react_1.useState)("below"), position = _j[0], setPosition = _j[1];
+    var _g = (0, react_1.useState)([]), selectedOptions = _g[0], setSelectedOptions = _g[1];
+    var _h = (0, react_1.useState)(""), inputValue = _h[0], setInputValue = _h[1];
+    var _j = (0, react_1.useState)(false), isOpen = _j[0], setIsOpen = _j[1];
+    var _k = (0, react_1.useState)("below"), position = _k[0], setPosition = _k[1];
     var inputRef = (0, react_1.useRef)(null);
     var dropdownRef = (0, react_1.useRef)(null);
     var filteredOptions = (0, react_1.useMemo)(function () {
-        return options === null || options === void 0 ? void 0 : options.filter(function (option) {
+        return options.filter(function (option) {
             return option.label.toLowerCase().includes(inputValue.toLowerCase());
         });
     }, [options, inputValue]);
     var handleOptionClick = (0, react_1.useCallback)(function (option) {
-        setIsOpen(false);
-        onOptionSelect(option);
-    }, [onOptionSelect]);
-    (0, react_1.useEffect)(function () {
-        setInputValue(searchQuery);
-    }, [searchQuery]);
+        if (isMultipleSelect) {
+            setSelectedOptions(function (prev) {
+                var isSelected = prev.some(function (selected) { return selected.id === option.id; });
+                var newSelected = isSelected
+                    ? prev.filter(function (selected) { return selected.id !== option.id; })
+                    : __spreadArray(__spreadArray([], prev, true), [option], false);
+                setInputValue("");
+                if (onOptionMultiSelect) {
+                    onOptionMultiSelect(newSelected);
+                }
+                return newSelected;
+            });
+        }
+        else {
+            setInputValue(option.label);
+            setIsOpen(false);
+            if (onOptionSelect) {
+                onOptionSelect(option);
+            }
+        }
+    }, [isMultipleSelect, onOptionSelect]);
+    var handleRemoveOption = function (option) {
+        setSelectedOptions(function (prev) {
+            return prev.filter(function (selected) { return selected.id !== option.id; });
+        });
+        if (onOptionMultiSelect) {
+            onOptionMultiSelect(selectedOptions.filter(function (selected) { return selected.id !== option.id; }));
+        }
+    };
+    var handleInputChange = function (value) {
+        setInputValue(value);
+        inputOnchange(value);
+    };
     var handleKeyDown = function (e) {
         if (e.key === "Enter") {
             var matchingOption = options.find(function (option) { return option.label.toLowerCase() === inputValue.toLowerCase(); });
@@ -96,23 +580,9 @@ function SelectSearch(_a) {
                 setIsOpen(false);
             }
         };
-        var handleScroll = function () {
-            if (isOpen) {
-                updateDropdownPosition();
-            }
-        };
-        var handleResize = function () {
-            if (isOpen) {
-                updateDropdownPosition();
-            }
-        };
         document.addEventListener("mousedown", handleClickOutside);
-        window.addEventListener("scroll", handleScroll);
-        window.addEventListener("resize", handleResize);
         return function () {
             document.removeEventListener("mousedown", handleClickOutside);
-            window.removeEventListener("scroll", handleScroll);
-            window.removeEventListener("resize", handleResize);
         };
     }, [isOpen]);
     var RenderOptions = (0, react_1.useCallback)(function () {
@@ -128,10 +598,11 @@ function SelectSearch(_a) {
     }, [filteredOptions, isOptionLoading, loadingText, handleOptionClick]);
     return (react_1.default.createElement(react_2.Box, { display: "flex", flexDirection: "column", position: "relative", sx: boxStyle },
         label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isRequired: false, isInformation: isInformation, informationMessage: informationMessage })),
+        isMultipleSelect && selectedOptions.length > 0 && (react_1.default.createElement(react_2.HStack, { spacing: 2, mb: 2 }, selectedOptions.map(function (option) { return (react_1.default.createElement(react_2.Tag, { size: "md", key: option.id, borderRadius: "full", variant: "solid", sx: { backgroundColor: theme.colors.primary[500] } },
+            react_1.default.createElement(react_2.TagLabel, { width: "50px" }, option.label),
+            react_1.default.createElement(react_2.TagCloseButton, { onClick: function () { return handleRemoveOption(option); } }))); }))),
         react_1.default.createElement(react_2.InputGroup, null,
-            react_1.default.createElement(react_2.Input, { ref: inputRef, variant: "flushed", value: inputValue, onClick: function () { return setIsOpen(true); }, onChange: function (e) { return inputOnchange(e.target.value); }, placeholder: placeholder, onKeyDown: handleKeyDown, id: id, name: name, cursor: "pointer", borderColor: "gray.300", _hover: { borderColor: "blue.500" }, _focus: { borderColor: "blue.500" }, 
-                // {...inputStyle}
-                style: __assign(__assign({}, inputStyle), { backgroundColor: theme.colors.backgroundColor.main, fontWeight: 800, color: theme.colors.gray[700], padding: "0 0.5rem", fontSize: 15, letterSpacing: 0.7 }) }),
+            react_1.default.createElement(react_2.Input, { ref: inputRef, variant: "flushed", value: inputValue, onClick: function () { return setIsOpen(true); }, onChange: function (e) { return handleInputChange(e.target.value); }, placeholder: placeholder, onKeyDown: handleKeyDown, id: id, name: name, cursor: "pointer", borderColor: "gray.300", _hover: { borderColor: "blue.500" }, _focus: { borderColor: "blue.500" }, style: __assign(__assign({}, inputStyle), { backgroundColor: theme.colors.backgroundColor.main, fontWeight: 800, color: theme.colors.gray[700], padding: "0 0.5rem", fontSize: 15, letterSpacing: 0.7 }) }),
             rightIcon && (react_1.default.createElement(react_2.InputRightElement, { pointerEvents: "none", children: rightIcon, style: __assign({}, rightElementStyle) }))),
         isOpen && (react_1.default.createElement(react_2.Box, { ref: dropdownRef, position: "absolute", top: position === "below" ? "100%" : "auto", bottom: position === "above" ? "100%" : "auto", left: 0, right: 0, border: "1px solid", borderColor: "gray.300", borderRadius: "md", bg: "white", maxHeight: "150px", overflowY: "auto", zIndex: 10 }, RenderOptions()))));
 }

package/dist/Components/SelectSearch/SelectSearchProps.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
 export type SelectSearchProps = {
-    options: MultiSelectOptions[];
+    options: selectOptions[];
     isSearchEnabled?: boolean;
-    initialSelectedOption?: MultiSelectOptions | null;
-    onOptionSelect: (option: MultiSelectOptions) => void;
+    initialSelectedOption?: selectOptions | null;
+    onOptionSelect?: (option: selectOptions) => void;
+    onOptionMultiSelect?: (option: selectOptions[]) => void;
     inputOnchange: (value: string | number) => void;
     id?: string;
     name?: string;
@@ -19,8 +20,9 @@ export type SelectSearchProps = {
     informationMessage?: string;
     rightIcon?: React.ReactNode;
     rightElementStyle?: {};
+    isMultipleSelect?: boolean;
 };
-export type MultiSelectOptions = {
+export type selectOptions = {
     id: string;
     label: string;
 };