@matin_mortazavi/react-otp-input 1.0.0 → 1.0.1
Sign up to get free protection for your applications and to get access to all the features.
- package/example/src/App.tsx +2 -1
- package/lib/index.cjs +2 -2
- package/lib/index.cjs.map +1 -1
- package/lib/index.esm.js +2 -2
- package/lib/index.esm.js.map +1 -1
- package/package.json +1 -1
package/example/src/App.tsx
CHANGED
|
@@ -109,10 +109,11 @@ function App() {
|
|
|
109
109
|
<div className="margin-top--small">
|
|
110
110
|
<OTPInput
|
|
111
111
|
inputStyle="inputStyle"
|
|
112
|
-
numInputs={
|
|
112
|
+
numInputs={6}
|
|
113
113
|
onChange={handleOTPChange}
|
|
114
114
|
renderSeparator={<span>{separator}</span>}
|
|
115
115
|
value={otp}
|
|
116
|
+
shouldBlurOnFinish
|
|
116
117
|
placeholder={placeholder}
|
|
117
118
|
inputType={inputType}
|
|
118
119
|
renderInput={(props) => <input {...props} />}
|
package/lib/index.cjs
CHANGED
|
@@ -25,7 +25,7 @@ var OTPInput = function (_a) {
|
|
|
25
25
|
React__default["default"].useEffect(function () {
|
|
26
26
|
var _a;
|
|
27
27
|
if (shouldBlurOnFinish && numInputs === (value === null || value === void 0 ? void 0 : value.length)) {
|
|
28
|
-
(_a = inputRefs.current[numInputs]) === null || _a === void 0 ? void 0 : _a.blur();
|
|
28
|
+
(_a = inputRefs.current[numInputs - 1]) === null || _a === void 0 ? void 0 : _a.blur();
|
|
29
29
|
}
|
|
30
30
|
}, [shouldBlurOnFinish, numInputs, value]);
|
|
31
31
|
var getPlaceholderValue = function () {
|
|
@@ -91,7 +91,7 @@ var OTPInput = function (_a) {
|
|
|
91
91
|
changeCodeAtFocus('');
|
|
92
92
|
focusInput(activeInput - 1);
|
|
93
93
|
}
|
|
94
|
-
else if (event.code === '
|
|
94
|
+
else if (event.code === 'vite') {
|
|
95
95
|
event.preventDefault();
|
|
96
96
|
changeCodeAtFocus('');
|
|
97
97
|
}
|
package/lib/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/index.tsx"],"sourcesContent":["import React from 'react';\r\n\r\ntype AllowedInputTypes = 'password' | 'text' | 'number' | 'tel';\r\n\r\ntype InputProps = Required<\r\n Pick<\r\n React.InputHTMLAttributes<HTMLInputElement>,\r\n | 'value'\r\n | 'onChange'\r\n | 'onFocus'\r\n | 'onBlur'\r\n | 'onKeyDown'\r\n | 'onPaste'\r\n | 'aria-label'\r\n | 'autoComplete'\r\n | 'style'\r\n | 'inputMode'\r\n | 'onInput'\r\n > & {\r\n ref: React.RefCallback<HTMLInputElement>;\r\n placeholder: string | undefined;\r\n className: string | undefined;\r\n type: AllowedInputTypes;\r\n }\r\n>;\r\n\r\ninterface OTPInputProps {\r\n /** Value of the OTP input */\r\n value?: string;\r\n /** Number of OTP inputs to be rendered */\r\n numInputs?: number;\r\n /** Blur after last char entered (close keyboard on mobile) */\r\n shouldBlurOnFinish?: boolean;\r\n /** Callback to be called when the OTP value changes */\r\n onChange: (otp: string) => void;\r\n /** Callback to be called when pasting content into the component */\r\n onPaste?: (event: React.ClipboardEvent<HTMLDivElement>) => void;\r\n /** Function to render the input */\r\n renderInput: (inputProps: InputProps, index: number) => React.ReactNode;\r\n /** Whether the first input should be auto focused */\r\n shouldAutoFocus?: boolean;\r\n /** Placeholder for the inputs */\r\n placeholder?: string;\r\n /** Function to render the separator */\r\n renderSeparator?: ((index: number) => React.ReactNode) | React.ReactNode;\r\n /** Style for the container */\r\n containerStyle?: React.CSSProperties | string;\r\n /** Style for the input */\r\n inputStyle?: React.CSSProperties | string;\r\n /** The type that will be passed to the input being rendered */\r\n inputType?: AllowedInputTypes;\r\n /** Do not apply the default styles to the inputs, will be removed in future versions */\r\n skipDefaultStyles?: boolean; // TODO: Remove in next major release\r\n}\r\n\r\nconst isStyleObject = (obj: unknown) => typeof obj === 'object' && obj !== null;\r\n\r\nconst OTPInput = ({\r\n value = '',\r\n numInputs = 4,\r\n onChange,\r\n onPaste,\r\n shouldBlurOnFinish,\r\n renderInput,\r\n shouldAutoFocus = false,\r\n inputType = 'text',\r\n renderSeparator,\r\n placeholder,\r\n containerStyle,\r\n inputStyle,\r\n skipDefaultStyles = false,\r\n}: OTPInputProps) => {\r\n const [activeInput, setActiveInput] = React.useState(0);\r\n const inputRefs = React.useRef<Array<HTMLInputElement | null>>([]);\r\n\r\n const getOTPValue = () => (value ? value.toString().split('') : []);\r\n\r\n const isInputNum = inputType === 'number' || inputType === 'tel';\r\n\r\n React.useEffect(() => {\r\n inputRefs.current = inputRefs.current.slice(0, numInputs);\r\n }, [numInputs]);\r\n\r\n React.useEffect(() => {\r\n if (shouldAutoFocus) {\r\n inputRefs.current[0]?.focus();\r\n }\r\n }, [shouldAutoFocus]);\r\n\r\n React.useEffect(() => {\r\n if (shouldBlurOnFinish && numInputs === value?.length) {\r\n inputRefs.current[numInputs]?.blur();\r\n }\r\n }, [shouldBlurOnFinish, numInputs, value]);\r\n\r\n const getPlaceholderValue = () => {\r\n if (typeof placeholder === 'string') {\r\n if (placeholder.length === numInputs) {\r\n return placeholder;\r\n }\r\n\r\n if (placeholder.length > 0) {\r\n console.error('Length of the placeholder should be equal to the number of inputs.');\r\n }\r\n }\r\n return undefined;\r\n };\r\n\r\n const isInputValueValid = (value: string) => {\r\n const isTypeValid = isInputNum ? !isNaN(Number(value)) : typeof value === 'string';\r\n return isTypeValid && value.trim().length === 1;\r\n };\r\n\r\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n const { value } = event.target;\r\n\r\n if (isInputValueValid(value)) {\r\n changeCodeAtFocus(value);\r\n focusInput(activeInput + 1);\r\n }\r\n };\r\n\r\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n const { nativeEvent } = event;\r\n const value = event.target.value;\r\n\r\n if (!isInputValueValid(value)) {\r\n // Pasting from the native autofill suggestion on a mobile device can pass\r\n // the pasted string as one long input to one of the cells. This ensures\r\n // that we handle the full input and not just the first character.\r\n if (value.length === numInputs) {\r\n const hasInvalidInput = value.split('').some((cellInput) => !isInputValueValid(cellInput));\r\n if (!hasInvalidInput) {\r\n handleOTPChange(value.split(''));\r\n focusInput(numInputs - 1);\r\n }\r\n }\r\n\r\n // @ts-expect-error - This was added previously to handle and edge case\r\n // for dealing with keyCode \"229 Unidentified\" on Android. Check if this is\r\n // still needed.\r\n if (nativeEvent.data === null && nativeEvent.inputType === 'deleteContentBackward') {\r\n event.preventDefault();\r\n changeCodeAtFocus('');\r\n focusInput(activeInput - 1);\r\n }\r\n\r\n // Clear the input if it's not valid value because firefox allows\r\n // pasting non-numeric characters in a number type input\r\n event.target.value = '';\r\n }\r\n };\r\n\r\n const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => (index: number) => {\r\n setActiveInput(index);\r\n event.target.select();\r\n };\r\n\r\n const handleBlur = () => {\r\n setActiveInput(activeInput - 1);\r\n };\r\n\r\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\r\n const otp = getOTPValue();\r\n if ([event.code, event.key].includes('Backspace')) {\r\n event.preventDefault();\r\n changeCodeAtFocus('');\r\n focusInput(activeInput - 1);\r\n } else if (event.code === 'Delete') {\r\n event.preventDefault();\r\n changeCodeAtFocus('');\r\n } else if (event.code === 'ArrowLeft') {\r\n event.preventDefault();\r\n focusInput(activeInput - 1);\r\n } else if (event.code === 'ArrowRight') {\r\n event.preventDefault();\r\n focusInput(activeInput + 1);\r\n }\r\n // React does not trigger onChange when the same value is entered\r\n // again. So we need to focus the next input manually in this case.\r\n else if (event.key === otp[activeInput]) {\r\n event.preventDefault();\r\n focusInput(activeInput + 1);\r\n } else if (\r\n event.code === 'Spacebar' ||\r\n event.code === 'Space' ||\r\n event.code === 'ArrowUp' ||\r\n event.code === 'ArrowDown'\r\n ) {\r\n event.preventDefault();\r\n }\r\n };\r\n\r\n const focusInput = (index: number) => {\r\n const activeInput = Math.max(Math.min(numInputs - 1, index), 0);\r\n\r\n if (inputRefs.current[activeInput]) {\r\n inputRefs.current[activeInput]?.focus();\r\n inputRefs.current[activeInput]?.select();\r\n setActiveInput(activeInput);\r\n }\r\n };\r\n\r\n const changeCodeAtFocus = (value: string) => {\r\n const otp = getOTPValue();\r\n otp[activeInput] = value[0];\r\n handleOTPChange(otp);\r\n };\r\n\r\n const handleOTPChange = (otp: Array<string>) => {\r\n const otpValue = otp.join('');\r\n onChange(otpValue);\r\n };\r\n\r\n const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {\r\n event.preventDefault();\r\n\r\n const otp = getOTPValue();\r\n let nextActiveInput = activeInput;\r\n\r\n // Get pastedData in an array of max size (num of inputs - current position)\r\n const pastedData = event.clipboardData\r\n .getData('text/plain')\r\n .slice(0, numInputs - activeInput)\r\n .split('');\r\n\r\n // Prevent pasting if the clipboard data contains non-numeric values for number inputs\r\n if (isInputNum && pastedData.some((value) => isNaN(Number(value)))) {\r\n return;\r\n }\r\n\r\n // Paste data from focused input onwards\r\n for (let pos = 0; pos < numInputs; ++pos) {\r\n if (pos >= activeInput && pastedData.length > 0) {\r\n otp[pos] = pastedData.shift() ?? '';\r\n nextActiveInput++;\r\n }\r\n }\r\n\r\n focusInput(nextActiveInput);\r\n handleOTPChange(otp);\r\n };\r\n\r\n return (\r\n <div\r\n style={Object.assign({ display: 'flex', alignItems: 'center' }, isStyleObject(containerStyle) && containerStyle)}\r\n className={typeof containerStyle === 'string' ? containerStyle : undefined}\r\n onPaste={onPaste}\r\n >\r\n {Array.from({ length: numInputs }, (_, index) => index).map((index) => (\r\n <React.Fragment key={index}>\r\n {renderInput(\r\n {\r\n value: getOTPValue()[index] ?? '',\r\n placeholder: getPlaceholderValue()?.[index] ?? undefined,\r\n ref: (element) => (inputRefs.current[index] = element),\r\n onChange: handleChange,\r\n onFocus: (event) => handleFocus(event)(index),\r\n onBlur: handleBlur,\r\n onKeyDown: handleKeyDown,\r\n onPaste: handlePaste,\r\n autoComplete: 'off',\r\n 'aria-label': `Please enter OTP character ${index + 1}`,\r\n style: Object.assign(\r\n !skipDefaultStyles ? ({ width: '1em', textAlign: 'center' } as const) : {},\r\n isStyleObject(inputStyle) ? inputStyle : {}\r\n ),\r\n className: typeof inputStyle === 'string' ? inputStyle : undefined,\r\n type: inputType,\r\n inputMode: isInputNum ? 'numeric' : 'text',\r\n onInput: handleInputChange,\r\n },\r\n index\r\n )}\r\n {index < numInputs - 1 && (typeof renderSeparator === 'function' ? renderSeparator(index) : renderSeparator)}\r\n </React.Fragment>\r\n ))}\r\n </div>\r\n );\r\n};\r\n\r\nexport type { OTPInputProps, InputProps, AllowedInputTypes };\r\nexport default OTPInput;\r\n"],"names":["React"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/index.tsx"],"sourcesContent":["import React from 'react';\r\n\r\ntype AllowedInputTypes = 'password' | 'text' | 'number' | 'tel';\r\n\r\ntype InputProps = Required<\r\n Pick<\r\n React.InputHTMLAttributes<HTMLInputElement>,\r\n | 'value'\r\n | 'onChange'\r\n | 'onFocus'\r\n | 'onBlur'\r\n | 'onKeyDown'\r\n | 'onPaste'\r\n | 'aria-label'\r\n | 'autoComplete'\r\n | 'style'\r\n | 'inputMode'\r\n | 'onInput'\r\n > & {\r\n ref: React.RefCallback<HTMLInputElement>;\r\n placeholder: string | undefined;\r\n className: string | undefined;\r\n type: AllowedInputTypes;\r\n }\r\n>;\r\n\r\ninterface OTPInputProps {\r\n /** Value of the OTP input */\r\n value?: string;\r\n /** Number of OTP inputs to be rendered */\r\n numInputs?: number;\r\n /** Blur after last char entered (close keyboard on mobile) */\r\n shouldBlurOnFinish?: boolean;\r\n /** Callback to be called when the OTP value changes */\r\n onChange: (otp: string) => void;\r\n /** Callback to be called when pasting content into the component */\r\n onPaste?: (event: React.ClipboardEvent<HTMLDivElement>) => void;\r\n /** Function to render the input */\r\n renderInput: (inputProps: InputProps, index: number) => React.ReactNode;\r\n /** Whether the first input should be auto focused */\r\n shouldAutoFocus?: boolean;\r\n /** Placeholder for the inputs */\r\n placeholder?: string;\r\n /** Function to render the separator */\r\n renderSeparator?: ((index: number) => React.ReactNode) | React.ReactNode;\r\n /** Style for the container */\r\n containerStyle?: React.CSSProperties | string;\r\n /** Style for the input */\r\n inputStyle?: React.CSSProperties | string;\r\n /** The type that will be passed to the input being rendered */\r\n inputType?: AllowedInputTypes;\r\n /** Do not apply the default styles to the inputs, will be removed in future versions */\r\n skipDefaultStyles?: boolean; // TODO: Remove in next major release\r\n}\r\n\r\nconst isStyleObject = (obj: unknown) => typeof obj === 'object' && obj !== null;\r\n\r\nconst OTPInput = ({\r\n value = '',\r\n numInputs = 4,\r\n onChange,\r\n onPaste,\r\n shouldBlurOnFinish,\r\n renderInput,\r\n shouldAutoFocus = false,\r\n inputType = 'text',\r\n renderSeparator,\r\n placeholder,\r\n containerStyle,\r\n inputStyle,\r\n skipDefaultStyles = false,\r\n}: OTPInputProps) => {\r\n const [activeInput, setActiveInput] = React.useState(0);\r\n const inputRefs = React.useRef<Array<HTMLInputElement | null>>([]);\r\n\r\n const getOTPValue = () => (value ? value.toString().split('') : []);\r\n\r\n const isInputNum = inputType === 'number' || inputType === 'tel';\r\n\r\n React.useEffect(() => {\r\n inputRefs.current = inputRefs.current.slice(0, numInputs);\r\n }, [numInputs]);\r\n\r\n React.useEffect(() => {\r\n if (shouldAutoFocus) {\r\n inputRefs.current[0]?.focus();\r\n }\r\n }, [shouldAutoFocus]);\r\n\r\n React.useEffect(() => {\r\n if (shouldBlurOnFinish && numInputs === value?.length) {\r\n inputRefs.current[numInputs - 1]?.blur();\r\n }\r\n }, [shouldBlurOnFinish, numInputs, value]);\r\n\r\n const getPlaceholderValue = () => {\r\n if (typeof placeholder === 'string') {\r\n if (placeholder.length === numInputs) {\r\n return placeholder;\r\n }\r\n\r\n if (placeholder.length > 0) {\r\n console.error('Length of the placeholder should be equal to the number of inputs.');\r\n }\r\n }\r\n return undefined;\r\n };\r\n\r\n const isInputValueValid = (value: string) => {\r\n const isTypeValid = isInputNum ? !isNaN(Number(value)) : typeof value === 'string';\r\n return isTypeValid && value.trim().length === 1;\r\n };\r\n\r\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n const { value } = event.target;\r\n\r\n if (isInputValueValid(value)) {\r\n changeCodeAtFocus(value);\r\n focusInput(activeInput + 1);\r\n }\r\n };\r\n\r\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n const { nativeEvent } = event;\r\n const value = event.target.value;\r\n\r\n if (!isInputValueValid(value)) {\r\n // Pasting from the native autofill suggestion on a mobile device can pass\r\n // the pasted string as one long input to one of the cells. This ensures\r\n // that we handle the full input and not just the first character.\r\n if (value.length === numInputs) {\r\n const hasInvalidInput = value.split('').some((cellInput) => !isInputValueValid(cellInput));\r\n if (!hasInvalidInput) {\r\n handleOTPChange(value.split(''));\r\n focusInput(numInputs - 1);\r\n }\r\n }\r\n\r\n // @ts-expect-error - This was added previously to handle and edge case\r\n // for dealing with keyCode \"229 Unidentified\" on Android. Check if this is\r\n // still needed.\r\n if (nativeEvent.data === null && nativeEvent.inputType === 'deleteContentBackward') {\r\n event.preventDefault();\r\n changeCodeAtFocus('');\r\n focusInput(activeInput - 1);\r\n }\r\n\r\n // Clear the input if it's not valid value because firefox allows\r\n // pasting non-numeric characters in a number type input\r\n event.target.value = '';\r\n }\r\n };\r\n\r\n const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => (index: number) => {\r\n setActiveInput(index);\r\n event.target.select();\r\n };\r\n\r\n const handleBlur = () => {\r\n setActiveInput(activeInput - 1);\r\n };\r\n\r\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\r\n const otp = getOTPValue();\r\n if ([event.code, event.key].includes('Backspace')) {\r\n event.preventDefault();\r\n changeCodeAtFocus('');\r\n focusInput(activeInput - 1);\r\n } else if (event.code === 'vite') {\r\n event.preventDefault();\r\n changeCodeAtFocus('');\r\n } else if (event.code === 'ArrowLeft') {\r\n event.preventDefault();\r\n focusInput(activeInput - 1);\r\n } else if (event.code === 'ArrowRight') {\r\n event.preventDefault();\r\n focusInput(activeInput + 1);\r\n }\r\n // React does not trigger onChange when the same value is entered\r\n // again. So we need to focus the next input manually in this case.\r\n else if (event.key === otp[activeInput]) {\r\n event.preventDefault();\r\n focusInput(activeInput + 1);\r\n } else if (\r\n event.code === 'Spacebar' ||\r\n event.code === 'Space' ||\r\n event.code === 'ArrowUp' ||\r\n event.code === 'ArrowDown'\r\n ) {\r\n event.preventDefault();\r\n }\r\n };\r\n\r\n const focusInput = (index: number) => {\r\n const activeInput = Math.max(Math.min(numInputs - 1, index), 0);\r\n\r\n if (inputRefs.current[activeInput]) {\r\n inputRefs.current[activeInput]?.focus();\r\n inputRefs.current[activeInput]?.select();\r\n setActiveInput(activeInput);\r\n }\r\n };\r\n\r\n const changeCodeAtFocus = (value: string) => {\r\n const otp = getOTPValue();\r\n otp[activeInput] = value[0];\r\n handleOTPChange(otp);\r\n };\r\n\r\n const handleOTPChange = (otp: Array<string>) => {\r\n const otpValue = otp.join('');\r\n onChange(otpValue);\r\n };\r\n\r\n const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {\r\n event.preventDefault();\r\n\r\n const otp = getOTPValue();\r\n let nextActiveInput = activeInput;\r\n\r\n // Get pastedData in an array of max size (num of inputs - current position)\r\n const pastedData = event.clipboardData\r\n .getData('text/plain')\r\n .slice(0, numInputs - activeInput)\r\n .split('');\r\n\r\n // Prevent pasting if the clipboard data contains non-numeric values for number inputs\r\n if (isInputNum && pastedData.some((value) => isNaN(Number(value)))) {\r\n return;\r\n }\r\n\r\n // Paste data from focused input onwards\r\n for (let pos = 0; pos < numInputs; ++pos) {\r\n if (pos >= activeInput && pastedData.length > 0) {\r\n otp[pos] = pastedData.shift() ?? '';\r\n nextActiveInput++;\r\n }\r\n }\r\n\r\n focusInput(nextActiveInput);\r\n handleOTPChange(otp);\r\n };\r\n\r\n return (\r\n <div\r\n style={Object.assign({ display: 'flex', alignItems: 'center' }, isStyleObject(containerStyle) && containerStyle)}\r\n className={typeof containerStyle === 'string' ? containerStyle : undefined}\r\n onPaste={onPaste}\r\n >\r\n {Array.from({ length: numInputs }, (_, index) => index).map((index) => (\r\n <React.Fragment key={index}>\r\n {renderInput(\r\n {\r\n value: getOTPValue()[index] ?? '',\r\n placeholder: getPlaceholderValue()?.[index] ?? undefined,\r\n ref: (element) => (inputRefs.current[index] = element),\r\n onChange: handleChange,\r\n onFocus: (event) => handleFocus(event)(index),\r\n onBlur: handleBlur,\r\n onKeyDown: handleKeyDown,\r\n onPaste: handlePaste,\r\n autoComplete: 'off',\r\n 'aria-label': `Please enter OTP character ${index + 1}`,\r\n style: Object.assign(\r\n !skipDefaultStyles ? ({ width: '1em', textAlign: 'center' } as const) : {},\r\n isStyleObject(inputStyle) ? inputStyle : {}\r\n ),\r\n className: typeof inputStyle === 'string' ? inputStyle : undefined,\r\n type: inputType,\r\n inputMode: isInputNum ? 'numeric' : 'text',\r\n onInput: handleInputChange,\r\n },\r\n index\r\n )}\r\n {index < numInputs - 1 && (typeof renderSeparator === 'function' ? renderSeparator(index) : renderSeparator)}\r\n </React.Fragment>\r\n ))}\r\n </div>\r\n );\r\n};\r\n\r\nexport type { OTPInputProps, InputProps, AllowedInputTypes };\r\nexport default OTPInput;\r\n"],"names":["React"],"mappings":"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"}
|
package/lib/index.esm.js
CHANGED
|
@@ -19,7 +19,7 @@ var OTPInput = function (_a) {
|
|
|
19
19
|
React.useEffect(function () {
|
|
20
20
|
var _a;
|
|
21
21
|
if (shouldBlurOnFinish && numInputs === (value === null || value === void 0 ? void 0 : value.length)) {
|
|
22
|
-
(_a = inputRefs.current[numInputs]) === null || _a === void 0 ? void 0 : _a.blur();
|
|
22
|
+
(_a = inputRefs.current[numInputs - 1]) === null || _a === void 0 ? void 0 : _a.blur();
|
|
23
23
|
}
|
|
24
24
|
}, [shouldBlurOnFinish, numInputs, value]);
|
|
25
25
|
var getPlaceholderValue = function () {
|
|
@@ -85,7 +85,7 @@ var OTPInput = function (_a) {
|
|
|
85
85
|
changeCodeAtFocus('');
|
|
86
86
|
focusInput(activeInput - 1);
|
|
87
87
|
}
|
|
88
|
-
else if (event.code === '
|
|
88
|
+
else if (event.code === 'vite') {
|
|
89
89
|
event.preventDefault();
|
|
90
90
|
changeCodeAtFocus('');
|
|
91
91
|
}
|
package/lib/index.esm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.esm.js","sources":["../../src/index.tsx"],"sourcesContent":["import React from 'react';\r\n\r\ntype AllowedInputTypes = 'password' | 'text' | 'number' | 'tel';\r\n\r\ntype InputProps = Required<\r\n Pick<\r\n React.InputHTMLAttributes<HTMLInputElement>,\r\n | 'value'\r\n | 'onChange'\r\n | 'onFocus'\r\n | 'onBlur'\r\n | 'onKeyDown'\r\n | 'onPaste'\r\n | 'aria-label'\r\n | 'autoComplete'\r\n | 'style'\r\n | 'inputMode'\r\n | 'onInput'\r\n > & {\r\n ref: React.RefCallback<HTMLInputElement>;\r\n placeholder: string | undefined;\r\n className: string | undefined;\r\n type: AllowedInputTypes;\r\n }\r\n>;\r\n\r\ninterface OTPInputProps {\r\n /** Value of the OTP input */\r\n value?: string;\r\n /** Number of OTP inputs to be rendered */\r\n numInputs?: number;\r\n /** Blur after last char entered (close keyboard on mobile) */\r\n shouldBlurOnFinish?: boolean;\r\n /** Callback to be called when the OTP value changes */\r\n onChange: (otp: string) => void;\r\n /** Callback to be called when pasting content into the component */\r\n onPaste?: (event: React.ClipboardEvent<HTMLDivElement>) => void;\r\n /** Function to render the input */\r\n renderInput: (inputProps: InputProps, index: number) => React.ReactNode;\r\n /** Whether the first input should be auto focused */\r\n shouldAutoFocus?: boolean;\r\n /** Placeholder for the inputs */\r\n placeholder?: string;\r\n /** Function to render the separator */\r\n renderSeparator?: ((index: number) => React.ReactNode) | React.ReactNode;\r\n /** Style for the container */\r\n containerStyle?: React.CSSProperties | string;\r\n /** Style for the input */\r\n inputStyle?: React.CSSProperties | string;\r\n /** The type that will be passed to the input being rendered */\r\n inputType?: AllowedInputTypes;\r\n /** Do not apply the default styles to the inputs, will be removed in future versions */\r\n skipDefaultStyles?: boolean; // TODO: Remove in next major release\r\n}\r\n\r\nconst isStyleObject = (obj: unknown) => typeof obj === 'object' && obj !== null;\r\n\r\nconst OTPInput = ({\r\n value = '',\r\n numInputs = 4,\r\n onChange,\r\n onPaste,\r\n shouldBlurOnFinish,\r\n renderInput,\r\n shouldAutoFocus = false,\r\n inputType = 'text',\r\n renderSeparator,\r\n placeholder,\r\n containerStyle,\r\n inputStyle,\r\n skipDefaultStyles = false,\r\n}: OTPInputProps) => {\r\n const [activeInput, setActiveInput] = React.useState(0);\r\n const inputRefs = React.useRef<Array<HTMLInputElement | null>>([]);\r\n\r\n const getOTPValue = () => (value ? value.toString().split('') : []);\r\n\r\n const isInputNum = inputType === 'number' || inputType === 'tel';\r\n\r\n React.useEffect(() => {\r\n inputRefs.current = inputRefs.current.slice(0, numInputs);\r\n }, [numInputs]);\r\n\r\n React.useEffect(() => {\r\n if (shouldAutoFocus) {\r\n inputRefs.current[0]?.focus();\r\n }\r\n }, [shouldAutoFocus]);\r\n\r\n React.useEffect(() => {\r\n if (shouldBlurOnFinish && numInputs === value?.length) {\r\n inputRefs.current[numInputs]?.blur();\r\n }\r\n }, [shouldBlurOnFinish, numInputs, value]);\r\n\r\n const getPlaceholderValue = () => {\r\n if (typeof placeholder === 'string') {\r\n if (placeholder.length === numInputs) {\r\n return placeholder;\r\n }\r\n\r\n if (placeholder.length > 0) {\r\n console.error('Length of the placeholder should be equal to the number of inputs.');\r\n }\r\n }\r\n return undefined;\r\n };\r\n\r\n const isInputValueValid = (value: string) => {\r\n const isTypeValid = isInputNum ? !isNaN(Number(value)) : typeof value === 'string';\r\n return isTypeValid && value.trim().length === 1;\r\n };\r\n\r\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n const { value } = event.target;\r\n\r\n if (isInputValueValid(value)) {\r\n changeCodeAtFocus(value);\r\n focusInput(activeInput + 1);\r\n }\r\n };\r\n\r\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n const { nativeEvent } = event;\r\n const value = event.target.value;\r\n\r\n if (!isInputValueValid(value)) {\r\n // Pasting from the native autofill suggestion on a mobile device can pass\r\n // the pasted string as one long input to one of the cells. This ensures\r\n // that we handle the full input and not just the first character.\r\n if (value.length === numInputs) {\r\n const hasInvalidInput = value.split('').some((cellInput) => !isInputValueValid(cellInput));\r\n if (!hasInvalidInput) {\r\n handleOTPChange(value.split(''));\r\n focusInput(numInputs - 1);\r\n }\r\n }\r\n\r\n // @ts-expect-error - This was added previously to handle and edge case\r\n // for dealing with keyCode \"229 Unidentified\" on Android. Check if this is\r\n // still needed.\r\n if (nativeEvent.data === null && nativeEvent.inputType === 'deleteContentBackward') {\r\n event.preventDefault();\r\n changeCodeAtFocus('');\r\n focusInput(activeInput - 1);\r\n }\r\n\r\n // Clear the input if it's not valid value because firefox allows\r\n // pasting non-numeric characters in a number type input\r\n event.target.value = '';\r\n }\r\n };\r\n\r\n const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => (index: number) => {\r\n setActiveInput(index);\r\n event.target.select();\r\n };\r\n\r\n const handleBlur = () => {\r\n setActiveInput(activeInput - 1);\r\n };\r\n\r\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\r\n const otp = getOTPValue();\r\n if ([event.code, event.key].includes('Backspace')) {\r\n event.preventDefault();\r\n changeCodeAtFocus('');\r\n focusInput(activeInput - 1);\r\n } else if (event.code === 'Delete') {\r\n event.preventDefault();\r\n changeCodeAtFocus('');\r\n } else if (event.code === 'ArrowLeft') {\r\n event.preventDefault();\r\n focusInput(activeInput - 1);\r\n } else if (event.code === 'ArrowRight') {\r\n event.preventDefault();\r\n focusInput(activeInput + 1);\r\n }\r\n // React does not trigger onChange when the same value is entered\r\n // again. So we need to focus the next input manually in this case.\r\n else if (event.key === otp[activeInput]) {\r\n event.preventDefault();\r\n focusInput(activeInput + 1);\r\n } else if (\r\n event.code === 'Spacebar' ||\r\n event.code === 'Space' ||\r\n event.code === 'ArrowUp' ||\r\n event.code === 'ArrowDown'\r\n ) {\r\n event.preventDefault();\r\n }\r\n };\r\n\r\n const focusInput = (index: number) => {\r\n const activeInput = Math.max(Math.min(numInputs - 1, index), 0);\r\n\r\n if (inputRefs.current[activeInput]) {\r\n inputRefs.current[activeInput]?.focus();\r\n inputRefs.current[activeInput]?.select();\r\n setActiveInput(activeInput);\r\n }\r\n };\r\n\r\n const changeCodeAtFocus = (value: string) => {\r\n const otp = getOTPValue();\r\n otp[activeInput] = value[0];\r\n handleOTPChange(otp);\r\n };\r\n\r\n const handleOTPChange = (otp: Array<string>) => {\r\n const otpValue = otp.join('');\r\n onChange(otpValue);\r\n };\r\n\r\n const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {\r\n event.preventDefault();\r\n\r\n const otp = getOTPValue();\r\n let nextActiveInput = activeInput;\r\n\r\n // Get pastedData in an array of max size (num of inputs - current position)\r\n const pastedData = event.clipboardData\r\n .getData('text/plain')\r\n .slice(0, numInputs - activeInput)\r\n .split('');\r\n\r\n // Prevent pasting if the clipboard data contains non-numeric values for number inputs\r\n if (isInputNum && pastedData.some((value) => isNaN(Number(value)))) {\r\n return;\r\n }\r\n\r\n // Paste data from focused input onwards\r\n for (let pos = 0; pos < numInputs; ++pos) {\r\n if (pos >= activeInput && pastedData.length > 0) {\r\n otp[pos] = pastedData.shift() ?? '';\r\n nextActiveInput++;\r\n }\r\n }\r\n\r\n focusInput(nextActiveInput);\r\n handleOTPChange(otp);\r\n };\r\n\r\n return (\r\n <div\r\n style={Object.assign({ display: 'flex', alignItems: 'center' }, isStyleObject(containerStyle) && containerStyle)}\r\n className={typeof containerStyle === 'string' ? containerStyle : undefined}\r\n onPaste={onPaste}\r\n >\r\n {Array.from({ length: numInputs }, (_, index) => index).map((index) => (\r\n <React.Fragment key={index}>\r\n {renderInput(\r\n {\r\n value: getOTPValue()[index] ?? '',\r\n placeholder: getPlaceholderValue()?.[index] ?? undefined,\r\n ref: (element) => (inputRefs.current[index] = element),\r\n onChange: handleChange,\r\n onFocus: (event) => handleFocus(event)(index),\r\n onBlur: handleBlur,\r\n onKeyDown: handleKeyDown,\r\n onPaste: handlePaste,\r\n autoComplete: 'off',\r\n 'aria-label': `Please enter OTP character ${index + 1}`,\r\n style: Object.assign(\r\n !skipDefaultStyles ? ({ width: '1em', textAlign: 'center' } as const) : {},\r\n isStyleObject(inputStyle) ? inputStyle : {}\r\n ),\r\n className: typeof inputStyle === 'string' ? inputStyle : undefined,\r\n type: inputType,\r\n inputMode: isInputNum ? 'numeric' : 'text',\r\n onInput: handleInputChange,\r\n },\r\n index\r\n )}\r\n {index < numInputs - 1 && (typeof renderSeparator === 'function' ? renderSeparator(index) : renderSeparator)}\r\n </React.Fragment>\r\n ))}\r\n </div>\r\n );\r\n};\r\n\r\nexport type { OTPInputProps, InputProps, AllowedInputTypes };\r\nexport default OTPInput;\r\n"],"names":[],"mappings":";;AAuDA,IAAM,aAAa,GAAG,UAAC,GAAY,EAAA,EAAK,OAAA,OAAO,GAAG,KAAK,QAAQ,IAAI,GAAG,KAAK,IAAI,CAAA,EAAA,CAAC;AAE1E,IAAA,QAAQ,GAAG,UAAC,EAcF,EAAA;QAbd,EAAU,GAAA,EAAA,CAAA,KAAA,EAAV,KAAK,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,EAAE,GAAA,EAAA,EACV,EAAA,GAAA,EAAA,CAAA,SAAa,EAAb,SAAS,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,CAAC,GAAA,EAAA,EACb,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,kBAAkB,GAAA,EAAA,CAAA,kBAAA,EAClB,WAAW,GAAA,EAAA,CAAA,WAAA,EACX,EAAA,GAAA,EAAA,CAAA,eAAuB,EAAvB,eAAe,mBAAG,KAAK,GAAA,EAAA,EACvB,EAAA,GAAA,EAAA,CAAA,SAAkB,EAAlB,SAAS,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,MAAM,GAAA,EAAA,EAClB,eAAe,GAAA,EAAA,CAAA,eAAA,EACf,WAAW,iBAAA,EACX,cAAc,GAAA,EAAA,CAAA,cAAA,EACd,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,EAAA,GAAA,EAAA,CAAA,iBAAyB,EAAzB,iBAAiB,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,KAAK,GAAA,EAAA,CAAA;AAEnB,IAAA,IAAA,EAAgC,GAAA,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAhD,WAAW,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,cAAc,QAAqB,CAAC;IACxD,IAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAiC,EAAE,CAAC,CAAC;IAEnE,IAAM,WAAW,GAAG,YAAA,EAAM,QAAC,KAAK,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,EAAE,EAAxC,EAAyC,CAAC;IAEpE,IAAM,UAAU,GAAG,SAAS,KAAK,QAAQ,IAAI,SAAS,KAAK,KAAK,CAAC;IAEjE,KAAK,CAAC,SAAS,CAAC,YAAA;AACd,QAAA,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC;AAC5D,KAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,KAAK,CAAC,SAAS,CAAC,YAAA;;AACd,QAAA,IAAI,eAAe,EAAE;YACnB,CAAA,EAAA,GAAA,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,KAAK,EAAE,CAAC;AAC/B,SAAA;AACH,KAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,KAAK,CAAC,SAAS,CAAC,YAAA;;AACd,QAAA,IAAI,kBAAkB,IAAI,SAAS,MAAK,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAL,KAAK,CAAE,MAAM,CAAA,EAAE;YACrD,CAAA,EAAA,GAAA,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,IAAI,EAAE,CAAC;AACtC,SAAA;KACF,EAAE,CAAC,kBAAkB,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;AAE3C,IAAA,IAAM,mBAAmB,GAAG,YAAA;AAC1B,QAAA,IAAI,OAAO,WAAW,KAAK,QAAQ,EAAE;AACnC,YAAA,IAAI,WAAW,CAAC,MAAM,KAAK,SAAS,EAAE;AACpC,gBAAA,OAAO,WAAW,CAAC;AACpB,aAAA;AAED,YAAA,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE;AAC1B,gBAAA,OAAO,CAAC,KAAK,CAAC,oEAAoE,CAAC,CAAC;AACrF,aAAA;AACF,SAAA;AACD,QAAA,OAAO,SAAS,CAAC;AACnB,KAAC,CAAC;IAEF,IAAM,iBAAiB,GAAG,UAAC,KAAa,EAAA;QACtC,IAAM,WAAW,GAAG,UAAU,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC;QACnF,OAAO,WAAW,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC,CAAC;AAClD,KAAC,CAAC;IAEF,IAAM,YAAY,GAAG,UAAC,KAA0C,EAAA;AACtD,QAAA,IAAA,KAAK,GAAK,KAAK,CAAC,MAAM,MAAjB,CAAkB;AAE/B,QAAA,IAAI,iBAAiB,CAAC,KAAK,CAAC,EAAE;YAC5B,iBAAiB,CAAC,KAAK,CAAC,CAAC;AACzB,YAAA,UAAU,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;AAC7B,SAAA;AACH,KAAC,CAAC;IAEF,IAAM,iBAAiB,GAAG,UAAC,KAA0C,EAAA;AAC3D,QAAA,IAAA,WAAW,GAAK,KAAK,CAAA,WAAV,CAAW;AAC9B,QAAA,IAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;AAEjC,QAAA,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE;;;;AAI7B,YAAA,IAAI,KAAK,CAAC,MAAM,KAAK,SAAS,EAAE;gBAC9B,IAAM,eAAe,GAAG,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,UAAC,SAAS,EAAA,EAAK,OAAA,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAA,EAAA,CAAC,CAAC;gBAC3F,IAAI,CAAC,eAAe,EAAE;oBACpB,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;AACjC,oBAAA,UAAU,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC;AAC3B,iBAAA;AACF,aAAA;;;;YAKD,IAAI,WAAW,CAAC,IAAI,KAAK,IAAI,IAAI,WAAW,CAAC,SAAS,KAAK,uBAAuB,EAAE;gBAClF,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,iBAAiB,CAAC,EAAE,CAAC,CAAC;AACtB,gBAAA,UAAU,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;AAC7B,aAAA;;;AAID,YAAA,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,EAAE,CAAC;AACzB,SAAA;AACH,KAAC,CAAC;AAEF,IAAA,IAAM,WAAW,GAAG,UAAC,KAAyC,EAAK,EAAA,OAAA,UAAC,KAAa,EAAA;QAC/E,cAAc,CAAC,KAAK,CAAC,CAAC;AACtB,QAAA,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;KACvB,CAAA,EAAA,CAAC;AAEF,IAAA,IAAM,UAAU,GAAG,YAAA;AACjB,QAAA,cAAc,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;AAClC,KAAC,CAAC;IAEF,IAAM,aAAa,GAAG,UAAC,KAA4C,EAAA;AACjE,QAAA,IAAM,GAAG,GAAG,WAAW,EAAE,CAAC;AAC1B,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE;YACjD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,iBAAiB,CAAC,EAAE,CAAC,CAAC;AACtB,YAAA,UAAU,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;AAC7B,SAAA;AAAM,aAAA,IAAI,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE;YAClC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,iBAAiB,CAAC,EAAE,CAAC,CAAC;AACvB,SAAA;AAAM,aAAA,IAAI,KAAK,CAAC,IAAI,KAAK,WAAW,EAAE;YACrC,KAAK,CAAC,cAAc,EAAE,CAAC;AACvB,YAAA,UAAU,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;AAC7B,SAAA;AAAM,aAAA,IAAI,KAAK,CAAC,IAAI,KAAK,YAAY,EAAE;YACtC,KAAK,CAAC,cAAc,EAAE,CAAC;AACvB,YAAA,UAAU,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;AAC7B,SAAA;;;aAGI,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,CAAC,WAAW,CAAC,EAAE;YACvC,KAAK,CAAC,cAAc,EAAE,CAAC;AACvB,YAAA,UAAU,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;AAC7B,SAAA;AAAM,aAAA,IACL,KAAK,CAAC,IAAI,KAAK,UAAU;YACzB,KAAK,CAAC,IAAI,KAAK,OAAO;YACtB,KAAK,CAAC,IAAI,KAAK,SAAS;AACxB,YAAA,KAAK,CAAC,IAAI,KAAK,WAAW,EAC1B;YACA,KAAK,CAAC,cAAc,EAAE,CAAC;AACxB,SAAA;AACH,KAAC,CAAC;IAEF,IAAM,UAAU,GAAG,UAAC,KAAa,EAAA;;AAC/B,QAAA,IAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,GAAG,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;AAEhE,QAAA,IAAI,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE;YAClC,CAAA,EAAA,GAAA,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,KAAK,EAAE,CAAC;YACxC,CAAA,EAAA,GAAA,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,MAAM,EAAE,CAAC;YACzC,cAAc,CAAC,WAAW,CAAC,CAAC;AAC7B,SAAA;AACH,KAAC,CAAC;IAEF,IAAM,iBAAiB,GAAG,UAAC,KAAa,EAAA;AACtC,QAAA,IAAM,GAAG,GAAG,WAAW,EAAE,CAAC;QAC1B,GAAG,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;QAC5B,eAAe,CAAC,GAAG,CAAC,CAAC;AACvB,KAAC,CAAC;IAEF,IAAM,eAAe,GAAG,UAAC,GAAkB,EAAA;QACzC,IAAM,QAAQ,GAAG,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAC9B,QAAQ,CAAC,QAAQ,CAAC,CAAC;AACrB,KAAC,CAAC;IAEF,IAAM,WAAW,GAAG,UAAC,KAA6C,EAAA;;QAChE,KAAK,CAAC,cAAc,EAAE,CAAC;AAEvB,QAAA,IAAM,GAAG,GAAG,WAAW,EAAE,CAAC;QAC1B,IAAI,eAAe,GAAG,WAAW,CAAC;;AAGlC,QAAA,IAAM,UAAU,GAAG,KAAK,CAAC,aAAa;aACnC,OAAO,CAAC,YAAY,CAAC;AACrB,aAAA,KAAK,CAAC,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;aACjC,KAAK,CAAC,EAAE,CAAC,CAAC;;QAGb,IAAI,UAAU,IAAI,UAAU,CAAC,IAAI,CAAC,UAAC,KAAK,EAAK,EAAA,OAAA,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAApB,EAAoB,CAAC,EAAE;YAClE,OAAO;AACR,SAAA;;QAGD,KAAK,IAAI,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,SAAS,EAAE,EAAE,GAAG,EAAE;YACxC,IAAI,GAAG,IAAI,WAAW,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;gBAC/C,GAAG,CAAC,GAAG,CAAC,GAAG,CAAA,EAAA,GAAA,UAAU,CAAC,KAAK,EAAE,MAAI,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAA,EAAE,CAAC;AACpC,gBAAA,eAAe,EAAE,CAAC;AACnB,aAAA;AACF,SAAA;QAED,UAAU,CAAC,eAAe,CAAC,CAAC;QAC5B,eAAe,CAAC,GAAG,CAAC,CAAC;AACvB,KAAC,CAAC;AAEF,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,aAAa,CAAC,cAAc,CAAC,IAAI,cAAc,CAAC,EAChH,SAAS,EAAE,OAAO,cAAc,KAAK,QAAQ,GAAG,cAAc,GAAG,SAAS,EAC1E,OAAO,EAAE,OAAO,EAAA,EAEf,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,UAAC,CAAC,EAAE,KAAK,EAAK,EAAA,OAAA,KAAK,CAAA,EAAA,CAAC,CAAC,GAAG,CAAC,UAAC,KAAK,EAAA;;QAAK,QACrE,oBAAC,KAAK,CAAC,QAAQ,EAAC,EAAA,GAAG,EAAE,KAAK,EAAA;AACvB,YAAA,WAAW,CACV;gBACE,KAAK,EAAE,MAAA,WAAW,EAAE,CAAC,KAAK,CAAC,mCAAI,EAAE;gBACjC,WAAW,EAAE,MAAA,CAAA,EAAA,GAAA,mBAAmB,EAAE,MAAG,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAK,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAI,SAAS;AACxD,gBAAA,GAAG,EAAE,UAAC,OAAO,EAAK,EAAA,QAAC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,OAAO,IAAC;AACtD,gBAAA,QAAQ,EAAE,YAAY;AACtB,gBAAA,OAAO,EAAE,UAAC,KAAK,EAAA,EAAK,OAAA,WAAW,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,GAAA;AAC7C,gBAAA,MAAM,EAAE,UAAU;AAClB,gBAAA,SAAS,EAAE,aAAa;AACxB,gBAAA,OAAO,EAAE,WAAW;AACpB,gBAAA,YAAY,EAAE,KAAK;AACnB,gBAAA,YAAY,EAAE,6BAAA,CAAA,MAAA,CAA8B,KAAK,GAAG,CAAC,CAAE;AACvD,gBAAA,KAAK,EAAE,MAAM,CAAC,MAAM,CAClB,CAAC,iBAAiB,GAAI,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAY,GAAG,EAAE,EAC1E,aAAa,CAAC,UAAU,CAAC,GAAG,UAAU,GAAG,EAAE,CAC5C;AACD,gBAAA,SAAS,EAAE,OAAO,UAAU,KAAK,QAAQ,GAAG,UAAU,GAAG,SAAS;AAClE,gBAAA,IAAI,EAAE,SAAS;gBACf,SAAS,EAAE,UAAU,GAAG,SAAS,GAAG,MAAM;AAC1C,gBAAA,OAAO,EAAE,iBAAiB;AAC3B,aAAA,EACD,KAAK,CACN;YACA,KAAK,GAAG,SAAS,GAAG,CAAC,KAAK,OAAO,eAAe,KAAK,UAAU,GAAG,eAAe,CAAC,KAAK,CAAC,GAAG,eAAe,CAAC,CAC7F,EAClB;KAAA,CAAC,CACE,EACN;AACJ;;;;"}
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":["../../src/index.tsx"],"sourcesContent":["import React from 'react';\r\n\r\ntype AllowedInputTypes = 'password' | 'text' | 'number' | 'tel';\r\n\r\ntype InputProps = Required<\r\n Pick<\r\n React.InputHTMLAttributes<HTMLInputElement>,\r\n | 'value'\r\n | 'onChange'\r\n | 'onFocus'\r\n | 'onBlur'\r\n | 'onKeyDown'\r\n | 'onPaste'\r\n | 'aria-label'\r\n | 'autoComplete'\r\n | 'style'\r\n | 'inputMode'\r\n | 'onInput'\r\n > & {\r\n ref: React.RefCallback<HTMLInputElement>;\r\n placeholder: string | undefined;\r\n className: string | undefined;\r\n type: AllowedInputTypes;\r\n }\r\n>;\r\n\r\ninterface OTPInputProps {\r\n /** Value of the OTP input */\r\n value?: string;\r\n /** Number of OTP inputs to be rendered */\r\n numInputs?: number;\r\n /** Blur after last char entered (close keyboard on mobile) */\r\n shouldBlurOnFinish?: boolean;\r\n /** Callback to be called when the OTP value changes */\r\n onChange: (otp: string) => void;\r\n /** Callback to be called when pasting content into the component */\r\n onPaste?: (event: React.ClipboardEvent<HTMLDivElement>) => void;\r\n /** Function to render the input */\r\n renderInput: (inputProps: InputProps, index: number) => React.ReactNode;\r\n /** Whether the first input should be auto focused */\r\n shouldAutoFocus?: boolean;\r\n /** Placeholder for the inputs */\r\n placeholder?: string;\r\n /** Function to render the separator */\r\n renderSeparator?: ((index: number) => React.ReactNode) | React.ReactNode;\r\n /** Style for the container */\r\n containerStyle?: React.CSSProperties | string;\r\n /** Style for the input */\r\n inputStyle?: React.CSSProperties | string;\r\n /** The type that will be passed to the input being rendered */\r\n inputType?: AllowedInputTypes;\r\n /** Do not apply the default styles to the inputs, will be removed in future versions */\r\n skipDefaultStyles?: boolean; // TODO: Remove in next major release\r\n}\r\n\r\nconst isStyleObject = (obj: unknown) => typeof obj === 'object' && obj !== null;\r\n\r\nconst OTPInput = ({\r\n value = '',\r\n numInputs = 4,\r\n onChange,\r\n onPaste,\r\n shouldBlurOnFinish,\r\n renderInput,\r\n shouldAutoFocus = false,\r\n inputType = 'text',\r\n renderSeparator,\r\n placeholder,\r\n containerStyle,\r\n inputStyle,\r\n skipDefaultStyles = false,\r\n}: OTPInputProps) => {\r\n const [activeInput, setActiveInput] = React.useState(0);\r\n const inputRefs = React.useRef<Array<HTMLInputElement | null>>([]);\r\n\r\n const getOTPValue = () => (value ? value.toString().split('') : []);\r\n\r\n const isInputNum = inputType === 'number' || inputType === 'tel';\r\n\r\n React.useEffect(() => {\r\n inputRefs.current = inputRefs.current.slice(0, numInputs);\r\n }, [numInputs]);\r\n\r\n React.useEffect(() => {\r\n if (shouldAutoFocus) {\r\n inputRefs.current[0]?.focus();\r\n }\r\n }, [shouldAutoFocus]);\r\n\r\n React.useEffect(() => {\r\n if (shouldBlurOnFinish && numInputs === value?.length) {\r\n inputRefs.current[numInputs - 1]?.blur();\r\n }\r\n }, [shouldBlurOnFinish, numInputs, value]);\r\n\r\n const getPlaceholderValue = () => {\r\n if (typeof placeholder === 'string') {\r\n if (placeholder.length === numInputs) {\r\n return placeholder;\r\n }\r\n\r\n if (placeholder.length > 0) {\r\n console.error('Length of the placeholder should be equal to the number of inputs.');\r\n }\r\n }\r\n return undefined;\r\n };\r\n\r\n const isInputValueValid = (value: string) => {\r\n const isTypeValid = isInputNum ? !isNaN(Number(value)) : typeof value === 'string';\r\n return isTypeValid && value.trim().length === 1;\r\n };\r\n\r\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n const { value } = event.target;\r\n\r\n if (isInputValueValid(value)) {\r\n changeCodeAtFocus(value);\r\n focusInput(activeInput + 1);\r\n }\r\n };\r\n\r\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n const { nativeEvent } = event;\r\n const value = event.target.value;\r\n\r\n if (!isInputValueValid(value)) {\r\n // Pasting from the native autofill suggestion on a mobile device can pass\r\n // the pasted string as one long input to one of the cells. This ensures\r\n // that we handle the full input and not just the first character.\r\n if (value.length === numInputs) {\r\n const hasInvalidInput = value.split('').some((cellInput) => !isInputValueValid(cellInput));\r\n if (!hasInvalidInput) {\r\n handleOTPChange(value.split(''));\r\n focusInput(numInputs - 1);\r\n }\r\n }\r\n\r\n // @ts-expect-error - This was added previously to handle and edge case\r\n // for dealing with keyCode \"229 Unidentified\" on Android. Check if this is\r\n // still needed.\r\n if (nativeEvent.data === null && nativeEvent.inputType === 'deleteContentBackward') {\r\n event.preventDefault();\r\n changeCodeAtFocus('');\r\n focusInput(activeInput - 1);\r\n }\r\n\r\n // Clear the input if it's not valid value because firefox allows\r\n // pasting non-numeric characters in a number type input\r\n event.target.value = '';\r\n }\r\n };\r\n\r\n const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => (index: number) => {\r\n setActiveInput(index);\r\n event.target.select();\r\n };\r\n\r\n const handleBlur = () => {\r\n setActiveInput(activeInput - 1);\r\n };\r\n\r\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\r\n const otp = getOTPValue();\r\n if ([event.code, event.key].includes('Backspace')) {\r\n event.preventDefault();\r\n changeCodeAtFocus('');\r\n focusInput(activeInput - 1);\r\n } else if (event.code === 'vite') {\r\n event.preventDefault();\r\n changeCodeAtFocus('');\r\n } else if (event.code === 'ArrowLeft') {\r\n event.preventDefault();\r\n focusInput(activeInput - 1);\r\n } else if (event.code === 'ArrowRight') {\r\n event.preventDefault();\r\n focusInput(activeInput + 1);\r\n }\r\n // React does not trigger onChange when the same value is entered\r\n // again. So we need to focus the next input manually in this case.\r\n else if (event.key === otp[activeInput]) {\r\n event.preventDefault();\r\n focusInput(activeInput + 1);\r\n } else if (\r\n event.code === 'Spacebar' ||\r\n event.code === 'Space' ||\r\n event.code === 'ArrowUp' ||\r\n event.code === 'ArrowDown'\r\n ) {\r\n event.preventDefault();\r\n }\r\n };\r\n\r\n const focusInput = (index: number) => {\r\n const activeInput = Math.max(Math.min(numInputs - 1, index), 0);\r\n\r\n if (inputRefs.current[activeInput]) {\r\n inputRefs.current[activeInput]?.focus();\r\n inputRefs.current[activeInput]?.select();\r\n setActiveInput(activeInput);\r\n }\r\n };\r\n\r\n const changeCodeAtFocus = (value: string) => {\r\n const otp = getOTPValue();\r\n otp[activeInput] = value[0];\r\n handleOTPChange(otp);\r\n };\r\n\r\n const handleOTPChange = (otp: Array<string>) => {\r\n const otpValue = otp.join('');\r\n onChange(otpValue);\r\n };\r\n\r\n const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {\r\n event.preventDefault();\r\n\r\n const otp = getOTPValue();\r\n let nextActiveInput = activeInput;\r\n\r\n // Get pastedData in an array of max size (num of inputs - current position)\r\n const pastedData = event.clipboardData\r\n .getData('text/plain')\r\n .slice(0, numInputs - activeInput)\r\n .split('');\r\n\r\n // Prevent pasting if the clipboard data contains non-numeric values for number inputs\r\n if (isInputNum && pastedData.some((value) => isNaN(Number(value)))) {\r\n return;\r\n }\r\n\r\n // Paste data from focused input onwards\r\n for (let pos = 0; pos < numInputs; ++pos) {\r\n if (pos >= activeInput && pastedData.length > 0) {\r\n otp[pos] = pastedData.shift() ?? '';\r\n nextActiveInput++;\r\n }\r\n }\r\n\r\n focusInput(nextActiveInput);\r\n handleOTPChange(otp);\r\n };\r\n\r\n return (\r\n <div\r\n style={Object.assign({ display: 'flex', alignItems: 'center' }, isStyleObject(containerStyle) && containerStyle)}\r\n className={typeof containerStyle === 'string' ? containerStyle : undefined}\r\n onPaste={onPaste}\r\n >\r\n {Array.from({ length: numInputs }, (_, index) => index).map((index) => (\r\n <React.Fragment key={index}>\r\n {renderInput(\r\n {\r\n value: getOTPValue()[index] ?? '',\r\n placeholder: getPlaceholderValue()?.[index] ?? undefined,\r\n ref: (element) => (inputRefs.current[index] = element),\r\n onChange: handleChange,\r\n onFocus: (event) => handleFocus(event)(index),\r\n onBlur: handleBlur,\r\n onKeyDown: handleKeyDown,\r\n onPaste: handlePaste,\r\n autoComplete: 'off',\r\n 'aria-label': `Please enter OTP character ${index + 1}`,\r\n style: Object.assign(\r\n !skipDefaultStyles ? ({ width: '1em', textAlign: 'center' } as const) : {},\r\n isStyleObject(inputStyle) ? inputStyle : {}\r\n ),\r\n className: typeof inputStyle === 'string' ? inputStyle : undefined,\r\n type: inputType,\r\n inputMode: isInputNum ? 'numeric' : 'text',\r\n onInput: handleInputChange,\r\n },\r\n index\r\n )}\r\n {index < numInputs - 1 && (typeof renderSeparator === 'function' ? renderSeparator(index) : renderSeparator)}\r\n </React.Fragment>\r\n ))}\r\n </div>\r\n );\r\n};\r\n\r\nexport type { OTPInputProps, InputProps, AllowedInputTypes };\r\nexport default OTPInput;\r\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED