react-auth-code-input - npm Package Compare versions

Comparing version 3.2.0 to 3.2.1

dist/index.js

@@ -19,3 +19,3 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
   numeric: {
-    type: 'number',
+    type: 'tel',
     inputMode: 'numeric',
@@ -22,0 +22,0 @@ pattern: '[0-9]{1}',

dist/index.modern.js

 import React, { forwardRef, useRef, useImperativeHandle, useEffect } from 'react';
 
-const allowedCharactersValues = ['alpha', 'numeric', 'alphanumeric'];
-const propsMap = {
+var allowedCharactersValues = ['alpha', 'numeric', 'alphanumeric'];
+var propsMap = {
   alpha: {
@@ -16,3 +16,3 @@ type: 'text',
   numeric: {
-    type: 'number',
+    type: 'tel',
     inputMode: 'numeric',
@@ -24,44 +24,52 @@ pattern: '[0-9]{1}',
 };
-const AuthCode = forwardRef(({
-  allowedCharacters: _allowedCharacters = 'alphanumeric',
-  ariaLabel,
-  autoFocus: _autoFocus = true,
-  containerClassName,
-  disabled,
-  inputClassName,
-  isPassword: _isPassword = false,
-  length: _length = 6,
-  placeholder,
-  onChange
-}, ref) => {
-  if (isNaN(_length) || _length < 1) {
+var AuthCode = forwardRef(function (_ref, ref) {
+  var _ref$allowedCharacter = _ref.allowedCharacters,
+      allowedCharacters = _ref$allowedCharacter === void 0 ? 'alphanumeric' : _ref$allowedCharacter,
+      ariaLabel = _ref.ariaLabel,
+      _ref$autoFocus = _ref.autoFocus,
+      autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
+      containerClassName = _ref.containerClassName,
+      disabled = _ref.disabled,
+      inputClassName = _ref.inputClassName,
+      _ref$isPassword = _ref.isPassword,
+      isPassword = _ref$isPassword === void 0 ? false : _ref$isPassword,
+      _ref$length = _ref.length,
+      length = _ref$length === void 0 ? 6 : _ref$length,
+      placeholder = _ref.placeholder,
+      onChange = _ref.onChange;
+
+  if (isNaN(length) || length < 1) {
     throw new Error('Length should be a number and greater than 0');
   }
 
-  if (!allowedCharactersValues.some(value => value === _allowedCharacters)) {
+  if (!allowedCharactersValues.some(function (value) {
+    return value === allowedCharacters;
+  })) {
     throw new Error('Invalid value for allowedCharacters. Use alpha, numeric, or alphanumeric');
   }
 
-  const inputsRef = useRef([]);
-  const inputProps = propsMap[_allowedCharacters];
-  useImperativeHandle(ref, () => ({
-    focus: () => {
-      if (inputsRef.current) {
-        inputsRef.current[0].focus();
-      }
-    },
-    clear: () => {
-      if (inputsRef.current) {
-        for (let i = 0; i < inputsRef.current.length; i++) {
-          inputsRef.current[i].value = '';
+  var inputsRef = useRef([]);
+  var inputProps = propsMap[allowedCharacters];
+  useImperativeHandle(ref, function () {
+    return {
+      focus: function focus() {
+        if (inputsRef.current) {
+          inputsRef.current[0].focus();
         }
+      },
+      clear: function clear() {
+        if (inputsRef.current) {
+          for (var i = 0; i < inputsRef.current.length; i++) {
+            inputsRef.current[i].value = '';
+          }
 
-        inputsRef.current[0].focus();
+          inputsRef.current[0].focus();
+        }
+
+        sendResult();
       }
-
-      sendResult();
-    }
-  }));
-  useEffect(() => {
-    if (_autoFocus) {
+    };
+  });
+  useEffect(function () {
+    if (autoFocus) {
       inputsRef.current[0].focus();
@@ -71,14 +79,13 @@ }
 
-  const sendResult = () => {
-    const res = inputsRef.current.map(input => input.value).join('');
+  var sendResult = function sendResult() {
+    var res = inputsRef.current.map(function (input) {
+      return input.value;
+    }).join('');
     onChange && onChange(res);
   };
 
-  const handleOnChange = e => {
-    const {
-      target: {
-        value,
-        nextElementSibling
-      }
-    } = e;
+  var handleOnChange = function handleOnChange(e) {
+    var _e$target = e.target,
+        value = _e$target.value,
+        nextElementSibling = _e$target.nextElementSibling;
 
@@ -104,7 +111,5 @@ if (value.length > 1) {
 
-  const handleOnKeyDown = e => {
-    const {
-      key
-    } = e;
-    const target = e.target;
+  var handleOnKeyDown = function handleOnKeyDown(e) {
+    var key = e.key;
+    var target = e.target;
 
@@ -114,3 +119,3 @@ if (key === 'Backspace') {
         if (target.previousElementSibling !== null) {
-          const t = target.previousElementSibling;
+          var t = target.previousElementSibling;
           t.value = '';
@@ -128,13 +133,13 @@ t.focus();
 
-  const handleOnFocus = e => {
+  var handleOnFocus = function handleOnFocus(e) {
     e.target.select();
   };
 
-  const handleOnPaste = e => {
-    const pastedValue = e.clipboardData.getData('Text');
-    let currentInput = 0;
+  var handleOnPaste = function handleOnPaste(e) {
+    var pastedValue = e.clipboardData.getData('Text');
+    var currentInput = 0;
 
-    for (let i = 0; i < pastedValue.length; i++) {
-      const pastedCharacter = pastedValue.charAt(i);
-      const currentValue = inputsRef.current[currentInput].value;
+    for (var i = 0; i < pastedValue.length; i++) {
+      var pastedCharacter = pastedValue.charAt(i);
+      var currentValue = inputsRef.current[currentInput].value;
 
@@ -157,5 +162,5 @@ if (pastedCharacter.match(inputProps.pattern)) {
 
-  const inputs = [];
+  var inputs = [];
 
-  for (let i = 0; i < _length; i++) {
+  var _loop = function _loop(i) {
     inputs.push(React.createElement("input", Object.assign({
@@ -168,4 +173,4 @@ key: i,
     }, inputProps, {
-      type: _isPassword ? 'password' : inputProps.type,
-      ref: el => {
+      type: isPassword ? 'password' : inputProps.type,
+      ref: function ref(el) {
         inputsRef.current[i] = el;
@@ -176,6 +181,10 @@ },
       autoComplete: i === 0 ? 'one-time-code' : 'off',
-      "aria-label": ariaLabel ? `${ariaLabel}. Character ${i + 1}.` : `Character ${i + 1}.`,
+      "aria-label": ariaLabel ? ariaLabel + ". Character " + (i + 1) + "." : "Character " + (i + 1) + ".",
       disabled: disabled,
       placeholder: placeholder
     })));
+  };
+
+  for (var i = 0; i < length; i++) {
+    _loop(i);
   }
@@ -182,0 +191,0 @@

package.json

 {
   "name": "react-auth-code-input",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "description": "One-time password (OTP) React input component, uncontrolled, zero dependencies, fully tested.",
@@ -5,0 +5,0 @@ "author": "drac94",

README.md

@@ -138,2 +138,6 @@ ![image](https://user-images.githubusercontent.com/1719915/159784302-4bb83708-e993-4800-9bcf-091ecb709ef7.png)
 
+### 3.2.1
+
+- Fix allowing non-numeric characters being introduced in numeric mode on Safari and Firefox.
+
 ### 3.2.0
@@ -140,0 +144,0 @@

No alert changes

Improved metrics

Total package byte prevSize

43787

1.99%

Lines of code

359

1.99%

Number of lines in readme file

172

2.38%

No dependency changes