react-tag-input-component/dist/esm/index.js

lightweight component for tag(s) input

function u(e,{insertAt:o}={}){if(!e||typeof document>"u")return;let t=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css",o==="top"&&t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}u(`.rti--container *{box-sizing:border-box;transition:all .2s ease}.rti--container{--rti-bg: #fff;--rti-border: #ccc;--rti-main: #3182ce;--rti-radius: .375rem;--rti-s: .5rem;--rti-tag: #edf2f7;--rti-tag-remove: #e53e3e;--rti-tag-padding: .15rem .25rem;align-items:center;background:var(--rti-bg);border:1px solid var(--rti-border);border-radius:var(--rti-radius);display:flex;flex-wrap:wrap;gap:var(--rti-s);line-height:1.4;padding:var(--rti-s)}.rti--container:focus-within{border-color:var(--rti-main);box-shadow:var(--rti-main) 0 0 0 1px}.rti--input{border:0;outline:0;font-size:inherit;line-height:inherit;width:50%}.rti--tag{align-items:center;background:var(--rti-tag);border-radius:var(--rti-radius);display:inline-flex;justify-content:center;padding:var(--rti-tag-padding)}.rti--tag button{background:none;border:0;border-radius:50%;cursor:pointer;line-height:inherit;padding:0 var(--rti-s)}.rti--tag button:hover{color:var(--rti-tag-remove)}
`);import b,{useState as P}from"react";import{useEffect as C,useRef as I}from"react";function c(e,o){let t=I(!1);C(()=>{t.current?e():t.current=!0},o)}function d(...e){return e.filter(o=>o).join(" ")}import f from"react";function m({text:e,remove:o,disabled:t,className:i}){let g=l=>{l.stopPropagation(),o(e)};return f.createElement("span",{className:d("rti--tag",i)},f.createElement("span",null,e),!t&&f.createElement("button",{type:"button",onClick:g,"aria-label":`remove ${e}`},"\u2715"))}var S=["Enter"],q=({name:e,placeHolder:o,value:t,onChange:i,onBlur:g,separators:l,disableBackspaceRemove:T,onExisting:v,onRemoved:y,disabled:h,isEditOnRemove:k,beforeAddValidate:x,onKeyUp:E,classNames:s})=>{let[n,p]=P(t||[]);c(()=>{i&&i(n)},[n]),c(()=>{JSON.stringify(t)!==JSON.stringify(n)&&p(t)},[t]);let w=r=>{r.stopPropagation();let a=r.target.value;if(!a&&!T&&n.length&&r.key==="Backspace"&&(r.target.value=k?`${n.at(-1)} `:"",p([...n.slice(0,-1)])),a&&(l||S).includes(r.key)){if(r.preventDefault(),x&&!x(a,n))return;if(n.includes(a)){v&&v(a);return}p([...n,a]),r.target.value=""}},B=r=>{p(n.filter(a=>a!==r)),y&&y(r)};return b.createElement("div",{"aria-labelledby":e,className:"rti--container"},n.map(r=>b.createElement(m,{key:r,className:s==null?void 0:s.tag,text:r,remove:B,disabled:h})),b.createElement("input",{className:d("rti--input",s==null?void 0:s.input),type:"text",name:e,placeholder:o,onKeyDown:w,onBlur:g,disabled:h,onKeyUp:E}))};export{q as TagsInput};