npm - @matin_mortazavi/react-otp-input - Versions diffs - 1.0.0 → 1.0.1 - Mend

@matin_mortazavi/react-otp-input 1.0.0 → 1.0.1

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 (6) hide show

package/example/src/App.tsx CHANGED Viewed

@@ -109,10 +109,11 @@ function App() {
             <div className="margin-top--small">
               <OTPInput
                 inputStyle="inputStyle"
-                numInputs={numInputs}
+                numInputs={6}
                 onChange={handleOTPChange}
                 renderSeparator={<span>{separator}</span>}
                 value={otp}
+                shouldBlurOnFinish
                 placeholder={placeholder}
                 inputType={inputType}
                 renderInput={(props) => <input {...props} />}

package/lib/index.cjs CHANGED Viewed

@@ -25,7 +25,7 @@ var OTPInput = function (_a) {
     React__default["default"].useEffect(function () {
         var _a;
         if (shouldBlurOnFinish && numInputs === (value === null || value === void 0 ? void 0 : value.length)) {
-            (_a = inputRefs.current[numInputs]) === null || _a === void 0 ? void 0 : _a.blur();
+            (_a = inputRefs.current[numInputs - 1]) === null || _a === void 0 ? void 0 : _a.blur();
         }
     }, [shouldBlurOnFinish, numInputs, value]);
     var getPlaceholderValue = function () {
@@ -91,7 +91,7 @@ var OTPInput = function (_a) {
             changeCodeAtFocus('');
             focusInput(activeInput - 1);
         }
-        else if (event.code === 'Delete') {
+        else if (event.code === 'vite') {
             event.preventDefault();
             changeCodeAtFocus('');
         }

package/lib/index.cjs.map CHANGED Viewed

	@@ -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":";;;;;;;;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,GAAAA,yBAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAhD,WAAW,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,cAAc,QAAqB,CAAC;IACxD,IAAM,SAAS,GAAGA,yBAAK,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;IAEjEA,yBAAK,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;IAEhBA,yBAAK,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;IAEtBA,yBAAK,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,QACEA,yBAAA,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,QACrEA,wCAACA,yBAAK,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.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 Viewed

@@ -19,7 +19,7 @@ var OTPInput = function (_a) {
     React.useEffect(function () {
         var _a;
         if (shouldBlurOnFinish && numInputs === (value === null || value === void 0 ? void 0 : value.length)) {
-            (_a = inputRefs.current[numInputs]) === null || _a === void 0 ? void 0 : _a.blur();
+            (_a = inputRefs.current[numInputs - 1]) === null || _a === void 0 ? void 0 : _a.blur();
         }
     }, [shouldBlurOnFinish, numInputs, value]);
     var getPlaceholderValue = function () {
@@ -85,7 +85,7 @@ var OTPInput = function (_a) {
             changeCodeAtFocus('');
             focusInput(activeInput - 1);
         }
-        else if (event.code === 'Delete') {
+        else if (event.code === 'vite') {
             event.preventDefault();
             changeCodeAtFocus('');
         }

package/lib/index.esm.js.map CHANGED Viewed

	@@ -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":"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"}
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 Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@matin_mortazavi/react-otp-input",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A fully customizable, one-time password input component for the web built with React",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",