♻️(react) upgrade code for Downshift 8

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.

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>

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);
         }}
       />

packages/react/src/components/Forms/Select/mono.tsx

@@ -44,6 +44,7 @@ export const SelectMono = (props: SelectProps) => {
         },
       });
     },
+    isItemDisabled: (item) => !!item.disabled,
   };
 
   return props.searchable ? (

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>

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}

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();

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",
   );