From f032235a616d72020fabac9363b8ce0932c3871a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= <chyla1988@gmail.com>
Date: Tue, 16 Jul 2024 10:24:00 +0200
Subject: [PATCH] Handle disable option in Select, Combobox and Multiselect
 (#826)

* Add disabled to Option type

* Handle disabled item state in Select component

* Handle disabled in Combobox and Multiselect
---
 src/components/BaseSelect/types.ts            |  1 +
 .../Combobox/Dynamic/DynamicCombobox.tsx      |  8 ++++++-
 src/components/Combobox/Static/Combobox.tsx   |  8 ++++++-
 .../Static/StaticCombobox.stories.tsx         | 20 +++++++++++++++++
 .../Dynamic/DynamicMultiselect.tsx            |  8 ++++++-
 .../Static/Multiselect.stories.tsx            | 22 +++++++++++++++++++
 .../Multiselect/Static/Multiselect.tsx        |  8 ++++++-
 src/components/Select/Select.stories.tsx      | 21 ++++++++++++++++++
 src/components/Select/Select.tsx              |  7 +++++-
 9 files changed, 98 insertions(+), 5 deletions(-)

diff --git a/src/components/BaseSelect/types.ts b/src/components/BaseSelect/types.ts
index 014285cf..303ae4ae 100644
--- a/src/components/BaseSelect/types.ts
+++ b/src/components/BaseSelect/types.ts
@@ -3,6 +3,7 @@ import { ReactNode } from "react";
 export type Option = {
   label: string;
   value: string;
+  disabled?: boolean;
   startAdornment?: ReactNode;
   endAdornment?: ReactNode;
 };
diff --git a/src/components/Combobox/Dynamic/DynamicCombobox.tsx b/src/components/Combobox/Dynamic/DynamicCombobox.tsx
index cce2ce00..281f3e1e 100644
--- a/src/components/Combobox/Dynamic/DynamicCombobox.tsx
+++ b/src/components/Combobox/Dynamic/DynamicCombobox.tsx
@@ -172,11 +172,17 @@ const DynamicComboboxInner = <T extends Option>(
                   {...getItemProps({
                     item,
                     index,
+                    disabled: item.disabled,
                   })}
                   active={highlightedIndex === index}
                 >
                   {item?.startAdornment}
-                  <Text size={getListTextSize(size)}>{item.label}</Text>
+                  <Text
+                    color={item.disabled ? "defaultDisabled" : undefined}
+                    size={getListTextSize(size)}
+                  >
+                    {item.label}
+                  </Text>
                   {item?.endAdornment}
                 </List.Item>
               ))}
diff --git a/src/components/Combobox/Static/Combobox.tsx b/src/components/Combobox/Static/Combobox.tsx
index 4f800ebf..874fb2cc 100644
--- a/src/components/Combobox/Static/Combobox.tsx
+++ b/src/components/Combobox/Static/Combobox.tsx
@@ -164,11 +164,17 @@ const ComboboxInner = <T extends Option, V extends Option | string>(
                   {...getItemProps({
                     item,
                     index,
+                    disabled: item.disabled,
                   })}
                   active={highlightedIndex === index}
                 >
                   {item?.startAdornment}
-                  <Text size={getListTextSize(size)}>{item.label}</Text>
+                  <Text
+                    color={item.disabled ? "defaultDisabled" : undefined}
+                    size={getListTextSize(size)}
+                  >
+                    {item.label}
+                  </Text>
                   {item?.endAdornment}
                 </List.Item>
               ))}
diff --git a/src/components/Combobox/Static/StaticCombobox.stories.tsx b/src/components/Combobox/Static/StaticCombobox.stories.tsx
index 5c09377b..405ecf8d 100644
--- a/src/components/Combobox/Static/StaticCombobox.stories.tsx
+++ b/src/components/Combobox/Static/StaticCombobox.stories.tsx
@@ -233,6 +233,26 @@ export const WithEllipsis = () => {
   );
 };
 
+export const WithDisabledOption = () => {
+  const values = options.map((option) => ({
+    ...option,
+    disabled: option.value === "color-green",
+  }));
+  const [value, setValue] = useState<Option | null>(values[0]);
+
+  return (
+    <Box __width="200px">
+      <Combobox
+        options={values}
+        value={value}
+        size="large"
+        label="Label"
+        onChange={(value) => setValue(value)}
+      />
+    </Box>
+  );
+};
+
 export const NoOptions = () => {
   return (
     <Box __width="200px">
diff --git a/src/components/Multiselect/Dynamic/DynamicMultiselect.tsx b/src/components/Multiselect/Dynamic/DynamicMultiselect.tsx
index 5f54452b..c1960743 100644
--- a/src/components/Multiselect/Dynamic/DynamicMultiselect.tsx
+++ b/src/components/Multiselect/Dynamic/DynamicMultiselect.tsx
@@ -217,9 +217,15 @@ const DynamicMultiselectInner = <T extends Option>(
                   {...getItemProps({
                     item,
                     index,
+                    disabled: item.disabled,
                   })}
                 >
-                  <Text size={getListTextSize(size)}>{item.label}</Text>
+                  <Text
+                    color={item.disabled ? "defaultDisabled" : undefined}
+                    size={getListTextSize(size)}
+                  >
+                    {item.label}
+                  </Text>
                 </List.Item>
               ))}
 
diff --git a/src/components/Multiselect/Static/Multiselect.stories.tsx b/src/components/Multiselect/Static/Multiselect.stories.tsx
index 7723a211..84dfacb6 100644
--- a/src/components/Multiselect/Static/Multiselect.stories.tsx
+++ b/src/components/Multiselect/Static/Multiselect.stories.tsx
@@ -197,6 +197,28 @@ export const WithStringAsValues = () => {
   );
 };
 
+export const WithDisabledOption = () => {
+  const [selectedItems, setSelectedItems] = useState(["Black"]);
+  const values = options.map((option) => {
+    return {
+      ...option,
+      disabled: option.value === "Green",
+    };
+  });
+
+  return (
+    <Box __width={300}>
+      <Multiselect
+        label="Pick colors"
+        size="large"
+        value={selectedItems}
+        onChange={(values) => setSelectedItems(values)}
+        options={values}
+      />
+    </Box>
+  );
+};
+
 export const Empty = () => {
   return <Multiselect options={[]} value={[]} />;
 };
diff --git a/src/components/Multiselect/Static/Multiselect.tsx b/src/components/Multiselect/Static/Multiselect.tsx
index 3a976ad0..64425cb8 100644
--- a/src/components/Multiselect/Static/Multiselect.tsx
+++ b/src/components/Multiselect/Static/Multiselect.tsx
@@ -200,9 +200,15 @@ const MultiselectInner = <T extends Option, V extends Option | string>(
                   {...getItemProps({
                     item,
                     index,
+                    disabled: item.disabled,
                   })}
                 >
-                  <Text size={getListTextSize(size)}>{item.label}</Text>
+                  <Text
+                    color={item.disabled ? "defaultDisabled" : undefined}
+                    size={getListTextSize(size)}
+                  >
+                    {item.label}
+                  </Text>
                 </List.Item>
               ))}
 
diff --git a/src/components/Select/Select.stories.tsx b/src/components/Select/Select.stories.tsx
index a5c6e185..be38159c 100644
--- a/src/components/Select/Select.stories.tsx
+++ b/src/components/Select/Select.stories.tsx
@@ -227,6 +227,27 @@ export const WithEllipsis = () => {
   );
 };
 
+export const WithDisabledOption = () => {
+  const values: Option[] = options.map((option) => ({
+    ...option,
+    disabled: option.value === "color-green",
+  }));
+
+  const [value, setValue] = useState("color-black");
+
+  return (
+    <Box __width="200px">
+      <Select
+        options={values}
+        value={value}
+        size="large"
+        label="Label"
+        onChange={(value) => setValue(value)}
+      />
+    </Box>
+  );
+};
+
 export const Empty = () => {
   return <Select options={options} value="" />;
 };
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index 803cf198..da445a11 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -190,11 +190,16 @@ const SelectInner = <T extends Option, V extends Option | string>(
                   {...getItemProps({
                     item,
                     index,
+                    disabled: item.disabled,
                   })}
                   active={highlightedIndex === index}
                 >
                   {item?.startAdornment}
-                  <Text size={getListTextSize(size)} width="100%">
+                  <Text
+                    color={item.disabled ? "defaultDisabled" : undefined}
+                    size={getListTextSize(size)}
+                    width="100%"
+                  >
                     {item.label}
                   </Text>
                   {item?.endAdornment}