@linagora/twake-mui 16.0.0 → 16.1.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# @linagora/twake-mui [16.1.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@16.0.1...@linagora/twake-mui@16.1.0) (2026-10-21)
+
+
+### Features
+
+* **twake-mui:** Migrate FilePath from cozy-ui ([622be6f](https://github.com/linagora/twake-ui/commit/622be6fd697ae5d067e4d1ca71063a4b14f1970d))
+
+## @linagora/twake-mui [16.0.1](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@16.0.0...@linagora/twake-mui@16.0.1) (2026-10-19)
+
+
+### Bug Fixes
+
+* **twake-mui:** Disabled ContactPopoved action has now visible state ([bcbf81e](https://github.com/linagora/twake-ui/commit/bcbf81e29cb997599cacc5fb0ea34a5813905820))
+
 # @linagora/twake-mui [16.0.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@15.2.0...@linagora/twake-mui@16.0.0) (2026-10-19)
 
 

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

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof ContactPopover>;
 export default meta;
 type Story = StoryObj<typeof ContactPopover>;
 export declare const Default: Story;
+export declare const AllActionsVariants: Story;

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

@@ -31,39 +31,34 @@ const meta = {
     }
 };
 export default meta;
+const Variant = ({ title, children }) => (React.createElement(Box, null,
+    React.createElement(Typography, { variant: "subtitle2", gutterBottom: true }, title),
+    children));
 export const Default = {
-    render: () => {
-        return (React.createElement(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 3 } },
-            React.createElement(Box, null,
-                React.createElement(Typography, { variant: "subtitle2", gutterBottom: true }, "Default \u2014 all actions"),
-                React.createElement(ContactPopover, { name: "John Doe", email: "john.doe@example.com" },
-                    React.createElement(Chip, { label: "John Doe", clickable: true }),
-                    React.createElement(ContactPopover.Actions, null,
-                        React.createElement(ContactPopover.EmailAction, { url: "https://mail.example.com/john.doe" }),
-                        React.createElement(ContactPopover.CalendarAction, { url: "https://calendar.example.com/john.doe" }),
-                        React.createElement(ContactPopover.ChatAction, { url: "https://chat.example.com/john.doe" }),
-                        React.createElement(ContactPopover.VideoAction, { url: "https://meet.example.com/john.doe" })))),
-            React.createElement(Box, null,
-                React.createElement(Typography, { variant: "subtitle2", gutterBottom: true }, "Email only"),
-                React.createElement(ContactPopover, { name: "", email: "jane.smith@example.com" },
-                    React.createElement(Chip, { label: "jane.smith@example.com", clickable: true }),
-                    React.createElement(ContactPopover.Actions, null,
-                        React.createElement(ContactPopover.EmailAction, { url: "mailto:jane.smith@example.com" })))),
-            React.createElement(Box, null,
-                React.createElement(Typography, { variant: "subtitle2", gutterBottom: true }, "Without actions"),
-                React.createElement(ContactPopover, { name: "Alice Brown", email: "alice.brown@example.com" },
-                    React.createElement(Chip, { label: "Alice Brown", clickable: true }))),
-            React.createElement(Box, null,
-                React.createElement(Typography, { variant: "subtitle2", gutterBottom: true }, "Long name / email"),
-                React.createElement(ContactPopover, { name: "Christopher Alexander Montgomery", email: "christopher.montgomery@verylongdomain.example.com" },
-                    React.createElement(Chip, { label: "Christopher Alexander Montgomery", clickable: true }),
-                    React.createElement(ContactPopover.Actions, null,
-                        React.createElement(ContactPopover.ChatAction, { url: "https://chat.example.com/christopher" }),
-                        React.createElement(ContactPopover.VideoAction, { url: "https://meet.example.com/christopher" }),
-                        React.createElement(ContactPopover.CalendarAction, { url: "https://calendar.example.com/christopher" }))))));
-    },
+    render: () => (React.createElement(ContactPopover, { name: "John Doe", email: "john.doe@example.com" },
+        React.createElement(Chip, { label: "John Doe", clickable: true }),
+        React.createElement(ContactPopover.Actions, null,
+            React.createElement(ContactPopover.EmailAction, { url: "https://mail.example.com/john.doe" }),
+            React.createElement(ContactPopover.CalendarAction, { url: "https://calendar.example.com/john.doe" }),
+            React.createElement(ContactPopover.ChatAction, { url: "https://chat.example.com/john.doe" }),
+            React.createElement(ContactPopover.VideoAction, { url: "https://meet.example.com/john.doe" })))),
     play: async ({ canvas, userEvent }) => {
         await userEvent.click(canvas.getByText('John Doe'));
         await screen.findByText('john.doe@example.com');
     }
 };
+export const AllActionsVariants = {
+    render: () => (React.createElement(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 3 } },
+        React.createElement(Variant, { title: "Default \u2014 all actions" },
+            React.createElement(ContactPopover.Actions, null,
+                React.createElement(ContactPopover.EmailAction, { url: "https://mail.example.com/john.doe" }),
+                React.createElement(ContactPopover.CalendarAction, { url: "https://calendar.example.com/john.doe" }),
+                React.createElement(ContactPopover.ChatAction, { url: "https://chat.example.com/john.doe" }),
+                React.createElement(ContactPopover.VideoAction, { url: "https://meet.example.com/john.doe" }))),
+        React.createElement(Variant, { title: "Default \u2014 all actions \u2014 Disabled" },
+            React.createElement(ContactPopover.Actions, null,
+                React.createElement(ContactPopover.EmailAction, { disabled: true, url: "https://mail.example.com/jane.doe" }),
+                React.createElement(ContactPopover.CalendarAction, { disabled: true, url: "https://calendar.example.com/jane.doe" }),
+                React.createElement(ContactPopover.ChatAction, { disabled: true, url: "https://chat.example.com/jane.doe" }),
+                React.createElement(ContactPopover.VideoAction, { disabled: true, url: "https://meet.example.com/jane.doe" })))))
+};

package/dist/components/ContactPopover/ContactPopoverCalendarAction.js

@@ -4,6 +4,9 @@ import { IconButton, useTheme } from '@mui/material';
 import React from 'react';
 export const ContactPopoverCalendarAction = ({ url, disabled = false }) => {
     const theme = useTheme();
-    return (React.createElement(IconButton, { href: url, target: "_blank", rel: "noopener noreferrer", size: "small", disabled: disabled, sx: { border: `1px solid ${theme.vars.palette.divider}` } },
-        React.createElement(Icon, { icon: CalendarToday, size: 20, color: theme.vars.palette.text.icon })));
+    return (React.createElement(IconButton, { href: url, target: "_blank", rel: "noopener noreferrer", size: "small", disabled: disabled, sx: {
+            border: `1px solid ${theme.vars.palette.divider}`,
+            color: theme.vars.palette.text.icon
+        } },
+        React.createElement(Icon, { icon: CalendarToday, size: 20 })));
 };

package/dist/components/ContactPopover/ContactPopoverChatAction.js

@@ -4,6 +4,9 @@ import { IconButton, useTheme } from '@mui/material';
 import React from 'react';
 export const ContactPopoverChatAction = ({ url, disabled = false }) => {
     const theme = useTheme();
-    return (React.createElement(IconButton, { href: url, target: "_blank", rel: "noopener noreferrer", size: "small", disabled: disabled, sx: { border: `1px solid ${theme.vars.palette.divider}` } },
-        React.createElement(Icon, { icon: Discuss, size: 20, color: theme.vars.palette.text.icon })));
+    return (React.createElement(IconButton, { href: url, target: "_blank", rel: "noopener noreferrer", size: "small", disabled: disabled, sx: {
+            border: `1px solid ${theme.vars.palette.divider}`,
+            color: theme.vars.palette.text.icon
+        } },
+        React.createElement(Icon, { icon: Discuss, size: 20 })));
 };

package/dist/components/ContactPopover/ContactPopoverVideoAction.js

@@ -4,6 +4,9 @@ import { IconButton, useTheme } from '@mui/material';
 import React from 'react';
 export const ContactPopoverVideoAction = ({ url, disabled = false }) => {
     const theme = useTheme();
-    return (React.createElement(IconButton, { href: url, target: "_blank", rel: "noopener noreferrer", size: "small", disabled: disabled, sx: { border: `1px solid ${theme.vars.palette.divider}` } },
-        React.createElement(Icon, { icon: Camera, size: 20, color: theme.vars.palette.text.icon })));
+    return (React.createElement(IconButton, { href: url, target: "_blank", rel: "noopener noreferrer", size: "small", disabled: disabled, sx: {
+            border: `1px solid ${theme.vars.palette.divider}`,
+            color: theme.vars.palette.text.icon
+        } },
+        React.createElement(Icon, { icon: Camera, size: 20 })));
 };

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

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

package/dist/components/FilePath/FilePath.stories.js

@@ -0,0 +1,34 @@
+import { Box, Stack } from '@mui/material';
+import React from 'react';
+import FilePath from './index';
+const path = '/Partages reçus/Cozy 🗄 - Team/Customers & Partners 🛒/Xxxxxx (Xxxxxxxx)/4_Suivi opérationnel/Point de synchro';
+const widths = [150, 250, 400];
+const Section = ({ title, children }) => (React.createElement("section", null,
+    React.createElement("h3", null, title),
+    children));
+const meta = {
+    title: 'FilePath',
+    component: FilePath,
+    tags: ['autodocs'],
+    argTypes: {
+        children: { control: 'text' },
+        className: { control: 'text' }
+    }
+};
+export default meta;
+export const Default = {
+    args: {
+        children: path
+    }
+};
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 4 },
+        React.createElement(Section, { title: "Default" },
+            React.createElement(FilePath, null, path)),
+        React.createElement(Section, { title: "Container widths" },
+            React.createElement(Stack, { spacing: 1 }, widths.map(width => (React.createElement(Box, { key: width, sx: { width } },
+                React.createElement(FilePath, null, path)))))),
+        React.createElement(Section, { title: "Custom className" },
+            React.createElement(FilePath, { className: "u-error" }, path))))
+};

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface FilePathProps {
+    children?: string;
+    className?: string;
+}
+declare const FilePath: React.FC<FilePathProps>;
+export default FilePath;

package/dist/components/FilePath/index.js

@@ -0,0 +1,9 @@
+import { styled } from '@mui/material';
+import React from 'react';
+import MidEllipsis from '../MidEllipsis';
+const FilePathRoot = styled(MidEllipsis)(({ theme }) => ({
+    color: theme.palette.text.secondary,
+    fontSize: theme.typography.pxToRem(12)
+}));
+const FilePath = ({ children, className }) => (React.createElement(FilePathRoot, { className: className }, children));
+export default FilePath;

package/dist/index.d.ts

@@ -59,6 +59,7 @@ export { default as DropdownText } from './components/DropdownText';
 export { Empty, EmptySubTitle } from './components/Empty';
 export { ExtendableFab } from './components/ExtendableFab';
 export { default as Filename } from './components/Filename';
+export { default as FilePath } from './components/FilePath';
 export { default as ListItem } from './components/ListItem';
 export { default as ListItemButton } from './components/ListItemButton';
 export { default as ListItemText } from './components/ListItemText';
@@ -157,6 +158,7 @@ export type { DropdownButtonProps } from './components/DropdownButton';
 export type { DropdownTextProps, DropdownTextVariant } from './components/DropdownText';
 export type { ExtendableFabProps, ScrollOptions } from './components/ExtendableFab';
 export type { FilenameProps } from './components/Filename';
+export type { FilePathProps } from './components/FilePath';
 export type { ListItemProps, ListItemGutters, ListItemSize } from './components/ListItem';
 export type { ListItemButtonProps } from './components/ListItemButton';
 export type { ListItemTextProps } from './components/ListItemText';

package/dist/index.js

@@ -62,6 +62,7 @@ export { default as DropdownText } from './components/DropdownText';
 export { Empty, EmptySubTitle } from './components/Empty';
 export { ExtendableFab } from './components/ExtendableFab';
 export { default as Filename } from './components/Filename';
+export { default as FilePath } from './components/FilePath';
 export { default as ListItem } from './components/ListItem';
 export { default as ListItemButton } from './components/ListItemButton';
 export { default as ListItemText } from './components/ListItemText';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linagora/twake-mui",
   "type": "module",
-  "version": "16.0.0",
+  "version": "16.1.0",
   "description": "MUI v9 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",
@@ -100,7 +100,7 @@
     "eslint-plugin-storybook": "10.3.5",
     "jsdom": "^30.1.2",
     "lodash": "4.18.1",
-    "playwright": "1.60.0",
+    "playwright": "1.64.1",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "storybook": "10.3.5",