Codemods

PhoneInput Transform

Converts a v6 PhoneInput component to a v7 PhoneInput component.

Automatic Changes

• Renames the disabled prop to aria-disabled.
• Renames the inputLabel prop to label.
• Renames the options prop to selectOptions.
• Renames the selectLabel prop to labelOverrides.selectScreenReaderLabel.
• Attempts to transform the deprecated theme prop to the className prop. If it cannot, deletes the theme prop.
• If PhoneInput is being used as a multi-country phone input (if the selectOptions prop is supplied), renames locale to selectedLocale.

For example:

1import { PhoneInput } from '@americanexpress/dls-react6';
2
3export default function Page() {
4  return (
5    <PhoneInput
6      locale={locale}
7      options={options}
8      disabled={isDisabled}
9      inputLabel="Phone Number"
10      selectLabel="Country"
11      theme={{ color: 'red' }}
12      {...otherProps}
13    />
14  );
15}

Transforms into:

1import { PhoneInput } from '@americanexpress/dls-react';
2
3export default function Page() {
4  return (
5    <PhoneInput
6      selectOptions={options}
7      aria-disabled={isDisabled}
8      label="Phone Number"
9      selectedLocale={locale}
10      {...otherProps}
11      labelOverrides={{
12        selectScreenReaderLabel: 'Country',
13      }}
14    />
15  );
16}

Manual Changes

Single Country vs. Multi-Country

In v6, the locale prop was used for both single-country and multi-country variations. In v7, use the locale prop for single-country and the selectedLocale/defaultSelectedLocale props for multi-country.