react-tagit/dist/cjs/index.js

Simple input tag component for react

"use strict";var n=require("react/jsx-runtime"),t=require("react"),e=function(){return e=Object.assign||function(n){for(var t,e=1,r=arguments.length;e<r;e++)for(var a in t=arguments[e])Object.prototype.hasOwnProperty.call(t,a)&&(n[a]=t[a]);return n},e.apply(this,arguments)};function r(n,t,e){if(e||2===arguments.length)for(var r,a=0,o=t.length;a<o;a++)!r&&a in t||(r||(r=Array.prototype.slice.call(t,0,a)),r[a]=t[a]);return n.concat(r||Array.prototype.slice.call(t))}function a(n,t){void 0===t&&(t={});var e=t.insertAt;if(n&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===e&&r.firstChild?r.insertBefore(a,r.firstChild):r.appendChild(a),a.styleSheet?a.styleSheet.cssText=n:a.appendChild(document.createTextNode(n))}}"function"==typeof SuppressedError&&SuppressedError;function o(t){var r=t.customTagItemClass,a=t.customRemoveButtonClass,o=t.customTagContentClass,i=t.disabled,l=t.tagName,s=t.tagsStyleProps,u=t.removeTagBtnStyleProps,g=t.theme,p=t.onRemoveTag;return n.jsxs("li",{className:"input-tag-tag-item ".concat(g,"-input-tag-tag-item ").concat(r||"input-tag-tag-item-element"),style:s,children:[n.jsx("button",{className:"input-tag-tag-remove-btn ".concat(g,"-input-tag-tag-remove-btn ").concat(a||"input-tag-tag-remove-btn-element"),style:e(e({},u),{display:i?"none":"inline-block"}),onClick:function(n){n.stopPropagation(),p(l)},children:"✕"}),n.jsx("span",{className:"input-tag-tag-content ".concat(g,"-input-tag-tag-content ").concat(o||"input-tag-tag-content-element"),children:l})]})}a('.input-tag-tag-item {\r\n  margin: 0;\r\n  padding: 0 0.5rem 0 0;\r\n  display: flex;\r\n  gap: 0.3rem;\r\n  list-style-type: none;\r\n}\r\n\r\n.input-tag-tag-remove-btn {\r\n  cursor: pointer;\r\n}\r\n\r\n.theme-1-input-tag-tag-item {\r\n  padding: 0.5rem;\r\n  color: white;\r\n  background-color: rgb(39, 39, 39);\r\n  border-radius: 5px;\r\n  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",\r\n    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\r\n}\r\n\r\n.theme-1-input-tag-tag-remove-btn {\r\n  color: white;\r\n  border: none;\r\n  font-weight: bold;\r\n  background-color: transparent;\r\n}\r\n\r\n.theme-1-input-tag-tag-remove-btn:hover {\r\n  color: rgb(207, 31, 31);\r\n}\r\n\r\n.theme-2-input-tag-tag-item,\r\n.theme-3-input-tag-tag-item {\r\n  padding: 0.3rem;\r\n  background-color: rgb(199, 199, 199);\r\n  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",\r\n    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\r\n}\r\n\r\n.theme-2-input-tag-tag-remove-btn {\r\n  color: white;\r\n  padding: 0.1rem 0.3rem 0.15rem 0.3rem;\r\n  font-weight: bold;\r\n  border: none;\r\n  border-radius: 50%;\r\n  background-color: rgb(207, 31, 31);\r\n}\r\n\r\n.theme-3-input-tag-tag-item {\r\n  padding: 0;\r\n  gap: 0rem;\r\n}\r\n\r\n.theme-3-input-tag-tag-remove-btn {\r\n  color: white;\r\n  border: none;\r\n  background-color: rgb(126, 126, 126);\r\n}\r\n\r\n.theme-3-input-tag-tag-content {\r\n  padding: 0 0.3rem;\r\n}\r\n');a(".input-tag-container {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 0.5rem 0rem;\r\n}\r\n\r\n.input-tag-list-container {\r\n  cursor: text;\r\n  padding: 1rem;\r\n  margin: 0;\r\n  display: flex;\r\n  align-items: baseline;\r\n  flex-wrap: wrap;\r\n  list-style-type: none;\r\n  border-radius: 5px;\r\n  border: 1px solid rgb(70, 70, 70);\r\n}\r\n\r\n.input-tag-list-container:has(input:disabled) {\r\n  border: 1px solid rgba(70, 70, 70, 0.349);\r\n}\r\n\r\n.input-tag-input {\r\n  border: none;\r\n  background-color: transparent;\r\n}\r\n\r\n.input-tag-label,\r\n.theme-1-input-tag-label,\r\n.theme-2-input-tag-label,\r\n.theme-3-input-tag-label {\r\n  font-size: 1rem;\r\n  font-weight: 500;\r\n  font-family:\r\n    ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',\r\n    'Segoe UI Symbol', 'Noto Color Emoji';\r\n}\r\n\r\n.theme-1-input-tag-list-container,\r\n.theme-2-input-tag-list-container,\r\n.theme-3-input-tag-list-container {\r\n  min-height: 4rem;\r\n  padding: 0.3rem 1rem;\r\n  gap: 0.2rem;\r\n}\r\n\r\n.theme-2-input-tag-list-container,\r\n.theme-3-input-tag-list-container {\r\n  padding: 1rem;\r\n}\r\n\r\n.theme-1-input-tag-input,\r\n.theme-2-input-tag-input,\r\n.theme-3-input-tag-input {\r\n  padding: 0.3rem;\r\n}\r\n"),exports.InputTag=function(a){var i=a.autoFocus,l=void 0!==i&&i,s=a.customClass,u=a.disabled,g=void 0!==u&&u,p=a.inputTagContainerStyleProps,m=a.labelStyleProps,c=a.inputStyleProps,d=a.tagsContainerStyleProps,h=a.tagsStyleProps,b=a.removeTagBtnStyleProps,f=a.hideLabel,y=void 0!==f&&f,v=a.label,x=void 0===v?"Tags":v,C=a.maxTags,T=a.maxTagsValue,E=a.name,S=void 0===E?"tags":E,j=a.separator,k=void 0===j?"Enter":j,N=a.theme,w=a.value,P=a.onChange,B=a.onFocus,I=void 0===B?function(){}:B,A=a.onBlur,F=void 0===A?function(){}:A,L=t.useRef(null),R=t.useState(""),U=R[0],O=R[1],q=0===w.filter((function(n){return n.toLowerCase().trim()===U.toLowerCase().trim()})).length,D=""!==U.trim()&&U.length>0,z=!(C&&C>0)||w.length<C,K="Enter"===k?"Enter":" ",V=function(n){P((function(t){return t.filter((function(t){return t!==n}))}))};return n.jsxs("div",{className:"input-tag-container ".concat((null==s?void 0:s.inputTagContainerElement)||"input-tag-container-element"),style:p,onClick:function(){return L.current.focus()},children:[n.jsx("label",{htmlFor:"tag-input",className:"input-tag-label ".concat(N,"-input-tag-label ").concat((null==s?void 0:s.inputTagLabelElement)||"input-tag-label-element"),style:e(e({},m),{display:y?"none":"block"}),children:x}),n.jsxs("ul",{className:"input-tag-list-container ".concat(N,"-input-tag-list-container ").concat((null==s?void 0:s.inputTagListContainerElement)||"input-tag-list-container-element"),style:e({cursor:g?"default":"text"},d),children:[w.map((function(e){return n.jsx(t.Fragment,{children:n.jsx(o,{customTagItemClass:null==s?void 0:s.inputTagTagItemElement,customRemoveButtonClass:null==s?void 0:s.inputTagTagRemoveBtnElement,customTagContentClass:null==s?void 0:s.inputTagTagContentElement,disabled:g,tagName:e,tagsStyleProps:h,removeTagBtnStyleProps:b,theme:N,onRemoveTag:V})},e)})),n.jsx("li",{children:n.jsx("input",{id:"tag-input","aria-label":"".concat(x," input"),ref:L,type:"text",className:"input-tag-input ".concat(N,"-input-tag-input ").concat((null==s?void 0:s.inputTagInputElement)||"input-tag-input-element"),value:U,onKeyDown:function(n){"Enter"===n.key&&n.preventDefault(),"Backspace"===n.key&&!D&&w.length>0&&V(w[w.length-1]),n.key===K&&D&&q&&z&&(P((function(n){return r(r([],n,!0),[U],!1)})),O(""))},onChange:function(n){return O(n.target.value)},autoFocus:l,maxLength:T,name:S,style:c,onBlur:F,onFocus:I,disabled:g})})]})]})};
//# sourceMappingURL=index.js.map