@matin_mortazavi/react-otp-input 1.0.0

package/lib/index.cjs

@@ -0,0 +1,186 @@
+'use strict';
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var isStyleObject = function (obj) { return typeof obj === 'object' && obj !== null; };
+var OTPInput = function (_a) {
+    var _b = _a.value, value = _b === void 0 ? '' : _b, _c = _a.numInputs, numInputs = _c === void 0 ? 4 : _c, onChange = _a.onChange, onPaste = _a.onPaste, shouldBlurOnFinish = _a.shouldBlurOnFinish, renderInput = _a.renderInput, _d = _a.shouldAutoFocus, shouldAutoFocus = _d === void 0 ? false : _d, _e = _a.inputType, inputType = _e === void 0 ? 'text' : _e, renderSeparator = _a.renderSeparator, placeholder = _a.placeholder, containerStyle = _a.containerStyle, inputStyle = _a.inputStyle, _f = _a.skipDefaultStyles, skipDefaultStyles = _f === void 0 ? false : _f;
+    var _g = React__default["default"].useState(0), activeInput = _g[0], setActiveInput = _g[1];
+    var inputRefs = React__default["default"].useRef([]);
+    var getOTPValue = function () { return (value ? value.toString().split('') : []); };
+    var isInputNum = inputType === 'number' || inputType === 'tel';
+    React__default["default"].useEffect(function () {
+        inputRefs.current = inputRefs.current.slice(0, numInputs);
+    }, [numInputs]);
+    React__default["default"].useEffect(function () {
+        var _a;
+        if (shouldAutoFocus) {
+            (_a = inputRefs.current[0]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [shouldAutoFocus]);
+    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();
+        }
+    }, [shouldBlurOnFinish, numInputs, value]);
+    var getPlaceholderValue = function () {
+        if (typeof placeholder === 'string') {
+            if (placeholder.length === numInputs) {
+                return placeholder;
+            }
+            if (placeholder.length > 0) {
+                console.error('Length of the placeholder should be equal to the number of inputs.');
+            }
+        }
+        return undefined;
+    };
+    var isInputValueValid = function (value) {
+        var isTypeValid = isInputNum ? !isNaN(Number(value)) : typeof value === 'string';
+        return isTypeValid && value.trim().length === 1;
+    };
+    var handleChange = function (event) {
+        var value = event.target.value;
+        if (isInputValueValid(value)) {
+            changeCodeAtFocus(value);
+            focusInput(activeInput + 1);
+        }
+    };
+    var handleInputChange = function (event) {
+        var nativeEvent = event.nativeEvent;
+        var value = event.target.value;
+        if (!isInputValueValid(value)) {
+            // Pasting from the native autofill suggestion on a mobile device can pass
+            // the pasted string as one long input to one of the cells. This ensures
+            // that we handle the full input and not just the first character.
+            if (value.length === numInputs) {
+                var hasInvalidInput = value.split('').some(function (cellInput) { return !isInputValueValid(cellInput); });
+                if (!hasInvalidInput) {
+                    handleOTPChange(value.split(''));
+                    focusInput(numInputs - 1);
+                }
+            }
+            // @ts-expect-error - This was added previously to handle and edge case
+            // for dealing with keyCode "229 Unidentified" on Android. Check if this is
+            // still needed.
+            if (nativeEvent.data === null && nativeEvent.inputType === 'deleteContentBackward') {
+                event.preventDefault();
+                changeCodeAtFocus('');
+                focusInput(activeInput - 1);
+            }
+            // Clear the input if it's not valid value because firefox allows
+            // pasting non-numeric characters in a number type input
+            event.target.value = '';
+        }
+    };
+    var handleFocus = function (event) { return function (index) {
+        setActiveInput(index);
+        event.target.select();
+    }; };
+    var handleBlur = function () {
+        setActiveInput(activeInput - 1);
+    };
+    var handleKeyDown = function (event) {
+        var otp = getOTPValue();
+        if ([event.code, event.key].includes('Backspace')) {
+            event.preventDefault();
+            changeCodeAtFocus('');
+            focusInput(activeInput - 1);
+        }
+        else if (event.code === 'Delete') {
+            event.preventDefault();
+            changeCodeAtFocus('');
+        }
+        else if (event.code === 'ArrowLeft') {
+            event.preventDefault();
+            focusInput(activeInput - 1);
+        }
+        else if (event.code === 'ArrowRight') {
+            event.preventDefault();
+            focusInput(activeInput + 1);
+        }
+        // React does not trigger onChange when the same value is entered
+        // again. So we need to focus the next input manually in this case.
+        else if (event.key === otp[activeInput]) {
+            event.preventDefault();
+            focusInput(activeInput + 1);
+        }
+        else if (event.code === 'Spacebar' ||
+            event.code === 'Space' ||
+            event.code === 'ArrowUp' ||
+            event.code === 'ArrowDown') {
+            event.preventDefault();
+        }
+    };
+    var focusInput = function (index) {
+        var _a, _b;
+        var activeInput = Math.max(Math.min(numInputs - 1, index), 0);
+        if (inputRefs.current[activeInput]) {
+            (_a = inputRefs.current[activeInput]) === null || _a === void 0 ? void 0 : _a.focus();
+            (_b = inputRefs.current[activeInput]) === null || _b === void 0 ? void 0 : _b.select();
+            setActiveInput(activeInput);
+        }
+    };
+    var changeCodeAtFocus = function (value) {
+        var otp = getOTPValue();
+        otp[activeInput] = value[0];
+        handleOTPChange(otp);
+    };
+    var handleOTPChange = function (otp) {
+        var otpValue = otp.join('');
+        onChange(otpValue);
+    };
+    var handlePaste = function (event) {
+        var _a;
+        event.preventDefault();
+        var otp = getOTPValue();
+        var nextActiveInput = activeInput;
+        // Get pastedData in an array of max size (num of inputs - current position)
+        var pastedData = event.clipboardData
+            .getData('text/plain')
+            .slice(0, numInputs - activeInput)
+            .split('');
+        // Prevent pasting if the clipboard data contains non-numeric values for number inputs
+        if (isInputNum && pastedData.some(function (value) { return isNaN(Number(value)); })) {
+            return;
+        }
+        // Paste data from focused input onwards
+        for (var pos = 0; pos < numInputs; ++pos) {
+            if (pos >= activeInput && pastedData.length > 0) {
+                otp[pos] = (_a = pastedData.shift()) !== null && _a !== void 0 ? _a : '';
+                nextActiveInput++;
+            }
+        }
+        focusInput(nextActiveInput);
+        handleOTPChange(otp);
+    };
+    return (React__default["default"].createElement("div", { style: Object.assign({ display: 'flex', alignItems: 'center' }, isStyleObject(containerStyle) && containerStyle), className: typeof containerStyle === 'string' ? containerStyle : undefined, onPaste: onPaste }, Array.from({ length: numInputs }, function (_, index) { return index; }).map(function (index) {
+        var _a, _b, _c;
+        return (React__default["default"].createElement(React__default["default"].Fragment, { key: index },
+            renderInput({
+                value: (_a = getOTPValue()[index]) !== null && _a !== void 0 ? _a : '',
+                placeholder: (_c = (_b = getPlaceholderValue()) === null || _b === void 0 ? void 0 : _b[index]) !== null && _c !== void 0 ? _c : undefined,
+                ref: function (element) { return (inputRefs.current[index] = element); },
+                onChange: handleChange,
+                onFocus: function (event) { return handleFocus(event)(index); },
+                onBlur: handleBlur,
+                onKeyDown: handleKeyDown,
+                onPaste: handlePaste,
+                autoComplete: 'off',
+                'aria-label': "Please enter OTP character ".concat(index + 1),
+                style: Object.assign(!skipDefaultStyles ? { width: '1em', textAlign: 'center' } : {}, isStyleObject(inputStyle) ? inputStyle : {}),
+                className: typeof inputStyle === 'string' ? inputStyle : undefined,
+                type: inputType,
+                inputMode: isInputNum ? 'numeric' : 'text',
+                onInput: handleInputChange,
+            }, index),
+            index < numInputs - 1 && (typeof renderSeparator === 'function' ? renderSeparator(index) : renderSeparator)));
+    })));
+};
+
+module.exports = OTPInput;
+//# sourceMappingURL=index.cjs.map

package/lib/index.cjs.map

@@ -0,0 +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;;;;"}

package/lib/index.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+type AllowedInputTypes = 'password' | 'text' | 'number' | 'tel';
+type InputProps = Required<Pick<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onPaste' | 'aria-label' | 'autoComplete' | 'style' | 'inputMode' | 'onInput'> & {
+    ref: React.RefCallback<HTMLInputElement>;
+    placeholder: string | undefined;
+    className: string | undefined;
+    type: AllowedInputTypes;
+}>;
+interface OTPInputProps {
+    /** Value of the OTP input */
+    value?: string;
+    /** Number of OTP inputs to be rendered */
+    numInputs?: number;
+    /** Blur after last char entered (close keyboard on mobile) */
+    shouldBlurOnFinish?: boolean;
+    /** Callback to be called when the OTP value changes */
+    onChange: (otp: string) => void;
+    /** Callback to be called when pasting content into the component */
+    onPaste?: (event: React.ClipboardEvent<HTMLDivElement>) => void;
+    /** Function to render the input */
+    renderInput: (inputProps: InputProps, index: number) => React.ReactNode;
+    /** Whether the first input should be auto focused */
+    shouldAutoFocus?: boolean;
+    /** Placeholder for the inputs */
+    placeholder?: string;
+    /** Function to render the separator */
+    renderSeparator?: ((index: number) => React.ReactNode) | React.ReactNode;
+    /** Style for the container */
+    containerStyle?: React.CSSProperties | string;
+    /** Style for the input */
+    inputStyle?: React.CSSProperties | string;
+    /** The type that will be passed to the input being rendered */
+    inputType?: AllowedInputTypes;
+    /** Do not apply the default styles to the inputs, will be removed in future versions */
+    skipDefaultStyles?: boolean;
+}
+declare const OTPInput: ({ value, numInputs, onChange, onPaste, shouldBlurOnFinish, renderInput, shouldAutoFocus, inputType, renderSeparator, placeholder, containerStyle, inputStyle, skipDefaultStyles, }: OTPInputProps) => JSX.Element;
+export type { OTPInputProps, InputProps, AllowedInputTypes };
+export default OTPInput;

package/lib/index.esm.js

@@ -0,0 +1,180 @@
+import React from 'react';
+
+var isStyleObject = function (obj) { return typeof obj === 'object' && obj !== null; };
+var OTPInput = function (_a) {
+    var _b = _a.value, value = _b === void 0 ? '' : _b, _c = _a.numInputs, numInputs = _c === void 0 ? 4 : _c, onChange = _a.onChange, onPaste = _a.onPaste, shouldBlurOnFinish = _a.shouldBlurOnFinish, renderInput = _a.renderInput, _d = _a.shouldAutoFocus, shouldAutoFocus = _d === void 0 ? false : _d, _e = _a.inputType, inputType = _e === void 0 ? 'text' : _e, renderSeparator = _a.renderSeparator, placeholder = _a.placeholder, containerStyle = _a.containerStyle, inputStyle = _a.inputStyle, _f = _a.skipDefaultStyles, skipDefaultStyles = _f === void 0 ? false : _f;
+    var _g = React.useState(0), activeInput = _g[0], setActiveInput = _g[1];
+    var inputRefs = React.useRef([]);
+    var getOTPValue = function () { return (value ? value.toString().split('') : []); };
+    var isInputNum = inputType === 'number' || inputType === 'tel';
+    React.useEffect(function () {
+        inputRefs.current = inputRefs.current.slice(0, numInputs);
+    }, [numInputs]);
+    React.useEffect(function () {
+        var _a;
+        if (shouldAutoFocus) {
+            (_a = inputRefs.current[0]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [shouldAutoFocus]);
+    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();
+        }
+    }, [shouldBlurOnFinish, numInputs, value]);
+    var getPlaceholderValue = function () {
+        if (typeof placeholder === 'string') {
+            if (placeholder.length === numInputs) {
+                return placeholder;
+            }
+            if (placeholder.length > 0) {
+                console.error('Length of the placeholder should be equal to the number of inputs.');
+            }
+        }
+        return undefined;
+    };
+    var isInputValueValid = function (value) {
+        var isTypeValid = isInputNum ? !isNaN(Number(value)) : typeof value === 'string';
+        return isTypeValid && value.trim().length === 1;
+    };
+    var handleChange = function (event) {
+        var value = event.target.value;
+        if (isInputValueValid(value)) {
+            changeCodeAtFocus(value);
+            focusInput(activeInput + 1);
+        }
+    };
+    var handleInputChange = function (event) {
+        var nativeEvent = event.nativeEvent;
+        var value = event.target.value;
+        if (!isInputValueValid(value)) {
+            // Pasting from the native autofill suggestion on a mobile device can pass
+            // the pasted string as one long input to one of the cells. This ensures
+            // that we handle the full input and not just the first character.
+            if (value.length === numInputs) {
+                var hasInvalidInput = value.split('').some(function (cellInput) { return !isInputValueValid(cellInput); });
+                if (!hasInvalidInput) {
+                    handleOTPChange(value.split(''));
+                    focusInput(numInputs - 1);
+                }
+            }
+            // @ts-expect-error - This was added previously to handle and edge case
+            // for dealing with keyCode "229 Unidentified" on Android. Check if this is
+            // still needed.
+            if (nativeEvent.data === null && nativeEvent.inputType === 'deleteContentBackward') {
+                event.preventDefault();
+                changeCodeAtFocus('');
+                focusInput(activeInput - 1);
+            }
+            // Clear the input if it's not valid value because firefox allows
+            // pasting non-numeric characters in a number type input
+            event.target.value = '';
+        }
+    };
+    var handleFocus = function (event) { return function (index) {
+        setActiveInput(index);
+        event.target.select();
+    }; };
+    var handleBlur = function () {
+        setActiveInput(activeInput - 1);
+    };
+    var handleKeyDown = function (event) {
+        var otp = getOTPValue();
+        if ([event.code, event.key].includes('Backspace')) {
+            event.preventDefault();
+            changeCodeAtFocus('');
+            focusInput(activeInput - 1);
+        }
+        else if (event.code === 'Delete') {
+            event.preventDefault();
+            changeCodeAtFocus('');
+        }
+        else if (event.code === 'ArrowLeft') {
+            event.preventDefault();
+            focusInput(activeInput - 1);
+        }
+        else if (event.code === 'ArrowRight') {
+            event.preventDefault();
+            focusInput(activeInput + 1);
+        }
+        // React does not trigger onChange when the same value is entered
+        // again. So we need to focus the next input manually in this case.
+        else if (event.key === otp[activeInput]) {
+            event.preventDefault();
+            focusInput(activeInput + 1);
+        }
+        else if (event.code === 'Spacebar' ||
+            event.code === 'Space' ||
+            event.code === 'ArrowUp' ||
+            event.code === 'ArrowDown') {
+            event.preventDefault();
+        }
+    };
+    var focusInput = function (index) {
+        var _a, _b;
+        var activeInput = Math.max(Math.min(numInputs - 1, index), 0);
+        if (inputRefs.current[activeInput]) {
+            (_a = inputRefs.current[activeInput]) === null || _a === void 0 ? void 0 : _a.focus();
+            (_b = inputRefs.current[activeInput]) === null || _b === void 0 ? void 0 : _b.select();
+            setActiveInput(activeInput);
+        }
+    };
+    var changeCodeAtFocus = function (value) {
+        var otp = getOTPValue();
+        otp[activeInput] = value[0];
+        handleOTPChange(otp);
+    };
+    var handleOTPChange = function (otp) {
+        var otpValue = otp.join('');
+        onChange(otpValue);
+    };
+    var handlePaste = function (event) {
+        var _a;
+        event.preventDefault();
+        var otp = getOTPValue();
+        var nextActiveInput = activeInput;
+        // Get pastedData in an array of max size (num of inputs - current position)
+        var pastedData = event.clipboardData
+            .getData('text/plain')
+            .slice(0, numInputs - activeInput)
+            .split('');
+        // Prevent pasting if the clipboard data contains non-numeric values for number inputs
+        if (isInputNum && pastedData.some(function (value) { return isNaN(Number(value)); })) {
+            return;
+        }
+        // Paste data from focused input onwards
+        for (var pos = 0; pos < numInputs; ++pos) {
+            if (pos >= activeInput && pastedData.length > 0) {
+                otp[pos] = (_a = pastedData.shift()) !== null && _a !== void 0 ? _a : '';
+                nextActiveInput++;
+            }
+        }
+        focusInput(nextActiveInput);
+        handleOTPChange(otp);
+    };
+    return (React.createElement("div", { style: Object.assign({ display: 'flex', alignItems: 'center' }, isStyleObject(containerStyle) && containerStyle), className: typeof containerStyle === 'string' ? containerStyle : undefined, onPaste: onPaste }, Array.from({ length: numInputs }, function (_, index) { return index; }).map(function (index) {
+        var _a, _b, _c;
+        return (React.createElement(React.Fragment, { key: index },
+            renderInput({
+                value: (_a = getOTPValue()[index]) !== null && _a !== void 0 ? _a : '',
+                placeholder: (_c = (_b = getPlaceholderValue()) === null || _b === void 0 ? void 0 : _b[index]) !== null && _c !== void 0 ? _c : undefined,
+                ref: function (element) { return (inputRefs.current[index] = element); },
+                onChange: handleChange,
+                onFocus: function (event) { return handleFocus(event)(index); },
+                onBlur: handleBlur,
+                onKeyDown: handleKeyDown,
+                onPaste: handlePaste,
+                autoComplete: 'off',
+                'aria-label': "Please enter OTP character ".concat(index + 1),
+                style: Object.assign(!skipDefaultStyles ? { width: '1em', textAlign: 'center' } : {}, isStyleObject(inputStyle) ? inputStyle : {}),
+                className: typeof inputStyle === 'string' ? inputStyle : undefined,
+                type: inputType,
+                inputMode: isInputNum ? 'numeric' : 'text',
+                onInput: handleInputChange,
+            }, index),
+            index < numInputs - 1 && (typeof renderSeparator === 'function' ? renderSeparator(index) : renderSeparator)));
+    })));
+};
+
+export { OTPInput as default };
+//# sourceMappingURL=index.esm.js.map

package/lib/index.esm.js.map

@@ -0,0 +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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"}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@matin_mortazavi/react-otp-input",
+  "version": "1.0.0",
+  "description": "A fully customizable, one-time password input component for the web built with React",
+  "main": "lib/index.js",
+  "module": "lib/index.esm.js",
+  "types": "lib/index.d.ts",
+  "scripts": {
+    "build": "rollup -c",
+    "format": "prettier --write \"**/*.{html,css,js,jsx}\"",
+    "lint": "eslint 'src/**/*.{js,jsx}' --quiet",
+    "lint:fix": "eslint 'src/**/*.{js,jsx}' --fix",
+    "prepublishOnly": "rm -rf dist && npm run build",
+    "example:build": "cd example && yarn && yarn build"
+  },
+  "keywords": [
+    "otp",
+    "input",
+    "code",
+    "passcode",
+    "component"
+  ],
+  "peerDependencies": {
+    "react": ">=16.8.6 || ^17.0.0 || ^18.0.0",
+    "react-dom": ">=16.8.6 || ^17.0.0 || ^18.0.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-typescript": "11.0.0",
+    "@types/react": "18.0.28",
+    "@types/react-dom": "18.0.11",
+    "@typescript-eslint/eslint-plugin": "5.55.0",
+    "@typescript-eslint/parser": "5.55.0",
+    "concurrently": "6.2.0",
+    "eslint": "7.27.0",
+    "eslint-config-prettier": "8.3.0",
+    "eslint-plugin-import": "2.23.3",
+    "eslint-plugin-jsx-a11y": "6.4.1",
+    "eslint-plugin-prettier": "3.4.0",
+    "eslint-plugin-react": "7.23.2",
+    "eslint-plugin-react-hooks": "4.2.0",
+    "gh-pages": "3.2.3",
+    "prettier": "2.3.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "rollup": "2.79.1",
+    "rollup-plugin-peer-deps-external": "2.2.4",
+    "typescript": "5.0.2"
+  },
+  "author": "Matin Mortazavi",
+  "license": "MIT",
+  "homepage": "https://github.com/matin-mortazavi/react-otp-input",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/matin-mortazavi/react-otp-input"
+  },
+  "bugs": {
+    "url": "https://github.com/matin-mortazavi/react-otp-input/issues"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,19 @@
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import typescript from '@rollup/plugin-typescript';
+
+export default {
+  input: 'src/index.tsx',
+  output: [
+    {
+      file: 'lib/index.cjs',
+      format: 'cjs',
+      sourcemap: true,
+    },
+    {
+      file: 'lib/index.esm.js',
+      format: 'esm',
+      sourcemap: true,
+    },
+  ],
+  plugins: [peerDepsExternal(), typescript()],
+};

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "outDir": "lib/esm",
+    "module": "esnext",
+    "declaration": true,
+    "target": "es5",
+    "lib": ["es6", "dom", "es2016", "es2017"],
+    "jsx": "react",
+    "moduleResolution": "node",
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "esModuleInterop": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}