@linagora/twake-mui 18.2.0 → 18.3.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# @linagora/twake-mui [18.3.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@18.2.0...@linagora/twake-mui@18.3.0) (2026-10-22)
+
+
+### Features
+
+* **twake-mui:** Name the close and icon action buttons of ContactPopover ([4ece4c5](https://github.com/linagora/twake-ui/commit/4ece4c5509ae5c0f0b1a09c3492d834ffba40f80))
+
 # @linagora/twake-mui [18.2.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@18.1.0...@linagora/twake-mui@18.2.0) (2026-10-22)
 
 

package/dist/components/ContactPopover/ContactPopoverCalendarAction.d.ts

@@ -1,8 +1,12 @@
 import React from 'react';
 export interface ContactPopoverCalendarActionProps {
     /** URL for calendar action (e.g., view attendee's calendar) */
-    url: string;
+    url?: string;
+    /** Callback when the action is clicked, used when no url is given */
+    onClick?: () => void;
     /** Disable the action button */
     disabled?: boolean;
+    /** Accessible name and tooltip of the action, defaults to "Plan a meeting" */
+    label?: string;
 }
-export declare const ContactPopoverCalendarAction: ({ url, disabled }: ContactPopoverCalendarActionProps) => React.ReactElement;
+export declare const ContactPopoverCalendarAction: ({ url, onClick, disabled, label }: ContactPopoverCalendarActionProps) => React.ReactElement;

package/dist/components/ContactPopover/ContactPopoverCalendarAction.js

@@ -1,12 +1,8 @@
-import { Icon } from '@linagora/twake-icons';
 import { CalendarToday } from '@linagora/twake-icons';
-import { IconButton, useTheme } from '@mui/material';
 import React from 'react';
-export const ContactPopoverCalendarAction = ({ url, disabled = false }) => {
-    const theme = useTheme();
-    return (React.createElement(IconButton, { href: url, target: "_blank", rel: "noopener noreferrer", size: "small", disabled: disabled, sx: {
-            border: `1px solid ${theme.vars.palette.divider}`,
-            color: theme.vars.palette.text.icon
-        } },
-        React.createElement(Icon, { icon: CalendarToday, size: 20 })));
+import { useI18n } from 'twake-i18n';
+import { ContactPopoverIconAction } from './ContactPopoverIconAction';
+export const ContactPopoverCalendarAction = ({ url, onClick, disabled = false, label }) => {
+    const { t } = useI18n();
+    return (React.createElement(ContactPopoverIconAction, { icon: CalendarToday, label: label ?? t('ContactPopover.calendarButton'), url: url, onClick: onClick, disabled: disabled }));
 };

package/dist/components/ContactPopover/ContactPopoverChatAction.d.ts

@@ -1,8 +1,12 @@
 import React from 'react';
 export interface ContactPopoverChatActionProps {
     /** URL for chat action (e.g., Twake Chat link) */
-    url: string;
+    url?: string;
+    /** Callback when the action is clicked, used when no url is given */
+    onClick?: () => void;
     /** Disable the action button */
     disabled?: boolean;
+    /** Accessible name and tooltip of the action, defaults to "Open a chat" */
+    label?: string;
 }
-export declare const ContactPopoverChatAction: ({ url, disabled }: ContactPopoverChatActionProps) => React.ReactElement;
+export declare const ContactPopoverChatAction: ({ url, onClick, disabled, label }: ContactPopoverChatActionProps) => React.ReactElement;

package/dist/components/ContactPopover/ContactPopoverChatAction.js

@@ -1,12 +1,8 @@
-import { Icon } from '@linagora/twake-icons';
 import { Discuss } from '@linagora/twake-icons';
-import { IconButton, useTheme } from '@mui/material';
 import React from 'react';
-export const ContactPopoverChatAction = ({ url, disabled = false }) => {
-    const theme = useTheme();
-    return (React.createElement(IconButton, { href: url, target: "_blank", rel: "noopener noreferrer", size: "small", disabled: disabled, sx: {
-            border: `1px solid ${theme.vars.palette.divider}`,
-            color: theme.vars.palette.text.icon
-        } },
-        React.createElement(Icon, { icon: Discuss, size: 20 })));
+import { useI18n } from 'twake-i18n';
+import { ContactPopoverIconAction } from './ContactPopoverIconAction';
+export const ContactPopoverChatAction = ({ url, onClick, disabled = false, label }) => {
+    const { t } = useI18n();
+    return (React.createElement(ContactPopoverIconAction, { icon: Discuss, label: label ?? t('ContactPopover.chatButton'), url: url, onClick: onClick, disabled: disabled }));
 };

package/dist/components/ContactPopover/ContactPopoverEmailAction.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 export interface ContactPopoverEmailActionProps {
     /** URL for email action */
-    url: string;
+    url?: string;
+    /** Callback when the action is clicked, used when no url is given */
+    onClick?: () => void;
     /** Disable the action button */
     disabled?: boolean;
 }
-export declare const ContactPopoverEmailAction: ({ url, disabled }: ContactPopoverEmailActionProps) => React.ReactElement;
+export declare const ContactPopoverEmailAction: ({ url, onClick, disabled }: ContactPopoverEmailActionProps) => React.ReactElement;

package/dist/components/ContactPopover/ContactPopoverEmailAction.js

@@ -1,10 +1,13 @@
 import { Button, useTheme } from '@mui/material';
 import React from 'react';
 import { useI18n } from 'twake-i18n';
-export const ContactPopoverEmailAction = ({ url, disabled = false }) => {
+export const ContactPopoverEmailAction = ({ url, onClick, disabled = false }) => {
     const theme = useTheme();
     const { t } = useI18n();
-    return (React.createElement(Button, { href: url, target: "_blank", rel: "noopener noreferrer", variant: "outlined", size: "small", disabled: disabled, sx: {
+    const linkProps = url
+        ? { href: url, target: '_blank', rel: 'noopener noreferrer' }
+        : { onClick };
+    return (React.createElement(Button, { ...linkProps, variant: "outlined", size: "small", disabled: disabled, sx: {
             justifyContent: 'center',
             color: theme.vars.palette.text.primary,
             borderColor: theme.vars.palette.divider

package/dist/components/ContactPopover/ContactPopoverIconAction.d.ts

@@ -0,0 +1,15 @@
+import { Icon } from '@linagora/twake-icons';
+import React from 'react';
+export interface ContactPopoverIconActionProps {
+    /** Icon shown in the button */
+    icon: React.ComponentProps<typeof Icon>['icon'];
+    /** Accessible name of the button, also shown as its tooltip */
+    label: string;
+    /** URL opened in a new tab when the button is clicked */
+    url?: string;
+    /** Callback when the button is clicked, used when no url is given */
+    onClick?: () => void;
+    /** Disable the action button */
+    disabled?: boolean;
+}
+export declare const ContactPopoverIconAction: ({ icon, label, url, onClick, disabled }: ContactPopoverIconActionProps) => React.ReactElement;

package/dist/components/ContactPopover/ContactPopoverIconAction.js

@@ -0,0 +1,19 @@
+import { Icon } from '@linagora/twake-icons';
+import { Box, IconButton, Tooltip, useTheme } from '@mui/material';
+import React from 'react';
+export const ContactPopoverIconAction = ({ icon, label, url, onClick, disabled = false }) => {
+    const theme = useTheme();
+    const linkProps = url
+        ? { href: url, target: '_blank', rel: 'noopener noreferrer' }
+        : { onClick };
+    return (
+    // the span lets the tooltip show on a disabled button, and takes its
+    // aria-label: the button is named too
+    React.createElement(Tooltip, { title: label },
+        React.createElement(Box, { component: "span", sx: { display: 'inline-flex' } },
+            React.createElement(IconButton, { ...linkProps, "aria-label": label, size: "small", disabled: disabled, sx: {
+                    border: `1px solid ${theme.vars.palette.divider}`,
+                    color: theme.vars.palette.text.icon
+                } },
+                React.createElement(Icon, { icon: icon, size: 20 })))));
+};

package/dist/components/ContactPopover/ContactPopoverVideoAction.d.ts

@@ -1,8 +1,12 @@
 import React from 'react';
 export interface ContactPopoverVideoActionProps {
     /** URL for video call action (e.g., Twake Meet link) */
-    url: string;
+    url?: string;
+    /** Callback when the action is clicked, used when no url is given */
+    onClick?: () => void;
     /** Disable the action button */
     disabled?: boolean;
+    /** Accessible name and tooltip of the action, defaults to "Start a video call" */
+    label?: string;
 }
-export declare const ContactPopoverVideoAction: ({ url, disabled }: ContactPopoverVideoActionProps) => React.ReactElement;
+export declare const ContactPopoverVideoAction: ({ url, onClick, disabled, label }: ContactPopoverVideoActionProps) => React.ReactElement;

package/dist/components/ContactPopover/ContactPopoverVideoAction.js

@@ -1,12 +1,8 @@
-import { Icon } from '@linagora/twake-icons';
 import { Camera } from '@linagora/twake-icons';
-import { IconButton, useTheme } from '@mui/material';
 import React from 'react';
-export const ContactPopoverVideoAction = ({ url, disabled = false }) => {
-    const theme = useTheme();
-    return (React.createElement(IconButton, { href: url, target: "_blank", rel: "noopener noreferrer", size: "small", disabled: disabled, sx: {
-            border: `1px solid ${theme.vars.palette.divider}`,
-            color: theme.vars.palette.text.icon
-        } },
-        React.createElement(Icon, { icon: Camera, size: 20 })));
+import { useI18n } from 'twake-i18n';
+import { ContactPopoverIconAction } from './ContactPopoverIconAction';
+export const ContactPopoverVideoAction = ({ url, onClick, disabled = false, label }) => {
+    const { t } = useI18n();
+    return (React.createElement(ContactPopoverIconAction, { icon: Camera, label: label ?? t('ContactPopover.videoButton'), url: url, onClick: onClick, disabled: disabled }));
 };

package/dist/components/ContactPopover/index.d.ts

@@ -17,6 +17,8 @@ export interface ContactPopoverProps {
     onClose?: () => void;
     /** Disable the popover (render children only) */
     disabled?: boolean;
+    /** Open the popover when the trigger is hovered, not only when clicked */
+    openOnHover?: boolean;
 }
 interface ContactPopoverComponent extends React.FC<ContactPopoverProps> {
     Actions: typeof ContactPopoverActions;

package/dist/components/ContactPopover/index.js

@@ -2,7 +2,7 @@ import { Icon } from '@linagora/twake-icons';
 import { Cross } from '@linagora/twake-icons';
 import { Box, IconButton, Popover, styled } from '@mui/material';
 import React, { useEffect, useRef, useState } from 'react';
-import { useExtendI18n } from 'twake-i18n';
+import { useExtendI18n, useI18n } from 'twake-i18n';
 import { AttendeeInfo } from './AttendeeInfo';
 import { ContactPopoverActions } from './ContactPopoverActions';
 import { ContactPopoverCalendarAction } from './ContactPopoverCalendarAction';
@@ -30,8 +30,9 @@ const CloseButton = styled(IconButton)(() => ({
     top: 8,
     right: 8
 }));
-const ContactPopover = ({ name, email, children, onEmailCopy, onClose, disabled = false }) => {
+const ContactPopover = ({ name, email, children, onEmailCopy, onClose, disabled = false, openOnHover = true }) => {
     useExtendI18n(locales);
+    const { t } = useI18n();
     const [anchorEl, setAnchorEl] = useState(null);
     const openTimeoutRef = useRef(null);
     const closeTimeoutRef = useRef(null);
@@ -103,7 +104,7 @@ const ContactPopover = ({ name, email, children, onEmailCopy, onClose, disabled
         return React.createElement(React.Fragment, null, triggerChildren);
     }
     return (React.createElement("div", null,
-        React.createElement("div", { onClick: handleClick, onMouseEnter: handleTriggerMouseEnter, onMouseLeave: handleTriggerMouseLeave, onKeyDown: event => {
+        React.createElement("div", { onClick: handleClick, onMouseEnter: openOnHover ? handleTriggerMouseEnter : undefined, onMouseLeave: openOnHover ? handleTriggerMouseLeave : undefined, onKeyDown: event => {
                 if (event.key === 'Enter' || event.key === ' ') {
                     handleClick(event);
                 }
@@ -119,12 +120,12 @@ const ContactPopover = ({ name, email, children, onEmailCopy, onClose, disabled
                         borderRadius: 2,
                         maxWidth: 400
                     },
-                    onMouseEnter: handlePopoverMouseEnter,
-                    onMouseLeave: handleMouseLeave
+                    onMouseEnter: openOnHover ? handlePopoverMouseEnter : undefined,
+                    onMouseLeave: openOnHover ? handleMouseLeave : undefined
                 }
             } },
             React.createElement(StyledPopoverContent, { onClick: event => event.stopPropagation() },
-                React.createElement(CloseButton, { size: "small", onClick: handleClose },
+                React.createElement(CloseButton, { size: "small", onClick: handleClose, "aria-label": t('ContactPopover.closeButton') },
                     React.createElement(Icon, { icon: Cross, size: 16 })),
                 React.createElement(AttendeeInfo, { name: name, email: email, onEmailCopy: onEmailCopy }),
                 actionsChild))));

package/dist/components/ContactPopover/locales/de.json

@@ -2,6 +2,10 @@
     "ContactPopover": {
         "emailButton": "E-Mail senden",
         "copyTooltip": "E-Mail kopieren",
-        "copiedTooltip": "Kopiert!"
+        "copiedTooltip": "Kopiert!",
+        "closeButton": "Schließen",
+        "chatButton": "Chat öffnen",
+        "videoButton": "Videoanruf starten",
+        "calendarButton": "Besprechung planen"
     }
 }

package/dist/components/ContactPopover/locales/en.json

@@ -2,6 +2,10 @@
     "ContactPopover": {
         "emailButton": "Send an email",
         "copyTooltip": "Copy email",
-        "copiedTooltip": "Copied!"
+        "copiedTooltip": "Copied!",
+        "closeButton": "Close",
+        "chatButton": "Open a chat",
+        "videoButton": "Start a video call",
+        "calendarButton": "Plan a meeting"
     }
 }

package/dist/components/ContactPopover/locales/es.json

@@ -2,6 +2,10 @@
     "ContactPopover": {
         "emailButton": "Enviar un correo",
         "copyTooltip": "Copiar correo",
-        "copiedTooltip": "¡Copiado!"
+        "copiedTooltip": "¡Copiado!",
+        "closeButton": "Cerrar",
+        "chatButton": "Abrir un chat",
+        "videoButton": "Iniciar una videollamada",
+        "calendarButton": "Planificar una reunión"
     }
 }

package/dist/components/ContactPopover/locales/fr.json

@@ -2,6 +2,10 @@
     "ContactPopover": {
         "emailButton": "Envoyer un email",
         "copyTooltip": "Copier l'email",
-        "copiedTooltip": "Copié !"
+        "copiedTooltip": "Copié !",
+        "closeButton": "Fermer",
+        "chatButton": "Ouvrir une discussion",
+        "videoButton": "Lancer un appel vidéo",
+        "calendarButton": "Planifier une réunion"
     }
 }

package/dist/components/ContactPopover/locales/it.json

@@ -2,6 +2,10 @@
     "ContactPopover": {
         "emailButton": "Invia un'email",
         "copyTooltip": "Copia email",
-        "copiedTooltip": "Copiato!"
+        "copiedTooltip": "Copiato!",
+        "closeButton": "Chiudi",
+        "chatButton": "Apri una chat",
+        "videoButton": "Avvia una videochiamata",
+        "calendarButton": "Pianifica una riunione"
     }
 }

package/dist/components/ContactPopover/locales/ru.json

@@ -2,6 +2,10 @@
     "ContactPopover": {
         "emailButton": "Отправить email",
         "copyTooltip": "Копировать email",
-        "copiedTooltip": "Скопировано!"
+        "copiedTooltip": "Скопировано!",
+        "closeButton": "Закрыть",
+        "chatButton": "Открыть чат",
+        "videoButton": "Начать видеозвонок",
+        "calendarButton": "Запланировать встречу"
     }
 }

package/dist/components/ContactPopover/locales/vi.json

@@ -2,6 +2,10 @@
     "ContactPopover": {
         "emailButton": "Gửi email",
         "copyTooltip": "Sao chép email",
-        "copiedTooltip": "Đã sao chép!"
+        "copiedTooltip": "Đã sao chép!",
+        "closeButton": "Đóng",
+        "chatButton": "Mở trò chuyện",
+        "videoButton": "Bắt đầu cuộc gọi video",
+        "calendarButton": "Lên lịch cuộc họp"
     }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linagora/twake-mui",
   "type": "module",
-  "version": "18.2.0",
+  "version": "18.3.0",
   "description": "MUI v9 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",