npm - @transferwise/components - Versions diffs - 46.112.0 → 46.113.0 - Mend

@transferwise/components 46.112.0 → 46.113.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (137) hide show

package/build/withDisplayFormat/WithDisplayFormat.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"WithDisplayFormat.js","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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"}
1	+ {"version":3,"file":"WithDisplayFormat.js","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 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/build/withDisplayFormat/WithDisplayFormat.mjs CHANGED Viewed

@@ -211,7 +211,6 @@ class WithDisplayFormat extends React.Component {
       onFocus
     } = this.props;
     if (onFocus) {
-      this.handleOnChange(event);
       onFocus(unformatWithPattern(event.target.value, displayPattern));
     }
   };

package/build/withDisplayFormat/WithDisplayFormat.mjs.map CHANGED Viewed

	@@ -1 +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\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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"}
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 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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.112.0",
+  "version": "46.113.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -83,10 +83,11 @@
     "storybook": "^9.1.3",
     "storybook-addon-tag-badges": "^2.0.2",
     "storybook-addon-test-codegen": "^2.0.1",
+    "framer-motion": "^12.23.22",
     "@transferwise/less-config": "3.1.2",
-    "@transferwise/neptune-css": "14.25.0",
     "@wise/components-theming": "1.7.0",
-    "@wise/wds-configs": "0.0.0"
+    "@wise/wds-configs": "0.0.0",
+    "@transferwise/neptune-css": "14.25.1"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.22.4",
@@ -95,7 +96,13 @@
     "@wise/components-theming": "^1.6.2",
     "react": ">=18",
     "react-dom": ">=18",
-    "react-intl": "^5.10.0 || ^6 || ^7"
+    "react-intl": "^5.10.0 || ^6 || ^7",
+    "framer-motion": "^12.23.22"
+  },
+  "peerDependenciesMeta": {
+    "framer-motion": {
+      "optional": true
+    }
   },
   "dependencies": {
     "@babel/runtime": "^7.28.3",

package/src/expressiveMoneyInput/ExpressiveMoneyInput.autofocus.docs.mdx ADDED Viewed

@@ -0,0 +1,12 @@
+import { Meta, Canvas, Source } from '@storybook/addon-docs/blocks';
+import * as stories from './ExpressiveMoneyInput.story';
+<Meta title="Forms/ExpressiveMoneyInput/Autofocus" />
+# Autofocus
+Setting `autofocus` to `true` will automatically focus the amount input field when the component is mounted.
+> **Please note:** If this is enabled, and someone is navigating through the page via assistive technologies (e.g. keyboard), then they will skip any content beforehand and also may not have the currency selector announced (as it's placed before the money input). This can actually fail [WCAG 2.4.3](https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html) requirements in cases where the focused element isn't the first one. <br />Our recommendation is to only use this functionality sporadically and with careful consideration of the user experience.
+<Canvas of={stories.WithAutofocus} />

package/src/expressiveMoneyInput/ExpressiveMoneyInput.css ADDED Viewed

@@ -0,0 +1,58 @@
+.wds-amount-input-container {
+  width: 100%;
+}
+.wds-amount-input-input-container {
+  display: flex;
+  justify-content: right;
+  width: 100%;
+  transition: font-size 0.4s cubic-bezier(0.3, 0, 0.1, 1), height 0.4s cubic-bezier(0.3, 0, 0.1, 1), margin-top 0.4s cubic-bezier(0.3, 0, 0.1, 1), color 0.4s ease;
+  color: var(--color-interactive-primary);
+  overflow: hidden;
+  margin-bottom: 0 !important;
+}
+@media (prefers-reduced-motion: reduce) {
+  .wds-amount-input-input-container {
+    transition: none;
+  }
+}
+.wds-amount-input-input {
+  border: none;
+  outline: none;
+  flex-grow: 1;
+  text-align: right;
+  background-color: transparent;
+}
+.wds-amount-input-input:focus-visible {
+  outline: none;
+}
+.wds-amount-input-placeholder {
+  flex-grow: 0;
+  display: flex;
+  align-items: center;
+}
+.wds-currency-selector:disabled {
+  opacity: 1 !important;
+  cursor: auto !important;
+  cursor: initial !important;
+  mix-blend-mode: initial !important;
+}
+.wds-chevron-container {
+  width: 32px;
+  width: var(--size-32);
+  overflow: hidden;
+  color: var(--color-interactive-primary);
+  margin-left: 8px;
+  margin-left: var(--size-8);
+  transition: width 0.3s ease;
+}
+.wds-chevron-hidden {
+  width: 0;
+}
+.wds-expressive-money-input-currency-selector {
+  flex-shrink: 0;
+  margin-right: 24px;
+  margin-right: var(--size-24);
+}
+.wds-expressive-money-input-chevron {
+  transform: translateY(-5%);
+}

package/src/expressiveMoneyInput/ExpressiveMoneyInput.less ADDED Viewed

@@ -0,0 +1,13 @@
+@import "./amountInput/AmountInput.less";
+@import "./currencySelector/CurrencySelector.less";
+@import "./chevron/Chevron.less";
+.wds-expressive-money-input {
+  &-currency-selector {
+    flex-shrink: 0;
+    margin-right: var(--size-24);
+  }
+  &-chevron {
+    transform: translateY(-5%);
+  }
+}

package/src/expressiveMoneyInput/ExpressiveMoneyInput.messages.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import { defineMessages } from 'react-intl';
+export default defineMessages({
+  currencySelectorSearchPlaceholder: {
+    id: 'neptune.ExpressiveMoneyInput.currency.search.placeholder',
+    defaultMessage: 'Type a currency / country',
+  },
+  currencySelectorSelectCurrency: {
+    id: 'neptune.ExpressiveMoneyInput.currency.select.currency',
+    defaultMessage: 'Select currency',
+  },
+});

package/src/expressiveMoneyInput/ExpressiveMoneyInput.story.tsx ADDED Viewed

@@ -0,0 +1,232 @@
+/* eslint-disable jsx-a11y/anchor-is-valid, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
+import { Meta, StoryObj, Decorator } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
+import { Flag } from '@wise/art';
+import { Rewards, Tags } from '@transferwise/icons';
+import { storySourceWithoutNoise } from '../../.storybook/helpers';
+import { lorem10, lorem5 } from '../test-utils';
+import { Sentiment } from '../common';
+import Link from '../link';
+import Money from '../money';
+import React from 'react';
+import Button from '../button';
+import Modal from '../modal';
+import ListItem from '../listItem';
+import List from '../list';
+import ExpressiveMoneyInput, { Props as ExpressiveMoneyInputProps } from './ExpressiveMoneyInput';
+import type { Props as CurrencySelectorProps } from './currencySelector/CurrencySelector';
+const getCurrencySelectorProps = ({
+  logEvents = false,
+  secondAvatar = false,
+} = {}): Partial<CurrencySelectorProps> => ({
+  addons: secondAvatar ? [{ profileName: 'Mikkael Jordan' }] : undefined,
+  options: [
+    {
+      title: 'Popular',
+      currencies: [
+        { code: 'USD', label: 'US Dollar', keywords: ['dollar', 'us'] },
+        { code: 'AUD', label: 'Australia Dollar', keywords: ['dollar', 'us'] },
+      ],
+    },
+    {
+      title: 'Others',
+      currencies: [
+        { code: 'GBP', label: 'Pound', keywords: ['british'] },
+        { code: 'EUR', label: 'Euro', keywords: ['euro'] },
+      ],
+    },
+  ],
+  onOpen: logEvents ? fn() : () => {},
+  onSearchChange: logEvents ? fn() : (payload) => {},
+  onChange: logEvents ? fn() : (currency) => {},
+});
+const withScrollbarProtector: Decorator = (Story) => (
+  <>
+    <style>{`.docs-story > div {overflow-y:hidden;}`}</style>
+    <Story />
+  </>
+);
+export default {
+  title: 'Forms/ExpressiveMoneyInput',
+  component: ExpressiveMoneyInput,
+  tags: ['contribution'],
+  parameters: {
+    docs: {
+      toc: true,
+      canvas: {
+        sourceState: 'hidden',
+      },
+    },
+  },
+  args: {
+    label: 'You send',
+    currency: 'GBP',
+    amount: 1234.56,
+    currencySelector: getCurrencySelectorProps(),
+    loading: false,
+    inlinePrompt: { message: lorem10, sentiment: Sentiment.POSITIVE },
+    showChevron: false,
+    autoFocus: false,
+    onAmountChange: fn(),
+    onFocusChange: fn(),
+  },
+  decorators: [withScrollbarProtector],
+} satisfies Meta<ExpressiveMoneyInputProps>;
+type Story = StoryObj<ExpressiveMoneyInputProps>;
+export const Playground: Story = {
+  tags: ['!autodocs'],
+  render: (args: ExpressiveMoneyInputProps) => <ExpressiveMoneyInput {...args} />,
+};
+export const WithInitialAmount = {
+  args: {
+    amount: 1500,
+    inlinePrompt: undefined,
+  },
+};
+export const NullAmount = {
+  args: {
+    amount: null,
+    inlinePrompt: undefined,
+    currencySelector: getCurrencySelectorProps({ logEvents: true }),
+  },
+};
+export const WithLoading = {
+  args: {
+    loading: true,
+  },
+};
+/**
+ * The chevron should be visible only when the input is inactive
+ * and the current value is 0 or null.
+ */
+export const WithChevron = {
+  args: {
+    showChevron: true,
+    amount: 0,
+  },
+};
+export const WithBalanceText = storySourceWithoutNoise<ExpressiveMoneyInputProps>({
+  args: {
+    currencySelector: getCurrencySelectorProps({ logEvents: true }),
+  },
+  render: function Render(args: ExpressiveMoneyInputProps) {
+    const availableBalance = 1500;
+    const [sourceAmount, setSourceAmount] = React.useState(args.amount);
+    return (
+      <ExpressiveMoneyInput
+        {...args}
+        amount={sourceAmount}
+        inlinePrompt={{
+          message: (
+            <>
+              {`Available balance `}
+              <Link
+                onClick={() => {
+                  setSourceAmount(availableBalance);
+                }}
+              >
+                <Money amount={availableBalance} currency={args.currency} />
+              </Link>
+            </>
+          ),
+        }}
+      />
+    );
+  },
+});
+export const WithInlinePromptSentiment = {
+  render: (args: ExpressiveMoneyInputProps) => {
+    const inlinePrompts = [
+      { message: lorem5, sentiment: 'negative' },
+      { message: lorem5, sentiment: 'warning' },
+      { message: lorem5, sentiment: 'neutral' },
+      { message: lorem5, sentiment: 'positive' },
+      { message: lorem5, sentiment: 'positive', media: <Tags /> },
+      { message: lorem5, sentiment: 'proposition' },
+      { message: lorem5, sentiment: 'proposition', media: <Rewards /> },
+    ] as const;
+    return inlinePrompts.map((inlinePrompt, index) => (
+      <ExpressiveMoneyInput key={index} {...args} inlinePrompt={inlinePrompt} />
+    ));
+  },
+};
+export const WithSecondaryCurrencySelectorAvatar = {
+  args: {
+    currencySelector: getCurrencySelectorProps({ logEvents: true, secondAvatar: true }),
+  },
+};
+export const WithCustomCurrencySelector = {
+  render: (args: ExpressiveMoneyInputProps) => {
+    const [open, setOpen] = React.useState(false);
+    return (
+      <>
+        <ExpressiveMoneyInput
+          {...args}
+          currencySelector={{
+            customRender: ({ id, labelId }) => (
+              <Button
+                v2
+                size="sm"
+                priority="primary"
+                aria-describedby={labelId}
+                onClick={() => setOpen(true)}
+              >
+                Currency Selector
+              </Button>
+            ),
+          }}
+        />
+        <Modal
+          open={open}
+          title="Custom UX for currency selectors"
+          body={
+            <List>
+              <ListItem
+                media={
+                  <ListItem.AvatarView>
+                    <Flag code="gb" />
+                  </ListItem.AvatarView>
+                }
+                title="GBP"
+                control={<ListItem.Radio name="currency-key" checked={false} />}
+              />
+              <ListItem
+                media={
+                  <ListItem.AvatarView>
+                    <Flag code="au" />
+                  </ListItem.AvatarView>
+                }
+                title="AUD"
+                control={<ListItem.Radio name="currency-key" checked />}
+              />
+            </List>
+          }
+          onClose={() => setOpen(false)}
+        />
+      </>
+    );
+  },
+};
+export const WithAutofocus = {
+  tags: ['!autodocs', '!dev'],
+  args: {
+    inlinePrompt: undefined,
+    autoFocus: true,
+  },
+  render: (args: ExpressiveMoneyInputProps) => <ExpressiveMoneyInput {...args} />,
+};