Codemods

MultiSelect Transform

Converts a v6 MultiSelect component to a v7 MultiSelect component.

Automatic Changes

• Attempts to transform the deprecated theme prop to the className prop. If it cannot, deletes the theme prop.
• Renames the disabled prop to aria-disabled.
• Rename ariaLabel prop to aria-label.
• Rename onChange prop to onSelectedValuesChange.
• Delete the fluid prop.
• Delete the getSelectedCount prop. Previously, the number of selected items would be announced via the screen reader after ever selection. In v7, we’ve removed this and instead announce the total selected options once the user is finished selecting and closes the Popover. When the focus is back on the MultiSelect, the total selected options will be announced.
• Delete the showSelectedCount prop. Previously, this was used in conjunction with getSelectedCount. Since we’ve removed getSelectedCount, this prop is no longer needed.
• Replace success with default for the status prop, since MultiSelect does not support the success status.

For example:

1import { MultiSelect } from '@americanexpress/dls-react6';
2
3export default function Page() {
4  return (
5    <MultiSelect
6      disabled={isDisabled}
7      ariaLabel="label"
8      onChange={(selectedId, isSelected) => {}}
9      onOptionsToggle={(isHidden) => {}}
10      fluid={true}
11      getSelectedCount={getSelectedCount}
12      showSelectedCount={true}
13      status="success"
14      theme={{ color: 'red' }}
15      {...otherProps}
16    >
17      {/** Children */}
18    </MultiSelect>
19  );
20}

Transforms into:

1import { MultiSelect } from '@americanexpress/dls-react';
2
3export default function Page() {
4  return (
5    <MultiSelect
6      aria-disabled={isDisabled}
7      aria-label="label"
8      onChange={(selectedValue, isSelected) => {}}
9      onIsOpenChange={(isOpen) => {}}
10      {...otherProps}
11    >
12      {/** Children */}
13    </MultiSelect>
14  );
15}

Manual Changes

fluid has been deprecated

MultiSelect is now fluid by default. To prevent the component from occupying the full width of the container it is in, we recommend applying a utility class (like col-md-6) to the component or limiting the width of the container it is in.

onOptionsToggle has been renamed to onIsOpenChange with a different signature

We’ve renamed the onOptionsToggle prop to onIsOpenChange and inverted the boolean argument in the function signature (i.e onOptionsToggle={isHidden => {}} is converted to onIsOpenChange={isOpen => {}}).

onSelectedValuesChange has a different signature than onChange

Previously, the first parameter, selectedId, of the onChange function was the id of the selected value, and the second parameter, isSelected, was a boolean indicating if the selectedId was selected or deselected. In v7, the first parameter, selectedValue, of the onSelectedValuesChange function is the value instead of the id. This value is the same as the value prop of the <MultiSelectOption> component. The second parameter is unchanged and is a boolean indicating if the selectedValue was selected or deselected.