@linagora/twake-mui 9.8.0 → 9.9.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# @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)
 
 

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/index.d.ts

@@ -11,6 +11,7 @@ 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';
@@ -42,6 +43,7 @@ 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';

package/dist/index.js

@@ -14,6 +14,7 @@ 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';

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.8.0",
+  "version": "9.9.0",
   "description": "MUI v9 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",