@linagora/twake-mui 18.2.0 → 18.4.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# @linagora/twake-mui [18.4.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@18.3.0...@linagora/twake-mui@18.4.0) (2026-10-22)
+
+
+### Features
+
+* **twake-mui:** Add getPlainTextFromMarkdown helper ([a47e189](https://github.com/linagora/twake-ui/commit/a47e1897ecdd14e8d2e8b7c6663815272c00aad4)), closes [cozy/cozy-ui#2965](https://github.com/cozy/cozy-ui/issues/2965)
+
+# @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/dist/components/Markdown/Markdown.stories.d.ts

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Screenshot: Story;
+export declare const PlainText: Story;

package/dist/components/Markdown/Markdown.stories.js

@@ -1,3 +1,6 @@
+import { Typography } from '@mui/material';
+import React from 'react';
+import { getPlainTextFromMarkdown } from './helpers';
 import Markdown from './index';
 const content = `
 # Demo
@@ -76,3 +79,9 @@ export const Screenshot = {
     tags: ['argos'],
     args: { content }
 };
+export const PlainText = {
+    args: {
+        content: '# Demo\n\nSome **bold** text, a [link](https://twake.app) and a list:\n\n- first\n- second'
+    },
+    render: ({ content }) => (React.createElement(Typography, { noWrap: true }, getPlainTextFromMarkdown(content)))
+};

package/dist/components/Markdown/helpers.d.ts

@@ -0,0 +1,7 @@
+import remarkGfm from 'remark-gfm';
+export declare const remarkPlugins: (typeof remarkGfm)[];
+/**
+ * Gives the words of a Markdown content on one line, without its syntax,
+ * as the Markdown component shows them: for a preview
+ */
+export declare const getPlainTextFromMarkdown: (content: string) => string;

package/dist/components/Markdown/helpers.js

@@ -0,0 +1,33 @@
+import remarkGfm from 'remark-gfm';
+import remarkParse from 'remark-parse';
+import { unified } from 'unified';
+export const remarkPlugins = [remarkGfm];
+const markdown = unified().use(remarkParse).use(remarkPlugins);
+// Nodes whose children are blocks or cells: a space keeps their words apart
+const BLOCKS = [
+    'root',
+    'blockquote',
+    'footnoteDefinition',
+    'list',
+    'listItem',
+    'table',
+    'tableRow'
+];
+const getWords = (node) => {
+    if (node.type === 'image' || node.type === 'imageReference')
+        return node.alt ?? '';
+    if (node.type === 'break')
+        return ' ';
+    if (typeof node.value === 'string')
+        return node.value;
+    return (node.children ?? [])
+        .map(getWords)
+        .join(BLOCKS.includes(node.type) ? ' ' : '');
+};
+/**
+ * Gives the words of a Markdown content on one line, without its syntax,
+ * as the Markdown component shows them: for a preview
+ */
+export const getPlainTextFromMarkdown = (content) => getWords(markdown.runSync(markdown.parse(content)))
+    .replace(/\s+/g, ' ')
+    .trim();

package/dist/components/Markdown/index.js

@@ -1,7 +1,7 @@
 import { Link, Typography } from '@mui/material';
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
+import { remarkPlugins } from './helpers';
 const makeHeading = (variant) => {
     const Heading = ({ children }) => (React.createElement(Typography, { variant: variant, sx: { mb: 2 } }, children));
     return Heading;
@@ -16,6 +16,5 @@ const components = {
     h5: makeHeading('h5'),
     h6: makeHeading('h6')
 };
-const remarkPlugins = [remarkGfm];
 const Markdown = ({ content }) => (React.createElement(ReactMarkdown, { remarkPlugins: remarkPlugins, components: components }, content));
 export default Markdown;

package/dist/index.d.ts

@@ -31,7 +31,7 @@ export { copyToClipboard } from './components/ActionsMenu/Actions/copyToClipboar
 export { editAttribute } from './components/ActionsMenu/Actions/editAttribute';
 export { others } from './components/ActionsMenu/Actions/others';
 export { exportToText } from './components/ActionsMenu/Actions/exportToText';
-export { default as AppTitle } from './components/Apptitle';
+export { default as AppTitle } from './components/AppTitle';
 export { default as Avatar } from './components/Avatar';
 export { default as BarTitle } from './components/BarTitle';
 export { default as Button } from './components/Button';
@@ -70,6 +70,7 @@ export { default as ListSkeleton } from './components/ListSkeleton';
 export { default as ListSubheader } from './components/ListSubheader';
 export { default as LoadMore } from './components/LoadMore';
 export { default as Markdown } from './components/Markdown';
+export { getPlainTextFromMarkdown } from './components/Markdown/helpers';
 export { default as MidEllipsis } from './components/MidEllipsis';
 export { default as NavigationList } from './components/NavigationList';
 export { default as NavigationListHeader } from './components/NavigationList/NavigationListHeader';
@@ -128,7 +129,7 @@ export type { FavoritesActionOptions } from './components/ActionsMenu/Actions/fa
 export type { DownloadActionOptions, DownloadFileOptions } from './components/ActionsMenu/Actions/download';
 export type { PrintActionOptions, PrintClient } from './components/ActionsMenu/Actions/print';
 export type { ExportToTextActionOptions } from './components/ActionsMenu/Actions/exportToText';
-export type { AppTitleProps } from './components/Apptitle';
+export type { AppTitleProps } from './components/AppTitle';
 export type { AvatarProps } from './components/Avatar';
 export type { BarTitleProps } from './components/BarTitle';
 export type { ButtonProps } from './components/Button';

package/dist/index.js

@@ -34,7 +34,7 @@ export { copyToClipboard } from './components/ActionsMenu/Actions/copyToClipboar
 export { editAttribute } from './components/ActionsMenu/Actions/editAttribute';
 export { others } from './components/ActionsMenu/Actions/others';
 export { exportToText } from './components/ActionsMenu/Actions/exportToText';
-export { default as AppTitle } from './components/Apptitle';
+export { default as AppTitle } from './components/AppTitle';
 export { default as Avatar } from './components/Avatar';
 export { default as BarTitle } from './components/BarTitle';
 export { default as Button } from './components/Button';
@@ -73,6 +73,7 @@ export { default as ListSkeleton } from './components/ListSkeleton';
 export { default as ListSubheader } from './components/ListSubheader';
 export { default as LoadMore } from './components/LoadMore';
 export { default as Markdown } from './components/Markdown';
+export { getPlainTextFromMarkdown } from './components/Markdown/helpers';
 export { default as MidEllipsis } from './components/MidEllipsis';
 export { default as NavigationList } from './components/NavigationList';
 export { default as NavigationListHeader } from './components/NavigationList/NavigationListHeader';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linagora/twake-mui",
   "type": "module",
-  "version": "18.2.0",
+  "version": "18.4.0",
   "description": "MUI v9 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",
@@ -69,8 +69,10 @@
     "react-markdown": "^10.1.0",
     "react-use-measure": "2.1.7",
     "react-virtuoso": "4.13.0",
-    "remark-gfm": "^4.0.1",
-    "rooks": "8.4.0"
+    "remark-gfm": "4.0.1",
+    "remark-parse": "11.0.0",
+    "rooks": "8.4.0",
+    "unified": "11.0.5"
   },
   "devDependencies": {
     "@argos-ci/cli": "6.9.5",