From 0dca21a8d79de69c83d3968e34ba0ae6e6c7f11b Mon Sep 17 00:00:00 2001
From: marco <marco@glints.com>
Date: Tue, 16 Feb 2021 15:15:14 +0800
Subject: [PATCH] Select: Implement new Select based on Downshift

---
 package.json                                  |   2 +
 src/General/Loading/Loading.tsx               |   2 +-
 src/Input/DownshiftSelect/Select.stories.tsx  | 521 ++++++++++
 src/Input/DownshiftSelect/Select.test.tsx     | 402 ++++++++
 src/Input/DownshiftSelect/Select.tsx          | 357 +++++++
 src/Input/DownshiftSelect/SelectStyle.ts      | 165 +++
 .../__snapshots__/Select.test.tsx.snap        | 942 ++++++++++++++++++
 yarn.lock                                     |  22 +-
 8 files changed, 2411 insertions(+), 2 deletions(-)
 create mode 100644 src/Input/DownshiftSelect/Select.stories.tsx
 create mode 100644 src/Input/DownshiftSelect/Select.test.tsx
 create mode 100644 src/Input/DownshiftSelect/Select.tsx
 create mode 100644 src/Input/DownshiftSelect/SelectStyle.ts
 create mode 100644 src/Input/DownshiftSelect/__snapshots__/Select.test.tsx.snap

diff --git a/package.json b/package.json
index 85d9521ba..1bba9ef1d 100644
--- a/package.json
+++ b/package.json
@@ -124,7 +124,9 @@
     "body-scroll-lock": "^3.1.5",
     "classnames": "^2.2.6",
     "create-react-context": "^0.2.3",
+    "downshift": "^6.1.0",
     "moment": "^2.24.0",
+    "react-id-generator": "^3.0.1",
     "styled-system": "^5.1.5"
   },
   "peerDependencies": {
diff --git a/src/General/Loading/Loading.tsx b/src/General/Loading/Loading.tsx
index 89ea7caae..474a37ebe 100644
--- a/src/General/Loading/Loading.tsx
+++ b/src/General/Loading/Loading.tsx
@@ -8,10 +8,10 @@ export const Loading: FC<Props> = props => {
 
   return (
     <LoadingContainer
+      data-testid="alert"
       {...props}
       className={classNames('aries-loading', className)}
       role="alert"
-      data-testid="alert"
       aria-busy="true"
       aria-live="polite"
     >
diff --git a/src/Input/DownshiftSelect/Select.stories.tsx b/src/Input/DownshiftSelect/Select.stories.tsx
new file mode 100644
index 000000000..8aecdc7e9
--- /dev/null
+++ b/src/Input/DownshiftSelect/Select.stories.tsx
@@ -0,0 +1,521 @@
+import React, { useState } from 'react';
+import { Story, Meta } from '@storybook/react';
+import { Select, Props, ItemProps, Item } from './Select';
+import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
+import styled from 'styled-components';
+
+import * as Components from './SelectStyle';
+import { SecondaryColor } from '../../Utils/Colors';
+import { Button } from '../../General/Button/Button';
+import { Box } from '../../Layout/Box';
+import { identity, sample, sampleSize } from 'lodash';
+import { TextField } from '../..';
+
+const StoryContainer = styled(BaseContainer)`
+  min-height: 250px;
+`;
+
+export default {
+  title: 'Input/NewSelect',
+
+  component: Select,
+  argTypes: {
+    components: {
+      control: null,
+    },
+    transformFunction: {
+      control: null,
+    },
+    items: {
+      control: null,
+    },
+    downshift: {
+      control: null,
+    },
+    selectedItem: {
+      control: null,
+    },
+    inputValue: {
+      control: null,
+    },
+    onInputValueChange: {
+      control: null,
+    },
+  },
+  decorators: [Story => <StoryContainer>{Story()}</StoryContainer>],
+} as Meta;
+
+const items: Item[] = [
+  'Software Engineer',
+  'Software Tester',
+  'Back-end Engineer',
+  'Front-end Engineer',
+].map(label => ({ value: label, label }));
+
+const componentNames = Object.keys(Components).filter(
+  name => !name.startsWith('_')
+);
+
+const CustomLabel = styled.label`
+  color: green;
+`;
+
+const CustomStyledItem = styled(Select.Components.Item)`
+  display: flex;
+  justify-content: space-between;
+  &[aria-selected='true'] {
+    color: ${SecondaryColor.darkgreen};
+  }
+`;
+
+const CustomItem: React.FC<ItemProps> = props => {
+  return (
+    <CustomStyledItem {...props}>
+      <span>{props.children}</span>
+      <code>{JSON.stringify(props.item)}</code>
+    </CustomStyledItem>
+  );
+};
+
+const Template: Story<Props> = args => (
+  <Select
+    items={items}
+    {...args}
+    inputValue={undefined}
+    onInputValueChange={undefined}
+    onClear={undefined}
+    onIsOpenChange={undefined}
+    onSelectedItemChange={undefined}
+  />
+);
+
+export const Interactive = Template.bind({});
+Interactive.args = { label: 'Select An Item', helperText: 'Type to filter' };
+Interactive.parameters = {
+  docs: {
+    description: {
+      story: `You can pass a transformFunction to make the combobox filter the provided items according to custom logic. In the example above, the filter function uses <code>String.includes</code> instead of the default <code>String.startsWith</code>.`,
+    },
+  },
+};
+
+export const RealisticExample: Story<Props> = () => {
+  const [selectedItem, setSelectedItem] = useState<Item>();
+  return (
+    <>
+      <Select
+        label="Select a Job"
+        items={items}
+        selectedItem={selectedItem}
+        onSelectedItemChange={item => setSelectedItem(item)}
+      />
+      <Box mt={16}>
+        Selected Job: {selectedItem ? selectedItem.label : 'none'}
+      </Box>
+    </>
+  );
+};
+RealisticExample.parameters = {
+  docs: {
+    description: {
+      story:
+        'The Select is built with async items in mind. Just update the items at any time.',
+    },
+  },
+};
+
+export const TransformFunctionForCustomFilter = Template.bind({});
+TransformFunctionForCustomFilter.args = {
+  transformFunction: (items: Item[], inputValue: string) =>
+    items.filter(item =>
+      item.label.toLowerCase().includes(inputValue.toLowerCase())
+    ),
+};
+TransformFunctionForCustomFilter.parameters = {
+  docs: {
+    description: {
+      story: `You can pass a transformFunction to make the combobox filter the provided items according to custom logic. In the example above, the filter function uses <code>String.includes</code> instead of the default <code>String.startsWith</code>.`,
+    },
+  },
+};
+
+export const TransformFunctionForNoFilter = Template.bind({});
+TransformFunctionForNoFilter.args = {
+  transformFunction: (items: Item[]) => items,
+};
+TransformFunctionForNoFilter.parameters = {
+  docs: {
+    description: {
+      story: `You can pass an identity function as transformFunction to disable filtering (useful if you are controlling the items in an external state).`,
+    },
+  },
+};
+
+export const CustomComponents = Template.bind({});
+CustomComponents.args = {
+  components: { Label: CustomLabel, Item: CustomItem },
+};
+CustomComponents.parameters = {
+  docs: {
+    description: {
+      story: `You can override the components that comprise the Combobox. These components are available at the moment: ${componentNames.map(
+        name => `<code>${name}</code>`
+      )}`,
+    },
+  },
+};
+
+export const RemoveToggleButton = Template.bind({});
+RemoveToggleButton.args = {
+  components: { ToggleButton: () => null as React.FC },
+};
+RemoveToggleButton.parameters = {
+  docs: {
+    description: {
+      story:
+        'Remove the toggle button by passing <code>components={{ ToggleButton: () => null }}</code>',
+    },
+  },
+};
+
+export const LoadingState = Template.bind({});
+LoadingState.args = {
+  isLoading: true,
+};
+
+export const InitiallyOpen = Template.bind({});
+InitiallyOpen.args = {
+  isOpenInitially: false,
+};
+InitiallyOpen.parameters = {
+  docs: {
+    description: {
+      story:
+        'Pass <code>isOpenInitially=true</code> to open and focus the Select on render. (Set to <code>false</code> in this story because it would steal focus from the other stories otherwise).',
+    },
+  },
+};
+
+export const HelperText = Template.bind({});
+HelperText.args = {
+  helperText: 'I am helpful text',
+};
+
+export const Placeholder = Template.bind({});
+Placeholder.args = {
+  placeholder: 'I am placeholder',
+};
+
+export const Label = Template.bind({});
+Label.args = {
+  label: 'I am label',
+};
+
+export const DownshiftOptions = Template.bind({});
+DownshiftOptions.args = {
+  downshift: {
+    defaultHighlightedIndex: 2,
+  },
+};
+DownshiftOptions.parameters = {
+  docs: {
+    description: {
+      story:
+        'If the options afforded by the Select component are not enough, you can also use the <code>downshift</code> prop to pass custom options to the internal <code>useCombobox</code> hook. You can read the documentation <a href="https://github.com/downshift-js/downshift/blob/master/src/hooks/useCombobox/README.md">here</a>. Use this with caution, future versions of this component might break your custom functionality.',
+    },
+  },
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+  label: 'Select An Option',
+  placeholder: 'I am placeholder',
+  helperText: 'I am helper text',
+};
+
+export const DisableTyping = Template.bind({});
+DisableTyping.args = {
+  disableTyping: true,
+  transformFunction: identity,
+};
+DisableTyping.parameters = {
+  docs: {
+    description: {
+      story:
+        "With <code>disableTyping=true</code>, the internal <code>input</code> will be set to <code>readonly</code>. This is helpful when there's only a small or fixed amount of items. This can be combined with setting <code>transformFunction</code> to the identity function to disable the filtering after an option has been chosen.",
+    },
+  },
+};
+
+export const DisabledOptions = Template.bind({});
+DisabledOptions.args = {
+  items: items.map((item, index) => ({ ...item, disabled: index % 2 === 1 })),
+};
+DisabledOptions.parameters = {
+  docs: {
+    description: {
+      story:
+        "Use the items' <code>disabled</code> prop to disable individual items.",
+    },
+  },
+};
+
+export const ControlledSelectedItem: Story<Props> = () => {
+  const [selectedItem, setSelectedItem] = useState<Item>();
+  return (
+    <>
+      <Box mb={8}>
+        <Button
+          variant="solid-blue"
+          onClick={() => setSelectedItem(sample(items))}
+        >
+          Select Random Item
+        </Button>
+        &nbsp;&nbsp;
+        {selectedItem
+          ? `Selected item is ${selectedItem.label}`
+          : 'No item selected'}
+      </Box>
+      <Select
+        items={items}
+        selectedItem={selectedItem}
+        onSelectedItemChange={(item: Item) => setSelectedItem(item)}
+      />
+    </>
+  );
+};
+ControlledSelectedItem.parameters = {
+  docs: {
+    description: {
+      story:
+        "Use <code>selectedItem</code> and <code>setSelectedItem</code> to control the currently selected item. <strong>In many cases, you will want to use this to react to selections made by the user.</strong> Unfortunately, if you're doing this , at the moment there is no way to reset the Select externally.",
+    },
+  },
+};
+
+export const ControlledIsOpen: Story<Props> = () => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  return (
+    <>
+      <Box mb={8}>
+        <Button variant="solid-blue" onClick={() => setIsOpen(true)}>
+          Open Select
+        </Button>
+        &nbsp;&nbsp;Select is {isOpen ? 'open' : 'closed'}
+      </Box>
+      <Select
+        items={items}
+        isOpen={isOpen}
+        onIsOpenChange={(newState: boolean) => setIsOpen(newState)}
+      />
+    </>
+  );
+};
+ControlledIsOpen.parameters = {
+  docs: {
+    description: {
+      story:
+        "Use <code>isOpen</code> and <code>onIsOpenChange</code> to control the state of the Select's menu. Note that clicking outside of the Select closes the select (calls <code>onIsOpenChange</code> with <code>false</code>) so if you're trying to build a 'toggle' button, clicking that button will first close the menu.",
+    },
+  },
+};
+
+export const ControlledInputValue: Story<Props> = () => {
+  const [inputValue, setInputValue] = useState<string>('');
+  return (
+    <>
+      <Box mb={8}>
+        <TextField
+          value={inputValue}
+          onChange={(e: any) => setInputValue(e.target.value)}
+        />
+      </Box>
+      <Box mb={8}>
+        Input value is <code>{JSON.stringify(inputValue)}</code>
+      </Box>
+      <Select
+        items={items}
+        inputValue={inputValue}
+        onInputValueChange={(inputValue: string) => setInputValue(inputValue)}
+      />
+    </>
+  );
+};
+ControlledInputValue.parameters = {
+  docs: {
+    description: {
+      story:
+        "Use <code>inputValue</code> and <code>setInputValue</code> to control the input value (this value is used for the search function, don't confuse it with <code>selectedItem</code>",
+    },
+  },
+};
+
+export const Invalid = Template.bind({});
+Invalid.args = {
+  label: 'Username',
+  invalid: true,
+  helperText: 'Username is required',
+};
+Invalid.parameters = {
+  docs: {
+    description: {
+      story:
+        'Use <code>invalid=true</code> to toggle the Select into an error state. It is recommended that you use <code>helperText</code> to describe the error when you do this.',
+    },
+  },
+};
+
+export const DisableAutocomplete = Template.bind({});
+DisableAutocomplete.args = {
+  autocomplete: 'off',
+};
+DisableAutocomplete.parameters = {
+  docs: {
+    description: {
+      story:
+        "Intrinsic props are usually passed down to the internal <code>input</code> element, so to disable autocompletion just pass <code>autocomplete='off'</code>.",
+    },
+  },
+};
+
+export const FocusCallbacks: Story<Props> = () => {
+  const [onFocusCalls, setOnFocusCalls] = useState<number>(0);
+  const [onBlurCalls, setOnBlurCalls] = useState<number>(0);
+  return (
+    <>
+      <Box mb={8}>
+        <code>onFocus</code> called {onFocusCalls} times.
+      </Box>
+      <Box mb={8}>
+        <code>onBlur</code> called {onBlurCalls} times.
+      </Box>
+      <Select
+        items={items}
+        data-test="foo"
+        onFocus={() => setOnFocusCalls(onFocusCalls + 1)}
+        onBlur={() => setOnBlurCalls(onBlurCalls + 1)}
+      />
+    </>
+  );
+};
+FocusCallbacks.parameters = {
+  docs: {
+    description: {
+      story:
+        'Intrinsic props are usually passed down to the internal <code>input</code> element, so you can simply use <code>onFocus</code> and <code>onBlur</code> to capture those events.',
+    },
+  },
+};
+
+export const OnClearCallback: Story<Props> = () => {
+  const [onClearCalls, setOnClearCalls] = useState<number>(0);
+  return (
+    <>
+      <Box mb={8}>
+        <code>onClear</code> called {onClearCalls} times.
+      </Box>
+      <Select items={items} onClear={() => setOnClearCalls(onClearCalls + 1)} />
+    </>
+  );
+};
+OnClearCallback.parameters = {
+  docs: {
+    description: {
+      story:
+        'Use <code>onClear</code> to capture the when the clear-button is clicked.',
+    },
+  },
+};
+
+const ShortContainer = styled(Select.Components.Container)`
+  max-width: 280px;
+`;
+
+export const ConfigurableWidth = Template.bind({});
+ConfigurableWidth.args = {
+  components: { Container: ShortContainer },
+  items: [
+    ...items,
+    {
+      ...items[0],
+      label: "This Option Is Long! I Hope It Doesn't Get Truncated!",
+    },
+  ],
+};
+ConfigurableWidth.parameters = {
+  docs: {
+    description: {
+      story:
+        "By default, the select has a 100% width. To change the width, just pass a custom <code>Container</code> subcomponent. Note that you might also have to adjust other subcomponent's styles if you want to make it really short (less than 300px).",
+    },
+  },
+};
+
+const SmallContainer = styled(Select.Components.Container)`
+  max-width: 200px;
+  font-size: 11px;
+`;
+
+export const Small = Template.bind({});
+Small.args = {
+  label: "I'm so small!",
+  placeholder: 'Try typing here :-P',
+  components: { Container: SmallContainer },
+  helperText: 'Why would you do this to me?',
+};
+Small.parameters = {
+  docs: {
+    description: {
+      story:
+        "<p>By default, the Select dictates a font-size of 16px that cascades through (almost) all sub-components. Appropriate spaces are defined using <code>em</code>, so if you want to resize the Select, just change the container's font-size.</p><p>The exception to the 16px default is the helper text, which also just uses an <code>em</code> relative value.</p>",
+    },
+  },
+};
+
+const StyledEmptyList = styled(Select.Components.EmptyList)`
+  display: flex;
+  justify-content: center;
+  color: green;
+`;
+
+export const EmptyListText = Template.bind({});
+EmptyListText.args = {
+  emptyListText: '¯\\_(ツ)_/¯',
+  components: {
+    EmptyList: StyledEmptyList,
+  },
+};
+EmptyListText.parameters = {
+  docs: {
+    description: {
+      story:
+        'When, after applying the <code>transformFunction</code> the list of items is empty, a special message will be shown in the dropdown. This message can be customized with <code>emptyListText</code>. You can also style this',
+    },
+  },
+};
+
+export const AsyncItems: Story<Props> = () => {
+  const [sampleItems, setSampleItems] = useState<Item[]>(sampleSize(items, 2));
+  return (
+    <>
+      <Box mb={8}>
+        <Button
+          variant="solid-blue"
+          onClick={() => setSampleItems(sampleSize(items, 2))}
+        >
+          Randomize Items
+        </Button>
+      </Box>
+      <Select items={sampleItems} />
+    </>
+  );
+};
+AsyncItems.parameters = {
+  docs: {
+    description: {
+      story:
+        'The Select is built with async items in mind. Just update the items at any time.',
+    },
+  },
+};
diff --git a/src/Input/DownshiftSelect/Select.test.tsx b/src/Input/DownshiftSelect/Select.test.tsx
new file mode 100644
index 000000000..fbe53dfed
--- /dev/null
+++ b/src/Input/DownshiftSelect/Select.test.tsx
@@ -0,0 +1,402 @@
+import React, { HTMLAttributes } from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import _userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/extend-expect';
+import { Select, Props, Item, ItemProps, LabelProps } from './Select';
+import { first, identity } from 'lodash';
+import { Item as ItemComponent, Label as LabelComponent } from './SelectStyle';
+
+// userEvent is typed incorrectly. The tab function exists, but is not declared
+// on the userEvent's type, so we have to add it manually here
+const userEvent = _userEvent as typeof _userEvent & { tab: () => void };
+
+const arrowDownKey = { key: 'ArrowDown', keyCode: 40 };
+const enterKey = { key: 'Enter', keyCode: 13 };
+const escKey = { key: 'Escape', keyCode: 27 };
+
+const items: Item[] = [
+  'Software Engineer',
+  'Software Tester',
+  'Back-end Engineer',
+  'Front-end Engineer',
+].map(label => ({ value: label, label }));
+
+const CustomItem: React.FC<ItemProps> = props => {
+  return <ItemComponent {...props} data-test="foo" />;
+};
+
+const CustomLabel: React.FC<LabelProps> = props => {
+  return <LabelComponent {...props} data-test="bar" />;
+};
+
+const renderSelect = (
+  props: Omit<React.ComponentProps<typeof Select>, 'items'> & {
+    'data-test'?: string; // Can't figure out how to get the built-in props here
+  } = {}
+) => {
+  const { asFragment, queryByTestId, queryAllByRole, rerender } = render(
+    <Select items={items} {...props} />
+  );
+  const getSnapshot = asFragment;
+  const getSelectContainer = () => queryByTestId('container');
+  const getLabel = () => queryByTestId('label');
+  const getCombobox = () => queryByTestId('combobox');
+  const getInput = () => queryByTestId('input') as HTMLInputElement;
+  const getMenu = () => queryByTestId('menu');
+  const getToggleButton = () => queryByTestId('toggle-button');
+  const getClearButton = () => queryByTestId('clear-button');
+  const getItems = () => queryAllByRole('option');
+  const getFirstItem = () => first(getItems());
+  const getLoadingIndicator = () => queryByTestId('loading-indicator');
+  const getHelperText = () => queryByTestId('helper-text');
+
+  const rerenderWithProps = (props: Omit<Props, 'items'> = {}) =>
+    rerender(<Select items={items} {...props} />);
+
+  return {
+    getSnapshot,
+    getSelectContainer,
+    getLabel,
+    getCombobox,
+    getInput,
+    getMenu,
+    getLoadingIndicator,
+    getToggleButton,
+    getClearButton,
+    getItems,
+    getFirstItem,
+    getHelperText,
+    rerenderWithProps,
+  };
+};
+
+describe('<Select> (Downshift)', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render', () => {
+    const {
+      getSelectContainer,
+      getLabel,
+      getCombobox,
+      getMenu,
+    } = renderSelect();
+    expect(getSelectContainer()).toBeVisible();
+    expect(getLabel()).toBe(null);
+    expect(getCombobox()).toBeVisible();
+    expect(getMenu()).not.toBeVisible();
+  });
+
+  it('should match snapshot when closed', () => {
+    const { getSnapshot } = renderSelect({
+      isOpen: false,
+    });
+    expect(getSnapshot()).toMatchSnapshot();
+  });
+
+  it('should match snapshot when open', () => {
+    const { getSnapshot } = renderSelect({
+      isOpen: true,
+    });
+    expect(getSnapshot()).toMatchSnapshot();
+  });
+
+  it('should open the menu on click', () => {
+    const { getCombobox, getMenu } = renderSelect();
+    expect(getMenu()).not.toBeVisible();
+    fireEvent.click(getCombobox());
+    expect(getMenu()).toBeVisible();
+  });
+
+  it('should open the menu on arrow down key', () => {
+    const { getInput, getMenu } = renderSelect();
+    expect(getMenu()).not.toBeVisible();
+    fireEvent.keyDown(getInput(), arrowDownKey);
+    expect(getMenu()).toBeVisible();
+  });
+
+  it('should open and close the menu on clicking the toggle button', () => {
+    const { getToggleButton, getMenu } = renderSelect();
+    expect(getMenu()).not.toBeVisible();
+    fireEvent.click(getToggleButton());
+    expect(getMenu()).toBeVisible();
+    fireEvent.click(getToggleButton());
+    expect(getMenu()).not.toBeVisible();
+  });
+
+  it('should close the menu when an option is selected', () => {
+    const { getInput, getCombobox, getFirstItem, getMenu } = renderSelect();
+    expect(getMenu()).not.toBeVisible();
+    fireEvent.keyDown(getInput(), arrowDownKey);
+    expect(getMenu()).toBeVisible();
+    fireEvent.keyDown(getInput(), enterKey);
+    expect(getMenu()).not.toBeVisible();
+
+    fireEvent.click(getCombobox());
+    expect(getFirstItem()).toBeVisible();
+    fireEvent.click(getFirstItem());
+    expect(getMenu()).not.toBeVisible();
+  });
+
+  it('should close on esc key pressed', () => {
+    const { getInput, getMenu } = renderSelect();
+    expect(getMenu()).not.toBeVisible();
+    fireEvent.keyDown(getInput(), arrowDownKey);
+    expect(getMenu()).toBeVisible();
+    fireEvent.keyDown(getInput(), escKey);
+    expect(getMenu()).not.toBeVisible();
+  });
+
+  it('should display the selected value when an option is selected', () => {
+    const { getInput, getCombobox, getFirstItem } = renderSelect();
+    fireEvent.click(getCombobox());
+    expect(getFirstItem()).toBeVisible();
+    fireEvent.click(getFirstItem());
+    expect(getInput()).toHaveValue(items[0].label);
+  });
+
+  it('should be focusable', () => {
+    const { getInput } = renderSelect();
+    expect(getInput()).not.toHaveFocus();
+    userEvent.tab();
+    expect(getInput()).toHaveFocus();
+  });
+
+  it('should filter the items', () => {
+    const { getInput, getFirstItem } = renderSelect();
+    userEvent.type(getInput(), 'Front-end');
+    expect(getFirstItem()).toHaveTextContent(items[3].label);
+    fireEvent.click(getFirstItem());
+    expect(getInput()).toHaveValue(items[3].label);
+  });
+
+  it('should accept a custom transform function', () => {
+    const customTransformFunction = (items: Item[]) => [items[1]];
+    const { getItems } = renderSelect({
+      transformFunction: customTransformFunction,
+      isOpen: true,
+    });
+    customTransformFunction(items).forEach((item, index) =>
+      expect(getItems()[index]).toHaveTextContent(item.label)
+    );
+  });
+
+  it('should not filter when transformFunction is the identity function', () => {
+    const { getItems } = renderSelect({
+      transformFunction: identity,
+      isOpen: true,
+    });
+    items.forEach((item, index) =>
+      expect(getItems()[index]).toHaveTextContent(item.label)
+    );
+  });
+
+  it('should use custom subcomponents when provided', () => {
+    const { getSnapshot, getFirstItem, getLabel } = renderSelect({
+      components: { Item: CustomItem, Label: CustomLabel },
+      isOpen: true,
+      label: 'i am label',
+    });
+    expect(getSnapshot()).toMatchSnapshot();
+    expect(getFirstItem()).toHaveAttribute('data-test', 'foo');
+    expect(getLabel()).toHaveAttribute('data-test', 'bar');
+  });
+
+  it('should allow removal of components by passing a void function', () => {
+    const { getSnapshot, getToggleButton } = renderSelect({
+      // eslint-disable-next-line react/display-name
+      components: { ToggleButton: React.forwardRef(() => null) },
+    });
+    expect(getSnapshot()).toMatchSnapshot();
+    expect(getToggleButton()).toBeNull();
+  });
+
+  it('should have a loading indicator', () => {
+    const { getSnapshot, getLoadingIndicator } = renderSelect({
+      isLoading: true,
+    });
+    expect(getSnapshot()).toMatchSnapshot();
+    expect(getLoadingIndicator()).toBeVisible();
+  });
+
+  describe('when isOpenInitially=true', () => {
+    it('should be open on render', () => {
+      const { getSnapshot, getMenu } = renderSelect({
+        isOpenInitially: true,
+      });
+      expect(getSnapshot()).toMatchSnapshot();
+      expect(getMenu()).toBeVisible();
+    });
+
+    it('should have focus', () => {
+      const { getInput } = renderSelect({
+        isOpenInitially: true,
+      });
+      expect(getInput()).toHaveFocus();
+    });
+
+    it('should close when esc is pressed', () => {
+      const { getInput, getMenu } = renderSelect({
+        isOpenInitially: true,
+      });
+      expect(getMenu()).toBeVisible();
+      fireEvent.keyDown(getInput(), escKey);
+      expect(getMenu()).not.toBeVisible();
+    });
+  });
+
+  it('should have an optional helper-text', () => {
+    const helperText = 'foo';
+    const { getSnapshot, getHelperText } = renderSelect({
+      helperText,
+    });
+    expect(getSnapshot()).toMatchSnapshot();
+    expect(getHelperText()).toHaveTextContent(helperText);
+  });
+
+  it('should have an optional placeholder', () => {
+    const placeholder = 'foo';
+    const { getSnapshot, getInput } = renderSelect({
+      placeholder,
+    });
+    expect(getSnapshot()).toMatchSnapshot();
+    expect(getInput()).toHaveAttribute('placeholder', placeholder);
+  });
+
+  it('should have an optional label', () => {
+    const label = 'foo';
+    const { getSnapshot, getLabel } = renderSelect({
+      label,
+    });
+    expect(getSnapshot()).toMatchSnapshot();
+    expect(getLabel()).toHaveTextContent(label);
+  });
+
+  describe('when it is disabled', () => {
+    it('should have disabled styles and attributes', () => {
+      const { getSnapshot, getInput } = renderSelect({
+        disabled: true,
+      });
+      expect(getSnapshot()).toMatchSnapshot();
+      expect(getInput()).toHaveAttribute('disabled');
+    });
+  });
+
+  describe('when selectedItem is controlled', () => {
+    it("should change the input value to the controlled item's label", () => {
+      const selectedItem = first(items);
+      const { getInput } = renderSelect({
+        selectedItem,
+      });
+      expect(getInput()).toHaveValue(selectedItem.label);
+    });
+
+    it('should call onSelectedItemChange with the target value', () => {
+      const onSelectedItemChange = jest.fn();
+      const { getInput } = renderSelect({
+        onSelectedItemChange,
+      });
+      fireEvent.keyDown(getInput(), arrowDownKey);
+      fireEvent.keyDown(getInput(), enterKey);
+      expect(onSelectedItemChange).toHaveBeenCalledWith(first(items));
+    });
+  });
+
+  describe('when isOpen is controlled', () => {
+    it('should follow the controlled value', () => {
+      const { getMenu, rerenderWithProps } = renderSelect({
+        isOpen: true,
+      });
+      expect(getMenu()).toBeVisible();
+      rerenderWithProps({ isOpen: false });
+      expect(getMenu()).not.toBeVisible();
+    });
+
+    it('should call onIsOpen with the target value', () => {
+      const onIsOpenChange = jest.fn();
+      const { getToggleButton, rerenderWithProps } = renderSelect({
+        isOpen: false,
+        onIsOpenChange,
+      });
+      fireEvent.click(getToggleButton());
+      expect(onIsOpenChange).toHaveBeenCalledWith(true);
+
+      rerenderWithProps({ isOpen: true, onIsOpenChange });
+      fireEvent.click(getToggleButton());
+      expect(onIsOpenChange).toHaveBeenCalledWith(false);
+    });
+  });
+
+  describe('when inputValue is controlled', () => {
+    it('should change the input value to the controlled value', () => {
+      const inputValue = 'Software';
+      const { getInput } = renderSelect({
+        inputValue,
+      });
+      expect(getInput()).toHaveValue(inputValue);
+    });
+
+    it('should call onSelectedItemChange with the target value', () => {
+      const inputValue = 'Software';
+      const onInputValueChange = jest.fn();
+      const { getInput } = renderSelect({
+        onInputValueChange,
+      });
+      userEvent.type(getInput(), inputValue);
+      expect(onInputValueChange).toHaveBeenCalledWith(inputValue);
+    });
+  });
+
+  it('should have an invalid state', () => {
+    const { getSnapshot } = renderSelect({
+      label: 'Foo',
+      helperText: 'Invalid',
+      invalid: true,
+    });
+    expect(getSnapshot()).toMatchSnapshot();
+  });
+
+  it('should should pass rest props to the internal input', () => {
+    const { getInput } = renderSelect({
+      'data-test': 'test',
+    });
+    expect(getInput()).toHaveAttribute('data-test', 'test');
+  });
+
+  it('should call the focus callbacks', () => {
+    const onFocus = jest.fn();
+    const onBlur = jest.fn();
+    renderSelect({
+      onFocus,
+      onBlur,
+    });
+    expect(onFocus).toHaveBeenCalledTimes(0);
+    expect(onBlur).toHaveBeenCalledTimes(0);
+    userEvent.tab();
+    expect(onFocus).toHaveBeenCalledTimes(1);
+    expect(onBlur).toHaveBeenCalledTimes(0);
+    userEvent.tab();
+    expect(onFocus).toHaveBeenCalledTimes(2);
+    expect(onBlur).toHaveBeenCalledTimes(1);
+  });
+
+  it('should call the onClear callback', () => {
+    const onClear = jest.fn();
+    const { getClearButton } = renderSelect({
+      onClear,
+      selectedItem: first(items),
+    });
+    fireEvent.click(getClearButton());
+    expect(onClear).toHaveBeenCalledTimes(1);
+  });
+
+  it('should allow configuration of empty list text', () => {
+    const emptyListText = 'empty list foo';
+    const { getMenu, getInput } = renderSelect({
+      emptyListText,
+    });
+    userEvent.type(getInput(), 'foo');
+    expect(getMenu()).toHaveTextContent(emptyListText);
+  });
+});
diff --git a/src/Input/DownshiftSelect/Select.tsx b/src/Input/DownshiftSelect/Select.tsx
new file mode 100644
index 000000000..32536d3fc
--- /dev/null
+++ b/src/Input/DownshiftSelect/Select.tsx
@@ -0,0 +1,357 @@
+import React, { HTMLProps, useState } from 'react';
+import { useCombobox, UseComboboxProps } from 'downshift';
+
+import * as internalComponents from './SelectStyle';
+import { ArrowDownIcon, ArrowUpIcon, CloseCircleSolidIcon } from '../..';
+import { isFunction, isUndefined } from 'lodash';
+import { useId } from 'react-id-generator';
+
+export interface Item {
+  value: string;
+  label: string;
+  disabled?: boolean;
+  [x: string]: any;
+}
+
+export const defaultTransformFunction = (items: Item[], inputValue: string) =>
+  items.filter(item =>
+    item.label.toLowerCase().startsWith(inputValue.toLowerCase())
+  );
+
+export const defaultItemToString = (item: Item) => item.label;
+
+export const defaultEmptyListText =
+  'No results found. Try another keyword to search for.';
+
+// These are our custom props for our subcomponents. We need this because
+// sometimes we want to make additional props available to the subcomponent,
+// e.g. a Item subcomponent needs to know the item it represents.
+export type ContainerProps = {};
+export type LabelProps = {};
+export type ComboboxProps = {};
+export type InputProps = {};
+export type IndicatorsContainerProps = {};
+export type LoadingIndicatorProps = {};
+export type ClearButtonProps = {};
+export type ToggleButtonProps = {};
+export type MenuProps = {};
+export type ItemProps = {
+  item: Item;
+};
+export type EmptyListProps = {};
+export type HelperTextProps = {};
+
+// These are the actual types for the subcomponents. Each subcomponent takes
+// its own, custom props (defined by us) AND the props that correspond to the
+// intrinsic html element which the subcomponent "extends".
+export type ContainerType = ContainerProps & HTMLProps<HTMLDivElement>;
+export type LabelType = LabelProps & HTMLProps<HTMLLabelElement>;
+export type ComboboxType = ComboboxProps & HTMLProps<HTMLDivElement>;
+export type InputType = InputProps & HTMLProps<HTMLInputElement>;
+export type IndicatorsContainerType = IndicatorsContainerProps &
+  HTMLProps<HTMLDivElement>;
+export type LoadingIndicatorType = LoadingIndicatorProps &
+  HTMLProps<HTMLDivElement>;
+export type ClearButtonType = ClearButtonProps & HTMLProps<HTMLButtonElement>;
+export type ToggleButtonType = ToggleButtonProps & HTMLProps<HTMLButtonElement>;
+export type MenuType = MenuProps & HTMLProps<HTMLUListElement>;
+export type ItemType = ItemProps & HTMLProps<HTMLLIElement>;
+export type EmptyListType = EmptyListProps & HTMLProps<HTMLLIElement>;
+export type HelperTextType = HelperTextProps & HTMLProps<HTMLSpanElement>;
+
+// This is the type for the 'components' prop on the Select. Using
+// ComponentType allows us to take in any kind of component, e.g. class
+// components, functional components or styled components.
+export interface Components {
+  Container: React.ComponentType<ContainerType>;
+  Label: React.ComponentType<LabelType>;
+  Combobox: React.ComponentType<ComboboxType>;
+  Input: React.ComponentType<InputType>;
+  IndicatorsContainer: React.ComponentType<IndicatorsContainerType>;
+  LoadingIndicator: React.ComponentType<LoadingIndicatorType>;
+  ClearButton: React.ComponentType<ClearButtonType>;
+  ToggleButton: React.ComponentType<ToggleButtonType>;
+  Menu: React.ComponentType<MenuType>;
+  Item: React.ComponentType<ItemType>;
+  EmptyList: React.ComponentType<EmptyListType>;
+  HelperText: React.ComponentType<HelperTextType>;
+}
+
+export interface Props extends ComboboxProps {
+  /** The items to choose from. */
+  items: Item[];
+
+  /** Transforms items to final list of items that will be shown, based on the search string and your custom requirements. */
+  transformFunction?: (items: Item[], inputValue: string) => Item[];
+
+  /** Overrides for built-in components */
+  components?: Partial<Components>;
+
+  /** Sets the Select into a loading state */
+  isLoading?: boolean;
+
+  /** Set to true to open the menu when the component initializes */
+  isOpenInitially?: boolean;
+
+  /** Text to display below the Select */
+  helperText?: string;
+
+  /** Props forwarded to internal downshift hook */
+  downshift?: Partial<UseComboboxProps<Item>>;
+
+  /** Text to be displayed in the input before the user types or selects an
+   * option */
+  placeholder?: string;
+
+  /** Text to be displayed above the Select component */
+  label?: string;
+
+  /** Disables the select. Changes styles and prevents any actions/events. */
+  disabled?: boolean;
+
+  /** Sets the internal input to readonly. Good for small lists that don't need to be filtered */
+  disableTyping?: boolean;
+
+  /** If true, the Select component will be set into an error state */
+  invalid?: boolean;
+
+  /** Control prop for controlling whether the menu is open or not */
+  isOpen?: boolean;
+  /** Called each time the menu is open or closed */
+  onIsOpenChange?: (isOpen: boolean) => void;
+
+  /** Control prop for controlling which item is selected */
+  selectedItem?: Item;
+  /** Called each time the selected item was changed */
+  onSelectedItemChange?: (selectedItem: Item) => void;
+
+  /** Control prop for controlling the value in the text input */
+  inputValue?: string;
+  /** Called each time the value in the input text changes */
+  onInputValueChange?: (inputValue: string) => void;
+
+  /** Called each time the Select is reset */
+  onClear?: () => void;
+
+  /** Called each time the text input gains focus */
+  onFocus?: React.FocusEventHandler<HTMLInputElement>;
+  /** Called each time the text input loses focus */
+  onBlur?: React.FocusEventHandler<HTMLInputElement>;
+
+  /** Text to be displayed in <code>EmptyList</code> when <code>transformFunction</code> returns an empty list */
+  emptyListText?: string;
+}
+
+export const Select: React.FC<Props> & { Components: Components } = ({
+  items,
+  transformFunction = defaultTransformFunction,
+  components: externalComponents = {},
+  isLoading = false,
+  isOpenInitially = false,
+  helperText,
+  downshift = {},
+  placeholder,
+  label,
+  disabled = false,
+  disableTyping = false,
+  isOpen: isOpenExternal,
+  invalid = false,
+  onIsOpenChange: onIsOpenChangeExternal,
+  selectedItem: selectedItemExternal,
+  onSelectedItemChange: onSelectedItemChangeExternal,
+  inputValue: inputValueExternal,
+  onInputValueChange: onInputValueChangeExternal,
+  onClear,
+  onFocus: onFocusExternal,
+  onBlur: onBlurExternal,
+  emptyListText = defaultEmptyListText,
+  ...props
+}) => {
+  const mergedComponents = {
+    ...(internalComponents as Components),
+    ...externalComponents,
+  };
+
+  const {
+    Container,
+    Label,
+    Combobox,
+    Input,
+    IndicatorsContainer,
+    LoadingIndicator,
+    ClearButton,
+    ToggleButton,
+    Menu,
+    Item,
+    EmptyList,
+    HelperText,
+  } = mergedComponents;
+
+  const [inputValueInternal, setInputValueInternal] = useState<string>('');
+  const inputValue = inputValueExternal || inputValueInternal;
+  const setInputValue = onInputValueChangeExternal || setInputValueInternal;
+
+  const displayItems = transformFunction(items, inputValue);
+
+  const {
+    selectedItem,
+    isOpen,
+    getLabelProps,
+    getComboboxProps,
+    getInputProps,
+    getToggleButtonProps,
+    getMenuProps,
+    getItemProps,
+    reset,
+    openMenu,
+  } = useCombobox<Item>({
+    items: displayItems,
+
+    inputValue,
+    onInputValueChange: ({ inputValue }) => {
+      setInputValue(inputValue);
+    },
+
+    itemToString: defaultItemToString,
+    initialIsOpen: isOpenInitially,
+
+    ...(!isUndefined(isOpenExternal) && { isOpen: isOpenExternal }),
+    ...(isFunction(onIsOpenChangeExternal) && {
+      onIsOpenChange: ({ isOpen }) => onIsOpenChangeExternal(isOpen),
+    }),
+
+    ...(!isUndefined(selectedItemExternal) && {
+      selectedItem: selectedItemExternal,
+    }),
+    ...(isFunction(onSelectedItemChangeExternal) && {
+      onSelectedItemChange: ({ selectedItem }) =>
+        onSelectedItemChangeExternal(selectedItem),
+    }),
+
+    ...downshift,
+  });
+
+  const [helperId] = useId(1, 'description-');
+
+  const handleClear = () => {
+    if (isFunction(onClear)) {
+      onClear();
+    }
+    reset();
+  };
+
+  const [isFocused, setIsFocused] = useState<boolean>(false);
+  const onFocusInternal = () => {
+    setIsFocused(true);
+  };
+  const onBlurInternal = () => {
+    setIsFocused(false);
+  };
+  const onFocus = () => {
+    if (isFunction(onFocusExternal)) {
+      onFocusExternal();
+    }
+    onFocusInternal();
+  };
+  const onBlur = () => {
+    if (isFunction(onBlurExternal)) {
+      onBlurExternal();
+    }
+    onBlurInternal();
+  };
+
+  return (
+    <Container data-testid="container">
+      {label && (
+        <Label
+          {...getLabelProps()}
+          data-active={isFocused}
+          data-disabled={disabled}
+          data-invalid={invalid}
+          data-testid="label"
+        >
+          {label}
+        </Label>
+      )}
+      <Combobox
+        {...getComboboxProps()}
+        data-disabled={disabled}
+        data-invalid={invalid}
+        data-active={isFocused}
+        onClick={openMenu}
+        data-testid="combobox"
+      >
+        <Input
+          {...getInputProps({
+            disabled: disabled,
+            readOnly: disableTyping,
+            onFocus,
+            onBlur,
+            ...props,
+          })}
+          placeholder={placeholder}
+          aria-invalid={invalid}
+          {...(helperText && { 'aria-describedby': helperId })}
+          {...(selectedItem && { title: selectedItem.label })}
+          data-testid="input"
+        />
+        <IndicatorsContainer data-testid="indicators-container">
+          {isLoading && <LoadingIndicator data-testid="loading-indicator" />}
+          {selectedItem && (
+            <ClearButton
+              type="button"
+              onClick={handleClear}
+              aria-label="clear selection"
+              data-testid="clear-button"
+            >
+              <CloseCircleSolidIcon />
+            </ClearButton>
+          )}
+          <ToggleButton
+            type="button"
+            {...getToggleButtonProps({
+              disabled,
+              onClick: e => e.stopPropagation(),
+            })}
+            aria-label="toggle menu"
+            data-testid="toggle-button"
+          >
+            {isOpen ? <ArrowUpIcon /> : <ArrowDownIcon />}
+          </ToggleButton>
+        </IndicatorsContainer>
+      </Combobox>
+      <Menu {...getMenuProps()} data-testid="menu">
+        {isOpen && displayItems.length > 0 ? (
+          displayItems.map((item, index) => (
+            <Item
+              {...getItemProps({
+                item,
+                index,
+                disabled: disabled || item.disabled,
+              })}
+              key={item.value}
+              item={item}
+              title={item.label}
+              ref={undefined}
+            >
+              {defaultItemToString(item)}
+            </Item>
+          ))
+        ) : (
+          <EmptyList data-testid="empty-list">{emptyListText}</EmptyList>
+        )}
+      </Menu>
+      {helperText && (
+        <HelperText
+          id={helperId}
+          data-invalid={invalid}
+          data-testid="helper-text"
+        >
+          {helperText}
+        </HelperText>
+      )}
+    </Container>
+  );
+};
+
+Select.Components = internalComponents;
diff --git a/src/Input/DownshiftSelect/SelectStyle.ts b/src/Input/DownshiftSelect/SelectStyle.ts
new file mode 100644
index 000000000..84f5d3479
--- /dev/null
+++ b/src/Input/DownshiftSelect/SelectStyle.ts
@@ -0,0 +1,165 @@
+import styled from 'styled-components';
+import Loading from '../../General/Loading';
+import { Greyscale, PrimaryColor, SecondaryColor } from '../../Utils/Colors';
+import { Shadow } from '../../Utils/Shadow';
+import {
+  ContainerProps,
+  ComboboxProps,
+  HelperTextProps,
+  IndicatorsContainerProps,
+  InputProps,
+  ItemProps,
+  EmptyListProps,
+  LabelProps,
+  LoadingIndicatorProps,
+  MenuProps,
+  ToggleButtonProps,
+  ClearButtonProps,
+} from './Select';
+
+export const Container = styled.div<ContainerProps>`
+  position: relative;
+  font-size: 16px;
+`;
+
+export const Label = styled.label<LabelProps>`
+  display: block;
+  margin-bottom: 8px;
+  color: ${Greyscale.devilsgrey};
+  font-weight: 500;
+
+  &[data-active='true'] {
+    color: ${SecondaryColor.actionblue};
+  }
+
+  &[data-disabled='true'] {
+    color: ${Greyscale.lightgrey};
+  }
+
+  &[data-invalid='true'] {
+    color: ${PrimaryColor.glintsred};
+  }
+`;
+
+export const Combobox = styled.div<ComboboxProps>`
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-column-gap: 0.75em;
+  padding: 0.75em 1em 0.75em 1em;
+  border-radius: 0.5em;
+  background-color: #ebf5fa;
+
+  :hover {
+    background-color: #d6eaf2;
+  }
+
+  &[aria-expanded='true'],
+  &[data-active='true'] {
+    background-color: #c2e0ed;
+  }
+
+  &[data-disabled='true'] {
+    background-color: ${Greyscale.softgrey};
+  }
+
+  &[data-invalid='true'] {
+    background-color: #feeeee;
+  }
+`;
+
+export const Input = styled.input<InputProps>`
+  border: none;
+  background-color: transparent;
+  outline: none;
+  color: ${Greyscale.devilsgrey};
+  font-size: inherit;
+  text-overflow: ellipsis;
+
+  &:not([value='']) {
+    color: black;
+  }
+
+  :disabled::placeholder {
+    color: ${Greyscale.lightgrey};
+  }
+`;
+
+export const IndicatorsContainer = styled.div<IndicatorsContainerProps>`
+  display: flex;
+  flex-direction: row;
+  > :not(:last-child) {
+    margin-right: 0.75em;
+  }
+`;
+
+export const _IndicatorButton = styled.button`
+  padding: 0;
+  border: none;
+  background: none;
+  color: ${Greyscale.devilsgrey};
+  font-size: inherit;
+`;
+
+export const ClearButton = styled(_IndicatorButton)<ClearButtonProps>``;
+
+export const ToggleButton = styled(_IndicatorButton)<ToggleButtonProps>``;
+
+export const LoadingIndicator = styled(Loading)<LoadingIndicatorProps>`
+  align-items: center;
+  font-size: 0.5625em;
+`;
+
+export const Menu = styled.ul<MenuProps>`
+  margin-top: 4px;
+  position: absolute;
+  width: 100%;
+  padding: 0.5em 0 0.5em 0;
+  border: 1px solid #eeeeee;
+  border-radius: 0.5em;
+  box-shadow: ${Shadow.down3};
+  background-color: white;
+
+  [aria-expanded='false'] + & {
+    visibility: hidden;
+  }
+`;
+
+export const Item = styled.li<ItemProps>`
+  padding: 0.5em 1em;
+  list-style-type: none;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &[aria-selected='true'] {
+    background-color: ${Greyscale.softgrey};
+    color: ${SecondaryColor.actionblue};
+  }
+
+  &[disabled] {
+    background-color: transparent;
+    color: ${Greyscale.lightgrey};
+    cursor: not-allowed;
+  }
+`;
+
+export const EmptyList = styled.li<EmptyListProps>`
+  padding: 0.5em 1em;
+  list-style-type: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: ${Greyscale.lightgrey};
+  cursor: not-allowed;
+`;
+
+export const HelperText = styled.span<HelperTextProps>`
+  margin-top: 4px;
+  color: ${Greyscale.devilsgrey};
+  font-size: 0.875em;
+
+  &[data-invalid='true'] {
+    color: ${PrimaryColor.glintsred};
+  }
+`;
diff --git a/src/Input/DownshiftSelect/__snapshots__/Select.test.tsx.snap b/src/Input/DownshiftSelect/__snapshots__/Select.test.tsx.snap
new file mode 100644
index 000000000..19db6ba04
--- /dev/null
+++ b/src/Input/DownshiftSelect/__snapshots__/Select.test.tsx.snap
@@ -0,0 +1,942 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Select> (Downshift) should allow removal of components by passing a void function 1`] = `
+<DocumentFragment>
+  <div
+    class="SelectStyle__Container-qr1jv6-0 faXYfy"
+    data-testid="container"
+  >
+    <div
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      aria-owns="downshift-53-menu"
+      class="SelectStyle__Combobox-qr1jv6-2 bvcZlQ"
+      data-active="false"
+      data-disabled="false"
+      data-invalid="false"
+      data-testid="combobox"
+      role="combobox"
+    >
+      <input
+        aria-autocomplete="list"
+        aria-controls="downshift-53-menu"
+        aria-invalid="false"
+        aria-labelledby="downshift-53-label"
+        autocomplete="off"
+        class="SelectStyle__Input-qr1jv6-3 llfDsg"
+        data-testid="input"
+        id="downshift-53-input"
+        value=""
+      />
+      <div
+        class="SelectStyle__IndicatorsContainer-qr1jv6-4 hZrLeS"
+        data-testid="indicators-container"
+      />
+    </div>
+    <ul
+      aria-labelledby="downshift-53-label"
+      class="SelectStyle__Menu-qr1jv6-9 bHPggC"
+      data-testid="menu"
+      id="downshift-53-menu"
+      role="listbox"
+    >
+      <li
+        class="SelectStyle__EmptyList-qr1jv6-11 jbauMg"
+        data-testid="empty-list"
+      >
+        No results found. Try another keyword to search for.
+      </li>
+    </ul>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`<Select> (Downshift) should have a loading indicator 1`] = `
+<DocumentFragment>
+  <div
+    class="SelectStyle__Container-qr1jv6-0 faXYfy"
+    data-testid="container"
+  >
+    <div
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      aria-owns="downshift-54-menu"
+      class="SelectStyle__Combobox-qr1jv6-2 bvcZlQ"
+      data-active="false"
+      data-disabled="false"
+      data-invalid="false"
+      data-testid="combobox"
+      role="combobox"
+    >
+      <input
+        aria-autocomplete="list"
+        aria-controls="downshift-54-menu"
+        aria-invalid="false"
+        aria-labelledby="downshift-54-label"
+        autocomplete="off"
+        class="SelectStyle__Input-qr1jv6-3 llfDsg"
+        data-testid="input"
+        id="downshift-54-input"
+        value=""
+      />
+      <div
+        class="SelectStyle__IndicatorsContainer-qr1jv6-4 hZrLeS"
+        data-testid="indicators-container"
+      >
+        <div
+          aria-busy="true"
+          aria-live="polite"
+          class="LoadingStyle__LoadingContainer-fg2qx3-0 ioHJOi aries-loading SelectStyle__LoadingIndicator-qr1jv6-8 bMMiQb"
+          data-testid="loading-indicator"
+          role="alert"
+        >
+          <div
+            class="LoadingStyle__Spinner-fg2qx3-1 fQRrhB"
+          />
+        </div>
+        <button
+          aria-label="toggle menu"
+          class="SelectStyle___IndicatorButton-qr1jv6-5 SelectStyle__ToggleButton-qr1jv6-7 cdsRlh"
+          data-testid="toggle-button"
+          id="downshift-54-toggle-button"
+          tabindex="-1"
+          type="button"
+        >
+          <svg
+            class="IconStyle__VerticalCenteredSvg-x7d280-0 cJSNzi"
+            data-testid="icon-svg"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 100 100"
+            width="1em"
+          >
+            <polygon
+              points="11.7984725 19 49.9935275 57.3950291 88.1885825 19 99.987055 30.7984725 49.9935275 80.792 0 30.7984725"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+    <ul
+      aria-labelledby="downshift-54-label"
+      class="SelectStyle__Menu-qr1jv6-9 bHPggC"
+      data-testid="menu"
+      id="downshift-54-menu"
+      role="listbox"
+    >
+      <li
+        class="SelectStyle__EmptyList-qr1jv6-11 jbauMg"
+        data-testid="empty-list"
+      >
+        No results found. Try another keyword to search for.
+      </li>
+    </ul>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`<Select> (Downshift) should have an invalid state 1`] = `
+<DocumentFragment>
+  <div
+    class="SelectStyle__Container-qr1jv6-0 faXYfy"
+    data-testid="container"
+  >
+    <label
+      class="SelectStyle__Label-qr1jv6-1 jHMhiv"
+      data-active="false"
+      data-disabled="false"
+      data-invalid="true"
+      data-testid="label"
+      for="downshift-90-input"
+      id="downshift-90-label"
+    >
+      Foo
+    </label>
+    <div
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      aria-owns="downshift-90-menu"
+      class="SelectStyle__Combobox-qr1jv6-2 bvcZlQ"
+      data-active="false"
+      data-disabled="false"
+      data-invalid="true"
+      data-testid="combobox"
+      role="combobox"
+    >
+      <input
+        aria-autocomplete="list"
+        aria-controls="downshift-90-menu"
+        aria-describedby="description-30"
+        aria-invalid="true"
+        aria-labelledby="downshift-90-label"
+        autocomplete="off"
+        class="SelectStyle__Input-qr1jv6-3 llfDsg"
+        data-testid="input"
+        id="downshift-90-input"
+        value=""
+      />
+      <div
+        class="SelectStyle__IndicatorsContainer-qr1jv6-4 hZrLeS"
+        data-testid="indicators-container"
+      >
+        <button
+          aria-label="toggle menu"
+          class="SelectStyle___IndicatorButton-qr1jv6-5 SelectStyle__ToggleButton-qr1jv6-7 cdsRlh"
+          data-testid="toggle-button"
+          id="downshift-90-toggle-button"
+          tabindex="-1"
+          type="button"
+        >
+          <svg
+            class="IconStyle__VerticalCenteredSvg-x7d280-0 cJSNzi"
+            data-testid="icon-svg"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 100 100"
+            width="1em"
+          >
+            <polygon
+              points="11.7984725 19 49.9935275 57.3950291 88.1885825 19 99.987055 30.7984725 49.9935275 80.792 0 30.7984725"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+    <ul
+      aria-labelledby="downshift-90-label"
+      class="SelectStyle__Menu-qr1jv6-9 bHPggC"
+      data-testid="menu"
+      id="downshift-90-menu"
+      role="listbox"
+    >
+      <li
+        class="SelectStyle__EmptyList-qr1jv6-11 jbauMg"
+        data-testid="empty-list"
+      >
+        No results found. Try another keyword to search for.
+      </li>
+    </ul>
+    <span
+      class="SelectStyle__HelperText-qr1jv6-12 eIDHSV"
+      data-invalid="true"
+      data-testid="helper-text"
+      id="description-30"
+    >
+      Invalid
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`<Select> (Downshift) should have an optional helper-text 1`] = `
+<DocumentFragment>
+  <div
+    class="SelectStyle__Container-qr1jv6-0 faXYfy"
+    data-testid="container"
+  >
+    <div
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      aria-owns="downshift-62-menu"
+      class="SelectStyle__Combobox-qr1jv6-2 bvcZlQ"
+      data-active="false"
+      data-disabled="false"
+      data-invalid="false"
+      data-testid="combobox"
+      role="combobox"
+    >
+      <input
+        aria-autocomplete="list"
+        aria-controls="downshift-62-menu"
+        aria-describedby="description-20"
+        aria-invalid="false"
+        aria-labelledby="downshift-62-label"
+        autocomplete="off"
+        class="SelectStyle__Input-qr1jv6-3 llfDsg"
+        data-testid="input"
+        id="downshift-62-input"
+        value=""
+      />
+      <div
+        class="SelectStyle__IndicatorsContainer-qr1jv6-4 hZrLeS"
+        data-testid="indicators-container"
+      >
+        <button
+          aria-label="toggle menu"
+          class="SelectStyle___IndicatorButton-qr1jv6-5 SelectStyle__ToggleButton-qr1jv6-7 cdsRlh"
+          data-testid="toggle-button"
+          id="downshift-62-toggle-button"
+          tabindex="-1"
+          type="button"
+        >
+          <svg
+            class="IconStyle__VerticalCenteredSvg-x7d280-0 cJSNzi"
+            data-testid="icon-svg"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 100 100"
+            width="1em"
+          >
+            <polygon
+              points="11.7984725 19 49.9935275 57.3950291 88.1885825 19 99.987055 30.7984725 49.9935275 80.792 0 30.7984725"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+    <ul
+      aria-labelledby="downshift-62-label"
+      class="SelectStyle__Menu-qr1jv6-9 bHPggC"
+      data-testid="menu"
+      id="downshift-62-menu"
+      role="listbox"
+    >
+      <li
+        class="SelectStyle__EmptyList-qr1jv6-11 jbauMg"
+        data-testid="empty-list"
+      >
+        No results found. Try another keyword to search for.
+      </li>
+    </ul>
+    <span
+      class="SelectStyle__HelperText-qr1jv6-12 eIDHSV"
+      data-invalid="false"
+      data-testid="helper-text"
+      id="description-20"
+    >
+      foo
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`<Select> (Downshift) should have an optional label 1`] = `
+<DocumentFragment>
+  <div
+    class="SelectStyle__Container-qr1jv6-0 faXYfy"
+    data-testid="container"
+  >
+    <label
+      class="SelectStyle__Label-qr1jv6-1 jHMhiv"
+      data-active="false"
+      data-disabled="false"
+      data-invalid="false"
+      data-testid="label"
+      for="downshift-64-input"
+      id="downshift-64-label"
+    >
+      foo
+    </label>
+    <div
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      aria-owns="downshift-64-menu"
+      class="SelectStyle__Combobox-qr1jv6-2 bvcZlQ"
+      data-active="false"
+      data-disabled="false"
+      data-invalid="false"
+      data-testid="combobox"
+      role="combobox"
+    >
+      <input
+        aria-autocomplete="list"
+        aria-controls="downshift-64-menu"
+        aria-invalid="false"
+        aria-labelledby="downshift-64-label"
+        autocomplete="off"
+        class="SelectStyle__Input-qr1jv6-3 llfDsg"
+        data-testid="input"
+        id="downshift-64-input"
+        value=""
+      />
+      <div
+        class="SelectStyle__IndicatorsContainer-qr1jv6-4 hZrLeS"
+        data-testid="indicators-container"
+      >
+        <button
+          aria-label="toggle menu"
+          class="SelectStyle___IndicatorButton-qr1jv6-5 SelectStyle__ToggleButton-qr1jv6-7 cdsRlh"
+          data-testid="toggle-button"
+          id="downshift-64-toggle-button"
+          tabindex="-1"
+          type="button"
+        >
+          <svg
+            class="IconStyle__VerticalCenteredSvg-x7d280-0 cJSNzi"
+            data-testid="icon-svg"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 100 100"
+            width="1em"
+          >
+            <polygon
+              points="11.7984725 19 49.9935275 57.3950291 88.1885825 19 99.987055 30.7984725 49.9935275 80.792 0 30.7984725"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+    <ul
+      aria-labelledby="downshift-64-label"
+      class="SelectStyle__Menu-qr1jv6-9 bHPggC"
+      data-testid="menu"
+      id="downshift-64-menu"
+      role="listbox"
+    >
+      <li
+        class="SelectStyle__EmptyList-qr1jv6-11 jbauMg"
+        data-testid="empty-list"
+      >
+        No results found. Try another keyword to search for.
+      </li>
+    </ul>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`<Select> (Downshift) should have an optional placeholder 1`] = `
+<DocumentFragment>
+  <div
+    class="SelectStyle__Container-qr1jv6-0 faXYfy"
+    data-testid="container"
+  >
+    <div
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      aria-owns="downshift-63-menu"
+      class="SelectStyle__Combobox-qr1jv6-2 bvcZlQ"
+      data-active="false"
+      data-disabled="false"
+      data-invalid="false"
+      data-testid="combobox"
+      role="combobox"
+    >
+      <input
+        aria-autocomplete="list"
+        aria-controls="downshift-63-menu"
+        aria-invalid="false"
+        aria-labelledby="downshift-63-label"
+        autocomplete="off"
+        class="SelectStyle__Input-qr1jv6-3 llfDsg"
+        data-testid="input"
+        id="downshift-63-input"
+        placeholder="foo"
+        value=""
+      />
+      <div
+        class="SelectStyle__IndicatorsContainer-qr1jv6-4 hZrLeS"
+        data-testid="indicators-container"
+      >
+        <button
+          aria-label="toggle menu"
+          class="SelectStyle___IndicatorButton-qr1jv6-5 SelectStyle__ToggleButton-qr1jv6-7 cdsRlh"
+          data-testid="toggle-button"
+          id="downshift-63-toggle-button"
+          tabindex="-1"
+          type="button"
+        >
+          <svg
+            class="IconStyle__VerticalCenteredSvg-x7d280-0 cJSNzi"
+            data-testid="icon-svg"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 100 100"
+            width="1em"
+          >
+            <polygon
+              points="11.7984725 19 49.9935275 57.3950291 88.1885825 19 99.987055 30.7984725 49.9935275 80.792 0 30.7984725"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+    <ul
+      aria-labelledby="downshift-63-label"
+      class="SelectStyle__Menu-qr1jv6-9 bHPggC"
+      data-testid="menu"
+      id="downshift-63-menu"
+      role="listbox"
+    >
+      <li
+        class="SelectStyle__EmptyList-qr1jv6-11 jbauMg"
+        data-testid="empty-list"
+      >
+        No results found. Try another keyword to search for.
+      </li>
+    </ul>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`<Select> (Downshift) should match snapshot when closed 1`] = `
+<DocumentFragment>
+  <div
+    class="SelectStyle__Container-qr1jv6-0 faXYfy"
+    data-testid="container"
+  >
+    <div
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      aria-owns="downshift-1-menu"
+      class="SelectStyle__Combobox-qr1jv6-2 bvcZlQ"
+      data-active="false"
+      data-disabled="false"
+      data-invalid="false"
+      data-testid="combobox"
+      role="combobox"
+    >
+      <input
+        aria-autocomplete="list"
+        aria-controls="downshift-1-menu"
+        aria-invalid="false"
+        aria-labelledby="downshift-1-label"
+        autocomplete="off"
+        class="SelectStyle__Input-qr1jv6-3 llfDsg"
+        data-testid="input"
+        id="downshift-1-input"
+        value=""
+      />
+      <div
+        class="SelectStyle__IndicatorsContainer-qr1jv6-4 hZrLeS"
+        data-testid="indicators-container"
+      >
+        <button
+          aria-label="toggle menu"
+          class="SelectStyle___IndicatorButton-qr1jv6-5 SelectStyle__ToggleButton-qr1jv6-7 cdsRlh"
+          data-testid="toggle-button"
+          id="downshift-1-toggle-button"
+          tabindex="-1"
+          type="button"
+        >
+          <svg
+            class="IconStyle__VerticalCenteredSvg-x7d280-0 cJSNzi"
+            data-testid="icon-svg"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 100 100"
+            width="1em"
+          >
+            <polygon
+              points="11.7984725 19 49.9935275 57.3950291 88.1885825 19 99.987055 30.7984725 49.9935275 80.792 0 30.7984725"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+    <ul
+      aria-labelledby="downshift-1-label"
+      class="SelectStyle__Menu-qr1jv6-9 bHPggC"
+      data-testid="menu"
+      id="downshift-1-menu"
+      role="listbox"
+    >
+      <li
+        class="SelectStyle__EmptyList-qr1jv6-11 jbauMg"
+        data-testid="empty-list"
+      >
+        No results found. Try another keyword to search for.
+      </li>
+    </ul>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`<Select> (Downshift) should match snapshot when open 1`] = `
+<DocumentFragment>
+  <div
+    class="SelectStyle__Container-qr1jv6-0 faXYfy"
+    data-testid="container"
+  >
+    <div
+      aria-expanded="true"
+      aria-haspopup="listbox"
+      aria-owns="downshift-2-menu"
+      class="SelectStyle__Combobox-qr1jv6-2 bvcZlQ"
+      data-active="true"
+      data-disabled="false"
+      data-invalid="false"
+      data-testid="combobox"
+      role="combobox"
+    >
+      <input
+        aria-autocomplete="list"
+        aria-controls="downshift-2-menu"
+        aria-invalid="false"
+        aria-labelledby="downshift-2-label"
+        autocomplete="off"
+        class="SelectStyle__Input-qr1jv6-3 llfDsg"
+        data-testid="input"
+        id="downshift-2-input"
+        value=""
+      />
+      <div
+        class="SelectStyle__IndicatorsContainer-qr1jv6-4 hZrLeS"
+        data-testid="indicators-container"
+      >
+        <button
+          aria-label="toggle menu"
+          class="SelectStyle___IndicatorButton-qr1jv6-5 SelectStyle__ToggleButton-qr1jv6-7 cdsRlh"
+          data-testid="toggle-button"
+          id="downshift-2-toggle-button"
+          tabindex="-1"
+          type="button"
+        >
+          <svg
+            class="IconStyle__VerticalCenteredSvg-x7d280-0 cJSNzi"
+            data-testid="icon-svg"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 100 100"
+            width="1em"
+          >
+            <polygon
+              points="11.8 80.8 0 69 50 19 100 69 88.2 80.8 50 42.4"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+    <ul
+      aria-labelledby="downshift-2-label"
+      class="SelectStyle__Menu-qr1jv6-9 bHPggC"
+      data-testid="menu"
+      id="downshift-2-menu"
+      role="listbox"
+    >
+      <li
+        aria-selected="false"
+        class="SelectStyle__Item-qr1jv6-10 iabMNy"
+        id="downshift-2-item-0"
+        role="option"
+        title="Software Engineer"
+      >
+        Software Engineer
+      </li>
+      <li
+        aria-selected="false"
+        class="SelectStyle__Item-qr1jv6-10 iabMNy"
+        id="downshift-2-item-1"
+        role="option"
+        title="Software Tester"
+      >
+        Software Tester
+      </li>
+      <li
+        aria-selected="false"
+        class="SelectStyle__Item-qr1jv6-10 iabMNy"
+        id="downshift-2-item-2"
+        role="option"
+        title="Back-end Engineer"
+      >
+        Back-end Engineer
+      </li>
+      <li
+        aria-selected="false"
+        class="SelectStyle__Item-qr1jv6-10 iabMNy"
+        id="downshift-2-item-3"
+        role="option"
+        title="Front-end Engineer"
+      >
+        Front-end Engineer
+      </li>
+    </ul>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`<Select> (Downshift) should use custom subcomponents when provided 1`] = `
+<DocumentFragment>
+  <div
+    class="SelectStyle__Container-qr1jv6-0 faXYfy"
+    data-testid="container"
+  >
+    <label
+      class="SelectStyle__Label-qr1jv6-1 jHMhiv"
+      data-active="true"
+      data-disabled="false"
+      data-invalid="false"
+      data-test="bar"
+      data-testid="label"
+      for="downshift-51-input"
+      id="downshift-51-label"
+    >
+      i am label
+    </label>
+    <div
+      aria-expanded="true"
+      aria-haspopup="listbox"
+      aria-owns="downshift-51-menu"
+      class="SelectStyle__Combobox-qr1jv6-2 bvcZlQ"
+      data-active="true"
+      data-disabled="false"
+      data-invalid="false"
+      data-testid="combobox"
+      role="combobox"
+    >
+      <input
+        aria-autocomplete="list"
+        aria-controls="downshift-51-menu"
+        aria-invalid="false"
+        aria-labelledby="downshift-51-label"
+        autocomplete="off"
+        class="SelectStyle__Input-qr1jv6-3 llfDsg"
+        data-testid="input"
+        id="downshift-51-input"
+        value=""
+      />
+      <div
+        class="SelectStyle__IndicatorsContainer-qr1jv6-4 hZrLeS"
+        data-testid="indicators-container"
+      >
+        <button
+          aria-label="toggle menu"
+          class="SelectStyle___IndicatorButton-qr1jv6-5 SelectStyle__ToggleButton-qr1jv6-7 cdsRlh"
+          data-testid="toggle-button"
+          id="downshift-51-toggle-button"
+          tabindex="-1"
+          type="button"
+        >
+          <svg
+            class="IconStyle__VerticalCenteredSvg-x7d280-0 cJSNzi"
+            data-testid="icon-svg"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 100 100"
+            width="1em"
+          >
+            <polygon
+              points="11.8 80.8 0 69 50 19 100 69 88.2 80.8 50 42.4"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+    <ul
+      aria-labelledby="downshift-51-label"
+      class="SelectStyle__Menu-qr1jv6-9 bHPggC"
+      data-testid="menu"
+      id="downshift-51-menu"
+      role="listbox"
+    >
+      <li
+        aria-selected="false"
+        class="SelectStyle__Item-qr1jv6-10 iabMNy"
+        data-test="foo"
+        id="downshift-51-item-0"
+        role="option"
+        title="Software Engineer"
+      >
+        Software Engineer
+      </li>
+      <li
+        aria-selected="false"
+        class="SelectStyle__Item-qr1jv6-10 iabMNy"
+        data-test="foo"
+        id="downshift-51-item-1"
+        role="option"
+        title="Software Tester"
+      >
+        Software Tester
+      </li>
+      <li
+        aria-selected="false"
+        class="SelectStyle__Item-qr1jv6-10 iabMNy"
+        data-test="foo"
+        id="downshift-51-item-2"
+        role="option"
+        title="Back-end Engineer"
+      >
+        Back-end Engineer
+      </li>
+      <li
+        aria-selected="false"
+        class="SelectStyle__Item-qr1jv6-10 iabMNy"
+        data-test="foo"
+        id="downshift-51-item-3"
+        role="option"
+        title="Front-end Engineer"
+      >
+        Front-end Engineer
+      </li>
+    </ul>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`<Select> (Downshift) when isOpenInitially=true should be open on render 1`] = `
+<DocumentFragment>
+  <div
+    class="SelectStyle__Container-qr1jv6-0 faXYfy"
+    data-testid="container"
+  >
+    <div
+      aria-expanded="true"
+      aria-haspopup="listbox"
+      aria-owns="downshift-55-menu"
+      class="SelectStyle__Combobox-qr1jv6-2 bvcZlQ"
+      data-active="true"
+      data-disabled="false"
+      data-invalid="false"
+      data-testid="combobox"
+      role="combobox"
+    >
+      <input
+        aria-autocomplete="list"
+        aria-controls="downshift-55-menu"
+        aria-invalid="false"
+        aria-labelledby="downshift-55-label"
+        autocomplete="off"
+        class="SelectStyle__Input-qr1jv6-3 llfDsg"
+        data-testid="input"
+        id="downshift-55-input"
+        value=""
+      />
+      <div
+        class="SelectStyle__IndicatorsContainer-qr1jv6-4 hZrLeS"
+        data-testid="indicators-container"
+      >
+        <button
+          aria-label="toggle menu"
+          class="SelectStyle___IndicatorButton-qr1jv6-5 SelectStyle__ToggleButton-qr1jv6-7 cdsRlh"
+          data-testid="toggle-button"
+          id="downshift-55-toggle-button"
+          tabindex="-1"
+          type="button"
+        >
+          <svg
+            class="IconStyle__VerticalCenteredSvg-x7d280-0 cJSNzi"
+            data-testid="icon-svg"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 100 100"
+            width="1em"
+          >
+            <polygon
+              points="11.8 80.8 0 69 50 19 100 69 88.2 80.8 50 42.4"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+    <ul
+      aria-labelledby="downshift-55-label"
+      class="SelectStyle__Menu-qr1jv6-9 bHPggC"
+      data-testid="menu"
+      id="downshift-55-menu"
+      role="listbox"
+    >
+      <li
+        aria-selected="false"
+        class="SelectStyle__Item-qr1jv6-10 iabMNy"
+        id="downshift-55-item-0"
+        role="option"
+        title="Software Engineer"
+      >
+        Software Engineer
+      </li>
+      <li
+        aria-selected="false"
+        class="SelectStyle__Item-qr1jv6-10 iabMNy"
+        id="downshift-55-item-1"
+        role="option"
+        title="Software Tester"
+      >
+        Software Tester
+      </li>
+      <li
+        aria-selected="false"
+        class="SelectStyle__Item-qr1jv6-10 iabMNy"
+        id="downshift-55-item-2"
+        role="option"
+        title="Back-end Engineer"
+      >
+        Back-end Engineer
+      </li>
+      <li
+        aria-selected="false"
+        class="SelectStyle__Item-qr1jv6-10 iabMNy"
+        id="downshift-55-item-3"
+        role="option"
+        title="Front-end Engineer"
+      >
+        Front-end Engineer
+      </li>
+    </ul>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`<Select> (Downshift) when it is disabled should have disabled styles and attributes 1`] = `
+<DocumentFragment>
+  <div
+    class="SelectStyle__Container-qr1jv6-0 faXYfy"
+    data-testid="container"
+  >
+    <div
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      aria-owns="downshift-65-menu"
+      class="SelectStyle__Combobox-qr1jv6-2 bvcZlQ"
+      data-active="false"
+      data-disabled="true"
+      data-invalid="false"
+      data-testid="combobox"
+      role="combobox"
+    >
+      <input
+        aria-autocomplete="list"
+        aria-controls="downshift-65-menu"
+        aria-invalid="false"
+        aria-labelledby="downshift-65-label"
+        autocomplete="off"
+        class="SelectStyle__Input-qr1jv6-3 llfDsg"
+        data-testid="input"
+        disabled=""
+        id="downshift-65-input"
+        value=""
+      />
+      <div
+        class="SelectStyle__IndicatorsContainer-qr1jv6-4 hZrLeS"
+        data-testid="indicators-container"
+      >
+        <button
+          aria-label="toggle menu"
+          class="SelectStyle___IndicatorButton-qr1jv6-5 SelectStyle__ToggleButton-qr1jv6-7 cdsRlh"
+          data-testid="toggle-button"
+          disabled=""
+          id="downshift-65-toggle-button"
+          tabindex="-1"
+          type="button"
+        >
+          <svg
+            class="IconStyle__VerticalCenteredSvg-x7d280-0 cJSNzi"
+            data-testid="icon-svg"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 100 100"
+            width="1em"
+          >
+            <polygon
+              points="11.7984725 19 49.9935275 57.3950291 88.1885825 19 99.987055 30.7984725 49.9935275 80.792 0 30.7984725"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+    <ul
+      aria-labelledby="downshift-65-label"
+      class="SelectStyle__Menu-qr1jv6-9 bHPggC"
+      data-testid="menu"
+      id="downshift-65-menu"
+      role="listbox"
+    >
+      <li
+        class="SelectStyle__EmptyList-qr1jv6-11 jbauMg"
+        data-testid="empty-list"
+      >
+        No results found. Try another keyword to search for.
+      </li>
+    </ul>
+  </div>
+</DocumentFragment>
+`;
diff --git a/yarn.lock b/yarn.lock
index 2de98c2ff..12ee5c663 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5534,7 +5534,7 @@ component-emitter@^1.2.1:
   resolved "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz#16e4070fba8ae29b679f2215853ee181ab2eabc0"
   integrity sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==
 
-compute-scroll-into-view@^1.0.14:
+compute-scroll-into-view@^1.0.14, compute-scroll-into-view@^1.0.16:
   version "1.0.16"
   resolved "https://registry.yarnpkg.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.16.tgz#5b7bf4f7127ea2c19b750353d7ce6776a90ee088"
   integrity sha512-a85LHKY81oQnikatZYA90pufpZ6sQx++BoCxOEMsjpZx+ZnaKGQnCyCehTRr/1p9GBIAHTjcU9k71kSYWloLiQ==
@@ -6324,6 +6324,16 @@ downshift@^6.0.6:
     prop-types "^15.7.2"
     react-is "^16.13.1"
 
+downshift@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/downshift/-/downshift-6.1.0.tgz#f008063d9b63935910d9db12ead07979ab51ce66"
+  integrity sha512-MnEJERij+1pTVAsOPsH3q9MJGNIZuu2sT90uxOCEOZYH6sEzkVGtUcTBVDRQkE8y96zpB7uEbRn24aE9VpHnZg==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    compute-scroll-into-view "^1.0.16"
+    prop-types "^15.7.2"
+    react-is "^17.0.1"
+
 duplexer@^0.1.1:
   version "0.1.1"
   resolved "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"
@@ -11730,6 +11740,11 @@ react-hotkeys@2.0.0:
   dependencies:
     prop-types "^15.6.1"
 
+react-id-generator@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/react-id-generator/-/react-id-generator-3.0.1.tgz#30ec683954b3c0a5aa0732c4b98ed0f88fd85d00"
+  integrity sha512-YxorMaYxB8ItXA3Cuadcl/8ZaquU9Tzrrr5ogFL8tNqevF96cmCtx3LZLXYqBEj3BxoV9aBIK5yJjIuX/XHQ1A==
+
 react-inspector@^5.0.1:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/react-inspector/-/react-inspector-5.1.0.tgz#45a325e15f33e595be5356ca2d3ceffb7d6b8c3a"
@@ -11744,6 +11759,11 @@ react-is@^16.12.0, react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1, react-
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-is@^17.0.1:
+  version "17.0.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
+  integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
+
 react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"