@linagora/twake-mui 11.4.0 → 12.1.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+# @linagora/twake-mui [12.1.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@12.0.0...@linagora/twake-mui@12.1.0) (2026-10-12)
+
+
+### Features
+
+* **twake-mui:** Migrate AppBar from cozy-ui ([4a7280f](https://github.com/linagora/twake-ui/commit/4a7280f0f4a75687d5de823fd5b544ccd63035cb))
+
+# @linagora/twake-mui [12.0.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@11.4.0...@linagora/twake-mui@12.0.0) (2026-10-08)
+
+
+* fix(twake-mui)!: Move @linagora/twake-css to peerDependencies ([672aa48](https://github.com/linagora/twake-ui/commit/672aa48a266ee10bbc3b421ce64b6ced83adbf85))
+
+
+### BREAKING CHANGES
+
+* apps must install @linagora/twake-css themselves and
+import @linagora/twake-css/dist/utils.css once.
+
+Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
+
 # @linagora/twake-mui [11.4.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@11.3.0...@linagora/twake-mui@11.4.0) (2026-10-08)
 
 

package/README.md

@@ -14,6 +14,14 @@ npm install @linagora/twake-mui
 
 Don't forget to also install peerDependencies (see package.json)
 
+`@linagora/twake-css` is one of them: twake-mui builds its theme from its
+`palette.json`, and some components (NavItem, NavDropdown, VirtualizedTable)
+use its `.u-*` utility classes. Import the stylesheet once in your app:
+
+```js
+import '@linagora/twake-css/dist/utils.css'
+```
+
 ## Usage
 
 ### Basic Usage

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { screen } from 'storybook/test';
 import { ContactPopover } from './index';
 const meta = {
-    title: 'Components/ContactPopover',
+    title: 'ContactPopover',
     component: ContactPopover,
     parameters: {
         layout: 'centered'

package/dist/components/SearchBar/SearchBarButtonBase.d.ts

@@ -1 +1 @@
-export declare const SearchBarButtonBase: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonBaseOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, keyof import("@mui/material").ButtonBaseOwnProps> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "disabled" | "style" | "className" | "type" | "tabIndex" | "children" | "classes" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const SearchBarButtonBase: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonBaseOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, keyof import("@mui/material").ButtonBaseOwnProps> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "disabled" | "style" | "className" | "type" | "tabIndex" | "children" | "classes" | "sx" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/dist/lib/overrides.js

@@ -134,6 +134,27 @@ const listItemRoot = {
     ]
 };
 export const overrides = {
+    MuiAppBar: {
+        // MUI otherwise paints every app bar with the paper colour in dark mode
+        defaultProps: { color: 'default', enableColorOnDark: true },
+        styleOverrides: {
+            root: ({ theme }) => ({
+                variants: [
+                    {
+                        props: { color: 'default' },
+                        style: {
+                            '--AppBar-background': theme.vars.palette.grey.A400,
+                            '--AppBar-color': theme.vars.palette.primary.contrastText,
+                            ...theme.applyStyles('dark', {
+                                '--AppBar-background': theme.vars.palette.primary.main,
+                                '--AppBar-color': theme.vars.palette.primary.contrastText
+                            })
+                        }
+                    }
+                ]
+            })
+        }
+    },
     MuiButton: {
         defaultProps: {
             variant: 'contained',

package/dist/stories/AppBar.stories.d.ts

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

package/dist/stories/AppBar.stories.js

@@ -0,0 +1,42 @@
+import { Cross, Icon } from '@linagora/twake-icons';
+import { AppBar, IconButton, Stack, Toolbar, Typography } from '@mui/material';
+import React from 'react';
+const colors = [
+    'default',
+    'inherit',
+    'primary',
+    'secondary',
+    'transparent',
+    'error',
+    'warning',
+    'info',
+    'success'
+];
+const meta = {
+    title: 'AppBar',
+    component: AppBar,
+    tags: ['autodocs'],
+    args: { position: 'static' },
+    argTypes: {
+        color: { control: 'select', options: colors },
+        position: {
+            control: 'select',
+            options: ['fixed', 'absolute', 'sticky', 'static', 'relative']
+        },
+        elevation: { control: 'number' },
+        enableColorOnDark: { control: 'boolean' }
+    }
+};
+export default meta;
+const Bar = props => (React.createElement(AppBar, { ...props },
+    React.createElement(Toolbar, null,
+        React.createElement(IconButton, { "aria-label": "close", color: "inherit", edge: "start" },
+            React.createElement(Icon, { icon: Cross })),
+        React.createElement(Typography, { variant: "h6", color: "inherit" }, props.color ?? 'default'))));
+export const Default = {
+    render: args => React.createElement(Bar, { ...args })
+};
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 2, sx: { p: 4 } }, colors.map(color => (React.createElement(Bar, { key: color, position: "static", color: color })))))
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linagora/twake-mui",
   "type": "module",
-  "version": "11.4.0",
+  "version": "12.1.0",
   "description": "MUI v9 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",
@@ -50,6 +50,7 @@
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
+    "@linagora/twake-css": ">=1.0.0",
     "@linagora/twake-icons": ">=2.10.0",
     "@mui/lab": "^9.0.0-beta.6",
     "@mui/material": "^9.2.0",
@@ -59,7 +60,6 @@
     "twake-i18n": ">=0.6.0"
   },
   "dependencies": {
-    "@linagora/twake-css": "^1.0.0",
     "@mui/utils": "^9.2.0",
     "@react-spring/web": "10.1.2",
     "@use-gesture/react": "10.3.1",
@@ -77,6 +77,7 @@
     "@argos-ci/storybook": "6.4.1",
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
+    "@linagora/twake-css": "^1.0.0",
     "@linagora/twake-icons": "^2.10.0",
     "@mui/icons-material": "^9.2.0",
     "@mui/lab": "^9.0.0-beta.6",