@linagora/twake-mui 15.2.0 → 16.0.0

package/dist/components/Dialogs/ShortcutDialog.js

@@ -0,0 +1,41 @@
+import { Button, Stack, TextField } from '@mui/material';
+import React, { useState } from 'react';
+import { useExtendI18n, useI18n } from 'twake-i18n';
+import ConfirmDialog from './ConfirmDialog';
+import { locales } from './locales';
+import { checkAndSaveShortcut, makeHumanReadableFileName } from './shortcutHelpers';
+import { useAlert } from '../../providers/AlertProvider/useAlert';
+/** Creates or edits a shortcut to a URL. Must be rendered within an `AlertProvider` */
+const ShortcutDialog = ({ shortcut, onSave, onClose }) => {
+    useExtendI18n(locales);
+    const { t } = useI18n();
+    const { showAlert } = useAlert();
+    const isEditing = Boolean(shortcut);
+    const [fileName, setFileName] = useState(makeHumanReadableFileName(shortcut?.name ?? ''));
+    const [url, setUrl] = useState(shortcut?.url ?? '');
+    const saveShortcut = () => {
+        void checkAndSaveShortcut({
+            fileName,
+            url,
+            isEditing,
+            onSave,
+            onClose,
+            showAlert,
+            t
+        });
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === 'Enter')
+            saveShortcut();
+    };
+    return (React.createElement(ConfirmDialog, { open: true, title: t(isEditing
+            ? 'Dialogs.shortcut.editTitle'
+            : 'Dialogs.shortcut.createTitle'), onClose: onClose, content: React.createElement(Stack, { spacing: 2 },
+            React.createElement("div", null,
+                React.createElement(TextField, { label: t('Dialogs.shortcut.url'), value: url, id: "shortcuturl", onChange: event => setUrl(event.target.value), onKeyDown: handleKeyDown, autoComplete: "off", fullWidth: true, margin: "normal", autoFocus: true })),
+            React.createElement("div", null,
+                React.createElement(TextField, { label: t('Dialogs.shortcut.filename'), value: fileName, id: "shortcutfilename", onChange: event => setFileName(event.target.value), onKeyDown: handleKeyDown, autoComplete: "off", fullWidth: true, margin: "normal" }))), actions: React.createElement(React.Fragment, null,
+            React.createElement(Button, { variant: "outlined", onClick: onClose }, t('Dialogs.shortcut.cancel')),
+            React.createElement(Button, { onClick: saveShortcut }, t(isEditing ? 'Dialogs.shortcut.edit' : 'Dialogs.shortcut.create'))) }));
+};
+export default ShortcutDialog;

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

@@ -0,0 +1,5 @@
+import { SlideProps } from '@mui/material';
+import React from 'react';
+/** Slides a full screen dialog in from the bottom of the screen */
+declare const SlideUpTransition: React.ForwardRefExoticComponent<Omit<SlideProps, "ref"> & React.RefAttributes<unknown>>;
+export default SlideUpTransition;

package/dist/components/Dialogs/SlideUpTransition.js

@@ -0,0 +1,6 @@
+import { Slide } from '@mui/material';
+import React, { forwardRef } from 'react';
+/** Slides a full screen dialog in from the bottom of the screen */
+const SlideUpTransition = forwardRef((props, ref) => (React.createElement(Slide, { ref: ref, direction: "up", ...props })));
+SlideUpTransition.displayName = 'SlideUpTransition';
+export default SlideUpTransition;

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

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

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

@@ -0,0 +1,43 @@
+import { Button, Stack } from '@mui/material';
+import React, { useState } from 'react';
+import InstallFlagshipAppDialog from './InstallFlagshipAppDialog';
+import ShortcutDialog from './ShortcutDialog';
+import AlertProvider from '../../providers/AlertProvider';
+const noop = () => undefined;
+const specificDialogs = {
+    InstallFlagshipAppDialog,
+    ShortcutDialog: ({ onClose }) => (React.createElement(ShortcutDialog, { onClose: onClose, onSave: noop }))
+};
+const Openers = () => {
+    const [opened, setOpened] = useState(null);
+    const OpenedDialog = opened && specificDialogs[opened];
+    return (React.createElement(Stack, { spacing: 1, sx: { alignItems: 'flex-start' } },
+        Object.keys(specificDialogs).map(name => (React.createElement(Button, { key: name, onClick: () => setOpened(name) },
+            "Open ",
+            name))),
+        OpenedDialog && React.createElement(OpenedDialog, { onClose: () => setOpened(null) })));
+};
+const meta = {
+    title: 'Dialogs/Specific dialogs',
+    parameters: { layout: 'centered' },
+    tags: ['autodocs'],
+    decorators: [
+        (Story) => (React.createElement(AlertProvider, null,
+            React.createElement(Story, null)))
+    ]
+};
+export default meta;
+export const Default = {
+    render: () => React.createElement(Openers, null)
+};
+// Visual Regression - one story per dialog, since each one covers the screen
+export const InstallFlagshipAppScreenshot = {
+    tags: ['argos'],
+    parameters: { layout: 'fullscreen' },
+    render: () => React.createElement(InstallFlagshipAppDialog, { onClose: noop })
+};
+export const ShortcutScreenshot = {
+    tags: ['argos'],
+    parameters: { layout: 'fullscreen' },
+    render: () => (React.createElement(ShortcutDialog, { shortcut: { name: 'Twake.url', url: 'https://twake.app' }, onClose: noop, onSave: noop }))
+};

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { DialogSectionsProps } from './types';
+import { DialogLayoutProps } from './useDialogLayout';
+export interface StandardDialogProps extends DialogLayoutProps, DialogSectionsProps {
+}
+/**
+ * Dialog laid out with a title, a content and actions. It is labelled by its
+ * title and goes full screen on mobile unless its size is `small`.
+ */
+declare const StandardDialog: ({ title, content, actions, actionsLayout, ...props }: StandardDialogProps) => React.ReactElement;
+export default StandardDialog;

package/dist/components/Dialogs/StandardDialog.js

@@ -0,0 +1,21 @@
+import { DialogContent, DialogTitle, Divider } from '@mui/material';
+import React from 'react';
+import DialogFluidContent from './DialogFluidContent';
+import DialogNavButtons from './DialogNavButtons';
+import { useDialogLayout } from './useDialogLayout';
+import Dialog from '../Dialog';
+/**
+ * Dialog laid out with a title, a content and actions. It is labelled by its
+ * title and goes full screen on mobile unless its size is `small`.
+ */
+const StandardDialog = ({ 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(DialogFluidContent, { content: content, actions: actions, actionsLayout: actionsLayout, dialogActionsProps: dialogActionsProps }))));
+};
+export default StandardDialog;

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

@@ -0,0 +1,25 @@
+{
+    "Dialogs": {
+        "closeButton": "Schließen",
+        "backButton": "Zurück",
+        "installFlagshipApp": {
+            "title": "Scannen Sie den QR-Code",
+            "text": "oder öffnen Sie direkt den <img src=%{iosIconSrc} /> <a href='%{iosUrl}' class='u-link' target='_blank' rel='noopener'>App Store</a><br>oder den <img src=%{androidIconSrc} /> <a href='%{androidUrl}' class='u-link' target='_blank' rel='noopener'>Play Store</a>, um die App Twake Workplace zu installieren",
+            "linkLabel": "Zur Downloadseite der Anwendung Twake Workplace"
+        },
+        "shortcut": {
+            "createTitle": "Verknüpfung erstellen",
+            "editTitle": "Verknüpfung bearbeiten",
+            "filename": "Name der Verknüpfung",
+            "url": "URL",
+            "cancel": "Abbrechen",
+            "create": "Erstellen",
+            "edit": "Speichern",
+            "created": "Die Verknüpfung wurde erstellt",
+            "edited": "Die Verknüpfung wurde geändert",
+            "errored": "Ein Fehler ist aufgetreten",
+            "needsInfo": "Eine Verknüpfung benötigt einen Namen und eine URL",
+            "urlBadFormat": "Die eingegebene URL hat nicht das richtige Format"
+        }
+    }
+}

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

@@ -0,0 +1,25 @@
+{
+    "Dialogs": {
+        "closeButton": "Close",
+        "backButton": "Back",
+        "installFlagshipApp": {
+            "title": "Scan the QR Code",
+            "text": "or go directly to the <img src=%{iosIconSrc} /> <a href='%{iosUrl}' class='u-link' target='_blank' rel='noopener'>App Store</a><br>or <img src=%{androidIconSrc} /> <a href='%{androidUrl}' class='u-link' target='_blank' rel='noopener'>Play Store</a> to install the Twake Workplace app",
+            "linkLabel": "Go to the Twake Workplace application download page"
+        },
+        "shortcut": {
+            "createTitle": "Create a shortcut",
+            "editTitle": "Modify a shortcut",
+            "filename": "Shortcut name",
+            "url": "URL",
+            "cancel": "Cancel",
+            "create": "Create",
+            "edit": "Save",
+            "created": "The shortcut has been created",
+            "edited": "The shortcut has been modified",
+            "errored": "An error occurred",
+            "needsInfo": "A shortcut needs a name and a URL",
+            "urlBadFormat": "The entered URL is not in the correct format"
+        }
+    }
+}

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

@@ -0,0 +1,25 @@
+{
+    "Dialogs": {
+        "closeButton": "Cerrar",
+        "backButton": "Atrás",
+        "installFlagshipApp": {
+            "title": "Escanee el código QR",
+            "text": "o vaya directamente a <img src=%{iosIconSrc} /> <a href='%{iosUrl}' class='u-link' target='_blank' rel='noopener'>App Store</a><br>o a <img src=%{androidIconSrc} /> <a href='%{androidUrl}' class='u-link' target='_blank' rel='noopener'>Play Store</a> para instalar la app Twake Workplace",
+            "linkLabel": "Ir a la página de descarga de la aplicación Twake Workplace"
+        },
+        "shortcut": {
+            "createTitle": "Crear un acceso directo",
+            "editTitle": "Modificar un acceso directo",
+            "filename": "Nombre del acceso directo",
+            "url": "URL",
+            "cancel": "Cancelar",
+            "create": "Crear",
+            "edit": "Guardar",
+            "created": "Se ha creado el acceso directo",
+            "edited": "Se ha modificado el acceso directo",
+            "errored": "Se ha producido un error",
+            "needsInfo": "Un acceso directo necesita un nombre y una URL",
+            "urlBadFormat": "La URL introducida no tiene el formato correcto"
+        }
+    }
+}

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

@@ -0,0 +1,25 @@
+{
+    "Dialogs": {
+        "closeButton": "Fermer",
+        "backButton": "Retour",
+        "installFlagshipApp": {
+            "title": "Scannez le QR Code",
+            "text": "ou rendez vous directement sur <img src=%{iosIconSrc} /> <a href='%{iosUrl}' class='u-link' target='_blank' rel='noopener'>l’App Store</a><br>ou sur le <img src=%{androidIconSrc} /> <a href='%{androidUrl}' class='u-link' target='_blank' rel='noopener'>Play Store</a> pour installer l’app Twake Workplace",
+            "linkLabel": "Aller sur la page de téléchargement de l'application Twake Workplace"
+        },
+        "shortcut": {
+            "createTitle": "Créer un raccourci",
+            "editTitle": "Modifier un raccourci",
+            "filename": "Nom du raccourci",
+            "url": "URL",
+            "cancel": "Annuler",
+            "create": "Créer",
+            "edit": "Sauvegarder",
+            "created": "Le raccourci a été créé",
+            "edited": "Le raccourci a été modifié",
+            "errored": "Une erreur s'est produite",
+            "needsInfo": "Un raccourci a besoin d'un nom et d'une URL",
+            "urlBadFormat": "L'URL saisie n'est pas dans le bon format"
+        }
+    }
+}

package/dist/components/Dialogs/locales/index.d.ts

@@ -0,0 +1,177 @@
+export declare const locales: {
+    de: {
+        Dialogs: {
+            closeButton: string;
+            backButton: string;
+            installFlagshipApp: {
+                title: string;
+                text: string;
+                linkLabel: string;
+            };
+            shortcut: {
+                createTitle: string;
+                editTitle: string;
+                filename: string;
+                url: string;
+                cancel: string;
+                create: string;
+                edit: string;
+                created: string;
+                edited: string;
+                errored: string;
+                needsInfo: string;
+                urlBadFormat: string;
+            };
+        };
+    };
+    en: {
+        Dialogs: {
+            closeButton: string;
+            backButton: string;
+            installFlagshipApp: {
+                title: string;
+                text: string;
+                linkLabel: string;
+            };
+            shortcut: {
+                createTitle: string;
+                editTitle: string;
+                filename: string;
+                url: string;
+                cancel: string;
+                create: string;
+                edit: string;
+                created: string;
+                edited: string;
+                errored: string;
+                needsInfo: string;
+                urlBadFormat: string;
+            };
+        };
+    };
+    es: {
+        Dialogs: {
+            closeButton: string;
+            backButton: string;
+            installFlagshipApp: {
+                title: string;
+                text: string;
+                linkLabel: string;
+            };
+            shortcut: {
+                createTitle: string;
+                editTitle: string;
+                filename: string;
+                url: string;
+                cancel: string;
+                create: string;
+                edit: string;
+                created: string;
+                edited: string;
+                errored: string;
+                needsInfo: string;
+                urlBadFormat: string;
+            };
+        };
+    };
+    fr: {
+        Dialogs: {
+            closeButton: string;
+            backButton: string;
+            installFlagshipApp: {
+                title: string;
+                text: string;
+                linkLabel: string;
+            };
+            shortcut: {
+                createTitle: string;
+                editTitle: string;
+                filename: string;
+                url: string;
+                cancel: string;
+                create: string;
+                edit: string;
+                created: string;
+                edited: string;
+                errored: string;
+                needsInfo: string;
+                urlBadFormat: string;
+            };
+        };
+    };
+    it: {
+        Dialogs: {
+            closeButton: string;
+            backButton: string;
+            installFlagshipApp: {
+                title: string;
+                text: string;
+                linkLabel: string;
+            };
+            shortcut: {
+                createTitle: string;
+                editTitle: string;
+                filename: string;
+                url: string;
+                cancel: string;
+                create: string;
+                edit: string;
+                created: string;
+                edited: string;
+                errored: string;
+                needsInfo: string;
+                urlBadFormat: string;
+            };
+        };
+    };
+    ru: {
+        Dialogs: {
+            closeButton: string;
+            backButton: string;
+            installFlagshipApp: {
+                title: string;
+                text: string;
+                linkLabel: string;
+            };
+            shortcut: {
+                createTitle: string;
+                editTitle: string;
+                filename: string;
+                url: string;
+                cancel: string;
+                create: string;
+                edit: string;
+                created: string;
+                edited: string;
+                errored: string;
+                needsInfo: string;
+                urlBadFormat: string;
+            };
+        };
+    };
+    vi: {
+        Dialogs: {
+            closeButton: string;
+            backButton: string;
+            installFlagshipApp: {
+                title: string;
+                text: string;
+                linkLabel: string;
+            };
+            shortcut: {
+                createTitle: string;
+                editTitle: string;
+                filename: string;
+                url: string;
+                cancel: string;
+                create: string;
+                edit: string;
+                created: string;
+                edited: string;
+                errored: string;
+                needsInfo: string;
+                urlBadFormat: string;
+            };
+        };
+    };
+};

package/dist/components/Dialogs/locales/index.js

@@ -0,0 +1,8 @@
+import de from './de.json';
+import en from './en.json';
+import es from './es.json';
+import fr from './fr.json';
+import it from './it.json';
+import ru from './ru.json';
+import vi from './vi.json';
+export const locales = { de, en, es, fr, it, ru, vi };

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

@@ -0,0 +1,25 @@
+{
+    "Dialogs": {
+        "closeButton": "Chiudi",
+        "backButton": "Indietro",
+        "installFlagshipApp": {
+            "title": "Scansiona il codice QR",
+            "text": "oppure vai direttamente su <img src=%{iosIconSrc} /> <a href='%{iosUrl}' class='u-link' target='_blank' rel='noopener'>App Store</a><br>o su <img src=%{androidIconSrc} /> <a href='%{androidUrl}' class='u-link' target='_blank' rel='noopener'>Play Store</a> per installare l'app Twake Workplace",
+            "linkLabel": "Vai alla pagina di download dell'applicazione Twake Workplace"
+        },
+        "shortcut": {
+            "createTitle": "Crea un collegamento",
+            "editTitle": "Modifica un collegamento",
+            "filename": "Nome del collegamento",
+            "url": "URL",
+            "cancel": "Annulla",
+            "create": "Crea",
+            "edit": "Salva",
+            "created": "Il collegamento è stato creato",
+            "edited": "Il collegamento è stato modificato",
+            "errored": "Si è verificato un errore",
+            "needsInfo": "Un collegamento richiede un nome e un URL",
+            "urlBadFormat": "L'URL inserito non è nel formato corretto"
+        }
+    }
+}

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

@@ -0,0 +1,25 @@
+{
+    "Dialogs": {
+        "closeButton": "Закрыть",
+        "backButton": "Назад",
+        "installFlagshipApp": {
+            "title": "Отсканируйте QR-код",
+            "text": "или перейдите напрямую в <img src=%{iosIconSrc} /> <a href='%{iosUrl}' class='u-link' target='_blank' rel='noopener'>App Store</a><br>или <img src=%{androidIconSrc} /> <a href='%{androidUrl}' class='u-link' target='_blank' rel='noopener'>Play Store</a> чтобы установить приложение Twake Workplace",
+            "linkLabel": "Перейти на страницу загрузки приложения Twake Workplace"
+        },
+        "shortcut": {
+            "createTitle": "Создать ярлык",
+            "editTitle": "Изменить ярлык",
+            "filename": "Имя ярлыка",
+            "url": "URL",
+            "cancel": "Отменить",
+            "create": "Создать",
+            "edit": "Сохранить",
+            "created": "Ярлык был создан",
+            "edited": "Ярлык был изменен",
+            "errored": "Произошла ошибка",
+            "needsInfo": "Для ярлыка нужны имя и URL",
+            "urlBadFormat": "Введённый URL имеет неверный формат"
+        }
+    }
+}

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

@@ -0,0 +1,25 @@
+{
+    "Dialogs": {
+        "closeButton": "Đóng",
+        "backButton": "Quay lại",
+        "installFlagshipApp": {
+            "title": "Quét mã QR",
+            "text": "hoặc trực tiếp đến <img src=%{iosIconSrc} /> <a href='%{iosUrl}' class='u-link' target='_blank' rel='noopener'>App Store</a><br>hoặc <img src=%{androidIconSrc} /> <a href='%{androidUrl}' class='u-link' target='_blank' rel='noopener'>Play Store</a> để cài đặt ứng dụng Twake Workplace",
+            "linkLabel": "Đến trang tải xuống ứng dụng Twake Workplace"
+        },
+        "shortcut": {
+            "createTitle": "Tạo lối tắt",
+            "editTitle": "Chỉnh sửa lối tắt",
+            "filename": "Tên lối tắt",
+            "url": "URL",
+            "cancel": "Hủy",
+            "create": "Tạo",
+            "edit": "Lưu",
+            "created": "Lối tắt đã được tạo",
+            "edited": "Lối tắt đã được chỉnh sửa",
+            "errored": "Đã xảy ra lỗi",
+            "needsInfo": "Lối tắt cần có tên và URL",
+            "urlBadFormat": "URL đã nhập không đúng định dạng"
+        }
+    }
+}

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

@@ -0,0 +1,19 @@
+import type { ShowAlert } from '../../providers/AlertProvider/useAlert';
+export declare const isValidUrl: (url: string) => boolean;
+/** Returns the URL, prefixed with `https://` when it lacks a protocol, or `null` when it stays invalid */
+export declare const makeValidUrl: (url: string) => string | null;
+export declare const makeValidFileName: (fileName: string) => string;
+export declare const makeHumanReadableFileName: (fileName: string) => string;
+export type SaveShortcut = (fileName: string, url: string) => void | Promise<void>;
+interface CheckAndSaveShortcutOptions {
+    fileName: string;
+    url: string;
+    isEditing: boolean;
+    onSave: SaveShortcut;
+    onClose: () => void;
+    showAlert: ShowAlert;
+    t: (key: string) => string;
+}
+/** Saves the shortcut once its name and URL are valid, and reports the outcome in an alert */
+export declare const checkAndSaveShortcut: ({ fileName, url, isEditing, onSave, onClose, showAlert, t }: CheckAndSaveShortcutOptions) => Promise<void>;
+export {};

package/dist/components/Dialogs/shortcutHelpers.js

@@ -0,0 +1,49 @@
+const SHORTCUT_EXTENSION = '.url';
+export const isValidUrl = (url) => {
+    try {
+        return Boolean(new URL(url));
+    }
+    catch {
+        return false;
+    }
+};
+/** Returns the URL, prefixed with `https://` when it lacks a protocol, or `null` when it stays invalid */
+export const makeValidUrl = (url) => {
+    if (isValidUrl(url))
+        return url;
+    if (isValidUrl(`https://${url}`))
+        return `https://${url}`;
+    return null;
+};
+export const makeValidFileName = (fileName) => fileName.endsWith(SHORTCUT_EXTENSION)
+    ? fileName
+    : `${fileName}${SHORTCUT_EXTENSION}`;
+export const makeHumanReadableFileName = (fileName) => fileName.endsWith(SHORTCUT_EXTENSION)
+    ? fileName.slice(0, -SHORTCUT_EXTENSION.length)
+    : fileName;
+/** Saves the shortcut once its name and URL are valid, and reports the outcome in an alert */
+export const checkAndSaveShortcut = async ({ fileName, url, isEditing, onSave, onClose, showAlert, t }) => {
+    if (!fileName || !url) {
+        showAlert({ message: t('Dialogs.shortcut.needsInfo'), severity: 'error' });
+        return;
+    }
+    const validUrl = makeValidUrl(url);
+    if (!validUrl) {
+        showAlert({
+            message: t('Dialogs.shortcut.urlBadFormat'),
+            severity: 'error'
+        });
+        return;
+    }
+    try {
+        await onSave(makeValidFileName(fileName), validUrl);
+        showAlert({
+            message: t(isEditing ? 'Dialogs.shortcut.edited' : 'Dialogs.shortcut.created'),
+            severity: 'success'
+        });
+    }
+    catch {
+        showAlert({ message: t('Dialogs.shortcut.errored'), severity: 'error' });
+    }
+    onClose();
+};

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

@@ -0,0 +1,7 @@
+import type React from 'react';
+export interface DialogSectionsProps {
+    title?: React.ReactNode;
+    content?: React.ReactNode;
+    actions?: React.ReactNode;
+    actionsLayout?: 'row' | 'column';
+}

package/dist/components/Dialogs/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,40 @@
+import { DialogActionsProps, DialogContentProps, DialogTitleProps, DividerProps } from '@mui/material';
+import React from 'react';
+import type { DialogProps } from '../Dialog';
+export type DialogCloseReason = 'backdropClick' | 'escapeKeyDown';
+export interface DialogLayoutComponentsProps {
+    dialogTitle?: DialogTitleProps;
+    divider?: DividerProps;
+    dialogActions?: DialogActionsProps;
+    dialogContent?: DialogContentProps;
+}
+export interface DialogLayoutProps extends Omit<DialogProps, 'title' | 'content' | 'onClose'> {
+    /** Called without a reason when the close or back button is clicked */
+    onClose?: (event: object, reason?: DialogCloseReason) => void;
+    /** Shows a back button. On full screen, it replaces the close button */
+    onBack?: React.MouseEventHandler<HTMLButtonElement>;
+    align?: 'top' | 'middle';
+    /** Lets the title run under the close and back buttons */
+    disableTitleAutoPadding?: boolean;
+    /** Lets the title wrap and scroll with the content */
+    isFluidTitle?: boolean;
+    /** Removes the paddings around the content */
+    disableGutters?: boolean;
+    titleRef?: React.Ref<HTMLHeadingElement>;
+    /** CSS `background` of the dialog paper */
+    background?: string;
+    componentsProps?: DialogLayoutComponentsProps;
+}
+export interface DialogLayout {
+    id: string;
+    fullScreen: boolean;
+    dialogProps: DialogProps;
+    dialogTitleProps: DialogTitleProps & {
+        ref?: React.Ref<HTMLHeadingElement>;
+    };
+    dividerProps: DividerProps;
+    dialogActionsProps: DialogActionsProps;
+    dialogContentProps: DialogContentProps;
+}
+/** Computes the props of a dialog and of its parts, for dialogs laid out with a title, a content and actions */
+export declare const useDialogLayout: ({ size, fullScreen: fullScreenProp, onClose, onBack, align, disableTitleAutoPadding, isFluidTitle, disableGutters, titleRef, background, componentsProps, classes, slots, slotProps, ...props }: DialogLayoutProps) => DialogLayout;