@transferwise/components 0.0.0-experimental-0a5396f → 0.0.0-experimental-81a961c

package/src/moneyInput/MoneyInput.rtl.spec.tsx

@@ -51,6 +51,7 @@ describe('MoneyInput', () => {
   const props = {
     currencies,
     selectedCurrency: currencies[1],
+    searchPlaceholder: 'Type a currency / country',
     amount: 1000,
     onAmountChange: jest.fn(),
     onCurrencyChange: jest.fn(),
@@ -90,4 +91,41 @@ describe('MoneyInput', () => {
     );
     expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Recipient gets/);
   });
+
+  describe('ids', () => {
+    it('should guarantee id and connect the input with the selected currency via withId HoC', () => {
+      render(<MoneyInput {...props} />);
+      const input = screen.getByRole('textbox');
+      const button = screen.getByRole('combobox');
+      expect(input.getAttribute('id')).toBeTruthy();
+      expect(input).toHaveAttribute('aria-describedby', button.getAttribute('id'));
+    });
+
+    it('should have unique id for the select filter with predefined id', async () => {
+      const fieldId = 'myFieldId';
+      render(
+        <Field label="Multiple currencies" id={fieldId}>
+          <MoneyInput {...props} />
+        </Field>,
+      );
+      await userEvent.click(screen.getByRole('combobox'));
+      expect(screen.getByLabelText(props.searchPlaceholder)).toHaveAttribute(
+        'id',
+        `${fieldId}SelectedCurrencySearch`,
+      );
+    });
+
+    it('should have unique id for the select filter without predefined id', async () => {
+      render(
+        <Field label="Multiple currencies">
+          <MoneyInput {...props} />
+        </Field>,
+      );
+      await userEvent.click(screen.getByRole('combobox'));
+      expect(screen.getByLabelText(props.searchPlaceholder)).toHaveAttribute(
+        'id',
+        expect.stringMatching(/^:.*?:SelectedCurrencySearch$/),
+      );
+    });
+  });
 });

package/src/moneyInput/MoneyInput.spec.js

@@ -1,5 +1,4 @@
 import { shallow } from 'enzyme';
-import { render, screen } from '@testing-library/react';
 
 import { MoneyInput, Title, Input, SelectInput } from '..';
 import { mockMatchMedia, mockResizeObserver } from '../test-utils';
@@ -818,14 +817,4 @@ describe('Money Input', () => {
       });
     });
   });
-
-  describe('withId', () => {
-    it('should guarantee id and connect the input with the selected currency', () => {
-      render(<MoneyInput {...props} />);
-      const input = screen.getByRole('textbox');
-      const button = screen.getByRole('combobox');
-      expect(input.getAttribute('id')).toBeTruthy();
-      expect(input).toHaveAttribute('aria-describedby', button.getAttribute('id'));
-    });
-  });
 });

package/src/moneyInput/MoneyInput.story.tsx

@@ -9,13 +9,13 @@ import { Field } from '../field/Field';
 export default {
   component: MoneyInput,
   title: 'Forms/MoneyInput',
-  render: function Render(args) {
+  render: function Render({ id, ...args }) {
     const [selectedCurrency, setSelectedCurrency] = useState(args.selectedCurrency);
 
     const handleOnCurrencyChange = (value: CurrencyOptionItem) => setSelectedCurrency(value);
 
     return (
-      <Field label="Editable money input label" required>
+      <Field label="Editable money input label" required id={id}>
         <MoneyInput
           {...args}
           selectedCurrency={selectedCurrency}
@@ -129,6 +129,7 @@ export const MultipleCurrencies: Story = {
     },
     selectedCurrency: exampleCurrency.usd,
     searchPlaceholder: 'Type a currency / country',
+    id: 'moneyInput',
   },
 };
 
@@ -155,20 +156,22 @@ export const OpenedInput: Story = {
 };
 
 export const SmallInput: Story = {
-  render: (args) => {
+  render: ({ id, ...args }) => {
     return (
       <>
-        <Field id={args.id} label="Money inputs" required>
+        <Field label="Money inputs" required>
           <MoneyInput {...args} {...SingleCurrency.args} />
         </Field>
         <br />
-        <MoneyInput {...args} {...MultipleCurrencies.args} />
+        <Field label="Multiple currencies">
+          <MoneyInput {...args} {...MultipleCurrencies.args} />
+        </Field>
         <hr />
-        <Field id={args.id} label="Error states" sentiment="negative" required>
+        <Field label="Error state" sentiment="negative" required>
           <MoneyInput {...args} {...SingleCurrency.args} />
         </Field>
         <br />
-        <Field sentiment="negative">
+        <Field label="Multiple currencies: error state" sentiment="negative">
           <MoneyInput {...args} {...MultipleCurrencies.args} />
         </Field>
       </>

package/src/moneyInput/MoneyInput.tsx

@@ -314,7 +314,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
 
     const isFixedCurrency = (!this.state.searchQuery && hasSingleCurrency()) || !onCurrencyChange;
     const disabled = !this.props.onAmountChange;
-    const selectedCurrencyElementId = `${amountInputId}SelectedCurrency`;
+    const selectedCurrencyElementId = `${inputAttributes?.id ?? amountInputId}SelectedCurrency`;
 
     return (
       <div

package/src/typeahead/Typeahead.tsx

@@ -3,7 +3,7 @@ import { clsx } from 'clsx';
 import { DebouncedFunc } from 'lodash';
 import clamp from 'lodash.clamp';
 import debounce from 'lodash.debounce';
-import React, { Component, ReactNode } from 'react';
+import { Component, ReactNode } from 'react';
 import { injectIntl, WrappedComponentProps } from 'react-intl';
 
 import Chip from '../chips/Chip';
@@ -101,7 +101,6 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
     size: Size.MEDIUM,
     validateChip: () => true,
   } satisfies Partial<TypeaheadProps<unknown>>;
-  optionRefs: (React.RefObject<HTMLLIElement> | null)[];
 
   constructor(props: TypeaheadPropsWithInputAttributes<T>) {
     super(props);
@@ -116,7 +115,6 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
       optionsShown: false,
       isFocused: false,
     };
-    this.optionRefs = [] as (React.RefObject<HTMLLIElement> | null)[];
   }
 
   handleSearchDebounced: DebouncedFunc<Typeahead<T>['handleSearch']>;
@@ -230,6 +228,7 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
       }
     }
   };
+
   moveFocusedOption(offset: number) {
     this.setState((previousState) => {
       const { keyboardFocusedOptionIndex } = previousState;
@@ -238,10 +237,6 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
       if (keyboardFocusedOptionIndex !== null) {
         index = clamp(keyboardFocusedOptionIndex + offset, 0, options.length - 1);
       }
-      const optionRef = this.optionRefs[index];
-      if (optionRef?.current) {
-        optionRef.current.focus(); // Set focus on the option element
-      }
       return {
         keyboardFocusedOptionIndex: index,
       };
@@ -407,22 +402,17 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
         id={`menu-${id}`}
       >
         <ul className="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
-          {optionsToRender.map((option, idx) => {
-            const ref = React.createRef<HTMLLIElement>();
-            this.optionRefs[idx] = ref;
-            return (
-              <TypeaheadOption
-                key={`${option.label}${idx.toString()}`}
-                ref={ref}
-                query={query}
-                option={option}
-                selected={keyboardFocusedOptionIndex === idx}
-                onClick={(event) => {
-                  this.onOptionSelected(event, option);
-                }}
-              />
-            );
-          })}
+          {optionsToRender.map((option, idx) => (
+            <TypeaheadOption
+              key={`${option.label}${idx.toString()}`}
+              query={query}
+              option={option}
+              selected={keyboardFocusedOptionIndex === idx}
+              onClick={(event) => {
+                this.onOptionSelected(event, option);
+              }}
+            />
+          ))}
           {footer}
         </ul>
       </div>

package/src/typeahead/typeaheadInput/TypeaheadInput.tsx

@@ -24,7 +24,6 @@ export type TypeaheadInputProps<T> = {
 
 type TypeaheadInputState = {
   inputWidth: number;
-  keyboardFocusedOptionIndex: number | null;
 };
 
 export default class TypeaheadInput<T> extends Component<
@@ -38,7 +37,6 @@ export default class TypeaheadInput<T> extends Component<
     super(props);
     this.state = {
       inputWidth: DEFAULT_INPUT_MIN_WIDTH,
-      keyboardFocusedOptionIndex: null,
     };
   }
 
@@ -88,7 +86,6 @@ export default class TypeaheadInput<T> extends Component<
         className={clsx(multiple && 'typeahead__input')}
         name={name}
         id={`input-${typeaheadId}`}
-        aria-activedescendant={`menu-${typeaheadId} ${this.state.keyboardFocusedOptionIndex !== null ? `option-${this.state.keyboardFocusedOptionIndex}` : ''}`}
         autoFocus={autoFocus}
         placeholder={hasPlaceholder ? placeholder : ''}
         aria-autocomplete="list"

package/src/typeahead/typeaheadOption/TypeaheadOption.tsx

@@ -1,5 +1,5 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
 import { clsx } from 'clsx';
-import { forwardRef } from 'react';
 
 import { TypeaheadOption } from '../Typeahead';
 import highlight from '../util/highlight';
@@ -11,21 +11,19 @@ export type TypeaheadOptionProps<T> = {
   query?: string;
 };
 
-const Option = forwardRef<HTMLLIElement, TypeaheadOptionProps<any>>((props, ref) => {
+const Option = <T,>(props: TypeaheadOptionProps<T>) => {
   const { option, selected = false, onClick = () => {}, query = '' } = props;
   const { label, note, secondary } = option;
 
   return (
     <li
-      ref={ref}
       role="option"
-      aria-selected={selected ? 'true' : 'false'}
-      id={`option-${props.option.label}`}
+      aria-selected="false"
       className={clsx('typeahead__option tw-dropdown-item clickable', {
         'tw-dropdown-item--focused': selected,
       })}
     >
-      <a className="dropdown-item" href="#" tabIndex={0} onClick={onClick}>
+      <a className="dropdown-item" href="#" tabIndex={-1} onClick={onClick}>
         <span>{highlight(label, query)}</span>
         {note && <span className="np-text-body-default m-l-1">{note}</span>}
         {secondary && (
@@ -34,6 +32,6 @@ const Option = forwardRef<HTMLLIElement, TypeaheadOptionProps<any>>((props, ref)
       </a>
     </li>
   );
-});
+};
 
 export default Option;