⚡️ feat: make the select to be controller component

packages/frontend/src/components/shared/Select/Select.tsx

@@ -53,7 +53,10 @@ export type SelectOption = {
 export type SelectOrientation = 'horizontal' | 'vertical';
 
 interface SelectProps
-  extends Omit<ComponentPropsWithoutRef<'input'>, 'size'>,
+  extends Omit<
+      ComponentPropsWithoutRef<'input'>,
+      'size' | 'value' | 'onChange'
+    >,
     SelectTheme {
   /**
    * The options of the select
@@ -95,6 +98,18 @@ interface SelectProps
    * Show the values of the select if it's multiple
    */
   hideValues?: boolean;
+  /**
+   * The value of the select
+   */
+  value?: SelectOption | SelectOption[];
+  /**
+   * Callback function when reset the select
+   */
+  onClear?: () => void;
+  /**
+   * Callback function when the value of the select changes
+   */
+  onChange?: (value: SelectOption | SelectOption[]) => void;
 }
 
 export const Select = ({
@@ -113,6 +128,9 @@ export const Select = ({
   helperText,
   hideValues = false,
   placeholder: placeholderProp = 'Select an option',
+  value,
+  onChange,
+  onClear,
 }: SelectProps) => {
   const theme = selectTheme({ size, error, variant, orientation });
 
@@ -148,9 +166,26 @@ export const Select = ({
     }
   }, [dropdownOpen]); // Re-calculate whenever the dropdown is opened
 
+  useEffect(() => {
+    // If multiple selection is enabled, ensure the internal state is an array
+    if (multiple) {
+      if (Array.isArray(value)) {
+        // Directly use the provided array
+        setSelectedItems(value);
+      } else {
+        // Reset or set to empty array if the value is not an array
+        setSelectedItems([]);
+      }
+    } else {
+      // For single selection, directly set the selected item
+      setSelectedItem(value as SelectOption);
+    }
+  }, [value, multiple]);
+
   const handleSelectedItemChange = (selectedItem: SelectOption | null) => {
     setSelectedItem(selectedItem);
     setInputValue(selectedItem ? selectedItem.label : '');
+    onChange?.(selectedItem as SelectOption);
   };
 
   const {
@@ -159,6 +194,7 @@ export const Select = ({
     addSelectedItem,
     removeSelectedItem,
     selectedItems,
+    setSelectedItems,
     reset,
   } = useMultipleSelection<SelectOption>({
     onSelectedItemsChange: multiple
@@ -208,9 +244,17 @@ export const Select = ({
         // If the item is not already selected, add it to the selected items
         if (!selectedItems.includes(selectedItem)) {
           addSelectedItem(selectedItem);
+          // Callback for `onChange`
+          const newSelectedItems = [...selectedItems, selectedItem];
+          onChange?.(newSelectedItems);
         } else {
           // If the item is already selected, remove it from the selected items
           removeSelectedItem(selectedItem);
+          // Callback for `onChange`
+          const newSelectedItems = selectedItems.filter(
+            (item) => selectedItem !== item,
+          );
+          onChange?.(newSelectedItems);
         }
         setInputValue('');
       }
@@ -237,6 +281,7 @@ export const Select = ({
     reset();
     setSelectedItem(null);
     setInputValue('');
+    onClear?.();
   };
 
   const renderLabels = useMemo(

packages/frontend/src/pages/components/index.tsx

@@ -31,7 +31,7 @@ import {
 import { renderDefaultTag, renderMinimalTag } from './renders/tag';
 import { renderToast, renderToastsWithCta } from './renders/toast';
 import { renderTooltips } from './renders/tooltip';
-import { renderDropdowns } from './renders/dropdown';
+import { DropdownExample } from './renders/dropdown';
 
 type ValuePiece = Date | null;
 type Value = ValuePiece | [ValuePiece, ValuePiece];
@@ -274,7 +274,7 @@ const Page: React.FC = () => {
           {/* Dropdown */}
           <div className="flex flex-col gap-10 items-center justify-between">
             <h1 className="text-2xl font-bold">Dropdown / Select</h1>
-            {renderDropdowns()}
+            {<DropdownExample />}
           </div>
 
           <div className="w-full h border border-gray-200 px-20 my-10" />

packages/frontend/src/pages/components/renders/dropdown.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { PencilIcon } from 'components/shared/CustomIcon';
 import { SelectOption, Select } from 'components/shared/Select';
 
@@ -30,211 +30,302 @@ export const DROPDOWN_ITEMS: SelectOption[] = [
   },
 ];
 
-export const renderDropdowns = () => (
-  <>
-    <p className="text-sm text-center text-gray-500 -mb-8">Single – Small</p>
-    <div className="flex gap-4 flex-wrap justify-center">
-      <Select size="sm" placeholder="Default" options={DROPDOWN_ITEMS} />
-      <Select
-        size="sm"
-        placeholder="Clearable"
-        clearable
-        options={DROPDOWN_ITEMS}
-      />
-      <Select
-        size="sm"
-        searchable
-        placeholder="Searchable"
-        options={DROPDOWN_ITEMS}
-      />
-      <Select
-        size="sm"
-        placeholder="Vertical"
-        orientation="vertical"
-        options={DROPDOWN_ITEMS}
-      />
-    </div>
-    <p className="text-sm text-center text-gray-500 -mb-8">Single – Medium</p>
-    <div className="flex gap-4 flex-wrap justify-center">
-      <Select placeholder="Default" options={DROPDOWN_ITEMS} />
-      <Select placeholder="Clearable" clearable options={DROPDOWN_ITEMS} />
-      <Select searchable placeholder="Searchable" options={DROPDOWN_ITEMS} />
-      <Select
-        placeholder="Vertical"
-        orientation="vertical"
-        options={DROPDOWN_ITEMS}
-      />
-    </div>
-    <p className="text-sm text-center text-gray-500 -mb-8">Multiple – Small</p>
-    <div className="flex gap-4 flex-wrap justify-center">
-      <Select
-        multiple
-        size="sm"
-        placeholder="Default"
-        options={DROPDOWN_ITEMS}
-      />
-      <Select
-        multiple
-        size="sm"
-        placeholder="Clearable"
-        clearable
-        options={DROPDOWN_ITEMS}
-      />
-      <Select
-        searchable
-        multiple
-        size="sm"
-        placeholder="Searchable"
-        options={DROPDOWN_ITEMS}
-      />
-      <Select
-        multiple
-        size="sm"
-        placeholder="Vertical"
-        orientation="vertical"
-        options={DROPDOWN_ITEMS}
-      />
-      <Select
-        multiple
-        hideValues
-        size="sm"
-        orientation="vertical"
-        placeholder="Hide values"
-        options={DROPDOWN_ITEMS}
-      />
-    </div>
-    <p className="text-sm text-center text-gray-500 -mb-8">Multiple – Medium</p>
-    <div className="flex gap-4 flex-wrap justify-center">
-      <Select multiple placeholder="Default" options={DROPDOWN_ITEMS} />
-      <Select
-        multiple
-        placeholder="Clearable"
-        clearable
-        options={DROPDOWN_ITEMS}
-      />
-      <Select
-        searchable
-        multiple
-        placeholder="Searchable"
-        options={DROPDOWN_ITEMS}
-      />
-      <Select
-        multiple
-        placeholder="Vertical"
-        orientation="vertical"
-        options={DROPDOWN_ITEMS}
-      />
-      <Select
-        multiple
-        hideValues
-        orientation="vertical"
-        placeholder="Hide values"
-        options={DROPDOWN_ITEMS}
-      />
-    </div>
-    <p className="text-sm text-center text-gray-500 -mb-4">
-      Single – With label, description, and helper text
-    </p>
-    <div className="flex gap-4 flex-wrap justify-center">
-      <Select
-        label="Default"
-        description="Single select component"
-        helperText="This is a helper text"
-        options={DROPDOWN_ITEMS}
-      />
-      <Select
-        label="Clearable"
-        description="Single select component"
-        helperText="This is a helper text"
-        clearable
-        options={DROPDOWN_ITEMS}
-      />
-      <Select
-        searchable
-        label="Searchable"
-        description="Single select component"
-        helperText="This is a helper text"
-        options={DROPDOWN_ITEMS}
-      />
-      <Select
-        label="Vertical"
-        description="Single select component"
-        helperText="This is a helper text"
-        orientation="vertical"
-        options={DROPDOWN_ITEMS}
-      />
-    </div>
-    <p className="text-sm text-center text-gray-500 -mb-4">
-      Multiple – With label, description, and helper text
-    </p>
-    <div className="flex gap-4 flex-wrap justify-center">
-      <Select
-        label="Default"
-        description="Multiple select component"
-        helperText="This is a helper text"
-        multiple
-        options={DROPDOWN_ITEMS}
-      />
-      <Select
-        label="Clearable"
-        description="Multiple select component"
-        helperText="This is a helper text"
-        multiple
-        clearable
-        options={DROPDOWN_ITEMS}
-      />
-      <Select
-        searchable
-        label="Searchable"
-        description="Multiple select component"
-        helperText="This is a helper text"
-        multiple
-        options={DROPDOWN_ITEMS}
-      />
-      <Select
-        label="Vertical"
-        description="Multiple select component"
-        helperText="This is a helper text"
-        multiple
-        orientation="vertical"
-        options={DROPDOWN_ITEMS}
-      />
-    </div>
-    <p className="text-sm text-center text-gray-500 -mb-4">
-      Error – With label, description, and helper text
-    </p>
-    <div className="flex gap-4 flex-wrap justify-center">
-      <Select
-        error
-        label="Default"
-        description="Multiple select component"
-        helperText="This is a helper text"
-        options={DROPDOWN_ITEMS}
-      />
-      <Select
-        error
-        label="Clearable"
-        description="Multiple select component"
-        helperText="This is a helper text"
-        clearable
-        options={DROPDOWN_ITEMS}
-      />
-      <Select
-        error
-        searchable
-        label="Searchable"
-        description="Multiple select component"
-        helperText="This is a helper text"
-        options={DROPDOWN_ITEMS}
-      />
-      <Select
-        error
-        label="Vertical"
-        description="Multiple select component"
-        helperText="This is a helper text"
-        orientation="vertical"
-        options={DROPDOWN_ITEMS}
-      />
-    </div>
-  </>
-);
+export const DropdownExample = () => {
+  const [singleValue, setSingleValue] = useState<SelectOption>();
+  const [multipleValue, setMultipleValue] = useState<SelectOption[]>([]);
+
+  const handleSelect = (
+    type: 'single' | 'multiple',
+    value: SelectOption | SelectOption[],
+  ) => {
+    if (type === 'single') {
+      setSingleValue(value as SelectOption);
+    } else {
+      setMultipleValue(value as SelectOption[]);
+    }
+  };
+
+  return (
+    <>
+      <p className="text-sm text-center text-gray-500 -mb-8">Single – Small</p>
+      <div className="flex gap-4 flex-wrap justify-center">
+        <Select
+          size="sm"
+          placeholder="Default"
+          options={DROPDOWN_ITEMS}
+          value={singleValue}
+          onChange={(value) => handleSelect('single', value)}
+        />
+        <Select
+          size="sm"
+          placeholder="Clearable"
+          clearable
+          options={DROPDOWN_ITEMS}
+          value={singleValue}
+          onChange={(value) => handleSelect('single', value)}
+        />
+        <Select
+          size="sm"
+          searchable
+          placeholder="Searchable"
+          options={DROPDOWN_ITEMS}
+          value={singleValue}
+          onChange={(value) => handleSelect('single', value)}
+        />
+        <Select
+          size="sm"
+          placeholder="Vertical"
+          orientation="vertical"
+          options={DROPDOWN_ITEMS}
+          value={singleValue}
+          onChange={(value) => handleSelect('single', value)}
+        />
+      </div>
+      <p className="text-sm text-center text-gray-500 -mb-8">Single – Medium</p>
+      <div className="flex gap-4 flex-wrap justify-center">
+        <Select
+          placeholder="Default"
+          options={DROPDOWN_ITEMS}
+          value={singleValue}
+          onChange={(value) => handleSelect('single', value)}
+        />
+        <Select
+          placeholder="Clearable"
+          clearable
+          options={DROPDOWN_ITEMS}
+          value={singleValue}
+          onChange={(value) => handleSelect('single', value)}
+        />
+        <Select
+          searchable
+          placeholder="Searchable"
+          options={DROPDOWN_ITEMS}
+          value={singleValue}
+          onChange={(value) => handleSelect('single', value)}
+        />
+        <Select
+          placeholder="Vertical"
+          orientation="vertical"
+          options={DROPDOWN_ITEMS}
+          value={singleValue}
+          onChange={(value) => handleSelect('single', value)}
+        />
+      </div>
+      <p className="text-sm text-center text-gray-500 -mb-8">
+        Multiple – Small
+      </p>
+      <div className="flex gap-4 flex-wrap justify-center">
+        <Select
+          multiple
+          size="sm"
+          placeholder="Default"
+          options={DROPDOWN_ITEMS}
+          value={multipleValue}
+          onChange={(value) => handleSelect('multiple', value)}
+        />
+        <Select
+          multiple
+          size="sm"
+          placeholder="Clearable"
+          clearable
+          options={DROPDOWN_ITEMS}
+          value={multipleValue}
+          onChange={(value) => handleSelect('multiple', value)}
+        />
+        <Select
+          searchable
+          multiple
+          size="sm"
+          placeholder="Searchable"
+          options={DROPDOWN_ITEMS}
+          value={multipleValue}
+          onChange={(value) => handleSelect('multiple', value)}
+        />
+        <Select
+          multiple
+          size="sm"
+          placeholder="Vertical"
+          orientation="vertical"
+          options={DROPDOWN_ITEMS}
+          value={multipleValue}
+          onChange={(value) => handleSelect('multiple', value)}
+        />
+        <Select
+          multiple
+          hideValues
+          size="sm"
+          orientation="vertical"
+          placeholder="Hide values"
+          options={DROPDOWN_ITEMS}
+          value={multipleValue}
+          onChange={(value) => handleSelect('multiple', value)}
+        />
+      </div>
+      <p className="text-sm text-center text-gray-500 -mb-8">
+        Multiple – Medium
+      </p>
+      <div className="flex gap-4 flex-wrap justify-center">
+        <Select
+          multiple
+          placeholder="Default"
+          options={DROPDOWN_ITEMS}
+          value={multipleValue}
+          onChange={(value) => handleSelect('multiple', value)}
+        />
+        <Select
+          multiple
+          placeholder="Clearable"
+          clearable
+          options={DROPDOWN_ITEMS}
+          value={multipleValue}
+          onChange={(value) => handleSelect('multiple', value)}
+        />
+        <Select
+          searchable
+          multiple
+          placeholder="Searchable"
+          options={DROPDOWN_ITEMS}
+          value={multipleValue}
+          onChange={(value) => handleSelect('multiple', value)}
+        />
+        <Select
+          multiple
+          placeholder="Vertical"
+          orientation="vertical"
+          options={DROPDOWN_ITEMS}
+          value={multipleValue}
+          onChange={(value) => handleSelect('multiple', value)}
+        />
+        <Select
+          multiple
+          hideValues
+          orientation="vertical"
+          placeholder="Hide values"
+          options={DROPDOWN_ITEMS}
+          value={multipleValue}
+          onChange={(value) => handleSelect('multiple', value)}
+        />
+      </div>
+      <p className="text-sm text-center text-gray-500 -mb-4">
+        Single – With label, description, and helper text
+      </p>
+      <div className="flex gap-4 flex-wrap justify-center">
+        <Select
+          label="Default"
+          description="Single select component"
+          helperText="This is a helper text"
+          options={DROPDOWN_ITEMS}
+          value={singleValue}
+          onChange={(value) => handleSelect('single', value)}
+        />
+        <Select
+          label="Clearable"
+          description="Single select component"
+          helperText="This is a helper text"
+          clearable
+          options={DROPDOWN_ITEMS}
+          value={singleValue}
+          onChange={(value) => handleSelect('single', value)}
+        />
+        <Select
+          searchable
+          label="Searchable"
+          description="Single select component"
+          helperText="This is a helper text"
+          options={DROPDOWN_ITEMS}
+          value={singleValue}
+          onChange={(value) => handleSelect('single', value)}
+        />
+        <Select
+          label="Vertical"
+          description="Single select component"
+          helperText="This is a helper text"
+          orientation="vertical"
+          options={DROPDOWN_ITEMS}
+          value={singleValue}
+          onChange={(value) => handleSelect('single', value)}
+        />
+      </div>
+      <p className="text-sm text-center text-gray-500 -mb-4">
+        Multiple – With label, description, and helper text
+      </p>
+      <div className="flex gap-4 flex-wrap justify-center">
+        <Select
+          label="Default"
+          description="Multiple select component"
+          helperText="This is a helper text"
+          multiple
+          options={DROPDOWN_ITEMS}
+          value={multipleValue}
+          onChange={(value) => handleSelect('multiple', value)}
+        />
+        <Select
+          label="Clearable"
+          description="Multiple select component"
+          helperText="This is a helper text"
+          multiple
+          clearable
+          options={DROPDOWN_ITEMS}
+          value={multipleValue}
+          onChange={(value) => handleSelect('multiple', value)}
+        />
+        <Select
+          searchable
+          label="Searchable"
+          description="Multiple select component"
+          helperText="This is a helper text"
+          multiple
+          options={DROPDOWN_ITEMS}
+          value={multipleValue}
+          onChange={(value) => handleSelect('multiple', value)}
+        />
+        <Select
+          label="Vertical"
+          description="Multiple select component"
+          helperText="This is a helper text"
+          multiple
+          orientation="vertical"
+          options={DROPDOWN_ITEMS}
+          value={multipleValue}
+          onChange={(value) => handleSelect('multiple', value)}
+        />
+      </div>
+      <p className="text-sm text-center text-gray-500 -mb-4">
+        Error – With label, description, and helper text
+      </p>
+      <div className="flex gap-4 flex-wrap justify-center">
+        <Select
+          error
+          label="Default"
+          description="Multiple select component"
+          helperText="This is a helper text"
+          options={DROPDOWN_ITEMS}
+        />
+        <Select
+          error
+          label="Clearable"
+          description="Multiple select component"
+          helperText="This is a helper text"
+          clearable
+          options={DROPDOWN_ITEMS}
+        />
+        <Select
+          error
+          searchable
+          label="Searchable"
+          description="Multiple select component"
+          helperText="This is a helper text"
+          options={DROPDOWN_ITEMS}
+        />
+        <Select
+          error
+          label="Vertical"
+          description="Multiple select component"
+          helperText="This is a helper text"
+          orientation="vertical"
+          options={DROPDOWN_ITEMS}
+        />
+      </div>
+    </>
+  );
+};