@transferwise/components 46.52.0 → 46.52.2

package/src/inputs/SelectInput.story.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { expect, fn, screen, userEvent, within, type Mock } from '@storybook/test';
+import { expect, fn, type Mock, screen, userEvent, within } from '@storybook/test';
 import { Calendar, ChevronDown } from '@transferwise/icons';
 import { Flag } from '@wise/art';
 import { clsx } from 'clsx';
@@ -8,6 +8,7 @@ import { useState } from 'react';
 import Button from '../button/Button';
 import { getMonthNames } from '../common/dateUtils';
 import Drawer from '../drawer';
+import { Field } from '../field/Field';
 import Modal from '../modal';
 import { wait } from '../test-utils/wait';
 import {
@@ -73,12 +74,12 @@ export const Months: Story<Month | null> = {
     const canvas = within(canvasElement);
 
     await step('renders placeholder', async () => {
-      const triggerButton = canvas.getByRole('button');
+      const triggerButton = canvas.getByRole('combobox');
       await expect(triggerButton).toHaveTextContent('Month');
     });
 
     await step('selects option via mouse', async () => {
-      const triggerButton = canvas.getByRole('button');
+      const triggerButton = canvas.getByRole('combobox');
 
       await userEvent.click(triggerButton);
       await userEvent.unhover(triggerButton);
@@ -195,7 +196,7 @@ export const Currencies: Story<Currency> = {
       await expect(within(screen.getByRole('listbox')).queryAllByRole('option')).toHaveLength(8);
       await expect(screen.getByText(/^Can’t find it?/u)).toBeInTheDocument();
 
-      const input = screen.getByRole('searchbox');
+      const input = screen.getByRole('combobox');
 
       await wait(0); // TODO: Remove
       await userEvent.type(input, 'huf');
@@ -234,7 +235,7 @@ export const MultipleCurrencies: Story<Currency, true> = {
     const canvas = within(canvasElement);
 
     await step('selects multiple options via mouse', async () => {
-      const triggerButton = canvas.getByRole('button');
+      const triggerButton = canvas.getByRole('combobox');
 
       await userEvent.click(triggerButton);
       await userEvent.unhover(triggerButton);
@@ -272,7 +273,7 @@ export const CustomTrigger: Story<Month> = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
-    const triggerButton = canvas.getByRole('button');
+    const triggerButton = canvas.getByRole('combobox');
     await userEvent.click(triggerButton);
   },
 };
@@ -317,7 +318,7 @@ export const Advanced: Story<Month> = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
-    const triggerButton = canvas.getByRole('button');
+    const triggerButton = canvas.getByRole('combobox');
     await userEvent.click(triggerButton);
   },
 };
@@ -342,6 +343,17 @@ export const ManyItems: Story<string, true> = {
   },
 };
 
+export const WithinField = {
+  args: Months.args,
+  decorators: [
+    (Story) => (
+      <Field message="Something went wrong" sentiment="negative">
+        <Story />
+      </Field>
+    ),
+  ],
+} satisfies Story<Month | null>;
+
 export const WithinDrawer: Story<Currency> = {
   args: CurrenciesArgs,
   decorators: [

package/src/inputs/SelectInput.tsx

@@ -430,6 +430,7 @@ export function SelectInputTriggerButton<T extends SelectInputTriggerButtonEleme
     <ListboxBase.Button
       ref={ref}
       as={PolymorphicWithOverrides}
+      role="combobox"
       __overrides={{ as, ...interactionProps }}
       {...mergeProps({ onClick, onKeyDown }, restProps)}
     />
@@ -608,9 +609,12 @@ function SelectInputOptions<T = string>({
         <div className="np-select-input-query-container">
           <SearchInput
             ref={searchInputRef}
+            role="combobox"
             shape="rectangle"
             placeholder={filterPlaceholder}
             defaultValue={filterQuery}
+            aria-autocomplete="list"
+            aria-expanded
             aria-controls={listboxId}
             aria-describedby={showStatus ? statusId : undefined}
             onKeyDown={(event) => {

package/src/main.css

@@ -2387,6 +2387,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 }
 .np-input-group {
   display: inline-grid;
+  width: 100%;
   grid-auto-columns: minmax(0, 1fr);
   /* Prevent unwanted `group-hover/input` triggers */
   border-radius: 9999px;

package/src/moneyInput/MoneyInput.story.tsx

@@ -153,7 +153,7 @@ export const OpenedInput: Story = {
   ...MultipleCurrencies,
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole('button'));
+    await userEvent.click(canvas.getByRole('combobox'));
   },
 };
 

package/src/typeahead/Typeahead.messages.ts

@@ -0,0 +1,9 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  clearLabel: {
+    id: 'neptune.ClearButton.ariaLabel',
+    defaultMessage: 'Clear',
+    description: 'Description of clear button',
+  },
+});

package/src/typeahead/Typeahead.rtl.spec.tsx

@@ -1,14 +1,26 @@
 import { Field } from '../field/Field';
 import { mockMatchMedia, render, screen } from '../test-utils';
 import Typeahead from './Typeahead';
+import { createIntl, createIntlCache } from 'react-intl';
+import messages from '../i18n';
+import { DEFAULT_LANG, DEFAULT_LOCALE } from '../common';
 
 mockMatchMedia();
 
+const cache = createIntlCache();
+const intl = createIntl({ locale: DEFAULT_LOCALE, messages: messages[DEFAULT_LANG] }, cache);
+
 describe('Typeahead', () => {
   it('supports `Field` for labeling', () => {
     render(
       <Field id="test" label="Tags">
-        <Typeahead id="test" name="test" options={[{ label: 'Test' }]} onChange={() => {}} />
+        <Typeahead
+          id="test"
+          name="test"
+          options={[{ label: 'Test' }]}
+          intl={intl}
+          onChange={() => {}}
+        />
       </Field>,
     );
     expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Tags/);

package/src/typeahead/Typeahead.spec.js

@@ -8,15 +8,17 @@ import { fakeEvent, fakeKeyDownEventForKey } from '../common/fakeEvents';
 import Typeahead from './Typeahead';
 
 const defaultLocale = 'en-GB';
-
-jest.mock('react-intl', () => ({
-  injectIntl: (Component) =>
-    function (props) {
-      return <Component {...props} intl={{ locale: defaultLocale }} />;
-    },
-  useIntl: () => ({ locale: defaultLocale, formatMessage: (id) => `${id}` }),
-  defineMessages: (translations) => translations,
-}));
+jest.mock('react-intl', () => {
+  const mockedIntl = {
+    locale: defaultLocale,
+    formatMessage: (id) => String(id),
+  };
+  return {
+    injectIntl: (Component) => (props) => <Component {...props} intl={mockedIntl} />,
+    defineMessages: (translations) => translations,
+    useIntl: () => mockedIntl,
+  };
+});
 
 describe('Typeahead', () => {
   let component;
@@ -317,7 +319,7 @@ describe('Typeahead', () => {
       onChange: (selections) => {
         selectedOption = selections[0];
       },
-      options: options,
+      options,
     });
 
     input().simulate('change', { target: { value: text } });

package/src/typeahead/Typeahead.story.tsx

@@ -1,125 +1,122 @@
-import { select, boolean } from '@storybook/addon-knobs';
-import { StoryContext } from '@storybook/react';
-import { userEvent, within } from '@storybook/test';
+import { Meta, StoryObj } from '@storybook/react';
 import { Search as SearchIcon } from '@transferwise/icons';
-import { useState } from 'react';
+import { userEvent, within, fn } from '@storybook/test';
 
-import { Sentiment } from '../common';
+import Typeahead, { type TypeaheadOption } from './Typeahead';
+import { Size } from '../common';
+import { useState } from 'react';
 import { Input } from '../inputs/Input';
 
-import Typeahead, { type TypeaheadOption } from './Typeahead';
+type Story = StoryObj<typeof Typeahead>;
+
+/**
+ * Checks if provided TypeaheadOption contains an HTML5-compliant email address
+ * @see https://html.spec.whatwg.org/multipage/input.html#valid-e-mail-address
+ */
+const validateOptionAsEmail = (option: TypeaheadOption) => {
+  return /^[\w.!#$%&'*+/=?^`{|}~-]+@[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?(?:\.[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?)*$/i.test(
+    option.label,
+  );
+};
 
 export default {
   component: Typeahead,
   title: 'Forms/Typeahead',
+  args: {
+    allowNew: false,
+    autoFillOnBlur: true,
+    autoFocus: false,
+    chipSeparators: [',', ' '],
+    clearable: true,
+    inputAutoComplete: 'new-password',
+    minQueryLength: 3,
+    multiple: false,
+    searchDelay: 200,
+    showSuggestions: true,
+    showNewEntry: true,
+    size: Size.MEDIUM,
+    initialValue: [],
+    id: 'myTypeahead',
+    name: 'typeahead-input-name',
+    placeholder: 'placeholder',
+    onChange: fn(),
+    onBlur: fn(),
+    onFocus: fn(),
+    onInputChange: fn(),
+    onSearch: fn(),
+  },
+  argTypes: {
+    size: {
+      control: 'inline-radio',
+      options: [Size.MEDIUM, Size.LARGE],
+    },
+  },
+} satisfies Meta<typeof Typeahead>;
+
+export const Basic: Story = {
+  render: function Render(args) {
+    const [options, setOptions] = useState([
+      {
+        label: 'A thing',
+        note: 'with a note',
+      },
+      {
+        label: 'Another thing',
+        secondary: 'with secondary text this time',
+      },
+      {
+        label: 'Profile',
+      },
+      {
+        label: 'Globe',
+      },
+      {
+        label: 'British pound',
+      },
+      {
+        label: 'Euro',
+      },
+      {
+        label: 'Something else',
+      },
+    ]);
+
+    const validateChipWhenMultiple = () =>
+      args.multiple && args.allowNew
+        ? (option: TypeaheadOption) => validateOptionAsEmail(option)
+        : undefined;
+
+    return (
+      <Typeahead
+        {...args}
+        initialValue={[]}
+        validateChip={validateChipWhenMultiple()}
+        addon={<SearchIcon size={24} />}
+        options={options}
+        onSearch={() => {
+          setTimeout(() => setOptions(options), 1500);
+        }}
+      />
+    );
+  },
 };
 
-const validateChip = (option: TypeaheadOption) => {
-  // eslint-disable-next-line unicorn/no-unsafe-regex
-  return /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
-    option.label,
-  );
-};
-
-export const createable = () => {
-  return (
+export const Creatable: Story = {
+  render: (args) => (
     <Typeahead
-      id="typeahead"
-      name="typeahead-input-name"
-      size="md"
-      maxHeight={100}
-      footer={<div>Want a footer? Style it!</div>}
-      multiple
-      clearable
+      {...args}
       allowNew
-      showSuggestions={false}
-      showNewEntry={false}
-      placeholder="placeholder"
-      chipSeparators={[',', ' ']}
-      validateChip={validateChip}
+      multiple
+      initialValue={[]}
+      validateChip={validateOptionAsEmail}
       addon={<SearchIcon size={24} />}
       options={[]}
-      onChange={() => {}}
-      onBlur={() => {}}
     />
-  );
-};
-
-createable.play = async ({ canvasElement }: StoryContext) => {
-  const canvas = within(canvasElement);
-  await userEvent.type(canvas.getByRole('combobox'), 'chip{Enter}chip2{Enter}');
-};
-
-export const Basic = () => {
-  const [options, setOptions] = useState([
-    {
-      label: 'A thing',
-      note: 'with a note',
-    },
-    {
-      label: 'Another thing',
-      secondary: 'with secondary text this time',
-    },
-    {
-      label: 'Profile',
-    },
-    {
-      label: 'Globe',
-    },
-    {
-      label: 'British pound',
-    },
-    {
-      label: 'Euro',
-    },
-    {
-      label: 'Something else',
-    },
-  ]);
-
-  const validateChipWhenMultiple = () => {
-    return multiple && allowNew ? (option: TypeaheadOption) => validateChip(option) : undefined;
-  };
-
-  const multiple = boolean('multiple', false);
-  const clearable = boolean('clearable', false);
-  const allowNew = boolean('allowNew', false);
-  const showSuggestions = boolean('showSuggestions', true);
-  const showNewEntry = boolean('showNewEntry', true);
-  const showAlert = boolean('alert', false);
-  const alertType = select('alert type', [Sentiment.ERROR, Sentiment.WARNING], Sentiment.ERROR);
-
-  return (
-    <Typeahead
-      id="typeahead"
-      name="typeahead-input-name"
-      size="md"
-      maxHeight={100}
-      footer={<div>Want a footer? Style it!</div>}
-      multiple={multiple}
-      clearable={clearable}
-      allowNew={allowNew}
-      showSuggestions={showSuggestions}
-      showNewEntry={showNewEntry}
-      placeholder="placeholder"
-      chipSeparators={[',', ' ']}
-      validateChip={validateChipWhenMultiple()}
-      alert={showAlert ? { message: `Couldn't add item`, type: alertType } : undefined}
-      addon={<SearchIcon size={24} />}
-      options={options}
-      inputAutoComplete="off"
-      onSearch={() => {
-        setTimeout(() => setOptions(options), 1500);
-      }}
-      onChange={() => {}}
-      onBlur={() => {}}
-    />
-  );
-};
-
-Basic.play = async ({ canvasElement }: StoryContext) => {
-  const canvas = within(canvasElement);
-  await userEvent.type(canvas.getByRole('combobox'), 'abc{ArrowDown}');
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.type(canvas.getByRole('combobox'), 'chip{Enter}hello@wise.com{Enter}');
+  },
 };
 
 type Result =
@@ -134,98 +131,100 @@ type Result =
 
 type SearchState = 'success' | 'idle' | 'error' | 'loading';
 
-export const Search = () => {
-  const [results, setResults] = useState<Result[]>([]);
-  const [state, setState] = useState<SearchState>('idle');
-  const [filledValue, setFilledValue] = useState<string | null>(null);
+/**
+ * @FIXME This story feels incomplete. It ignores bunch of props
+ *        and seems very opinionated. Surely we can do better?
+ */
+export const Search: Story = {
+  render: function Render(args) {
+    const [results, setResults] = useState<Result[]>([]);
+    const [state, setState] = useState<SearchState>('idle');
+    const [filledValue, setFilledValue] = useState<string | null>(null);
+
+    const handleInputChange = (query: string) => {
+      args?.onInputChange?.(query);
+
+      if (query === 'loading' || query === 'error' || query === 'nothing') {
+        setState(query === 'nothing' ? 'success' : query);
+        setResults([]);
+        return;
+      }
 
-  const onChange = (query: string) => {
-    if (query === 'loading') {
-      setState('loading');
-      setResults([]);
-      return;
-    }
-    if (query === 'error') {
-      setState('error');
-      setResults([]);
-      return;
-    }
-    if (query === 'nothing') {
       setState('success');
-      setResults([]);
-      return;
-    }
+      setResults(getResults(query));
+    };
 
-    setState('success');
-    setResults(getResults(query));
-  };
-
-  const onResultSelected = (option: Result) => {
-    if (option.type === 'search') {
-      setResults([
-        { type: 'action', value: `${option.value} Result #1` },
-        { type: 'action', value: `${option.value} Result #2` },
-        { type: 'action', value: `${option.value} Result #3` },
-      ]);
-    }
-    if (option.type === 'action') {
-      setFilledValue(option.value);
-    }
-  };
-
-  const getResults = (query: string): Result[] => {
-    return [
-      { type: 'action', value: `${query} Result #1` },
-      { type: 'action', value: `${query} Result #2` },
-      { type: 'action', value: `${query} Result #3` },
-      { type: 'search', value: `Search for more: '${query}'` },
-    ];
-  };
-
-  return (
-    <>
-      <Typeahead<Result>
-        id="typeahead-input-id"
-        name="typeahead-input-name"
-        size="md"
-        maxHeight={100}
-        footer={<SearchFooter options={results} state={state} />}
-        multiple={false}
-        clearable={false}
-        addon={<SearchIcon />}
-        options={results.map((option) => ({
-          value: option,
-          label: option.value,
-          keepFocusOnSelect: option.type === 'search',
-          clearQueryOnSelect: option.type === 'action',
-        }))}
-        onChange={(values) => {
-          if (values.length > 0) {
-            const [updatedValue] = values;
-            if (updatedValue.value) {
-              onResultSelected(updatedValue.value);
-            }
-          }
-        }}
-        onInputChange={onChange}
-      />
-      {filledValue != null ? <Input value={filledValue} /> : null}
-    </>
-  );
-};
+    const handleResultSelected = (option: Result) => {
+      if (option.type === 'search') {
+        setResults([
+          { type: 'action', value: `${option.value} Result #1` },
+          { type: 'action', value: `${option.value} Result #2` },
+          { type: 'action', value: `${option.value} Result #3` },
+        ]);
+      }
+      if (option.type === 'action') {
+        setFilledValue(option.value);
+      }
+    };
+
+    const handleChange = (values: TypeaheadOption<Result>[]) => {
+      args?.onChange?.(values);
+
+      if (values.length > 0) {
+        const [updatedValue] = values;
+
+        if (updatedValue.value) {
+          handleResultSelected(updatedValue.value);
+        }
+      }
+    };
+
+    const getResults = (query: string): Result[] => {
+      return [
+        { type: 'action', value: `${query} Result #1` },
+        { type: 'action', value: `${query} Result #2` },
+        { type: 'action', value: `${query} Result #3` },
+        { type: 'search', value: `Search for more: '${query}'` },
+      ];
+    };
+
+    const renderFooter = (options: Result[]) => {
+      let output = null;
 
-function SearchFooter({ options, state }: { options: Result[]; state: SearchState }) {
-  if (state === 'loading') {
-    return <p className="m-y-2 m-x-2">Loading...</p>;
-  }
+      if (state === 'loading') {
+        output = 'Loading…';
+      }
 
-  if (state === 'success' && options.length === 0) {
-    return <p className="m-y-2 m-x-2">No results found</p>;
-  }
+      if (state === 'success' && options.length === 0) {
+        output = 'No results found';
+      }
 
-  if (state === 'error' && options.length === 0) {
-    return <div className="m-y-2 m-x-2">Something went wrong</div>;
-  }
+      if (state === 'error' && options.length === 0) {
+        output = 'Something went wrong';
+      }
 
-  return null;
-}
+      return <p className="m-y-2 m-x-2">{output}</p>;
+    };
+
+    return (
+      <>
+        <Typeahead<Result>
+          {...args}
+          initialValue={undefined}
+          footer={renderFooter(results)}
+          addon={<SearchIcon />}
+          options={results.map((option) => ({
+            value: option,
+            label: option.value,
+            keepFocusOnSelect: option.type === 'search',
+            clearQueryOnSelect: option.type === 'action',
+          }))}
+          onChange={handleChange}
+          onInputChange={handleInputChange}
+        />
+
+        {filledValue != null ? <Input value={filledValue} /> : null}
+      </>
+    );
+  },
+};