@transferwise/components 0.0.0-experimental-778ee44 → 0.0.0-experimental-ae2a4e7

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

@@ -1,2 +1,2 @@
-export { sortArrayByProperty } from "./sortArrayByProperty";
+export { sortArrayByProperty } from './sortArrayByProperty';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/phoneNumberInput/utils/sortArrayByProperty/index.js"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/phoneNumberInput/utils/sortArrayByProperty/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC"}

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

@@ -1,2 +1,2 @@
-export function sortArrayByProperty(arrayToSort: any, property: any): any[];
+export declare function sortArrayByProperty<T extends Record<PropertyKey, string>>(arrayToSort: T[], property: keyof T): T[];
 //# 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.js"],"names":[],"mappings":"AACO,4EACkE"}
+{"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"TextareaWithDisplayFormat.d.ts","sourceRoot":"","sources":["../../../src/textareaWithDisplayFormat/TextareaWithDisplayFormat.tsx"],"names":[],"mappings":";AACA,OAA0B,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE9E,QAAA,MAAM,yBAAyB,UAAW,cAAc,gCAKvD,CAAC;AAEF,eAAe,yBAAyB,CAAC"}
+{"version":3,"file":"TextareaWithDisplayFormat.d.ts","sourceRoot":"","sources":["../../../src/textareaWithDisplayFormat/TextareaWithDisplayFormat.js"],"names":[],"mappings":";AAIA,oFAEC"}

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

@@ -1,3 +1,2 @@
-export { default } from './TextareaWithDisplayFormat';
-export type { TextInputProps as TextareaWithDisplayFormatProps } from '../withDisplayFormat';
+export { default } 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.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AACtD,YAAY,EAAE,cAAc,IAAI,8BAA8B,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/textareaWithDisplayFormat/index.js"],"names":[],"mappings":""}

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

@@ -1,63 +1,90 @@
-import { Component, KeyboardEvent, ClipboardEvent, ChangeEvent, FocusEvent } from 'react';
-import { HistoryNavigator } from '../common';
-import { InputProps } from '../inputs/Input';
-import { TextAreaProps } from '../inputs/TextArea';
-import { Merge } from '../utils';
-export type TextInputProps = Merge<InputProps, {
-    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?: InputProps['autoComplete'] | 'disabled';
-    onChange?: (value: string) => void;
-    onBlur?: (value: string) => void;
-    onFocus?: (value: string) => void;
-}>;
-export type Props = typeof WithDisplayFormat.defaultProps & {
-    render: (renderProps: InputProps | TextAreaProps) => JSX.Element;
-} & TextInputProps;
-export type EventType = 'KeyDown' | 'Paste' | 'Cut' | 'Undo' | 'Redo' | 'Backspace' | 'Delete' | null;
-type State = {
-    value: string;
-    historyNavigator: HistoryNavigator;
-    prevDisplayPattern?: string;
-    triggerType?: EventType;
-    triggerEvent?: KeyboardEvent<HTMLInputElement> | null;
-    pastedLength?: number;
-    selectionStart?: HTMLInputElement['selectionStart'];
-    selectionEnd?: HTMLInputElement['selectionEnd'];
-};
-declare class WithDisplayFormat extends Component<Props, State> {
-    static defaultProps: {
-        autoComplete: string;
-        displayPattern: string;
-        type: string;
-        value: string;
-    };
-    constructor(props: Props);
-    static getDerivedStateFromProps({ displayPattern }: Props, { prevDisplayPattern, value, historyNavigator }: State): {
-        prevDisplayPattern: string;
-        value: string;
+export default WithDisplayFormat;
+declare class WithDisplayFormat extends Component<any, any, any> {
+    static getDerivedStateFromProps(nextProps: any, previousState: any): {
+        prevDisplayPattern: any;
+        value: any;
         triggerType: null;
         triggerEvent: null;
         pastedLength: number;
     } | null;
-    getUserAction: (unformattedValue: string) => EventType;
+    constructor(props: any);
+    state: {
+        value: any;
+        historyNavigator: HistoryNavigator;
+        prevDisplayPattern: any;
+        triggerType: null;
+        triggerEvent: null;
+    };
+    getUserAction: (unformattedValue: any) => any;
     resetEvent: () => void;
-    detectUndoRedo: (event: KeyboardEvent<HTMLInputElement>) => "Undo" | "Redo" | null;
-    handleOnKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
-    handleOnPaste: (event: ClipboardEvent<HTMLInputElement>) => void;
+    detectUndoRedo: (event: any) => "Redo" | "Undo" | null;
+    handleOnKeyDown: (event: any) => void;
+    handleOnPaste: (event: any) => void;
     handleOnCut: () => void;
-    isKeyAllowed: (action: EventType) => boolean;
-    handleOnChange: (event: ChangeEvent<HTMLInputElement>) => void;
-    handleOnBlur: (event: FocusEvent<HTMLInputElement>) => void;
-    handleOnFocus: (event: FocusEvent<HTMLInputElement>) => void;
-    handleDelete: (unformattedValue: string, action: EventType) => string;
-    handleCursorPositioning: (action: EventType) => void;
-    render(): JSX.Element;
+    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;
 }
-export default WithDisplayFormat;
+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";
 //# 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.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,cAAc,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1F,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAS7C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,MAAM,MAAM,cAAc,GAAG,KAAK,CAChC,UAAU,EACV;IACE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,MAAM,CAAC;IACvB;;;;OAIG;IACH,YAAY,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,GAAG,UAAU,CAAC;IACvD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CACF,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG,OAAO,iBAAiB,CAAC,YAAY,GAAG;IAC1D,MAAM,EAAE,CAAC,WAAW,EAAE,UAAU,GAAG,aAAa,KAAK,GAAG,CAAC,OAAO,CAAC;CAClE,GAAG,cAAc,CAAC;AAEnB,MAAM,MAAM,SAAS,GACjB,SAAS,GACT,OAAO,GACP,KAAK,GACL,MAAM,GACN,MAAM,GACN,WAAW,GACX,QAAQ,GACR,IAAI,CAAC;AAET,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;CACjD,CAAC;AAEF,cAAM,iBAAkB,SAAQ,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;IACrD,MAAM,CAAC,YAAY;;;;;MAKjB;gBAEU,KAAK,EAAE,KAAK;IAYxB,MAAM,CAAC,wBAAwB,CAC7B,EAAE,cAAc,EAAE,EAAE,KAAK,EACzB,EAAE,kBAAmC,EAAE,KAAK,EAAE,gBAAgB,EAAE,EAAE,KAAK;;;;;;;IAiBzE,aAAa,qBAAsB,MAAM,KAAG,SAAS,CA+BnD;IAEF,UAAU,aAMR;IAEF,cAAc,UAAW,cAAc,gBAAgB,CAAC,4BAMtD;IAEF,eAAe,UAAW,cAAc,gBAAgB,CAAC,UAuBvD;IAEF,aAAa,UAAW,eAAe,gBAAgB,CAAC,UAQtD;IAEF,WAAW,aAET;IAEF,YAAY,WAAY,SAAS,aAK/B;IAEF,cAAc,UAAW,YAAY,gBAAgB,CAAC,UA0BpD;IAEF,YAAY,UAAW,WAAW,gBAAgB,CAAC,UAEjD;IAEF,aAAa,UAAW,WAAW,gBAAgB,CAAC,UAMlD;IAEF,YAAY,qBAAsB,MAAM,UAAU,SAAS,YAwBzD;IAEF,uBAAuB,WAAY,SAAS,UAkB1C;IAEF,MAAM;CAuCP;AAED,eAAe,iBAAiB,CAAC"}
+{"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"}

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

@@ -1,3 +1,2 @@
-export { default } from './WithDisplayFormat';
-export type { Props as WithDisplayFormatProps, TextInputProps } from './WithDisplayFormat';
+export { default } 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.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,YAAY,EAAE,KAAK,IAAI,sBAAsB,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/withDisplayFormat/index.js"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-778ee44",
+  "version": "0.0.0-experimental-ae2a4e7",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

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

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

package/src/common/locale/index.ts

@@ -0,0 +1,96 @@
+import { Direction } from '..';
+
+export const DEFAULT_LANG = 'en';
+export const DEFAULT_LOCALE = 'en-GB';
+
+/**
+ * Languages written right-to-left.
+ */
+export const RTL_LANGUAGES = ['ar', 'he'];
+
+/**
+ * @deprecated The source of truth for supported languages lives in Crab.
+ */
+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, replacing `_` with `-`.
+ *
+ * @param locale `es`, `es_ES`, `en-GB`, `en`, `ja`, `ja-JP`, etc.
+ * @returns `null` if locale is unrecognized by `Intl.Locale`.
+ */
+export function adjustLocale(locale: string) {
+  const localeTrimmed = locale?.trim();
+  if (localeTrimmed) {
+    try {
+      return new Intl.Locale(localeTrimmed.replace('_', '-')).baseName;
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error);
+    }
+  }
+  return null;
+}
+
+/**
+ * Provides corresponding lang (iso2) for provided locale.
+ *
+ * @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 locale `es`, `es-ES`, `en-GB`, `en`, `ja`, `ja-JP`, etc.
+ * @returns Two-letter ISO 639-1 language code, falling back to `null` if locale is invalid or language is unsupported.
+ */
+export function getLangFromLocale(locale: string) {
+  const adjustedLocale = adjustLocale(locale);
+  if (adjustedLocale != null) {
+    const { language } = new Intl.Locale(adjustedLocale);
+    if (SUPPORTED_LANGUAGES.includes(language)) {
+      return language;
+    }
+  }
+  return null;
+}
+
+/**
+ * Provides corresponding country code (iso2) for locales code with explicit region value.
+ *
+ * @param locale `es-ES`, `en-GB`, `ja-JP`, etc.
+ * @returns `null` if the locale is invalid or the region can‘t be identified.
+ */
+export function getCountryFromLocale(locale: string) {
+  const adjustedLocale = adjustLocale(locale);
+  return adjustedLocale != null ? new Intl.Locale(adjustedLocale).region ?? null : null;
+}
+
+/**
+ * Provides the layout direction for a given locale.
+ *
+ * @param locale `es`, `es-ES`, `en-GB`, `en`, `ja`, `ja-JP`, etc.
+ * @returns The layout direction based on the locale, falling back to `Direction.LTR` if the locale is invalid or unsupported.
+ */
+export function getDirectionFromLocale(locale: string) {
+  const adjustedLocale = adjustLocale(locale);
+  return adjustedLocale != null && RTL_LANGUAGES.includes(new Intl.Locale(adjustedLocale).language)
+    ? Direction.RTL
+    : Direction.LTR;
+}

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

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

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

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

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

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

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

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

package/src/index.ts

@@ -2,7 +2,6 @@
  * 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 {
@@ -15,7 +14,6 @@ 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.js

@@ -0,0 +1,14 @@
+import PropTypes from 'prop-types';
+
+import WithDisplayFormat from '../withDisplayFormat';
+
+const InputWithDisplayFormat = (props) => (
+  <WithDisplayFormat {...props} render={(renderProps) => <input {...renderProps} />} />
+);
+
+InputWithDisplayFormat.propTypes = {
+  displayPattern: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default InputWithDisplayFormat;

package/src/inputWithDisplayFormat/index.js

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

package/src/inputs/Input.tsx

@@ -1,16 +1,21 @@
 import classNames from 'classnames';
-import { InputHTMLAttributes, forwardRef } from 'react';
+import { forwardRef } from 'react';
 
 import { SizeLarge, SizeMedium, SizeSmall } from '../common';
+import { Merge } from '../utils';
 
 import { useInputPaddings } from './InputGroup';
 import { formControlClassNameBase } from './_common';
 
-export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & {
-  size?: 'auto' | SizeSmall | SizeMedium | SizeLarge;
-  shape?: 'rectangle' | 'pill';
-  'aria-invalid'?: boolean;
-};
+export interface InputProps
+  extends Merge<
+    React.ComponentPropsWithRef<'input'>,
+    {
+      size?: 'auto' | SizeSmall | SizeMedium | SizeLarge;
+      shape?: 'rectangle' | 'pill';
+      'aria-invalid'?: boolean;
+    }
+  > {}
 
 export const Input = forwardRef(function Input(
   { size = 'auto', shape = 'rectangle', className, ...restProps }: InputProps,

package/src/phoneNumberInput/PhoneNumberInput.spec.js

@@ -37,11 +37,7 @@ describe('Given a telephone number component', () => {
     });
 
     it('should set prefix control to default UK value', () => {
-      expect(select.props().value).toStrictEqual({
-        value: '+44',
-        note: 'GBR, GGY, IMN, JEY',
-        label: '+44',
-      });
+      expect(select.props().value).toBe('+44');
     });
 
     it('should set number control to empty', () => {
@@ -49,11 +45,11 @@ describe('Given a telephone number component', () => {
     });
 
     it('should not disable the select', () => {
-      expect(select.prop('disabled')).toBe(false);
+      expect(select.prop('disabled')).toBeFalsy();
     });
 
     it('should not disable the input', () => {
-      expect(input.prop('disabled')).toBe(false);
+      expect(input.prop('disabled')).toBeFalsy();
     });
   });
 
@@ -65,7 +61,7 @@ describe('Given a telephone number component', () => {
     });
 
     it('should set control values correctly', () => {
-      expect(select.props().value.value).toStrictEqual('+39');
+      expect(select.props().value).toBe('+39');
       expect(input.prop('value')).toBe('123456789');
     });
   });
@@ -92,8 +88,8 @@ describe('Given a telephone number component', () => {
       input = component.find(NUMBER_SELECTOR);
     });
 
-    it('should render input with null id', () => {
-      expect(input.prop('id')).toBeNull();
+    it('should render input with unspecified id', () => {
+      expect(input.prop('id')).toBeUndefined();
     });
   });
 
@@ -118,7 +114,7 @@ describe('Given a telephone number component', () => {
       it(`${number} code should update the value properly`, () => {
         simulatePaste(component.find('input'), number);
 
-        expect(select().props().value.value).toStrictEqual(countryCode);
+        expect(select().props().value).toBe(countryCode);
         expect(input().prop('value')).toBe(localNumber);
         expect(props.onChange).toHaveBeenCalledWith(number.replace(/(\s|-)+/g, ''), countryCode);
       });
@@ -126,28 +122,28 @@ describe('Given a telephone number component', () => {
 
     it('should not paste invalid characters', () => {
       simulatePaste(component.find('input'), '+36asdasdasd');
-      expect(select().props().value.value).toStrictEqual('+39');
+      expect(select().props().value).toBe('+39');
       expect(input().prop('value')).toBe('123456789');
       expect(props.onChange).not.toHaveBeenCalled();
     });
 
     it('should not paste countries which are not in the select', () => {
       simulatePaste(component.find('input'), '+9992342343423');
-      expect(select().props().value.value).toStrictEqual('+39');
+      expect(select().props().value).toBe('+39');
       expect(input().prop('value')).toBe('123456789');
       expect(props.onChange).not.toHaveBeenCalled();
     });
 
     it("should not paste numbers which doesn't start with the country code", () => {
       simulatePaste(component.find('input'), '0+36303932551');
-      expect(select().props().value.value).toStrictEqual('+39');
+      expect(select().props().value).toBe('+39');
       expect(input().prop('value')).toBe('123456789');
       expect(props.onChange).not.toHaveBeenCalled();
     });
 
     it("should not paste numbers which doesn't contain a country code", () => {
       simulatePaste(component.find('input'), '06303932551');
-      expect(select().props().value.value).toStrictEqual('+39');
+      expect(select().props().value).toBe('+39');
       expect(input().prop('value')).toBe('123456789');
       expect(props.onChange).not.toHaveBeenCalled();
     });
@@ -161,7 +157,7 @@ describe('Given a telephone number component', () => {
     });
 
     it('should set the select to the longest matching prefix', () => {
-      expect(select.props().value.value).toStrictEqual('+1868');
+      expect(select.props().value).toBe('+1868');
     });
 
     it('should set the number input to the rest of the number', () => {
@@ -177,7 +173,7 @@ describe('Given a telephone number component', () => {
     });
 
     it('should empty the select', () => {
-      expect(select.props().value).toBeUndefined();
+      expect(select.props().value).toBeNull();
     });
 
     it('should put the whole value in the input without the plus', () => {
@@ -191,7 +187,7 @@ describe('Given a telephone number component', () => {
       select = component.find(PREFIX_SELECT_SELECTOR);
       input = component.find(NUMBER_SELECTOR);
 
-      expect(select.props().value.value).toStrictEqual('+44');
+      expect(select.props().value).toBe('+44');
       expect(input.prop('value')).toBe('');
     });
   });
@@ -254,7 +250,7 @@ describe('Given a telephone number component', () => {
       });
 
       it('should use the prefix of the supplied value', () => {
-        expect(select.props().value.value).toBe('+1');
+        expect(select.props().value).toBe('+1');
       });
     });
 
@@ -268,7 +264,7 @@ describe('Given a telephone number component', () => {
         });
 
         it('should default the prefix to the local country', () => {
-          expect(select.props().value.value).toBe('+34');
+          expect(select.props().value).toBe('+34');
         });
       });
 
@@ -281,7 +277,7 @@ describe('Given a telephone number component', () => {
         });
 
         it('should override locale prefix with country specific prefix', () => {
-          expect(select.props().value.value).toBe('+1');
+          expect(select.props().value).toBe('+1');
         });
       });
     });
@@ -349,7 +345,7 @@ describe('Given a telephone number component', () => {
 
     it('renders Select component with expected props', () => {
       const select = component.find(PREFIX_SELECT_SELECTOR);
-      expect(select.prop('className')).toStrictEqual('custom-class');
+      expect(select.prop('className')).toBe('custom-class');
     });
   });
 });