react-customize-token-input - npm Package Compare versions

Comparing version 1.7.0 to 2.0.0-alpha

lib/index.js

 /*! For license information please see index.js.LICENSE.txt */
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports["token-input"]=t(require("react")):e.TokenInput=t(e.React)}(this,(function(e){return(()=>{var t={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)for(var u in n)r.call(n,u)&&n[u]&&e.push(u);else e.push(n.toString())}}return e.join(" ")}e.exports?(o.default=o,e.exports=o):void 0===(n=function(){return o}.apply(t,[]))||(e.exports=n)}()},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 u=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 u.name="Invariant Violation",u}}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"},639:(e,t,n)=>{"use strict";var r=Object.assign||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},o=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),a=n(787),i=l(a),u=l(n(863));function l(e){return e&&e.__esModule?e:{default:e}}var s={position:"absolute",top:0,left:0,visibility:"hidden",height:0,overflow:"scroll",whiteSpace:"pre"},c=["extraWidth","injectStyles","inputClassName","inputRef","inputStyle","minWidth","onAutosize","placeholderIsMinWidth"],f=function(e,t){t.style.fontSize=e.fontSize,t.style.fontFamily=e.fontFamily,t.style.fontWeight=e.fontWeight,t.style.fontStyle=e.fontStyle,t.style.letterSpacing=e.letterSpacing,t.style.textTransform=e.textTransform},p=!("undefined"==typeof window||!window.navigator)&&/MSIE |Trident\/|Edge\//.test(window.navigator.userAgent),d=function(){return p?"_"+Math.random().toString(36).substr(2,12):void 0},y=function(e){function t(e){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);var n=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.inputRef=function(e){n.input=e,"function"==typeof n.props.inputRef&&n.props.inputRef(e)},n.placeHolderSizerRef=function(e){n.placeHolderSizer=e},n.sizerRef=function(e){n.sizer=e},n.state={inputWidth:e.minWidth,inputId:e.id||d(),prevId:e.id},n}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,e),o(t,null,[{key:"getDerivedStateFromProps",value:function(e,t){var n=e.id;return n!==t.prevId?{inputId:n||d(),prevId:n}:null}}]),o(t,[{key:"componentDidMount",value:function(){this.mounted=!0,this.copyInputStyles(),this.updateInputWidth()}},{key:"componentDidUpdate",value:function(e,t){t.inputWidth!==this.state.inputWidth&&"function"==typeof this.props.onAutosize&&this.props.onAutosize(this.state.inputWidth),this.updateInputWidth()}},{key:"componentWillUnmount",value:function(){this.mounted=!1}},{key:"copyInputStyles",value:function(){if(this.mounted&&window.getComputedStyle){var e=this.input&&window.getComputedStyle(this.input);e&&(f(e,this.sizer),this.placeHolderSizer&&f(e,this.placeHolderSizer))}}},{key:"updateInputWidth",value:function(){if(this.mounted&&this.sizer&&void 0!==this.sizer.scrollWidth){var e=void 0;e=this.props.placeholder&&(!this.props.value||this.props.value&&this.props.placeholderIsMinWidth)?Math.max(this.sizer.scrollWidth,this.placeHolderSizer.scrollWidth)+2:this.sizer.scrollWidth+2,(e+="number"===this.props.type&&void 0===this.props.extraWidth?16:parseInt(this.props.extraWidth)||0)<this.props.minWidth&&(e=this.props.minWidth),e!==this.state.inputWidth&&this.setState({inputWidth:e})}}},{key:"getInput",value:function(){return this.input}},{key:"focus",value:function(){this.input.focus()}},{key:"blur",value:function(){this.input.blur()}},{key:"select",value:function(){this.input.select()}},{key:"renderStyles",value:function(){var e=this.props.injectStyles;return p&&e?i.default.createElement("style",{dangerouslySetInnerHTML:{__html:"input#"+this.state.inputId+"::-ms-clear {display: none;}"}}):null}},{key:"render",value:function(){var e=[this.props.defaultValue,this.props.value,""].reduce((function(e,t){return null!=e?e:t})),t=r({},this.props.style);t.display||(t.display="inline-block");var n=r({boxSizing:"content-box",width:this.state.inputWidth+"px"},this.props.inputStyle),o=function(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}(this.props,[]);return function(e){c.forEach((function(t){return delete e[t]}))}(o),o.className=this.props.inputClassName,o.id=this.state.inputId,o.style=n,i.default.createElement("div",{className:this.props.className,style:t},this.renderStyles(),i.default.createElement("input",r({},o,{ref:this.inputRef})),i.default.createElement("div",{ref:this.sizerRef,style:s},e),this.props.placeholder?i.default.createElement("div",{ref:this.placeHolderSizerRef,style:s},this.props.placeholder):null)}}]),t}(a.Component);y.propTypes={className:u.default.string,defaultValue:u.default.any,extraWidth:u.default.oneOfType([u.default.number,u.default.string]),id:u.default.string,injectStyles:u.default.bool,inputClassName:u.default.string,inputRef:u.default.func,inputStyle:u.default.object,minWidth:u.default.oneOfType([u.default.number,u.default.string]),onAutosize:u.default.func,onChange:u.default.func,placeholder:u.default.string,placeholderIsMinWidth:u.default.bool,style:u.default.object,value:u.default.any},y.defaultProps={minWidth:1,injectStyles:!0},t.Z=y},216:(e,t,n)=>{"use strict";var r=n(138);function o(){}function a(){}a.resetWarningCache=o,e.exports=function(){function e(e,t,n,o,a,i){if(i!==r){var u=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 u.name="Invariant Violation",u}}function t(){return e}e.isRequired=e;var n={array: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}},863:(e,t,n)=>{e.exports=n(216)()},138:e=>{"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},787:t=>{"use strict";t.exports=e}},n={};function r(e){var o=n[e];if(void 0!==o)return o.exports;var a=n[e]={exports:{}};return t[e](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 o={};return(()=>{"use strict";r.r(o),r.d(o,{JS__TOKEN__DELETE_BUTTON__CLASS_NAME:()=>d,KEY_DOWN_HANDLER_CONFIG_OPTION:()=>f,default:()=>X});var e=r(787),t=r.n(e),n=r(697),a=r.n(n),i=r(184),u=r.n(i),l=r(639);const s=function(){},c=function(e,t){var n=t.onBackspace,r=void 0===n?s:n,o=t.onTab,a=void 0===o?s:o,i=t.onEnter,u=void 0===i?s:i,l=t.onEscape,c=void 0===l?s:l;switch(function(e){var t=e.key,n=e.keyCode,r=t;return n&&229===n&&(r="Process"),{key:r}}(e).key){case"Backspace":r(e);break;case"Tab":a(e);break;case"Enter":u(e);break;case"Escape":c(e)}};var f={OFF:0,ON:1},p={onBackspace:f.ON,onTab:f.OFF,onEnter:f.ON,onEscape:f.ON},d="js__token__delete-button";function y(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function h(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?y(Object(n),!0).forEach((function(t){b(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):y(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function b(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var m=function(e){var t=e.keyDownEvent,n=e.keyDownHandlerConfig,r=e.predefinedHandler;switch(!0){case n===f.ON:r(t)}};const k=function(t){var n=t.specialKeyDown,r=t.inputInitValue,o=t.inputValue,a=t.onLastTokenDelete,i=t.handleInputValueUpdate,u=t.handleTokensCreate,l=h(h({},p),n),s=l.onBackspace,c=l.onTab,f=l.onEnter,d=l.onEscape;return{handleBackspaceKeyDown:(0,e.useCallback)((function(e){m({keyDownEvent:e,keyDownHandlerConfig:s,predefinedHandler:function(){0===o.length&&a()}})}),[s,o,a]),handleTabKeyDown:(0,e.useCallback)((function(e){m({keyDownEvent:e,keyDownHandlerConfig:c,predefinedHandler:function(e){e.preventDefault(),u(o)}})}),[c,o,u]),handleEnterKeyDown:(0,e.useCallback)((function(e){m({keyDownEvent:e,keyDownHandlerConfig:f,predefinedHandler:function(){u(o)}})}),[f,o,u]),handleEscapeKeyDown:(0,e.useCallback)((function(e){m({keyDownEvent:e,keyDownHandlerConfig:d,predefinedHandler:function(){i(r)}})}),[d,r,i])}},v="token-input-autosized-wrapper",g="token-input-token";function T(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 E=(0,e.forwardRef)((function(n,r){var o,a,i=n.placeholder,u=n.autoFocus,s=n.onFocus,f=n.onBlur,p=n.separators,d=n.specialKeyDown,y=n.onInputValueChange,h=n.onPreprocess,b=n.onBuildTokenValue,m=n.onNewTokenValuesAppend,g=n.onLastTokenDelete,E=(o=(0,e.useState)(""),a=2,function(e){if(Array.isArray(e))return e}(o)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,a=[],i=!0,u=!1;try{for(n=n.call(e);!(i=(r=n.next()).done)&&(a.push(r.value),!t||a.length!==t);i=!0);}catch(e){u=!0,o=e}finally{try{i||null==n.return||n.return()}finally{if(u)throw o}}return a}}(o,a)||function(e,t){if(e){if("string"==typeof e)return T(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)?T(e,t):void 0}}(o,a)||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.")}()),w=E[0],S=E[1],O=(0,e.useMemo)((function(){return new RegExp(p.join("|"))}),[p]),C=(0,e.useCallback)((function(e){S(e),y(e,w)}),[y,w,S]),I=(0,e.useCallback)((function(e){if(0!==e.trim().length){var t=e.split(O).filter((function(e){return e.trim().length>0})),n=h(t).map((function(e){return b(e)}));m(n),C("")}}),[O,h,b,m,C]),j=(0,e.useCallback)((function(e){var t=e.target.value,n=t.substring(t.length-1);!0!==O.test(n)?C(t):I(w)}),[O,I,w,C]),A=k({specialKeyDown:d,inputInitValue:"",inputValue:w,onLastTokenDelete:g,handleInputValueUpdate:C,handleTokensCreate:I}),D=A.handleBackspaceKeyDown,V=A.handleTabKeyDown,R=A.handleEnterKeyDown,_=A.handleEscapeKeyDown,P=(0,e.useCallback)((function(e){c(e,{onBackspace:D,onTab:V,onEnter:R,onEscape:_})}),[D,V,R,_]),N=(0,e.useCallback)((function(e){I(w),f(e)}),[I,w,f]),M=(0,e.useCallback)((function(e){e.preventDefault();var t=e.clipboardData.getData("text");I(t)}),[I]);return t().createElement("div",{className:v},t().createElement(l.Z,{ref:r,autoFocus:u,placeholder:i,value:w,onChange:j,onKeyDown:P,onPaste:M,onFocus:s,onBlur:N}))}));E.displayName="TokenCreator",E.propTypes={placeholder:a().string.isRequired,autoFocus:a().bool.isRequired,onFocus:a().func.isRequired,onBlur:a().func.isRequired,separators:a().array.isRequired,specialKeyDown:a().object.isRequired,onInputValueChange:a().func.isRequired,onPreprocess:a().func.isRequired,onBuildTokenValue:a().func.isRequired,onNewTokenValuesAppend:a().func.isRequired,onLastTokenDelete:a().func.isRequired};const w=E,S=function(){return t().createElement("div",{role:"img",className:"token-input-delete-button__close-icon","aria-hidden":"true","data-component-name":"CloseIcon"})};var O=function(e){var n=e.onRenderContent,r="function"==typeof n;return t().createElement("span",{role:"button",className:u()(d,"token-input-token__delete-button"),"aria-hidden":"true","data-component-name":"DeleteButton"},r&&n(),!r&&t().createElement(S,null))};O.propTypes={onRenderContent:a().func};const C=O;function I(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function j(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 A=function(e){e.stopPropagation()},D=function(n){var r,o,a=n.readOnly,i=n.tokenValue,s=n.tokenMeta,f=n.onGetClassName,p=n.onGetDisplayLabel,y=n.onRenderDeleteButtonContent,h=n.onIsEditable,b=n.onGetEditableValue,m=n.onGetErrorMessage,k=n.onBuildTokenValue,T=n.onEditStart,E=n.onEditEnd,w=n.onDelete,S=(0,e.useRef)(null),O=(r=(0,e.useState)(""),o=2,function(e){if(Array.isArray(e))return e}(r)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,a=[],i=!0,u=!1;try{for(n=n.call(e);!(i=(r=n.next()).done)&&(a.push(r.value),!t||a.length!==t);i=!0);}catch(e){u=!0,o=e}finally{try{i||null==n.return||n.return()}finally{if(u)throw o}}return a}}(r,o)||function(e,t){if(e){if("string"==typeof e)return j(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)?j(e,t):void 0}}(r,o)||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.")}()),D=O[0],V=O[1],R=s.activated,_=s.error,P=(0,e.useMemo)((function(){return h(i,s)}),[h,i,s]),N=(0,e.useCallback)((function(){var e=b(i,s);V(e),T()}),[V,i,s,b,T]);(0,e.useEffect)((function(){R&&S.current&&S.current.focus()}),[R]);var M=(0,e.useCallback)((function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.reset,n=void 0!==t&&t,r=0===D.length;if(n||r)E();else{var o=k(D);E(o)}}),[D,k,E]),x=(0,e.useCallback)((function(e){e.stopPropagation(),a||(e.target.closest(".".concat(g," .").concat(d))?w():P&&N())}),[a,P,w,N]),B=(0,e.useCallback)((function(e){var t=e.target.value;V(t)}),[V]),W=(0,e.useCallback)((function(e){c(e,{onEscape:function(){return M({reset:!0})},onEnter:function(){return M()}})}),[M]),G=(0,e.useCallback)((function(){M()}),[M]),q=(0,e.useMemo)((function(){var e;return u()(f(i,s),g,(I(e={},"token-input-token--read-only",a),I(e,"token-input-token--editable",P&&!a),I(e,"token-input-token--active",R),I(e,"token-input-token--error",_&&!R),e))}),[f,a,P,R,_,i,s]),F=(0,e.useMemo)((function(){return m(i,s)}),[m,i,s]);return R?t().createElement("div",{role:"presentation",className:q,onClick:A},t().createElement("div",{className:v},t().createElement(l.Z,{ref:S,value:D,onChange:B,onKeyDown:W,onBlur:G}))):t().createElement("div",{role:"presentation",className:q,onClick:x,title:F,"data-component-name":"Token"},t().createElement("div",{className:"token-input-token__label-wrapper"},p(i,s)),!a&&t().createElement(C,{onRenderContent:y}))};D.propTypes={readOnly:a().bool.isRequired,tokenValue:a().any.isRequired,tokenMeta:a().object.isRequired,onGetClassName:a().func.isRequired,onGetDisplayLabel:a().func.isRequired,onRenderDeleteButtonContent:a().func,onIsEditable:a().func.isRequired,onGetEditableValue:a().func.isRequired,onGetErrorMessage:a().func.isRequired,onBuildTokenValue:a().func.isRequired,onEditStart:a().func.isRequired,onEditEnd:a().func.isRequired,onDelete:a().func.isRequired};const V=D;function R(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}const _=function(){var t,n,r=(t=(0,e.useState)(!1),n=2,function(e){if(Array.isArray(e))return e}(t)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,a=[],i=!0,u=!1;try{for(n=n.call(e);!(i=(r=n.next()).done)&&(a.push(r.value),!t||a.length!==t);i=!0);}catch(e){u=!0,o=e}finally{try{i||null==n.return||n.return()}finally{if(u)throw o}}return a}}(t,n)||function(e,t){if(e){if("string"==typeof e)return R(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)?R(e,t):void 0}}(t,n)||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.")}()),o=r[0],a=r[1];return{isTokenInputFocused:o,handleTokenInputFocus:(0,e.useCallback)((function(){a(!0)}),[]),handleTokenInputBlur:(0,e.useCallback)((function(){a(!1)}),[])}},P=function(e,t,n){return{key:"".concat(JSON.stringify(t),"-").concat(Date.now(),"-").concat(n),activated:!1,error:e}};function N(e,t){if(e){if("string"==typeof e)return M(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)?M(e,t):void 0}}function M(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}const x=function(){var t,n,r=(t=(0,e.useState)([]),n=2,function(e){if(Array.isArray(e))return e}(t)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,a=[],i=!0,u=!1;try{for(n=n.call(e);!(i=(r=n.next()).done)&&(a.push(r.value),!t||a.length!==t);i=!0);}catch(e){u=!0,o=e}finally{try{i||null==n.return||n.return()}finally{if(u)throw o}}return a}}(t,n)||N(t,n)||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.")}()),o=r[0],a=r[1],i=(0,e.useCallback)((function(e,t){if(e>=o.length)throw new Error("setTokenActivated out of tokenMetas scope; targetIndex ".concat(e,"; tokenMetas.length ").concat(o.length));var n=function(e){return function(e){if(Array.isArray(e))return M(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||N(e)||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.")}()}(o);n[e].activated=t,a(n)}),[o]);return{buildTokenMeta:P,tokenMetas:o,setTokenMetas:a,setTokenActivated:i}};function B(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=!0,u=!1;try{for(n=n.call(e);!(i=(r=n.next()).done)&&(a.push(r.value),!t||a.length!==t);i=!0);}catch(e){u=!0,o=e}finally{try{i||null==n.return||n.return()}finally{if(u)throw o}}return a}}(e,t)||W(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 W(e,t){if(e){if("string"==typeof e)return G(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)?G(e,t):void 0}}function G(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}const q=function(t){var n=t.tokenValues,r=t.onTokenValueValidate,o=x(),a=o.buildTokenMeta,i=o.tokenMetas,u=o.setTokenMetas,l=o.setTokenActivated,s=B((0,e.useState)(!1),2),c=s[0],f=s[1],p=B((0,e.useState)([]),2),d=p[0],y=p[1];return(0,e.useLayoutEffect)((function(){var e,t=!1,o=n.map((function(e,o){var i=r(e,o,n),u=a(i,e,o);return u.error&&!u.activated&&(t=!0),u}));y(function(e){if(Array.isArray(e))return G(e)}(e=n)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||W(e)||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.")}()),u(o),f(t)}),[n,r,u,a]),{hasInvalidToken:c,internalTokenValues:d,tokenMetas:i,setTokenActivated:l}};function F(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}const z=function(t){var n=t.tokenValues,r=t.onTokenValuesChange,o=t.setTokenActivated,a=t.handleTokenInputFocus,i=t.handleTokenInputBlur;return{handleTokenEditStart:(0,e.useCallback)((function(e){return function(){o(e,!0),a()}}),[o,a]),handleTokenEditEnd:(0,e.useCallback)((function(e){return function(t){if(o(e,!1),i(),void 0!==t){var a=function(e){if(Array.isArray(e))return F(e)}(u=n)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(u)||function(e,t){if(e){if("string"==typeof e)return F(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)?F(e,t):void 0}}(u)||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.")}();a[e]=t,r(a)}var u}}),[n,r,o,i])}};function L(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}const K=function(t){var n=t.tokenValues,r=t.onTokenValuesChange,o=t.focusTokenCreator,a=(0,e.useCallback)((function(e){var t,a=function(e){if(Array.isArray(e))return L(e)}(t=n)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(t)||function(e,t){if(e){if("string"==typeof e)return L(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)?L(e,t):void 0}}(t)||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.")}();a.splice(e,1),r(a),o()}),[n,r,o]);return{handleTokenDelete:(0,e.useCallback)((function(e){return function(){a(e)}}),[a]),handleLastTokenDelete:(0,e.useCallback)((function(){a(-1)}),[a])}},H=function(e,t){return e};var U=["className","readOnly","autoFocus","placeholder","tokenValues","onTokenValuesChange","onBuildTokenValue","customizeTokenComponent","onGetTokenClassName","onGetTokenDisplayLabel","onRenderTokenDeleteButtonContent","onIsTokenEditable","onGetTokenEditableValue","onGetTokenErrorMessage","separators","specialKeyDown","onPreprocess","onInputValueChange","onTokenValueValidate"];function $(){return($=Object.assign||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}).apply(this,arguments)}function Y(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function Z(e){return function(e){if(Array.isArray(e))return J(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,t){if(e){if("string"==typeof e)return J(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)?J(e,t):void 0}}(e)||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.")}()}function J(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 Q=function(n){var r,o=n.className,a=n.readOnly,i=n.autoFocus,l=n.placeholder,s=n.tokenValues,c=n.onTokenValuesChange,f=n.onBuildTokenValue,p=n.customizeTokenComponent,d=n.onGetTokenClassName,y=n.onGetTokenDisplayLabel,h=n.onRenderTokenDeleteButtonContent,b=n.onIsTokenEditable,m=n.onGetTokenEditableValue,k=n.onGetTokenErrorMessage,v=n.separators,g=n.specialKeyDown,T=n.onPreprocess,E=n.onInputValueChange,S=n.onTokenValueValidate,O=function(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}(n,U),C=_(),I=C.isTokenInputFocused,j=C.handleTokenInputFocus,A=C.handleTokenInputBlur,D=function(){var t=(0,e.useRef)(null),n=(0,e.useCallback)((function(){t&&t.current&&t.current.focus()}),[]);return{tokenCreatorRef:t,focusTokenCreator:n}}(),R=D.tokenCreatorRef,P=D.focusTokenCreator,N=q({tokenValues:s,onTokenValueValidate:S}),M=N.hasInvalidToken,x=N.internalTokenValues,B=N.tokenMetas,W=N.setTokenActivated,G=z({tokenValues:s,onTokenValuesChange:c,setTokenActivated:W,handleTokenInputFocus:j,handleTokenInputBlur:A}),F=G.handleTokenEditStart,L=G.handleTokenEditEnd,H=K({tokenValues:s,onTokenValuesChange:c,focusTokenCreator:P}),J=H.handleTokenDelete,Q=H.handleLastTokenDelete,X=(0,e.useCallback)((function(e){if(0!==e.length){var t=[].concat(Z(s),Z(e));c(t)}}),[s,c]),ee=(0,e.useCallback)((function(e){if("function"!=typeof T)return e;var t=T(e);if(!0!==Array.isArray(t))throw new Error("onPreprocess should return an array of values");return t}),[T]),te=p||V;return t().createElement("div",$({},O,{className:u()(o,"token-input-container",(r={},Y(r,"token-input-container--focused",I),Y(r,"token-input-container--errors",M),r)),onClick:P,role:"presentation","data-component-name":"TokenInput"}),t().createElement("div",{className:"token-input-token-list"},x.map((function(e,n){var r=B[n],o=r.key;return t().createElement(te,{key:o,readOnly:a,tokenValue:e,tokenMeta:r,onGetClassName:d,onGetDisplayLabel:y,onRenderDeleteButtonContent:h,onIsEditable:b,onGetEditableValue:m,onGetErrorMessage:k,onBuildTokenValue:f,onEditStart:F(n),onEditEnd:L(n),onDelete:J(n)})}))),!a&&t().createElement(w,{ref:R,placeholder:l,autoFocus:i,onFocus:j,onBlur:A,separators:v,specialKeyDown:g,onInputValueChange:E,onPreprocess:ee,onBuildTokenValue:f,onNewTokenValuesAppend:X,onLastTokenDelete:Q}))};Q.propTypes={style:a().object,className:a().string,readOnly:a().bool,autoFocus:a().bool,placeholder:a().string,separators:a().array,tokenValues:a().array.isRequired,onTokenValuesChange:a().func,onPreprocess:a().func,onBuildTokenValue:a().func,onInputValueChange:a().func,onTokenValueValidate:a().func,onGetTokenClassName:a().func,onGetTokenDisplayLabel:a().func,onRenderTokenDeleteButtonContent:a().func,onIsTokenEditable:a().func,onGetTokenEditableValue:a().func,onGetTokenErrorMessage:a().func,customizeTokenComponent:a().func,specialKeyDown:a().object},Q.defaultProps={className:"",readOnly:!1,autoFocus:!1,placeholder:"",separators:[",",";","\n","\r","\r\n"],specialKeyDown:{onBackspace:1,onTab:0,onEnter:1,onEscape:1},onBuildTokenValue:function(e){return e.trim()},onInputValueChange:s,onTokenValueValidate:s,onTokenValuesChange:s,onGetTokenClassName:s,onGetTokenDisplayLabel:H,onIsTokenEditable:function(){return!0},onGetTokenEditableValue:H,onGetTokenErrorMessage:function(e,t){if("string"==typeof t.error)return t.error}};const X=Q})(),o})()}));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports["token-input"]=t(require("react")):e.TokenInput=t(e.React)}(this,(function(e){return(()=>{var t={733:function(e,t,n){"use strict";var o=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});var r=o(n(787)),a=o(n(433));t.default=function(){return r.default.createElement("div",{role:"img",className:a.default["delete-button__close-icon"],"aria-hidden":"true"})}},242:function(e,t,n){"use strict";var o=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});var r=o(n(787)),a=o(n(184)),u=o(n(733)),l=o(n(433)),i=n(754);t.default=function(e){var t,n=e.onRenderContent;return r.default.createElement("span",{role:"button",className:(0,a.default)(i.JS__TOKEN__DELETE_BUTTON__CLASS_NAME,l.default["token__delete-button"]),"aria-hidden":"true"},null!==(t=null==n?void 0:n())&&void 0!==t?t:r.default.createElement(u.default,null))}},83:function(e,t,n){"use strict";var o=this&&this.__createBinding||(Object.create?function(e,t,n,o){void 0===o&&(o=n),Object.defineProperty(e,o,{enumerable:!0,get:function(){return t[n]}})}:function(e,t,n,o){void 0===o&&(o=n),e[o]=t[n]}),r=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),a=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&o(t,e,n);return r(t,e),t},u=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});var l=a(n(787)),i=u(n(184)),s=u(n(639)),c=u(n(971)),f=u(n(242)),d=n(754),p=u(n(433)),_=function(e){e.stopPropagation()};t.default=function(e){var t=e.readOnly,n=e.tokenValue,o=e.tokenMeta,r=e.onGetClassName,a=e.onGetDisplayLabel,u=e.onRenderDeleteButtonContent,h=e.onGetIsEditable,y=e.onGetEditableValue,v=e.onGetErrorMessage,k=e.onBuildTokenValue,b=e.onEditStart,O=e.onEditEnd,T=e.onDelete,E=(0,l.useRef)(null),m=(0,l.useState)(d.DEFAULT_INPUT_INIT_VALUE),g=m[0],N=m[1],C=o.activated,D=o.error,I=(0,l.useMemo)((function(){return h(n,o)}),[h,n,o]),S=(0,l.useCallback)((function(){var e=y(n,o);N(e),b()}),[N,n,o,y,b]);(0,l.useEffect)((function(){var e=E.current;C&&e&&e.getInput().focus()}),[C]);var P=(0,l.useCallback)((function(e){var t=(void 0===e?{}:e).reset,n=void 0!==t&&t,o=0===g.length;if(n||o)O();else{var r=k(g);O(r)}}),[g,k,O]),A=(0,l.useCallback)((function(e){e.stopPropagation(),t||(e.target.closest(".".concat(p.default.token," .").concat(d.JS__TOKEN__DELETE_BUTTON__CLASS_NAME))?T():I&&S())}),[t,I,T,S]),j=(0,l.useCallback)((function(e){var t=e.target.value;N(t)}),[N]),M=(0,l.useCallback)((function(e){(0,c.default)(e,{onEscape:function(){return P({reset:!0})},onEnter:function(){return P()}})}),[P]),w=(0,l.useCallback)((function(){P()}),[P]),L=(0,l.useMemo)((function(){var e;return(0,i.default)(null==r?void 0:r(n,o),p.default.token,((e={})[p.default["token--read-only"]]=t,e[p.default["token--editable"]]=I&&!t,e[p.default["token--active"]]=C,e[p.default["token--error"]]=D&&!C,e))}),[r,t,I,C,D,n,o]),V=(0,l.useMemo)((function(){return v(n,o)}),[v,n,o]);return C?l.default.createElement("div",{role:"presentation",className:L,onClick:_},l.default.createElement("div",{className:p.default["autosized-wrapper"]},l.default.createElement(s.default,{ref:E,value:g,onChange:j,onKeyDown:M,onBlur:w}))):l.default.createElement("div",{role:"presentation",className:L,onClick:A,title:"string"==typeof V?V:void 0},l.default.createElement("div",{className:p.default["token__label-wrapper"]},a(n,o)),!t&&l.default.createElement(f.default,{onRenderContent:u}))}},84:function(e,t,n){"use strict";var o=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});var r=o(n(83));t.default=r.default},962:function(e,t,n){"use strict";var o=this&&this.__createBinding||(Object.create?function(e,t,n,o){void 0===o&&(o=n),Object.defineProperty(e,o,{enumerable:!0,get:function(){return t[n]}})}:function(e,t,n,o){void 0===o&&(o=n),e[o]=t[n]}),r=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),a=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&o(t,e,n);return r(t,e),t},u=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});var l=a(n(787)),i=u(n(639)),s=u(n(971)),c=u(n(732)),f=n(754),d=u(n(433)),p=(0,l.forwardRef)((function(e,t){var n=e.placeholder,o=e.autoFocus,r=e.onFocus,a=e.onBlur,u=e.separators,p=e.specialKeyDown,_=e.onInputValueChange,h=e.onPreprocess,y=e.onBuildTokenValue,v=e.onNewTokenValuesAppend,k=e.onLastTokenDelete,b=(0,l.useState)(f.DEFAULT_INPUT_INIT_VALUE),O=b[0],T=b[1],E=(0,l.useMemo)((function(){return new RegExp(u.join("|"))}),[u]),m=(0,l.useCallback)((function(e){T(e),null==_||_(e,O)}),[_,O,T]),g=(0,l.useCallback)((function(e){if(0!==e.trim().length){var t=e.split(E).filter((function(e){return e.trim().length>0})),n=h(t).map((function(e){return y(e)}));v(n),m(f.DEFAULT_INPUT_INIT_VALUE)}}),[E,h,y,v,m]),N=(0,l.useCallback)((function(e){var t=e.target.value,n=t.substring(t.length-1);!0!==E.test(n)?m(t):g(O)}),[E,g,O,m]),C=(0,c.default)({specialKeyDownConfig:p,inputInitValue:f.DEFAULT_INPUT_INIT_VALUE,inputValue:O,onLastTokenDelete:k,handleInputValueUpdate:m,handleTokensCreate:g}),D=C.handleBackspaceKeyDown,I=C.handleTabKeyDown,S=C.handleEnterKeyDown,P=C.handleEscapeKeyDown,A=(0,l.useCallback)((function(e){(0,s.default)(e,{onBackspace:D,onTab:I,onEnter:S,onEscape:P})}),[D,I,S,P]),j=(0,l.useCallback)((function(){g(O),a()}),[g,O,a]),M=(0,l.useCallback)((function(e){e.preventDefault();var t=e.clipboardData.getData("text");g(t)}),[g]);return l.default.createElement("div",{className:d.default["autosized-wrapper"]},l.default.createElement(i.default,{ref:t,autoFocus:o,placeholder:n,value:O,onChange:N,onKeyDown:A,onPaste:M,onFocus:r,onBlur:j}))}));t.default=p},922:function(e,t,n){"use strict";var o=this&&this.__assign||function(){return(o=Object.assign||function(e){for(var t,n=1,o=arguments.length;n<o;n++)for(var r in t=arguments[n])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e}).apply(this,arguments)},r=this&&this.__createBinding||(Object.create?function(e,t,n,o){void 0===o&&(o=n),Object.defineProperty(e,o,{enumerable:!0,get:function(){return t[n]}})}:function(e,t,n,o){void 0===o&&(o=n),e[o]=t[n]}),a=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),u=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&r(t,e,n);return a(t,e),t},l=this&&this.__rest||function(e,t){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(o=Object.getOwnPropertySymbols(e);r<o.length;r++)t.indexOf(o[r])<0&&Object.prototype.propertyIsEnumerable.call(e,o[r])&&(n[o[r]]=e[o[r]])}return n},i=this&&this.__spreadArray||function(e,t,n){if(n||2===arguments.length)for(var o,r=0,a=t.length;r<a;r++)!o&&r in t||(o||(o=Array.prototype.slice.call(t,0,r)),o[r]=t[r]);return e.concat(o||Array.prototype.slice.call(t))},s=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});var c=u(n(787)),f=s(n(184)),d=s(n(962)),p=s(n(84)),_=s(n(598)),h=s(n(872)),y=s(n(870)),v=s(n(970)),k=s(n(120)),b=s(n(835)),O=s(n(360)),T=s(n(453)),E=s(n(810)),m=s(n(196)),g=n(754),N=s(n(433));t.default=function(e){var t,n=e.className,r=e.readOnly,a=void 0!==r&&r,u=e.autoFocus,s=void 0!==u&&u,C=e.placeholder,D=e.tokenValues,I=e.separators,S=void 0===I?g.DEFAULT_SEPARATORS:I,P=e.specialKeyDown,A=void 0===P?g.DEFAULT_SPECIAL_KEY_DOWN_CONFIG:P,j=e.onInputValueChange,M=e.onPreprocess,w=e.onTokenValueValidate,L=void 0===w?b.default:w,V=e.onTokenValuesChange,F=e.onBuildTokenValue,W=void 0===F?O.default:F,R=e.customizeTokenComponent,U=e.onGetTokenClassName,K=e.onGetTokenDisplayLabel,B=void 0===K?E.default:K,x=e.onRenderTokenDeleteButtonContent,G=e.onGetIsTokenEditable,H=void 0===G?T.default:G,z=e.onGetTokenEditableValue,Y=void 0===z?E.default:z,J=e.onGetTokenErrorMessage,q=void 0===J?m.default:J,Q=l(e,["className","readOnly","autoFocus","placeholder","tokenValues","separators","specialKeyDown","onInputValueChange","onPreprocess","onTokenValueValidate","onTokenValuesChange","onBuildTokenValue","customizeTokenComponent","onGetTokenClassName","onGetTokenDisplayLabel","onRenderTokenDeleteButtonContent","onGetIsTokenEditable","onGetTokenEditableValue","onGetTokenErrorMessage"]),X=(0,_.default)(),Z=X.isTokenInputFocused,$=X.handleTokenInputFocus,ee=X.handleTokenInputBlur,te=(0,h.default)(),ne=te.tokenCreatorRef,oe=te.focusTokenCreator,re=(0,y.default)({tokenValues:D,onTokenValueValidate:L}),ae=re.hasInvalidToken,ue=re.internalTokenValues,le=re.tokenMetas,ie=re.setTokenActivated,se=(0,v.default)({tokenValues:D,onTokenValuesChange:V,setTokenActivated:ie,handleTokenInputFocus:$,handleTokenInputBlur:ee}),ce=se.handleTokenEditStart,fe=se.handleTokenEditEnd,de=(0,k.default)({tokenValues:D,onTokenValuesChange:V,focusTokenCreator:oe}),pe=de.handleTokenDelete,_e=de.handleLastTokenDelete,he=(0,c.useCallback)((function(e){if(0!==e.length){var t=i(i([],D,!0),e,!0);null==V||V(t)}}),[D,V]),ye=(0,c.useCallback)((function(e){if("function"!=typeof M)return e;var t=M(e);if(!0!==Array.isArray(t))throw new Error("onPreprocess should return an array of values");return t}),[M]),ve=R||p.default;return c.default.createElement("div",o({},Q,{className:(0,f.default)(n,N.default.container,(t={},t[N.default["container--focused"]]=Z,t[N.default["container--errors"]]=ae,t)),onClick:oe,role:"presentation"}),c.default.createElement("div",{className:N.default["token-list"]},ue.map((function(e,t){var n=le[t],o=n.key;return c.default.createElement(ve,{key:o,readOnly:a,tokenValue:e,tokenMeta:n,onGetClassName:U,onGetDisplayLabel:B,onRenderDeleteButtonContent:x,onGetIsEditable:H,onGetEditableValue:Y,onGetErrorMessage:q,onBuildTokenValue:W,onEditStart:ce(t),onEditEnd:fe(t),onDelete:pe(t)})}))),!a&&c.default.createElement(d.default,{ref:ne,placeholder:C,autoFocus:s,onFocus:$,onBlur:ee,separators:S,specialKeyDown:A,onInputValueChange:j,onPreprocess:ye,onBuildTokenValue:W,onNewTokenValuesAppend:he,onLastTokenDelete:_e}))}},754:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.DEFAULT_INPUT_INIT_VALUE=t.JS__TOKEN__DELETE_BUTTON__CLASS_NAME=t.DEFAULT_SPECIAL_KEY_DOWN_CONFIG=t.KEY_DOWN_HANDLER_CONFIG_OPTION=t.DEFAULT_SEPARATORS=void 0,t.DEFAULT_SEPARATORS=[",",";","\n","\r","\r\n"],t.KEY_DOWN_HANDLER_CONFIG_OPTION={OFF:0,ON:1},t.DEFAULT_SPECIAL_KEY_DOWN_CONFIG={onBackspace:t.KEY_DOWN_HANDLER_CONFIG_OPTION.ON,onTab:t.KEY_DOWN_HANDLER_CONFIG_OPTION.OFF,onEnter:t.KEY_DOWN_HANDLER_CONFIG_OPTION.ON,onEscape:t.KEY_DOWN_HANDLER_CONFIG_OPTION.ON},t.JS__TOKEN__DELETE_BUTTON__CLASS_NAME="js__token__delete-button",t.DEFAULT_INPUT_INIT_VALUE=""},732:function(e,t,n){"use strict";var o=this&&this.__assign||function(){return(o=Object.assign||function(e){for(var t,n=1,o=arguments.length;n<o;n++)for(var r in t=arguments[n])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e}).apply(this,arguments)};Object.defineProperty(t,"__esModule",{value:!0});var r=n(787),a=n(754),u=function(e){var t=e.keyDownHandlerConfig,n=e.predefinedHandler;switch(!0){case t===a.KEY_DOWN_HANDLER_CONFIG_OPTION.ON:n()}};t.default=function(e){var t=e.specialKeyDownConfig,n=e.inputInitValue,l=e.inputValue,i=e.onLastTokenDelete,s=e.handleInputValueUpdate,c=e.handleTokensCreate,f=o(o({},a.DEFAULT_SPECIAL_KEY_DOWN_CONFIG),t),d=f.onBackspace,p=f.onTab,_=f.onEnter,h=f.onEscape;return{handleBackspaceKeyDown:(0,r.useCallback)((function(){u({keyDownHandlerConfig:d,predefinedHandler:function(){0===l.length&&i()}})}),[d,l,i]),handleTabKeyDown:(0,r.useCallback)((function(e){u({keyDownHandlerConfig:p,predefinedHandler:function(){e.preventDefault(),c(l)}})}),[p,l,c]),handleEnterKeyDown:(0,r.useCallback)((function(){u({keyDownHandlerConfig:_,predefinedHandler:function(){c(l)}})}),[_,l,c]),handleEscapeKeyDown:(0,r.useCallback)((function(){u({keyDownHandlerConfig:h,predefinedHandler:function(){s(n)}})}),[h,n,s])}}},872:(e,t,n)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(787);t.default=function(){var e=(0,o.useRef)(null),t=(0,o.useCallback)((function(){var t=null==e?void 0:e.current;t&&t.getInput().focus()}),[]);return{tokenCreatorRef:e,focusTokenCreator:t}}},120:function(e,t,n){"use strict";var o=this&&this.__spreadArray||function(e,t,n){if(n||2===arguments.length)for(var o,r=0,a=t.length;r<a;r++)!o&&r in t||(o||(o=Array.prototype.slice.call(t,0,r)),o[r]=t[r]);return e.concat(o||Array.prototype.slice.call(t))};Object.defineProperty(t,"__esModule",{value:!0});var r=n(787);t.default=function(e){var t=e.tokenValues,n=e.onTokenValuesChange,a=e.focusTokenCreator,u=(0,r.useCallback)((function(e){var r=o([],t,!0);r.splice(e,1),null==n||n(r),a()}),[t,n,a]);return{handleTokenDelete:(0,r.useCallback)((function(e){return function(){u(e)}}),[u]),handleLastTokenDelete:(0,r.useCallback)((function(){u(-1)}),[u])}}},970:function(e,t,n){"use strict";var o=this&&this.__spreadArray||function(e,t,n){if(n||2===arguments.length)for(var o,r=0,a=t.length;r<a;r++)!o&&r in t||(o||(o=Array.prototype.slice.call(t,0,r)),o[r]=t[r]);return e.concat(o||Array.prototype.slice.call(t))};Object.defineProperty(t,"__esModule",{value:!0});var r=n(787);t.default=function(e){var t=e.tokenValues,n=e.onTokenValuesChange,a=e.setTokenActivated,u=e.handleTokenInputFocus,l=e.handleTokenInputBlur;return{handleTokenEditStart:(0,r.useCallback)((function(e){return function(){a(e,!0),u()}}),[a,u]),handleTokenEditEnd:(0,r.useCallback)((function(e){return function(r){if(a(e,!1),l(),void 0!==r){var u=o([],t,!0);u[e]=r,null==n||n(u)}}}),[t,n,a,l])}}},598:(e,t,n)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(787);t.default=function(){var e=(0,o.useState)(!1),t=e[0],n=e[1];return{isTokenInputFocused:t,handleTokenInputFocus:(0,o.useCallback)((function(){n(!0)}),[]),handleTokenInputBlur:(0,o.useCallback)((function(){n(!1)}),[])}}},55:function(e,t,n){"use strict";var o=this&&this.__spreadArray||function(e,t,n){if(n||2===arguments.length)for(var o,r=0,a=t.length;r<a;r++)!o&&r in t||(o||(o=Array.prototype.slice.call(t,0,r)),o[r]=t[r]);return e.concat(o||Array.prototype.slice.call(t))};Object.defineProperty(t,"__esModule",{value:!0});var r=n(787);t.default=function(){var e=(0,r.useState)([]),t=e[0],n=e[1],a=(0,r.useCallback)((function(e,r){if(e>=t.length)throw new Error("setTokenActivated out of tokenMetas scope; targetIndex ".concat(e,"; tokenMetas.length ").concat(t.length));var a=o([],t,!0);a[e].activated=r,n(a)}),[t]);return{tokenMetas:t,setTokenMetas:n,setTokenActivated:a}}},870:function(e,t,n){"use strict";var o=this&&this.__spreadArray||function(e,t,n){if(n||2===arguments.length)for(var o,r=0,a=t.length;r<a;r++)!o&&r in t||(o||(o=Array.prototype.slice.call(t,0,r)),o[r]=t[r]);return e.concat(o||Array.prototype.slice.call(t))},r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});var a=n(787),u=r(n(55)),l=r(n(748));t.default=function(e){var t=e.tokenValues,n=e.onTokenValueValidate,r=(0,u.default)(),i=r.tokenMetas,s=r.setTokenMetas,c=r.setTokenActivated,f=(0,a.useState)(!1),d=f[0],p=f[1],_=(0,a.useState)([]),h=_[0],y=_[1];return(0,a.useLayoutEffect)((function(){var e=!1,r=t.map((function(o,r){var a=n(o,r,t),u=(0,l.default)(a,o,r);return u.error&&!u.activated&&(e=!0),u}));y(o([],t,!0)),s(r),p(e)}),[t,n,s]),{hasInvalidToken:d,internalTokenValues:h,tokenMetas:i,setTokenActivated:c}}},820:function(e,t,n){"use strict";var o=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.KEY_DOWN_HANDLER_CONFIG_OPTION=t.JS__TOKEN__DELETE_BUTTON__CLASS_NAME=void 0;var r=o(n(922)),a=n(754);Object.defineProperty(t,"JS__TOKEN__DELETE_BUTTON__CLASS_NAME",{enumerable:!0,get:function(){return a.JS__TOKEN__DELETE_BUTTON__CLASS_NAME}}),Object.defineProperty(t,"KEY_DOWN_HANDLER_CONFIG_OPTION",{enumerable:!0,get:function(){return a.KEY_DOWN_HANDLER_CONFIG_OPTION}}),t.default=r.default},748:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t,n){return{key:"".concat(JSON.stringify(t),"-").concat(Date.now(),"-").concat(n),activated:!1,error:e}}},360:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){return e.trim()}},453:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(){return!0}},810:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){return"".concat(e)}},196:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){if("string"==typeof t.error)return t.error}},835:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(){}},971:function(e,t,n){"use strict";var o=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});var r=o(n(776));t.default=function(e,t){var n=t.onBackspace,o=t.onTab,a=t.onEnter,u=t.onEscape;switch((0,r.default)(e).key){case"Backspace":null==n||n(e);break;case"Tab":null==o||o(e);break;case"Enter":null==a||a(e);break;case"Escape":null==u||u(e)}}},184:(e,t)=>{var n;!function(){"use strict";var o={}.hasOwnProperty;function r(){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 u=r.apply(null,n);u&&e.push(u)}}else if("object"===a)if(n.toString===Object.prototype.toString)for(var l in n)o.call(n,l)&&n[l]&&e.push(l);else e.push(n.toString())}}return e.join(" ")}e.exports?(r.default=r,e.exports=r):void 0===(n=function(){return r}.apply(t,[]))||(e.exports=n)}()},776:e=>{self,e.exports=(()=>{"use strict";var e,t={};return e=t,Object.defineProperty(e,"__esModule",{value:!0}),e.default=function(e){var t=e.keyCode,n=e.key;return t&&229===t&&(n="Process"),{key:n}},t})()},433:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>o});const o={container:"token-input-container","container--focused":"token-input-container--focused","container--errors":"token-input-container--errors","autosized-wrapper":"token-input-autosized-wrapper","token-list":"token-input-token-list",token:"token-input-token","token--error":"token-input-token--error","token--read-only":"token-input-token--read-only","token--editable":"token-input-token--editable","token--active":"token-input-token--active","token__label-wrapper":"token-input-token__label-wrapper","token__delete-button":"token-input-token__delete-button","delete-button__close-icon":"token-input-delete-button__close-icon"}},639:(e,t,n)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},r=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),a=n(787),u=i(a),l=i(n(863));function i(e){return e&&e.__esModule?e:{default:e}}var s={position:"absolute",top:0,left:0,visibility:"hidden",height:0,overflow:"scroll",whiteSpace:"pre"},c=["extraWidth","injectStyles","inputClassName","inputRef","inputStyle","minWidth","onAutosize","placeholderIsMinWidth"],f=function(e,t){t.style.fontSize=e.fontSize,t.style.fontFamily=e.fontFamily,t.style.fontWeight=e.fontWeight,t.style.fontStyle=e.fontStyle,t.style.letterSpacing=e.letterSpacing,t.style.textTransform=e.textTransform},d=!("undefined"==typeof window||!window.navigator)&&/MSIE |Trident\/|Edge\//.test(window.navigator.userAgent),p=function(){return d?"_"+Math.random().toString(36).substr(2,12):void 0},_=function(e){function t(e){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);var n=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.inputRef=function(e){n.input=e,"function"==typeof n.props.inputRef&&n.props.inputRef(e)},n.placeHolderSizerRef=function(e){n.placeHolderSizer=e},n.sizerRef=function(e){n.sizer=e},n.state={inputWidth:e.minWidth,inputId:e.id||p(),prevId:e.id},n}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,e),r(t,null,[{key:"getDerivedStateFromProps",value:function(e,t){var n=e.id;return n!==t.prevId?{inputId:n||p(),prevId:n}:null}}]),r(t,[{key:"componentDidMount",value:function(){this.mounted=!0,this.copyInputStyles(),this.updateInputWidth()}},{key:"componentDidUpdate",value:function(e,t){t.inputWidth!==this.state.inputWidth&&"function"==typeof this.props.onAutosize&&this.props.onAutosize(this.state.inputWidth),this.updateInputWidth()}},{key:"componentWillUnmount",value:function(){this.mounted=!1}},{key:"copyInputStyles",value:function(){if(this.mounted&&window.getComputedStyle){var e=this.input&&window.getComputedStyle(this.input);e&&(f(e,this.sizer),this.placeHolderSizer&&f(e,this.placeHolderSizer))}}},{key:"updateInputWidth",value:function(){if(this.mounted&&this.sizer&&void 0!==this.sizer.scrollWidth){var e=void 0;e=this.props.placeholder&&(!this.props.value||this.props.value&&this.props.placeholderIsMinWidth)?Math.max(this.sizer.scrollWidth,this.placeHolderSizer.scrollWidth)+2:this.sizer.scrollWidth+2,(e+="number"===this.props.type&&void 0===this.props.extraWidth?16:parseInt(this.props.extraWidth)||0)<this.props.minWidth&&(e=this.props.minWidth),e!==this.state.inputWidth&&this.setState({inputWidth:e})}}},{key:"getInput",value:function(){return this.input}},{key:"focus",value:function(){this.input.focus()}},{key:"blur",value:function(){this.input.blur()}},{key:"select",value:function(){this.input.select()}},{key:"renderStyles",value:function(){var e=this.props.injectStyles;return d&&e?u.default.createElement("style",{dangerouslySetInnerHTML:{__html:"input#"+this.state.inputId+"::-ms-clear {display: none;}"}}):null}},{key:"render",value:function(){var e=[this.props.defaultValue,this.props.value,""].reduce((function(e,t){return null!=e?e:t})),t=o({},this.props.style);t.display||(t.display="inline-block");var n=o({boxSizing:"content-box",width:this.state.inputWidth+"px"},this.props.inputStyle),r=function(e,t){var n={};for(var o in e)t.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n}(this.props,[]);return function(e){c.forEach((function(t){return delete e[t]}))}(r),r.className=this.props.inputClassName,r.id=this.state.inputId,r.style=n,u.default.createElement("div",{className:this.props.className,style:t},this.renderStyles(),u.default.createElement("input",o({},r,{ref:this.inputRef})),u.default.createElement("div",{ref:this.sizerRef,style:s},e),this.props.placeholder?u.default.createElement("div",{ref:this.placeHolderSizerRef,style:s},this.props.placeholder):null)}}]),t}(a.Component);_.propTypes={className:l.default.string,defaultValue:l.default.any,extraWidth:l.default.oneOfType([l.default.number,l.default.string]),id:l.default.string,injectStyles:l.default.bool,inputClassName:l.default.string,inputRef:l.default.func,inputStyle:l.default.object,minWidth:l.default.oneOfType([l.default.number,l.default.string]),onAutosize:l.default.func,onChange:l.default.func,placeholder:l.default.string,placeholderIsMinWidth:l.default.bool,style:l.default.object,value:l.default.any},_.defaultProps={minWidth:1,injectStyles:!0},t.default=_},216:(e,t,n)=>{"use strict";var o=n(138);function r(){}function a(){}a.resetWarningCache=r,e.exports=function(){function e(e,t,n,r,a,u){if(u!==o){var l=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 l.name="Invariant Violation",l}}function t(){return e}e.isRequired=e;var n={array: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:r};return n.PropTypes=n,n}},863:(e,t,n)=>{e.exports=n(216)()},138:e=>{"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},787:t=>{"use strict";t.exports=e}},n={};function o(e){var r=n[e];if(void 0!==r)return r.exports;var a=n[e]={exports:{}};return t[e].call(a.exports,a,a.exports,o),a.exports}return o.d=(e,t)=>{for(var n in t)o.o(t,n)&&!o.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o(820)})()}));
 //# sourceMappingURL=index.js.map

lib/index.js.LICENSE.txt

@@ -7,2 +7,4 @@ /*!
 
-/*! react-customize-token-input v1.7.0 | (c) 2022 Mark Lin. | MIT | https://github.com/seawind543/react-token-input */
+/*! For license information please see index.js.LICENSE.txt */
+
+/*! react-customize-token-input v2.0.0-alpha | (c) 2022 Mark Lin. | MIT | https://github.com/seawind543/react-token-input */

package.json

 {
   "name": "react-customize-token-input",
-  "version": "1.7.0",
+  "version": "2.0.0-alpha",
   "description": "A react token (tag) input component. Allow customize data structure and Look & Feel",
   "main": "lib/index.js",
+  "types": "lib/index.d.ts",
   "files": [
@@ -11,7 +12,10 @@ "dist",
   "scripts": {
-    "prepublish": "yarn run eslint && yarn run lint:style && yarn run test && yarn run clean && yarn run build && yarn run build:examples",
-    "build": "webpack",
+    "prepublish": "yarn run lint && yarn run test && yarn run build",
+    "build": "yarn run build:clean && yarn run build:scss-types && yarn run build:webpack && yarn run build:examples",
+    "build:clean": "rm -rf {lib,dist}/*",
+    "build:scss-types": "typed-scss-modules src --nameFormat none --exportType default",
+    "build:webpack": "webpack",
     "build:examples": "cd examples; webpack",
-    "clean": "rm -f {lib,dist}/*",
-    "eslint": "eslint --max-warnings 0 --ext .jsx,.js examples src",
+    "lint": "yarn run lint:eslint && yarn run lint:style",
+    "lint:eslint": "eslint --max-warnings 0 --ext .jsx,.js,.tsx,.ts src examples",
     "lint:style": "stylelint --custom-syntax postcss-scss 'src/**/*.scss' --fix",
@@ -56,2 +60,3 @@ "test": "jest --coverage",
     "classnames": "^2.3.1",
+    "keydown-key": "^1.1.1",
     "prop-types": "^15.8.1",
@@ -66,3 +71,8 @@ "react-input-autosize": "^3.0.0"
     "@babel/preset-react": "^7.16.7",
+    "@babel/preset-typescript": "^7.16.7",
     "@testing-library/react-hooks": "^7.0.2",
+    "@types/jest": "^27.4.0",
+    "@types/react-input-autosize": "^2.2.1",
+    "@typescript-eslint/eslint-plugin": "^5.12.0",
+    "@typescript-eslint/parser": "^5.12.0",
     "babel-loader": "^8.2.3",
@@ -72,4 +82,5 @@ "babel-plugin-transform-react-qa-classes": "^1.6.0",
     "css-minimizer-webpack-plugin": "^3.4.1",
-    "eslint": "^7.32.0",
+    "eslint": "^8.9.0",
     "eslint-config-airbnb-base": "^14.2.1",
+    "eslint-config-airbnb-typescript": "^14.0.1",
     "eslint-config-prettier": "^8.4.0",
@@ -79,3 +90,3 @@ "eslint-config-react-app": "^6.0.0",
     "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-prettier": "^3.4.1",
+    "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.28.0",
@@ -93,3 +104,3 @@ "eslint-plugin-react-hooks": "^4.3.0",
     "postcss-loader": "^6.2.1",
-    "postcss-preset-env": "^7.3.1",
+    "postcss-preset-env": "^7.4.1",
     "prettier": "^2.5.1",
@@ -99,3 +110,3 @@ "react": "^16.10.2",
     "react-dom": "^16.14.0",
-    "sass-loader": "^12.4.0",
+    "sass-loader": "^12.6.0",
     "style-loader": "^3.3.1",
@@ -112,2 +123,5 @@ "stylelint": "^14.5.3",
     "stylelint-webpack-plugin": "^3.1.1",
+    "ts-loader": "^9.2.6",
+    "typed-scss-modules": "^5.1.1",
+    "typescript": "^4.5.5",
     "webpack": "^5.69.1",
@@ -114,0 +128,0 @@ "webpack-cli": "^4.9.2",

README.md

@@ -13,6 +13,6 @@ # React TokenInput [![build status](https://travis-ci.org/seawind543/react-token-input.svg?branch=master)](https://travis-ci.org/seawind543/react-token-input) [![Coverage Status](https://coveralls.io/repos/github/seawind543/react-token-input/badge.svg?branch=master)](https://coveralls.io/github/seawind543/react-token-input?branch=master)
 - **Customize token (tag) Look & Feel** on the `label` [Demo](https://seawind543.github.io/react-token-input/#example-customize-label), `delete button` [Demo](https://seawind543.github.io/react-token-input/#example-customize-delete-button), or even override `the whole Token component` [Demo](https://seawind543.github.io/react-token-input/#example-customize-token-component).
-- Customize **separate characters** for separate end-user input string. [Demo](https://seawind543.github.io/react-token-input/#example-customize-separators)
+- Customize **separate characters** to separate the end-user input string. [Demo](https://seawind543.github.io/react-token-input/#example-customize-separators)
 - **Inline editing** on exist token.
 - **Paste** values. [Demo](https://seawind543.github.io/react-token-input/#example-customize-separators)
-- **Preprocessing** function for **normalized** user input value.
+- **Preprocessing** function to **normalized** user input value.
 It could be helpful to reproduce a single value into multiple values too. [Demo](https://seawind543.github.io/react-token-input/#example-preprocess)
@@ -31,5 +31,5 @@ - **Validate** function.
 
-2. At this point you can import `react-token-input` and its styles in your application by:
+2. At this point you can import `react-customize-token-input` and its styles in your application by:
 
-  ```javascript
+  ```JavaScript
   import TokenInput from 'react-customize-token-input';
@@ -40,3 +40,3 @@
 
-  // Could find the not minimize version for easily customize style here
+  // Could find the not minimize version to easily customize style from:
   // 'react-customize-token-input/dist/react-customize-token-input.original.css';
@@ -69,20 +69,28 @@ ```
 
-```javascript
+```JavaScript
+type Props<ValueType, ErrorType> = {
   // Assign style to the TokenInput
-  style: PropTypes.object,
+  style?: CSSProperties;
 
   // Assign className to the TokenInput
-  className: PropTypes.string,
+  className?: string;
 
   // Specific TokenInput is `readOnly` or not
-  readOnly: PropTypes.bool,
+  readOnly?: boolean;
 
   // Specific TokenInput should be autoFocus or not
-  autoFocus: PropTypes.bool,
+  autoFocus?: boolean;
 
   // Placeholder of TokenInput
-  placeholder: PropTypes.string,
+  placeholder?: string;
 
+  // The array of tokenValue of TokenInput
+  tokenValues: TokenValue<ValueType>[];
+
   /**
-   * An array of characters for split the user input string.
+   * TokenCreator props
+   */
+
+  /**
+   * An array of characters to split the user input string into array.
    * For example,
@@ -97,23 +105,24 @@ * Split the user input string `abc;def` into `['abc', 'def']`
    */
-  separators: PropTypes.array,
+  separators?: TokenSeparator[];
 
-  // [Required] An array of tokenValue of TokenInput
-  tokenValues: PropTypes.array.isRequired,
-
   /**
-   * A callback function invoked when tokenValues update
+   * A callback function invoked when end-user typing but not become token yet
    *
-   * onTokenValuesChange(modifiedTokenValues)
+   * onInputValueChange(newValue, previousValue)
    *
-   * @ modifiedTokenValues
-   * Type: An array of tokenValue of TokenInput
-   * Description: Updated tokenValues
+   * @ newValue
+   * Type: InputString
+   * Description: end-user's input string
+   *
+   * @ previousValue
+   * Type: InputString
+   * Description: previous end-user's input string
    */
-  onTokenValuesChange: PropTypes.func,
+  onInputValueChange?: OnInputValueChange;
 
   /**
-   * A callback function for preprocessing the user input string
-   * (after it is split into `array of value`).
+   * A callback function to `preprocessing` the user input string.
    *
-   * Note: This function execute after `split` but before `onBuildTokenValue`
+   * Note: This function execute after `split by TokenSeparator[]` but before `onBuildTokenValue`
+   * inputString -> spilt(inputString) -> preprocess(spilt(inputString)) -> onBuildTokenValue(preprocess(spilt(inputString)))
    *
@@ -124,56 +133,22 @@ * [Use case 1]
    * [Use case 2]
-   * Sometimes, we will want to auto-fit user input, this function could help with it.
+   * Sometimes, we will want to auto-fit the user input, this function could help with it.
    * For example, the user input string is `www.google.com`,
    * and we want to auto-fit it into `http://www.google.com` and `https://www.google.com`.
    *
-   *
    * onPreprocess(inputStringValues)
    *
    * @ inputStringValues
-   * Type: An array of string values
+   * Type: InputString[]
    * Description:
-   * The user input string values // (split from the user input string by the `separators`)
+   * The user input string values // (split by the `separators`)
    *
    * @ return
-   * Type: An array of string values
+   * Type: InputString[]
    * Description: The values after preprocess
    */
-  onPreprocess: PropTypes.func,
+  onPreprocess?: OnPreprocess;
 
   /**
-   * A callback function for building `user input string value` into
-   * the `tokenValue` (customize data structure).
+   * A callback function to validate tokenValue
    *
-   * Note: You could make your normalize process in this function too.
-   *
-   * onBuildTokenValue(stringValue)
-   *
-   * @ stringValue
-   * Type: string
-   * Description: The user input value // (A value split by separators)
-   *
-   * @ return
-   * Type: any (string | number | object | customize data structure)
-   * Description: customize data structure
-   */
-  onBuildTokenValue: PropTypes.func,
-
-  /**
-   * A callback function invoked when end-user typing but not become token yet
-   *
-   * onInputValueChange(newValue, previousValue)
-   *
-   * @ newValue
-   * Type: string
-   * Description: end-user input string
-   *
-   * @ previousValue
-   * Type: string
-   * Description: previous end-user input string
-   */
-  onInputValueChange: PropTypes.func,
-
-  /**
-   * A callback function for validate tokenValue
-   *
    * onTokenValueValidate(tokenValue, tokenIndex, tokenValues)
@@ -187,3 +162,3 @@ *
    * Type: number
-   * Description: The array index for this tokenValue in tokenValues
+   * Description: The array index of this tokenValue in tokenValues
    *
@@ -203,27 +178,59 @@ * @ tokenValues
    */
-  onTokenValueValidate: PropTypes.func,
+  onTokenValueValidate?: OnTokenValueValidate<ValueType, ErrorType>;
 
   /**
-   * A callback function for getting customizes `className` for a token
+   * Token props
+   */
+
+  /**
+   * A callback function invoked when tokenValues update
    *
+   * onTokenValuesChange(modifiedTokenValues)
+   *
+   * @ modifiedTokenValues
+   * Type: TokenValue<ValueType>[]
+   * Description: the new tokenValues
+   */
+  onTokenValuesChange?: OnTokenValuesChange<ValueType>;
+
+  /**
+   * A callback function to building `user input string value` into
+   * the `tokenValue` (customize data structure).
+   *
+   * Note: You could make your normalize process in this function too.
+   *
+   * onBuildTokenValue(inputString)
+   *
+   * @ inputString
+   * Type: InputString
+   * Description: The user input value // (A value split by TokenSeparator[])
+   *
+   * @ return
+   * Type: TokenValue<ValueType>
+   * Description: customize data structure TokenValue
+   */
+  onBuildTokenValue?: OnBuildTokenValue<ValueType>;
+
+  /**
+   * A customize react functional component to rendering a token
+   * Apply this to customize all token function.
+   *
+   * customizeTokenComponent={MyToken}
+   */
+  // TODO: make detail type for props
+  customizeTokenComponent?: FunctionComponent<TokenProps<ValueType, ErrorType>>;
+
+  /**
+   * A callback function to getting customizes `className` to set on a `token`
+   *
    * onGetTokenClassName(tokenValue, tokenMeta)
    *
    * @ tokenValue
-   * Type: any (string | number | object | customize data structure)
+   * Type: TokenValue<ValueType>
    * Description: The tokenValue build by `onBuildTokenValue`
    *
    * @ tokenMeta
+   * Type: TokenMeta<ErrorType>
    * Description: token's meta data
-   *  {
-   *    // A private key for render
-   *    key: string,
    *
-   *    // Specific the token is activated for `edit` or not
-   *    activated: boolean,
-   *
-   *    // Customize data structure built by `onTokenValue Validate`
-   *    // Specific the token's validate status or errorMessage
-   *    error: any,
-   *  }
-   *
    * @ return
@@ -233,6 +240,6 @@ * Type: string
    */
-  onGetTokenClassName: PropTypes.func,
+  onGetTokenClassName?: OnGetTokenClassName<ValueType, ErrorType>;
 
   /**
-   * A callback function for getting displayable `label` for a token
+   * A callback function to getting displayable `label` of a token
    * Apply this to customize the token's content
@@ -244,30 +251,20 @@ * For example, render token with `icon` or `Additional text`
    * @ tokenValue
-   * Type: any (string | number | object | customize data structure)
+   * Type: TokenValue<ValueType>
    * Description: The tokenValue build by `onBuildTokenValue`
    *
    * @ tokenMeta
+   * Type: TokenMeta<ErrorType>
    * Description: token's meta data
-   *  {
-   *    // A private key for render
-   *    key: string,
    *
-   *    // Specific the token is activated for `edit` or not
-   *    activated: boolean,
-   *
-   *    // Customize data structure built by `onTokenValue Validate`
-   *    // Specific the token's validate status or errorMessage
-   *    error: any,
-   *  }
-   *
    * @ return
-   * Type: string || react node
+   * Type: InputString | ReactNode
    * Description: The token's content.
    * By default, will apply `getDefaultTokenEditableValue`
    */
-  onGetTokenDisplayLabel: PropTypes.func,
+  onGetTokenDisplayLabel?: OnGetTokenDisplayLabel<ValueType, ErrorType>;
 
   /**
-   * A callback function for render content of the delete button for a token
-   * Apply this to customize the token's content of delete button
-   * For example, replace the build-in x by Google font material-icons
+   * A callback function to render content of the delete button of token
+   * Apply this to customize the token's content of the delete button
+   * For example, replace the build-in `x` by Google font material-icons
    *
@@ -277,31 +274,22 @@ * onRenderTokenDeleteButtonContent()
    * @ return
-   * Type: react node
+   * Type: ReactNode
    * Description: The content of the delete button of the token.
-   * By default, TokenInput render a build-in x icon
+   * By default, TokenInput render a build-in `x` icon
    */
-  onRenderTokenDeleteButtonContent: PropTypes.func,
+  onRenderTokenDeleteButtonContent?: OnRenderTokenDeleteButtonContent;
 
   /**
-   * A callback function for determine whether the token is inline editable.
+   * A callback function to determine whether the token is `inline editable`.
+   * By default, TokenInput will render a `inline editable` token.
    *
-   * onIsTokenEditable(tokenValue, tokenMeta)
+   * onGetIsTokenEditable(tokenValue, tokenMeta)
    *
    * @ tokenValue
-   * Type: any (string | number | object | customize data structure)
+   * Type: TokenValue<ValueType>
    * Description: The tokenValue build by `onBuildTokenValue`
    *
    * @ tokenMeta
+   * Type: TokenMeta<ErrorType>
    * Description: token's meta data
-   *  {
-   *    // A private key for render
-   *    key: string,
    *
-   *    // Specific the token is activated for `edit` or not
-   *    activated: boolean,
-   *
-   *    // Customize data structure built by `onTokenValue Validate`
-   *    // Specific the token's validate status or errorMessage
-   *    error: any,
-   *  }
-   *
    * @ return
@@ -311,22 +299,26 @@ * Type: boolean
    */
-  onIsTokenEditable: PropTypes.func,
+  onGetIsTokenEditable?: OnGetIsTokenEditable<ValueType, ErrorType>;
 
   /**
-   * A callback function for getting `string input value`
-   * from `tokenValue` for the end-user to perform `edit`
+   * A callback function to getting `string input value`
+   * from `tokenValue` for the end-user to perform `inline edit`
    *
-   * onGetTokenEditableValue(tokenValue)
+   * onGetTokenEditableValue(tokenValue, tokenMeta)
    *
    * @ tokenValue
-   * Type: any (string | number | object | customize data structure)
+   * Type: TokenValue<ValueType>
    * Description: The tokenValue build by `onBuildTokenValue`
    *
+   * @ tokenMeta
+   * Type: TokenMeta<ErrorType>
+   * Description: token's meta data
+   *
    * @ return
-   * Type: string
+   * Type: InputString
    * Description: The value for end-user to `edit` in an input field
    */
-  onGetTokenEditableValue: PropTypes.func,
+  onGetTokenEditableValue?: OnGetTokenEditableValue<ValueType, ErrorType>;
 
   /**
-   * A callback function for getting the error message from the customize error
+   * A callback function to getting the error message from the customize error
    * The `customize error` is generate by `onTokenValueValidate`
@@ -337,32 +329,15 @@ *
    * @ tokenValue
-   * Type: any (string | number | object | customize data structure)
+   * Type: TokenValue<ValueType>
    * Description: The tokenValue build by `onBuildTokenValue`
    *
    * @ tokenMeta
+   * Type: TokenMeta<ErrorType>
    * Description: token's meta data
-   *  {
-   *    // A private key for render
-   *    key: string,
    *
-   *    // Specific the token is activated for `edit` or not
-   *    activated: boolean,
-   *
-   *    // Customize data structure built by `onTokenValue Validate`
-   *    // Specific the token's validate status or errorMessage
-   *    error: any,
-   *  }
-   *
    * @ return
-   * Type: string | any
+   * Type: undefined | DefaultErrorType | ErrorType
    * Description: The error message to describe an invalid token
    */
-  onGetTokenErrorMessage: PropTypes.func,
-
-  /**
-   * A customize react functional component for rendering a token
-   * Apply this to customize all token function.
-   *
-   * customizeTokenComponent={MyToken}
-   */
-  customizeTokenComponent: PropTypes.func,
+  onGetTokenErrorMessage?: OnGetTokenErrorMessage<ValueType, ErrorType>;
+};
 ```
@@ -372,17 +347,25 @@
 
-```javascript
+```JavaScript
+
   /**
    * [Beta; Might be change in the future version]
-   * Current only apply to Token Create
+   * Current only apply to the `TokenCreator`
    *
    * The settings to control the behavior of specials keyDown's event handler.
-   * Recommend to use the build-in constant `KEY_DOWN_HANDLER_CONFIG_OPTION` to config the setting. 
+   * Recommend to use the build-in constant `KEY_DOWN_HANDLER_CONFIG_OPTION` to config the setting.
    *
-   * `KEY_DOWN_HANDLER_CONFIG_OPTION.OFF` means turn off (Took native browser behavior. TokenInput should NOT handle it).
+   * `KEY_DOWN_HANDLER_CONFIG_OPTION.OFF` means turn `off`
+   * (Took native browser behavior. The TokenInput should NOT handle it).
+   *
    * `KEY_DOWN_HANDLER_CONFIG_OPTION.ON` means apply TokenInput predefined event handler.
    *
-   * Reference section below for Predefined event handlers.
-   * `Predefined KeyDown Event Handlers`
+   * Default setting as below.
+   * specialKeyDown: {
+   *   onBackspace: KEY_DOWN_HANDLER_CONFIG_OPTION.ON,
+   *   onTab: KEY_DOWN_HANDLER_CONFIG_OPTION.OFF,
+   *   onEnter: KEY_DOWN_HANDLER_CONFIG_OPTION.ON,
+   *   onEscape: KEY_DOWN_HANDLER_CONFIG_OPTION.ON,
+   * },
    */
-  specialKeyDown: PropTypes.object,
+  specialKeyDown?: SpecialKeyDownConfig;
 ```
@@ -392,3 +375,3 @@
 
-TokenInput have following Predefined event handlers on each Special KeyDown.
+TokenInput has the following **Predefined** KeyDown event handlers.
 
@@ -399,5 +382,5 @@ ### For Token Create
 ---------- | :------------ | :---
-Backspace  | In case the value is an `empty string`, the token in the list tail will be deleted. |
+Backspace  | In case the value is an `empty string`, the latest **token** in the list tail will be deleted. |
 Escape     | Clear the input value. | A.K.A. Reset.
-Enter      | Create the token with the inputValue and continually focused on the inputBox for next inputting. |
+Enter      | Create a token with the inputValue and continually focused on the inputBox for the next inputting. |
 Tab  | Same as onEnter.  | <ul> <li>Default not apply</li> <li>Under Beta</li> </ul>
@@ -414,11 +397,13 @@
 
-```javascript
+```JavaScript
+    style = undefined,
+    className = undefined,
+    readOnly = false,
+    autoFocus = false,
+    placeholder = undefined,
 
-    className: '',
-    readOnly: false,
-    autoFocus: false,
-    placeholder: '',
-
     // TokenCreator
-    separators: [
+    separators = DEFAULT_SEPARATORS,
+    /*
+    [
       ',',
@@ -430,4 +415,7 @@ ';',
     ];
+    */
 
-    specialKeyDown: {
+    specialKeyDown = DEFAULT_SPECIAL_KEY_DOWN_CONFIG,
+    /*
+    {
       onBackspace: KEY_DOWN_HANDLER_CONFIG_OPTION.ON,
@@ -438,17 +426,24 @@ onTab: KEY_DOWN_HANDLER_CONFIG_OPTION.OFF,
     },
+    */
 
-    onBuildTokenValue: buildDefaultTokenValue,
+    onInputValueChange = undefined,
+    onPreprocess = undefined,
 
-    onInputValueChange: () => {}, // Dummy function
-  
-    onTokenValueValidate: () => {}, // Dummy function
+    onTokenValueValidate = defaultTokenValueValidate,
 
-    onTokenValuesChange: () => {}, // Dummy function
+    onTokenValuesChange = undefined,
 
     // Token
-    onGetTokenClassName: () => {}, // Dummy function
-    onGetTokenDisplayLabel: getDefaultTokenEditableValue,
-    onIsTokenEditable: () => true,
-    onGetTokenEditableValue: getDefaultTokenEditableValue,
-    onGetTokenErrorMessage: getDefaultTokenErrorMessage,
+    onBuildTokenValue = defaultBuildTokenValue,
+
+    customizeTokenComponent = undefined,
+    onGetTokenClassName = undefined,
+
+    onGetTokenDisplayLabel = defaultGetTokenEditableValue,
+
+    onRenderTokenDeleteButtonContent = undefined,
+
+    onGetIsTokenEditable = defaultGetIsTokenEditable,
+    onGetTokenEditableValue = defaultGetTokenEditableValue,
+    onGetTokenErrorMessage = defaultGetTokenErrorMessage,
 ```
@@ -460,29 +455,30 @@
 
-```javascript
+```JavaScript
+type Props<ValueType, ErrorType> = {
   // Same as props of TokenInput
-  readOnly: PropTypes.bool.isRequired,
+  readOnly: boolean;
   // tokenValue of token
-  tokenValue: PropTypes.any.isRequired,
+  tokenValue: TokenValue<ValueType>;
   // tokenMeta of token
-  tokenMeta: PropTypes.object.isRequired,
+  tokenMeta: TokenMeta<ErrorType>;
 
   // Same as props `onGetTokenClassName` of TokenInput
-  onGetClassName: PropTypes.func.isRequired,
+  onGetClassName?: OnGetTokenClassName<ValueType, ErrorType>;
   // Same as props `onGetTokenDisplayLabel` of TokenInput
-  onGetDisplayLabel: PropTypes.func.isRequired,
+  onGetDisplayLabel: OnGetTokenDisplayLabel<ValueType, ErrorType>;
   // Same as props `onRenderTokenDeleteButtonContent` of TokenInput
-  onRenderDeleteButtonContent: PropTypes.func,
-  // Same as props `onIsTokenEditable` of TokenInput
-  onIsEditable: PropTypes.func.isRequired,
+  onRenderDeleteButtonContent?: OnRenderTokenDeleteButtonContent;
+
+  // Same as props `onGetIsTokenEditable` of TokenInput
+  onGetIsEditable: OnGetIsTokenEditable<ValueType, ErrorType>;
   // Same as props `onGetTokenEditableValue` of TokenInput
-  onGetEditableValue: PropTypes.func.isRequired,
+  onGetEditableValue: OnGetTokenEditableValue<ValueType, ErrorType>;
+  // Same as props `onBuildTokenValue` of TokenInput
+  onBuildTokenValue: OnBuildTokenValue<ValueType>;
   // Same as props `onGetTokenErrorMessage` of TokenInput
-  onGetErrorMessage: PropTypes.func.isRequired,
+  onGetErrorMessage: OnGetTokenErrorMessage<ValueType, ErrorType>;
 
-  // Editing
-  // Same as props `onBuildTokenValue` of TokenInput
-  onBuildTokenValue: PropTypes.func.isRequired,
-
   /**
-   * A callback function, which should be `invoked` when end-user `start editing`
+   * A callback function, which should be `invoked`
+   * when end-user `start editing`
    *
@@ -498,24 +494,27 @@ * Note:
    */
-  onEditStart: PropTypes.func.isRequired,
+  onEditStart: () => void;
 
   /**
-   * A callback function, which should be `invoked` when end-user `end editing`
+   * A callback function, which should be `invoked`
+   * when end-user `end editing`
    *
    * Note:
-   * Call this function to tell TokenInput it is finish editing the token.
-   * As result, TokenInput will set `tokenMeta.activate` to `false`
+   * Call this function to tell TokenInput to finish the `editing` of the token.
+   * As result, TokenInput will set `tokenMeta.activate` to `false`.
    *
+   * Also, TokenInput will based on the value of the parameter newTokenValue to
+   * update the tokenValue of the token,
+   * and call `onTokenValuesChange`
+   *
    * onEditEnd(newTokenValue?)
    *
    * @ newTokenValue
-   * Type: undefined | any (string | number | object | customize data structure)
+   * Type: undefined | TokenValue<ValueType>
    * Description:
    * The new tokenValue build by `onBuildTokenValue.
-   * TokenInput will update it, and
-   * TokenInput will call `onTokenValuesChange`
    *
    * Note:
-   * When newTokenValue is `undefined`,
-   * TokenInput will treat as `Cancel` (End without update newTokenValue).
-   * The `onTokenValuesChange` will not be called.
+   * if `newTokenValue` is `undefined`,
+   * TokenInput will treat as `Cancel` (Edit will end without update the tokenValue).
+   * The `onTokenValuesChange` will also not be called.
    *
@@ -525,11 +524,12 @@ * @ return
    */
-  onEditEnd: PropTypes.func.isRequired,
+  onEditEnd: (newTokenValue?: TokenValue<ValueType>) => void;
 
   /**
-   * A callback function, which should be `invoked` when end-user `delete` the token
+   * A callback function, which should be `invoked`
+   * when end-user `delete` the token
    *
    * Note:
    * Call this function to tell TokenInput to delete the token.
-   * As result, TokenInput will remove it, and
-   * TokenInput will call `onTokenValuesChange` to update tokenValues.
+   * As result, TokenInput will remove the token,
+   * and call `onTokenValuesChange` to update tokenValues.
    *
@@ -541,3 +541,4 @@ * onDelete()
    */
-  onDelete: PropTypes.func.isRequired,
+  onDelete: () => void;
+};
 ```
@@ -544,0 +545,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

174150

increased by3.87%

Number of package files

36

increased by260%

Lines of code

495

increased by88.21%

Number of lines in readme file

525

increased by0.19%

Worsened metrics

Dependency count

5

increased by25%

Dev dependency count

58

increased by18.37%

Number of medium maintenance alerts

1

increased byInfinity%

Number of low quality alerts

2

increased by100%

Dependency changes

• + Addedkeydown-key@^1.1.1

• + Addedkeydown-key@1.4.1(transitive)