@transferwise/components 0.0.0-experimental-414f25f → 0.0.0-experimental-ec79c77

package/src/moneyInput/{MoneyInput.js → MoneyInput.tsx}

@@ -1,48 +1,64 @@
 import { isEmpty, isNumber, isNull } from '@transferwise/neptune-validation';
 import { Flag } from '@wise/art';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import { Component } from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl, WrappedComponentProps } from 'react-intl';
 
 import { Typography } from '../common';
 import { Key as keyValues } from '../common/key';
 import keyCodes from '../common/keyCodes';
-import { Size } from '../common/propsValues/size';
+import { Size, SizeLarge, SizeMedium, SizeSmall } from '../common/propsValues/size';
 import { Input } from '../inputs/Input';
-import { SelectInput, SelectInputOptionContent } from '../inputs/SelectInput';
+import {
+  SelectInput,
+  SelectInputItem,
+  SelectInputOptionContent,
+  SelectInputOptionItem,
+  SelectInputProps,
+} from '../inputs/SelectInput';
 import Title from '../title';
 
 import messages from './MoneyInput.messages';
 import { formatAmount, parseAmount } from './currencyFormatting';
 
-const Currency = PropTypes.shape({
-  header: PropTypes.string,
-  value: PropTypes.string,
-  label: PropTypes.string,
-  currency: PropTypes.string,
-  note: PropTypes.string,
-  searchable: PropTypes.string,
-});
+export interface CurrencyOption {
+  value: string;
+  label: string;
+  currency: string;
+  note?: string;
+  searchable?: string;
+}
+
+type Currency = { header: string } | ({ header?: never } & CurrencyOption);
 
-const isNumberOrNull = (v) => isNumber(v) || isNull(v);
+const isNumberOrNull = (v: unknown): v is number | null => isNumber(v) || isNull(v);
 
-const formatAmountIfSet = (amount, currency, locale, maxLengthOverride) => {
+const formatAmountIfSet = (
+  amount: number | null | undefined,
+  currency: string,
+  locale: string,
+  maxLengthOverride: number | undefined,
+) => {
   if (maxLengthOverride) {
-    return amount || '';
+    return amount != null ? String(amount) : '';
   } else {
     return typeof amount === 'number' ? formatAmount(amount, currency, locale) : '';
   }
 };
 
-const parseNumber = (amount, currency, locale, maxLengthOverride) => {
+const parseNumber = (
+  amount: string,
+  currency: string,
+  locale: string,
+  maxLengthOverride: number | undefined,
+) => {
   if (!maxLengthOverride) {
     return parseAmount(amount, currency, locale);
   }
   if (maxLengthOverride && amount.length > maxLengthOverride) {
     return 0;
   }
-  return +amount;
+  return Number(amount);
 };
 
 const inputKeyCodeAllowlist = new Set([
@@ -61,39 +77,76 @@ const inputKeyCodeAllowlist = new Set([
 
 const inputKeyAllowlist = new Set([keyValues.PERIOD, keyValues.COMMA]);
 
-class MoneyInput extends Component {
-  constructor(props) {
+export interface MoneyInputProps extends WrappedComponentProps {
+  id?: string;
+  currencies: readonly Currency[];
+  selectedCurrency: CurrencyOption;
+  onCurrencyChange?: (value: CurrencyOption) => void;
+  placeholder?: number;
+  amount?: number;
+  size?: SizeSmall | SizeMedium | SizeLarge;
+  onAmountChange?: (value: number | null) => void;
+  addon?: React.ReactNode;
+  searchPlaceholder?: string;
+  /**
+   * Allows the consumer to react to searching, while the search itself is handled internally.
+   */
+  onSearchChange?: (value: { searchQuery: string; filteredOptions: Currency[] }) => void; // TODO
+  customActionLabel?: React.ReactNode;
+  onCustomAction?: () => void;
+  classNames?: Record<string, string>;
+  selectProps?: Partial<SelectInputProps<CurrencyOption>>;
+  maxLengthOverride?: number;
+}
+
+interface MoneyInputState {
+  searchQuery: string;
+  formattedAmount: string;
+  locale: string;
+}
+
+class MoneyInput extends Component<MoneyInputProps, MoneyInputState> {
+  declare props: MoneyInputProps &
+    Required<Pick<MoneyInputProps, keyof typeof MoneyInput.defaultProps>>;
+
+  static defaultProps = {
+    size: Size.LARGE,
+    classNames: {},
+    selectProps: {},
+  } satisfies Partial<MoneyInputProps>;
+
+  amountFocused = false;
+
+  constructor(props: MoneyInputProps) {
     super(props);
-    const { locale } = this.props.intl;
-    this.formatMessage = this.props.intl.formatMessage;
     this.state = {
       searchQuery: '',
       formattedAmount: formatAmountIfSet(
         props.amount,
         props.selectedCurrency.currency,
-        locale,
+        props.intl.locale,
         props.maxLengthOverride,
       ),
-      locale,
+      locale: props.intl.locale,
     };
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this.setState({ locale: nextProps?.intl?.locale });
+  UNSAFE_componentWillReceiveProps(nextProps: MoneyInputProps) {
+    this.setState({ locale: nextProps.intl.locale });
 
     if (!this.amountFocused) {
       this.setState({
         formattedAmount: formatAmountIfSet(
           nextProps.amount,
           nextProps.selectedCurrency.currency,
-          nextProps?.intl?.locale,
+          nextProps.intl.locale,
           nextProps.maxLengthOverride,
         ),
       });
     }
   }
 
-  isInputAllowedForKeyEvent = (event) => {
+  isInputAllowedForKeyEvent = (event: React.KeyboardEvent<HTMLInputElement>) => {
     const { keyCode, metaKey, key, ctrlKey } = event;
     const isNumberKey = isNumber(parseInt(key, 10));
 
@@ -106,14 +159,14 @@ class MoneyInput extends Component {
     );
   };
 
-  handleKeyDown = (event) => {
+  handleKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {
     if (!this.isInputAllowedForKeyEvent(event)) {
       event.preventDefault();
     }
   };
 
-  handlePaste = (event) => {
-    const paste = (event.clipboardData || window.clipboardData).getData('text');
+  handlePaste: React.ClipboardEventHandler<HTMLInputElement> = (event) => {
+    const paste = event.clipboardData.getData('text');
     const { locale } = this.state;
     const parsed = isEmpty(paste)
       ? null
@@ -133,13 +186,13 @@ class MoneyInput extends Component {
           this.props.maxLengthOverride,
         ),
       });
-      this.props.onAmountChange(parsed);
+      this.props.onAmountChange?.(parsed);
     }
 
     event.preventDefault();
   };
 
-  onAmountChange = (event) => {
+  onAmountChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
     const { value } = event.target;
     this.setState({
       formattedAmount: value,
@@ -153,7 +206,7 @@ class MoneyInput extends Component {
           this.props.maxLengthOverride,
         );
     if (isNumberOrNull(parsed)) {
-      this.props.onAmountChange(parsed);
+      this.props.onAmountChange?.(parsed);
     }
   };
 
@@ -166,34 +219,26 @@ class MoneyInput extends Component {
     this.amountFocused = true;
   };
 
-  mapOption = (item) => {
-    return {
-      type: 'option',
-      value: item,
-      filterMatchers: [item.value, item.label, item.note, item.searchable],
-    };
-  };
-
   getSelectOptions() {
-    const selectOptions = [...filterOptionsForQuery(this.props.currencies, this.state.searchQuery)];
+    const selectOptions = filterCurrenciesForQuery(this.props.currencies, this.state.searchQuery);
 
-    let formattedOptions = [];
-    let groupIndex = null;
+    const formattedOptions: SelectInputItem<CurrencyOption>[] = [];
+    let currentGroupOptions: SelectInputOptionItem<CurrencyOption>[] | undefined;
 
     selectOptions.forEach((item) => {
-      if (item.header) {
+      if (item.header != null) {
+        currentGroupOptions = [];
         formattedOptions.push({
           type: 'group',
           label: item.header,
-          options: [],
+          options: currentGroupOptions,
         });
-        groupIndex = formattedOptions.length - 1;
       } else {
-        if (groupIndex === null) {
-          formattedOptions.push(this.mapOption(item));
-        } else {
-          formattedOptions[groupIndex]?.options.push(this.mapOption(item));
-        }
+        (currentGroupOptions ?? formattedOptions).push({
+          type: 'option',
+          value: item,
+          filterMatchers: [item.value, item.label, item.note ?? '', item.searchable ?? ''],
+        });
       }
     });
 
@@ -224,29 +269,25 @@ class MoneyInput extends Component {
     });
   }
 
-  handleSelectChange = (value) => {
+  handleSelectChange = (value: CurrencyOption) => {
     this.handleSearchChange('');
-    this.props.onCurrencyChange(value);
+    this.props.onCurrencyChange?.(value);
   };
 
   handleCustomAction = () => {
     this.handleSearchChange('');
-    if (this.props.onCustomAction) {
-      this.props.onCustomAction();
-    }
+    this.props.onCustomAction?.();
   };
 
-  handleSearchChange = (searchQuery) => {
+  handleSearchChange = (searchQuery: string) => {
     this.setState({ searchQuery });
-    if (this.props.onSearchChange) {
-      this.props.onSearchChange({
-        searchQuery,
-        filteredOptions: filterOptionsForQuery(this.props.currencies, searchQuery),
-      });
-    }
+    this.props.onSearchChange?.({
+      searchQuery,
+      filteredOptions: filterCurrenciesForQuery(this.props.currencies, searchQuery),
+    });
   };
 
-  style = (className) => this.props.classNames[className] || className;
+  style = (className: string) => this.props.classNames[className] || className;
 
   render() {
     const { selectedCurrency, onCurrencyChange, size, addon, id, selectProps, maxLengthOverride } =
@@ -364,13 +405,13 @@ class MoneyInput extends Component {
                 this.props.onCustomAction
                   ? () => (
                       // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-                      <div role="button" tabIndex="0" onClick={this.handleCustomAction}>
+                      <div role="button" tabIndex={0} onClick={this.handleCustomAction}>
                         {this.props.customActionLabel}
                       </div>
                     )
-                  : null
+                  : undefined
               }
-              placeholder={this.formatMessage(messages.selectPlaceholder)}
+              placeholder={this.props.intl.formatMessage(messages.selectPlaceholder)}
               filterable
               filterPlaceholder={this.props.searchPlaceholder}
               disabled={disabled}
@@ -388,33 +429,31 @@ class MoneyInput extends Component {
   }
 }
 
-function filterOptionsForQuery(options, query) {
+function filterCurrenciesForQuery(currencies: readonly Currency[], query: string): Currency[] {
   if (!query) {
-    return options;
+    return [...currencies];
   }
 
+  const options = currencies.filter((option): option is CurrencyOption => option.header == null);
   const filteredOptions = removeDuplicateValueOptions(options).filter((option) =>
-    isCurrencyOptionAndFitsQuery(option, query),
+    currencyOptionFitsQuery(option, query),
   );
 
   return sortOptionsLabelsToFirst(filteredOptions, query);
 }
 
-function removeDuplicateValueOptions(options) {
-  const result = [];
-  const resultValues = [];
-
-  options.forEach((option) => {
-    if (option.value && !resultValues.includes(option.value)) {
-      result.push(option);
-      resultValues.push(option.value);
+function removeDuplicateValueOptions(options: CurrencyOption[]) {
+  const uniqueValues = new Set<string>();
+  return options.filter((option) => {
+    if (!uniqueValues.has(option.value)) {
+      uniqueValues.add(option.value);
+      return true;
     }
+    return false;
   });
-
-  return result;
 }
 
-function isCurrencyOptionAndFitsQuery(option, query) {
+function currencyOptionFitsQuery(option: CurrencyOption, query: string) {
   if (!option.value) {
     return false;
   }
@@ -426,11 +465,11 @@ function isCurrencyOptionAndFitsQuery(option, query) {
   );
 }
 
-function contains(property, query) {
+function contains(property: string | undefined, query: string) {
   return property && property.toLowerCase().includes(query.toLowerCase());
 }
 
-function sortOptionsLabelsToFirst(options, query) {
+function sortOptionsLabelsToFirst(options: CurrencyOption[], query: string) {
   return options.sort((first, second) => {
     const firstContains = contains(first.label, query);
     const secondContains = contains(second.label, query);
@@ -448,47 +487,4 @@ function sortOptionsLabelsToFirst(options, query) {
   });
 }
 
-MoneyInput.propTypes = {
-  id: PropTypes.string,
-  currencies: PropTypes.arrayOf(Currency).isRequired,
-  selectedCurrency: Currency.isRequired,
-  onCurrencyChange: PropTypes.func,
-  placeholder: PropTypes.number,
-  amount: PropTypes.number,
-  size: PropTypes.oneOf(['sm', 'md', 'lg']),
-  onAmountChange: PropTypes.func,
-  addon: PropTypes.node,
-  searchPlaceholder: PropTypes.string,
-  /**
-   * Allows the consumer to react to searching, while the search itself is handled internally. Called with `{ searchQuery: string, filteredOptions: Currency[]  }`
-   */
-  onSearchChange: PropTypes.func,
-  customActionLabel: PropTypes.node,
-  onCustomAction: PropTypes.func,
-  classNames: PropTypes.objectOf(PropTypes.string),
-  selectProps: PropTypes.object,
-  maxLengthOverride: PropTypes.number,
-};
-
-MoneyInput.defaultProps = {
-  id: null,
-  size: Size.LARGE,
-  addon: null,
-  searchPlaceholder: '',
-  onSearchChange: undefined,
-  onCurrencyChange: null,
-  placeholder: null,
-  amount: null,
-  onAmountChange: null,
-  customActionLabel: '',
-  onCustomAction: null,
-  classNames: {},
-  selectProps: {},
-  maxLengthOverride: null,
-};
-
-// this export is necessary for react-to-typescript-definitions
-// to be able to properly generate TS types, this is due to us wrapping this component in `injectIntl` before exporting
-export { MoneyInput };
-
 export default injectIntl(MoneyInput);

package/src/moneyInput/{currencyFormatting.spec.js → currencyFormatting.spec.ts}

@@ -1,12 +1,12 @@
 import { formatAmount, parseAmount } from './currencyFormatting';
 
 jest.mock('@transferwise/formatting', () => ({
-  formatAmount: (number) => `formatted ${number}`,
+  formatAmount: (number: number) => `formatted ${number}`,
 }));
 
 describe('Number formatting', () => {
   it('uses @transferwise/formatting for formatting numbers', () => {
-    expect(formatAmount(100)).toBe('formatted 100');
+    expect(formatAmount(100, 'gbp')).toBe('formatted 100');
   });
 
   it('parses localized numbers', () => {

package/src/moneyInput/{currencyFormatting.js → currencyFormatting.ts}

@@ -5,7 +5,7 @@ import { DEFAULT_LOCALE } from '../common/locale';
 export { formatAmount };
 
 // TODO: do not duplicate this between formatting and components
-const currencyDecimals = {
+const currencyDecimals: Record<string, number> = {
   BIF: 0,
   BYR: 0,
   CLP: 0,
@@ -41,30 +41,27 @@ function isNumberLocaleSupported() {
   return numberString === '1,234';
 }
 
-function getValidLocale(locale) {
+function getValidLocale(locale: string) {
   try {
     const noUnderscoreLocale = locale.replace(/_/, '-');
 
     Intl.NumberFormat(noUnderscoreLocale);
     return noUnderscoreLocale;
   } catch {
-    return 'en-GB';
+    return DEFAULT_LOCALE;
   }
 }
 
-function getCurrencyDecimals(currency = '') {
+function getCurrencyDecimals(currency: string) {
   const upperCaseCurrency = currency.toUpperCase();
-  if (Object.prototype.hasOwnProperty.call(currencyDecimals, upperCaseCurrency)) {
-    return currencyDecimals[upperCaseCurrency];
-  }
-  return DEFAULT_CURRENCY_DECIMALS;
+  return currencyDecimals[upperCaseCurrency] ?? DEFAULT_CURRENCY_DECIMALS;
 }
 
-function getDecimalSeparator(locale) {
+function getDecimalSeparator(locale: string) {
   return isNumberLocaleSupported() ? (1.1).toLocaleString(locale)[1] : '.';
 }
 
-export function parseAmount(number, currency, locale) {
+export function parseAmount(number: string, currency: string, locale = DEFAULT_LOCALE) {
   const validLocale = getValidLocale(locale);
 
   const precision = getCurrencyDecimals(currency);

package/src/moneyInput/index.ts

@@ -0,0 +1,2 @@
+export type { CurrencyOption, MoneyInputProps } from './MoneyInput';
+export { default } from './MoneyInput';

package/src/popover/__snapshots__/Popover.spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`Popover on desktop renders when is open 1`] = `
 <div
-  class="np-panel np-panel--open np-theme-light np-popover__container"
+  class="np-panel np-panel--open np-popover__container"
   data-popper-escaped="true"
   data-popper-placement="right"
   data-popper-reference-hidden="true"

package/build/styles/segmentedControl/SegmentedControl.css

@@ -1,107 +0,0 @@
-.segmented-control {
-  box-sizing: border-box;
-  --segment-highlight-width: 0;
-  --segment-highlight-x: var(--size-4);
-}
-.segmented-control__segments {
-  display: inline-flex;
-  position: relative;
-  justify-content: center;
-  align-items: center;
-  background: rgba(134,167,189,0.10196);
-  background: var(--color-background-neutral);
-  padding: 4px;
-  padding: var(--size-4);
-  border-radius: 24px;
-  border-radius: var(--size-24);
-  width: 100%;
-  transition: outline 300ms;
-  outline: 2px solid transparent;
-}
-.segmented-control--input:has(:focus-visible) > .segmented-control__segments::after {
-  outline: 2px solid var(--color-interactive-primary);
-}
-.segmented-control__segments::after {
-  content: "";
-  background: #ffffff;
-  background: var(--color-background-screen);
-  width: var(--segment-highlight-width);
-  position: absolute;
-  top: 4px;
-  top: var(--size-4);
-  bottom: 4px;
-  bottom: var(--size-4);
-  left: var(--segment-highlight-x);
-  z-index: 0;
-  border-radius: 24px;
-  border-radius: var(--size-24);
-  transition: left 300ms;
-}
-.segmented-control__segments--no-animate::after {
-  transition: none !important;
-}
-.segmented-control__segment {
-  position: relative;
-  flex: 1 1 100%;
-  align-items: center;
-  text-align: center;
-  vertical-align: middle;
-  min-height: 40px;
-  min-height: var(--size-40);
-  line-height: 40px;
-  line-height: var(--size-40);
-  margin: 0;
-  border-radius: 24px;
-  border-radius: var(--size-24);
-  z-index: 1;
-  cursor: pointer;
-  transition: font-weight 300ms, background 300ms;
-}
-.segmented-control__segment:hover {
-  background: rgba(0,0,0,0.10196);
-  background: var(--color-background-overlay);
-}
-.segmented-control__radio-input {
-  position: fixed;
-  opacity: 0;
-  pointer-events: none;
-}
-.segmented-control__button {
-  background: none;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  border: none;
-  outline: none;
-  width: 100%;
-  height: 100%;
-  font: inherit;
-  padding: none;
-  outline: 2px solid transparent;
-}
-.segmented-control__button:focus {
-  outline-offset: 0px;
-}
-.segmented-control__button:focus-visible {
-  outline-color: var(--color-interactive-primary);
-}
-.segmented-control__selected-segment:hover {
-  background: transparent;
-}
-.segmented-control__selected-segment {
-  font-weight: 800;
-  font-weight: var(--font-weight-bold);
-}
-.segmented-control__label-text {
-  white-space: nowrap;
-  color: var(--color-interactive-primary);
-}
-.segmented-control__segments--nav {
-  list-style: none;
-}
-.segmented-control__segments--nav li,
-.segmented-control__segments--nav ui {
-  flex-grow: 1;
-  margin: 0;
-  padding: 0;
-}

package/build/types/segmentedControl/SegmentedControl.d.ts

@@ -1,31 +0,0 @@
-/// <reference types="react" />
-type SegmentBase = {
-    id: string;
-    label: string;
-    value: string;
-};
-type Segment = SegmentBase & {
-    controls?: never;
-};
-type SegmentWithControls = SegmentBase & {
-    controls: string;
-};
-export type Segments = Segment[] | SegmentWithControls[];
-type SegmentedControlPropsBase = {
-    name: string;
-    defaultValue: string;
-    type: 'input' | 'navigation';
-    onChange: (value: string) => void;
-};
-type SegmentedControlNavigationProps = {
-    type: 'navigation';
-    segments: SegmentWithControls[];
-};
-type SegmentedControlInputProps = {
-    type: 'input';
-    segments: Segment[];
-};
-export type SegmentedControlProps = SegmentedControlPropsBase & (SegmentedControlNavigationProps | SegmentedControlInputProps);
-export declare const SegmentedControl: ({ name, defaultValue, type, segments, onChange, }: SegmentedControlProps) => import("react").JSX.Element;
-export {};
-//# sourceMappingURL=SegmentedControl.d.ts.map

package/build/types/segmentedControl/SegmentedControl.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/segmentedControl/SegmentedControl.tsx"],"names":[],"mappings":";AAGA,KAAK,WAAW,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEhE,KAAK,OAAO,GAAG,WAAW,GAAG;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAClD,KAAK,mBAAmB,GAAG,WAAW,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC;AAE9D,MAAM,MAAM,QAAQ,GAAG,OAAO,EAAE,GAAG,mBAAmB,EAAE,CAAC;AAEzD,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,OAAO,GAAG,YAAY,CAAC;IAC7B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,KAAK,+BAA+B,GAAG;IACrC,IAAI,EAAE,YAAY,CAAC;IACnB,QAAQ,EAAE,mBAAmB,EAAE,CAAC;CACjC,CAAC;AAEF,KAAK,0BAA0B,GAAG;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,OAAO,EAAE,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,GAC3D,CAAC,+BAA+B,GAAG,0BAA0B,CAAC,CAAC;AAEjE,eAAO,MAAM,gBAAgB,sDAM1B,qBAAqB,gCA6GvB,CAAC"}

package/src/moneyInput/index.js

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