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

Comparing version 1.1.2 to 1.1.3

dist/index.esm.js

@@ -227,3 +227,3 @@ import React, { useRef, useMemo, useEffect, useState } from 'react';
         var newValues = __spreadArray([], values);
-        var rawValue = normalizeNewValue(currentValue, eventValue);
+        var rawValue = normalizeNewValue(currentValue, eventValue).slice(0, newValues.length);
         var regex = type === 'number' ? /(^$)|(\d+)/ : /.*/;
@@ -230,0 +230,0 @@ var shouldFireChange = rawValue.every(function (val) { return regex.test(val); });

dist/index.esm.min.js

@@ -15,2 +15,2 @@ import e,{useRef as r,useMemo as n,useEffect as o,useState as t}from"react";import a from"prop-types";import i from"styled-components";
 PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */var l=function(){return l=Object.assign||function(e){for(var r,n=1,o=arguments.length;n<o;n++)for(var t in r=arguments[n])Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t]);return e},l.apply(this,arguments)};function c(e,r){return Object.defineProperty?Object.defineProperty(e,"raw",{value:r}):e.raw=r,e}var u,s,d=i.div(u||(u=c(["\n  display: flex;\n  align-items: center;\n"],["\n  display: flex;\n  align-items: center;\n"]))),p={type:"number",mask:!1,showState:!0,size:"md",autoFocus:!1,autoTab:!0,borderColor:"rgb(204,204,204)",errorBorderColor:"rgb(220,53,69)",focusBorderColor:"rgb(13,110,253)",validBorderColor:"rgb(25,135,84)",containerStyle:{},inputStyle:{},autoComplete:"off",placeholder:"o","aria-label":"Please enter pin code"},f=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},b=function(e){if(void 0===e)return null;var r=e.match(/^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/);if(r)return{r:Number(r[1]),g:Number(r[2]),b:Number(r[3])};var n=/^#?[a-fA-Z\d]{3}$/i.test(e),o=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 o?{r:parseInt(n?o[1]+o[1]:o[1],16),g:parseInt(n?o[2]+o[2]:o[2],16),b:parseInt(n?o[3]+o[3]:o[3],16)}:null},g=i.input(s||(s=c(["\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: ",";\n  background-color: inherit;\n  box-sizing: border-box;\n  &:focus {\n    border-color: ",";\n    box-shadow: "," 0px 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: ",";\n  background-color: inherit;\n  box-sizing: border-box;\n  &:focus {\n    border-color: ",";\n    box-shadow: "," 0px 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){var r=e.borderColor,n=b(r);return n?"rgb(".concat(n.r,",").concat(n.g,",").concat(n.b,")"):p.borderColor}),(function(e){var r=e.focusBorderColor,n=b(r);return n?"rgb(".concat(n.r,",").concat(n.g,",").concat(n.b,")"):p.focusBorderColor}),(function(e){return e.focusBorderColor}),(function(e){var r=e.completed,n=e.showState,o=e.validBorderColor,t=b(o);return r&&n?"&:valid {\n    border-color: ".concat(t?"rgb(".concat(t.r,",").concat(t.g,",").concat(t.b,")"):p.validBorderColor,";\n    box-shadow: ").concat(t?"rgb(".concat(t.r,",").concat(t.g,",").concat(t.b,")"):p.validBorderColor," 0px 0px 0px 1px;\n    background-color: ").concat(t?"rgba(".concat(t.r,",").concat(t.g,",").concat(t.b,",0.1)"):p.validBorderColor.replace("rgb","rgba").replace(")",",0.1)"),";\n  }"):""}),(function(e){var r=e.showState,n=e.errorBorderColor,o=b(n);return r?"&:invalid {\n    border-color: ".concat(o?"rgb(".concat(o.r,",").concat(o.g,",").concat(o.b,")"):p.errorBorderColor,";\n    box-shadow: ").concat(o?"rgb(".concat(o.r,",").concat(o.g,",").concat(o.b,")"):p.errorBorderColor," 0px 0px 0px 1px;\n    background-color: ").concat(o?"rgba(".concat(o.r,",").concat(o.g,",").concat(o.b,",0.1)"):p.errorBorderColor.replace("rgb","rgba").replace(")",",0.1)"),";\n  }"):""})),m={index:a.number,values:a.arrayOf(a.string),onChange:a.func},y=function(t){var a=t.index,i=t.value,l=t.values,c=t.completed,u=t.type,s=t.mask,d=t.size,p=t.validate,b=t.format,m=t.showState,y=t.autoFocus,h=t.autoTab,v=t["aria-describedby"],x=t["aria-label"],C=t["aria-labelledby"],w=t.autoComplete,O=t.disabled,S=t.inputMode,B=t.id,E=t.name,j=t.placeholder,z=t.required,P=t.inputStyle,T=t.borderColor,k=t.errorBorderColor,I=t.focusBorderColor,F=t.validBorderColor,R=t.onChange,N=t.onBlur,$=t.onFocus,q=t.onKeyDown,A=r(),M=n((function(){return f(p)}),[p]);return o((function(){y&&0===a&&A.current.focus()}),[y,a]),e.createElement(g,{ref:A,type:s?"password":"text","aira-describedby":v,"aria-disabled":O,"aria-label":x,"aria-labelledby":C,"aria-required":z,autoComplete:w,disabled:O,name:E,id:B&&"".concat(B,"-").concat(a),inputMode:S||("number"===u?"numeric":"text"),required:z,placeholder:j,pattern:M,value:i,onChange:function(e){var r=l[a],n=e.target.value,o=function(e,r){for(var n=0,o=r.length,t=e.length;n<o;n++,t++)e[t]=r[n];return e}([],l),t=function(e,r){return e?r.length>2?r.split(""):""===r?[]:e[0]===r[0]?[r[1]]:[r[0]]:r.split("")}(r,n),i="number"===u?/(^$)|(\d+)/:/.*/,c=t.every((function(e){return i.test(e)}));if(R){var s=b?t.map((function(e){return b(e)})):t;if(s.length?s.forEach((function(e,r){return o[a+r]=e})):o[a]="",c){R(s,a,o);for(var d=A.current,p=0;p<s.length;p++)d=d.nextElementSibling;s&&h&&d instanceof HTMLInputElement&&d.focus()}}},onKeyDown:function(e){if("Backspace"===e.key&&h&&""===l[a]&&a>0){var r=A.current.previousElementSibling;r instanceof HTMLInputElement&&r.focus()}q&&q(e)},onFocus:function(e){e.target.placeholder="",$&&$(e)},onBlur:function(e){e.target.placeholder=j,N&&N(e)},completed:c,showState:m,sizing:d,style:P,borderColor:T,errorBorderColor:k,focusBorderColor:I,validBorderColor:F,"data-index":a})};y.displayName="PinInputField",y.propTypes=m;var h={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},v=function(r){var o=n((function(){return r.values.every((function(e){return e}))}),[r.values]);return o&&r.onComplete&&(r.validate?r.values.every((function(e){return new RegExp(f(r.validate)).test(e)}))&&r.onComplete(r.values):r.onComplete(r.values)),e.createElement(d,{style:r.containerStyle},r.values.map((function(n,t){return e.createElement(y,l({key:r.id?"".concat(r.id,"-").concat(t):t,index:t,value:n,completed:o},r))})))};v.displayName="PinInput",v.propTypes=h,v.defaultProps=p;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},C=function(r){var n=r.length,o=r.initialValue,a=r.onChange,i=function(e,r){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&r.indexOf(o)<0&&(n[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var t=0;for(o=Object.getOwnPropertySymbols(e);t<o.length;t++)r.indexOf(o[t])<0&&Object.prototype.propertyIsEnumerable.call(e,o[t])&&(n[o[t]]=e[o[t]])}return n}(r,["length","initialValue","onChange"]),c=t(Array.from({length:n},(function(e,r){return o[r]||""}))),u=c[0],s=c[1];return e.createElement(v,l({values:u,onChange:function(e,r,n){s(n),a&&a(e,r,n)}},i))};C.displayName="StatefulPinInput",C.propTypes=x,C.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{v as PinInput,C as StatefulPinInput};
+***************************************************************************** */var l=function(){return l=Object.assign||function(e){for(var r,n=1,o=arguments.length;n<o;n++)for(var t in r=arguments[n])Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t]);return e},l.apply(this,arguments)};function c(e,r){return Object.defineProperty?Object.defineProperty(e,"raw",{value:r}):e.raw=r,e}var u,s,d=i.div(u||(u=c(["\n  display: flex;\n  align-items: center;\n"],["\n  display: flex;\n  align-items: center;\n"]))),p={type:"number",mask:!1,showState:!0,size:"md",autoFocus:!1,autoTab:!0,borderColor:"rgb(204,204,204)",errorBorderColor:"rgb(220,53,69)",focusBorderColor:"rgb(13,110,253)",validBorderColor:"rgb(25,135,84)",containerStyle:{},inputStyle:{},autoComplete:"off",placeholder:"o","aria-label":"Please enter pin code"},f=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},b=function(e){if(void 0===e)return null;var r=e.match(/^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/);if(r)return{r:Number(r[1]),g:Number(r[2]),b:Number(r[3])};var n=/^#?[a-fA-Z\d]{3}$/i.test(e),o=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 o?{r:parseInt(n?o[1]+o[1]:o[1],16),g:parseInt(n?o[2]+o[2]:o[2],16),b:parseInt(n?o[3]+o[3]:o[3],16)}:null},g=i.input(s||(s=c(["\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: ",";\n  background-color: inherit;\n  box-sizing: border-box;\n  &:focus {\n    border-color: ",";\n    box-shadow: "," 0px 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: ",";\n  background-color: inherit;\n  box-sizing: border-box;\n  &:focus {\n    border-color: ",";\n    box-shadow: "," 0px 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){var r=e.borderColor,n=b(r);return n?"rgb(".concat(n.r,",").concat(n.g,",").concat(n.b,")"):p.borderColor}),(function(e){var r=e.focusBorderColor,n=b(r);return n?"rgb(".concat(n.r,",").concat(n.g,",").concat(n.b,")"):p.focusBorderColor}),(function(e){return e.focusBorderColor}),(function(e){var r=e.completed,n=e.showState,o=e.validBorderColor,t=b(o);return r&&n?"&:valid {\n    border-color: ".concat(t?"rgb(".concat(t.r,",").concat(t.g,",").concat(t.b,")"):p.validBorderColor,";\n    box-shadow: ").concat(t?"rgb(".concat(t.r,",").concat(t.g,",").concat(t.b,")"):p.validBorderColor," 0px 0px 0px 1px;\n    background-color: ").concat(t?"rgba(".concat(t.r,",").concat(t.g,",").concat(t.b,",0.1)"):p.validBorderColor.replace("rgb","rgba").replace(")",",0.1)"),";\n  }"):""}),(function(e){var r=e.showState,n=e.errorBorderColor,o=b(n);return r?"&:invalid {\n    border-color: ".concat(o?"rgb(".concat(o.r,",").concat(o.g,",").concat(o.b,")"):p.errorBorderColor,";\n    box-shadow: ").concat(o?"rgb(".concat(o.r,",").concat(o.g,",").concat(o.b,")"):p.errorBorderColor," 0px 0px 0px 1px;\n    background-color: ").concat(o?"rgba(".concat(o.r,",").concat(o.g,",").concat(o.b,",0.1)"):p.errorBorderColor.replace("rgb","rgba").replace(")",",0.1)"),";\n  }"):""})),m={index:a.number,values:a.arrayOf(a.string),onChange:a.func},y=function(t){var a=t.index,i=t.value,l=t.values,c=t.completed,u=t.type,s=t.mask,d=t.size,p=t.validate,b=t.format,m=t.showState,y=t.autoFocus,h=t.autoTab,v=t["aria-describedby"],x=t["aria-label"],C=t["aria-labelledby"],w=t.autoComplete,O=t.disabled,S=t.inputMode,B=t.id,E=t.name,j=t.placeholder,z=t.required,P=t.inputStyle,T=t.borderColor,k=t.errorBorderColor,I=t.focusBorderColor,F=t.validBorderColor,R=t.onChange,N=t.onBlur,$=t.onFocus,q=t.onKeyDown,A=r(),M=n((function(){return f(p)}),[p]);return o((function(){y&&0===a&&A.current.focus()}),[y,a]),e.createElement(g,{ref:A,type:s?"password":"text","aira-describedby":v,"aria-disabled":O,"aria-label":x,"aria-labelledby":C,"aria-required":z,autoComplete:w,disabled:O,name:E,id:B&&"".concat(B,"-").concat(a),inputMode:S||("number"===u?"numeric":"text"),required:z,placeholder:j,pattern:M,value:i,onChange:function(e){var r=l[a],n=e.target.value,o=function(e,r){for(var n=0,o=r.length,t=e.length;n<o;n++,t++)e[t]=r[n];return e}([],l),t=function(e,r){return e?r.length>2?r.split(""):""===r?[]:e[0]===r[0]?[r[1]]:[r[0]]:r.split("")}(r,n).slice(0,o.length),i="number"===u?/(^$)|(\d+)/:/.*/,c=t.every((function(e){return i.test(e)}));if(R){var s=b?t.map((function(e){return b(e)})):t;if(s.length?s.forEach((function(e,r){return o[a+r]=e})):o[a]="",c){R(s,a,o);for(var d=A.current,p=0;p<s.length;p++)d=d.nextElementSibling;s&&h&&d instanceof HTMLInputElement&&d.focus()}}},onKeyDown:function(e){if("Backspace"===e.key&&h&&""===l[a]&&a>0){var r=A.current.previousElementSibling;r instanceof HTMLInputElement&&r.focus()}q&&q(e)},onFocus:function(e){e.target.placeholder="",$&&$(e)},onBlur:function(e){e.target.placeholder=j,N&&N(e)},completed:c,showState:m,sizing:d,style:P,borderColor:T,errorBorderColor:k,focusBorderColor:I,validBorderColor:F,"data-index":a})};y.displayName="PinInputField",y.propTypes=m;var h={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},v=function(r){var o=n((function(){return r.values.every((function(e){return e}))}),[r.values]);return o&&r.onComplete&&(r.validate?r.values.every((function(e){return new RegExp(f(r.validate)).test(e)}))&&r.onComplete(r.values):r.onComplete(r.values)),e.createElement(d,{style:r.containerStyle},r.values.map((function(n,t){return e.createElement(y,l({key:r.id?"".concat(r.id,"-").concat(t):t,index:t,value:n,completed:o},r))})))};v.displayName="PinInput",v.propTypes=h,v.defaultProps=p;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},C=function(r){var n=r.length,o=r.initialValue,a=r.onChange,i=function(e,r){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&r.indexOf(o)<0&&(n[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var t=0;for(o=Object.getOwnPropertySymbols(e);t<o.length;t++)r.indexOf(o[t])<0&&Object.prototype.propertyIsEnumerable.call(e,o[t])&&(n[o[t]]=e[o[t]])}return n}(r,["length","initialValue","onChange"]),c=t(Array.from({length:n},(function(e,r){return o[r]||""}))),u=c[0],s=c[1];return e.createElement(v,l({values:u,onChange:function(e,r,n){s(n),a&&a(e,r,n)}},i))};C.displayName="StatefulPinInput",C.propTypes=x,C.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{v as PinInput,C as StatefulPinInput};

dist/index.js

@@ -237,3 +237,3 @@ 'use strict';
         var newValues = __spreadArray([], values);
-        var rawValue = normalizeNewValue(currentValue, eventValue);
+        var rawValue = normalizeNewValue(currentValue, eventValue).slice(0, newValues.length);
         var regex = type === 'number' ? /(^$)|(\d+)/ : /.*/;
@@ -240,0 +240,0 @@ var shouldFireChange = rawValue.every(function (val) { return regex.test(val); });

dist/index.min.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("prop-types"),t=require("styled-components");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=n(e),a=n(r),l=n(t),u=function(){return u=Object.assign||function(e){for(var r,t=1,n=arguments.length;t<n;t++)for(var o in r=arguments[t])Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);return e},u.apply(this,arguments)};function i(e,r){return Object.defineProperty?Object.defineProperty(e,"raw",{value:r}):e.raw=r,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={type:"number",mask:!1,showState:!0,size:"md",autoFocus:!1,autoTab:!0,borderColor:"rgb(204,204,204)",errorBorderColor:"rgb(220,53,69)",focusBorderColor:"rgb(13,110,253)",validBorderColor:"rgb(25,135,84)",containerStyle:{},inputStyle:{},autoComplete:"off",placeholder:"o","aria-label":"Please enter pin code"},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},b=function(e){if(void 0===e)return null;var r=e.match(/^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/);if(r)return{r:Number(r[1]),g:Number(r[2]),b:Number(r[3])};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},g=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: ",";\n  background-color: inherit;\n  box-sizing: border-box;\n  &:focus {\n    border-color: ",";\n    box-shadow: "," 0px 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: ",";\n  background-color: inherit;\n  box-sizing: border-box;\n  &:focus {\n    border-color: ",";\n    box-shadow: "," 0px 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){var r=e.borderColor,t=b(r);return t?"rgb(".concat(t.r,",").concat(t.g,",").concat(t.b,")"):f.borderColor}),(function(e){var r=e.focusBorderColor,t=b(r);return t?"rgb(".concat(t.r,",").concat(t.g,",").concat(t.b,")"):f.focusBorderColor}),(function(e){return e.focusBorderColor}),(function(e){var r=e.completed,t=e.showState,n=e.validBorderColor,o=b(n);return r&&t?"&:valid {\n    border-color: ".concat(o?"rgb(".concat(o.r,",").concat(o.g,",").concat(o.b,")"):f.validBorderColor,";\n    box-shadow: ").concat(o?"rgb(".concat(o.r,",").concat(o.g,",").concat(o.b,")"):f.validBorderColor," 0px 0px 0px 1px;\n    background-color: ").concat(o?"rgba(".concat(o.r,",").concat(o.g,",").concat(o.b,",0.1)"):f.validBorderColor.replace("rgb","rgba").replace(")",",0.1)"),";\n  }"):""}),(function(e){var r=e.showState,t=e.errorBorderColor,n=b(t);return r?"&:invalid {\n    border-color: ".concat(n?"rgb(".concat(n.r,",").concat(n.g,",").concat(n.b,")"):f.errorBorderColor,";\n    box-shadow: ").concat(n?"rgb(".concat(n.r,",").concat(n.g,",").concat(n.b,")"):f.errorBorderColor," 0px 0px 0px 1px;\n    background-color: ").concat(n?"rgba(".concat(n.r,",").concat(n.g,",").concat(n.b,",0.1)"):f.errorBorderColor.replace("rgb","rgba").replace(")",",0.1)"),";\n  }"):""})),m={index:a.default.number,values:a.default.arrayOf(a.default.string),onChange:a.default.func},y=function(r){var t=r.index,n=r.value,a=r.values,l=r.completed,u=r.type,i=r.mask,c=r.size,d=r.validate,s=r.format,f=r.showState,b=r.autoFocus,m=r.autoTab,y=r["aria-describedby"],h=r["aria-label"],v=r["aria-labelledby"],x=r.autoComplete,C=r.disabled,w=r.inputMode,O=r.id,S=r.name,B=r.placeholder,E=r.required,j=r.inputStyle,P=r.borderColor,z=r.errorBorderColor,T=r.focusBorderColor,k=r.validBorderColor,I=r.onChange,F=r.onBlur,R=r.onFocus,q=r.onKeyDown,M=e.useRef(),N=e.useMemo((function(){return p(d)}),[d]);return e.useEffect((function(){b&&0===t&&M.current.focus()}),[b,t]),o.default.createElement(g,{ref:M,type:i?"password":"text","aira-describedby":y,"aria-disabled":C,"aria-label":h,"aria-labelledby":v,"aria-required":E,autoComplete:x,disabled:C,name:S,id:O&&"".concat(O,"-").concat(t),inputMode:w||("number"===u?"numeric":"text"),required:E,placeholder:B,pattern:N,value:n,onChange:function(e){var r=a[t],n=e.target.value,o=function(e,r){for(var t=0,n=r.length,o=e.length;t<n;t++,o++)e[o]=r[t];return e}([],a),l=function(e,r){return e?r.length>2?r.split(""):""===r?[]:e[0]===r[0]?[r[1]]:[r[0]]:r.split("")}(r,n),i="number"===u?/(^$)|(\d+)/:/.*/,c=l.every((function(e){return i.test(e)}));if(I){var d=s?l.map((function(e){return s(e)})):l;if(d.length?d.forEach((function(e,r){return o[t+r]=e})):o[t]="",c){I(d,t,o);for(var f=M.current,p=0;p<d.length;p++)f=f.nextElementSibling;d&&m&&f instanceof HTMLInputElement&&f.focus()}}},onKeyDown:function(e){if("Backspace"===e.key&&m&&""===a[t]&&t>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=B,F&&F(e)},completed:l,showState:f,sizing:c,style:j,borderColor:P,errorBorderColor:z,focusBorderColor:T,validBorderColor:k,"data-index":t})};y.displayName="PinInputField",y.propTypes=m;var h={values:a.default.arrayOf(a.default.string).isRequired,type:a.default.oneOf(["number","text"]),mask:a.default.bool,validate:a.default.oneOfType([a.default.string,a.default.arrayOf(a.default.string),a.default.instanceOf(RegExp)]),format:a.default.func,showState:a.default.bool,size:a.default.oneOf(["xs","sm","md","lg"]),autoFocus:a.default.bool,autoTab:a.default.bool,containerStyle:a.default.object,inputStyle:a.default.object,onChange:a.default.func},v=function(r){var t=e.useMemo((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)),o.default.createElement(s,{style:r.containerStyle},r.values.map((function(e,n){return o.default.createElement(y,u({key:r.id?"".concat(r.id,"-").concat(n):n,index:n,value:e,completed:t},r))})))};v.displayName="PinInput",v.propTypes=h,v.defaultProps=f;var x={length:a.default.number,initialValue:a.default.oneOfType([a.default.string,a.default.arrayOf(a.default.string)]),type:a.default.oneOf(["number","text"]),mask:a.default.bool,validate:a.default.oneOfType([a.default.string,a.default.arrayOf(a.default.string),a.default.instanceOf(RegExp)]),format:a.default.func,showState:a.default.bool,size:a.default.oneOf(["xs","sm","md","lg"]),autoFocus:a.default.bool,autoTab:a.default.bool,containerStyle:a.default.object,inputStyle:a.default.object,onChange:a.default.func},C=function(r){var t=r.length,n=r.initialValue,a=r.onChange,l=function(e,r){var t={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&r.indexOf(n)<0&&(t[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)r.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(t[n[o]]=e[n[o]])}return t}(r,["length","initialValue","onChange"]),i=e.useState(Array.from({length:t},(function(e,r){return n[r]||""}))),c=i[0],d=i[1];return o.default.createElement(v,u({values:c,onChange:function(e,r,t){d(t),a&&a(e,r,t)}},l))};C.displayName="StatefulPinInput",C.propTypes=x,C.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=v,exports.StatefulPinInput=C;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("prop-types"),t=require("styled-components");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=n(e),a=n(r),l=n(t),u=function(){return u=Object.assign||function(e){for(var r,t=1,n=arguments.length;t<n;t++)for(var o in r=arguments[t])Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);return e},u.apply(this,arguments)};function i(e,r){return Object.defineProperty?Object.defineProperty(e,"raw",{value:r}):e.raw=r,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={type:"number",mask:!1,showState:!0,size:"md",autoFocus:!1,autoTab:!0,borderColor:"rgb(204,204,204)",errorBorderColor:"rgb(220,53,69)",focusBorderColor:"rgb(13,110,253)",validBorderColor:"rgb(25,135,84)",containerStyle:{},inputStyle:{},autoComplete:"off",placeholder:"o","aria-label":"Please enter pin code"},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},b=function(e){if(void 0===e)return null;var r=e.match(/^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/);if(r)return{r:Number(r[1]),g:Number(r[2]),b:Number(r[3])};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},g=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: ",";\n  background-color: inherit;\n  box-sizing: border-box;\n  &:focus {\n    border-color: ",";\n    box-shadow: "," 0px 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: ",";\n  background-color: inherit;\n  box-sizing: border-box;\n  &:focus {\n    border-color: ",";\n    box-shadow: "," 0px 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){var r=e.borderColor,t=b(r);return t?"rgb(".concat(t.r,",").concat(t.g,",").concat(t.b,")"):f.borderColor}),(function(e){var r=e.focusBorderColor,t=b(r);return t?"rgb(".concat(t.r,",").concat(t.g,",").concat(t.b,")"):f.focusBorderColor}),(function(e){return e.focusBorderColor}),(function(e){var r=e.completed,t=e.showState,n=e.validBorderColor,o=b(n);return r&&t?"&:valid {\n    border-color: ".concat(o?"rgb(".concat(o.r,",").concat(o.g,",").concat(o.b,")"):f.validBorderColor,";\n    box-shadow: ").concat(o?"rgb(".concat(o.r,",").concat(o.g,",").concat(o.b,")"):f.validBorderColor," 0px 0px 0px 1px;\n    background-color: ").concat(o?"rgba(".concat(o.r,",").concat(o.g,",").concat(o.b,",0.1)"):f.validBorderColor.replace("rgb","rgba").replace(")",",0.1)"),";\n  }"):""}),(function(e){var r=e.showState,t=e.errorBorderColor,n=b(t);return r?"&:invalid {\n    border-color: ".concat(n?"rgb(".concat(n.r,",").concat(n.g,",").concat(n.b,")"):f.errorBorderColor,";\n    box-shadow: ").concat(n?"rgb(".concat(n.r,",").concat(n.g,",").concat(n.b,")"):f.errorBorderColor," 0px 0px 0px 1px;\n    background-color: ").concat(n?"rgba(".concat(n.r,",").concat(n.g,",").concat(n.b,",0.1)"):f.errorBorderColor.replace("rgb","rgba").replace(")",",0.1)"),";\n  }"):""})),m={index:a.default.number,values:a.default.arrayOf(a.default.string),onChange:a.default.func},y=function(r){var t=r.index,n=r.value,a=r.values,l=r.completed,u=r.type,i=r.mask,c=r.size,d=r.validate,s=r.format,f=r.showState,b=r.autoFocus,m=r.autoTab,y=r["aria-describedby"],h=r["aria-label"],v=r["aria-labelledby"],x=r.autoComplete,C=r.disabled,w=r.inputMode,O=r.id,S=r.name,B=r.placeholder,E=r.required,j=r.inputStyle,P=r.borderColor,z=r.errorBorderColor,T=r.focusBorderColor,k=r.validBorderColor,I=r.onChange,F=r.onBlur,R=r.onFocus,q=r.onKeyDown,M=e.useRef(),N=e.useMemo((function(){return p(d)}),[d]);return e.useEffect((function(){b&&0===t&&M.current.focus()}),[b,t]),o.default.createElement(g,{ref:M,type:i?"password":"text","aira-describedby":y,"aria-disabled":C,"aria-label":h,"aria-labelledby":v,"aria-required":E,autoComplete:x,disabled:C,name:S,id:O&&"".concat(O,"-").concat(t),inputMode:w||("number"===u?"numeric":"text"),required:E,placeholder:B,pattern:N,value:n,onChange:function(e){var r=a[t],n=e.target.value,o=function(e,r){for(var t=0,n=r.length,o=e.length;t<n;t++,o++)e[o]=r[t];return e}([],a),l=function(e,r){return e?r.length>2?r.split(""):""===r?[]:e[0]===r[0]?[r[1]]:[r[0]]:r.split("")}(r,n).slice(0,o.length),i="number"===u?/(^$)|(\d+)/:/.*/,c=l.every((function(e){return i.test(e)}));if(I){var d=s?l.map((function(e){return s(e)})):l;if(d.length?d.forEach((function(e,r){return o[t+r]=e})):o[t]="",c){I(d,t,o);for(var f=M.current,p=0;p<d.length;p++)f=f.nextElementSibling;d&&m&&f instanceof HTMLInputElement&&f.focus()}}},onKeyDown:function(e){if("Backspace"===e.key&&m&&""===a[t]&&t>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=B,F&&F(e)},completed:l,showState:f,sizing:c,style:j,borderColor:P,errorBorderColor:z,focusBorderColor:T,validBorderColor:k,"data-index":t})};y.displayName="PinInputField",y.propTypes=m;var h={values:a.default.arrayOf(a.default.string).isRequired,type:a.default.oneOf(["number","text"]),mask:a.default.bool,validate:a.default.oneOfType([a.default.string,a.default.arrayOf(a.default.string),a.default.instanceOf(RegExp)]),format:a.default.func,showState:a.default.bool,size:a.default.oneOf(["xs","sm","md","lg"]),autoFocus:a.default.bool,autoTab:a.default.bool,containerStyle:a.default.object,inputStyle:a.default.object,onChange:a.default.func},v=function(r){var t=e.useMemo((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)),o.default.createElement(s,{style:r.containerStyle},r.values.map((function(e,n){return o.default.createElement(y,u({key:r.id?"".concat(r.id,"-").concat(n):n,index:n,value:e,completed:t},r))})))};v.displayName="PinInput",v.propTypes=h,v.defaultProps=f;var x={length:a.default.number,initialValue:a.default.oneOfType([a.default.string,a.default.arrayOf(a.default.string)]),type:a.default.oneOf(["number","text"]),mask:a.default.bool,validate:a.default.oneOfType([a.default.string,a.default.arrayOf(a.default.string),a.default.instanceOf(RegExp)]),format:a.default.func,showState:a.default.bool,size:a.default.oneOf(["xs","sm","md","lg"]),autoFocus:a.default.bool,autoTab:a.default.bool,containerStyle:a.default.object,inputStyle:a.default.object,onChange:a.default.func},C=function(r){var t=r.length,n=r.initialValue,a=r.onChange,l=function(e,r){var t={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&r.indexOf(n)<0&&(t[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)r.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(t[n[o]]=e[n[o]])}return t}(r,["length","initialValue","onChange"]),i=e.useState(Array.from({length:t},(function(e,r){return n[r]||""}))),c=i[0],d=i[1];return o.default.createElement(v,u({values:c,onChange:function(e,r,t){d(t),a&&a(e,r,t)}},l))};C.displayName="StatefulPinInput",C.propTypes=x,C.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=v,exports.StatefulPinInput=C;

package.json

 {
   "name": "react-input-pin-code",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Pin input built with React component and styled-components",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

69515

increased by0.13%

Lines of code

894

increased by0.11%

No dependency changes