react-autocomplete-tagbox/dist/index.mjs

React Autocomplete Tagbox is a modern, customizable React component for tag input with optional autocomplete. Effortlessly add, remove, and select tags with keyboard or mouse. Supports both free-form and restricted tag entry, smart suggestions, and a clea

import e,{useState as n,useRef as t,useEffect as r}from"react";function o(e,n,t){if(t||2===arguments.length)for(var r,o=0,a=n.length;o<a;o++)!r&&o in n||(r||(r=Array.prototype.slice.call(n,0,o)),r[o]=n[o]);return e.concat(r||Array.prototype.slice.call(n))}"function"==typeof SuppressedError&&SuppressedError;var a,i={exports:{}},l={};var s,c,u={};
/**
 * @license React
 * react-jsx-runtime.development.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */function d(){return s||(s=1,"production"!==process.env.NODE_ENV&&function(){function n(e){if(null==e)return null;if("function"==typeof e)return e.$$typeof===S?null:e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case g:return"Fragment";case b:return"Profiler";case m:return"StrictMode";case _:return"Suspense";case v:return"SuspenseList";case w:return"Activity"}if("object"==typeof e)switch("number"==typeof e.tag&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case f:return"Portal";case h:return(e.displayName||"Context")+".Provider";case y:return(e._context.displayName||"Context")+".Consumer";case x:var t=e.render;return(e=e.displayName)||(e=""!==(e=t.displayName||t.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case k:return null!==(t=e.displayName||null)?t:n(e.type)||"Memo";case T:t=e._payload,e=e._init;try{return n(e(t))}catch(e){}}return null}function t(e){return""+e}function r(e){try{t(e);var n=!1}catch(e){n=!0}if(n){var r=(n=console).error,o="function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return r.call(n,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",o),t(e)}}function o(e){if(e===g)return"<>";if("object"==typeof e&&null!==e&&e.$$typeof===T)return"<...>";try{var t=n(e);return t?"<"+t+">":"<...>"}catch(e){return"<...>"}}function a(){return Error("react-stack-top-frame")}function i(){var e=n(this.type);return E[e]||(E[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),void 0!==(e=this.props.ref)?e:null}function l(e,t,o,a,l,u,d,f){var g,m=t.children;if(void 0!==m)if(a)if(N(m)){for(a=0;a<m.length;a++)s(m[a]);Object.freeze&&Object.freeze(m)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else s(m);if(j.call(t,"key")){m=n(e);var b=Object.keys(t).filter((function(e){return"key"!==e}));a=0<b.length?"{key: someKey, "+b.join(": ..., ")+": ...}":"{key: someKey}",D[m+a]||(b=0<b.length?"{"+b.join(": ..., ")+": ...}":"{}",console.error('A props object containing a "key" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />',a,m,b,m),D[m+a]=!0)}if(m=null,void 0!==o&&(r(o),m=""+o),function(e){if(j.call(e,"key")){var n=Object.getOwnPropertyDescriptor(e,"key").get;if(n&&n.isReactWarning)return!1}return void 0!==e.key}(t)&&(r(t.key),m=""+t.key),"key"in t)for(var y in o={},t)"key"!==y&&(o[y]=t[y]);else o=t;return m&&function(e,n){function t(){c||(c=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",n))}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}(o,"function"==typeof e?e.displayName||e.name||"Unknown":e),function(e,n,t,r,o,a,l,s){return t=a.ref,e={$$typeof:p,type:e,key:n,props:a,_owner:o},null!==(void 0!==t?t:null)?Object.defineProperty(e,"ref",{enumerable:!1,get:i}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:l}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:s}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}(e,m,u,0,null===(g=I.A)?null:g.getOwner(),o,d,f)}function s(e){"object"==typeof e&&null!==e&&e.$$typeof===p&&e._store&&(e._store.validated=1)}var c,d=e,p=Symbol.for("react.transitional.element"),f=Symbol.for("react.portal"),g=Symbol.for("react.fragment"),m=Symbol.for("react.strict_mode"),b=Symbol.for("react.profiler"),y=Symbol.for("react.consumer"),h=Symbol.for("react.context"),x=Symbol.for("react.forward_ref"),_=Symbol.for("react.suspense"),v=Symbol.for("react.suspense_list"),k=Symbol.for("react.memo"),T=Symbol.for("react.lazy"),w=Symbol.for("react.activity"),S=Symbol.for("react.client.reference"),I=d.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,j=Object.prototype.hasOwnProperty,N=Array.isArray,C=console.createTask?console.createTask:function(){return null},E={},R=(d={"react-stack-bottom-frame":function(e){return e()}})["react-stack-bottom-frame"].bind(d,a)(),O=C(o(a)),D={};u.Fragment=g,u.jsx=function(e,n,t,r,a){var i=1e4>I.recentlyCreatedOwnerStacks++;return l(e,n,t,!1,0,a,i?Error("react-stack-top-frame"):R,i?C(o(e)):O)},u.jsxs=function(e,n,t,r,a){var i=1e4>I.recentlyCreatedOwnerStacks++;return l(e,n,t,!0,0,a,i?Error("react-stack-top-frame"):R,i?C(o(e)):O)}}()),u}var p=(c||(c=1,"production"===process.env.NODE_ENV?i.exports=function(){if(a)return l;a=1;var e=Symbol.for("react.transitional.element"),n=Symbol.for("react.fragment");function t(n,t,r){var o=null;if(void 0!==r&&(o=""+r),void 0!==t.key&&(o=""+t.key),"key"in t)for(var a in r={},t)"key"!==a&&(r[a]=t[a]);else r=t;return t=r.ref,{$$typeof:e,type:n,key:o,ref:void 0!==t?t:null,props:r}}return l.Fragment=n,l.jsx=t,l.jsxs=t,l}():i.exports=d()),i.exports);var f={tagsContainer:"reactTagsInput-module_tagsContainer__Qaa-C",badge:"reactTagsInput-module_badge__zrBEr",badgeText:"reactTagsInput-module_badgeText__GNosg",removeBtn:"reactTagsInput-module_removeBtn__WF6ik",inputTag:"reactTagsInput-module_inputTag__eZbWN",placeholder:"reactTagsInput-module_placeholder__OrGlI",limitWarning:"reactTagsInput-module_limitWarning__cmqu0",limitReached:"reactTagsInput-module_limitReached__9dTZR",suggestions:"reactTagsInput-module_suggestions__C-qlD",suggestion:"reactTagsInput-module_suggestion__v610q",suggestionActive:"reactTagsInput-module_suggestionActive__iJtsi"};!function(e,n){void 0===n&&(n={});var t=n.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("/* .inputTag{\n    width: 100%;\n    box-sizing: border-box;\n    border: 1px solid #ccc;\n    border-radius: 5px;\n    padding:10px;\n    resize: none;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.inputTag:focus{\n    outline: none;\n}\n.inputTag:focus::placeholder {\n    color: transparent;\n}\n.inputTag::placeholder {\n    color: #999;\n}\n.inputTag:disabled {\n    background-color: #f5f5f5;\n    border-color: #ddd;\n    cursor: not-allowed;\n}\n.inputTag:disabled::placeholder {\n    color: #ccc;\n}\n.inputTag:disabled:focus {\n    border-color: #ddd;\n}\n.inputTag:disabled:focus::placeholder {\n    color: #ccc;\n}\n\n\n.badge{\n    display: inline-block;\n    padding: 5px 10px;\n    margin: 5px;\n    background-color: #007bff;\n    color: white;\n    border-radius: 20px;\n    font-size: 14px;\n    cursor: pointer;\n}\n\n.badge:hover{\n    background-color: #0056b3;\n}\n.badge:focus{\n    outline: none;\n    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);\n}\n\n.badgeText{\n    display: inline-block;\n    padding: 5px 10px;\n    margin: 5px;\n    background-color: #f0f0f0;\n    color: #333;\n    border-radius: 20px;\n    font-size: 14px;\n} */\n/* \n\n.tagsContainer {\n    box-sizing: border-box;\n    display:flex;\n    flex-wrap:wrap;\n    border: 1px solid #ccc;\n    border-radius: 5px;\n    padding: 10px;\n    resize: none;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.tag {\n    display: flex;\n    align-items: center;\n    padding: 4px 8px;\n    background-color: #e0e0e0;\n    border-radius: 4px;\n}\n\n.tagInput {\n    flex: 1;\n    min-width: 100px;\n    padding: 4px;\n    outline: none;\n    border:none;\n} */\n\n/* \n.tagRemoveButton {\n    margin-left: 8px;\n    cursor: pointer;\n    color: #ff0000;\n}\n\n.tagRemoveButton:hover {\n    color: #cc0000;\n}\n\n.badge {\n    display: inline-block;\n    padding: 2px 6px;\n    font-size: 12px;\n    border-radius: 12px;\n} */\n\n.reactTagsInput-module_tagsContainer__Qaa-C {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-start;\n  /* min-height: 30vh; */\n  gap: 8px;\n  border: 1.5px solid #e5e7eb;\n  border-radius: 20px;\n  padding: 8px 14px;\n  background: #fff;\n  min-height: 48px;\n  position: relative;\n  font-family: 'Inter', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;\n  transition: border 0.2s;\n}\n\n.reactTagsInput-module_tagsContainer__Qaa-C:focus-within {\n  border-color: #a5b4fc;\n  box-shadow: 0 0 0 2px #a5b4fc33;\n}\n\n\n\n.reactTagsInput-module_badge__zrBEr {\n  display: inline-flex;\n  align-items: center;\n  background: #f3f4f6;\n  color: #222;\n  border-radius: 18px;\n  padding: 6px 14px;\n  font-size: 16px;\n  font-weight: 600;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);\n  gap: 6px;\n  max-width: 100%;\n}\n\n.reactTagsInput-module_badgeText__GNosg {\n  font-size: 16px;\n  font-weight: 600;\n  font-family: inherit;\n  white-space: normal;\n  word-break: break-word;\n  display: block;\n  max-width: 100%;\n}\n\n.reactTagsInput-module_removeBtn__WF6ik {\n  background: none;\n  border: none;\n  color: #888;\n  font-size: 18px;\n  cursor: pointer;\n  padding: 0 2px;\n  border-radius: 50%;\n  transition: background 0.15s, color 0.15s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n\n.reactTagsInput-module_removeBtn__WF6ik:hover {\n  background: #e5e7eb;\n  color: #e11d48;\n}\n\n.reactTagsInput-module_inputTag__eZbWN {\n  flex: 1;\n  min-width: 120px;\n  border: none;\n  outline: none;\n  padding: 6px 0;\n  font-size: 16px;\n  font-family: inherit;\n  background: transparent;\n  color: #222;\n}\n\n\n.reactTagsInput-module_placeholder__OrGlI {\n  position: absolute;\n  left: 18px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: #bdbdbd;\n  font-size: 15px;\n  pointer-events: none;\n  font-family: inherit;\n  user-select: none;\n  z-index: 1;\n  transition: opacity 0.2s;\n  opacity: 1;\n}\n\n.reactTagsInput-module_limitWarning__cmqu0 {\n  color: #aaa;\n  font-size: 12px;\n  margin-top: 4px;\n  font-family: inherit;\n  float: right;\n}\n\n.reactTagsInput-module_limitReached__9dTZR {\n  color: #e11d48;\n}\n\n/* .inputTag:not(:placeholder-shown) + .placeholder,\n.inputTag:focus + .placeholder {\n  opacity: 0;\n} */\n\n/* Suggestions dropdown: absolute, below input, width matches input */\n.reactTagsInput-module_suggestions__C-qlD {\n  position: absolute;\n  left: 0;\n  top: 100%;\n  margin-top: 2px;\n  background: #fff;\n  border: 1px solid #d1d5db;\n  border-radius: 0 0 8px 8px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);\n  z-index: 10;\n  list-style: none;\n  padding: 0;\n  margin-bottom: 0;\n  max-height: 220px;\n  overflow-y: auto;\n  /* min-width: 220px; */\n  width: max-content;\n  min-width: 100%;\n  /* This ensures it matches the input width */\n}\n\n/* Suggestion item: no font-weight change, smooth color only */\n.reactTagsInput-module_suggestion__v610q,\n.reactTagsInput-module_suggestionActive__iJtsi {\n  padding: 10px 18px;\n  cursor: pointer;\n  font-size: 16px;\n  color: #222;\n  background: #fff;\n  border: none;\n  text-align: left;\n  transition: background 0.15s, color 0.15s;\n  border-radius: 0;\n  outline: none;\n  display: flex;\n  align-items: center;\n}\n\n.reactTagsInput-module_suggestionActive__iJtsi,\n.reactTagsInput-module_suggestion__v610q:hover {\n  background: #e3eefd;\n  color: #1976d2;\n  /* No font-weight change! */\n}\n\n.reactTagsInput-module_suggestion__v610q:first-child {\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n}\n\n.reactTagsInput-module_suggestion__v610q:last-child {\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n}");var g="'Inter', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif";function m(e){var a=n(""),i=a[0],l=a[1],s=n(!1),c=s[0],u=s[1],d=n(0),m=d[0],b=d[1],y=e.tags||[],h=e.options||[],x=t(null);r((function(){if("production"!==import.meta.env.MODE&&e.options&&e.filterData){var n=e.options.filter((function(n){return!e.filterData(n)}));n.length&&console.error("[ReactTagsInput] Some options do not pass filterData and will not be selectable:",n)}}),[e.options,e.filterData]);var _=h.length?h.filter((function(e){return e.toLowerCase().includes(i.toLowerCase())&&!y.includes(e)})):[],v=function(n){return n?e.filterData&&!e.filterData(n)?"Some tag(s) did not pass the filter (not a valid URL).":h.length>0&&!h.includes(n)?"The tag is not in the options list.":y.includes(n)?"The tag is already added.":!(e.limit&&y.length>=e.limit)||"The tag limit has been reached.":"The tag cannot be empty."},k=function(n){var t,r,a=v(n);!0===a?(e.onChange(o(o([],y,!0),[n],!1)),l(""),b(0),null===(t=e.onError)||void 0===t||t.call(e,"")):(null===(r=e.onError)||void 0===r||r.call(e,a),l(""),b(0))},T=!y.length&&!i&&!c;return p.jsxs("div",{style:{fontFamily:g,width:"100%"},children:[p.jsxs("div",{className:[f.tagsContainer,e.className].filter(Boolean).join(" "),style:e.containerStyle,tabIndex:-1,onClick:function(){var e;return null===(e=x.current)||void 0===e?void 0:e.focus()},onFocus:function(){return u(!0)},onBlur:function(){return u(!1)},children:[y.map((function(n,t){return p.jsxs("span",{className:f.badge,children:[p.jsx("span",{className:f.badgeText,children:n}),p.jsx("button",{className:f.removeBtn,tabIndex:-1,type:"button","aria-label":"Remove ".concat(n),onClick:function(n){n.stopPropagation(),e.onChange(y.filter((function(e,n){return n!==t})))},children:"×"})]},n+t)})),p.jsx("input",{ref:x,value:i,onChange:function(e){l((function(){return e.target.value})),b(0)},onKeyDown:function(n){h.length>0&&["ArrowDown","ArrowUp"].includes(n.key)&&_.length?(n.preventDefault(),b((function(e){return"ArrowDown"===n.key?(e+1)%_.length:(e-1+_.length)%_.length}))):h.length>0&&"Enter"===n.key&&_.length?(n.preventDefault(),k(_[m])):"Enter"!==n.key&&","!==n.key&&" "!==n.key||!i.trim()?"Backspace"!==n.key&&"Delete"!==n.key||i||!y.length||e.onChange(y.slice(0,-1)):(n.preventDefault(),v(i.trim())?k(i.trim()):(l(""),b(0)))},onPaste:function(n){n.preventDefault(),function(n){var t,r,a,i=n.split(/[\s,]+/).map((function(e){return e.trim()})).filter(Boolean);console.log("Candidates:",i);for(var s=[],c=e.limit?e.limit-y.length:1/0,u=null,d=0,p=i;d<p.length;d++){var f=p[d],g=v(f);if(!0===g&&!s.includes(f)&&c>0?(s.push(f),c--):!0===g||u||(u=g),0===c)break}s.length?(e.onChange(o(o([],y,!0),s,!0)),l(""),b(0),i.length>s.length&&u?null===(t=e.onError)||void 0===t||t.call(e,u+" Some valid URLs were added."):null===(r=e.onError)||void 0===r||r.call(e,"")):u&&(null===(a=e.onError)||void 0===a||a.call(e,u),l(""),b(0))}(n.clipboardData.getData("text"))},className:f.inputTag,style:{fontFamily:g},autoComplete:"off",spellCheck:!1}),T&&p.jsx("span",{className:f.placeholder,children:e.placeholder||"Type and press ENTER to add tags..."}),h.length>0&&c&&i&&_.length>0&&p.jsx("ul",{className:f.suggestions,children:_.map((function(e,n){return p.jsx("li",{className:n===m?f.suggestionActive:f.suggestion,onMouseDown:function(){return function(e){return k(e)}(e)},onMouseEnter:function(){return b(n)},children:e},e)}))})]}),e.limit&&p.jsx("span",{className:"".concat(f.limitWarning," ").concat(y.length===e.limit?f.limitReached:""),children:"Limit used: ".concat(y.length,"/").concat(e.limit)})]})}export{m as default};
//# sourceMappingURL=index.mjs.map