pixelize-design-library 1.1.26 → 1.1.28

package/dist/Components/SelectSearch/SelectSearch.js

@@ -1,19 +1,23 @@
 "use strict";
 // import React, {
-//   useCallback,
-//   useEffect,
-//   useMemo,
-//   useRef,
-//   useState,
+//  useCallback,
+//  useEffect,
+//  useMemo,
+//  useRef,
+//  useState,
 // } from "react";
 // import {
-//   Box,
-//   Input,
-//   Spinner,
-//   VStack,
-//   Text,
-//   InputGroup,
-//   InputRightElement,
+//  Box,
+//  Input,
+//  Spinner,
+//  VStack,
+//  Text,
+//  InputGroup,
+//  InputRightElement,
+//  HStack,
+//  Tag,
+//  TagLabel,
+//  TagCloseButton,
 // } from "@chakra-ui/react";
 // import { selectOptions, SelectSearchProps } from "./SelectSearchProps";
 // import { TextLabel } from "../Common/FormLabel";
@@ -63,444 +67,258 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 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,
+//  options,
+//  initialSelectedOption,
+//  onOptionSelect,
+//  inputOnchange,
+//  id,
+//  name,
+//  label,
+//  inputStyle,
+//  dropdownStyle,
+//  isOptionLoading,
+//  loadingText = "loading",
+//  boxStyle,
+//  placeholder = "Select Option",
+//  searchQuery = "",
+//  isInformation = false,
+//  informationMessage,
+//  rightIcon,
+//  rightElementStyle,
+//  isMultipleSelect,
+//  isRequired=false,
+//  onOptionMultiSelect,
 // }: 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]
+//  const theme = useCustomTheme();
+//  const [selectedOptions, setSelectedOptions] = useState<selectOptions[]>(
+//     initialSelectedOption ? [initialSelectedOption] : []
 //   );
-// 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");
-//       }
+//  const [inputValue, setInputValue] = useState(searchQuery);
+//  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) => {
+//      const isSelected = prev.some((selected) => selected.id === option.id);
+//      const newSelected = isSelected
+//       ? prev.filter((selected) => selected.id !== option.id)
+//       : [...prev, option];
+//      setInputValue("");
+//      if (onOptionMultiSelect) {
+//       onOptionMultiSelect(newSelected);
+//      }
+//      return newSelected;
+//     });
+//    } else {
+//     setInputValue(option.label);
+//     setIsOpen(false);
+//     if (onOptionSelect) {
+//      onOptionSelect(option);
 //     }
+//    }
+//   },
+//   [isMultipleSelect, onOptionSelect]
+//  );
+//  const handleRemoveOption = (option: selectOptions) => {
+//   setSelectedOptions((prev) =>
+//    prev.filter((selected) => selected.id !== option.id)
+//   );
+//   if (onOptionMultiSelect) {
+//    onOptionMultiSelect(selectedOptions.filter((selected) => selected.id !== option.id));
+//   }
+//  };
+//  const handleInputChange = (value: any) => {
+//   setInputValue(value);
+//   inputOnchange(value);
+//  };
+//  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);
+//    }
 //   };
-//   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 (
+//   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
-//       display="flex"
-//       flexDirection="column"
-//       position="relative"
-//       sx={boxStyle}
+//      key={option.id}
+//      px={4}
+//      py={2}
+//      cursor="pointer"
+//      _hover={{ backgroundColor: "blue.50" }}
+//      onClick={() => handleOptionClick(option)}
 //     >
-//       {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>
-//       )}
+//      {option.label}
 //     </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>
+//    <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={isRequired}
+//      isInformation={isInformation}
+//      informationMessage={informationMessage}
+//     />
+//    )}
+//    {/* Display selected options as chips */}
+//    {isMultipleSelect && selectedOptions.length > 0 && (
+//     <HStack spacing={2} mb={2}>
+//      {selectedOptions.map((option) => (
+//       <Tag
+//        size="md"
+//        key={option.id}
+//        borderRadius="full"
+//        variant="solid"
+//        sx={{ backgroundColor: theme.colors.primary[500] }}
+//       >
+//        <TagLabel width={"50px"}>{option.label}</TagLabel>
+//        <TagCloseButton onClick={() => handleRemoveOption(option)} />
+//       </Tag>
+//      ))}
+//     </HStack>
+//    )}
+//    <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");
+var RenderOptions = function (_a) {
+    var isOptionLoading = _a.isOptionLoading, filteredOptions = _a.filteredOptions, loadingText = _a.loadingText, handleOptionClick = _a.handleOptionClick;
+    if (isOptionLoading) {
+        return (react_1.default.createElement(react_2.VStack, { py: 2 },
+            react_1.default.createElement(react_2.Spinner, { size: "sm", color: "blue.500" }),
+            react_1.default.createElement(react_2.Text, { color: "blue.500" }, loadingText)));
+    }
+    if (filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.length) {
+        return (react_1.default.createElement(react_1.default.Fragment, null, filteredOptions.map(function (option) { return (react_1.default.createElement(react_2.Box, { key: option.id, px: 4, py: 2, cursor: "pointer", _hover: { backgroundColor: "blue.50" }, onClick: function () { return handleOptionClick(option); } }, option.label)); })));
+    }
+    return (react_1.default.createElement(react_2.Text, { px: 4, py: 2, color: "gray.500" }, "No options found"));
+};
 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, isMultipleSelect = _a.isMultipleSelect, _g = _a.isRequired, isRequired = _g === void 0 ? false : _g, onOptionMultiSelect = _a.onOptionMultiSelect;
+    var options = _a.options, initialSelectedOption = _a.initialSelectedOption, onOptionSelect = _a.onOptionSelect, inputOnchange = _a.inputOnchange, id = _a.id, name = _a.name, label = _a.label, inputStyle = _a.inputStyle, dropdownStyle = _a.dropdownStyle, isOptionLoading = _a.isOptionLoading, _b = _a.loadingText, loadingText = _b === void 0 ? "loading" : _b, boxStyle = _a.boxStyle, _c = _a.placeholder, placeholder = _c === void 0 ? "Select Option" : _c, _d = _a.searchQuery, searchQuery = _d === void 0 ? "" : _d, _e = _a.isInformation, isInformation = _e === void 0 ? false : _e, informationMessage = _a.informationMessage, rightIcon = _a.rightIcon, rightElementStyle = _a.rightElementStyle, isMultipleSelect = _a.isMultipleSelect, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, onOptionMultiSelect = _a.onOptionMultiSelect;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _h = (0, react_1.useState)([]), selectedOptions = _h[0], setSelectedOptions = _h[1];
-    var _j = (0, react_1.useState)(""), inputValue = _j[0], setInputValue = _j[1];
-    var _k = (0, react_1.useState)(false), isOpen = _k[0], setIsOpen = _k[1];
-    var _l = (0, react_1.useState)("below"), position = _l[0], setPosition = _l[1];
+    var _g = (0, react_1.useState)(initialSelectedOption ? [initialSelectedOption] : []), selectedOptions = _g[0], setSelectedOptions = _g[1];
+    var _h = (0, react_1.useState)(searchQuery), 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 () {
@@ -508,6 +326,30 @@ function SelectSearch(_a) {
             return option.label.toLowerCase().includes(inputValue.toLowerCase());
         });
     }, [options, inputValue]);
+    //   const handleOptionClick = useCallback(
+    //     (option: selectOptions) => {
+    //       if (isMultipleSelect) {
+    //         setSelectedOptions((prev) => {
+    //           const isSelected = prev.some((selected) => selected.id === option.id);
+    //           const newSelected = isSelected
+    //             ? prev.filter((selected) => selected.id !== option.id)
+    //             : [...prev, option];
+    //           setInputValue("");
+    //           if (onOptionMultiSelect) {
+    //             onOptionMultiSelect(newSelected);
+    //           }
+    //           return newSelected;
+    //         });
+    //       } else {
+    //         setInputValue(option.label);
+    //         setIsOpen(false);
+    //         if (onOptionSelect) {
+    //           onOptionSelect(option);
+    //         }
+    //       }
+    //     },
+    //     [isMultipleSelect, onOptionSelect, onOptionMultiSelect]
+    //   );
     var handleOptionClick = (0, react_1.useCallback)(function (option) {
         if (isMultipleSelect) {
             setSelectedOptions(function (prev) {
@@ -515,9 +357,12 @@ function SelectSearch(_a) {
                 var newSelected = isSelected
                     ? prev.filter(function (selected) { return selected.id !== option.id; })
                     : __spreadArray(__spreadArray([], prev, true), [option], false);
+                // Update the input value and notify the parent
                 setInputValue("");
                 if (onOptionMultiSelect) {
-                    onOptionMultiSelect(newSelected);
+                    // Call the prop to update state in the parent component
+                    // Note: This should not directly set the state in SelectSearch
+                    setTimeout(function () { return onOptionMultiSelect(newSelected); }, 0);
                 }
                 return newSelected;
             });
@@ -529,13 +374,14 @@ function SelectSearch(_a) {
                 onOptionSelect(option);
             }
         }
-    }, [isMultipleSelect, onOptionSelect]);
+    }, [isMultipleSelect, onOptionSelect, onOptionMultiSelect]);
     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; }));
+            setInputValue("");
         }
     };
     var handleInputChange = function (value) {
@@ -585,17 +431,6 @@ function SelectSearch(_a) {
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [isOpen]);
-    var RenderOptions = (0, react_1.useCallback)(function () {
-        if (isOptionLoading) {
-            return (react_1.default.createElement(react_2.VStack, { py: 2 },
-                react_1.default.createElement(react_2.Spinner, { size: "sm", color: "blue.500" }),
-                react_1.default.createElement(react_2.Text, { color: "blue.500" }, loadingText)));
-        }
-        if (filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.length) {
-            return filteredOptions.map(function (option) { return (react_1.default.createElement(react_2.Box, { key: option.id, px: 4, py: 2, cursor: "pointer", _hover: { backgroundColor: "blue.50" }, onClick: function () { return handleOptionClick(option); } }, option.label)); });
-        }
-        return (react_1.default.createElement(react_2.Text, { px: 4, py: 2, color: "gray.500" }, "No options found"));
-    }, [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: isRequired, 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] } },
@@ -604,6 +439,7 @@ function SelectSearch(_a) {
         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 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()))));
+        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 },
+            react_1.default.createElement(RenderOptions, { isOptionLoading: isOptionLoading, filteredOptions: filteredOptions, loadingText: loadingText, handleOptionClick: handleOptionClick })))));
 }
 exports.default = SelectSearch;