@centreon/ui 25.1.5 → 25.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "25.1.5",
+  "version": "25.1.7",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

package/src/Dashboard/Dashboard.styles.ts

@@ -17,51 +17,106 @@ export const useDashboardLayoutStyles = makeStyles<boolean>()(
         boxShadow: theme.shadows[3]
       },
       '& .react-grid-item.react-grid-placeholder': {
-        backgroundColor: alpha(theme.palette.primary.main, 0.2)
+        backgroundColor: alpha(theme.palette.primary.main, 0.4)
       },
       '& .react-grid-item.resizing': {
         boxShadow: theme.shadows[3]
       },
       '& .react-resizable-handle': {
-        backgroundColor: theme.palette.action.focus,
-        backgroundImage: 'none',
-        borderRadius: theme.shape.borderRadius,
-        display: isStatic ? 'none' : 'block',
+        display: isStatic ? 'none' : 'flex',
+        position: 'absolute',
         opacity: 0,
-        position: 'absolute'
+        transition: theme.transitions.create('opacity')
       },
-      '& .react-resizable-handle.react-resizable-handle-e': {
+      '& .react-resizable-handle-e': {
+        '& .handle-content-e': {
+          backgroundColor: theme.palette.action.focus,
+          backgroundImage: 'none',
+          borderRadius: theme.shape.borderRadius,
+          display: isStatic ? 'none' : 'block',
+          height: 'calc(100% / 3)',
+          width: '100%'
+        },
         cursor: 'ew-resize',
         height: `calc(100% - ${theme.spacing(3)})`,
         marginTop: 0,
         right: 0,
         top: 0,
-        transform: 'rotate(0deg)',
-        width: theme.spacing(1)
+        width: theme.spacing(0.75),
+        alignItems: 'center'
+      },
+      '& .react-resizable-handle-w': {
+        '& .handle-content-w': {
+          backgroundColor: theme.palette.action.focus,
+          backgroundImage: 'none',
+          borderRadius: theme.shape.borderRadius,
+          display: isStatic ? 'none' : 'block',
+          height: 'calc(100% / 3)',
+          width: '100%'
+        },
+        cursor: 'ew-resize',
+        height: `calc(100% - ${theme.spacing(3)})`,
+        marginTop: 0,
+        left: 0,
+        top: 0,
+        width: theme.spacing(0.75),
+        alignItems: 'center'
       },
-      '& .react-resizable-handle.react-resizable-handle-s': {
+
+      '& .react-resizable-handle-s': {
+        justifyContent: 'center',
+        '& .handle-content-s': {
+          backgroundColor: theme.palette.action.focus,
+          backgroundImage: 'none',
+          borderRadius: theme.shape.borderRadius,
+          display: isStatic ? 'none' : 'block',
+          width: 'calc(100% / 4)'
+        },
         bottom: 4,
         cursor: 'ns-resize',
-        height: theme.spacing(1),
+        height: theme.spacing(0.75),
         left: 0,
         marginLeft: 0,
-        transform: 'rotate(0deg)',
-        width: `calc(100% - ${theme.spacing(3)})`
+        width: `calc(100% - ${theme.spacing(1)})`
       },
-      '& .react-resizable-handle.react-resizable-handle-se': {
+      '& .react-resizable-handle-se': {
+        '& .handle-content-se': {
+          backgroundColor: theme.palette.action.focus,
+          backgroundImage: 'none',
+          borderRadius: theme.shape.borderRadius,
+          display: isStatic ? 'none' : 'block',
+          width: '100%',
+          height: '100%'
+        },
         bottom: 4,
         cursor: 'nwse-resize',
-        height: theme.spacing(2),
+        height: theme.spacing(1.5),
         right: 0,
-        transform: 'rotate(0deg)',
-        width: theme.spacing(2)
+        width: theme.spacing(1.5),
+        opacity: 0.7
       },
-      '& .react-resizable-handle::after': {
-        content: 'none'
+      '& .react-resizable-handle-sw': {
+        '& .handle-content-sw': {
+          backgroundColor: theme.palette.action.focus,
+          backgroundImage: 'none',
+          borderRadius: theme.shape.borderRadius,
+          display: isStatic ? 'none' : 'block',
+          width: '100%',
+          height: '100%'
+        },
+        bottom: 4,
+        cursor: 'nesw-resize',
+        height: theme.spacing(1.5),
+        left: 0,
+        width: theme.spacing(1.5),
+        opacity: 0.7
       },
       '& .react-resizable-handle:hover': {
         opacity: 1
       },
+      '& .react-resizable-handle::after': {
+        content: 'none'
+      },
       position: 'relative',
       height: '100%'
     }
@@ -93,10 +148,10 @@ export const useDashboardItemStyles = makeStyles<{ hasHeader: boolean }>()(
       '&:hover': {
         backgroundColor: theme.palette.action.hover
       },
-      '&[data-canMove="false"]': {
+      '&[data-can-move="false"]': {
         cursor: 'default'
       },
-      '&[data-canMove="true"]': {
+      '&[data-can-move="true"]': {
         cursor: 'move'
       },
       padding: theme.spacing(0, 1.5),

package/src/Dashboard/Grid.tsx

@@ -27,7 +27,7 @@ const Grid = ({ width, height, columns }: Props): ReactElement => {
     [width]
   );
 
-  const numberOfRows = Math.floor(height / (rowHeight + 16));
+  const numberOfRows = Math.floor(height / (rowHeight + 8));
 
   const yScale = useMemo(
     () =>
@@ -58,8 +58,8 @@ const Grid = ({ width, height, columns }: Props): ReactElement => {
           yScale={yScale}
           xScale={xScale}
           stroke={theme.palette.divider}
-          top={-10}
           width={width}
+          left={-8}
         />
       </svg>
     ),

package/src/Dashboard/Item.tsx

@@ -9,7 +9,7 @@ import {
 } from 'react';
 
 import { useAtomValue } from 'jotai';
-import { equals, isNil, prop, type } from 'ramda';
+import { equals, isNil, omit, type } from 'ramda';
 
 import { Card, useTheme } from '@mui/material';
 import LoadingSkeleton from '../LoadingSkeleton';
@@ -79,25 +79,27 @@ const Item = forwardRef<HTMLDivElement, DashboardItemProps>(
     const cardContainerListeners = !hasHeader ? listeners : {};
 
     useEffect(() => {
-      if (isNil(ref)) {
+      if (isNil(ref?.current)) {
         return;
       }
 
       setElement(ref.current);
     }, [ref]);
 
-    const originStyle = {
-      ...style,
-      width: `calc(${prop('width', style) || '0px'} - 12px)`
-    };
+    const newTransform =
+      style?.transform &&
+      `translate3d(${style.transform.match(/translate\(([a-z0-9\ \,\-]+)\)/)[1]}, 0px)`;
 
     return useMemoComponent({
       Component: (
         <div
-          ref={ref}
           {...cardContainerListeners}
           className={sanitizedReactGridLayoutClassName}
-          style={originStyle}
+          ref={ref}
+          style={{
+            ...omit(['transform'], style || {}),
+            transform: newTransform
+          }}
         >
           <ExpandableContainer>
             {({ isExpanded, label, key, ...rest }) => {
@@ -122,7 +124,7 @@ const Item = forwardRef<HTMLDivElement, DashboardItemProps>(
                     {childrenHeader && (
                       <div
                         className={classes.widgetHeader}
-                        data-canMove={canControl}
+                        data-can-move={canControl}
                       >
                         {canControl && (
                           <div

package/src/Dashboard/Layout.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { useSetAtom } from 'jotai';
 import GridLayout, { Layout, WidthProvider } from 'react-grid-layout';
@@ -8,7 +8,6 @@ import { ParentSize, useMemoComponent } from '..';
 
 import { Box } from '@mui/material';
 import { useDashboardLayoutStyles } from './Dashboard.styles';
-import Grid from './Grid';
 import { isResizingItemAtom } from './atoms';
 import { getColumnsFromScreenSize, getLayout, rowHeight } from './utils';
 
@@ -23,22 +22,20 @@ interface DashboardLayoutProps<T> {
   layout: Array<T>;
 }
 
-const bottom = (layout: Array<Layout>): number => {
-  let max = 0;
-  let bottomY = 0;
-
-  layout.forEach((panel) => {
-    bottomY = panel.y + panel.h;
-    if (bottomY > max) max = bottomY;
-  });
-
-  return max;
+const Handle = (axis, ref) => {
+  return (
+    <span
+      className={`react-resizable-handle react-resizable-handle-${axis}`}
+      ref={ref}
+    >
+      <span className={`handle-content-${axis}`} />
+    </span>
+  );
 };
 
 const DashboardLayout = <T extends Layout>({
   children,
   changeLayout,
-  displayGrid,
   layout,
   isStatic = false,
   additionalMemoProps = []
@@ -63,13 +60,6 @@ const DashboardLayout = <T extends Layout>({
     setIsResizingItem(null);
   }, []);
 
-  const containerHeight =
-    useMemo((): number | undefined => {
-      const nbRow = bottom(getLayout(layout));
-      const containerPaddingY = 4;
-      return nbRow * rowHeight + (nbRow - 1) * 20 + containerPaddingY * 2;
-    }, [layout, rowHeight]) ?? 0;
-
   useEffect(() => {
     window.addEventListener('resize', resize);
 
@@ -85,26 +75,19 @@ const DashboardLayout = <T extends Layout>({
         sx={{ overflowY: 'auto', overflowX: 'hidden' }}
       >
         <ParentSize>
-          {({ width, height }): JSX.Element => (
+          {({ width }): JSX.Element => (
             <Box className={classes.container}>
-              {displayGrid && (
-                <Grid
-                  columns={columns}
-                  height={containerHeight > height ? containerHeight : height}
-                  width={width}
-                />
-              )}
               <ReactGridLayout
                 cols={columns}
-                containerPadding={[4, 0]}
                 layout={getLayout(layout)}
-                margin={[20, 20]}
-                resizeHandles={['s', 'e', 'se']}
+                margin={[12, 12]}
+                resizeHandles={['s', 'e', 'se', 'sw', 'w']}
                 rowHeight={rowHeight}
                 width={width}
                 onLayoutChange={changeLayout}
                 onResizeStart={startResize}
                 onResizeStop={stopResize}
+                resizeHandle={Handle}
               >
                 {children}
               </ReactGridLayout>
@@ -113,7 +96,7 @@ const DashboardLayout = <T extends Layout>({
         </ParentSize>
       </Box>
     ),
-    memoProps: [columns, layout, displayGrid, isStatic, ...additionalMemoProps]
+    memoProps: [columns, layout, isStatic, ...additionalMemoProps]
   });
 };
 

package/src/Dashboard/utils.ts

@@ -5,7 +5,7 @@ const minColumns = 1;
 const breakpoint = 768;
 
 export const rowHeight = 64;
-export const maxColumns = 12;
+export const maxColumns = 24;
 
 export const getIsSmallScreenSize = (): boolean =>
   lt(window.innerWidth, breakpoint);

package/src/Dialog/Confirm/index.tsx

@@ -1,4 +1,4 @@
-import { ButtonProps, DialogContentText, Typography } from '@mui/material';
+import { ButtonProps, DialogContentText, DialogContentTextProps, Typography } from '@mui/material';
 
 import Dialog, { Props as DialogProps } from '..';
 
@@ -8,6 +8,7 @@ type Props = DialogProps & {
   labelSecondMessage?: string | null;
   restCancelButtonProps?: ButtonProps;
   restConfirmButtonProps?: ButtonProps;
+  dialogContentTextProps?:DialogContentTextProps
 };
 
 const Confirm = ({
@@ -16,6 +17,7 @@ const Confirm = ({
   children,
   restCancelButtonProps,
   restConfirmButtonProps,
+  dialogContentTextProps,
   ...rest
 }: Props): JSX.Element => (
   <Dialog
@@ -23,7 +25,7 @@ const Confirm = ({
     restConfirmButtonProps={restConfirmButtonProps}
     {...rest}
   >
-    <DialogContentText>
+    <DialogContentText {...dialogContentTextProps}>
       {labelMessage && <Typography>{labelMessage}</Typography>}
       {labelSecondMessage && <Typography>{labelSecondMessage}</Typography>}
       {children}

package/src/Dialog/Duplicate/index.tsx

@@ -56,10 +56,12 @@ const Duplicate = ({
         fullWidth
         className={classes.container}
         color="primary"
-        inputProps={{
-          'aria-label': 'Duplications',
-          max: limit,
-          min: 1
+        slotProps={{
+          htmlInput: {
+            'aria-label': 'Duplications',
+            max: limit,
+            min: 1
+          }
         }}
         label={labelInput}
         margin="dense"

package/src/Dialog/index.tsx

@@ -10,6 +10,7 @@ import {
   DialogContent,
   DialogProps,
   DialogTitle,
+  DialogTitleProps,
   Dialog as MuiDialog
 } from '@mui/material';
 
@@ -37,6 +38,7 @@ export type Props = {
   className?: string;
   confirmDisabled?: boolean;
   contentWidth?: number;
+  dialogTitleProps?:DialogTitleProps
   dialogActionsClassName?: string;
   dialogConfirmButtonClassName?: string;
   dialogContentClassName?: string;
@@ -68,6 +70,7 @@ const Dialog = ({
   confirmDisabled = false,
   cancelDisabled = false,
   submitting = false,
+  dialogTitleProps,
   dialogPaperClassName,
   dialogTitleClassName,
   dialogContentClassName,
@@ -90,7 +93,7 @@ const Dialog = ({
       {...rest}
     >
       {labelTitle && (
-        <DialogTitle className={dialogTitleClassName}>{labelTitle}</DialogTitle>
+        <DialogTitle className={dialogTitleClassName} {...dialogTitleProps}>{labelTitle}</DialogTitle>
       )}
       {children && (
         <DialogContent

package/src/Form/FormButtons.tsx

@@ -66,7 +66,7 @@ const FormButtons = (): JSX.Element => {
           {t(labelReset)}
         </Button>
         <SaveButton
-          dataTestId={labelSave}
+          data-testid={labelSave}
           disabled={not(canSubmit)}
           labelLoading={labelSaving}
           labelSave={labelSave}

package/src/Form/Inputs/Text.tsx

@@ -138,10 +138,14 @@ const Text = ({
         value={value || ''}
         onBlur={handleBlur(fieldName)}
         onChange={changeText}
-        inputProps={{
-          'data-testid': dataTestId || label,
-          'aria-label': label,
-          min: text?.min
+        textFieldSlotsAndSlotProps={{
+          slotProps: {
+            htmlInput: {
+              'data-testid': dataTestId || label,
+              'aria-label': label,
+              min: text?.min
+            }
+          }
         }}
       />
     ),

package/src/Graph/Chart/Chart.tsx

@@ -232,7 +232,7 @@ const Chart = ({
     [axis?.showGridLines]
   );
 
-  if (!isInViewport && !skipIntersectionObserver) {
+  if ((!isInViewport && !skipIntersectionObserver) || !height) {
     return (
       <Skeleton
         height={graphSvgRef?.current?.clientHeight ?? graphHeight}

package/src/Graph/SingleBar/SingleBar.tsx

@@ -1,3 +1,4 @@
+import { Skeleton } from '@mui/material';
 import { ParentSize } from '../..';
 
 import ResponsiveSingleBar from './ResponsiveSingleBar';
@@ -10,14 +11,20 @@ const SingleBar = ({ data, ...props }: SingleBarProps): JSX.Element | null => {
 
   return (
     <ParentSize>
-      {({ width, height }) => (
-        <ResponsiveSingleBar
-          {...props}
-          data={data}
-          height={height}
-          width={width}
-        />
-      )}
+      {({ width, height }) => {
+        if (!height || !width) {
+          return <Skeleton height={20} variant="rectangular" width="100%" />;
+        }
+
+        return (
+          <ResponsiveSingleBar
+            {...props}
+            data={data}
+            height={height}
+            width={width}
+          />
+        );
+      }}
     </ParentSize>
   );
 };

package/src/InputField/Number/Number.cypress.spec.tsx

@@ -68,8 +68,12 @@ describe('Number field', () => {
     initialize({
       dataTestId: 'test',
       defaultValue: 25,
-      inputProps: {
-        min: 2
+      textFieldSlotsAndSlotProps: {
+        slotProps: {
+          htmlInput: {
+            min: 2
+          }
+        }
       },
       onChange: cy.stub()
     });

package/src/InputField/Number/Number.tsx

@@ -31,7 +31,7 @@ const NumberField = ({
     defaultValue ? `${defaultValue}` : ''
   );
 
-  const { inputProps } = props;
+  const { textFieldSlotsAndSlotProps } = props;
 
   const changeValue = (event: ChangeEvent<HTMLInputElement>): void => {
     const inputValue = event.target.value;
@@ -44,8 +44,10 @@ const NumberField = ({
         T,
         always(
           clamp(
-            inputProps?.min || Number.NEGATIVE_INFINITY,
-            inputProps?.max || Number.POSITIVE_INFINITY,
+            textFieldSlotsAndSlotProps?.slotProps?.htmlInput?.min ||
+              Number.NEGATIVE_INFINITY,
+            textFieldSlotsAndSlotProps?.slotProps?.htmlInput?.max ||
+              Number.POSITIVE_INFINITY,
             number
           )
         )
@@ -59,12 +61,15 @@ const NumberField = ({
 
   return (
     <TextField
-      defaultValue={defaultValue}
       type="number"
       value={actualValue}
       onChange={changeValue}
       {...props}
-      inputProps={inputProps}
+      textFieldSlotsAndSlotProps={{
+        slotProps: {
+          htmlInput: { ...textFieldSlotsAndSlotProps?.slotProps?.htmlInput }
+        }
+      }}
       placeholder={
         placeholder || (!defaultValue ? `${fallbackValue}` : undefined)
       }

package/src/InputField/Select/Autocomplete/Draggable/index.tsx

@@ -181,9 +181,19 @@ const DraggableAutocomplete = (
         {...renderProps}
         error={error}
         helperText={error}
-        inputProps={{
-          ...renderProps.inputProps,
-          value: inputText || ''
+        textFieldSlotsAndSlotProps={{
+          slotProps: {
+            input:{
+              ...renderProps?.InputProps
+            },
+            inputLabel:{
+              ...renderProps?.inputLabel
+            },
+            htmlInput: {
+              ...renderProps.inputProps,
+              value: inputText || ''
+            }
+          }
         }}
         label={label}
         required={required}

package/src/InputField/Select/Autocomplete/autoComplete.styles.ts

@@ -0,0 +1,92 @@
+import { equals } from 'ramda';
+import { makeStyles } from 'tss-react/mui';
+
+import { autocompleteClasses } from '@mui/material/Autocomplete';
+
+import { ThemeMode } from '@centreon/ui-context';
+
+interface StyledProps {
+  hideInput?: boolean;
+}
+
+const textfieldHeight = (hideInput?: boolean): number | undefined =>
+  hideInput ? 0 : undefined;
+
+export const useAutoCompleteStyles = makeStyles<StyledProps>()(
+  (theme, { hideInput }) => ({
+    hiddenText: {
+      transform: 'scale(0)'
+    },
+    input: {
+      '&:after': {
+        borderBottom: 0
+      },
+      '&:before': {
+        borderBottom: 0,
+        content: 'unset'
+      },
+      '&:hover:before': {
+        borderBottom: 0
+      },
+      height: textfieldHeight(hideInput)
+    },
+    inputLabel: {
+      '&&': {
+        fontSize: theme.typography.body1.fontSize,
+        maxWidth: '72%',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        transform: 'translate(12px, 14px) scale(1)',
+        whiteSpace: 'nowrap'
+      }
+    },
+    inputLabelShrink: {
+      '&&': {
+        maxWidth: '90%'
+      }
+    },
+    inputWithLabel: {
+      '&[class*="MuiFilledInput-root"]': {
+        paddingTop: theme.spacing(2)
+      },
+      paddingTop: theme.spacing(1)
+    },
+    inputWithoutLabel: {
+      '&[class*="MuiFilledInput-root"][class*="MuiFilledInput-marginDense"]': {
+        paddingBottom: hideInput ? 0 : theme.spacing(0.75),
+        paddingRight: hideInput ? 0 : theme.spacing(1),
+        paddingTop: hideInput ? 0 : theme.spacing(0.75)
+      }
+    },
+    loadingIndicator: {
+      textAlign: 'center'
+    },
+    options: {
+      alignItems: 'center',
+      display: 'grid',
+      gridAutoFlow: 'column',
+      gridGap: theme.spacing(1)
+    },
+    popper: {
+      [`& .${autocompleteClasses.listbox}`]: {
+        [`& .${autocompleteClasses.option}`]: {
+          [`&:hover, &[aria-selected="true"], &.${autocompleteClasses.focused},
+        &.${autocompleteClasses.focused}[aria-selected="true"]`]: {
+            background: equals(theme.palette.mode, ThemeMode.dark)
+              ? theme.palette.primary.dark
+              : theme.palette.primary.light,
+            color: equals(theme.palette.mode, ThemeMode.dark)
+              ? theme.palette.common.white
+              : theme.palette.primary.main
+          }
+        },
+        padding: 0
+      },
+      zIndex: theme.zIndex.tooltip + 1
+    },
+    textfield: {
+      height: textfieldHeight(hideInput),
+      visibility: hideInput ? 'hidden' : 'visible'
+    }
+  })
+);