@bitrise/bitkit 10.6.0 → 10.9.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "10.6.0",
+  "version": "10.9.0",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",
@@ -21,8 +21,11 @@
   },
   "dependencies": {
     "@chakra-ui/react": "^2.2.4",
+    "@chakra-ui/react-utils": "^2.0.1",
+    "@chakra-ui/utils": "^2.0.4",
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
+    "@floating-ui/react-dom-interactions": "^0.8.1",
     "@popperjs/core": "^2.11.5",
     "classnames": "^2.3.1",
     "clipboard": "^2.0.11",
@@ -58,10 +61,14 @@
     "@storybook/testing-library": "^0.0.13",
     "@storybook/theming": "^6.5.9",
     "@svgr/core": "^6.3.0",
+    "@testing-library/dom": "^8.16.0",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^14.3.0",
     "@types/cheerio": "^0.22.31",
     "@types/clipboard": "^2.0.1",
     "@types/enzyme": "^3.10.12",
-    "@types/jest": "^27.5.2",
+    "@types/jest": "^28.1.6",
     "@types/luxon": "^2.4.0",
     "@types/react": "18.0.15",
     "@types/react-dom": "^18.0.6",
@@ -87,12 +94,14 @@
     "glob": "^8.0.3",
     "husky": "^7.0.4",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.5.1",
+    "jest": "^28.1.3",
+    "jest-environment-jsdom": "^28.1.3",
     "jsdom": "^19.0.0",
     "prettier": "^2.7.1",
+    "react-hook-form": "^7.33.1",
     "recast": "^0.21.1",
     "semantic-release": "^19.0.3",
-    "ts-jest": "^27.1.5",
+    "ts-jest": "^28.0.7",
     "ts-node": "^10.9.1",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^4.7.4",
@@ -110,12 +119,13 @@
     "moduleNameMapper": {
       "^.+\\.css$": "identity-obj-proxy"
     },
-    "setupFiles": [
-      "./jest.setup.js"
+    "setupFilesAfterEnv": [
+      "./spec/jest.setup.ts"
     ],
     "transform": {
       "\\.tsx?$": "ts-jest"
-    }
+    },
+    "testEnvironment": "./spec/test-env.js"
   },
   "resolutions": {
     "**/ast-types": "npm:@gkz/ast-types",

package/src/Components/Dropdown/Dropdown.context.tsx

@@ -0,0 +1,37 @@
+import { ComponentProps, ReactNode } from 'react';
+import { createStylesContext } from '@chakra-ui/react';
+import { createContext } from '@chakra-ui/react-utils';
+
+const [DropdownStylesProvider, useDropdownStyles] = createStylesContext('Dropdown');
+
+export type DropdownEventArgs = { value: string; index: number | undefined; label: ReactNode };
+
+type DropdownContext = {
+  formValue: string;
+  onOptionSelected: (arg: DropdownEventArgs) => void;
+  searchValue: string;
+  searchRef: React.Ref<HTMLInputElement>;
+  searchOnChange: (sv: string) => void;
+  searchOnSubmit: () => void;
+  filter?: string;
+  activeIndex?: number | null;
+  getItemProps: (x: object) => object;
+};
+
+const [DropdownContextProvider, useDropdownContext] = createContext<DropdownContext>();
+
+const DropdownProvider = ({
+  styles,
+  context,
+  children,
+}: {
+  styles: ComponentProps<typeof DropdownStylesProvider>['value'];
+  children: ReactNode;
+  context: DropdownContext;
+}) => (
+  <DropdownContextProvider value={context}>
+    <DropdownStylesProvider value={styles}>{children}</DropdownStylesProvider>
+  </DropdownContextProvider>
+);
+
+export { DropdownProvider, useDropdownContext, useDropdownStyles };

package/src/Components/Dropdown/Dropdown.stories.tsx

@@ -0,0 +1,89 @@
+import { ReactNode, useState } from 'react';
+import { ComponentStoryFn } from '@storybook/react';
+import Notification from '../Notification/Notification';
+import Avatar from '../Avatar/Avatar';
+import Dropdown, {
+  DropdownGroup,
+  DropdownOption,
+  DropdownDetailedOption,
+  NoResultsFound,
+  DropdownSearch,
+} from './Dropdown';
+
+export default {
+  title: 'Components/Dropdown',
+  component: Dropdown,
+};
+
+const opts = [
+  { value: 'x1', label: 'text1' },
+  { value: 'x2', label: 'text2' },
+  { value: 'x3', label: 'text3' },
+  { value: 'x4', label: 'text4' },
+];
+export const CustomSearch = () => {
+  const [searchValue, setSearchValue] = useState('');
+  const [options, setOptions] = useState<ReactNode[]>([]);
+  const searchOnChange = (nv: string) => {
+    setSearchValue(nv);
+    setOptions(
+      opts
+        .filter((opt) => opt.label.includes(nv))
+        .map((opt) => (
+          <DropdownOption value={opt.value} key={opt.value}>
+            {opt.label}
+          </DropdownOption>
+        )),
+    );
+  };
+  return <Dropdown search={<DropdownSearch value={searchValue} onChange={searchOnChange} />}>{options}</Dropdown>;
+};
+export const CustomSearchError = () => {
+  return (
+    <Dropdown search={<DropdownSearch />}>
+      <NoResultsFound>
+        <Notification status="error">Error</Notification>
+      </NoResultsFound>
+    </Dropdown>
+  );
+};
+
+export const WithDetail = () => {
+  return (
+    <Dropdown>
+      <DropdownDetailedOption value="user1" icon={<Avatar name="some" />} title="hello" subtitle="sub" />
+    </Dropdown>
+  );
+};
+
+export const Default: ComponentStoryFn<typeof Dropdown> = (args) => {
+  return (
+    <form
+      onSubmit={(ev) => {
+        ev.preventDefault();
+        const data = new FormData(ev.target as HTMLFormElement);
+        console.log(data.get('dropdown'));
+      }}
+    >
+      <Dropdown aria-label="test" name="dropdown" w="800px" {...args}>
+        <DropdownOption>Unset</DropdownOption>
+        <DropdownOption value="x1">text1</DropdownOption>
+        <DropdownOption value="x2">text2</DropdownOption>
+        <DropdownOption value="x3">text3</DropdownOption>
+        <DropdownOption value="x4">text4</DropdownOption>
+        <DropdownGroup label="test">
+          <DropdownOption value="x5">text5</DropdownOption>
+          <DropdownOption value="x6">text6</DropdownOption>
+          <DropdownOption value="x7">text7</DropdownOption>
+        </DropdownGroup>
+        <DropdownOption value="v1">
+          <div>label</div>
+        </DropdownOption>
+        <DropdownOption value="v2">
+          <div>label</div>
+        </DropdownOption>
+      </Dropdown>
+      <button type="submit">Send</button>
+    </form>
+  );
+};

package/src/Components/Dropdown/Dropdown.test.tsx

@@ -0,0 +1,431 @@
+import { forwardRef, MutableRefObject, StrictMode, useState } from 'react';
+import { setTimeout } from 'timers/promises';
+import { render as renderRTL, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useForm } from 'react-hook-form';
+import Avatar from '../Avatar/Avatar';
+import Dropdown, { DropdownGroup, DropdownOption } from './Dropdown';
+import { CustomSearch } from './Dropdown.stories';
+import { DropdownDetailedOption } from './DropdownOption';
+
+const render = (ui: React.ReactElement) => {
+  return renderRTL(<StrictMode>{ui}</StrictMode>);
+};
+
+const TestComponent = forwardRef<HTMLFormElement, { submit: (data: unknown) => void }>(({ submit, ...props }, ref) => {
+  const { register, handleSubmit } = useForm({ defaultValues: { dropdown: 'unset' } });
+
+  return (
+    <form {...props} onSubmit={handleSubmit(submit)} ref={ref}>
+      <Dropdown aria-label="Test" {...register('dropdown')}>
+        <DropdownOption value="x">Test Opt1</DropdownOption>
+        <DropdownOption value="y">Test Opt2</DropdownOption>
+        <DropdownOption value="z">Test Opt3</DropdownOption>
+      </Dropdown>
+      <button type="submit">Send</button>
+    </form>
+  );
+});
+
+describe('Dropdown', () => {
+  it('shows option on button', async () => {
+    render(<TestComponent submit={() => {}} />);
+    const button = await screen.findByRole('combobox', { name: 'Test' });
+    await userEvent.click(button);
+    const opt = await screen.findByRole('listbox');
+    await userEvent.selectOptions(opt, 'Test Opt1');
+    expect(button).toHaveTextContent('Test Opt1');
+  });
+
+  it('search field can be disabled', async () => {
+    render(
+      <Dropdown search={false}>
+        <DropdownOption value="x">Test Opt1</DropdownOption>
+        <DropdownOption value="y">Test Opt2</DropdownOption>
+        <DropdownOption value="z">Test Opt3</DropdownOption>
+      </Dropdown>,
+    );
+
+    const button = await screen.findByRole('combobox');
+    await userEvent.click(button);
+    await screen.findByRole('listbox');
+    expect(screen.queryByRole('search')).toBeNull();
+  });
+
+  it('works in controlled mode (from the outside)', async () => {
+    const Test = () => {
+      const [value, setValue] = useState('x');
+      return (
+        <>
+          <button type="button" onClick={() => setValue('y')}>
+            Test
+          </button>
+          <Dropdown value={value}>
+            <DropdownOption value="x">Test Opt1</DropdownOption>
+            <DropdownOption value="y">Test Opt2</DropdownOption>
+            <DropdownOption value="z">Test Opt3</DropdownOption>
+          </Dropdown>
+        </>
+      );
+    };
+    render(<Test />);
+    const button = await screen.findByRole('combobox');
+    expect(button).toHaveTextContent('Test Opt1');
+    const testBtn = await screen.findByRole('button');
+    await userEvent.click(testBtn);
+    expect(button).toHaveTextContent('Test Opt2');
+  });
+
+  it('works in controlled mode (from the inside)', async () => {
+    const Test = ({ valueRef }: { valueRef: MutableRefObject<string> }) => {
+      const [value, setValue] = useState('x');
+      valueRef.current = value;
+      return (
+        <Dropdown value={value} onChange={(ev) => setValue(ev.target.value)}>
+          <DropdownOption value="x">Test Opt1</DropdownOption>
+          <DropdownOption value="y">Test Opt2</DropdownOption>
+          <DropdownOption value="z">Test Opt3</DropdownOption>
+        </Dropdown>
+      );
+    };
+    const valueRef: { current: string } = { current: '' };
+    render(<Test valueRef={valueRef} />);
+    const button = await screen.findByRole('combobox');
+    expect(button).toHaveTextContent('Test Opt1');
+    await userEvent.click(button);
+    const opt = await screen.findByRole('listbox');
+    await userEvent.selectOptions(opt, 'Test Opt2');
+    expect(button).toHaveTextContent('Test Opt2');
+    expect(valueRef.current).toBe('y');
+  });
+
+  it('works in uncontrolled mode', async () => {
+    const handler = jest.fn();
+    const Test = () => {
+      return (
+        <Dropdown defaultValue="y" onChange={(ev) => handler(ev.target.value)}>
+          <DropdownOption value="x">Test Opt1</DropdownOption>
+          <DropdownOption value="y">Test Opt2</DropdownOption>
+          <DropdownOption value="z">Test Opt3</DropdownOption>
+        </Dropdown>
+      );
+    };
+    render(<Test />);
+    const button = await screen.findByRole('combobox');
+    expect(button).toHaveTextContent('Test Opt2');
+    await userEvent.click(button);
+    const opt = await screen.findByRole('listbox');
+    await userEvent.selectOptions(opt, 'Test Opt1');
+    expect(button).toHaveTextContent('Test Opt1');
+    expect(handler).toHaveBeenCalledTimes(1);
+    expect(handler).toHaveBeenCalledWith('x');
+  });
+
+  describe('react-hook-form support', () => {
+    it('sends data when submitted', async () => {
+      const handler = jest.fn();
+      render(<TestComponent submit={(data: unknown) => handler(data)} />);
+      const button = await screen.findByRole('combobox', { name: 'Test' });
+      const submit = await screen.findByRole('button', { name: 'Send' });
+      await userEvent.click(button);
+      const opt = await screen.findByRole('listbox');
+      await userEvent.selectOptions(opt, 'Test Opt1');
+      await userEvent.click(submit);
+
+      expect(handler).toHaveBeenCalledWith({ dropdown: 'x' });
+      expect(handler).toHaveBeenCalledTimes(1);
+    });
+
+    it('works with click', async () => {
+      const handler = jest.fn();
+      render(<TestComponent submit={(data: unknown) => handler(data)} />);
+      const button = await screen.findByRole('combobox', { name: 'Test' });
+      const submit = await screen.findByRole('button', { name: 'Send' });
+      await userEvent.click(button);
+      const option = await screen.findByRole('option', { name: 'Test Opt1' });
+      await userEvent.click(option);
+      await userEvent.click(submit);
+
+      expect(handler).toHaveBeenCalledWith({ dropdown: 'x' });
+      expect(handler).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not send data at all when not submitted', async () => {
+      const handler = jest.fn();
+      render(<TestComponent submit={(data: unknown) => handler(data)} />);
+      const button = await screen.findByRole('combobox', { name: 'Test' });
+      await userEvent.click(button);
+      const opt = await screen.findByRole('listbox');
+      await userEvent.selectOptions(opt, 'Test Opt1');
+
+      expect(handler).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('readOnly', () => {
+    it('does not open when clicked', async () => {
+      render(<Dropdown readOnly />);
+      const button = await screen.findByRole('combobox');
+      await userEvent.click(button);
+      await waitFor(() => setTimeout(50));
+      const list = screen.queryByRole('listbox');
+      expect(list).not.toBeInTheDocument();
+    });
+
+    it('does not open when activated with keyboard', async () => {
+      render(<Dropdown readOnly />);
+      await userEvent.keyboard('{Tab}');
+      await userEvent.keyboard('{ArrowDown}');
+      await waitFor(() => setTimeout(50));
+      const list = screen.queryByRole('listbox');
+      expect(list).not.toBeInTheDocument();
+    });
+  });
+
+  describe('detailed option', () => {
+    it('shows up as default value', async () => {
+      const Test = () => {
+        return (
+          <Dropdown defaultValue="y">
+            <DropdownDetailedOption value="y" icon={<Avatar name="hello" />} subtitle="ok" title="test" />
+          </Dropdown>
+        );
+      };
+      render(<Test />);
+      const button = await screen.findByRole('combobox');
+      expect(button).toHaveTextContent('hotestok');
+    });
+
+    it('is searchable', async () => {
+      const Test = () => {
+        return (
+          <Dropdown>
+            <DropdownDetailedOption value="y" icon={<Avatar name="hello" />} subtitle="ok" title="testx" />
+            <DropdownDetailedOption value="x" icon={<Avatar name="hello" />} subtitle="ok" title="test" />
+          </Dropdown>
+        );
+      };
+      render(<Test />);
+      const button = await screen.findByRole('combobox');
+      await userEvent.click(button);
+      const search = await screen.findByRole('search');
+      await userEvent.type(search, 'testx');
+      const option1 = screen.queryByRole('option', { name: 'testx' });
+      const option2 = screen.queryByRole('option', { name: 'test' });
+      expect(option1).toBeInTheDocument();
+      expect(option2).not.toBeInTheDocument();
+    });
+  });
+
+  describe('search', () => {
+    it('supports custom search', async () => {
+      render(<CustomSearch />);
+      const button = await screen.findByRole('combobox');
+
+      await userEvent.click(button);
+      const search = await screen.findByRole('search');
+      await userEvent.type(search, 'text1');
+      let option1 = screen.queryByRole('option', { name: 'text1' });
+      let option2 = screen.queryByRole('option', { name: 'text2' });
+      let option3 = screen.queryByRole('option', { name: 'text3' });
+      let option4 = screen.queryByRole('option', { name: 'text4' });
+      expect(option1).toBeInTheDocument();
+      expect(option2).not.toBeInTheDocument();
+      expect(option3).not.toBeInTheDocument();
+      expect(option4).not.toBeInTheDocument();
+      await userEvent.clear(search);
+      option1 = screen.queryByRole('option', { name: 'text1' });
+      option2 = screen.queryByRole('option', { name: 'text2' });
+      option3 = screen.queryByRole('option', { name: 'text3' });
+      option4 = screen.queryByRole('option', { name: 'text4' });
+      expect(option1).toBeInTheDocument();
+      expect(option2).toBeInTheDocument();
+      expect(option3).toBeInTheDocument();
+      expect(option4).toBeInTheDocument();
+    });
+
+    it('removes group when items are filtered', async () => {
+      render(
+        <Dropdown>
+          <DropdownOption value="x">Test Opt1</DropdownOption>
+          <DropdownGroup label="hey">
+            <DropdownOption value="y">Test Opt2</DropdownOption>
+            <DropdownOption value="z">Test Opt3</DropdownOption>
+          </DropdownGroup>
+        </Dropdown>,
+      );
+      const button = await screen.findByRole('combobox');
+
+      await userEvent.click(button);
+      const search = await screen.findByRole('search');
+      await userEvent.type(search, 'opt1');
+      const option1 = screen.queryByRole('option', { name: 'Test Opt1' });
+      const option2 = screen.queryByRole('option', { name: 'Test Opt2' });
+      const option3 = screen.queryByRole('option', { name: 'Test Opt3' });
+      const group = screen.queryByText('hey');
+      expect(option1).toBeInTheDocument();
+      expect(option2).not.toBeInTheDocument();
+      expect(option3).not.toBeInTheDocument();
+      expect(group).not.toBeInTheDocument();
+    });
+
+    it('filters inside group', async () => {
+      render(
+        <Dropdown>
+          <DropdownOption value="x">Test Opt1</DropdownOption>
+          <DropdownGroup label="hey">
+            <DropdownOption value="y">Test Opt2</DropdownOption>
+            <DropdownOption value="z">Test Opt3</DropdownOption>
+          </DropdownGroup>
+        </Dropdown>,
+      );
+      const button = await screen.findByRole('combobox');
+
+      await userEvent.click(button);
+      const search = await screen.findByRole('search');
+      await userEvent.type(search, 'opt2');
+      const option1 = screen.queryByRole('option', { name: 'Test Opt1' });
+      const option2 = screen.queryByRole('option', { name: 'Test Opt2' });
+      const option3 = screen.queryByRole('option', { name: 'Test Opt3' });
+      const group = screen.queryByText('hey');
+      expect(option1).not.toBeInTheDocument();
+      expect(option2).toBeInTheDocument();
+      expect(option3).not.toBeInTheDocument();
+      expect(group).toBeInTheDocument();
+    });
+
+    it('filters options', async () => {
+      render(<TestComponent submit={() => {}} />);
+      const button = await screen.findByRole('combobox', { name: 'Test' });
+
+      await userEvent.click(button);
+      const search = await screen.findByRole('search');
+      await userEvent.type(search, 'opt3');
+      const option1 = screen.queryByRole('option', { name: 'Test Opt1' });
+      const option2 = screen.queryByRole('option', { name: 'Test Opt2' });
+      const option3 = screen.queryByRole('option', { name: 'Test Opt3' });
+      expect(option1).not.toBeInTheDocument();
+      expect(option2).not.toBeInTheDocument();
+      expect(option3).toBeInTheDocument();
+    });
+
+    it('showns no results found', async () => {
+      render(<TestComponent submit={() => {}} />);
+      const button = await screen.findByRole('combobox', { name: 'Test' });
+
+      await userEvent.click(button);
+      const search = await screen.findByRole('search');
+      await userEvent.type(search, 'x');
+      const notFoundMessage = await screen.findByText('No results found for `x`');
+      expect(notFoundMessage).toBeInTheDocument();
+    });
+
+    it('resets after closing', async () => {
+      render(<TestComponent submit={() => {}} />);
+      const button = await screen.findByRole('combobox', { name: 'Test' });
+
+      await userEvent.click(button);
+      const search = await screen.findByRole('search');
+      const option = await screen.findByRole('option', { name: 'Test Opt1' });
+      await userEvent.type(search, 'x');
+      await waitFor(() => expect(option).not.toBeInTheDocument());
+      await userEvent.click(button);
+      await userEvent.click(button);
+      const option2 = await screen.findByRole('option', { name: 'Test Opt1' });
+      expect(option2).toBeInTheDocument();
+    });
+  });
+
+  describe('keyboard navigation', () => {
+    it('the initial value is the active element', async () => {
+      const handler = jest.fn();
+      const Test = () => {
+        return (
+          <Dropdown defaultValue="y" onChange={(ev) => handler(ev.target.value)}>
+            <DropdownOption value="x">Test Opt1</DropdownOption>
+            <DropdownOption value="y">Test Opt2</DropdownOption>
+            <DropdownOption value="z">Test Opt3</DropdownOption>
+          </Dropdown>
+        );
+      };
+      render(<Test />);
+      const button = await screen.findByRole('combobox');
+      await userEvent.click(button);
+      const search = await screen.findByRole('search');
+      await waitFor(() => expect(search).toHaveFocus());
+      await screen.findByRole('listbox');
+      await userEvent.keyboard('{ArrowDown}');
+      await userEvent.keyboard('{Enter}');
+      expect(handler).toHaveBeenCalledWith('z');
+    });
+
+    it('the selected value is the active element', async () => {
+      const handler = jest.fn();
+      render(<TestComponent submit={(data: unknown) => handler(data)} />);
+      const button = await screen.findByRole('combobox', { name: 'Test' });
+      const submit = await screen.findByRole('button', { name: 'Send' });
+
+      await userEvent.click(button);
+      const search = await screen.findByRole('search');
+      await waitFor(() => expect(search).toHaveFocus());
+      await screen.findByRole('listbox');
+      await userEvent.keyboard('{ArrowDown}');
+      await userEvent.keyboard('{Enter}');
+      await userEvent.click(button);
+      await userEvent.keyboard('{ArrowDown}');
+      await userEvent.keyboard('{Enter}');
+      await userEvent.click(submit);
+      expect(handler).toHaveBeenCalledTimes(1);
+      expect(handler).toHaveBeenCalledWith({ dropdown: 'y' });
+    });
+
+    it('works', async () => {
+      const handler = jest.fn();
+      render(<TestComponent submit={(data: unknown) => handler(data)} />);
+      const button = await screen.findByRole('combobox', { name: 'Test' });
+      const submit = await screen.findByRole('button', { name: 'Send' });
+
+      await userEvent.click(button);
+      const search = await screen.findByRole('search');
+      await waitFor(() => expect(search).toHaveFocus());
+      await userEvent.keyboard('{ArrowDown}');
+      await userEvent.keyboard('{ArrowDown}');
+      await userEvent.keyboard('{Enter}');
+      await userEvent.click(submit);
+      expect(handler).toHaveBeenCalledWith({ dropdown: 'y' });
+      expect(handler).toHaveBeenCalledTimes(1);
+    });
+
+    it('works with groups', async () => {
+      const handler = jest.fn();
+      const Test = () => {
+        return (
+          <Dropdown onChange={(ev) => handler(ev.target.value)}>
+            <DropdownOption value="x">Test Opt1</DropdownOption>
+            <DropdownGroup label="hey">
+              <DropdownOption value="y">Test Opt2</DropdownOption>
+              <DropdownOption value="z">Test Opt3</DropdownOption>
+            </DropdownGroup>
+          </Dropdown>
+        );
+      };
+      render(<Test />);
+      const button = await screen.findByRole('combobox');
+      await userEvent.click(button);
+      let search = await screen.findByRole('search');
+      await waitFor(() => expect(search).toHaveFocus());
+      await screen.findByRole('listbox');
+      await userEvent.keyboard('{ArrowDown}');
+      await userEvent.keyboard('{ArrowDown}');
+      await userEvent.keyboard('{Enter}');
+      expect(handler).toHaveBeenCalledWith('y');
+      await userEvent.click(button);
+      search = await screen.findByRole('search');
+      await waitFor(() => expect(search).toHaveFocus());
+      await userEvent.keyboard('{ArrowDown}');
+      await userEvent.keyboard('{ArrowDown}');
+      await userEvent.keyboard('{Enter}');
+      expect(handler).toHaveBeenCalledWith('x');
+    });
+  });
+});