@linagora/twake-mui 14.1.0 → 14.2.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# @linagora/twake-mui [14.2.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@14.1.0...@linagora/twake-mui@14.2.0) (2026-10-15)
+
+
+### Features
+
+* **twake-mui:** Migrate Filename from cozy-ui ([84f4803](https://github.com/linagora/twake-ui/commit/84f4803fedbfc211dabef69717570d75500369b4))
+
 # @linagora/twake-mui [14.1.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@14.0.0...@linagora/twake-mui@14.1.0) (2026-10-15)
 
 

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

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

package/dist/components/Filename/Filename.stories.js

@@ -0,0 +1,95 @@
+import { File, Icon } from '@linagora/twake-icons';
+import { Box, Stack } from '@mui/material';
+import React from 'react';
+import Filename from './index';
+const longName = 'Lacinia condimentum potenti id est tortor dictumst lectus tincidunt hac ultricies, curae mattis nisi neque sodales sagittis dui nulla aliquam turpis eros, finibus ac iaculis dictum et orci elit posuere ex and this is the end';
+const shortName = 'Lacinia condimentum this is the end';
+const path = '/some/folder/and/subfolder';
+const icon = React.createElement(Icon, { icon: File, size: 32 });
+const examples = [
+    {
+        title: 'Icon, extension and path',
+        props: { icon, filename: longName, extension: '.pdf', path }
+    },
+    {
+        title: 'Middle ellipsis',
+        props: {
+            icon,
+            filename: longName,
+            extension: '.pdf',
+            path,
+            midEllipsis: true
+        }
+    },
+    {
+        title: 'Without path',
+        props: { icon, filename: longName, extension: '.pdf' }
+    },
+    {
+        title: 'Without path, middle ellipsis',
+        props: { icon, filename: longName, extension: '.pdf', midEllipsis: true }
+    },
+    {
+        title: 'Body1 variant',
+        props: {
+            icon,
+            filename: longName,
+            extension: '.pdf',
+            path,
+            variant: 'body1'
+        }
+    },
+    {
+        title: 'Without icon',
+        props: { filename: longName, extension: '.pdf', path }
+    },
+    {
+        title: 'Without extension',
+        props: { icon, filename: longName, path }
+    },
+    {
+        title: 'Short name',
+        props: { icon, filename: shortName, extension: '.pdf', path }
+    },
+    {
+        title: 'Short name without path',
+        props: { icon, filename: shortName, extension: '.pdf' }
+    }
+];
+const Section = ({ title, children }) => (React.createElement("section", null,
+    React.createElement("h3", null, title),
+    children));
+const meta = {
+    title: 'Filename',
+    component: Filename,
+    tags: ['autodocs'],
+    argTypes: {
+        icon: { control: false },
+        filename: { control: 'text' },
+        extension: { control: 'text' },
+        midEllipsis: { control: 'boolean' },
+        variant: {
+            control: 'select',
+            options: ['h6', 'body1', 'body2', 'subtitle1', 'caption']
+        },
+        path: { control: 'text' }
+    }
+};
+export default meta;
+export const Default = {
+    args: {
+        icon,
+        filename: longName,
+        extension: '.pdf',
+        midEllipsis: false,
+        variant: 'h6',
+        path
+    },
+    render: args => (React.createElement(Box, { sx: { maxWidth: 400 } },
+        React.createElement(Filename, { ...args })))
+};
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 4, sx: { maxWidth: 400 } }, examples.map(({ title, props }) => (React.createElement(Section, { key: title, title: title },
+        React.createElement(Filename, { ...props }))))))
+};

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

@@ -0,0 +1,16 @@
+import { TypographyProps } from '@mui/material';
+import React from 'react';
+export interface FilenameProps {
+    icon?: React.ReactNode;
+    /** Folder or file name */
+    filename?: string;
+    /** File extension, rendered in the secondary text color */
+    extension?: string;
+    /** Truncates the filename in its middle instead of its end */
+    midEllipsis?: boolean;
+    variant?: TypographyProps['variant'];
+    /** Shown on a second line, under the name */
+    path?: React.ReactNode;
+}
+declare const Filename: React.FC<FilenameProps>;
+export default Filename;

package/dist/components/Filename/index.js

@@ -0,0 +1,20 @@
+import { Box, Typography } from '@mui/material';
+import React from 'react';
+import MidEllipsis from '../MidEllipsis';
+const NameAndExtension = ({ filename, extension, midEllipsis, variant }) => (React.createElement(React.Fragment, null,
+    filename && (React.createElement(Typography, { variant: variant, component: "span", noWrap: true }, midEllipsis ? React.createElement(MidEllipsis, { text: filename }) : filename)),
+    extension && (React.createElement(Typography, { variant: variant, component: "span", color: "textSecondary" }, extension))));
+const Filename = ({ icon, filename, extension, midEllipsis = false, variant = 'h6', path }) => {
+    const nameAndExtension = (React.createElement(NameAndExtension, { filename: filename, extension: extension, midEllipsis: midEllipsis, variant: variant }));
+    const iconBox = icon && (React.createElement(Box, { className: "u-flex u-pos-relative u-mr-1", sx: path ? { float: 'left', top: 4 } : undefined }, icon));
+    if (!path) {
+        return (React.createElement("div", { className: "u-flex u-flex-items-center" },
+            iconBox,
+            nameAndExtension));
+    }
+    return (React.createElement(React.Fragment, null,
+        iconBox,
+        React.createElement("div", { className: "u-flex" }, nameAndExtension),
+        React.createElement(Typography, { variant: "body2", component: "div", noWrap: true }, path)));
+};
+export default Filename;

package/dist/index.d.ts

@@ -46,6 +46,7 @@ export { default as DropdownButton } from './components/DropdownButton';
 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 ListItem } from './components/ListItem';
 export { default as ListItemButton } from './components/ListItemButton';
 export { default as ListItemText } from './components/ListItemText';
@@ -125,6 +126,7 @@ export type { EmptyProps, EmptyIconSize, EmptyComponentsProps } from './componen
 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 { ListItemProps, ListItemGutters, ListItemSize } from './components/ListItem';
 export type { ListItemButtonProps } from './components/ListItemButton';
 export type { ListItemTextProps } from './components/ListItemText';

package/dist/index.js

@@ -49,6 +49,7 @@ export { default as DropdownButton } from './components/DropdownButton';
 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 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": "14.1.0",
+  "version": "14.2.0",
   "description": "MUI v9 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",