From e8f220448ee1cb7730caff1458230b4a4585090f Mon Sep 17 00:00:00 2001
From: Haider Alshamma <haidera@nulogy.com>
Date: Wed, 15 May 2024 15:56:47 -0400
Subject: [PATCH] feat: remove react-windowed-select

---
 package.json                              |   7 +-
 src/AsyncSelect/AsyncSelect.tsx           |   1 -
 src/AsyncSelect/AsyncSelectComponents.tsx |   2 +-
 src/Select/Select.story.tsx               | 156 ++++++++++------------
 src/Select/Select.tsx                     | 128 ++++++++----------
 src/Select/SelectComponents.tsx           |  47 ++++---
 src/Select/SelectOption.tsx               |   5 +-
 src/Select/lib.ts                         |  52 ++++++++
 yarn.lock                                 |  20 +--
 9 files changed, 221 insertions(+), 197 deletions(-)
 create mode 100644 src/Select/lib.ts

diff --git a/package.json b/package.json
index 3da3f04cf..31b09f4f5 100644
--- a/package.json
+++ b/package.json
@@ -142,6 +142,7 @@
     "@nulogy/tokens": "^5.4.0",
     "@styled-system/prop-types": "^5.1.4",
     "@styled-system/theme-get": "^5.1.2",
+    "@types/styled-system": "5.1.22",
     "body-scroll-lock": "^3.1.5",
     "core-js": "3",
     "create-react-context": "^0.3.0",
@@ -160,11 +161,9 @@
     "react-popper": "1.3.11",
     "react-popper-2": "npm:react-popper@2.2.4",
     "react-resize-detector": "^9.1.0",
-    "react-windowed-select": "^5.2.0",
-    "smoothscroll-polyfill": "^0.4.4",
     "react-select": "^5.8.0",
-    "styled-system": "^5.1.4",
-    "@types/styled-system": "5.1.22"
+    "smoothscroll-polyfill": "^0.4.4",
+    "styled-system": "^5.1.4"
   },
   "husky": {
     "hooks": {
diff --git a/src/AsyncSelect/AsyncSelect.tsx b/src/AsyncSelect/AsyncSelect.tsx
index 34ffe9697..4b17faca8 100644
--- a/src/AsyncSelect/AsyncSelect.tsx
+++ b/src/AsyncSelect/AsyncSelect.tsx
@@ -128,7 +128,6 @@ const AsyncSelect = forwardRef(
             onMenuClose={onMenuClose}
             menuPosition={menuPosition}
             onInputChange={onInputChange}
-            theme={theme as any}
             components={{
               Option: (props) => (
                 <SelectOption size={componentSize} {...props}>
diff --git a/src/AsyncSelect/AsyncSelectComponents.tsx b/src/AsyncSelect/AsyncSelectComponents.tsx
index 4c8725b6c..8f13e47e6 100644
--- a/src/AsyncSelect/AsyncSelectComponents.tsx
+++ b/src/AsyncSelect/AsyncSelectComponents.tsx
@@ -10,7 +10,7 @@ import {
   MultiValueProps,
 } from "react-select";
 import { components, GroupBase } from "react-select";
-import { OptionProps } from "react-windowed-select";
+import { OptionProps } from "react-select";
 import { ComponentSize, useComponentSize } from "../NDSProvider/ComponentSizeContext";
 import { StyledOption } from "../Select/SelectOption";
 
diff --git a/src/Select/Select.story.tsx b/src/Select/Select.story.tsx
index 802904603..4920cbc5a 100644
--- a/src/Select/Select.story.tsx
+++ b/src/Select/Select.story.tsx
@@ -1,16 +1,17 @@
-import React, { useEffect, useState, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { action } from "@storybook/addon-actions";
 import styled from "styled-components";
-import { text, boolean, select } from "@storybook/addon-knobs";
-import { GroupBase, OptionProps } from "react-windowed-select";
-import { Button, Heading2, Select, SelectOption } from "../index";
+import { boolean, select, text } from "@storybook/addon-knobs";
+import { PropsValue } from "react-select";
 import { Box } from "../Box";
 import { Flex } from "../Flex";
-import { NDSSelectProps } from "./Select";
+import { Button, Heading2, SelectOption } from "../index";
+import Select, { NDSOption, NDSOptionValue, NDSSelectProps } from "./Select";
+import { SelectOptionProps } from "./SelectOption";
 
 const errorList = ["Error message 1", "Error message 2"];
 
-const options = [
+const options: NDSOption[] = [
   { value: "accepted", label: "Accepted" },
   { value: "assigned", label: "Assigned to a line" },
   { value: "hold", label: "On hold" },
@@ -54,17 +55,13 @@ const getPhotos = async () => {
   // returns 5000 items
   const data = await fetch("https://jsonplaceholder.typicode.com/photos");
   const json = await data.json();
-  const results = json.map(({ title, id }) => ({
+  return json.map(({ title, id }) => ({
     label: title,
     value: id,
   }));
-  return results;
 };
 
-const SelectWithManyOptions = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({
-  multiselect,
-  labelText,
-}: Pick<NDSSelectProps<Option, IsMulti, Group>, "multiselect" | "labelText">) => {
+const SelectWithManyOptions = ({ multiselect, labelText, ...props }: Partial<NDSSelectProps>) => {
   const [photoList, setPhotoList] = useState([]);
 
   const setOptions = async () => {
@@ -76,35 +73,46 @@ const SelectWithManyOptions = <Option, IsMulti extends boolean, Group extends Gr
     setOptions();
   }, []);
 
-  return <Select multiselect={multiselect} options={photoList} labelText={labelText} />;
+  return <Select multiselect={multiselect} options={photoList} labelText={labelText} {...props} />;
 };
 
-function SelectWithState<Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
-  props: NDSSelectProps<Option, IsMulti, Group>
-) {
-  const [selectedValue, setSelectedValue] = useState("");
+type SelectWithStateProps = NDSSelectProps & {
+  selectedValue: string;
+};
+
+class SelectWithState extends React.Component<SelectWithStateProps, { selectedValue: PropsValue<NDSOptionValue> }> {
+  constructor(props) {
+    super(props);
 
-  function handleChange(selectedValue) {
-    setSelectedValue(selectedValue);
+    this.state = { selectedValue: "" };
+    this.handleChange = this.handleChange.bind(this);
+    this.clearSelection = this.clearSelection.bind(this);
   }
 
-  function clearSelection() {
-    setSelectedValue("");
+  handleChange(selectedValue: PropsValue<NDSOptionValue>) {
+    this.setState({ selectedValue });
   }
 
-  return (
-    <Flex flexDirection="column" gap="x2" alignItems="flex-start">
-      <Select
-        className="Select"
-        classNamePrefix="SelectTest"
-        onChange={handleChange}
-        value={selectedValue}
-        options={options}
-        {...props}
-      />
-      <Button onClick={clearSelection}>Clear selection</Button>
-    </Flex>
-  );
+  clearSelection() {
+    this.setState({ selectedValue: "" });
+  }
+
+  render() {
+    const { selectedValue } = this.state;
+    return (
+      <Flex flexDirection="column" gap="x2" alignItems="flex-start">
+        <Select
+          className="Select"
+          classNamePrefix="SelectTest"
+          onChange={this.handleChange}
+          value={selectedValue}
+          options={options}
+          {...this.props}
+        />
+        <Button onClick={this.clearSelection}>Clear selection</Button>
+      </Flex>
+    );
+  }
 }
 
 export default {
@@ -120,7 +128,6 @@ export const _Select = () => (
     closeMenuOnSelect={boolean("closeMenuOnSelect", true)}
     disabled={boolean("disabled", false)}
     defaultValue={select("defaultValue", [undefined, ...options.map(({ value }) => value)], undefined)}
-    error={boolean("error", false)}
     errorMessage={text("errorMessage", "")}
     labelText={text("labelText", "Inventory Status")}
     helpText={text("helpText", undefined)}
@@ -149,7 +156,7 @@ export const WithDifferentSizes = () => {
       <Heading2>Standard</Heading2>
       <Flex gap="x2" minHeight="360px">
         <Select
-          initialIsOpen
+          defaultMenuIsOpen
           placeholder="Please select inventory status"
           onChange={action("selection changed")}
           onBlur={action("blurred")}
@@ -159,7 +166,7 @@ export const WithDifferentSizes = () => {
         />
         <Select
           size="medium"
-          initialIsOpen
+          defaultMenuIsOpen
           placeholder="Please select inventory status"
           onChange={action("selection changed")}
           onBlur={action("blurred")}
@@ -169,7 +176,7 @@ export const WithDifferentSizes = () => {
         />
         <Select
           size="large"
-          initialIsOpen
+          defaultMenuIsOpen
           placeholder="Please select inventory status"
           onChange={action("selection changed")}
           onBlur={action("blurred")}
@@ -182,7 +189,7 @@ export const WithDifferentSizes = () => {
       <Heading2>Multi-select</Heading2>
       <Flex gap="x2" alignItems="flex-start">
         <Select
-          initialIsOpen
+          defaultMenuIsOpen
           defaultValue={[partnerCompanyName[0].value, partnerCompanyName[2].value]}
           noOptionsMessage={() => "No options"}
           placeholder="Please select inventory status"
@@ -192,7 +199,7 @@ export const WithDifferentSizes = () => {
         />
         <Select
           size="medium"
-          initialIsOpen
+          defaultMenuIsOpen
           defaultValue={[partnerCompanyName[0].value, partnerCompanyName[2].value]}
           noOptionsMessage={() => "No options"}
           placeholder="Please select inventory status"
@@ -202,7 +209,7 @@ export const WithDifferentSizes = () => {
         />
         <Select
           size="large"
-          initialIsOpen
+          defaultMenuIsOpen
           defaultValue={[partnerCompanyName[0].value, partnerCompanyName[2].value]}
           noOptionsMessage={() => "No options"}
           placeholder="Please select inventory status"
@@ -263,7 +270,12 @@ WithAnOptionSelected.story = {
 };
 
 export const WithState = () => (
-  <SelectWithState placeholder="Please select inventory status" options={options} labelText="Inventory status" />
+  <SelectWithState
+    selectedValue="foo"
+    placeholder="Please select inventory status"
+    options={options}
+    labelText="Inventory status"
+  />
 );
 
 WithState.story = {
@@ -557,27 +569,27 @@ export const WithFetchedOptions = () => (
   </Box>
 );
 
-export const WithCustomOptionComponent = () => {
-  const Indicator = styled.span(() => ({
-    borderRadius: "25%",
-    background: "green",
-    lineHeight: "0",
-    display: "inline-block",
-    width: "10px",
-    height: "10px",
-    marginRight: "5px",
-  }));
-
-  const CustomOption = ({ children, ...props }: OptionProps) => {
-    const newChildren = (
-      <>
-        <Indicator />
-        {children}
-      </>
-    );
-    return <SelectOption {...props}>{newChildren}</SelectOption>;
-  };
+const Indicator = styled.span(() => ({
+  borderRadius: "25%",
+  background: "green",
+  lineHeight: "0",
+  display: "inline-block",
+  width: "10px",
+  height: "10px",
+  marginRight: "5px",
+}));
+
+const CustomOption = ({ children, ...props }: SelectOptionProps) => {
+  const newChildren = (
+    <>
+      <Indicator />
+      {children}
+    </>
+  );
+  return <SelectOption {...props}>{newChildren}</SelectOption>;
+};
 
+export const WithCustomOptionComponent = () => {
   return (
     <>
       <Box position="relative" overflow="hidden" width="300px" height="600px">
@@ -636,23 +648,3 @@ export const WithTopMenuPlacement = () => {
 UsingRefToControlFocus.story = {
   name: "using ref to control focus",
 };
-
-const CustomOption = (props) => {
-  return <SelectOption {...props}>{props.selectProps.myCustomProp}</SelectOption>;
-};
-
-const CustomSingleValue = ({ innerProps, ...props }) => {
-  return <div {...innerProps}>{props.selectProps.myCustomProp}</div>;
-};
-
-export const WithCustomProps = () => {
-  return (
-    <>
-      <Select
-        options={[{ value: "accepted", label: "Accepted" }]}
-        myCustomProp="custom prop value"
-        components={{ Option: CustomOption, SingleValue: CustomSingleValue }}
-      />
-    </>
-  );
-};
diff --git a/src/Select/Select.tsx b/src/Select/Select.tsx
index dd3122103..c19059eef 100644
--- a/src/Select/Select.tsx
+++ b/src/Select/Select.tsx
@@ -1,7 +1,7 @@
 import React, { forwardRef, ReactNode, MutableRefObject } from "react";
 import Select from "react-select/base";
-import WindowedSelect from "react-windowed-select";
-import type { Props as SelectProps } from "react-select";
+import ReactSelect, { PropsValue } from "react-select";
+import type { GroupBase, Props } from "react-select";
 import { useTranslation } from "react-i18next";
 import { useTheme } from "styled-components";
 import propTypes from "@styled-system/prop-types";
@@ -12,49 +12,55 @@ import customStyles from "../Select/customReactSelectStyles";
 import { getSubset } from "../utils/subset";
 import { ComponentSize, useComponentSize } from "../NDSProvider/ComponentSizeContext";
 import {
+  SelectControl,
   SelectMultiValue,
   SelectClearIndicator,
   SelectContainer,
   SelectInput,
   SelectDropdownIndicator,
   SelectMenu,
-  SelectControl,
-} from "./SelectComponents";
-import { SelectOption } from "./SelectOption";
-import { checkOptionsAreValid, getReactSelectValue } from "./lib";
+  SelectOption,
+} from "../AsyncSelect/AsyncSelectComponents";
+import { checkOptionsAreValid, extractValue, getReactSelectValue } from "./lib";
+
+export type NDSOptionValue = string | number | boolean | null;
 
-interface WindowedSelectProps extends SelectProps {
-  windowThreshold: number;
+export interface NDSOption {
+  label: string;
+  value: NDSOptionValue;
 }
 
-type CustomProps = {
-  autocomplete?: WindowedSelectProps["isSearchable"];
+type CustomProps<IsMulti extends boolean, Group extends GroupBase<NDSOption>> = {
+  autocomplete?: Props<NDSOption, IsMulti, Group>["isSearchable"];
   labelText?: string;
   size?: ComponentSize;
   requirementText?: string;
   helpText?: ReactNode;
-  disabled?: WindowedSelectProps["isDisabled"];
+  disabled?: Props<NDSOption, IsMulti, Group>["isDisabled"];
   errorMessage?: string;
   errorList?: string[];
-  initialIsOpen?: WindowedSelectProps["defaultMenuIsOpen"];
-  multiselect?: WindowedSelectProps["isMulti"];
+  initialIsOpen?: Props<NDSOption, IsMulti, Group>["defaultMenuIsOpen"];
+  multiselect?: Props<NDSOption, IsMulti, Group>["isMulti"];
   maxHeight?: string;
-  defaultValue?: WindowedSelectProps["defaultInputValue"];
-  value?: string;
+  defaultValue?: PropsValue<NDSOptionValue>;
+  value?: PropsValue<NDSOptionValue>;
+  options: NDSOption[];
+  onChange?: (newValue: PropsValue<NDSOptionValue>) => void;
+  windowThreshold?: number;
 };
 
-export type NDSSelectProps = Omit<
-  WindowedSelectProps,
-  "isSearchable" | "isDisabled" | "isMulti" | "defaultMenuIsOpen" | "defaultInputValue" | "value"
-> &
-  CustomProps;
+export type NDSSelectProps<
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<NDSOption> = GroupBase<NDSOption>
+> = Omit<Props<NDSOption, IsMulti, Group>, keyof CustomProps<IsMulti, Group>> & CustomProps<IsMulti, Group>;
 
 const NDSSelect = forwardRef(
-  (
+  <IsMulti extends boolean = boolean, Group extends GroupBase<NDSOption> = GroupBase<NDSOption>>(
     {
-      size,
       autocomplete,
-      options,
+      value,
+      onChange,
+      defaultValue,
       labelText,
       required,
       requirementText,
@@ -65,35 +71,24 @@ const NDSSelect = forwardRef(
       id,
       initialIsOpen,
       maxHeight,
-      isClearable,
-      onChange,
       multiselect,
       placeholder,
-      value,
-      defaultValue,
-      noOptionsMessage,
-      menuPosition,
-      name,
-      className,
-      classNamePrefix,
-      onBlur,
-      menuIsOpen,
-      onMenuOpen,
-      onMenuClose,
-      onInputChange,
       components,
-      "aria-label": ariaLabel,
-      windowThreshold = 100,
+      size,
+      windowThreshold,
+      options,
       ...props
-    }: NDSSelectProps,
-    ref: ((instance: Select | null) => void) | MutableRefObject<Select | null> | null
+    }: NDSSelectProps<IsMulti, Group>,
+    ref:
+      | ((instance: Select<NDSOption, IsMulti, Group> | null) => void)
+      | MutableRefObject<Select<NDSOption, IsMulti, Group> | 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(() => {
@@ -104,38 +99,34 @@ const NDSSelect = forwardRef(
     return (
       <Field {...spaceProps}>
         <MaybeFieldLabel labelText={labelText} requirementText={requirementText} helpText={helpText}>
-          <WindowedSelect
-            windowThreshold={windowThreshold}
-            className={className}
-            classNamePrefix={classNamePrefix}
-            noOptionsMessage={noOptionsMessage}
+          <ReactSelect
+            ref={ref}
+            isSearchable={autocomplete}
+            isDisabled={disabled}
+            defaultMenuIsOpen={initialIsOpen}
+            isMulti={multiselect}
             defaultValue={getReactSelectValue(options, defaultValue)}
             value={getReactSelectValue(options, value)}
-            ref={ref}
-            placeholder={placeholder || t("start typing")}
-            styles={customStyles({
-              theme,
-              error,
-              maxHeight,
-              windowed: options.length > windowThreshold,
-            })}
             options={options}
-            isDisabled={disabled}
-            isSearchable={autocomplete}
+            onChange={(newValue) => {
+              if (!onChange) return;
+
+              const value = extractValue(newValue, multiselect);
+              onChange(value);
+            }}
+            // windowThreshold={windowThreshold}
+            placeholder={placeholder || t("start typing")}
             aria-required={required}
             required={required}
             aria-invalid={error}
-            defaultMenuIsOpen={initialIsOpen}
             inputId={id}
-            onBlur={onBlur}
-            onChange={onChange}
-            name={name}
-            isMulti={multiselect}
-            menuIsOpen={menuIsOpen}
-            onMenuOpen={onMenuOpen}
-            onMenuClose={onMenuClose}
-            menuPosition={menuPosition}
-            onInputChange={onInputChange}
+            styles={customStyles<NDSOption, IsMulti, Group>({
+              theme: theme,
+              error,
+              maxHeight,
+              size: componentSize,
+              windowed: options.length > windowThreshold,
+            })}
             components={{
               Option: (props) => (
                 <SelectOption size={componentSize} {...props}>
@@ -151,8 +142,7 @@ const NDSSelect = forwardRef(
               Input: SelectInput,
               ...components,
             }}
-            aria-label={ariaLabel}
-            isClearable={isClearable}
+            {...props}
           />
           <InlineValidation mt="x1" errorMessage={errorMessage} errorList={errorList} />
         </MaybeFieldLabel>
diff --git a/src/Select/SelectComponents.tsx b/src/Select/SelectComponents.tsx
index 13fa5ebe3..ef7f1a8ae 100644
--- a/src/Select/SelectComponents.tsx
+++ b/src/Select/SelectComponents.tsx
@@ -8,9 +8,10 @@ import {
   MenuProps,
   MultiValueProps,
   components as selectComponents,
-} from "react-windowed-select";
+} from "react-select";
+import { NDSOption } from "./Select";
 
-export const SelectControl = (props: ControlProps) => {
+export function SelectControl<IsMulti extends boolean = boolean>(props: ControlProps<NDSOption, IsMulti>) {
   const { isFocused } = props;
   return (
     <div data-testid="select-control">
@@ -18,55 +19,61 @@ export const SelectControl = (props: ControlProps) => {
         className={isFocused ? "nds-select--is-focused" : null}
         isFocused={isFocused}
         {...props}
-      />
+      >
+        {props.children}
+      </selectComponents.Control>
     </div>
   );
-};
+}
 
-export const SelectMultiValue = (props: MultiValueProps) => {
+export function SelectMultiValue<IsMulti extends boolean = boolean>(props: MultiValueProps<NDSOption, IsMulti>) {
   return (
     <div data-testid="select-multivalue">
-      <selectComponents.MultiValue {...props} />
+      <selectComponents.MultiValue {...props}>{props.children}</selectComponents.MultiValue>
     </div>
   );
-};
+}
 
-export const SelectClearIndicator = (props: ClearIndicatorProps) => {
+export function SelectClearIndicator<IsMulti extends boolean = boolean>(
+  props: ClearIndicatorProps<NDSOption, IsMulti>
+) {
   return (
     <div data-testid="select-clear">
       <selectComponents.ClearIndicator {...props} />
     </div>
   );
-};
+}
 
-export const SelectDropdownIndicator = (props: DropdownIndicatorProps) => {
+export function SelectDropdownIndicator<IsMulti extends boolean = boolean>(
+  props: DropdownIndicatorProps<NDSOption, IsMulti>
+) {
   return (
     <div data-testid="select-arrow">
       <selectComponents.DropdownIndicator {...props} />
     </div>
   );
-};
+}
 
-export const SelectMenu = (props: MenuProps) => {
+export function SelectMenu<IsMulti extends boolean = boolean>(props: MenuProps<NDSOption, IsMulti>) {
   return (
     <div data-testid="select-dropdown">
-      <selectComponents.Menu {...props} />
+      <selectComponents.Menu {...props}>{props.children}</selectComponents.Menu>
     </div>
   );
-};
+}
 
-export const SelectContainer = (props: ContainerProps) => {
+export function SelectContainer<IsMulti extends boolean = boolean>(props: ContainerProps<NDSOption, IsMulti>) {
   return (
     <div data-testid="select-container">
-      <selectComponents.SelectContainer {...props} />
+      <selectComponents.SelectContainer {...props}>{props.children}</selectComponents.SelectContainer>
     </div>
   );
-};
+}
 
-export const SelectInput = (props: InputProps) => {
+export function SelectInput<IsMulti extends boolean = boolean>(props: InputProps<NDSOption, IsMulti>) {
   return (
     <div data-testid="select-input">
-      <selectComponents.Input {...props} />
+      <selectComponents.Input {...props}>{props.children}</selectComponents.Input>
     </div>
   );
-};
+}
diff --git a/src/Select/SelectOption.tsx b/src/Select/SelectOption.tsx
index 0c8ed238d..b233d34f1 100644
--- a/src/Select/SelectOption.tsx
+++ b/src/Select/SelectOption.tsx
@@ -1,10 +1,11 @@
 import React from "react";
 import styled from "styled-components";
-import { components, OptionProps } from "react-windowed-select";
+import { components, OptionProps } from "react-select";
 import { typography } from "styled-system";
 import { subPx } from "../utils";
 import { ComponentSize, useComponentSize } from "../NDSProvider/ComponentSizeContext";
 import { stylesForSize } from "./customReactSelectStyles";
+import { NDSOption } from "./Select";
 
 type StyledOptionProps = {
   isSelected: boolean;
@@ -51,7 +52,7 @@ export const StyledOption = styled.div<StyledOptionProps>(
     )
 );
 
-interface SelectOptionProps extends OptionProps {
+export interface SelectOptionProps<IsMulti extends boolean = boolean> extends OptionProps<NDSOption, IsMulti> {
   size?: ComponentSize;
 }
 
diff --git a/src/Select/lib.ts b/src/Select/lib.ts
new file mode 100644
index 000000000..2c9ed79c5
--- /dev/null
+++ b/src/Select/lib.ts
@@ -0,0 +1,52 @@
+import { Options, PropsValue } from "react-select";
+import { NDSOption, NDSOptionValue } from "./Select";
+
+export function checkOptionsAreValid(options: Options<NDSOption>) {
+  if (options && process.env.NODE_ENV === "development") {
+    const uniq = (a: unknown[]) => Array.from(new Set(a));
+
+    const uniqueValues = uniq(options.map(({ value }) => (value === null ? "_null_" : value)));
+
+    if (uniqueValues.length < options.length) {
+      console.warn("NDS: The options prop passed to Select must have unique values for each option", options);
+    }
+  }
+}
+
+export function getOption(options: Options<NDSOption>, value: PropsValue<NDSOptionValue>) {
+  if (Array.isArray(value)) {
+    return value.map((o) => getOption(options, o));
+  }
+
+  if (options.length > 0 && value !== undefined) {
+    return options.find((o) => o.value === value) ?? null;
+  }
+
+  return value;
+}
+
+export function getReactSelectValue(options: Options<NDSOption>, input: PropsValue<NDSOptionValue>) {
+  if (Array.isArray(input)) {
+    return input.map((i) => getOption(options, i));
+  }
+  return getOption(options, input);
+}
+
+export function extractValue(
+  options: Options<NDSOption> | NDSOption,
+  isMulti: boolean
+): NDSOptionValue[] | NDSOptionValue {
+  if (options === null) {
+    return null;
+  }
+
+  if (!Array.isArray(options)) {
+    return (options as NDSOption).value;
+  }
+
+  if (isMulti) {
+    return options && options.length ? options.map((o) => o.value) : [];
+  }
+
+  throw new Error("UNEXPECTED ERROR: don't forget to enable isMulti");
+}
diff --git a/yarn.lock b/yarn.lock
index d744962da..e5414de47 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14069,7 +14069,7 @@ memfs@^3.1.2:
   dependencies:
     fs-monkey "1.0.3"
 
-"memoize-one@>=3.1.1 <6", memoize-one@^5.0.0:
+memoize-one@^5.0.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
   integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
@@ -16987,7 +16987,7 @@ react-select@^3.2.0:
     react-input-autosize "^3.0.0"
     react-transition-group "^4.3.0"
 
-react-select@^5.2.2, react-select@^5.8.0:
+react-select@^5.8.0:
   version "5.8.0"
   resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.8.0.tgz#bd5c467a4df223f079dd720be9498076a3f085b5"
   integrity sha512-TfjLDo58XrhP6VG5M/Mi56Us0Yt8X7xD6cDybC7yoRMUNm7BGO7qk8J0TLQOua/prb8vUOtsfnXZwfm30HGsAA==
@@ -17070,22 +17070,6 @@ react-transition-group@^4.3.0:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react-window@^1.8.6:
-  version "1.8.10"
-  resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.10.tgz#9e6b08548316814b443f7002b1cf8fd3a1bdde03"
-  integrity sha512-Y0Cx+dnU6NLa5/EvoHukUD0BklJ8qITCtVEPY1C/nL8wwoZ0b5aEw8Ff1dOVHw7fCzMt55XfJDd8S8W8LCaUCg==
-  dependencies:
-    "@babel/runtime" "^7.0.0"
-    memoize-one ">=3.1.1 <6"
-
-react-windowed-select@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/react-windowed-select/-/react-windowed-select-5.2.0.tgz#367916ded1ed492ab8319b614681d914ace54388"
-  integrity sha512-NOdkFj3GKjIdSQicPITjvIMzu2y75JIoCAB1CPiMiRfbLCQRwaf5rH6n4EdP38KpDrv6R2Vt8bVo3PUoB+RspA==
-  dependencies:
-    react-select "^5.2.2"
-    react-window "^1.8.6"
-
 react@17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"