feat: update add disabled state to option

Author: HabRonan

src/components/Select/Select.tsx

@@ -16,6 +16,7 @@ import { CaretDown, CaretUp, MagnifyingGlass, XCircle } from '@phosphor-icons/re
 interface Option {
   label: string;
   value: string;
+  disabled?: boolean;
 }
 
 interface BoemlySelectProps {
@@ -73,33 +74,43 @@ export const BoemlySelect: React.FC<BoemlySelectProps> = ({
   }, [isDisabled]);
 
   // Handle selecting an option
-  const handleOptionSelect = (optionValue: string) => {
+  const handleOptionSelect = (optionValue: string, isOptionDisabled: boolean) => {
+    if (isOptionDisabled) return;
     if (isMultiple) {
       const isAlreadySelected = selectedOptions.includes(optionValue);
       const newSelectedOptions = isAlreadySelected
         ? selectedOptions.filter((val) => val !== optionValue)
         : [...selectedOptions, optionValue];
 
       setSelectedOptions(newSelectedOptions);
-      onChange?.(newSelectedOptions);
+      if (onChange) {
+        onChange(newSelectedOptions);
+      }
     } else {
       setSelectedOptions([optionValue]);
-      onChange?.(optionValue);
+      if (onChange) {
+        onChange(optionValue);
+      }
       setIsOpen(false);
     }
     setSearchTerm('');
   };
 
-  const allOptionValues = useMemo(() => options.map((option) => option.value), [options]);
-
   const onSelectAll = useCallback(() => {
-    setSelectedOptions(allOptionValues);
-    onChange?.(allOptionValues);
-  }, [allOptionValues, onChange]);
+    const enabledOptions = options
+      .filter((option) => !option.disabled)
+      .map((option) => option.value);
+    setSelectedOptions(enabledOptions);
+    if (onChange) {
+      onChange(enabledOptions);
+    }
+  }, [options, onChange]);
 
   const onClearAll = useCallback(() => {
     setSelectedOptions([]);
-    onChange?.([]);
+    if (onChange) {
+      onChange([]);
+    }
   }, [onChange]);
 
   return (
@@ -179,26 +190,28 @@ export const BoemlySelect: React.FC<BoemlySelectProps> = ({
               overflowY="auto"
             >
               {filteredOptions.length > 0 ? (
-                filteredOptions.map((option) => (
+                filteredOptions.map(({ value, label, disabled = false }) => (
                   <Flex
-                    key={option.value}
+                    key={value}
                     width="100%"
                     p="2"
                     align="center"
                     justify="space-between"
-                    onClick={() => handleOptionSelect(option.value)}
-                    cursor="pointer"
-                    _hover={{ bg: 'gray.100' }}
+                    onClick={() => handleOptionSelect(value, disabled)}
+                    cursor={disabled ? 'not-allowed' : 'pointer'}
+                    _hover={disabled ? {} : { bg: 'gray.100' }}
+                    opacity={disabled ? 0.5 : 1}
                   >
-                    <Text>{option.label}</Text>
+                    <Text>{label}</Text>
                     {isMultiple ? (
                       <Checkbox
-                        isChecked={selectedOptions.includes(option.value)}
+                        isChecked={selectedOptions.includes(value)}
                         pointerEvents="none"
                         iconColor="black"
+                        isDisabled={disabled}
                       />
                     ) : (
-                      selectedOptions.includes(option.value) && <XCircle size={16} />
+                      selectedOptions.includes(value) && <XCircle size={16} />
                     )}
                   </Flex>
                 ))