@linagora/twake-mui 15.2.0 → 16.0.0

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.0",
   "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",