@centreon/ui 23.10.45 → 23.10.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.45",
+  "version": "23.10.47",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/ActionsList/index.tsx

@@ -1,14 +1,17 @@
+/* eslint-disable react/no-array-index-key */
 import * as React from 'react';
 
 import { makeStyles } from 'tss-react/mui';
 import { useTranslation } from 'react-i18next';
+import { equals } from 'ramda';
 
 import {
   SvgIconProps,
   MenuList,
   MenuItem,
   ListItemText,
-  ListItemIcon
+  ListItemIcon,
+  Divider
 } from '@mui/material';
 
 interface ActionsType {
@@ -18,7 +21,7 @@ interface ActionsType {
 }
 
 interface Props {
-  actions: Array<ActionsType>;
+  actions: Array<ActionsType | 'divider'>;
   className?: string;
 }
 
@@ -34,7 +37,13 @@ const ActionsList = ({ className, actions }: Props): JSX.Element => {
 
   return (
     <MenuList className={cx(classes.list, className)}>
-      {actions?.map(({ Icon, label, onClick }) => {
+      {actions?.map((action, idx) => {
+        if (equals(action, 'divider')) {
+          return <Divider key={`divider_${idx}`} />;
+        }
+
+        const { label, Icon, onClick } = action as ActionsType;
+
         return (
           <MenuItem aria-label={label} key={label} onClick={onClick}>
             <ListItemIcon>

package/src/Dashboard/Dashboard.styles.ts

@@ -72,8 +72,7 @@ export const useDashboardItemStyles = makeStyles()((theme) => ({
     width: '100%'
   },
   widgetContent: {
-    height: '100%',
-    padding: theme.spacing(1, 2)
+    height: '100%'
   },
   widgetHeader: {
     '&:hover': {
@@ -81,5 +80,8 @@ export const useDashboardItemStyles = makeStyles()((theme) => ({
     },
     cursor: 'move',
     padding: theme.spacing(0.5, 2)
+  },
+  widgetPadding: {
+    padding: theme.spacing(1, 2)
   }
 }));

package/src/Dashboard/Item.tsx

@@ -17,6 +17,7 @@ import { useDashboardItemStyles } from './Dashboard.styles';
 interface DashboardItemProps {
   children: ReactElement;
   className?: string;
+  disablePadding?: boolean;
   header?: ReactElement;
   id: string;
   onMouseDown?: (e: MouseEvent<HTMLDivElement>) => void;
@@ -35,11 +36,12 @@ const Item = forwardRef(
       onMouseDown,
       onMouseUp,
       onTouchEnd,
-      id
+      id,
+      disablePadding = false
     }: DashboardItemProps,
     ref: ForwardedRef<HTMLDivElement>
   ): ReactElement => {
-    const { classes } = useDashboardItemStyles();
+    const { classes, cx } = useDashboardItemStyles();
 
     const hasHeader = !isNil(header);
 
@@ -69,7 +71,14 @@ const Item = forwardRef(
                 {header}
               </div>
             )}
-            <div className={classes.widgetContent}>{children}</div>
+            <div
+              className={cx(
+                classes.widgetContent,
+                !disablePadding && classes.widgetPadding
+              )}
+            >
+              {children}
+            </div>
           </Card>
         </div>
       ),

package/src/Wizard/WizardContent.tsx

@@ -7,11 +7,10 @@ import { makeStyles } from 'tss-react/mui';
 import { WizardContentProps } from './models';
 import ActionsBar from './ActionsBar';
 
-const useStyles = makeStyles()((theme) => ({
+const useStyles = makeStyles()(() => ({
   content: {
     height: '100%',
-    overflow: 'auto',
-    padding: theme.spacing(2, 3, 1, 3)
+    overflow: 'auto'
   },
   form: {
     display: 'flex',

package/src/Wizard/index.tsx

@@ -38,7 +38,8 @@ const Wizard = ({
   onClose = undefined,
   confirmDialogLabels = undefined,
   actionsBarLabels = actionsBarLabelsDefaultValues,
-  displayConfirmDialog
+  displayConfirmDialog,
+  ...rest
 }: WizardProps): JSX.Element => {
   const { classes } = useStyles();
   const [currentStep, setCurrentStep] = useState(0);
@@ -119,6 +120,7 @@ const Wizard = ({
         maxWidth={width}
         open={open}
         onClose={handleClose}
+        {...rest}
       >
         <Stepper currentStep={currentStep} steps={steps} />
         <Formik

package/src/Wizard/models.ts

@@ -1,5 +1,7 @@
 import { FormikValues, FormikErrors, FormikHelpers } from 'formik';
 
+import { DialogProps } from '@mui/material';
+
 export interface StepComponentProps {
   disableNextOnSendingRequests: (sendingRequests: Array<boolean>) => void;
 }
@@ -38,7 +40,10 @@ interface ConfirmDialogLabels {
   labelTitle: string;
 }
 
+type ValueOf<T> = T[keyof T];
+
 export interface WizardProps {
+  [key: string]: ValueOf<DialogProps>;
   actionsBarLabels?: ActionsBarLabels;
   confirmDialogLabels?: ConfirmDialogLabels;
   displayConfirmDialog?: boolean;

package/src/components/DataTable/EmptyState/DataTableEmptyState.tsx

@@ -12,7 +12,7 @@ import { useStyles } from './DataTableEmptyState.styles';
 type ListEmptyStateProps = {
   canCreate?: boolean;
   labels: {
-    actions: {
+    actions?: {
       create: string;
     };
     title: string;
@@ -42,7 +42,7 @@ const DataTableEmptyState = ({
             iconVariant="start"
             onClick={() => onCreate?.()}
           >
-            {t(labels.actions.create)}
+            {t(labels.actions?.create || '')}
           </Button>
         )}
       </div>

package/src/components/Modal/Modal.styles.ts

@@ -15,6 +15,10 @@ const useStyles = makeStyles()((theme) => ({
     },
     '&[data-size="small"] .MuiDialog-paper': {
       width: '400px'
+    },
+    '&[data-size="xlarge"] .MuiDialog-paper': {
+      maxWidth: '1200px',
+      width: 'calc(100% - 64px)'
     }
   },
   modalActions: {

package/src/components/Modal/Modal.tsx

@@ -16,7 +16,7 @@ export type ModalProps = {
     reason: 'escapeKeyDown' | 'backdropClick' | 'closeButton'
   ) => void;
   open: boolean;
-  size?: 'small' | 'medium' | 'large';
+  size?: 'small' | 'medium' | 'large' | 'xlarge';
 } & AriaLabelingAttributes;
 
 /** *