@transferwise/components 46.34.0 → 46.35.1

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/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

@@ -53,6 +53,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';
@@ -106,8 +107,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';
@@ -141,7 +142,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/inputs/SelectInput.story.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { expect, fn, type Mock, screen, userEvent, within } from '@storybook/test';
+import { expect, fn, screen, userEvent, within, type Mock } from '@storybook/test';
 import { Calendar, ChevronDown } from '@transferwise/icons';
 import { Flag } from '@wise/art';
 import classNames from 'classnames';
@@ -9,7 +9,7 @@ import Button from '../button/Button';
 import { getMonthNames } from '../common/dateUtils';
 import Drawer from '../drawer';
 import Modal from '../modal';
-
+import { wait } from '../test-utils/wait';
 import {
   SelectInput,
   type SelectInputItem,
@@ -197,6 +197,7 @@ export const Currencies: Story<Currency> = {
 
       const input = screen.getByRole('searchbox');
 
+      await wait(0); // TODO: Remove
       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/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);
+  });
+});

package/src/processIndicator/ProcessIndicator.tsx

@@ -0,0 +1,110 @@
+import classNames from 'classnames';
+import { Component } from 'react';
+
+import { Status, Size } from '../common';
+
+const radius = { xxs: 6, xs: 11, sm: 22, xl: 61 };
+
+const ANIMATION_DURATION_IN_MS = 1500;
+
+type ProcessIndicatorStatus =
+  `${Status.PROCESSING | Status.FAILED | Status.SUCCEEDED | Status.HIDDEN}`;
+
+export interface ProcessIndicatorProps {
+  status?: ProcessIndicatorStatus;
+  size?: 'xxs' | `${Size.EXTRA_SMALL | Size.SMALL | Size.EXTRA_LARGE}`;
+  className?: string;
+  'data-testid'?: string;
+  onAnimationCompleted?: (status: ProcessIndicatorStatus) => void;
+}
+
+type ProcessIndicatorState = Required<Pick<ProcessIndicatorProps, 'status' | 'size'>>;
+
+export default class ProcessIndicator extends Component<
+  ProcessIndicatorProps,
+  ProcessIndicatorState
+> {
+  declare props: ProcessIndicatorProps &
+    Required<Pick<ProcessIndicatorProps, keyof typeof ProcessIndicator.defaultProps>>;
+
+  static defaultProps = {
+    status: 'processing',
+    size: 'sm',
+  } satisfies Partial<ProcessIndicatorProps>;
+
+  interval = 0;
+  timeout = 0;
+
+  constructor(props: ProcessIndicator['props']) {
+    super(props);
+    this.state = {
+      status: props.status,
+      size: props.size,
+    };
+  }
+
+  /**
+   * Create interval for animation duration (1500ms)
+   * Update state only at the end of every interval
+   * (end of animation loop) if props changed before end of animation
+   */
+  componentDidMount() {
+    this.interval = window.setInterval(() => {
+      const { status: targetStatus, size: targetSize, onAnimationCompleted } = this.props;
+      const { status: currentStatus, size: currentSize } = this.state;
+
+      if (currentStatus !== targetStatus) {
+        this.setState({ status: targetStatus }, () => {
+          if (onAnimationCompleted) {
+            this.timeout = window.setTimeout(() => {
+              onAnimationCompleted(targetStatus);
+            }, ANIMATION_DURATION_IN_MS);
+          }
+        });
+      }
+
+      if (currentSize !== targetSize) {
+        this.setState({ size: targetSize });
+      }
+    }, ANIMATION_DURATION_IN_MS);
+  }
+
+  /**
+   * Only trigger render if comopnent's state got
+   * updated from interval callback
+   */
+  shouldComponentUpdate(nextProps: ProcessIndicator['props'], nextState: ProcessIndicatorState) {
+    const isSameStatus = nextProps.status === nextState.status;
+    const isSameSize = nextProps.size === nextState.size;
+
+    return isSameStatus && isSameSize;
+  }
+
+  // Clear interval before destroying component
+  componentWillUnmount() {
+    window.clearInterval(this.interval);
+    window.clearTimeout(this.timeout);
+  }
+
+  render() {
+    const { className, 'data-testid': dataTestId } = this.props;
+    const { size, status } = this.state;
+    const classes = classNames(`process process-${size}`, className, {
+      [`process-danger`]: status === Status.FAILED,
+      [`process-stopped`]: status === Status.HIDDEN,
+      [`process-success`]: status === Status.SUCCEEDED,
+    });
+
+    return (
+      <span className={classes} data-testid={dataTestId}>
+        <span className="process-icon-container">
+          <span className="process-icon-horizontal" />
+          <span className="process-icon-vertical" />
+        </span>
+        <svg xmlns="http://www.w3.org/2000/svg">
+          <circle className="process-circle" cx="50%" cy="50%" r={radius[size]} fillOpacity="0.0" />
+        </svg>
+      </span>
+    );
+  }
+}

package/src/promoCard/PromoCard.tsx

@@ -1,7 +1,6 @@
-import { useId } from '@radix-ui/react-id';
 import { Check } from '@transferwise/icons';
 import classNames from 'classnames';
-import React, { forwardRef, type FunctionComponent, useEffect, useState } from 'react';
+import React, { forwardRef, FunctionComponent, useEffect, useId, useState } from 'react';
 
 import Body from '../body';
 import { Typography } from '../common';

package/src/radio/__snapshots__/Radio.rtl.spec.tsx.snap

@@ -29,7 +29,6 @@ exports[`Radio shows the avatar when supplied 1`] = `
         class="np-text-body-large np-radio__text"
       >
         This is a label
-        
       </span>
       <span
         class="np-radio__avatar m-l-auto"

package/src/select/Select.js

@@ -1,8 +1,7 @@
-import { useId } from '@radix-ui/react-id';
 import { useTheme } from '@wise/components-theming';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import { useState, useEffect, useRef, useMemo } from 'react';
+import { useState, useEffect, useRef, useMemo, useId } from 'react';
 import { useIntl } from 'react-intl';
 
 import Button from '../button';