@linagora/twake-mui 14.2.0 → 14.4.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# @linagora/twake-mui [14.4.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@14.3.0...@linagora/twake-mui@14.4.0) (2026-10-15)
+
+
+### Features
+
+* **twake-mui:** Migrate AlertProvider from cozy-ui ([9abdc95](https://github.com/linagora/twake-ui/commit/9abdc95037d43d96d2cdcc5c498567f0e065d018))
+
+# @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/ActionsMenu/Actions/favorites.d.ts

@@ -1,4 +1,5 @@
-import { Action, ActionDocument, ShowAlert } from '../types';
+import { ShowAlert } from '../../../providers/AlertProvider/useAlert';
+import { Action, ActionDocument } from '../types';
 export interface FavoritesActionOptions {
     client: {
         save: (doc: ActionDocument) => Promise<unknown>;

package/dist/components/ActionsMenu/types.d.ts

@@ -57,12 +57,6 @@ export interface Action<Options extends object = ActionCallbackOptions> {
 /** An action keyed by its name, as built by `makeActions` */
 export type ActionObject = Record<string, Action>;
 export type ActionFactory<FactoryOptions extends object = object> = (options: FactoryOptions) => Action;
-export interface ShowAlertOptions {
-    message: string;
-    severity: 'success' | 'error' | 'info' | 'warning';
-    variant?: 'filled' | 'outlined' | 'standard';
-}
-export type ShowAlert = (options: ShowAlertOptions) => void;
 export interface WebLinkOptions {
     slug: string;
     cozyUrl: string;

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/components/PointerAlert/PointerAlert.stories.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-import { DeviceLaptop, Download, Icon } from '@linagora/twake-icons';
+import { Download, Icon } from '@linagora/twake-icons';
 import { AlertTitle, Button, Stack, Typography } from '@mui/material';
 import React from 'react';
 import PointerAlert from './index';
@@ -39,8 +39,7 @@ const meta = {
             control: 'select',
             options: severities,
             description: 'Overrides the colour taken from `severity`'
-        },
-        square: { control: 'boolean' }
+        }
     }
 };
 export default meta;
@@ -73,14 +72,6 @@ export const Screenshot = {
             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,

package/dist/index.d.ts

@@ -5,7 +5,7 @@ export { default as Autocomplete } from '@mui/material/Autocomplete';
 export { makePalette } from './lib/makePalette';
 export { theme } from './lib/theme';
 export { radius } from './lib/radius';
-export { TwakeMuiThemeProvider } from './components/ThemeProvider';
+export { TwakeMuiThemeProvider } from './providers/ThemeProvider';
 export { default as ActionsBar } from './components/ActionsBar';
 export { default as ActionsMenu } from './components/ActionsMenu';
 export { default as ActionsMenuWrapper } from './components/ActionsMenu/ActionsMenuWrapper';
@@ -57,6 +57,10 @@ export { default as LoadMore } from './components/LoadMore';
 export { default as Markdown } from './components/Markdown';
 export { default as MidEllipsis } from './components/MidEllipsis';
 export { default as PointerAlert } from './components/PointerAlert';
+export type { AlertProviderProps } from './providers/AlertProvider';
+export type { AlertContextValue, ShowAlert, ShowAlertOptions } from './providers/AlertProvider/useAlert';
+export { default as AlertProvider } from './providers/AlertProvider';
+export { useAlert } from './providers/AlertProvider/useAlert';
 export { default as ProgressionBanner } from './components/ProgressionBanner';
 export { Tabs, default as TabsDefault } from './components/Tabs';
 export { Switch, default as SwitchDefault } from './components/Switch';
@@ -72,6 +76,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';
@@ -91,7 +96,7 @@ export type { ActionsMenuItemProps } from './components/ActionsMenu/ActionsMenuI
 export type { ActionsMenuMobileHeaderProps } from './components/ActionsMenu/ActionsMenuMobileHeader';
 export type { ActionsMenuButtonProps } from './components/ActionsMenu/ActionsMenuButton';
 export type { ActionsItemsProps } from './components/ActionsMenu/ActionsItems';
-export type { Action, ActionCallbackOptions, ActionComponent, ActionComponentProps, ActionComponentSlotProps, ActionDocument, ActionFactory, ActionObject, ActionTranslate, GenerateWebLink, ShowAlert, ShowAlertOptions, WebLinkActionOptions, WebLinkClient, WebLinkOptions } from './components/ActionsMenu/types';
+export type { Action, ActionCallbackOptions, ActionComponent, ActionComponentProps, ActionComponentSlotProps, ActionDocument, ActionFactory, ActionObject, ActionTranslate, GenerateWebLink, WebLinkActionOptions, WebLinkClient, WebLinkOptions } from './components/ActionsMenu/types';
 export type { MakeActionComponentOptions, MakeActionOptions } from './components/ActionsMenu/Actions/makeAction';
 export type { AppWebLinkOptions, FetchBlobFileById, MakePdfBlobOptions } from './components/ActionsMenu/Actions/helpers';
 export type { WrapTextToLinesOptions, PdfCursor, PushNewPageIfNeededOptions, DrawWrappedTextOptions } from './components/ActionsMenu/Actions/pdfHelpers';
@@ -149,6 +154,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

@@ -8,7 +8,7 @@ export { makePalette } from './lib/makePalette';
 export { theme } from './lib/theme';
 export { radius } from './lib/radius';
 // COMPONENTS & HELPERS
-export { TwakeMuiThemeProvider } from './components/ThemeProvider';
+export { TwakeMuiThemeProvider } from './providers/ThemeProvider';
 export { default as ActionsBar } from './components/ActionsBar';
 export { default as ActionsMenu } from './components/ActionsMenu';
 export { default as ActionsMenuWrapper } from './components/ActionsMenu/ActionsMenuWrapper';
@@ -60,6 +60,8 @@ export { default as LoadMore } from './components/LoadMore';
 export { default as Markdown } from './components/Markdown';
 export { default as MidEllipsis } from './components/MidEllipsis';
 export { default as PointerAlert } from './components/PointerAlert';
+export { default as AlertProvider } from './providers/AlertProvider';
+export { useAlert } from './providers/AlertProvider/useAlert';
 export { default as ProgressionBanner } from './components/ProgressionBanner';
 export { Tabs, default as TabsDefault } from './components/Tabs';
 export { Switch, default as SwitchDefault } from './components/Switch';
@@ -75,6 +77,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/dist/providers/AlertProvider/AlertProvider.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ShowAlertOptions } from './useAlert';
+interface StoryArgs extends ShowAlertOptions {
+    closable: boolean;
+}
+declare const meta: Meta<StoryArgs>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/providers/AlertProvider/AlertProvider.stories.js

@@ -0,0 +1,57 @@
+import { Button } from '@mui/material';
+import React from 'react';
+import AlertProvider from './index';
+import { useAlert } from './useAlert';
+const severities = [
+    'primary',
+    'secondary',
+    'success',
+    'error',
+    'warning',
+    'info'
+];
+const variants = ['filled', 'standard', 'outlined'];
+const makeOptions = ({ closable, ...options }) => closable ? options : { ...options, onClose: undefined };
+const meta = {
+    title: 'AlertProvider',
+    parameters: { layout: 'centered' },
+    tags: ['autodocs'],
+    argTypes: {
+        message: { control: 'text' },
+        title: { control: 'text' },
+        severity: { control: 'select', options: severities },
+        variant: { control: 'select', options: variants },
+        icon: {
+            control: 'select',
+            options: ['default', 'none'],
+            mapping: { default: undefined, none: false }
+        },
+        duration: {
+            control: 'number',
+            description: 'Milliseconds before the alert hides, `null` to keep it open'
+        },
+        noTimeOut: { control: 'boolean' },
+        noClickAway: { control: 'boolean' },
+        closable: {
+            control: 'boolean',
+            description: 'Story only: passes `onClose: undefined` when off'
+        }
+    }
+};
+export default meta;
+const ShowAlertButton = ({ args }) => {
+    const { showAlert } = useAlert();
+    return (React.createElement(Button, { onClick: () => showAlert(makeOptions(args)) }, "Show alert"));
+};
+export const Default = {
+    args: {
+        message: 'Alert message',
+        severity: 'success',
+        variant: 'filled',
+        noTimeOut: false,
+        noClickAway: false,
+        closable: true
+    },
+    render: args => (React.createElement(AlertProvider, null,
+        React.createElement(ShowAlertButton, { args: args })))
+};

package/dist/providers/AlertProvider/index.d.ts

@@ -0,0 +1,6 @@
+import React, { ReactNode } from 'react';
+export interface AlertProviderProps {
+    children?: ReactNode;
+}
+declare const AlertProvider: React.FC<AlertProviderProps>;
+export default AlertProvider;

package/dist/providers/AlertProvider/index.js

@@ -0,0 +1,25 @@
+import { Alert, AlertTitle, Snackbar } from '@mui/material';
+import React, { useMemo, useState } from 'react';
+import { AlertContext } from './useAlert';
+const AlertProvider = ({ children }) => {
+    const [state, setState] = useState({ message: '', open: false });
+    const { open, message, title, duration, noTimeOut, noClickAway, ...alertProps } = state;
+    const value = useMemo(() => ({
+        showAlert: (options) => setState({ ...options, open: true })
+    }), []);
+    const close = () => setState(current => ({ ...current, open: false }));
+    const handleSnackbarClose = (_event, reason) => {
+        if (reason === 'clickaway' && noClickAway)
+            return;
+        if (reason === 'timeout' && noTimeOut)
+            return;
+        close();
+    };
+    return (React.createElement(AlertContext.Provider, { value: value },
+        children,
+        React.createElement(Snackbar, { open: open, autoHideDuration: duration, onClose: handleSnackbarClose },
+            React.createElement(Alert, { variant: "filled", elevation: 6, onClose: close, ...alertProps },
+                title && React.createElement(AlertTitle, null, title),
+                message))));
+};
+export default AlertProvider;

package/dist/providers/AlertProvider/useAlert.d.ts

@@ -0,0 +1,17 @@
+import type { AlertProps } from '@mui/material';
+export interface ShowAlertOptions extends Omit<AlertProps, 'title'> {
+    message: string;
+    title?: string;
+    /** Milliseconds before the alert hides, `null` to keep it open */
+    duration?: number | null;
+    /** Ignores the timeout set by `duration` */
+    noTimeOut?: boolean;
+    /** Keeps the alert open on a click outside of it */
+    noClickAway?: boolean;
+}
+export type ShowAlert = (options: ShowAlertOptions) => void;
+export interface AlertContextValue {
+    showAlert: ShowAlert;
+}
+export declare const AlertContext: import("react").Context<AlertContextValue | null>;
+export declare const useAlert: () => AlertContextValue;

package/dist/providers/AlertProvider/useAlert.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+export const AlertContext = createContext(null);
+export const useAlert = () => {
+    const context = useContext(AlertContext);
+    if (!context) {
+        throw new Error('useAlert must be used within a AlertProvider');
+    }
+    return context;
+};

package/dist/stories/ThemePlayground.stories.js

@@ -1,7 +1,7 @@
 import { Button, Stack, Chip } from '@mui/material';
 import React from 'react';
-import { TwakeMuiThemeProvider } from '../components/ThemeProvider';
 import { makePalette } from '../lib/makePalette';
+import { TwakeMuiThemeProvider } from '../providers/ThemeProvider';
 const CUSTOM_PALETTE = {
     Primary: {
         50: '#FFF9F6',

package/package.json

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