@linagora/twake-mui 9.14.0 → 9.15.0

package/CHANGELOG.md

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

@@ -18,7 +18,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 +881,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 }),

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.15.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"
   }
 }