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

Comparing version 1.2.3 to 1.3.1

lib/index.js

 /*! For license information please see index.js.LICENSE.txt */
-!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"));else if("function"==typeof define&&define.amd)define(["react"],t);else{var n="object"==typeof exports?t(require("react")):t(e.React);for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}(self,(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 u=o.apply(null,n);u&&e.push(u)}}else if("object"===a)if(n.toString===Object.prototype.toString)for(var i in n)r.call(n,i)&&n[i]&&e.push(i);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,u){if(u!==r){var i=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 i.name="Invariant Violation",i}}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}},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(698),u=l(a),i=l(n(697));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?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=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,u.default.createElement("div",{className:this.props.className,style:t},this.renderStyles(),u.default.createElement("input",r({},o,{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);y.propTypes={className:i.default.string,defaultValue:i.default.any,extraWidth:i.default.oneOfType([i.default.number,i.default.string]),id:i.default.string,injectStyles:i.default.bool,inputClassName:i.default.string,inputRef:i.default.func,inputStyle:i.default.object,minWidth:i.default.oneOfType([i.default.number,i.default.string]),onAutosize:i.default.func,onChange:i.default.func,placeholder:i.default.string,placeholderIsMinWidth:i.default.bool,style:i.default.object,value:i.default.any},y.defaultProps={minWidth:1,injectStyles:!0},t.Z=y},698: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,{default:()=>q});var e=r(698),t=r.n(e),n=r(697),a=r.n(n),u=r(184),i=r.n(u),l=r(639);const s=function(e,t){var n=t.onBackspace,r=void 0===n?function(){}:n,o=t.onEnter,a=void 0===o?function(){}:o,u=t.onEscape,i=void 0===u?function(){}:u,l={Backspace:"Backspace",Enter:"Enter",Escape:"Escape"}[e.key];switch(e.keyCode&&229===e.keyCode&&(l="Process"),void 0===l&&(l={8:"Backspace",13:"Enter",27:"Escape"}[e.keyCode]),l){case"Backspace":r();break;case"Enter":a();break;case"Escape":i()}},c="customize-token-input---delete-button---RxqGs",f="customize-token-input---autosized-wrapper---TXzhr";function p(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 d=(0,e.forwardRef)((function(n,r){var o,a,u=n.separators,i=n.onPreprocess,c=n.onBuildTokenValue,d=n.onNewTokenValuesAppend,y=n.onLastTokenDelete,h=n.placeholder,m=n.autoFocus,b=n.onFocus,v=n.onBlur,k=n.onInputValueChange,g=(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=[],u=!0,i=!1;try{for(n=n.call(e);!(u=(r=n.next()).done)&&(a.push(r.value),!t||a.length!==t);u=!0);}catch(e){i=!0,o=e}finally{try{u||null==n.return||n.return()}finally{if(i)throw o}}return a}}(o,a)||function(e,t){if(e){if("string"==typeof e)return p(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)?p(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.")}()),T=g[0],S=g[1],E=(0,e.useMemo)((function(){return new RegExp(u.join("|"))}),[u]),C=(0,e.useCallback)((function(e){S(e),k(e,T)}),[k,T,S]),w=(0,e.useCallback)((function(e){if(0!==e.length){var t=e.split(E),n=i(t).map((function(e){return c(e)}));d(n),C("")}}),[E,i,c,d,C]),A=(0,e.useCallback)((function(e){var t=e.target.value,n=t.substring(t.length-1);!0!==E.test(n)?C(t):w(T)}),[E,w,T,C]),I=(0,e.useCallback)((function(e){s(e,{onBackspace:function(){0===T.length&&y()},onEscape:function(){return C("")},onEnter:function(){return w(T)}})}),[T,y,C,w]),O=(0,e.useCallback)((function(e){w(T),v(e)}),[w,T,v]),j=(0,e.useCallback)((function(e){e.preventDefault();var t=e.clipboardData.getData("text");w(t)}),[w]);return t().createElement("div",{className:f},t().createElement(l.Z,{ref:r,autoFocus:m,placeholder:h,value:T,onChange:A,onKeyDown:I,onPaste:j,onFocus:b,onBlur:O}))}));d.displayName="TokenCreator",d.propTypes={placeholder:a().string.isRequired,autoFocus:a().bool.isRequired,onFocus:a().func.isRequired,onBlur:a().func.isRequired,separators:a().array.isRequired,onInputValueChange:a().func.isRequired,onPreprocess:a().func.isRequired,onBuildTokenValue:a().func.isRequired,onNewTokenValuesAppend:a().func.isRequired,onLastTokenDelete:a().func.isRequired};const y=d,h=function(){return t().createElement("span",{role:"button",className:c,"aria-hidden":"true","data-component-name":"DeleteButton"})};function m(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}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 v=function(e){e.stopPropagation()},k=function(n){var r,o,a=n.readOnly,u=n.tokenValue,p=n.tokenMeta,d=n.onGetClassName,y=n.onGetDisplayLabel,k=n.onGetEditableValue,g=n.onGetErrorMessage,T=n.onBuildTokenValue,S=n.onEditStart,E=n.onEditEnd,C=n.onDelete,w=(0,e.useRef)(null),A=(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=[],u=!0,i=!1;try{for(n=n.call(e);!(u=(r=n.next()).done)&&(a.push(r.value),!t||a.length!==t);u=!0);}catch(e){i=!0,o=e}finally{try{u||null==n.return||n.return()}finally{if(i)throw o}}return a}}(r,o)||function(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}}(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.")}()),I=A[0],O=A[1],j=p.activated,V=p.error,R=(0,e.useCallback)((function(){var e=k(u,p);O(e),S()}),[O,u,p,k,S]);(0,e.useEffect)((function(){j&&w.current&&w.current.focus()}),[j]);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===I.length;if(n||r)E();else{var o=T(I);E(o)}}),[I,T,E]),x=(0,e.useCallback)((function(e){if(e.stopPropagation(),!a){var t=e.target.className;-1!==(void 0===t?"":t).indexOf(c)?C():R()}}),[a,C,R]),P=(0,e.useCallback)((function(e){var t=e.target.value;O(t)}),[O]),z=(0,e.useCallback)((function(e){s(e,{onEscape:function(){return M({reset:!0})},onEnter:function(){return M()}})}),[M]),N=(0,e.useCallback)((function(){M()}),[M]),W=(0,e.useMemo)((function(){var e;return i()(d(u,p),"customize-token-input---token---gTkkf",(m(e={},"customize-token-input---active---jZZPP",j),m(e,"customize-token-input---error---eNFRx",V&&!j),m(e,"customize-token-input---read-only---_IB6t",a),e))}),[a,V,j,d,u,p]),D=(0,e.useMemo)((function(){return g(u,p)}),[g,u,p]);return j?t().createElement("div",{role:"presentation",className:W,onClick:v},t().createElement("div",{className:f},t().createElement(l.Z,{ref:w,value:I,onChange:P,onKeyDown:z,onBlur:N}))):t().createElement("div",{role:"presentation",className:W,onClick:x,title:D,"data-component-name":"Token"},t().createElement("div",{className:"customize-token-input---label-wrapper---RRpXn"},y(u,p)),!a&&t().createElement(h,null))};k.propTypes={readOnly:a().bool.isRequired,tokenValue:a().any.isRequired,tokenMeta:a().object.isRequired,onGetClassName:a().func.isRequired,onGetDisplayLabel: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 g=k;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}const S=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=[],u=!0,i=!1;try{for(n=n.call(e);!(u=(r=n.next()).done)&&(a.push(r.value),!t||a.length!==t);u=!0);}catch(e){i=!0,o=e}finally{try{u||null==n.return||n.return()}finally{if(i)throw o}}return a}}(t,n)||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}}(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)}),[])}},E=function(e,t,n){return{key:"".concat(JSON.stringify(t),"-").concat(Date.now(),"-").concat(n),activated:!1,error:e}};function C(e,t){if(e){if("string"==typeof e)return w(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)?w(e,t):void 0}}function w(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 A=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=[],u=!0,i=!1;try{for(n=n.call(e);!(u=(r=n.next()).done)&&(a.push(r.value),!t||a.length!==t);u=!0);}catch(e){i=!0,o=e}finally{try{u||null==n.return||n.return()}finally{if(i)throw o}}return a}}(t,n)||C(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],u=(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 w(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||C(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:E,tokenMetas:o,setTokenMetas:a,setTokenActivated:u}};function I(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=[],u=!0,i=!1;try{for(n=n.call(e);!(u=(r=n.next()).done)&&(a.push(r.value),!t||a.length!==t);u=!0);}catch(e){i=!0,o=e}finally{try{u||null==n.return||n.return()}finally{if(i)throw o}}return a}}(e,t)||O(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 O(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}}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}const V=function(t){var n=t.tokenValues,r=t.onTokenValueValidate,o=A(),a=o.buildTokenMeta,u=o.tokenMetas,i=o.setTokenMetas,l=o.setTokenActivated,s=I((0,e.useState)(!1),2),c=s[0],f=s[1],p=I((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 u=r(e,o,n),i=a(u,e,o);return i.error&&!i.activated&&(t=!0),i}));y(function(e){if(Array.isArray(e))return j(e)}(e=n)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||O(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.")}()),i(o),f(t)}),[n,r,i,a]),{hasInvalidToken:c,internalTokenValues:d,tokenMetas:u,setTokenActivated:l}};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 M=function(t){var n=t.tokenValues,r=t.onTokenValuesChange,o=t.setTokenActivated,a=t.handleTokenInputFocus,u=t.handleTokenInputBlur,i=t.focusTokenCreator;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),u(),i(),void 0!==t){var a=function(e){if(Array.isArray(e))return R(e)}(l=n)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(l)||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}}(l)||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 l}}),[n,r,o,u,i])}};function x(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 P=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 x(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 x(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)?x(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])}},z=function(e,t){return e};var N=["className","readOnly","autoFocus","placeholder","tokenValues","onTokenValuesChange","onBuildTokenValue","customizeTokenComponent","onGetTokenClassName","onGetTokenDisplayLabel","onGetTokenEditableValue","onGetTokenErrorMessage","separators","onPreprocess","onInputValueChange","onTokenValueValidate"];function W(){return(W=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 D(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function G(e){return function(e){if(Array.isArray(e))return B(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 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}}(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 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 _=function(n){var r,o=n.className,a=n.readOnly,u=n.autoFocus,l=n.placeholder,s=n.tokenValues,c=n.onTokenValuesChange,f=n.onBuildTokenValue,p=n.customizeTokenComponent,d=n.onGetTokenClassName,h=n.onGetTokenDisplayLabel,m=n.onGetTokenEditableValue,b=n.onGetTokenErrorMessage,v=n.separators,k=n.onPreprocess,T=n.onInputValueChange,E=n.onTokenValueValidate,C=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,N),w=S(),A=w.isTokenInputFocused,I=w.handleTokenInputFocus,O=w.handleTokenInputBlur,j=function(){var t=(0,e.useRef)(null),n=(0,e.useCallback)((function(){t&&t.current&&t.current.focus()}),[]);return{tokenCreatorRef:t,focusTokenCreator:n}}(),R=j.tokenCreatorRef,x=j.focusTokenCreator,z=V({tokenValues:s,onTokenValueValidate:E}),B=z.hasInvalidToken,_=z.internalTokenValues,q=z.tokenMetas,F=z.setTokenActivated,L=M({tokenValues:s,onTokenValuesChange:c,setTokenActivated:F,handleTokenInputFocus:I,handleTokenInputBlur:O,focusTokenCreator:x}),U=L.handleTokenEditStart,H=L.handleTokenEditEnd,$=P({tokenValues:s,onTokenValuesChange:c,focusTokenCreator:x}),Z=$.handleTokenDelete,X=$.handleLastTokenDelete,K=(0,e.useCallback)((function(e){if(0!==e.length){var t=[].concat(G(s),G(e));c(t)}}),[s,c]),Y=(0,e.useCallback)((function(e){if("function"!=typeof k)return e;var t=k(e);if(!0!==Array.isArray(t))throw new Error("onPreprocess should return an array of values");return t}),[k]),J=p||g;return t().createElement("div",W({},C,{className:i()(o,"customize-token-input---container---F6cN_",(r={},D(r,"customize-token-input---focused---k4Zch",A),D(r,"customize-token-input---errors---QXs7u",B),r)),onClick:x,role:"presentation","data-component-name":"TokenInput"}),t().createElement("div",{className:"customize-token-input---token-list---mZYkR"},_.map((function(e,n){var r=q[n],o=r.key;return t().createElement(J,{key:o,readOnly:a,tokenValue:e,tokenMeta:r,onGetClassName:d,onGetDisplayLabel:h,onGetEditableValue:m,onGetErrorMessage:b,onBuildTokenValue:f,onEditStart:U(n),onEditEnd:H(n),onDelete:Z(n)})}))),!a&&t().createElement(y,{ref:R,placeholder:l,autoFocus:u,onFocus:I,onBlur:O,separators:v,onPreprocess:Y,onBuildTokenValue:f,onNewTokenValuesAppend:K,onLastTokenDelete:X,onInputValueChange:T}))};_.propTypes={style:a().object,className:a().string,readOnly:a().bool,autoFocus:a().bool,placeholder:a().string,tokenValues:a().array.isRequired,onTokenValuesChange:a().func,separators:a().array,onPreprocess:a().func,onBuildTokenValue:a().func,onInputValueChange:a().func,onTokenValueValidate:a().func,onGetTokenClassName:a().func,onGetTokenDisplayLabel:a().func,onGetTokenEditableValue:a().func,onGetTokenErrorMessage:a().func,customizeTokenComponent:a().func},_.defaultProps={className:"",readOnly:!1,autoFocus:!1,placeholder:"",separators:[",",";","\n","\r","\r\n"],onBuildTokenValue:function(e){return e.trim()},onInputValueChange:function(){},onTokenValueValidate:function(){},onGetTokenClassName:function(){return""},onGetTokenDisplayLabel:z,onGetTokenEditableValue:z,onGetTokenErrorMessage:function(e,t){return t.error}};const q=_})(),o})()}));
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"));else if("function"==typeof define&&define.amd)define(["react"],t);else{var n="object"==typeof exports?t(require("react")):t(e.React);for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}(self,(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 u=o.apply(null,n);u&&e.push(u)}}else if("object"===a)if(n.toString===Object.prototype.toString)for(var i in n)r.call(n,i)&&n[i]&&e.push(i);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,u){if(u!==r){var i=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 i.name="Invariant Violation",i}}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}},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(698),u=l(a),i=l(n(697));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?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=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,u.default.createElement("div",{className:this.props.className,style:t},this.renderStyles(),u.default.createElement("input",r({},o,{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);y.propTypes={className:i.default.string,defaultValue:i.default.any,extraWidth:i.default.oneOfType([i.default.number,i.default.string]),id:i.default.string,injectStyles:i.default.bool,inputClassName:i.default.string,inputRef:i.default.func,inputStyle:i.default.object,minWidth:i.default.oneOfType([i.default.number,i.default.string]),onAutosize:i.default.func,onChange:i.default.func,placeholder:i.default.string,placeholderIsMinWidth:i.default.bool,style:i.default.object,value:i.default.any},y.defaultProps={minWidth:1,injectStyles:!0},t.Z=y},698: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,{default:()=>U});var e=r(698),t=r.n(e),n=r(697),a=r.n(n),u=r(184),i=r.n(u),l=r(639);const s=function(e,t){var n=t.onBackspace,r=void 0===n?function(){}:n,o=t.onEnter,a=void 0===o?function(){}:o,u=t.onEscape,i=void 0===u?function(){}:u,l={Backspace:"Backspace",Enter:"Enter",Escape:"Escape"}[e.key];switch(e.keyCode&&229===e.keyCode&&(l="Process"),void 0===l&&(l={8:"Backspace",13:"Enter",27:"Escape"}[e.keyCode]),l){case"Backspace":r();break;case"Enter":a();break;case"Escape":i()}},c="customize-token-input---token---gTkkf",f="customize-token-input---autosized-wrapper---TXzhr";var p="token-delete-button";function d(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 y=(0,e.forwardRef)((function(n,r){var o,a,u=n.separators,i=n.onPreprocess,c=n.onBuildTokenValue,p=n.onNewTokenValuesAppend,y=n.onLastTokenDelete,h=n.placeholder,m=n.autoFocus,b=n.onFocus,v=n.onBlur,k=n.onInputValueChange,g=(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=[],u=!0,i=!1;try{for(n=n.call(e);!(u=(r=n.next()).done)&&(a.push(r.value),!t||a.length!==t);u=!0);}catch(e){i=!0,o=e}finally{try{u||null==n.return||n.return()}finally{if(i)throw o}}return a}}(o,a)||function(e,t){if(e){if("string"==typeof e)return d(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)?d(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.")}()),T=g[0],S=g[1],C=(0,e.useMemo)((function(){return new RegExp(u.join("|"))}),[u]),E=(0,e.useCallback)((function(e){S(e),k(e,T)}),[k,T,S]),w=(0,e.useCallback)((function(e){if(0!==e.trim().length){var t=e.split(C).filter((function(e){return e.trim().length>0})),n=i(t).map((function(e){return c(e)}));p(n),E("")}}),[C,i,c,p,E]),A=(0,e.useCallback)((function(e){var t=e.target.value,n=t.substring(t.length-1);!0!==C.test(n)?E(t):w(T)}),[C,w,T,E]),I=(0,e.useCallback)((function(e){s(e,{onBackspace:function(){0===T.length&&y()},onEscape:function(){return E("")},onEnter:function(){return w(T)}})}),[T,y,E,w]),O=(0,e.useCallback)((function(e){w(T),v(e)}),[w,T,v]),j=(0,e.useCallback)((function(e){e.preventDefault();var t=e.clipboardData.getData("text");w(t)}),[w]);return t().createElement("div",{className:f},t().createElement(l.Z,{ref:r,autoFocus:m,placeholder:h,value:T,onChange:A,onKeyDown:I,onPaste:j,onFocus:b,onBlur:O}))}));y.displayName="TokenCreator",y.propTypes={placeholder:a().string.isRequired,autoFocus:a().bool.isRequired,onFocus:a().func.isRequired,onBlur:a().func.isRequired,separators:a().array.isRequired,onInputValueChange:a().func.isRequired,onPreprocess:a().func.isRequired,onBuildTokenValue:a().func.isRequired,onNewTokenValuesAppend:a().func.isRequired,onLastTokenDelete:a().func.isRequired};const h=y,m=function(){return t().createElement("div",{role:"img",className:"customize-token-input---close-icon---BBHmf","aria-hidden":"true","data-component-name":"CloseIcon"})};var b=function(e){var n=e.onRenderContent,r="function"==typeof n;return t().createElement("span",{role:"button",className:i()(p,"customize-token-input---delete-button---RxqGs"),"aria-hidden":"true","data-component-name":"DeleteButton"},r&&n(),!r&&t().createElement(m,null))};b.propTypes={onRenderContent:a().func};const v=b;function k(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}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}var T=function(e){e.stopPropagation()},S=function(n){var r,o,a=n.readOnly,u=n.tokenValue,d=n.tokenMeta,y=n.onGetClassName,h=n.onGetDisplayLabel,m=n.onRenderDeleteButtonContent,b=n.onGetEditableValue,S=n.onGetErrorMessage,C=n.onBuildTokenValue,E=n.onEditStart,w=n.onEditEnd,A=n.onDelete,I=(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=[],u=!0,i=!1;try{for(n=n.call(e);!(u=(r=n.next()).done)&&(a.push(r.value),!t||a.length!==t);u=!0);}catch(e){i=!0,o=e}finally{try{u||null==n.return||n.return()}finally{if(i)throw o}}return a}}(r,o)||function(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}}(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.")}()),j=O[0],V=O[1],R=d.activated,M=d.error,x=(0,e.useCallback)((function(){var e=b(u,d);V(e),E()}),[V,u,d,b,E]);(0,e.useEffect)((function(){R&&I.current&&I.current.focus()}),[R]);var z=(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===j.length;if(n||r)w();else{var o=C(j);w(o)}}),[j,C,w]),P=(0,e.useCallback)((function(e){e.stopPropagation(),a||(e.target.closest(".".concat(c," .").concat(p))?A():x())}),[a,A,x]),B=(0,e.useCallback)((function(e){var t=e.target.value;V(t)}),[V]),D=(0,e.useCallback)((function(e){s(e,{onEscape:function(){return z({reset:!0})},onEnter:function(){return z()}})}),[z]),N=(0,e.useCallback)((function(){z()}),[z]),W=(0,e.useMemo)((function(){var e;return i()(y(u,d),c,(k(e={},"customize-token-input---active---jZZPP",R),k(e,"customize-token-input---error---eNFRx",M&&!R),k(e,"customize-token-input---read-only---_IB6t",a),e))}),[a,M,R,y,u,d]),G=(0,e.useMemo)((function(){return S(u,d)}),[S,u,d]);return R?t().createElement("div",{role:"presentation",className:W,onClick:T},t().createElement("div",{className:f},t().createElement(l.Z,{ref:I,value:j,onChange:B,onKeyDown:D,onBlur:N}))):t().createElement("div",{role:"presentation",className:W,onClick:P,title:G,"data-component-name":"Token"},t().createElement("div",{className:"customize-token-input---label-wrapper---RRpXn"},h(u,d)),!a&&t().createElement(v,{onRenderContent:m}))};S.propTypes={readOnly:a().bool.isRequired,tokenValue:a().any.isRequired,tokenMeta:a().object.isRequired,onGetClassName:a().func.isRequired,onGetDisplayLabel:a().func.isRequired,onRenderDeleteButtonContent:a().func,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 C=S;function E(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 w=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=[],u=!0,i=!1;try{for(n=n.call(e);!(u=(r=n.next()).done)&&(a.push(r.value),!t||a.length!==t);u=!0);}catch(e){i=!0,o=e}finally{try{u||null==n.return||n.return()}finally{if(i)throw o}}return a}}(t,n)||function(e,t){if(e){if("string"==typeof e)return E(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)?E(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)}),[])}},A=function(e,t,n){return{key:"".concat(JSON.stringify(t),"-").concat(Date.now(),"-").concat(n),activated:!1,error:e}};function I(e,t){if(e){if("string"==typeof e)return O(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)?O(e,t):void 0}}function O(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 j=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=[],u=!0,i=!1;try{for(n=n.call(e);!(u=(r=n.next()).done)&&(a.push(r.value),!t||a.length!==t);u=!0);}catch(e){i=!0,o=e}finally{try{u||null==n.return||n.return()}finally{if(i)throw o}}return a}}(t,n)||I(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],u=(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 O(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||I(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:A,tokenMetas:o,setTokenMetas:a,setTokenActivated:u}};function V(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=[],u=!0,i=!1;try{for(n=n.call(e);!(u=(r=n.next()).done)&&(a.push(r.value),!t||a.length!==t);u=!0);}catch(e){i=!0,o=e}finally{try{u||null==n.return||n.return()}finally{if(i)throw o}}return a}}(e,t)||R(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 R(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(t){var n=t.tokenValues,r=t.onTokenValueValidate,o=j(),a=o.buildTokenMeta,u=o.tokenMetas,i=o.setTokenMetas,l=o.setTokenActivated,s=V((0,e.useState)(!1),2),c=s[0],f=s[1],p=V((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 u=r(e,o,n),i=a(u,e,o);return i.error&&!i.activated&&(t=!0),i}));y(function(e){if(Array.isArray(e))return M(e)}(e=n)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||R(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.")}()),i(o),f(t)}),[n,r,i,a]),{hasInvalidToken:c,internalTokenValues:d,tokenMetas:u,setTokenActivated:l}};function z(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 P=function(t){var n=t.tokenValues,r=t.onTokenValuesChange,o=t.setTokenActivated,a=t.handleTokenInputFocus,u=t.handleTokenInputBlur,i=t.focusTokenCreator;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),u(),i(),void 0!==t){var a=function(e){if(Array.isArray(e))return z(e)}(l=n)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(l)||function(e,t){if(e){if("string"==typeof e)return z(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)?z(e,t):void 0}}(l)||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 l}}),[n,r,o,u,i])}};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}const D=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 B(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 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}}(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])}},N=function(e,t){return e};var W=["className","readOnly","autoFocus","placeholder","tokenValues","onTokenValuesChange","onBuildTokenValue","customizeTokenComponent","onGetTokenClassName","onGetTokenDisplayLabel","onRenderTokenDeleteButtonContent","onGetTokenEditableValue","onGetTokenErrorMessage","separators","onPreprocess","onInputValueChange","onTokenValueValidate"];function G(){return(G=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 _(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function q(e){return function(e){if(Array.isArray(e))return F(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 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}}(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 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}var L=function(n){var r,o=n.className,a=n.readOnly,u=n.autoFocus,l=n.placeholder,s=n.tokenValues,c=n.onTokenValuesChange,f=n.onBuildTokenValue,p=n.customizeTokenComponent,d=n.onGetTokenClassName,y=n.onGetTokenDisplayLabel,m=n.onRenderTokenDeleteButtonContent,b=n.onGetTokenEditableValue,v=n.onGetTokenErrorMessage,k=n.separators,g=n.onPreprocess,T=n.onInputValueChange,S=n.onTokenValueValidate,E=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,W),A=w(),I=A.isTokenInputFocused,O=A.handleTokenInputFocus,j=A.handleTokenInputBlur,V=function(){var t=(0,e.useRef)(null),n=(0,e.useCallback)((function(){t&&t.current&&t.current.focus()}),[]);return{tokenCreatorRef:t,focusTokenCreator:n}}(),R=V.tokenCreatorRef,M=V.focusTokenCreator,z=x({tokenValues:s,onTokenValueValidate:S}),B=z.hasInvalidToken,N=z.internalTokenValues,F=z.tokenMetas,L=z.setTokenActivated,U=P({tokenValues:s,onTokenValuesChange:c,setTokenActivated:L,handleTokenInputFocus:O,handleTokenInputBlur:j,focusTokenCreator:M}),H=U.handleTokenEditStart,$=U.handleTokenEditEnd,Z=D({tokenValues:s,onTokenValuesChange:c,focusTokenCreator:M}),X=Z.handleTokenDelete,K=Z.handleLastTokenDelete,Y=(0,e.useCallback)((function(e){if(0!==e.length){var t=[].concat(q(s),q(e));c(t)}}),[s,c]),J=(0,e.useCallback)((function(e){if("function"!=typeof g)return e;var t=g(e);if(!0!==Array.isArray(t))throw new Error("onPreprocess should return an array of values");return t}),[g]),Q=p||C;return t().createElement("div",G({},E,{className:i()(o,"customize-token-input---container---F6cN_",(r={},_(r,"customize-token-input---focused---k4Zch",I),_(r,"customize-token-input---errors---QXs7u",B),r)),onClick:M,role:"presentation","data-component-name":"TokenInput"}),t().createElement("div",{className:"customize-token-input---token-list---mZYkR"},N.map((function(e,n){var r=F[n],o=r.key;return t().createElement(Q,{key:o,readOnly:a,tokenValue:e,tokenMeta:r,onGetClassName:d,onGetDisplayLabel:y,onRenderDeleteButtonContent:m,onGetEditableValue:b,onGetErrorMessage:v,onBuildTokenValue:f,onEditStart:H(n),onEditEnd:$(n),onDelete:X(n)})}))),!a&&t().createElement(h,{ref:R,placeholder:l,autoFocus:u,onFocus:O,onBlur:j,separators:k,onPreprocess:J,onBuildTokenValue:f,onNewTokenValuesAppend:Y,onLastTokenDelete:K,onInputValueChange:T}))};L.propTypes={style:a().object,className:a().string,readOnly:a().bool,autoFocus:a().bool,placeholder:a().string,tokenValues:a().array.isRequired,onTokenValuesChange:a().func,separators:a().array,onPreprocess:a().func,onBuildTokenValue:a().func,onInputValueChange:a().func,onTokenValueValidate:a().func,onGetTokenClassName:a().func,onGetTokenDisplayLabel:a().func,onRenderTokenDeleteButtonContent:a().func,onGetTokenEditableValue:a().func,onGetTokenErrorMessage:a().func,customizeTokenComponent:a().func},L.defaultProps={className:"",readOnly:!1,autoFocus:!1,placeholder:"",separators:[",",";","\n","\r","\r\n"],onBuildTokenValue:function(e){return e.trim()},onInputValueChange:function(){},onTokenValueValidate:function(){},onGetTokenClassName:function(){return""},onGetTokenDisplayLabel:N,onGetTokenEditableValue:N,onGetTokenErrorMessage:function(e,t){if("string"==typeof t.error)return t.error}};const U=L})(),o})()}));
 //# sourceMappingURL=index.js.map

lib/index.js.LICENSE.txt

@@ -7,2 +7,2 @@ /*!
 
-/*! react-customize-token-input v1.2.3 | (c) 2021 Mark Lin. | MIT | https://github.com/seawind543/react-token-input */
+/*! react-customize-token-input v1.3.1 | (c) 2021 Mark Lin. | MIT | https://github.com/seawind543/react-token-input */

package.json

 {
   "name": "react-customize-token-input",
-  "version": "1.2.3",
+  "version": "1.3.1",
   "description": "A react token (tag) input component. Allow customize data structure and Look & Feel",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -5,2 +5,4 @@ # 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)
 
+Live Demo: https://seawind543.github.io/react-token-input/
+
 React TokenInput (react-customize-token-input)
@@ -10,13 +12,13 @@
 
-- Apply to **customize data structure**.
-- **Customize token component** for `label of token` or `the complete token`.
-- Customize **separate characters** for separate end-user input string.
+- Accept **customize data structure**.
+- **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)
 - **Inline editing** on exist token.
-- **Paste** on values.
+- **Paste** values. [Demo](https://seawind543.github.io/react-token-input/#example-customize-separators)
 - **Preprocessing** function for **normalized** user input value.
-It could be helpful to reproduce a single value into multiple values too.
+It could be helpful to reproduce a single value into multiple values too. [Demo](https://seawind543.github.io/react-token-input/#example-preprocess)
 - **Validate** function.
 
-Live Demo: https://seawind543.github.io/react-token-input/
 
+
 ## Installation
@@ -58,5 +60,5 @@
 
-See Live Demo: https://seawind543.github.io/react-token-input/
+See Live Examples: https://seawind543.github.io/react-token-input/
 
-(Examples in the folder `examples`)
+Note: Sources code of Examples in the folder `examples`
 
@@ -259,2 +261,16 @@ ## Props
   /**
+   * 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
+   *
+   * onRenderTokenDeleteButtonContent()
+   *
+   * @ return
+   * Type: react node
+   * Description: The content of the delete button of the token.
+   * By default, TokenInput render a build-in x icon
+   */
+  onRenderTokenDeleteButtonContent: PropTypes.func,
+
+  /**
    * A callback function for getting `string input value`
@@ -311,7 +327,7 @@ * from `tokenValue` for the end-user to perform `edit`
     separators: [
-        ',',
-        ';',
-        '\n', // for copy past
-        '\r', // for copy past
-        '\r\n', // for copy past
+      ',',
+      ';',
+      '\n', // for copy and paste
+      '\r', // for copy and paste
+      '\r\n', // for copy and paste
     ];
@@ -334,2 +350,4 @@
 
+Could also reference this [Example Demo](https://seawind543.github.io/react-token-input/#example-customize-token-component) and its source code `ExampleCustomizeToken` from the folder `examples`.
+
 ```javascript
@@ -347,2 +365,4 @@ // Same as props of TokenInput
   onGetDisplayLabel: PropTypes.func.isRequired,
+  // Same as props `onRenderTokenDeleteButtonContent` of TokenInput
+  onRenderDeleteButtonContent: PropTypes.func,
   // Same as props `onGetTokenEditableValue` of TokenInput
@@ -349,0 +369,0 @@ onGetEditableValue: PropTypes.func.isRequired,

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

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

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

164922

increased by12.47%

Lines of code

131

increased by12.93%

Number of lines in readme file

428

increased by4.9%

No dependency changes