@transferwise/components 46.28.0 → 46.29.1

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/index.ts

@@ -98,7 +98,6 @@ export { default as Dimmer } from './dimmer';
 export { default as Display } from './display';
 export { default as Drawer } from './drawer';
 export { default as DropFade } from './dropFade';
-export { default as DynamicFieldDefinitionList } from './dynamicFieldDefinitionList';
 export { default as Emphasis } from './emphasis';
 export { default as FlowNavigation } from './flowNavigation/FlowNavigation';
 export { default as Header } from './header';

package/src/inlineAlert/InlineAlert.story.tsx

@@ -31,21 +31,22 @@ export const Basic = () => {
 
   let typeClass = '';
   switch (type) {
-    case 'error':
-    case 'negative':
+    case Sentiment.ERROR:
+    case Sentiment.NEGATIVE:
       typeClass = 'has-error';
       break;
-    case 'success':
-    case 'positive':
+    case Sentiment.SUCCESS:
+    case Sentiment.POSITIVE:
       typeClass = 'has-success';
       break;
-    case 'info':
-    case 'neutral':
+    case Sentiment.INFO:
+    case Sentiment.NEUTRAL:
       typeClass = 'has-info';
       break;
-    case 'warning':
+    case Sentiment.WARNING:
       typeClass = 'has-warning';
       break;
+    case Sentiment.PENDING:
   }
 
   return (

package/src/inputs/SelectInput.tsx

@@ -180,6 +180,7 @@ const defaultRenderTrigger = (({ content, placeholderShown, clear, disabled, siz
           </span>
         </span>
       ),
+      initialContentWidth: 24 + 4,
       padding: 'sm',
     }}
     disabled={disabled}

package/src/inputs/_BottomSheet.tsx

@@ -7,6 +7,7 @@ import {
   useRole,
 } from '@floating-ui/react';
 import { Transition } from '@headlessui/react';
+import { FocusScope } from '@react-aria/focus';
 import { ThemeProvider, useTheme } from '@wise/components-theming';
 import classNames from 'classnames';
 import { useState } from 'react';
@@ -97,37 +98,41 @@ export function BottomSheet({
                 leave="np-bottom-sheet-v2-content--leave"
                 leaveTo="np-bottom-sheet-v2-content--leave-to"
               >
-                <FloatingFocusManager context={context} initialFocus={initialFocusRef}>
-                  <div
-                    key={floatingKey} // Force inner state invalidation on open
-                    ref={refs.setFloating}
-                    className="np-bottom-sheet-v2-content-inner-container"
-                    {...getFloatingProps()}
-                  >
-                    <div className="np-bottom-sheet-v2-header">
-                      <CloseButton
-                        size={Size.SMALL}
-                        onClick={() => {
-                          onClose?.();
-                        }}
-                      />
-                    </div>
+                <FocusScope>
+                  <FloatingFocusManager context={context} initialFocus={initialFocusRef}>
                     <div
-                      className={classNames(
-                        'np-bottom-sheet-v2-content-inner',
-                        title && 'np-bottom-sheet-v2-content-inner--has-title',
-                        {
-                          'np-bottom-sheet-v2-content-inner--padding-md': padding === 'md',
-                        },
-                      )}
+                      key={floatingKey} // Force inner state invalidation on open
+                      ref={refs.setFloating}
+                      className="np-bottom-sheet-v2-content-inner-container"
+                      {...getFloatingProps()}
                     >
-                      {title ? (
-                        <h2 className="np-bottom-sheet-v2-title np-text-title-body">{title}</h2>
-                      ) : null}
-                      <div className="np-bottom-sheet-v2-body np-text-body-default">{children}</div>
+                      <div className="np-bottom-sheet-v2-header">
+                        <CloseButton
+                          size={Size.SMALL}
+                          onClick={() => {
+                            onClose?.();
+                          }}
+                        />
+                      </div>
+                      <div
+                        className={classNames(
+                          'np-bottom-sheet-v2-content-inner',
+                          title && 'np-bottom-sheet-v2-content-inner--has-title',
+                          {
+                            'np-bottom-sheet-v2-content-inner--padding-md': padding === 'md',
+                          },
+                        )}
+                      >
+                        {title ? (
+                          <h2 className="np-bottom-sheet-v2-title np-text-title-body">{title}</h2>
+                        ) : null}
+                        <div className="np-bottom-sheet-v2-body np-text-body-default">
+                          {children}
+                        </div>
+                      </div>
                     </div>
-                  </div>
-                </FloatingFocusManager>
+                  </FloatingFocusManager>
+                </FocusScope>
               </Transition.Child>
             </div>
           </Transition>

package/src/inputs/_Popover.tsx

@@ -13,6 +13,7 @@ import {
   useRole,
 } from '@floating-ui/react';
 import { Transition } from '@headlessui/react';
+import { FocusScope } from '@react-aria/focus';
 import { ThemeProvider, useTheme } from '@wise/components-theming';
 import classNames from 'classnames';
 import { useState } from 'react';
@@ -103,30 +104,32 @@ export function Popover({
             }}
             afterLeave={onCloseEnd}
           >
-            <FloatingFocusManager context={context}>
-              <div
-                key={floatingKey} // Force inner state invalidation on open
-                ref={refs.setFloating}
-                className={classNames('np-popover-v2-container', {
-                  'np-popover-v2-container--size-md': size === 'md',
-                  'np-popover-v2-container--size-lg': size === 'lg',
-                })}
-                // eslint-disable-next-line react/forbid-dom-props
-                style={floatingStyles}
-                {...getFloatingProps()}
-              >
+            <FocusScope>
+              <FloatingFocusManager context={context}>
                 <div
-                  className={classNames('np-popover-v2', title && 'np-popover-v2--has-title', {
-                    'np-popover-v2--padding-md': padding === 'md',
+                  key={floatingKey} // Force inner state invalidation on open
+                  ref={refs.setFloating}
+                  className={classNames('np-popover-v2-container', {
+                    'np-popover-v2-container--size-md': size === 'md',
+                    'np-popover-v2-container--size-lg': size === 'lg',
                   })}
+                  // eslint-disable-next-line react/forbid-dom-props
+                  style={floatingStyles}
+                  {...getFloatingProps()}
                 >
-                  {title ? (
-                    <h2 className="np-popover-v2-title np-text-title-body">{title}</h2>
-                  ) : null}
-                  <div className="np-popover-v2-content np-text-body-default">{children}</div>
+                  <div
+                    className={classNames('np-popover-v2', title && 'np-popover-v2--has-title', {
+                      'np-popover-v2--padding-md': padding === 'md',
+                    })}
+                  >
+                    {title ? (
+                      <h2 className="np-popover-v2-title np-text-title-body">{title}</h2>
+                    ) : null}
+                    <div className="np-popover-v2-content np-text-body-default">{children}</div>
+                  </div>
                 </div>
-              </div>
-            </FloatingFocusManager>
+              </FloatingFocusManager>
+            </FocusScope>
           </Transition>
         </ThemeProvider>
       </FloatingPortal>

package/src/link/Link.story.tsx

@@ -29,64 +29,64 @@ export const Basic = () => {
         Links via <code>{'<Link />'}</code> component in all types of body copy
       </Title>
       <Body type={Typography.BODY_LARGE_BOLD} className="m-t-3">
-        We’re building the world's{' '}
+        We’re building the world’s{' '}
         <Link href="#" target="_blank">
           most international account
         </Link>
-        . We’re building the world's most international account
+        . We’re building the world’s most international account
       </Body>
       <Body type={Typography.BODY_LARGE} className="m-t-3">
-        We’re building the world's{' '}
+        We’re building the world’s{' '}
         <Link href="#" target="_blank">
           most international account
         </Link>
-        . We’re building the world's most international account
+        . We’re building the world’s most international account
       </Body>
       <Body type={Typography.BODY_DEFAULT_BOLD} className="m-t-3">
-        We’re building the world's{' '}
+        We’re building the world’s{' '}
         <Link href="#" target="_blank">
           most international account
         </Link>
-        . We’re building the world's most international account
+        . We’re building the world’s most international account
       </Body>
       <Body type={Typography.BODY_DEFAULT} className="m-t-3">
-        We’re building the world's{' '}
+        We’re building the world’s{' '}
         <Link href="#" target="_blank">
           most international account
         </Link>
-        . We’re building the world's most international account
+        . We’re building the world’s most international account
       </Body>
 
       <Title type={Typography.TITLE_SCREEN} className="m-t-3">
         Links via <code>{'<a>'}</code> tag in all types of body copy
       </Title>
       <Body type={Typography.BODY_LARGE_BOLD} className="m-t-3">
-        We’re building the world's{' '}
+        We’re building the world’s{' '}
         <a href="#" target="_blank">
           most international account
         </a>
-        . We’re building the world's most international account
+        . We’re building the world’s most international account
       </Body>
       <Body type={Typography.BODY_LARGE} className="m-t-3">
-        We’re building the world's{' '}
+        We’re building the world’s{' '}
         <a href="#" target="_blank">
           most international account
         </a>
-        . We’re building the world's most international account
+        . We’re building the world’s most international account
       </Body>
       <Body type={Typography.BODY_DEFAULT_BOLD} className="m-t-3">
-        We’re building the world's{' '}
+        We’re building the world’s{' '}
         <a href="#" target="_blank">
           most international account
         </a>
-        . We’re building the world's most international account
+        . We’re building the world’s most international account
       </Body>
       <Body type={Typography.BODY_DEFAULT} className="m-t-3">
-        We’re building the world's{' '}
+        We’re building the world’s{' '}
         <a href="#" target="_blank">
           most international account
         </a>
-        . We’re building the world's most international account
+        . We’re building the world’s most international account
       </Body>
     </>
   );

package/src/loader/Loader.tsx

@@ -54,7 +54,6 @@ const Loader = ({
     }
 
     return () => {
-      // eslint-disable-next-line fp/no-mutation
       cancelled = true;
 
       clearTimeout(timeout);

package/src/logo/Logo.css

@@ -8,3 +8,19 @@
 .np-theme-personal--dark .np-logo-svg path {
   fill: var(--color-white);
 }
+.np-logo-svg--size-sm {
+  display: block;
+}
+@media (min-width: 576px) {
+  .np-logo-svg--size-sm {
+    display: none;
+  }
+}
+.np-logo-svg--size-md {
+  display: none;
+}
+@media (min-width: 576px) {
+  .np-logo-svg--size-md {
+    display: block;
+  }
+}

package/src/logo/Logo.js

@@ -1,9 +1,6 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
-import { Breakpoint } from '../common';
-import { useScreenSize } from '../common/hooks/useScreenSize';
-
 import { LogoType } from './logoTypes';
 import { ReactComponent as LogoFlagInverse } from './svg/flag-inverse.svg';
 import { ReactComponent as LogoFlagPlatformInverse } from './svg/flag-platform-white.svg';
@@ -34,22 +31,20 @@ const Logo = ({ className, inverse, type }) => {
     ];
   const LogoMd = svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];
 
-  const screenMd = useScreenSize(Breakpoint.MEDIUM);
-
   return (
     <span
       aria-label={
         type === LogoType.WISE
           ? 'Wise'
           : 'Wise Business' | (type === LogoType.WISE_PLATFORM)
-          ? 'Wise Platform'
-          : 'Wise Business'
+            ? 'Wise Platform'
+            : 'Wise Business'
       }
       role="img"
       className={classNames(className, 'np-logo')}
     >
-      {!screenMd && <LogoSm className="np-logo-svg" />}
-      {screenMd && <LogoMd className="np-logo-svg" />}
+      <LogoSm className="np-logo-svg np-logo-svg--size-sm" />
+      <LogoMd className="np-logo-svg np-logo-svg--size-md" />
     </span>
   );
 };

package/src/logo/Logo.less

@@ -13,4 +13,20 @@
       fill: var(--color-white);
     }
   }
+  
+  &--size-sm {
+    display: block;
+  
+    @media (--screen-sm) {
+      display: none;
+    }
+  }
+  
+  &--size-md {
+    display: none;
+  
+    @media (--screen-sm) {
+      display: block;
+    }
+  }
 }