@transferwise/components 46.97.5 → 46.98.1

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      if (triggerType === 'Paste' || triggerType === 'Cut') {\n        return triggerType;\n      }\n\n      if ((triggerEvent.ctrlKey || triggerEvent.metaKey) && triggerEvent.key === 'z') {\n        return triggerEvent.shiftKey ? 'Redo' : 'Undo';\n      }\n\n      // Detect mouse event redo\n      if (triggerEvent.ctrlKey && triggerEvent.key === '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    if ((event.ctrlKey || event.metaKey) && event.key === '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","ctrlKey","metaKey","key","shiftKey","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      if (triggerType === 'Paste' || triggerType === 'Cut') {\n        return triggerType;\n      }\n\n      if ((triggerEvent.ctrlKey || triggerEvent.metaKey) && triggerEvent.key === 'z') {\n        return triggerEvent.shiftKey ? 'Redo' : 'Undo';\n      }\n\n      // Detect mouse event redo\n      if (triggerEvent.ctrlKey && triggerEvent.key === '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    if ((event.ctrlKey || event.metaKey) && event.key === '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\n    const cursorPosition = getCursorPositionAfterKeystroke(\n      action,\n      selectionStart,\n      selectionEnd,\n      displayPattern,\n      pastedLength,\n    );\n\n    setTimeout(() => {\n      if (triggerEvent) {\n        (triggerEvent.target as HTMLTextElement).setSelectionRange(cursorPosition, cursorPosition);\n      }\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","ctrlKey","metaKey","key","shiftKey","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.97.5",
+  "version": "46.98.1",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -38,16 +38,15 @@
     "!**/*.tsbuildinfo"
   ],
   "devDependencies": {
-    "@babel/core": "^7.27.3",
-    "@babel/plugin-transform-runtime": "^7.27.3",
+    "@babel/core": "^7.27.4",
+    "@babel/plugin-transform-runtime": "^7.27.4",
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@cfaester/enzyme-adapter-react-18": "0.8.0",
     "@formatjs/cli": "^6.7.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-node-resolve": "^15.3.1",
     "@rollup/plugin-typescript": "^12.1.2",
     "@rollup/plugin-url": "^8.0.2",
     "@storybook/addon-a11y": "^8.6.14",
@@ -72,32 +71,30 @@
     "@tsconfig/recommended": "^1.0.8",
     "@types/babel__core": "^7.20.5",
     "@types/commonmark": "^0.27.9",
-    "@types/enzyme": "^3.10.19",
     "@types/jest": "^29.5.14",
     "@types/lodash": "4.17.17",
     "@types/lodash.clamp": "^4.0.9",
     "@types/lodash.debounce": "^4.0.9",
-    "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^18.3.23",
+    "@types/react-dom": "^18.3.7",
     "@types/react-transition-group": "4.4.12",
-    "@wise/art": "^2.21.1",
+    "@wise/art": "^2.21.2",
     "@wise/eslint-config": "^12.3.0",
     "babel-plugin-formatjs": "^10.5.38",
-    "enzyme": "^3.11.0",
     "eslint": "^9.27.0",
-    "gulp": "^5.0.0",
+    "gulp": "^5.0.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-fetch-mock": "^3.0.3",
     "lodash.times": "^4.3.2",
     "react-intl": "^7.1.11",
-    "rollup": "^4.41.1",
+    "rollup": "^4.42.0",
     "rollup-preserve-directives": "^1.1.3",
     "storybook": "^8.6.14",
-    "@transferwise/less-config": "3.1.2",
     "@transferwise/neptune-css": "14.24.4",
     "@wise/components-theming": "1.6.3",
-    "@wise/wds-configs": "0.0.0"
+    "@wise/wds-configs": "0.0.0",
+    "@transferwise/less-config": "3.1.2"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.22.0",
@@ -109,12 +106,12 @@
     "react-intl": "^5.10.0 || ^6"
   },
   "dependencies": {
-    "@babel/runtime": "^7.27.3",
+    "@babel/runtime": "^7.27.6",
     "@floating-ui/react": "^0.27.9",
     "@headlessui/react": "^1.7.19",
     "@popperjs/core": "^2.11.8",
-    "@react-aria/focus": "^3.20.3",
-    "@react-aria/overlays": "^3.27.1",
+    "@react-aria/focus": "^3.20.4",
+    "@react-aria/overlays": "^3.27.2",
     "@react-spring/web": "~10.0.1",
     "@transferwise/formatting": "^2.13.1",
     "@transferwise/neptune-validation": "^3.3.0",

package/src/alert/Alert.spec.tsx

@@ -461,4 +461,15 @@ describe('Alert', () => {
       expect(screen.getByText(message)).toBeInTheDocument();
     });
   });
+
+  it('should disable all focusable elements inside until announced', () => {
+    action = {
+      href: 'fluffykittens.com',
+      text: 'Learn more',
+    };
+    const { container } = render(<Alert action={action} message={message} onDismiss={jest.fn()} />);
+
+    expect(screen.getByText(action.text as string)).toHaveAttribute('tabIndex', '-1');
+    expect(container.querySelector('button')).toHaveAttribute('tabIndex', '-1');
+  });
 });

package/src/alert/Alert.story.tsx

@@ -39,6 +39,11 @@ export default {
     },
   },
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      toc: true,
+    },
+  },
 } satisfies Meta<typeof Alert>;
 
 type Story = StoryObj<typeof Alert>;
@@ -203,7 +208,9 @@ export const WithTitleAndLinkActionAndLongBody: Story = {
  * `aria-hidden` attribute,  which, in turn, initiates the announcements.
  *
  * **NB:** While this approach has no visual side-effects (e.g. layout
- * shift), it makes the Alert hidden from the assistive tech for 175ms.
+ * shift), it makes the Alert hidden from the assistive tech for 175ms,
+ * during which all nested [focusable components such as links and buttons
+ * are disabled](https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI).
  * It's our belief that such short pause between announcements is
  * negligible for the user.
  */
@@ -239,14 +246,21 @@ export const DynamicRender: Story = {
       </>
     );
   },
+  args: {
+    onDismiss: () => {},
+    action: {
+      href: '/',
+      text: 'Open',
+    },
+  },
   parameters: {
     docs: {
       source: {
         code: `
-function Render(args) {
-    const [isOneActive, setIsOneActive] = useState(false);
-    const [isTwoActive, setIsTwoActive] = useState(false);
-    const [value, setValue] = useState<string>();
+function MyComponent(alertProps) {
+  const [isOneActive, setIsOneActive] = useState(false);
+  const [isTwoActive, setIsTwoActive] = useState(false);
+  const [value, setValue] = useState<string>();
 
   return (
     <>
@@ -265,11 +279,11 @@ function Render(args) {
         />
       </Field>
       
-      {isOneActive && <Alert {...args}>This Alert has a simple trigger.</Alert>}
+      {isOneActive && (
+        <Alert message="This Alert has a simple trigger" {...alertProps} />
+      )}
       {isTwoActive && (
-        <Alert {...args} type={Sentiment.WARNING}>
-          This Alert has a complex trigger.
-        </Alert>
+        <Alert message="This Alert has a complex trigger." type={Sentiment.WARNING} {...alertProps} />
       )}
     </>
   );

package/src/alert/Alert.tsx

@@ -154,6 +154,12 @@ export default function Alert({
 
   const closeButtonReference = useRef<HTMLButtonElement>(null);
 
+  /**
+   * All focusable elements must be disabled until we announce the alert.
+   * @see https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI
+   */
+  const accessibleTabIndex = shouldAnnounce ? undefined : -1;
+
   return (
     <div
       role={resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status'}
@@ -211,6 +217,7 @@ export default function Alert({
                   target={action.target}
                   type={Typography.LINK_LARGE}
                   className="alert__action"
+                  tabIndex={accessibleTabIndex}
                   onClick={action.onClick}
                 >
                   {action.text}
@@ -223,6 +230,7 @@ export default function Alert({
                   aria-label={action['aria-label']}
                   priority="secondary-neutral"
                   className="alert__action"
+                  tabIndex={accessibleTabIndex}
                   onClick={action.onClick}
                 >
                   {action.text}
@@ -232,7 +240,12 @@ export default function Alert({
         </div>
         {onDismiss && (
           <div className="alert__close">
-            <CloseButton ref={closeButtonReference} size="xs" onClick={onDismiss} />
+            <CloseButton
+              ref={closeButtonReference}
+              size="xs"
+              tabIndex={accessibleTabIndex}
+              onClick={onDismiss}
+            />
           </div>
         )}
       </div>

package/src/circularButton/CircularButton.css

@@ -6,6 +6,7 @@
 }
 .np-circular-btn-primary-default .np-circular-btn-label,
 .np-circular-btn-secondary-default .np-circular-btn-label {
+  text-align: center;
   color: var(--color-interactive-primary);
 }
 .np-circular-btn-primary-default .np-circular-btn-label:not(.disabled):not(:disabled):hover,

package/src/circularButton/CircularButton.less

@@ -7,6 +7,7 @@
   &-primary-default,
   &-secondary-default {
     .np-circular-btn-label {
+      text-align: center;
       color: var(--color-interactive-primary);
       &:not(.disabled, :disabled):hover {
         color: var(--color-interactive-primary-hover);

package/src/circularButton/CircularButton.tests.story.tsx

@@ -0,0 +1,23 @@
+import { Freeze } from '@transferwise/icons';
+
+import { Meta, StoryObj } from '@storybook/react';
+import CircularButton from './CircularButton';
+
+export default {
+  component: CircularButton,
+  title: 'Actions/CircularButton/Tests',
+} satisfies Meta<typeof CircularButton>;
+
+type Story = StoryObj<typeof CircularButton>;
+
+export const CenteredText: Story = {
+  render: () => {
+    return (
+      <div style={{ maxWidth: '100px' }}>
+        <CircularButton priority="primary" type="default" icon={<Freeze />}>
+          Very long text for a circular button that will be centered
+        </CircularButton>
+      </div>
+    );
+  },
+};

package/src/common/closeButton/CloseButton.spec.tsx

@@ -1,4 +1,4 @@
-import { render } from '../../test-utils';
+import { render, screen } from '../../test-utils';
 
 import { CloseButton } from '.';
 
@@ -11,4 +11,16 @@ describe('CloseButton', () => {
   it(`renders as expected`, () => {
     expect(render(<CloseButton {...props} />).container).toMatchSnapshot();
   });
+
+  describe('tabIndex', () => {
+    it('should not have tabIndex by default', () => {
+      render(<CloseButton {...props} />);
+      expect(screen.getByRole('button')).not.toHaveAttribute('tabIndex');
+    });
+
+    it('should support tabIndex', () => {
+      render(<CloseButton {...props} tabIndex={0} />);
+      expect(screen.getByRole('button')).toHaveAttribute('tabIndex', '0');
+    });
+  });
 });

package/src/common/closeButton/CloseButton.tsx

@@ -15,6 +15,7 @@ export type CloseButtonProps = Pick<
   filled?: boolean;
   isDisabled?: boolean;
   testId?: string;
+  tabIndex?: number;
 };
 
 /**
@@ -29,6 +30,7 @@ export const CloseButton = forwardRef(function CloseButton(
     onClick,
     isDisabled,
     testId,
+    tabIndex,
   }: CloseButtonProps,
   reference: React.ForwardedRef<HTMLButtonElement | null>,
 ) {
@@ -55,6 +57,7 @@ export const CloseButton = forwardRef(function CloseButton(
       aria-disabled={isDisabled}
       disabled={isDisabled}
       data-testid={testId}
+      tabIndex={tabIndex}
       onClick={onClick}
     >
       <Icon size={size === Size.SMALL || size === Size.EXTRA_SMALL ? 16 : 24} />

package/src/dateInput/DateInput.css

@@ -1,3 +1,16 @@
 .tw-date label {
   width: 100%;
 }
+.tw-date .tw-date--year label {
+  margin-bottom: 0;
+}
+.tw-date .tw-date--year,
+.tw-date .tw-date--month,
+.tw-date .tw-date--day {
+  margin-bottom: 0;
+}
+@media (min-width: 576px) {
+  .np-theme-personal .tw-date label {
+    margin-bottom: 0;
+  }
+}

package/src/dateInput/DateInput.less

@@ -2,4 +2,24 @@
   label {
     width: 100%;
   }
+  .tw-date--year {
+    label {
+      margin-bottom: 0;
+    }
+  }
+  .tw-date--year,
+  .tw-date--month,
+  .tw-date--day {
+      margin-bottom: 0;
+  }
 }
+
+@media (--screen-sm) {
+  .np-theme-personal {
+    .tw-date {
+      label {
+        margin-bottom: 0;
+      }
+    }
+  }
+}

package/src/dateInput/DateInput.tests.story.tsx

@@ -48,11 +48,22 @@ export const WithLabel: Story = {
 };
 
 export const InputError: Story = {
-  ...Basic,
   render: (args) => (
-    <Field sentiment="negative" message={lorem10}>
+    <>
+      pure date input:
       <DateInput {...args} value={new Date('2010-04-05')} />
-    </Field>
+      <div className="p-b-3">show padding right below</div>
+      date input wrapped in Field:
+      <Field>
+        <DateInput {...args} value={new Date('2010-04-05')} />
+      </Field>
+      <div className="p-b-3">show padding right below</div>
+      error date input wrapped in Field:
+      <Field sentiment="negative" message={lorem10}>
+        <DateInput {...args} value={new Date('2010-04-05')} />
+      </Field>
+      <div className="p-b-3">show padding right below</div>
+    </>
   ),
 };
 

package/src/dateInput/DateInput.tsx

@@ -242,8 +242,8 @@ const DateInput = ({
   const monthYearOnly = mode === DateMode.MONTH_YEAR;
 
   const monthWidth = clsx({
-    'col-sm-8': monthYearOnly,
-    'col-sm-5': !monthYearOnly,
+    'col-sm-8 tw-date--month': monthYearOnly,
+    'col-sm-5 tw-date--month': !monthYearOnly,
   });
 
   const getMonth = () => {
@@ -252,7 +252,7 @@ const DateInput = ({
 
   const getDay = () => {
     return (
-      <div className="col-sm-3">
+      <div className="col-sm-3 tw-date--day">
         <label>
           <Body type={Typography.BODY_DEFAULT}>{dayLabel}</Body>
           <div className={`input-group input-group-${size}`}>
@@ -279,7 +279,7 @@ const DateInput = ({
 
   const getYear = () => {
     return (
-      <div className="col-sm-4">
+      <div className="col-sm-4 tw-date--year">
         <label>
           <Body type={Typography.BODY_DEFAULT}>{yearLabel}</Body>
           <div className={`input-group input-group-${size}`}>

package/src/i18n/cs.json

@@ -21,12 +21,13 @@
   "neptune.Label.optional": "(Volitelné)",
   "neptune.Link.opensInNewTab": "(otevře se v nové kartě)",
   "neptune.MoneyInput.Select.placeholder": "Vybrat možnost...",
+  "neptune.MoneyInput.Select.searchPlaceholder": "Napište měnu nebo zemi",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Vybrat měnu",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Vybrat možnost...",
+  "neptune.PhoneNumberInput.countryCodeLabel": "Kód země",
+  "neptune.PhoneNumberInput.phoneNumberLabel": "Telefonní číslo",
   "neptune.Select.searchPlaceholder": "Hledat...",
   "neptune.SelectInput.noResultsFound": "Nebyly nalezeny žádné výsledky",
-  "neptune.SelectOption.action.label": "Vybrat",
-  "neptune.SelectOption.selected.action.label": "Změnit zvolenou možnost",
   "neptune.StatusIcon.iconLabel.error": "Chyba:",
   "neptune.StatusIcon.iconLabel.information": "Informace:",
   "neptune.StatusIcon.iconLabel.pending": "Vyřizuje se:",

package/src/i18n/de.json

@@ -21,12 +21,13 @@
   "neptune.Label.optional": "(Optional)",
   "neptune.Link.opensInNewTab": "(wird in einem neuen Tab geöffnet)",
   "neptune.MoneyInput.Select.placeholder": "Wähle eine der Möglichkeiten aus...",
+  "neptune.MoneyInput.Select.searchPlaceholder": "Gib eine Währung oder ein Land ein",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Wähle eine Währung",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Wähle eine Option...",
+  "neptune.PhoneNumberInput.countryCodeLabel": "Ländercode",
+  "neptune.PhoneNumberInput.phoneNumberLabel": "Telefonnummer",
   "neptune.Select.searchPlaceholder": "Wird gesucht...",
   "neptune.SelectInput.noResultsFound": "Keine Ergebnisse gefunden",
-  "neptune.SelectOption.action.label": "Auswählen",
-  "neptune.SelectOption.selected.action.label": "Ausgewählte Option ändern",
   "neptune.StatusIcon.iconLabel.error": "Fehler:",
   "neptune.StatusIcon.iconLabel.information": "Auskünfte:",
   "neptune.StatusIcon.iconLabel.pending": "Ausstehend:",

package/src/i18n/en.json

@@ -21,12 +21,13 @@
   "neptune.Label.optional": "(Optional)",
   "neptune.Link.opensInNewTab": "(opens in new tab)",
   "neptune.MoneyInput.Select.placeholder": "Select an option...",
+  "neptune.MoneyInput.Select.searchPlaceholder": "Type a currency or country",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Select currency",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Select an option...",
+  "neptune.PhoneNumberInput.countryCodeLabel": "Country code",
+  "neptune.PhoneNumberInput.phoneNumberLabel": "Phone number",
   "neptune.Select.searchPlaceholder": "Search...",
   "neptune.SelectInput.noResultsFound": "No results found",
-  "neptune.SelectOption.action.label": "Choose",
-  "neptune.SelectOption.selected.action.label": "Change chosen option",
   "neptune.StatusIcon.iconLabel.error": "Error:",
   "neptune.StatusIcon.iconLabel.information": "Information:",
   "neptune.StatusIcon.iconLabel.pending": "Pending:",

package/src/i18n/es.json

@@ -21,12 +21,13 @@
   "neptune.Label.optional": "(Opcional)",
   "neptune.Link.opensInNewTab": "(se abre en una pestaña nueva)",
   "neptune.MoneyInput.Select.placeholder": "Selecciona una opción...",
+  "neptune.MoneyInput.Select.searchPlaceholder": "Indica una divisa o país",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Selecciona una divisa",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Selecciona una opción...",
+  "neptune.PhoneNumberInput.countryCodeLabel": "Código de país",
+  "neptune.PhoneNumberInput.phoneNumberLabel": "Número de teléfono",
   "neptune.Select.searchPlaceholder": "Buscar...",
   "neptune.SelectInput.noResultsFound": "No se han encontrado resultados",
-  "neptune.SelectOption.action.label": "Elegir",
-  "neptune.SelectOption.selected.action.label": "Cambiar opción elegida",
   "neptune.StatusIcon.iconLabel.error": "Error:",
   "neptune.StatusIcon.iconLabel.information": "Información:",
   "neptune.StatusIcon.iconLabel.pending": "Pendiente:",

package/src/i18n/fr.json

@@ -21,12 +21,13 @@
   "neptune.Label.optional": "(facultatif)",
   "neptune.Link.opensInNewTab": "(ouvre dans un nouvel onglet)",
   "neptune.MoneyInput.Select.placeholder": "Sélectionner une option...",
+  "neptune.MoneyInput.Select.searchPlaceholder": "Saisissez une devise ou un pays",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Sélectionnez une devise",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Sélectionnez une option…",
+  "neptune.PhoneNumberInput.countryCodeLabel": "Code pays",
+  "neptune.PhoneNumberInput.phoneNumberLabel": "Numéro de téléphone",
   "neptune.Select.searchPlaceholder": "Recherche...",
   "neptune.SelectInput.noResultsFound": "Aucun résultat trouvé",
-  "neptune.SelectOption.action.label": "Sélectionner",
-  "neptune.SelectOption.selected.action.label": "Modifier l'option choisie",
   "neptune.StatusIcon.iconLabel.error": "Erreur :",
   "neptune.StatusIcon.iconLabel.information": "Informations :",
   "neptune.StatusIcon.iconLabel.pending": "En attente :",

package/src/i18n/hu.json

@@ -21,12 +21,13 @@
   "neptune.Label.optional": "(Válaszható)",
   "neptune.Link.opensInNewTab": "(új lapon nyílik meg)",
   "neptune.MoneyInput.Select.placeholder": "Válassz ki egy lehetőséget...",
+  "neptune.MoneyInput.Select.searchPlaceholder": "Írj be egy pénznemet vagy országot",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Pénznem kiválasztása",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Válassz ki egy lehetőséget...",
+  "neptune.PhoneNumberInput.countryCodeLabel": "Országazonosító",
+  "neptune.PhoneNumberInput.phoneNumberLabel": "Telefonszám",
   "neptune.Select.searchPlaceholder": "Keresés...",
   "neptune.SelectInput.noResultsFound": "Nincs találat",
-  "neptune.SelectOption.action.label": "Kiválasztás",
-  "neptune.SelectOption.selected.action.label": "Kiválasztott opció módosítása",
   "neptune.StatusIcon.iconLabel.error": "Hiba:",
   "neptune.StatusIcon.iconLabel.information": "Információ:",
   "neptune.StatusIcon.iconLabel.pending": "Függőben:",

package/src/i18n/id.json

@@ -21,12 +21,13 @@
   "neptune.Label.optional": "(Opsional)",
   "neptune.Link.opensInNewTab": "(terbuka di tab baru)",
   "neptune.MoneyInput.Select.placeholder": "Pilih opsi...",
+  "neptune.MoneyInput.Select.searchPlaceholder": "Ketik nama mata uang atau negara",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Pilih mata uang",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Pilih opsi...",
+  "neptune.PhoneNumberInput.countryCodeLabel": "Kode negara",
+  "neptune.PhoneNumberInput.phoneNumberLabel": "Nomor telepon",
   "neptune.Select.searchPlaceholder": "Cari...",
   "neptune.SelectInput.noResultsFound": "Hasil tidak ditemukan",
-  "neptune.SelectOption.action.label": "Pilih",
-  "neptune.SelectOption.selected.action.label": "Ubah opsi yang dipilih",
   "neptune.StatusIcon.iconLabel.error": "Kesalahan:",
   "neptune.StatusIcon.iconLabel.information": "Informasi:",
   "neptune.StatusIcon.iconLabel.pending": "Tertunda:",

package/src/i18n/it.json

@@ -21,12 +21,13 @@
   "neptune.Label.optional": "(Facoltativo)",
   "neptune.Link.opensInNewTab": "(si apre in una nuova scheda)",
   "neptune.MoneyInput.Select.placeholder": "Seleziona un'opzione...",
+  "neptune.MoneyInput.Select.searchPlaceholder": "Inserisci una valuta o un paese",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Scegli la valuta",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Seleziona un'opzione...",
+  "neptune.PhoneNumberInput.countryCodeLabel": "Prefisso",
+  "neptune.PhoneNumberInput.phoneNumberLabel": "Numero di telefono",
   "neptune.Select.searchPlaceholder": "Cerca...",
   "neptune.SelectInput.noResultsFound": "Nessun risultato trovato",
-  "neptune.SelectOption.action.label": "Scegli",
-  "neptune.SelectOption.selected.action.label": "Modifica l'opzione scelta",
   "neptune.StatusIcon.iconLabel.error": "Errore:",
   "neptune.StatusIcon.iconLabel.information": "Informazioni:",
   "neptune.StatusIcon.iconLabel.pending": "In attesa:",