@nexusui/components/cjs/core/common/EmailAutoComplete/EmailAutoComplete.js

These are custom components specially-developed for NexusUI applications. They will make your life easier by giving you out-of-the-box implementations for various high-level UI elements that you can drop directly into your application.

"use client";
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),a=require("@mui/material/TextField"),i=require("@mui/material/Autocomplete"),r=require("@mui/material/ListItem"),l=require("@mui/material/ListItemAvatar"),s=require("@mui/material/Avatar"),n=require("@mui/material/ListItemText"),o=require("@mui/material/Typography"),u=require("@mui/icons-material/AccountCircle"),d=require("@mui/material/styles"),m=require("@mui/material/InputAdornment"),p=require("@mui/material/Chip"),c=require("@mui/material/Paper"),f=require("../../util/constants.js"),x=require("../../StatusAvatar/StatusAvatar.container.js"),g=require("../../util/functions/index.js"),h=require("../locale.json.js"),b=require("../../locales/index.js");function v(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var y=v(t),j=v(a),q=v(i),A=v(r),C=v(l),E=v(s),I=v(n),S=v(o),P=v(u),R=v(m),N=v(p),T=v(c);const k="NexusEmailAutoComplete",w=y.default.forwardRef((({availableUsers:a,loading:i=!1,onSearch:r,emails:l=[],emailLimit:s,onEmailsChange:n,placeholder:o,endAdornment:u,onEnterKeySubmit:m,disabled:p=!1,sx:c,...v},y)=>{const w=b.useTranslate(h.default,"EmailInput"),[L,K]=t.useState([]),[M,O]=t.useState(""),$=l.map((e=>e.email)),D=t.useMemo((()=>l.some((e=>!e.valid))?w("Please enter a valid email address."):s&&($.length>s||$.length===s&&M)?w("Maximum number of recipients: {{0}}",{0:s}):void 0),[M,s,$.length,l,w]);t.useEffect((()=>{l.length<1&&(O(""),K([]))}),[l]);const F=e=>{switch(e.key){case f.KeyCodes.ENTER:l.length>0&&!M&&(e.target.blur(),m?.());break;case f.KeyCodes.TAB:case f.KeyCodes.SPACE:case f.KeyCodes.COMMA:if(e.preventDefault(),e.stopPropagation(),M.trim().length>0){const e=M.trim(),t=f.EmailRegex.test(e);$.includes(e)||(n([...l,{email:e,valid:t}]),K([...L,M]),O(""))}}},B=e=>{e.preventDefault(),e.target.blur();const t=e.clipboardData.getData("text"),a=t.trim().split(/[;,\t\n\r]+/),i=[];a.forEach((e=>{const t=e.match(f.EmailIncludedRegex),a=(t?t[0]:e).trim();$.includes(a)||i.push({email:a,valid:f.EmailRegex.test(a)})})),i.length?(n([...l,...i]),K([...L,...i.map((e=>e.email))]),O("")):O(t)},H=t.useCallback(((t,a)=>{const{key:i,...r}=t,{id:l,firstName:s,lastName:n,email:o,avatar:u,disabled:m=!1}=a,p=g.getFullName(a)||o,c=`${o} (${w("Invite sent")})`;return e.jsxs(A.default,{...r,"data-testid":`${k}-userInfo`,disableGutters:!0,sx:{cursor:m?"default":"pointer",pl:2},children:[e.jsx(C.default,{children:m?e.jsx(E.default,{sx:{bgcolor:e=>d.alpha(e.palette.text.primary,.3)},children:e.jsx(P.default,{sx:{color:"background.paper"},fontSize:"small"})}):e.jsx(x.StatusAvatar,{id:l,firstName:s,lastName:n,email:o,disabled:m,avatar:u})}),e.jsx(I.default,{primary:e.jsx(S.default,{variant:"body1",sx:{whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",color:a.disabled?"text.disabled":"text.primary"},children:m?c:p}),secondary:e.jsx(S.default,{variant:"body2",sx:{color:a.disabled?"text.disabled":"text.secondary"},children:o})})]},i)}),[w]);return e.jsx(q.default,{...v,id:`${k}-root`,"data-testid":`${k}-root`,className:`${k}-root`,ListboxProps:{sx:{maxHeight:342}},sx:[{"& .MuiInputBase-formControl":{pr:20}},...Array.isArray(c)?c:[c]],PaperComponent:t=>e.jsx(T.default,{...t,elevation:24}),multiple:!0,freeSolo:!0,disabled:p,disableClearable:!0,forcePopupIcon:!1,filterSelectedOptions:!0,options:a||[],loading:i,onInputChange:(e,t)=>{if(O(t),r&&r(t),t){const e=f.EmailRegex.test(t);n(l,{email:t,valid:e})}else n(l)},onChange:(e,t)=>{if(t.length>l.length){const e=t[t.length-1],a="string"==typeof e?e:e.email,i="string"!=typeof e||f.EmailRegex.test(e);n([...l,{email:a,valid:i}])}else{const e=t.map((e=>({email:"string"==typeof e?e:e.email,valid:"string"!=typeof e||f.EmailRegex.test(e)})));n(e)}K(t),r&&r("")},getOptionLabel:e=>e.email,inputValue:M,value:L,renderInput:t=>e.jsx(j.default,{...t,variant:"outlined",fullWidth:!0,"data-testid":"email-input",error:!!D,helperText:D,onKeyDown:F,onPaste:B,autoFocus:!0,slotProps:{input:{...t.InputProps,sx:{minHeight:{xs:100,sm:44}},endAdornment:e.jsx(R.default,{sx:{position:"absolute",right:p?15:5},position:"end",children:u}),placeholder:o},inputLabel:{shrink:!1}}}),renderOption:H,renderTags:(t,a)=>t.map(((t,i)=>{const{key:r,...l}=a({index:i});return e.jsx(N.default,{variant:"filled",label:"string"==typeof t?t:t.email,color:"string"!=typeof t||f.EmailRegex.test(t)?"default":"error",...l},r)})),ref:y})}));exports.EmailAutoComplete=w;