@transferwise/components 46.29.1 → 46.30.0

package/src/index.ts

@@ -1,23 +1,30 @@
 /**
  * Types
  */
-export type { AccordionProps, AccordionItem } from './accordion';
-export type { AvatarProps } from './avatar';
+export type { AccordionItem, AccordionProps } from './accordion';
 export type { ActionOptionProps } from './actionOption';
-export type { AlertProps, AlertAction, AlertArrowPosition, AlertType } from './alert';
+export type { AlertAction, AlertProps, AlertType } from './alert';
+export type { AvatarProps } from './avatar';
 export type { BadgeProps } from './badge';
 export type { CircularButtonProps } from './circularButton';
+export type {
+  BodyTypes,
+  DisplayTypes,
+  LayoutDirection,
+  LinkTypes,
+  TitleTypes,
+  TypographyTypes,
+} from './common';
+export type { BottomSheetProps } from './common/bottomSheet';
+export type { DateInputProps } from './dateInput';
+export type { DateLookupProps } from './dateLookup';
 export type { DecisionProps } from './decision/Decision';
+export type { DimmerProps } from './dimmer';
 export type { EmphasisProps } from './emphasis';
 export type { InfoProps } from './info';
-export type { SummaryProps } from './summary';
-export type { InputProps } from './inputs/Input';
-export type { DateInputProps } from './dateInput';
-export type { DateLookupProps } from './dateLookup';
 export type { InputWithDisplayFormatProps } from './inputWithDisplayFormat';
+export type { InputProps } from './inputs/Input';
 export type { InputGroupProps } from './inputs/InputGroup';
-export type { LoaderProps } from './loader';
-export type { NavigationOptionListProps } from './navigationOptionsList';
 export type { SearchInputProps } from './inputs/SearchInput';
 export type {
   SelectInputGroupItem,
@@ -29,50 +36,43 @@ export type {
   SelectInputTriggerButtonProps,
 } from './inputs/SelectInput';
 export type { TextAreaProps } from './inputs/TextArea';
+export type { InstructionsListProps } from './instructionsList';
+export type { LoaderProps } from './loader';
+export type { MarkdownProps } from './markdown';
+export type { ModalProps } from './modal';
+export type { MoneyProps } from './money';
+export type {
+  CurrencyHeaderItem,
+  CurrencyItem,
+  CurrencyOptionItem,
+  MoneyInputProps,
+} from './moneyInput';
+export type { NavigationOptionListProps } from './navigationOptionsList';
 export type { PhoneNumberInputProps } from './phoneNumberInput/PhoneNumberInput';
 export type { PopoverProps } from './popover';
 export type { ProgressProps } from './progress';
 export type { ProgressBarProps } from './progressBar';
-export type { ProviderProps, DirectionProviderProps, LanguageProviderProps } from './provider';
+export type { DirectionProviderProps, LanguageProviderProps, ProviderProps } from './provider';
 export type { RadioProps } from './radio';
 export type { RadioGroupProps, RadioGroupRadio } from './radioGroup';
 export type { RadioOptionProps } from './radioOption';
+export type { SegmentedControlProps } from './segmentedControl';
+export type { SlidingPanelProps } from './slidingPanel';
 export type { SnackbarProps } from './snackbar/Snackbar';
 export type { SnackbarContextType } from './snackbar/SnackbarContext';
 export type { StatusIconProps } from './statusIcon';
 export type { StickyProps } from './sticky';
+export type { SummaryProps } from './summary';
 export type { SwitchProps } from './switch';
 export type { SwitchOptionProps } from './switchOption';
 export type { TextareaWithDisplayFormatProps } from './textareaWithDisplayFormat';
 export type { TooltipProps } from './tooltip';
-export type { UploadedFile, UploadError, UploadResponse } from './uploadInput/types';
-export type { MarkdownProps } from './markdown';
-export type { ModalProps } from './modal';
-export type { MoneyProps } from './money';
-export type {
-  CurrencyHeaderItem,
-  CurrencyItem,
-  CurrencyOptionItem,
-  MoneyInputProps,
-} from './moneyInput';
-export type { SlidingPanelProps } from './slidingPanel';
-export type {
-  LayoutDirection,
-  TypographyTypes,
-  TitleTypes,
-  BodyTypes,
-  LinkTypes,
-  DisplayTypes,
-} from './common';
-export type { SegmentedControlProps } from './segmentedControl';
-export type { TypeaheadProps, TypeaheadOption } from './typeahead';
-export type { InstructionsListProps } from './instructionsList';
+export type { TypeaheadOption, TypeaheadProps } from './typeahead';
+export type { UploadError, UploadResponse, UploadedFile } from './uploadInput/types';
 
 /**
  * Components
  */
-export { default as Title } from './title';
-export { default as Body } from './body';
 export { default as Accordion } from './accordion';
 export { default as ActionButton } from './actionButton';
 export { default as ActionOption } from './actionOption';
@@ -80,16 +80,19 @@ export { default as Alert } from './alert';
 export { default as Avatar } from './avatar';
 export { default as AvatarWrapper } from './avatarWrapper';
 export { default as Badge } from './badge';
-export { default as BottomSheet } from './common/bottomSheet';
+export { default as Body } from './body';
 export { default as Button } from './button';
 export { default as Card } from './card';
-export { default as BaseCard } from './common/card';
 export { default as Checkbox } from './checkbox';
 export { default as CheckboxButton } from './checkboxButton';
 export { default as CheckboxOption } from './checkboxOption';
 export { default as Chevron } from './chevron';
-export { default as Chips, Chip } from './chips';
+export { Chip, default as Chips } from './chips';
 export { default as CircularButton } from './circularButton';
+export { default as Option } from './common/Option';
+export { default as BottomSheet } from './common/bottomSheet';
+export { default as BaseCard } from './common/card';
+export { default as CriticalCommsBanner } from './criticalBanner';
 export { default as DateInput } from './dateInput';
 export { default as DateLookup } from './dateLookup';
 export { default as Decision } from './decision';
@@ -104,6 +107,7 @@ export { default as Header } from './header';
 export { default as Image } from './image';
 export { default as Info } from './info';
 export { default as InlineAlert } from './inlineAlert';
+export { default as InputWithDisplayFormat } from './inputWithDisplayFormat';
 export { Input } from './inputs/Input';
 export { InputGroup } from './inputs/InputGroup';
 export { SearchInput } from './inputs/SearchInput';
@@ -113,9 +117,9 @@ export {
   SelectInputTriggerButton,
 } from './inputs/SelectInput';
 export { TextArea } from './inputs/TextArea';
-export { default as InputWithDisplayFormat } from './inputWithDisplayFormat';
 export { default as InstructionsList } from './instructionsList';
 export { default as Link } from './link';
+export { default as ListItem } from './listItem';
 export { default as Loader } from './loader';
 export { default as Logo } from './logo';
 export { default as Markdown } from './markdown';
@@ -125,24 +129,23 @@ export { default as MoneyInput } from './moneyInput';
 export { default as NavigationOption } from './navigationOption';
 export { default as NavigationOptionsList } from './navigationOptionsList';
 export { default as Nudge } from './nudge';
-export { default as Option } from './common/Option';
 export { default as OverlayHeader } from './overlayHeader';
 export { default as PhoneNumberInput } from './phoneNumberInput';
 export { default as Popover } from './popover';
 export { default as ProcessIndicator } from './processIndicator';
-export { default as ProgressBar } from './progressBar';
 export { default as Progress } from './progress';
-export { default as PromoCard } from './promoCard';
-export { default as PromoCardGroup } from './promoCard';
-export { default as Provider, DirectionProvider, LanguageProvider } from './provider';
+export { default as ProgressBar } from './progressBar';
+export { PromoCardGroup, default as PromoCard } from './promoCard';
+export { DirectionProvider, LanguageProvider, default as Provider } from './provider';
 export { default as Radio } from './radio';
 export { default as RadioGroup } from './radioGroup';
 export { default as RadioOption } from './radioOption';
 export { default as Section } from './section';
-export { default as Select } from './select';
 export { default as SegmentedControl } from './segmentedControl';
+export { default as Select } from './select';
 export { default as SlidingPanel } from './slidingPanel';
 export { default as SnackbarPortal } from './snackbar/Snackbar';
+export { SnackbarConsumer, SnackbarContext } from './snackbar/SnackbarContext';
 export { default as SnackbarProvider } from './snackbar/SnackbarProvider';
 export { default as StatusIcon } from './statusIcon/StatusIcon';
 export { default as Stepper } from './stepper/Stepper';
@@ -152,66 +155,65 @@ export { default as Switch } from './switch';
 export { default as SwitchOption } from './switchOption';
 export { default as Tabs } from './tabs';
 export { default as TextareaWithDisplayFormat } from './textareaWithDisplayFormat';
+export { default as Title } from './title';
 export { default as Tooltip } from './tooltip';
 export { default as Typeahead } from './typeahead';
 export { default as Upload } from './upload';
 export { default as UploadInput } from './uploadInput';
-export { SnackbarConsumer, SnackbarContext } from './snackbar/SnackbarContext';
-export { default as CriticalCommsBanner } from './criticalBanner';
-export { default as ListItem } from './listItem';
 
 /**
  * Hooks
  */
-export { default as useSnackbar } from './snackbar/useSnackbar';
 export { useDirection, useLayout } from './common/hooks';
 export { useScreenSize } from './common/hooks/useScreenSize';
+export { default as useSnackbar } from './snackbar/useSnackbar';
 
 /**
  * Enums
  */
+export { AlertArrowPosition } from './alert/Alert';
+export { AvatarType } from './avatar';
 export {
-  Direction,
-  Size,
-  Width,
-  Sentiment,
-  Priority,
+  Breakpoint,
   ControlType,
-  Type,
-  Theme,
   DateMode,
+  Direction,
+  FileType,
+  Layout,
+  MarkdownNodeType,
   MonthFormat,
   Position,
-  Scroll,
+  Priority,
   ProfileType,
-  Breakpoint,
-  Layout,
+  Scroll,
+  Sentiment,
+  Size,
   Status,
-  MarkdownNodeType,
+  Theme,
+  Type,
   Typography,
   Variant,
+  Width,
 } from './common';
-export { AvatarType } from './avatar';
-export { InfoPresentation } from './info';
-export { UploadStep } from './upload';
 export { DecisionPresentation, DecisionType } from './decision';
+export { InfoPresentation } from './info';
 export { LogoType } from './logo';
-export { FileType } from './common';
+export { UploadStep } from './upload';
 
 /**
  * Utils
  */
 export {
-  adjustLocale,
   DEFAULT_LANG,
   DEFAULT_LOCALE,
+  RTL_LANGUAGES,
+  SUPPORTED_LANGUAGES,
+  adjustLocale,
   getCountryFromLocale,
   getDirectionFromLocale,
   getLangFromLocale,
   isBrowser,
   isServerSide,
-  RTL_LANGUAGES,
-  SUPPORTED_LANGUAGES,
 } from './common';
 
 /**

package/src/inputs/SelectInput.spec.tsx

@@ -64,12 +64,15 @@ describe('SelectInput', () => {
   });
 
   it('shows item selected via mouse', async () => {
+    const handleClose = jest.fn();
+
     render(
       <SelectInput
         items={[
           { type: 'option', value: 'USD' },
           { type: 'option', value: 'EUR' },
         ]}
+        onClose={handleClose}
       />,
     );
 
@@ -81,14 +84,19 @@ describe('SelectInput', () => {
       userEvent.click(trigger);
     });
 
+    expect(handleClose).not.toHaveBeenCalled();
+
     const listbox = screen.getByRole('listbox');
     const option = within(listbox).getByRole('option', { name: 'EUR' });
     userEvent.click(option);
 
+    expect(handleClose).toHaveBeenCalledTimes(1);
     expect(trigger).toHaveTextContent('EUR');
   });
 
   it('filters items via keyboard', async () => {
+    const handleClose = jest.fn();
+
     render(
       <SelectInput
         items={[
@@ -103,6 +111,7 @@ describe('SelectInput', () => {
           },
         ]}
         filterable
+        onClose={handleClose}
       />,
     );
 
@@ -113,6 +122,8 @@ describe('SelectInput', () => {
       userEvent.keyboard(' ');
     });
 
+    expect(handleClose).not.toHaveBeenCalled();
+
     const listbox = screen.getByRole('listbox');
     expect(within(listbox).getAllByRole('option')).toHaveLength(3);
 
@@ -134,6 +145,7 @@ describe('SelectInput', () => {
       userEvent.click(option);
     });
 
+    expect(handleClose).toHaveBeenCalledTimes(1);
     expect(trigger).toHaveTextContent('EUR');
   });
 

package/src/inputs/SelectInput.story.tsx

@@ -46,7 +46,9 @@ export const Months: Story<Month | null> = {
       value: month,
     })),
     renderValue: (month) => <SelectInputOptionContent title={month.name} />,
+    onFilterChange: fn() satisfies Mock,
     onChange: fn() satisfies Mock,
+    onClose: fn() satisfies Mock,
     onClear: fn() satisfies Mock,
   },
   render: function Render({ onChange, onClear, ...args }) {

package/src/inputs/SelectInput.tsx

@@ -155,6 +155,7 @@ export interface SelectInputProps<T = string, M extends boolean = false> {
   className?: string;
   onFilterChange?: (args: { query: string; queryNormalized: string | null }) => void;
   onChange?: (value: M extends true ? T[] : T) => void;
+  onClose?: () => void;
   onClear?: () => void;
 }
 
@@ -238,10 +239,23 @@ export function SelectInput<T = string, M extends boolean = false>({
   className,
   onFilterChange = noop,
   onChange,
+  onClose,
   onClear,
 }: SelectInputProps<T, M>) {
   const [open, setOpen] = useState(false);
 
+  const initialized = useRef(false);
+  const handleClose = useEffectEvent(onClose ?? (() => {}));
+  useEffect(() => {
+    if (initialized.current) {
+      if (!open) {
+        handleClose?.();
+      }
+    } else {
+      initialized.current = true;
+    }
+  }, [handleClose, open]);
+
   const [filterQuery, _setFilterQuery] = useState('');
   const setFilterQuery = useEffectEvent((query: string) => {
     _setFilterQuery(query);

package/src/listItem/ListItem.tsx

@@ -32,7 +32,7 @@ const ListItem: FC<ListItemProps> = ({
       })}
       {...rest}
     >
-      {media ? media : null}
+      {media}
 
       <div className={classNames('d-flex flex-column', { 'p-l-2': !!media, 'p-r-2': !!action })}>
         <Body type="body-default" className="text-secondary m-b-0">

package/src/nudge/Nudge.tsx

@@ -10,15 +10,15 @@ import Link from '../link';
 // WARNING: Changing this will cause nudges to reappear wherever persist nudge is used and privacy team will need to be updated too
 export const STORAGE_NAME = 'dismissedNudges';
 
-const getLocalStorage = (): Array<string> => {
+const getLocalStorage = (): string[] => {
   try {
     const storageItem = localStorage.getItem(STORAGE_NAME);
 
     if (storageItem) {
-      const storage = JSON.parse(storageItem) as string[];
+      const storage: unknown = JSON.parse(storageItem);
 
       if (Array.isArray(storage)) {
-        return storage;
+        return storage.map((item) => String(item));
       }
     }
     // eslint-disable-next-line unicorn/prefer-optional-catch-binding, no-empty
@@ -98,10 +98,7 @@ const Nudge = ({
 
     if (persistDismissal && id) {
       try {
-        localStorage.setItem(
-          STORAGE_NAME,
-          JSON.stringify([...(dismissedNudgesStorage ? dismissedNudgesStorage : []), id]),
-        );
+        localStorage.setItem(STORAGE_NAME, JSON.stringify([...dismissedNudgesStorage, id]));
         // eslint-disable-next-line unicorn/prefer-optional-catch-binding, no-empty
       } catch (error) {}
 
@@ -118,7 +115,7 @@ const Nudge = ({
       const dismissedNudgesStorage = getLocalStorage();
       let isDismissed = false;
 
-      if (dismissedNudgesStorage && dismissedNudgesStorage.find((item) => item === id)) {
+      if (dismissedNudgesStorage?.find((item) => item === id)) {
         setIsDismissed(true);
         isDismissed = true;
       }

package/src/overlayHeader/OverlayHeader.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import { Size } from '../common';
 import { CloseButton } from '../common/closeButton';
-import FlowHeader from '../common/flowHeader/FlowHeader';
+import FlowHeader from '../common/flowHeader';
 import Logo from '../logo';
 
 const OverlayHeader = ({ avatar, onClose, logo }) => {

package/src/promoCard/PromoCard.tsx

@@ -259,13 +259,16 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
 
     // Define all class names string based on the values of the `href`, `type`,
     // `checked`, and `className` props.
-    const commonClasses = classNames({
-      'np-Card--promoCard': true,
-      'np-Card--checked': !href && type,
-      'np-Card--link': href && !type,
-      'is-checked': type === 'radio' ? value === state : type === 'checkbox' ? checked : undefined,
-      [`${className || ''}`]: className,
-    });
+    const commonClasses = classNames(
+      {
+        'np-Card--promoCard': true,
+        'np-Card--checked': !href && type,
+        'np-Card--link': href && !type,
+        'is-checked':
+          type === 'radio' ? value === state : type === 'checkbox' ? checked : undefined,
+      },
+      className,
+    );
 
     // Object with common props that will be passed to the `Card` components
     const commonProps = {

package/src/promoCard/PromoCardGroup.tsx

@@ -86,18 +86,20 @@ const PromoCardGroup: FunctionComponent<PromoCardGroupProps> = ({
       onChange(value);
     };
 
-    return { state, isDisabled: isDisabled, onChange: handleOnChange };
+    return { state, isDisabled, onChange: handleOnChange };
   }, [state, isDisabled, onChange]);
 
-  const commonClasses = classNames({
-    'np-CardGroup': true,
-    'is-disabled': isDisabled,
-    [`${className || ''}`]: className,
-  });
+  const commonClasses = classNames(
+    {
+      'np-CardGroup': true,
+      'is-disabled': isDisabled,
+    },
+    className,
+  );
 
   const commonProps = {
     className: commonClasses,
-    id: id,
+    id,
     'data-testid': testId,
     role: containerRole as AriaRoleRadioGroup | undefined, // Add the role attribute here
   };

package/src/select/Select.story.js

@@ -42,7 +42,7 @@ export const Basic = () => {
     <Select
       id={id}
       size={size}
-      classNames={`${hasError ? 'has-error' : ''}`}
+      classNames={hasError ? 'has-error' : ''}
       placeholder={placeholder}
       dropdownRight={dropdownRight}
       dropdownWidth={dropdownWidth}

package/src/stepper/Stepper.spec.js

@@ -40,25 +40,25 @@ describe('Stepper', () => {
     });
 
     it('sets the widths of the progress bar to match where you are in the flow', () => {
-      expect(totalWidth()).toStrictEqual('0%');
+      expect(totalWidth()).toBe('0%');
       activeStep(2);
-      expect(totalWidth()).toStrictEqual('100%');
+      expect(totalWidth()).toBe('100%');
       steps(5);
-      expect(totalWidth()).toStrictEqual('50%');
+      expect(totalWidth()).toBe('50%');
       activeStep(10000);
-      expect(totalWidth()).toStrictEqual('100%');
+      expect(totalWidth()).toBe('100%');
       activeStep(-10);
-      expect(totalWidth()).toStrictEqual('0%');
+      expect(totalWidth()).toBe('0%');
     });
   });
 
   describe('steps', () => {
     it('have rendered labels', () => {
       steps(5);
-      [0, 1, 2, 3, 4].forEach((label, index) => {
-        expect(
-          component.find('.tw-stepper__step').at(index).find('span').props().children,
-        ).toStrictEqual(`${label}`);
+      [0, 1, 2, 3, 4].forEach((step) => {
+        expect(component.find('.tw-stepper__step').at(step).find('span').props().children).toBe(
+          step.toString(),
+        );
       });
     });
 
@@ -188,8 +188,8 @@ describe('Stepper', () => {
       });
       const firstStepHoverLabel = step(0).children();
       expect(firstStepHoverLabel.type()).toBe(Tooltip);
-      expect(firstStepHoverLabel.children().render().text()).toStrictEqual('label');
-      expect(step(1).find('span').props().children).toStrictEqual('label 2');
+      expect(firstStepHoverLabel.children().render().text()).toBe('label');
+      expect(step(1).find('span').props().children).toBe('label 2');
     });
 
     it('renders jsx', () => {
@@ -220,8 +220,8 @@ describe('Stepper', () => {
       });
       const firstStepHoverLabel = step(0).children();
       expect(firstStepHoverLabel.type()).toBe('span');
-      expect(firstStepHoverLabel.props().children).toStrictEqual('label');
-      expect(step(1).children().props().children).toStrictEqual('label 2');
+      expect(firstStepHoverLabel.props().children).toBe('label');
+      expect(step(1).children().props().children).toBe('label 2');
     });
   });
 });

package/src/title/Title.tsx

@@ -11,7 +11,7 @@ const titleTypeMapping = {
   [Typography.TITLE_SUBSECTION]: 'h3',
   [Typography.TITLE_BODY]: 'h4',
   [Typography.TITLE_GROUP]: 'h5',
-};
+} as const;
 
 type Props = LabelHTMLAttributes<HTMLHeadingElement | HTMLSpanElement | HTMLLabelElement> &
   LiHTMLAttributes<HTMLLIElement> & {
@@ -29,12 +29,11 @@ function Title({ as, type = DEFAULT_TYPE, className, ...props }: Props) {
   const mapping = titleTypeMapping[type];
   const isTypeSupported = mapping !== undefined;
   if (isTypeSupported) {
-    const HeaderTag = (as ?? `${mapping}`) as keyof ReactHTML;
+    const HeaderTag = as ?? mapping;
     return <HeaderTag {...props} className={classNames(`np-text-${type}`, className)} />;
-  } else {
-    const HeaderTag = (as ?? `${titleTypeMapping[DEFAULT_TYPE]}`) as keyof ReactHTML;
-    return <HeaderTag {...props} className={classNames(`np-text-${DEFAULT_TYPE}`, className)} />;
   }
+  const HeaderTag = as ?? titleTypeMapping[DEFAULT_TYPE];
+  return <HeaderTag {...props} className={classNames(`np-text-${DEFAULT_TYPE}`, className)} />;
 }
 
 export default Title;

package/src/withDisplayFormat/WithDisplayFormat.tsx

@@ -169,10 +169,10 @@ class WithDisplayFormat<T extends TextElementProps> extends Component<
     let newFormattedValue = '';
 
     if (this.detectUndoRedo(event) === 'Undo') {
-      newFormattedValue = formatWithPattern(historyNavigator.undo(), displayPattern);
+      newFormattedValue = formatWithPattern(historyNavigator.undo().toString(), displayPattern);
       this.setState({ value: newFormattedValue, triggerType: 'Undo' });
     } else if (this.detectUndoRedo(event) === 'Redo') {
-      newFormattedValue = formatWithPattern(historyNavigator.redo(), displayPattern);
+      newFormattedValue = formatWithPattern(historyNavigator.redo().toString(), displayPattern);
       this.setState({ value: newFormattedValue, triggerType: 'Redo' });
     } else {
       this.setState({

package/src/common/DOMOperations/index.js

@@ -1,3 +0,0 @@
-import { addNoScrollClass, removeNoScrollClass } from './DOMOperations';
-
-export { addNoScrollClass, removeNoScrollClass };

package/src/common/bottomSheet/index.js

@@ -1 +0,0 @@
-export { default } from './BottomSheet';

package/src/common/deviceDetection/deviceDetection.js

@@ -1,7 +0,0 @@
-export function isIosDevice() {
-  const sampleTouchDevices = ['iphone', 'ipad', 'ipod'];
-  const matchString = sampleTouchDevices.map((device) => `(${device})`).join('|');
-  const regex = new RegExp(matchString, 'gi');
-
-  return typeof navigator !== 'undefined' && !!navigator.userAgent.match(regex);
-}

package/src/dimmer/index.js

@@ -1 +0,0 @@
-export { default } from './Dimmer';