@centreon/ui 25.6.12 → 25.6.13

package/package.json

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

package/src/Graph/BarChart/BarChart.tsx

@@ -1,5 +1,3 @@
-import { useRef } from 'react';
-
 import dayjs from 'dayjs';
 import 'dayjs/locale/en';
 import 'dayjs/locale/es';
@@ -12,12 +10,13 @@ import { Provider } from 'jotai';
 
 import { Box } from '@mui/material';
 
-import { ParentSize } from '../../ParentSize';
 import LoadingSkeleton from '../Chart/LoadingSkeleton';
 import { LineChartProps } from '../Chart/models';
 import useChartData from '../Chart/useChartData';
 import { LineChartData, Thresholds } from '../common/models';
+import Loading from '../../LoadingSkeleton';
 
+import useResizeObserver from 'use-resize-observer';
 import ResponsiveBarChart from './ResponsiveBarChart';
 import { BarStyle } from './models';
 
@@ -62,7 +61,7 @@ const BarChart = ({
   skipIntersectionObserver
 }: BarChartProps): JSX.Element => {
   const { adjustedData } = useChartData({ data, end, start });
-  const lineChartRef = useRef<HTMLDivElement | null>(null);
+  const { ref, width, height: responsiveHeight } = useResizeObserver();
 
   if (loading && !adjustedData) {
     return (
@@ -75,30 +74,27 @@ const BarChart = ({
 
   return (
     <Provider>
-      <Box
-        ref={lineChartRef}
-        sx={{ height: '100%', overflow: 'hidden', width: '100%' }}
-      >
-        <ParentSize>
-          {({ height: responsiveHeight, width }) => (
-            <ResponsiveBarChart
-              axis={axis}
-              barStyle={barStyle}
-              graphData={adjustedData}
-              graphRef={lineChartRef}
-              header={header}
-              height={height || responsiveHeight}
-              legend={legend}
-              limitLegend={limitLegend}
-              orientation={orientation}
-              thresholdUnit={thresholdUnit}
-              thresholds={thresholds}
-              tooltip={tooltip}
-              width={width}
-              skipIntersectionObserver={skipIntersectionObserver}
-            />
-          )}
-        </ParentSize>
+      <Box ref={ref} sx={{ height: '100%', overflow: 'hidden', width: '100%' }}>
+        {!responsiveHeight ? (
+          <Loading height={height || '100%'} width={width} />
+        ) : (
+          <ResponsiveBarChart
+            axis={axis}
+            barStyle={barStyle}
+            graphData={adjustedData}
+            graphRef={ref}
+            header={header}
+            height={height || responsiveHeight || 0}
+            legend={legend}
+            limitLegend={limitLegend}
+            orientation={orientation}
+            thresholdUnit={thresholdUnit}
+            thresholds={thresholds}
+            tooltip={tooltip}
+            width={width || 0}
+            skipIntersectionObserver={skipIntersectionObserver}
+          />
+        )}
       </Box>
     </Provider>
   );

package/src/Graph/Chart/Chart.cypress.spec.tsx

@@ -139,7 +139,7 @@ const initializeCustomUnits = ({
 const checkGraphWidth = (): void => {
   cy.findByTestId('graph-interaction-zone')
     .should('have.attr', 'height')
-    .and('equal', '376.203125');
+    .and('equal', '376');
 
   cy.findByTestId('graph-interaction-zone').then((graph) => {
     expect(Number(graph[0].attributes.width.value)).to.be.greaterThan(1170);
@@ -437,7 +437,7 @@ describe('Line chart', () => {
 
       cy.contains(':00 AM').should('be.visible');
 
-      cy.get('text[transform="rotate(-35, -2, 145.04834208635688)"]').should(
+      cy.get('text[transform="rotate(-35, -2, 241.23251487506278)"]').should(
         'be.visible'
       );
 
@@ -519,7 +519,7 @@ describe('Line chart', () => {
       checkGraphWidth();
       cy.contains(':00 AM').should('be.visible');
       cy.get('circle[cx="250.83333333333334"]').should('be.visible');
-      cy.get('circle[cy="52.93597418085514"]').should('be.visible');
+      cy.get('circle[cy="52.90739222860398"]').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -733,10 +733,10 @@ describe('Lines and bars', () => {
     checkGraphWidth();
 
     cy.get(
-      'path[d="M7.501377410468319,273.3424587717121 h56.51239669421488 h1v1 v100.86066622828793 a1,1 0 0 1 -1,1 h-56.51239669421488 a1,1 0 0 1 -1,-1 v-100.86066622828793 v-1h1z"]'
+      'path[d="M7.501377410468319,273.1948717814711 h56.51239669421488 h1v1 v100.80512821852892 a1,1 0 0 1 -1,1 h-56.51239669421488 a1,1 0 0 1 -1,-1 v-100.80512821852892 v-1h1z"]'
     ).should('be.visible');
     cy.get(
-      'path[d="M24.05509641873278,218.3663782225586 h23.404958677685954 a17.553719008264462,17.553719008264462 0 0 1 17.553719008264462,17.553719008264462 v19.86864253262454 v17.553719008264462h-17.553719008264462 h-23.404958677685954 h-17.553719008264462v-17.553719008264462 v-19.86864253262454 a17.553719008264462,17.553719008264462 0 0 1 17.553719008264462,-17.553719008264462z"]'
+      'path[d="M24.05509641873278,218.2484747081302 h23.404958677685954 a17.553719008264462,17.553719008264462 0 0 1 17.553719008264462,17.553719008264462 v19.83895905681195 v17.553719008264462h-17.553719008264462 h-23.404958677685954 h-17.553719008264462v-17.553719008264462 v-19.83895905681195 a17.553719008264462,17.553719008264462 0 0 1 17.553719008264462,-17.553719008264462z"]'
     ).should('be.visible');
 
     cy.makeSnapshot();

package/src/Graph/Chart/index.tsx

@@ -1,4 +1,4 @@
-import { type MutableRefObject, memo, useEffect, useRef } from 'react';
+import { RefCallback, memo, useEffect } from 'react';
 
 import dayjs from 'dayjs';
 import 'dayjs/locale/en';
@@ -8,11 +8,10 @@ import 'dayjs/locale/pt';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import timezonePlugin from 'dayjs/plugin/timezone';
 import utcPlugin from 'dayjs/plugin/utc';
-
-import { ParentSize } from '../..';
 import Loading from '../../LoadingSkeleton';
 import type { LineChartData, Thresholds } from '../common/models';
 
+import useResizeObserver from 'use-resize-observer';
 import Chart from './Chart';
 import { useChartStyles } from './Chart.styles';
 import LoadingSkeleton from './LoadingSkeleton';
@@ -32,7 +31,7 @@ interface Props extends Partial<LineChartProps> {
   start: string;
   thresholdUnit?: string;
   thresholds?: Thresholds;
-  getRef?: (ref: MutableRefObject<HTMLDivElement | null>) => void;
+  getRef?: (ref: RefCallback<Element>) => void;
   containerStyle?: string;
   transformMatrix?: {
     fx?: (pointX: number) => number;
@@ -76,11 +75,15 @@ const WrapperChart = ({
   const { classes, cx } = useChartStyles();
 
   const { adjustedData } = useChartData({ data, end, start });
-  const lineChartRef = useRef<HTMLDivElement | null>(null);
+  const {
+    ref,
+    width: responsiveWidth,
+    height: responsiveHeight
+  } = useResizeObserver();
 
   useEffect(() => {
-    getRef?.(lineChartRef);
-  }, [lineChartRef?.current]);
+    getRef?.(ref);
+  }, [ref?.current]);
 
   if (loading && !adjustedData) {
     return (
@@ -91,48 +94,39 @@ const WrapperChart = ({
     );
   }
 
-  if (!adjustedData) {
-    return <Loading height={height} width={width} />;
-  }
-
   return (
     <div
-      ref={lineChartRef as MutableRefObject<HTMLDivElement>}
+      ref={ref}
       className={cx(classes.wrapperContainer, rest?.containerStyle)}
     >
-      <ParentSize>
-        {({
-          height: responsiveHeight,
-          width: responsiveWidth
-        }): JSX.Element => {
-          return (
-            <Chart
-              annotationEvent={annotationEvent}
-              axis={axis}
-              barStyle={barStyle}
-              displayAnchor={displayAnchor}
-              graphData={adjustedData}
-              graphInterval={{ end, start }}
-              graphRef={lineChartRef}
-              header={header}
-              height={height || responsiveHeight}
-              legend={legend}
-              limitLegend={limitLegend}
-              lineStyle={lineStyle}
-              shapeLines={shapeLines}
-              thresholdUnit={thresholdUnit}
-              thresholds={thresholds}
-              timeShiftZones={timeShiftZones}
-              tooltip={tooltip}
-              width={width ?? responsiveWidth}
-              zoomPreview={zoomPreview}
-              skipIntersectionObserver={rest.skipIntersectionObserver}
-              additionalLines={additionalLines}
-              transformMatrix={transformMatrix}
-            />
-          );
-        }}
-      </ParentSize>
+      {!responsiveHeight ? (
+        <Loading height={height || '100%'} width={width} />
+      ) : (
+        <Chart
+          annotationEvent={annotationEvent}
+          axis={axis}
+          barStyle={barStyle}
+          displayAnchor={displayAnchor}
+          graphData={adjustedData}
+          graphInterval={{ end, start }}
+          graphRef={ref}
+          header={header}
+          height={height || responsiveHeight || 0}
+          legend={legend}
+          limitLegend={limitLegend}
+          lineStyle={lineStyle}
+          shapeLines={shapeLines}
+          thresholdUnit={thresholdUnit}
+          thresholds={thresholds}
+          timeShiftZones={timeShiftZones}
+          tooltip={tooltip}
+          width={width || responsiveWidth || 0}
+          zoomPreview={zoomPreview}
+          skipIntersectionObserver={rest.skipIntersectionObserver}
+          additionalLines={additionalLines}
+          transformMatrix={transformMatrix}
+        />
+      )}
     </div>
   );
 };

package/src/Graph/common/BaseChart/useComputeBaseChartDimensions.ts

@@ -1,7 +1,8 @@
-import { MutableRefObject, useRef } from 'react';
+import { RefCallback } from 'react';
 
 import { equals, isNil } from 'ramda';
 
+import useResizeObserver from 'use-resize-observer';
 import { margin } from '../../Chart/common';
 import { margins } from '../margins';
 
@@ -20,8 +21,8 @@ interface UseComputeBaseChartDimensionsProps {
 interface UseComputeBaseChartDimensionsState {
   graphHeight: number;
   graphWidth: number;
-  legendRef: MutableRefObject<HTMLDivElement | null>;
-  titleRef: MutableRefObject<HTMLDivElement | null>;
+  legendRef: RefCallback<Element>;
+  titleRef: RefCallback<Element>;
 }
 
 export const useComputeBaseChartDimensions = ({
@@ -33,11 +34,14 @@ export const useComputeBaseChartDimensions = ({
   legendHeight,
   maxAxisCharacters
 }: UseComputeBaseChartDimensionsProps): UseComputeBaseChartDimensionsState => {
-  const legendRef = useRef<HTMLDivElement | null>(null);
-  const titleRef = useRef<HTMLDivElement | null>(null);
+  const {
+    ref: legendRef,
+    width: legendRefWidth,
+    height: legendRefHeight
+  } = useResizeObserver();
+  const { ref: titleRef, height: titleRefHeight } = useResizeObserver();
 
-  const currentLegendHeight =
-    legendHeight ?? (legendRef.current?.getBoundingClientRect().height || 0);
+  const currentLegendHeight = legendHeight ?? (legendRefHeight || 0);
 
   const legendBoundingHeight =
     !equals(legendDisplay, false) &&
@@ -47,7 +51,7 @@ export const useComputeBaseChartDimensions = ({
   const legendBoundingWidth =
     !equals(legendDisplay, false) &&
     (equals(legendPlacement, 'left') || equals(legendPlacement, 'right'))
-      ? legendRef.current?.getBoundingClientRect().width || 0
+      ? legendRefWidth || 0
       : 0;
 
   const graphWidth =
@@ -62,7 +66,7 @@ export const useComputeBaseChartDimensions = ({
       ? (height || 0) -
         margin.top -
         legendBoundingHeight -
-        (titleRef.current?.getBoundingClientRect().height || 0) -
+        (titleRefHeight || 0) -
         5
       : 0;
 

package/src/Listing/index.tsx

@@ -516,7 +516,7 @@ const Listing = <
         <div className="w-full h-[3px]" />
       )}
       <div
-        className="bg-[none] flex-column h-full w-full"
+        className="bg-[none] flex flex-col h-full w-full"
         ref={containerRef as RefObject<HTMLDivElement>}
       >
         {isActionBarVisible && (

package/src/components/DataTable/EmptyState/DataTableEmptyState.styles.ts

@@ -6,6 +6,7 @@ const useStyles = makeStyles()((theme) => ({
     flexDirection: 'row'
   },
   dataTableEmptyState: {
+    marginTop: theme.spacing(3),
     alignItems: 'center',
     display: 'flex',
     flexDirection: 'column',
@@ -21,7 +22,8 @@ const useStyles = makeStyles()((theme) => ({
     width: '100%'
   },
   description: {
-    maxWidth: '65%'
+    maxWidth: '65%',
+    textAlign: 'center'
   }
 }));
 

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

@@ -90,6 +90,10 @@ const useStyles = makeStyles<{
     gap: theme.spacing(2),
 
     justifyContent: 'space-between'
+  },
+  modalTitle: {
+    fontSize: theme.typography.h5.fontSize,
+    fontWeight: theme.typography.fontWeightBold
   }
 }));
 

package/src/components/Modal/ModalHeader.tsx

@@ -16,7 +16,7 @@ const ModalHeader = ({
 
   return (
     <div className={classes.modalHeader}>
-      <MuiDialogTitle color="primary" {...rest}>
+      <MuiDialogTitle color="primary" className={classes.modalTitle} {...rest}>
         {children}
       </MuiDialogTitle>
     </div>