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

Comparing version 1.0.1 to 1.0.2

CHANGELOG.md

@@ -5,2 +5,11 @@ # Changelog
 
+### [1.0.2](https://github.com/luffy84217/react-input-pin-code/compare/v1.0.1...v1.0.2) (2021-12-06)
+
+
+### Bug Fixes
+
+* border color cannot be shorthand hex notation ([a9bb7c3](https://github.com/luffy84217/react-input-pin-code/commit/a9bb7c383f5de6087dc4b661139484433d71b7c6))
+* input pattern attribue is null by default ([c5208d6](https://github.com/luffy84217/react-input-pin-code/commit/c5208d6b497cea27068a8f1281b882d8a8789fbe))
+* typo ([b77efe1](https://github.com/luffy84217/react-input-pin-code/commit/b77efe155551ea5ca37495c5769ef43b9bdec560))
+
 ### [1.0.1](https://github.com/luffy84217/react-input-pin-code/compare/v1.0.0...v1.0.1) (2021-11-25)
@@ -7,0 +16,0 @@

dist/index.esm.js

@@ -70,10 +70,18 @@ import React, { useRef, useMemo, useEffect, useState } from 'react';
     }
+    else {
+        return undefined;
+    }
 };
 var hexToRgb = function (hex) {
-    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    if (hex === undefined)
+        return null;
+    var shorthand = /^#?[a-fA-Z\d]{3}$/i.test(hex);
+    var result = shorthand
+        ? /^#?([a-f\d])([a-f\d])([a-f\d])$/i.exec(hex)
+        : /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
     return result
         ? {
-            r: parseInt(result[1], 16),
-            g: parseInt(result[2], 16),
-            b: parseInt(result[3], 16),
+            r: parseInt(shorthand ? result[1] + result[1] : result[1], 16),
+            g: parseInt(shorthand ? result[2] + result[2] : result[2], 16),
+            b: parseInt(shorthand ? result[3] + result[3] : result[3], 16),
         }
@@ -94,4 +102,2 @@ : null;
             return '3rem';
-        default:
-            return '2.5rem';
     }
@@ -109,4 +115,2 @@ }, function (_a) {
             return '3rem';
-        default:
-            return '2.5rem';
     }
@@ -124,4 +128,2 @@ }, function (_a) {
             return '1.125rem';
-        default:
-            return '1rem';
     }
@@ -138,3 +140,3 @@ }, function (_a) {
     return completed && showState
-        ? "&:valid {\n    border-color: " + (rgb ? "rgb(" + rgb.r + ", " + rgb.b + ", " + rgb.g + ")" : 'rgb(25, 135, 84)') + ";\n    box-shadow: " + (rgb ? "rgb(" + rgb.r + ", " + rgb.b + ", " + rgb.g + ")" : 'rgb(25, 135, 84)') + " 0px 0px 0px 1px;\n    background-color: " + (rgb ? "rgba(" + rgb.r + ", " + rgb.b + ", " + rgb.g + ", 0.1)" : 'rgba(25, 135, 84, 0.1)') + ";\n  }"
+        ? "&:valid {\n    border-color: ".concat(rgb ? "rgb(".concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b, ")") : 'rgb(25, 135, 84)', ";\n    box-shadow: ").concat(rgb ? "rgb(".concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b, ")") : 'rgb(25, 135, 84)', " 0px 0px 0px 1px;\n    background-color: ").concat(rgb ? "rgba(".concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b, ", 0.1)") : 'rgba(25, 135, 84, 0.1)', ";\n  }")
         : '';
@@ -145,3 +147,3 @@ }, function (_a) {
     return showState
-        ? "&:invalid {\n    border-color: " + (rgb ? "rgb(" + rgb.r + ", " + rgb.b + ", " + rgb.g + ")" : 'rgb(220, 53, 69)') + ";\n    box-shadow: " + (rgb ? "rgb(" + rgb.r + ", " + rgb.b + ", " + rgb.g + ")" : 'rgb(220, 53, 69)') + " 0px 0px 0px 1px;\n    background-color: " + (rgb ? "rgba(" + rgb.r + ", " + rgb.b + ", " + rgb.g + ", 0.1)" : 'rgb(220, 53, 69, 0.1)') + ";\n  }"
+        ? "&:invalid {\n    border-color: ".concat(rgb ? "rgb(".concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b, ")") : 'rgb(220, 53, 69)', ";\n    box-shadow: ").concat(rgb ? "rgb(".concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b, ")") : 'rgb(220, 53, 69)', " 0px 0px 0px 1px;\n    background-color: ").concat(rgb ? "rgba(".concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b, ", 0.1)") : 'rgb(220, 53, 69, 0.1)', ";\n  }")
         : '';
@@ -255,3 +257,3 @@ });
     }, [autoFocus, index]);
-    return (React.createElement(Input, { ref: inputRef, type: mask ? 'password' : 'text', "aira-describedby": ariaDescribedby, "aria-disabled": disabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-required": required, autoComplete: autoComplete, disabled: disabled, name: name, id: id && id + "-" + index, inputMode: inputMode || (type === 'number' ? 'numeric' : 'text'), required: required, placeholder: placeholder, pattern: pattern, value: value, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: handleInputFocus, onBlur: handleInputBlur, completed: completed, showState: showState, sizing: size, style: inputStyle, errorBorderColor: errorBorderColor, focusBorderColor: focusBorderColor, validBorderColor: validBorderColor, "data-index": index }));
+    return (React.createElement(Input, { ref: inputRef, type: mask ? 'password' : 'text', "aira-describedby": ariaDescribedby, "aria-disabled": disabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-required": required, autoComplete: autoComplete, disabled: disabled, name: name, id: id && "".concat(id, "-").concat(index), inputMode: inputMode || (type === 'number' ? 'numeric' : 'text'), required: required, placeholder: placeholder, pattern: pattern, value: value, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: handleInputFocus, onBlur: handleInputBlur, completed: completed, showState: showState, sizing: size, style: inputStyle, errorBorderColor: errorBorderColor, focusBorderColor: focusBorderColor, validBorderColor: validBorderColor, "data-index": index }));
 };
@@ -293,3 +295,3 @@ PinInputField.displayName = 'PinInputField';
     }
-    return (React.createElement(PinInputContainer, { style: props.containerStyle }, props.values.map(function (value, i) { return (React.createElement(PinInputField, __assign({ key: props.id ? props.id + "-" + i : i, index: i, value: value, completed: completed }, props))); })));
+    return (React.createElement(PinInputContainer, { style: props.containerStyle }, props.values.map(function (value, i) { return (React.createElement(PinInputField, __assign({ key: props.id ? "".concat(props.id, "-").concat(i) : i, index: i, value: value, completed: completed }, props))); })));
 };
@@ -296,0 +298,0 @@ PinInput.displayName = 'PinInput';

dist/index.esm.min.js

@@ -1,2 +0,2 @@
-import e,{useRef as r,useMemo as n,useEffect as t,useState as o}from"react";import a from"prop-types";import i from"styled-components";
+import e,{useRef as n,useMemo as r,useEffect as t,useState as o}from"react";import a from"prop-types";import i from"styled-components";
 /*! *****************************************************************************
@@ -15,2 +15,2 @@ Copyright (c) Microsoft Corporation.
 PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */var l=function(){return l=Object.assign||function(e){for(var r,n=1,t=arguments.length;n<t;n++)for(var o in r=arguments[n])Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);return e},l.apply(this,arguments)};function u(e,r){return Object.defineProperty?Object.defineProperty(e,"raw",{value:r}):e.raw=r,e}var s,c,d=i.div(s||(s=u(["\n  display: flex;\n  align-items: center;\n"],["\n  display: flex;\n  align-items: center;\n"]))),p=function(e){var r;return Array.isArray(e)?(r=new RegExp(e.join("|")).toString()).slice(1,r.length-1):"string"==typeof e?(r=new RegExp(e.split("").join("|")).toString()).slice(1,r.length-1):e instanceof RegExp?(r=e.toString()).slice(1,r.length-1):void 0},f=function(e){var r=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return r?{r:parseInt(r[1],16),g:parseInt(r[2],16),b:parseInt(r[3],16)}:null},b=i.input(c||(c=u(["\n  width: ",";\n  height: ",";\n  margin-right: 0.375rem;\n  outline: transparent solid 2px;\n  outline-offset: 2px;\n  font-size: ",";\n  text-align: center;\n  border-radius: 0.375rem;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #cccccc;\n  background-color: inherit;\n  box-sizing: border-box;\n  &:focus {\n    border-color: ",";\n    box-shadow: "," 0px\n      0px 0px 1px;\n  }\n  &:last-child {\n    margin-right: 0;\n  }\n  ","\n  ","\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n"],["\n  width: ",";\n  height: ",";\n  margin-right: 0.375rem;\n  outline: transparent solid 2px;\n  outline-offset: 2px;\n  font-size: ",";\n  text-align: center;\n  border-radius: 0.375rem;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #cccccc;\n  background-color: inherit;\n  box-sizing: border-box;\n  &:focus {\n    border-color: ",";\n    box-shadow: "," 0px\n      0px 0px 1px;\n  }\n  &:last-child {\n    margin-right: 0;\n  }\n  ","\n  ","\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n"])),(function(e){switch(e.sizing){case"xs":return"1.5rem";case"sm":return"2rem";default:return"2.5rem";case"lg":return"3rem"}}),(function(e){switch(e.sizing){case"xs":return"1.5rem";case"sm":return"2rem";default:return"2.5rem";case"lg":return"3rem"}}),(function(e){switch(e.sizing){case"xs":return"0.75rem";case"sm":return"0.875rem";default:return"1rem";case"lg":return"1.125rem"}}),(function(e){return e.focusBorderColor||"#0d6efd"}),(function(e){return e.focusBorderColor||"#0d6efd"}),(function(e){var r=e.completed,n=e.showState,t=e.validBorderColor,o=f(t);return r&&n?"&:valid {\n    border-color: "+(o?"rgb("+o.r+", "+o.b+", "+o.g+")":"rgb(25, 135, 84)")+";\n    box-shadow: "+(o?"rgb("+o.r+", "+o.b+", "+o.g+")":"rgb(25, 135, 84)")+" 0px 0px 0px 1px;\n    background-color: "+(o?"rgba("+o.r+", "+o.b+", "+o.g+", 0.1)":"rgba(25, 135, 84, 0.1)")+";\n  }":""}),(function(e){var r=e.showState,n=e.errorBorderColor,t=f(n);return r?"&:invalid {\n    border-color: "+(t?"rgb("+t.r+", "+t.b+", "+t.g+")":"rgb(220, 53, 69)")+";\n    box-shadow: "+(t?"rgb("+t.r+", "+t.b+", "+t.g+")":"rgb(220, 53, 69)")+" 0px 0px 0px 1px;\n    background-color: "+(t?"rgba("+t.r+", "+t.b+", "+t.g+", 0.1)":"rgb(220, 53, 69, 0.1)")+";\n  }":""})),g={index:a.number,values:a.arrayOf(a.string),onChange:a.func},m=function(o){var a=o.index,i=o.value,l=o.values,u=o.completed,s=o.type,c=o.mask,d=o.size,f=o.validate,g=o.format,m=o.showState,y=o.autoFocus,h=o.autoTab,x=o["aria-describedby"],v=o["aria-label"],w=o["aria-labelledby"],O=o.autoComplete,S=o.disabled,C=o.inputMode,E=o.id,j=o.name,z=o.placeholder,B=o.required,P=o.inputStyle,T=o.errorBorderColor,k=o.focusBorderColor,I=o.validBorderColor,F=o.onChange,A=o.onBlur,R=o.onFocus,q=o.onKeyDown,M=r(),V=n((function(){return p(f)}),[f]);return t((function(){y&&0===a&&M.current.focus()}),[y,a]),e.createElement(b,{ref:M,type:c?"password":"text","aira-describedby":x,"aria-disabled":S,"aria-label":v,"aria-labelledby":w,"aria-required":B,autoComplete:O,disabled:S,name:j,id:E&&E+"-"+a,inputMode:C||("number"===s?"numeric":"text"),required:B,placeholder:z,pattern:V,value:i,onChange:function(e){var r,n=l[a],t=e.target.value,o=function(e,r){for(var n=0,t=r.length,o=e.length;n<t;n++,o++)e[o]=r[n];return e}([],l);if(n?t.length>2?r=t.split(""):""===t?r="":n[0]===t[0]?r=t[1]:n[0]===t[1]&&(r=t[0]):r=t.length>1?t.split(""):t,F){var i="number"===s?/(^$)|(\d+)/:/.*/,u=void 0;if(g&&(r=Array.isArray(r)?r.map((function(e){return g(e)})):g(r)),Array.isArray(r)?(r.forEach((function(e,r){return o[a+r]=e})),u=r.every((function(e){return i.test(e)}))):(o[a]=r,u=i.test(r)),u){F(r,a,o);for(var c=M.current,d=0;d<r.length;d++)c=c.nextElementSibling;r&&h&&c instanceof HTMLInputElement&&c.focus()}}},onKeyDown:function(e){if("Backspace"===e.key&&h&&""===l[a]&&a>0){var r=M.current.previousElementSibling;r instanceof HTMLInputElement&&r.focus()}q&&q(e)},onFocus:function(e){e.target.placeholder="",R&&R(e)},onBlur:function(e){e.target.placeholder=z,A&&A(e)},completed:u,showState:m,sizing:d,style:P,errorBorderColor:T,focusBorderColor:k,validBorderColor:I,"data-index":a})};m.displayName="PinInputField",m.propTypes=g;var y={values:a.arrayOf(a.string).isRequired,type:a.oneOf(["number","text"]),mask:a.bool,validate:a.oneOfType([a.string,a.arrayOf(a.string),a.instanceOf(RegExp)]),format:a.func,showState:a.bool,size:a.oneOf(["xs","sm","md","lg"]),autoFocus:a.bool,autoTab:a.bool,containerStyle:a.object,inputStyle:a.object,onChange:a.func},h=function(r){var t=n((function(){return r.values.every((function(e){return e}))}),[r.values]);return t&&r.onComplete&&(r.validate?r.values.every((function(e){return new RegExp(p(r.validate)).test(e)}))&&r.onComplete(r.values):r.onComplete(r.values)),e.createElement(d,{style:r.containerStyle},r.values.map((function(n,o){return e.createElement(m,l({key:r.id?r.id+"-"+o:o,index:o,value:n,completed:t},r))})))};h.displayName="PinInput",h.propTypes=y,h.defaultProps={type:"number",mask:!1,showState:!0,size:"md",autoFocus:!1,autoTab:!0,containerStyle:{},inputStyle:{},autoComplete:"off",placeholder:"o","aria-label":"Please enter pin code"};var x={length:a.number,initialValue:a.oneOfType([a.string,a.arrayOf(a.string)]),type:a.oneOf(["number","text"]),mask:a.bool,validate:a.oneOfType([a.string,a.arrayOf(a.string),a.instanceOf(RegExp)]),format:a.func,showState:a.bool,size:a.oneOf(["xs","sm","md","lg"]),autoFocus:a.bool,autoTab:a.bool,containerStyle:a.object,inputStyle:a.object,onChange:a.func},v=function(r){var n=r.length,t=r.initialValue,a=r.onChange,i=function(e,r){var n={};for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&r.indexOf(t)<0&&(n[t]=e[t]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(t=Object.getOwnPropertySymbols(e);o<t.length;o++)r.indexOf(t[o])<0&&Object.prototype.propertyIsEnumerable.call(e,t[o])&&(n[t[o]]=e[t[o]])}return n}(r,["length","initialValue","onChange"]),u=o(Array.from({length:n},(function(e,r){return t[r]||""}))),s=u[0],c=u[1];return e.createElement(h,l({values:s,onChange:function(e,r,n){c(n),a&&a(e,r,n)}},i))};v.displayName="StatefulPinInput",v.propTypes=x,v.defaultProps={length:4,initialValue:"",type:"number",mask:!1,showState:!0,size:"md",autoFocus:!1,autoTab:!0,containerStyle:{},inputStyle:{},autoComplete:"off",placeholder:"o","aria-label":"Please enter pin code"};export{h as PinInput,v as StatefulPinInput};
+***************************************************************************** */var c=function(){return c=Object.assign||function(e){for(var n,r=1,t=arguments.length;r<t;r++)for(var o in n=arguments[r])Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o]);return e},c.apply(this,arguments)};function l(e,n){return Object.defineProperty?Object.defineProperty(e,"raw",{value:n}):e.raw=n,e}var u,s,d=i.div(u||(u=l(["\n  display: flex;\n  align-items: center;\n"],["\n  display: flex;\n  align-items: center;\n"]))),p=function(e){var n;return Array.isArray(e)?(n=new RegExp(e.join("|")).toString()).slice(1,n.length-1):"string"==typeof e?(n=new RegExp(e.split("").join("|")).toString()).slice(1,n.length-1):e instanceof RegExp?(n=e.toString()).slice(1,n.length-1):void 0},f=function(e){if(void 0===e)return null;var n=/^#?[a-fA-Z\d]{3}$/i.test(e),r=n?/^#?([a-f\d])([a-f\d])([a-f\d])$/i.exec(e):/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return r?{r:parseInt(n?r[1]+r[1]:r[1],16),g:parseInt(n?r[2]+r[2]:r[2],16),b:parseInt(n?r[3]+r[3]:r[3],16)}:null},b=i.input(s||(s=l(["\n  width: ",";\n  height: ",";\n  margin-right: 0.375rem;\n  outline: transparent solid 2px;\n  outline-offset: 2px;\n  font-size: ",";\n  text-align: center;\n  border-radius: 0.375rem;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #cccccc;\n  background-color: inherit;\n  box-sizing: border-box;\n  &:focus {\n    border-color: ",";\n    box-shadow: "," 0px\n      0px 0px 1px;\n  }\n  &:last-child {\n    margin-right: 0;\n  }\n  ","\n  ","\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n"],["\n  width: ",";\n  height: ",";\n  margin-right: 0.375rem;\n  outline: transparent solid 2px;\n  outline-offset: 2px;\n  font-size: ",";\n  text-align: center;\n  border-radius: 0.375rem;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #cccccc;\n  background-color: inherit;\n  box-sizing: border-box;\n  &:focus {\n    border-color: ",";\n    box-shadow: "," 0px\n      0px 0px 1px;\n  }\n  &:last-child {\n    margin-right: 0;\n  }\n  ","\n  ","\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n"])),(function(e){switch(e.sizing){case"xs":return"1.5rem";case"sm":return"2rem";case"md":return"2.5rem";case"lg":return"3rem"}}),(function(e){switch(e.sizing){case"xs":return"1.5rem";case"sm":return"2rem";case"md":return"2.5rem";case"lg":return"3rem"}}),(function(e){switch(e.sizing){case"xs":return"0.75rem";case"sm":return"0.875rem";case"md":return"1rem";case"lg":return"1.125rem"}}),(function(e){return e.focusBorderColor||"#0d6efd"}),(function(e){return e.focusBorderColor||"#0d6efd"}),(function(e){var n=e.completed,r=e.showState,t=e.validBorderColor,o=f(t);return n&&r?"&:valid {\n    border-color: ".concat(o?"rgb(".concat(o.r,", ").concat(o.g,", ").concat(o.b,")"):"rgb(25, 135, 84)",";\n    box-shadow: ").concat(o?"rgb(".concat(o.r,", ").concat(o.g,", ").concat(o.b,")"):"rgb(25, 135, 84)"," 0px 0px 0px 1px;\n    background-color: ").concat(o?"rgba(".concat(o.r,", ").concat(o.g,", ").concat(o.b,", 0.1)"):"rgba(25, 135, 84, 0.1)",";\n  }"):""}),(function(e){var n=e.showState,r=e.errorBorderColor,t=f(r);return n?"&:invalid {\n    border-color: ".concat(t?"rgb(".concat(t.r,", ").concat(t.g,", ").concat(t.b,")"):"rgb(220, 53, 69)",";\n    box-shadow: ").concat(t?"rgb(".concat(t.r,", ").concat(t.g,", ").concat(t.b,")"):"rgb(220, 53, 69)"," 0px 0px 0px 1px;\n    background-color: ").concat(t?"rgba(".concat(t.r,", ").concat(t.g,", ").concat(t.b,", 0.1)"):"rgb(220, 53, 69, 0.1)",";\n  }"):""})),g={index:a.number,values:a.arrayOf(a.string),onChange:a.func},m=function(o){var a=o.index,i=o.value,c=o.values,l=o.completed,u=o.type,s=o.mask,d=o.size,f=o.validate,g=o.format,m=o.showState,y=o.autoFocus,h=o.autoTab,x=o["aria-describedby"],v=o["aria-label"],w=o["aria-labelledby"],O=o.autoComplete,S=o.disabled,C=o.inputMode,E=o.id,j=o.name,z=o.placeholder,B=o.required,P=o.inputStyle,T=o.errorBorderColor,k=o.focusBorderColor,I=o.validBorderColor,A=o.onChange,F=o.onBlur,R=o.onFocus,q=o.onKeyDown,M=n(),V=r((function(){return p(f)}),[f]);return t((function(){y&&0===a&&M.current.focus()}),[y,a]),e.createElement(b,{ref:M,type:s?"password":"text","aira-describedby":x,"aria-disabled":S,"aria-label":v,"aria-labelledby":w,"aria-required":B,autoComplete:O,disabled:S,name:j,id:E&&"".concat(E,"-").concat(a),inputMode:C||("number"===u?"numeric":"text"),required:B,placeholder:z,pattern:V,value:i,onChange:function(e){var n,r=c[a],t=e.target.value,o=function(e,n){for(var r=0,t=n.length,o=e.length;r<t;r++,o++)e[o]=n[r];return e}([],c);if(r?t.length>2?n=t.split(""):""===t?n="":r[0]===t[0]?n=t[1]:r[0]===t[1]&&(n=t[0]):n=t.length>1?t.split(""):t,A){var i="number"===u?/(^$)|(\d+)/:/.*/,l=void 0;if(g&&(n=Array.isArray(n)?n.map((function(e){return g(e)})):g(n)),Array.isArray(n)?(n.forEach((function(e,n){return o[a+n]=e})),l=n.every((function(e){return i.test(e)}))):(o[a]=n,l=i.test(n)),l){A(n,a,o);for(var s=M.current,d=0;d<n.length;d++)s=s.nextElementSibling;n&&h&&s instanceof HTMLInputElement&&s.focus()}}},onKeyDown:function(e){if("Backspace"===e.key&&h&&""===c[a]&&a>0){var n=M.current.previousElementSibling;n instanceof HTMLInputElement&&n.focus()}q&&q(e)},onFocus:function(e){e.target.placeholder="",R&&R(e)},onBlur:function(e){e.target.placeholder=z,F&&F(e)},completed:l,showState:m,sizing:d,style:P,errorBorderColor:T,focusBorderColor:k,validBorderColor:I,"data-index":a})};m.displayName="PinInputField",m.propTypes=g;var y={values:a.arrayOf(a.string).isRequired,type:a.oneOf(["number","text"]),mask:a.bool,validate:a.oneOfType([a.string,a.arrayOf(a.string),a.instanceOf(RegExp)]),format:a.func,showState:a.bool,size:a.oneOf(["xs","sm","md","lg"]),autoFocus:a.bool,autoTab:a.bool,containerStyle:a.object,inputStyle:a.object,onChange:a.func},h=function(n){var t=r((function(){return n.values.every((function(e){return e}))}),[n.values]);return t&&n.onComplete&&(n.validate?n.values.every((function(e){return new RegExp(p(n.validate)).test(e)}))&&n.onComplete(n.values):n.onComplete(n.values)),e.createElement(d,{style:n.containerStyle},n.values.map((function(r,o){return e.createElement(m,c({key:n.id?"".concat(n.id,"-").concat(o):o,index:o,value:r,completed:t},n))})))};h.displayName="PinInput",h.propTypes=y,h.defaultProps={type:"number",mask:!1,showState:!0,size:"md",autoFocus:!1,autoTab:!0,containerStyle:{},inputStyle:{},autoComplete:"off",placeholder:"o","aria-label":"Please enter pin code"};var x={length:a.number,initialValue:a.oneOfType([a.string,a.arrayOf(a.string)]),type:a.oneOf(["number","text"]),mask:a.bool,validate:a.oneOfType([a.string,a.arrayOf(a.string),a.instanceOf(RegExp)]),format:a.func,showState:a.bool,size:a.oneOf(["xs","sm","md","lg"]),autoFocus:a.bool,autoTab:a.bool,containerStyle:a.object,inputStyle:a.object,onChange:a.func},v=function(n){var r=n.length,t=n.initialValue,a=n.onChange,i=function(e,n){var r={};for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&n.indexOf(t)<0&&(r[t]=e[t]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(t=Object.getOwnPropertySymbols(e);o<t.length;o++)n.indexOf(t[o])<0&&Object.prototype.propertyIsEnumerable.call(e,t[o])&&(r[t[o]]=e[t[o]])}return r}(n,["length","initialValue","onChange"]),l=o(Array.from({length:r},(function(e,n){return t[n]||""}))),u=l[0],s=l[1];return e.createElement(h,c({values:u,onChange:function(e,n,r){s(r),a&&a(e,n,r)}},i))};v.displayName="StatefulPinInput",v.propTypes=x,v.defaultProps={length:4,initialValue:"",type:"number",mask:!1,showState:!0,size:"md",autoFocus:!1,autoTab:!0,containerStyle:{},inputStyle:{},autoComplete:"off",placeholder:"o","aria-label":"Please enter pin code"};export{h as PinInput,v as StatefulPinInput};

dist/index.js

@@ -80,10 +80,18 @@ 'use strict';
     }
+    else {
+        return undefined;
+    }
 };
 var hexToRgb = function (hex) {
-    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    if (hex === undefined)
+        return null;
+    var shorthand = /^#?[a-fA-Z\d]{3}$/i.test(hex);
+    var result = shorthand
+        ? /^#?([a-f\d])([a-f\d])([a-f\d])$/i.exec(hex)
+        : /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
     return result
         ? {
-            r: parseInt(result[1], 16),
-            g: parseInt(result[2], 16),
-            b: parseInt(result[3], 16),
+            r: parseInt(shorthand ? result[1] + result[1] : result[1], 16),
+            g: parseInt(shorthand ? result[2] + result[2] : result[2], 16),
+            b: parseInt(shorthand ? result[3] + result[3] : result[3], 16),
         }
@@ -104,4 +112,2 @@ : null;
             return '3rem';
-        default:
-            return '2.5rem';
     }
@@ -119,4 +125,2 @@ }, function (_a) {
             return '3rem';
-        default:
-            return '2.5rem';
     }
@@ -134,4 +138,2 @@ }, function (_a) {
             return '1.125rem';
-        default:
-            return '1rem';
     }
@@ -148,3 +150,3 @@ }, function (_a) {
     return completed && showState
-        ? "&:valid {\n    border-color: " + (rgb ? "rgb(" + rgb.r + ", " + rgb.b + ", " + rgb.g + ")" : 'rgb(25, 135, 84)') + ";\n    box-shadow: " + (rgb ? "rgb(" + rgb.r + ", " + rgb.b + ", " + rgb.g + ")" : 'rgb(25, 135, 84)') + " 0px 0px 0px 1px;\n    background-color: " + (rgb ? "rgba(" + rgb.r + ", " + rgb.b + ", " + rgb.g + ", 0.1)" : 'rgba(25, 135, 84, 0.1)') + ";\n  }"
+        ? "&:valid {\n    border-color: ".concat(rgb ? "rgb(".concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b, ")") : 'rgb(25, 135, 84)', ";\n    box-shadow: ").concat(rgb ? "rgb(".concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b, ")") : 'rgb(25, 135, 84)', " 0px 0px 0px 1px;\n    background-color: ").concat(rgb ? "rgba(".concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b, ", 0.1)") : 'rgba(25, 135, 84, 0.1)', ";\n  }")
         : '';
@@ -155,3 +157,3 @@ }, function (_a) {
     return showState
-        ? "&:invalid {\n    border-color: " + (rgb ? "rgb(" + rgb.r + ", " + rgb.b + ", " + rgb.g + ")" : 'rgb(220, 53, 69)') + ";\n    box-shadow: " + (rgb ? "rgb(" + rgb.r + ", " + rgb.b + ", " + rgb.g + ")" : 'rgb(220, 53, 69)') + " 0px 0px 0px 1px;\n    background-color: " + (rgb ? "rgba(" + rgb.r + ", " + rgb.b + ", " + rgb.g + ", 0.1)" : 'rgb(220, 53, 69, 0.1)') + ";\n  }"
+        ? "&:invalid {\n    border-color: ".concat(rgb ? "rgb(".concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b, ")") : 'rgb(220, 53, 69)', ";\n    box-shadow: ").concat(rgb ? "rgb(".concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b, ")") : 'rgb(220, 53, 69)', " 0px 0px 0px 1px;\n    background-color: ").concat(rgb ? "rgba(".concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b, ", 0.1)") : 'rgb(220, 53, 69, 0.1)', ";\n  }")
         : '';
@@ -265,3 +267,3 @@ });
     }, [autoFocus, index]);
-    return (React__default["default"].createElement(Input, { ref: inputRef, type: mask ? 'password' : 'text', "aira-describedby": ariaDescribedby, "aria-disabled": disabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-required": required, autoComplete: autoComplete, disabled: disabled, name: name, id: id && id + "-" + index, inputMode: inputMode || (type === 'number' ? 'numeric' : 'text'), required: required, placeholder: placeholder, pattern: pattern, value: value, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: handleInputFocus, onBlur: handleInputBlur, completed: completed, showState: showState, sizing: size, style: inputStyle, errorBorderColor: errorBorderColor, focusBorderColor: focusBorderColor, validBorderColor: validBorderColor, "data-index": index }));
+    return (React__default["default"].createElement(Input, { ref: inputRef, type: mask ? 'password' : 'text', "aira-describedby": ariaDescribedby, "aria-disabled": disabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-required": required, autoComplete: autoComplete, disabled: disabled, name: name, id: id && "".concat(id, "-").concat(index), inputMode: inputMode || (type === 'number' ? 'numeric' : 'text'), required: required, placeholder: placeholder, pattern: pattern, value: value, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: handleInputFocus, onBlur: handleInputBlur, completed: completed, showState: showState, sizing: size, style: inputStyle, errorBorderColor: errorBorderColor, focusBorderColor: focusBorderColor, validBorderColor: validBorderColor, "data-index": index }));
 };
@@ -303,3 +305,3 @@ PinInputField.displayName = 'PinInputField';
     }
-    return (React__default["default"].createElement(PinInputContainer, { style: props.containerStyle }, props.values.map(function (value, i) { return (React__default["default"].createElement(PinInputField, __assign({ key: props.id ? props.id + "-" + i : i, index: i, value: value, completed: completed }, props))); })));
+    return (React__default["default"].createElement(PinInputContainer, { style: props.containerStyle }, props.values.map(function (value, i) { return (React__default["default"].createElement(PinInputField, __assign({ key: props.id ? "".concat(props.id, "-").concat(i) : i, index: i, value: value, completed: completed }, props))); })));
 };
@@ -306,0 +308,0 @@ PinInput.displayName = 'PinInput';

dist/index.min.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("prop-types"),r=require("styled-components");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=n(e),o=n(t),l=n(r),u=function(){return u=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var a in t=arguments[r])Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a]);return e},u.apply(this,arguments)};function i(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}var d,s,f=l.default.div(d||(d=i(["\n  display: flex;\n  align-items: center;\n"],["\n  display: flex;\n  align-items: center;\n"]))),c=function(e){var t;return Array.isArray(e)?(t=new RegExp(e.join("|")).toString()).slice(1,t.length-1):"string"==typeof e?(t=new RegExp(e.split("").join("|")).toString()).slice(1,t.length-1):e instanceof RegExp?(t=e.toString()).slice(1,t.length-1):void 0},p=function(e){var t=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return t?{r:parseInt(t[1],16),g:parseInt(t[2],16),b:parseInt(t[3],16)}:null},b=l.default.input(s||(s=i(["\n  width: ",";\n  height: ",";\n  margin-right: 0.375rem;\n  outline: transparent solid 2px;\n  outline-offset: 2px;\n  font-size: ",";\n  text-align: center;\n  border-radius: 0.375rem;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #cccccc;\n  background-color: inherit;\n  box-sizing: border-box;\n  &:focus {\n    border-color: ",";\n    box-shadow: "," 0px\n      0px 0px 1px;\n  }\n  &:last-child {\n    margin-right: 0;\n  }\n  ","\n  ","\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n"],["\n  width: ",";\n  height: ",";\n  margin-right: 0.375rem;\n  outline: transparent solid 2px;\n  outline-offset: 2px;\n  font-size: ",";\n  text-align: center;\n  border-radius: 0.375rem;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #cccccc;\n  background-color: inherit;\n  box-sizing: border-box;\n  &:focus {\n    border-color: ",";\n    box-shadow: "," 0px\n      0px 0px 1px;\n  }\n  &:last-child {\n    margin-right: 0;\n  }\n  ","\n  ","\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n"])),(function(e){switch(e.sizing){case"xs":return"1.5rem";case"sm":return"2rem";default:return"2.5rem";case"lg":return"3rem"}}),(function(e){switch(e.sizing){case"xs":return"1.5rem";case"sm":return"2rem";default:return"2.5rem";case"lg":return"3rem"}}),(function(e){switch(e.sizing){case"xs":return"0.75rem";case"sm":return"0.875rem";default:return"1rem";case"lg":return"1.125rem"}}),(function(e){return e.focusBorderColor||"#0d6efd"}),(function(e){return e.focusBorderColor||"#0d6efd"}),(function(e){var t=e.completed,r=e.showState,n=e.validBorderColor,a=p(n);return t&&r?"&:valid {\n    border-color: "+(a?"rgb("+a.r+", "+a.b+", "+a.g+")":"rgb(25, 135, 84)")+";\n    box-shadow: "+(a?"rgb("+a.r+", "+a.b+", "+a.g+")":"rgb(25, 135, 84)")+" 0px 0px 0px 1px;\n    background-color: "+(a?"rgba("+a.r+", "+a.b+", "+a.g+", 0.1)":"rgba(25, 135, 84, 0.1)")+";\n  }":""}),(function(e){var t=e.showState,r=e.errorBorderColor,n=p(r);return t?"&:invalid {\n    border-color: "+(n?"rgb("+n.r+", "+n.b+", "+n.g+")":"rgb(220, 53, 69)")+";\n    box-shadow: "+(n?"rgb("+n.r+", "+n.b+", "+n.g+")":"rgb(220, 53, 69)")+" 0px 0px 0px 1px;\n    background-color: "+(n?"rgba("+n.r+", "+n.b+", "+n.g+", 0.1)":"rgb(220, 53, 69, 0.1)")+";\n  }":""})),g={index:o.default.number,values:o.default.arrayOf(o.default.string),onChange:o.default.func},m=function(t){var r=t.index,n=t.value,o=t.values,l=t.completed,u=t.type,i=t.mask,d=t.size,s=t.validate,f=t.format,p=t.showState,g=t.autoFocus,m=t.autoTab,y=t["aria-describedby"],h=t["aria-label"],x=t["aria-labelledby"],v=t.autoComplete,w=t.disabled,O=t.inputMode,S=t.id,C=t.name,E=t.placeholder,j=t.required,P=t.inputStyle,z=t.errorBorderColor,B=t.focusBorderColor,T=t.validBorderColor,k=t.onChange,I=t.onBlur,F=t.onFocus,R=t.onKeyDown,q=e.useRef(),A=e.useMemo((function(){return c(s)}),[s]);return e.useEffect((function(){g&&0===r&&q.current.focus()}),[g,r]),a.default.createElement(b,{ref:q,type:i?"password":"text","aira-describedby":y,"aria-disabled":w,"aria-label":h,"aria-labelledby":x,"aria-required":j,autoComplete:v,disabled:w,name:C,id:S&&S+"-"+r,inputMode:O||("number"===u?"numeric":"text"),required:j,placeholder:E,pattern:A,value:n,onChange:function(e){var t,n=o[r],a=e.target.value,l=function(e,t){for(var r=0,n=t.length,a=e.length;r<n;r++,a++)e[a]=t[r];return e}([],o);if(n?a.length>2?t=a.split(""):""===a?t="":n[0]===a[0]?t=a[1]:n[0]===a[1]&&(t=a[0]):t=a.length>1?a.split(""):a,k){var i="number"===u?/(^$)|(\d+)/:/.*/,d=void 0;if(f&&(t=Array.isArray(t)?t.map((function(e){return f(e)})):f(t)),Array.isArray(t)?(t.forEach((function(e,t){return l[r+t]=e})),d=t.every((function(e){return i.test(e)}))):(l[r]=t,d=i.test(t)),d){k(t,r,l);for(var s=q.current,c=0;c<t.length;c++)s=s.nextElementSibling;t&&m&&s instanceof HTMLInputElement&&s.focus()}}},onKeyDown:function(e){if("Backspace"===e.key&&m&&""===o[r]&&r>0){var t=q.current.previousElementSibling;t instanceof HTMLInputElement&&t.focus()}R&&R(e)},onFocus:function(e){e.target.placeholder="",F&&F(e)},onBlur:function(e){e.target.placeholder=E,I&&I(e)},completed:l,showState:p,sizing:d,style:P,errorBorderColor:z,focusBorderColor:B,validBorderColor:T,"data-index":r})};m.displayName="PinInputField",m.propTypes=g;var y={values:o.default.arrayOf(o.default.string).isRequired,type:o.default.oneOf(["number","text"]),mask:o.default.bool,validate:o.default.oneOfType([o.default.string,o.default.arrayOf(o.default.string),o.default.instanceOf(RegExp)]),format:o.default.func,showState:o.default.bool,size:o.default.oneOf(["xs","sm","md","lg"]),autoFocus:o.default.bool,autoTab:o.default.bool,containerStyle:o.default.object,inputStyle:o.default.object,onChange:o.default.func},h=function(t){var r=e.useMemo((function(){return t.values.every((function(e){return e}))}),[t.values]);return r&&t.onComplete&&(t.validate?t.values.every((function(e){return new RegExp(c(t.validate)).test(e)}))&&t.onComplete(t.values):t.onComplete(t.values)),a.default.createElement(f,{style:t.containerStyle},t.values.map((function(e,n){return a.default.createElement(m,u({key:t.id?t.id+"-"+n:n,index:n,value:e,completed:r},t))})))};h.displayName="PinInput",h.propTypes=y,h.defaultProps={type:"number",mask:!1,showState:!0,size:"md",autoFocus:!1,autoTab:!0,containerStyle:{},inputStyle:{},autoComplete:"off",placeholder:"o","aria-label":"Please enter pin code"};var x={length:o.default.number,initialValue:o.default.oneOfType([o.default.string,o.default.arrayOf(o.default.string)]),type:o.default.oneOf(["number","text"]),mask:o.default.bool,validate:o.default.oneOfType([o.default.string,o.default.arrayOf(o.default.string),o.default.instanceOf(RegExp)]),format:o.default.func,showState:o.default.bool,size:o.default.oneOf(["xs","sm","md","lg"]),autoFocus:o.default.bool,autoTab:o.default.bool,containerStyle:o.default.object,inputStyle:o.default.object,onChange:o.default.func},v=function(t){var r=t.length,n=t.initialValue,o=t.onChange,l=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(n=Object.getOwnPropertySymbols(e);a<n.length;a++)t.indexOf(n[a])<0&&Object.prototype.propertyIsEnumerable.call(e,n[a])&&(r[n[a]]=e[n[a]])}return r}(t,["length","initialValue","onChange"]),i=e.useState(Array.from({length:r},(function(e,t){return n[t]||""}))),d=i[0],s=i[1];return a.default.createElement(h,u({values:d,onChange:function(e,t,r){s(r),o&&o(e,t,r)}},l))};v.displayName="StatefulPinInput",v.propTypes=x,v.defaultProps={length:4,initialValue:"",type:"number",mask:!1,showState:!0,size:"md",autoFocus:!1,autoTab:!0,containerStyle:{},inputStyle:{},autoComplete:"off",placeholder:"o","aria-label":"Please enter pin code"},exports.PinInput=h,exports.StatefulPinInput=v;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("prop-types"),n=require("styled-components");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=r(e),o=r(t),l=r(n),u=function(){return u=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var a in t=arguments[n])Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a]);return e},u.apply(this,arguments)};function i(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}var c,d,s=l.default.div(c||(c=i(["\n  display: flex;\n  align-items: center;\n"],["\n  display: flex;\n  align-items: center;\n"]))),f=function(e){var t;return Array.isArray(e)?(t=new RegExp(e.join("|")).toString()).slice(1,t.length-1):"string"==typeof e?(t=new RegExp(e.split("").join("|")).toString()).slice(1,t.length-1):e instanceof RegExp?(t=e.toString()).slice(1,t.length-1):void 0},p=function(e){if(void 0===e)return null;var t=/^#?[a-fA-Z\d]{3}$/i.test(e),n=t?/^#?([a-f\d])([a-f\d])([a-f\d])$/i.exec(e):/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return n?{r:parseInt(t?n[1]+n[1]:n[1],16),g:parseInt(t?n[2]+n[2]:n[2],16),b:parseInt(t?n[3]+n[3]:n[3],16)}:null},b=l.default.input(d||(d=i(["\n  width: ",";\n  height: ",";\n  margin-right: 0.375rem;\n  outline: transparent solid 2px;\n  outline-offset: 2px;\n  font-size: ",";\n  text-align: center;\n  border-radius: 0.375rem;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #cccccc;\n  background-color: inherit;\n  box-sizing: border-box;\n  &:focus {\n    border-color: ",";\n    box-shadow: "," 0px\n      0px 0px 1px;\n  }\n  &:last-child {\n    margin-right: 0;\n  }\n  ","\n  ","\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n"],["\n  width: ",";\n  height: ",";\n  margin-right: 0.375rem;\n  outline: transparent solid 2px;\n  outline-offset: 2px;\n  font-size: ",";\n  text-align: center;\n  border-radius: 0.375rem;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #cccccc;\n  background-color: inherit;\n  box-sizing: border-box;\n  &:focus {\n    border-color: ",";\n    box-shadow: "," 0px\n      0px 0px 1px;\n  }\n  &:last-child {\n    margin-right: 0;\n  }\n  ","\n  ","\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n"])),(function(e){switch(e.sizing){case"xs":return"1.5rem";case"sm":return"2rem";case"md":return"2.5rem";case"lg":return"3rem"}}),(function(e){switch(e.sizing){case"xs":return"1.5rem";case"sm":return"2rem";case"md":return"2.5rem";case"lg":return"3rem"}}),(function(e){switch(e.sizing){case"xs":return"0.75rem";case"sm":return"0.875rem";case"md":return"1rem";case"lg":return"1.125rem"}}),(function(e){return e.focusBorderColor||"#0d6efd"}),(function(e){return e.focusBorderColor||"#0d6efd"}),(function(e){var t=e.completed,n=e.showState,r=e.validBorderColor,a=p(r);return t&&n?"&:valid {\n    border-color: ".concat(a?"rgb(".concat(a.r,", ").concat(a.g,", ").concat(a.b,")"):"rgb(25, 135, 84)",";\n    box-shadow: ").concat(a?"rgb(".concat(a.r,", ").concat(a.g,", ").concat(a.b,")"):"rgb(25, 135, 84)"," 0px 0px 0px 1px;\n    background-color: ").concat(a?"rgba(".concat(a.r,", ").concat(a.g,", ").concat(a.b,", 0.1)"):"rgba(25, 135, 84, 0.1)",";\n  }"):""}),(function(e){var t=e.showState,n=e.errorBorderColor,r=p(n);return t?"&:invalid {\n    border-color: ".concat(r?"rgb(".concat(r.r,", ").concat(r.g,", ").concat(r.b,")"):"rgb(220, 53, 69)",";\n    box-shadow: ").concat(r?"rgb(".concat(r.r,", ").concat(r.g,", ").concat(r.b,")"):"rgb(220, 53, 69)"," 0px 0px 0px 1px;\n    background-color: ").concat(r?"rgba(".concat(r.r,", ").concat(r.g,", ").concat(r.b,", 0.1)"):"rgb(220, 53, 69, 0.1)",";\n  }"):""})),g={index:o.default.number,values:o.default.arrayOf(o.default.string),onChange:o.default.func},m=function(t){var n=t.index,r=t.value,o=t.values,l=t.completed,u=t.type,i=t.mask,c=t.size,d=t.validate,s=t.format,p=t.showState,g=t.autoFocus,m=t.autoTab,y=t["aria-describedby"],h=t["aria-label"],x=t["aria-labelledby"],v=t.autoComplete,w=t.disabled,O=t.inputMode,S=t.id,C=t.name,E=t.placeholder,j=t.required,P=t.inputStyle,z=t.errorBorderColor,B=t.focusBorderColor,T=t.validBorderColor,k=t.onChange,I=t.onBlur,A=t.onFocus,F=t.onKeyDown,R=e.useRef(),q=e.useMemo((function(){return f(d)}),[d]);return e.useEffect((function(){g&&0===n&&R.current.focus()}),[g,n]),a.default.createElement(b,{ref:R,type:i?"password":"text","aira-describedby":y,"aria-disabled":w,"aria-label":h,"aria-labelledby":x,"aria-required":j,autoComplete:v,disabled:w,name:C,id:S&&"".concat(S,"-").concat(n),inputMode:O||("number"===u?"numeric":"text"),required:j,placeholder:E,pattern:q,value:r,onChange:function(e){var t,r=o[n],a=e.target.value,l=function(e,t){for(var n=0,r=t.length,a=e.length;n<r;n++,a++)e[a]=t[n];return e}([],o);if(r?a.length>2?t=a.split(""):""===a?t="":r[0]===a[0]?t=a[1]:r[0]===a[1]&&(t=a[0]):t=a.length>1?a.split(""):a,k){var i="number"===u?/(^$)|(\d+)/:/.*/,c=void 0;if(s&&(t=Array.isArray(t)?t.map((function(e){return s(e)})):s(t)),Array.isArray(t)?(t.forEach((function(e,t){return l[n+t]=e})),c=t.every((function(e){return i.test(e)}))):(l[n]=t,c=i.test(t)),c){k(t,n,l);for(var d=R.current,f=0;f<t.length;f++)d=d.nextElementSibling;t&&m&&d instanceof HTMLInputElement&&d.focus()}}},onKeyDown:function(e){if("Backspace"===e.key&&m&&""===o[n]&&n>0){var t=R.current.previousElementSibling;t instanceof HTMLInputElement&&t.focus()}F&&F(e)},onFocus:function(e){e.target.placeholder="",A&&A(e)},onBlur:function(e){e.target.placeholder=E,I&&I(e)},completed:l,showState:p,sizing:c,style:P,errorBorderColor:z,focusBorderColor:B,validBorderColor:T,"data-index":n})};m.displayName="PinInputField",m.propTypes=g;var y={values:o.default.arrayOf(o.default.string).isRequired,type:o.default.oneOf(["number","text"]),mask:o.default.bool,validate:o.default.oneOfType([o.default.string,o.default.arrayOf(o.default.string),o.default.instanceOf(RegExp)]),format:o.default.func,showState:o.default.bool,size:o.default.oneOf(["xs","sm","md","lg"]),autoFocus:o.default.bool,autoTab:o.default.bool,containerStyle:o.default.object,inputStyle:o.default.object,onChange:o.default.func},h=function(t){var n=e.useMemo((function(){return t.values.every((function(e){return e}))}),[t.values]);return n&&t.onComplete&&(t.validate?t.values.every((function(e){return new RegExp(f(t.validate)).test(e)}))&&t.onComplete(t.values):t.onComplete(t.values)),a.default.createElement(s,{style:t.containerStyle},t.values.map((function(e,r){return a.default.createElement(m,u({key:t.id?"".concat(t.id,"-").concat(r):r,index:r,value:e,completed:n},t))})))};h.displayName="PinInput",h.propTypes=y,h.defaultProps={type:"number",mask:!1,showState:!0,size:"md",autoFocus:!1,autoTab:!0,containerStyle:{},inputStyle:{},autoComplete:"off",placeholder:"o","aria-label":"Please enter pin code"};var x={length:o.default.number,initialValue:o.default.oneOfType([o.default.string,o.default.arrayOf(o.default.string)]),type:o.default.oneOf(["number","text"]),mask:o.default.bool,validate:o.default.oneOfType([o.default.string,o.default.arrayOf(o.default.string),o.default.instanceOf(RegExp)]),format:o.default.func,showState:o.default.bool,size:o.default.oneOf(["xs","sm","md","lg"]),autoFocus:o.default.bool,autoTab:o.default.bool,containerStyle:o.default.object,inputStyle:o.default.object,onChange:o.default.func},v=function(t){var n=t.length,r=t.initialValue,o=t.onChange,l=function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(r=Object.getOwnPropertySymbols(e);a<r.length;a++)t.indexOf(r[a])<0&&Object.prototype.propertyIsEnumerable.call(e,r[a])&&(n[r[a]]=e[r[a]])}return n}(t,["length","initialValue","onChange"]),i=e.useState(Array.from({length:n},(function(e,t){return r[t]||""}))),c=i[0],d=i[1];return a.default.createElement(h,u({values:c,onChange:function(e,t,n){d(n),o&&o(e,t,n)}},l))};v.displayName="StatefulPinInput",v.propTypes=x,v.defaultProps={length:4,initialValue:"",type:"number",mask:!1,showState:!0,size:"md",autoFocus:!1,autoTab:!0,containerStyle:{},inputStyle:{},autoComplete:"off",placeholder:"o","aria-label":"Please enter pin code"},exports.PinInput=h,exports.StatefulPinInput=v;

dist/tests/PinInput.test.d.ts

@@ -1,1 +0,1 @@
-export {};
+import 'jest-styled-components';

package.json

 {
   "name": "react-input-pin-code",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Pin input built with React component and styled-components",
@@ -15,2 +15,3 @@ "main": "dist/index.js",
   },
+  "homepage": "https://luffy84217.github.io/react-input-pin-code/",
   "scripts": {
@@ -35,3 +36,3 @@ "start": "npm run storybook",
     "deploy-storybook": "storybook-to-ghpages",
-    "validate": "npm run typecheck && npm run build && npm run lint && npm test"
+    "validate": "npm run typecheck && npm run build && npm run lint && npm test -- --coverage"
   },
@@ -58,3 +59,3 @@ "keywords": [
     "@babel/core": "^7.15.8",
-    "@babel/plugin-transform-runtime": "^7.15.8",
+    "@babel/plugin-transform-runtime": "^7.16.4",
     "@babel/runtime": "^7.15.4",
@@ -69,6 +70,7 @@ "@rollup/plugin-babel": "^5.3.0",
     "@storybook/storybook-deployer": "^2.8.10",
-    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/jest-dom": "^5.15.1",
     "@testing-library/react": "^12.1.2",
-    "@types/jest": "^27.0.2",
-    "@types/react": "^17.0.27",
+    "@types/jest": "^27.0.3",
+    "@types/react": "^17.0.37",
+    "@types/react-test-renderer": "^17.0.1",
     "@types/styled-components": "^5.1.15",
@@ -83,6 +85,7 @@ "@typescript-eslint/eslint-plugin": "^4.33.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.26.1",
+    "eslint-plugin-react": "^7.27.1",
     "eslint-plugin-react-hooks": "^4.2.0",
     "husky": "^7.0.2",
     "jest": "^27.2.4",
+    "jest-styled-components": "^7.0.8",
     "lint-staged": "^11.2.3",
@@ -93,3 +96,4 @@ "pinst": "^2.1.6",
     "react-dom": "^17.0.2",
-    "rollup": "^2.58.0",
+    "react-test-renderer": "^17.0.2",
+    "rollup": "^2.60.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
@@ -101,3 +105,3 @@ "rollup-plugin-terser": "^7.0.2",
     "ts-jest": "^27.0.5",
-    "typescript": "^4.4.3"
+    "typescript": "^4.5.2"
   },
@@ -104,0 +108,0 @@ "peerDependencies": {

README.md

 # React Input Pin Code
 
-An accessible and simple pin input component built with styled-components for ReactJS.
+[![Validate](https://github.com/luffy84217/react-input-pin-code/actions/workflows/validate.yml/badge.svg)](https://github.com/luffy84217/react-input-pin-code/actions/workflows/validate.yml)
+[![codecov](https://codecov.io/gh/luffy84217/react-input-pin-code/branch/main/graph/badge.svg?token=QSHM2A3C5V)](https://codecov.io/gh/luffy84217/react-input-pin-code)
+![npm](https://img.shields.io/npm/v/react-input-pin-code)
+![NPM](https://img.shields.io/npm/l/react-input-pin-code)
+[![storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg)](https://luffy84217.github.io/react-input-pin-code/)
 
+> An accessible and simple pin input component built with styled-components for ReactJS.
+
 ## Demo
@@ -6,0 +12,0 @@

No alert changes

Improved metrics

Total package byte prevSize

70780

increased by4.13%

Number of package files

21

increased by5%

Lines of code

849

increased by1.07%

Number of lines in readme file

191

increased by3.24%

Worsened metrics

Dev dependency count

44

increased by7.32%

No dependency changes