@linagora/twake-mui 9.7.0 → 9.9.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# @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)
+
+
+### Features
+
+* **twake-mui:** Migrate DropdownButton from cozy-ui ([58ef06a](https://github.com/linagora/twake-ui/commit/58ef06a9dd53659aab952824bf7ac2bc8bf2255e))
+
+# @linagora/twake-mui [9.8.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@9.7.0...@linagora/twake-mui@9.8.0) (2026-09-24)
+
+
+### Features
+
+* **twake-mui:** Migrate DropdownText from cozy-ui ([777b07c](https://github.com/linagora/twake-ui/commit/777b07c26e72cc21ac278dd33b1e0a8210dc19e9))
+
 # @linagora/twake-mui [9.7.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@9.6.0...@linagora/twake-mui@9.7.0) (2026-09-24)
 
 

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

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

package/dist/components/DropdownButton/DropdownButton.stories.js

@@ -0,0 +1,66 @@
+import { Box, Grid, Stack, Typography } from '@mui/material';
+import React from 'react';
+import DropdownButton from './index';
+const variants = [
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'subtitle1',
+    'subtitle2',
+    'body1',
+    'body2',
+    'caption'
+];
+const meta = {
+    title: 'DropdownButton',
+    component: DropdownButton,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs'],
+    argTypes: {
+        textVariant: { control: 'select', options: variants },
+        spaceBetween: { control: 'boolean' },
+        disabled: { control: 'boolean' },
+        fullWidth: { control: 'boolean' },
+        noWrap: { control: 'boolean' }
+    }
+};
+export default meta;
+export const Default = {
+    args: {
+        children: 'Dropdown button'
+    }
+};
+const Container = ({ width, children }) => (React.createElement(Box, { sx: { border: '1px dashed', borderColor: 'divider', width } }, children));
+// Visual Regression - Combined view for Argos testing
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 4 },
+        React.createElement(Grid, { container: true },
+            React.createElement(Grid, { size: 6 },
+                React.createElement(Typography, null, "Default"),
+                variants.map(variant => (React.createElement(Box, { key: variant, sx: { mb: 2 } },
+                    React.createElement(DropdownButton, { textVariant: variant }, variant))))),
+            React.createElement(Grid, { size: 6 },
+                React.createElement(Typography, null, "Disabled"),
+                variants.map(variant => (React.createElement(Box, { key: variant, sx: { mb: 2 } },
+                    React.createElement(DropdownButton, { textVariant: variant, disabled: true }, variant)))))),
+        React.createElement(Container, null,
+            React.createElement(DropdownButton, null, "This is a long text without ellipsis without restrictive container")),
+        React.createElement(Container, { width: 150 },
+            React.createElement(DropdownButton, null, "This is a long text without ellipsis inside a restrictive container")),
+        React.createElement(Container, { width: 150 },
+            React.createElement(DropdownButton, { noWrap: true }, "This is a long text with ellipsis inside a container")),
+        React.createElement(Container, { width: "100%" },
+            React.createElement(DropdownButton, null,
+                "Text with",
+                React.createElement("br", null),
+                "breaking spaces",
+                React.createElement("br", null),
+                "inside content")),
+        React.createElement(Container, { width: "100%" },
+            React.createElement(DropdownButton, { fullWidth: true, spaceBetween: true }, "Space between text and icon (fullWidth needed)")),
+        React.createElement(Container, { width: "100%" },
+            React.createElement(DropdownButton, { fullWidth: true }, "Full width but no space between text and icon"))))
+};

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

@@ -0,0 +1,11 @@
+import { ButtonProps } from '@mui/material';
+import React from 'react';
+import { DropdownTextProps, DropdownTextVariant } from '../DropdownText';
+export interface DropdownButtonProps extends ButtonProps {
+    textVariant?: DropdownTextVariant;
+    spaceBetween?: boolean;
+    noWrap?: boolean;
+    dropdownTextProps?: Partial<DropdownTextProps>;
+}
+declare const DropdownButton: React.ForwardRefExoticComponent<Omit<DropdownButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export default DropdownButton;

package/dist/components/DropdownButton/index.js

@@ -0,0 +1,20 @@
+import { Button } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import React from 'react';
+import DropdownText from '../DropdownText';
+const StyledButton = styled(Button)({
+    minHeight: 'auto',
+    margin: -8,
+    padding: 8,
+    textAlign: 'left',
+    variants: [
+        {
+            props: { fullWidth: true },
+            style: { width: 'calc(100% + 16px)' }
+        }
+    ]
+});
+const DropdownButton = React.forwardRef(({ textVariant = 'body1', spaceBetween = false, disabled = false, fullWidth = false, noWrap = false, dropdownTextProps, children, ...props }, ref) => (React.createElement(StyledButton, { ref: ref, variant: "text", color: "inherit", disabled: disabled, fullWidth: fullWidth || noWrap, ...props },
+    React.createElement(DropdownText, { variant: textVariant, spaceBetween: spaceBetween, disabled: disabled, noWrap: noWrap, ...dropdownTextProps }, children))));
+DropdownButton.displayName = 'DropdownButton';
+export default DropdownButton;

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

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

package/dist/components/DropdownText/DropdownText.stories.js

@@ -0,0 +1,74 @@
+import { Box, Grid, Stack } from '@mui/material';
+import React from 'react';
+import DropdownText from './index';
+const variants = [
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'subtitle1',
+    'subtitle2',
+    'body1',
+    'body2',
+    'caption'
+];
+const columns = [
+    { title: 'Default', props: {} },
+    { title: 'Disabled', props: { disabled: true } },
+    { title: 'Color primary', props: { color: 'primary' } },
+    { title: 'Color error', props: { color: 'error' } }
+];
+const meta = {
+    title: 'DropdownText',
+    component: DropdownText,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs'],
+    argTypes: {
+        variant: { control: 'select', options: variants },
+        color: {
+            control: 'select',
+            options: ['inherit', 'primary', 'secondary', 'error', 'textSecondary']
+        },
+        disabled: { control: 'boolean' },
+        noWrap: { control: 'boolean' },
+        spaceBetween: { control: 'boolean' }
+    }
+};
+export default meta;
+export const Default = {
+    args: {
+        children: 'Dropdown'
+    }
+};
+const Frame = ({ width, children }) => (React.createElement(Box, { sx: { width, border: 1, borderStyle: 'dashed', borderColor: 'divider' } }, children));
+// Visual Regression - Combined view for Argos testing
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 4 },
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Variants"),
+            React.createElement(Grid, { container: true, spacing: 2 }, columns.map(({ title, props }) => (React.createElement(Grid, { key: title, size: { xs: 6, sm: 3 } },
+                React.createElement(Stack, { spacing: 2 },
+                    React.createElement("div", null, title),
+                    variants.map(variant => (React.createElement(DropdownText, { key: variant, variant: variant, ...props }, variant))))))))),
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Containers"),
+            React.createElement(Stack, { spacing: 2 },
+                React.createElement(Frame, null,
+                    React.createElement(DropdownText, null, "This is a long text without ellipsis without restrictive container")),
+                React.createElement(Frame, { width: "150px" },
+                    React.createElement(DropdownText, null, "This is a long text without ellipsis inside a restrictive container")),
+                React.createElement(Frame, { width: "150px" },
+                    React.createElement(DropdownText, { noWrap: true }, "This is a long text with ellipsis inside a container")),
+                React.createElement(Frame, null,
+                    React.createElement(DropdownText, null,
+                        "Text with",
+                        React.createElement("br", null),
+                        "breaking spaces",
+                        React.createElement("br", null),
+                        "inside content")),
+                React.createElement(Frame, null,
+                    React.createElement(DropdownText, { spaceBetween: true }, "Space between text and icon"))))))
+};

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

@@ -0,0 +1,29 @@
+import { IconProps } from '@linagora/twake-icons';
+import { TypographyProps } from '@mui/material';
+import React from 'react';
+declare const iconSizeByVariant: {
+    readonly h1: 24;
+    readonly h2: 17;
+    readonly h3: 15;
+    readonly h4: 14;
+    readonly h5: 13;
+    readonly h6: 12;
+    readonly body1: 12;
+    readonly body2: 11;
+    readonly caption: 10;
+    readonly subtitle1: 11;
+    readonly subtitle2: 10;
+};
+export type DropdownTextVariant = keyof typeof iconSizeByVariant;
+export interface DropdownTextProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    variant?: DropdownTextVariant;
+    color?: TypographyProps['color'];
+    disabled?: boolean;
+    noWrap?: boolean;
+    spaceBetween?: boolean;
+    innerTextProps?: TypographyProps;
+    innerIconContainerProps?: TypographyProps;
+    innerIconProps?: Omit<IconProps, 'icon'>;
+}
+declare const DropdownText: React.ForwardRefExoticComponent<DropdownTextProps & React.RefAttributes<HTMLDivElement>>;
+export default DropdownText;

package/dist/components/DropdownText/index.js

@@ -0,0 +1,34 @@
+import { Icon, Bottom } from '@linagora/twake-icons';
+import { Box, Typography } from '@mui/material';
+import React from 'react';
+const iconSizeByVariant = {
+    h1: 24,
+    h2: 17,
+    h3: 15,
+    h4: 14,
+    h5: 13,
+    h6: 12,
+    body1: 12,
+    body2: 11,
+    caption: 10,
+    subtitle1: 11,
+    subtitle2: 10
+};
+const DropdownText = React.forwardRef(({ variant = 'body1', color = 'inherit', disabled = false, noWrap = false, spaceBetween = false, innerTextProps, innerIconContainerProps, innerIconProps, children, ...props }, ref) => {
+    const textColor = disabled ? 'textDisabled' : color;
+    return (React.createElement(Box, { ref: ref, sx: {
+            display: 'flex',
+            width: '100%',
+            alignItems: 'center',
+            justifyContent: spaceBetween ? 'space-between' : undefined
+        }, ...props },
+        React.createElement(Typography, { variant: variant, color: textColor, noWrap: noWrap, ...innerTextProps }, children),
+        React.createElement(Typography, { component: "span", color: textColor, sx: {
+                display: 'flex',
+                ml: '5px',
+                mt: variant === 'body1' ? '3px' : undefined
+            }, ...innerIconContainerProps },
+            React.createElement(Icon, { icon: Bottom, size: iconSizeByVariant[variant], ...innerIconProps }))));
+});
+DropdownText.displayName = 'DropdownText';
+export default DropdownText;

package/dist/components/NavDesktopDropdown/index.js

@@ -1,7 +1,7 @@
-import { Bottom, Icon } from '@linagora/twake-icons';
-import { ListItem, Typography } from '@mui/material';
+import { ListItem } from '@mui/material';
 import React, { Children, isValidElement, useState } from 'react';
 import { useBreakpoints } from '../../hooks/useBreakpoints';
+import DropdownText from '../DropdownText';
 export const NavDesktopDropdown = ({ label, children, defaultOpen = true, limit = 5 }) => {
     const { isDesktop } = useBreakpoints();
     const [open, setOpen] = useState(defaultOpen);
@@ -10,15 +10,15 @@ export const NavDesktopDropdown = ({ label, children, defaultOpen = true, limit
     if (!isDesktop)
         return null;
     return (React.createElement(React.Fragment, null,
-        React.createElement(ListItem, { onClick: isActivated ? onToggle : undefined, sx: {
+        React.createElement(ListItem, { sx: {
                 minHeight: 48,
                 py: 1,
                 px: 2,
-                justifyContent: 'space-between',
                 cursor: isActivated ? 'pointer' : undefined
             } },
-            React.createElement(Typography, { variant: "caption", sx: { color: 'text.secondary' } }, label),
-            isActivated && (React.createElement(Typography, { component: "span", sx: { display: 'flex', ml: '5px', color: 'text.secondary' } },
-                React.createElement(Icon, { icon: Bottom, size: 10, rotate: open ? 0 : -90 })))),
+            React.createElement(DropdownText, { variant: "caption", color: "textSecondary", spaceBetween: true, onClick: isActivated ? onToggle : undefined, innerIconProps: {
+                    rotate: open ? 0 : -90,
+                    display: isActivated ? undefined : 'none'
+                } }, label)),
         open && children));
 };

package/dist/index.d.ts

@@ -11,6 +11,8 @@ export { Button, default as ButtonDefault } from './components/Button';
 export { default as Chip } from './components/Chip';
 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 { Tabs, default as TabsDefault } from './components/Tabs';
 export { Switch, default as SwitchDefault } from './components/Switch';
 export { SearchBar, default as SearchBarDefault } from './components/SearchBar';
@@ -41,6 +43,8 @@ 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 { DropdownButtonProps } from './components/DropdownButton';
+export type { DropdownTextProps, DropdownTextVariant } from './components/DropdownText';
 export type { TabsProps } from './components/Tabs';
 export type { SwitchProps } from './components/Switch';
 export type { SearchBarProps } from './components/SearchBar/types';

package/dist/index.js

@@ -14,6 +14,8 @@ export { Button, default as ButtonDefault } from './components/Button';
 export { default as Chip } from './components/Chip';
 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 { 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/stories/Menu.stories.js

@@ -1,6 +1,7 @@
-import { Attachment, Attention, Bottom, Contrast, Copy, Icon, Pen, People, Telephone } from '@linagora/twake-icons';
-import { Box, Button, Divider, ListItemIcon, ListItemText, Menu, MenuItem, Typography } from '@mui/material';
+import { Attachment, Attention, Contrast, Copy, Icon, Pen, People, Telephone } from '@linagora/twake-icons';
+import { Box, Divider, ListItemIcon, ListItemText, Menu, MenuItem, Typography } from '@mui/material';
 import React, { useState } from 'react';
+import DropdownButton from '../components/DropdownButton';
 const items = [
     React.createElement(MenuItem, { key: "modify" },
         React.createElement(ListItemIcon, null,
@@ -41,7 +42,7 @@ const ExampleMenu = ({ defaultOpen = false, ...props }) => {
     const [button, setButton] = useState(null);
     const [open, setOpen] = useState(defaultOpen);
     return (React.createElement(React.Fragment, null,
-        React.createElement(Button, { ref: setButton, variant: "text", endIcon: React.createElement(Icon, { icon: Bottom }), onClick: () => setOpen(!open) }, "Show menu"),
+        React.createElement(DropdownButton, { ref: setButton, onClick: () => setOpen(!open) }, "Show menu"),
         React.createElement(Menu, { anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, ...props, anchorEl: button, open: open && Boolean(button), onClose: () => setOpen(false) }, items)));
 };
 const meta = {

package/package.json

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