@trii/components 2.0.23 → 2.0.24

package/dist/cjs/index.js

@@ -8834,7 +8834,7 @@ const LoadingContainer = material.styled(material.Box)({
     height: 60,
     marginBottom: 8,
 });
-const Header = ({ imgUrl, name, contactId, navigate, isLoading = false, onError, onClose, isBusiness }) => {
+const Header = ({ imgUrl, name, contactId, navigate, isLoading = false, onError, onClose, isBusiness = false, }) => {
     const handleNavigation = React.useCallback((url) => (event) => {
         try {
             event.preventDefault();
@@ -8857,9 +8857,7 @@ const Header = ({ imgUrl, name, contactId, navigate, isLoading = false, onError,
     const handleNavigateToContacts = handleNavigation(isBusiness
         ? `/a/contacts/business/${contactId}`
         : `/a/contacts/contacts/${contactId}`);
-    const handleNavigateToConversations = handleNavigation(contactId
-        ? `/a/conversations/conversations?${isBusiness ? 'businessId' : 'contactId'}=${contactId}`
-        : '/a/conversations/conversations');
+    const handleNavigateToConversations = handleNavigation('/a/conversations/conversations');
     const displayName = name || 'Unknown Contact';
     const avatarAlt = `Avatar for ${displayName}`;
     return (jsxRuntimeExports.jsxs(HeaderContainer, { children: [jsxRuntimeExports.jsxs(ButtonsContainer, { children: [jsxRuntimeExports.jsx(SmallIconButton, { color: "info", size: "small", onClick: (e) => {
@@ -14820,6 +14818,10 @@ const LabelsSection = ({ contactData, title }) => {
  * @returns True if the object is an IContact
  */
 function isContact(obj) {
+    // Si está marcado explícitamente como negocio, no es un contacto regular
+    if (obj?.isBusiness === true) {
+        return false;
+    }
     return (obj !== null &&
         typeof obj === 'object' &&
         typeof obj.id === 'string' &&
@@ -14852,11 +14854,10 @@ const BusinessSection = ({ contactData, title }) => {
  * @returns True if the object is an IBusiness
  */
 function isBusiness(obj) {
-    // Si el objeto tiene explícitamente la propiedad isBusiness como true, lo consideramos un negocio
     if (obj?.isBusiness === true) {
+        // Si se ha marcado explícitamente como negocio con la propiedad isBusiness
         return true;
     }
-    // De lo contrario, realizamos las comprobaciones tradicionales
     return (obj !== null &&
         typeof obj === 'object' &&
         typeof obj.id === 'string' &&
@@ -14871,9 +14872,28 @@ function isBusiness(obj) {
         !('lastName' in obj));
 }
 
-// Components
-const MemberItem = ({ name }) => {
-    return (jsxRuntimeExports.jsx(material.Typography, { variant: "body2", color: "text.secondary", children: name }));
+const MemberItem = ({ name, memberId, navigate }) => {
+    const url = `/a/contacts/contacts/${memberId}`;
+    const handleNavigation = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const isNewTab = event.ctrlKey || event.metaKey || event.button === 1; // Ctrl+Click, Cmd+Click, Middle Mouse
+        if (isNewTab) {
+            window.open(url, '_blank', 'noopener,noreferrer');
+        }
+        else {
+            navigate(url);
+        }
+    };
+    return (jsxRuntimeExports.jsx(material.Typography, { variant: "body2", color: "text.secondary", role: "link", tabIndex: 0, sx: { cursor: 'pointer', '&:hover': { textDecoration: 'underline' } }, onClick: handleNavigation, onMouseDown: (e) => {
+            if (e.button === 1) {
+                handleNavigation(e);
+            }
+        }, onKeyDown: (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                handleNavigation(e);
+            }
+        }, children: name }));
 };
 
 const SectionTitle = material.styled(material.Typography)({
@@ -14882,10 +14902,10 @@ const SectionTitle = material.styled(material.Typography)({
     marginTop: '16px',
     borderBottom: `1px solid lightgray`,
 });
-const MembersSection = ({ contactData, title }) => {
+const MembersSection = ({ contactData, title, navigate }) => {
     if (!contactData || !isBusiness(contactData) || !contactData.members?.length)
         return null;
-    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(SectionTitle, { gutterBottom: true, mt: 2, variant: "subtitle1", children: title }), jsxRuntimeExports.jsx(material.Typography, { variant: "body2", color: "text.secondary", children: contactData?.members.map((member) => (jsxRuntimeExports.jsx(MemberItem, { name: member.name }, member.id))) })] }));
+    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(SectionTitle, { gutterBottom: true, mt: 2, variant: "subtitle1", children: title }), contactData?.members.map((member) => (jsxRuntimeExports.jsx(MemberItem, { memberId: String(member.id), name: member.name, navigate: navigate }, member.id)))] }));
 };
 
 const PopupContainer = material.styled(material.Box)(({ theme }) => ({
@@ -14974,7 +14994,7 @@ const ContactInfoPopup = ({ open, anchorEl, onClose, contactData, avatarImgUrl,
             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, { navigate: navigate, contactId: contactData?.id, imgUrl: avatarImgUrl, name: contactData?.name, onClose: onClose, isBusiness: dataIsBusiness }), jsxRuntimeExports.jsx(LabelsSection, { contactData: contactData, title: t('labels') }), dataIsContact && (jsxRuntimeExports.jsx(BusinessSection, { contactData: contactData, title: t('business') })), dataIsBusiness && (jsxRuntimeExports.jsx(MembersSection, { contactData: contactData, title: t('businessMembers') })), 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') })] }) }) }) }));
+    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, { navigate: navigate, contactId: contactData?.id, imgUrl: avatarImgUrl, name: contactData?.name, onClose: onClose, isBusiness: dataIsBusiness }), jsxRuntimeExports.jsx(LabelsSection, { contactData: contactData, title: t('labels') }), dataIsContact && (jsxRuntimeExports.jsx(BusinessSection, { contactData: contactData, title: t('business') })), dataIsBusiness && (jsxRuntimeExports.jsx(MembersSection, { contactData: contactData, title: t('businessMembers'), navigate: navigate })), 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;