fix: Upgrade react-windowed-select

Author: jherdman

cypress/e2e/components/Select.spec.ts

@@ -176,5 +176,4 @@ describe("Select", () => {
       assertDropDownIsOpen();
     });
   });
-  describe("Knobs", () => {});
 });

package.json

@@ -160,7 +160,7 @@
     "react-popper": "1.3.11",
     "react-popper-2": "npm:[email protected]",
     "react-resize-detector": "^9.1.0",
-    "react-windowed-select": "2.0.5",
+    "react-windowed-select": "^5.2.0",
     "smoothscroll-polyfill": "^0.4.4",
     "react-select": "^5.8.0",
     "styled-system": "^5.1.4",

src/AsyncSelect/AsyncSelect.tsx

@@ -12,6 +12,7 @@ import { InlineValidation } from "../Validation";
 import customStyles from "../Select/customReactSelectStyles";
 import { SelectOption } from "../Select/SelectOption";
 import { getSubset } from "../utils/subset";
+import { ComponentSize, useComponentSize } from "../NDSProvider/ComponentSizeContext";
 import {
   SelectControl,
   SelectMultiValue,
@@ -25,6 +26,7 @@ import {
 type AsyncCustomProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = {
   autocomplete?: AsyncProps<Option, IsMulti, Group>["isSearchable"];
   labelText?: string;
+  size?: ComponentSize;
   requirementText?: string;
   helpText?: ReactNode;
   disabled?: AsyncProps<Option, IsMulti, Group>["isDisabled"];
@@ -36,7 +38,7 @@ type AsyncCustomProps<Option, IsMulti extends boolean, Group extends GroupBase<O
   defaultValue?: AsyncProps<Option, IsMulti, Group>["defaultInputValue"];
 };
 
-type AsyncSelectProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = Omit<
+export type AsyncSelectProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = Omit<
   AsyncProps<Option, IsMulti, Group>,
   "isSearchable" | "isDisabled" | "isMulti" | "defaultMenuIsOpen" | "defaultInputValue"
 > &
@@ -77,6 +79,7 @@ const AsyncSelect = forwardRef(
       defaultOptions,
       loadOptions,
       isClearable,
+      size,
       ...props
     }: AsyncSelectProps<Option, IsMulti, Group>,
     ref:
@@ -89,6 +92,8 @@ const AsyncSelect = forwardRef(
     const spaceProps = getSubset(props, propTypes.space);
     const error = !!(errorMessage || errorList);
 
+    const componentSize = useComponentSize(size);
+
     return (
       <Field {...spaceProps}>
         <MaybeFieldLabel labelText={labelText} requirementText={requirementText} helpText={helpText}>
@@ -100,15 +105,13 @@ const AsyncSelect = forwardRef(
             ref={ref}
             defaultInputValue={defaultValue}
             placeholder={placeholder || t("start typing")}
-            styles={
-              customStyles({
-                theme,
-                error,
-                maxHeight,
-                windowed: false,
-                hasDefaultOptions: Boolean(defaultOptions),
-              }) as any
-            }
+            styles={customStyles<Option, IsMulti, Group>({
+              theme,
+              error,
+              maxHeight,
+              windowed: false,
+              hasDefaultOptions: Boolean(defaultOptions),
+            })}
             isDisabled={disabled}
             isSearchable={autocomplete}
             aria-required={required}
@@ -127,7 +130,7 @@ const AsyncSelect = forwardRef(
             onInputChange={onInputChange}
             theme={theme as any}
             components={{
-              Option: SelectOption,
+              Option: (props) => <SelectOption size={componentSize} {...props} />,
               Control: SelectControl,
               MultiValue: SelectMultiValue,
               ClearIndicator: SelectClearIndicator,

src/Layout/Sidebar.story.tsx

@@ -12,9 +12,6 @@ import {
   PrimaryButton,
   Box,
   Textarea,
-  Text,
-  Flex,
-  Button,
   Heading3,
 } from "..";
 
@@ -435,7 +432,7 @@ export const WithDifferentWidths = () => {
       <Select
         value={width.value}
         options={options}
-        onChange={(s: string) => {
+        onChange={(s) => {
           const [option] = options.filter(({ value }) => value === s);
           setWidth(option);
         }}

src/Select/Select.spec-utils.js

@@ -0,0 +1,22 @@
+import { fireEvent, Matcher, SelectorMatcherOptions } from "@testing-library/react";
+
+type QueryByText = (id: Matcher, options?: SelectorMatcherOptions) => HTMLElement;
+
+export const openDropdown = (element: HTMLElement, i: number) => {
+  fireEvent.focus(element.querySelectorAll("input")[i]);
+
+  fireEvent.keyDown(element.querySelectorAll("input")[i], {
+    key: "ArrowDown",
+    code: 40,
+  });
+};
+
+export const selectOption = (optionText: string, container: HTMLElement, queryByText: QueryByText, i = 0) => {
+  expect(queryByText(optionText)).toBeNull();
+
+  openDropdown(container, i);
+
+  expect(queryByText(optionText)).not.toBeNull();
+
+  fireEvent.click(queryByText(optionText));
+};

src/Select/Select.spec-utils.ts

@@ -2,10 +2,11 @@ import React, { useEffect, useState, useRef } 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 { Box } from "../Box";
 import { Flex } from "../Flex";
-import { SelectProps } from "./Select";
+import { NDSSelectProps } from "./Select";
 
 const errorList = ["Error message 1", "Error message 2"];
 
@@ -60,7 +61,10 @@ const getPhotos = async () => {
   return results;
 };
 
-const SelectWithManyOptions = ({ multiselect, labelText, ...props }: SelectProps) => {
+const SelectWithManyOptions = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({
+  multiselect,
+  labelText,
+}: Pick<NDSSelectProps<Option, IsMulti, Group>, "multiselect" | "labelText">) => {
   const [photoList, setPhotoList] = useState([]);
 
   const setOptions = async () => {
@@ -72,46 +76,35 @@ const SelectWithManyOptions = ({ multiselect, labelText, ...props }: SelectProps
     setOptions();
   }, []);
 
-  return <Select multiselect={multiselect} options={photoList} labelText={labelText} {...props} />;
+  return <Select multiselect={multiselect} options={photoList} labelText={labelText} />;
 };
 
-type SelectWithStateProps = SelectProps & {
-  selectedValue: string;
-};
-
-class SelectWithState extends React.Component<{ selectedValue: string }, SelectWithStateProps> {
-  constructor(props) {
-    super(props);
-
-    this.state = { selectedValue: "" };
-    this.handleChange = this.handleChange.bind(this);
-    this.clearSelection = this.clearSelection.bind(this);
-  }
+function SelectWithState<Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
+  props: NDSSelectProps<Option, IsMulti, Group>
+) {
+  const [selectedValue, setSelectedValue] = useState("");
 
-  handleChange(selectedValue) {
-    this.setState({ selectedValue });
+  function handleChange(selectedValue) {
+    setSelectedValue(selectedValue);
   }
 
-  clearSelection() {
-    this.setState({ selectedValue: "" });
+  function clearSelection() {
+    setSelectedValue("");
   }
 
-  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>
-    );
-  }
+  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>
+  );
 }
 
 export default {
@@ -156,7 +149,7 @@ export const WithDifferentSizes = () => {
       <Heading2>Standard</Heading2>
       <Flex gap="x2" minHeight="360px">
         <Select
-          defaultMenuIsOpen
+          initialIsOpen
           placeholder="Please select inventory status"
           onChange={action("selection changed")}
           onBlur={action("blurred")}
@@ -166,7 +159,7 @@ export const WithDifferentSizes = () => {
         />
         <Select
           size="medium"
-          defaultMenuIsOpen
+          initialIsOpen
           placeholder="Please select inventory status"
           onChange={action("selection changed")}
           onBlur={action("blurred")}
@@ -176,7 +169,7 @@ export const WithDifferentSizes = () => {
         />
         <Select
           size="large"
-          defaultMenuIsOpen
+          initialIsOpen
           placeholder="Please select inventory status"
           onChange={action("selection changed")}
           onBlur={action("blurred")}
@@ -189,7 +182,7 @@ export const WithDifferentSizes = () => {
       <Heading2>Multi-select</Heading2>
       <Flex gap="x2" alignItems="flex-start">
         <Select
-          defaultMenuIsOpen
+          initialIsOpen
           defaultValue={[partnerCompanyName[0].value, partnerCompanyName[2].value]}
           noOptionsMessage={() => "No options"}
           placeholder="Please select inventory status"
@@ -199,7 +192,7 @@ export const WithDifferentSizes = () => {
         />
         <Select
           size="medium"
-          defaultMenuIsOpen
+          initialIsOpen
           defaultValue={[partnerCompanyName[0].value, partnerCompanyName[2].value]}
           noOptionsMessage={() => "No options"}
           placeholder="Please select inventory status"
@@ -209,7 +202,7 @@ export const WithDifferentSizes = () => {
         />
         <Select
           size="large"
-          defaultMenuIsOpen
+          initialIsOpen
           defaultValue={[partnerCompanyName[0].value, partnerCompanyName[2].value]}
           noOptionsMessage={() => "No options"}
           placeholder="Please select inventory status"
@@ -270,7 +263,6 @@ WithAnOptionSelected.story = {
 };
 
 export const WithState = () => (
-  // @ts-ignore
   <SelectWithState placeholder="Please select inventory status" options={options} labelText="Inventory status" />
 );
 
@@ -575,14 +567,18 @@ export const WithCustomOptionComponent = () => {
     height: "10px",
     marginRight: "5px",
   }));
-  const CustomOption = ({ children, ...props }) => {
+  const CustomOption = ({ children, ...props }: OptionProps) => {
     const newChildren = (
       <>
         <Indicator />
         {children}
       </>
     );
-    return <SelectOption {...props}>{newChildren}</SelectOption>;
+    return (
+      <SelectOption size="medium" {...props}>
+        {newChildren}
+      </SelectOption>
+    );
   };
   return (
     <>
@@ -631,6 +627,18 @@ export const UsingRefToControlFocus = () => {
   );
 };
 
+export const WithTopMenuPlacement = () => {
+  return (
+    <Flex height="100vh" alignItems="center" justifyContent="center">
+      <Select options={options} menuPlacement="top" />
+    </Flex>
+  );
+};
+
+UsingRefToControlFocus.story = {
+  name: "using ref to control focus",
+};
+
 const CustomOption = (props) => {
   return <SelectOption {...props}>{props.selectProps.myCustomProp}</SelectOption>;
 };
@@ -650,15 +658,3 @@ export const WithCustomProps = () => {
     </>
   );
 };
-
-export const WithTopMenuPlacement = () => {
-  return (
-    <Flex height="100vh" alignItems="center" justifyContent="center">
-      <Select options={options} menuPlacement="top" />
-    </Flex>
-  );
-};
-
-UsingRefToControlFocus.story = {
-  name: "using ref to control focus",
-};