@linagora/twake-mui 14.2.0 → 14.3.0

package/CHANGELOG.md

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

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

@@ -72,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';
@@ -149,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

@@ -75,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.2.0",
+  "version": "14.3.0",
   "description": "MUI v9 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",