@transferwise/components 46.78.0 → 46.79.0

package/build/withDisplayFormat/WithDisplayFormat.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"WithDisplayFormat.mjs","sources":["../../src/withDisplayFormat/WithDisplayFormat.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { HistoryNavigator } from '../common';\nimport {\n  formatWithPattern,\n  getCountOfSymbolsInSelection,\n  getCursorPositionAfterKeystroke,\n  unformatWithPattern,\n  getDistanceToPreviousSymbol,\n  getDistanceToNextSymbol,\n} from '../common/textFormat';\nimport { InputProps } from '../inputs/Input';\nimport { TextAreaProps } from '../inputs/TextArea';\n\ntype HTMLTextElement = HTMLInputElement | HTMLTextAreaElement;\ntype TextElementProps = InputProps | TextAreaProps;\n\nexport type EventType =\n  | 'KeyDown'\n  | 'Paste'\n  | 'Cut'\n  | 'Undo'\n  | 'Redo'\n  | 'Backspace'\n  | 'Delete'\n  | 'Initial';\n\ninterface WithDisplayFormatState {\n  value: string;\n  historyNavigator: HistoryNavigator;\n  prevDisplayPattern: string;\n  triggerType: EventType;\n  triggerEvent: React.KeyboardEvent<HTMLTextElement> | null;\n  pastedLength: number;\n  selectionStart: number;\n  selectionEnd: number;\n}\n\nexport interface WithDisplayFormatProps<T extends TextElementProps = TextElementProps>\n  extends Pick<\n    TextElementProps,\n    | 'className'\n    | 'disabled'\n    | 'id'\n    | 'maxLength'\n    | 'minLength'\n    | 'name'\n    | 'placeholder'\n    | 'readOnly'\n    | 'required'\n    | 'inputMode'\n  > {\n  value?: string;\n  displayPattern: string;\n  /**\n   * autocomplete hides our form help so we need to disable it when help text\n   * is present. Chrome ignores autocomplete=off, the only way to disable it is\n   * to provide an 'invalid' value, for which 'disabled' serves.\n   */\n  autoComplete?: TextElementProps['autoComplete'] | 'disabled';\n  onChange?: (value: string) => void;\n  onBlur?: (value: string) => void;\n  onFocus?: (value: string) => void;\n  render: (renderProps: T) => React.JSX.Element;\n}\n\nclass WithDisplayFormat<T extends TextElementProps> extends React.Component<\n  WithDisplayFormatProps<T>,\n  WithDisplayFormatState\n> {\n  declare props: WithDisplayFormatProps<T> &\n    Required<Pick<WithDisplayFormatProps<T>, keyof typeof WithDisplayFormat.defaultProps>>;\n  static defaultProps = {\n    autoComplete: 'off',\n    displayPattern: '',\n    value: '',\n  };\n\n  constructor(props: WithDisplayFormatProps) {\n    super(props);\n    const unformattedValue = unformatWithPattern(props.value ?? '', props.displayPattern);\n    this.state = {\n      value: formatWithPattern(unformattedValue, props.displayPattern),\n      historyNavigator: new HistoryNavigator(),\n      prevDisplayPattern: props.displayPattern,\n      triggerType: 'Initial',\n      triggerEvent: null,\n      selectionStart: 0,\n      selectionEnd: 0,\n      pastedLength: 0,\n    };\n  }\n\n  static getDerivedStateFromProps(\n    { displayPattern }: WithDisplayFormatProps,\n    { prevDisplayPattern = displayPattern, value, historyNavigator }: WithDisplayFormatState,\n  ) {\n    if (prevDisplayPattern !== displayPattern) {\n      const unFormattedValue = unformatWithPattern(value, prevDisplayPattern);\n      historyNavigator.reset();\n\n      return {\n        prevDisplayPattern: displayPattern,\n        value: formatWithPattern(unFormattedValue, displayPattern),\n        triggerType: null,\n        triggerEvent: null,\n        pastedLength: 0,\n      };\n    }\n    return null;\n  }\n\n  getUserAction = (unformattedValue: string): EventType | string => {\n    const { triggerEvent, triggerType, value } = this.state;\n    const { displayPattern } = this.props;\n\n    if (triggerEvent) {\n      const charCode = String.fromCharCode(triggerEvent.which).toLowerCase();\n\n      if (triggerType === 'Paste' || triggerType === 'Cut') {\n        return triggerType;\n      }\n\n      if ((triggerEvent.ctrlKey || triggerEvent.metaKey) && charCode === 'z') {\n        return triggerEvent.shiftKey ? 'Redo' : 'Undo';\n      }\n      // Detect mouse event redo\n      if (triggerEvent.ctrlKey && charCode === 'd') {\n        return 'Delete';\n      }\n\n      // Android Fix.\n      if (\n        typeof triggerEvent.key === 'undefined' &&\n        unformattedValue.length <= unformatWithPattern(value, displayPattern).length\n      ) {\n        return 'Backspace';\n      }\n      return triggerEvent.key;\n    }\n    // triggerEvent can be null only in case of \"autofilling\" (via password manager extension or browser build-in one) events\n    return 'Paste';\n  };\n\n  resetEvent = () => {\n    this.setState({\n      triggerType: 'Initial',\n      triggerEvent: null,\n      pastedLength: 0,\n    });\n  };\n\n  detectUndoRedo = (event: React.KeyboardEvent<HTMLTextElement>) => {\n    const charCode = String.fromCharCode(event.which).toLowerCase();\n    if ((event.ctrlKey || event.metaKey) && charCode === 'z') {\n      return event.shiftKey ? 'Redo' : 'Undo';\n    }\n    return null;\n  };\n\n  handleOnKeyDown: React.KeyboardEventHandler<HTMLTextElement> = (event) => {\n    event.persist();\n    const { selectionStart, selectionEnd } = event.currentTarget;\n    const { historyNavigator } = this.state;\n    const { displayPattern } = this.props;\n\n    // Unfortunately Undo and Redo don't trigger OnChange event so we need to handle some value logic here.\n    let newFormattedValue = '';\n\n    if (this.detectUndoRedo(event) === 'Undo') {\n      newFormattedValue = formatWithPattern(historyNavigator.undo().toString(), displayPattern);\n      this.setState({ value: newFormattedValue, triggerType: 'Undo' });\n    } else if (this.detectUndoRedo(event) === 'Redo') {\n      newFormattedValue = formatWithPattern(historyNavigator.redo().toString(), displayPattern);\n      this.setState({ value: newFormattedValue, triggerType: 'Redo' });\n    } else {\n      this.setState({\n        triggerEvent: event,\n        triggerType: 'KeyDown',\n        selectionStart: selectionStart ?? 0,\n        selectionEnd: selectionEnd ?? 0,\n      });\n    }\n  };\n\n  handleOnPaste: React.ClipboardEventHandler<HTMLTextElement> = (event) => {\n    const { displayPattern } = this.props;\n    const pastedLength = unformatWithPattern(\n      event.clipboardData.getData('Text'),\n      displayPattern,\n    ).length;\n\n    this.setState({ triggerType: 'Paste', pastedLength });\n  };\n\n  handleOnCut: React.ClipboardEventHandler<HTMLTextElement> = () => {\n    this.setState({ triggerType: 'Cut' });\n  };\n\n  isKeyAllowed = (action: EventType | string) => {\n    const { displayPattern } = this.props;\n    const symbolsInPattern = displayPattern.split('').filter((character) => character !== '*');\n\n    return !symbolsInPattern.includes(action);\n  };\n\n  handleOnChange: React.ChangeEventHandler<HTMLTextElement> = (event) => {\n    const { historyNavigator, triggerType } = this.state;\n    const { displayPattern, onChange } = this.props;\n    const { value } = event.target;\n    let unformattedValue = unformatWithPattern(value, displayPattern);\n    const action = this.getUserAction(unformattedValue);\n    if (!this.isKeyAllowed(action) || triggerType === 'Undo' || triggerType === 'Redo') {\n      return;\n    }\n\n    if (action === 'Backspace' || action === 'Delete') {\n      unformattedValue = this.handleDelete(unformattedValue, action);\n    }\n\n    const newFormattedValue = formatWithPattern(unformattedValue, displayPattern);\n    historyNavigator.add(unformattedValue);\n\n    this.handleCursorPositioning(action);\n\n    this.setState({ value: newFormattedValue }, () => {\n      this.resetEvent();\n      if (onChange) {\n        const broadcastValue = unformatWithPattern(newFormattedValue, displayPattern);\n        onChange(broadcastValue);\n      }\n    });\n  };\n\n  handleOnBlur: React.FocusEventHandler<HTMLTextElement> = (event) => {\n    this.props.onBlur?.(unformatWithPattern(event.target.value, this.props.displayPattern));\n  };\n\n  handleOnFocus: React.FocusEventHandler<HTMLTextElement> = (event) => {\n    const { displayPattern, onFocus } = this.props;\n    if (onFocus) {\n      this.handleOnChange(event);\n      onFocus(unformatWithPattern(event.target.value, displayPattern));\n    }\n  };\n\n  handleDelete = (unformattedValue: string, action: EventType) => {\n    const { displayPattern } = this.props;\n    const { selectionStart, selectionEnd } = this.state;\n    const newStack = [...unformattedValue];\n    if (selectionStart === selectionEnd) {\n      let startPosition =\n        selectionStart - getCountOfSymbolsInSelection(0, selectionStart, displayPattern);\n      let toDelete = 0;\n\n      let count = getDistanceToNextSymbol(selectionStart, displayPattern);\n      if (action === 'Backspace') {\n        startPosition -= 1;\n        count = getDistanceToPreviousSymbol(selectionStart, displayPattern);\n      }\n\n      if (startPosition >= 0 && count) {\n        toDelete = 1;\n      }\n\n      newStack.splice(startPosition, toDelete);\n    }\n\n    return newStack.join('');\n  };\n\n  handleCursorPositioning = (action: string) => {\n    const { displayPattern } = this.props;\n    const { triggerEvent, selectionStart, selectionEnd, pastedLength } = this.state;\n    const target = triggerEvent?.currentTarget;\n\n    const cursorPosition = getCursorPositionAfterKeystroke(\n      action,\n      selectionStart,\n      selectionEnd,\n      displayPattern,\n      pastedLength,\n    );\n\n    setTimeout(() => {\n      target?.setSelectionRange(cursorPosition, cursorPosition);\n      this.setState({ selectionStart: cursorPosition, selectionEnd: cursorPosition });\n    }, 0);\n  };\n\n  render() {\n    const {\n      inputMode,\n      className,\n      id,\n      name,\n      placeholder,\n      readOnly,\n      required,\n      minLength,\n      maxLength,\n      disabled,\n      autoComplete,\n    } = this.props;\n    const { value } = this.state;\n    const renderProps: TextElementProps = {\n      inputMode,\n      className,\n      id,\n      name,\n      placeholder,\n      readOnly,\n      required,\n      minLength,\n      maxLength,\n      disabled,\n      autoComplete,\n      value,\n      onFocus: this.handleOnFocus,\n      onBlur: this.handleOnBlur,\n      onPaste: this.handleOnPaste,\n      onKeyDown: this.handleOnKeyDown,\n      onChange: this.handleOnChange,\n      onCut: this.handleOnCut,\n    };\n    return this.props.render(renderProps as T);\n  }\n}\n\nexport default WithDisplayFormat;\n"],"names":["WithDisplayFormat","React","Component","defaultProps","autoComplete","displayPattern","value","constructor","props","unformattedValue","unformatWithPattern","state","formatWithPattern","historyNavigator","HistoryNavigator","prevDisplayPattern","triggerType","triggerEvent","selectionStart","selectionEnd","pastedLength","getDerivedStateFromProps","unFormattedValue","reset","getUserAction","charCode","String","fromCharCode","which","toLowerCase","ctrlKey","metaKey","shiftKey","key","length","resetEvent","setState","detectUndoRedo","event","handleOnKeyDown","persist","currentTarget","newFormattedValue","undo","toString","redo","handleOnPaste","clipboardData","getData","handleOnCut","isKeyAllowed","action","symbolsInPattern","split","filter","character","includes","handleOnChange","onChange","target","handleDelete","add","handleCursorPositioning","broadcastValue","handleOnBlur","onBlur","handleOnFocus","onFocus","newStack","startPosition","getCountOfSymbolsInSelection","toDelete","count","getDistanceToNextSymbol","getDistanceToPreviousSymbol","splice","join","cursorPosition","getCursorPositionAfterKeystroke","setTimeout","setSelectionRange","render","inputMode","className","id","name","placeholder","readOnly","required","minLength","maxLength","disabled","renderProps","onPaste","onKeyDown","onCut"],"mappings":"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"}
+{"version":3,"file":"WithDisplayFormat.mjs","sources":["../../src/withDisplayFormat/WithDisplayFormat.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { HistoryNavigator } from '../common';\nimport {\n  formatWithPattern,\n  getCountOfSymbolsInSelection,\n  getCursorPositionAfterKeystroke,\n  unformatWithPattern,\n  getDistanceToPreviousSymbol,\n  getDistanceToNextSymbol,\n} from '../common/textFormat';\nimport { InputProps } from '../inputs/Input';\nimport { TextAreaProps } from '../inputs/TextArea';\n\ntype HTMLTextElement = HTMLInputElement | HTMLTextAreaElement;\ntype TextElementProps = InputProps | TextAreaProps;\n\nexport type EventType =\n  | 'KeyDown'\n  | 'Paste'\n  | 'Cut'\n  | 'Undo'\n  | 'Redo'\n  | 'Backspace'\n  | 'Delete'\n  | 'Initial';\n\ninterface WithDisplayFormatState {\n  value: string;\n  historyNavigator: HistoryNavigator;\n  prevDisplayPattern: string;\n  triggerType: EventType;\n  triggerEvent: React.KeyboardEvent<HTMLTextElement> | null;\n  pastedLength: number;\n  selectionStart: number;\n  selectionEnd: number;\n}\n\nexport interface WithDisplayFormatProps<T extends TextElementProps = TextElementProps>\n  extends Pick<\n    TextElementProps,\n    | 'className'\n    | 'disabled'\n    | 'id'\n    | 'maxLength'\n    | 'minLength'\n    | 'name'\n    | 'placeholder'\n    | 'readOnly'\n    | 'required'\n    | 'inputMode'\n  > {\n  value?: string;\n  displayPattern: string;\n  /**\n   * autocomplete hides our form help so we need to disable it when help text\n   * is present. Chrome ignores autocomplete=off, the only way to disable it is\n   * to provide an 'invalid' value, for which 'disabled' serves.\n   */\n  autoComplete?: TextElementProps['autoComplete'] | 'disabled';\n  onChange?: (value: string) => void;\n  onBlur?: (value: string) => void;\n  onFocus?: (value: string) => void;\n  render: (renderProps: T) => React.JSX.Element;\n}\n\nclass WithDisplayFormat<T extends TextElementProps> extends React.Component<\n  WithDisplayFormatProps<T>,\n  WithDisplayFormatState\n> {\n  declare props: WithDisplayFormatProps<T> &\n    Required<Pick<WithDisplayFormatProps<T>, keyof typeof WithDisplayFormat.defaultProps>>;\n  static defaultProps = {\n    autoComplete: 'off',\n    displayPattern: '',\n    value: '',\n  };\n\n  constructor(props: WithDisplayFormatProps) {\n    super(props);\n    const unformattedValue = unformatWithPattern(props.value ?? '', props.displayPattern);\n    this.state = {\n      value: formatWithPattern(unformattedValue, props.displayPattern),\n      historyNavigator: new HistoryNavigator(),\n      prevDisplayPattern: props.displayPattern,\n      triggerType: 'Initial',\n      triggerEvent: null,\n      selectionStart: 0,\n      selectionEnd: 0,\n      pastedLength: 0,\n    };\n  }\n\n  static getDerivedStateFromProps(\n    { displayPattern }: WithDisplayFormatProps,\n    { prevDisplayPattern = displayPattern, value, historyNavigator }: WithDisplayFormatState,\n  ) {\n    if (prevDisplayPattern !== displayPattern) {\n      const unFormattedValue = unformatWithPattern(value, prevDisplayPattern);\n      historyNavigator.reset();\n\n      return {\n        prevDisplayPattern: displayPattern,\n        value: formatWithPattern(unFormattedValue, displayPattern),\n        triggerType: null,\n        triggerEvent: null,\n        pastedLength: 0,\n      };\n    }\n    return null;\n  }\n\n  getUserAction = (unformattedValue: string): EventType | string => {\n    const { triggerEvent, triggerType, value } = this.state;\n    const { displayPattern } = this.props;\n\n    if (triggerEvent) {\n      const charCode = String.fromCharCode(triggerEvent.which).toLowerCase();\n\n      if (triggerType === 'Paste' || triggerType === 'Cut') {\n        return triggerType;\n      }\n\n      if ((triggerEvent.ctrlKey || triggerEvent.metaKey) && charCode === 'z') {\n        return triggerEvent.shiftKey ? 'Redo' : 'Undo';\n      }\n      // Detect mouse event redo\n      if (triggerEvent.ctrlKey && charCode === 'd') {\n        return 'Delete';\n      }\n\n      // Android Fix.\n      if (\n        typeof triggerEvent.key === 'undefined' &&\n        unformattedValue.length <= unformatWithPattern(value, displayPattern).length\n      ) {\n        return 'Backspace';\n      }\n      return triggerEvent.key;\n    }\n    // triggerEvent can be null only in case of \"autofilling\" (via password manager extension or browser build-in one) events\n    return 'Paste';\n  };\n\n  resetEvent = () => {\n    this.setState({\n      triggerType: 'Initial',\n      triggerEvent: null,\n      pastedLength: 0,\n    });\n  };\n\n  detectUndoRedo = (event: React.KeyboardEvent<HTMLTextElement>) => {\n    const charCode = String.fromCharCode(event.which).toLowerCase();\n    if ((event.ctrlKey || event.metaKey) && charCode === 'z') {\n      return event.shiftKey ? 'Redo' : 'Undo';\n    }\n    return null;\n  };\n\n  handleOnKeyDown: React.KeyboardEventHandler<HTMLTextElement> = (event) => {\n    event.persist();\n    const { selectionStart, selectionEnd } = event.currentTarget;\n    const { historyNavigator } = this.state;\n    const { displayPattern } = this.props;\n\n    // Unfortunately Undo and Redo don't trigger OnChange event so we need to handle some value logic here.\n    let newFormattedValue = '';\n\n    if (this.detectUndoRedo(event) === 'Undo') {\n      newFormattedValue = formatWithPattern(historyNavigator.undo().toString(), displayPattern);\n      this.setState({ value: newFormattedValue, triggerType: 'Undo' });\n    } else if (this.detectUndoRedo(event) === 'Redo') {\n      newFormattedValue = formatWithPattern(historyNavigator.redo().toString(), displayPattern);\n      this.setState({ value: newFormattedValue, triggerType: 'Redo' });\n    } else {\n      this.setState({\n        triggerEvent: event,\n        triggerType: 'KeyDown',\n        selectionStart: selectionStart ?? 0,\n        selectionEnd: selectionEnd ?? 0,\n      });\n    }\n  };\n\n  handleOnPaste: React.ClipboardEventHandler<HTMLTextElement> = (event) => {\n    const { displayPattern } = this.props;\n    const pastedLength = unformatWithPattern(\n      event.clipboardData.getData('Text'),\n      displayPattern,\n    ).length;\n\n    this.setState({ triggerType: 'Paste', pastedLength });\n  };\n\n  handleOnCut: React.ClipboardEventHandler<HTMLTextElement> = () => {\n    this.setState({ triggerType: 'Cut' });\n  };\n\n  isKeyAllowed = (action: EventType | string) => {\n    const { displayPattern } = this.props;\n    const symbolsInPattern = displayPattern.split('').filter((character) => character !== '*');\n\n    return !symbolsInPattern.includes(action);\n  };\n\n  handleOnChange: React.ChangeEventHandler<HTMLTextElement> = (event) => {\n    const { historyNavigator, triggerType } = this.state;\n    const { displayPattern, onChange } = this.props;\n    const { value } = event.target;\n    let unformattedValue = unformatWithPattern(value, displayPattern);\n    const action = this.getUserAction(unformattedValue);\n    if (!this.isKeyAllowed(action) || triggerType === 'Undo' || triggerType === 'Redo') {\n      return;\n    }\n\n    if (action === 'Backspace' || action === 'Delete') {\n      unformattedValue = this.handleDelete(unformattedValue, action);\n    }\n\n    const newFormattedValue = formatWithPattern(unformattedValue, displayPattern);\n    historyNavigator.add(unformattedValue);\n\n    this.handleCursorPositioning(action);\n\n    this.setState({ value: newFormattedValue }, () => {\n      this.resetEvent();\n      if (onChange) {\n        const broadcastValue = unformatWithPattern(newFormattedValue, displayPattern);\n        onChange(broadcastValue);\n      }\n    });\n  };\n\n  handleOnBlur: React.FocusEventHandler<HTMLTextElement> = (event) => {\n    this.props.onBlur?.(unformatWithPattern(event.target.value, this.props.displayPattern));\n  };\n\n  handleOnFocus: React.FocusEventHandler<HTMLTextElement> = (event) => {\n    const { displayPattern, onFocus } = this.props;\n    if (onFocus) {\n      this.handleOnChange(event);\n      onFocus(unformatWithPattern(event.target.value, displayPattern));\n    }\n  };\n\n  handleDelete = (unformattedValue: string, action: EventType) => {\n    const { displayPattern } = this.props;\n    const { selectionStart, selectionEnd } = this.state;\n    const newStack = [...unformattedValue];\n    if (selectionStart === selectionEnd) {\n      let startPosition =\n        selectionStart - getCountOfSymbolsInSelection(0, selectionStart, displayPattern);\n      let toDelete = 0;\n\n      let count = getDistanceToNextSymbol(selectionStart, displayPattern);\n      if (action === 'Backspace') {\n        startPosition -= 1;\n        count = getDistanceToPreviousSymbol(selectionStart, displayPattern);\n      }\n\n      if (startPosition >= 0 && count) {\n        toDelete = 1;\n      }\n\n      newStack.splice(startPosition, toDelete);\n    }\n\n    return newStack.join('');\n  };\n\n  handleCursorPositioning = (action: string) => {\n    const { displayPattern } = this.props;\n    const { triggerEvent, selectionStart, selectionEnd, pastedLength } = this.state;\n    const target = triggerEvent?.currentTarget;\n\n    const cursorPosition = getCursorPositionAfterKeystroke(\n      action,\n      selectionStart,\n      selectionEnd,\n      displayPattern,\n      pastedLength,\n    );\n\n    setTimeout(() => {\n      target?.setSelectionRange(cursorPosition, cursorPosition);\n      this.setState({ selectionStart: cursorPosition, selectionEnd: cursorPosition });\n    }, 0);\n  };\n\n  render() {\n    const {\n      inputMode,\n      className,\n      id,\n      name,\n      placeholder,\n      readOnly,\n      required,\n      minLength,\n      maxLength,\n      disabled,\n      autoComplete,\n    } = this.props;\n    const { value } = this.state;\n    const renderProps: TextElementProps = {\n      inputMode,\n      className,\n      id,\n      name,\n      placeholder,\n      readOnly,\n      required,\n      minLength,\n      maxLength,\n      disabled,\n      autoComplete,\n      value,\n      onFocus: this.handleOnFocus,\n      onBlur: this.handleOnBlur,\n      onPaste: this.handleOnPaste,\n      onKeyDown: this.handleOnKeyDown,\n      onChange: this.handleOnChange,\n      onCut: this.handleOnCut,\n    };\n    return this.props.render(renderProps as T);\n  }\n}\n\nexport default WithDisplayFormat;\n"],"names":["WithDisplayFormat","React","Component","defaultProps","autoComplete","displayPattern","value","constructor","props","unformattedValue","unformatWithPattern","state","formatWithPattern","historyNavigator","HistoryNavigator","prevDisplayPattern","triggerType","triggerEvent","selectionStart","selectionEnd","pastedLength","getDerivedStateFromProps","unFormattedValue","reset","getUserAction","charCode","String","fromCharCode","which","toLowerCase","ctrlKey","metaKey","shiftKey","key","length","resetEvent","setState","detectUndoRedo","event","handleOnKeyDown","persist","currentTarget","newFormattedValue","undo","toString","redo","handleOnPaste","clipboardData","getData","handleOnCut","isKeyAllowed","action","symbolsInPattern","split","filter","character","includes","handleOnChange","onChange","target","handleDelete","add","handleCursorPositioning","broadcastValue","handleOnBlur","onBlur","handleOnFocus","onFocus","newStack","startPosition","getCountOfSymbolsInSelection","toDelete","count","getDistanceToNextSymbol","getDistanceToPreviousSymbol","splice","join","cursorPosition","getCursorPositionAfterKeystroke","setTimeout","setSelectionRange","render","inputMode","className","id","name","placeholder","readOnly","required","minLength","maxLength","disabled","renderProps","onPaste","onKeyDown","onCut"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.78.0",
+  "version": "46.79.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -91,8 +91,8 @@
     "rollup": "^4.18.1",
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
-    "@transferwise/less-config": "3.1.0",
     "@transferwise/neptune-css": "14.19.1",
+    "@transferwise/less-config": "3.1.0",
     "@wise/components-theming": "1.6.1"
   },
   "peerDependencies": {

package/src/button/Button.tsx

@@ -72,12 +72,9 @@ const Button = forwardRef<ButtonReferenceType, Props>(
   ) => {
     const intl = useIntl();
 
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     logDeprecationNotices({ size, type });
 
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     const newType = establishNewType(type);
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     const newPriority = establishNewPriority(priority, type);
 
     const classes = clsx(

package/src/button/legacyUtils/legacyUtils.ts

@@ -0,0 +1,74 @@
+import { ControlType, Priority, Size, Type } from '../../common';
+import { logActionRequired, logActionRequiredIf } from '../../utilities';
+
+const deprecatedTypeMap: Record<Type, ControlType> = {
+  [Type.PRIMARY]: ControlType.ACCENT,
+  [Type.SECONDARY]: ControlType.ACCENT,
+  [Type.LINK]: ControlType.ACCENT,
+  [Type.PAY]: ControlType.POSITIVE,
+  [Type.DANGER]: ControlType.NEGATIVE,
+};
+
+type OldTypeKeys = Type.DANGER | Type.LINK | Type.SECONDARY;
+const oldTypePriorityMap: Record<OldTypeKeys, Priority> = {
+  [Type.DANGER]: Priority.SECONDARY,
+  [Type.LINK]: Priority.TERTIARY,
+  [Type.SECONDARY]: Priority.SECONDARY,
+};
+
+const deprecatedTypeMapMessage = {
+  [Type.DANGER]: 'Type.NEGATIVE',
+  [Type.LINK]: 'ControlType.ACCENT with priority Priority.TERTIARY',
+  [Type.PAY]: 'ControlType.POSITIVE',
+  [Type.PRIMARY]: 'ControlType.ACCENT',
+  [Type.SECONDARY]: 'ControlType.ACCENT with priority Priority.SECONDARY',
+};
+
+const deprecatedTypes = Object.keys(deprecatedTypeMap);
+
+type EstablishNewTypeType = (
+  originalType: Type | (string & Record<never, never>) | null,
+) => `${ControlType}` | string | null;
+
+export const establishNewType: EstablishNewTypeType = (originalType) =>
+  originalType && originalType in deprecatedTypeMap
+    ? deprecatedTypeMap[originalType as Type]
+    : originalType;
+
+type EstablishNewPriorityType = (
+  originalPriority?: Priority | (string & Record<never, never>) | null,
+  originalType?: OldTypeKeys | (string & Record<never, never>) | null,
+) => `${ControlType}` | string | null | undefined;
+
+export const establishNewPriority: EstablishNewPriorityType = (originalPriority, originalType) => {
+  const type = originalType ? establishNewType(originalType) : '';
+
+  // The old SECONDARY and LINK types now map to priorities. If they're still using one of
+  // these old types, ignore whatever priority they've passed and use this instead.
+  if (originalType && originalType in oldTypePriorityMap) {
+    return oldTypePriorityMap[originalType as OldTypeKeys];
+  }
+  // Only ControlType.ACCENT supports tertiary styles
+  if (originalPriority === Priority.TERTIARY && type !== ControlType.ACCENT) {
+    return Priority.SECONDARY;
+  }
+  return originalPriority;
+};
+
+type DeprecatedTypeMapMessageType = keyof typeof deprecatedTypeMapMessage;
+type LogDeprecationNoticesType = (params: {
+  size: `${Size}`;
+  type: DeprecatedTypeMapMessageType | (string & Record<never, never>) | null;
+}) => void;
+export const logDeprecationNotices: LogDeprecationNoticesType = ({ size, type }) => {
+  logActionRequiredIf(
+    'Button has deprecated the `Size.EXTRA_SMALL` value for the `size` prop. Please use Size.SMALL instead.',
+    size === Size.EXTRA_SMALL,
+  );
+
+  if (type && deprecatedTypes.includes(type) && type in deprecatedTypeMapMessage) {
+    logActionRequired(
+      `Button has deprecated the ${type} value for the \`type\` prop. Please update to ${deprecatedTypeMapMessage[type as DeprecatedTypeMapMessageType]}.`,
+    );
+  }
+};

package/src/common/{fakeEvents.js → fakeEvents.ts}

@@ -4,7 +4,7 @@ export const fakeEvent = () => ({
   preventDefault() {},
 });
 
-export const fakeKeyDownEventForKey = (key) => ({
+export const fakeKeyDownEventForKey = (key: string) => ({
   ...fakeEvent(),
   key,
 });

package/src/common/hooks/useHasIntersected/{useHasIntersected.js → useHasIntersected.ts}

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 
-const ObserverParams = {
+const ObserverParams: IntersectionObserverInit = {
   threshold: 0.1,
 };
 
@@ -9,13 +9,19 @@ const ObserverParams = {
  * Use this custom hook to detect when an element has became visible inside the viewport. This hook checks only if the intersection happend.
  * Once the intersection has happened the hook will not return false even if the element gets out of the viewport.
  *
- * @param elRef.elRef
- * @param {object} [elRef] - node object that contains a react reference to the element that needs to be observed.
- * @param {strimng} [loading = 'eager'] - string that contains the type of loading.
+ * @param {object} params
+ * @param {object} [params.elRef] - node object that contains a react reference to the element that needs to be observed.
+ * @param {string} [params.loading = 'eager'] - string that contains the type of loading.
  * @param elRef.loading
  * @usage `const [hasIntersected] = useHasIntersected({imageRef,loading});`
  */
-export const useHasIntersected = ({ elRef, loading }) => {
+export const useHasIntersected = ({
+  elRef,
+  loading = 'eager',
+}: {
+  elRef: React.RefObject<HTMLElement>;
+  loading?: 'eager' | 'lazy';
+}) => {
   const [hasIntersected, setHasIntersected] = useState(false);
 
   const { current } = elRef || {};
@@ -24,29 +30,32 @@ export const useHasIntersected = ({ elRef, loading }) => {
     return elRef && current;
   };
 
-  const handleOnIntersect = (entries, observer) => {
+  const handleOnIntersect: IntersectionObserverCallback = (entries, observer) => {
     entries.forEach((entry) => {
       if (entry.isIntersecting) {
         setHasIntersected(true);
-        observer.unobserve(current);
+
+        if (current) {
+          observer.unobserve(current);
+        }
       }
     });
   };
 
   useEffect(() => {
-    let observer;
+    let observer: IntersectionObserver | undefined;
     let didCancel = false;
 
-    // Check if window is define for SSR and Old browsers fallback
+    // Check if window is defined for SSR and Old browsers fallback
     if (typeof window === 'undefined' || !window.IntersectionObserver || !isValidReference()) {
       setHasIntersected(true);
-    } else if (!didCancel) {
+    } else if (current && !didCancel) {
       observer = new IntersectionObserver(handleOnIntersect, ObserverParams);
       observer.observe(current);
     }
     return () => {
       didCancel = true;
-      if (observer) {
+      if (observer && current) {
         observer.unobserve(current);
       }
     };

package/src/flowNavigation/{FlowNavigation.story.js → FlowNavigation.story.tsx}

@@ -24,6 +24,10 @@ const avatarProfiles = {
   Business: <BriefcaseIcon />,
   Profile: <ProfileIcon />,
 };
+type ProfileTypeKeys = keyof typeof ProfileType;
+
+const getAvatarProfile = (showAvatar: string) =>
+  showAvatar in avatarProfiles ? avatarProfiles[showAvatar as keyof typeof avatarProfiles] : null;
 
 export const Variants = () => {
   const [activeStep, setActiveStep] = useState(2);
@@ -32,7 +36,11 @@ export const Variants = () => {
   const showCloseButton = boolean('show closeButton', true);
   const showMobileBackButton = boolean('show mobile backButton', true);
   const done = boolean('done', false);
-  const profileType = select('profileType', Object.keys(ProfileType));
+  const profileType: ProfileTypeKeys | undefined = select(
+    'profileType',
+    Object.keys(ProfileType) as ProfileTypeKeys[],
+    undefined,
+  );
   const avatarURL = text(
     'avatarURL',
     'https://wise.com/web-art/assets/illustrations/heart-small@2x.webp',
@@ -44,7 +52,7 @@ export const Variants = () => {
         avatar={
           !showAvatar ? null : (
             <Avatar type={AvatarType.ICON} size={Size.MEDIUM}>
-              {avatarProfiles[showAvatar]}
+              {getAvatarProfile(showAvatar)}
             </Avatar>
           )
         }
@@ -70,9 +78,11 @@ export const Variants = () => {
             onClick: () => setActiveStep(4),
           },
         ]}
-        onClose={showCloseButton && (() => setClosed(true))}
+        onClose={showCloseButton ? () => setClosed(true) : undefined}
         onGoBack={
-          showMobileBackButton && (() => setActiveStep(activeStep > 0 ? activeStep - 1 : 0))
+          showMobileBackButton
+            ? () => setActiveStep(activeStep > 0 ? activeStep - 1 : 0)
+            : undefined
         }
       />
 
@@ -112,9 +122,11 @@ export const Variants = () => {
             onClick: () => setActiveStep(4),
           },
         ]}
-        onClose={showCloseButton && (() => setClosed(true))}
+        onClose={showCloseButton ? () => setClosed(true) : undefined}
         onGoBack={
-          showMobileBackButton && (() => setActiveStep(activeStep - 1 > 0 ? activeStep - 1 : 0))
+          showMobileBackButton
+            ? () => setActiveStep(activeStep - 1 > 0 ? activeStep - 1 : 0)
+            : undefined
         }
       />
 
@@ -155,9 +167,11 @@ export const Variants = () => {
             onClick: () => setActiveStep(4),
           },
         ]}
-        onClose={showCloseButton && (() => setClosed(true))}
+        onClose={showCloseButton ? () => setClosed(true) : undefined}
         onGoBack={
-          showMobileBackButton && (() => setActiveStep(activeStep - 1 > 0 ? activeStep - 1 : 0))
+          showMobileBackButton
+            ? () => setActiveStep(activeStep - 1 > 0 ? activeStep - 1 : 0)
+            : undefined
         }
       />
 
@@ -171,9 +185,11 @@ export const Variants = () => {
           { label: 'Review', hoverLabel: 'Antonio Dozortevo', onClick: () => setActiveStep(1) },
           { label: 'Pay', hoverLabel: 'Enrico Gusso', onClick: () => setActiveStep(2) },
         ]}
-        onClose={showCloseButton && (() => setClosed(true))}
+        onClose={showCloseButton ? () => setClosed(true) : undefined}
         onGoBack={
-          showMobileBackButton && (() => setActiveStep(activeStep - 1 > 0 ? activeStep - 1 : 0))
+          showMobileBackButton
+            ? () => setActiveStep(activeStep - 1 > 0 ? activeStep - 1 : 0)
+            : undefined
         }
       />
 
@@ -216,7 +232,7 @@ export const SendFlow = () => {
       ...(activeStep > 3 && { onClick: handleStepClick(3) }),
     },
   ];
-  function handleStepClick(step) {
+  function handleStepClick(step: number) {
     return () => {
       setActiveStep(step);
     };
@@ -268,16 +284,18 @@ export const WithOverlayHeaderComparison = () => {
           avatar={
             showAvatar ? (
               <Avatar type={AvatarType.ICON} size={Size.MEDIUM}>
-                {avatarProfiles[showAvatar]}
+                {getAvatarProfile(showAvatar)}
               </Avatar>
             ) : null
           }
           activeStep={activeStep}
           done={done}
           steps={[]}
-          onClose={showCloseButton && (() => setClosed(true))}
+          onClose={showCloseButton ? () => setClosed(true) : undefined}
           onGoBack={
-            showMobileBackButton && (() => setActiveStep(activeStep > 0 ? activeStep - 1 : 0))
+            showMobileBackButton
+              ? () => setActiveStep(activeStep > 0 ? activeStep - 1 : 0)
+              : undefined
           }
         />
       </div>
@@ -286,11 +304,11 @@ export const WithOverlayHeaderComparison = () => {
           avatar={
             showAvatar ? (
               <Avatar type={AvatarType.ICON} size={Size.MEDIUM}>
-                {avatarProfiles[showAvatar]}
+                {getAvatarProfile(showAvatar)}
               </Avatar>
             ) : null
           }
-          onClose={showCloseButton && (() => setClosed(true))}
+          onClose={showCloseButton ? () => setClosed(true) : undefined}
         />
       </div>
     </>

package/src/index.ts

@@ -59,6 +59,7 @@ export type {
   MoneyInputProps,
 } from './moneyInput';
 export type { NavigationOptionListProps } from './navigationOptionsList';
+export type { NavigationOptionProps } from './navigationOption/NavigationOption';
 export type { OverlayHeaderProps } from './overlayHeader';
 export type { PanelProps } from './common/panel';
 export type { PhoneNumberInputProps } from './phoneNumberInput/PhoneNumberInput';

package/src/inputWithDisplayFormat/InputWithDisplayFormat.story.tsx

@@ -0,0 +1,78 @@
+import { userEvent, within, fn } from '@storybook/test';
+
+import InputWithDisplayFormat, { InputWithDisplayFormatProps } from '.';
+import { Field, FieldProps } from '../field/Field';
+import { Meta, type StoryObj } from '@storybook/react';
+
+type Story = StoryObj<InputWithDisplayFormatProps & { label: string }>;
+
+const meta = {
+  title: 'Forms/InputWithDisplayFormat',
+  component: InputWithDisplayFormat,
+  render: function Render({ label, ...args }: InputWithDisplayFormatProps & FieldProps) {
+    return (
+      <Field label={label} id={args.id}>
+        <InputWithDisplayFormat id={args.id} {...args} />
+      </Field>
+    );
+  },
+  args: {
+    onFocus: fn(),
+    onBlur: fn(),
+    onChange: fn(),
+  },
+} satisfies Meta<typeof InputWithDisplayFormat>;
+export default meta;
+
+export const Basic: Story = {
+  args: {
+    label: 'Sort Code',
+    placeholder: '**-**-**',
+    displayPattern: '**-**-**',
+  },
+};
+
+export const CardNumber: Story = {
+  args: {
+    label: 'Card Number',
+    placeholder: '**** **** **** **** ***',
+    displayPattern: '**** **** **** **** ***',
+  },
+};
+
+export const CVC: Story = {
+  args: {
+    label: 'CVC',
+    placeholder: '***',
+    displayPattern: '***',
+    value: '',
+  },
+};
+
+export const ExpiryDate: Story = {
+  args: {
+    label: 'Expiry Date',
+    placeholder: '** / **',
+    displayPattern: '** / **',
+  },
+};
+
+export const SecurityPin: Story = {
+  args: {
+    label: 'Security Pin',
+    placeholder: '*-*-*-*-*-*',
+    displayPattern: '*-*-*-*-*-*',
+  },
+};
+
+export const SecurityPinPlay: Story = {
+  args: {
+    label: 'Security Pin Play',
+    placeholder: '*-*-*-*-*-*',
+    displayPattern: '*-*-*-*-*-*',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.type(canvas.getByPlaceholderText('*-*-*-*-*-*'), '123456');
+  },
+};

package/src/navigationOption/{NavigationOption.story.js → NavigationOption.story.tsx}

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { action } from '@storybook/addon-actions';
 import { text, boolean } from '@storybook/addon-knobs';
 import {
@@ -19,8 +20,22 @@ export default {
   tags: ['autodocs'],
 };
 
-const Template = (props) => {
-  const href = text('href', props.href);
+type TemplateTypes = {
+  href?: string;
+  title?: string;
+  content?: string;
+  complex?: boolean;
+  disabled?: boolean;
+  showMediaAtAllSizes?: boolean;
+  showMediaCircle?: boolean;
+  isContainerAligned?: boolean;
+  className?: string;
+  hasTitleOnly?: boolean;
+  media?: ReactNode;
+};
+
+const Template = (props: TemplateTypes) => {
+  const href = text('href', props.href ?? '');
   const title = text('title', props.title ?? 'Navigation option');
   const content = text('content', props.content ?? 'Button and icon are vertically centered.');
   const complex = boolean('complex', props.complex ?? false);
@@ -28,7 +43,7 @@ const Template = (props) => {
   const showMediaAtAllSizes = boolean('showMediaAtAllSizes', props.showMediaAtAllSizes ?? false);
   const showMediaCircle = props.showMediaCircle ?? boolean('showMediaCircle', true);
   const isContainerAligned = boolean('isContainerAligned', false);
-  const className = text('className', props.className);
+  const className = text('className', props.className ?? '');
 
   return (
     <NavigationOption
@@ -140,7 +155,10 @@ export const Multiple = () => (
 
 export const WithIllustration = () => {
   return (
-    <Template media={<Illustration name={Assets.GLOBE} disablePadding />} showMediaCircle={false} />
+    <Template
+      media={<Illustration name={Assets.GLOBE} disablePadding alt="" />}
+      showMediaCircle={false}
+    />
   );
 };
 
@@ -166,7 +184,7 @@ export const WithContainerContent = () => (
   </>
 );
 
-const NavigationOptionTemplate = (props) => {
+const NavigationOptionTemplate = (props: TemplateTypes) => {
   const {
     href,
     title,

package/src/navigationOption/NavigationOption.tsx

@@ -6,7 +6,7 @@ import { Position } from '../common';
 import Option from '../common/Option';
 import { OptionProps, ReferenceType } from '../common/Option/Option';
 
-type NavigationOptionProps = OptionProps;
+export type NavigationOptionProps = OptionProps;
 
 const NavigationOption = forwardRef<ReferenceType, NavigationOptionProps>(
   ({ as: component = 'button', disabled = false, onClick, className, ...rest }, reference) => {