@centreon/ui 25.1.5 → 25.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "25.1.5",
+  "version": "25.1.6",
   "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%'
     }

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 }) => {

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/ThemeProvider/palettes.ts

@@ -163,7 +163,7 @@ export const lightPalette: PaletteOptions = {
     active: '#666666',
     disabled: '#999999',
     disabledBackground: 'rgba(0, 0, 0, 0.12)',
-    focus: 'rgba(0, 0, 0, 0.12)',
+    focus: '#dadada',
     focusOpacity: 0.12,
     hover: 'rgba(0, 0, 0, 0.06)',
     hoverOpacity: 0.06,
@@ -303,7 +303,7 @@ export const darkPalette: PaletteOptions = {
     active: '#B5B5B5',
     disabled: '#999999',
     disabledBackground: '#555555',
-    focus: 'rgba(255, 255, 255, 0.30)',
+    focus: '#6d6d6d',
     focusOpacity: 0.3,
     hover: 'rgba(255, 255, 255, 0.16)',
     hoverOpacity: 0.16,

package/src/components/CrudPage/CrudPageRoot.tsx

@@ -83,7 +83,9 @@ export const CrudPageRoot = <
     <PageLayout>
       <PageLayout.Header>
         <PageHeader>
-          <PageHeader.Title title={labels.title} />
+          <PageHeader.Main>
+            <PageHeader.Title title={labels.title} />
+          </PageHeader.Main>
         </PageHeader>
       </PageLayout.Header>
       <PageLayout.Body>

package/src/components/Header/PageHeader/PageHeader.styles.ts

@@ -9,8 +9,8 @@ const useStyles = makeStyles()((theme) => ({
     display: 'flex',
     flexDirection: 'row',
     h1: {
-      font: 'normal normal 600 24px/24px Roboto',
-      letterSpacing: '0.18px',
+      ...theme.typography.h5,
+      fontWeight: theme.typography.fontWeightMedium,
       margin: theme.spacing(0, 0, 1.5, 0)
     },
     justifyContent: 'space-between',
@@ -27,8 +27,7 @@ const useStyles = makeStyles()((theme) => ({
     alignItems: 'center',
     borderBottom: `1px solid ${theme.palette.header.page.border}`,
     display: 'flex',
-    gap: theme.spacing(4),
-    paddingBottom: theme.spacing(1.5)
+    gap: theme.spacing(4)
   },
   pageHeaderActions: {
     '& > button': {
@@ -47,13 +46,15 @@ const useStyles = makeStyles()((theme) => ({
   pageHeaderMain: {
     display: 'flex',
     flexGrow: 1,
-    gap: theme.spacing(1)
+    gap: theme.spacing(1),
+    minHeight: theme.spacing(4.5)
   },
   pageHeaderMenu: {
     alignItems: 'flex-start',
     display: 'flex',
     position: 'relative',
-    transform: `translateY(-${theme.spacing(0.25)})`
+    transform: `translateY(-${theme.spacing(0.25)})`,
+    alignSelf: 'center'
   },
   pageHeaderMessage: {
     alignItems: 'center',
@@ -87,20 +88,17 @@ const useStyles = makeStyles()((theme) => ({
     '& > span': {
       display: 'flex',
       flexDirection: 'row',
-
-      gap: theme.spacing(2)
+      gap: theme.spacing(2),
+      alignItems: 'center'
     },
     display: 'flex',
-
     flexDirection: 'column',
-
-    gap: theme.spacing(1),
-
+    alignSelf: 'flex-start',
     h1: {
-      color: theme.palette.header.page.title,
-      font: 'normal normal 700 24px/100% Roboto',
-      letterSpacing: '0.15px',
-      margin: theme.spacing(0)
+      ...theme.typography.h5,
+      fontWeight: theme.typography.fontWeightMedium,
+      margin: theme.spacing(0),
+      lineHeight: '1'
     }
   },
   pageHeaderTitleActions: {
@@ -110,16 +108,16 @@ const useStyles = makeStyles()((theme) => ({
     },
     alignItems: 'bottom',
     display: 'flex',
-    gap: theme.spacing(1)
+    gap: theme.spacing(1),
+    paddingTop: theme.spacing(0.5)
   },
   pageHeaderTitleDescription: {
     color: theme.palette.header.page.description,
-    font: 'normal normal 400 12px/16px Roboto',
-    letterSpacing: '0.15px',
     maxWidth: '560px',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap'
+    whiteSpace: 'nowrap',
+    lineHeight: '1.8'
   }
 }));
 

package/src/components/Layout/PageLayout/PageLayout.styles.ts

@@ -17,7 +17,7 @@ export const useStyles = makeStyles()((theme) => ({
     },
     display: 'flex',
     justifyContent: 'space-between',
-    paddingBottom: theme.spacing(2.5)
+    paddingBottom: theme.spacing(1.5)
   },
   pageLayoutBody: {
     '&[data-has-background="true"]': {
@@ -29,7 +29,7 @@ export const useStyles = makeStyles()((theme) => ({
     display: 'grid',
     gridTemplateRows: 'auto',
     overflow: 'hidden',
-    padding: theme.spacing(1.5, 3, 5)
+    padding: theme.spacing(1.5, 3, 1.5)
   },
   pageLayoutHeader: {
     '[data-variant="fixed-header"] &': {
@@ -40,6 +40,6 @@ export const useStyles = makeStyles()((theme) => ({
       top: 0,
       zIndex: `calc(${theme.zIndex.mobileStepper} - 100)`
     },
-    padding: theme.spacing(3, 3, 0)
+    padding: theme.spacing(1, 3, 0)
   }
 }));