@transferwise/components 46.29.0 → 46.29.1

package/build/types/common/hooks/index.d.ts

@@ -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/build/types/flowNavigation/FlowNavigation.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { Step } from '../stepper/Stepper';
+/// <reference types="react" />
+import { type Step } from '../stepper/Stepper';
 export interface FlowNavigationProps {
     activeStep?: number;
     avatar?: React.ReactNode;
@@ -12,6 +12,6 @@ export interface FlowNavigationProps {
     /** Steps to be displayed in stepper. If you don't need the stepper, please use OverlayHeader instead */
     steps: readonly Step[];
 }
-declare const FlowNavigation: ({ activeStep, avatar, logo, done, onClose, onGoBack, steps, }: FlowNavigationProps) => React.JSX.Element;
+declare const FlowNavigation: ({ activeStep, avatar, logo, done, onClose, onGoBack, steps, }: FlowNavigationProps) => import("react").JSX.Element;
 export default FlowNavigation;
 //# sourceMappingURL=FlowNavigation.d.ts.map

package/build/types/flowNavigation/FlowNavigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FlowNavigation.d.ts","sourceRoot":"","sources":["../../../src/flowNavigation/FlowNavigation.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAgB,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAMnD,MAAM,WAAW,mBAAmB;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,2FAA2F;IAC3F,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,sIAAsI;IACtI,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,wGAAwG;IACxG,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;CACxB;AAED,QAAA,MAAM,cAAc,kEAQjB,mBAAmB,sBA+ErB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"FlowNavigation.d.ts","sourceRoot":"","sources":["../../../src/flowNavigation/FlowNavigation.tsx"],"names":[],"mappings":";AAQA,OAAgB,EAAE,KAAK,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAOxD,MAAM,WAAW,mBAAmB;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,2FAA2F;IAC3F,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,sIAAsI;IACtI,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,wGAAwG;IACxG,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;CACxB;AAED,QAAA,MAAM,cAAc,kEAQjB,mBAAmB,gCAmErB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.29.0",
+  "version": "46.29.1",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -55,6 +55,10 @@
     "@storybook/addon-interactions": "^7.6.17",
     "@storybook/addon-knobs": "^7.0.2",
     "@storybook/addon-viewport": "^7.6.17",
+    "@storybook/addons": "^7.6.17",
+    "@storybook/api": "^7.6.17",
+    "@storybook/components": "^7.6.17",
+    "@storybook/core-events": "^7.6.17",
     "@storybook/manager-api": "^7.6.17",
     "@storybook/react": "^7.6.17",
     "@storybook/react-webpack5": "^7.6.17",
@@ -67,7 +71,7 @@
     "@testing-library/react-hooks": "^8.0.0",
     "@testing-library/user-event": "^13.2.1",
     "@transferwise/icons": "^3.7.0",
-    "@transferwise/neptune-tokens": "^8.8.1",
+    "@transferwise/neptune-tokens": "^8.9.2",
     "@tsconfig/recommended": "^1.0.2",
     "@types/babel__core": "^7.20.1",
     "@types/commonmark": "^0.27.9",
@@ -75,7 +79,6 @@
     "@types/lodash": "4.14.202",
     "@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",
@@ -95,8 +98,8 @@
     "rollup": "^3.28.1",
     "storybook": "^7.6.17",
     "@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",
@@ -124,7 +127,6 @@
     "core-js": "^3.8.0",
     "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",

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/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/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', () => {

package/src/flowNavigation/FlowNavigation.tsx

@@ -1,18 +1,17 @@
 import classNames from 'classnames';
 import { useRef } from 'react';
-import React from 'react';
 import { useIntl } from 'react-intl';
 
 import { Breakpoint, Layout } from '../common';
 import { CloseButton } from '../common/closeButton';
 import FlowHeader from '../common/flowHeader/FlowHeader';
-import { useClientWidth } from '../common/hooks';
 import Logo from '../logo';
-import Stepper, { Step } from '../stepper/Stepper';
+import Stepper, { type Step } from '../stepper/Stepper';
 
 import messages from './FlowNavigation.messages';
 import AnimatedLabel from './animatedLabel';
 import BackButton from './backButton';
+import { useScreenSize } from '../common/hooks/useScreenSize';
 
 export interface FlowNavigationProps {
   activeStep?: number;
@@ -36,13 +35,12 @@ const FlowNavigation = ({
   onGoBack,
   steps,
 }: FlowNavigationProps) => {
-  const reference = useRef<HTMLDivElement>(null);
   const intl = useIntl();
 
-  const [clientWidth] = useClientWidth({ ref: reference });
   const closeButton = onClose != null && <CloseButton size="lg" onClick={onClose} />;
-  const isSmall = clientWidth != null && clientWidth < Breakpoint.SMALL;
-  const isLarge = clientWidth != null && clientWidth >= Breakpoint.LARGE;
+
+  const screenSm = useScreenSize(Breakpoint.SMALL);
+  const screenLg = useScreenSize(Breakpoint.LARGE);
 
   const newAvatar = done ? null : avatar;
 
@@ -50,28 +48,31 @@ const FlowNavigation = ({
 
   return (
     <div
-      ref={reference}
       className={classNames(
         'np-flow-navigation d-flex align-items-center justify-content-center p-y-3',
         { 'np-flow-navigation--border-bottom': !done },
       )}
     >
       <FlowHeader
-        className={classNames('np-flow-navigation__content p-x-3', {
-          'np-flow-navigation--hidden': !clientWidth,
-          'np-flow-navigation--xs-max': isSmall,
-          // Size switches on parent container which may or may not have the same size as the window.
-          'np-flow-navigation--sm': clientWidth != null && clientWidth >= Breakpoint.SMALL,
-          'np-flow-navigation--lg': isLarge,
-        })}
+        className={classNames(
+          'np-flow-navigation__content p-x-3',
+          screenSm == null
+            ? 'np-flow-navigation--hidden'
+            : {
+                'np-flow-navigation--xs-max': !screenSm,
+                // Size switches on parent container which may or may not have the same size as the window.
+                'np-flow-navigation--sm': screenSm,
+                'np-flow-navigation--lg': screenLg,
+              },
+        )}
         leftContent={
           <>
-            {isSmall && displayGoBack ? (
+            {!screenSm && displayGoBack ? (
               <BackButton aria-label={intl.formatMessage(messages.back)} onClick={onGoBack} />
             ) : (
               <div className="np-flow-header__left">{logo}</div>
             )}
-            {isSmall && (
+            {!screenSm && (
               <AnimatedLabel
                 className="m-x-1"
                 labels={steps.map((step) => step.label)}
@@ -81,17 +82,7 @@ const FlowNavigation = ({
           </>
         }
         rightContent={
-          <div
-            className={classNames(
-              'np-flow-header__right',
-              'd-flex',
-              'align-items-center',
-              'justify-content-end',
-              {
-                'order-2': isLarge,
-              },
-            )}
-          >
+          <div className="np-flow-header__right d-flex align-items-center justify-content-end order-2--lg">
             {newAvatar}
             {newAvatar && closeButton && <span className="m-x-1" />}
             {closeButton}
@@ -106,11 +97,7 @@ const FlowNavigation = ({
             />
           )
         }
-        layout={
-          clientWidth != null && clientWidth < Breakpoint.LARGE
-            ? Layout.VERTICAL
-            : Layout.HORIZONTAL
-        }
+        layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}
       />
     </div>
   );

package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap

@@ -18,7 +18,7 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
         AnimatedLabel
       </div>
       <div
-        class="np-flow-header__right d-flex align-items-center justify-content-end"
+        class="np-flow-header__right d-flex align-items-center justify-content-end order-2--lg"
       >
         <div
           class="tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
@@ -134,7 +134,7 @@ exports[`FlowNavigation renders as expected 1`] = `
         />
       </div>
       <div
-        class="np-flow-header__right d-flex align-items-center justify-content-end order-2"
+        class="np-flow-header__right d-flex align-items-center justify-content-end order-2--lg"
       >
         <div
           class="tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"

package/src/i18n/hu.json

@@ -35,7 +35,7 @@
   "neptune.Upload.psProcessingText": "Feltöltés...",
   "neptune.Upload.usButtonText": "Vagy válaszd ki a fájlt",
   "neptune.Upload.usDropMessage": "Húzd ide a fájlokat a feltöltéshez",
-  "neptune.Upload.usPlaceholder": "Húzz ide egy legfeljebb {maxSize} MB méretű fájlt",
+  "neptune.Upload.usPlaceholder": "Húzz ide egy legfeljebb {maxSize}MB méretű fájlt",
   "neptune.UploadButton.allFileTypes": "Összes fájltípus",
   "neptune.UploadButton.dropFiles": "Húzd a fájlokat ide a feltöltéshez",
   "neptune.UploadButton.instructions": "{fileTypes}, legfeljebb {size}MB",

package/src/provider/theme/ThemeProvider.story.tsx

@@ -0,0 +1,21 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '@wise/components-theming';
+
+import Button from '../../button';
+
+export default {
+  component: ThemeProvider,
+  title: 'Other/ThemeProvider',
+} satisfies Meta<typeof ThemeProvider>;
+
+type Story = StoryObj<typeof ThemeProvider>;
+
+export const PlatformTheme: Story = {
+  render: () => (
+    <>
+      <ThemeProvider theme="platform">
+        <Button>Button</Button>
+      </ThemeProvider>
+    </>
+  ),
+};

package/build/types/common/hooks/useClientWidth/useClientWidth.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-type FlowNavigationProps = {
-    ref: React.RefObject<HTMLElement> | Window | undefined;
-    throttleMs?: number;
-};
-export declare const useClientWidth: {
-    ({ ref, throttleMs }: FlowNavigationProps): (number | null)[];
-    THROTTLE_MS: number;
-};
-export {};
-//# sourceMappingURL=useClientWidth.d.ts.map

package/build/types/common/hooks/useClientWidth/useClientWidth.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useClientWidth.d.ts","sourceRoot":"","sources":["../../../../../src/common/hooks/useClientWidth/useClientWidth.tsx"],"names":[],"mappings":";AAOA,KAAK,mBAAmB,GAAG;IACzB,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,MAAM,GAAG,SAAS,CAAC;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,cAAc;0BAAuC,mBAAmB;;CAgCpF,CAAC"}

package/src/common/hooks/useClientWidth/useClientWidth.spec.js

@@ -1,77 +0,0 @@
-import { act, renderHook } from '@testing-library/react-hooks';
-
-import { fireEvent } from '../../../test-utils';
-
-import { useClientWidth } from './useClientWidth';
-
-jest.mock('lodash.throttle', () => jest.fn((fn) => fn));
-
-describe('useClientWidth', () => {
-  describe('when invalid ref is provided', () => {
-    it('returns 0', () => {
-      const reference = { invalid: true };
-      const {
-        result: { current },
-      } = renderHook(() => useClientWidth({ ref: reference }));
-
-      expect(current).toStrictEqual([null]);
-    });
-  });
-
-  describe('when valid ref is provided', () => {
-    it('returns initial ref width', () => {
-      const reference = { current: { clientWidth: 500 } };
-      const {
-        result: { current },
-      } = renderHook(() => useClientWidth({ ref: reference }));
-
-      expect(current).toStrictEqual([500]);
-    });
-
-    it('updates the ref width on window resize', () => {
-      const reference = { current: { clientWidth: 500 } };
-      const { result } = renderHook(() => useClientWidth({ ref: reference }));
-
-      expect(result.current).toStrictEqual([500]);
-
-      act(() => {
-        reference.current.clientWidth = 700;
-        fireEvent(window, new Event('resize'));
-      });
-      expect(result.current).toStrictEqual([700]);
-
-      act(() => {
-        reference.current.clientWidth = 800;
-        fireEvent(window, new Event('resize'));
-      });
-      expect(result.current).toStrictEqual([800]);
-    });
-  });
-
-  describe('when window ref is provided', () => {
-    it('returns window innerWidth', () => {
-      window.innerWidth = 600;
-      const {
-        result: { current },
-      } = renderHook(() => useClientWidth({ ref: window }));
-
-      expect(current).toStrictEqual([600]);
-    });
-  });
-
-  describe('when cleanup runs the event is not longer attached to window', () => {
-    it('returns window innerWidth', () => {
-      const reference = { current: { clientWidth: 500 } };
-      const { result, unmount } = renderHook(() => useClientWidth({ ref: reference }));
-
-      unmount();
-
-      act(() => {
-        reference.current.clientWidth = 700;
-        fireEvent(window, new Event('resize'));
-      });
-
-      expect(result.current).toStrictEqual([500]);
-    });
-  });
-});

package/src/common/hooks/useClientWidth/useClientWidth.tsx

@@ -1,47 +0,0 @@
-import throttle from 'lodash.throttle';
-import { useLayoutEffect, useState, useEffect, RefObject } from 'react';
-
-const THROTTLE_MS = 100;
-
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
-
-type FlowNavigationProps = {
-  ref: React.RefObject<HTMLElement> | Window | undefined;
-  throttleMs?: number;
-};
-
-export const useClientWidth = ({ ref, throttleMs = THROTTLE_MS }: FlowNavigationProps) => {
-  const [clientWidth, setClientWidth] = useState<number | null>(null);
-
-  useIsomorphicLayoutEffect(() => {
-    // eslint-disable-next-line unicorn/consistent-function-scoping
-    const updateClientWidth = () => {
-      if (ref) {
-        // when `ref` is a window
-        if ('innerWidth' in ref) {
-          setClientWidth(ref.innerWidth);
-        }
-        // when `ref` is an element
-        else if (ref.current) {
-          setClientWidth(ref.current.clientWidth);
-        }
-      }
-    };
-    // This assignment saves a reference to the function so it will be the same passed to both addEventListener removeEventListener.
-    // If throttle gets passed directly to both add and removeEventListenet the results will be that the event
-    // won't get removed even if the component is unmounted.
-    const attachedFunction = throttle(updateClientWidth, throttleMs);
-
-    window.addEventListener('resize', attachedFunction, true);
-
-    // using requestAnimationFrame to perform the calculation before the next repaint
-    // getting width earlier causes issues in animations when used with react-transition-group
-    window.requestAnimationFrame(updateClientWidth);
-
-    return () => window.removeEventListener('resize', attachedFunction, true);
-  }, []);
-
-  return [clientWidth];
-};
-
-useClientWidth.THROTTLE_MS = THROTTLE_MS;