@transferwise/components 46.52.3 → 46.53.0

package/src/radioGroup/RadioGroup.rtl.spec.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen } from '../test-utils';
 
 import RadioGroup from '.';
 import { Field } from '../field/Field';

package/src/select/Select.rtl.spec.tsx

@@ -12,6 +12,6 @@ describe('Select', () => {
         <Select options={options} selected={options[0]} onChange={() => {}} />
       </Field>,
     );
-    expect(screen.getByLabelText('Currency')).toHaveTextContent('USD');
+    expect(screen.getByLabelText(/Currency/)).toHaveTextContent('USD');
   });
 });

package/src/switch/Switch.spec.tsx

@@ -89,6 +89,6 @@ describe('Switch', () => {
         <Switch checked onClick={props.onClick} />
       </Field>,
     );
-    expect(screen.getByLabelText('Dark mode')).toHaveAttribute('role', 'switch');
+    expect(screen.getByLabelText(/Dark mode/)).toHaveAttribute('role', 'switch');
   });
 });

package/src/switch/Switch.story.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 
 import Switch from './Switch';
+import { Field } from '../field/Field';
 
 export default {
   component: Switch,
@@ -13,16 +14,14 @@ export const Basic = () => {
 
   return (
     <div className="d-flex flex-column">
-      <label id="labelID" htmlFor="switchId">
-        A switch with a label
-      </label>
-      <Switch
-        checked={checked1}
-        className="a-class-name"
-        aria-labelledby="labelID"
-        id="switchId"
-        onClick={() => setCheck1(!checked1)}
-      />
+      <Field id="switchId" label="A switch with a label" required>
+        <Switch
+          checked={checked1}
+          className="a-class-name"
+          id="switchId"
+          onClick={() => setCheck1(!checked1)}
+        />
+      </Field>
 
       <Switch
         checked={checked2}
@@ -39,17 +38,16 @@ export const Disabled = () => {
 
   return (
     <div className="d-flex flex-column">
-      <label id="labelID" htmlFor="switchId">
-        A switch with a label
-      </label>
-      <Switch
-        checked={checked}
-        disabled
-        className="a-class-name"
-        aria-labelledby="labelID"
-        id="switchId"
-        onClick={() => setCheck(!checked)}
-      />
+      <Field id="switchId" label="A switch with a label" required>
+        <Switch
+          checked={checked}
+          disabled
+          className="a-class-name"
+          aria-labelledby="labelID"
+          id="switchId"
+          onClick={() => setCheck(!checked)}
+        />
+      </Field>
 
       <Switch
         checked={!checked}

package/src/tabs/Tab.tsx

@@ -0,0 +1,72 @@
+import { clsx } from 'clsx';
+import { forwardRef, useEffect, useRef } from 'react';
+import { useEffectEvent } from '../common/hooks/useEffectEvent';
+
+export interface TabProps {
+  children?: React.ReactNode;
+  disabled?: boolean;
+  selected?: boolean;
+  id: string;
+  panelId: string;
+  style?: React.CSSProperties;
+  focusTab?: () => void;
+  onKeyDown: React.KeyboardEventHandler<HTMLLIElement>;
+  onClick?: React.MouseEventHandler<HTMLLIElement>;
+}
+
+const noop = () => {};
+
+const Tab = forwardRef(function Tab(
+  {
+    children,
+    id,
+    disabled,
+    panelId,
+    selected,
+    onKeyDown,
+    onClick,
+    style,
+    focusTab = noop,
+  }: TabProps,
+  reference: React.ForwardedRef<HTMLLIElement>,
+) {
+  const handleFocusTab = useEffectEvent(focusTab);
+  const firstUpdate = useRef(true);
+  useEffect(
+    function checkFocus() {
+      if (firstUpdate.current) {
+        firstUpdate.current = false;
+        return;
+      }
+
+      if (selected) {
+        handleFocusTab();
+      }
+    },
+    [handleFocusTab, selected],
+  );
+
+  return (
+    <li
+      ref={reference}
+      className={clsx('tabs__tab', selected ? 'np-text-body-large-bold' : 'np-text-body-large', {
+        'tabs__tab--selected': selected,
+        clickable: !disabled,
+        disabled,
+      })}
+      role="tab"
+      id={id}
+      aria-selected={selected ? 'true' : 'false'}
+      aria-disabled={disabled ? 'true' : 'false'}
+      aria-controls={disabled ? undefined : panelId}
+      tabIndex={0}
+      style={style}
+      onKeyDown={disabled ? undefined : onKeyDown}
+      onClick={onClick}
+    >
+      <span className="tabs__tab__content">{children}</span>
+    </li>
+  );
+});
+
+export default Tab;

package/src/tabs/TabList.tsx

@@ -0,0 +1,11 @@
+export interface TabListProps {
+  children?: React.ReactNode;
+}
+
+export default function TabList({ children }: TabListProps) {
+  return (
+    <ul className="tabs__tab-list" role="tablist">
+      {children}
+    </ul>
+  );
+}

package/src/tabs/TabPanel.tsx

@@ -0,0 +1,14 @@
+export interface TabPanelProps {
+  children?: React.ReactNode;
+  id: string;
+  tabId: string;
+  style: React.CSSProperties;
+}
+
+export default function TabPanel({ children, id, tabId, style }: TabPanelProps) {
+  return (
+    <div className="tabs__panel" role="tabpanel" id={id} aria-labelledby={tabId} style={style}>
+      {children}
+    </div>
+  );
+}

package/src/tabs/{Tabs.story.js → Tabs.story.tsx}

@@ -97,7 +97,7 @@ export const NoPanelAnimation = () => {
   const [selected, setSelected] = useState(0);
   return (
     <Tabs
-      animatePanels={false}
+      animatePanelsOnClick={false}
       className="tabs-custom-class"
       name="tabs-docs"
       transitionSpacing={Size.MEDIUM}

package/src/tabs/{Tabs.js → Tabs.tsx}

@@ -1,8 +1,6 @@
-/* eslint-disable react/forbid-dom-props */
-import { Spring, SpringValue, animated } from '@react-spring/web';
+import { Spring, animated } from '@react-spring/web';
 import { clsx } from 'clsx';
 import clamp from 'lodash.clamp';
-import PropTypes from 'prop-types';
 import { Component, createRef, Fragment } from 'react';
 
 import { Size, Width, Direction } from '../common';
@@ -18,19 +16,69 @@ import {
   swipedRightToLeft,
   swipeShouldChangeTab,
   getVelocity,
+  Swipe,
 } from './utils';
 
 const MIN_INDEX = 0;
 
-const enabledTabsFilter = (tab) => !tab.disabled;
+export interface TabItem {
+  title: string;
+  content: React.ReactNode;
+  disabled: boolean;
+}
+
+type TabsTransitionSpacing =
+  | 'default'
+  | `${Size.EXTRA_SMALL | Size.SMALL | Size.MEDIUM | Size.LARGE}`;
+
+export interface TabsProps {
+  tabs: TabItem[];
+  selected: number;
+  name: string;
+  animatePanelsOnClick?: boolean;
+  changeTabOnSwipe?: boolean;
+  className?: string;
+  transitionSpacing?: TabsTransitionSpacing;
+  headerWidth?: `${Width}`;
+  id?: string;
+  onTabSelect: (index: number) => void;
+}
+
+interface TabsState {
+  start: Swipe | null;
+  translateX: number;
+  translateFrom: number;
+  translateTo: number;
+  translateLineX: string | null;
+  isAnimating: boolean;
+  isSwiping: boolean;
+  isScrolling: boolean;
+  lastSwipeVelocity: number;
+  fullWidthTabs: boolean;
+  currentSwipe: Swipe[];
+  selectedTabIndex: number;
+}
+
+const SpacerWidth = {
+  default: 0,
+  xs: 8,
+  sm: 16,
+  md: 24,
+  lg: 32,
+} satisfies Record<TabsTransitionSpacing, number>;
 
-const SpacerWidth = { default: 0, xs: 8, sm: 16, md: 24, lg: 32 };
+export default class Tabs extends Component<TabsProps, TabsState> {
+  declare props: TabsProps & Required<Pick<TabsProps, keyof typeof Tabs.defaultProps>>;
 
-class Tabs extends Component {
-  /** @type {React.RefObject<HTMLDivElement | null>} */
-  containerReference = createRef();
+  static defaultProps = {
+    changeTabOnSwipe: true,
+    transitionSpacing: 'default',
+    headerWidth: Width.BLOCK,
+  } satisfies Partial<TabsProps>;
 
-  constructor(props) {
+  containerReference = createRef<HTMLDivElement>();
+
+  constructor(props: Tabs['props']) {
     super(props);
     this.state = {
       start: null,
@@ -43,17 +91,19 @@ class Tabs extends Component {
       isScrolling: false,
       lastSwipeVelocity: 0,
       fullWidthTabs: props.headerWidth === Width.BLOCK,
+      currentSwipe: [],
+      selectedTabIndex: props.selected,
     };
   }
 
-  container = null;
+  container: HTMLDivElement | null = null;
 
   containerWidth = 0;
 
-  tabRefs = [];
+  tabRefs: (HTMLLIElement | null)[] = [];
 
   get filteredTabsLength() {
-    return this.props.tabs.filter(enabledTabsFilter).length;
+    return this.props.tabs.filter((tab) => !tab.disabled).length;
   }
 
   get MAX_INDEX() {
@@ -71,17 +121,17 @@ class Tabs extends Component {
     window.addEventListener('resize', this.handleResize);
   }
 
-  componentDidUpdate(previousProps, previousState) {
+  componentDidUpdate(previousProps: TabsProps, previousState: TabsState) {
     const currentSelected = this.props.selected;
     const previousSelected = previousProps.selected;
     const currentSelectedTab = this.props.tabs[currentSelected];
-    const currentSelectedTabIsDisabled = currentSelectedTab && currentSelectedTab.disabled;
+    const currentSelectedTabIsDisabled = currentSelectedTab?.disabled;
     const previousSelectedTab = previousProps.tabs[previousSelected];
-    const previousSelectedTabIsDisabled = previousSelectedTab && previousSelectedTab.disabled;
+    const previousSelectedTabIsDisabled = previousSelectedTab?.disabled;
     const currentTabsLength = this.props.tabs.length;
     const previousTabsLength = previousProps.tabs.length;
-    const currentDisabledTabsLength = this.props.tabs.filter(enabledTabsFilter).length;
-    const previousDisabledTabsLength = previousProps.tabs.filter(enabledTabsFilter).length;
+    const currentDisabledTabsLength = this.props.tabs.filter((tab) => !tab.disabled).length;
+    const previousDisabledTabsLength = previousProps.tabs.filter((tab) => !tab.disabled).length;
     const currentHeaderWidth = this.props.headerWidth;
     const previousFullHeaderWidth = previousProps.headerWidth;
     const { animatePanelsOnClick } = this.props;
@@ -120,12 +170,12 @@ class Tabs extends Component {
     }));
   };
 
-  setContainerRefAndWidth = (node) => {
+  setContainerRefAndWidth = (node: HTMLDivElement | null) => {
     this.container = node;
     this.setContainerWidth(node);
   };
 
-  setContainerWidth = (node) => {
+  setContainerWidth = (node: HTMLDivElement | null) => {
     if (!node) {
       return;
     }
@@ -135,10 +185,10 @@ class Tabs extends Component {
     this.containerWidth = width;
   };
 
-  isTabDisabled = (index) => {
+  isTabDisabled = (index: number) => {
     const { tabs } = this.props;
 
-    return tabs[index] && tabs[index].disabled;
+    return tabs[index]?.disabled ?? false;
   };
 
   getAllTabsWidth = () => {
@@ -149,7 +199,7 @@ class Tabs extends Component {
       .reduce((a, b) => a + b, 0);
   };
 
-  getDistanceToSelectedTab = (selectedTabIndex) => {
+  getDistanceToSelectedTab = (selectedTabIndex: number) => {
     return this.tabRefs
       .filter((_, idx) => idx < selectedTabIndex)
       .map((reference) => (reference ? reference.getBoundingClientRect().width : 0))
@@ -190,7 +240,7 @@ class Tabs extends Component {
    * Gets the next tab that should be selected based on the swipe direction
    * and the current selected tab (is called recursively to account for disabled tabs).
    */
-  getTabToSelect = (selected, start, end) => {
+  getTabToSelect = (selected: number, start: Swipe, end: Swipe): number => {
     let nextSelected = selected;
 
     if (swipedLeftToRight(start, end)) {
@@ -220,9 +270,19 @@ class Tabs extends Component {
     return nextSelected;
   };
 
-  swipedOverHalfOfContainer = (difference) => difference / this.containerWidth >= 0.5;
-
-  calculateApplicableDragDifference = ({ currentSelected, nextSelected, start, end }) => {
+  swipedOverHalfOfContainer = (difference: number) => difference / this.containerWidth >= 0.5;
+
+  calculateApplicableDragDifference = ({
+    currentSelected,
+    nextSelected,
+    start,
+    end,
+  }: {
+    currentSelected: number;
+    nextSelected: number;
+    start: Swipe;
+    end: Swipe;
+  }) => {
     const difference = getSwipeDifference(start, end);
     const elasticDrag = getElasticDragDifference(difference);
 
@@ -242,22 +302,22 @@ class Tabs extends Component {
     return false;
   };
 
-  switchTab = (index) => {
+  switchTab = (index: number) => {
     const { onTabSelect } = this.props;
     onTabSelect(index);
   };
 
-  getTabIndexWithoutDisabledTabs(index) {
-    return index - this.props.tabs.slice(0, index).filter((tab) => !enabledTabsFilter(tab)).length;
+  getTabIndexWithoutDisabledTabs(index: number) {
+    return index - this.props.tabs.slice(0, index).filter((tab) => tab.disabled).length;
   }
 
-  animateToTab = (index, instant) => {
+  animateToTab = (index: number, instant?: boolean) => {
     this.animateLine(index);
 
     this.animatePanel(this.getTabIndexWithoutDisabledTabs(index), instant);
   };
 
-  animateLine = (index) => {
+  animateLine = (index: number) => {
     this.setState((previousState) => ({
       translateLineX: previousState.fullWidthTabs
         ? `${index * 100}%`
@@ -266,7 +326,7 @@ class Tabs extends Component {
   };
 
   // Pass `instant` to set the `translateX` to the new panel with no transition
-  animatePanel = (index, instant = false) => {
+  animatePanel = (index: number, instant = false) => {
     const { translateTo: currentTranslateTo } = this.state;
 
     const translateFrom = currentTranslateTo;
@@ -280,7 +340,7 @@ class Tabs extends Component {
     });
   };
 
-  disableScroll = (event) => {
+  disableScroll = (event: Event) => {
     const { isSwiping } = this.state;
 
     if (isSwiping) {
@@ -288,17 +348,17 @@ class Tabs extends Component {
     }
   };
 
-  handleTabClick = (index) => () => {
+  handleTabClick = (index: number) => () => {
     this.switchTab(index);
   };
 
-  onKeyDown = (index) => (event) => {
+  onKeyDown = (index: number) => (event: React.KeyboardEvent<HTMLLIElement>) => {
     if (event && event.key === 'Enter') {
       this.switchTab(index);
     }
   };
 
-  handleTouchStart = (event) => {
+  handleTouchStart: React.TouchEventHandler<HTMLDivElement> = (event) => {
     const start = {
       x: event.nativeEvent.touches[0].clientX,
       y: event.nativeEvent.touches[0].clientY,
@@ -312,11 +372,15 @@ class Tabs extends Component {
     event.persist();
   };
 
-  handleTouchMove = (event) => {
+  handleTouchMove: React.TouchEventHandler<HTMLDivElement> = (event) => {
     const { start } = this.state;
+    if (start == null) {
+      return;
+    }
+
     const { selected: currentSelectedFromProps } = this.props;
     const selected = this.getTabIndexWithoutDisabledTabs(currentSelectedFromProps);
-    const end = {
+    const end: Swipe = {
       x: event.nativeEvent.changedTouches[0].clientX,
       y: event.nativeEvent.changedTouches[0].clientY,
       time: Date.now(),
@@ -363,10 +427,14 @@ class Tabs extends Component {
     }
   };
 
-  handleTouchEnd = (event) => {
+  handleTouchEnd: React.TouchEventHandler<HTMLDivElement> = (event) => {
     const { start, isSwiping } = this.state;
+    if (start == null) {
+      return;
+    }
+
     const { selected } = this.props;
-    const end = {
+    const end: Swipe = {
       x: event.nativeEvent.changedTouches[0].clientX,
       y: event.nativeEvent.changedTouches[0].clientY,
       time: Date.now(),
@@ -433,7 +501,7 @@ class Tabs extends Component {
     const sliderWidth = tabsLength * this.containerWidth + spacer * 2;
 
     // Uses `props.panelTransitionSpacing` to add a spacer in-between the `TabPanel` you're transitioning to/from
-    const Spacer = ({ id }) =>
+    const Spacer = ({ id }: { id: string }) =>
       spacer > 0 && (
         <div
           key={id}
@@ -472,10 +540,10 @@ class Tabs extends Component {
                       disabled={disabled}
                       focusTab={() => {
                         if (this.containerReference.current?.contains(document.activeElement)) {
-                          this.tabRefs[index].focus();
+                          this.tabRefs[index]?.focus();
                         }
                       }}
-                      onClick={disabled ? null : this.handleTabClick(index)}
+                      onClick={disabled ? undefined : this.handleTabClick(index)}
                       onKeyDown={this.onKeyDown(index)}
                       {...(fullWidthTabs
                         ? { style: { width: `${(1 / tabs.length) * 100}%` } }
@@ -564,34 +632,3 @@ class Tabs extends Component {
     );
   }
 }
-
-const SpacerSizes = { ...Size, NONE: 'default' };
-
-Tabs.propTypes = {
-  tabs: PropTypes.arrayOf(
-    PropTypes.shape({
-      title: PropTypes.string.isRequired,
-      content: PropTypes.node.isRequired,
-      disabled: PropTypes.bool.isRequired,
-    }),
-  ).isRequired,
-  selected: PropTypes.number.isRequired,
-  name: PropTypes.string.isRequired,
-  animatePanelsOnClick: PropTypes.bool,
-  changeTabOnSwipe: PropTypes.bool,
-  className: PropTypes.string,
-  transitionSpacing: PropTypes.oneOf(['default', 'xs', 'sm', 'md', 'lg']),
-  headerWidth: PropTypes.oneOf(['auto', 'block']),
-  id: PropTypes.string,
-  onTabSelect: PropTypes.func.isRequired,
-};
-
-Tabs.defaultProps = {
-  animatePanelsOnClick: false,
-  changeTabOnSwipe: true,
-  className: '',
-  transitionSpacing: SpacerSizes.NONE,
-  headerWidth: Width.BLOCK,
-};
-
-export default Tabs;

package/src/tabs/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Tabs';
+export type { TabItem, TabsProps } from './Tabs';

package/src/tabs/{utils.spec.js → utils.spec.ts}

@@ -5,12 +5,13 @@ import {
   getSwipeDifference,
   swipeShouldChangeTab,
   getVelocity,
+  Swipe,
 } from './utils';
 
 describe('Tabs Utility', () => {
-  let start;
-  let end;
-  let coords;
+  let start: Swipe;
+  let end: Swipe;
+  let coords: Swipe[];
 
   beforeEach(() => {
     jest.clearAllMocks();
@@ -18,8 +19,8 @@ describe('Tabs Utility', () => {
 
   describe('when the ending x axis is greater than the starting x axis', () => {
     beforeEach(() => {
-      start = { x: 0, time: 1569538800000 };
-      end = { x: 50, time: 1569538800300 };
+      start = { x: 0, y: 0, time: 1569538800000 };
+      end = { x: 50, y: 0, time: 1569538800300 };
     });
 
     it('determines that the swipe was left to right', () => {
@@ -34,8 +35,8 @@ describe('Tabs Utility', () => {
 
   describe('when the ending x axis is less than the starting x axis', () => {
     beforeEach(() => {
-      start = { x: 50, time: 1569538800000 };
-      end = { x: 0, time: 1569538800300 };
+      start = { x: 50, y: 0, time: 1569538800000 };
+      end = { x: 0, y: 0, time: 1569538800300 };
     });
 
     it('determines that the swipe was right to left', () => {
@@ -50,20 +51,20 @@ describe('Tabs Utility', () => {
 
   describe('checking if a swipe should change tabs', () => {
     it('should change tab when the difference and velocity are significant', () => {
-      start = { x: 0, time: 1569538800000 };
-      end = { x: 100, time: 1569538800001 };
+      start = { x: 0, y: 0, time: 1569538800000 };
+      end = { x: 100, y: 0, time: 1569538800001 };
       expect(swipeShouldChangeTab(start, end)).toBe(true);
     });
 
     it('should not change tab when the difference is small', () => {
-      start = { x: 0, time: 1569538800000 };
-      end = { x: 1, time: 1569538800001 };
+      start = { x: 0, y: 0, time: 1569538800000 };
+      end = { x: 1, y: 0, time: 1569538800001 };
       expect(swipeShouldChangeTab(start, end)).toBe(false);
     });
 
     it('should not change tab when the velocity is small', () => {
-      start = { x: 0, time: 1569538800000 };
-      end = { x: 100, time: 1569538900000 };
+      start = { x: 0, y: 0, time: 1569538800000 };
+      end = { x: 100, y: 0, time: 1569538900000 };
       expect(swipeShouldChangeTab(start, end)).toBe(false);
     });
   });
@@ -71,11 +72,11 @@ describe('Tabs Utility', () => {
   describe('checking for velocity against an array of touches', () => {
     beforeEach(() => {
       coords = [
-        { x: 0, time: 1569538800000 },
-        { x: 100, time: 1569538825000 },
-        { x: 200, time: 1569538850000 },
-        { x: 300, time: 1569538875000 },
-        { x: 400, time: 1569538900000 },
+        { x: 0, y: 0, time: 1569538800000 },
+        { x: 100, y: 0, time: 1569538825000 },
+        { x: 200, y: 0, time: 1569538850000 },
+        { x: 300, y: 0, time: 1569538875000 },
+        { x: 400, y: 0, time: 1569538900000 },
       ];
     });
 
@@ -84,13 +85,15 @@ describe('Tabs Utility', () => {
     });
 
     it('should only take into account the last 5 coordinates', () => {
-      coords.unshift({ x: 10000, time: 1569538800000 }, { x: 100000, time: 1569538800000 });
+      coords.unshift(
+        { x: 10000, y: 0, time: 1569538800000 },
+        { x: 100000, y: 0, time: 1569538800000 },
+      );
       expect(getVelocity(coords)).toBe(0.004);
     });
 
     it('returns a default 0 if there are any issues with the touches passed in', () => {
       expect(getVelocity([])).toBe(0);
-      expect(getVelocity([null, null, null])).toBe(0);
     });
   });
 
@@ -119,5 +122,5 @@ describe('Tabs Utility', () => {
   });
 });
 
-const getApproximateElasticDragDifference = (difference) =>
+const getApproximateElasticDragDifference = (difference: number) =>
   Math.round(getElasticDragDifference(difference));