npm - @transferwise/components - Versions diffs - 0.0.0-experimental-8a15907 → 0.0.0-experimental-118c6ed - Mend

@transferwise/components 0.0.0-experimental-8a15907 → 0.0.0-experimental-118c6ed

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 (502) 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,MAAMA,iBAA8C,SAAQC,gBAAK,CAACC,SAGjE,CAAA;AAGC,EAAA,OAAOC,YAAY,GAAG;AACpBC,IAAAA,YAAY,EAAE,KAAK;AACnBC,IAAAA,cAAc,EAAE,EAAE;AAClBC,IAAAA,KAAK,EAAE;GACR;EAEDC,WAAAA,CAAYC,KAA6B,EAAA;IACvC,KAAK,CAACA,KAAK,CAAC;AACZ,IAAA,MAAMC,gBAAgB,GAAGC,2BAAmB,CAACF,KAAK,CAACF,KAAK,IAAI,EAAE,EAAEE,KAAK,CAACH,cAAc,CAAC;IACrF,IAAI,CAACM,KAAK,GAAG;MACXL,KAAK,EAAEM,yBAAiB,CAACH,gBAAgB,EAAED,KAAK,CAACH,cAAc,CAAC;AAChEQ,MAAAA,gBAAgB,EAAE,IAAIC,wBAAgB,EAAE;MACxCC,kBAAkB,EAAEP,KAAK,CAACH,cAAc;AACxCW,MAAAA,WAAW,EAAE,SAAS;AACtBC,MAAAA,YAAY,EAAE,IAAI;AAClBC,MAAAA,cAAc,EAAE,CAAC;AACjBC,MAAAA,YAAY,EAAE,CAAC;AACfC,MAAAA,YAAY,EAAE;KACf;AACH;AAEA,EAAA,OAAOC,wBAAwBA,CAC7B;AAAEhB,IAAAA;AAAwC,GAAA,EAC1C;AAAEU,IAAAA,kBAAkB,GAAGV,cAAc;IAAEC,KAAK;AAAEO,IAAAA;AAA0C,GAAA,EAAA;IAExF,IAAIE,kBAAkB,KAAKV,cAAc,EAAE;AACzC,MAAA,MAAMiB,gBAAgB,GAAGZ,2BAAmB,CAACJ,KAAK,EAAES,kBAAkB,CAAC;MACvEF,gBAAgB,CAACU,KAAK,EAAE;MAExB,OAAO;AACLR,QAAAA,kBAAkB,EAAEV,cAAc;AAClCC,QAAAA,KAAK,EAAEM,yBAAiB,CAACU,gBAAgB,EAAEjB,cAAc,CAAC;AAC1DW,QAAAA,WAAW,EAAE,IAAI;AACjBC,QAAAA,YAAY,EAAE,IAAI;AAClBG,QAAAA,YAAY,EAAE;OACf;AACH;AACA,IAAA,OAAO,IAAI;AACb;EAEAI,aAAa,GAAIf,gBAAwB,IAAwB;IAC/D,MAAM;MAAEQ,YAAY;MAAED,WAAW;AAAEV,MAAAA;KAAO,GAAG,IAAI,CAACK,KAAK;IACvD,MAAM;AAAEN,MAAAA;KAAgB,GAAG,IAAI,CAACG,KAAK;AAErC,IAAA,IAAIS,YAAY,EAAE;AAChB,MAAA,IAAID,WAAW,KAAK,OAAO,IAAIA,WAAW,KAAK,KAAK,EAAE;AACpD,QAAA,OAAOA,WAAW;AACpB;AAEA,MAAA,IAAI,CAACC,YAAY,CAACQ,OAAO,IAAIR,YAAY,CAACS,OAAO,KAAKT,YAAY,CAACU,GAAG,KAAK,GAAG,EAAE;AAC9E,QAAA,OAAOV,YAAY,CAACW,QAAQ,GAAG,MAAM,GAAG,MAAM;AAChD;AAEA;MACA,IAAIX,YAAY,CAACQ,OAAO,IAAIR,YAAY,CAACU,GAAG,KAAK,GAAG,EAAE;AACpD,QAAA,OAAO,QAAQ;AACjB;AAEA;AACA,MAAA,IACE,OAAOV,YAAY,CAACU,GAAG,KAAK,WAAW,IACvClB,gBAAgB,CAACoB,MAAM,IAAInB,2BAAmB,CAACJ,KAAK,EAAED,cAAc,CAAC,CAACwB,MAAM,EAC5E;AACA,QAAA,OAAO,WAAW;AACpB;MACA,OAAOZ,YAAY,CAACU,GAAG;AACzB;AACA;AACA,IAAA,OAAO,OAAO;GACf;EAEDG,UAAU,GAAGA,MAAK;IAChB,IAAI,CAACC,QAAQ,CAAC;AACZf,MAAAA,WAAW,EAAE,SAAS;AACtBC,MAAAA,YAAY,EAAE,IAAI;AAClBG,MAAAA,YAAY,EAAE;AACf,KAAA,CAAC;GACH;EAEDY,cAAc,GAAIC,KAA2C,IAAI;AAC/D,IAAA,IAAI,CAACA,KAAK,CAACR,OAAO,IAAIQ,KAAK,CAACP,OAAO,KAAKO,KAAK,CAACN,GAAG,KAAK,GAAG,EAAE;AACzD,MAAA,OAAOM,KAAK,CAACL,QAAQ,GAAG,MAAM,GAAG,MAAM;AACzC;AACA,IAAA,OAAO,IAAI;GACZ;EAEDM,eAAe,GAAiDD,KAAK,IAAI;IACvEA,KAAK,CAACE,OAAO,EAAE;IACf,MAAM;MAAEjB,cAAc;AAAEC,MAAAA;KAAc,GAAGc,KAAK,CAACG,aAAa;IAC5D,MAAM;AAAEvB,MAAAA;KAAkB,GAAG,IAAI,CAACF,KAAK;IACvC,MAAM;AAAEN,MAAAA;KAAgB,GAAG,IAAI,CAACG,KAAK;AAErC;IACA,IAAI6B,iBAAiB,GAAG,EAAE;IAE1B,IAAI,IAAI,CAACL,cAAc,CAACC,KAAK,CAAC,KAAK,MAAM,EAAE;AACzCI,MAAAA,iBAAiB,GAAGzB,yBAAiB,CAACC,gBAAgB,CAACyB,IAAI,EAAE,CAACC,QAAQ,EAAE,EAAElC,cAAc,CAAC;MACzF,IAAI,CAAC0B,QAAQ,CAAC;AAAEzB,QAAAA,KAAK,EAAE+B,iBAAiB;AAAErB,QAAAA,WAAW,EAAE;AAAM,OAAE,CAAC;KACjE,MAAM,IAAI,IAAI,CAACgB,cAAc,CAACC,KAAK,CAAC,KAAK,MAAM,EAAE;AAChDI,MAAAA,iBAAiB,GAAGzB,yBAAiB,CAACC,gBAAgB,CAAC2B,IAAI,EAAE,CAACD,QAAQ,EAAE,EAAElC,cAAc,CAAC;MACzF,IAAI,CAAC0B,QAAQ,CAAC;AAAEzB,QAAAA,KAAK,EAAE+B,iBAAiB;AAAErB,QAAAA,WAAW,EAAE;AAAM,OAAE,CAAC;AAClE,KAAC,MAAM;MACL,IAAI,CAACe,QAAQ,CAAC;AACZd,QAAAA,YAAY,EAAEgB,KAAK;AACnBjB,QAAAA,WAAW,EAAE,SAAS;QACtBE,cAAc,EAAEA,cAAc,IAAI,CAAC;QACnCC,YAAY,EAAEA,YAAY,IAAI;AAC/B,OAAA,CAAC;AACJ;GACD;EAEDsB,aAAa,GAAkDR,KAAK,IAAI;IACtE,MAAM;AAAE5B,MAAAA;KAAgB,GAAG,IAAI,CAACG,KAAK;AACrC,IAAA,MAAMY,YAAY,GAAGV,2BAAmB,CACtCuB,KAAK,CAACS,aAAa,CAACC,OAAO,CAAC,MAAM,CAAC,EACnCtC,cAAc,CACf,CAACwB,MAAM;IAER,IAAI,CAACE,QAAQ,CAAC;AAAEf,MAAAA,WAAW,EAAE,OAAO;AAAEI,MAAAA;AAAc,KAAA,CAAC;GACtD;EAEDwB,WAAW,GAAiDA,MAAK;IAC/D,IAAI,CAACb,QAAQ,CAAC;AAAEf,MAAAA,WAAW,EAAE;AAAO,KAAA,CAAC;GACtC;EAED6B,YAAY,GAAIC,MAA0B,IAAI;IAC5C,MAAM;AAAEzC,MAAAA;KAAgB,GAAG,IAAI,CAACG,KAAK;AACrC,IAAA,MAAMuC,gBAAgB,GAAG1C,cAAc,CAAC2C,KAAK,CAAC,EAAE,CAAC,CAACC,MAAM,CAAEC,SAAS,IAAKA,SAAS,KAAK,GAAG,CAAC;AAE1F,IAAA,OAAO,CAACH,gBAAgB,CAACI,QAAQ,CAACL,MAAM,CAAC;GAC1C;EAEDM,cAAc,GAA+CnB,KAAK,IAAI;IACpE,MAAM;MAAEpB,gBAAgB;AAAEG,MAAAA;KAAa,GAAG,IAAI,CAACL,KAAK;IACpD,MAAM;MAAEN,cAAc;AAAEgD,MAAAA;KAAU,GAAG,IAAI,CAAC7C,KAAK;IAC/C,MAAM;AAAEF,MAAAA;KAAO,GAAG2B,KAAK,CAACqB,MAAM;AAC9B,IAAA,IAAI7C,gBAAgB,GAAGC,2BAAmB,CAACJ,KAAK,EAAED,cAAc,CAAC;AACjE,IAAA,MAAMyC,MAAM,GAAG,IAAI,CAACtB,aAAa,CAACf,gBAAgB,CAAC;AACnD,IAAA,IAAI,CAAC,IAAI,CAACoC,YAAY,CAACC,MAAM,CAAC,IAAI9B,WAAW,KAAK,MAAM,IAAIA,WAAW,KAAK,MAAM,EAAE;AAClF,MAAA;AACF;AAEA,IAAA,IAAI8B,MAAM,KAAK,WAAW,IAAIA,MAAM,KAAK,QAAQ,EAAE;MACjDrC,gBAAgB,GAAG,IAAI,CAAC8C,YAAY,CAAC9C,gBAAgB,EAAEqC,MAAM,CAAC;AAChE;AAEA,IAAA,MAAMT,iBAAiB,GAAGzB,yBAAiB,CAACH,gBAAgB,EAAEJ,cAAc,CAAC;AAC7EQ,IAAAA,gBAAgB,CAAC2C,GAAG,CAAC/C,gBAAgB,CAAC;AAEtC,IAAA,IAAI,CAACgD,uBAAuB,CAACX,MAAM,CAAC;IAEpC,IAAI,CAACf,QAAQ,CAAC;AAAEzB,MAAAA,KAAK,EAAE+B;AAAiB,KAAE,EAAE,MAAK;MAC/C,IAAI,CAACP,UAAU,EAAE;AACjB,MAAA,IAAIuB,QAAQ,EAAE;AACZ,QAAA,MAAMK,cAAc,GAAGhD,2BAAmB,CAAC2B,iBAAiB,EAAEhC,cAAc,CAAC;QAC7EgD,QAAQ,CAACK,cAAc,CAAC;AAC1B;AACF,KAAC,CAAC;GACH;EAEDC,YAAY,GAA8C1B,KAAK,IAAI;AACjE,IAAA,IAAI,CAACzB,KAAK,CAACoD,MAAM,GAAGlD,2BAAmB,CAACuB,KAAK,CAACqB,MAAM,CAAChD,KAAK,EAAE,IAAI,CAACE,KAAK,CAACH,cAAc,CAAC,CAAC;GACxF;EAEDwD,aAAa,GAA8C5B,KAAK,IAAI;IAClE,MAAM;MAAE5B,cAAc;AAAEyD,MAAAA;KAAS,GAAG,IAAI,CAACtD,KAAK;AAC9C,IAAA,IAAIsD,OAAO,EAAE;AACX,MAAA,IAAI,CAACV,cAAc,CAACnB,KAAK,CAAC;MAC1B6B,OAAO,CAACpD,2BAAmB,CAACuB,KAAK,CAACqB,MAAM,CAAChD,KAAK,EAAED,cAAc,CAAC,CAAC;AAClE;GACD;AAEDkD,EAAAA,YAAY,GAAGA,CAAC9C,gBAAwB,EAAEqC,MAAiB,KAAI;IAC7D,MAAM;AAAEzC,MAAAA;KAAgB,GAAG,IAAI,CAACG,KAAK;IACrC,MAAM;MAAEU,cAAc;AAAEC,MAAAA;KAAc,GAAG,IAAI,CAACR,KAAK;AACnD,IAAA,MAAMoD,QAAQ,GAAG,CAAC,GAAGtD,gBAAgB,CAAC;IACtC,IAAIS,cAAc,KAAKC,YAAY,EAAE;MACnC,IAAI6C,aAAa,GACf9C,cAAc,GAAG+C,oCAA4B,CAAC,CAAC,EAAE/C,cAAc,EAAEb,cAAc,CAAC;MAClF,IAAI6D,QAAQ,GAAG,CAAC;AAEhB,MAAA,IAAIC,KAAK,GAAGC,2CAAuB,CAAClD,cAAc,EAAEb,cAAc,CAAC;MACnE,IAAIyC,MAAM,KAAK,WAAW,EAAE;AAC1BkB,QAAAA,aAAa,IAAI,CAAC;AAClBG,QAAAA,KAAK,GAAGE,+CAA2B,CAACnD,cAAc,EAAEb,cAAc,CAAC;AACrE;AAEA,MAAA,IAAI2D,aAAa,IAAI,CAAC,IAAIG,KAAK,EAAE;AAC/BD,QAAAA,QAAQ,GAAG,CAAC;AACd;AAEAH,MAAAA,QAAQ,CAACO,MAAM,CAACN,aAAa,EAAEE,QAAQ,CAAC;AAC1C;AAEA,IAAA,OAAOH,QAAQ,CAACQ,IAAI,CAAC,EAAE,CAAC;GACzB;EAEDd,uBAAuB,GAAIX,MAAc,IAAI;IAC3C,MAAM;AAAEzC,MAAAA;KAAgB,GAAG,IAAI,CAACG,KAAK;IACrC,MAAM;MAAES,YAAY;MAAEC,cAAc;MAAEC,YAAY;AAAEC,MAAAA;KAAc,GAAG,IAAI,CAACT,KAAK;AAE/E,IAAA,MAAM6D,cAAc,GAAGC,uCAA+B,CACpD3B,MAAM,EACN5B,cAAc,EACdC,YAAY,EACZd,cAAc,EACde,YAAY,CACb;AAEDsD,IAAAA,UAAU,CAAC,MAAK;AACd,MAAA,IAAIzD,YAAY,EAAE;QACfA,YAAY,CAACqC,MAA0B,CAACqB,iBAAiB,CAACH,cAAc,EAAEA,cAAc,CAAC;AAC5F;MACA,IAAI,CAACzC,QAAQ,CAAC;AAAEb,QAAAA,cAAc,EAAEsD,cAAc;AAAErD,QAAAA,YAAY,EAAEqD;AAAc,OAAE,CAAC;KAChF,EAAE,CAAC,CAAC;GACN;AAEDI,EAAAA,MAAMA,GAAA;IACJ,MAAM;MACJC,SAAS;MACTC,SAAS;MACTC,EAAE;MACFC,IAAI;MACJC,WAAW;MACXC,QAAQ;MACRC,QAAQ;MACRC,SAAS;MACTC,SAAS;MACTC,QAAQ;AACRlF,MAAAA;KACD,GAAG,IAAI,CAACI,KAAK;IACd,MAAM;AAAEF,MAAAA;KAAO,GAAG,IAAI,CAACK,KAAK;AAC5B,IAAA,MAAM4E,WAAW,GAAqB;MACpCV,SAAS;MACTC,SAAS;MACTC,EAAE;MACFC,IAAI;MACJC,WAAW;MACXC,QAAQ;MACRC,QAAQ;MACRC,SAAS;MACTC,SAAS;MACTC,QAAQ;MACRlF,YAAY;MACZE,KAAK;MACLwD,OAAO,EAAE,IAAI,CAACD,aAAa;MAC3BD,MAAM,EAAE,IAAI,CAACD,YAAY;MACzB6B,OAAO,EAAE,IAAI,CAAC/C,aAAa;MAC3BgD,SAAS,EAAE,IAAI,CAACvD,eAAe;MAC/BmB,QAAQ,EAAE,IAAI,CAACD,cAAc;MAC7BsC,KAAK,EAAE,IAAI,CAAC9C;KACb;AACD,IAAA,OAAO,IAAI,CAACpC,KAAK,CAACoE,MAAM,CAACW,WAAgB,CAAC;AAC5C;;;;;"}
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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"}

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 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,MAAMA,iBAA8C,SAAQC,KAAK,CAACC,SAGjE,CAAA;AAGC,EAAA,OAAOC,YAAY,GAAG;AACpBC,IAAAA,YAAY,EAAE,KAAK;AACnBC,IAAAA,cAAc,EAAE,EAAE;AAClBC,IAAAA,KAAK,EAAE;GACR;EAEDC,WAAAA,CAAYC,KAA6B,EAAA;IACvC,KAAK,CAACA,KAAK,CAAC;AACZ,IAAA,MAAMC,gBAAgB,GAAGC,mBAAmB,CAACF,KAAK,CAACF,KAAK,IAAI,EAAE,EAAEE,KAAK,CAACH,cAAc,CAAC;IACrF,IAAI,CAACM,KAAK,GAAG;MACXL,KAAK,EAAEM,iBAAiB,CAACH,gBAAgB,EAAED,KAAK,CAACH,cAAc,CAAC;AAChEQ,MAAAA,gBAAgB,EAAE,IAAIC,gBAAgB,EAAE;MACxCC,kBAAkB,EAAEP,KAAK,CAACH,cAAc;AACxCW,MAAAA,WAAW,EAAE,SAAS;AACtBC,MAAAA,YAAY,EAAE,IAAI;AAClBC,MAAAA,cAAc,EAAE,CAAC;AACjBC,MAAAA,YAAY,EAAE,CAAC;AACfC,MAAAA,YAAY,EAAE;KACf;AACH,EAAA;AAEA,EAAA,OAAOC,wBAAwBA,CAC7B;AAAEhB,IAAAA;AAAc,GAA0B,EAC1C;AAAEU,IAAAA,kBAAkB,GAAGV,cAAc;IAAEC,KAAK;AAAEO,IAAAA;AAAgB,GAA0B,EAAA;IAExF,IAAIE,kBAAkB,KAAKV,cAAc,EAAE;AACzC,MAAA,MAAMiB,gBAAgB,GAAGZ,mBAAmB,CAACJ,KAAK,EAAES,kBAAkB,CAAC;MACvEF,gBAAgB,CAACU,KAAK,EAAE;MAExB,OAAO;AACLR,QAAAA,kBAAkB,EAAEV,cAAc;AAClCC,QAAAA,KAAK,EAAEM,iBAAiB,CAACU,gBAAgB,EAAEjB,cAAc,CAAC;AAC1DW,QAAAA,WAAW,EAAE,IAAI;AACjBC,QAAAA,YAAY,EAAE,IAAI;AAClBG,QAAAA,YAAY,EAAE;OACf;AACH,IAAA;AACA,IAAA,OAAO,IAAI;AACb,EAAA;EAEAI,aAAa,GAAIf,gBAAwB,IAAwB;IAC/D,MAAM;MAAEQ,YAAY;MAAED,WAAW;AAAEV,MAAAA;KAAO,GAAG,IAAI,CAACK,KAAK;IACvD,MAAM;AAAEN,MAAAA;KAAgB,GAAG,IAAI,CAACG,KAAK;AAErC,IAAA,IAAIS,YAAY,EAAE;AAChB,MAAA,IAAID,WAAW,KAAK,OAAO,IAAIA,WAAW,KAAK,KAAK,EAAE;AACpD,QAAA,OAAOA,WAAW;AACpB,MAAA;AAEA,MAAA,IAAI,CAACC,YAAY,CAACQ,OAAO,IAAIR,YAAY,CAACS,OAAO,KAAKT,YAAY,CAACU,GAAG,KAAK,GAAG,EAAE;AAC9E,QAAA,OAAOV,YAAY,CAACW,QAAQ,GAAG,MAAM,GAAG,MAAM;AAChD,MAAA;AAEA;MACA,IAAIX,YAAY,CAACQ,OAAO,IAAIR,YAAY,CAACU,GAAG,KAAK,GAAG,EAAE;AACpD,QAAA,OAAO,QAAQ;AACjB,MAAA;AAEA;AACA,MAAA,IACE,OAAOV,YAAY,CAACU,GAAG,KAAK,WAAW,IACvClB,gBAAgB,CAACoB,MAAM,IAAInB,mBAAmB,CAACJ,KAAK,EAAED,cAAc,CAAC,CAACwB,MAAM,EAC5E;AACA,QAAA,OAAO,WAAW;AACpB,MAAA;MACA,OAAOZ,YAAY,CAACU,GAAG;AACzB,IAAA;AACA;AACA,IAAA,OAAO,OAAO;EAChB,CAAC;EAEDG,UAAU,GAAGA,MAAK;IAChB,IAAI,CAACC,QAAQ,CAAC;AACZf,MAAAA,WAAW,EAAE,SAAS;AACtBC,MAAAA,YAAY,EAAE,IAAI;AAClBG,MAAAA,YAAY,EAAE;AACf,KAAA,CAAC;EACJ,CAAC;EAEDY,cAAc,GAAIC,KAA2C,IAAI;AAC/D,IAAA,IAAI,CAACA,KAAK,CAACR,OAAO,IAAIQ,KAAK,CAACP,OAAO,KAAKO,KAAK,CAACN,GAAG,KAAK,GAAG,EAAE;AACzD,MAAA,OAAOM,KAAK,CAACL,QAAQ,GAAG,MAAM,GAAG,MAAM;AACzC,IAAA;AACA,IAAA,OAAO,IAAI;EACb,CAAC;EAEDM,eAAe,GAAiDD,KAAK,IAAI;IACvEA,KAAK,CAACE,OAAO,EAAE;IACf,MAAM;MAAEjB,cAAc;AAAEC,MAAAA;KAAc,GAAGc,KAAK,CAACG,aAAa;IAC5D,MAAM;AAAEvB,MAAAA;KAAkB,GAAG,IAAI,CAACF,KAAK;IACvC,MAAM;AAAEN,MAAAA;KAAgB,GAAG,IAAI,CAACG,KAAK;AAErC;IACA,IAAI6B,iBAAiB,GAAG,EAAE;IAE1B,IAAI,IAAI,CAACL,cAAc,CAACC,KAAK,CAAC,KAAK,MAAM,EAAE;AACzCI,MAAAA,iBAAiB,GAAGzB,iBAAiB,CAACC,gBAAgB,CAACyB,IAAI,EAAE,CAACC,QAAQ,EAAE,EAAElC,cAAc,CAAC;MACzF,IAAI,CAAC0B,QAAQ,CAAC;AAAEzB,QAAAA,KAAK,EAAE+B,iBAAiB;AAAErB,QAAAA,WAAW,EAAE;AAAM,OAAE,CAAC;IAClE,CAAC,MAAM,IAAI,IAAI,CAACgB,cAAc,CAACC,KAAK,CAAC,KAAK,MAAM,EAAE;AAChDI,MAAAA,iBAAiB,GAAGzB,iBAAiB,CAACC,gBAAgB,CAAC2B,IAAI,EAAE,CAACD,QAAQ,EAAE,EAAElC,cAAc,CAAC;MACzF,IAAI,CAAC0B,QAAQ,CAAC;AAAEzB,QAAAA,KAAK,EAAE+B,iBAAiB;AAAErB,QAAAA,WAAW,EAAE;AAAM,OAAE,CAAC;AAClE,IAAA,CAAC,MAAM;MACL,IAAI,CAACe,QAAQ,CAAC;AACZd,QAAAA,YAAY,EAAEgB,KAAK;AACnBjB,QAAAA,WAAW,EAAE,SAAS;QACtBE,cAAc,EAAEA,cAAc,IAAI,CAAC;QACnCC,YAAY,EAAEA,YAAY,IAAI;AAC/B,OAAA,CAAC;AACJ,IAAA;EACF,CAAC;EAEDsB,aAAa,GAAkDR,KAAK,IAAI;IACtE,MAAM;AAAE5B,MAAAA;KAAgB,GAAG,IAAI,CAACG,KAAK;AACrC,IAAA,MAAMY,YAAY,GAAGV,mBAAmB,CACtCuB,KAAK,CAACS,aAAa,CAACC,OAAO,CAAC,MAAM,CAAC,EACnCtC,cAAc,CACf,CAACwB,MAAM;IAER,IAAI,CAACE,QAAQ,CAAC;AAAEf,MAAAA,WAAW,EAAE,OAAO;AAAEI,MAAAA;AAAY,KAAE,CAAC;EACvD,CAAC;EAEDwB,WAAW,GAAiDA,MAAK;IAC/D,IAAI,CAACb,QAAQ,CAAC;AAAEf,MAAAA,WAAW,EAAE;AAAK,KAAE,CAAC;EACvC,CAAC;EAED6B,YAAY,GAAIC,MAA0B,IAAI;IAC5C,MAAM;AAAEzC,MAAAA;KAAgB,GAAG,IAAI,CAACG,KAAK;AACrC,IAAA,MAAMuC,gBAAgB,GAAG1C,cAAc,CAAC2C,KAAK,CAAC,EAAE,CAAC,CAACC,MAAM,CAAEC,SAAS,IAAKA,SAAS,KAAK,GAAG,CAAC;AAE1F,IAAA,OAAO,CAACH,gBAAgB,CAACI,QAAQ,CAACL,MAAM,CAAC;EAC3C,CAAC;EAEDM,cAAc,GAA+CnB,KAAK,IAAI;IACpE,MAAM;MAAEpB,gBAAgB;AAAEG,MAAAA;KAAa,GAAG,IAAI,CAACL,KAAK;IACpD,MAAM;MAAEN,cAAc;AAAEgD,MAAAA;KAAU,GAAG,IAAI,CAAC7C,KAAK;IAC/C,MAAM;AAAEF,MAAAA;KAAO,GAAG2B,KAAK,CAACqB,MAAM;AAC9B,IAAA,IAAI7C,gBAAgB,GAAGC,mBAAmB,CAACJ,KAAK,EAAED,cAAc,CAAC;AACjE,IAAA,MAAMyC,MAAM,GAAG,IAAI,CAACtB,aAAa,CAACf,gBAAgB,CAAC;AACnD,IAAA,IAAI,CAAC,IAAI,CAACoC,YAAY,CAACC,MAAM,CAAC,IAAI9B,WAAW,KAAK,MAAM,IAAIA,WAAW,KAAK,MAAM,EAAE;AAClF,MAAA;AACF,IAAA;AAEA,IAAA,IAAI8B,MAAM,KAAK,WAAW,IAAIA,MAAM,KAAK,QAAQ,EAAE;MACjDrC,gBAAgB,GAAG,IAAI,CAAC8C,YAAY,CAAC9C,gBAAgB,EAAEqC,MAAM,CAAC;AAChE,IAAA;AAEA,IAAA,MAAMT,iBAAiB,GAAGzB,iBAAiB,CAACH,gBAAgB,EAAEJ,cAAc,CAAC;AAC7EQ,IAAAA,gBAAgB,CAAC2C,GAAG,CAAC/C,gBAAgB,CAAC;AAEtC,IAAA,IAAI,CAACgD,uBAAuB,CAACX,MAAM,CAAC;IAEpC,IAAI,CAACf,QAAQ,CAAC;AAAEzB,MAAAA,KAAK,EAAE+B;AAAiB,KAAE,EAAE,MAAK;MAC/C,IAAI,CAACP,UAAU,EAAE;AACjB,MAAA,IAAIuB,QAAQ,EAAE;AACZ,QAAA,MAAMK,cAAc,GAAGhD,mBAAmB,CAAC2B,iBAAiB,EAAEhC,cAAc,CAAC;QAC7EgD,QAAQ,CAACK,cAAc,CAAC;AAC1B,MAAA;AACF,IAAA,CAAC,CAAC;EACJ,CAAC;EAEDC,YAAY,GAA8C1B,KAAK,IAAI;AACjE,IAAA,IAAI,CAACzB,KAAK,CAACoD,MAAM,GAAGlD,mBAAmB,CAACuB,KAAK,CAACqB,MAAM,CAAChD,KAAK,EAAE,IAAI,CAACE,KAAK,CAACH,cAAc,CAAC,CAAC;EACzF,CAAC;EAEDwD,aAAa,GAA8C5B,KAAK,IAAI;IAClE,MAAM;MAAE5B,cAAc;AAAEyD,MAAAA;KAAS,GAAG,IAAI,CAACtD,KAAK;AAC9C,IAAA,IAAIsD,OAAO,EAAE;AACX,MAAA,IAAI,CAACV,cAAc,CAACnB,KAAK,CAAC;MAC1B6B,OAAO,CAACpD,mBAAmB,CAACuB,KAAK,CAACqB,MAAM,CAAChD,KAAK,EAAED,cAAc,CAAC,CAAC;AAClE,IAAA;EACF,CAAC;AAEDkD,EAAAA,YAAY,GAAGA,CAAC9C,gBAAwB,EAAEqC,MAAiB,KAAI;IAC7D,MAAM;AAAEzC,MAAAA;KAAgB,GAAG,IAAI,CAACG,KAAK;IACrC,MAAM;MAAEU,cAAc;AAAEC,MAAAA;KAAc,GAAG,IAAI,CAACR,KAAK;AACnD,IAAA,MAAMoD,QAAQ,GAAG,CAAC,GAAGtD,gBAAgB,CAAC;IACtC,IAAIS,cAAc,KAAKC,YAAY,EAAE;MACnC,IAAI6C,aAAa,GACf9C,cAAc,GAAG+C,4BAA4B,CAAC,CAAC,EAAE/C,cAAc,EAAEb,cAAc,CAAC;MAClF,IAAI6D,QAAQ,GAAG,CAAC;AAEhB,MAAA,IAAIC,KAAK,GAAGC,uBAAuB,CAAClD,cAAc,EAAEb,cAAc,CAAC;MACnE,IAAIyC,MAAM,KAAK,WAAW,EAAE;AAC1BkB,QAAAA,aAAa,IAAI,CAAC;AAClBG,QAAAA,KAAK,GAAGE,2BAA2B,CAACnD,cAAc,EAAEb,cAAc,CAAC;AACrE,MAAA;AAEA,MAAA,IAAI2D,aAAa,IAAI,CAAC,IAAIG,KAAK,EAAE;AAC/BD,QAAAA,QAAQ,GAAG,CAAC;AACd,MAAA;AAEAH,MAAAA,QAAQ,CAACO,MAAM,CAACN,aAAa,EAAEE,QAAQ,CAAC;AAC1C,IAAA;AAEA,IAAA,OAAOH,QAAQ,CAACQ,IAAI,CAAC,EAAE,CAAC;EAC1B,CAAC;EAEDd,uBAAuB,GAAIX,MAAc,IAAI;IAC3C,MAAM;AAAEzC,MAAAA;KAAgB,GAAG,IAAI,CAACG,KAAK;IACrC,MAAM;MAAES,YAAY;MAAEC,cAAc;MAAEC,YAAY;AAAEC,MAAAA;KAAc,GAAG,IAAI,CAACT,KAAK;AAE/E,IAAA,MAAM6D,cAAc,GAAGC,kCAA+B,CACpD3B,MAAM,EACN5B,cAAc,EACdC,YAAY,EACZd,cAAc,EACde,YAAY,CACb;AAEDsD,IAAAA,UAAU,CAAC,MAAK;AACd,MAAA,IAAIzD,YAAY,EAAE;QACfA,YAAY,CAACqC,MAA0B,CAACqB,iBAAiB,CAACH,cAAc,EAAEA,cAAc,CAAC;AAC5F,MAAA;MACA,IAAI,CAACzC,QAAQ,CAAC;AAAEb,QAAAA,cAAc,EAAEsD,cAAc;AAAErD,QAAAA,YAAY,EAAEqD;AAAc,OAAE,CAAC;IACjF,CAAC,EAAE,CAAC,CAAC;EACP,CAAC;AAEDI,EAAAA,MAAMA,GAAA;IACJ,MAAM;MACJC,SAAS;MACTC,SAAS;MACTC,EAAE;MACFC,IAAI;MACJC,WAAW;MACXC,QAAQ;MACRC,QAAQ;MACRC,SAAS;MACTC,SAAS;MACTC,QAAQ;AACRlF,MAAAA;KACD,GAAG,IAAI,CAACI,KAAK;IACd,MAAM;AAAEF,MAAAA;KAAO,GAAG,IAAI,CAACK,KAAK;AAC5B,IAAA,MAAM4E,WAAW,GAAqB;MACpCV,SAAS;MACTC,SAAS;MACTC,EAAE;MACFC,IAAI;MACJC,WAAW;MACXC,QAAQ;MACRC,QAAQ;MACRC,SAAS;MACTC,SAAS;MACTC,QAAQ;MACRlF,YAAY;MACZE,KAAK;MACLwD,OAAO,EAAE,IAAI,CAACD,aAAa;MAC3BD,MAAM,EAAE,IAAI,CAACD,YAAY;MACzB6B,OAAO,EAAE,IAAI,CAAC/C,aAAa;MAC3BgD,SAAS,EAAE,IAAI,CAACvD,eAAe;MAC/BmB,QAAQ,EAAE,IAAI,CAACD,cAAc;MAC7BsC,KAAK,EAAE,IAAI,CAAC9C;KACb;AACD,IAAA,OAAO,IAAI,CAACpC,KAAK,CAACoE,MAAM,CAACW,WAAgB,CAAC;AAC5C,EAAA;;;;;"}

package/build/withId/withId.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"withId.js","sources":["../../src/withId/withId.tsx"],"sourcesContent":["import { useId, ComponentType } from 'react';\n\ntype ChildProps<Props> = Props & {\n id?: string;\n};\n\nexport type WithIdProps<Props> = Props & {\n id: string;\n};\n\n/*\n @internal\n * @param {ReactNode} WrappedComponent\n */\nexport default function withId<Props extends object>(\n WrappedComponent: ComponentType<WithIdProps<Props>>,\n) {\n function WithIdComponent(props: ChildProps<Props>) {\n const id = useId();\n\n return <WrappedComponent {...props} id={props.id \|\| id} />;\n }\n\n WithIdComponent.displayName = `withId(${WrappedComponent.displayName \|\| WrappedComponent.name \|\| 'Component'})`;\n\n return WithIdComponent;\n}\n"],"names":["withId","WrappedComponent","WithIdComponent","props","id","useId","_jsx","displayName","name"],"mappings":";;;;;;;~~AAcwB~~,~~SAAAA~~,MAAMA,CAC5BC,gBAAmD,EAAA;EAEnD,SAASC,eAAeA,CAACC,KAAwB,EAAA;AAC/C,IAAA,MAAMC,EAAE,GAAGC,WAAK,EAAE;IAElB,oBAAOC,cAAA,CAACL,gBAAgB,EAAA;AAAA,MAAA,GAAKE,KAAK;AAAEC,MAAAA,EAAE,EAAED,KAAK,CAACC,EAAE,IAAIA;AAAG,MAAG;AAC5D;AAEAF,EAAAA,eAAe,CAACK,WAAW,GAAG,CAAA,OAAA,EAAUN,gBAAgB,CAACM,WAAW,IAAIN,gBAAgB,CAACO,IAAI,IAAI,WAAW,~~CAAG~~,CAAA,~~CAAA~~;AAE/G,EAAA,OAAON,eAAe;AACxB;;;;"}
1	+ {"version":3,"file":"withId.js","sources":["../../src/withId/withId.tsx"],"sourcesContent":["import { useId, ComponentType } from 'react';\n\ntype ChildProps<Props> = Props & {\n id?: string;\n};\n\nexport type WithIdProps<Props> = Props & {\n id: string;\n};\n\n/*\n @internal\n * @param {ReactNode} WrappedComponent\n */\nexport default function withId<Props extends object>(\n WrappedComponent: ComponentType<WithIdProps<Props>>,\n) {\n function WithIdComponent(props: ChildProps<Props>) {\n const id = useId();\n\n return <WrappedComponent {...props} id={props.id \|\| id} />;\n }\n\n WithIdComponent.displayName = `withId(${WrappedComponent.displayName \|\| WrappedComponent.name \|\| 'Component'})`;\n\n return WithIdComponent;\n}\n"],"names":["withId","WrappedComponent","WithIdComponent","props","id","useId","_jsx","displayName","name"],"mappings":";;;;;;;AAcc,SAAUA,MAAMA,CAC5BC,gBAAmD,EAAA;EAEnD,SAASC,eAAeA,CAACC,KAAwB,EAAA;AAC/C,IAAA,MAAMC,EAAE,GAAGC,WAAK,EAAE;IAElB,oBAAOC,cAAA,CAACL,gBAAgB,EAAA;AAAA,MAAA,GAAKE,KAAK;AAAEC,MAAAA,EAAE,EAAED,KAAK,CAACC,EAAE,IAAIA;AAAG,MAAG;AAC5D,EAAA;AAEAF,EAAAA,eAAe,CAACK,WAAW,GAAG,CAAA,OAAA,EAAUN,gBAAgB,CAACM,WAAW,IAAIN,gBAAgB,CAACO,IAAI,IAAI,WAAW,CAAA,CAAA,CAAG;AAE/G,EAAA,OAAON,eAAe;AACxB;;;;"}

package/build/withId/withId.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"withId.mjs","sources":["../../src/withId/withId.tsx"],"sourcesContent":["import { useId, ComponentType } from 'react';\n\ntype ChildProps<Props> = Props & {\n id?: string;\n};\n\nexport type WithIdProps<Props> = Props & {\n id: string;\n};\n\n/*\n @internal\n * @param {ReactNode} WrappedComponent\n */\nexport default function withId<Props extends object>(\n WrappedComponent: ComponentType<WithIdProps<Props>>,\n) {\n function WithIdComponent(props: ChildProps<Props>) {\n const id = useId();\n\n return <WrappedComponent {...props} id={props.id \|\| id} />;\n }\n\n WithIdComponent.displayName = `withId(${WrappedComponent.displayName \|\| WrappedComponent.name \|\| 'Component'})`;\n\n return WithIdComponent;\n}\n"],"names":["withId","WrappedComponent","WithIdComponent","props","id","useId","_jsx","displayName","name"],"mappings":";;;~~AAcwB~~,~~SAAAA~~,MAAMA,CAC5BC,gBAAmD,EAAA;EAEnD,SAASC,eAAeA,CAACC,KAAwB,EAAA;AAC/C,IAAA,MAAMC,EAAE,GAAGC,KAAK,EAAE;IAElB,oBAAOC,GAAA,CAACL,gBAAgB,EAAA;AAAA,MAAA,GAAKE,KAAK;AAAEC,MAAAA,EAAE,EAAED,KAAK,CAACC,EAAE,IAAIA;AAAG,MAAG;AAC5D;AAEAF,EAAAA,eAAe,CAACK,WAAW,GAAG,CAAA,OAAA,EAAUN,gBAAgB,CAACM,WAAW,IAAIN,gBAAgB,CAACO,IAAI,IAAI,WAAW,~~CAAG~~,CAAA,~~CAAA~~;AAE/G,EAAA,OAAON,eAAe;AACxB;;;;"}
1	+ {"version":3,"file":"withId.mjs","sources":["../../src/withId/withId.tsx"],"sourcesContent":["import { useId, ComponentType } from 'react';\n\ntype ChildProps<Props> = Props & {\n id?: string;\n};\n\nexport type WithIdProps<Props> = Props & {\n id: string;\n};\n\n/*\n @internal\n * @param {ReactNode} WrappedComponent\n */\nexport default function withId<Props extends object>(\n WrappedComponent: ComponentType<WithIdProps<Props>>,\n) {\n function WithIdComponent(props: ChildProps<Props>) {\n const id = useId();\n\n return <WrappedComponent {...props} id={props.id \|\| id} />;\n }\n\n WithIdComponent.displayName = `withId(${WrappedComponent.displayName \|\| WrappedComponent.name \|\| 'Component'})`;\n\n return WithIdComponent;\n}\n"],"names":["withId","WrappedComponent","WithIdComponent","props","id","useId","_jsx","displayName","name"],"mappings":";;;AAcc,SAAUA,MAAMA,CAC5BC,gBAAmD,EAAA;EAEnD,SAASC,eAAeA,CAACC,KAAwB,EAAA;AAC/C,IAAA,MAAMC,EAAE,GAAGC,KAAK,EAAE;IAElB,oBAAOC,GAAA,CAACL,gBAAgB,EAAA;AAAA,MAAA,GAAKE,KAAK;AAAEC,MAAAA,EAAE,EAAED,KAAK,CAACC,EAAE,IAAIA;AAAG,MAAG;AAC5D,EAAA;AAEAF,EAAAA,eAAe,CAACK,WAAW,GAAG,CAAA,OAAA,EAAUN,gBAAgB,CAACM,WAAW,IAAIN,gBAAgB,CAACO,IAAI,IAAI,WAAW,CAAA,CAAA,CAAG;AAE/G,EAAA,OAAON,eAAe;AACxB;;;;"}

package/build/withNextPortal/withNextPortal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"withNextPortal.js","sources":["../../src/withNextPortal/withNextPortal.tsx"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\n\nexport default function withNextPortalWrapper<T extends Record<string, any>>(\n Component: React.ComponentType<T>,\n) {\n return function (props: T) {\n const [mounted, setMounted] = useState(false);\n\n useEffect(() => {\n setMounted(true);\n }, [setMounted]);\n return mounted ? createPortal(<Component {...props} />, document.body) : null;\n };\n}\n"],"names":["withNextPortalWrapper","Component","props","mounted","setMounted","useState","useEffect","createPortal","_jsx","document","body"],"mappings":";;;;;;;;~~AAGwB~~,~~SAAAA~~,qBAAqBA,CAC3CC,SAAiC,EAAA;EAEjC,OAAO,UAAUC,KAAQ,EAAA;IACvB,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;AAE7CC,IAAAA,eAAS,CAAC,MAAK;MACbF,UAAU,CAAC,IAAI,CAAC;AAClB,~~KAAC~~,EAAE,CAACA,UAAU,CAAC,CAAC;AAChB,IAAA,OAAOD,OAAO,gBAAGI,qBAAY,cAACC,cAAA,CAACP,SAAS,EAAA;MAAA,GAAKC;AAAK,~~KAAI~~,~~CAAA~~,EAAEO,QAAQ,CAACC,IAAI,CAAC,GAAG,IAAI;~~GAC9E~~;AACH;;;;"}
1	+ {"version":3,"file":"withNextPortal.js","sources":["../../src/withNextPortal/withNextPortal.tsx"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\n\nexport default function withNextPortalWrapper<T extends Record<string, any>>(\n Component: React.ComponentType<T>,\n) {\n return function (props: T) {\n const [mounted, setMounted] = useState(false);\n\n useEffect(() => {\n setMounted(true);\n }, [setMounted]);\n return mounted ? createPortal(<Component {...props} />, document.body) : null;\n };\n}\n"],"names":["withNextPortalWrapper","Component","props","mounted","setMounted","useState","useEffect","createPortal","_jsx","document","body"],"mappings":";;;;;;;;AAGc,SAAUA,qBAAqBA,CAC3CC,SAAiC,EAAA;EAEjC,OAAO,UAAUC,KAAQ,EAAA;IACvB,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;AAE7CC,IAAAA,eAAS,CAAC,MAAK;MACbF,UAAU,CAAC,IAAI,CAAC;AAClB,IAAA,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;AAChB,IAAA,OAAOD,OAAO,gBAAGI,qBAAY,cAACC,cAAA,CAACP,SAAS,EAAA;MAAA,GAAKC;AAAK,KAAC,CAAG,EAAEO,QAAQ,CAACC,IAAI,CAAC,GAAG,IAAI;EAC/E,CAAC;AACH;;;;"}

package/build/withNextPortal/withNextPortal.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"withNextPortal.mjs","sources":["../../src/withNextPortal/withNextPortal.tsx"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\n\nexport default function withNextPortalWrapper<T extends Record<string, any>>(\n Component: React.ComponentType<T>,\n) {\n return function (props: T) {\n const [mounted, setMounted] = useState(false);\n\n useEffect(() => {\n setMounted(true);\n }, [setMounted]);\n return mounted ? createPortal(<Component {...props} />, document.body) : null;\n };\n}\n"],"names":["withNextPortalWrapper","Component","props","mounted","setMounted","useState","useEffect","createPortal","_jsx","document","body"],"mappings":";;;;~~AAGwB~~,~~SAAAA~~,qBAAqBA,CAC3CC,SAAiC,EAAA;EAEjC,OAAO,UAAUC,KAAQ,EAAA;IACvB,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC;AAE7CC,IAAAA,SAAS,CAAC,MAAK;MACbF,UAAU,CAAC,IAAI,CAAC;AAClB,~~KAAC~~,EAAE,CAACA,UAAU,CAAC,CAAC;AAChB,IAAA,OAAOD,OAAO,gBAAGI,YAAY,cAACC,GAAA,CAACP,SAAS,EAAA;MAAA,GAAKC;AAAK,~~KAAI~~,~~CAAA~~,EAAEO,QAAQ,CAACC,IAAI,CAAC,GAAG,IAAI;~~GAC9E~~;AACH;;;;"}
1	+ {"version":3,"file":"withNextPortal.mjs","sources":["../../src/withNextPortal/withNextPortal.tsx"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\n\nexport default function withNextPortalWrapper<T extends Record<string, any>>(\n Component: React.ComponentType<T>,\n) {\n return function (props: T) {\n const [mounted, setMounted] = useState(false);\n\n useEffect(() => {\n setMounted(true);\n }, [setMounted]);\n return mounted ? createPortal(<Component {...props} />, document.body) : null;\n };\n}\n"],"names":["withNextPortalWrapper","Component","props","mounted","setMounted","useState","useEffect","createPortal","_jsx","document","body"],"mappings":";;;;AAGc,SAAUA,qBAAqBA,CAC3CC,SAAiC,EAAA;EAEjC,OAAO,UAAUC,KAAQ,EAAA;IACvB,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC;AAE7CC,IAAAA,SAAS,CAAC,MAAK;MACbF,UAAU,CAAC,IAAI,CAAC;AAClB,IAAA,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;AAChB,IAAA,OAAOD,OAAO,gBAAGI,YAAY,cAACC,GAAA,CAACP,SAAS,EAAA;MAAA,GAAKC;AAAK,KAAC,CAAG,EAAEO,QAAQ,CAACC,IAAI,CAAC,GAAG,IAAI;EAC/E,CAAC;AACH;;;;"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-8a15907",
+  "version": "0.0.0-experimental-118c6ed",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -38,16 +38,16 @@
     "!**/*.tsbuildinfo"
   ],
   "devDependencies": {
-    "@babel/core": "^7.27.4",
-    "@babel/plugin-transform-runtime": "^7.27.4",
-    "@babel/preset-env": "^7.27.2",
+    "@babel/core": "^7.28.0",
+    "@babel/plugin-transform-runtime": "^7.28.0",
+    "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@formatjs/cli": "^6.7.2",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.3.1",
-    "@rollup/plugin-typescript": "^12.1.2",
+    "@rollup/plugin-typescript": "^12.1.4",
     "@rollup/plugin-url": "^8.0.2",
     "@storybook/addon-a11y": "^8.6.14",
     "@storybook/addon-actions": "^8.6.14",
@@ -67,63 +67,63 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@transferwise/icons": "^3.22.2",
-    "@tsconfig/recommended": "^1.0.8",
+    "@transferwise/icons": "^3.22.3",
+    "@tsconfig/recommended": "^1.0.10",
     "@types/babel__core": "^7.20.5",
-    "@types/commonmark": "^0.27.9",
-    "@types/jest": "^29.5.14",
-    "@types/lodash": "4.17.17",
+    "@types/commonmark": "^0.27.10",
+    "@types/jest": "^30.0.0",
+    "@types/lodash": "4.17.20",
     "@types/lodash.clamp": "^4.0.9",
     "@types/lodash.debounce": "^4.0.9",
     "@types/react": "^18.3.23",
     "@types/react-dom": "^18.3.7",
     "@types/react-transition-group": "4.4.12",
-    "@wise/art": "^2.22.0",
-    "@wise/eslint-config": "^12.3.0",
+    "@wise/art": "^2.23.0",
+    "@wise/eslint-config": "^12.4.0",
     "babel-plugin-formatjs": "^10.5.39",
-    "eslint": "^9.27.0",
+    "eslint": "^9.30.1",
     "gulp": "^5.0.1",
-    "jest": "^29.7.0",
+    "jest": "^30.0.4",
     "jest-environment-jsdom": "^29.7.0",
     "jest-fetch-mock": "^3.0.3",
     "lodash.times": "^4.3.2",
     "react-intl": "^7.1.11",
-    "rollup": "^4.43.0",
+    "rollup": "^4.44.2",
     "rollup-preserve-directives": "^1.1.3",
     "storybook": "^8.6.14",
     "@transferwise/less-config": "3.1.2",
-    "@transferwise/neptune-css": "14.24.4",
-    "@wise/components-theming": "1.6.3",
+    "@transferwise/neptune-css": "0.0.0-experimental-118c6ed",
+    "@wise/components-theming": "0.0.0-experimental-118c6ed",
     "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {
-    "@transferwise/icons": "^3.22.0",
-    "@transferwise/neptune-css": "^14.24",
-    "@wise/art": "^2.21",
-    "@wise/components-theming": "^1.6.2",
+    "@transferwise/icons": "^3.22.3",
+    "@transferwise/neptune-css": "0.0.0-experimental-118c6ed",
+    "@wise/art": "^2.23.0",
+    "@wise/components-theming": "0.0.0-experimental-118c6ed",
     "react": ">=18",
     "react-dom": ">=18",
     "react-intl": "^5.10.0 || ^6"
   },
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@floating-ui/react": "^0.27.9",
+    "@floating-ui/react": "^0.27.13",
     "@headlessui/react": "^1.7.19",
     "@popperjs/core": "^2.11.8",
     "@react-aria/focus": "^3.20.5",
     "@react-aria/overlays": "^3.27.3",
     "@react-spring/web": "~10.0.1",
-    "@transferwise/formatting": "^2.13.1",
+    "@transferwise/formatting": "^2.13.3",
     "@transferwise/neptune-validation": "^3.3.0",
     "clsx": "^2.1.1",
     "commonmark": "^0.31.2",
-    "core-js": "^3.43.0",
+    "core-js": "^3.44.0",
     "lodash.clamp": "^4.0.3",
     "lodash.debounce": "^4.0.8",
     "merge-props": "^6.0.0",
     "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.5",
-    "virtua": "^0.41.2"
+    "virtua": "^0.41.5"
   },
   "publishConfig": {
     "access": "public"

package/src/accordion/Accordion.story.tsx CHANGED Viewed

@@ -1,3 +1,4 @@
+import React, { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { FastFlag as FastFlagIcon, CardWise as CardWiseIcon } from '@transferwise/icons';
@@ -6,6 +7,7 @@ import Modal from '../modal';
 import { lorem10, lorem40 } from '../test-utils';
 import Accordion from './Accordion';
+import Button from '../button/Button';
 /**
  * Metadata for the Accordion component story.
@@ -20,7 +22,6 @@ const meta: Meta<typeof Accordion> = {
           'A simple accordion component that displays a list of items that can be expanded or collapsed.',
       },
     },
-    tags: ['autodocs'],
   },
   args: {
     items: [
@@ -133,28 +134,36 @@ export const WithinModal: Story = {
       delay: 1000,
     },
   },
-  render: (args) => {
+  render: (args, { viewMode }) => {
+    // Modal is open by default unless in docs view
+    const [open, setOpen] = useState(viewMode !== 'docs');
     const { items } = args;
     return (
-      <Modal
-        body={
-          <div className="p-a-1">
-            <h3 className="m-t-2 m-b-4 text-xs-center">Large transfer tips</h3>
-            <Accordion {...args} items={[items[0]]} />
-            <Accordion {...args} items={[items[0]]} indexOpen={0} />
-            <Accordion {...args} items={items} />
-          </div>
-        }
-        scroll={Scroll.CONTENT}
-        size={Size.LARGE}
-        open
-        footer={
-          <div className="p-a-3 text-xs-center">
-            <a href="/large-amounts">Learn more</a>
-          </div>
-        }
-        onClose={() => {}}
-      />
+      <>
+        <Button v2 onClick={() => setOpen(true)}>
+          Open Modal
+        </Button>
+        <Modal
+          body={
+            <div className="p-a-1">
+              <h3 className="m-t-2 m-b-4 text-xs-center">Large transfer tips</h3>
+              <Accordion {...args} items={[items[0]]} />
+              <Accordion {...args} items={[items[0]]} indexOpen={0} />
+              <Accordion {...args} items={items} />
+            </div>
+          }
+          scroll={Scroll.CONTENT}
+          size={Size.LARGE}
+          open={open}
+          footer={
+            <div className="p-a-3 text-xs-center">
+              <a href="/large-amounts">Learn more</a>
+            </div>
+          }
+          onClose={() => setOpen(false)}
+        />
+      </>
     );
   },
 };

package/src/actionButton/ActionButton.story.tsx CHANGED Viewed

@@ -13,7 +13,6 @@ import ActionButton from './ActionButton';
 export default {
   component: ActionButton,
   title: 'Actions/ActionButton (Deprecated)',
-  tags: ['autodocs'],
 } satisfies Meta<typeof ActionButton>;
 type Story = StoryObj<typeof ActionButton>;

package/src/actionOption/ActionOption.story.tsx CHANGED Viewed

@@ -18,7 +18,6 @@ export default {
     additionalContent:
       'Additional content goes here, this content does not align with the logo and button',
   },
-  tags: ['autodocs'],
 } satisfies Meta<typeof ActionOption>;
 type Story = StoryObj<typeof ActionOption>;

package/src/alert/Alert.story.tsx CHANGED Viewed

@@ -38,7 +38,7 @@ export default {
       },
     },
   },
-  tags: ['autodocs'],
   parameters: {
     docs: {
       toc: true,

package/src/avatar/Avatar.spec.tsx CHANGED Viewed

@@ -35,11 +35,14 @@ describe('Avatar', () => {
   });
   describe('branded avatar colors', () => {
-    it.each(avatarColorTestCases)('for seed of %s return background color of %s', (item) => {
-      render(<Avatar backgroundColorSeed={item.key.toString()}>JS</Avatar>);
+    it.each(avatarColorTestCases)(
+      'for seed of $key return background color of `$color.token`',
+      (item) => {
+        render(<Avatar backgroundColorSeed={item.key.toString()}>JS</Avatar>);
-      expect(screen.getByText('JS')).toHaveStyle(`background-color: ${item.color.token}`);
-    });
+        expect(screen.getByText('JS')).toHaveStyle(`background-color: var(${item.color.token})`);
+      },
+    );
   });
   it('adds aria-label to component if it is passed in', () => {

package/src/avatar/Avatar.story.tsx CHANGED Viewed

@@ -13,7 +13,6 @@ import Avatar, { AvatarType } from '.';
 export default {
   component: Avatar,
   title: 'Content/Avatar (Deprecated)',
-  tags: ['autodocs'],
 } satisfies Meta<typeof Avatar>;
 type Story = StoryObj<typeof Avatar>;

package/src/avatarLayout/AvatarLayout.story.tsx CHANGED Viewed

@@ -14,7 +14,6 @@ type Story = StoryObj<typeof AvatarLayout>;
 const sizes: AvatarLayoutProps['size'][] = [16, 24, 32, 40, 48, 56, 72];
 export const Diagonal: Story = {
-  tags: ['autodocs'],
   render: () => (
     <div
       style={{
@@ -98,7 +97,6 @@ export const Diagonal: Story = {
 };
 export const Horizontal: Story = {
-  tags: ['autodocs'],
   render: () => (
     <div
       style={{
@@ -182,7 +180,6 @@ export const Horizontal: Story = {
 };
 export const EdgeInstances: Story = {
-  tags: ['autodocs'],
   render: () => (
     <div
       style={{

package/src/avatarView/AvatarView.story.tsx CHANGED Viewed

@@ -35,7 +35,6 @@ const profileName2 = 'Tyler Durden';
 const sizes: AvatarViewProps['size'][] = [16, 24, 32, 40, 48, 56, 72];
 export const Selected: Story = {
-  tags: ['autodocs'],
   render: () => {
     return (
       <div
@@ -69,7 +68,6 @@ export const Selected: Story = {
 };
 export const Notification: Story = {
-  tags: ['autodocs'],
   render: () => (
     <div
       style={{
@@ -106,7 +104,6 @@ export const Notification: Story = {
 };
 export const Badge: Story = {
-  tags: ['autodocs'],
   render: () => {
     const currencies = ['USD', 'EUR', 'GBP', 'AUD', 'CAD', 'JPY', 'CNY'];
     const icons = [
@@ -250,7 +247,6 @@ export const Badge: Story = {
 };
 export const Images: Story = {
-  tags: ['autodocs'],
   render: () => {
     return (
       <div
@@ -305,7 +301,6 @@ export const Images: Story = {
 };
 export const Profiles: Story = {
-  tags: ['autodocs'],
   render: () => {
     return (
       <div
@@ -388,7 +383,6 @@ export const ProfileBrokenImageFallback: Story = {
 };
 export const EdgeInstaces: Story = {
-  tags: ['autodocs'],
   render: () => {
     const css = `.custom-variant {
       border: 1px dashed var(--color-border-neutral);

package/src/avatarWrapper/AvatarWrapper.story.tsx CHANGED Viewed

@@ -8,7 +8,6 @@ import AvatarWrapper from './AvatarWrapper';
  * @deprecated use **`AvatarView`** components instead
  */
 export default {
-  tags: ['autodocs'],
   component: AvatarWrapper,
   title: 'Content/AvatarWrapper (Deprecated)',
 } satisfies Meta<typeof AvatarWrapper>;

package/src/badge/Badge.story.tsx CHANGED Viewed

@@ -9,7 +9,6 @@ import Badge from './Badge';
  * @deprecated use **`<AvatarView badge={..} />`** components instead
  */
 export default {
-  tags: ['autodocs'],
   component: Badge,
   title: 'Content/Badge (Deprecated)',
   excludeStories: ['ExampleBadgeCss'],

package/src/body/Body.story.tsx CHANGED Viewed

@@ -6,7 +6,6 @@ import Body from './Body';
 export default {
   title: 'Typography/Body',
   component: Body,
-  tags: ['autodocs'],
 };
 export const Basic = () => {

package/src/button/Button.story.tsx CHANGED Viewed

@@ -272,7 +272,7 @@ const meta: Meta<typeof Button> = {
     children: 'Button text',
     onClick: fn(),
   },
-  tags: ['autodocs'],
   decorators: [withContainer],
   parameters: {
     docs: {

package/src/button/LegacyButton.story.tsx CHANGED Viewed

@@ -85,7 +85,7 @@ const meta: Meta<typeof LegacyButton> = {
       },
     },
   },
-  tags: ['autodocs'],
   decorators: [withContainer],
 };

package/src/card/Card.story.tsx CHANGED Viewed

@@ -22,7 +22,6 @@ const meta: Meta<typeof Card> = {
     onClick: fn(),
     as: 'div',
   },
-  tags: ['autodocs'],
 };
 export default meta;

package/src/checkbox/Checkbox.story.tsx CHANGED Viewed

@@ -13,7 +13,6 @@ const meta: Meta<typeof Checkbox> = {
     label: 'This is the label',
     onChange: fn(),
   },
-  tags: ['autodocs'],
 };
 export default meta;