@transferwise/components 46.17.1 → 46.17.3

package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap

@@ -75,6 +75,7 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
             class="tw-stepper-steps p-t-1 m-b-0"
           >
             <li
+              aria-current="false"
               class="hidden-xs tw-stepper__step np-text-body-default"
               style="left: 0%;"
             >
@@ -85,6 +86,7 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
               </span>
             </li>
             <li
+              aria-current="step"
               class="hidden-xs tw-stepper__step np-text-body-default-bold tw-stepper__step--active"
               style="left: 50%;"
             >
@@ -95,6 +97,7 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
               </span>
             </li>
             <li
+              aria-current="false"
               class="hidden-xs tw-stepper__step np-text-body-default"
               style="left: 100%;"
             >
@@ -188,6 +191,7 @@ exports[`FlowNavigation renders as expected 1`] = `
             class="tw-stepper-steps p-t-1 m-b-0"
           >
             <li
+              aria-current="step"
               class="hidden-xs tw-stepper__step np-text-body-default-bold tw-stepper__step--active"
               style="left: 0%;"
             >
@@ -198,6 +202,7 @@ exports[`FlowNavigation renders as expected 1`] = `
               </span>
             </li>
             <li
+              aria-current="false"
               class="hidden-xs tw-stepper__step np-text-body-default"
               style="left: 50%;"
             >
@@ -208,6 +213,7 @@ exports[`FlowNavigation renders as expected 1`] = `
               </span>
             </li>
             <li
+              aria-current="false"
               class="hidden-xs tw-stepper__step np-text-body-default"
               style="left: 100%;"
             >

package/src/flowNavigation/animatedLabel/AnimatedLabel.tsx

@@ -7,7 +7,7 @@ import { Typography } from '../../common';
 export interface AnimatedLabelProps {
   activeLabel: number;
   className?: string;
-  labels: React.ReactNode[];
+  labels: readonly React.ReactNode[];
 }
 
 const AnimatedLabel = ({ activeLabel, className, labels }: AnimatedLabelProps) => {

package/src/instructionsList/InstructionsList.tsx

@@ -12,13 +12,13 @@ type InstructionNode = {
 export type InstructionsListProps = CommonProps &
   (
     | {
-        dos?: ReactNode[];
-        donts?: ReactNode[];
+        dos?: readonly ReactNode[];
+        donts?: readonly ReactNode[];
         sort?: 'dosFirst' | 'dontsFirst';
       }
     | {
-        dos?: InstructionNode[];
-        donts?: InstructionNode[];
+        dos?: readonly InstructionNode[];
+        donts?: readonly InstructionNode[];
         sort?: 'dosFirst' | 'dontsFirst';
       }
   );

package/src/markdown/Markdown.tsx

@@ -17,12 +17,12 @@ export type MarkdownProps = {
   children?: string;
 } & (
   | {
-      allowList?: `${MarkdownNodeType}`[];
+      allowList?: readonly `${MarkdownNodeType}`[];
       blockList?: never;
     }
   | {
       allowList?: never;
-      blockList?: `${MarkdownNodeType}`[];
+      blockList?: readonly `${MarkdownNodeType}`[];
     }
 );
 
@@ -61,7 +61,7 @@ export default function Markdown({
   return <Element className={className} dangerouslySetInnerHTML={{ __html: createMarkup() }} />;
 }
 
-function stripNodes({ blockList, parsed }: { blockList: string[]; parsed: MarkdownNode }) {
+function stripNodes({ blockList, parsed }: { blockList: readonly string[]; parsed: MarkdownNode }) {
   if (!parsed) {
     return parsed;
   }

package/src/moneyInput/MoneyInput.tsx

@@ -462,7 +462,7 @@ function filterCurrenciesForQuery(
   return sortOptionsLabelsToFirst(filteredOptions, query);
 }
 
-function removeDuplicateValueOptions(options: CurrencyOptionItem[]) {
+function removeDuplicateValueOptions(options: readonly CurrencyOptionItem[]) {
   const uniqueValues = new Set<string>();
   return options.filter((option) => {
     if (!uniqueValues.has(option.value)) {
@@ -489,8 +489,8 @@ function contains(property: string | undefined, query: string) {
   return property && property.toLowerCase().includes(query.toLowerCase());
 }
 
-function sortOptionsLabelsToFirst(options: CurrencyOptionItem[], query: string) {
-  return options.sort((first, second) => {
+function sortOptionsLabelsToFirst(options: readonly CurrencyOptionItem[], query: string) {
+  return [...options].sort((first, second) => {
     const firstContains = contains(first.label, query);
     const secondContains = contains(second.label, query);
 

package/src/phoneNumberInput/PhoneNumberInput.tsx

@@ -34,7 +34,7 @@ export interface PhoneNumberInputProps {
   placeholder?: string;
   selectProps?: Partial<SelectInputProps<string | null>>;
   /** List of iso3 codes of countries to remove from the list */
-  disabledCountries?: string[];
+  disabledCountries?: readonly string[];
 }
 
 const defaultSelectProps = {} satisfies PhoneNumberInputProps['selectProps'];

package/src/phoneNumberInput/utils/excludeCountries/excludeCountries.ts

@@ -1,7 +1,7 @@
 import type { Country } from '../../data/countries';
 
 // Reference fro localeCompare : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare
-const filterCountriesByIso3 = (countries: Country[], iso3Codes: string[]) => {
+const filterCountriesByIso3 = (countries: readonly Country[], iso3Codes: readonly string[]) => {
   const iso3CodesSet = new Set(iso3Codes);
   return countries.filter((country) => !iso3CodesSet.has(country.iso3));
 };
@@ -12,7 +12,10 @@ const filterCountriesByIso3 = (countries: Country[], iso3Codes: string[]) => {
  * @param countries list of country metadata objects
  * @param disabledCountries list of iso3 country codes to remove from the list
  */
-export const excludeCountries = (countries: Country[], disabledCountries: string[]) => {
+export const excludeCountries = (
+  countries: readonly Country[],
+  disabledCountries: readonly string[],
+) => {
   return disabledCountries.length > 0
     ? filterCountriesByIso3(countries, disabledCountries)
     : countries;

package/src/phoneNumberInput/utils/groupCountriesByPrefix/groupCountriesByPrefix.ts

@@ -1,6 +1,6 @@
 import { Country } from '../../data/countries';
 
-export const groupCountriesByPrefix = (countries: Country[]) => {
+export const groupCountriesByPrefix = (countries: readonly Country[]) => {
   const countriesByPrefix = new Map<string, Country[]>();
   countries.forEach((country) => {
     countriesByPrefix.set(country.phone, [

package/src/phoneNumberInput/utils/longestMatchingPrefix/index.ts

@@ -1,4 +1,4 @@
 import { Country } from '../../data/countries';
 
-export const longestMatchingPrefix = (matchingCodes: Country[]) =>
+export const longestMatchingPrefix = (matchingCodes: readonly Country[]) =>
   matchingCodes.reduce((a, b) => (a.phone.length > b.phone.length ? a : b));

package/src/phoneNumberInput/utils/sortArrayByProperty/sortArrayByProperty.ts

@@ -1,5 +1,5 @@
 export function sortArrayByProperty<T extends Record<PropertyKey, string>>(
-  arrayToSort: T[],
+  arrayToSort: readonly T[],
   property: keyof T,
 ) {
   return [...arrayToSort].sort((a, b) => a[property].localeCompare(b[property]));

package/src/promoCard/PromoCardGroup.tsx

@@ -106,7 +106,7 @@ const PromoCardGroup: FunctionComponent<PromoCardGroupProps> = ({
     setState(defaultChecked);
 
     // Collect an array of types from the children PromoCard components
-    const types: ('radio' | 'checkbox')[] =
+    const types =
       React.Children.map(children, (child) => {
         if (React.isValidElement<PromoCardProps>(child) && child.props.type) {
           return child.props.type;

package/src/radioGroup/RadioGroup.tsx

@@ -5,7 +5,7 @@ import { RadioProps } from '../radio/Radio';
 
 export interface RadioGroupProps<T extends string | number = string> {
   name: string;
-  radios: Omit<RadioProps<T>, 'name' | 'checked' | 'onChange' | 'className'>[];
+  radios: readonly Omit<RadioProps<T>, 'name' | 'checked' | 'onChange' | 'className'>[];
   selectedValue?: T; // TODO: `NoInfer<T>` from TypeScript 5.4
   onChange: NonNullable<RadioProps<T>['onChange']>;
 }

package/src/segmentedControl/SegmentedControl.tsx

@@ -9,7 +9,7 @@ type SegmentBase = { id: string; label: string; value: string };
 type Segment = SegmentBase & { controls?: never };
 type SegmentWithControls = SegmentBase & { controls: string };
 
-export type Segments = Segment[] | SegmentWithControls[];
+export type Segments = readonly Segment[] | readonly SegmentWithControls[];
 
 type SegmentedControlPropsBase = {
   name: string;
@@ -20,12 +20,12 @@ type SegmentedControlPropsBase = {
 
 type SegmentedControlViewProps = {
   mode: 'view';
-  segments: SegmentWithControls[];
+  segments: readonly SegmentWithControls[];
 };
 
 type SegmentedControlInputProps = {
   mode: 'input';
-  segments: Segment[];
+  segments: readonly Segment[];
 };
 
 export type SegmentedControlProps = SegmentedControlPropsBase &

package/src/slidingPanel/SlidingPanel.js

@@ -25,6 +25,7 @@ const SlidingPanel = forwardRef(
     return (
       <CSSTransition
         {...rest}
+        key={`sliding-panel--open-${position}`}
         nodeRef={localReference}
         in={open}
         // Wait for animation to finish before unmount.

package/src/stepper/Stepper.spec.js

@@ -162,6 +162,22 @@ describe('Stepper', () => {
       expect(step(1).clickable).toBe(true);
       expect(step(2).clickable).toBe(true);
     });
+
+    it('are aria-current=step when active', () => {
+      const stepCurrent = (index) =>
+        component.find('.tw-stepper__step').at(index).props()['aria-current'];
+      steps(4);
+      activeStep(1);
+      expect(stepCurrent(0)).toBe(false);
+      expect(stepCurrent(1)).toBe('step');
+      expect(stepCurrent(2)).toBe(false);
+      expect(stepCurrent(3)).toBe(false);
+      activeStep(2);
+      expect(stepCurrent(0)).toBe(false);
+      expect(stepCurrent(1)).toBe(false);
+      expect(stepCurrent(2)).toBe('step');
+      expect(stepCurrent(3)).toBe(false);
+    });
   });
 
   describe('hover labels', () => {

package/src/stepper/Stepper.tsx

@@ -18,7 +18,7 @@ export interface Step {
 }
 
 export interface StepperProps {
-  steps: Step[];
+  steps: readonly Step[];
   activeStep?: number;
   className?: string;
 }
@@ -60,6 +60,7 @@ const Stepper = ({ steps, activeStep = 0, className }: StepperProps) => {
           clickable && 'tw-stepper__step--clickable',
           step.hoverLabel && 'tw-stepper__step--has-tooltip',
         )}
+        aria-current={active ? 'step' : false}
         style={
           isRTL
             ? { right: `${index * stepPercentage * 100}%` }

package/src/typeahead/Typeahead.tsx

@@ -43,16 +43,16 @@ export interface TypeaheadProps<T> {
   allowNew?: boolean;
   autoFillOnBlur?: boolean;
   autoFocus?: boolean;
-  chipSeparators?: string[];
+  chipSeparators?: readonly string[];
   clearable?: boolean;
   footer?: ReactNode;
-  initialValue?: TypeaheadOption<T>[];
+  initialValue?: readonly TypeaheadOption<T>[];
   inputAutoComplete?: string;
   maxHeight?: number;
   minQueryLength?: number;
   placeholder?: string;
   multiple?: boolean;
-  options: TypeaheadOption<T>[];
+  options: readonly TypeaheadOption<T>[];
   searchDelay?: number;
   showSuggestions?: boolean;
   showNewEntry?: boolean;
@@ -67,7 +67,7 @@ export interface TypeaheadProps<T> {
 }
 
 type TypeaheadState<T> = {
-  selected: TypeaheadOption<T>[];
+  selected: readonly TypeaheadOption<T>[];
   keyboardFocusedOptionIndex: number | null;
   errorState: boolean;
   query: string;
@@ -311,12 +311,12 @@ export default class Typeahead<T> extends Component<TypeaheadProps<T>, Typeahead
     );
   };
 
-  updateSelectedValue = (selected: TypeaheadOption<T>[]) => {
+  updateSelectedValue = (selected: readonly TypeaheadOption<T>[]) => {
     const { onChange, validateChip } = this.props;
 
     const errorState = selected.some((chip) => !validateChip(chip));
     this.setState({ selected, errorState }, () => {
-      onChange(selected);
+      onChange([...selected]);
     });
   };
 

package/src/typeahead/typeaheadInput/TypeaheadInput.tsx

@@ -12,7 +12,7 @@ const DEFAULT_INPUT_MIN_WIDTH = 10;
 export type TypeaheadInputProps<T> = {
   typeaheadId: string;
   value: string;
-  selected: TypeaheadOption<T>[];
+  selected: readonly TypeaheadOption<T>[];
   optionsShown?: boolean;
   autoComplete: string;
   onChange: React.ChangeEventHandler<HTMLInputElement>;

package/src/uploadInput/UploadInput.tsx

@@ -19,7 +19,7 @@ export type UploadInputProps = {
   /**
    * List of already existing, failed or in progress files
    */
-  files?: UploadedFile[];
+  files?: readonly UploadedFile[];
 
   /**
    * The key of the file in the returned FormData object (default: file)
@@ -135,14 +135,14 @@ const UploadInput = ({
 
   const PROGRESS_STATUSES = new Set([Status.PENDING, Status.PROCESSING]);
 
-  const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>(
+  const [uploadedFiles, setUploadedFiles] = useState<readonly UploadedFile[]>(
     multiple || files.length === 0 ? files : [files[0]],
   );
 
   const uploadedFilesListReference = useRef(multiple || files.length === 0 ? files : [files[0]]);
 
   function addFileToList(recentUploadedFile: UploadedFile) {
-    function addToList(listToAddTo: UploadedFile[]) {
+    function addToList(listToAddTo: readonly UploadedFile[]) {
       return [...listToAddTo, recentUploadedFile];
     }
 
@@ -151,7 +151,7 @@ const UploadInput = ({
   }
 
   const removeFileFromList = (file: UploadedFile) => {
-    function filterOutFrom(listToFilterFrom: UploadedFile[]) {
+    function filterOutFrom(listToFilterFrom: readonly UploadedFile[]) {
       return listToFilterFrom.filter(
         (fileInList) => file !== fileInList && file.id !== fileInList.id,
       );
@@ -162,7 +162,7 @@ const UploadInput = ({
   };
 
   const modifyFileInList = (file: UploadedFile, updates: Partial<UploadedFile>) => {
-    const updateListItem = (listToUpdate: UploadedFile[]) =>
+    const updateListItem = (listToUpdate: readonly UploadedFile[]) =>
       listToUpdate.map((fileInList) => {
         return fileInList === file || fileInList.id === file.id
           ? { ...file, ...updates }
@@ -295,7 +295,7 @@ const UploadInput = ({
 
   useEffect(() => {
     if (onFilesChange && mounted) {
-      onFilesChange(uploadedFiles);
+      onFilesChange([...uploadedFiles]);
     }
   }, [onFilesChange, uploadedFiles]); // eslint-disable-line react-hooks/exhaustive-deps
 

package/src/uploadInput/uploadButton/UploadButton.tsx

@@ -12,7 +12,7 @@ import MESSAGES from './UploadButton.messages';
 import { DEFAULT_SIZE_LIMIT, imageFileTypes } from './defaults';
 import getAllowedFileTypes from './getAllowedFileTypes';
 
-type AllowedFileTypes = string | string[] | FileType[];
+type AllowedFileTypes = string | readonly string[] | readonly FileType[];
 export type UploadButtonProps = {
   /**
    * Disable the upload button if your app is not yet ready to accept uploads
@@ -144,9 +144,7 @@ const UploadButton = ({
       return fileTypes;
     }
 
-    return Array.isArray(fileTypes)
-      ? getAllowedFileTypes(fileTypes).join(', ')
-      : getAllowedFileTypes([fileTypes]).join(', ');
+    return getAllowedFileTypes(Array.isArray(fileTypes) ? fileTypes : [fileTypes]).join(', ');
   };
 
   function getDescription() {
@@ -165,18 +163,18 @@ const UploadButton = ({
     });
   }
 
-  function getAcceptedTypes() {
+  function getAcceptedTypes(): Pick<React.ComponentPropsWithoutRef<'input'>, 'accept'> {
     const areAllFilesAllowed = getFileTypesDescription() === '*';
 
     if (areAllFilesAllowed) {
-      return null; //file input by default allows all files
+      return {}; //file input by default allows all files
     }
 
     if (Array.isArray(fileTypes)) {
       return { accept: fileTypes.join(',') };
     }
 
-    return { accept: fileTypes };
+    return { accept: fileTypes as string };
   }
 
   function renderDescription() {

package/src/uploadInput/uploadButton/getAllowedFileTypes.ts

@@ -1,6 +1,6 @@
 import { FileType } from '../../common';
 
-const getAllowedFileTypes = (fileTypes: FileType[] | string[]): string[] =>
+const getAllowedFileTypes = (fileTypes: readonly FileType[] | readonly string[]): string[] =>
   fileTypes.map((fileTypeDefinition: string) =>
     fileTypeDefinition
       .split(',')