@trii/components 2.0.14 → 2.0.16

package/dist/cjs/types/components/ContactInfoPopup/components/Header/Header.d.ts

@@ -1,8 +1,11 @@
 type HeaderProps = {
-    imgUrl: string | undefined;
-    name: string | undefined;
-    contactId: string | undefined;
+    imgUrl?: string;
+    name?: string;
+    contactId?: string;
     navigate: (path: string) => void;
+    isLoading?: boolean;
+    onError?: (error: Error) => void;
+    onClose: () => void;
 };
-declare const Header: ({ imgUrl, name, contactId, navigate }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const Header: ({ imgUrl, name, contactId, navigate, isLoading, onError, onClose, }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default Header;

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import React__default, { useEffect } from 'react';
-import { Button, styled as styled$3, Box, IconButton, Avatar, Typography, Tooltip, Chip, Popper, ClickAwayListener, CardContent } from '@mui/material';
+import React__default, { useCallback, useEffect } from 'react';
+import { Button, styled as styled$3, Box, IconButton, Avatar, Typography, CircularProgress, Tooltip, Chip, Popper, ClickAwayListener, CardContent } from '@mui/material';
 import { withEmotionCache, ThemeContext, CacheProvider, Global, css, keyframes } from '@emotion/react';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -7051,7 +7051,7 @@ var require$$1 = /*@__PURE__*/getAugmentedNamespace(formatMuiErrorMessage);
 
 var require$$2 = /*@__PURE__*/getAugmentedNamespace(clamp);
 
-var _interopRequireDefault$2 = interopRequireDefaultExports;
+var _interopRequireDefault$3 = interopRequireDefaultExports;
 Object.defineProperty(colorManipulator, "__esModule", {
   value: true
 });
@@ -7073,8 +7073,8 @@ colorManipulator.private_safeEmphasize = private_safeEmphasize;
 colorManipulator.private_safeLighten = private_safeLighten;
 colorManipulator.recomposeColor = recomposeColor;
 colorManipulator.rgbToHex = rgbToHex;
-var _formatMuiErrorMessage2 = _interopRequireDefault$2(require$$1);
-var _clamp = _interopRequireDefault$2(require$$2);
+var _formatMuiErrorMessage2 = _interopRequireDefault$3(require$$1);
+var _clamp = _interopRequireDefault$3(require$$2);
 /* eslint-disable @typescript-eslint/naming-convention */
 
 /**
@@ -8196,21 +8196,21 @@ var require$$7 = /*@__PURE__*/getAugmentedNamespace(createTheme$1);
 
 var require$$8 = /*@__PURE__*/getAugmentedNamespace(styleFunctionSx);
 
-var _interopRequireDefault$1 = interopRequireDefaultExports;
+var _interopRequireDefault$2 = interopRequireDefaultExports;
 Object.defineProperty(createStyled$1, "__esModule", {
   value: true
 });
 var _default = createStyled$1.default = createStyled;
 createStyled$1.shouldForwardProp = shouldForwardProp;
 createStyled$1.systemDefaultTheme = void 0;
-var _extends2 = _interopRequireDefault$1(require_extends());
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault$1(requireObjectWithoutPropertiesLoose());
+var _extends2 = _interopRequireDefault$2(require_extends());
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault$2(requireObjectWithoutPropertiesLoose());
 var _styledEngine = _interopRequireWildcard(require$$3);
 var _deepmerge = require$$4;
-var _capitalize = _interopRequireDefault$1(require$$5);
-var _getDisplayName = _interopRequireDefault$1(require$$6);
-var _createTheme = _interopRequireDefault$1(require$$7);
-var _styleFunctionSx = _interopRequireDefault$1(require$$8);
+var _capitalize = _interopRequireDefault$2(require$$5);
+var _getDisplayName = _interopRequireDefault$2(require$$6);
+var _createTheme = _interopRequireDefault$2(require$$7);
+var _styleFunctionSx = _interopRequireDefault$2(require$$8);
 const _excluded$1 = ["ownerState"],
   _excluded2 = ["variants"],
   _excluded3 = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
@@ -8709,10 +8709,6 @@ var Instagram = createSvgIcon$1( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
   d: "M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6m9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8 1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3z"
 }), 'Instagram');
 
-var OpenInNew = createSvgIcon$1( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
-  d: "M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3z"
-}), 'OpenInNew');
-
 var PhoneEnabled = createSvgIcon$1( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
   d: "m17.38 10.79-2.2-2.2c-.28-.28-.36-.67-.25-1.02.37-1.12.57-2.32.57-3.57 0-.55.45-1 1-1H20c.55 0 1 .45 1 1 0 9.39-7.61 17-17 17-.55 0-1-.45-1-1v-3.49c0-.55.45-1 1-1 1.24 0 2.45-.2 3.57-.57.35-.12.75-.03 1.02.24l2.2 2.2c2.83-1.45 5.15-3.76 6.59-6.59"
 }), 'PhoneEnabled');
@@ -8725,7 +8721,7 @@ var WhatsApp = createSvgIcon$1( /*#__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');
 
-var Message = {};
+var ArrowForward = {};
 
 var createSvgIcon = {};
 
@@ -8753,6 +8749,19 @@ function requireCreateSvgIcon () {
 	return createSvgIcon;
 }
 
+var _interopRequireDefault$1 = interopRequireDefaultExports;
+Object.defineProperty(ArrowForward, "__esModule", {
+  value: true
+});
+var default_1$1 = ArrowForward.default = void 0;
+var _createSvgIcon$1 = _interopRequireDefault$1(requireCreateSvgIcon());
+var _jsxRuntime$1 = jsxRuntimeExports;
+default_1$1 = ArrowForward.default = (0, _createSvgIcon$1.default)( /*#__PURE__*/(0, _jsxRuntime$1.jsx)("path", {
+  d: "m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
+}), 'ArrowForward');
+
+var Message = {};
+
 var _interopRequireDefault = interopRequireDefaultExports;
 Object.defineProperty(Message, "__esModule", {
   value: true
@@ -8783,6 +8792,7 @@ const HeaderContainer = styled$3(Box)({
     flexDirection: 'column',
     alignItems: 'center',
     marginBottom: '16px',
+    position: 'relative',
 });
 const ContactAvatar = styled$3(Avatar)({
     width: 60,
@@ -8796,21 +8806,57 @@ const ContactName = styled$3(Typography)({
     maxWidth: 200,
     textAlign: 'center',
 });
-const Header = ({ imgUrl, name, contactId, navigate }) => {
-    const handleOpenInNewTab = (event) => {
-        event.preventDefault();
-        event.stopPropagation();
-        const url = `/a/contacts/contacts/${contactId}`;
-        window.open(url, '_blank');
-    };
-    const handleNavigateToConversations = (event) => {
-        event.preventDefault();
-        event.stopPropagation();
-        const url = `/a/conversations/conversations`;
-        // Navigate in the same tab
-        navigate(url);
-    };
-    return (jsxRuntimeExports.jsxs(HeaderContainer, { children: [jsxRuntimeExports.jsxs(ButtonsContainer, { children: [jsxRuntimeExports.jsx(SmallIconButton, { color: "info", size: "small", onClick: handleOpenInNewTab, children: jsxRuntimeExports.jsx(OpenInNew, { fontSize: "small" }) }), jsxRuntimeExports.jsx(SmallIconButton, { color: "info", size: "small", onClick: handleNavigateToConversations, children: jsxRuntimeExports.jsx(default_1, { fontSize: "small" }) })] }), jsxRuntimeExports.jsx(ContactAvatar, { src: imgUrl, alt: "Contact Avatar" }), jsxRuntimeExports.jsx(ContactName, { variant: "h6", children: name })] }));
+const LoadingContainer = styled$3(Box)({
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 60,
+    height: 60,
+    marginBottom: 8,
+});
+const Header = ({ imgUrl, name, contactId, navigate, isLoading = false, onError, onClose, }) => {
+    const handleNavigation = useCallback((url) => (event) => {
+        try {
+            event.preventDefault();
+            event.stopPropagation();
+            if (!url) {
+                throw new Error('Navigation URL is required');
+            }
+            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);
+            }
+        }
+        catch (error) {
+            onError?.(error instanceof Error ? error : new Error('Navigation failed'));
+        }
+    }, [navigate, onError]);
+    const handleNavigateToContacts = handleNavigation(`/a/contacts/contacts/${contactId}`);
+    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) => {
+                            handleNavigateToContacts(e);
+                            onClose();
+                        }, onMouseDown: (e) => {
+                            if (e.button === 1) {
+                                // Middle mouse button
+                                handleNavigateToContacts(e);
+                                onClose();
+                            }
+                        }, disabled: !contactId, "aria-label": "View contact details", children: jsxRuntimeExports.jsx(default_1$1, { fontSize: "small" }) }), jsxRuntimeExports.jsx(SmallIconButton, { color: "info", size: "small", onClick: (e) => {
+                            handleNavigateToConversations(e);
+                            onClose();
+                        }, onMouseDown: (e) => {
+                            if (e.button === 1) {
+                                // Middle mouse button
+                                handleNavigateToConversations(e);
+                                onClose();
+                            }
+                        }, "aria-label": "Go to conversations", children: jsxRuntimeExports.jsx(default_1, { fontSize: "small" }) })] }), isLoading ? (jsxRuntimeExports.jsx(LoadingContainer, { children: jsxRuntimeExports.jsx(CircularProgress, { size: 24 }) })) : (jsxRuntimeExports.jsx(ContactAvatar, { src: imgUrl, alt: avatarAlt, onError: () => onError?.(new Error('Failed to load avatar')) })), jsxRuntimeExports.jsx(ContactName, { variant: "h6", title: displayName, children: displayName })] }));
 };
 
 const Container$1 = styled$3(Box)({
@@ -14739,7 +14785,9 @@ const LabelsSection = ({ contactData, title }) => {
         return null;
     if (!contactData.tags?.length)
         return null;
-    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(SectionTitle$2, { gutterBottom: true, mt: 2, variant: "subtitle1", children: title }), jsxRuntimeExports.jsx(TagContainer, { children: contactData?.tags?.map((tag) => (jsxRuntimeExports.jsx(StyledChip, { label: tag.name, color: "primary", size: "small" }, tag.id))) })] }));
+    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(SectionTitle$2, { gutterBottom: true, mt: 2, variant: "subtitle1", children: title }), jsxRuntimeExports.jsx(TagContainer, { children: contactData?.tags
+                    ?.filter((tag) => tag.name?.trim())
+                    .map((tag) => (jsxRuntimeExports.jsx(StyledChip, { label: tag.name, color: "primary", size: "small" }, tag.id))) })] }));
 };
 
 /**
@@ -14897,7 +14945,7 @@ const ContactInfoPopup = ({ open, anchorEl, onClose, contactData, avatarImgUrl,
             window.removeEventListener('keydown', handleKeyDown);
         };
     }, [open, onClose]);
-    return (jsxRuntimeExports.jsx(Popper, { sx: { zIndex: 1300 }, open: open, anchorEl: anchorEl, placement: "bottom-start", "data-popper-child": "true", children: jsxRuntimeExports.jsx(ClickAwayListener, { onClickAway: onClose, children: jsxRuntimeExports.jsx(PopupContainer, { children: jsxRuntimeExports.jsxs(CardContent, { children: [jsxRuntimeExports.jsx(Header, { navigate: navigate, contactId: contactData?.id, imgUrl: avatarImgUrl, name: contactData?.name }), 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(Popper, { sx: { zIndex: 1300 }, open: open, anchorEl: anchorEl, placement: "bottom-start", "data-popper-child": "true", children: jsxRuntimeExports.jsx(ClickAwayListener, { onClickAway: onClose, children: jsxRuntimeExports.jsx(PopupContainer, { children: jsxRuntimeExports.jsxs(CardContent, { children: [jsxRuntimeExports.jsx(Header, { navigate: navigate, contactId: contactData?.id, imgUrl: avatarImgUrl, name: contactData?.name, onClose: onClose }), 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') })] }) }) }) }));
 };
 
 export { ContactInfoPopup, TestBox };