From 750ca4f863132f5da0962b1a75d5bfb31273bd9a Mon Sep 17 00:00:00 2001
From: Haider Alshamma <haidera@nulogy.com>
Date: Thu, 9 May 2024 15:38:09 -0400
Subject: [PATCH] fix: remove all generics from NDSSelect

react-windowed-select does not forward <Option, IsMulti extends boolean, Group extends GroupBase<Option>>
downstream to the react-select resulting in mismatches between the expected types (defaulting to unknown)
and the actual types inferred by react-select.

This caused a problem for both the onChange and the custom components.
---
 src/Select/Select.tsx           | 52 ++++++++++++++++++---------------
 src/Select/SelectComponents.tsx | 26 +++++++++++------
 src/Select/SelectOption.tsx     |  8 ++---
 3 files changed, 50 insertions(+), 36 deletions(-)

diff --git a/src/Select/Select.tsx b/src/Select/Select.tsx
index 6df598995..dd3122103 100644
--- a/src/Select/Select.tsx
+++ b/src/Select/Select.tsx
@@ -1,6 +1,6 @@
 import React, { forwardRef, ReactNode, MutableRefObject } from "react";
 import Select from "react-select/base";
-import WindowedSelect, { GroupBase } from "react-windowed-select";
+import WindowedSelect from "react-windowed-select";
 import type { Props as SelectProps } from "react-select";
 import { useTranslation } from "react-i18next";
 import { useTheme } from "styled-components";
@@ -10,7 +10,6 @@ import { MaybeFieldLabel } from "../FieldLabel";
 import { InlineValidation } from "../Validation";
 import customStyles from "../Select/customReactSelectStyles";
 import { getSubset } from "../utils/subset";
-import { SelectControl } from "../AsyncSelect/AsyncSelectComponents";
 import { ComponentSize, useComponentSize } from "../NDSProvider/ComponentSizeContext";
 import {
   SelectMultiValue,
@@ -19,37 +18,39 @@ import {
   SelectInput,
   SelectDropdownIndicator,
   SelectMenu,
+  SelectControl,
 } from "./SelectComponents";
 import { SelectOption } from "./SelectOption";
+import { checkOptionsAreValid, getReactSelectValue } from "./lib";
 
-interface WindowedSelectProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>>
-  extends SelectProps<Option, IsMulti, Group> {
+interface WindowedSelectProps extends SelectProps {
   windowThreshold: number;
 }
 
-type CustomProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = {
-  autocomplete?: WindowedSelectProps<Option, IsMulti, Group>["isSearchable"];
+type CustomProps = {
+  autocomplete?: WindowedSelectProps["isSearchable"];
   labelText?: string;
   size?: ComponentSize;
   requirementText?: string;
   helpText?: ReactNode;
-  disabled?: WindowedSelectProps<Option, IsMulti, Group>["isDisabled"];
+  disabled?: WindowedSelectProps["isDisabled"];
   errorMessage?: string;
   errorList?: string[];
-  initialIsOpen?: WindowedSelectProps<Option, IsMulti, Group>["defaultMenuIsOpen"];
-  multiselect?: WindowedSelectProps<Option, IsMulti, Group>["isMulti"];
+  initialIsOpen?: WindowedSelectProps["defaultMenuIsOpen"];
+  multiselect?: WindowedSelectProps["isMulti"];
   maxHeight?: string;
-  defaultValue?: WindowedSelectProps<Option, IsMulti, Group>["defaultInputValue"];
+  defaultValue?: WindowedSelectProps["defaultInputValue"];
+  value?: string;
 };
 
-export type NDSSelectProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = Omit<
-  WindowedSelectProps<Option, IsMulti, Group>,
-  "isSearchable" | "isDisabled" | "isMulti" | "defaultMenuIsOpen" | "defaultInputValue"
+export type NDSSelectProps = Omit<
+  WindowedSelectProps,
+  "isSearchable" | "isDisabled" | "isMulti" | "defaultMenuIsOpen" | "defaultInputValue" | "value"
 > &
-  CustomProps<Option, IsMulti, Group>;
+  CustomProps;
 
 const NDSSelect = forwardRef(
-  <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
+  (
     {
       size,
       autocomplete,
@@ -84,29 +85,33 @@ const NDSSelect = forwardRef(
       "aria-label": ariaLabel,
       windowThreshold = 100,
       ...props
-    }: NDSSelectProps<Option, IsMulti, Group>,
-    ref:
-      | ((instance: Select<Option, IsMulti, Group> | null) => void)
-      | MutableRefObject<Select<Option, IsMulti, Group> | null>
-      | null
+    }: NDSSelectProps,
+    ref: ((instance: Select | null) => void) | MutableRefObject<Select | null> | null
   ) => {
     const { t } = useTranslation();
     const theme = useTheme();
     const spaceProps = getSubset(props, propTypes.space);
     const error = !!(errorMessage || errorList);
+    const optionsRef = React.useRef(options);
 
     const componentSize = useComponentSize(size);
 
+    React.useEffect(() => {
+      checkOptionsAreValid(options);
+      optionsRef.current = options;
+    }, [options]);
+
     return (
       <Field {...spaceProps}>
         <MaybeFieldLabel labelText={labelText} requirementText={requirementText} helpText={helpText}>
           <WindowedSelect
+            windowThreshold={windowThreshold}
             className={className}
             classNamePrefix={classNamePrefix}
             noOptionsMessage={noOptionsMessage}
-            value={value}
+            defaultValue={getReactSelectValue(options, defaultValue)}
+            value={getReactSelectValue(options, value)}
             ref={ref}
-            defaultInputValue={defaultValue}
             placeholder={placeholder || t("start typing")}
             styles={customStyles({
               theme,
@@ -114,6 +119,7 @@ const NDSSelect = forwardRef(
               maxHeight,
               windowed: options.length > windowThreshold,
             })}
+            options={options}
             isDisabled={disabled}
             isSearchable={autocomplete}
             aria-required={required}
@@ -131,7 +137,7 @@ const NDSSelect = forwardRef(
             menuPosition={menuPosition}
             onInputChange={onInputChange}
             components={{
-              SelectOption: (props) => (
+              Option: (props) => (
                 <SelectOption size={componentSize} {...props}>
                   {props.children}
                 </SelectOption>
diff --git a/src/Select/SelectComponents.tsx b/src/Select/SelectComponents.tsx
index 53b070750..13fa5ebe3 100644
--- a/src/Select/SelectComponents.tsx
+++ b/src/Select/SelectComponents.tsx
@@ -1,8 +1,16 @@
 import React from "react";
-import { components as selectComponents } from "react-windowed-select";
+import {
+  ClearIndicatorProps,
+  ContainerProps,
+  ControlProps,
+  DropdownIndicatorProps,
+  InputProps,
+  MenuProps,
+  MultiValueProps,
+  components as selectComponents,
+} from "react-windowed-select";
 
-export const SelectControl = (props) => {
-  // eslint-disable-next-line react/prop-types
+export const SelectControl = (props: ControlProps) => {
   const { isFocused } = props;
   return (
     <div data-testid="select-control">
@@ -15,7 +23,7 @@ export const SelectControl = (props) => {
   );
 };
 
-export const SelectMultiValue = (props) => {
+export const SelectMultiValue = (props: MultiValueProps) => {
   return (
     <div data-testid="select-multivalue">
       <selectComponents.MultiValue {...props} />
@@ -23,7 +31,7 @@ export const SelectMultiValue = (props) => {
   );
 };
 
-export const SelectClearIndicator = (props) => {
+export const SelectClearIndicator = (props: ClearIndicatorProps) => {
   return (
     <div data-testid="select-clear">
       <selectComponents.ClearIndicator {...props} />
@@ -31,7 +39,7 @@ export const SelectClearIndicator = (props) => {
   );
 };
 
-export const SelectDropdownIndicator = (props) => {
+export const SelectDropdownIndicator = (props: DropdownIndicatorProps) => {
   return (
     <div data-testid="select-arrow">
       <selectComponents.DropdownIndicator {...props} />
@@ -39,7 +47,7 @@ export const SelectDropdownIndicator = (props) => {
   );
 };
 
-export const SelectMenu = (props) => {
+export const SelectMenu = (props: MenuProps) => {
   return (
     <div data-testid="select-dropdown">
       <selectComponents.Menu {...props} />
@@ -47,7 +55,7 @@ export const SelectMenu = (props) => {
   );
 };
 
-export const SelectContainer = (props) => {
+export const SelectContainer = (props: ContainerProps) => {
   return (
     <div data-testid="select-container">
       <selectComponents.SelectContainer {...props} />
@@ -55,7 +63,7 @@ export const SelectContainer = (props) => {
   );
 };
 
-export const SelectInput = (props) => {
+export const SelectInput = (props: InputProps) => {
   return (
     <div data-testid="select-input">
       <selectComponents.Input {...props} />
diff --git a/src/Select/SelectOption.tsx b/src/Select/SelectOption.tsx
index 83087e149..0c8ed238d 100644
--- a/src/Select/SelectOption.tsx
+++ b/src/Select/SelectOption.tsx
@@ -6,13 +6,13 @@ import { subPx } from "../utils";
 import { ComponentSize, useComponentSize } from "../NDSProvider/ComponentSizeContext";
 import { stylesForSize } from "./customReactSelectStyles";
 
-type SelectOptionProps = {
+type StyledOptionProps = {
   isSelected: boolean;
   isFocused: boolean;
   size: ComponentSize;
 };
 
-export const StyledOption = styled.div<SelectOptionProps>(
+export const StyledOption = styled.div<StyledOptionProps>(
   typography,
   ({ isSelected, isFocused, theme }) => ({
     "&:last-child": {
@@ -51,11 +51,11 @@ export const StyledOption = styled.div<SelectOptionProps>(
     )
 );
 
-interface CustomOptionProps extends OptionProps {
+interface SelectOptionProps extends OptionProps {
   size?: ComponentSize;
 }
 
-export function SelectOption(props: CustomOptionProps) {
+export function SelectOption(props: SelectOptionProps) {
   const size = useComponentSize(props.size);
 
   return (