@transferwise/components 46.131.1 → 46.132.0

package/src/inputs/SelectInput/_stories/SelectInput.test.story.tsx

@@ -1,13 +1,29 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { fireEvent, fn, type Mock, screen, userEvent, within } from 'storybook/test';
-import { useState } from 'react';
+import {
+  expect,
+  fireEvent,
+  fn,
+  type Mock,
+  screen,
+  userEvent,
+  waitFor,
+  within,
+} from 'storybook/test';
+import { Flag } from '@wise/art';
+import { useEffect, useRef, useState } from 'react';
 
 import { allModes } from '../../../../.storybook/modes';
+import { withVariantConfig } from '../../../../.storybook/helpers';
 import Body from '../../../body';
 import { Field } from '../../../field/Field';
 import { lorem5, lorem500 } from '../../../test-utils';
 import { sortByRelevance } from '../SelectInput.utils';
-import { SelectInput, SelectInputOptionContent, type SelectInputProps } from '..';
+import {
+  SelectInput,
+  type SelectInputItem,
+  SelectInputOptionContent,
+  type SelectInputProps,
+} from '..';
 
 const meta = {
   title: 'Forms/SelectInput/Tests',
@@ -18,12 +34,141 @@ const meta = {
     onClose: fn() satisfies Mock,
     onOpen: fn() satisfies Mock,
   },
-  tags: ['!autodocs'],
+  tags: ['!autodocs', '!manifest'],
 } satisfies Meta<typeof SelectInput>;
 export default meta;
 
 type Story<T, M extends boolean = false> = StoryObj<SelectInputProps<T, M>>;
 
+interface TestMonth {
+  id: number;
+  name: string;
+}
+
+const testMonths: TestMonth[] = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+].map((name, index) => ({ id: index + 1, name }));
+
+interface TestCurrency {
+  code: string;
+  name: string;
+  countries?: string[];
+}
+
+const testPopularCurrencies: TestCurrency[] = [
+  { code: 'USD', name: 'United States Dollar', countries: ['Hong Kong', 'Saudi Arabia'] },
+  { code: 'EUR', name: 'Euro', countries: ['Spain', 'Germany', 'France', 'Austria', 'Estonia'] },
+  { code: 'GBP', name: 'British pound', countries: ['England', 'Scotland', 'Wales'] },
+];
+
+const testAllCurrencies: TestCurrency[] = [
+  ...testPopularCurrencies,
+  { code: 'AUD', name: 'Australian dollar' },
+  { code: 'CAD', name: 'Canadian dollar', countries: ['Canada'] },
+  { code: 'ÅLD', name: 'Ålandian peso', countries: ['Ålandia'] },
+].sort((a, b) => a.code.localeCompare(b.code));
+
+function testCurrencyOption(currency: TestCurrency) {
+  return {
+    type: 'option',
+    value: currency,
+    filterMatchers: [currency.code, currency.name, ...(currency.countries ?? [])],
+  } satisfies SelectInputItem<TestCurrency>;
+}
+
+/**
+ * Visual regression story: all three sizes rendered across every theme.
+ * - `sm` — opened, simple (months) list
+ * - `md` — closed
+ * - `lg` — opened, grouped currencies list
+ */
+export const Variants: Story<TestCurrency> = {
+  render: function Render() {
+    const smRef = useRef<HTMLButtonElement | null>(null);
+    const lgRef = useRef<HTMLButtonElement | null>(null);
+
+    const simpleItems: SelectInputItem<TestMonth>[] = testMonths.map((month) => ({
+      type: 'option',
+      value: month,
+    }));
+
+    const groupedItems: SelectInputItem<TestCurrency>[] = [
+      {
+        type: 'group',
+        label: 'Popular currencies',
+        options: testPopularCurrencies.map(testCurrencyOption),
+      },
+      {
+        type: 'group',
+        label: 'All currencies',
+        options: testAllCurrencies.map(testCurrencyOption),
+      },
+    ];
+
+    useEffect(() => {
+      const timer = setTimeout(() => {
+        smRef.current?.click();
+        setTimeout(() => {
+          lgRef.current?.click();
+        }, 100);
+      }, 200);
+      return () => clearTimeout(timer);
+    }, []);
+
+    return (
+      <div style={{ display: 'flex', gap: '2rem' }}>
+        <div style={{ minHeight: '550px', width: '280px' }}>
+          <p className="np-text-body-small m-b-1">Small (opened)</p>
+          <SelectInput<TestMonth>
+            size="sm"
+            placeholder="Month"
+            items={simpleItems}
+            triggerRef={smRef}
+            renderValue={(month) => <SelectInputOptionContent title={month.name} />}
+          />
+        </div>
+        <div style={{ width: '280px' }}>
+          <p className="np-text-body-small m-b-1">Medium</p>
+          <SelectInput<TestMonth>
+            size="md"
+            placeholder="Month"
+            items={simpleItems}
+            renderValue={(month) => <SelectInputOptionContent title={month.name} />}
+          />
+        </div>
+        <div style={{ minHeight: '550px', width: '280px' }}>
+          <p className="np-text-body-small m-b-1">Large (opened)</p>
+          <SelectInput<TestCurrency>
+            size="lg"
+            placeholder="Currency"
+            items={groupedItems}
+            triggerRef={lgRef}
+            renderValue={(currency) => (
+              <SelectInputOptionContent
+                title={currency.code}
+                note={currency.name}
+                icon={<Flag code={currency.code} intrinsicSize={24} />}
+              />
+            )}
+          />
+        </div>
+      </div>
+    );
+  },
+  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green', 'rtl']),
+};
+
 /**
  * Test story with a large list of countries where almost all have "United States dollar"
  * in their metadata. This reproduces the bug where searching "united" would scroll to
@@ -1308,6 +1453,250 @@ const wait = async (duration = 500) =>
     setTimeout(resolve, duration);
   });
 
+const currencyInteractionArgs = {
+  items: [
+    {
+      type: 'group',
+      label: 'Popular currencies',
+      options: testPopularCurrencies.map(testCurrencyOption),
+    },
+    {
+      type: 'group',
+      label: 'All currencies',
+      options: testAllCurrencies.map(testCurrencyOption),
+    },
+  ],
+  defaultValue: testPopularCurrencies[0],
+  renderValue: (currency: TestCurrency) => (
+    <SelectInputOptionContent title={currency.code} note={currency.name} />
+  ),
+  renderFooter: ({
+    resultsEmpty,
+    queryNormalized,
+  }: {
+    resultsEmpty: boolean;
+    queryNormalized: string | null | undefined;
+  }) =>
+    resultsEmpty && queryNormalized != null && /^[a-z]{3}$/u.test(queryNormalized) ? (
+      <>
+        It is not possible to use {queryNormalized.toUpperCase()} yet.{' '}
+        <a href="#_" onClick={(e) => e.preventDefault()}>
+          Email me when it is available.
+        </a>
+      </>
+    ) : (
+      <>
+        Cannot find it?{' '}
+        <a href="#_" onClick={(e) => e.preventDefault()}>
+          Request the currency you need,
+        </a>{' '}
+        and we will notify you once it is available.
+      </>
+    ),
+  filterable: true,
+  filterPlaceholder: 'Type a currency / country',
+  size: 'lg',
+} satisfies Story<TestCurrency>['args'];
+
+export const BasicInteraction: Story<TestMonth | null> = {
+  args: {
+    placeholder: 'Month',
+    items: testMonths.map((month) => ({ type: 'option', value: month })),
+    renderValue: (month) => <SelectInputOptionContent title={month.name} />,
+  },
+  render: function Render({ onChange, onClear, ...args }) {
+    const [selectedMonth, setSelectedMonth] = useState<TestMonth | null>(null);
+    return (
+      <SelectInput
+        {...args}
+        value={selectedMonth}
+        onChange={(month) => {
+          setSelectedMonth(month);
+          onChange?.(month);
+        }}
+        onClear={() => {
+          setSelectedMonth(null);
+          onClear?.();
+        }}
+      />
+    );
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step('renders placeholder', async () => {
+      const triggerButton = canvas.getByRole('combobox');
+      await waitFor(async () => expect(triggerButton).toHaveTextContent('Month'));
+    });
+
+    await step('selects option via mouse', async () => {
+      const triggerButton = canvas.getByRole('combobox');
+      await userEvent.click(triggerButton);
+      await userEvent.unhover(triggerButton);
+      const option = within(screen.getByRole('listbox')).getByRole('option', { name: 'May' });
+      await userEvent.click(option);
+      await waitFor(async () => expect(triggerButton).toHaveTextContent('May'));
+    });
+  },
+};
+
+export const KeyboardInteraction: Story<TestCurrency> = {
+  args: currencyInteractionArgs,
+  play: async ({ step }) => {
+    await step('Tab to the combobox', async () => {
+      await userEvent.tab();
+    });
+
+    await step('Open the combobox', async () => {
+      await userEvent.keyboard(' ');
+    });
+
+    await step('Check if options are displayed', async () => {
+      await waitFor(async () => expect(await screen.findAllByRole('option')).toHaveLength(9));
+      await waitFor(async () => expect(screen.getByText(/^Cannot find it\?/u)).toBeInTheDocument());
+    });
+
+    await step('Type "huf" in the combobox', async () => {
+      // this is workaround for Chromatic: Firefox and Edge tests failing.
+      // Unclear on a proper solution
+      await wait(750);
+      const input = await screen.findByRole('combobox');
+      await userEvent.type(input, 'huf');
+    });
+
+    await step('Check if no options are displayed', async () => {
+      // this is workaround for Chromatic: Firefox and Edge tests failing.
+      // Unclear on a proper solution
+      await wait(750);
+      await expect(await screen.findByText(/^No results found/u)).toBeInTheDocument();
+      await expect(
+        await screen.findByText(/^It is not possible to use HUF yet\./u),
+      ).toBeInTheDocument();
+      await waitFor(
+        async () => {
+          await expect(screen.queryAllByRole('option')).toHaveLength(0);
+        },
+        { timeout: 1500 },
+      );
+    });
+
+    await step('Remove last two characters', async () => {
+      await wait(500);
+      const input = await screen.findByRole('combobox');
+      await userEvent.type(input, '{Backspace}{Backspace}');
+    });
+
+    await step('Check if two options are displayed', async () => {
+      await waitFor(async () =>
+        expect(within(screen.getByRole('listbox')).queryAllByRole('option')).toHaveLength(2),
+      );
+    });
+
+    await step('Type "e" in the combobox', async () => {
+      const input = await screen.findByRole('combobox');
+      await userEvent.type(input, '{Backspace}e');
+    });
+
+    await step('Check if aria-activedescendant is set', async () => {
+      const input = screen.getByRole('combobox');
+      await waitFor(async () => expect(input).toHaveAttribute('aria-activedescendant'));
+    });
+  },
+};
+
+export const MultiSelectInteraction: Story<TestCurrency, true> = {
+  args: {
+    ...currencyInteractionArgs,
+    multiple: true,
+    placeholder: 'Choose currencies…',
+    defaultValue: [testPopularCurrencies[0]],
+    renderValue: (currency, withinTrigger) =>
+      withinTrigger ? (
+        currency.code
+      ) : (
+        <SelectInputOptionContent title={currency.code} note={currency.name} />
+      ),
+  },
+  play: async ({ canvasElement, step, args }) => {
+    const canvas = within(canvasElement);
+
+    await step('Open the combobox', async () => {
+      const triggerButton = canvas.getByRole('combobox');
+      await userEvent.click(triggerButton);
+      await wait(500);
+      await userEvent.unhover(triggerButton);
+      await expect(args.onOpen).toHaveBeenCalledOnce();
+    });
+
+    await step('Select EUR option', async () => {
+      const option = within(screen.getByRole('listbox')).getAllByRole('option', {
+        name: /^EUR/u,
+      })[0];
+      await wait(500);
+      await userEvent.click(option);
+    });
+
+    await step('Check if selected options are displayed in trigger', async () => {
+      const triggerButton = document.querySelector('button[role="combobox"]');
+      await waitFor(async () => expect(triggerButton).toHaveTextContent('USD, EUR'));
+    });
+  },
+};
+
+/**
+ * Verifies that currencies with non-ASCII characters (e.g. ÅLD / Ålandian peso)
+ * render correctly in the dropdown and can be found via filter.
+ */
+export const SpecialCharacterOptions: Story<TestCurrency> = {
+  args: {
+    ...currencyInteractionArgs,
+    filterable: true,
+    filterPlaceholder: 'Type a currency',
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step('Open the combobox', async () => {
+      const triggerButton = canvas.getByRole('combobox');
+      await userEvent.click(triggerButton);
+      await userEvent.unhover(triggerButton);
+    });
+
+    await step('ÅLD option is visible in dropdown', async () => {
+      await waitFor(async () =>
+        expect(
+          within(screen.getByRole('listbox')).getByRole('option', { name: /ÅLD/u }),
+        ).toBeInTheDocument(),
+      );
+    });
+
+    await step('Filter for Ålandian peso', async () => {
+      await wait(500);
+      const input = await screen.findByRole('combobox');
+      await userEvent.type(input, 'åla');
+    });
+
+    await step('Only ÅLD option remains', async () => {
+      await waitFor(async () =>
+        expect(within(screen.getByRole('listbox')).getAllByRole('option')).toHaveLength(1),
+      );
+    });
+  },
+};
+
+export const WithClearInteraction: Story<TestCurrency> = {
+  args: {
+    ...currencyInteractionArgs,
+    onClear: fn() satisfies Mock,
+  },
+  play: async ({ step }) => {
+    await step('Has clear button', async () => {
+      const clearBtn = await screen.findByRole('button', { name: 'Clear' });
+      await expect(clearBtn).toBeInTheDocument();
+    });
+  },
+};
+
 /**
  * This test ensures that when the SelectInput is used within a scrollable page,
  * opening the dropdown does not cause any unwanted scrolling or layout shifts.
@@ -1416,3 +1805,43 @@ export const TriggerWithDescription: Story<OptionWithDescription> = {
     );
   },
 };
+
+/** Basic months dropdown at 400% zoom for accessibility testing. */
+export const Zoom400: Story<TestMonth | null> = {
+  render: function Render({ onChange, onClear, ...args }) {
+    const triggerRef = useRef<HTMLButtonElement | null>(null);
+    const [selectedMonth, setSelectedMonth] = useState<TestMonth | null>(null);
+
+    useEffect(() => {
+      const timer = setTimeout(() => {
+        triggerRef.current?.click();
+      }, 200);
+      return () => clearTimeout(timer);
+    }, []);
+
+    return (
+      <SelectInput
+        {...args}
+        triggerRef={triggerRef}
+        value={selectedMonth}
+        onChange={(month) => {
+          setSelectedMonth(month);
+          onChange?.(month);
+        }}
+        onClear={() => {
+          setSelectedMonth(null);
+          onClear?.();
+        }}
+      />
+    );
+  },
+  args: {
+    placeholder: 'Month',
+    items: testMonths.map((month) => ({
+      type: 'option',
+      value: month,
+    })),
+    renderValue: (month) => <SelectInputOptionContent title={month.name} />,
+  },
+  ...withVariantConfig(['400%']),
+};

package/src/listItem/AdditionalInfo/ListItemAdditionalInfo.story.tsx

@@ -19,11 +19,6 @@ import type { ListItemAdditionalInfoProps } from './ListItemAdditionalInfo';
 export default {
   component: ListItem.AdditionalInfo,
   title: 'Content/ListItem/ListItem.AdditionalInfo',
-  parameters: {
-    docs: {
-      toc: true,
-    },
-  },
   args: {
     children: lorem20,
   },

package/src/listItem/AvatarLayout/ListItemAvatarLayout.story.tsx

@@ -13,11 +13,6 @@ import type { ListItemAvatarLayoutProps } from './ListItemAvatarLayout';
 export default {
   component: ListItem.AvatarLayout,
   title: 'Content/ListItem/ListItem.AvatarLayout',
-  parameters: {
-    docs: {
-      toc: true,
-    },
-  },
   args: {
     avatars: [{ asset: <Flag code="gb" /> }, { asset: <Flag code="eur" /> }],
     orientation: 'horizontal',

package/src/listItem/AvatarView/ListItemAvatarView.story.tsx

@@ -54,11 +54,6 @@ const BADGES = {
 export default {
   component: ListItem.AvatarView,
   title: 'Content/ListItem/ListItem.AvatarView',
-  parameters: {
-    docs: {
-      toc: true,
-    },
-  },
   args: {
     size: 48,
     selected: false,

package/src/listItem/Button/ListItemButton.story.tsx

@@ -77,11 +77,6 @@ const getPropsForPreview = (args: PreviewStoryArgs) => {
 const meta: Meta<typeof ListItem.Button> = {
   component: ListItem.Button,
   title: 'Content/ListItem/ListItem.Button',
-  parameters: {
-    docs: {
-      toc: true,
-    },
-  },
   args: {
     partiallyInteractive: false,
     priority: 'secondary-neutral',

package/src/listItem/Checkbox/ListItemCheckbox.story.tsx

@@ -12,11 +12,6 @@ import { fn } from 'storybook/test';
 const meta: Meta<ListItemCheckboxProps> = {
   component: ListItem.Checkbox,
   title: 'Content/ListItem/ListItem.Checkbox',
-  parameters: {
-    docs: {
-      toc: true,
-    },
-  },
   args: {
     checked: false,
     indeterminate: false,

package/src/listItem/IconButton/ListItemIconButton.story.tsx

@@ -27,11 +27,6 @@ const hideControls = disableControls([
 const meta: Meta<ListItemIconButtonProps> = {
   component: ListItem.IconButton,
   title: 'Content/ListItem/ListItem.IconButton',
-  parameters: {
-    docs: {
-      toc: true,
-    },
-  },
   args: {
     partiallyInteractive: false,
     priority: undefined,

package/src/listItem/Image/ListItemImage.story.tsx

@@ -12,11 +12,6 @@ import type { ListItemImageProps } from './ListItemImage';
 export default {
   component: ListItem.Image,
   title: 'Content/ListItem/ListItem.Image',
-  parameters: {
-    docs: {
-      toc: true,
-    },
-  },
   args: {
     size: 48,
     loading: undefined,

package/src/listItem/Navigation/ListItemNavigation.story.tsx

@@ -13,11 +13,6 @@ import type { ListItemNavigationProps } from './ListItemNavigation';
 const meta: Meta<ListItemNavigationProps> = {
   component: ListItem.Navigation,
   title: 'Content/ListItem/ListItem.Navigation',
-  parameters: {
-    docs: {
-      toc: true,
-    },
-  },
   args: {
     href: 'https://wise.com',
     onClick: fn(),

package/src/listItem/Prompt/ListItemPrompt.story.tsx

@@ -16,11 +16,7 @@ import { Clock } from '@transferwise/icons';
 const meta: Meta<ListItemPromptProps> = {
   component: Prompt,
   title: 'Content/ListItem/ListItem.Prompt',
-  parameters: {
-    docs: {
-      toc: true,
-    },
-  },
+
   decorators: [withoutKey],
   args: {
     sentiment: undefined,

package/src/listItem/Radio/ListItemRadio.story.tsx

@@ -13,11 +13,6 @@ import { ProfileType } from '../../common';
 const meta: Meta<ListItemRadioProps> = {
   component: ListItem.Radio,
   title: 'Content/ListItem/ListItem.Radio',
-  parameters: {
-    docs: {
-      toc: true,
-    },
-  },
   args: {
     name: 'radio-group',
     value: 'option1',

package/src/listItem/Switch/ListItemSwitch.story.tsx

@@ -12,11 +12,6 @@ import type { ListItemSwitchProps } from './ListItemSwitch';
 const meta: Meta<ListItemSwitchProps> = {
   component: ListItem.Switch,
   title: 'Content/ListItem/ListItem.Switch',
-  parameters: {
-    docs: {
-      toc: true,
-    },
-  },
   args: {
     checked: false,
     onClick: fn(),

package/src/listItem/_stories/ListItem.disabled.story.tsx

@@ -62,7 +62,6 @@ export default {
       canvas: {
         sourceState: 'hidden',
       },
-      toc: true,
       page: () => (
         <>
           <Title>Disabled state</Title>

package/src/listItem/_stories/ListItem.scenarios.story.tsx

@@ -43,7 +43,6 @@ export default {
   },
   parameters: {
     docs: {
-      toc: true,
       page: () => (
         <>
           <Title>Common scenarios</Title>

package/src/listItem/_stories/ListItem.story.tsx

@@ -47,11 +47,6 @@ export default {
     'ListItem.Image': ListItem.Image,
   },
   title: 'Content/ListItem',
-  parameters: {
-    docs: {
-      toc: true,
-    },
-  },
   args: {
     title: 'List item title',
     subtitle: 'Subtitle goes here',