@bitrise/bitkit 10.10.0-alpha-dropdown-release.2 → 10.10.0-alpha-dropdown-release.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "10.10.0-alpha-dropdown-release.2",
+  "version": "10.10.0-alpha-dropdown-release.3",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",

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

@@ -2,6 +2,9 @@ import { ReactNode, useState } from 'react';
 import { ComponentStoryFn } from '@storybook/react';
 import Notification from '../Notification/Notification';
 import Avatar from '../Avatar/Avatar';
+import Provider from '../Provider/Provider';
+import Dialog from '../Dialog/Dialog';
+import DialogBody from '../Dialog/DialogBody';
 import Dropdown, {
   DropdownGroup,
   DropdownOption,
@@ -108,3 +111,16 @@ export const Default: ComponentStoryFn<typeof Dropdown> = (args) => {
     </form>
   );
 };
+export const InsideDialog = () => {
+  return (
+    <Provider>
+      <Dialog isOpen isClosable>
+        <DialogBody>
+          <Dropdown search={false}>
+            <DropdownOption value="x">Test Opt1</DropdownOption>
+          </Dropdown>
+        </DialogBody>
+      </Dialog>
+    </Provider>
+  );
+};

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

@@ -5,7 +5,7 @@ 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 { CustomSearch, InsideDialog } from './Dropdown.stories';
 import { DropdownDetailedOption } from './DropdownOption';
 
 const render = (ui: React.ReactElement) => {
@@ -519,5 +519,34 @@ describe('Dropdown', () => {
       await userEvent.keyboard('{Enter}');
       expect(handler).toHaveBeenCalledWith('x');
     });
+
+    describe('dismiss with esc', () => {
+      it('works', async () => {
+        const Test = () => {
+          return (
+            <Dropdown>
+              <DropdownOption value="x">Test Opt1</DropdownOption>
+            </Dropdown>
+          );
+        };
+        render(<Test />);
+
+        const button = await screen.findByRole('combobox');
+        await userEvent.click(button);
+        const list = await screen.findByRole('listbox');
+        await userEvent.keyboard('{Escape}');
+        expect(list).not.toBeInTheDocument();
+      });
+      it('works in dialog', async () => {
+        render(<InsideDialog />);
+
+        const button = await screen.findByRole('combobox');
+        await userEvent.click(button);
+        const list = await screen.findByRole('listbox');
+        await userEvent.keyboard('{Escape}');
+        expect(list).not.toBeVisible();
+        expect(button).toBeVisible();
+      });
+    });
   });
 });

package/src/Components/Dropdown/hooks/useFloatingDropdown.ts

@@ -1,4 +1,4 @@
-import { RefObject, useEffect, useRef, useState } from 'react';
+import { KeyboardEvent, RefObject, useEffect, useRef, useState } from 'react';
 import {
   autoUpdate,
   useFloating,
@@ -21,17 +21,6 @@ const useFloatingDropdown = ({ enabled, optionsRef }: { enabled: boolean; option
   useEffect(() => {
     setKeyboardControlled(true);
   }, [isOpen]);
-  const keyboardControlledHandlers = {
-    onPointerEnter() {
-      setKeyboardControlled(false);
-    },
-    onPointerMove() {
-      setKeyboardControlled(false);
-    },
-    onKeyDown() {
-      setKeyboardControlled(true);
-    },
-  };
 
   const { context, reference, floating, strategy, x, y } = useFloating({
     open: enabled && isOpen,
@@ -52,6 +41,22 @@ const useFloatingDropdown = ({ enabled, optionsRef }: { enabled: boolean; option
       flip(),
     ],
   });
+
+  const keyboardControlledHandlers = {
+    onPointerEnter() {
+      setKeyboardControlled(false);
+    },
+    onPointerMove() {
+      setKeyboardControlled(false);
+    },
+    onKeyDown(ev: KeyboardEvent) {
+      if (ev.key === 'Escape') {
+        ev.stopPropagation();
+        setOpen(false);
+      }
+      setKeyboardControlled(true);
+    },
+  };
   const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
     useClick(context, { enabled }),
     useRole(context, { role: 'listbox' }),
@@ -66,6 +71,7 @@ const useFloatingDropdown = ({ enabled, optionsRef }: { enabled: boolean; option
       onNavigate: setActiveIndex,
     }),
     {
+      reference: { onKeyDown: keyboardControlledHandlers.onKeyDown },
       floating: keyboardControlledHandlers,
     },
   ]);