@transferwise/components 46.29.0 → 46.29.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.29.0",
+  "version": "46.29.2",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -38,65 +38,67 @@
     "!**/*.tsbuildinfo"
   ],
   "devDependencies": {
-    "@babel/core": "^7.23.9",
-    "@babel/plugin-transform-runtime": "^7.22.15",
-    "@babel/preset-env": "^7.22.15",
-    "@babel/preset-react": "^7.22.15",
-    "@babel/preset-typescript": "^7.22.15",
-    "@formatjs/cli": "^4.8.3",
-    "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-json": "^6.0.0",
-    "@rollup/plugin-node-resolve": "^15.2.1",
-    "@rollup/plugin-typescript": "^11.1.3",
+    "@babel/core": "^7.24.5",
+    "@babel/plugin-transform-runtime": "^7.24.3",
+    "@babel/preset-env": "^7.24.5",
+    "@babel/preset-react": "^7.24.1",
+    "@babel/preset-typescript": "^7.24.1",
+    "@formatjs/cli": "^6.2.10",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^11.1.6",
     "@rollup/plugin-url": "^8.0.2",
-    "@storybook/addon-a11y": "^7.6.17",
-    "@storybook/addon-actions": "^7.6.17",
-    "@storybook/addon-essentials": "^7.6.17",
-    "@storybook/addon-interactions": "^7.6.17",
+    "@storybook/addon-a11y": "^7.6.19",
+    "@storybook/addon-actions": "^7.6.19",
+    "@storybook/addon-essentials": "^7.6.19",
+    "@storybook/addon-interactions": "^7.6.19",
     "@storybook/addon-knobs": "^7.0.2",
-    "@storybook/addon-viewport": "^7.6.17",
-    "@storybook/manager-api": "^7.6.17",
-    "@storybook/react": "^7.6.17",
-    "@storybook/react-webpack5": "^7.6.17",
-    "@storybook/test": "^7.6.17",
-    "@storybook/theming": "^7.6.17",
-    "@storybook/types": "^7.6.17",
-    "@testing-library/dom": "^7.21.4",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.0.0",
-    "@testing-library/react-hooks": "^8.0.0",
-    "@testing-library/user-event": "^13.2.1",
+    "@storybook/addon-viewport": "^7.6.19",
+    "@storybook/addons": "^7.6.17",
+    "@storybook/api": "^7.6.17",
+    "@storybook/components": "^7.6.19",
+    "@storybook/core-events": "^7.6.19",
+    "@storybook/manager-api": "^7.6.19",
+    "@storybook/react": "^7.6.19",
+    "@storybook/react-webpack5": "^7.6.19",
+    "@storybook/test": "^7.6.19",
+    "@storybook/theming": "^7.6.19",
+    "@storybook/types": "^7.6.19",
+    "@testing-library/dom": "^7.31.2",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "^13.5.0",
     "@transferwise/icons": "^3.7.0",
-    "@transferwise/neptune-tokens": "^8.8.1",
-    "@tsconfig/recommended": "^1.0.2",
-    "@types/babel__core": "^7.20.1",
+    "@transferwise/neptune-tokens": "^8.9.2",
+    "@tsconfig/recommended": "^1.0.6",
+    "@types/babel__core": "^7.20.5",
     "@types/commonmark": "^0.27.9",
     "@types/jest": "^29.5.12",
-    "@types/lodash": "4.14.202",
+    "@types/lodash": "4.17.1",
     "@types/lodash.clamp": "^4.0.9",
     "@types/lodash.debounce": "^4.0.9",
-    "@types/lodash.throttle": "^4.1.7",
-    "@types/node": "^14.14.31",
-    "@types/react": "^17.0.65",
-    "@types/react-dom": "^17.0.20",
-    "@types/react-transition-group": "4.4.5",
-    "@types/testing-library__jest-dom": "^5.14.5",
-    "@types/use-sync-external-store": "^0.0.4",
+    "@types/react": "^17.0.80",
+    "@types/react-dom": "^17.0.25",
+    "@types/react-transition-group": "4.4.10",
+    "@types/testing-library__jest-dom": "^5.14.9",
+    "@types/use-sync-external-store": "^0.0.6",
     "@wise/art": "^2.7.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
-    "babel-plugin-formatjs": "^10.5.13",
+    "babel-plugin-formatjs": "^10.5.14",
     "babel-plugin-inline-react-svg": "^2.0.2",
     "enzyme": "^3.11.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-fetch-mock": "^3.0.3",
     "lodash.times": "^4.3.2",
-    "react-intl": "^5.10.0",
-    "rollup": "^3.28.1",
-    "storybook": "^7.6.17",
+    "react-intl": "^6.6.6",
+    "rollup": "^4.17.2",
+    "storybook": "^7.6.19",
     "@transferwise/less-config": "3.1.0",
-    "@transferwise/neptune-css": "14.9.6",
-    "@wise/components-theming": "1.1.0"
+    "@transferwise/neptune-css": "14.10.0",
+    "@wise/components-theming": "1.2.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",
@@ -108,30 +110,29 @@
     "react-intl": "^5.10.0 || ^6"
   },
   "dependencies": {
-    "@babel/runtime": "^7.22.15",
-    "@floating-ui/react": "^0.25.4",
-    "@formatjs/intl-locale": "^2.4.14",
-    "@headlessui/react": "^1.7.17",
-    "@popperjs/core": "^2.6.0",
-    "@radix-ui/react-id": "^1.0.0",
-    "@react-aria/focus": "^3.14.2",
-    "@react-aria/overlays": "^3.17.0",
-    "@react-spring/web": "~9.6.1",
-    "@transferwise/formatting": "^2.1.0",
+    "@babel/runtime": "^7.24.5",
+    "@floating-ui/react": "^0.26.15",
+    "@formatjs/intl-locale": "^3.4.5",
+    "@headlessui/react": "^1.7.19",
+    "@popperjs/core": "^2.11.8",
+    "@radix-ui/react-id": "^1.0.1",
+    "@react-aria/focus": "^3.17.0",
+    "@react-aria/overlays": "^3.22.0",
+    "@react-spring/web": "~9.7.3",
+    "@transferwise/formatting": "^2.13.0",
     "@transferwise/neptune-validation": "^3.3.0",
-    "classnames": "^2.2.6",
+    "classnames": "^2.5.1",
     "commonmark": "0.29.1",
-    "core-js": "^3.8.0",
+    "core-js": "^3.37.1",
     "lodash.clamp": "^4.0.3",
     "lodash.debounce": "^4.0.8",
-    "lodash.throttle": "^4.1.1",
     "lodash.topairs": "^4.3.0",
     "merge-props": "^6.0.0",
-    "prop-types": "^15.7.2",
+    "prop-types": "^15.8.1",
     "react-popper": "^2.3.0",
     "react-required-if": "^1.0.3",
-    "react-transition-group": "^4.4.2",
-    "use-sync-external-store": "^1.2.0"
+    "react-transition-group": "^4.4.5",
+    "use-sync-external-store": "^1.2.2"
   },
   "publishConfig": {
     "access": "public"

package/src/common/DOMOperations/index.ts

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

package/src/common/bottomSheet/BottomSheet.tsx

@@ -25,8 +25,11 @@ const CONTENT_SCROLL_THRESHOLD = 1;
 
 const MOVE_OFFSET_THRESHOLD = 50;
 
-type Props = PropsWithChildren<
-  { onClose?: (event: Event | SyntheticEvent) => void; open: boolean } & CommonProps
+export type BottomSheetProps = PropsWithChildren<
+  {
+    onClose?: (event: Event | SyntheticEvent) => void;
+    open: boolean;
+  } & CommonProps
 >;
 
 /**
@@ -35,7 +38,7 @@ type Props = PropsWithChildren<
  * Neptune Web: https://transferwise.github.io/neptune-web/components/overlays/BottomSheet
  *
  */
-const BottomSheet = (props: Props): ReactElement => {
+const BottomSheet = (props: BottomSheetProps): ReactElement => {
   const bottomSheetReference = useRef<HTMLDivElement>(null);
   const topBarReference = useRef<HTMLDivElement>(null);
   const contentReference = useRef<HTMLDivElement>(null);

package/src/common/bottomSheet/index.ts

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

package/src/common/closeButton/{CloseButton.spec.js → CloseButton.spec.tsx}

@@ -7,6 +7,7 @@ const props = {
   className: 'className',
   onClick: jest.fn(),
 };
+
 describe('CloseButton', () => {
   it(`renders as expected`, () => {
     expect(render(<CloseButton {...props} />).container).toMatchSnapshot();

package/src/common/closeButton/index.ts

@@ -1,2 +1 @@
 export { CloseButton } from './CloseButton';
-export type { CloseButtonProps } from './CloseButton';

package/src/common/deviceDetection/{deviceDetection.spec.js → deviceDetection.spec.ts}

@@ -1,7 +1,7 @@
 import { isIosDevice } from './deviceDetection';
 
 describe('Device detection', () => {
-  function fakeUserAgent(userAgent) {
+  function fakeUserAgent(userAgent: string) {
     Object.defineProperty(navigator, 'userAgent', {
       value: userAgent,
       configurable: true,

package/src/common/deviceDetection/deviceDetection.ts

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

package/src/common/domHelpers/{documentIosClick.spec.js → documentIosClick.spec.ts}

@@ -8,19 +8,13 @@ import {
 jest.mock('../deviceDetection');
 
 describe('Document ios click', () => {
-  let add;
-  let remove;
+  let add: jest.SpyInstance;
+  let remove: jest.SpyInstance;
 
   beforeEach(() => {
-    isIosDevice.mockReturnValue(false);
-    global.document = {
-      documentElement: {
-        classList: {
-          add: jest.fn(),
-          remove: jest.fn(),
-        },
-      },
-    };
+    (isIosDevice as jest.Mock).mockReturnValue(false);
+    global.document.documentElement.classList.add = jest.fn();
+    global.document.documentElement.classList.remove = jest.fn();
 
     add = jest.spyOn(global.document.documentElement.classList, 'add');
     remove = jest.spyOn(global.document.documentElement.classList, 'remove');
@@ -37,13 +31,13 @@ describe('Document ios click', () => {
   });
 
   it('does add ios click to document if it is ios device', () => {
-    isIosDevice.mockReturnValue(true);
+    (isIosDevice as jest.Mock).mockReturnValue(true);
     addClickClassToDocumentOnIos();
     expect(add).toHaveBeenCalledWith('ios-click');
   });
 
   it('does remove ios click from document if it is ios device', () => {
-    isIosDevice.mockReturnValue(true);
+    (isIosDevice as jest.Mock).mockReturnValue(true);
     removeClickClassFromDocumentOnIos();
     expect(remove).toHaveBeenCalledWith('ios-click');
   });

package/src/common/domHelpers/{documentIosClick.js → documentIosClick.ts}

@@ -1,3 +1,5 @@
+import { SyntheticEvent } from 'react';
+
 import { isIosDevice } from '../deviceDetection';
 
 /*
@@ -17,3 +19,24 @@ export function removeClickClassFromDocumentOnIos() {
     document.documentElement.classList.remove('ios-click');
   }
 }
+
+export function isServerSide(): boolean {
+  return typeof window === 'undefined';
+}
+
+export function isBrowser(): boolean {
+  return !isServerSide();
+}
+
+export function stopPropagation(event: SyntheticEvent) {
+  event.stopPropagation();
+  event.preventDefault();
+  if (event.nativeEvent && event.nativeEvent.stopImmediatePropagation) {
+    event.nativeEvent.stopImmediatePropagation();
+  }
+}
+
+export function getSimpleRandomId(prefix: string): string {
+  const random = Math.ceil(Math.random() * 999999);
+  return `${prefix}${random}`;
+}

package/src/common/domHelpers/index.ts

@@ -1,27 +1,8 @@
-import { SyntheticEvent } from 'react';
-
-export function isServerSide(): boolean {
-  return typeof window === 'undefined';
-}
-
-export function isBrowser(): boolean {
-  return !isServerSide();
-}
-
-export function stopPropagation(event: SyntheticEvent) {
-  event.stopPropagation();
-  event.preventDefault();
-  if (event.nativeEvent && event.nativeEvent.stopImmediatePropagation) {
-    event.nativeEvent.stopImmediatePropagation();
-  }
-}
-
-export function getSimpleRandomId(prefix: string): string {
-  const random = Math.ceil(Math.random() * 999999);
-  return `${prefix}${random}`;
-}
-
 export {
   addClickClassToDocumentOnIos,
+  getSimpleRandomId,
+  isBrowser,
+  isServerSide,
   removeClickClassFromDocumentOnIos,
+  stopPropagation,
 } from './documentIosClick';

package/src/common/flowHeader/{FlowHeader.spec.js → FlowHeader.spec.tsx}

@@ -4,6 +4,7 @@ import { render } from '@testing-library/react';
 import { Layout } from '../propsValues/layouts';
 
 import FlowHeader from './FlowHeader';
+import type { FlowHeaderProps } from './FlowHeader';
 
 describe('FlowHeader', () => {
   const props = {
@@ -11,7 +12,7 @@ describe('FlowHeader', () => {
     rightContent: 'rightContent',
     bottomContent: 'bottomContent',
     className: 'className',
-  };
+  } satisfies FlowHeaderProps;
   it('renders as expected', () => {
     expect(render(<FlowHeader {...props} />).container).toMatchSnapshot();
   });

package/src/common/flowHeader/index.ts

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

package/src/common/historyNavigator/{historyNavigator.js → historyNavigator.ts}

@@ -1,17 +1,21 @@
 class HistoryNavigator {
-  constructor(history = [], historyLimit = null) {
+  history: (string | number)[];
+  currIndex: number;
+  historyLimit: number | undefined;
+
+  constructor(history?: (string | number)[], historyLimit?: number) {
     this.history = history && history.length > 0 ? history : [''];
     this.currIndex = this.history.length - 1;
     this.historyLimit = historyLimit;
   }
 
-  reset = (newHistory = [''], historyLimit = 20) => {
-    this.history = newHistory;
-    this.currIndex = newHistory.length - 1 > 0 ? newHistory.length - 1 : 0;
+  reset = (newHistory?: (string | number)[], historyLimit = 20) => {
+    this.history = newHistory && newHistory.length > 0 ? newHistory : [''];
+    this.currIndex = this.history.length - 1;
     this.historyLimit = historyLimit;
   };
 
-  add = (element) => {
+  add = (element: string | number) => {
     if (!this.historyLimit || this.history.length <= this.historyLimit) {
       this.history.push(element);
       // Always keep the current Index to the latest change

package/src/common/hooks/index.js

@@ -1,4 +1,3 @@
-export { useClientWidth } from './useClientWidth/useClientWidth';
 export { default as useConditionalListener } from './useConditionalListener';
 export { default as useDirection } from './useDirection';
 export { default as useHasIntersected } from './useHasIntersected';

package/src/common/panel/{Panel.spec.js → Panel.spec.tsx}

@@ -4,6 +4,11 @@ import { Position } from '..';
 import { render } from '../../test-utils';
 
 import Panel from './Panel';
+import type { PanelProps } from './Panel';
+
+const mockAnchorRef: React.RefObject<HTMLAnchorElement> = {
+  current: document.createElement('a'),
+};
 
 describe('Panel', () => {
   const props = {
@@ -11,9 +16,9 @@ describe('Panel', () => {
     children: <div>children</div>,
     open: true,
     position: Position.TOP,
-    anchorRef: {},
+    anchorRef: mockAnchorRef,
     onClose: jest.fn(),
-  };
+  } satisfies PanelProps;
 
   it('renders', () => {
     const { container } = render(<Panel {...props} />);
@@ -31,7 +36,7 @@ describe('Panel', () => {
     expect(getArrow()).toBeInTheDocument();
   });
 
-  it('opens/closes Panel based on open', async () => {
+  it('opens/closes Panel based on open', () => {
     const { rerender } = render(<Panel {...props} open={false} />);
 
     expect(getPanel()).not.toBeInTheDocument();
@@ -41,9 +46,9 @@ describe('Panel', () => {
     expect(getPanel()).toBeInTheDocument();
   });
 
-  it('does not set width for content as width of an anchor (by default)', async () => {
-    const anchorReference = createRef();
-    const panelReference = createRef();
+  it('does not set width for content as width of an anchor (by default)', () => {
+    const anchorReference = createRef<HTMLDivElement>();
+    const panelReference = createRef<HTMLDivElement>();
 
     render(
       <>
@@ -61,9 +66,9 @@ describe('Panel', () => {
     expect(panelReference.current).toHaveStyle({ width: undefined });
   });
 
-  it('sets same width for content as width of an anchor (anchorWidth={true})', async () => {
-    const anchorReference = createRef();
-    const panelReference = createRef();
+  it('sets same width for content as width of an anchor (anchorWidth={true})', () => {
+    const anchorReference = createRef<HTMLDivElement>();
+    const panelReference = createRef<HTMLDivElement>();
 
     render(
       <>

package/src/common/panel/Panel.tsx

@@ -26,7 +26,7 @@ const fallbackPlacements = {
   [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM],
 };
 
-export type Props = PropsWithChildren<{
+export type PanelProps = PropsWithChildren<{
   arrow?: boolean;
   flip?: boolean;
   altAxis?: boolean;
@@ -38,7 +38,7 @@ export type Props = PropsWithChildren<{
 }> &
   HTMLAttributes<HTMLDivElement>;
 
-const Panel = forwardRef<HTMLDivElement, Props>(
+const Panel = forwardRef<HTMLDivElement, PanelProps>(
   (
     {
       arrow = false,
@@ -51,7 +51,7 @@ const Panel = forwardRef<HTMLDivElement, Props>(
       anchorRef,
       anchorWidth = false,
       ...rest
-    }: Props,
+    }: PanelProps,
     reference,
   ) => {
     const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);

package/src/common/responsivePanel/ResponsivePanel.tsx

@@ -6,7 +6,7 @@ import { Position } from '..';
 import BottomSheet from '../bottomSheet';
 import { useLayout } from '../hooks';
 import Panel from '../panel';
-import { Props as PanelProps } from '../panel/Panel';
+import { PanelProps } from '../panel/Panel';
 
 const ResponsivePanel = forwardRef<HTMLDivElement, PanelProps>(
   (

package/src/decision/Decision.spec.js

@@ -7,7 +7,6 @@ import { render, fireEvent, screen } from '../test-utils';
 
 import Decision, { DecisionPresentation, DecisionType } from '.';
 
-jest.mock('lodash.throttle', () => jest.fn((fn) => fn));
 mockMatchMedia(jest);
 
 describe('Decision', () => {

package/src/dimmer/Dimmer.tsx

@@ -29,7 +29,7 @@ export const EXIT_ANIMATION = 350;
 
 const dimmerManager = new DimmerManager();
 
-type DimmerProps = CommonProps & {
+export type DimmerProps = CommonProps & {
   children?: ReactNode;
   disableClickToClose?: boolean;
   contentPosition?: PositionTop | PositionCenter | PositionBottom;

package/src/dimmer/index.ts

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

package/src/flowNavigation/FlowNavigation.spec.js

@@ -2,11 +2,11 @@ import '@testing-library/jest-dom';
 
 import Avatar, { AvatarType } from '../avatar';
 import { Breakpoint, Size } from '../common';
-import { render, screen } from '../test-utils';
+import { mockMatchMedia, render, screen } from '../test-utils';
 
 import FlowNavigation from './FlowNavigation';
 
-jest.mock('lodash.throttle', () => jest.fn((fn) => fn));
+mockMatchMedia();
 
 jest.mock('./animatedLabel', () => {
   return function ({ className, activeLabel }) {
@@ -24,23 +24,8 @@ jest.mock('./backButton', () => {
 });
 
 describe('FlowNavigation', () => {
-  const resetClientWidth = (width) => {
-    Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
-      configurable: true,
-      value: width,
-    });
-  };
   beforeEach(() => {
-    resetClientWidth(Breakpoint.LARGE + 1);
-  });
-
-  afterAll(() => {
-    const originalClientWidth = Object.getOwnPropertyDescriptor(
-      HTMLElement.prototype,
-      'clientWidth',
-    );
-
-    Object.defineProperty(HTMLElement.prototype, 'clientWidth', originalClientWidth);
+    window.innerWidth = Breakpoint.LARGE + 1;
   });
 
   const props = {
@@ -117,21 +102,21 @@ describe('FlowNavigation', () => {
   });
 
   it(`renders xs-max class`, () => {
-    resetClientWidth(Breakpoint.SMALL - 1);
+    window.innerWidth = Breakpoint.SMALL - 1;
     const { container } = render(<FlowNavigation {...props} onClose={null} />);
 
     expect(container.querySelector('.np-flow-navigation--xs-max')).toBeInTheDocument();
   });
 
   it(`renders sm class`, () => {
-    resetClientWidth(Breakpoint.SMALL);
+    window.innerWidth = Breakpoint.SMALL;
     const { container } = render(<FlowNavigation {...props} onClose={null} />);
 
     expect(container.querySelector('.np-flow-navigation--sm')).toBeInTheDocument();
   });
 
   it(`renders lg class`, () => {
-    resetClientWidth(Breakpoint.LARGE);
+    window.innerWidth = Breakpoint.LARGE;
     const { container } = render(<FlowNavigation {...props} onClose={null} />);
 
     expect(container.querySelector('.np-flow-navigation--lg')).toBeInTheDocument();
@@ -139,7 +124,7 @@ describe('FlowNavigation', () => {
 
   describe('on mobile', () => {
     beforeEach(() => {
-      resetClientWidth(Breakpoint.SMALL - 1);
+      window.innerWidth = Breakpoint.SMALL - 1;
     });
 
     it('renders as expected', () => {