@linagora/twake-mui 9.11.1 → 9.12.0

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+# @linagora/twake-mui [9.12.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@9.11.2...@linagora/twake-mui@9.12.0) (2026-09-29)
+
+
+### Features
+
+* **twake-mui:** Migrate ListItemSkeleton from cozy-ui ([b1ec8f8](https://github.com/linagora/twake-ui/commit/b1ec8f86a86f5caf1003dc139c57697e5e314bce))
+* **twake-mui:** Migrate ListSkeleton from cozy-ui ([782492a](https://github.com/linagora/twake-ui/commit/782492a0a5b5f30f9454641e645081cb6689d415))
+
+## @linagora/twake-mui [9.11.2](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@9.11.1...@linagora/twake-mui@9.11.2) (2026-09-29)
+
+
+### Bug Fixes
+
+* Added break-word to long name and email ([fdfcd16](https://github.com/linagora/twake-ui/commit/fdfcd16b7a381eb9272e1e405f60fc65c85fbbdd))
+* Added disable param for contact popover actions ([fe4af23](https://github.com/linagora/twake-ui/commit/fe4af23240350aa9df0b2a9a58a2bb255340efce))
+* Removed fullwidth from email action button ([e7eb7da](https://github.com/linagora/twake-ui/commit/e7eb7dae06b5afc4421b5f77c512e765ee7b7dfb))
+
 ## @linagora/twake-mui [9.11.1](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@9.11.0...@linagora/twake-mui@9.11.1) (2026-09-29)
 
 

package/dist/components/ContactPopover/AttendeeInfo.js

@@ -25,9 +25,9 @@ export const AttendeeInfo = ({ name, email, onEmailCopy }) => {
     return (React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 } },
         React.createElement(Avatar, { color: avatarColor, size: 48, sx: { width: 48, height: 48, fontSize: '1.25rem' } }, initials),
         React.createElement(Box, { sx: { minWidth: 0 } },
-            name && name !== email ? (React.createElement(Typography, { variant: "body1", sx: { fontWeight: 500 }, noWrap: true }, name)) : null,
+            name && name !== email ? (React.createElement(Typography, { variant: "body1", sx: { fontWeight: 500, wordBreak: 'break-word' } }, name)) : null,
             React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 } },
-                React.createElement(Typography, { variant: "body2", color: "text.secondary", noWrap: true }, email),
+                React.createElement(Typography, { variant: "body2", color: "text.secondary", sx: { wordBreak: 'break-word' } }, email),
                 React.createElement(IconButton, { size: "small", onClick: () => void handleCopy(), sx: { p: 0.5, color: alpha(theme.palette.grey[900], 0.9) }, title: showCopied
                         ? t('ContactPopover.copiedTooltip')
                         : t('ContactPopover.copyTooltip') },

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

@@ -1,5 +1,7 @@
 export interface ContactPopoverCalendarActionProps {
     /** URL for calendar action (e.g., view attendee's calendar) */
     url: string;
+    /** Disable the action button */
+    disabled?: boolean;
 }
-export declare const ContactPopoverCalendarAction: ({ url }: ContactPopoverCalendarActionProps) => JSX.Element;
+export declare const ContactPopoverCalendarAction: ({ url, disabled }: ContactPopoverCalendarActionProps) => JSX.Element;

package/dist/components/ContactPopover/ContactPopoverCalendarAction.js

@@ -2,8 +2,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 }) => {
+export const ContactPopoverCalendarAction = ({ url, disabled = false }) => {
     const theme = useTheme();
-    return (React.createElement(IconButton, { href: url, target: "_blank", rel: "noopener noreferrer", size: "small", sx: { border: `1px solid ${theme.palette.divider}` } },
+    return (React.createElement(IconButton, { href: url, target: "_blank", rel: "noopener noreferrer", size: "small", disabled: disabled, sx: { border: `1px solid ${theme.palette.divider}` } },
         React.createElement(Icon, { icon: CalendarToday, size: 20, color: theme.palette.text.icon })));
 };

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

@@ -1,5 +1,7 @@
 export interface ContactPopoverChatActionProps {
     /** URL for chat action (e.g., Twake Chat link) */
     url: string;
+    /** Disable the action button */
+    disabled?: boolean;
 }
-export declare const ContactPopoverChatAction: ({ url }: ContactPopoverChatActionProps) => JSX.Element;
+export declare const ContactPopoverChatAction: ({ url, disabled }: ContactPopoverChatActionProps) => JSX.Element;

package/dist/components/ContactPopover/ContactPopoverChatAction.js

@@ -2,8 +2,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 }) => {
+export const ContactPopoverChatAction = ({ url, disabled = false }) => {
     const theme = useTheme();
-    return (React.createElement(IconButton, { href: url, target: "_blank", rel: "noopener noreferrer", size: "small", sx: { border: `1px solid ${theme.palette.divider}` } },
+    return (React.createElement(IconButton, { href: url, target: "_blank", rel: "noopener noreferrer", size: "small", disabled: disabled, sx: { border: `1px solid ${theme.palette.divider}` } },
         React.createElement(Icon, { icon: Discuss, size: 20, color: theme.palette.text.icon })));
 };

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

@@ -1,5 +1,7 @@
 export interface ContactPopoverEmailActionProps {
     /** URL for email action */
     url: string;
+    /** Disable the action button */
+    disabled?: boolean;
 }
-export declare const ContactPopoverEmailAction: ({ url }: ContactPopoverEmailActionProps) => JSX.Element;
+export declare const ContactPopoverEmailAction: ({ url, disabled }: ContactPopoverEmailActionProps) => JSX.Element;

package/dist/components/ContactPopover/ContactPopoverEmailAction.js

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

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

@@ -1,5 +1,7 @@
 export interface ContactPopoverVideoActionProps {
     /** URL for video call action (e.g., Twake Meet link) */
     url: string;
+    /** Disable the action button */
+    disabled?: boolean;
 }
-export declare const ContactPopoverVideoAction: ({ url }: ContactPopoverVideoActionProps) => JSX.Element;
+export declare const ContactPopoverVideoAction: ({ url, disabled }: ContactPopoverVideoActionProps) => JSX.Element;

package/dist/components/ContactPopover/ContactPopoverVideoAction.js

@@ -2,8 +2,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 }) => {
+export const ContactPopoverVideoAction = ({ url, disabled = false }) => {
     const theme = useTheme();
-    return (React.createElement(IconButton, { href: url, target: "_blank", rel: "noopener noreferrer", size: "small", sx: { border: `1px solid ${theme.palette.divider}` } },
+    return (React.createElement(IconButton, { href: url, target: "_blank", rel: "noopener noreferrer", size: "small", disabled: disabled, sx: { border: `1px solid ${theme.palette.divider}` } },
         React.createElement(Icon, { icon: Camera, size: 20, color: theme.palette.text.icon })));
 };

package/dist/components/ContactPopover/index.js

@@ -113,7 +113,8 @@ export const ContactPopover = ({ name, email, children, onEmailCopy, onClose, di
                 paper: {
                     elevation: 4,
                     sx: {
-                        borderRadius: 2
+                        borderRadius: 2,
+                        maxWidth: 400
                     },
                     onMouseEnter: handlePopoverMouseEnter,
                     onMouseLeave: handleMouseLeave

package/dist/components/ListItemSkeleton/ListItemSkeleton.stories.d.ts

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

package/dist/components/ListItemSkeleton/ListItemSkeleton.stories.js

@@ -0,0 +1,43 @@
+import { Box, List, Stack } from '@mui/material';
+import React from 'react';
+import ListItemSkeleton from './index';
+const meta = {
+    title: 'ListItemSkeleton',
+    component: ListItemSkeleton,
+    tags: ['autodocs'],
+    argTypes: {
+        hasSecondary: { control: 'boolean' },
+        divider: { control: 'boolean' },
+        gutters: {
+            control: 'select',
+            options: ['default', 'double', 'disabled']
+        }
+    },
+    decorators: [
+        (Story) => (React.createElement(Box, { sx: { maxWidth: 480 } },
+            React.createElement(List, null,
+                React.createElement(Story, null))))
+    ]
+};
+export default meta;
+export const Default = {
+    args: {
+        hasSecondary: false,
+        divider: false,
+        gutters: 'default'
+    }
+};
+const Example = ({ title, ...props }) => (React.createElement("section", null,
+    React.createElement("h3", null, title),
+    React.createElement(ListItemSkeleton, { ...props })));
+// Visual Regression - Combined view for Argos testing
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 4 },
+        React.createElement(Example, { title: "Default" }),
+        React.createElement(Example, { title: "With secondary", hasSecondary: true }),
+        React.createElement(Example, { title: "With divider", divider: true }),
+        React.createElement(Example, { title: "Disabled gutters", gutters: "disabled" }),
+        React.createElement(Example, { title: "Double gutters", gutters: "double" }),
+        React.createElement(Example, { title: "With secondary, divider and double gutters", hasSecondary: true, divider: true, gutters: "double" })))
+};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ListItemGutters } from '../ListItem';
+export interface ListItemSkeletonProps {
+    hasSecondary?: boolean;
+    divider?: boolean;
+    gutters?: ListItemGutters;
+}
+declare const ListItemSkeleton: ({ hasSecondary, divider, gutters }: ListItemSkeletonProps) => React.ReactElement;
+export default ListItemSkeleton;

package/dist/components/ListItemSkeleton/index.js

@@ -0,0 +1,12 @@
+import { Divider, ListItemIcon, Skeleton } from '@mui/material';
+import React from 'react';
+import { radius } from '../../lib/radius';
+import ListItem from '../ListItem';
+import ListItemText from '../ListItemText';
+const ListItemSkeleton = ({ hasSecondary, divider, gutters }) => (React.createElement(React.Fragment, null,
+    React.createElement(ListItem, { gutters: gutters },
+        React.createElement(ListItemIcon, null,
+            React.createElement(Skeleton, { variant: "rectangular", width: 32, height: 32, sx: { borderRadius: radius.md } })),
+        React.createElement(ListItemText, { primary: React.createElement(Skeleton, { width: "75%", height: 13 }), secondary: hasSecondary ? React.createElement(Skeleton, { width: "37%", height: 13 }) : undefined })),
+    divider && React.createElement(Divider, null)));
+export default ListItemSkeleton;

package/dist/components/ListSkeleton/ListSkeleton.stories.d.ts

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

package/dist/components/ListSkeleton/ListSkeleton.stories.js

@@ -0,0 +1,40 @@
+import { Box, Stack } from '@mui/material';
+import React from 'react';
+import ListSkeleton from './index';
+const meta = {
+    title: 'ListSkeleton',
+    component: ListSkeleton,
+    tags: ['autodocs'],
+    argTypes: {
+        count: { control: { type: 'number', min: 1 } },
+        hasSecondary: { control: 'boolean' },
+        withSubheader: { control: 'boolean' },
+        divider: { control: 'boolean' }
+    },
+    decorators: [
+        (Story) => (React.createElement(Box, { sx: { maxWidth: 480 } },
+            React.createElement(Story, null)))
+    ]
+};
+export default meta;
+export const Default = {
+    args: {
+        count: 5,
+        hasSecondary: false,
+        withSubheader: false,
+        divider: false
+    }
+};
+const Example = ({ title, ...props }) => (React.createElement("section", null,
+    React.createElement("h3", null, title),
+    React.createElement(ListSkeleton, { count: 3, ...props })));
+// Visual Regression - Combined view for Argos testing
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 4 },
+        React.createElement(Example, { title: "Default" }),
+        React.createElement(Example, { title: "With secondary", hasSecondary: true }),
+        React.createElement(Example, { title: "With subheader", withSubheader: true }),
+        React.createElement(Example, { title: "With divider", divider: true }),
+        React.createElement(Example, { title: "With secondary, subheader and divider", hasSecondary: true, withSubheader: true, divider: true })))
+};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface ListSkeletonProps {
+    count?: number;
+    hasSecondary?: boolean;
+    withSubheader?: boolean;
+    divider?: boolean;
+}
+declare const ListSkeleton: ({ count, hasSecondary, withSubheader, divider }: ListSkeletonProps) => React.ReactElement;
+export default ListSkeleton;

package/dist/components/ListSkeleton/index.js

@@ -0,0 +1,6 @@
+import { List } from '@mui/material';
+import React from 'react';
+import ListItemSkeleton from '../ListItemSkeleton';
+import ListSubheader from '../ListSubheader';
+const ListSkeleton = ({ count = 1, hasSecondary, withSubheader, divider }) => (React.createElement(List, { subheader: withSubheader ? React.createElement(ListSubheader, null, "\u00A0") : undefined }, Array.from({ length: count }, (_, idx) => (React.createElement(ListItemSkeleton, { key: idx, hasSecondary: hasSecondary, divider: divider })))));
+export default ListSkeleton;

package/dist/index.d.ts

@@ -16,6 +16,8 @@ export { default as DropdownText } from './components/DropdownText';
 export { default as ListItem } from './components/ListItem';
 export { default as ListItemButton } from './components/ListItemButton';
 export { default as ListItemText } from './components/ListItemText';
+export { default as ListItemSkeleton } from './components/ListItemSkeleton';
+export { default as ListSkeleton } from './components/ListSkeleton';
 export { default as ListSubheader } from './components/ListSubheader';
 export { Tabs, default as TabsDefault } from './components/Tabs';
 export { Switch, default as SwitchDefault } from './components/Switch';
@@ -52,6 +54,8 @@ export type { DropdownTextProps, DropdownTextVariant } from './components/Dropdo
 export type { ListItemProps, ListItemGutters, ListItemSize } from './components/ListItem';
 export type { ListItemButtonProps } from './components/ListItemButton';
 export type { ListItemTextProps } from './components/ListItemText';
+export type { ListItemSkeletonProps } from './components/ListItemSkeleton';
+export type { ListSkeletonProps } from './components/ListSkeleton';
 export type { ListSubheaderProps } from './components/ListSubheader';
 export type { TabsProps } from './components/Tabs';
 export type { SwitchProps } from './components/Switch';

package/dist/index.js

@@ -19,6 +19,8 @@ export { default as DropdownText } from './components/DropdownText';
 export { default as ListItem } from './components/ListItem';
 export { default as ListItemButton } from './components/ListItemButton';
 export { default as ListItemText } from './components/ListItemText';
+export { default as ListItemSkeleton } from './components/ListItemSkeleton';
+export { default as ListSkeleton } from './components/ListSkeleton';
 export { default as ListSubheader } from './components/ListSubheader';
 export { Tabs, default as TabsDefault } from './components/Tabs';
 export { Switch, default as SwitchDefault } from './components/Switch';

package/dist/stories/Menu.stories.js

@@ -68,5 +68,5 @@ export const Screenshot = {
     tags: ['argos'],
     parameters: { layout: 'padded' },
     render: () => (React.createElement(Box, { sx: { minHeight: 440 } },
-        React.createElement(ExampleMenu, { defaultOpen: true, autoFocus: false, disablePortal: true, disableScrollLock: true, transitionDuration: 0 })))
+        React.createElement(ExampleMenu, { defaultOpen: true, autoFocus: false, disablePortal: true, disableScrollLock: true })))
 };

package/package.json

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