@transferwise/components 46.36.1 → 46.37.0

package/src/switchOption/SwitchOption.tsx

@@ -1,4 +1,4 @@
-import { MouseEvent, ReactChild } from 'react';
+import { MouseEvent } from 'react';
 
 import Option from '../common/Option';
 import Switch from '../switch';
@@ -6,15 +6,15 @@ import Switch from '../switch';
 export type SwitchOptionProps = {
   checked?: boolean;
   complex?: boolean;
-  content?: ReactChild;
+  content?: React.ReactNode;
   disabled?: boolean;
   showMediaCircle?: boolean;
   showMediaAtAllSizes?: boolean;
   isContainerAligned?: boolean;
   id?: string;
-  media?: ReactChild;
+  media?: React.ReactNode;
   onChange: (newValue: boolean) => void;
-  title: ReactChild;
+  title: React.ReactNode;
   'aria-label': string;
 };
 
@@ -22,9 +22,7 @@ const stopPropagation = (event?: MouseEvent<HTMLSpanElement>) => {
   if (event) {
     event.stopPropagation();
     event.preventDefault();
-    if (event.nativeEvent && event.nativeEvent.stopImmediatePropagation) {
-      event.nativeEvent.stopImmediatePropagation();
-    }
+    event.nativeEvent?.stopImmediatePropagation?.();
   }
 };
 

package/src/tabs/Tabs.js

@@ -3,7 +3,7 @@ import { Spring, SpringValue, animated } from '@react-spring/web';
 import classNames from 'classnames';
 import clamp from 'lodash.clamp';
 import PropTypes from 'prop-types';
-import { Component, createRef, Fragment, RefObject } from 'react';
+import { Component, createRef, Fragment } from 'react';
 
 import { Size, Width, Direction } from '../common';
 import { DirectionContext } from '../provider/direction';
@@ -27,7 +27,7 @@ const enabledTabsFilter = (tab) => !tab.disabled;
 const SpacerWidth = { default: 0, xs: 8, sm: 16, md: 24, lg: 32 };
 
 class Tabs extends Component {
-  /** @type {RefObject<HTMLDivElement>} */
+  /** @type {React.RefObject<HTMLDivElement | null>} */
   containerReference = createRef();
 
   constructor(props) {
@@ -576,7 +576,6 @@ Tabs.propTypes = {
     }),
   ).isRequired,
   selected: PropTypes.number.isRequired,
-  onTabSelect: PropTypes.func.isRequired,
   name: PropTypes.string.isRequired,
   animatePanelsOnClick: PropTypes.bool,
   changeTabOnSwipe: PropTypes.bool,
@@ -584,6 +583,7 @@ Tabs.propTypes = {
   transitionSpacing: PropTypes.oneOf(['default', 'xs', 'sm', 'md', 'lg']),
   headerWidth: PropTypes.oneOf(['auto', 'block']),
   id: PropTypes.string,
+  onTabSelect: PropTypes.func.isRequired,
 };
 
 Tabs.defaultProps = {

package/src/tooltip/Tooltip.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import classNames from 'classnames';
 import {
+  AriaAttributes,
   PropsWithChildren,
   ReactElement,
   ReactNode,
@@ -84,7 +85,7 @@ const Tooltip = ({
       onBlur={() => setOpen(false)}
     >
       {children
-        ? cloneElement(children as ReactElement, {
+        ? cloneElement(children as ReactElement<Pick<AriaAttributes, 'aria-describedby'>>, {
             'aria-describedby': `${tooltipId}-tooltip`,
           })
         : null}

package/src/uploadInput/UploadInput.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '@wise/components-theming';
 import classNames from 'classnames';
-import { ReactElement, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 
 import Button from '../button';
@@ -127,7 +127,7 @@ const UploadInput = ({
   id,
   sizeLimitErrorMessage,
   uploadButtonTitle,
-}: UploadInputProps): ReactElement => {
+}: UploadInputProps) => {
   const { isModern } = useTheme();
   const [markedFileForDelete, setMarkedFileForDelete] = useState<UploadedFile | null>(null);
   const [mounted, setMounted] = useState(false);

package/src/uploadInput/uploadItem/UploadItem.tsx

@@ -1,7 +1,6 @@
 import { AlertCircle, CrossCircleFill } from '@transferwise/icons';
 import { useTheme } from '@wise/components-theming';
 import classNames from 'classnames';
-import { ReactElement, MouseEvent } from 'react';
 import { useIntl } from 'react-intl';
 
 import Body from '../../body';
@@ -49,7 +48,7 @@ const UploadItem = ({
 
   const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;
 
-  const getIcon = (): ReactElement => {
+  const getIcon = () => {
     if (error || status === Status.FAILED) {
       return isModern ? (
         <StatusIcon size={Size.SMALL} sentiment={Sentiment.NEGATIVE} />
@@ -58,7 +57,7 @@ const UploadItem = ({
       );
     }
 
-    let processIndicator: ReactElement;
+    let processIndicator: React.ReactNode;
 
     switch (status) {
       case Status.PROCESSING:
@@ -114,7 +113,7 @@ const UploadItem = ({
     return filename || formatMessage(MESSAGES.uploadedFile);
   };
 
-  const onDownloadFile = (event: MouseEvent): void => {
+  const onDownloadFile = (event: React.MouseEvent): void => {
     if (onDownload) {
       event.preventDefault();
       onDownload(file);

package/src/withDisplayFormat/WithDisplayFormat.tsx

@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import * as React from 'react';
 
 import { HistoryNavigator } from '../common';
 import {
@@ -61,10 +61,10 @@ export interface WithDisplayFormatProps<T extends TextElementProps = TextElement
   onChange?: (value: string) => void;
   onBlur?: (value: string) => void;
   onFocus?: (value: string) => void;
-  render: (renderProps: T) => JSX.Element;
+  render: (renderProps: T) => React.JSX.Element;
 }
 
-class WithDisplayFormat<T extends TextElementProps> extends Component<
+class WithDisplayFormat<T extends TextElementProps> extends React.Component<
   WithDisplayFormatProps<T>,
   WithDisplayFormatState
 > {