@linagora/twake-mui 18.1.0 → 18.3.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# @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)
+
+
+### Features
+
+* **twake-mui:** Migrate IntentHeader from cozy-ui ([fd35f2c](https://github.com/linagora/twake-ui/commit/fd35f2c0715d9ec2fac81940b584074aefdf7532))
+
 # @linagora/twake-mui [18.1.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@18.0.0...@linagora/twake-mui@18.1.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/dist/components/IntentHeader/IntentHeader.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import IntentHeader from './index';
+declare const meta: Meta<typeof IntentHeader>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Screenshot: Story;

package/dist/components/IntentHeader/IntentHeader.stories.js

@@ -0,0 +1,37 @@
+import { Stack } from '@mui/material';
+import React from 'react';
+import IntentHeader from './index';
+const appIcon = `data:image/svg+xml,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="10" fill="#297EF2"/></svg>')}`;
+const meta = {
+    title: 'IntentHeader',
+    component: IntentHeader,
+    tags: ['autodocs'],
+    argTypes: {
+        appName: { control: 'text' },
+        appEditor: { control: 'text' },
+        appIcon: { control: 'text' }
+    }
+};
+export default meta;
+export const Default = {
+    args: {
+        appName: 'Drive',
+        appEditor: 'Twake',
+        appIcon
+    }
+};
+const Row = ({ title, children }) => (React.createElement("section", null,
+    React.createElement("h3", null, title),
+    children));
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 2 },
+        React.createElement(Row, { title: "Name only" },
+            React.createElement(IntentHeader, { appName: "Drive" })),
+        React.createElement(Row, { title: "With editor" },
+            React.createElement(IntentHeader, { appName: "Drive", appEditor: "Twake" })),
+        React.createElement(Row, { title: "With icon" },
+            React.createElement(IntentHeader, { appName: "Drive", appIcon: appIcon })),
+        React.createElement(Row, { title: "With editor and icon" },
+            React.createElement(IntentHeader, { appName: "Drive", appEditor: "Twake", appIcon: appIcon }))))
+};

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

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface IntentHeaderProps {
+    appName: string;
+    /** Shown in a regular weight before the app name */
+    appEditor?: string;
+    /** URL of the app icon */
+    appIcon?: string;
+    className?: string;
+}
+declare const IntentHeader: React.FC<IntentHeaderProps>;
+export default IntentHeader;

package/dist/components/IntentHeader/index.js

@@ -0,0 +1,23 @@
+import { Box, Typography } from '@mui/material';
+import React from 'react';
+const IntentHeader = ({ appName, appEditor, appIcon, className }) => (React.createElement(Box, { className: className, sx: {
+        display: 'flex',
+        alignItems: 'center',
+        flexShrink: 0,
+        height: 48,
+        px: 2,
+        py: 1,
+        bgcolor: 'background.contrast'
+    } },
+    React.createElement(Typography, { component: "h1", color: "textPrimary", sx: theme => ({
+            display: 'flex',
+            alignItems: 'center',
+            fontSize: theme.typography.pxToRem(20),
+            fontWeight: 'fontWeightBold'
+        }) },
+        appIcon && (React.createElement(Box, { component: "img", src: appIcon, alt: "", sx: { height: 18, mr: 1 } })),
+        appEditor && (React.createElement(Box, { component: "span", sx: { fontWeight: 'fontWeightRegular' } },
+            appEditor,
+            "\u00A0")),
+        appName)));
+export default IntentHeader;

package/dist/index.d.ts

@@ -61,6 +61,7 @@ export { ExtendableFab } from './components/ExtendableFab';
 export { default as Filename } from './components/Filename';
 export { default as FilePath } from './components/FilePath';
 export { default as FilePathLink } from './components/FilePathLink';
+export { default as IntentHeader } from './components/IntentHeader';
 export { default as ListItem } from './components/ListItem';
 export { default as ListItemButton } from './components/ListItemButton';
 export { default as ListItemText } from './components/ListItemText';
@@ -176,6 +177,7 @@ export type { ExtendableFabProps, ScrollOptions } from './components/ExtendableF
 export type { FilenameProps } from './components/Filename';
 export type { FilePathProps } from './components/FilePath';
 export type { FilePathLinkProps } from './components/FilePathLink';
+export type { IntentHeaderProps } from './components/IntentHeader';
 export type { ListItemProps, ListItemGutters, ListItemSize } from './components/ListItem';
 export type { ListItemButtonProps } from './components/ListItemButton';
 export type { ListItemTextProps } from './components/ListItemText';

package/dist/index.js

@@ -64,6 +64,7 @@ export { ExtendableFab } from './components/ExtendableFab';
 export { default as Filename } from './components/Filename';
 export { default as FilePath } from './components/FilePath';
 export { default as FilePathLink } from './components/FilePathLink';
+export { default as IntentHeader } from './components/IntentHeader';
 export { default as ListItem } from './components/ListItem';
 export { default as ListItemButton } from './components/ListItemButton';
 export { default as ListItemText } from './components/ListItemText';

package/package.json

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