@transferwise/components 46.17.2 → 46.18.0

package/src/accordion/Accordion.tsx

@@ -2,17 +2,16 @@ import { useState, FC } from 'react';
 
 import AccordionItem, { AccordionItemProps } from './AccordionItem';
 
+export type AccordionItem = Pick<
+  AccordionItemProps,
+  'id' | 'title' | 'subtitle' | 'content' | 'icon'
+>;
+
 export interface AccordionProps {
   /** The index of the item that should be open by default. */
   indexOpen?: number;
   /** An array of items to display in the accordion. */
-  items: {
-    id?: string;
-    title: React.ReactNode;
-    subtitle?: React.ReactNode;
-    content: React.ReactNode;
-    icon?: React.ReactNode;
-  }[];
+  items: readonly AccordionItem[];
   /** A callback function that is called when an item is clicked. */
   onClick?: (index: number) => void;
   /** @deprecated */

package/src/accordion/index.ts

@@ -1 +1,2 @@
 export { default } from './Accordion';
+export type { AccordionProps, AccordionItem } from './Accordion';

package/src/chips/Chips.story.tsx

@@ -11,8 +11,8 @@ const meta: Meta<typeof Chips> = {
 export default meta;
 
 const FilterTemplate: Story<ChipsProps> = (args: ChipsProps) => {
-  const [selected, setSelected] = useState<ChipValue[]>(
-    args.selected ? (args.selected as ChipValue[]) : [],
+  const [selected, setSelected] = useState<readonly ChipValue[]>(
+    args.selected == null || Array.isArray(args.selected) ? args.selected : [args.selected],
   );
   return (
     <Chips

package/src/chips/Chips.tsx

@@ -17,7 +17,7 @@ export type Chip = {
 export type ChipsProps = CommonProps &
   AriaLabelProperty & {
     /** List of chips with string labels and string/number values */
-    chips: Chip[];
+    chips: readonly Chip[];
     /** Callback which is invoked when a chip is selected or deselected */
     onChange: ({
       isEnabled,
@@ -27,7 +27,7 @@ export type ChipsProps = CommonProps &
       selectedValue: ChipValue;
     }) => void;
     /** Used to manage which chips are selected */
-    selected: ChipValue | ChipValue[];
+    selected: ChipValue | readonly ChipValue[];
     /** Used to activate multi-selection */
     multiple?: boolean;
   };

package/src/dateLookup/DateLookup.js

@@ -253,6 +253,7 @@ class DateLookup extends PureComponent {
     return (
       <div // eslint-disable-line jsx-a11y/no-static-element-interactions
         ref={this.element}
+        id={this.props.id}
         aria-labelledby={ariaLabelledBy}
         className="input-group"
         onKeyDown={this.handleKeyDown}
@@ -277,6 +278,7 @@ class DateLookup extends PureComponent {
 }
 
 DateLookup.propTypes = {
+  id: PropTypes.string,
   value: PropTypes.instanceOf(Date),
   min: PropTypes.instanceOf(Date),
   max: PropTypes.instanceOf(Date),

package/src/dateLookup/DateLookup.story.js

@@ -25,12 +25,14 @@ export const Basic = () => {
   const monthFormat = select('monthFormat', ['long', 'short']);
   const placeholder = text('placeholder', 'placeholder');
   const size = select('size', Object.values(Size), Size.MEDIUM);
+  const id = text('id', 'date-lookup');
 
   const clearable = boolean('clearable', false);
 
   return (
     <DateLookup
       disabled={disabled}
+      id={id}
       label={label}
       min={thePast}
       monthFormat={monthFormat}
@@ -81,6 +83,7 @@ export const RightAligned = () => {
       </div>
       <div className="col-xs-6">
         <DateLookup
+          id="right-aligned"
           disabled={disabled}
           label={label}
           min={new Date(minvalue)}

package/src/dateLookup/DateLookup.view.spec.js

@@ -37,6 +37,7 @@ describe('DateLookup view', () => {
       placeholder: 'Asd..',
       label: 'Date..',
       onChange: jest.fn(),
+      id: '123456',
     };
     component = shallow(<DateLookup {...props} />);
   });
@@ -45,6 +46,10 @@ describe('DateLookup view', () => {
     expect(dateTrigger()).toHaveLength(1);
   });
 
+  it('passes id to the component', () => {
+    expect(component.prop('id')).toBe('123456');
+  });
+
   it('passes props forward to open button', () => {
     expect(+dateTrigger().prop('selectedDate')).toBe(+date);
     expect(dateTrigger().prop('size')).toBe('lg');

package/src/dateLookup/dateTrigger/DateTrigger.js

@@ -62,7 +62,7 @@ const DateTrigger = ({
           <span className="input-group-addon">
             <CloseButton
               className={`clear-btn clear-btn--${size}`}
-              aria-label={formatMessage(messages.ariaLabel)}
+              aria-label={`${formatMessage(messages.ariaLabel)} ${label}`}
               size={Size.SMALL}
               onClick={(event) => {
                 event.stopPropagation();

package/src/dateLookup/dateTrigger/DateTrigger.spec.js

@@ -6,10 +6,12 @@ import { fakeKeyDownEventForKey } from '../../common/fakeEvents';
 
 import DateTrigger from '.';
 
-const defaultLocale = 'en-GB';
+const locale = 'en-GB';
+const formatMessage = (message) => message.id;
+
 jest.mock('react-intl', () => ({
-  useIntl: () => ({ locale: defaultLocale, formatMessage: (id) => `${id}` }),
-  defineMessages: (translations) => translations,
+  ...jest.requireActual('react-intl'),
+  useIntl: jest.fn(() => ({ locale, formatMessage })),
 }));
 
 jest.mock('@transferwise/formatting', () => ({
@@ -73,6 +75,12 @@ describe('DateTrigger', () => {
     expect(label().text()).toBe('hello');
   });
 
+  it('adds label to clear button aria-label', () => {
+    const onClear = jest.fn();
+    component.setProps({ label: 'hello', onClear });
+    expect(clearButton().prop('aria-label')).toBe('neptune.ClearButton.ariaLabel hello');
+  });
+
   it('calls on click handler on button click', () => {
     button().simulate('click');
     expect(props.onClick).toHaveBeenCalledTimes(1);

package/src/dateLookup/getFocusableTime/getFocusableTime.tsx

@@ -2,7 +2,7 @@ interface FocusableTimeProps {
   isActive: (time: number) => boolean;
   isNow: (time: number) => boolean;
   isDisabled: (time: number) => boolean;
-  timeSpan: number[];
+  timeSpan: readonly number[];
 }
 
 export function getFocusableTime(props: FocusableTimeProps): number | undefined {

package/src/decision/Decision.tsx

@@ -30,7 +30,7 @@ export enum DecisionType {
 
 export interface DecisionProps {
   /**  A list of elements to be rendered */
-  options: DecisionOption[];
+  options: readonly DecisionOption[];
   /**  Handles the display mode of the component */
   presentation?: `${DecisionPresentation}`;
   /** Size currently affects only Tile dimension */

package/src/flowNavigation/FlowNavigation.tsx

@@ -24,7 +24,7 @@ export interface FlowNavigationProps {
   /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */
   onGoBack?: () => void;
   /** Steps to be displayed in stepper. If you don't need the stepper, please use OverlayHeader instead */
-  steps: Step[];
+  steps: readonly Step[];
 }
 
 const FlowNavigation = ({

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/index.ts

@@ -1,6 +1,7 @@
 /**
  * Types
  */
+export type { AccordionProps, AccordionItem } from './accordion';
 export type { DecisionProps } from './decision/Decision';
 export type { InfoProps } from './info';
 export type { SummaryProps } from './summary';
@@ -21,7 +22,7 @@ export type {
 export type { TextAreaProps } from './inputs/TextArea';
 export type { PhoneNumberInputProps } from './phoneNumberInput/PhoneNumberInput';
 export type { RadioProps } from './radio';
-export type { RadioGroupProps } from './radioGroup';
+export type { RadioGroupProps, RadioGroupRadio } from './radioGroup';
 export type { RadioOptionProps } from './radioOption';
 export type { SnackbarProps } from './snackbar/Snackbar';
 export type { SnackbarContextType } from './snackbar/SnackbarContext';

package/src/instructionsList/InstructionsList.css

@@ -1,4 +1,8 @@
 .tw-instructions {
+  /* Reset */
+  margin: 0;
+  padding: 0;
+  list-style: none;
   display: flex;
   flex-direction: column;
 }

package/src/instructionsList/InstructionsList.less

@@ -1,4 +1,9 @@
 .tw-instructions {
+  /* Reset */
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
   display: flex;
   flex-direction: column;
 

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';
       }
   );
@@ -49,14 +49,14 @@ const InstructionsList = ({ dos, donts, sort = 'dosFirst' }: InstructionsListPro
       </>
     );
 
-  return <div className="tw-instructions">{orderedInstructions}</div>;
+  return <ul className="tw-instructions">{orderedInstructions}</ul>;
 };
 
 function Instruction({ item, type }: { item: ReactNode | InstructionNode; type: 'do' | 'dont' }) {
   const isInstructionNode =
     typeof item === 'object' && item !== null && 'content' in item && 'aria-label' in item;
   return (
-    <div
+    <li
       className="instruction"
       aria-label={isInstructionNode ? (item['aria-label'] as string) : undefined}
     >
@@ -68,7 +68,7 @@ function Instruction({ item, type }: { item: ReactNode | InstructionNode; type:
       <Body className="text-primary" type={Typography.BODY_LARGE}>
         {isInstructionNode ? item.content : item}
       </Body>
-    </div>
+    </li>
   );
 }
 

package/src/main.css

@@ -2665,6 +2665,10 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   color: var(--color-content-tertiary);
 }
 .tw-instructions {
+  /* Reset */
+  margin: 0;
+  padding: 0;
+  list-style: none;
   display: flex;
   flex-direction: column;
 }

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

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

package/src/radioGroup/index.ts

@@ -1,2 +1,2 @@
 export { default } from './RadioGroup';
-export type { RadioGroupProps } from './RadioGroup';
+export type { RadioGroupProps, RadioGroupRadio } from './RadioGroup';

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}%` }