@transferwise/components 45.28.0 → 46.0.0

package/src/inputs/SelectInput.spec.tsx

@@ -1,5 +1,5 @@
 import { act, screen, within } from '@testing-library/react';
-import userEvent, { specialChars } from '@testing-library/user-event';
+import userEvent from '@testing-library/user-event';
 
 import { render, mockMatchMedia, mockResizeObserver } from '../test-utils';
 
@@ -44,7 +44,7 @@ describe('SelectInput', () => {
     // eslint-disable-next-line @typescript-eslint/require-await
     await act(async () => {
       userEvent.tab();
-      userEvent.keyboard(specialChars.enter);
+      userEvent.keyboard(' ');
     });
 
     const footer = screen.getByText('All items shown');
@@ -59,7 +59,7 @@ describe('SelectInput', () => {
     userEvent.keyboard('x');
     expect(footer).toHaveTextContent(/‘urx’$/);
 
-    userEvent.keyboard(specialChars.backspace);
+    userEvent.keyboard('{Backspace}');
     expect(footer).toHaveTextContent(/‘ur’$/);
   });
 
@@ -110,7 +110,7 @@ describe('SelectInput', () => {
     // eslint-disable-next-line @typescript-eslint/require-await
     await act(async () => {
       userEvent.tab();
-      userEvent.keyboard(specialChars.enter);
+      userEvent.keyboard(' ');
     });
 
     const listbox = screen.getByRole('listbox');
@@ -125,7 +125,7 @@ describe('SelectInput', () => {
     userEvent.keyboard('x');
     expect(within(listbox).queryByRole('option')).not.toBeInTheDocument();
 
-    userEvent.keyboard(specialChars.backspace);
+    userEvent.keyboard('{Backspace}');
     expect(within(listbox).getByRole('option')).toBeInTheDocument();
 
     const option = within(listbox).getAllByRole('option')[0];

package/src/inputs/SelectInput.tsx

@@ -42,7 +42,8 @@ function inferSearchableStrings(value: unknown) {
 
 const SelectInputTriggerButtonPropsContext = createContext<{
   ref?: React.ForwardedRef<HTMLButtonElement>;
-  onClick?: () => void;
+  onClick?: (event: React.MouseEvent) => void;
+  onKeyDown?: (event: React.KeyboardEvent) => void;
   [key: string]: unknown;
 }>({});
 const SelectInputOptionContentWithinTriggerContext = createContext(false);
@@ -266,6 +267,16 @@ export function SelectInput<T = string>({
                     onClick: () => {
                       setOpen((prev) => !prev);
                     },
+                    onKeyDown: (event: React.KeyboardEvent) => {
+                      if (
+                        event.key === ' ' ||
+                        event.key === 'Enter' ||
+                        event.key === 'ArrowDown' ||
+                        event.key === 'ArrowUp'
+                      ) {
+                        setOpen((prev) => !prev);
+                      }
+                    },
                   },
                   getInteractionProps(),
                 ),
@@ -326,14 +337,16 @@ export function SelectInputTriggerButton<T extends SelectInputTriggerButtonEleme
   as = 'button' as T,
   ...restProps
 }: SelectInputTriggerButtonProps<T>) {
-  const { ref, onClick, ...interactionProps } = useContext(SelectInputTriggerButtonPropsContext);
+  const { ref, onClick, onKeyDown, ...interactionProps } = useContext(
+    SelectInputTriggerButtonPropsContext,
+  );
 
   return (
     <ListboxBase.Button
       ref={ref}
       as={PolymorphicWithOverrides}
       __overrides={{ as, ...interactionProps }}
-      {...mergeProps({ onClick }, restProps)}
+      {...mergeProps({ onClick, onKeyDown }, restProps)}
     />
   );
 }

package/src/modal/Modal.rtl.spec.js

@@ -1,8 +1,10 @@
 import { Position } from '../common';
-import { render, fireEvent, screen } from '../test-utils';
+import { render, fireEvent, screen, mockMatchMedia } from '../test-utils';
 
 import Modal from './Modal';
 
+mockMatchMedia();
+
 describe('Modal', () => {
   const props = {
     onClose: jest.fn(),

package/src/modal/Modal.spec.js

@@ -1,10 +1,12 @@
 import { mount } from 'enzyme';
 
 import { Title } from '..';
+import { mockMatchMedia } from '../test-utils';
 
 import Modal from './Modal';
 
 jest.useFakeTimers();
+mockMatchMedia();
 jest.mock('../common');
 
 const defaultLocale = 'en-GB';

package/src/modal/Modal.tsx

@@ -52,7 +52,7 @@ const Modal = ({
 }: ModalProps) => {
   const checkSpecialClasses = (classToCheck: string) =>
     className?.split(' ').includes(classToCheck);
-  const { isMobile, isMedium: isTablet } = useLayout();
+  const { isMedium } = useLayout();
 
   // These should be replaced with props in breaking change.
   const isCompact = checkSpecialClasses('compact');
@@ -60,7 +60,7 @@ const Modal = ({
 
   const contentReference = useRef<HTMLDivElement>(null);
 
-  return isMobile || isTablet ? (
+  return !isMedium ? (
     <Drawer
       open={open}
       headerTitle={title}

package/src/ssr.spec.js

@@ -12,6 +12,7 @@ const excluded = new Set([
   'useSnackbar',
   'useDirection',
   'useLayout',
+  'useScreenSize',
 
   // specific components
   'Provider',

package/src/uploadInput/UploadInput.spec.tsx

@@ -2,7 +2,7 @@ import { within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { Status } from '../common';
-import { render, screen, waitFor, waitForElementToBeRemoved } from '../test-utils';
+import { mockMatchMedia, render, screen, waitFor, waitForElementToBeRemoved } from '../test-utils';
 
 import UploadInput, { UploadInputProps } from './UploadInput';
 import { TEST_IDS as UPLOAD_BUTTON_TEST_IDS } from './uploadButton/UploadButton';
@@ -10,6 +10,8 @@ import { TEST_IDS as UPLOAD_ITEM_TEST_IDS } from './uploadItem/UploadItem';
 
 const spiedDateObject = jest.spyOn(global, 'Date');
 
+mockMatchMedia();
+
 describe('UploadInput', () => {
   const pngFile = new File(['foo'], 'foo.png', { type: 'image/png' });
   const jpgFile = new File(['foo'], 'foo.jpg', { type: 'image/jpeg' });