npm - @transferwise/components - Versions diffs - 0.0.0-experimental-d6b038b → 0.0.0-experimental-c84454a - Mend

@transferwise/components 0.0.0-experimental-d6b038b → 0.0.0-experimental-c84454a

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 (480) 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> 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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"}
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> 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 /** @default '' /\n value?: string;\n /* @default '' /\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 * @default 'off'\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.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> 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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"}
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> 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 /** @default '' /\n value?: string;\n /* @default '' /\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 * @default 'off'\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": "0.0.0-experimental-d6b038b",
+  "version": "0.0.0-experimental-c84454a",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/accordion/Accordion.tsx CHANGED Viewed

@@ -5,13 +5,19 @@ import AccordionItem, { AccordionItemProps } from './AccordionItem';
 export type AccordionItem = Omit<AccordionItemProps, 'onClick' | 'open' | 'theme'>;
 export interface AccordionProps {
-  /** The index of the item that should be open by default. */
+  /**
+   * The index of the item that should be open by default.
+   * @default -1
+   */
   indexOpen?: number;
   /** An array of items to display in the accordion. */
   items: readonly AccordionItem[];
   /** A callback function that is called when an item is clicked. */
   onClick?: (index: number) => void;
-  /** @deprecated */
+  /**
+   * @deprecated
+   * @default 'light'
+   */
   theme?: 'light' | 'dark';
 }

package/src/actionButton/ActionButton.tsx CHANGED Viewed

@@ -4,18 +4,19 @@ import { ButtonHTMLAttributes, forwardRef } from 'react';
 import { Priority, PriorityPrimary, PrioritySecondary, PriorityTertiary } from '../common';
 /**
- * @deprecated use `<Button />` component instead with `ButtonProps`
+ * @deprecated Use `<Button />` component instead with `ButtonProps`.
  */
 export type ActionButtonProps = {
+  /** @default Priority.PRIMARY */
   priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;
   /**
-   * @deprecated use `children` instead
+   * @deprecated Use `children` instead.
    */
   text?: string;
 } & ButtonHTMLAttributes<HTMLButtonElement>;
 /**
- * @deprecated use `<Button v2 size="sm" priority={'primary' / 'secondary-neutral' / 'tertiary'} .. />` component instead
+ * @deprecated Use `<Button v2 size="sm" priority={'primary' / 'secondary-neutral' / 'tertiary'} .. />` component instead.
  */
 const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(
   (

package/src/actionOption/ActionOption.tsx CHANGED Viewed

@@ -36,7 +36,7 @@ export type ActionOptionProps = {
   AriaLabelProperty;
 /**
- * @deprecated Please use `<ListItem />` instead.
+ * @deprecated Use `<ListItem />` instead.
  * @deprecatedSince 46.104.0
  * @see [Source](../listItem/ListItem.tsx)
  * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)

package/src/alert/Alert.tsx CHANGED Viewed

@@ -78,7 +78,10 @@ export interface AlertProps {
   message?: string;
   /** The presence of the onDismiss handler will trigger the visibility of the close button */
   onDismiss?: React.MouseEventHandler<HTMLButtonElement>;
-  /** The type dictates which icon and colour will be used */
+  /**
+   * The type dictates which icon and colour will be used
+   * @default 'neutral'
+   */
   type?: AlertType;
   /** @deprecated Use `InlinePrompt` instead. */
   arrow?: `${AlertArrowPosition}`;
@@ -104,7 +107,7 @@ function resolveType(type: AlertType): AlertTypeResolved {
 }
 /**
- * @deprecated use [`InfoPrompt`](https://storybook.wise.design/?path=/docs/prompts-infoprompt--docs) component instead
+ * @deprecated Use [`InfoPrompt`](https://storybook.wise.design/?path=/docs/prompts-infoprompt--docs) component instead.
  */
 export default function Alert({
   action,

package/src/avatar/Avatar.tsx CHANGED Viewed

@@ -23,9 +23,13 @@ export interface AvatarProps {
   backgroundColorSeed?: string;
   children?: React.ReactNode;
   className?: string;
+  /** @default false */
   outlined?: boolean;
+  /** @default 48 */
   size?: AvatarSize;
+  /** @default 'light' */
   theme?: AvatarTheme;
+  /** @default 'thumbnail' */
   type?: AvatarType;
   'aria-label'?: string;
 }

package/src/avatarLayout/AvatarLayout.tsx CHANGED Viewed

@@ -8,11 +8,15 @@ type SingleAvatarType = { asset?: AvatarViewProps['children'] } & Omit<
 >;
 export type Props = {
+  /** @default [] */
   avatars: SingleAvatarType[];
+  /** @default 'horizontal' */
   orientation?: 'horizontal' | 'diagonal';
+  /** @default 48 */
+  size?: AvatarViewProps['size'];
 } & Pick<
   AvatarViewProps,
-  'size' | 'interactive' | 'className' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'
+  'interactive' | 'className' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'
 >;
 export default function AvatarLayout({

package/src/badge/Badge.tsx CHANGED Viewed

@@ -26,8 +26,10 @@ export type BadgeProps = {
   children: ReactNode;
   /**
    * `md` is deprecated, it will fallback to `sm` instead.
+   * @default 'sm'
    */
   size?: DeprecatedSizes | BadgeAssetsProps['size'];
+  /** @default 'light' */
   border?: ThemeDark | ThemeLight;
   'aria-label'?: string;
   style?: React.CSSProperties;

package/src/body/Body.tsx CHANGED Viewed

@@ -13,13 +13,9 @@ const bodyTypes = new Set<BodyTypes>([
 ]);
 type Props = HTMLAttributes<HTMLSpanElement | HTMLParagraphElement> & {
-  /**
-   * Default value: {@link DEFAULT_TYPE}
-   */
+  /** @default 'body-default' */
   type?: BodyTypes;
-  /**
-   * Default value: `div`
-   */
+  /** @default 'div' */
   as?: 'span' | 'p' | 'div';
   /**
    * When true, preserves newline characters in the text

package/src/button/Button.types.ts CHANGED Viewed

@@ -41,7 +41,10 @@ export interface CommonProps {
   /** @default false */
   loading?: boolean;
-  /** Makes the button take up the full width of its container */
+  /**
+   * Makes the button take up the full width of its container
+   * @default false
+   */
   block?: boolean;
   /**

package/src/button/LegacyButton.tsx CHANGED Viewed

@@ -31,7 +31,7 @@ type DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';
 type DeprecatedSizes = SizeExtraSmall;
 /**
- * @deprecated use new button instead APIs
+ * @deprecated Use new button instead of these APIs.
  * @example
  * ```
  * import { Button, ButtonProps } from '@transferwise/components';
@@ -68,7 +68,7 @@ export type CommonProps = {
 };
 /**
- * @deprecated use new button instead APIs
+ * @deprecated Use new button instead of APIs.
  * @example
  * ```
  * import { Button, ButtonProps } from '@transferwise/components';
@@ -87,7 +87,7 @@ type AnchorProps = CommonProps &
   };
 /**
- * @deprecated use new button instead APIs
+ * @deprecated Use new button instead of APIs.
  * @example
  * ```
  * import { Button, ButtonProps } from '@transferwise/components';
@@ -98,7 +98,7 @@ type AnchorProps = CommonProps &
 export type LegacyButtonProps = ButtonProps | AnchorProps;
 /**
- * @deprecated make sure you use new Button component via `<Button v2 .. />` and new props
+ * @deprecated Use new Button component via `<Button v2 .. />` and new props.
  */
 const LegacyButton = forwardRef<ButtonReferenceType, LegacyButtonProps>(
   (

package/src/card/Card.tsx CHANGED Viewed

@@ -8,6 +8,7 @@ import Option from '../common/Option';
 export interface CardProps {
   'aria-label'?: string;
+  /** @default 'div' */
   as?: React.ElementType;
   isExpanded?: boolean;
   title: React.ReactNode;

package/src/checkboxButton/CheckboxButton.tsx CHANGED Viewed

@@ -4,6 +4,7 @@ import { InputHTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef
 import { useInputAttributes } from '../inputs/contexts';
 export type CheckboxButtonProps = InputHTMLAttributes<HTMLInputElement> & {
+  /** @default false */
   indeterminate?: boolean;
 };

package/src/checkboxOption/CheckboxOption.tsx CHANGED Viewed

@@ -16,7 +16,7 @@ export type CheckboxOptionProps = Omit<BaseOptionProps, 'onChange'> & {
 };
 /**
- * @deprecated Please use `<ListItem />` instead.
+ * @deprecated Use `<ListItem />` instead.
  * @deprecatedSince 46.104.0
  * @see [Source](../listItem/ListItem.tsx)
  * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)

package/src/circularButton/CircularButton.tsx CHANGED Viewed

@@ -1,13 +1,12 @@
 import { clsx } from 'clsx';
 import Body from '../body/Body';
-import { typeClassMap, priorityClassMap } from '../button/classMap';
 import { Breakpoint, ControlType, Priority, Typography } from '../common';
 import IconButton, { IconButtonProps } from '../iconButton';
 import { useMedia } from '../common/hooks/useMedia';
 /**
- * @deprecated use `'default'` instead
+ * @deprecated Use `'default'` instead.
  */
 type DeprecatedTypes = `${ControlType.ACCENT | ControlType.POSITIVE}`;

package/src/common/propsValues/type.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 /**
- * @deprecated use `ControlType` and `Priority` enums instead
+ * @deprecated Use `ControlType` and `Priority` enums instead.
  */
 export enum Type {
   PRIMARY = 'primary',

package/src/common/propsValues/typography.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 export enum Typography {
   /**
-   * @deprecated use Marketing titles or {@link Typography.DISPLAY_LARGE} instead
+   * @deprecated Use Marketing titles or {@link Typography.DISPLAY_LARGE} instead.
    */
   DISPLAY_EXTRA_LARGE = 'display-extra-large',
   DISPLAY_LARGE = 'display-large',
@@ -24,7 +24,7 @@ export enum Typography {
 }
 /**
- * @deprecated use {@link Typography.DISPLAY_LARGE} instead
+ * @deprecated Use {@link Typography.DISPLAY_LARGE} instead.
  */
 export type DisplayExtraLarge = 'display-extra-large';
 export type DisplayLarge = 'display-large';

package/src/dateInput/DateInput.tsx CHANGED Viewed

@@ -27,7 +27,9 @@ export interface DateInputProps {
   /** @deprecated Use `Field` wrapper or the `aria-labelledby` attribute instead. */
   'aria-label'?: string;
   'aria-labelledby'?: string;
+  /** @default false */
   disabled?: boolean;
+  /** @default 'md' */
   size?: SizeSmall | SizeMedium | SizeLarge;
   value?: Date | string;
   onChange: (value: string | null) => void;
@@ -38,7 +40,9 @@ export interface DateInputProps {
   monthLabel?: string;
   yearLabel?: string;
   yearAutoComplete?: string;
+  /** @default 'long' */
   monthFormat?: `${MonthFormat}`;
+  /** @default 'day-month-year' */
   mode?: `${DateMode}`;
   placeholders?: {
     day?: string;
@@ -46,6 +50,7 @@ export interface DateInputProps {
     year?: string;
   };
   id?: string;
+  /** @default {} */
   selectProps?: Partial<SelectInputProps<number | null>>;
 }

package/src/dimmer/Dimmer.tsx CHANGED Viewed

@@ -23,12 +23,18 @@ const dimmerManager = new DimmerManager();
 export type DimmerProps = CommonProps & {
   children?: ReactNode;
+  /** @default false */
   disableClickToClose?: boolean;
   contentPosition?: PositionTop | PositionCenter | PositionBottom;
+  /** @default false */
   fadeContentOnEnter?: boolean;
+  /** @default false */
   fadeContentOnExit?: boolean;
+  /** @default false */
   open?: boolean;
+  /** @default false */
   scrollable?: boolean;
+  /** @default false */
   transparent?: boolean;
   onClose?: (event: KeyboardEvent | MouseEvent) => void;
   onExited?: () => void;

package/src/drawer/Drawer.tsx CHANGED Viewed

@@ -21,9 +21,15 @@ export type DrawerProps = {
   footerContent?: React.ReactNode;
   /** The content to appear in the drawer header. */
   headerTitle?: React.ReactNode;
-  /** The status of Drawer either open or not. */
+  /**
+   * The status of Drawer either open or not.
+   * @default false
+   */
   open?: boolean;
-  /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */
+  /**
+   * The placement of Drawer on the screen either left or right. On mobile it will default to bottom.
+   * @default 'right'
+   */
   position?: `${Position.LEFT | Position.RIGHT | Position.BOTTOM}`;
   /** The action to perform on close click. */
   onClose?: (event: KeyboardEvent | React.MouseEvent) => void;

package/src/field/Field.tsx CHANGED Viewed

@@ -16,8 +16,9 @@ export type FieldProps = {
   id?: string | null;
   /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */
   label?: React.ReactNode;
+  /** @default true */
   required?: boolean;
-  /** @deprecated use `description` prop instead */
+  /** @deprecated Use `description` prop instead. */
   hint?: React.ReactNode;
   message?: React.ReactNode;
   /**
@@ -27,11 +28,13 @@ export type FieldProps = {
   messageIconLabel?: string;
   /**
    * If true, shows a loading spinner in place of the message icon of the InlinePrompt
+   * @default false
    */
   messageLoading?: boolean;
   description?: React.ReactNode;
-  /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */
+  /** @deprecated Use `message` and `type={Sentiment.NEGATIVE}` prop instead. */
   error?: React.ReactNode;
+  /** @default Sentiment.NEUTRAL */
   sentiment?: InlinePromptProps['sentiment'];
   className?: string;
   children?: React.ReactNode;

package/src/flowNavigation/FlowNavigation.tsx CHANGED Viewed

@@ -14,9 +14,12 @@ import IconButton from '../iconButton';
 import { ArrowLeft } from '@transferwise/icons';
 export interface FlowNavigationProps {
+  /** @default 0 */
   activeStep?: number;
   avatar?: React.ReactNode;
+  /** @default <Logo /> */
   logo?: React.ReactNode;
+  /** @default false */
   done?: boolean;
   /** Called when the close button is clicked. If not provided the close button won't show */
   onClose?: () => void;

package/src/header/Header.tsx CHANGED Viewed

@@ -29,13 +29,17 @@ export interface HeaderProps extends CommonProps {
    *   If this condition is not met, a warning will be logged to the console.
    *
    * - Other valid values include standard heading tags (`h1` to `h6`) or `header`.
+   * @default 'h5'
    */
   as?: Heading | 'legend' | 'header';
   /** Required prop to set the title of the Header. */
   title: ReactNode;
-  /** Optional prop to specify the level of the Header */
+  /**
+   * Optional prop to specify the level of the Header
+   * @default 'group'
+   */
   level?: 'section' | 'group';
   className?: string;

package/src/iconButton/IconButton.tsx CHANGED Viewed

@@ -4,8 +4,11 @@ import Circle from '../common/circle';
 import { clsx } from 'clsx';
 export type Props = {
+  /** @default 48 */
   size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;
+  /** @default 'primary' */
   priority?: 'primary' | 'secondary' | 'tertiary' | 'minimal';
+  /** @default 'default' */
   type?: 'default' | 'negative';
   'data-testid'?: string;
 } & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick'> &

package/src/inputs/{SelectInput/_stories/SelectInput.docs.mdx → SelectInput.docs.mdx} RENAMED Viewed

@@ -1,4 +1,5 @@
 import { Meta } from '@storybook/addon-docs/blocks';
+import { MoneyInput } from '..';
 <Meta title="Forms/SelectInput/Accessibility" />