feat(FE): Add checkbox multi-select and components prop

src/components/input/SelectInput.tsx

@@ -35,6 +35,7 @@ interface SelectInputBaseProps<T = OptionType> {
   bottomLabel?: ReactNode;
   options: T[];
   optionComponent?: OptionComponent<T>;
+  components?: Partial<typeof ReactSelectComponents>;
   isDisabled?: boolean;
   isLoading?: boolean;
   isClearable?: boolean;
@@ -56,9 +57,12 @@ interface SelectInputBaseProps<T = OptionType> {
   onInputChange?: (search: string) => void;
   startAdornment?: ReactNode;
   menuPortalTarget?: HTMLElement | null;
+  closeMenuOnSelect?: boolean;
+  hideSelectedOptions?: boolean;
 }
 
-interface SelectInputProps<T = OptionType> extends SelectInputBaseProps<T> {
+export interface SelectInputProps<T = OptionType>
+  extends SelectInputBaseProps<T> {
   createables?: boolean;
   value?: T | T[] | null;
   onChange?: (val: T | T[] | null) => void;
@@ -101,6 +105,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
     onChange,
     options,
     optionComponent,
+    components: customComponents,
     isDisabled,
     isLoading,
     isClearable,
@@ -119,6 +124,8 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
     onInputChange,
     startAdornment,
     menuPortalTarget,
+    closeMenuOnSelect,
+    hideSelectedOptions,
   } = props;
 
   const [internalInputValue, setInternalInputValue] = useState('');
@@ -128,14 +135,18 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
 
   const components = useMemo(() => {
     const base = isAnimated ? animatedComponents : {};
-    const customComponents = { ...base, IndicatorSeparator: () => null };
+    const mergedComponents = { ...base, IndicatorSeparator: () => null };
 
     if (startAdornment) {
-      customComponents.Control = CustomControl;
+      mergedComponents.Control = CustomControl;
     }
 
-    return customComponents;
-  }, [isAnimated, startAdornment]);
+    if (customComponents) {
+      Object.assign(mergedComponents, customComponents);
+    }
+
+    return mergedComponents;
+  }, [isAnimated, startAdornment, customComponents]);
 
   const internalInputChangeHandler = (val: string, meta: InputActionMeta) => {
     if (meta.action === 'input-change') setInternalInputValue(val);
@@ -205,6 +216,8 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         isRtl={isRtl}
         isSearchable={isSearchable}
         placeholder={placeholder}
+        closeMenuOnSelect={closeMenuOnSelect}
+        hideSelectedOptions={hideSelectedOptions}
         className={cn('w-full', className?.select)}
         classNames={{
           ...(!startAdornment && {