@linagora/twake-mui 14.1.0 → 14.3.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# @linagora/twake-mui [14.3.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@14.2.0...@linagora/twake-mui@14.3.0) (2026-10-15)
+
+
+### Features
+
+* **twake-mui:** Migrate PasswordField from cozy-ui ([5d39ddd](https://github.com/linagora/twake-ui/commit/5d39ddd8c7616e82c9f6c89cabe1a53b6b553864))
+
+# @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/components/PasswordField/PasswordField.stories.d.ts

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

package/dist/components/PasswordField/PasswordField.stories.js

@@ -0,0 +1,43 @@
+import { Stack } from '@mui/material';
+import React from 'react';
+import PasswordField from './index';
+// TextFieldProps is a union, which Storybook cannot infer args from
+const meta = {
+    title: 'PasswordField',
+    component: PasswordField,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs'],
+    argTypes: {
+        label: { control: 'text' },
+        placeholder: { control: 'text' },
+        helperText: { control: 'text' },
+        size: { control: 'select', options: ['small', 'medium'] },
+        disabled: { control: 'boolean' },
+        error: { control: 'boolean' },
+        fullWidth: { control: 'boolean' }
+    }
+};
+export default meta;
+export const Default = {
+    args: {
+        defaultValue: 'Cl4ude€st1Nu@ge'
+    }
+};
+const Row = ({ title, children }) => (React.createElement("section", null,
+    React.createElement("h3", { style: { marginBottom: '12px' } }, title),
+    React.createElement(Stack, { direction: "row", spacing: 2, useFlexGap: true, sx: { flexWrap: 'wrap' } }, children)));
+// Visual Regression - Combined view for Argos testing
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 4 },
+        React.createElement(Row, { title: "Default" },
+            React.createElement(PasswordField, { defaultValue: "Cl4ude\u20ACst1Nu@ge" }),
+            React.createElement(PasswordField, { label: "Password", defaultValue: "Cl4ude\u20ACst1Nu@ge" }),
+            React.createElement(PasswordField, { label: "Password" })),
+        React.createElement(Row, { title: "Sizes" },
+            React.createElement(PasswordField, { size: "small", defaultValue: "Cl4ude\u20ACst1Nu@ge" }),
+            React.createElement(PasswordField, { size: "medium", defaultValue: "Cl4ude\u20ACst1Nu@ge" })),
+        React.createElement(Row, { title: "States" },
+            React.createElement(PasswordField, { label: "Disabled", disabled: true, defaultValue: "Cl4ude\u20ACst1Nu@ge" }),
+            React.createElement(PasswordField, { label: "Error", error: true, helperText: "Wrong password", defaultValue: "Cl4ude\u20ACst1Nu@ge" }))))
+};

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

@@ -0,0 +1,6 @@
+import { TextFieldProps } from '@mui/material';
+import React from 'react';
+export type PasswordFieldProps = TextFieldProps;
+/** Password field with a button to show or hide its value */
+declare const PasswordField: ({ slotProps, ...props }: PasswordFieldProps) => React.ReactElement;
+export default PasswordField;

package/dist/components/PasswordField/index.js

@@ -0,0 +1,28 @@
+import { Eye, EyeClosed, Icon } from '@linagora/twake-icons';
+import { IconButton, InputAdornment, TextField } from '@mui/material';
+import { mergeSlotProps } from '@mui/material/utils';
+import React, { useState } from 'react';
+import { useExtendI18n, useI18n } from 'twake-i18n';
+import de from './locales/de.json';
+import en from './locales/en.json';
+import es from './locales/es.json';
+import fr from './locales/fr.json';
+import it from './locales/it.json';
+import ru from './locales/ru.json';
+import vi from './locales/vi.json';
+const locales = { de, en, es, fr, it, ru, vi };
+/** Password field with a button to show or hide its value */
+const PasswordField = ({ slotProps, ...props }) => {
+    useExtendI18n(locales);
+    const { t } = useI18n();
+    const [hidden, setHidden] = useState(true);
+    return (React.createElement(TextField, { type: hidden ? 'password' : 'text', ...props, slotProps: {
+            ...slotProps,
+            input: mergeSlotProps(slotProps?.input, {
+                endAdornment: (React.createElement(InputAdornment, { position: "end" },
+                    React.createElement(IconButton, { "aria-label": hidden ? t('PasswordField.show') : t('PasswordField.hide'), disabled: props.disabled, onClick: () => setHidden(current => !current), edge: "end" },
+                        React.createElement(Icon, { icon: hidden ? Eye : EyeClosed }))))
+            })
+        } }));
+};
+export default PasswordField;

package/dist/components/PasswordField/locales/de.json

@@ -0,0 +1,6 @@
+{
+    "PasswordField": {
+        "show": "Passwort anzeigen",
+        "hide": "Passwort verbergen"
+    }
+}

package/dist/components/PasswordField/locales/en.json

@@ -0,0 +1,6 @@
+{
+    "PasswordField": {
+        "show": "Show password",
+        "hide": "Hide password"
+    }
+}

package/dist/components/PasswordField/locales/es.json

@@ -0,0 +1,6 @@
+{
+    "PasswordField": {
+        "show": "Mostrar contraseña",
+        "hide": "Ocultar contraseña"
+    }
+}

package/dist/components/PasswordField/locales/fr.json

@@ -0,0 +1,6 @@
+{
+    "PasswordField": {
+        "show": "Afficher le mot de passe",
+        "hide": "Masquer le mot de passe"
+    }
+}

package/dist/components/PasswordField/locales/it.json

@@ -0,0 +1,6 @@
+{
+    "PasswordField": {
+        "show": "Mostra password",
+        "hide": "Nascondi password"
+    }
+}

package/dist/components/PasswordField/locales/ru.json

@@ -0,0 +1,6 @@
+{
+    "PasswordField": {
+        "show": "Показать пароль",
+        "hide": "Скрыть пароль"
+    }
+}

package/dist/components/PasswordField/locales/vi.json

@@ -0,0 +1,6 @@
+{
+    "PasswordField": {
+        "show": "Hiển thị mật khẩu",
+        "hide": "Ẩn mật khẩu"
+    }
+}

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';
@@ -71,6 +72,7 @@ export { NavIcon } from './components/NavIcon';
 export { default as NavText } from './components/NavText';
 export { NavDesktopLimiter } from './components/NavDesktopLimiter';
 export { NavDesktopDropdown } from './components/NavDesktopDropdown';
+export { default as PasswordField } from './components/PasswordField';
 export { nameToColor, supportedColors, getInitials } from './components/Avatar/helpers';
 export { COLORS } from './components/ColorList/helpers';
 export { default as AccordionExpandIcon } from './components/AccordionExpandIcon';
@@ -125,6 +127,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';
@@ -147,6 +150,7 @@ export type { NavDropdownProps } from './components/NavLink/NavDropdown';
 export type { NavIconProps } from './components/NavIcon';
 export type { NavTextProps } from './components/NavText';
 export type { NavDesktopLimiterProps } from './components/NavDesktopLimiter';
+export type { PasswordFieldProps } from './components/PasswordField';
 export type { NavDesktopDropdownProps } from './components/NavDesktopDropdown';
 export type { VirtualizedTableProps, VirtualizedTableColumn, VirtualizedTableRow } from './components/VirtualizedTable';
 export type { Breakpoints } from './hooks/useBreakpoints';

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';
@@ -74,6 +75,7 @@ export { NavIcon } from './components/NavIcon';
 export { default as NavText } from './components/NavText';
 export { NavDesktopLimiter } from './components/NavDesktopLimiter';
 export { NavDesktopDropdown } from './components/NavDesktopDropdown';
+export { default as PasswordField } from './components/PasswordField';
 export { nameToColor, supportedColors, getInitials } from './components/Avatar/helpers';
 export { COLORS } from './components/ColorList/helpers';
 export { default as AccordionExpandIcon } from './components/AccordionExpandIcon';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linagora/twake-mui",
   "type": "module",
-  "version": "14.1.0",
+  "version": "14.3.0",
   "description": "MUI v9 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",