@transferwise/components 0.0.0-experimental-3fa5a2b → 0.0.0-experimental-47ae02a

package/src/dateLookup/DateLookup.testingLibrary.spec.js

@@ -1,9 +1,9 @@
 import '@testing-library/jest-dom';
 import user from '@testing-library/user-event';
+import { act } from 'react';
 
 import { render, screen, mockMatchMedia } from '../test-utils';
-
-import DateLookup from '.';
+import DateLookup from './DateLookup';
 
 mockMatchMedia();
 
@@ -20,171 +20,218 @@ describe('DateLookup (events)', () => {
   const min = new Date(2018, 11, 26);
   const max = new Date(2018, 11, 28);
 
-  let props;
-  let container;
-  let rerender;
-
-  beforeEach(() => {
-    props = {
-      value: date,
-      min,
-      max,
-      size: 'lg',
-      placeholder: 'Asd..',
-      label: 'label',
-      'aria-labelledby': 'prioritized-label',
-      onChange: jest.fn(),
-      onClick: jest.fn(),
-      disabled: false,
-      clearable: false,
+  describe('when not clearable', () => {
+    /** @type {jest.Mock} */
+    let handleChange;
+
+    const setup = async () => {
+      handleChange = jest.fn();
+
+      /** @type {import('@testing-library/react').RenderResult} */
+      let view;
+      await act(async () => {
+        view = render(
+          <>
+            {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+            <label id="prioritized-label">Prioritized label</label>
+            <DateLookup
+              value={date}
+              min={min}
+              max={max}
+              size="lg"
+              placeholder="Asd.."
+              label="label"
+              aria-labelledby="prioritized-label"
+              disabled={false}
+              clearable={false}
+              onChange={handleChange}
+              onClick={jest.fn()}
+            />
+          </>,
+        );
+      });
+      return view;
     };
-    ({ container } = render(
-      <>
-        {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-        <label id="prioritized-label">Prioritized label</label>
-        <DateLookup {...props} />
-      </>,
-    ));
-  });
 
-  afterEach(() => {
-    closeDateLookup();
-  });
+    it('switches to years', async () => {
+      const view = await setup();
+      openDateLookup(view);
+      clickDateButton(view);
 
-  it('switches to years', () => {
-    openDateLookup();
-    clickDateButton();
+      expect(getActiveYearButton(view)).toHaveFocus();
 
-    expect(getActiveYearButton()).toHaveFocus();
-  });
+      closeDateLookup(view);
+    });
 
-  it('has aria-label for 20 years', () => {
-    openDateLookup();
-    clickDateButton();
+    it('has aria-label for 20 years', async () => {
+      const view = await setup();
+      openDateLookup(view);
+      clickDateButton(view);
 
-    expect(getButtonByAriaLabel('next 20 years')).toBeInTheDocument();
-    expect(getButtonByAriaLabel('previous 20 years')).toBeInTheDocument();
-  });
+      expect(getButtonByAriaLabel('next 20 years')).toBeInTheDocument();
+      expect(getButtonByAriaLabel('previous 20 years')).toBeInTheDocument();
 
-  it('switches to months', () => {
-    openDateLookup();
-    clickDateButton();
-    user.click(getActiveYearButton());
+      closeDateLookup(view);
+    });
 
-    expect(getActiveMonthButton()).toHaveFocus();
-  });
+    it('switches to months', async () => {
+      const view = await setup();
+      openDateLookup(view);
+      clickDateButton(view);
+      user.click(getActiveYearButton(view));
 
-  it('has aria label for year', () => {
-    openDateLookup();
-    clickDateButton();
-    user.click(getActiveYearButton());
+      expect(getActiveMonthButton(view)).toHaveFocus();
 
-    expect(getButtonByAriaLabel('next year')).toBeInTheDocument();
-    expect(getButtonByAriaLabel('previous year')).toBeInTheDocument();
-  });
+      closeDateLookup(view);
+    });
 
-  it('switches to days', () => {
-    openDateLookup();
-    clickDateButton();
-    user.click(getActiveYearButton());
-    user.click(getActiveMonthButton());
+    it('has aria label for year', async () => {
+      const view = await setup();
+      openDateLookup(view);
+      clickDateButton(view);
+      user.click(getActiveYearButton(view));
 
-    expect(getActiveDayButton()).toHaveFocus();
-  });
+      expect(getButtonByAriaLabel('next year')).toBeInTheDocument();
+      expect(getButtonByAriaLabel('previous year')).toBeInTheDocument();
 
-  it('has aria label for month', () => {
-    openDateLookup();
-    clickDateButton();
-    user.click(getActiveYearButton());
-    user.click(getActiveMonthButton());
+      closeDateLookup(view);
+    });
 
-    expect(getButtonByAriaLabel('next month')).toBeInTheDocument();
-    expect(getButtonByAriaLabel('previous month')).toBeInTheDocument();
-  });
+    it('switches to days', async () => {
+      const view = await setup();
+      openDateLookup(view);
+      clickDateButton(view);
+      user.click(getActiveYearButton(view));
+      user.click(getActiveMonthButton(view));
 
-  it('updates selected date and closes', () => {
-    openDateLookup();
-    const d = new Date(2018, 11, 28);
-    const newDay = screen.getByText(d.getDate().toString());
-    user.click(newDay);
+      expect(getActiveDayButton(view)).toHaveFocus();
 
-    expect(props.onChange).toHaveBeenCalledWith(d);
-    expect(getOpenButton()).toHaveFocus();
-  });
+      closeDateLookup(view);
+    });
 
-  it('has aria label on selected date', () => {
-    openDateLookup();
-    const d = new Date(2018, 11, 28);
-    const newDay = screen.getByText(d.getDate().toString());
-    user.click(newDay);
-    openDateLookup();
-    expect(screen.getByRole('button', { name: /selected day/i })).toBeInTheDocument();
-  });
+    it('has aria label for month', async () => {
+      const view = await setup();
+      openDateLookup(view);
+      clickDateButton(view);
+      user.click(getActiveYearButton(view));
+      user.click(getActiveMonthButton(view));
 
-  it('supports custom `aria-labelledby` attribute', () => {
-    expect(screen.getByLabelText('Prioritized label')).toHaveClass('input-group');
+      expect(getButtonByAriaLabel('next month')).toBeInTheDocument();
+      expect(getButtonByAriaLabel('previous month')).toBeInTheDocument();
+
+      closeDateLookup(view);
+    });
+
+    it('updates selected date and closes', async () => {
+      const view = await setup();
+      openDateLookup(view);
+      const d = new Date(2018, 11, 28);
+      const newDay = screen.getByText(d.getDate().toString());
+      user.click(newDay);
+
+      expect(handleChange).toHaveBeenCalledWith(d);
+      expect(getOpenButton(view)).toHaveFocus();
+
+      closeDateLookup(view);
+    });
+
+    it('has aria label on selected date', async () => {
+      const view = await setup();
+      openDateLookup(view);
+      const d = new Date(2018, 11, 28);
+      const newDay = screen.getByText(d.getDate().toString());
+      user.click(newDay);
+      openDateLookup(view);
+      expect(screen.getByRole('button', { name: /selected day/i })).toBeInTheDocument();
+
+      closeDateLookup(view);
+    });
+
+    it('supports custom `aria-labelledby` attribute', async () => {
+      const view = await setup();
+      expect(screen.getByLabelText('Prioritized label')).toHaveClass('input-group');
+
+      closeDateLookup(view);
+    });
   });
 
   describe('when is clearable', () => {
-    beforeEach(() => {
-      props = { value: date, onChange: jest.fn(), clearable: true };
-      ({ container, rerender } = render(<DateLookup {...props} />));
-    });
+    /** @satisfies {import('./DateLookup').DateLookupProps} */
+    const props = {
+      value: date,
+      onChange: jest.fn(),
+      clearable: true,
+    };
+
+    const setup = async () => {
+      /** @type {import('@testing-library/react').RenderResult} */
+      let view;
+      await act(async () => {
+        view = render(<DateLookup {...props} />);
+      });
+      return view;
+    };
 
-    it(`doesn't show clear button if disable is true`, () => {
-      expect(getClearButton()).toBeInTheDocument();
+    it(`doesn't show clear button if disable is true`, async () => {
+      const view = await setup();
+      expect(getClearButton(view)).toBeInTheDocument();
 
-      rerender(<DateLookup {...props} disabled />);
+      view.rerender(<DateLookup {...props} disabled />);
 
-      expect(getClearButton()).not.toBeInTheDocument();
+      expect(getClearButton(view)).not.toBeInTheDocument();
     });
 
-    it('when user clicks on clear the focus returns to btn', () => {
-      clickClearButton();
-      expect(getOpenButton()).toHaveFocus();
+    it('when user clicks on clear the focus returns to btn', async () => {
+      const view = await setup();
+      clickClearButton(view);
+      expect(getOpenButton(view)).toHaveFocus();
     });
 
-    it('onChange gets called with null when reset button is clicked', () => {
-      clickClearButton();
+    it('onChange gets called with null when reset button is clicked', async () => {
+      const view = await setup();
+      clickClearButton(view);
       expect(props.onChange).toHaveBeenCalledWith(null);
     });
   });
 
-  const openDateLookup = () => {
-    user.click(getOpenButton());
-  };
+  const openDateLookup = (/** @type {import('@testing-library/react').RenderResult} */ view) =>
+    user.click(getOpenButton(view));
 
-  const clickDateButton = () => {
-    user.click(getDateButton());
-  };
+  const clickDateButton = (/** @type {import('@testing-library/react').RenderResult} */ view) =>
+    user.click(getDateButton(view));
 
   // Close dateLookup and removes events attached to documents.
-  const closeDateLookup = () => {
-    user.click(container);
-  };
+  const closeDateLookup = (/** @type {import('@testing-library/react').RenderResult} */ view) =>
+    user.click(view.container);
 
-  const clickClearButton = () => {
-    user.click(getClearButton());
-  };
+  const clickClearButton = (/** @type {import('@testing-library/react').RenderResult} */ view) =>
+    user.click(getClearButton(view));
 
-  const getActiveYearButton = () => {
-    return container.querySelector('button.tw-date-lookup-year-option.active');
+  const getActiveYearButton = (
+    /** @type {import('@testing-library/react').RenderResult} */ view,
+  ) => {
+    return view.container.querySelector('button.tw-date-lookup-year-option.active');
   };
 
-  const getActiveMonthButton = () => {
-    return container.querySelector('button.tw-date-lookup-month-option.active');
+  const getActiveMonthButton = (
+    /** @type {import('@testing-library/react').RenderResult} */ view,
+  ) => {
+    return view.container.querySelector('button.tw-date-lookup-month-option.active');
   };
 
-  const getActiveDayButton = () => {
-    return container.querySelector('button.tw-date-lookup-day-option.active');
+  const getActiveDayButton = (
+    /** @type {import('@testing-library/react').RenderResult} */ view,
+  ) => {
+    return view.container.querySelector('button.tw-date-lookup-day-option.active');
   };
 
-  const getButtonByAriaLabel = (ariaLabel) => {
+  const getButtonByAriaLabel = (/** @type {string} */ ariaLabel) => {
     return screen.getByRole('button', { name: ariaLabel });
   };
-  const getClearButton = () => container.querySelector('.clear-btn');
-  const getOpenButton = () => container.querySelector('button.np-date-trigger');
-  const getDateButton = () => container.querySelector('button.tw-date-lookup-header-current');
-  const getBottomSheet = () => container.querySelector('.np-bottom-sheet');
-  const getPanel = () => container.querySelector('.np-panel');
+  const getClearButton = (/** @type {import('@testing-library/react').RenderResult} */ view) =>
+    view.container.querySelector('.clear-btn');
+  const getOpenButton = (/** @type {import('@testing-library/react').RenderResult} */ view) =>
+    view.container.querySelector('button.np-date-trigger');
+  const getDateButton = (/** @type {import('@testing-library/react').RenderResult} */ view) =>
+    view.container.querySelector('button.tw-date-lookup-header-current');
 });

package/src/dateLookup/DateLookup.tsx

@@ -19,7 +19,7 @@ import { getStartOfDay } from './getStartOfDay';
 import MonthCalendar from './monthCalendar';
 import YearCalendar from './yearCalendar';
 
-export interface DateLookupProps {
+export interface DateLookupProps extends Partial<WithInputAttributesProps> {
   id?: string;
   value: Date | null;
   min?: Date | null;
@@ -36,8 +36,6 @@ export interface DateLookupProps {
   onBlur?: () => void;
 }
 
-type DateLookupPropsWithInputAttributes = DateLookupProps & Partial<WithInputAttributesProps>;
-
 interface DateLookupState {
   selectedDate: Date | null;
   originalDate: Date | null;
@@ -50,9 +48,9 @@ interface DateLookupState {
   isMobile: boolean;
 }
 
-class DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateLookupState> {
-  declare props: DateLookupPropsWithInputAttributes &
-    Required<Pick<DateLookupPropsWithInputAttributes, keyof typeof DateLookup.defaultProps>>;
+class DateLookup extends PureComponent<DateLookupProps, DateLookupState> {
+  declare props: DateLookupProps &
+    Required<Pick<DateLookupProps, keyof typeof DateLookup.defaultProps>>;
 
   static defaultProps = {
     value: null,
@@ -64,7 +62,7 @@ class DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateL
     monthFormat: MonthFormat.LONG,
     disabled: false,
     clearable: false,
-  } satisfies Partial<DateLookupPropsWithInputAttributes>;
+  } satisfies Partial<DateLookupProps>;
 
   element = createRef<HTMLDivElement>();
   dropdown = createRef<HTMLDivElement>();
@@ -108,7 +106,7 @@ class DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateL
     return null;
   }
 
-  componentDidUpdate(previousProps: DateLookupPropsWithInputAttributes) {
+  componentDidUpdate(previousProps: DateLookupProps) {
     if (this.props.value?.getTime() !== previousProps.value?.getTime() && this.state.open) {
       this.focusOn('.active');
     }
@@ -352,9 +350,6 @@ class DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateL
 
 export const DateLookupWithoutInputAttributes = DateLookup;
 
-export default withInputAttributes(
-  DateLookup as React.ComponentType<DateLookupPropsWithInputAttributes>,
-  {
-    nonLabelable: true,
-  },
-);
+export default withInputAttributes(DateLookup as React.ComponentType<DateLookupProps>, {
+  nonLabelable: true,
+});

package/src/drawer/Drawer.js

@@ -1,6 +1,6 @@
-import { useId } from '@radix-ui/react-id';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
+import { useId } from 'react';
 
 import { Position, Typography } from '../common';
 import { CloseButton } from '../common/closeButton';
@@ -56,12 +56,12 @@ Drawer.propTypes = {
   footerContent: PropTypes.node,
   /** The content to appear in the drawer header. */
   headerTitle: PropTypes.node,
-  /** The action to perform on close click. */
-  onClose: PropTypes.func,
   /** The status of Drawer either open or not. */
   open: PropTypes.bool,
   /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */
   position: PropTypes.oneOf(['left', 'right', 'bottom']),
+  /** The action to perform on close click. */
+  onClose: PropTypes.func,
 };
 
 Drawer.defaultProps = {

package/src/field/Field.tsx

@@ -1,5 +1,5 @@
-import { useId } from '@radix-ui/react-id';
 import classNames from 'classnames';
+import { useId } from 'react';
 
 import { Sentiment } from '../common';
 import InlineAlert from '../inlineAlert/InlineAlert';
@@ -27,10 +27,10 @@ export const Field = ({ id, label, hint, error, className, children }: FieldProp
 
   const labelId = useId();
 
-  const fallbackInputId = useId(); // TODO: Use `React.useId()` when react>=18
+  const fallbackInputId = useId();
   const inputId = id !== null ? id ?? fallbackInputId : undefined;
 
-  const descriptionId = useId(); // TODO: Use `React.useId()` when react>=18
+  const descriptionId = useId();
 
   return (
     <FieldLabelIdContextProvider value={labelId}>

package/src/index.ts

@@ -52,6 +52,7 @@ export type {
 export type { NavigationOptionListProps } from './navigationOptionsList';
 export type { PhoneNumberInputProps } from './phoneNumberInput/PhoneNumberInput';
 export type { PopoverProps } from './popover';
+export type { ProcessIndicatorProps } from './processIndicator';
 export type { ProgressProps } from './progress';
 export type { ProgressBarProps } from './progressBar';
 export type { DirectionProviderProps, LanguageProviderProps, ProviderProps } from './provider';
@@ -104,8 +105,8 @@ export { default as Display } from './display';
 export { default as Drawer } from './drawer';
 export { default as DropFade } from './dropFade';
 export { default as Emphasis } from './emphasis';
-export { default as FlowNavigation } from './flowNavigation/FlowNavigation';
 export { Field } from './field/Field';
+export { default as FlowNavigation } from './flowNavigation/FlowNavigation';
 export { default as Header } from './header';
 export { default as Image } from './image';
 export { default as Info } from './info';
@@ -139,7 +140,7 @@ export { default as Popover } from './popover';
 export { default as ProcessIndicator } from './processIndicator';
 export { default as Progress } from './progress';
 export { default as ProgressBar } from './progressBar';
-export { PromoCardGroup, default as PromoCard } from './promoCard';
+export { default as PromoCard, PromoCardGroup } from './promoCard';
 export { DirectionProvider, LanguageProvider, default as Provider } from './provider';
 export { default as Radio } from './radio';
 export { default as RadioGroup } from './radioGroup';

package/src/inputWithDisplayFormat/InputWithDisplayFormat.tsx

@@ -1,7 +1,8 @@
 import { Input, type InputProps } from '../inputs/Input';
 import WithDisplayFormat, { type WithDisplayFormatProps } from '../withDisplayFormat';
 
-export interface InputWithDisplayFormatProps extends Omit<WithDisplayFormatProps, 'render'> {}
+export interface InputWithDisplayFormatProps
+  extends Omit<WithDisplayFormatProps<InputProps>, 'render'> {}
 
 const InputWithDisplayFormat = (props: InputWithDisplayFormatProps) => (
   <WithDisplayFormat<InputProps> {...props} render={(renderProps) => <Input {...renderProps} />} />

package/src/inputs/SelectInput.story.tsx

@@ -197,6 +197,7 @@ export const Currencies: Story<Currency> = {
 
       const input = screen.getByRole('searchbox');
 
+      await userEvent.click(input);
       await userEvent.type(input, 'huf');
       await expect(
         within(screen.getByRole('listbox')).queryByRole('option'),

package/src/inputs/SelectInput.tsx

@@ -1,9 +1,17 @@
 import { Listbox as ListboxBase } from '@headlessui/react';
-import { useId } from '@radix-ui/react-id';
 import { Check, ChevronDown, Cross, CrossCircle } from '@transferwise/icons';
 import classNames from 'classnames';
 import mergeProps from 'merge-props';
-import { createContext, forwardRef, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { useIntl } from 'react-intl';
 
 import { useEffectEvent } from '../common/hooks/useEffectEvent';

package/src/inputs/contexts.tsx

@@ -31,12 +31,12 @@ export interface WithInputAttributesProps {
   inputAttributes: ReturnType<typeof useInputAttributes>;
 }
 
-export function withInputAttributes<T extends Partial<WithInputAttributesProps>>(
-  Component: React.ComponentType<T>,
+export function withInputAttributes<T>(
+  Component: React.ComponentType<T & Partial<WithInputAttributesProps>>,
   args?: UseInputAttributesArgs,
 ) {
-  function ComponentWithInputAttributes(props: Omit<T, keyof WithInputAttributesProps>) {
-    return <Component inputAttributes={useInputAttributes(args)} {...(props as T)} />;
+  function ComponentWithInputAttributes(props: T) {
+    return <Component inputAttributes={useInputAttributes(args)} {...props} />;
   }
 
   ComponentWithInputAttributes.displayName = `withInputAttributes(${Component.displayName || Component.name || 'Component'})`;

package/src/modal/Modal.tsx

@@ -1,6 +1,5 @@
-import { useId } from '@radix-ui/react-id';
 import classNames from 'classnames';
-import { ReactNode, useRef } from 'react';
+import { ReactNode, useId, useRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
 
 import {

package/src/processIndicator/ProcessIndicator.rtl.spec.tsx

@@ -0,0 +1,45 @@
+import { act } from 'react';
+
+import { render, screen } from '../test-utils';
+import ProcessIndicator, { ProcessIndicatorProps } from './ProcessIndicator';
+
+describe('ProcessIndicator', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(async () => {
+    await jest.runOnlyPendingTimersAsync();
+    jest.useRealTimers();
+  });
+
+  it('supports transitioning between states', async () => {
+    const handleAnimationCompleted = jest.fn();
+    const initialProps = {
+      'data-testid': 'process-indicator',
+      onAnimationCompleted: handleAnimationCompleted,
+    } satisfies ProcessIndicatorProps;
+    const view = render(<ProcessIndicator {...initialProps} />);
+
+    expect(screen.getByTestId('process-indicator')).not.toHaveClass('process-success');
+    expect(screen.getByTestId('process-indicator')).not.toHaveClass('process-xl');
+
+    const updatedProps = {
+      status: 'succeeded',
+      size: 'xl',
+    } satisfies ProcessIndicatorProps;
+    view.rerender(<ProcessIndicator {...initialProps} {...updatedProps} />);
+    await act(async () => {
+      await jest.runOnlyPendingTimersAsync();
+    });
+
+    expect(screen.getByTestId('process-indicator')).toHaveClass('process-success');
+    expect(screen.getByTestId('process-indicator')).toHaveClass('process-xl');
+    expect(handleAnimationCompleted).not.toHaveBeenCalled();
+
+    await jest.runOnlyPendingTimersAsync();
+
+    expect(handleAnimationCompleted).toHaveBeenCalledWith(updatedProps.status);
+    expect(handleAnimationCompleted).toHaveBeenCalledTimes(1);
+  });
+});