@linagora/twake-mui 15.2.0 → 16.0.0

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# @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)
+
+
+### Code Refactoring
+
+* **twake-mui:** Export Dialog as default only ([ed447eb](https://github.com/linagora/twake-ui/commit/ed447eb8041974c1b4d3b55bb7160740003a787e))
+
+
+### Features
+
+* **twake-mui:** Migrate ConfirmDialog from cozy-ui ([62098f2](https://github.com/linagora/twake-ui/commit/62098f26bafbf660126e9a408fbb650d3914187b))
+* **twake-mui:** Migrate FixedActionsDialog from cozy-ui ([61c34b1](https://github.com/linagora/twake-ui/commit/61c34b12069ab66d59498342790a26508f00d8a2))
+* **twake-mui:** Migrate FixedDialog from cozy-ui ([bb6ba7f](https://github.com/linagora/twake-ui/commit/bb6ba7f66938fff8bd8cc51ab9c17c7554119394))
+* **twake-mui:** Migrate IllustrationDialog from cozy-ui ([ba5525e](https://github.com/linagora/twake-ui/commit/ba5525ef40e9ec4d018c62ef96f9d6d8806c17fa))
+* **twake-mui:** Migrate InstallFlagshipAppDialog from cozy-ui ([4869572](https://github.com/linagora/twake-ui/commit/48695729c9c89651d21f10140fa3fd83c6e2b1d4))
+* **twake-mui:** Migrate PermissionDialog from cozy-ui ([b8f9628](https://github.com/linagora/twake-ui/commit/b8f962838b91c23b85d8528b07504be79d46f33f))
+* **twake-mui:** Migrate ShortcutDialog from cozy-ui ([74c0614](https://github.com/linagora/twake-ui/commit/74c061468784736d77ef3a738b20ba4d0bfece15))
+* **twake-mui:** Migrate StandardDialog from cozy-ui ([a43530f](https://github.com/linagora/twake-ui/commit/a43530f7906a39a518ae97a15b0e006d1e46ab71))
+
+
+### BREAKING CHANGES
+
+* **twake-mui:** DialogDefault is no longer exported. Import Dialog
+instead.
+
 # @linagora/twake-mui [15.2.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@15.1.0...@linagora/twake-mui@15.2.0) (2026-10-19)
 
 

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

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

package/dist/components/Dialog/Dialog.stories.js

@@ -1,7 +1,7 @@
 import { CrossMedium, FileTypeFolder, FileTypeText, Icon } from '@linagora/twake-icons';
 import { Button, DialogActions, DialogContent, DialogContentText, DialogTitle, Divider, IconButton, List, ListItemIcon, Stack } from '@mui/material';
 import React from 'react';
-import { Dialog } from './index';
+import Dialog from './index';
 import ListItemButton from '../ListItemButton';
 import ListItemText from '../ListItemText';
 const sizes = ['small', 'medium', 'large', 'full'];

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

@@ -5,5 +5,5 @@ export interface DialogProps extends MuiDialogProps {
     /** Paper width. Every size but `small` goes full screen on mobile */
     size?: DialogSize;
 }
-export declare const Dialog: React.FC<DialogProps>;
+declare const Dialog: React.FC<DialogProps>;
 export default Dialog;

package/dist/components/Dialog/index.js

@@ -2,7 +2,7 @@ import { Dialog as MuiDialog } from '@mui/material';
 import cx from 'classnames';
 import React from 'react';
 import { useBreakpoints } from '../../hooks/useBreakpoints';
-export const Dialog = ({ size = 'medium', fullScreen, classes, ...props }) => {
+const Dialog = ({ size = 'medium', fullScreen, classes, ...props }) => {
     const { isMobile } = useBreakpoints();
     return (React.createElement(MuiDialog, { fullScreen: fullScreen ?? (size !== 'small' && isMobile), classes: { ...classes, paper: cx(size, classes?.paper) }, ...props }));
 };

package/dist/components/Dialogs/ConfirmDialog.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { DialogSectionsProps } from './types';
+import { DialogLayoutProps } from './useDialogLayout';
+export interface ConfirmDialogProps extends DialogLayoutProps, DialogSectionsProps {
+}
+/** Small dialog asking to confirm an action, its title scrolling with the content */
+declare const ConfirmDialog: ({ size, title, content, actions, actionsLayout, ...props }: ConfirmDialogProps) => React.ReactElement;
+export default ConfirmDialog;

package/dist/components/Dialogs/ConfirmDialog.js

@@ -0,0 +1,16 @@
+import { DialogContent, DialogTitle } from '@mui/material';
+import React from 'react';
+import DialogFluidContent from './DialogFluidContent';
+import DialogNavButtons from './DialogNavButtons';
+import { useDialogLayout } from './useDialogLayout';
+import Dialog from '../Dialog';
+/** Small dialog asking to confirm an action, its title scrolling with the content */
+const ConfirmDialog = ({ size = 'small', title, content, actions, actionsLayout, ...props }) => {
+    const { id, fullScreen, dialogProps, dialogTitleProps, dialogActionsProps, dialogContentProps } = useDialogLayout({ ...props, size, isFluidTitle: true });
+    return (React.createElement(Dialog, { ...dialogProps },
+        React.createElement(DialogNavButtons, { id: id, fullScreen: fullScreen, onClose: props.onClose, onBack: props.onBack }),
+        React.createElement(DialogContent, { ...dialogContentProps },
+            React.createElement(DialogFluidContent, { header: title && (React.createElement("div", { className: "dialogTitleFluidContainer" },
+                    React.createElement(DialogTitle, { ...dialogTitleProps }, title))), content: content, actions: actions, actionsLayout: actionsLayout, dialogActionsProps: dialogActionsProps }))));
+};
+export default ConfirmDialog;

package/dist/components/Dialogs/DialogBackButton.d.ts

@@ -0,0 +1,8 @@
+import { IconButtonProps } from '@mui/material';
+import React from 'react';
+export interface DialogBackButtonProps extends IconButtonProps {
+    onClick: NonNullable<IconButtonProps['onClick']>;
+}
+/** Back button pinned to the top left corner of a dialog */
+declare const DialogBackButton: ({ className, ...props }: DialogBackButtonProps) => React.ReactElement;
+export default DialogBackButton;

package/dist/components/Dialogs/DialogBackButton.js

@@ -0,0 +1,14 @@
+import { Icon, Previous } from '@linagora/twake-icons';
+import { IconButton } from '@mui/material';
+import cx from 'classnames';
+import React from 'react';
+import { useExtendI18n, useI18n } from 'twake-i18n';
+import { locales } from './locales';
+/** Back button pinned to the top left corner of a dialog */
+const DialogBackButton = ({ className, ...props }) => {
+    useExtendI18n(locales);
+    const { t } = useI18n();
+    return (React.createElement(IconButton, { ...props, "aria-label": t('Dialogs.backButton'), className: cx('dialogIconButton', 'dialogBackButton', className), size: "medium" },
+        React.createElement(Icon, { icon: Previous })));
+};
+export default DialogBackButton;

package/dist/components/Dialogs/DialogCloseButton.d.ts

@@ -0,0 +1,8 @@
+import { IconButtonProps } from '@mui/material';
+import React from 'react';
+export interface DialogCloseButtonProps extends IconButtonProps {
+    onClick: NonNullable<IconButtonProps['onClick']>;
+}
+/** Close button pinned to the top right corner of a dialog */
+declare const DialogCloseButton: ({ className, ...props }: DialogCloseButtonProps) => React.ReactElement;
+export default DialogCloseButton;

package/dist/components/Dialogs/DialogCloseButton.js

@@ -0,0 +1,14 @@
+import { CrossMedium, Icon } from '@linagora/twake-icons';
+import { IconButton } from '@mui/material';
+import cx from 'classnames';
+import React from 'react';
+import { useExtendI18n, useI18n } from 'twake-i18n';
+import { locales } from './locales';
+/** Close button pinned to the top right corner of a dialog */
+const DialogCloseButton = ({ className, ...props }) => {
+    useExtendI18n(locales);
+    const { t } = useI18n();
+    return (React.createElement(IconButton, { ...props, "aria-label": t('Dialogs.closeButton'), className: cx('dialogIconButton', 'dialogCloseButton', className), size: "medium" },
+        React.createElement(Icon, { icon: CrossMedium })));
+};
+export default DialogCloseButton;

package/dist/components/Dialogs/DialogFluidContent.d.ts

@@ -0,0 +1,12 @@
+import { DialogActionsProps } from '@mui/material';
+import React from 'react';
+import type { DialogSectionsProps } from './types';
+export interface DialogFluidContentProps extends Omit<DialogSectionsProps, 'title'> {
+    /** Rendered above the content, inside the scrolling area */
+    header?: React.ReactNode;
+    dialogActionsProps: DialogActionsProps;
+    className?: string;
+}
+/** Content of a dialog whose actions follow the content, and stick to the bottom of the screen on mobile */
+declare const DialogFluidContent: ({ header, content, actions, actionsLayout, dialogActionsProps, className }: DialogFluidContentProps) => React.ReactElement;
+export default DialogFluidContent;

package/dist/components/Dialogs/DialogFluidContent.js

@@ -0,0 +1,11 @@
+import { DialogActions } from '@mui/material';
+import cx from 'classnames';
+import React from 'react';
+/** Content of a dialog whose actions follow the content, and stick to the bottom of the screen on mobile */
+const DialogFluidContent = ({ header, content, actions, actionsLayout, dialogActionsProps, className }) => (React.createElement("div", { className: cx('dialogContentInner withFluidActions', className) },
+    header,
+    React.createElement("div", { className: cx('dialogContentWrapper', {
+            withActions: Boolean(actions)
+        }) }, content),
+    actions && (React.createElement(DialogActions, { ...dialogActionsProps, disableSpacing: true, className: cx('dialogActionsFluid', { columnLayout: actionsLayout === 'column' }, dialogActionsProps.className) }, actions))));
+export default DialogFluidContent;

package/dist/components/Dialogs/DialogNavButtons.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { DialogLayoutProps } from './useDialogLayout';
+export interface DialogNavButtonsProps extends Pick<DialogLayoutProps, 'onClose' | 'onBack'> {
+    id: string;
+    fullScreen: boolean;
+}
+/** Close and back buttons of a dialog. On full screen, a single back button calls `onBack`, or `onClose` without it */
+declare const DialogNavButtons: ({ id, fullScreen, onClose, onBack }: DialogNavButtonsProps) => React.ReactElement | null;
+export default DialogNavButtons;

package/dist/components/Dialogs/DialogNavButtons.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import DialogBackButton from './DialogBackButton';
+import DialogCloseButton from './DialogCloseButton';
+/** Close and back buttons of a dialog. On full screen, a single back button calls `onBack`, or `onClose` without it */
+const DialogNavButtons = ({ id, fullScreen, onClose, onBack }) => {
+    const onBackOrClose = onBack ?? onClose;
+    if (fullScreen) {
+        return onBackOrClose ? (React.createElement(DialogBackButton, { onClick: onBackOrClose, "data-testid": `modal-backclose-button-${id}` })) : null;
+    }
+    return (React.createElement(React.Fragment, null,
+        onClose && (React.createElement(DialogCloseButton, { onClick: onClose, "data-testid": `modal-close-button-${id}` })),
+        onBack && (React.createElement(DialogBackButton, { onClick: onBack, "data-testid": `modal-back-button-${id}` }))));
+};
+export default DialogNavButtons;

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

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
+import { StandardDialogProps } from './StandardDialog';
+declare const dialogs: {
+    StandardDialog: ({ title, content, actions, actionsLayout, ...props }: StandardDialogProps) => React.ReactElement;
+    ConfirmDialog: ({ size, title, content, actions, actionsLayout, ...props }: import("./ConfirmDialog").ConfirmDialogProps) => React.ReactElement;
+    FixedDialog: ({ title, content, actions, actionsLayout, ...props }: import("./FixedDialog").FixedDialogProps) => React.ReactElement;
+    FixedActionsDialog: ({ title, content, actions, actionsLayout, ...props }: import("./FixedActionsDialog").FixedActionsDialogProps) => React.ReactElement;
+    IllustrationDialog: ({ title, content, actions, actionsLayout, ...props }: import("./IllustrationDialog").IllustrationDialogProps) => React.ReactElement;
+    PermissionDialog: React.FC<StandardDialogProps>;
+};
+type DialogName = keyof typeof dialogs;
+interface StoryArgs extends Pick<StandardDialogProps, 'size' | 'actionsLayout' | 'align' | 'disableTitleAutoPadding' | 'disableGutters' | 'fullScreen'> {
+    dialog: DialogName;
+    contentLength: 'short' | 'long';
+    longTitle: boolean;
+    hideTitle: boolean;
+    showActions: boolean;
+    withCloseButton: boolean;
+    withBackButton: boolean;
+    withBackground: boolean;
+    titleWithButton: boolean;
+}
+declare const meta: Meta<StoryArgs>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const StandardDialogScreenshot: Story;
+export declare const ConfirmDialogScreenshot: Story;
+export declare const FixedDialogScreenshot: Story;
+export declare const FixedActionsDialogScreenshot: Story;
+export declare const IllustrationDialogScreenshot: Story;
+export declare const PermissionDialogScreenshot: Story;

package/dist/components/Dialogs/Dialogs.stories.js

@@ -0,0 +1,177 @@
+import { Attachment, Cloud, Dots, Icon, Pen, People } from '@linagora/twake-icons';
+import { Button, IconButton, ListItemIcon, Menu, MenuItem, Stack, Typography } from '@mui/material';
+import React, { useState } from 'react';
+import ConfirmDialog from './ConfirmDialog';
+import FixedActionsDialog from './FixedActionsDialog';
+import FixedDialog from './FixedDialog';
+import IllustrationDialog from './IllustrationDialog';
+import PermissionDialog from './PermissionDialog';
+import StandardDialog from './StandardDialog';
+import AlertProvider from '../../providers/AlertProvider';
+import { useAlert } from '../../providers/AlertProvider/useAlert';
+import BottomSheet from '../BottomSheet';
+import BottomSheetItem from '../BottomSheet/BottomSheetItem';
+import ListItemText from '../ListItemText';
+const sizes = ['small', 'medium', 'large', 'full'];
+const SHORT_TEXT = 'Ada Lovelace was an English mathematician and writer, chiefly known for her work on the Analytical Engine.';
+const LONG_TEXT = Array.from({ length: 8 }, () => `${SHORT_TEXT} She was the first to recognise that the machine had applications beyond pure calculation, and published the first algorithm intended to be carried out by such a machine. As a result, she is often regarded as the first computer programmer.`).join('\n\n');
+const BACKGROUND = 'linear-gradient(to bottom, rgba(41, 127, 242, 0.24), transparent 160px)';
+const noop = () => undefined;
+const PermissionDialogExample = ({ open, title, content, actions, actionsLayout, onClose }) => (React.createElement(PermissionDialog, { open: open, icon: Cloud, title: typeof title === 'string' ? title : 'PermissionDialog', content: content, actions: actions, actionsLayout: actionsLayout, onClose: onClose }));
+const dialogs = {
+    StandardDialog,
+    ConfirmDialog,
+    FixedDialog,
+    FixedActionsDialog,
+    IllustrationDialog,
+    PermissionDialog: PermissionDialogExample
+};
+const DialogActionsExample = ({ onClose }) => (React.createElement(React.Fragment, null,
+    React.createElement(Button, { variant: "outlined", onClick: onClose }, "Close Modal"),
+    React.createElement(Button, null, "Do something")));
+const TitleWithButton = () => (React.createElement(React.Fragment, null,
+    "This is the title",
+    React.createElement(IconButton, { "aria-label": "More" },
+        React.createElement(Icon, { icon: Dots }))));
+const titleWithButtonProps = {
+    dialogTitle: {
+        className: 'u-flex u-flex-items-center u-flex-justify-between u-pv-0-s u-pv-1 u-pr-0-s'
+    }
+};
+const InnerElements = () => {
+    const { showAlert } = useAlert();
+    const [isBottomSheetOpen, setBottomSheetOpen] = useState(false);
+    const [isInnerDialogOpen, setInnerDialogOpen] = useState(false);
+    const [isInnerConfirmOpen, setInnerConfirmOpen] = useState(false);
+    const [isSheetConfirmOpen, setSheetConfirmOpen] = useState(false);
+    const [menuAnchor, setMenuAnchor] = useState(null);
+    const closeMenu = () => setMenuAnchor(null);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Stack, { spacing: 1, sx: { mt: 2, alignItems: 'flex-start' } },
+            React.createElement(Button, { onClick: () => showAlert({ message: 'Hello', severity: 'success', duration: 5000 }) }, "Show an alert"),
+            React.createElement(Button, { onClick: () => setBottomSheetOpen(true) }, "Show inner bottom sheet"),
+            React.createElement(Button, { onClick: () => setInnerConfirmOpen(true) }, "Show inner confirm dialog"),
+            React.createElement(Button, { onClick: () => setInnerDialogOpen(true) }, "Show inner dialog"),
+            React.createElement(Button, { onClick: event => setMenuAnchor(event.currentTarget) }, "Show menu")),
+        React.createElement(Menu, { open: Boolean(menuAnchor), anchorEl: menuAnchor, onClose: closeMenu }, [
+            { icon: Pen, label: 'Modify' },
+            { icon: People, label: 'People' },
+            { icon: Attachment, label: 'Attachment' }
+        ].map(({ icon, label }) => (React.createElement(MenuItem, { key: label, onClick: closeMenu },
+            React.createElement(ListItemIcon, null,
+                React.createElement(Icon, { icon: icon })),
+            React.createElement(ListItemText, { primary: label }))))),
+        isInnerDialogOpen && (React.createElement(StandardDialog, { open: true, onClose: () => setInnerDialogOpen(false), title: "This is a simple title", content: "This is a simple content" })),
+        isInnerConfirmOpen && (React.createElement(ConfirmDialog, { open: true, onClose: () => setInnerConfirmOpen(false), title: "This is a simple title", content: "This is a simple content" })),
+        isBottomSheetOpen && (React.createElement(BottomSheet, { backdrop: true, onClose: () => setBottomSheetOpen(false) },
+            React.createElement(BottomSheetItem, null,
+                React.createElement(Button, { onClick: () => setSheetConfirmOpen(true), sx: { mb: 2 } }, "Show inner confirm dialog"),
+                LONG_TEXT,
+                isSheetConfirmOpen && (React.createElement(ConfirmDialog, { open: true, onClose: () => setSheetConfirmOpen(false), title: "This is a simple title", content: "This is a simple content" })))))));
+};
+const Playground = ({ dialog, contentLength, longTitle, hideTitle, showActions, withCloseButton, withBackButton, withBackground, titleWithButton, fullScreen, ...props }) => {
+    const { showAlert } = useAlert();
+    const [open, setOpen] = useState(false);
+    const DialogComponent = dialogs[dialog];
+    const close = () => setOpen(false);
+    const goBack = () => {
+        showAlert({ message: 'Back button has been pressed', severity: 'success' });
+        close();
+    };
+    const title = dialog === 'IllustrationDialog' ? (React.createElement(Icon, { icon: Cloud, size: 140 })) : titleWithButton ? (React.createElement(TitleWithButton, null)) : longTitle ? (`${dialog} - ${SHORT_TEXT}`) : (dialog);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { onClick: () => setOpen(true) },
+            "Open ",
+            dialog),
+        open && (React.createElement(DialogComponent, { ...props, size: dialog === 'ConfirmDialog' || dialog === 'PermissionDialog'
+                ? undefined
+                : props.size, open: true, fullScreen: fullScreen || undefined, onClose: withCloseButton ? close : undefined, onBack: withBackButton ? goBack : undefined, title: hideTitle ? undefined : title, componentsProps: titleWithButton ? titleWithButtonProps : undefined, background: withBackground ? BACKGROUND : undefined, content: React.createElement(React.Fragment, null,
+                React.createElement(Typography, { component: "div", variant: "body1" }, contentLength === 'long' ? LONG_TEXT : SHORT_TEXT),
+                React.createElement(InnerElements, null)), actions: showActions && React.createElement(DialogActionsExample, { onClose: close }) }))));
+};
+const meta = {
+    title: 'Dialogs',
+    parameters: { layout: 'centered' },
+    tags: ['autodocs'],
+    decorators: [
+        (Story) => (React.createElement(AlertProvider, null,
+            React.createElement(Story, null)))
+    ],
+    argTypes: {
+        dialog: { control: 'select', options: Object.keys(dialogs) },
+        size: { control: 'select', options: sizes },
+        actionsLayout: { control: 'inline-radio', options: ['row', 'column'] },
+        align: { control: 'inline-radio', options: ['middle', 'top'] },
+        contentLength: { control: 'inline-radio', options: ['short', 'long'] },
+        disableTitleAutoPadding: { control: 'boolean' },
+        disableGutters: { control: 'boolean' },
+        fullScreen: { control: 'boolean' },
+        longTitle: { control: 'boolean' },
+        hideTitle: { control: 'boolean' },
+        showActions: { control: 'boolean' },
+        withCloseButton: { control: 'boolean' },
+        withBackButton: { control: 'boolean' },
+        withBackground: { control: 'boolean' },
+        titleWithButton: { control: 'boolean' }
+    },
+    args: {
+        dialog: 'StandardDialog',
+        size: 'medium',
+        actionsLayout: 'row',
+        align: 'middle',
+        contentLength: 'short',
+        disableTitleAutoPadding: false,
+        disableGutters: false,
+        fullScreen: false,
+        longTitle: false,
+        hideTitle: false,
+        showActions: true,
+        withCloseButton: true,
+        withBackButton: false,
+        withBackground: false,
+        titleWithButton: false
+    }
+};
+export default meta;
+export const Default = {
+    render: args => React.createElement(Playground, { ...args })
+};
+const screenshotProps = {
+    open: true,
+    onClose: noop,
+    content: SHORT_TEXT,
+    actions: React.createElement(DialogActionsExample, { onClose: noop })
+};
+// Visual Regression - one story per dialog, since each one covers the screen
+export const StandardDialogScreenshot = {
+    tags: ['argos'],
+    parameters: { layout: 'fullscreen' },
+    render: () => React.createElement(StandardDialog, { ...screenshotProps, title: "StandardDialog" })
+};
+export const ConfirmDialogScreenshot = {
+    tags: ['argos'],
+    parameters: { layout: 'fullscreen' },
+    render: () => (React.createElement(ConfirmDialog, { ...screenshotProps, title: "Are you sure?", content: "Content of a confirm dialog, precising what the actions will do, and asking the user if she is sure.", actions: React.createElement(React.Fragment, null,
+            React.createElement(Button, { variant: "outlined" }, "Close Modal"),
+            React.createElement(Button, { color: "error" }, "Do something destructive")) }))
+};
+export const FixedDialogScreenshot = {
+    tags: ['argos'],
+    parameters: { layout: 'fullscreen' },
+    render: () => (React.createElement(FixedDialog, { ...screenshotProps, title: "FixedDialog", content: LONG_TEXT }))
+};
+export const FixedActionsDialogScreenshot = {
+    tags: ['argos'],
+    parameters: { layout: 'fullscreen' },
+    render: () => (React.createElement(FixedActionsDialog, { ...screenshotProps, title: "FixedActionsDialog", content: LONG_TEXT }))
+};
+export const IllustrationDialogScreenshot = {
+    tags: ['argos'],
+    parameters: { layout: 'fullscreen' },
+    render: () => (React.createElement(IllustrationDialog, { ...screenshotProps, size: "small", title: React.createElement(Icon, { icon: Cloud, size: 140 }) }))
+};
+export const PermissionDialogScreenshot = {
+    tags: ['argos'],
+    parameters: { layout: 'fullscreen' },
+    render: () => (React.createElement(PermissionDialogExample, { ...screenshotProps, title: "Are you sure?", content: "Content of a confirm dialog, precising what the actions will do, and asking the user if she is sure." }))
+};

package/dist/components/Dialogs/FixedActionsDialog.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { DialogSectionsProps } from './types';
+import { DialogLayoutProps } from './useDialogLayout';
+export interface FixedActionsDialogProps extends DialogLayoutProps, DialogSectionsProps {
+}
+/** Dialog whose actions stay visible while the title scrolls with a long content */
+declare const FixedActionsDialog: ({ title, content, actions, actionsLayout, ...props }: FixedActionsDialogProps) => React.ReactElement;
+export default FixedActionsDialog;

package/dist/components/Dialogs/FixedActionsDialog.js

@@ -0,0 +1,20 @@
+import { DialogActions, DialogContent, DialogTitle, Divider } from '@mui/material';
+import cx from 'classnames';
+import React from 'react';
+import DialogNavButtons from './DialogNavButtons';
+import { useDialogLayout } from './useDialogLayout';
+import Dialog from '../Dialog';
+/** Dialog whose actions stay visible while the title scrolls with a long content */
+const FixedActionsDialog = ({ title, content, actions, actionsLayout, ...props }) => {
+    const { id, fullScreen, dialogProps, dialogTitleProps, dividerProps, dialogActionsProps, dialogContentProps } = useDialogLayout({ ...props, isFluidTitle: true });
+    return (React.createElement(Dialog, { ...dialogProps },
+        React.createElement(DialogNavButtons, { id: id, fullScreen: fullScreen, onClose: props.onClose, onBack: props.onBack }),
+        React.createElement(DialogContent, { ...dialogContentProps },
+            React.createElement("div", { className: "dialogContentInner" },
+                title && (React.createElement("div", { className: "dialogTitleFluidContainer" },
+                    React.createElement(DialogTitle, { ...dialogTitleProps }, title))),
+                content)),
+        React.createElement(Divider, { ...dividerProps }),
+        actions && (React.createElement(DialogActions, { ...dialogActionsProps, disableSpacing: true, className: cx({ columnLayout: actionsLayout === 'column' }, dialogActionsProps.className) }, actions))));
+};
+export default FixedActionsDialog;

package/dist/components/Dialogs/FixedDialog.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { DialogSectionsProps } from './types';
+import { DialogLayoutProps } from './useDialogLayout';
+export interface FixedDialogProps extends DialogLayoutProps, DialogSectionsProps {
+}
+/** Dialog whose title and actions stay visible while a long content scrolls between them */
+declare const FixedDialog: ({ title, content, actions, actionsLayout, ...props }: FixedDialogProps) => React.ReactElement;
+export default FixedDialog;

package/dist/components/Dialogs/FixedDialog.js

@@ -0,0 +1,20 @@
+import { DialogActions, DialogContent, DialogTitle, Divider } from '@mui/material';
+import cx from 'classnames';
+import React from 'react';
+import DialogNavButtons from './DialogNavButtons';
+import { useDialogLayout } from './useDialogLayout';
+import Dialog from '../Dialog';
+/** Dialog whose title and actions stay visible while a long content scrolls between them */
+const FixedDialog = ({ title, content, actions, actionsLayout, ...props }) => {
+    const { id, fullScreen, dialogProps, dialogTitleProps, dividerProps, dialogActionsProps, dialogContentProps } = useDialogLayout(props);
+    return (React.createElement(Dialog, { ...dialogProps },
+        React.createElement(DialogNavButtons, { id: id, fullScreen: fullScreen, onClose: props.onClose, onBack: props.onBack }),
+        title && (React.createElement(React.Fragment, null,
+            React.createElement(DialogTitle, { ...dialogTitleProps }, title),
+            React.createElement(Divider, { ...dividerProps }))),
+        React.createElement(DialogContent, { ...dialogContentProps },
+            React.createElement("div", { className: "dialogContentInner" }, content)),
+        React.createElement(Divider, { ...dividerProps }),
+        actions && (React.createElement(DialogActions, { ...dialogActionsProps, disableSpacing: true, className: cx({ columnLayout: actionsLayout === 'column' }, dialogActionsProps.className) }, actions))));
+};
+export default FixedDialog;

package/dist/components/Dialogs/IllustrationDialog.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { DialogSectionsProps } from './types';
+import { DialogLayoutProps } from './useDialogLayout';
+export interface IllustrationDialogProps extends DialogLayoutProps, DialogSectionsProps {
+}
+/** Dialog whose title is an illustration, centered above a short content */
+declare const IllustrationDialog: ({ title, content, actions, actionsLayout, ...props }: IllustrationDialogProps) => React.ReactElement;
+export default IllustrationDialog;

package/dist/components/Dialogs/IllustrationDialog.js

@@ -0,0 +1,21 @@
+import { DialogContent, DialogTitle } from '@mui/material';
+import cx from 'classnames';
+import React from 'react';
+import DialogFluidContent from './DialogFluidContent';
+import DialogNavButtons from './DialogNavButtons';
+import { useDialogLayout } from './useDialogLayout';
+import Dialog from '../Dialog';
+/** Dialog whose title is an illustration, centered above a short content */
+const IllustrationDialog = ({ title, content, actions, actionsLayout, ...props }) => {
+    const { id, fullScreen, dialogProps, dialogTitleProps, dialogActionsProps, dialogContentProps } = useDialogLayout({
+        ...props,
+        isFluidTitle: true,
+        disableTitleAutoPadding: true
+    });
+    return (React.createElement(Dialog, { ...dialogProps },
+        React.createElement(DialogNavButtons, { id: id, fullScreen: fullScreen, onClose: props.onClose, onBack: props.onBack }),
+        React.createElement(DialogContent, { ...dialogContentProps },
+            React.createElement(DialogFluidContent, { className: "u-pt-1-half", header: title && (React.createElement("div", { className: "dialogTitleFluidContainer" },
+                    React.createElement(DialogTitle, { ...dialogTitleProps, className: cx('u-flex u-flex-justify-center', dialogTitleProps.className) }, title))), content: content, actions: actions, actionsLayout: actionsLayout, dialogActionsProps: dialogActionsProps }))));
+};
+export default IllustrationDialog;

package/dist/components/Dialogs/InstallFlagshipAppDialog.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface InstallFlagshipAppDialogProps {
+    onClose?: () => void;
+    /** Play Store link of the description */
+    playStoreUrl?: string;
+    /** App Store link of the description */
+    appStoreUrl?: string;
+    /** Image of a QR code leading to the download page of the app */
+    QRCode?: string;
+}
+/** Invites to install the mobile app, through a QR code or the stores */
+declare const InstallFlagshipAppDialog: ({ onClose, playStoreUrl, appStoreUrl, QRCode }: InstallFlagshipAppDialogProps) => React.ReactElement;
+export default InstallFlagshipAppDialog;

package/dist/components/Dialogs/InstallFlagshipAppDialog.js

@@ -0,0 +1,26 @@
+import { Link, Typography } from '@mui/material';
+import React from 'react';
+import { useExtendI18n, useI18n } from 'twake-i18n';
+import IllustrationDialog from './IllustrationDialog';
+import appStoreIcon from './images/appStore.png';
+import defaultQrCode from './images/installFlagshipAppQrCode.png';
+import playStoreIcon from './images/playStore.png';
+import { locales } from './locales';
+/** Invites to install the mobile app, through a QR code or the stores */
+const InstallFlagshipAppDialog = ({ onClose, playStoreUrl = 'https://play.google.com/store/apps/details?id=io.cozy.flagship.mobile', appStoreUrl = 'https://apps.apple.com/app/my-cozy/id1600636174', QRCode = defaultQrCode }) => {
+    useExtendI18n(locales);
+    const { t } = useI18n();
+    return (React.createElement(IllustrationDialog, { open: true, size: "small", onClose: onClose, componentsProps: { dialogTitle: { className: 'u-pt-2-half' } }, title: React.createElement(Link, { href: "https://cozy.io/download", target: "_blank", rel: "noopener noreferrer" },
+            React.createElement("img", { src: QRCode, width: "100%", alt: "", "aria-hidden": true }),
+            React.createElement("span", { className: "u-visuallyhidden" }, t('Dialogs.installFlagshipApp.linkLabel'))), content: React.createElement("div", { className: "u-ta-center" },
+            React.createElement(Typography, { gutterBottom: true, variant: "h3", color: "text.primary" }, t('Dialogs.installFlagshipApp.title')),
+            React.createElement(Typography, { color: "text.secondary", className: "u-ta-center", dangerouslySetInnerHTML: {
+                    __html: t('Dialogs.installFlagshipApp.text', {
+                        androidUrl: playStoreUrl,
+                        androidIconSrc: playStoreIcon,
+                        iosUrl: appStoreUrl,
+                        iosIconSrc: appStoreIcon
+                    })
+                } })) }));
+};
+export default InstallFlagshipAppDialog;

package/dist/components/Dialogs/PermissionDialog.d.ts

@@ -0,0 +1,11 @@
+import { Icon } from '@linagora/twake-icons';
+import React from 'react';
+import { ConfirmDialogProps } from './ConfirmDialog';
+export interface PermissionDialogProps extends Pick<ConfirmDialogProps, 'open' | 'content' | 'actions' | 'actionsLayout' | 'onClose'> {
+    /** Describes the action to be taken */
+    icon: React.ComponentProps<typeof Icon>['icon'];
+    title: string;
+}
+/** Dialog confirming an action on the system, such as a permission or an authentication */
+declare const PermissionDialog: ({ open, icon, title, content, actions, actionsLayout, onClose }: PermissionDialogProps) => React.ReactElement;
+export default PermissionDialog;

package/dist/components/Dialogs/PermissionDialog.js

@@ -0,0 +1,15 @@
+import { Icon } from '@linagora/twake-icons';
+import React from 'react';
+import ConfirmDialog from './ConfirmDialog';
+import PermissionDialogIcon from './PermissionDialogIcon';
+/** Dialog confirming an action on the system, such as a permission or an authentication */
+const PermissionDialog = ({ open, icon, title, content, actions, actionsLayout, onClose }) => (React.createElement(ConfirmDialog, { open: open, size: "small", disableTitleAutoPadding: true, classes: { paper: 'u-ov-visible' }, componentsProps: {
+        dialogTitle: {
+            className: 'u-flex u-flex-justify-center u-ta-center u-pt-2 u-pb-half'
+        },
+        dialogContent: { className: 'u-ov-visible' }
+    }, title: React.createElement(React.Fragment, null,
+        React.createElement(PermissionDialogIcon, { elevation: 2, className: "u-pos-absolute u-bdrs-circle u-flex" },
+            React.createElement(Icon, { className: "u-m-auto", icon: icon, size: 48 })),
+        title), content: content, actions: actions, actionsLayout: actionsLayout, onClose: onClose }));
+export default PermissionDialog;

package/dist/components/Dialogs/PermissionDialogIcon.d.ts

@@ -0,0 +1,3 @@
+/** Round paper floating above the top edge of a permission dialog */
+declare const PermissionDialogIcon: import("@emotion/styled").StyledComponent<import("@mui/material").PaperOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "square" | "className" | "elevation" | "children" | "classes" | "sx" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export default PermissionDialogIcon;

package/dist/components/Dialogs/PermissionDialogIcon.js

@@ -0,0 +1,8 @@
+import { Paper, styled } from '@mui/material';
+/** Round paper floating above the top edge of a permission dialog */
+const PermissionDialogIcon = styled(Paper)({
+    top: '-2.25rem',
+    width: '4.5rem',
+    height: '4.5rem'
+});
+export default PermissionDialogIcon;

package/dist/components/Dialogs/ShortcutDialog.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { SaveShortcut } from './shortcutHelpers';
+export interface ShortcutDialogProps {
+    /** Shortcut to edit, which prefills the fields */
+    shortcut?: {
+        name?: string;
+        url?: string;
+    };
+    /** Called with the file name and the URL of the shortcut */
+    onSave: SaveShortcut;
+    onClose: () => void;
+}
+/** Creates or edits a shortcut to a URL. Must be rendered within an `AlertProvider` */
+declare const ShortcutDialog: ({ shortcut, onSave, onClose }: ShortcutDialogProps) => React.ReactElement;
+export default ShortcutDialog;