@transferwise/components 46.7.0 → 46.9.0

package/src/snackbar/{Snackbar.story.js → Snackbar.story.tsx}

@@ -1,5 +1,6 @@
 import { action } from '@storybook/addon-actions';
 import { number } from '@storybook/addon-knobs';
+import { StoryContext } from '@storybook/react';
 import { Mobile, Theme, Switch, Bulb, Info, Coins } from '@transferwise/icons';
 
 import Button from '../button';
@@ -120,7 +121,7 @@ export const basic = () => {
   );
 };
 
-basic.play = async ({ canvasElement }) => {
+basic.play = ({ canvasElement }: StoryContext) => {
   const canvas = within(canvasElement);
   userEvent.click(canvas.getByRole('button'));
 };

package/src/snackbar/{Snackbar.js → Snackbar.tsx}

@@ -1,21 +1,36 @@
-import PropTypes from 'prop-types';
-import { Component, createRef, RefObject } from 'react';
+import { Component, createRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
 
 import ActionButton from '../actionButton';
 import Body from '../body';
-import { Theme } from '../common';
+import { Theme, ThemeDark, ThemeLight } from '../common';
 import { DirectionContext } from '../provider/direction';
 import withNextPortal from '../withNextPortal/withNextPortal';
 
 export const CSS_TRANSITION_DURATION = 400;
 
-export class Snackbar extends Component {
-  /** @type {RefObject<HTMLSpanElement>} */
-  bodyRef = createRef();
+export interface SnackbarProps {
+  action?: {
+    label: string;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  };
+  text: React.ReactNode;
+  theme?: ThemeLight | ThemeDark;
+  timeout: number;
+  timestamp: number;
+}
+
+interface SnackbarState extends Pick<SnackbarProps, 'action' | 'text' | 'theme'> {
+  visible: boolean;
+}
+
+export class Snackbar extends Component<SnackbarProps, SnackbarState> {
+  bodyRef = createRef<HTMLSpanElement>();
+  timeout = 0;
+  transitionTimeout = 0;
 
-  constructor() {
-    super();
+  constructor(props: SnackbarProps) {
+    super(props);
     this.state = {
       visible: false,
       text: '',
@@ -23,11 +38,11 @@ export class Snackbar extends Component {
   }
 
   componentWillUnmount() {
-    clearTimeout(this.timeout);
-    clearTimeout(this.transitionTimeout);
+    window.clearTimeout(this.timeout);
+    window.clearTimeout(this.transitionTimeout);
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
+  shouldComponentUpdate(nextProps: SnackbarProps, nextState: SnackbarState) {
     if (!nextProps.text) {
       return false;
     }
@@ -45,12 +60,12 @@ export class Snackbar extends Component {
   setLeaveTimeout = () => {
     const { timeout } = this.props;
 
-    this.timeout = setTimeout(() => {
+    this.timeout = window.setTimeout(() => {
       this.setState({ visible: false });
     }, timeout);
   };
 
-  componentDidUpdate(previousProps) {
+  componentDidUpdate(previousProps: SnackbarProps) {
     const { action, text, theme, timestamp } = this.props;
 
     if (!previousProps.text) {
@@ -58,11 +73,11 @@ export class Snackbar extends Component {
         this.setLeaveTimeout();
       });
     } else if (previousProps.timestamp !== timestamp) {
-      clearTimeout(this.timeout);
+      window.clearTimeout(this.timeout);
 
       if (this.state.visible) {
         this.setState({ visible: false }, () => {
-          this.transitionTimeout = setTimeout(() => {
+          this.transitionTimeout = window.setTimeout(() => {
             this.setState({ visible: true, action, text, theme });
             this.setLeaveTimeout();
           }, CSS_TRANSITION_DURATION);
@@ -75,7 +90,7 @@ export class Snackbar extends Component {
   }
 
   render() {
-    const { action, text, theme, visible } = this.state;
+    const { action, text, theme = Theme.LIGHT, visible } = this.state;
     const { timeout } = this.props;
 
     return (
@@ -112,20 +127,4 @@ export class Snackbar extends Component {
 
 Snackbar.contextType = DirectionContext;
 
-Snackbar.propTypes = {
-  action: PropTypes.shape({
-    label: PropTypes.string.isRequired,
-    onClick: PropTypes.func,
-  }),
-  text: PropTypes.node.isRequired,
-  theme: PropTypes.oneOf(['light', 'dark']),
-  timeout: PropTypes.number.isRequired,
-  timestamp: PropTypes.number.isRequired,
-};
-
-Snackbar.defaultProps = {
-  action: null,
-  theme: Theme.LIGHT,
-};
-
 export default withNextPortal(Snackbar);

package/src/snackbar/SnackbarContext.ts

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+
+import { SnackbarProps } from './Snackbar';
+
+export type SnackbarContextType = {
+  createSnackbar: (props: Omit<SnackbarProps, 'timeout' | 'timestamp'>) => void;
+};
+
+export const SnackbarContext = createContext<SnackbarContextType>({ createSnackbar: () => {} });
+
+export const SnackbarConsumer = SnackbarContext.Consumer;

package/src/snackbar/SnackbarProvider.tsx

@@ -0,0 +1,39 @@
+import { useMemo, useState } from 'react';
+
+import SnackbarPortal, { SnackbarProps } from './Snackbar';
+import { SnackbarContext } from './SnackbarContext';
+
+export interface SnackbarProviderProps {
+  timeout?: number;
+  children?: React.ReactNode;
+}
+
+export default function SnackbarProvider({ timeout = 4500, children }: SnackbarProviderProps) {
+  const [state, setState] = useState<Omit<SnackbarProps, 'timeout'>>({
+    text: '',
+    timestamp: 0,
+  });
+  const { action, text, theme, timestamp } = state;
+
+  return (
+    <SnackbarContext.Provider
+      value={useMemo(
+        () => ({
+          createSnackbar: ({ action, text, theme }) => {
+            setState({ action, text, theme, timestamp: Date.now() });
+          },
+        }),
+        [],
+      )}
+    >
+      <SnackbarPortal
+        action={action}
+        text={text}
+        timestamp={timestamp}
+        timeout={timeout}
+        theme={theme}
+      />
+      {children}
+    </SnackbarContext.Provider>
+  );
+}

package/src/ssr.spec.js

@@ -154,6 +154,23 @@ describe('Server side rendering', () => {
           label: 'Two',
         },
       ],
+      segments: [
+        {
+          id: '1',
+          value: 'accounting',
+          label: 'Accounting',
+        },
+        {
+          id: '2',
+          value: 'payroll',
+          label: 'Payroll',
+        },
+        {
+          id: '3',
+          value: 'reporting',
+          label: 'Reporting',
+        },
+      ],
     };
 
     // Override props in case of name collision.

package/src/withDisplayFormat/WithDisplayFormat.spec.js

@@ -145,7 +145,7 @@ describe('InputWithTextFormat', () => {
   });
 
   describe('set cursor position', () => {
-    const triggerEventA = { ...triggerEvent, currentTarget: { setSelectionRange: () => {} } };
+    const triggerEventA = { ...triggerEvent, target: { setSelectionRange: () => {} } };
     beforeEach(() => {
       component.setState({
         triggerEvent: triggerEventA,

package/src/withDisplayFormat/WithDisplayFormat.tsx

@@ -284,7 +284,7 @@ class WithDisplayFormat<T extends TextElementProps> extends Component<
 
     setTimeout(() => {
       if (triggerEvent) {
-        triggerEvent.currentTarget.setSelectionRange(cursorPosition, cursorPosition);
+        (triggerEvent.target as HTMLTextElement).setSelectionRange(cursorPosition, cursorPosition);
       }
       this.setState({ selectionStart: cursorPosition, selectionEnd: cursorPosition });
     }, 0);

package/src/withNextPortal/withNextPortal.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 
 export default function withNextPortalWrapper<T extends Record<string, any>>(
-  Component: React.FunctionComponent<T>,
+  Component: React.ComponentType<T>,
 ) {
   return function (props: T) {
     const [mounted, setMounted] = useState(false);

package/src/snackbar/SnackbarContext.js

@@ -1,4 +0,0 @@
-import { createContext } from 'react';
-
-export const SnackbarContext = createContext();
-export const SnackbarConsumer = SnackbarContext.Consumer;

package/src/snackbar/SnackbarProvider.js

@@ -1,51 +0,0 @@
-import PropTypes from 'prop-types';
-import { Component } from 'react';
-
-import SnackbarPortal from './Snackbar';
-import { SnackbarContext } from './SnackbarContext';
-
-class SnackbarProvider extends Component {
-  constructor() {
-    super();
-    this.state = {
-      text: '',
-      timestamp: 0,
-    };
-  }
-
-  create = ({ action, text, theme }) => {
-    this.setState({ action, text, theme, timestamp: Date.now() });
-  };
-
-  render() {
-    const { action, text, theme, timestamp } = this.state;
-
-    return (
-      <SnackbarContext.Provider
-        value={{
-          createSnackbar: this.create,
-        }}
-      >
-        <SnackbarPortal
-          action={action}
-          text={text}
-          timestamp={timestamp}
-          timeout={this.props.timeout}
-          theme={theme}
-        />
-        {this.props.children}
-      </SnackbarContext.Provider>
-    );
-  }
-}
-
-SnackbarProvider.propTypes = {
-  children: PropTypes.node.isRequired,
-  timeout: PropTypes.number,
-};
-
-SnackbarProvider.defaultProps = {
-  timeout: 4500,
-};
-
-export default SnackbarProvider;