react-mail-chips/dist/cjs/index.js

🍟 A simple react component for managing and displaying multiple email addresses as chips.

"use strict";var e=require("react/jsx-runtime"),n=require("react");function r(e,n,r){if(r||2===arguments.length)for(var t,i=0,o=n.length;i<o;i++)!t&&i in n||(t||(t=Array.prototype.slice.call(n,0,i)),t[i]=n[i]);return e.concat(t||Array.prototype.slice.call(n))}function t(e,n){void 0===n&&(n={});var r=n.insertAt;if(e&&"undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===r&&t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}"function"==typeof SuppressedError&&SuppressedError;t(".react-mail-chips > .chip {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n  padding: 0.25rem 0.25rem 0.25rem 0.5rem;\r\n  border-radius: 4px;\r\n  background-color: #f1f1f1;\r\n  color: #333;\r\n  font-size: 12px;\r\n  font-weight: 600;\r\n  cursor: pointer;\r\n  transition: background-color 0.3s;\r\n}\r\n\r\n.react-mail-chips > .chip:hover {\r\n  background-color: #e1e1e1;\r\n}\r\n\r\n.react-mail-chips > .chip > .remove-chip-btn {\r\n  border: none;\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n");var i=function(n){var r=n.content,t=n.className,i=n.deleteByIndex;return e.jsxs("span",{className:"chip ".concat(t),children:[r,e.jsx("span",{className:"remove-chip-btn",onClick:i,children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor",style:{width:"14px",height:"14px"},children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M6 18 18 6M6 6l12 12"})})})]})};t('.react-mail-chips > .chip-input-container {\r\n  display: flex;\r\n  flex-basis: 200px;\r\n  flex-direction: column;\r\n  padding: 0.25rem 0rem;\r\n  font-size: 14px;\r\n  flex: 1 1;\r\n  -webkit-box-flex: 1;\r\n  overflow: hidden;\r\n}\r\n\r\n.react-mail-chips .chip-input {\r\n  font-family: "Roboto", sans-serif;\r\n  outline: none;\r\n  border: none;\r\n  box-shadow: none;\r\n  padding: 0;\r\n  margin: 0;\r\n  font-size: 14px;\r\n  flex: 1 1;\r\n}\r\n\r\n.react-mail-chips .chip-input-content {\r\n  font-family: "Roboto", sans-serif;\r\n  align-self: flex-start;\r\n  white-space: pre;\r\n  font-size: 14px;\r\n  height: 0;\r\n  visibility: hidden;\r\n}\r\n');var o=function(e){return/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(e)},a=function(e,n){return n.includes(e)},l=function(t){var i=t.emails,l=t.setEmails,s=t.inputContainerClassName,c=t.inputValue,u=t.inputRef,d=t.setInputValue,p=t.delimiters,m=t.onKeyDown,f=n.useState(0),h=f[0],x=f[1],v=n.useRef(null);n.useEffect((function(){v.current&&x(v.current.clientWidth)}),[c]);return e.jsxs("div",{className:"chip-input-container ".concat(s),style:{flexBasis:h?h+2:0},children:[e.jsx("input",{ref:u,className:"chip-input",type:"text",onKeyUp:function(e){if(p.includes(e.key)){var n=c.trim();o(n)&&(a(n,i)||(l(r(r([],i,!0),[n],!1)),d("")),u.current&&(u.current.value=""))}else"Backspace"===e.key&&0===c.length?l(i.slice(0,i.length-1)):d(e.target.value)},onKeyDown:m,onBlur:function(){o(c)&&(a(c,i)||(l(r(r([],i,!0),[c],!1)),d("")),u.current&&(u.current.value=""))},onPaste:function(e){e.preventDefault();var n=e.clipboardData.getData("text"),t=c+n;if(o(t.trim())&&!a(t.trim(),i))return l(r(r([],i,!0),[t.trim()],!1)),void(u.current.value="");var s=n.split(/[\s,;]+/).map((function(e){return e.trim()})).filter((function(e){return e&&o(e)&&!a(e,i)}));s.length>0?(l(r(r([],i,!0),s,!0)),d("")):u.current.value=t}}),e.jsx("span",{ref:v,className:"chip-input-content",children:c})]})};t(".react-mail-chips .email-recommendations-list {\r\n  min-width: max-content;\r\n}\r\n\r\n.react-mail-chips .email-recommendation-item {\r\n  padding: 8px 12px;\r\n  cursor: pointer;\r\n}\r\n\r\n.react-mail-chips .email-recommendation-item:hover,\r\n.react-mail-chips .email-recommendation-item.selected {\r\n  background-color: #f5f5f5;\r\n}\r\n");var s=function(r){var t=r.recommendations,i=r.selectedIndex,o=r.onSelect,a=r.onMouseEnter,l=n.useRef(null);return n.useEffect((function(){if(i>=0&&l.current){var e=l.current.children[i];e&&e.scrollIntoView({block:"nearest"})}}),[i]),0===t.length?null:e.jsx("div",{className:"email-recommendations-list",ref:l,children:t.map((function(n,r){return e.jsx("div",{className:"email-recommendation-item ".concat(r===i?"selected":""),onMouseDown:function(e){e.preventDefault(),o(n)},onMouseEnter:function(){return a(r)},children:n},n)}))})};t('.react-mail-chips {\r\n  display: flex;\r\n  position: relative;\r\n  flex-wrap: wrap;\r\n  align-items: center;\r\n  padding: 0.25rem 0.5rem;\r\n  border: 1px solid #d9d9d9;\r\n  border-radius: 4px;\r\n  width: 100%;\r\n  max-width: 100%;\r\n  font-size: 14px;\r\n  row-gap: 0.5rem;\r\n  column-gap: 0.5rem;\r\n  font-family: "Roboto", sans-serif;\r\n}\r\n\r\n.react-mail-chips .placeholder {\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 0.5rem;\r\n  transform: translateY(-50%);\r\n  color: #999;\r\n  font-size: 14px;\r\n  pointer-events: none;\r\n}\r\n\r\n.react-mail-chips > .email-recommendations {\r\n  position: absolute;\r\n  width: 280px;\r\n  max-height: 160px;\r\n  overflow: auto;\r\n  background-color: #fff;\r\n  border: 1px solid #ddd;\r\n  border-radius: 4px;\r\n  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\r\n  z-index: 10;\r\n  padding: 4px 0;\r\n}');var c=-24,u=28;exports.ReactMailChips=function(t){var o=t.emails,d=t.setEmails,p=t.className,m=void 0===p?"":p,f=t.chipClassName,h=void 0===f?"":f,x=t.inputContainerClassName,v=void 0===x?"":x,g=t.placeholder,w=void 0===g?"":g,b=t.delimiters,y=void 0===b?["Enter",",",";"]:b,C=t.recommendedEmails,k=void 0===C?[]:C,N=n.useState(""),j=N[0],E=N[1],D=n.useState(null),R=D[0],S=D[1],I=n.useRef(null),z=n.useRef(null),B=n.useState(!1),A=B[0],M=B[1],K=n.useState([]),V=K[0],L=K[1],T=function(e){var r=e.showRecommendations,t=e.filteredRecommendations,i=e.onSelect,o=e.onClose,a=n.useState(-1),l=a[0],s=a[1];return{selectedIndex:l,setSelectedIndex:s,handleKeyDown:function(e){if(r)switch(e.key){case"ArrowDown":e.preventDefault(),s((function(e){return e<t.length-1?e+1:e}));break;case"ArrowUp":e.preventDefault(),s((function(e){return e>0?e-1:e}));break;case"Enter":e.preventDefault(),l>=0&&l<t.length&&i(t[l]);break;case"Escape":e.preventDefault(),o()}}}}({showRecommendations:A,filteredRecommendations:V,onSelect:$,onClose:function(){M(!1),q(-1)}}),Z=T.selectedIndex,q=T.setSelectedIndex,U=T.handleKeyDown,W=n.useCallback((function(e){d(o.filter((function(n,r){return r!==e})))}),[o,d]),P=n.useCallback((function(){var e;if(I.current&&j&&(null==k?void 0:k.length)){var n=I.current.getBoundingClientRect(),r=null===(e=z.current)||void 0===e?void 0:e.getBoundingClientRect();S(n&&r?{left:n.left-r.left+c,top:n.top-r.top+u}:n)}}),[j,k]),Y=n.useCallback((function(){if(j&&(null==k?void 0:k.length)){var e=k.filter((function(e){return e.toLowerCase().includes(j.toLowerCase())&&!a(e,o)})).slice(0,5);L(e),M(e.length>0),q(-1)}else M(!1)}),[j,k,o,q]);function $(e){e&&!a(e,o)&&(d(r(r([],o,!0),[e],!1)),E(""),I.current&&(I.current.value=""),M(!1),q(-1))}n.useEffect((function(){P(),Y()}),[P,Y]);var _=0===j.length&&0===o.length&&w.length>0;return e.jsxs("div",{className:"react-mail-chips ".concat(m),ref:z,children:[_&&e.jsx("span",{className:"placeholder",children:w}),o.map((function(n,r){return e.jsx(i,{content:n,className:h,deleteByIndex:function(e){e.preventDefault(),W(r)}},n)})),A&&R&&e.jsx("div",{className:"email-recommendations",style:{left:"".concat(R.left,"px"),top:"".concat(R.top,"px")},children:e.jsx(s,{recommendations:V,selectedIndex:Z,onSelect:$,onMouseEnter:q})}),e.jsx(l,{emails:o,setEmails:d,inputValue:j,inputRef:I,setInputValue:E,inputContainerClassName:v,delimiters:y,onKeyDown:U})]})};
//# sourceMappingURL=index.js.map