@trii/components 2.0.6 → 2.0.8

package/dist/cjs/index.js

@@ -8262,6 +8262,10 @@ function createSvgIcon(path, displayName) {
   return /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(Component));
 }
 
+var Email = createSvgIcon( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
+  d: "M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2m0 4-8 5-8-5V6l8 5 8-5z"
+}), 'Email');
+
 var Facebook = createSvgIcon( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
   d: "M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2m13 2h-2.5A3.5 3.5 0 0 0 12 8.5V11h-2v3h2v7h3v-7h3v-3h-3V9a1 1 0 0 1 1-1h2V5z"
 }), 'Facebook');
@@ -8288,10 +8292,6 @@ var ThreeP = createSvgIcon( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
   d: "M20 2H4.01c-1.1 0-2 .9-2 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2m-8 4c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m4 8H8v-.57c0-.81.48-1.53 1.22-1.85.85-.37 1.79-.58 2.78-.58.99 0 1.93.21 2.78.58.74.32 1.22 1.04 1.22 1.85z"
 }), 'ThreeP');
 
-var Visibility = createSvgIcon( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
-  d: "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5M12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5m0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3"
-}), 'Visibility');
-
 var WhatsApp = createSvgIcon( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
   d: "M16.75 13.96c.25.13.41.2.46.3.06.11.04.61-.21 1.18-.2.56-1.24 1.1-1.7 1.12-.46.02-.47.36-2.96-.73-2.49-1.09-3.99-3.75-4.11-3.92-.12-.17-.96-1.38-.92-2.61.05-1.22.69-1.8.95-2.04.24-.26.51-.29.68-.26h.47c.15 0 .36-.06.55.45l.69 1.87c.06.13.1.28.01.44l-.27.41-.39.42c-.12.12-.26.25-.12.5.12.26.62 1.09 1.32 1.78.91.88 1.71 1.17 1.95 1.3.24.14.39.12.54-.04l.81-.94c.19-.25.35-.19.58-.11l1.67.88M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10c-1.97 0-3.8-.57-5.35-1.55L2 22l1.55-4.65A9.969 9.969 0 0 1 2 12 10 10 0 0 1 12 2m0 2a8 8 0 0 0-8 8c0 1.72.54 3.31 1.46 4.61L4.5 19.5l2.89-.96A7.95 7.95 0 0 0 12 20a8 8 0 0 0 8-8 8 8 0 0 0-8-8z"
 }), 'WhatsApp');
@@ -8327,14 +8327,14 @@ const ContactName = material.styled(material.Typography)({
     maxWidth: 200,
     textAlign: 'center',
 });
-const Header = ({ handleNavigateToContacts, imgUrl, name, contactId, t = (key) => key, }) => {
+const Header = ({ imgUrl, name, contactId, }) => {
     const handleOpenInNewTab = (event) => {
         event.preventDefault();
         event.stopPropagation();
         const url = `/a/contacts/contacts/${contactId}`;
         window.open(url, '_blank');
     };
-    return (jsxRuntimeExports.jsxs(HeaderContainer, { children: [jsxRuntimeExports.jsxs(ButtonsContainer, { children: [jsxRuntimeExports.jsx(material.Button, { variant: "outlined", size: "small", startIcon: jsxRuntimeExports.jsx(Visibility, {}), onClick: handleNavigateToContacts, color: "info", children: t('view') }), jsxRuntimeExports.jsx(SmallIconButton, { color: "info", size: "small", onClick: handleOpenInNewTab, children: jsxRuntimeExports.jsx(OpenInNew, { fontSize: "small" }) })] }), jsxRuntimeExports.jsx(ContactAvatar, { src: imgUrl, alt: "Contact Avatar" }), jsxRuntimeExports.jsx(ContactName, { variant: "h6", children: name })] }));
+    return (jsxRuntimeExports.jsxs(HeaderContainer, { children: [jsxRuntimeExports.jsx(ButtonsContainer, { children: jsxRuntimeExports.jsx(SmallIconButton, { color: "info", size: "small", onClick: handleOpenInNewTab, children: jsxRuntimeExports.jsx(OpenInNew, { fontSize: "small" }) }) }), jsxRuntimeExports.jsx(ContactAvatar, { src: imgUrl, alt: "Contact Avatar" }), jsxRuntimeExports.jsx(ContactName, { variant: "h6", children: name })] }));
 };
 
 const Container$1 = material.styled(material.Box)({
@@ -8378,6 +8378,7 @@ const AddressContainer = material.styled(material.Box)({
     display: 'flex',
     flexDirection: 'column',
     height: '50px',
+    maxWidth: '90%',
 });
 const NoteText = material.styled(material.Typography)({
     whiteSpace: 'nowrap',
@@ -8394,7 +8395,6 @@ const ContactMethod = ({ icon, contactList, title, showTitle = true, }) => {
                                     textOverflow: 'ellipsis',
                                     overflow: 'hidden',
                                     cursor: 'default',
-                                    maxWidth: '00%',
                                 }, children: contact.address }) }), contact.profileName && (jsxRuntimeExports.jsx(material.Typography, { variant: "body2", fontSize: 10, color: "text.disabled", sx: { marginLeft: '5px', marginTop: '10px' }, children: contact.profileName }))] }), contact.note && (jsxRuntimeExports.jsx(NoteText, { variant: "body2", fontSize: 12, color: "text.secondary", children: contact.note }))] }) }, contact.id));
     return (jsxRuntimeExports.jsxs(Container$1, { children: [showTitle && (jsxRuntimeExports.jsx(TitleBox, { children: jsxRuntimeExports.jsx(material.Typography, { variant: "subtitle1", fontWeight: "bold", gutterBottom: true, mt: 2, children: title }) })), contactList?.map(renderContactInfo)] }));
 };
@@ -14285,7 +14285,7 @@ const StyledChip = material.styled(material.Chip)(({ theme }) => ({
     marginBottom: 8,
     backgroundColor: `${theme.palette.primary.main}b3`
 }));
-const ContactInfoPopup = ({ open, anchorEl, onClose, contactData, avatarImgUrl, handleNavigateToContacts = () => { }, t = (key) => ({
+const ContactInfoPopup = ({ open, anchorEl, onClose, contactData, avatarImgUrl, t = (key) => ({
     labels: 'Etiquetas',
     phone: 'Teléfono',
     business: 'Empresa',
@@ -14299,6 +14299,12 @@ const ContactInfoPopup = ({ open, anchorEl, onClose, contactData, avatarImgUrl,
             contactList: contactData?.phones || [],
             showTitle: true,
         },
+        {
+            icon: jsxRuntimeExports.jsx(Email, { fontSize: "small" }),
+            title: t('conversations.contactInfo.email'),
+            contactList: contactData?.emails || [],
+            showTitle: true,
+        },
         {
             icon: jsxRuntimeExports.jsx(WhatsApp, { fontSize: "small" }),
             title: 'IM',
@@ -14321,7 +14327,20 @@ const ContactInfoPopup = ({ open, anchorEl, onClose, contactData, avatarImgUrl,
             showTitle: false,
         },
     ];
-    return (jsxRuntimeExports.jsx(material.Popper, { sx: { zIndex: 1300 }, open: open, anchorEl: anchorEl, placement: "bottom-start", "data-popper-child": "true", children: jsxRuntimeExports.jsx(material.ClickAwayListener, { onClickAway: onClose, children: jsxRuntimeExports.jsx(PopupContainer, { children: jsxRuntimeExports.jsxs(material.CardContent, { children: [jsxRuntimeExports.jsx(Header, { contactId: contactData?.id, imgUrl: avatarImgUrl, name: contactData?.name, t: t, handleNavigateToContacts: handleNavigateToContacts }), jsxRuntimeExports.jsx(SectionTitle, { gutterBottom: true, mt: 2, variant: "subtitle1", children: t('labels') }), jsxRuntimeExports.jsx(TagContainer, { children: contactData?.tags?.map((tag) => (jsxRuntimeExports.jsx(StyledChip, { label: tag.name, color: "primary", size: "small" }, tag.id))) }), jsxRuntimeExports.jsx(SectionTitle, { gutterBottom: true, mt: 2, variant: "subtitle1", children: t('business') }), jsxRuntimeExports.jsx(material.Typography, { variant: "body2", color: "text.secondary", children: contactData?.businessName }), contactMethods.map((method, index) => (jsxRuntimeExports.jsx(ContactMethod, { icon: method.icon, title: method.title, contactList: method.contactList, showTitle: method.showTitle }, index))), jsxRuntimeExports.jsx(Properties, { properties: contactData?.properties, title: t('properties') })] }) }) }) }));
+    React.useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                onClose();
+            }
+        };
+        if (open) {
+            window.addEventListener('keydown', handleKeyDown);
+        }
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [open, onClose]);
+    return (jsxRuntimeExports.jsx(material.Popper, { sx: { zIndex: 1300 }, open: open, anchorEl: anchorEl, placement: "bottom-start", "data-popper-child": "true", children: jsxRuntimeExports.jsx(material.ClickAwayListener, { onClickAway: onClose, children: jsxRuntimeExports.jsx(PopupContainer, { children: jsxRuntimeExports.jsxs(material.CardContent, { children: [jsxRuntimeExports.jsx(Header, { contactId: contactData?.id, imgUrl: avatarImgUrl, name: contactData?.name }), jsxRuntimeExports.jsx(SectionTitle, { gutterBottom: true, mt: 2, variant: "subtitle1", children: t('labels') }), jsxRuntimeExports.jsx(TagContainer, { children: contactData?.tags?.map((tag) => (jsxRuntimeExports.jsx(StyledChip, { label: tag.name, color: "primary", size: "small" }, tag.id))) }), jsxRuntimeExports.jsx(SectionTitle, { gutterBottom: true, mt: 2, variant: "subtitle1", children: t('business') }), jsxRuntimeExports.jsx(material.Typography, { variant: "body2", color: "text.secondary", children: contactData?.businessName }), contactMethods.map((method, index) => (jsxRuntimeExports.jsx(ContactMethod, { icon: method.icon, title: method.title, contactList: method.contactList, showTitle: method.showTitle }, index))), jsxRuntimeExports.jsx(Properties, { properties: contactData?.properties, title: t('properties') })] }) }) }) }));
 };
 
 exports.ContactInfoPopup = ContactInfoPopup;