react-verification-input
Advanced tools
Comparing version 3.1.3 to 3.2.0
@@ -7,2 +7,3 @@ export interface VerificationInputProps { | ||
autoFocus?: boolean; | ||
passwordMode?: boolean; | ||
inputProps?: object; | ||
@@ -9,0 +10,0 @@ containerProps?: object; |
/*! For license information please see index.js.LICENSE.txt */ | ||
(()=>{var e={184:(e,t)=>{var n;!function(){"use strict";var r={}.hasOwnProperty;function o(){for(var e=[],t=0;t<arguments.length;t++){var n=arguments[t];if(n){var a=typeof n;if("string"===a||"number"===a)e.push(n);else if(Array.isArray(n)){if(n.length){var i=o.apply(null,n);i&&e.push(i)}}else if("object"===a){if(n.toString!==Object.prototype.toString&&!n.toString.toString().includes("[native code]")){e.push(n.toString());continue}for(var c in n)r.call(n,c)&&n[c]&&e.push(c)}}}return e.join(" ")}e.exports?(o.default=o,e.exports=o):void 0===(n=function(){return o}.apply(t,[]))||(e.exports=n)}()},28:(e,t,n)=>{"use strict";n.d(t,{Z:()=>c});var r=n(81),o=n.n(r),a=n(645),i=n.n(a)()(o());i.push([e.id,"/* :where() gives the styles specificity 0, which makes them overridable */\n:where(.vi__wrapper) {\n position: relative;\n width: min-content;\n}\n\n.vi {\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n box-sizing: border-box;\n position: absolute;\n color: transparent;\n background: transparent;\n caret-color: transparent;\n outline: none;\n border: 0 none transparent;\n}\n\n.vi::selection {\n background: transparent;\n}\n\n:where(.vi__container) {\n display: flex;\n gap: 8px;\n height: 50px;\n width: 300px;\n}\n\n:where(.vi__character) {\n height: 100%;\n flex-grow: 1;\n flex-basis: 0;\n text-align: center;\n font-size: 36px;\n line-height: 50px;\n color: black;\n background-color: white;\n border: 1px solid black;\n cursor: default;\n user-select: none;\n box-sizing: border-box;\n}\n\n:where(.vi__character--inactive) {\n color: dimgray;\n background-color: lightgray;\n}\n\n:where(.vi__character--selected) {\n outline: 2px solid cornflowerblue;\n color: cornflowerblue;\n}\n",""]);const c=i},645:e=>{"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n="",r=void 0!==t[5];return t[4]&&(n+="@supports (".concat(t[4],") {")),t[2]&&(n+="@media ".concat(t[2]," {")),r&&(n+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),n+=e(t),r&&(n+="}"),t[2]&&(n+="}"),t[4]&&(n+="}"),n})).join("")},t.i=function(e,n,r,o,a){"string"==typeof e&&(e=[[null,e,void 0]]);var i={};if(r)for(var c=0;c<this.length;c++){var l=this[c][0];null!=l&&(i[l]=!0)}for(var u=0;u<e.length;u++){var s=[].concat(e[u]);r&&i[s[0]]||(void 0!==a&&(void 0===s[5]||(s[1]="@layer".concat(s[5].length>0?" ".concat(s[5]):""," {").concat(s[1],"}")),s[5]=a),n&&(s[2]?(s[1]="@media ".concat(s[2]," {").concat(s[1],"}"),s[2]=n):s[2]=n),o&&(s[4]?(s[1]="@supports (".concat(s[4],") {").concat(s[1],"}"),s[4]=o):s[4]="".concat(o)),t.push(s))}},t}},81:e=>{"use strict";e.exports=function(e){return e[1]}},703:(e,t,n)=>{"use strict";var r=n(414);function o(){}function a(){}a.resetWarningCache=o,e.exports=function(){function e(e,t,n,o,a,i){if(i!==r){var c=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw c.name="Invariant Violation",c}}function t(){return e}e.isRequired=e;var n={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:a,resetWarningCache:o};return n.PropTypes=n,n}},697:(e,t,n)=>{e.exports=n(703)()},414:e=>{"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"}},t={};function n(r){var o=t[r];if(void 0!==o)return o.exports;var a=t[r]={id:r,exports:{}};return e[r](a,a.exports,n),a.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var r={};(()=>{"use strict";n.r(r),n.d(r,{default:()=>m});const e=require("react");var t=n.n(e),o=n(184),a=n.n(o),i=n(697),c=n.n(i),l=n(28);function u(e){return u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},u(e)}var s=["className"],f=["className"];function p(e,t,n){return(t=function(e){var t=function(e,t){if("object"!==u(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,"string");if("object"!==u(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"===u(t)?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function h(){return h=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},h.apply(this,arguments)}function v(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function y(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,a,i,c=[],l=!0,u=!1;try{if(a=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;l=!1}else for(;!(l=(r=a.call(n)).done)&&(c.push(r.value),c.length!==t);l=!0);}catch(e){u=!0,o=e}finally{try{if(!l&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(u)throw o}}return c}}(e,t)||d(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function d(e,t){if(e){if("string"==typeof e)return b(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?b(e,t):void 0}}function b(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var g=(0,e.forwardRef)((function(n,r){var o=n.value,i=n.length,c=n.validChars,u=n.placeholder,g=n.autoFocus,m=n.inputProps,S=n.containerProps,_=n.classNames,w=n.onChange,O=n.onFocus,x=n.onBlur,j=y((0,e.useState)(""),2),P=j[0],A=j[1],k=y((0,e.useState)(!1),2),T=k[0],E=k[1],C=(0,e.useRef)(null);(0,e.useEffect)((function(){g&&C.current.focus()}),[g]);var I,N=function(){C.current.focus()},R=function(){return null!=o?o:P},F=m.className,M=v(m,s),D=S.className,z=v(S,f);return t().createElement("div",{className:"vi__wrapper"},t().createElement("input",h({spellCheck:!1,value:R(),onChange:function(e){var t=e.target.value.replace(/\s/g,"");RegExp("^[".concat(c,"]{0,").concat(i,"}$")).test(t)&&(w&&(null==w||w(t)),A(t))},ref:function(e){C.current=e,"function"==typeof r?r(e):r&&(r.current=e)},className:a()("vi",F),onKeyDown:function(e){["ArrowLeft","ArrowRight","ArrowUp","ArrowDown"].includes(e.key)&&e.preventDefault()},onFocus:function(){E(!0),null==O||O()},onBlur:function(){E(!1),null==x||x()},onSelect:function(e){var t=e.target.value;e.target.setSelectionRange(t.length,t.length)}},M)),t().createElement("div",h({"data-testid":"container",className:a()("vi__container",_.container,D),onClick:function(){return C.current.focus()}},z),(I=Array(i),function(e){if(Array.isArray(e))return b(e)}(I)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(I)||d(I)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()).map((function(e,n){var r;return t().createElement("div",{className:a()("vi__character",_.character,(r={"vi__character--selected":(R().length===n||R().length===n+1&&i===n+1)&&T},p(r,_.characterSelected,(R().length===n||R().length===n+1&&i===n+1)&&T),p(r,"vi__character--inactive",R().length<n),p(r,_.characterInactive,R().length<n),r)),onClick:N,id:"field-".concat(n),"data-testid":"character-".concat(n),key:n},R()[n]||u)}))),t().createElement("style",{dangerouslySetInnerHTML:{__html:l.Z}}))}));g.displayName="VerificationInput",g.propTypes={value:c().string,length:c().number,validChars:c().string,placeholder:c().string,autoFocus:c().bool,inputProps:c().object,containerProps:c().object,classNames:c().shape({container:c().string,character:c().string,characterInactive:c().string,characterSelected:c().string}),onChange:c().func,onFocus:c().func,onBlur:c().func},g.defaultProps={length:6,validChars:"A-Za-z0-9",placeholder:"ยท",autoFocus:!1,inputProps:{},containerProps:{},classNames:{}};const m=g})();var o=exports;for(var a in r)o[a]=r[a];r.__esModule&&Object.defineProperty(o,"__esModule",{value:!0})})(); | ||
(()=>{var e={184:(e,t)=>{var r;!function(){"use strict";var n={}.hasOwnProperty;function o(){for(var e=[],t=0;t<arguments.length;t++){var r=arguments[t];if(r){var a=typeof r;if("string"===a||"number"===a)e.push(r);else if(Array.isArray(r)){if(r.length){var i=o.apply(null,r);i&&e.push(i)}}else if("object"===a){if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]")){e.push(r.toString());continue}for(var c in r)n.call(r,c)&&r[c]&&e.push(c)}}}return e.join(" ")}e.exports?(o.default=o,e.exports=o):void 0===(r=function(){return o}.apply(t,[]))||(e.exports=r)}()},28:(e,t,r)=>{"use strict";r.d(t,{Z:()=>c});var n=r(81),o=r.n(n),a=r(645),i=r.n(a)()(o());i.push([e.id,"/* :where() gives the styles specificity 0, which makes them overridable */\n:where(.vi__wrapper) {\n position: relative;\n width: min-content;\n}\n\n.vi {\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n box-sizing: border-box;\n position: absolute;\n color: transparent;\n background: transparent;\n caret-color: transparent;\n outline: none;\n border: 0 none transparent;\n}\n\n.vi::selection {\n background: transparent;\n}\n\n:where(.vi__container) {\n display: flex;\n gap: 8px;\n height: 50px;\n width: 300px;\n}\n\n:where(.vi__character) {\n height: 100%;\n flex-grow: 1;\n flex-basis: 0;\n text-align: center;\n font-size: 36px;\n line-height: 50px;\n color: black;\n background-color: white;\n border: 1px solid black;\n cursor: default;\n user-select: none;\n box-sizing: border-box;\n}\n\n:where(.vi__character--inactive) {\n color: dimgray;\n background-color: lightgray;\n}\n\n:where(.vi__character--selected) {\n outline: 2px solid cornflowerblue;\n color: cornflowerblue;\n}\n",""]);const c=i},645:e=>{"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var r="",n=void 0!==t[5];return t[4]&&(r+="@supports (".concat(t[4],") {")),t[2]&&(r+="@media ".concat(t[2]," {")),n&&(r+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),r+=e(t),n&&(r+="}"),t[2]&&(r+="}"),t[4]&&(r+="}"),r})).join("")},t.i=function(e,r,n,o,a){"string"==typeof e&&(e=[[null,e,void 0]]);var i={};if(n)for(var c=0;c<this.length;c++){var l=this[c][0];null!=l&&(i[l]=!0)}for(var u=0;u<e.length;u++){var s=[].concat(e[u]);n&&i[s[0]]||(void 0!==a&&(void 0===s[5]||(s[1]="@layer".concat(s[5].length>0?" ".concat(s[5]):""," {").concat(s[1],"}")),s[5]=a),r&&(s[2]?(s[1]="@media ".concat(s[2]," {").concat(s[1],"}"),s[2]=r):s[2]=r),o&&(s[4]?(s[1]="@supports (".concat(s[4],") {").concat(s[1],"}"),s[4]=o):s[4]="".concat(o)),t.push(s))}},t}},81:e=>{"use strict";e.exports=function(e){return e[1]}},703:(e,t,r)=>{"use strict";var n=r(414);function o(){}function a(){}a.resetWarningCache=o,e.exports=function(){function e(e,t,r,o,a,i){if(i!==n){var c=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw c.name="Invariant Violation",c}}function t(){return e}e.isRequired=e;var r={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:a,resetWarningCache:o};return r.PropTypes=r,r}},697:(e,t,r)=>{e.exports=r(703)()},414:e=>{"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"}},t={};function r(n){var o=t[n];if(void 0!==o)return o.exports;var a=t[n]={id:n,exports:{}};return e[n](a,a.exports,r),a.exports}r.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return r.d(t,{a:t}),t},r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};(()=>{"use strict";r.r(n),r.d(n,{default:()=>m});const e=require("react");var t=r.n(e),o=r(184),a=r.n(o),i=r(697),c=r.n(i),l=r(28);function u(e){return u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},u(e)}var s=["className","type"],p=["className"];function f(e,t,r){return(t=function(e){var t=function(e,t){if("object"!==u(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,"string");if("object"!==u(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"===u(t)?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function y(){return y=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},y.apply(this,arguments)}function v(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function h(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,a,i,c=[],l=!0,u=!1;try{if(a=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;l=!1}else for(;!(l=(n=a.call(r)).done)&&(c.push(n.value),c.length!==t);l=!0);}catch(e){u=!0,o=e}finally{try{if(!l&&null!=r.return&&(i=r.return(),Object(i)!==i))return}finally{if(u)throw o}}return c}}(e,t)||d(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function d(e,t){if(e){if("string"==typeof e)return b(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?b(e,t):void 0}}function b(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}var g=(0,e.forwardRef)((function(r,n){var o=r.value,i=r.length,c=r.validChars,u=r.placeholder,g=r.autoFocus,m=r.passwordMode,w=r.inputProps,S=r.containerProps,_=r.classNames,O=r.onChange,x=r.onFocus,j=r.onBlur,P=h((0,e.useState)(""),2),A=P[0],k=P[1],T=h((0,e.useState)(!1),2),E=T[0],C=T[1],I=(0,e.useRef)(null);(0,e.useEffect)((function(){g&&I.current.focus()}),[g]);var N,R=function(){I.current.focus()},M=function(){return null!=o?o:A},F=w.className,D=w.type,z=v(w,s),B=S.className,L=v(S,p);return t().createElement("div",{className:"vi__wrapper"},t().createElement("input",y({"aria-label":"verification input",spellCheck:!1,value:M(),onChange:function(e){var t=e.target.value.replace(/\s/g,"");RegExp("^[".concat(c,"]{0,").concat(i,"}$")).test(t)&&(O&&(null==O||O(t)),k(t))},ref:function(e){I.current=e,"function"==typeof n?n(e):n&&(n.current=e)},className:a()("vi",F),onKeyDown:function(e){["ArrowLeft","ArrowRight","ArrowUp","ArrowDown"].includes(e.key)&&e.preventDefault()},onFocus:function(){C(!0),null==x||x()},onBlur:function(){C(!1),null==j||j()},onSelect:function(e){var t=e.target.value;e.target.setSelectionRange(t.length,t.length)},type:m?"password":D},z)),t().createElement("div",y({"data-testid":"container",className:a()("vi__container",_.container,B),onClick:function(){return I.current.focus()}},L),(N=Array(i),function(e){if(Array.isArray(e))return b(e)}(N)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(N)||d(N)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()).map((function(e,r){var n;return t().createElement("div",{className:a()("vi__character",_.character,(n={"vi__character--selected":(M().length===r||M().length===r+1&&i===r+1)&&E},f(n,_.characterSelected,(M().length===r||M().length===r+1&&i===r+1)&&E),f(n,"vi__character--inactive",M().length<r),f(n,_.characterInactive,M().length<r),n)),onClick:R,id:"field-".concat(r),"data-testid":"character-".concat(r),key:r},m&&M()[r]?"*":M()[r]||u)}))),t().createElement("style",{dangerouslySetInnerHTML:{__html:l.Z}}))}));g.displayName="VerificationInput",g.propTypes={value:c().string,length:c().number,validChars:c().string,placeholder:c().string,autoFocus:c().bool,passwordMode:c().bool,inputProps:c().object,containerProps:c().object,classNames:c().shape({container:c().string,character:c().string,characterInactive:c().string,characterSelected:c().string}),onChange:c().func,onFocus:c().func,onBlur:c().func},g.defaultProps={length:6,validChars:"A-Za-z0-9",placeholder:"ยท",autoFocus:!1,inputProps:{},containerProps:{},classNames:{}};const m=g})();var o=exports;for(var a in n)o[a]=n[a];n.__esModule&&Object.defineProperty(o,"__esModule",{value:!0})})(); |
{ | ||
"name": "react-verification-input", | ||
"version": "3.1.3", | ||
"version": "3.2.0", | ||
"main": "lib/index.js", | ||
@@ -5,0 +5,0 @@ "types": "lib/index.d.ts", |
@@ -59,2 +59,3 @@ ![logo](https://user-images.githubusercontent.com/17298270/184383285-616eaa7c-d911-4203-ad0a-9ddfa32e4e4b.png) | ||
| autoFocus | Boolean | `false` | Focus the input automatically as soon as it is rendered. | | ||
| passwordMode | Boolean | `false` | Hide the input value by displaying `*` instead. | | ||
| inputProps | Object | `{}` | The properties of this object get forwarded as props to the input element. | | ||
@@ -61,0 +62,0 @@ | containerProps | Object | `{}` | The properties of this object get forwarded as props to the container element. | |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
22684
25
95