@centreon/ui 26.3.10 → 26.3.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "26.3.10",
+  "version": "26.3.12",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",
@@ -152,7 +152,7 @@
     "notistack": "^3.0.2",
     "numeral": "^2.0.6",
     "ramda": "0.30.1",
-    "react-grid-layout": "^1.5.0",
+    "react-grid-layout": "^2.2.2",
     "react-resizable": "^3.0.5",
     "react-router": "7",
     "react-transition-group": "^4.4.5",

package/src/Dashboard/DashboardLayout.stories.tsx

@@ -1,12 +1,13 @@
 import { Typography } from '@mui/material';
 
-import type { ComponentMeta } from '@storybook/react';
-import type { Layout } from 'react-grid-layout';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ReactElement } from 'react';
+import type { LayoutItem } from 'react-grid-layout';
 
 import FluidTypography from '../Typography/FluidTypography';
 import { DashboardLayout } from '.';
 
-interface CustomLayout extends Layout {
+interface CustomLayout extends LayoutItem {
   content: string;
   shouldUseFluidTypography: boolean;
 }
@@ -59,21 +60,21 @@ const generateLayout = (maxElements: number): Array<CustomLayout> => {
 };
 
 interface DashboardTemplateProps {
-  header?: JSX.Element;
+  header?: ReactElement;
   layout?: Array<CustomLayout>;
 }
 
-const Header = (): JSX.Element => (
+const Header = (): ReactElement => (
   <Typography variant="body2">The title</Typography>
 );
 
 const DashboardTemplate = ({
   header,
   layout = dashboardLayout
-}: DashboardTemplateProps): JSX.Element => (
+}: DashboardTemplateProps): ReactElement => (
   <DashboardLayout.Layout<CustomLayout> layout={layout}>
     {layout.map(({ i, content, shouldUseFluidTypography }) => (
-      <DashboardLayout.Item header={header} key={i}>
+      <DashboardLayout.Item header={header} id={i} key={i}>
         {shouldUseFluidTypography ? (
           <FluidTypography text={content} />
         ) : (
@@ -84,20 +85,26 @@ const DashboardTemplate = ({
   </DashboardLayout.Layout>
 );
 
-export default {
-  argTypes: {},
+const meta: Meta<typeof DashboardTemplate> = {
   component: DashboardTemplate,
   title: 'Dashboard'
-} as ComponentMeta<typeof DashboardTemplate>;
+};
 
-export const normal = DashboardTemplate.bind({});
+export default meta;
+type Story = StoryObj<typeof DashboardTemplate>;
 
-export const withManyPanels = DashboardTemplate.bind({});
-withManyPanels.args = {
-  layout: generateLayout(100)
+export const normal: Story = {
+  args: {}
 };
 
-export const withItemHeader = DashboardTemplate.bind({});
-withItemHeader.args = {
-  header: <Header />
+export const withManyPanels: Story = {
+  args: {
+    layout: generateLayout(100)
+  }
+};
+
+export const withItemHeader: Story = {
+  args: {
+    header: <Header />
+  }
 };

package/src/Dashboard/Item.tsx

@@ -4,10 +4,9 @@ import { useAtomValue } from 'jotai';
 import { equals, isNil, omit, type } from 'ramda';
 import {
   type CSSProperties,
-  type ForwardedRef,
-  forwardRef,
   type MouseEvent,
   type ReactElement,
+  RefObject,
   useEffect,
   useMemo
 } from 'react';
@@ -31,148 +30,145 @@ interface DashboardItemProps {
   onMouseUp?: (e: MouseEvent<HTMLDivElement>) => void;
   onTouchEnd?: (e) => void;
   style?: CSSProperties;
+  ref?: RefObject<HTMLDivElement>;
 }
 
-const Item = forwardRef<HTMLDivElement, DashboardItemProps>(
-  (
-    {
-      children,
-      style,
-      className,
-      header,
-      onMouseDown,
-      onMouseUp,
-      onTouchEnd,
-      id,
-      disablePadding = false,
-      canMove = false,
-      additionalMemoProps = []
-    }: DashboardItemProps,
-    ref: ForwardedRef<HTMLDivElement>
-  ): ReactElement => {
-    const { isInViewport, setElement } = useViewportIntersection({
-      rootMargin: '140px 0px 140px 0px'
-    });
-    const hasHeader = !isNil(header);
-
-    const { classes, cx } = useDashboardItemStyles({ hasHeader });
-    const theme = useTheme();
-
-    const isResizingItem = useAtomValue(isResizingItemAtom);
-
-    const isResizing = useMemo(
-      () => equals(id, isResizingItem),
-      [isResizingItem, id]
-    );
-
-    const sanitizedReactGridLayoutClassName = useMemo(
-      () => (isResizing ? className : className?.replace(' resizing ', '')),
-      [className, isResizing]
-    );
-
-    const listeners = {
-      onMouseDown,
-      onMouseUp,
-      onTouchEnd
-    };
-
-    const cardContainerListeners = !hasHeader ? listeners : {};
-
-    useEffect(() => {
-      if (isNil(ref?.current)) {
-        return;
-      }
-
-      setElement(ref.current);
-    }, [ref, setElement]);
-
-    const newTransform =
-      style?.transform &&
-      `translate3d(${style.transform.match(/translate\(([a-z0-9 ,-]+)\)/)[1]}, 0px)`;
-
-    return useMemoComponent({
-      Component: (
-        <div
-          {...cardContainerListeners}
-          className={sanitizedReactGridLayoutClassName}
-          ref={ref}
-          style={{
-            ...omit(['transform'], style || {}),
-            transform: newTransform
-          }}
-        >
-          <ExpandableContainer>
-            {({ isExpanded, label, key, ...rest }) => {
-              const canControl = isExpanded ? false : canMove;
-
-              const childrenHeader = equals(type(header), 'Function')
-                ? (header as (params: Parameters) => ReactElement)({
-                    isExpanded,
-                    key,
-                    label,
-                    ref,
-                    ...rest
-                  })
-                : header;
-
-              return (
-                <div className={classes.widgetSubContainer} key={key}>
-                  <Card
-                    className={classes.widgetContainer}
-                    data-padding={!disablePadding}
-                  >
-                    {childrenHeader && (
-                      <div
-                        className={classes.widgetHeader}
-                        data-can-move={canControl}
-                      >
-                        {canControl && (
-                          <div
-                            {...listeners}
-                            className={classes.widgetHeaderDraggable}
-                            data-testid={`${id}_move_panel`}
-                          />
-                        )}
-                        {childrenHeader}
-                      </div>
-                    )}
+const Item = ({
+  children,
+  style,
+  className,
+  header,
+  onMouseDown,
+  onMouseUp,
+  onTouchEnd,
+  id,
+  disablePadding = false,
+  canMove = false,
+  additionalMemoProps = [],
+  ref
+}: DashboardItemProps): ReactElement => {
+  const { isInViewport, setElement } = useViewportIntersection({
+    rootMargin: '140px 0px 140px 0px'
+  });
+  const hasHeader = !isNil(header);
+
+  const { classes, cx } = useDashboardItemStyles({ hasHeader });
+  const theme = useTheme();
+
+  const isResizingItem = useAtomValue(isResizingItemAtom);
+
+  const isResizing = useMemo(
+    () => equals(id, isResizingItem),
+    [isResizingItem, id]
+  );
+
+  const sanitizedReactGridLayoutClassName = useMemo(
+    () => (isResizing ? className : className?.replace(' resizing ', '')),
+    [className, isResizing]
+  );
+
+  const listeners = {
+    onMouseDown,
+    onMouseUp,
+    onTouchEnd
+  };
+
+  const cardContainerListeners = !hasHeader ? listeners : {};
+
+  useEffect(() => {
+    if (isNil(ref?.current)) {
+      return;
+    }
+
+    setElement(ref.current);
+  }, [ref, setElement]);
+
+  const newTransform =
+    style?.transform &&
+    `translate3d(${style.transform.match(/translate\(([a-z0-9 ,-]+)\)/)[1]}, 0px)`;
+
+  return useMemoComponent({
+    Component: (
+      <div
+        {...cardContainerListeners}
+        className={sanitizedReactGridLayoutClassName}
+        ref={ref}
+        style={{
+          ...omit(['transform'], style || {}),
+          transform: newTransform
+        }}
+      >
+        <ExpandableContainer>
+          {({ isExpanded, label, key, ...rest }) => {
+            const canControl = isExpanded ? false : canMove;
+
+            const childrenHeader = equals(type(header), 'Function')
+              ? (header as (params: Parameters) => ReactElement)({
+                  isExpanded,
+                  key,
+                  label,
+                  ref,
+                  ...rest
+                })
+              : header;
+
+            return (
+              <div className={classes.widgetSubContainer} key={key}>
+                <Card
+                  className={classes.widgetContainer}
+                  data-padding={!disablePadding}
+                >
+                  {childrenHeader && (
                     <div
-                      className={cx(
-                        classes.widgetContent,
-                        !disablePadding && classes.widgetPadding
-                      )}
+                      className={classes.widgetHeader}
+                      data-can-move={canControl}
                     >
-                      {!isInViewport ? (
-                        <LoadingSkeleton
-                          animation={false}
-                          data-widget-skeleton={id}
-                          height="100%"
-                          width="100%"
+                      {canControl && (
+                        <div
+                          {...listeners}
+                          className={classes.widgetHeaderDraggable}
+                          data-testid={`${id}_move_panel`}
                         />
-                      ) : (
-                        children
                       )}
+                      {childrenHeader}
                     </div>
-                  </Card>
-                </div>
-              );
-            }}
-          </ExpandableContainer>
-        </div>
-      ),
-      memoProps: isInViewport
-        ? [
-            style,
-            className,
-            header,
-            theme.palette.mode,
-            canMove,
-            isInViewport,
-            ...additionalMemoProps
-          ]
-        : [isInViewport, theme.palette.mode, style]
-    });
-  }
-);
+                  )}
+                  <div
+                    className={cx(
+                      classes.widgetContent,
+                      !disablePadding && classes.widgetPadding
+                    )}
+                  >
+                    {!isInViewport ? (
+                      <LoadingSkeleton
+                        animation={false}
+                        data-widget-skeleton={id}
+                        height="100%"
+                        width="100%"
+                      />
+                    ) : (
+                      children
+                    )}
+                  </div>
+                </Card>
+              </div>
+            );
+          }}
+        </ExpandableContainer>
+      </div>
+    ),
+    memoProps: isInViewport
+      ? [
+          style,
+          className,
+          header,
+          theme.palette.mode,
+          canMove,
+          isInViewport,
+          ...additionalMemoProps
+        ]
+      : [isInViewport, theme.palette.mode, style]
+  });
+};
 
 export default Item;

package/src/Dashboard/Layout.tsx

@@ -1,27 +1,30 @@
 import { Box } from '@mui/material';
 
 import { useSetAtom } from 'jotai';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import GridLayout, { type Layout, WidthProvider } from 'react-grid-layout';
-
-import { ParentSize, useMemoComponent } from '..';
+import { ReactElement, useCallback, useEffect, useState } from 'react';
+import {
+  type Layout,
+  LayoutItem,
+  ReactGridLayout,
+  useContainerWidth
+} from 'react-grid-layout';
+
+import { useMemoComponent } from '..';
 import { isResizingItemAtom } from './atoms';
 import { useDashboardLayoutStyles } from './Dashboard.styles';
 import { getColumnsFromScreenSize, getLayout, rowHeight } from './utils';
 import 'react-grid-layout/css/styles.css';
 
-const ReactGridLayout = WidthProvider(GridLayout);
-
 interface DashboardLayoutProps<T> {
   additionalMemoProps?: Array<unknown>;
-  changeLayout?: (newLayout: Array<Layout>) => void;
-  children: Array<JSX.Element>;
+  changeLayout?: (newLayout: Layout) => void;
+  children: Array<ReactElement>;
   displayGrid?: boolean;
   isStatic?: boolean;
   layout: Array<T>;
 }
 
-const Handle = (axis, ref) => {
+const Handle = (axis: string, ref: React.Ref<HTMLSpanElement>) => {
   return (
     <span
       className={`react-resizable-handle react-resizable-handle-${axis}`}
@@ -32,14 +35,14 @@ const Handle = (axis, ref) => {
   );
 };
 
-const DashboardLayout = <T extends Layout>({
+const DashboardLayout = <T extends LayoutItem>({
   children,
   changeLayout,
   layout,
   isStatic = false,
   additionalMemoProps = []
-}: DashboardLayoutProps<T>): JSX.Element => {
-  const dashboardContainerRef = useRef<HTMLDivElement | null>(null);
+}: DashboardLayoutProps<T>): ReactElement => {
+  const { width, containerRef } = useContainerWidth();
 
   const { classes } = useDashboardLayoutStyles(isStatic);
 
@@ -52,8 +55,8 @@ const DashboardLayout = <T extends Layout>({
   };
 
   const startResize = useCallback(
-    (_, _e, newItem: T) => {
-      setIsResizingItem(newItem.i);
+    (_: Layout, _e: LayoutItem | null, newItem: LayoutItem | null) => {
+      setIsResizingItem((newItem as LayoutItem & { id: string })?.id ?? null);
     },
     [setIsResizingItem]
   );
@@ -70,35 +73,30 @@ const DashboardLayout = <T extends Layout>({
     };
   }, [resize]);
 
+  const currentLayout = getLayout(layout);
+
   return useMemoComponent({
     Component: (
-      <Box
-        ref={dashboardContainerRef}
-        sx={{ overflowX: 'hidden', overflowY: 'auto' }}
-      >
-        <ParentSize>
-          {({ width }): JSX.Element => (
-            <Box className={classes.container}>
-              <ReactGridLayout
-                cols={columns}
-                layout={getLayout(layout)}
-                margin={[12, 12]}
-                onLayoutChange={changeLayout}
-                onResizeStart={startResize}
-                onResizeStop={stopResize}
-                resizeHandle={Handle}
-                resizeHandles={['s', 'e', 'se', 'sw', 'w']}
-                rowHeight={rowHeight}
-                width={width}
-              >
-                {children}
-              </ReactGridLayout>
-            </Box>
-          )}
-        </ParentSize>
+      <Box ref={containerRef} sx={{ overflowX: 'hidden', overflowY: 'auto' }}>
+        <Box className={classes.container}>
+          <ReactGridLayout
+            gridConfig={{ cols: columns, margin: [12, 12], rowHeight }}
+            layout={currentLayout}
+            onLayoutChange={changeLayout}
+            onResizeStart={startResize}
+            onResizeStop={stopResize}
+            resizeConfig={{
+              handleComponent: Handle,
+              handles: ['s', 'e', 'se', 'sw', 'w']
+            }}
+            width={width}
+          >
+            {children}
+          </ReactGridLayout>
+        </Box>
       </Box>
     ),
-    memoProps: [columns, layout, isStatic, ...additionalMemoProps]
+    memoProps: [columns, currentLayout, isStatic, ...additionalMemoProps]
   });
 };
 

package/src/Dashboard/utils.ts

@@ -1,5 +1,5 @@
 import { lt } from 'ramda';
-import type { Layout } from 'react-grid-layout';
+import type { LayoutItem } from 'react-grid-layout';
 
 const minColumns = 1;
 const breakpoint = 768;
@@ -13,7 +13,7 @@ export const getIsSmallScreenSize = (): boolean =>
 export const getColumnsFromScreenSize = (): number =>
   getIsSmallScreenSize() ? minColumns : maxColumns;
 
-export const getLayout = <T extends Layout>(layout: Array<T>): Array<T> => {
+export const getLayout = <T extends LayoutItem>(layout: Array<T>): Array<T> => {
   const isSmallScreenSize = getIsSmallScreenSize();
   if (!isSmallScreenSize) {
     return layout;