From 40f2eb2b06abdf62d33f90c5128e7e6a531b56f2 Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Tue, 18 Jul 2023 16:27:48 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(react)=20upgrade=20code=20fo?=
 =?UTF-8?q?r=20Downshift=208?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This new major version broke our components, including the way the menu
gets opened, how to determine the disabled options and some other semantic
types changes.
---
 .../react/src/components/Forms/Select/mono-common.tsx     | 2 +-
 .../react/src/components/Forms/Select/mono-searchable.tsx | 7 +++----
 packages/react/src/components/Forms/Select/mono.tsx       | 1 +
 .../react/src/components/Forms/Select/multi-common.tsx    | 1 -
 .../src/components/Forms/Select/multi-searchable.tsx      | 8 ++++----
 .../react/src/components/Forms/Select/multi-simple.tsx    | 3 ++-
 packages/react/src/components/Forms/Select/test-utils.tsx | 2 +-
 7 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/react/src/components/Forms/Select/mono-common.tsx b/packages/react/src/components/Forms/Select/mono-common.tsx
index 5757e15..6037053 100644
--- a/packages/react/src/components/Forms/Select/mono-common.tsx
+++ b/packages/react/src/components/Forms/Select/mono-common.tsx
@@ -30,6 +30,7 @@ export interface SubProps extends SelectProps {
   downshiftProps: {
     initialSelectedItem?: Option;
     onSelectedItemChange?: any;
+    isItemDisabled?: (item: Option) => boolean;
   };
 }
 
@@ -190,7 +191,6 @@ export const SelectMonoAux = ({
                       item,
                       index,
                       isActive,
-                      disabled: item.disabled,
                     })}
                   >
                     <span>{item.label}</span>
diff --git a/packages/react/src/components/Forms/Select/mono-searchable.tsx b/packages/react/src/components/Forms/Select/mono-searchable.tsx
index e2c26dd..5223858 100644
--- a/packages/react/src/components/Forms/Select/mono-searchable.tsx
+++ b/packages/react/src/components/Forms/Select/mono-searchable.tsx
@@ -53,6 +53,7 @@ export const SelectMonoSearchable = (props: SubProps) => {
         wrapperProps: {
           onClick: () => {
             inputRef.current?.focus();
+            downshiftReturn.openMenu();
           },
         },
         toggleButtonProps: downshiftReturn.getToggleButtonProps({
@@ -65,12 +66,10 @@ export const SelectMonoSearchable = (props: SubProps) => {
     >
       <input
         {...inputProps}
-        onFocus={(e) => {
-          inputProps.onFocus(e);
+        onFocus={() => {
           setHasInputFocused(true);
         }}
-        onBlur={(e) => {
-          inputProps.onBlur(e);
+        onBlur={() => {
           setHasInputFocused(false);
         }}
       />
diff --git a/packages/react/src/components/Forms/Select/mono.tsx b/packages/react/src/components/Forms/Select/mono.tsx
index 7d7d9d2..8b10d31 100644
--- a/packages/react/src/components/Forms/Select/mono.tsx
+++ b/packages/react/src/components/Forms/Select/mono.tsx
@@ -44,6 +44,7 @@ export const SelectMono = (props: SelectProps) => {
         },
       });
     },
+    isItemDisabled: (item) => !!item.disabled,
   };
 
   return props.searchable ? (
diff --git a/packages/react/src/components/Forms/Select/multi-common.tsx b/packages/react/src/components/Forms/Select/multi-common.tsx
index ecebdae..13bb577 100644
--- a/packages/react/src/components/Forms/Select/multi-common.tsx
+++ b/packages/react/src/components/Forms/Select/multi-common.tsx
@@ -203,7 +203,6 @@ export const SelectMultiAux = ({
                     {...downshiftReturn.getItemProps({
                       item: option,
                       index,
-                      disabled: option.disabled,
                     })}
                   >
                     <span>{option.label}</span>
diff --git a/packages/react/src/components/Forms/Select/multi-searchable.tsx b/packages/react/src/components/Forms/Select/multi-searchable.tsx
index b836b3f..e79a821 100644
--- a/packages/react/src/components/Forms/Select/multi-searchable.tsx
+++ b/packages/react/src/components/Forms/Select/multi-searchable.tsx
@@ -76,6 +76,7 @@ export const SelectMultiSearchable = (props: SubProps) => {
           break;
       }
     },
+    isItemDisabled: (item) => !!item.disabled,
   });
 
   const inputProps = downshiftReturn.getInputProps({
@@ -118,6 +119,7 @@ export const SelectMultiSearchable = (props: SubProps) => {
         wrapperProps: {
           onClick: () => {
             inputRef.current?.focus();
+            downshiftReturn.openMenu();
           },
         },
         toggleButtonProps: downshiftReturn.getToggleButtonProps(),
@@ -127,12 +129,10 @@ export const SelectMultiSearchable = (props: SubProps) => {
       <span className="c__select__inner__value__input" data-value={inputValue}>
         <input
           {...inputProps}
-          onFocus={(e) => {
-            inputProps.onFocus(e);
+          onFocus={() => {
             setHasInputFocused(true);
           }}
-          onBlur={(e) => {
-            inputProps.onBlur(e);
+          onBlur={() => {
             setHasInputFocused(false);
           }}
           size={4}
diff --git a/packages/react/src/components/Forms/Select/multi-simple.tsx b/packages/react/src/components/Forms/Select/multi-simple.tsx
index 825ea31..4b692f3 100644
--- a/packages/react/src/components/Forms/Select/multi-simple.tsx
+++ b/packages/react/src/components/Forms/Select/multi-simple.tsx
@@ -64,6 +64,7 @@ export const SelectMultiSimple = (props: SubProps) => {
           break;
       }
     },
+    isItemDisabled: (item) => !!item.disabled,
   });
 
   return (
@@ -86,7 +87,7 @@ export const SelectMultiSimple = (props: SubProps) => {
             preventKeyAction: downshiftReturn.isOpen,
           }),
           disabled: props.disabled,
-          onClick: (e) => {
+          onClick: (e: React.MouseEvent): void => {
             // As the wrapper also has an onClick handler, we need to stop the event propagation here on it will toggle
             // twice the menu opening which will ... do nothing :).
             e.stopPropagation();
diff --git a/packages/react/src/components/Forms/Select/test-utils.tsx b/packages/react/src/components/Forms/Select/test-utils.tsx
index 2667a6a..870598b 100644
--- a/packages/react/src/components/Forms/Select/test-utils.tsx
+++ b/packages/react/src/components/Forms/Select/test-utils.tsx
@@ -30,7 +30,7 @@ export const expectOptionToBeUnselected = (option: HTMLLIElement) => {
   );
 };
 export const expectOptionToBeDisabled = (option: HTMLLIElement) => {
-  expect(option).toHaveAttribute("disabled");
+  expect(option).toHaveAttribute("aria-disabled");
   expect(Array.from(option.classList)).contains(
     "c__select__menu__item--disabled",
   );