@transferwise/components 46.29.0 → 46.29.1

package/build/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/build/index.js

@@ -20,7 +20,6 @@ var reactTransitionGroup = require('react-transition-group');
 var neptuneValidation = require('@transferwise/neptune-validation');
 var reactDom = require('react-dom');
 var reactPopper = require('react-popper');
-var throttle = require('lodash.throttle');
 var art = require('@wise/art');
 var clamp$2 = require('lodash.clamp');
 var debounce = require('lodash.debounce');
@@ -52,7 +51,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var commonmark__default = /*#__PURE__*/_interopDefault(commonmark);
 var mergeProps__default = /*#__PURE__*/_interopDefault(mergeProps);
-var throttle__default = /*#__PURE__*/_interopDefault(throttle);
 var clamp__default = /*#__PURE__*/_interopDefault(clamp$2);
 var debounce__default = /*#__PURE__*/_interopDefault(debounce);
 var requiredIf__default = /*#__PURE__*/_interopDefault(requiredIf);
@@ -1490,41 +1488,6 @@ const DimmerContentWrapper = ({
 };
 var Dimmer$1 = withNextPortalWrapper(Dimmer);
 
-const THROTTLE_MS = 100;
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
-const useClientWidth = ({
-  ref,
-  throttleMs = THROTTLE_MS
-}) => {
-  const [clientWidth, setClientWidth] = React.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__default.default(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,
@@ -4845,49 +4808,41 @@ const FlowNavigation = ({
   onGoBack,
   steps
 }) => {
-  const reference = React.useRef(null);
   const intl = reactIntl.useIntl();
-  const [clientWidth] = useClientWidth({
-    ref: reference
-  });
   const closeButton = onClose != null && /*#__PURE__*/jsxRuntime.jsx(CloseButton, {
     size: "lg",
     onClick: onClose
   });
-  const isSmall = clientWidth != null && clientWidth < exports.Breakpoint.SMALL;
-  const isLarge = clientWidth != null && clientWidth >= exports.Breakpoint.LARGE;
+  const screenSm = useScreenSize(exports.Breakpoint.SMALL);
+  const screenLg = useScreenSize(exports.Breakpoint.LARGE);
   const newAvatar = done ? null : avatar;
   const displayGoBack = onGoBack != null && activeStep > 0;
   return /*#__PURE__*/jsxRuntime.jsx("div", {
-    ref: reference,
     className: classNames__default.default('np-flow-navigation d-flex align-items-center justify-content-center p-y-3', {
       'np-flow-navigation--border-bottom': !done
     }),
     children: /*#__PURE__*/jsxRuntime.jsx(FlowHeader, {
-      className: classNames__default.default('np-flow-navigation__content p-x-3', {
-        'np-flow-navigation--hidden': !clientWidth,
-        'np-flow-navigation--xs-max': isSmall,
+      className: classNames__default.default('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 >= exports.Breakpoint.SMALL,
-        'np-flow-navigation--lg': isLarge
+        'np-flow-navigation--sm': screenSm,
+        'np-flow-navigation--lg': screenLg
       }),
       leftContent: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [isSmall && displayGoBack ? /*#__PURE__*/jsxRuntime.jsx(BackButton$1, {
+        children: [!screenSm && displayGoBack ? /*#__PURE__*/jsxRuntime.jsx(BackButton$1, {
           "aria-label": intl.formatMessage(messages$7.back),
           onClick: onGoBack
         }) : /*#__PURE__*/jsxRuntime.jsx("div", {
           className: "np-flow-header__left",
           children: logo
-        }), isSmall && /*#__PURE__*/jsxRuntime.jsx(AnimatedLabel, {
+        }), !screenSm && /*#__PURE__*/jsxRuntime.jsx(AnimatedLabel, {
           className: "m-x-1",
           labels: steps.map(step => step.label),
           activeLabel: activeStep
         })]
       }),
       rightContent: /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: classNames__default.default('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__*/jsxRuntime.jsx("span", {
           className: "m-x-1"
         }), closeButton]
@@ -4897,7 +4852,7 @@ const FlowNavigation = ({
         steps: steps,
         className: classNames__default.default('np-flow-navigation__stepper')
       }),
-      layout: clientWidth != null && clientWidth < exports.Breakpoint.LARGE ? exports.Layout.VERTICAL : exports.Layout.HORIZONTAL
+      layout: !screenLg ? exports.Layout.VERTICAL : exports.Layout.HORIZONTAL
     })
   });
 };
@@ -13631,7 +13586,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",