react-autocomplete-tagbox/dist/index.js

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

"use strict";var e=require("react");function n(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 t,r={exports:{}},o={};var a,i,l={};
/**
 * @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 s(){return a||(a=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 s(e,t,o,a,l,s,d,f){var g,m=t.children;if(void 0!==m)if(a)if(N(m)){for(a=0;a<m.length;a++)c(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 c(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(){u||(u=!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,s,0,null===(g=I.A)?null:g.getOwner(),o,d,f)}function c(e){"object"==typeof e&&null!==e&&e.$$typeof===p&&e._store&&(e._store.validated=1)}var u,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={};l.Fragment=g,l.jsx=function(e,n,t,r,a){var i=1e4>I.recentlyCreatedOwnerStacks++;return s(e,n,t,!1,0,a,i?Error("react-stack-top-frame"):R,i?C(o(e)):O)},l.jsxs=function(e,n,t,r,a){var i=1e4>I.recentlyCreatedOwnerStacks++;return s(e,n,t,!0,0,a,i?Error("react-stack-top-frame"):R,i?C(o(e)):O)}}()),l}var c=(i||(i=1,"production"===process.env.NODE_ENV?r.exports=function(){if(t)return o;t=1;var e=Symbol.for("react.transitional.element"),n=Symbol.for("react.fragment");function r(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 o.Fragment=n,o.jsx=r,o.jsxs=r,o}():r.exports=s()),r.exports);var u={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 d="'Inter', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif";module.exports=function(t){var r=e.useState(""),o=r[0],a=r[1],i=e.useState(!1),l=i[0],s=i[1],p=e.useState(0),f=p[0],g=p[1],m=t.tags||[],b=t.options||[],y=e.useRef(null);e.useEffect((function(){if("production"!==(void 0).MODE&&t.options&&t.filterData){var e=t.options.filter((function(e){return!t.filterData(e)}));e.length&&console.error("[ReactTagsInput] Some options do not pass filterData and will not be selectable:",e)}}),[t.options,t.filterData]);var h=b.length?b.filter((function(e){return e.toLowerCase().includes(o.toLowerCase())&&!m.includes(e)})):[],x=function(e){return e?t.filterData&&!t.filterData(e)?"Some tag(s) did not pass the filter (not a valid URL).":b.length>0&&!b.includes(e)?"The tag is not in the options list.":m.includes(e)?"The tag is already added.":!(t.limit&&m.length>=t.limit)||"The tag limit has been reached.":"The tag cannot be empty."},_=function(e){var r,o,i=x(e);!0===i?(t.onChange(n(n([],m,!0),[e],!1)),a(""),g(0),null===(r=t.onError)||void 0===r||r.call(t,"")):(null===(o=t.onError)||void 0===o||o.call(t,i),a(""),g(0))},v=!m.length&&!o&&!l;return c.jsxs("div",{style:{fontFamily:d,width:"100%"},children:[c.jsxs("div",{className:[u.tagsContainer,t.className].filter(Boolean).join(" "),style:t.containerStyle,tabIndex:-1,onClick:function(){var e;return null===(e=y.current)||void 0===e?void 0:e.focus()},onFocus:function(){return s(!0)},onBlur:function(){return s(!1)},children:[m.map((function(e,n){return c.jsxs("span",{className:u.badge,children:[c.jsx("span",{className:u.badgeText,children:e}),c.jsx("button",{className:u.removeBtn,tabIndex:-1,type:"button","aria-label":"Remove ".concat(e),onClick:function(e){e.stopPropagation(),t.onChange(m.filter((function(e,t){return t!==n})))},children:"×"})]},e+n)})),c.jsx("input",{ref:y,value:o,onChange:function(e){a((function(){return e.target.value})),g(0)},onKeyDown:function(e){b.length>0&&["ArrowDown","ArrowUp"].includes(e.key)&&h.length?(e.preventDefault(),g((function(n){return"ArrowDown"===e.key?(n+1)%h.length:(n-1+h.length)%h.length}))):b.length>0&&"Enter"===e.key&&h.length?(e.preventDefault(),_(h[f])):"Enter"!==e.key&&","!==e.key&&" "!==e.key||!o.trim()?"Backspace"!==e.key&&"Delete"!==e.key||o||!m.length||t.onChange(m.slice(0,-1)):(e.preventDefault(),x(o.trim())?_(o.trim()):(a(""),g(0)))},onPaste:function(e){e.preventDefault(),function(e){var r,o,i,l=e.split(/[\s,]+/).map((function(e){return e.trim()})).filter(Boolean);console.log("Candidates:",l);for(var s=[],c=t.limit?t.limit-m.length:1/0,u=null,d=0,p=l;d<p.length;d++){var f=p[d],b=x(f);if(!0===b&&!s.includes(f)&&c>0?(s.push(f),c--):!0===b||u||(u=b),0===c)break}s.length?(t.onChange(n(n([],m,!0),s,!0)),a(""),g(0),l.length>s.length&&u?null===(r=t.onError)||void 0===r||r.call(t,u+" Some valid URLs were added."):null===(o=t.onError)||void 0===o||o.call(t,"")):u&&(null===(i=t.onError)||void 0===i||i.call(t,u),a(""),g(0))}(e.clipboardData.getData("text"))},className:u.inputTag,style:{fontFamily:d},autoComplete:"off",spellCheck:!1}),v&&c.jsx("span",{className:u.placeholder,children:t.placeholder||"Type and press ENTER to add tags..."}),b.length>0&&l&&o&&h.length>0&&c.jsx("ul",{className:u.suggestions,children:h.map((function(e,n){return c.jsx("li",{className:n===f?u.suggestionActive:u.suggestion,onMouseDown:function(){return function(e){return _(e)}(e)},onMouseEnter:function(){return g(n)},children:e},e)}))})]}),t.limit&&c.jsx("span",{className:"".concat(u.limitWarning," ").concat(m.length===t.limit?u.limitReached:""),children:"Limit used: ".concat(m.length,"/").concat(t.limit)})]})};
//# sourceMappingURL=index.js.map