react-tag-maker
Version:
A customizable tag input component for React and Nextjs
100 lines (95 loc) • 10.7 kB
JavaScript
"use strict";const l=require("react");var M={exports:{}},P={};/**
* @license React
* react-jsx-runtime.production.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.
*/var Q;function ne(){if(Q)return P;Q=1;var s=Symbol.for("react.transitional.element"),m=Symbol.for("react.fragment");function t(d,a,u){var g=null;if(u!==void 0&&(g=""+u),a.key!==void 0&&(g=""+a.key),"key"in a){u={};for(var E in a)E!=="key"&&(u[E]=a[E])}else u=a;return a=u.ref,{$$typeof:s,type:d,key:g,ref:a!==void 0?a:null,props:u}}return P.Fragment=m,P.jsx=t,P.jsxs=t,P}var N={};/**
* @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.
*/var ee;function oe(){return ee||(ee=1,process.env.NODE_ENV!=="production"&&function(){function s(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===J?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case j:return"Fragment";case A:return"Profiler";case W:return"StrictMode";case D:return"Suspense";case U:return"SuspenseList";case q:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case $:return"Portal";case O:return(e.displayName||"Context")+".Provider";case h:return(e._context.displayName||"Context")+".Consumer";case z:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case I:return r=e.displayName||null,r!==null?r:s(e.type)||"Memo";case S:r=e._payload,e=e._init;try{return s(e(r))}catch{}}return null}function m(e){return""+e}function t(e){try{m(e);var r=!1}catch{r=!0}if(r){r=console;var o=r.error,c=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return o.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",c),m(e)}}function d(e){if(e===j)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===S)return"<...>";try{var r=s(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function a(){var e=v.A;return e===null?null:e.getOwner()}function u(){return Error("react-stack-top-frame")}function g(e){if(L.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function E(e,r){function o(){p||(p=!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)",r))}o.isReactWarning=!0,Object.defineProperty(e,"key",{get:o,configurable:!0})}function R(){var e=s(this.type);return x[e]||(x[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.")),e=this.props.ref,e!==void 0?e:null}function C(e,r,o,c,T,b,V,B){return o=b.ref,e={$$typeof:Y,type:e,key:r,props:b,_owner:T},(o!==void 0?o:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:R}):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:V}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:B}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function w(e,r,o,c,T,b,V,B){var i=r.children;if(i!==void 0)if(c)if(G(i)){for(c=0;c<i.length;c++)F(i[c]);Object.freeze&&Object.freeze(i)}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 F(i);if(L.call(r,"key")){i=s(e);var y=Object.keys(r).filter(function(te){return te!=="key"});c=0<y.length?"{key: someKey, "+y.join(": ..., ")+": ...}":"{key: someKey}",K[i+c]||(y=0<y.length?"{"+y.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`,c,i,y,i),K[i+c]=!0)}if(i=null,o!==void 0&&(t(o),i=""+o),g(r)&&(t(r.key),i=""+r.key),"key"in r){o={};for(var X in r)X!=="key"&&(o[X]=r[X])}else o=r;return i&&E(o,typeof e=="function"?e.displayName||e.name||"Unknown":e),C(e,i,b,T,a(),o,V,B)}function F(e){typeof e=="object"&&e!==null&&e.$$typeof===Y&&e._store&&(e._store.validated=1)}var _=l,Y=Symbol.for("react.transitional.element"),$=Symbol.for("react.portal"),j=Symbol.for("react.fragment"),W=Symbol.for("react.strict_mode"),A=Symbol.for("react.profiler"),h=Symbol.for("react.consumer"),O=Symbol.for("react.context"),z=Symbol.for("react.forward_ref"),D=Symbol.for("react.suspense"),U=Symbol.for("react.suspense_list"),I=Symbol.for("react.memo"),S=Symbol.for("react.lazy"),q=Symbol.for("react.activity"),J=Symbol.for("react.client.reference"),v=_.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,L=Object.prototype.hasOwnProperty,G=Array.isArray,n=console.createTask?console.createTask:function(){return null};_={react_stack_bottom_frame:function(e){return e()}};var p,x={},f=_.react_stack_bottom_frame.bind(_,u)(),Z=n(d(u)),K={};N.Fragment=j,N.jsx=function(e,r,o,c,T){var b=1e4>v.recentlyCreatedOwnerStacks++;return w(e,r,o,!1,c,T,b?Error("react-stack-top-frame"):f,b?n(d(e)):Z)},N.jsxs=function(e,r,o,c,T){var b=1e4>v.recentlyCreatedOwnerStacks++;return w(e,r,o,!0,c,T,b?Error("react-stack-top-frame"):f,b?n(d(e)):Z)}}()),N}var re;function ae(){return re||(re=1,process.env.NODE_ENV==="production"?M.exports=ne():M.exports=oe()),M.exports}var k=ae();function se(s,m){const t=l.useRef(!0);l.useEffect(()=>{t.current&&(s(),t.current=!1)},m)}function ce({text:s,remove:m,disabled:t,className:d}){const[a,u]=l.useState(!1),g=l.useCallback(R=>{R.stopPropagation(),u(!0),setTimeout(()=>{m(s)},150)},[m,s]),E=l.useCallback((...R)=>a?R.filter(Boolean).join(" ")+" disappearing":R.filter(Boolean).join(" "),[a]);return k.jsxs("span",{className:E("gloomy-tag--tag",d),children:[k.jsx("span",{children:s}),!t&&k.jsx("button",{type:"button",onClick:g,"aria-label":`remove ${s}`,children:"✕"})]})}let H;function ie({name:s,placeHolder:m,state:t,setState:d,onChange:a,onBlur:u,separators:g=[],disableBackspaceRemove:E=!1,onExisting:R,onRemoved:C,disabled:w=!1,isEditOnRemove:F=!1,beforeAddValidate:_,onKeyUp:Y,classNames:$,style:j,throttleTime:W}){const A=l.useRef(null),[h,O]=l.useState([]);se(()=>{d&&d(t)},[t]),l.useEffect(()=>{const n=typeof t=="object"?t.map(p=>({tag:p,focus:!1})):[];O(n),a&&a(t)},[t,a]);const[z,D]=l.useState(0),U=["Enter"," ",","],[I,S]=l.useState(!1);l.useEffect(()=>{h.find(n=>n&&n.focus)?S(!0):S(!1)},[h]);const q=n=>{if(n.nativeEvent.isComposing||H)return;setTimeout(()=>H=void 0,H);const p=n.currentTarget.value.replace(/\s/gi,""),x=n.key;if(p&&(g.includes(x)||U.includes(x))){if(n.preventDefault(),_&&!_(p,t))return;if(!z)D(setTimeout(()=>{D(0)},W??10));else return console.warn("react-tag-maker throttling!");t.includes(p)?R&&R(p):(d([...t,p]),n.currentTarget.value="")}if(!p&&!E&&t.length&&x==="Backspace")if(n.preventDefault(),F)n.currentTarget.value=`${t.slice(-1)} `;else if(I)d([...t.slice(0,-1)]);else if(!I&&t.length>0){const f=[...h];f[f.length-1]&&(f[f.length-1].focus=!0,O(f))}else console.log();else{const f=[...h];f[f.length-1]&&(f[f.length-1].focus=!1,O(f))}},J=n=>{d(t.filter(p=>p!==n)),C&&C(n)},[v,L]=l.useState(null);l.useEffect(()=>{!v&&typeof document=="object"&&L(`
.gloomy-tag--container {
box-sizing: border-box;
transition: all 0.2s ease;
align-items: center;
background: #fff;
border: 1px solid #ccc;
border-radius: 5px;
display: flex;
flex-wrap: wrap;
gap: 8px;
line-height: 1.4;
padding: 8px;
width: 375px;
cursor: text;
@media(max-width: 600px) {
width: 100%;
}
&:focus-within {
border-color: #1d77fe;
box-shadow: #1d77fe 0 0 0 1px;
}
&,
* {
box-sizing: border-box;
transition: all 0.2s ease;
}
.gloomy-tag--input {
border: 0;
outline: 0;
font-size: inherit;
line-height: inherit;
width: 50%;
background: #fff;
color: #000;
}
.gloomy-tag--tag {
align-items: center;
background: #dbe3eb;
border: 1px solid #b6b5b5;
border-radius: 10px;
display: inline-flex;
justify-content: center;
padding: 2.5px 4px;
opacity: 1;
color: #000;
&:has(button:hover) {
background: #ffe2e2;
}
&.gloomy-tag--focus {
background: #ffe2e2;
}
button {
background: none;
border: 0;
border-radius: 50%;
cursor: pointer;
line-height: inherit;
padding: 0 8px;
font-weight: 900;
color: #000;
&:hover {
color: #e53e3e;
}
}
&.disappearing {
transition: 0.15s;
opacity: 0;
background: #ffaaaa;
}
}
}
`)},[v]);const G=l.useCallback(n=>{!A.current||n.target.className!=="gloomy-tag--container"||A.current.focus()},[]);return k.jsxs("div",{className:"gloomy-tag--container",onClick:G,style:j,children:[h.map(n=>k.jsx(ce,{className:`${$?.tag} ${n.focus&&"gloomy-tag--focus"}`,text:n.tag,remove:J,disabled:w},n.tag)),k.jsx("input",{className:`gloomy-tag--input ${$?.input}`,type:"text",name:s,placeholder:m,onKeyDown:q,onBlur:u,disabled:w,onKeyUp:Y,ref:A}),k.jsx("style",{children:v})]})}module.exports=ie;
//# sourceMappingURL=index.cjs.map