@linagora/twake-mui 15.2.0 → 16.0.1

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;

package/dist/components/Dialogs/useDialogLayout.js

@@ -0,0 +1,63 @@
+import { Grow } from '@mui/material';
+import { mergeSlotProps } from '@mui/material/utils';
+import cx from 'classnames';
+import { useId } from 'react';
+import SlideUpTransition from './SlideUpTransition';
+import { useBreakpoints } from '../../hooks/useBreakpoints';
+/** Computes the props of a dialog and of its parts, for dialogs laid out with a title, a content and actions */
+export const useDialogLayout = ({ size = 'medium', fullScreen: fullScreenProp, onClose, onBack, align, disableTitleAutoPadding, isFluidTitle, disableGutters, titleRef, background, componentsProps, classes, slots, slotProps, ...props }) => {
+    const { isMobile } = useBreakpoints();
+    const id = useId();
+    const fullScreen = fullScreenProp ?? (size !== 'small' && isMobile);
+    const titleId = `modal-title-${id}`;
+    const hasCloseButton = !fullScreen && Boolean(onClose);
+    const hasBackButton = Boolean(onBack) || (fullScreen && Boolean(onClose));
+    return {
+        id,
+        fullScreen,
+        dialogProps: {
+            'aria-labelledby': titleId,
+            ...props,
+            size,
+            fullScreen,
+            onClose,
+            classes: {
+                ...classes,
+                container: cx({ alignTop: align === 'top' }, classes?.container)
+            },
+            slots: {
+                transition: fullScreen ? SlideUpTransition : Grow,
+                ...slots
+            },
+            slotProps: {
+                ...slotProps,
+                paper: background
+                    ? mergeSlotProps(slotProps?.paper, { sx: { background } })
+                    : slotProps?.paper
+            }
+        },
+        dialogTitleProps: {
+            ...componentsProps?.dialogTitle,
+            id: titleId,
+            ref: titleRef,
+            className: cx({
+                'u-ellipsis': !isFluidTitle,
+                dialogTitleFluid: isFluidTitle,
+                dialogTitleWithClose: hasCloseButton && !disableTitleAutoPadding,
+                dialogTitleWithBack: hasBackButton && !disableTitleAutoPadding
+            }, componentsProps?.dialogTitle?.className)
+        },
+        dividerProps: {
+            ...componentsProps?.divider,
+            className: cx('dialogDivider', componentsProps?.divider?.className)
+        },
+        dialogActionsProps: {
+            ...componentsProps?.dialogActions,
+            className: cx('dialogActions', componentsProps?.dialogActions?.className)
+        },
+        dialogContentProps: {
+            ...componentsProps?.dialogContent,
+            className: cx({ disableGutters }, componentsProps?.dialogContent?.className)
+        }
+    };
+};

package/dist/index.d.ts

@@ -41,7 +41,18 @@ export { default as BottomSheetHeader } from './components/BottomSheet/BottomShe
 export { default as BottomSheetTitle } from './components/BottomSheet/BottomSheetTitle';
 export { default as Chip } from './components/Chip';
 export { default as ColorList } from './components/ColorList';
-export { Dialog, default as DialogDefault } from './components/Dialog';
+export { default as Dialog } from './components/Dialog';
+export { default as StandardDialog } from './components/Dialogs/StandardDialog';
+export { default as DialogCloseButton } from './components/Dialogs/DialogCloseButton';
+export { default as DialogBackButton } from './components/Dialogs/DialogBackButton';
+export { default as ConfirmDialog } from './components/Dialogs/ConfirmDialog';
+export { default as FixedDialog } from './components/Dialogs/FixedDialog';
+export { default as FixedActionsDialog } from './components/Dialogs/FixedActionsDialog';
+export { default as IllustrationDialog } from './components/Dialogs/IllustrationDialog';
+export { default as PermissionDialog } from './components/Dialogs/PermissionDialog';
+export { default as InstallFlagshipAppDialog } from './components/Dialogs/InstallFlagshipAppDialog';
+export { default as ShortcutDialog } from './components/Dialogs/ShortcutDialog';
+export { useDialogLayout } from './components/Dialogs/useDialogLayout';
 export { default as ContactPopover } from './components/ContactPopover';
 export { default as DropdownButton } from './components/DropdownButton';
 export { default as DropdownText } from './components/DropdownText';
@@ -127,6 +138,18 @@ export type { OverlayBox, OverlayRegion } from './components/SpaceOverlay/region
 export type { OverlayFrameProps } from './components/SpaceOverlay/OverlayFrame';
 export type { ColorListProps, ColorListSize } from './components/ColorList';
 export type { DialogProps, DialogSize } from './components/Dialog';
+export type { StandardDialogProps } from './components/Dialogs/StandardDialog';
+export type { DialogSectionsProps } from './components/Dialogs/types';
+export type { ShortcutDialogProps } from './components/Dialogs/ShortcutDialog';
+export type { InstallFlagshipAppDialogProps } from './components/Dialogs/InstallFlagshipAppDialog';
+export type { PermissionDialogProps } from './components/Dialogs/PermissionDialog';
+export type { IllustrationDialogProps } from './components/Dialogs/IllustrationDialog';
+export type { FixedActionsDialogProps } from './components/Dialogs/FixedActionsDialog';
+export type { FixedDialogProps } from './components/Dialogs/FixedDialog';
+export type { ConfirmDialogProps } from './components/Dialogs/ConfirmDialog';
+export type { DialogCloseButtonProps } from './components/Dialogs/DialogCloseButton';
+export type { DialogBackButtonProps } from './components/Dialogs/DialogBackButton';
+export type { DialogCloseReason, DialogLayout, DialogLayoutComponentsProps, DialogLayoutProps } from './components/Dialogs/useDialogLayout';
 export type { PointerAlertProps, PointerAlertDirection } from './components/PointerAlert';
 export type { ProgressionBannerProps } from './components/ProgressionBanner';
 export type { EmptyProps, EmptyIconSize, EmptyComponentsProps } from './components/Empty';

package/dist/index.js

@@ -44,7 +44,18 @@ export { default as BottomSheetHeader } from './components/BottomSheet/BottomShe
 export { default as BottomSheetTitle } from './components/BottomSheet/BottomSheetTitle';
 export { default as Chip } from './components/Chip';
 export { default as ColorList } from './components/ColorList';
-export { Dialog, default as DialogDefault } from './components/Dialog';
+export { default as Dialog } from './components/Dialog';
+export { default as StandardDialog } from './components/Dialogs/StandardDialog';
+export { default as DialogCloseButton } from './components/Dialogs/DialogCloseButton';
+export { default as DialogBackButton } from './components/Dialogs/DialogBackButton';
+export { default as ConfirmDialog } from './components/Dialogs/ConfirmDialog';
+export { default as FixedDialog } from './components/Dialogs/FixedDialog';
+export { default as FixedActionsDialog } from './components/Dialogs/FixedActionsDialog';
+export { default as IllustrationDialog } from './components/Dialogs/IllustrationDialog';
+export { default as PermissionDialog } from './components/Dialogs/PermissionDialog';
+export { default as InstallFlagshipAppDialog } from './components/Dialogs/InstallFlagshipAppDialog';
+export { default as ShortcutDialog } from './components/Dialogs/ShortcutDialog';
+export { useDialogLayout } from './components/Dialogs/useDialogLayout';
 export { default as ContactPopover } from './components/ContactPopover';
 export { default as DropdownButton } from './components/DropdownButton';
 export { default as DropdownText } from './components/DropdownText';

package/dist/lib/overrides.js

@@ -430,15 +430,20 @@ export const overrides = {
                         padding: '0 8px 8px',
                         height: 'auto',
                         maxHeight: 'calc(100% - 32px)',
-                        borderRadius: 6
+                        borderRadius: 6,
+                        '& .dialogDivider': { marginLeft: -8, marginRight: -8 }
                     }
                 },
                 '&.medium': { maxWidth: 544 },
                 '&.large': { maxWidth: 800 },
                 '&.full': { maxWidth: '100%' }
             }),
+            container: {
+                '&.alignTop': { alignItems: 'start' }
+            },
             paperFullScreen: {
-                '&.small, &.medium, &.large': { maxWidth: '100%' }
+                '&.small, &.medium, &.large': { maxWidth: '100%' },
+                '& .dialogActions': { paddingBottom: 'env(safe-area-inset-bottom)' }
             }
         }
     },
@@ -461,7 +466,8 @@ export const overrides = {
                 '&.dialogTitleWithClose': {
                     paddingRight: '4rem',
                     [theme.breakpoints.down('md')]: { paddingRight: '3rem' }
-                }
+                },
+                '&.dialogTitleFluid': { paddingTop: 0 }
             })
         }
     },
@@ -471,7 +477,41 @@ export const overrides = {
                 padding: '24px 32px 0',
                 [theme.breakpoints.down('md')]: { padding: '24px 16px 0' },
                 // MUI drops the top padding after a title, cozy-ui keeps it
-                [`.${dialogTitleClasses.root} + &`]: { paddingTop: 24 }
+                [`.${dialogTitleClasses.root} + &`]: { paddingTop: 24 },
+                '&.disableGutters': {
+                    padding: 0,
+                    '& .dialogContentInner': { marginBottom: 0 },
+                    '& .dialogTitleFluidContainer': { margin: 0 }
+                },
+                '& .dialogContentInner': {
+                    marginBottom: 24,
+                    '&.withFluidActions': {
+                        [theme.breakpoints.down('md')]: {
+                            marginBottom: 0,
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            '& .dialogContentWrapper': {
+                                flexGrow: 1,
+                                '&:not(.withActions)': {
+                                    paddingBottom: 'calc(env(safe-area-inset-bottom) + 16px)'
+                                }
+                            },
+                            '& .dialogActions': {
+                                paddingBottom: 'calc(env(safe-area-inset-bottom) + 16px)'
+                            }
+                        }
+                    },
+                    '& .dialogTitleFluidContainer': {
+                        marginLeft: '-2rem',
+                        marginRight: '-2rem',
+                        [theme.breakpoints.down('md')]: {
+                            marginLeft: '-1rem',
+                            marginRight: '-1rem',
+                            marginTop: '-0.75rem'
+                        }
+                    }
+                }
             })
         }
     },
@@ -484,7 +524,16 @@ export const overrides = {
                     margin: '8px 16px',
                     '& button': { flexGrow: 1 }
                 },
-                '& > :not(style) ~ :not(style)': { marginLeft: 4 }
+                '& > :not(style) ~ :not(style)': { marginLeft: 4 },
+                '&.dialogActionsFluid': { margin: '24px 0 0' },
+                '&.columnLayout': {
+                    flexDirection: 'column-reverse',
+                    '& button': {
+                        width: '100%',
+                        margin: 0,
+                        '&:not(:first-child)': { marginBottom: 8 }
+                    }
+                }
             })
         }
     },
@@ -495,7 +544,7 @@ export const overrides = {
                 variants: [
                     {
                         props: { variant: 'inset' },
-                        style: { marginLeft: 64 }
+                        style: { marginLeft: 64, '&.dialogDivider': { marginLeft: 80 } }
                     },
                     {
                         props: ({ ownerState }) => !!ownerState.children &&
@@ -651,6 +700,22 @@ export const overrides = {
         defaultProps: { size: 'large' },
         styleOverrides: {
             root: ({ theme }) => ({
+                '&.dialogIconButton': {
+                    position: 'absolute',
+                    top: '1.15rem',
+                    zIndex: 1,
+                    backgroundColor: theme.vars.palette.background.paper,
+                    '&:hover': { backgroundColor: theme.vars.palette.action.selected },
+                    [theme.breakpoints.down('md')]: { top: '0.25rem' }
+                },
+                '&.dialogCloseButton': {
+                    right: '1.15rem',
+                    [theme.breakpoints.down('md')]: { right: '0.25rem' }
+                },
+                '&.dialogBackButton': {
+                    left: '1.15rem',
+                    [theme.breakpoints.down('md')]: { left: '0.25rem' }
+                },
                 variants: [
                     {
                         props: { color: 'default' },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linagora/twake-mui",
   "type": "module",
-  "version": "15.2.0",
+  "version": "16.0.1",
   "description": "MUI v9 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",
@@ -37,7 +37,7 @@
     "access": "public"
   },
   "scripts": {
-    "build": "tsc",
+    "build": "tsc && node scripts/copyAssets.mjs",
     "build:doc": "storybook build --output-dir storybook-static",
     "start": "tsc --watch",
     "test": "vitest run --project unit",