@transferwise/components 0.0.0-experimental-9f96230 → 0.0.0-experimental-9b505c9

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": "0.0.0-experimental-9f96230",
+  "version": "0.0.0-experimental-9b505c9",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -91,9 +91,9 @@
     "rollup": "^4.18.1",
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
-    "@transferwise/neptune-css": "14.19.1",
+    "@transferwise/less-config": "3.1.0",
     "@wise/components-theming": "1.6.1",
-    "@transferwise/less-config": "3.1.0"
+    "@transferwise/neptune-css": "14.19.1"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.13.1",

package/src/avatar/Avatar.css

@@ -2,17 +2,26 @@
 }@media (min-width: 768px) {
 }.tw-avatar {
   position: relative;
+  border-radius: 50%;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
   box-sizing: border-box;
 }.tw-avatar .tw-avatar__content {
+  align-items: center;
   background-color: rgba(134,167,189,0.10196);
   background-color: #86a7bd1a;
   background-color: var(--color-background-neutral);
+  border-radius: 50%;
+  color: #37517e;
+  color: var(--color-content-primary);
+  display: flex;
+  height: 100%;
+  justify-content: center;
   max-height: 100%;
   max-width: 100%;
   overflow: hidden;
+  width: 100%;
 }.tw-avatar--outlined {
   border: 1px solid #00a2dd;
   border: 1px solid var(--color-interactive-accent);
@@ -46,6 +55,10 @@
   font-feature-settings: "ss01";
   color: var(--color-dark-charcoal);
   line-height: 1;
+}.tw-avatar--24 {
+  min-width: 24px;
+  width: 24px;
+  height: 24px;
 }.tw-avatar--24.tw-avatar--emoji,
 .tw-avatar--24.tw-avatar--icon {
   font-size: 12px;
@@ -70,6 +83,10 @@
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
+}.tw-avatar--40 {
+  min-width: 40px;
+  width: 40px;
+  height: 40px;
 }.tw-avatar--40.tw-avatar--emoji,
 .tw-avatar--40.tw-avatar--icon {
   font-size: 20px;
@@ -94,6 +111,10 @@
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
+}.tw-avatar--48 {
+  min-width: 48px;
+  width: 48px;
+  height: 48px;
 }.tw-avatar--48.tw-avatar--emoji,
 .tw-avatar--48.tw-avatar--icon {
   font-size: 24px;
@@ -118,6 +139,10 @@
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
+}.tw-avatar--56 {
+  min-width: 56px;
+  width: 56px;
+  height: 56px;
 }.tw-avatar--56.tw-avatar--emoji,
 .tw-avatar--56.tw-avatar--icon {
   font-size: 28px;
@@ -142,6 +167,10 @@
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
+}.tw-avatar--72 {
+  min-width: 72px;
+  width: 72px;
+  height: 72px;
 }.tw-avatar--72.tw-avatar--emoji,
 .tw-avatar--72.tw-avatar--icon {
   font-size: 36px;

package/src/avatar/Avatar.less

@@ -10,15 +10,23 @@
 
 .tw-avatar {
   position: relative;
+  border-radius: 50%;
   user-select: none;
   box-sizing: border-box;
 
   & &__content {
+    align-items: center;
     background-color: #86a7bd1a;
     background-color: var(--color-background-neutral);
+    border-radius: 50%;
+    color: var(--color-content-primary);
+    display: flex;
+    height: 100%;
+    justify-content: center;
     max-height: 100%;
     max-width: 100%;
     overflow: hidden;
+    width: 100%;
   }
 
   &--outlined {
@@ -109,6 +117,10 @@
 .avatar-dimension(@avatar-size) {
   @mask-size: 2px;
 
+  min-width: @avatar-size;
+  width: @avatar-size;
+  height: @avatar-size;
+
   &.tw-avatar--emoji,
   &.tw-avatar--icon {
     font-size: @avatar-size * 0.5;

package/src/avatar/Avatar.tsx

@@ -65,9 +65,7 @@ const Avatar: React.FC<AvatarProps> = ({
   const size = backwardsCompatibleSize(sizeFromProps);
 
   return (
-    <Circle
-      size={size}
-      fixedSize
+    <div
       className={clsx('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {
         'tw-avatar--outlined': outlined,
         'tw-avatar--branded': Boolean(backgroundColorFromSeed),
@@ -75,17 +73,15 @@ const Avatar: React.FC<AvatarProps> = ({
       })}
       aria-label={ariaLabel}
     >
-      <Circle
-        size={size}
-        fixedSize
+      <div
         className="tw-avatar__content"
         style={{
           backgroundColor: backgroundColor || backgroundColorFromSeed,
         }}
       >
         {children}
-      </Circle>
-    </Circle>
+      </div>
+    </div>
   );
 };
 

package/src/avatarWrapper/__snapshots__/AvatarWrapper.spec.tsx.snap

@@ -2,12 +2,10 @@
 
 exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar with a name AND profileType AND avatar url renders the image 1`] = `
 <div
-  class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--thumbnail"
-  style="--circle-size: 48px;"
+  class="tw-avatar tw-avatar--48 tw-avatar--thumbnail"
 >
   <div
-    class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-    style="--circle-size: 48px;"
+    class="tw-avatar__content"
   >
     <img
       alt=""
@@ -19,12 +17,10 @@ exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar w
 
 exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar with a name AND profileType renders as BUSINESS profile type with an icon 1`] = `
 <div
-  class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--icon"
-  style="--circle-size: 48px;"
+  class="tw-avatar tw-avatar--48 tw-avatar--icon"
 >
   <div
-    class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-    style="--circle-size: 48px;"
+    class="tw-avatar__content"
   >
     <span
       class="tw-icon tw-icon-briefcase "
@@ -50,12 +46,10 @@ exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar w
 
 exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar with a name AND profileType renders as PERSONAL profile type with an icon 1`] = `
 <div
-  class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--icon"
-  style="--circle-size: 48px;"
+  class="tw-avatar tw-avatar--48 tw-avatar--icon"
 >
   <div
-    class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-    style="--circle-size: 48px;"
+    class="tw-avatar__content"
   >
     <span
       class="tw-icon tw-icon-person "
@@ -87,12 +81,10 @@ exports[`FlowNavigationAvatar with a name AND profileType with a badge url passe
     class="tw-badge__children"
   >
     <div
-      class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--icon"
-      style="--circle-size: 48px;"
+      class="tw-avatar tw-avatar--48 tw-avatar--icon"
     >
       <div
-        class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-        style="--circle-size: 48px;"
+        class="tw-avatar__content"
       >
         <span
           class="tw-icon tw-icon-person "
@@ -116,8 +108,7 @@ exports[`FlowNavigationAvatar with a name AND profileType with a badge url passe
     </div>
   </div>
   <div
-    class="np-circle d-flex align-items-center justify-content-center tw-badge__content"
-    style="--circle-size: 24px;"
+    class="tw-badge__content"
   >
     <img
       alt="badge alt text"
@@ -129,12 +120,10 @@ exports[`FlowNavigationAvatar with a name AND profileType with a badge url passe
 
 exports[`FlowNavigationAvatar with a name AND profileType with nothing passed renders a personal icon 1`] = `
 <div
-  class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--icon"
-  style="--circle-size: 48px;"
+  class="tw-avatar tw-avatar--48 tw-avatar--icon"
 >
   <div
-    class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-    style="--circle-size: 48px;"
+    class="tw-avatar__content"
   >
     <span
       class="tw-icon tw-icon-person "

package/src/badge/Badge.css

@@ -23,10 +23,16 @@
 }
 .tw-badge > .tw-badge__content {
   position: absolute;
+  width: var(--badge-size);
+  height: var(--badge-size);
   bottom: 0;
   right: 0;
   box-sizing: border-box;
+  border-radius: 50%;
   text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   overflow: hidden;
   -webkit-user-select: none;
      -moz-user-select: none;

package/src/badge/Badge.less

@@ -52,11 +52,17 @@
 
   & > &__content {
     position: absolute;
+    width: var(--badge-size);
+    height: var(--badge-size);
     bottom: 0;
     .right(0);
 
     box-sizing: border-box;
+    border-radius: 50%;
     text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     overflow: hidden;
     user-select: none;
 

package/src/badge/Badge.tsx

@@ -11,7 +11,6 @@ import {
   ThemeLight,
   CommonProps,
 } from '../common';
-import Circle, { CircleProps } from '../common/circle';
 
 /**
  * @deprecated Use `SizeSmall` or `SizeLarge` instead.
@@ -29,13 +28,6 @@ export type BadgeProps = {
   'aria-label'?: string;
 } & CommonProps;
 
-const mapLegacySize = {
-  [String(Size.SMALL)]: 16,
-  // medium is deprecated, so we map it to small
-  [String(Size.MEDIUM)]: 16,
-  [String(Size.LARGE)]: 24,
-} satisfies Record<string, CircleProps['size']>;
-
 const Badge = ({
   badge,
   className = undefined,
@@ -58,9 +50,7 @@ const Badge = ({
   return (
     <div aria-label={ariaLabel} className={classes}>
       <div className="tw-badge__children">{children}</div>
-      <Circle size={mapLegacySize[size]} fixedSize className="tw-badge__content">
-        {badge}
-      </Circle>
+      <div className="tw-badge__content">{badge}</div>
     </div>
   );
 };

package/src/circularButton/CircularButton.css

@@ -23,8 +23,8 @@
 }
 @media (max-width: 320px) {
   .np-circular-btn .tw-icon {
-    top: 8px;
-    top: var(--size-8);
+    top: 12px;
+    top: var(--size-12);
   }
 }
 .np-circular-btn .tw-icon > svg {

package/src/circularButton/CircularButton.less

@@ -19,7 +19,7 @@
     .left(0);
 
     @media (--screen-400-zoom) {
-      top: var(--size-8);
+      top: var(--size-12);
     }
 
     > svg {

package/src/circularButton/CircularButton.story.tsx

@@ -4,6 +4,7 @@ import { ControlType, Priority } from '../common';
 
 import { Meta, StoryObj } from '@storybook/react';
 import CircularButton from './CircularButton';
+import { storyConfig } from '../test-utils';
 
 export default {
   component: CircularButton,
@@ -64,3 +65,5 @@ export const All: Story = {
     );
   },
 };
+
+export const All400Zoom: Story = storyConfig(All, { variants: ['400%'] });

package/src/circularButton/CircularButton.tsx

@@ -38,7 +38,7 @@ const CircularButton = ({
         as="input"
         // @ts-expect-error it's input[type=button] element
         type="button"
-        size={isTinyViewport ? 64 : 56}
+        size={isTinyViewport ? 72 : 56}
         aria-label={children}
         className={classes}
         disabled={disabled}

package/src/circularButton/__snapshots__/CircularButton.spec.tsx.snap

@@ -8,7 +8,7 @@ exports[`CircularButton defaults renders a button of type accent and priority pr
     <input
       aria-label="Add money"
       class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-accent btn-priority-1"
-      style="--circle-size: var(--size-56);"
+      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
       type="button"
     />
     <span
@@ -46,7 +46,7 @@ exports[`CircularButton priorities renders primary buttons 1`] = `
     <input
       aria-label="Add money"
       class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-accent btn-priority-1"
-      style="--circle-size: var(--size-56);"
+      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
       type="button"
     />
     <span
@@ -84,7 +84,7 @@ exports[`CircularButton priorities renders primary buttons 2`] = `
     <input
       aria-label="Add money"
       class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-positive btn-priority-1"
-      style="--circle-size: var(--size-56);"
+      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
       type="button"
     />
     <span
@@ -122,7 +122,7 @@ exports[`CircularButton priorities renders primary buttons 3`] = `
     <input
       aria-label="Add money"
       class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-negative btn-priority-1"
-      style="--circle-size: var(--size-56);"
+      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
       type="button"
     />
     <span
@@ -160,7 +160,7 @@ exports[`CircularButton priorities renders secondary buttons 1`] = `
     <input
       aria-label="Add money"
       class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-accent btn-priority-2"
-      style="--circle-size: var(--size-56);"
+      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
       type="button"
     />
     <span
@@ -198,7 +198,7 @@ exports[`CircularButton priorities renders secondary buttons 2`] = `
     <input
       aria-label="Add money"
       class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-positive btn-priority-2"
-      style="--circle-size: var(--size-56);"
+      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
       type="button"
     />
     <span
@@ -236,7 +236,7 @@ exports[`CircularButton priorities renders secondary buttons 3`] = `
     <input
       aria-label="Add money"
       class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-negative btn-priority-2"
-      style="--circle-size: var(--size-56);"
+      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
       type="button"
     />
     <span
@@ -274,7 +274,7 @@ exports[`CircularButton types renders accent buttons 1`] = `
     <input
       aria-label="Add money"
       class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-accent btn-priority-1"
-      style="--circle-size: var(--size-56);"
+      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
       type="button"
     />
     <span
@@ -312,7 +312,7 @@ exports[`CircularButton types renders negative buttons 1`] = `
     <input
       aria-label="Add money"
       class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-negative btn-priority-1"
-      style="--circle-size: var(--size-56);"
+      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
       type="button"
     />
     <span
@@ -350,7 +350,7 @@ exports[`CircularButton types renders positive buttons 1`] = `
     <input
       aria-label="Add money"
       class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-positive btn-priority-1"
-      style="--circle-size: var(--size-56);"
+      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
       type="button"
     />
     <span

package/src/common/circle/Circle.css

@@ -5,3 +5,7 @@
   height: var(--circle-size);
   flex-shrink: 0;
 }
+.np-circle .tw-icon > svg {
+  height: var(--circle-icon-size);
+  width: var(--circle-icon-size);
+}

package/src/common/circle/Circle.less

@@ -3,4 +3,10 @@
   width: var(--circle-size);
   height: var(--circle-size);
   flex-shrink: 0;
+
+  // circle like components has custom icon sizes
+  .tw-icon > svg {
+    height: var(--circle-icon-size);
+    width: var(--circle-icon-size);
+  }
 }

package/src/common/circle/Circle.story.tsx

@@ -30,14 +30,14 @@ export const Sizes: Story = storyConfig(
   {
     render: () => {
       const content = <Profile size={16} />;
-      const sizes: CircleProps['size'][] = [32, 40, 48, 56, 72];
+      const sizes: CircleProps['size'][] = [16, 24, 32, 40, 48, 56, 72];
       return (
         <div
           style={{
             gap: '1em',
             display: 'grid',
             justifyContent: 'space-between',
-            gridTemplate: 'auto auto / repeat(5, min-content)',
+            gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
           }}
         >
           {sizes.map((size) => (

package/src/common/circle/Circle.tsx

@@ -1,7 +1,9 @@
 import { HTMLAttributes, forwardRef } from 'react';
 import { clsx } from 'clsx';
+import { useMedia } from '../hooks/useMedia';
+import { Breakpoint } from '../propsValues/breakpoint';
 
-export type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72;
+export type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 72;
 
 export type Props = {
   /**
@@ -19,6 +21,19 @@ export type Props = {
   fixedSize?: boolean;
 } & HTMLAttributes<HTMLDivElement>;
 
+/**
+ * circle like components has custom sizes for icons
+ */
+const MAP_ICON_SIZE = {
+  16: 12,
+  24: 16,
+  32: 18,
+  40: 20,
+  48: 24,
+  56: 28,
+  72: 36,
+};
+
 const Circle = forwardRef(function Circle(
   {
     as: Element = 'div',
@@ -31,11 +46,19 @@ const Circle = forwardRef(function Circle(
   }: Props,
   ref,
 ) {
+  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
   return (
     <Element
       {...props}
       ref={ref}
-      style={{ ...style, '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})` }}
+      style={{
+        '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`,
+        '--circle-icon-size':
+          isTinyViewport && !fixedSize
+            ? `${MAP_ICON_SIZE[size] / 2}px`
+            : `${MAP_ICON_SIZE[size]}px`,
+        ...style,
+      }}
       className={clsx('np-circle', 'd-flex align-items-center justify-content-center', className)}
     >
       {children}

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,
 });