@transferwise/components 46.29.0 → 46.29.2

package/src/flowNavigation/FlowNavigation.tsx

@@ -1,15 +1,13 @@
 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 { useScreenSize } from '../common/hooks/useScreenSize';
 import messages from './FlowNavigation.messages';
 import AnimatedLabel from './animatedLabel';
 import BackButton from './backButton';
@@ -36,13 +34,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 +47,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 +81,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 +96,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

@@ -1,23 +1,30 @@
 /**
  * Types
  */
-export type { AccordionProps, AccordionItem } from './accordion';
-export type { AvatarProps } from './avatar';
+export type { AccordionItem, AccordionProps } from './accordion';
 export type { ActionOptionProps } from './actionOption';
-export type { AlertProps, AlertAction, AlertArrowPosition, AlertType } from './alert';
+export type { AlertAction, AlertProps, AlertType } from './alert';
+export type { AvatarProps } from './avatar';
 export type { BadgeProps } from './badge';
 export type { CircularButtonProps } from './circularButton';
+export type {
+  BodyTypes,
+  DisplayTypes,
+  LayoutDirection,
+  LinkTypes,
+  TitleTypes,
+  TypographyTypes,
+} from './common';
+export type { BottomSheetProps } from './common/bottomSheet';
+export type { DateInputProps } from './dateInput';
+export type { DateLookupProps } from './dateLookup';
 export type { DecisionProps } from './decision/Decision';
+export type { DimmerProps } from './dimmer';
 export type { EmphasisProps } from './emphasis';
 export type { InfoProps } from './info';
-export type { SummaryProps } from './summary';
-export type { InputProps } from './inputs/Input';
-export type { DateInputProps } from './dateInput';
-export type { DateLookupProps } from './dateLookup';
 export type { InputWithDisplayFormatProps } from './inputWithDisplayFormat';
+export type { InputProps } from './inputs/Input';
 export type { InputGroupProps } from './inputs/InputGroup';
-export type { LoaderProps } from './loader';
-export type { NavigationOptionListProps } from './navigationOptionsList';
 export type { SearchInputProps } from './inputs/SearchInput';
 export type {
   SelectInputGroupItem,
@@ -29,50 +36,43 @@ export type {
   SelectInputTriggerButtonProps,
 } from './inputs/SelectInput';
 export type { TextAreaProps } from './inputs/TextArea';
+export type { InstructionsListProps } from './instructionsList';
+export type { LoaderProps } from './loader';
+export type { MarkdownProps } from './markdown';
+export type { ModalProps } from './modal';
+export type { MoneyProps } from './money';
+export type {
+  CurrencyHeaderItem,
+  CurrencyItem,
+  CurrencyOptionItem,
+  MoneyInputProps,
+} from './moneyInput';
+export type { NavigationOptionListProps } from './navigationOptionsList';
 export type { PhoneNumberInputProps } from './phoneNumberInput/PhoneNumberInput';
 export type { PopoverProps } from './popover';
 export type { ProgressProps } from './progress';
 export type { ProgressBarProps } from './progressBar';
-export type { ProviderProps, DirectionProviderProps, LanguageProviderProps } from './provider';
+export type { DirectionProviderProps, LanguageProviderProps, ProviderProps } from './provider';
 export type { RadioProps } from './radio';
 export type { RadioGroupProps, RadioGroupRadio } from './radioGroup';
 export type { RadioOptionProps } from './radioOption';
+export type { SegmentedControlProps } from './segmentedControl';
+export type { SlidingPanelProps } from './slidingPanel';
 export type { SnackbarProps } from './snackbar/Snackbar';
 export type { SnackbarContextType } from './snackbar/SnackbarContext';
 export type { StatusIconProps } from './statusIcon';
 export type { StickyProps } from './sticky';
+export type { SummaryProps } from './summary';
 export type { SwitchProps } from './switch';
 export type { SwitchOptionProps } from './switchOption';
 export type { TextareaWithDisplayFormatProps } from './textareaWithDisplayFormat';
 export type { TooltipProps } from './tooltip';
-export type { UploadedFile, UploadError, UploadResponse } from './uploadInput/types';
-export type { MarkdownProps } from './markdown';
-export type { ModalProps } from './modal';
-export type { MoneyProps } from './money';
-export type {
-  CurrencyHeaderItem,
-  CurrencyItem,
-  CurrencyOptionItem,
-  MoneyInputProps,
-} from './moneyInput';
-export type { SlidingPanelProps } from './slidingPanel';
-export type {
-  LayoutDirection,
-  TypographyTypes,
-  TitleTypes,
-  BodyTypes,
-  LinkTypes,
-  DisplayTypes,
-} from './common';
-export type { SegmentedControlProps } from './segmentedControl';
-export type { TypeaheadProps, TypeaheadOption } from './typeahead';
-export type { InstructionsListProps } from './instructionsList';
+export type { TypeaheadOption, TypeaheadProps } from './typeahead';
+export type { UploadError, UploadResponse, UploadedFile } from './uploadInput/types';
 
 /**
  * Components
  */
-export { default as Title } from './title';
-export { default as Body } from './body';
 export { default as Accordion } from './accordion';
 export { default as ActionButton } from './actionButton';
 export { default as ActionOption } from './actionOption';
@@ -80,16 +80,19 @@ export { default as Alert } from './alert';
 export { default as Avatar } from './avatar';
 export { default as AvatarWrapper } from './avatarWrapper';
 export { default as Badge } from './badge';
-export { default as BottomSheet } from './common/bottomSheet';
+export { default as Body } from './body';
 export { default as Button } from './button';
 export { default as Card } from './card';
-export { default as BaseCard } from './common/card';
 export { default as Checkbox } from './checkbox';
 export { default as CheckboxButton } from './checkboxButton';
 export { default as CheckboxOption } from './checkboxOption';
 export { default as Chevron } from './chevron';
-export { default as Chips, Chip } from './chips';
+export { Chip, default as Chips } from './chips';
 export { default as CircularButton } from './circularButton';
+export { default as Option } from './common/Option';
+export { default as BottomSheet } from './common/bottomSheet';
+export { default as BaseCard } from './common/card';
+export { default as CriticalCommsBanner } from './criticalBanner';
 export { default as DateInput } from './dateInput';
 export { default as DateLookup } from './dateLookup';
 export { default as Decision } from './decision';
@@ -104,6 +107,7 @@ export { default as Header } from './header';
 export { default as Image } from './image';
 export { default as Info } from './info';
 export { default as InlineAlert } from './inlineAlert';
+export { default as InputWithDisplayFormat } from './inputWithDisplayFormat';
 export { Input } from './inputs/Input';
 export { InputGroup } from './inputs/InputGroup';
 export { SearchInput } from './inputs/SearchInput';
@@ -113,9 +117,9 @@ export {
   SelectInputTriggerButton,
 } from './inputs/SelectInput';
 export { TextArea } from './inputs/TextArea';
-export { default as InputWithDisplayFormat } from './inputWithDisplayFormat';
 export { default as InstructionsList } from './instructionsList';
 export { default as Link } from './link';
+export { default as ListItem } from './listItem';
 export { default as Loader } from './loader';
 export { default as Logo } from './logo';
 export { default as Markdown } from './markdown';
@@ -125,24 +129,23 @@ export { default as MoneyInput } from './moneyInput';
 export { default as NavigationOption } from './navigationOption';
 export { default as NavigationOptionsList } from './navigationOptionsList';
 export { default as Nudge } from './nudge';
-export { default as Option } from './common/Option';
 export { default as OverlayHeader } from './overlayHeader';
 export { default as PhoneNumberInput } from './phoneNumberInput';
 export { default as Popover } from './popover';
 export { default as ProcessIndicator } from './processIndicator';
-export { default as ProgressBar } from './progressBar';
 export { default as Progress } from './progress';
-export { default as PromoCard } from './promoCard';
-export { default as PromoCardGroup } from './promoCard';
-export { default as Provider, DirectionProvider, LanguageProvider } from './provider';
+export { default as ProgressBar } from './progressBar';
+export { PromoCardGroup, default as PromoCard } from './promoCard';
+export { DirectionProvider, LanguageProvider, default as Provider } from './provider';
 export { default as Radio } from './radio';
 export { default as RadioGroup } from './radioGroup';
 export { default as RadioOption } from './radioOption';
 export { default as Section } from './section';
-export { default as Select } from './select';
 export { default as SegmentedControl } from './segmentedControl';
+export { default as Select } from './select';
 export { default as SlidingPanel } from './slidingPanel';
 export { default as SnackbarPortal } from './snackbar/Snackbar';
+export { SnackbarConsumer, SnackbarContext } from './snackbar/SnackbarContext';
 export { default as SnackbarProvider } from './snackbar/SnackbarProvider';
 export { default as StatusIcon } from './statusIcon/StatusIcon';
 export { default as Stepper } from './stepper/Stepper';
@@ -152,66 +155,65 @@ export { default as Switch } from './switch';
 export { default as SwitchOption } from './switchOption';
 export { default as Tabs } from './tabs';
 export { default as TextareaWithDisplayFormat } from './textareaWithDisplayFormat';
+export { default as Title } from './title';
 export { default as Tooltip } from './tooltip';
 export { default as Typeahead } from './typeahead';
 export { default as Upload } from './upload';
 export { default as UploadInput } from './uploadInput';
-export { SnackbarConsumer, SnackbarContext } from './snackbar/SnackbarContext';
-export { default as CriticalCommsBanner } from './criticalBanner';
-export { default as ListItem } from './listItem';
 
 /**
  * Hooks
  */
-export { default as useSnackbar } from './snackbar/useSnackbar';
 export { useDirection, useLayout } from './common/hooks';
 export { useScreenSize } from './common/hooks/useScreenSize';
+export { default as useSnackbar } from './snackbar/useSnackbar';
 
 /**
  * Enums
  */
+export { AlertArrowPosition } from './alert/Alert';
+export { AvatarType } from './avatar';
 export {
-  Direction,
-  Size,
-  Width,
-  Sentiment,
-  Priority,
+  Breakpoint,
   ControlType,
-  Type,
-  Theme,
   DateMode,
+  Direction,
+  FileType,
+  Layout,
+  MarkdownNodeType,
   MonthFormat,
   Position,
-  Scroll,
+  Priority,
   ProfileType,
-  Breakpoint,
-  Layout,
+  Scroll,
+  Sentiment,
+  Size,
   Status,
-  MarkdownNodeType,
+  Theme,
+  Type,
   Typography,
   Variant,
+  Width,
 } from './common';
-export { AvatarType } from './avatar';
-export { InfoPresentation } from './info';
-export { UploadStep } from './upload';
 export { DecisionPresentation, DecisionType } from './decision';
+export { InfoPresentation } from './info';
 export { LogoType } from './logo';
-export { FileType } from './common';
+export { UploadStep } from './upload';
 
 /**
  * Utils
  */
 export {
-  adjustLocale,
   DEFAULT_LANG,
   DEFAULT_LOCALE,
+  RTL_LANGUAGES,
+  SUPPORTED_LANGUAGES,
+  adjustLocale,
   getCountryFromLocale,
   getDirectionFromLocale,
   getLangFromLocale,
   isBrowser,
   isServerSide,
-  RTL_LANGUAGES,
-  SUPPORTED_LANGUAGES,
 } from './common';
 
 /**

package/src/overlayHeader/OverlayHeader.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import { Size } from '../common';
 import { CloseButton } from '../common/closeButton';
-import FlowHeader from '../common/flowHeader/FlowHeader';
+import FlowHeader from '../common/flowHeader';
 import Logo from '../logo';
 
 const OverlayHeader = ({ avatar, onClose, logo }) => {

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/src/withDisplayFormat/WithDisplayFormat.tsx

@@ -169,10 +169,10 @@ class WithDisplayFormat<T extends TextElementProps> extends Component<
     let newFormattedValue = '';
 
     if (this.detectUndoRedo(event) === 'Undo') {
-      newFormattedValue = formatWithPattern(historyNavigator.undo(), displayPattern);
+      newFormattedValue = formatWithPattern(historyNavigator.undo().toString(), displayPattern);
       this.setState({ value: newFormattedValue, triggerType: 'Undo' });
     } else if (this.detectUndoRedo(event) === 'Redo') {
-      newFormattedValue = formatWithPattern(historyNavigator.redo(), displayPattern);
+      newFormattedValue = formatWithPattern(historyNavigator.redo().toString(), displayPattern);
       this.setState({ value: newFormattedValue, triggerType: 'Redo' });
     } else {
       this.setState({

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

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

package/src/common/bottomSheet/index.js

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

package/src/common/deviceDetection/deviceDetection.js

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

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;

package/src/dimmer/index.js

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