@transferwise/components 46.32.0 → 46.34.0

package/src/phoneNumberInput/PhoneNumberInput.rtl.spec.tsx

@@ -1,3 +1,4 @@
+import { Field } from '../field/Field';
 import { mockMatchMedia, mockResizeObserver, render, screen, within } from '../test-utils';
 
 import PhoneNumberInput from './PhoneNumberInput';
@@ -19,4 +20,13 @@ describe('PhoneNumberInput', () => {
       within(screen.getByLabelText('Prioritized label')).getByRole('textbox'),
     ).toBeInTheDocument();
   });
+
+  it('supports `Field` for labeling', () => {
+    render(
+      <Field label="Phone number">
+        <PhoneNumberInput initialValue="+12345678" onChange={() => {}} />
+      </Field>,
+    );
+    expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Phone number/);
+  });
 });

package/src/phoneNumberInput/PhoneNumberInput.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect, useMemo } from 'react';
 import { useIntl } from 'react-intl';
 
 import { Size, SizeLarge, SizeMedium, SizeSmall } from '../common';
+import { useInputAttributes } from '../inputs/contexts';
 import { SelectInput, SelectInputOptionContent, SelectInputProps } from '../inputs/SelectInput';
 
 import messages from './PhoneNumberInput.messages';
@@ -43,7 +44,7 @@ const defaultDisabledCountries = [] satisfies PhoneNumberInputProps['disabledCou
 
 const PhoneNumberInput = ({
   id,
-  'aria-labelledby': ariaLabelledBy,
+  'aria-labelledby': ariaLabelledByProp,
   required,
   disabled,
   initialValue,
@@ -57,6 +58,9 @@ const PhoneNumberInput = ({
   selectProps = defaultSelectProps,
   disabledCountries = defaultDisabledCountries,
 }: PhoneNumberInputProps) => {
+  const inputAttributes = useInputAttributes({ nonLabelable: true });
+  const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];
+
   const { locale, formatMessage } = useIntl();
 
   const [internalValue, setInternalValue] = useState<PhoneNumber>(() => {
@@ -140,7 +144,12 @@ const PhoneNumberInput = ({
   }, [onChange, broadcastedValue, internalValue]);
 
   return (
-    <div aria-labelledby={ariaLabelledBy} className="tw-telephone">
+    <div
+      role="group"
+      {...inputAttributes}
+      aria-labelledby={ariaLabelledBy}
+      className="tw-telephone"
+    >
       <div className="tw-telephone__country-select">
         <SelectInput
           placeholder={formatMessage(messages.selectInputPlaceholder)}

package/src/select/Select.js

@@ -1,3 +1,4 @@
+import { useId } from '@radix-ui/react-id';
 import { useTheme } from '@wise/components-theming';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
@@ -6,12 +7,13 @@ import { useIntl } from 'react-intl';
 
 import Button from '../button';
 import Chevron from '../chevron';
-import { Position, getSimpleRandomId } from '../common';
+import { Position } from '../common';
 import BottomSheet from '../common/bottomSheet';
 import { stopPropagation } from '../common/domHelpers';
 import { useLayout } from '../common/hooks';
 import Panel from '../common/panel';
 import Drawer from '../drawer';
+import { useInputAttributes } from '../inputs/contexts';
 
 import messages from './Select.messages';
 import Option from './option';
@@ -102,6 +104,8 @@ export default function Select({
   dropdownProps,
   buttonProps,
 }) {
+  const inputAttributes = useInputAttributes();
+
   const { formatMessage } = useIntl();
   const { isModern } = useTheme();
   const s = (className) => classNamesProp[className] || className;
@@ -118,8 +122,6 @@ export default function Select({
   const isSearchEnabled = !!onSearchChange || !!search;
   const isDropdownAutoWidth = dropdownWidth == null;
 
-  const fallbackButtonId = useMemo(() => getSimpleRandomId('np-select-'), []);
-
   const options = useMemo(() => {
     if (!search || !searchValue) {
       return defaultOptions;
@@ -128,16 +130,16 @@ export default function Select({
     return defaultOptions.filter(isSearchableOption).filter((option) => {
       if (typeof search === 'function') {
         return search(option, searchValue);
-      } else {
-        return defaultFilterFunction(option, searchValue);
       }
+      return defaultFilterFunction(option, searchValue);
     });
   }, [defaultOptions, search, searchValue]);
 
   const selectableOptions = useMemo(() => options.filter(isActionableOption), [options]);
   const focusedOption = selectableOptions[keyboardFocusedOptionIndex];
 
-  const computedId = id || fallbackButtonId;
+  const fallbackButtonId = useId();
+  const computedId = id || inputAttributes.id || fallbackButtonId;
   const listboxId = `${computedId}-listbox`;
   const searchBoxId = `${computedId}-searchbox`;
 
@@ -280,7 +282,7 @@ export default function Select({
   useEffect(() => {
     if (open) {
       if (!isMobile || searchValue) {
-        if (isSearchEnabled && !!searchBoxReference.current) {
+        if (isSearchEnabled && searchBoxReference.current) {
           searchBoxReference.current.focus();
         }
         if (
@@ -496,6 +498,7 @@ export default function Select({
     >
       <Button
         ref={dropdownButtonReference}
+        {...inputAttributes}
         id={computedId}
         block={block}
         size={size}
@@ -585,9 +588,6 @@ Select.propTypes = {
    * if `function` you can define your own search function to implement custom search experience. This search function used while filtering the options array. The custom search function takes two parameters. First is the option the second is the keyword.
    */
   search: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
-  onChange: PropTypes.func.isRequired,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
   options: PropTypes.arrayOf(
     PropTypes.shape({
       value: PropTypes.any,
@@ -602,17 +602,20 @@ Select.propTypes = {
       searchStrings: PropTypes.arrayOf(PropTypes.string),
     }),
   ).isRequired,
-  /**
-   * To have full control of your search value and response use `onSearchChange` function combined with `searchValue` and custom filtering on the options array.
-   * DO NOT USE TOGETHER WITH `search` PROPERTY
-   */
-  onSearchChange: PropTypes.func,
   searchValue: PropTypes.string,
   searchPlaceholder: PropTypes.string,
   classNames: PropTypes.objectOf(PropTypes.string),
   dropdownUp: PropTypes.bool,
   buttonProps: PropTypes.object,
   dropdownProps: PropTypes.object,
+  onChange: PropTypes.func.isRequired,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  /**
+   * To have full control of your search value and response use `onSearchChange` function combined with `searchValue` and custom filtering on the options array.
+   * DO NOT USE TOGETHER WITH `search` PROPERTY
+   */
+  onSearchChange: PropTypes.func,
 };
 
 Select.defaultProps = {

package/src/select/Select.rtl.spec.tsx

@@ -0,0 +1,17 @@
+import { Field } from '../field/Field';
+import { mockMatchMedia, render, screen } from '../test-utils';
+import Select from './Select';
+
+mockMatchMedia();
+
+describe('Select', () => {
+  it('supports `Field` for labeling', () => {
+    const options = [{ value: 'USD', label: 'USD' }];
+    render(
+      <Field label="Currency">
+        <Select options={options} selected={options[0]} onChange={() => {}} />
+      </Field>,
+    );
+    expect(screen.getByLabelText('Currency')).toHaveTextContent('USD');
+  });
+});

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;