@linagora/twake-mui 9.9.0 → 9.10.0

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+# @linagora/twake-mui [9.10.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@9.9.1...@linagora/twake-mui@9.10.0) (2026-09-28)
+
+
+### Features
+
+* **twake-mui:** Apply review on list components ([b5971e8](https://github.com/linagora/twake-ui/commit/b5971e8cdc66d12e24479cc1dee5d657c86495a7))
+* **twake-mui:** Migrate ListItem from cozy-ui ([f3f4d0a](https://github.com/linagora/twake-ui/commit/f3f4d0ab092b8cd0c5344831193607da23d353a0))
+* **twake-mui:** Migrate ListItemText from cozy-ui ([ee840a6](https://github.com/linagora/twake-ui/commit/ee840a671b7e0f823a28d1d7a33c325b0bb0f9c9))
+* **twake-mui:** Migrate ListSubheader from cozy-ui ([af32dbd](https://github.com/linagora/twake-ui/commit/af32dbdde9365b86237ca7754a91c562e28913e0))
+
+## @linagora/twake-mui [9.9.1](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@9.9.0...@linagora/twake-mui@9.9.1) (2026-09-24)
+
+
+### Bug Fixes
+
+* **twake-mui:** Fixed contactPopover click propagation & opening link in new pages ([b11270b](https://github.com/linagora/twake-ui/commit/b11270b060bcc749805f59059214c8a011b7b20d))
+
 # @linagora/twake-mui [9.9.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@9.8.0...@linagora/twake-mui@9.9.0) (2026-09-24)
 
 

package/dist/components/ContactPopover/ContactPopover.stories.js

@@ -1,5 +1,6 @@
 import { Chip, Box, Typography } from '@mui/material';
-import React, { useEffect, useRef } from 'react';
+import React from 'react';
+import { screen } from 'storybook/test';
 import { ContactPopover } from './index';
 const meta = {
     title: 'Components/ContactPopover',
@@ -32,16 +33,7 @@ const meta = {
 export default meta;
 export const Default = {
     render: () => {
-        const containerRef = useRef(null);
-        useEffect(() => {
-            const timer = setTimeout(() => {
-                containerRef.current
-                    ?.querySelectorAll('[role="button"]')[0]
-                    .click();
-            }, 100);
-            return () => clearTimeout(timer);
-        }, []);
-        return (React.createElement(Box, { ref: containerRef, sx: { display: 'flex', flexDirection: 'column', gap: 3 } },
+        return (React.createElement(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 3 } },
             React.createElement(Box, null,
                 React.createElement(Typography, { variant: "subtitle2", gutterBottom: true }, "Default \u2014 all actions"),
                 React.createElement(ContactPopover, { name: "John Doe", email: "john.doe@example.com" },
@@ -69,5 +61,9 @@ export const Default = {
                         React.createElement(ContactPopover.ChatAction, { url: "https://chat.example.com/christopher" }),
                         React.createElement(ContactPopover.VideoAction, { url: "https://meet.example.com/christopher" }),
                         React.createElement(ContactPopover.CalendarAction, { url: "https://calendar.example.com/christopher" }))))));
+    },
+    play: async ({ canvas, userEvent }) => {
+        await userEvent.click(canvas.getByText('John Doe'));
+        await screen.findByText('john.doe@example.com');
     }
 };

package/dist/components/ContactPopover/ContactPopoverCalendarAction.js

@@ -4,6 +4,6 @@ import { IconButton, useTheme } from '@mui/material';
 import React from 'react';
 export const ContactPopoverCalendarAction = ({ url }) => {
     const theme = useTheme();
-    return (React.createElement(IconButton, { href: url, size: "small", sx: { border: `1px solid ${theme.palette.divider}` } },
+    return (React.createElement(IconButton, { href: url, target: "_blank", rel: "noopener noreferrer", size: "small", sx: { border: `1px solid ${theme.palette.divider}` } },
         React.createElement(Icon, { icon: CalendarToday, size: 20, color: theme.palette.text.icon })));
 };

package/dist/components/ContactPopover/ContactPopoverChatAction.js

@@ -4,6 +4,6 @@ import { IconButton, useTheme } from '@mui/material';
 import React from 'react';
 export const ContactPopoverChatAction = ({ url }) => {
     const theme = useTheme();
-    return (React.createElement(IconButton, { href: url, size: "small", sx: { border: `1px solid ${theme.palette.divider}` } },
+    return (React.createElement(IconButton, { href: url, target: "_blank", rel: "noopener noreferrer", size: "small", sx: { border: `1px solid ${theme.palette.divider}` } },
         React.createElement(Icon, { icon: Discuss, size: 20, color: theme.palette.text.icon })));
 };

package/dist/components/ContactPopover/ContactPopoverEmailAction.js

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

package/dist/components/ContactPopover/ContactPopoverVideoAction.js

@@ -4,6 +4,6 @@ import { IconButton, useTheme } from '@mui/material';
 import React from 'react';
 export const ContactPopoverVideoAction = ({ url }) => {
     const theme = useTheme();
-    return (React.createElement(IconButton, { href: url, size: "small", sx: { border: `1px solid ${theme.palette.divider}` } },
+    return (React.createElement(IconButton, { href: url, target: "_blank", rel: "noopener noreferrer", size: "small", 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

@@ -119,7 +119,7 @@ export const ContactPopover = ({ name, email, children, onEmailCopy, onClose, di
                     onMouseLeave: handleMouseLeave
                 }
             } },
-            React.createElement(StyledPopoverContent, null,
+            React.createElement(StyledPopoverContent, { onClick: event => event.stopPropagation() },
                 React.createElement(CloseButton, { size: "small", onClick: handleClose },
                     React.createElement(Icon, { icon: Cross, size: 16 })),
                 React.createElement(AttendeeInfo, { name: name, email: email, onEmailCopy: onEmailCopy }),

package/dist/components/Dialog/Dialog.stories.js

@@ -1,7 +1,9 @@
 import { CrossMedium, FileTypeFolder, FileTypeText, Icon } from '@linagora/twake-icons';
-import { Button, DialogActions, DialogContent, DialogContentText, DialogTitle, Divider, IconButton, List, ListItemButton, ListItemIcon, ListItemText, Stack } from '@mui/material';
+import { Button, DialogActions, DialogContent, DialogContentText, DialogTitle, Divider, IconButton, List, ListItemIcon, Stack } from '@mui/material';
 import React from 'react';
 import { Dialog } from './index';
+import ListItemButton from '../ListItemButton';
+import ListItemText from '../ListItemText';
 const sizes = ['small', 'medium', 'large', 'full'];
 const meta = {
     title: 'Dialog',

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

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

package/dist/components/ListItem/ListItem.stories.js

@@ -0,0 +1,135 @@
+import { Comment, Dots, Icon, Pen, People, Right, Trash } from '@linagora/twake-icons';
+import { Box, Checkbox, IconButton, List, ListItemAvatar, ListItemIcon, ListItemSecondaryAction, Radio, Stack } from '@mui/material';
+import React from 'react';
+import ListItem from './index';
+import { Avatar } from '../Avatar';
+import ListItemButton from '../ListItemButton';
+import ListItemText from '../ListItemText';
+import ListSubheader from '../ListSubheader';
+const longText = 'Ada Lovelace wrote the first algorithm meant to be carried out by a machine, long before any computer existed to run it.';
+const layoutArgTypes = {
+    gutters: {
+        control: 'select',
+        options: ['default', 'double', 'disabled']
+    },
+    size: {
+        control: 'select',
+        options: ['small', 'medium', 'large']
+    },
+    ellipsis: { control: 'boolean' },
+    dense: { control: 'boolean' },
+    divider: { control: 'boolean' },
+    alignItems: {
+        control: 'select',
+        options: ['center', 'flex-start']
+    }
+};
+const meta = {
+    title: 'ListItem',
+    component: ListItem,
+    subcomponents: { ListItemButton },
+    tags: ['autodocs'],
+    argTypes: layoutArgTypes,
+    decorators: [
+        (Story) => (React.createElement(Box, { sx: { maxWidth: 480 } },
+            React.createElement(Story, null)))
+    ]
+};
+export default meta;
+const defaultContent = [
+    React.createElement(ListItemIcon, { key: "icon" },
+        React.createElement(Icon, { icon: Comment })),
+    React.createElement(ListItemText, { key: "text", primary: "I'm a primary text" })
+];
+export const Default = {
+    args: {
+        gutters: 'default',
+        size: 'medium',
+        ellipsis: true
+    },
+    render: args => (React.createElement(List, null,
+        React.createElement(ListItem, { ...args }, defaultContent)))
+};
+export const Button = {
+    argTypes: {
+        ...layoutArgTypes,
+        selected: { control: 'boolean' },
+        disabled: { control: 'boolean' }
+    },
+    args: {
+        gutters: 'default',
+        size: 'medium',
+        ellipsis: true
+    },
+    render: args => (React.createElement(List, null,
+        React.createElement(ListItemButton, { ...args }, defaultContent)))
+};
+const Example = ({ title, button = true, dense, selected, disabled, longText: isLongText, iconSize = 16, multipleLeftIcons, multipleRightIcons, withActions, ...props }) => {
+    const content = [
+        React.createElement(ListItemIcon, { key: "comment" },
+            React.createElement(Icon, { icon: Comment, size: iconSize })),
+        multipleLeftIcons && (React.createElement(React.Fragment, { key: "left" },
+            React.createElement(ListItemIcon, null,
+                React.createElement(Icon, { icon: People, size: iconSize })),
+            React.createElement(ListItemIcon, null,
+                React.createElement(Radio, null)),
+            React.createElement(ListItemIcon, null,
+                React.createElement(Checkbox, null)))),
+        React.createElement(ListItemText, { key: "text", primary: isLongText ? longText : "I'm a primary text" }),
+        multipleRightIcons && (React.createElement(React.Fragment, { key: "right" },
+            React.createElement(ListItemIcon, null,
+                React.createElement(Icon, { icon: Right, size: iconSize })),
+            React.createElement(ListItemIcon, null,
+                React.createElement(Radio, null)),
+            React.createElement(ListItemIcon, null,
+                React.createElement(Checkbox, null)))),
+        withActions && (React.createElement(ListItemSecondaryAction, { key: "actions" },
+            React.createElement(IconButton, null,
+                React.createElement(Icon, { icon: Pen })),
+            React.createElement(IconButton, null,
+                React.createElement(Icon, { icon: Trash })),
+            React.createElement(IconButton, null,
+                React.createElement(Icon, { icon: Dots }))))
+    ];
+    return (React.createElement("section", null,
+        React.createElement("h3", null, title),
+        React.createElement(List, { dense: dense, subheader: React.createElement(ListSubheader, null, "Section 1") }, button ? (React.createElement(ListItemButton, { selected: selected, disabled: disabled, ...props }, content)) : (React.createElement(ListItem, { ...props }, content)))));
+};
+// 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: "Dense", dense: true }),
+        React.createElement(Example, { title: "Long text", longText: true }),
+        React.createElement(Example, { title: "Long text without ellipsis", longText: true, ellipsis: false }),
+        React.createElement(Example, { title: "Disabled gutters", gutters: "disabled" }),
+        React.createElement(Example, { title: "Double gutters", gutters: "double" }),
+        React.createElement(Example, { title: "Small", size: "small" }),
+        React.createElement(Example, { title: "Large", size: "large" }),
+        React.createElement(Example, { title: "Dense small", dense: true, size: "small" }),
+        React.createElement(Example, { title: "Dense large", dense: true, size: "large" }),
+        React.createElement(Example, { title: "Big icons", iconSize: 32 }),
+        React.createElement(Example, { title: "Small icons", iconSize: 8 }),
+        React.createElement(Example, { title: "Multiple left icons", multipleLeftIcons: true }),
+        React.createElement(Example, { title: "Multiple right icons", multipleRightIcons: true }),
+        React.createElement(Example, { title: "Multiple right icons, double gutters", multipleRightIcons: true, gutters: "double" }),
+        React.createElement(Example, { title: "With actions", withActions: true, longText: true }),
+        React.createElement(Example, { title: "With actions, double gutters", withActions: true, longText: true, gutters: "double" }),
+        React.createElement("section", null,
+            React.createElement("h3", null, "With avatar"),
+            React.createElement(List, null,
+                React.createElement(ListItemButton, null,
+                    React.createElement(ListItemAvatar, null,
+                        React.createElement(Avatar, null, "Ada Lovelace")),
+                    React.createElement(ListItemText, { primary: "Ada Lovelace", secondary: longText })),
+                React.createElement(ListItemButton, { alignItems: "flex-start", ellipsis: false },
+                    React.createElement(ListItemAvatar, null,
+                        React.createElement(Avatar, null, "Ada Lovelace")),
+                    React.createElement(ListItemText, { primary: "Ada Lovelace", secondary: longText })))),
+        React.createElement(Example, { title: "Selected", selected: true }),
+        React.createElement(Example, { title: "Disabled", disabled: true }),
+        React.createElement(Example, { title: "Not a button", button: false }),
+        React.createElement(Example, { title: "Not a button, dense small", button: false, dense: true, size: "small" }),
+        React.createElement(Example, { title: "Not a button, with actions", button: false, withActions: true })))
+};

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

@@ -0,0 +1,24 @@
+import { SxProps, Theme } from '@mui/material/styles';
+import React from 'react';
+export type ListItemGutters = 'default' | 'double' | 'disabled';
+export type ListItemSize = 'small' | 'medium' | 'large';
+export interface ListItemLayoutProps {
+    gutters?: ListItemGutters;
+    size?: ListItemSize;
+    ellipsis?: boolean;
+}
+interface ListItemRowOptions extends ListItemLayoutProps {
+    className?: string;
+    disableGutters?: boolean;
+    sx?: SxProps<Theme>;
+    children?: React.ReactNode;
+}
+export interface ListItemRow {
+    className: string;
+    disableGutters: boolean;
+    sx: SxProps<Theme>;
+    action: React.ReactElement | null;
+    content: React.ReactNode;
+}
+export declare function computeListItemRow({ className, gutters, size, ellipsis, disableGutters, sx, children }: ListItemRowOptions): ListItemRow;
+export {};

package/dist/components/ListItem/helpers.js

@@ -0,0 +1,30 @@
+import { isMuiElement } from '@mui/material/utils';
+import cx from 'classnames';
+import { Children, cloneElement, isValidElement } from 'react';
+import ListItemText from '../ListItemText';
+const ACTION_BUTTON_SIZE = 48;
+export function computeListItemRow({ className, gutters = 'default', size = 'medium', ellipsis = true, disableGutters = false, sx, children }) {
+    const items = Children.toArray(children);
+    const lastItem = items.at(-1);
+    const action = isValidElement(lastItem) &&
+        isMuiElement(lastItem, ['ListItemSecondaryAction'])
+        ? lastItem
+        : null;
+    const actionPadding = action
+        ? Children.count(action.props.children) * ACTION_BUTTON_SIZE +
+            (gutters === 'double' ? 24 : 8)
+        : 0;
+    return {
+        className: cx(className, size, { doubleGutters: gutters === 'double' }),
+        disableGutters: disableGutters || gutters === 'disabled',
+        sx: [
+            // && outranks the theme's .doubleGutters padding
+            actionPadding > 0 && { '&&': { paddingRight: `${actionPadding}px` } },
+            sx ?? false
+        ].flat(),
+        action,
+        content: (action ? items.slice(0, -1) : items).map(item => isValidElement(item) && item.type === ListItemText
+            ? cloneElement(item, { ellipsis })
+            : item)
+    };
+}

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

@@ -0,0 +1,7 @@
+import { ListItemProps as MuiListItemProps } from '@mui/material';
+import React from 'react';
+import { ListItemLayoutProps } from './helpers';
+export type { ListItemGutters, ListItemSize } from './helpers';
+export type ListItemProps = Omit<MuiListItemProps, 'ref'> & ListItemLayoutProps;
+declare const ListItem: React.ForwardRefExoticComponent<Omit<MuiListItemProps, "ref"> & ListItemLayoutProps & React.RefAttributes<HTMLLIElement>>;
+export default ListItem;

package/dist/components/ListItem/index.js

@@ -0,0 +1,19 @@
+import { ListItem as MuiListItem } from '@mui/material';
+import React, { forwardRef } from 'react';
+import { computeListItemRow } from './helpers';
+const ListItem = forwardRef(({ className, gutters, size, ellipsis, disableGutters, sx, children, ...props }, ref) => {
+    const row = computeListItemRow({
+        className,
+        gutters,
+        size,
+        ellipsis,
+        disableGutters,
+        sx,
+        children
+    });
+    return (React.createElement(MuiListItem, { ref: ref, ...props, className: row.className, disableGutters: row.disableGutters, sx: row.sx },
+        row.content,
+        row.action));
+});
+ListItem.displayName = 'ListItem';
+export default ListItem;

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

@@ -0,0 +1,6 @@
+import { ListItemButtonProps as MuiListItemButtonProps } from '@mui/material';
+import React from 'react';
+import { ListItemLayoutProps } from '../ListItem/helpers';
+export type ListItemButtonProps = Omit<MuiListItemButtonProps, 'ref'> & ListItemLayoutProps;
+declare const ListItemButton: React.ForwardRefExoticComponent<Omit<MuiListItemButtonProps, "ref"> & ListItemLayoutProps & React.RefAttributes<HTMLDivElement>>;
+export default ListItemButton;

package/dist/components/ListItemButton/index.js

@@ -0,0 +1,23 @@
+import { ListItem, ListItemButton as MuiListItemButton } from '@mui/material';
+import React, { forwardRef } from 'react';
+import { computeListItemRow } from '../ListItem/helpers';
+const ListItemButton = forwardRef(({ className, gutters, size, ellipsis, disableGutters, sx, children, ...props }, ref) => {
+    const row = computeListItemRow({
+        className,
+        gutters,
+        size,
+        ellipsis,
+        disableGutters,
+        sx,
+        children
+    });
+    const button = (React.createElement(MuiListItemButton, { ref: ref, ...props, className: row.className, disableGutters: row.disableGutters, sx: row.sx }, row.content));
+    if (row.action === null)
+        return button;
+    // Keeps the action out of the button, so clicking it does not click the row
+    return (React.createElement(ListItem, { disablePadding: true },
+        button,
+        row.action));
+});
+ListItemButton.displayName = 'ListItemButton';
+export default ListItemButton;

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

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

package/dist/components/ListItemText/ListItemText.stories.js

@@ -0,0 +1,58 @@
+import { Box, List, Stack, Typography } from '@mui/material';
+import React from 'react';
+import ListItemText from './index';
+const longText = 'Ada Lovelace wrote the first algorithm meant to be carried out by a machine, long before any computer existed to run it.';
+const meta = {
+    title: 'ListItemText',
+    component: ListItemText,
+    tags: ['autodocs'],
+    argTypes: {
+        primary: { control: 'text' },
+        secondary: { control: 'text' },
+        ellipsis: { control: 'boolean' },
+        inset: { control: 'boolean' },
+        disableTypography: { control: 'boolean' }
+    },
+    decorators: [
+        (Story) => (React.createElement(Box, { sx: { maxWidth: 480 } },
+            React.createElement(Story, null)))
+    ]
+};
+export default meta;
+export const Default = {
+    args: {
+        primary: "I'm a primary text",
+        secondary: "I'm a secondary text",
+        ellipsis: true
+    }
+};
+const Row = ({ title, children }) => (React.createElement("section", null,
+    React.createElement("h3", null, title),
+    children));
+// Visual Regression - Combined view for Argos testing
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 4 },
+        React.createElement(Row, { title: "Primary text" },
+            React.createElement(ListItemText, { primary: "I'm a list item text" })),
+        React.createElement(Row, { title: "Secondary text" },
+            React.createElement(ListItemText, { primary: "I'm a primary text", secondary: "I'm a secondary text" })),
+        React.createElement(Row, { title: "Custom" },
+            React.createElement(ListItemText, null,
+                React.createElement(Typography, { variant: "body1" }, "I'm a primary text"),
+                React.createElement(Typography, { component: "a", href: "http://cozy.io", variant: "caption", color: "textSecondary" }, longText))),
+        React.createElement(Row, { title: "Ellipsis" },
+            React.createElement(ListItemText, { primary: longText, secondary: longText })),
+        React.createElement(Row, { title: "Without ellipsis" },
+            React.createElement(ListItemText, { primary: longText, secondary: longText, ellipsis: false })),
+        React.createElement(Row, { title: "Dense" },
+            React.createElement(List, { dense: true, disablePadding: true },
+                React.createElement(ListItemText, { primary: "I'm a primary text", secondary: "I'm a secondary text" }))),
+        React.createElement(Row, { title: "Inset" },
+            React.createElement(ListItemText, { inset: true, primary: "I'm a primary text" })),
+        React.createElement(Row, { title: "Slot props" },
+            React.createElement(ListItemText, { primary: "I'm a primary text", secondary: "I'm a secondary text", slotProps: {
+                    primary: { variant: 'caption' },
+                    secondary: { color: 'inherit', variant: 'body1' }
+                } }))))
+};

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

@@ -0,0 +1,7 @@
+import { ListItemTextProps as MuiListItemTextProps } from '@mui/material';
+import React from 'react';
+export interface ListItemTextProps extends Omit<MuiListItemTextProps, 'ref'> {
+    ellipsis?: boolean;
+}
+declare const ListItemText: React.ForwardRefExoticComponent<ListItemTextProps & React.RefAttributes<HTMLDivElement>>;
+export default ListItemText;

package/dist/components/ListItemText/index.js

@@ -0,0 +1,23 @@
+import { ListItemText as MuiListItemText } from '@mui/material';
+import React, { forwardRef } from 'react';
+const ListItemText = forwardRef(({ ellipsis = true, slotProps, ...props }, ref) => {
+    const primarySlot = slotProps?.primary;
+    return (React.createElement(MuiListItemText, { ref: ref, ...props, 
+        // A primary or secondary slot replaces these defaults, ellipsis included
+        slotProps: {
+            ...slotProps,
+            primary: typeof primarySlot === 'function'
+                ? primarySlot
+                : {
+                    // Keeps a caption primary out of the theme's grey caption rule
+                    color: 'inherit',
+                    ...(primarySlot ?? { noWrap: ellipsis })
+                },
+            secondary: slotProps?.secondary ?? {
+                variant: 'caption',
+                noWrap: ellipsis
+            }
+        } }));
+});
+ListItemText.displayName = 'ListItemText';
+export default ListItemText;

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

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

package/dist/components/ListSubheader/ListSubheader.stories.js

@@ -0,0 +1,59 @@
+import { FileTypeFolder, Icon } from '@linagora/twake-icons';
+import { Box, List, ListItemIcon, Stack } from '@mui/material';
+import React from 'react';
+import ListSubheader from './index';
+import ListItemButton from '../ListItemButton';
+import ListItemText from '../ListItemText';
+const meta = {
+    title: 'ListSubheader',
+    component: ListSubheader,
+    tags: ['autodocs'],
+    argTypes: {
+        gutters: {
+            control: 'select',
+            options: ['default', 'double', 'disabled']
+        },
+        color: {
+            control: 'select',
+            options: ['default', 'primary', 'inherit']
+        },
+        inset: { control: 'boolean' },
+        disableSticky: { control: 'boolean' }
+    },
+    decorators: [
+        (Story) => (React.createElement(Box, { sx: { maxWidth: 480 } },
+            React.createElement(Story, null)))
+    ]
+};
+export default meta;
+const Example = props => (React.createElement(List, { subheader: React.createElement(ListSubheader, { ...props }, "This is the subheader") },
+    React.createElement(ListItemButton, null,
+        React.createElement(ListItemIcon, null,
+            React.createElement(Icon, { icon: FileTypeFolder, size: 32 })),
+        React.createElement(ListItemText, { primary: "I'm a primary text" }))));
+export const Default = {
+    args: {
+        gutters: 'default'
+    },
+    render: args => React.createElement(Example, { ...args })
+};
+const Row = ({ title, children }) => (React.createElement("section", null,
+    React.createElement("h3", null, title),
+    children));
+// Visual Regression - Combined view for Argos testing
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 4 },
+        React.createElement(Row, { title: "Default gutters" },
+            React.createElement(Example, null)),
+        React.createElement(Row, { title: "Disabled gutters" },
+            React.createElement(Example, { gutters: "disabled" })),
+        React.createElement(Row, { title: "Double gutters" },
+            React.createElement(Example, { gutters: "double" })),
+        React.createElement(Row, { title: "Inset" },
+            React.createElement(Example, { inset: true })),
+        React.createElement(Row, { title: "Not sticky" },
+            React.createElement(Example, { disableSticky: true })),
+        React.createElement(Row, { title: "Primary color" },
+            React.createElement(Example, { color: "primary" }))))
+};

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

@@ -0,0 +1,8 @@
+import { ListSubheaderProps as MuiListSubheaderProps } from '@mui/material';
+import React from 'react';
+import { ListItemGutters } from '../ListItem/helpers';
+export interface ListSubheaderProps extends Omit<MuiListSubheaderProps, 'ref'> {
+    gutters?: ListItemGutters;
+}
+declare const ListSubheader: React.ForwardRefExoticComponent<ListSubheaderProps & React.RefAttributes<HTMLLIElement>>;
+export default ListSubheader;

package/dist/components/ListSubheader/index.js

@@ -0,0 +1,6 @@
+import { ListSubheader as MuiListSubheader } from '@mui/material';
+import cx from 'classnames';
+import React, { forwardRef } from 'react';
+const ListSubheader = forwardRef(({ className, gutters = 'default', disableGutters, ...props }, ref) => (React.createElement(MuiListSubheader, { ref: ref, ...props, className: cx(className, { doubleGutters: gutters === 'double' }), disableGutters: disableGutters || gutters === 'disabled' })));
+ListSubheader.displayName = 'ListSubheader';
+export default ListSubheader;

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

@@ -2,7 +2,7 @@ import { Theme } from '@mui/material/styles';
 import React from 'react';
 declare const NavRoot: import("@emotion/styled").StyledComponent<import("@mui/material").ListOwnProps & Omit<import("@mui/material").ListOwnProps, keyof import("@mui/material").ListOwnProps> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & {
     ref?: ((instance: HTMLUListElement | null) => void) | React.RefObject<HTMLUListElement> | null | undefined;
-}, "style" | "className" | "children" | "classes" | "sx" | "dense" | "disablePadding" | "subheader"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+}, "style" | "className" | "children" | "dense" | "disablePadding" | "classes" | "sx" | "subheader"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
 export type NavProps = React.ComponentProps<typeof NavRoot>;
 export declare const Nav: (props: NavProps) => React.ReactElement;
 export {};

package/dist/components/NavDesktopDropdown/index.js

@@ -1,7 +1,7 @@
-import { ListItem } from '@mui/material';
 import React, { Children, isValidElement, useState } from 'react';
 import { useBreakpoints } from '../../hooks/useBreakpoints';
 import DropdownText from '../DropdownText';
+import ListItem from '../ListItem';
 export const NavDesktopDropdown = ({ label, children, defaultOpen = true, limit = 5 }) => {
     const { isDesktop } = useBreakpoints();
     const [open, setOpen] = useState(defaultOpen);
@@ -10,12 +10,7 @@ export const NavDesktopDropdown = ({ label, children, defaultOpen = true, limit
     if (!isDesktop)
         return null;
     return (React.createElement(React.Fragment, null,
-        React.createElement(ListItem, { sx: {
-                minHeight: 48,
-                py: 1,
-                px: 2,
-                cursor: isActivated ? 'pointer' : undefined
-            } },
+        React.createElement(ListItem, { size: "small", sx: { cursor: isActivated ? 'pointer' : undefined } },
             React.createElement(DropdownText, { variant: "caption", color: "textSecondary", spaceBetween: true, onClick: isActivated ? onToggle : undefined, innerIconProps: {
                     rotate: open ? 0 : -90,
                     display: isActivated ? undefined : 'none'

package/dist/components/NavIcon/index.js

@@ -4,6 +4,8 @@ import { styled } from '@mui/material/styles';
 import React from 'react';
 const NavIconRoot = styled(ListItemIcon)(({ theme }) => ({
     minWidth: 0,
+    width: 'auto',
+    height: 'auto',
     marginRight: 12,
     color: theme.vars.palette.text.primary,
     [theme.breakpoints.down('lg')]: {

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

@@ -2,7 +2,7 @@ import { Theme } from '@mui/material/styles';
 import React from 'react';
 export declare const NavItem: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
     ref?: ((instance: HTMLLIElement | null) => void) | React.RefObject<HTMLLIElement> | null | undefined;
-}, "style" | "className" | "children" | "classes" | "sx" | "alignItems" | "dense" | "divider" | "slotProps" | "slots" | "disableGutters" | "disablePadding" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<Theme> & {
+}, "style" | "className" | "children" | "alignItems" | "dense" | "disablePadding" | "disableGutters" | "classes" | "sx" | "divider" | "slotProps" | "slots" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<Theme> & {
     secondary?: boolean;
 }, {}, {}>;
 export type NavItemProps = React.ComponentProps<typeof NavItem>;

package/dist/components/NavItem/index.js

@@ -5,6 +5,7 @@ export const NavItem = styled(ListItem, {
 })(({ theme, secondary }) => ({
     padding: 0,
     height: 36,
+    minHeight: 0,
     [theme.breakpoints.down('lg')]: {
         display: 'block',
         height: 'auto',

package/dist/components/NavLink/index.js

@@ -5,6 +5,8 @@ export const NavLink = styled(ListItemButton)(({ theme }) => ({
     margin: '0 16px',
     padding: '0 8px',
     height: '100%',
+    minHeight: 0,
+    gap: 0,
     borderRadius: 8,
     lineHeight: 1.375,
     color: theme.vars.palette.text.primary,

package/dist/index.d.ts

@@ -13,6 +13,10 @@ 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 { default as ListItem } from './components/ListItem';
+export { default as ListItemButton } from './components/ListItemButton';
+export { default as ListItemText } from './components/ListItemText';
+export { default as ListSubheader } from './components/ListSubheader';
 export { Tabs, default as TabsDefault } from './components/Tabs';
 export { Switch, default as SwitchDefault } from './components/Switch';
 export { SearchBar, default as SearchBarDefault } from './components/SearchBar';
@@ -45,6 +49,10 @@ export type { ChipProps } from './components/Chip';
 export type { DialogProps, DialogSize } from './components/Dialog';
 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 { ListSubheaderProps } from './components/ListSubheader';
 export type { TabsProps } from './components/Tabs';
 export type { SwitchProps } from './components/Switch';
 export type { SearchBarProps } from './components/SearchBar/types';

package/dist/index.js

@@ -16,6 +16,10 @@ 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 { default as ListItem } from './components/ListItem';
+export { default as ListItemButton } from './components/ListItemButton';
+export { default as ListItemText } from './components/ListItemText';
+export { default as ListSubheader } from './components/ListSubheader';
 export { Tabs, default as TabsDefault } from './components/Tabs';
 export { Switch, default as SwitchDefault } from './components/Switch';
 export { SearchBar, default as SearchBarDefault } from './components/SearchBar';

package/dist/lib/overrides.js

@@ -5,6 +5,7 @@ import { checkboxClasses } from '@mui/material/Checkbox';
 import { dialogTitleClasses } from '@mui/material/DialogTitle';
 import { formHelperTextClasses } from '@mui/material/FormHelperText';
 import { formLabelClasses } from '@mui/material/FormLabel';
+import { listItemButtonClasses } from '@mui/material/ListItemButton';
 import { listItemIconClasses } from '@mui/material/ListItemIcon';
 import { listItemTextClasses } from '@mui/material/ListItemText';
 import { outlinedInputClasses } from '@mui/material/OutlinedInput';
@@ -97,6 +98,38 @@ const radioColors = [
     'warning',
     'info'
 ];
+const listItemRoot = {
+    gap: 16,
+    variants: [
+        {
+            props: ({ dense, disablePadding }) => !dense && !disablePadding,
+            style: {
+                paddingTop: 12,
+                paddingBottom: 12,
+                minHeight: 56,
+                '&.small': { paddingTop: 8, paddingBottom: 8, minHeight: 48 },
+                '&.large': { paddingTop: 16, paddingBottom: 16, minHeight: 64 }
+            }
+        },
+        {
+            props: ({ dense, disablePadding }) => dense && !disablePadding,
+            style: {
+                paddingTop: 8,
+                paddingBottom: 8,
+                minHeight: 48,
+                '&.small': { paddingTop: 4, paddingBottom: 4, minHeight: 40 },
+                '&.large': { paddingTop: 12, paddingBottom: 12, minHeight: 56 }
+            }
+        },
+        {
+            props: { disableGutters: false },
+            style: {
+                '&.doubleGutters': { paddingLeft: 32, paddingRight: 32 },
+                [`& > .${listItemIconClasses.root}:last-child`]: { marginRight: -8 }
+            }
+        }
+    ]
+};
 export const overrides = {
     MuiButton: {
         defaultProps: {
@@ -1015,6 +1048,80 @@ export const overrides = {
             })
         }
     },
+    MuiListItem: {
+        styleOverrides: {
+            root: listItemRoot
+        }
+    },
+    MuiListItemButton: {
+        styleOverrides: {
+            root: ({ theme }) => ({
+                ...listItemRoot,
+                [`&.${listItemButtonClasses.selected}, &.${listItemButtonClasses.selected}:hover, &.${listItemButtonClasses.focusVisible}, &.${listItemButtonClasses.selected}.${listItemButtonClasses.focusVisible}`]: {
+                    backgroundColor: theme.vars.palette.action.selected
+                },
+                [`&.${listItemButtonClasses.disabled}`]: {
+                    opacity: 0.5
+                }
+            })
+        }
+    },
+    MuiListItemIcon: {
+        styleOverrides: {
+            root: ({ theme }) => ({
+                minWidth: 'auto',
+                width: 32,
+                height: 32,
+                alignItems: 'center',
+                justifyContent: 'center',
+                color: theme.vars.palette.text.icon
+            })
+        }
+    },
+    MuiListSubheader: {
+        styleOverrides: {
+            root: ({ theme }) => ({
+                ...theme.typography.subtitle2,
+                paddingTop: 8,
+                paddingBottom: 8,
+                marginBottom: '0.5rem',
+                backgroundColor: theme.vars.palette.background.contrast,
+                variants: [
+                    {
+                        props: { disableSticky: false },
+                        style: { backgroundColor: theme.vars.palette.background.default }
+                    },
+                    {
+                        props: { disableGutters: false },
+                        style: {
+                            '&.doubleGutters': { paddingLeft: 32, paddingRight: 32 }
+                        }
+                    }
+                ]
+            })
+        }
+    },
+    MuiListItemText: {
+        styleOverrides: {
+            root: {
+                marginTop: 1,
+                marginBottom: 1
+            },
+            secondary: {
+                marginTop: 1
+            }
+        }
+    },
+    MuiListItemSecondaryAction: {
+        styleOverrides: {
+            root: {
+                right: 0,
+                '.doubleGutters > &, .doubleGutters ~ &': {
+                    marginRight: 16
+                }
+            }
+        }
+    },
     MuiMenu: {
         styleOverrides: {
             paper: { maxWidth: 320 }
@@ -1030,6 +1137,8 @@ export const overrides = {
                 wordBreak: 'break-word',
                 [`& .${listItemIconClasses.root}`]: {
                     minWidth: 'auto',
+                    width: 'auto',
+                    height: 'auto',
                     color: theme.vars.palette.text.icon
                 },
                 [`& .${listItemTextClasses.root}`]: {

package/dist/stories/List.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
+import { ListItemLayoutProps } from '../components/ListItem/helpers';
+interface DemoProps extends ListItemLayoutProps {
+    dense?: boolean;
+}
+declare const Demo: React.FC<DemoProps>;
+declare const meta: Meta<typeof Demo>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Screenshot: Story;

package/dist/stories/List.stories.js

@@ -0,0 +1,141 @@
+import { Comment, Dots, FileTypeFolder, FileTypeText, Help, Icon, LinkOut, MagicTrick, People, PieChart, Right } from '@linagora/twake-icons';
+import { Box, Divider, IconButton, List, ListItemIcon, ListItemSecondaryAction, Radio, Stack, Typography } from '@mui/material';
+import React from 'react';
+import ListItemButton from '../components/ListItemButton';
+import ListItemText from '../components/ListItemText';
+import ListSubheader from '../components/ListSubheader';
+const longText = 'Ada Lovelace wrote the first algorithm meant to be carried out by a machine, long before any computer existed to run it.';
+const Demo = ({ dense, ...itemProps }) => (React.createElement(React.Fragment, null,
+    React.createElement(List, { dense: dense, subheader: React.createElement(ListSubheader, null, "Section 1") },
+        React.createElement(ListItemButton, { ...itemProps },
+            React.createElement(ListItemIcon, null,
+                React.createElement(Icon, { icon: FileTypeFolder, size: 32 })),
+            React.createElement(ListItemText, { primary: "I'm a primary text" }),
+            React.createElement(ListItemText, { secondary: "Metadata" }),
+            React.createElement(ListItemText, { secondary: "Metadata" })),
+        React.createElement(Divider, { component: "li", variant: "inset" }),
+        React.createElement(ListItemButton, { ...itemProps },
+            React.createElement(ListItemIcon, null,
+                React.createElement(Icon, { icon: FileTypeText, size: 32 })),
+            React.createElement(ListItemText, { primary: "I'm a primary text", secondary: "I'm a secondary text" })),
+        React.createElement(Divider, { component: "li", variant: "inset" }),
+        React.createElement(ListItemButton, { ...itemProps },
+            React.createElement(ListItemIcon, null,
+                React.createElement(Icon, { icon: FileTypeText, size: 32 })),
+            React.createElement(ListItemText, { primary: "I'm a primary text", secondary: "I'm a secondary text", slotProps: {
+                    primary: { variant: 'caption' },
+                    secondary: { color: 'inherit', variant: dense ? 'body2' : 'body1' }
+                } }))),
+    React.createElement(List, { dense: dense, subheader: React.createElement(ListSubheader, null, "Section 2") },
+        React.createElement(ListItemButton, { ...itemProps },
+            React.createElement(ListItemIcon, null,
+                React.createElement(Icon, { icon: Comment })),
+            React.createElement(ListItemText, { primary: "Support" }),
+            React.createElement(ListItemSecondaryAction, null,
+                React.createElement(IconButton, null,
+                    React.createElement(Icon, { icon: Dots })))),
+        React.createElement(Divider, { component: "li", variant: "inset" }),
+        React.createElement(ListItemButton, { ...itemProps },
+            React.createElement(ListItemIcon, null,
+                React.createElement(Icon, { icon: MagicTrick })),
+            React.createElement(ListItemText, { primary: "Double actions" }),
+            React.createElement(ListItemSecondaryAction, null,
+                React.createElement(IconButton, null,
+                    React.createElement(Icon, { icon: Right })),
+                React.createElement(IconButton, null,
+                    React.createElement(Icon, { icon: Dots }))))),
+    React.createElement(Divider, null),
+    React.createElement(List, { dense: dense },
+        React.createElement(ListItemButton, { ...itemProps },
+            React.createElement(ListItemIcon, null,
+                React.createElement(Icon, { icon: People })),
+            React.createElement(ListItemText, { primary: "Profil" }),
+            React.createElement(ListItemIcon, null,
+                React.createElement(Icon, { icon: Right }))),
+        React.createElement(Divider, { component: "li", variant: "inset" }),
+        React.createElement(ListItemButton, { ...itemProps },
+            React.createElement(ListItemIcon, null,
+                React.createElement(Icon, { icon: People })),
+            React.createElement(ListItemText, { primary: longText, secondary: longText }),
+            React.createElement(ListItemIcon, null,
+                React.createElement(Radio, null))),
+        React.createElement(Divider, { component: "li", variant: "inset" }),
+        React.createElement(ListItemButton, { ...itemProps },
+            React.createElement(ListItemIcon, null,
+                React.createElement(Icon, { icon: Help })),
+            React.createElement(ListItemText, { primary: "Help" }),
+            React.createElement(ListItemIcon, null,
+                React.createElement(Icon, { icon: LinkOut }))),
+        React.createElement(Divider, { component: "li", variant: "inset" }),
+        React.createElement(ListItemButton, { ...itemProps },
+            React.createElement(ListItemIcon, null,
+                React.createElement(Icon, { icon: PieChart })),
+            React.createElement(ListItemText, { primary: "Storage" }),
+            React.createElement(Typography, { variant: "body2", color: "textSecondary" }, "82% used"),
+            React.createElement(ListItemIcon, null,
+                React.createElement(Icon, { icon: Right }))))));
+const HighlightedItem = () => (React.createElement(List, null,
+    React.createElement(ListItemButton, null,
+        React.createElement(ListItemIcon, null,
+            React.createElement(Icon, { icon: FileTypeFolder, size: 32 })),
+        React.createElement(ListItemText, { primary: "I'm a primary text" })),
+    React.createElement(Divider, { variant: "inset" }),
+    React.createElement(ListItemButton, { selected: true },
+        React.createElement(ListItemIcon, null,
+            React.createElement(Icon, { icon: FileTypeText, size: 32 })),
+        React.createElement(ListItemText, { primary: "I'm a primary text", secondary: "I'm a secondary text" })),
+    React.createElement(Divider, { variant: "inset" }),
+    React.createElement(ListItemButton, null,
+        React.createElement(ListItemIcon, null,
+            React.createElement(Icon, { icon: FileTypeText, size: 32 })),
+        React.createElement(ListItemText, { primary: "I'm a primary text" }))));
+const meta = {
+    title: 'List',
+    component: Demo,
+    tags: ['autodocs'],
+    argTypes: {
+        dense: { control: 'boolean' },
+        gutters: {
+            control: 'select',
+            options: ['default', 'double', 'disabled']
+        },
+        size: {
+            control: 'select',
+            options: ['small', 'medium', 'large']
+        }
+    },
+    decorators: [
+        (Story) => (React.createElement(Box, { sx: { maxWidth: 480 } },
+            React.createElement(Story, null)))
+    ]
+};
+export default meta;
+export const Default = {
+    args: {
+        dense: false,
+        gutters: 'default',
+        size: 'medium'
+    }
+};
+const Row = ({ title, children }) => (React.createElement("section", null,
+    React.createElement("h3", null, title),
+    children));
+// Visual Regression - Combined view for Argos testing
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 4 },
+        React.createElement(Row, { title: "Default" },
+            React.createElement(Demo, null)),
+        React.createElement(Row, { title: "Dense" },
+            React.createElement(Demo, { dense: true })),
+        React.createElement(Row, { title: "Disabled gutters" },
+            React.createElement(Demo, { gutters: "disabled" })),
+        React.createElement(Row, { title: "Double gutters" },
+            React.createElement(Demo, { gutters: "double" })),
+        React.createElement(Row, { title: "Small" },
+            React.createElement(Demo, { size: "small" })),
+        React.createElement(Row, { title: "Large" },
+            React.createElement(Demo, { size: "large" })),
+        React.createElement(Row, { title: "Highlighted item" },
+            React.createElement(HighlightedItem, null))))
+};

package/package.json

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