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

lightweight component for tag(s) input

"use strict";var K=Object.create;var u=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var U=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var R=(t,r)=>{for(var e in r)u(t,e,{get:r[e],enumerable:!0})},E=(t,r,e,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of U(r))!D.call(t,a)&&a!==e&&u(t,a,{get:()=>r[a],enumerable:!(i=O(r,a))||i.enumerable});return t};var w=(t,r,e)=>(e=t!=null?K(j(t)):{},E(r||!t||!t.__esModule?u(e,"default",{value:t,enumerable:!0}):e,t)),z=t=>E(u({},"__esModule",{value:!0}),t);var M={};R(M,{TagsInput:()=>J});module.exports=z(M);function b(t,{insertAt:r}={}){if(!t||typeof document>"u")return;let e=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css",r==="top"&&e.firstChild?e.insertBefore(i,e.firstChild):e.appendChild(i),i.styleSheet?i.styleSheet.cssText=t:i.appendChild(document.createTextNode(t))}b(`.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)}
`);var p=w(require("react"));var c=require("react");function v(t,r){let e=(0,c.useRef)(!1);(0,c.useEffect)(()=>{e.current?t():e.current=!0},r)}function g(...t){return t.filter(r=>r).join(" ")}var f=w(require("react"));function y({text:t,remove:r,disabled:e,className:i}){let a=m=>{m.stopPropagation(),r(t)};return f.default.createElement("span",{className:g("rti--tag",i)},f.default.createElement("span",null,t),!e&&f.default.createElement("button",{type:"button",onClick:a,"aria-label":`remove ${t}`},"\u2715"))}var H=["Enter"],J=({name:t,placeHolder:r,value:e,onChange:i,onBlur:a,separators:m,disableBackspaceRemove:B,onExisting:h,onRemoved:x,disabled:T,isEditOnRemove:C,beforeAddValidate:k,onKeyUp:I,classNames:d})=>{let[o,l]=(0,p.useState)(e||[]);v(()=>{i&&i(o)},[o]),v(()=>{JSON.stringify(e)!==JSON.stringify(o)&&l(e)},[e]);let P=n=>{n.stopPropagation();let s=n.target.value;if(!s&&!B&&o.length&&n.key==="Backspace"&&(n.target.value=C?`${o.at(-1)} `:"",l([...o.slice(0,-1)])),s&&(m||H).includes(n.key)){if(n.preventDefault(),k&&!k(s,o))return;if(o.includes(s)){h&&h(s);return}l([...o,s]),n.target.value=""}},S=n=>{l(o.filter(s=>s!==n)),x&&x(n)};return p.default.createElement("div",{"aria-labelledby":t,className:"rti--container"},o.map(n=>p.default.createElement(y,{key:n,className:d==null?void 0:d.tag,text:n,remove:S,disabled:T})),p.default.createElement("input",{className:g("rti--input",d==null?void 0:d.input),type:"text",name:t,placeholder:r,onKeyDown:P,onBlur:a,disabled:T,onKeyUp:I}))};0&&(module.exports={TagsInput});