@transferwise/components 46.112.0 → 46.113.0

package/src/expressiveMoneyInput/amountInput/utils.ts

@@ -0,0 +1,116 @@
+import { formatAmount } from '@transferwise/formatting';
+import type { KeyboardEvent } from 'react';
+
+export const getDecimalSeparator = (currency: string, locale: string): string | null => {
+  return formatAmount(1.1, currency, locale).replace(/\p{Number}/gu, '');
+};
+
+export const getGroupSeparator = (currency: string, locale: string): string | null => {
+  return formatAmount(10000000, currency, locale).replace(/\p{Number}/gu, '')[0];
+};
+
+export const getDecimalCount = (currency: string, locale: string): number => {
+  const decimalSeparator = getDecimalSeparator(currency, locale);
+  if (!decimalSeparator) {
+    return 0;
+  }
+  const parts = formatAmount(1.1, currency, locale).split(decimalSeparator);
+  return parts.length === 2 ? parts[1].length : 0;
+};
+
+export const getEnteredDecimalsCount = (value: string, decimalSeparator: string) => {
+  return value.split(decimalSeparator)[1]?.length ?? 0;
+};
+
+export const getUnformattedNumber = ({
+  value: formattedValue,
+  currency,
+  locale,
+}: {
+  value: string;
+  currency: string;
+  locale: string;
+}): number | null => {
+  const groupSeparator = getGroupSeparator(currency, locale);
+  const decimalSeparator = getDecimalSeparator(currency, locale);
+  if (!formattedValue) {
+    return null;
+  }
+
+  // parseFloat can't handle thousands separators
+  const withoutGroupSeparator = groupSeparator
+    ? formattedValue.replace(/ /gu, '').replace(new RegExp(`\\${groupSeparator}`, 'g'), '')
+    : formattedValue;
+
+  // parseFloat can only handle . as decimal separator
+  const withNormalisedDecimalSeparator = decimalSeparator
+    ? withoutGroupSeparator.replace(decimalSeparator, '.')
+    : withoutGroupSeparator;
+
+  const parsedValue = Number.parseFloat(withNormalisedDecimalSeparator);
+  return parsedValue;
+};
+
+export const getFormattedString = ({
+  value: unformattedValue,
+  currency,
+  locale,
+  alwaysShowDecimals = false,
+}: {
+  value: number;
+  currency: string;
+  locale: string;
+  alwaysShowDecimals?: boolean;
+}): string => {
+  const decimalSeparator = getDecimalSeparator(currency, locale);
+  // formatAmount rounds extra decimals, so 1.999 will become 2. Instead we will manually strip extra decimals so that it becomes 1.99 after formatting
+  const decimalCount = getDecimalCount(currency, locale);
+  const unformattedString = unformattedValue.toString();
+
+  const [integerPart, decimalPart] = decimalSeparator
+    ? unformattedString.split(decimalSeparator)
+    : [unformattedString, undefined];
+
+  const formattedDecimalPart = decimalPart ? decimalPart.slice(0, decimalCount) : '';
+
+  const sanitisedUnformattedValue = Number.parseFloat(`${integerPart}.${formattedDecimalPart}`);
+
+  return formatAmount(sanitisedUnformattedValue, currency, locale, {
+    alwaysShowDecimals,
+  });
+};
+
+export const isInputPossiblyOverflowing = ({
+  ref,
+  value,
+}: {
+  ref: React.RefObject<HTMLInputElement>;
+  value: string;
+}) => {
+  const textLength = value.length;
+  const inputWidth = ref.current?.clientWidth;
+  if (!inputWidth || !textLength) {
+    return;
+  }
+
+  const maxCharactersWithoutOverflow = Math.floor(inputWidth / 19);
+  return textLength > maxCharactersWithoutOverflow;
+};
+
+const allowedInputKeys = new Set([
+  'Backspace',
+  'Delete',
+  ',',
+  '.',
+  'ArrowLeft',
+  'ArrowRight',
+  'Enter',
+  'Tab',
+]);
+
+export const isAllowedInputKey = (e: KeyboardEvent<HTMLInputElement>) => {
+  const { metaKey, key, ctrlKey } = e;
+  const isNumberKey = !Number.isNaN(Number.parseInt(key, 10));
+
+  return isNumberKey || metaKey || ctrlKey || allowedInputKeys.has(key);
+};

package/src/expressiveMoneyInput/animatedNumber/AnimatedNumber.tsx

@@ -0,0 +1,40 @@
+import { motion, useReducedMotion } from 'framer-motion';
+import type { ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+  onClick?: () => void;
+  className?: string;
+}
+
+export const AnimatedNumber = ({ children, onClick, className }: Props) => {
+  const reducedMotion = useReducedMotion();
+
+  return (
+    <motion.span
+      className={className}
+      aria-hidden
+      initial={{ zoom: 0.01 }}
+      animate={{ zoom: 1 }}
+      exit={{ zoom: 0.01 }}
+      transition={{
+        duration: reducedMotion ? 0 : 0.3,
+        type: 'tween',
+        ease: [0.3, 0, 0.1, 1],
+      }}
+      onClick={() => onClick?.()}
+    >
+      <motion.span
+        initial={{ opacity: 0 }}
+        animate={{ opacity: [0, 0, 1] }}
+        exit={{ opacity: [1, 0, 0] }}
+        transition={{
+          duration: reducedMotion ? 0 : 0.3,
+          times: [0, 0.5, 1],
+        }}
+      >
+        {children}
+      </motion.span>
+    </motion.span>
+  );
+};

package/src/expressiveMoneyInput/chevron/Chevron.css

@@ -0,0 +1,12 @@
+.wds-chevron-container {
+  width: 32px;
+  width: var(--size-32);
+  overflow: hidden;
+  color: var(--color-interactive-primary);
+  margin-left: 8px;
+  margin-left: var(--size-8);
+  transition: width 0.3s ease;
+}
+.wds-chevron-hidden {
+  width: 0;
+}

package/src/expressiveMoneyInput/chevron/Chevron.less

@@ -0,0 +1,13 @@
+.wds-chevron {
+  &-container {
+    width: var(--size-32);
+    overflow: hidden;
+    color: var(--color-interactive-primary);
+    margin-left: var(--size-8);
+    transition: width 0.3s ease;
+  }
+
+  &-hidden {
+    width: 0;
+  }
+}

package/src/expressiveMoneyInput/chevron/Chevron.tsx

@@ -0,0 +1,35 @@
+import { ChevronLeft } from '@transferwise/icons';
+import { clsx } from 'clsx';
+import { motion } from 'framer-motion';
+
+interface Props {
+  shouldShow: boolean;
+}
+
+export const Chevron = ({ shouldShow = true }: Props) => {
+  return (
+    <div
+      className={clsx(
+        'd-flex align-items-center',
+        'wds-chevron-container',
+        !shouldShow && 'wds-chevron-hidden',
+      )}
+    >
+      <motion.div
+        animate={{
+          x: [12, 0, 0, -12],
+          opacity: [0, 1, 1, 0],
+        }}
+        transition={{
+          duration: 3,
+          ease: [[0.3, 0, 0.1, 1], 'linear', [0.3, 0, 0.1, 1]],
+          times: [0, 0.1, 0.9, 1],
+          repeat: Infinity,
+          repeatType: 'loop',
+        }}
+      >
+        <ChevronLeft />
+      </motion.div>
+    </div>
+  );
+};

package/src/expressiveMoneyInput/currencySelector/CurrencySelector.css

@@ -0,0 +1,6 @@
+.wds-currency-selector:disabled {
+  opacity: 1 !important;
+  cursor: auto !important;
+  cursor: initial !important;
+  mix-blend-mode: initial !important;
+}

package/src/expressiveMoneyInput/currencySelector/CurrencySelector.less

@@ -0,0 +1,7 @@
+.wds-currency-selector {
+  &:disabled {
+    opacity: 1 !important;
+    cursor: initial !important;
+    mix-blend-mode: initial !important;
+  }
+}

package/src/expressiveMoneyInput/currencySelector/CurrencySelector.tsx

@@ -0,0 +1,220 @@
+import type { AvatarLayoutProps } from '../../avatarLayout';
+import Button from '../../button';
+import {
+  SelectInput,
+  SelectInputOptionContent,
+  SelectInputTriggerButton,
+} from '../../inputs/SelectInput';
+import { CurrencyType, Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';
+import { ChevronDown } from '@transferwise/icons';
+import { Flag } from '@wise/art';
+import {
+  type ButtonHTMLAttributes,
+  forwardRef,
+  type MouseEventHandler,
+  useMemo,
+  useState,
+} from 'react';
+import { useIntl } from 'react-intl';
+
+import messages from '../ExpressiveMoneyInput.messages';
+
+export interface CurrencyOption {
+  label?: string;
+  code: string;
+  keywords: string[] | undefined;
+}
+
+export interface CurrencySection {
+  title: string;
+  currencies: CurrencyOption[];
+}
+
+export type CurrencyOptions = CurrencySection[];
+
+export type Props = {
+  id: string;
+  labelId: string;
+  options?: CurrencyOptions;
+  onChange?: (currency: CurrencyType) => void;
+  onOpen?: () => void;
+  addons?: AvatarLayoutProps['avatars'];
+  onSearchChange?: (payload: { query: string; resultCount: number }) => void;
+} & Pick<ExpressiveMoneyInputProps, 'currency'>;
+
+export const CurrencySelector = ({
+  id,
+  currency,
+  options = [],
+  labelId,
+  onChange,
+  addons,
+  onOpen,
+  onSearchChange,
+}: Props) => {
+  const intl = useIntl();
+
+  const allCurrencyOptions = useMemo(() => getUniqueCurrencies(options), [options]);
+
+  const activeCurrencyOption = useMemo(() => {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    return allCurrencyOptions.find((option) => option.code === currency)!;
+  }, [currency, allCurrencyOptions]);
+
+  const disabled =
+    !onChange ||
+    options.length === 0 ||
+    (options.length === 1 && options[0].currencies.length <= 1);
+
+  const [searchQuery, setSearchQuery] = useState<string>('');
+
+  const handleTriggerClick: MouseEventHandler = (event) => {
+    const triggerEl = event.currentTarget;
+    if (triggerEl?.getAttribute('aria-expanded') === 'false') {
+      onOpen?.();
+    }
+  };
+
+  const items = searchQuery
+    ? filterAndSortCurrenciesForQuery(allCurrencyOptions, searchQuery).map(getCurrencySelectOption)
+    : options.map(getCurrencyGroup);
+
+  return (
+    <SelectInput
+      compareValues="code"
+      disabled={disabled}
+      id={id}
+      value={activeCurrencyOption}
+      filterable
+      filterPlaceholder={intl.formatMessage(messages.currencySelectorSearchPlaceholder)}
+      UNSAFE_triggerButtonProps={{
+        id: undefined,
+        'aria-labelledby': undefined,
+        'aria-describedby': labelId,
+        'aria-invalid': undefined,
+        'aria-label': intl.formatMessage(messages.currencySelectorSelectCurrency),
+      }}
+      items={items}
+      renderValue={({ code, label }) => {
+        return (
+          <SelectInputOptionContent
+            title={code}
+            note={label}
+            icon={<Flag code={code} intrinsicSize={24} />}
+          />
+        );
+      }}
+      renderTrigger={() => (
+        <SelectInputTriggerButton
+          as={ButtonInput}
+          // @ts-expect-error new (v2) ButtonProps
+          addonStart={{
+            type: 'avatar',
+            value: [
+              addons ? addons[0] : null,
+              {
+                ...(addons && addons.length > 1
+                  ? { ...addons[1] }
+                  : {
+                      asset: <Flag code={currency} />,
+                    }),
+              },
+            ]
+              .filter(Boolean)
+              .filter((avatar) => !(avatar && Object.keys(avatar).length === 0)),
+          }}
+          addonEnd={disabled ? undefined : { type: 'icon', value: <ChevronDown /> }}
+          onClick={(event) => handleTriggerClick(event)}
+        >
+          {currency}
+        </SelectInputTriggerButton>
+      )}
+      onChange={(newValue) => {
+        onChange?.(newValue.code);
+      }}
+      onFilterChange={({ queryNormalized }) => {
+        setSearchQuery(queryNormalized ?? '');
+        if (queryNormalized) {
+          onSearchChange?.({
+            query: queryNormalized,
+            resultCount: filterAndSortCurrenciesForQuery(allCurrencyOptions, queryNormalized)
+              .length,
+          });
+        }
+      }}
+    />
+  );
+};
+
+export const ButtonInput = forwardRef(function ButtonInput(
+  { children, ...rest }: React.PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>,
+  ref: React.ForwardedRef<HTMLButtonElement | null>,
+) {
+  return (
+    <Button
+      ref={ref}
+      size="md"
+      v2
+      className="wds-currency-selector"
+      priority="secondary-neutral"
+      {...rest}
+    >
+      {children}
+    </Button>
+  );
+});
+
+const getCurrencySelectOption = (currency: CurrencyOption) => {
+  return {
+    type: 'option' as const,
+    value: currency,
+    filterMatchers: currency.keywords,
+  };
+};
+
+const getCurrencyGroup = (section: CurrencySection) => {
+  return {
+    type: 'group' as const,
+    label: section.title,
+    options: section.currencies.map(getCurrencySelectOption),
+  };
+};
+
+const getUniqueCurrencies = (options: CurrencyOptions) => {
+  const allCurrencyOptions = options.flatMap((section) => section.currencies);
+  const uniqueCurrencies = new Map<string, CurrencyOption>();
+
+  allCurrencyOptions.forEach((currencyObj) => {
+    uniqueCurrencies.set(currencyObj.code, currencyObj);
+  });
+
+  return Array.from(uniqueCurrencies.values());
+};
+
+const filterAndSortCurrenciesForQuery = (
+  currencies: CurrencyOption[],
+  query: string,
+): CurrencyOption[] => {
+  return (
+    currencies
+      .filter((currency) => {
+        return (
+          currency.code.toLowerCase().includes(query) ||
+          (currency.label ?? '').toLowerCase().includes(query) ||
+          currency.keywords?.some((keyword) => keyword.toLowerCase().includes(query))
+        );
+      })
+      // prefer exact matches, then sort alphabetically by code
+      .sort((a, b) => {
+        const aCode = a.code.toLowerCase();
+        const bCode = b.code.toLowerCase();
+        if (aCode === query) {
+          return -1;
+        }
+        if (bCode === query) {
+          return 1;
+        }
+        return aCode.localeCompare(bCode);
+      })
+  );
+};

package/src/expressiveMoneyInput/hooks/useFocus.ts

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react';
+
+const focusTimeout = 5 * 1000;
+
+export const useFocus = () => {
+  const [focus, setFocus] = useState(false);
+  const [visualFocus, setVisualFocus] = useState(false);
+  const [counter, setCounter] = useState(0);
+
+  useEffect(() => {
+    if (focus) {
+      const timeout = setTimeout(() => {
+        setVisualFocus(false);
+      }, focusTimeout);
+      return () => clearTimeout(timeout);
+    }
+  }, [focus, counter]);
+
+  return {
+    focus,
+    setFocus: (value: boolean) => {
+      setFocus(value);
+      if (value) {
+        setVisualFocus(true);
+      }
+      // any call to setFocus should reset the timeout, even if the input was already in focus
+      // updating the counter will trigger the useEffect to reset the timeout
+      setCounter((prev) => prev + 1);
+    },
+    visualFocus,
+    setVisualFocus: (value: boolean) => {
+      setVisualFocus(value);
+    },
+  };
+};

package/src/expressiveMoneyInput/hooks/useInputStyle.ts

@@ -0,0 +1,85 @@
+import { type CSSProperties, useEffect, useLayoutEffect, useState } from 'react';
+import { Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';
+
+type InputStyleObject = {
+  value: string;
+  focus: boolean;
+  inputElement: HTMLInputElement | null;
+} & Pick<ExpressiveMoneyInputProps, 'loading'>;
+
+export const useInputStyle = ({ value, focus, inputElement, loading }: InputStyleObject) => {
+  const initialRender = !useTimeout(300);
+  const inputWidth = useFirstDefinedValue(inputElement?.clientWidth, [inputElement, value]);
+
+  const getStyle = (): CSSProperties => {
+    const fontSize = getFontSize(value, focus, inputWidth);
+
+    return {
+      fontSize,
+      height: fontSize,
+      // aligns the top of the digit with the currency button
+      marginTop: fontSize * -0.19,
+      // if the input loads with a pre-filled value, we don't want to animate the font-size immediately
+      transition: initialRender ? 'none' : undefined,
+      color: loading ? 'var(--color-interactive-secondary)' : undefined,
+    };
+  };
+
+  const [style, setStyle] = useState(getStyle());
+
+  useLayoutEffect(() => {
+    setStyle(getStyle());
+  }, [value, focus, loading, inputWidth]);
+
+  return style;
+};
+
+function getFontSize(inputValue: string, isFocused: boolean, inputWidth: number | undefined) {
+  const defaultFontSize = 52;
+  const focusFontSize = 90;
+  const minimumFontSize = 34;
+
+  let fontSize = isFocused ? focusFontSize : defaultFontSize;
+
+  if (typeof inputWidth === 'undefined') {
+    return fontSize;
+  }
+  const textLength = inputValue.length;
+  const maxCharactersWithoutShrinking = Math.floor(inputWidth / 40);
+
+  if (textLength > maxCharactersWithoutShrinking) {
+    const adjustedSize = Math.round((inputWidth / textLength) * 1.9);
+    fontSize = Math.min(fontSize, adjustedSize);
+  }
+
+  return Math.max(fontSize, minimumFontSize);
+}
+
+const useFirstDefinedValue = (newValue: number | undefined, dependencies: unknown[]) => {
+  const [value, setValue] = useState<number | undefined>(newValue);
+
+  useLayoutEffect(() => {
+    if (typeof newValue !== 'undefined' && typeof value === 'undefined') {
+      setValue(newValue);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [...dependencies, value]);
+
+  return value;
+};
+
+const useTimeout = (delay: number) => {
+  const [ready, setReady] = useState(false);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setReady(true);
+    }, delay);
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [delay]);
+
+  return ready;
+};

package/src/expressiveMoneyInput/hooks/useSelectionRange.ts

@@ -0,0 +1,23 @@
+import { type SyntheticEvent, useRef } from 'react';
+
+export const useSelectionRange = () => {
+  const selection = useRef<{
+    selectionStart: number | null;
+    selectionEnd: number | null;
+  }>();
+
+  const handleSelect = (e: SyntheticEvent<HTMLInputElement>) => {
+    const input = e.target as HTMLInputElement;
+    const { selectionStart, selectionEnd } = input;
+    selection.current = { selectionStart, selectionEnd };
+  };
+  const handleSelectionBlur = () => {
+    selection.current = undefined;
+  };
+
+  return {
+    selection: selection.current,
+    handleSelect,
+    handleSelectionBlur,
+  };
+};

package/src/expressiveMoneyInput/index.ts

@@ -0,0 +1,2 @@
+export type { Props as ExpressiveMoneyInputProps } from './ExpressiveMoneyInput';
+export { default } from './ExpressiveMoneyInput';

package/src/i18n/en.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "selected",
   "neptune.DateLookup.twentyYears": "20 years",
   "neptune.DateLookup.year": "year",
+  "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Type a currency / country",
+  "neptune.ExpressiveMoneyInput.currency.select.currency": "Select currency",
   "neptune.FlowNavigation.back": "back to previous step",
   "neptune.Info.ariaLabel": "More information",
   "neptune.Label.optional": "(Optional)",

package/src/index.ts

@@ -62,6 +62,7 @@ export type {
   CurrencyOptionItem,
   MoneyInputProps,
 } from './moneyInput';
+export type { ExpressiveMoneyInputProps } from './expressiveMoneyInput';
 export type { NavigationOptionListProps } from './navigationOptionsList';
 export type { NavigationOptionProps } from './navigationOption/NavigationOption';
 export type { OverlayHeaderProps } from './overlayHeader';
@@ -188,6 +189,7 @@ export { default as Markdown } from './markdown';
 export { default as Modal } from './modal';
 export { default as Money } from './money';
 export { default as MoneyInput } from './moneyInput';
+export { default as ExpressiveMoneyInput } from './expressiveMoneyInput';
 export { default as NavigationOption } from './navigationOption';
 export { default as NavigationOptionsList } from './navigationOptionsList';
 export { default as Nudge } from './nudge';

package/src/listItem/useListItemControl.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect } from 'react';
+import { useContext, useLayoutEffect } from 'react';
 import { ListItemContext, type ListItemContextData } from './ListItemContext';
 import type { ListItemTypes, ListItemControlProps } from './ListItem';
 
@@ -9,7 +9,7 @@ export function useListItemControl(controlType: ListItemTypes, controlProps: Lis
     props: baseItemProps,
   } = useContext<ListItemContextData>(ListItemContext);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     setControlType(controlType);
     setControlProps(controlProps);
   }, [controlType, controlProps, setControlType, setControlProps]);

package/src/listItem/useListItemMedia.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect } from 'react';
+import { useContext, useLayoutEffect } from 'react';
 import {
   ListItemContext,
   type ListItemContextData,
@@ -8,7 +8,7 @@ import {
 export function useListItemMedia(size?: ListItemMediaSize) {
   const { setMediaSize, mediaSize } = useContext<ListItemContextData>(ListItemContext);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     setMediaSize(size);
   }, [size, setMediaSize]);