@linagora/twake-mui 9.11.2 → 9.13.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# @linagora/twake-mui [9.13.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@9.12.0...@linagora/twake-mui@9.13.0) (2026-09-29)
+
+
+### Features
+
+* **twake-mui:** Migrate Empty from cozy-ui ([159c7e2](https://github.com/linagora/twake-ui/commit/159c7e2656c03989fed1c4ea6870dcf8889dd468))
+
+# @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)
 
 

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

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

package/dist/components/Empty/Empty.stories.js

@@ -0,0 +1,52 @@
+import { Icon, TwakeWorkplace } from '@linagora/twake-icons';
+import { Box, Button, Stack } from '@mui/material';
+import React from 'react';
+import { Empty } from './index';
+const iconSizes = ['normal', 'medium', 'large'];
+const image = 'https://i.pravatar.cc/150?img=11';
+const longTitle = 'This is a very very long title, just to see and verify how it works with it';
+const longText = 'Ada Lovelace was an English mathematician and writer, chiefly known for her work on the Analytical Engine. She was the first to recognise that the machine had applications beyond pure calculation, and published the first algorithm intended to be carried out by such a machine.';
+const meta = {
+    title: 'Empty',
+    component: Empty,
+    tags: ['autodocs'],
+    argTypes: {
+        iconSize: { control: 'select', options: iconSizes },
+        title: { control: 'text' },
+        text: { control: 'text' },
+        centered: { control: 'boolean' }
+    }
+};
+export default meta;
+export const Default = {
+    args: {
+        icon: TwakeWorkplace,
+        iconSize: 'normal',
+        title: 'This list is empty',
+        text: 'Try adding some content to this list',
+        centered: false
+    }
+};
+const Section = ({ title, children }) => (React.createElement("section", null,
+    React.createElement("h3", { style: { marginBottom: '12px' } }, title),
+    children));
+// Visual Regression - Combined view for Argos testing
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 4 },
+        React.createElement(Section, { title: "Icon sizes" }, iconSizes.map(iconSize => (React.createElement(Empty, { key: iconSize, icon: TwakeWorkplace, iconSize: iconSize, title: "This list is empty", text: "Try adding some content to this list" })))),
+        React.createElement(Section, { title: "Long title and text" },
+            React.createElement(Empty, { icon: TwakeWorkplace, title: longTitle, text: longText })),
+        React.createElement(Section, { title: "With content" },
+            React.createElement(Empty, { icon: TwakeWorkplace, title: "This list is empty", text: "Try adding some content to this list" },
+                React.createElement(Button, { variant: "contained", sx: { mt: 2 } }, "Try refreshing"))),
+        React.createElement(Section, { title: "Centered" },
+            React.createElement(Box, { sx: { display: 'flex', height: 500, transform: 'scale(1)' } },
+                React.createElement(Empty, { icon: TwakeWorkplace, title: "This list is empty", text: "Try adding some content to this list", centered: true }))),
+        React.createElement(Section, { title: "Custom images" },
+            React.createElement(Empty, { icon: TwakeWorkplace, title: "With functional SVG", text: "Try adding some content to this list" }),
+            React.createElement(Empty, { icon: React.createElement("img", { src: image, alt: "" }), title: "With IMG", text: "Try adding some content to this list" }),
+            React.createElement(Empty, { icon: React.createElement("svg", { width: "100", height: "100" },
+                    React.createElement("circle", { cx: "50", cy: "50", r: "40", stroke: "var(--twake-palette-primary-main)", strokeWidth: "4", fill: "var(--twake-palette-background-paper)" })), title: "With SVG", text: "Try adding some content to this list" }),
+            React.createElement(Empty, { icon: React.createElement(Icon, { icon: TwakeWorkplace }), title: "With Icon component", text: "Try adding some content to this list" }))))
+};

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

@@ -0,0 +1,24 @@
+import { IconProps } from '@linagora/twake-icons';
+import { SxProps, TypographyProps } from '@mui/material';
+import { Theme } from '@mui/material/styles';
+import React from 'react';
+export type EmptyIconSize = 'normal' | 'medium' | 'large';
+export interface EmptyComponentsProps {
+    icon?: Partial<IconProps>;
+    title?: TypographyProps;
+    text?: TypographyProps;
+    childrenContainer?: React.ComponentPropsWithoutRef<'div'>;
+}
+export interface EmptyProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'title'> {
+    icon?: IconProps['icon'];
+    iconSize?: EmptyIconSize;
+    title?: React.ReactNode;
+    text?: React.ReactNode;
+    /** Below the `lg` breakpoint, pins the block to the centre of the viewport */
+    centered?: boolean;
+    componentsProps?: EmptyComponentsProps;
+    sx?: SxProps<Theme>;
+}
+export declare const EmptySubTitle: React.FC<TypographyProps>;
+export declare const Empty: React.FC<EmptyProps>;
+export default Empty;

package/dist/components/Empty/index.js

@@ -0,0 +1,65 @@
+import { Icon } from '@linagora/twake-icons';
+import { Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import cx from 'classnames';
+import React from 'react';
+const ICON_CLASS_NAME = 'Empty-icon';
+const iconHeights = {
+    normal: { desktop: 128, mobile: 96 },
+    medium: { desktop: 160, mobile: 128 },
+    large: { desktop: 192, mobile: 160 }
+};
+const EmptyRoot = styled('div', {
+    shouldForwardProp: prop => prop !== 'iconSize' && prop !== 'centered'
+})(({ theme, iconSize, centered }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    flex: '1 0 auto',
+    alignSelf: 'center',
+    margin: '0 auto',
+    boxSizing: 'content-box',
+    padding: theme.spacing(4),
+    textAlign: 'center',
+    width: `calc(100% - ${theme.spacing(8)})`,
+    maxWidth: 512,
+    [`& .${ICON_CLASS_NAME}`]: {
+        display: 'block',
+        margin: '0 auto 16px',
+        height: iconHeights[iconSize].desktop,
+        [theme.breakpoints.down('lg')]: {
+            marginBottom: 8,
+            height: iconHeights[iconSize].mobile
+        }
+    },
+    ...(centered && {
+        [theme.breakpoints.down('lg')]: {
+            position: 'fixed',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)'
+        }
+    })
+}));
+const EmptyContent = styled('div')(({ theme }) => ({
+    maxWidth: 1008,
+    color: theme.vars.palette.text.secondary,
+    lineHeight: 1.5
+}));
+export const EmptySubTitle = props => (React.createElement(Typography, { variant: "body1", color: "textSecondary", ...props }));
+const renderIcon = (icon, iconProps) => {
+    if (React.isValidElement(icon)) {
+        return React.cloneElement(icon, {
+            className: cx(ICON_CLASS_NAME, icon.props.className),
+            size: icon.props.size ?? (icon.type === Icon ? '100%' : undefined),
+            ...iconProps
+        });
+    }
+    return (React.createElement(Icon, { className: ICON_CLASS_NAME, icon: icon, size: "100%", ...iconProps }));
+};
+export const Empty = ({ icon, iconSize = 'normal', title, text, centered = false, componentsProps, children, ...props }) => (React.createElement(EmptyRoot, { iconSize: iconSize, centered: centered, ...props },
+    icon && renderIcon(icon, componentsProps?.icon),
+    title && (React.createElement(Typography, { gutterBottom: true, variant: "h3", color: "textPrimary", ...componentsProps?.title }, title)),
+    text && (React.createElement(EmptySubTitle, { gutterBottom: true, ...componentsProps?.text }, text)),
+    React.createElement(EmptyContent, { ...componentsProps?.childrenContainer }, children)));
+export default Empty;

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

@@ -13,9 +13,12 @@ export { Dialog, default as DialogDefault } from './components/Dialog';
 export { ContactPopover, default as ContactPopoverDefault } from './components/ContactPopover';
 export { default as DropdownButton } from './components/DropdownButton';
 export { default as DropdownText } from './components/DropdownText';
+export { Empty, EmptySubTitle } from './components/Empty';
 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';
@@ -47,11 +50,14 @@ export type { ContactPopoverCalendarActionProps } from './components/ContactPopo
 export type { ContactPopoverEmailActionProps } from './components/ContactPopover/ContactPopoverEmailAction';
 export type { ChipProps } from './components/Chip';
 export type { DialogProps, DialogSize } from './components/Dialog';
+export type { EmptyProps, EmptyIconSize, EmptyComponentsProps } from './components/Empty';
 export type { DropdownButtonProps } from './components/DropdownButton';
 export type { DropdownTextProps, DropdownTextVariant } from './components/DropdownText';
 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

@@ -16,9 +16,12 @@ export { Dialog, default as DialogDefault } from './components/Dialog';
 export { ContactPopover, default as ContactPopoverDefault } from './components/ContactPopover';
 export { default as DropdownButton } from './components/DropdownButton';
 export { default as DropdownText } from './components/DropdownText';
+export { Empty, EmptySubTitle } from './components/Empty';
 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.2",
+  "version": "9.13.0",
   "description": "MUI v9 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",