@linagora/twake-mui 9.5.0 → 9.6.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+# @linagora/twake-mui [9.6.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@9.5.1...@linagora/twake-mui@9.6.0) (2026-09-24)
+
+
+### Bug Fixes
+
+* **twake-mui:** Clean old MenuItem override ([8c7b2f9](https://github.com/linagora/twake-ui/commit/8c7b2f9824e4ecc695f293ee04367415c5d5602e))
+
+
+### Features
+
+* **twake-mui:** Migrate Menu from cozy-ui ([e73e894](https://github.com/linagora/twake-ui/commit/e73e894938ac5e30f647f7e64ff06737b03afbad))
+
+## @linagora/twake-mui [9.5.1](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@9.5.0...@linagora/twake-mui@9.5.1) (2026-09-24)
+
+
+### Bug Fixes
+
+* **twake-mui:** Remove the dark mode elevation overlay on papers ([b940b8f](https://github.com/linagora/twake-ui/commit/b940b8feba4abbe7918870ea1253a21469d3e534))
+
 # @linagora/twake-mui [9.5.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@9.4.0...@linagora/twake-mui@9.5.0) (2026-09-24)
 
 

package/dist/lib/makeTheme.js

@@ -34,7 +34,8 @@ export const makeTheme = (mode = 'light', paletteOverrides, themeOptions) => {
             },
             dark: {
                 palette: makePalette('dark', paletteOverrides),
-                shadows: makeShadows('dark')
+                shadows: makeShadows('dark'),
+                overlays: Array(25).fill('none')
             }
         },
         typography: makeTypography(),

package/dist/lib/overrides.js

@@ -5,7 +5,8 @@ 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 { menuItemClasses } from '@mui/material/MenuItem';
+import { listItemIconClasses } from '@mui/material/ListItemIcon';
+import { listItemTextClasses } from '@mui/material/ListItemText';
 import { outlinedInputClasses } from '@mui/material/OutlinedInput';
 import { radioClasses } from '@mui/material/Radio';
 import { selectClasses } from '@mui/material/Select';
@@ -1014,20 +1015,33 @@ export const overrides = {
             })
         }
     },
+    MuiMenu: {
+        styleOverrides: {
+            paper: { maxWidth: 320 }
+        }
+    },
     MuiMenuItem: {
         styleOverrides: {
             root: ({ theme }) => ({
-                borderRadius: radius.md,
-                '&&&:hover': {
-                    backgroundColor: `${alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity)}`
+                gap: 16,
+                paddingTop: 4,
+                paddingBottom: 4,
+                whiteSpace: 'normal',
+                wordBreak: 'break-word',
+                [`& .${listItemIconClasses.root}`]: {
+                    minWidth: 'auto',
+                    color: theme.vars.palette.text.icon
                 },
-                [`&.${menuItemClasses.selected}`]: {
-                    backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
-                    '&:hover': {
-                        backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity +
-                            theme.palette.action.hoverOpacity)
+                [`& .${listItemTextClasses.root}`]: {
+                    marginTop: 1,
+                    marginBottom: 1
+                },
+                variants: [
+                    {
+                        props: { dense: false },
+                        style: { [theme.breakpoints.up('sm')]: { minHeight: 40 } }
                     }
-                }
+                ]
             })
         }
     },

package/dist/stories/Menu.stories.d.ts

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

package/dist/stories/Menu.stories.js

@@ -0,0 +1,71 @@
+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 React, { useState } from 'react';
+const items = [
+    React.createElement(MenuItem, { key: "modify" },
+        React.createElement(ListItemIcon, null,
+            React.createElement(Icon, { icon: Pen })),
+        React.createElement(ListItemText, { primary: "Modify" }),
+        React.createElement(ListItemIcon, null,
+            React.createElement(Typography, { color: "error" },
+                React.createElement(Icon, { icon: Attention })))),
+    React.createElement(MenuItem, { key: "people" },
+        React.createElement(ListItemIcon, null,
+            React.createElement(Icon, { icon: People })),
+        React.createElement(ListItemText, { primary: "People" })),
+    React.createElement(MenuItem, { key: "attachment" },
+        React.createElement(ListItemIcon, null,
+            React.createElement(Icon, { icon: Attachment })),
+        React.createElement(ListItemText, { primary: "Attachment" })),
+    React.createElement(MenuItem, { key: "long" },
+        React.createElement(ListItemIcon, null,
+            React.createElement(Icon, { icon: People })),
+        React.createElement(ListItemText, { primary: "Item with a very long title to show how it should be displayed" })),
+    React.createElement(MenuItem, { key: "no-icon" },
+        React.createElement(ListItemText, { primary: "Item without icon" })),
+    React.createElement(Divider, { key: "divider" }),
+    React.createElement(MenuItem, { key: "call" },
+        React.createElement(ListItemIcon, null,
+            React.createElement(Icon, { icon: Telephone })),
+        React.createElement(ListItemText, { primary: "Call" })),
+    React.createElement(MenuItem, { key: "contrast" },
+        React.createElement(ListItemIcon, null,
+            React.createElement(Icon, { icon: Contrast })),
+        React.createElement(ListItemText, { primary: "Contrast" })),
+    React.createElement(MenuItem, { key: "copy" },
+        React.createElement(ListItemIcon, null,
+            React.createElement(Icon, { icon: Copy })),
+        React.createElement(ListItemText, { primary: "Copy" }))
+];
+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(Menu, { anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, ...props, anchorEl: button, open: open && Boolean(button), onClose: () => setOpen(false) }, items)));
+};
+const meta = {
+    title: 'Menu',
+    component: Menu,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs'],
+    argTypes: {
+        variant: { control: 'select', options: ['menu', 'selectedMenu'] },
+        autoFocus: { control: 'boolean' },
+        disableAutoFocusItem: { control: 'boolean' },
+        keepMounted: { control: 'boolean' },
+        marginThreshold: { control: 'number' },
+        elevation: { control: 'number' }
+    }
+};
+export default meta;
+export const Default = {
+    render: args => React.createElement(ExampleMenu, { ...args })
+};
+// Visual Regression - The cozy-ui Menu doc example, opened
+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 })))
+};

package/package.json

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