@transferwise/components 46.31.0 → 46.33.0

package/src/select/Select.spec.js

@@ -5,11 +5,6 @@ import Select from '.';
 
 mockMatchMedia();
 
-jest.mock('../common/domHelpers', () => ({
-  ...jest.requireActual('../common/domHelpers'),
-  getSimpleRandomId: jest.fn((prefix) => `${prefix}mock-random-id`),
-}));
-
 function enableDesktopScreen() {
   window.innerWidth = Breakpoint.LARGE;
 }
@@ -326,8 +321,8 @@ describe('Select', () => {
     const button = screen.getByRole('button');
     const options = screen.getByRole('listbox');
 
-    expect(button).toHaveAttribute('id', 'np-select-mock-random-id');
-    expect(options).toHaveAttribute('id', 'np-select-mock-random-id-listbox');
+    expect(button).toHaveAttribute('id');
+    expect(options).toHaveAttribute('id');
   });
 
   it('renders controls with passed id', async () => {

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

@@ -0,0 +1,16 @@
+import { Field } from '../field/Field';
+import { mockMatchMedia, render, screen } from '../test-utils';
+import Typeahead from './Typeahead';
+
+mockMatchMedia();
+
+describe('Typeahead', () => {
+  it('supports `Field` for labeling', () => {
+    render(
+      <Field id="test" label="Tags">
+        <Typeahead id="test" name="test" options={[{ label: 'Test' }]} onChange={() => {}} />
+      </Field>,
+    );
+    expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Tags/);
+  });
+});

package/src/typeahead/Typeahead.tsx

@@ -18,6 +18,7 @@ import {
 } from '../common/domHelpers';
 import InlineAlert from '../inlineAlert';
 import { InlineAlertProps } from '../inlineAlert/InlineAlert';
+import { withInputAttributes, WithInputAttributesProps } from '../inputs/contexts';
 
 import TypeaheadInput from './typeaheadInput/TypeaheadInput';
 import TypeaheadOption from './typeaheadOption/TypeaheadOption';
@@ -68,6 +69,8 @@ export interface TypeaheadProps<T> {
   validateChip?: (chip: TypeaheadOption<T>) => boolean;
 }
 
+type TypeaheadPropsWithInputAttributes<T> = TypeaheadProps<T> & Partial<WithInputAttributesProps>;
+
 type TypeaheadState<T> = {
   selected: readonly TypeaheadOption<T>[];
   keyboardFocusedOptionIndex: number | null;
@@ -77,9 +80,9 @@ type TypeaheadState<T> = {
   isFocused: boolean;
 };
 
-export default class Typeahead<T> extends Component<TypeaheadProps<T>, TypeaheadState<T>> {
-  declare props: TypeaheadProps<T> &
-    Required<Pick<TypeaheadProps<T>, keyof typeof Typeahead.defaultProps>>;
+class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, TypeaheadState<T>> {
+  declare props: TypeaheadPropsWithInputAttributes<T> &
+    Required<Pick<TypeaheadPropsWithInputAttributes<T>, keyof typeof Typeahead.defaultProps>>;
 
   static defaultProps = {
     allowNew: false,
@@ -98,7 +101,7 @@ export default class Typeahead<T> extends Component<TypeaheadProps<T>, Typeahead
     validateChip: () => true,
   } satisfies Partial<TypeaheadProps<unknown>>;
 
-  constructor(props: TypeaheadProps<T>) {
+  constructor(props: TypeaheadPropsWithInputAttributes<T>) {
     super(props);
     const { searchDelay, initialValue, multiple } = this.props;
     this.handleSearchDebounced = debounce(this.handleSearch, searchDelay);
@@ -115,7 +118,7 @@ export default class Typeahead<T> extends Component<TypeaheadProps<T>, Typeahead
 
   handleSearchDebounced: DebouncedFunc<Typeahead<T>['handleSearch']>;
 
-  UNSAFE_componentWillReceiveProps(nextProps: TypeaheadProps<T>) {
+  UNSAFE_componentWillReceiveProps(nextProps: TypeaheadPropsWithInputAttributes<T>) {
     if (nextProps.multiple !== this.props.multiple) {
       this.setState((previousState) => {
         const { selected } = previousState;
@@ -374,7 +377,10 @@ export default class Typeahead<T> extends Component<TypeaheadProps<T>, Typeahead
     allowNew,
     showNewEntry,
     dropdownOpen,
-  }: Pick<TypeaheadProps<T>, 'footer' | 'options' | 'id' | 'allowNew' | 'showNewEntry'> &
+  }: Pick<
+    TypeaheadPropsWithInputAttributes<T>,
+    'footer' | 'options' | 'id' | 'allowNew' | 'showNewEntry'
+  > &
     Pick<TypeaheadState<T>, 'keyboardFocusedOptionIndex' | 'query'> & {
       dropdownOpen: boolean;
     }) => {
@@ -414,7 +420,8 @@ export default class Typeahead<T> extends Component<TypeaheadProps<T>, Typeahead
 
   render() {
     const {
-      id,
+      inputAttributes,
+      id: idProp,
       placeholder,
       multiple,
       size,
@@ -432,6 +439,7 @@ export default class Typeahead<T> extends Component<TypeaheadProps<T>, Typeahead
       alert,
       inputAutoComplete,
     } = this.props;
+    const id = idProp ?? inputAttributes?.id;
 
     const { errorState, query, selected, optionsShown, keyboardFocusedOptionIndex } = this.state;
 
@@ -457,6 +465,8 @@ export default class Typeahead<T> extends Component<TypeaheadProps<T>, Typeahead
     const hasInfo = displayAlert && alertType === Sentiment.NEUTRAL;
     return (
       <div
+        role="group"
+        {...inputAttributes}
         id={id}
         className={classNames('typeahead', `typeahead-${size}`, {
           'typeahead--has-value': selected.length > 0,
@@ -515,3 +525,7 @@ export default class Typeahead<T> extends Component<TypeaheadProps<T>, Typeahead
     );
   }
 }
+
+export default withInputAttributes(Typeahead, { nonLabelable: true }) as <T>(
+  props: TypeaheadProps<T>,
+) => React.ReactElement;