@transferwise/components 46.29.0 → 46.29.1

package/build/index.mjs

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { forwardRef, cloneElement, useState, useEffect, useRef, useMemo, useCallback, useLayoutEffect, createContext, useContext, useImperativeHandle, createElement, Component, PureComponent, createRef, isValidElement, Children, Fragment as Fragment$1 } from 'react';
+import React__default, { forwardRef, cloneElement, useState, useEffect, useRef, useMemo, useCallback, createContext, useContext, useImperativeHandle, createElement, Component, PureComponent, createRef, isValidElement, Children, Fragment as Fragment$1 } from 'react';
 import { useId } from '@radix-ui/react-id';
 import { ChevronUp, CrossCircleFill, Cross, NavigateAway, Check, Info as Info$1, Alert as Alert$1, ClockBorderless, Briefcase, Person, ArrowLeft, QuestionMarkCircle, AlertCircle, Search, CrossCircle, ChevronDown, CheckCircleFill, ArrowRight, Download, ClockFill, Upload as Upload$2, Document, Plus, PlusCircle, AlertCircleFill } from '@transferwise/icons';
 import { defineMessages, useIntl, injectIntl, IntlProvider } from 'react-intl';
@@ -19,7 +19,6 @@ import { CSSTransition } from 'react-transition-group';
 import { isUndefined, isNumber, isEmpty, isNull } from '@transferwise/neptune-validation';
 import { createPortal } from 'react-dom';
 import { usePopper } from 'react-popper';
-import throttle from 'lodash.throttle';
 import { Flag, Illustration } from '@wise/art';
 import clamp$2 from 'lodash.clamp';
 import debounce from 'lodash.debounce';
@@ -1459,41 +1458,6 @@ const DimmerContentWrapper = ({
 };
 var Dimmer$1 = withNextPortalWrapper(Dimmer);
 
-const THROTTLE_MS = 100;
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
-const useClientWidth = ({
-  ref,
-  throttleMs = THROTTLE_MS
-}) => {
-  const [clientWidth, setClientWidth] = useState(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;
-
 const useConditionalListener = ({
   attachListener,
   callback,
@@ -4814,49 +4778,41 @@ const FlowNavigation = ({
   onGoBack,
   steps
 }) => {
-  const reference = useRef(null);
   const intl = useIntl();
-  const [clientWidth] = useClientWidth({
-    ref: reference
-  });
   const closeButton = onClose != null && /*#__PURE__*/jsx(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;
   const displayGoBack = onGoBack != null && activeStep > 0;
   return /*#__PURE__*/jsx("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
     }),
     children: /*#__PURE__*/jsx(FlowHeader, {
-      className: classNames('np-flow-navigation__content p-x-3', {
-        'np-flow-navigation--hidden': !clientWidth,
-        'np-flow-navigation--xs-max': isSmall,
+      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': clientWidth != null && clientWidth >= Breakpoint.SMALL,
-        'np-flow-navigation--lg': isLarge
+        'np-flow-navigation--sm': screenSm,
+        'np-flow-navigation--lg': screenLg
       }),
       leftContent: /*#__PURE__*/jsxs(Fragment, {
-        children: [isSmall && displayGoBack ? /*#__PURE__*/jsx(BackButton$1, {
+        children: [!screenSm && displayGoBack ? /*#__PURE__*/jsx(BackButton$1, {
           "aria-label": intl.formatMessage(messages$7.back),
           onClick: onGoBack
         }) : /*#__PURE__*/jsx("div", {
           className: "np-flow-header__left",
           children: logo
-        }), isSmall && /*#__PURE__*/jsx(AnimatedLabel, {
+        }), !screenSm && /*#__PURE__*/jsx(AnimatedLabel, {
           className: "m-x-1",
           labels: steps.map(step => step.label),
           activeLabel: activeStep
         })]
       }),
       rightContent: /*#__PURE__*/jsxs("div", {
-        className: classNames('np-flow-header__right', 'd-flex', 'align-items-center', 'justify-content-end', {
-          'order-2': isLarge
-        }),
+        className: "np-flow-header__right d-flex align-items-center justify-content-end order-2--lg",
         children: [newAvatar, newAvatar && closeButton && /*#__PURE__*/jsx("span", {
           className: "m-x-1"
         }), closeButton]
@@ -4866,7 +4822,7 @@ const FlowNavigation = ({
         steps: steps,
         className: classNames('np-flow-navigation__stepper')
       }),
-      layout: clientWidth != null && clientWidth < Breakpoint.LARGE ? Layout.VERTICAL : Layout.HORIZONTAL
+      layout: !screenLg ? Layout.VERTICAL : Layout.HORIZONTAL
     })
   });
 };
@@ -13600,7 +13556,7 @@ var hu = {
 	"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",