@linagora/twake-mui 9.14.0 → 9.16.0

package/CHANGELOG.md

@@ -1,3 +1,35 @@
+# @linagora/twake-mui [9.16.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@9.15.0...@linagora/twake-mui@9.16.0) (2026-10-01)
+
+
+### Bug Fixes
+
+* **twake-mui:** Clean old Accordion override ([def3b03](https://github.com/linagora/twake-ui/commit/def3b03479b193a3246e716ae4adc89c4d85cbd2))
+* **twake-mui:** Use theme shadow for Accordion ([97cb9b7](https://github.com/linagora/twake-ui/commit/97cb9b7ce81a61963cf9b3e5aaac615b3da4ae63))
+
+
+### Features
+
+* **twake-mui:** Migrate Accordion from cozy-ui ([4033f8d](https://github.com/linagora/twake-ui/commit/4033f8dc03f550eed64263a77f9953e63f2572ec))
+
+# @linagora/twake-mui [9.15.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@9.14.1...@linagora/twake-mui@9.15.0) (2026-09-30)
+
+
+### Bug Fixes
+
+* **twake-mui:** Default Alert severity to primary ([9cdb94e](https://github.com/linagora/twake-ui/commit/9cdb94e7e636d54f2d93fdabb21c03ece9bfbff4))
+
+
+### Features
+
+* **twake-mui:** Migrate PointerAlert from cozy-ui ([82aa564](https://github.com/linagora/twake-ui/commit/82aa5646f8da35d1a9986e045a0ed5ec8a5da003))
+
+## @linagora/twake-mui [9.14.1](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@9.14.0...@linagora/twake-mui@9.14.1) (2026-09-30)
+
+
+### Bug Fixes
+
+* **twake-mui:** Accept any twake-icons from 2.10.0 as peer ([e934d0e](https://github.com/linagora/twake-ui/commit/e934d0e9335c0a63c0caf2dde202aa46ddc33238))
+
 # @linagora/twake-mui [9.14.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@9.13.0...@linagora/twake-mui@9.14.0) (2026-09-29)
 
 

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

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

package/dist/components/PointerAlert/PointerAlert.stories.js

@@ -0,0 +1,88 @@
+/* eslint-disable no-console */
+import { DeviceLaptop, Download, Icon } from '@linagora/twake-icons';
+import { AlertTitle, Button, Stack, Typography } from '@mui/material';
+import React from 'react';
+import PointerAlert from './index';
+const directions = ['top', 'bottom', 'left', 'right'];
+const severities = [
+    'primary',
+    'secondary',
+    'success',
+    'error',
+    'warning',
+    'info'
+];
+const variants = ['standard', 'filled', 'outlined'];
+const makeActionColor = (variant, severity) => {
+    if (variant === 'filled')
+        return 'inherit';
+    return severity === 'primary' || severity === 'secondary'
+        ? undefined
+        : severity;
+};
+const text = 'Get Cozy Drive for Desktop and synchronise your files safely to make them accessible at all times.';
+const downloadAction = (React.createElement(Button, { variant: "text", size: "small", startIcon: React.createElement(Icon, { icon: Download }) }, "Download"));
+const meta = {
+    title: 'PointerAlert',
+    component: PointerAlert,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs'],
+    argTypes: {
+        direction: { control: 'select', options: directions },
+        position: {
+            control: 'text',
+            description: 'Any CSS length or percentage, e.g. `30%` or `100px`'
+        },
+        severity: { control: 'select', options: severities },
+        variant: { control: 'select', options: variants },
+        color: {
+            control: 'select',
+            options: severities,
+            description: 'Overrides the colour taken from `severity`'
+        },
+        square: { control: 'boolean' }
+    }
+};
+export default meta;
+export const Default = {
+    args: {
+        direction: 'bottom',
+        position: '50%',
+        severity: 'primary',
+        variant: 'standard'
+    },
+    render: args => (React.createElement(PointerAlert, { ...args, sx: { width: 480 }, action: downloadAction }, text))
+};
+const Section = ({ title, children }) => (React.createElement("section", null,
+    React.createElement(Typography, { variant: "h4", gutterBottom: true }, title),
+    React.createElement(Stack, { spacing: 1, useFlexGap: true }, children)));
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 3, sx: { width: 640 } },
+        React.createElement(Section, { title: "Directions" }, directions.map(direction => (React.createElement(PointerAlert, { key: direction, direction: direction, severity: "primary", action: downloadAction },
+            direction,
+            ": ",
+            text)))),
+        React.createElement(Section, { title: "Positions" }, ['calc(0% + 0.75rem)', '30%', '100px', 'calc(100% - 0.75rem)'].map(position => (React.createElement(PointerAlert, { key: position, position: position, severity: "info" }, position)))),
+        variants.map(variant => (React.createElement(Section, { key: variant, title: `${variant} variant` }, severities.map(severity => (React.createElement(PointerAlert, { key: severity, variant: variant, severity: severity, action: React.createElement(Button, { variant: "text", size: "small", color: makeActionColor(variant, severity) }, "ACTION") },
+            React.createElement(AlertTitle, null, severity),
+            "This is a ",
+            severity,
+            " alert")))))),
+        React.createElement(Section, { title: "Content" },
+            React.createElement(PointerAlert, { severity: "primary" },
+                React.createElement(AlertTitle, null, "This is the title"),
+                text),
+            React.createElement(PointerAlert, { severity: "primary", color: "warning" },
+                "Colour overridden: ",
+                text),
+            React.createElement(PointerAlert, { severity: "primary", icon: React.createElement(Icon, { icon: DeviceLaptop, color: "var(--twake-palette-error-main)", size: 32 }) }, text),
+            React.createElement(PointerAlert, { severity: "primary", icon: false }, text),
+            React.createElement(PointerAlert, { severity: "primary", square: true },
+                "Square: ",
+                text),
+            React.createElement(PointerAlert, { severity: "primary", onClose: () => console.log('closed') }, text),
+            React.createElement(PointerAlert, { severity: "primary", action: React.createElement(React.Fragment, null,
+                    downloadAction,
+                    React.createElement(Button, { variant: "text", size: "small" }, "No, thanks!")) }, text))))
+};

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

@@ -0,0 +1,9 @@
+import { AlertProps } from '@mui/material';
+export type PointerAlertDirection = 'top' | 'right' | 'bottom' | 'left';
+export interface PointerAlertProps extends AlertProps {
+    direction?: PointerAlertDirection;
+    /** Arrow offset along its edge, any CSS length or percentage. `calc(0% + 0.75rem)` puts it against the starting corner. */
+    position?: string;
+}
+declare const PointerAlert: import("@emotion/styled").StyledComponent<AlertProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & PointerAlertProps, {}, {}>;
+export default PointerAlert;

package/dist/components/PointerAlert/index.js

@@ -0,0 +1,68 @@
+import { Alert, alertClasses, styled } from '@mui/material';
+import { capitalize } from '@mui/material/utils';
+import { alertSeverities } from '../../lib/overrides';
+const ARROW_SIZE = '0.75rem';
+const ARROW_BASE = `calc(2 * ${ARROW_SIZE})`;
+// The alert paints on whole pixels but a clip path cuts on fractional ones. Overshooting
+// on the alert side leaves that edge to the arrow's box, snapped like the alert; the
+// slopes are unchanged.
+const BLEED = '1px';
+const makeShape = (direction, position) => {
+    const horizontal = { left: position, marginLeft: `-${ARROW_SIZE}` };
+    const vertical = { top: position, marginTop: `-${ARROW_SIZE}` };
+    const shapes = {
+        top: {
+            ...horizontal,
+            bottom: '100%',
+            width: ARROW_BASE,
+            height: ARROW_SIZE,
+            clipPath: `polygon(50% 0, calc(100% + ${BLEED}) calc(100% + ${BLEED}), -${BLEED} calc(100% + ${BLEED}))`
+        },
+        bottom: {
+            ...horizontal,
+            top: '100%',
+            width: ARROW_BASE,
+            height: ARROW_SIZE,
+            clipPath: `polygon(-${BLEED} -${BLEED}, calc(100% + ${BLEED}) -${BLEED}, 50% 100%)`
+        },
+        left: {
+            ...vertical,
+            right: '100%',
+            width: ARROW_SIZE,
+            height: ARROW_BASE,
+            clipPath: `polygon(calc(100% + ${BLEED}) -${BLEED}, calc(100% + ${BLEED}) calc(100% + ${BLEED}), 0 50%)`
+        },
+        right: {
+            ...vertical,
+            left: '100%',
+            width: ARROW_SIZE,
+            height: ARROW_BASE,
+            clipPath: `polygon(-${BLEED} -${BLEED}, 100% 50%, -${BLEED} calc(100% + ${BLEED}))`
+        }
+    };
+    return {
+        root: { [`margin-${direction}`]: ARROW_SIZE },
+        arrow: shapes[direction]
+    };
+};
+const PointerAlert = styled(Alert, {
+    shouldForwardProp: prop => prop !== 'direction' && prop !== 'position'
+})(({ theme, direction = 'bottom', position = '50%' }) => {
+    const { root, arrow } = makeShape(direction, position);
+    return {
+        ...root,
+        position: 'relative',
+        '&::after': {
+            ...arrow,
+            content: '""',
+            position: 'absolute',
+            backgroundColor: 'inherit'
+        },
+        // outlined alerts have no background for the arrow to inherit
+        ...Object.fromEntries(alertSeverities.map(severity => [
+            `&.${alertClasses.outlined}.MuiAlert-color${capitalize(severity)}::after`,
+            { backgroundColor: theme.vars.palette[severity].main }
+        ]))
+    };
+});
+export default PointerAlert;

package/dist/index.d.ts

@@ -21,6 +21,7 @@ export { default as ListItemText } from './components/ListItemText';
 export { default as ListItemSkeleton } from './components/ListItemSkeleton';
 export { default as ListSkeleton } from './components/ListSkeleton';
 export { default as ListSubheader } from './components/ListSubheader';
+export { default as PointerAlert } from './components/PointerAlert';
 export { Tabs, default as TabsDefault } from './components/Tabs';
 export { Switch, default as SwitchDefault } from './components/Switch';
 export { SearchBar, default as SearchBarDefault } from './components/SearchBar';
@@ -51,6 +52,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 { PointerAlertProps, PointerAlertDirection } from './components/PointerAlert';
 export type { EmptyProps, EmptyIconSize, EmptyComponentsProps } from './components/Empty';
 export type { DropdownButtonProps } from './components/DropdownButton';
 export type { DropdownTextProps, DropdownTextVariant } from './components/DropdownText';

package/dist/index.js

@@ -24,6 +24,7 @@ export { default as ListItemText } from './components/ListItemText';
 export { default as ListItemSkeleton } from './components/ListItemSkeleton';
 export { default as ListSkeleton } from './components/ListSkeleton';
 export { default as ListSubheader } from './components/ListSubheader';
+export { default as PointerAlert } from './components/PointerAlert';
 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.d.ts

@@ -1,2 +1,3 @@
 import { ThemeOptions } from '@mui/material/styles';
+export declare const alertSeverities: readonly ["primary", "secondary", "success", "error", "warning", "info"];
 export declare const overrides: NonNullable<ThemeOptions['components']>;

package/dist/lib/overrides.js

@@ -1,4 +1,5 @@
 import { Bottom, CheckCircle, CheckSquare, Icon, Info, RadioChecked, RadioUnchecked, Spinner, Warning, WarningCircle } from '@linagora/twake-icons';
+import { accordionSummaryClasses } from '@mui/material/AccordionSummary';
 import { alertClasses } from '@mui/material/Alert';
 import { buttonClasses } from '@mui/material/Button';
 import { checkboxClasses } from '@mui/material/Checkbox';
@@ -18,7 +19,7 @@ import { alpha, darken } from '@mui/material/styles';
 import React from 'react';
 import { radius } from './radius';
 import AccordionExpandIcon from '../components/AccordionExpandIcon';
-const alertSeverities = [
+export const alertSeverities = [
     'primary',
     'secondary',
     'success',
@@ -881,9 +882,10 @@ export const overrides = {
         }
     },
     MuiAlert: {
-        // cozy-ui's 16px icons; the icon padding below centres them on the first
-        // line of the message.
         defaultProps: {
+            severity: 'primary',
+            // 16px icons; the icon padding below centres them on the first line of
+            // the message.
             iconMapping: {
                 primary: React.createElement(Icon, { icon: Info }),
                 secondary: React.createElement(Icon, { icon: Info }),
@@ -923,53 +925,53 @@ export const overrides = {
     },
     MuiAccordion: {
         styleOverrides: {
-            root: {
-                '&::before': {
-                    display: 'none'
-                }
-            }
+            root: ({ theme }) => ({
+                boxShadow: theme.vars.shadows[1],
+                border: `1px solid ${theme.vars.palette.border.main}`,
+                overflow: 'hidden',
+                marginBottom: 16,
+                '&::before': { display: 'none' }
+            }),
+            rounded: ({ theme }) => ({ borderRadius: theme.shape.borderRadius })
         }
     },
     MuiAccordionSummary: {
         defaultProps: { expandIcon: React.createElement(AccordionExpandIcon, null) },
         styleOverrides: {
             root: ({ theme }) => ({
-                backgroundColor: theme.palette.grey[100],
+                backgroundColor: theme.vars.palette.background.default,
                 textTransform: 'uppercase',
                 fontWeight: 'bold',
-                fontSize: '0.875rem',
-                minHeight: '3.5rem',
+                fontSize: theme.typography.pxToRem(14),
+                minHeight: 56,
                 padding: 0,
-                color: theme.palette.text.primary,
-                '&.Mui-expanded': {
-                    minHeight: '3.5rem'
-                }
+                [`&.${accordionSummaryClasses.expanded}`]: { minHeight: 56 }
             }),
-            expandIconWrapper: {
-                order: 0,
-                '&&': {
-                    marginLeft: '0.3125rem'
-                },
+            expandIconWrapper: ({ theme }) => ({
+                color: theme.vars.palette.text.secondary,
+                padding: 12,
+                marginLeft: 5,
+                marginRight: -12,
                 transform: 'rotate(-90deg)',
-                '&.Mui-expanded': {
-                    marginLeft: '0.3125rem',
-                    transform: 'rotate(0deg)'
-                }
-            },
+                [`&.${accordionSummaryClasses.expanded}`]: { transform: 'rotate(0deg)' }
+            }),
             content: {
-                margin: '0.75rem 0',
-                paddingLeft: '0.5rem',
-                paddingRight: '0.25rem',
+                paddingLeft: 8,
+                paddingRight: 4,
                 order: 1,
-                '& > :last-child': {
-                    paddingRight: 0
-                },
-                '&.Mui-expanded': {
-                    margin: '0.75rem 0'
-                }
+                '& > :last-child': { paddingRight: 0 },
+                [`&.${accordionSummaryClasses.expanded}`]: { margin: '12px 0' }
             }
         }
     },
+    MuiAccordionDetails: {
+        styleOverrides: {
+            root: ({ theme }) => ({
+                padding: 0,
+                borderTop: `1px solid ${theme.vars.palette.border.main}`
+            })
+        }
+    },
     MuiFab: {
         defaultProps: { size: 'medium' },
         styleOverrides: {

package/dist/stories/Accordion.stories.d.ts

@@ -3,5 +3,5 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 declare const meta: Meta<typeof Accordion>;
 export default meta;
 type Story = StoryObj<typeof Accordion>;
-export declare const Docs: Story;
+export declare const Default: Story;
 export declare const Screenshot: Story;

package/dist/stories/Accordion.stories.js

@@ -4,26 +4,42 @@ const meta = {
     title: 'Accordion',
     component: Accordion,
     parameters: { layout: 'centered' },
-    tags: ['autodocs']
+    tags: ['autodocs'],
+    argTypes: {
+        defaultExpanded: { control: 'boolean' },
+        disabled: { control: 'boolean' },
+        disableGutters: { control: 'boolean' },
+        square: { control: 'boolean' }
+    }
 };
 export default meta;
-const AccordionGroup = () => (React.createElement(Stack, { spacing: 2, sx: { width: 400 } },
-    React.createElement(Accordion, null,
-        React.createElement(AccordionSummary, null, "Click to expand/collapse the first item"),
-        React.createElement(AccordionDetails, null,
-            React.createElement(Typography, null, "Lorem ipsum dolor sit amet consectetur"))),
-    React.createElement(Accordion, null,
-        React.createElement(AccordionSummary, null, "Click to expand/collapse the second item"),
-        React.createElement(AccordionDetails, null,
-            React.createElement(Typography, null, "Lorem ipsum dolor sit amet consectetur"))),
-    React.createElement(Accordion, null,
-        React.createElement(AccordionSummary, null, "Click to expand/collapse the third item"),
-        React.createElement(AccordionDetails, null,
-            React.createElement(Typography, null, "Lorem ipsum dolor sit amet consectetur")))));
-export const Docs = {
-    render: () => React.createElement(AccordionGroup, null)
+const Item = ({ label, ...props }) => (React.createElement(Accordion, { ...props },
+    React.createElement(AccordionSummary, null,
+        "Click to expand/collapse the ",
+        label,
+        " item"),
+    React.createElement(AccordionDetails, null,
+        React.createElement(Typography, { sx: { m: 2 } }, "Lorem ipsum dolor sit amet consectetur"))));
+export const Default = {
+    render: args => (React.createElement("div", { style: { width: 400, maxWidth: '100%' } },
+        React.createElement(Item, { ...args, label: "first" }),
+        React.createElement(Item, { ...args, label: "second" }),
+        React.createElement(Item, { ...args, label: "third" })))
 };
+const Section = ({ title, children }) => (React.createElement("section", null,
+    React.createElement("h3", { style: { marginBottom: '12px' } }, title),
+    children));
+// Visual Regression - Combined view for Argos testing
 export const Screenshot = {
     tags: ['argos'],
-    render: () => React.createElement(AccordionGroup, null)
+    render: () => (React.createElement(Stack, { spacing: 4, sx: { width: 400, maxWidth: '100%' } },
+        React.createElement(Section, { title: "Default" },
+            React.createElement(Item, { label: "first" }),
+            React.createElement(Item, { label: "second" }),
+            React.createElement(Item, { label: "third" })),
+        React.createElement(Section, { title: "Expanded" },
+            React.createElement(Item, { label: "first", defaultExpanded: true }),
+            React.createElement(Item, { label: "second" })),
+        React.createElement(Section, { title: "Disabled" },
+            React.createElement(Item, { label: "first", disabled: true }))))
 };

package/dist/stories/IconButton.stories.js

@@ -39,7 +39,7 @@ export const Screenshot = {
     render: () => (React.createElement(Stack, { spacing: 4, sx: { p: 4 } },
         sizes.map(size => (React.createElement("section", { key: size },
             React.createElement("h3", null, size),
-            React.createElement(Stack, { direction: "row", spacing: 4 },
+            React.createElement(Stack, { direction: "row", spacing: 4, useFlexGap: true, sx: { flexWrap: 'wrap' } },
                 React.createElement(Stack, { spacing: 1 },
                     React.createElement(Typography, { variant: "caption" }, "default"),
                     React.createElement(Row, { size: size })),

package/dist/stories/TextField.stories.js

@@ -39,7 +39,7 @@ const adornments = {
 };
 const items = options.map(option => (React.createElement(MenuItem, { key: option.value, value: option.value }, option.label)));
 // One enabled and one disabled field
-const Pair = props => (React.createElement(Stack, { direction: "row", spacing: 2 },
+const Pair = props => (React.createElement(Stack, { direction: "row", spacing: 2, useFlexGap: true, sx: { flexWrap: 'wrap' } },
     React.createElement(TextField, { ...props }),
     React.createElement(TextField, { disabled: true, ...props })));
 // Every example of the cozy-ui TextField doc, for one set of variant props

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linagora/twake-mui",
   "type": "module",
-  "version": "9.14.0",
+  "version": "9.16.0",
   "description": "MUI v9 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",
@@ -50,7 +50,7 @@
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
-    "@linagora/twake-icons": "^2.10.0",
+    "@linagora/twake-icons": ">=2.10.0",
     "@mui/lab": "^9.0.0-beta.6",
     "@mui/material": "^9.2.0",
     "react": "^18",
@@ -65,8 +65,8 @@
     "rooks": "7.14.1"
   },
   "devDependencies": {
-    "@argos-ci/cli": "4.2.0",
-    "@argos-ci/storybook": "5.3.2",
+    "@argos-ci/cli": "6.9.5",
+    "@argos-ci/storybook": "6.4.1",
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
     "@linagora/twake-icons": "^2.10.0",
@@ -82,7 +82,7 @@
     "@types/lodash": "4.17.24",
     "@types/react": "18.2.0",
     "@types/react-dom": "^18.2.0",
-    "@vitest/browser-playwright": "4.1.5",
+    "@vitest/browser-playwright": "4.1.11",
     "cozy-tsconfig": "^2.0.0",
     "eslint": "10.2.1",
     "eslint-config-cozy-app": "7.0.0",
@@ -93,7 +93,7 @@
     "react-dom": "^18.2.0",
     "storybook": "10.3.5",
     "twake-i18n": "^0.5.0",
-    "vite": "8.0.9",
-    "vitest": "4.1.5"
+    "vite": "8.3.1",
+    "vitest": "4.1.11"
   }
 }