@transferwise/components 0.0.0-experimental-85b9dd1 → 0.0.0-experimental-0db2ae7

package/build/types/phoneNumberInput/utils/sortArrayByProperty/sortArrayByProperty.d.ts

@@ -1,2 +1,2 @@
-export declare function sortArrayByProperty<T extends Record<PropertyKey, string>>(arrayToSort: T[], property: keyof T): T[];
+export function sortArrayByProperty(arrayToSort: any, property: any): any[];
 //# sourceMappingURL=sortArrayByProperty.d.ts.map

package/build/types/phoneNumberInput/utils/sortArrayByProperty/sortArrayByProperty.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sortArrayByProperty.d.ts","sourceRoot":"","sources":["../../../../../src/phoneNumberInput/utils/sortArrayByProperty/sortArrayByProperty.ts"],"names":[],"mappings":"AAAA,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,EACvE,WAAW,EAAE,CAAC,EAAE,EAChB,QAAQ,EAAE,MAAM,CAAC,OAGlB"}
+{"version":3,"file":"sortArrayByProperty.d.ts","sourceRoot":"","sources":["../../../../../src/phoneNumberInput/utils/sortArrayByProperty/sortArrayByProperty.js"],"names":[],"mappings":"AACO,4EACkE"}

package/build/types/textareaWithDisplayFormat/TextareaWithDisplayFormat.d.ts

@@ -1,11 +1,7 @@
-import * as React from 'react';
-
-export interface TextareaWithDisplayFormatProps {
-    displayPattern: string;
-    onChange: (...args: any[])=>any;
-}
-
-declare const TextareaWithDisplayFormat: React.FC<TextareaWithDisplayFormatProps>;
-
-export default TextareaWithDisplayFormat;
-
+/// <reference types="react" />
+import { type WithDisplayFormatProps } from '../withDisplayFormat';
+export interface TextareaWithDisplayFormatProps extends Omit<WithDisplayFormatProps, 'render'> {
+}
+declare const TextareaWithDisplayFormat: (props: TextareaWithDisplayFormatProps) => import("react").JSX.Element;
+export default TextareaWithDisplayFormat;
+//# sourceMappingURL=TextareaWithDisplayFormat.d.ts.map

package/build/types/textareaWithDisplayFormat/TextareaWithDisplayFormat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextareaWithDisplayFormat.d.ts","sourceRoot":"","sources":["../../../src/textareaWithDisplayFormat/TextareaWithDisplayFormat.js"],"names":[],"mappings":";AAIA,oFAEC"}
+{"version":3,"file":"TextareaWithDisplayFormat.d.ts","sourceRoot":"","sources":["../../../src/textareaWithDisplayFormat/TextareaWithDisplayFormat.tsx"],"names":[],"mappings":";AACA,OAA0B,EAAE,KAAK,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAEtF,MAAM,WAAW,8BAA+B,SAAQ,IAAI,CAAC,sBAAsB,EAAE,QAAQ,CAAC;CAAG;AAEjG,QAAA,MAAM,yBAAyB,UAAW,8BAA8B,gCAKvE,CAAC;AAEF,eAAe,yBAAyB,CAAC"}

package/build/types/textareaWithDisplayFormat/index.d.ts

@@ -1,2 +1,3 @@
-export { default } from "./TextareaWithDisplayFormat";
+export { default } from './TextareaWithDisplayFormat';
+export type { TextareaWithDisplayFormatProps } from './TextareaWithDisplayFormat';
 //# sourceMappingURL=index.d.ts.map

package/build/types/textareaWithDisplayFormat/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/textareaWithDisplayFormat/index.js"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/textareaWithDisplayFormat/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AACtD,YAAY,EAAE,8BAA8B,EAAE,MAAM,6BAA6B,CAAC"}

package/build/types/withDisplayFormat/WithDisplayFormat.d.ts

@@ -1,90 +1,62 @@
-export default WithDisplayFormat;
-declare class WithDisplayFormat extends Component<any, any, any> {
-    static getDerivedStateFromProps(nextProps: any, previousState: any): {
-        prevDisplayPattern: any;
-        value: any;
+import { Component, KeyboardEvent, ClipboardEvent, ChangeEvent, FocusEvent } from 'react';
+import { HistoryNavigator } from '../common';
+import { InputProps } from '../inputs/Input';
+import { TextAreaProps } from '../inputs/TextArea';
+type HTMLTextElement = HTMLInputElement | HTMLTextAreaElement;
+type TypeElementAttrs = InputProps | TextAreaProps;
+export type EventType = 'KeyDown' | 'Paste' | 'Cut' | 'Undo' | 'Redo' | 'Backspace' | 'Delete' | 'Initial';
+interface WithDisplayFormatState {
+    value: string;
+    historyNavigator: HistoryNavigator;
+    prevDisplayPattern: string;
+    triggerType: EventType;
+    triggerEvent: KeyboardEvent<HTMLTextElement> | null;
+    pastedLength: number;
+    selectionStart: number;
+    selectionEnd: number;
+}
+export interface WithDisplayFormatProps<T extends TypeElementAttrs = TypeElementAttrs> extends Pick<TypeElementAttrs, 'className' | 'disabled' | 'id' | 'maxLength' | 'minLength' | 'name' | 'placeholder' | 'readOnly' | 'required' | 'inputMode'> {
+    value?: string;
+    displayPattern: string;
+    /**
+     * autocomplete hides our form help so we need to disable it when help text
+     * is present. Chrome ignores autocomplete=off, the only way to disable it is
+     * to provide an 'invalid' value, for which 'disabled' serves.
+     */
+    autoComplete?: TypeElementAttrs['autoComplete'] | 'disabled';
+    onChange?: (value: string) => void;
+    onBlur?: (value: string) => void;
+    onFocus?: (value: string) => void;
+    render: (renderProps: T) => JSX.Element;
+}
+declare class WithDisplayFormat<T extends TypeElementAttrs> extends Component<WithDisplayFormatProps<T>, WithDisplayFormatState> {
+    props: WithDisplayFormatProps<T> & Required<Pick<WithDisplayFormatProps<T>, keyof typeof WithDisplayFormat.defaultProps>>;
+    static defaultProps: {
+        autoComplete: string;
+        displayPattern: string;
+        value: string;
+    };
+    constructor(props: WithDisplayFormatProps);
+    static getDerivedStateFromProps({ displayPattern }: WithDisplayFormatProps, { prevDisplayPattern, value, historyNavigator }: WithDisplayFormatState): {
+        prevDisplayPattern: string;
+        value: string;
         triggerType: null;
         triggerEvent: null;
         pastedLength: number;
     } | null;
-    constructor(props: any);
-    state: {
-        value: any;
-        historyNavigator: HistoryNavigator;
-        prevDisplayPattern: any;
-        triggerType: null;
-        triggerEvent: null;
-    };
-    getUserAction: (unformattedValue: any) => any;
+    getUserAction: (unformattedValue: string) => EventType | string;
     resetEvent: () => void;
-    detectUndoRedo: (event: any) => "Redo" | "Undo" | null;
-    handleOnKeyDown: (event: any) => void;
-    handleOnPaste: (event: any) => void;
+    detectUndoRedo: (event: KeyboardEvent<HTMLTextElement>) => "Undo" | "Redo" | null;
+    handleOnKeyDown: (event: KeyboardEvent<HTMLTextElement>) => void;
+    handleOnPaste: (event: ClipboardEvent<HTMLTextElement>) => void;
     handleOnCut: () => void;
-    isKeyAllowed: (action: any) => boolean;
-    handleOnChange: (event: any) => void;
-    handleOnBlur: (event: any) => void;
-    handleOnFocus: (event: any) => void;
-    handleDelete: (unformattedValue: any, action: any) => string;
-    handleCursorPositioning: (action: any) => void;
-    render(): any;
+    isKeyAllowed: (action: EventType | string) => boolean;
+    handleOnChange: (event: ChangeEvent<HTMLTextElement>) => void;
+    handleOnBlur: (event: FocusEvent<HTMLTextElement>) => void;
+    handleOnFocus: (event: FocusEvent<HTMLTextElement>) => void;
+    handleDelete: (unformattedValue: string, action: EventType) => string;
+    handleCursorPositioning: (action: string) => void;
+    render(): JSX.Element;
 }
-declare namespace WithDisplayFormat {
-    namespace propTypes {
-        const autoComplete: any;
-        const className: any;
-        const disabled: any;
-        const id: any;
-        const maxLength: any;
-        const minLength: any;
-        const name: any;
-        const onFocus: any;
-        const onBlur: any;
-        const onChange: any;
-        const placeholder: any;
-        const readOnly: any;
-        const render: any;
-        const required: any;
-        const displayPattern: any;
-        const type: any;
-        const inputMode: any;
-        const value: any;
-    }
-    namespace defaultProps {
-        const autoComplete_1: string;
-        export { autoComplete_1 as autoComplete };
-        const className_1: null;
-        export { className_1 as className };
-        const disabled_1: boolean;
-        export { disabled_1 as disabled };
-        const id_1: null;
-        export { id_1 as id };
-        const maxLength_1: null;
-        export { maxLength_1 as maxLength };
-        const minLength_1: null;
-        export { minLength_1 as minLength };
-        const name_1: null;
-        export { name_1 as name };
-        const placeholder_1: null;
-        export { placeholder_1 as placeholder };
-        const readOnly_1: boolean;
-        export { readOnly_1 as readOnly };
-        const required_1: boolean;
-        export { required_1 as required };
-        const displayPattern_1: string;
-        export { displayPattern_1 as displayPattern };
-        const type_1: string;
-        export { type_1 as type };
-        const inputMode_1: null;
-        export { inputMode_1 as inputMode };
-        const value_1: string;
-        export { value_1 as value };
-        const onFocus_1: null;
-        export { onFocus_1 as onFocus };
-        const onBlur_1: null;
-        export { onBlur_1 as onBlur };
-    }
-}
-import { Component } from "react";
-import { HistoryNavigator } from "../common";
+export default WithDisplayFormat;
 //# sourceMappingURL=WithDisplayFormat.d.ts.map

package/build/types/withDisplayFormat/WithDisplayFormat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WithDisplayFormat.d.ts","sourceRoot":"","sources":["../../../src/withDisplayFormat/WithDisplayFormat.js"],"names":[],"mappings":";AAaA;IAcE;;;;;;aAkBC;IA/BD,wBAWC;IAPC;;;;;;MAMC;IAuBH,8CA0BE;IAEF,uBAME;IAEF,uDAME;IAEF,sCAuBE;IAEF,oCAQE;IAEF,wBAEE;IAEF,uCAKE;IAEF,qCA0BE;IAEF,mCAKE;IAEF,oCAME;IAEF,6DAuBE;IAEF,+CAkBE;IAEF,cAsCC;CACF"}
+{"version":3,"file":"WithDisplayFormat.d.ts","sourceRoot":"","sources":["../../../src/withDisplayFormat/WithDisplayFormat.tsx"],"names":[],"mappings":"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"}

package/build/types/withDisplayFormat/index.d.ts

@@ -1,2 +1,3 @@
-export { default } from "./WithDisplayFormat";
+export { default } from './WithDisplayFormat';
+export type { WithDisplayFormatProps } from './WithDisplayFormat';
 //# sourceMappingURL=index.d.ts.map

package/build/types/withDisplayFormat/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/withDisplayFormat/index.js"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/withDisplayFormat/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-85b9dd1",
+  "version": "0.0.0-experimental-0db2ae7",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/common/locale/index.js

@@ -0,0 +1,139 @@
+import { Direction } from '..';
+
+/**
+ * Default language
+ *
+ * @type {string}
+ */
+export const DEFAULT_LANG = 'en';
+
+/**
+ * Default locale
+ *
+ * @type {string}
+ */
+export const DEFAULT_LOCALE = 'en-GB';
+
+/**
+ * Array of languages that are written from the right to the left
+ *
+ * @type {string[]}
+ */
+export const RTL_LANGUAGES = ['ar', 'he'];
+
+/**
+ * @deprecated The source of truth for supported languages lives in Crab.
+ * @type {string[]}
+ */
+export const SUPPORTED_LANGUAGES = [
+  DEFAULT_LANG,
+  'de',
+  'es',
+  'fr',
+  'hu',
+  'id',
+  'it',
+  'ja',
+  'pl',
+  'pt',
+  'ro',
+  'ru',
+  'th',
+  'tr',
+  'uk',
+  'zh',
+];
+
+/**
+ * Verifies and adjusts locale (replace `_` with `-`)
+ * Returns null if locale is unrecognized by {Intl.Locale}
+ *
+ * @param {string} locale (`es`, `es_ES`, `en-GB`, `en`, `ja`, `ja-JP` etc)
+ * @returns {string|null}
+ */
+export function adjustLocale(locale) {
+  if (!locale || locale.trim().length === 0) {
+    return null;
+  }
+  try {
+    const { baseName } = new Intl.Locale(locale.trim().replace('_', '-'));
+    return baseName;
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error);
+    return null;
+  }
+}
+
+/**
+ * Provides corresponding lang (iso2) for provided locale
+ * if locale is invalid or language is unsupported returns null
+ *
+ * @deprecated The use of this function almost always breaks language variants
+ * e.g. Simplified and Traditional Chinese.
+ * There should be no use case for this function.
+ * To select the correct translations from a translations object, pass the
+ * locale directly into Crab's getLocalisedMessages.
+ * @param {string} locale (`es`, `es-ES`, `en-GB`, `en`, `ja`, `ja-JP` etc)
+ * @returns {string|null} two-letter ISO639-1 language
+ */
+export function getLangFromLocale(locale) {
+  const adjustedLocale = adjustLocale(locale);
+  if (adjustedLocale === null) {
+    return null;
+  }
+  try {
+    const { language } = new Intl.Locale(adjustedLocale);
+
+    if (SUPPORTED_LANGUAGES.includes(language)) {
+      return language;
+    }
+    return null;
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error);
+    return null;
+  }
+}
+
+/**
+ * Provides corresponding country code (iso2) for locales code with explicit region value (`es-ES`, `en-GB`, `ja-JP` etc.)
+ * if the value is invalid or missing region it returns null
+ *
+ * @param {string} locale
+ * @returns {string|null}
+ */
+export function getCountryFromLocale(locale) {
+  const adjustedLocale = adjustLocale(locale);
+  if (adjustedLocale === null) {
+    return null;
+  }
+  try {
+    const { region } = new Intl.Locale(adjustedLocale);
+    return region ?? null;
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error);
+    return null;
+  }
+}
+
+/**
+ * Provides the layout direction for a given locale.
+ * If locale is invalid or language is unsupported returns Direction.LTR
+ *
+ * @param {string} locale (`es`, `es-ES`, `en-GB`, `en`, `ja`, `ja-JP` etc)
+ * @returns {Direction} The layout direction based on the locale
+ */
+export function getDirectionFromLocale(locale) {
+  try {
+    const adjustedLocale = adjustLocale(locale);
+    const { language } = new Intl.Locale(adjustedLocale);
+
+    return RTL_LANGUAGES.includes(language) ? Direction.RTL : Direction.LTR;
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error);
+    return Direction.LTR;
+  }
+}

package/src/common/locale/{index.spec.ts → index.spec.js}

@@ -24,8 +24,8 @@ describe('locale utils', () => {
       ['zh_HK', 'zh'],
       ['ja-JP', 'ja'],
       ['zhHK', null],
-      [null as any, null],
-      [undefined as any, null],
+      [null, null],
+      [undefined, null],
       ['', null],
       ['  ', null],
       ['ar-dz', null],
@@ -51,8 +51,8 @@ describe('locale utils', () => {
       ['zh_HK', 'zh-HK'],
       ['ja-JP', 'ja-JP'],
       ['zhHK', null],
-      [null as any, null],
-      [undefined as any, null],
+      [null, null],
+      [undefined, null],
       ['', null],
       ['  ', null],
       ['ar-dz', 'ar-DZ'],

package/src/common/textFormat/formatWithPattern/{formatWithPattern.js → formatWithPattern.ts}

@@ -1,6 +1,7 @@
 import getSymbolsInPatternWithPosition from '../getSymbolsInPatternWithPosition';
+import type { SymbolWithPosition } from '../getSymbolsInPatternWithPosition/getSymbolsInPatternWithPosition';
 
-const formatWithPattern = (value, pattern) => {
+const formatWithPattern = (value: string, pattern: string): string => {
   if (!value || value === '') {
     return '';
   }
@@ -9,13 +10,16 @@ const formatWithPattern = (value, pattern) => {
 
   const patternWithSymbolsPosition = getSymbolsInPatternWithPosition(pattern);
 
-  let patternSymbol = [];
+  let patternSymbol: SymbolWithPosition[] = [];
   // valueArray.length increments during the cycle cause we are adding new elements.
   for (let index = 0; index < valueArray.length; index += 1) {
-    patternSymbol = patternWithSymbolsPosition.filter((symbol) => symbol.index === index);
+    patternSymbol = patternWithSymbolsPosition.filter((pattern) => pattern.index === index);
     // Add pattern's symbol at n position
     if (patternSymbol.length === 1) {
-      valueArray.splice(index, 0, patternSymbol.pop().symbol);
+      const last = patternSymbol.pop();
+      if (last) {
+        valueArray.splice(index, 0, last.symbol);
+      }
     }
   }
 

package/src/common/textFormat/getCursorPositionAfterKeystroke/{getCursorPositionAfterKeystroke.js → getCursorPositionAfterKeystroke.ts}

@@ -1,13 +1,13 @@
 import getCountOfSymbolsInSelection from '../getCountOfSymbolsInSelection';
 import { getDistanceToNextSymbol, getDistanceToPreviousSymbol } from '../getDistanceToSymbol';
 
-const getCursorPositionAfteractionstroke = (
-  action,
-  selectionStart,
-  selectionEnd,
-  pattern,
-  pastedLength,
-) => {
+const getCursorPositionAfterActionStroke = (
+  action: string,
+  selectionStart: number,
+  selectionEnd: number,
+  pattern: string,
+  pastedLength: number,
+): number => {
   let cursorPosition = selectionStart;
 
   switch (action) {
@@ -38,4 +38,4 @@ const getCursorPositionAfteractionstroke = (
   return cursorPosition;
 };
 
-export default getCursorPositionAfteractionstroke;
+export default getCursorPositionAfterActionStroke;

package/src/common/textFormat/getSymbolsInPatternWithPosition/{getSymbolsInPatternWithPosition.js → getSymbolsInPatternWithPosition.ts}

@@ -1,5 +1,10 @@
-const getSymbolsInPatternWithPosition = (pattern) => {
-  const patternWithSymbolsPosition = [];
+export type SymbolWithPosition = {
+  index: number;
+  symbol: string;
+};
+
+const getSymbolsInPatternWithPosition = (pattern: string): SymbolWithPosition[] => {
+  const patternWithSymbolsPosition: SymbolWithPosition[] = [];
   const patternArray = pattern.split('');
   patternArray.forEach((symbol, index) => {
     if (symbol !== '*') {

package/src/common/textFormat/unformatWithPattern/{unformatWithPattern.js → unformatWithPattern.ts}

@@ -1,4 +1,4 @@
-const unformatWithPattern = (value, pattern) => {
+const unformatWithPattern = (value: string, pattern: string): string => {
   let valueArray = [''];
   if (value && value.length > 0) {
     valueArray = value.toString().split('');
@@ -8,6 +8,7 @@ const unformatWithPattern = (value, pattern) => {
   return valueArray.join('');
 };
 
-const getSymbolsInPattern = (pattern) => pattern.split('').filter((symbol) => symbol !== '*');
+const getSymbolsInPattern = (pattern: string): string[] =>
+  pattern.split('').filter((symbol) => symbol !== '*');
 
 export default unformatWithPattern;

package/src/index.ts

@@ -2,6 +2,7 @@
  * Types
  */
 export type { InputProps } from './inputs/Input';
+export type { InputWithDisplayFormatProps } from './inputWithDisplayFormat';
 export type { InputGroupProps } from './inputs/InputGroup';
 export type { SearchInputProps } from './inputs/SearchInput';
 export type {
@@ -14,6 +15,7 @@ export type {
   SelectInputTriggerButtonProps,
 } from './inputs/SelectInput';
 export type { TextAreaProps } from './inputs/TextArea';
+export type { TextareaWithDisplayFormatProps } from './textareaWithDisplayFormat';
 export type { UploadedFile, UploadError, UploadResponse } from './uploadInput/types';
 export type { ModalProps } from './modal';
 export type {

package/src/inputWithDisplayFormat/InputWithDisplayFormat.tsx

@@ -0,0 +1,10 @@
+import { Input, type InputProps } from '../inputs/Input';
+import WithDisplayFormat, { type WithDisplayFormatProps } from '../withDisplayFormat';
+
+export interface InputWithDisplayFormatProps extends Omit<WithDisplayFormatProps, 'render'> {}
+
+const InputWithDisplayFormat = (props: InputWithDisplayFormatProps) => (
+  <WithDisplayFormat<InputProps> {...props} render={(renderProps) => <Input {...renderProps} />} />
+);
+
+export default InputWithDisplayFormat;

package/src/inputWithDisplayFormat/index.ts

@@ -0,0 +1,2 @@
+export { default } from './InputWithDisplayFormat';
+export type { InputWithDisplayFormatProps } from './InputWithDisplayFormat';