@centreon/ui 26.3.2 → 26.3.4

package/package.json

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

package/src/Graph/BarChart/BarStack.tsx

@@ -1,4 +1,4 @@
-import { memo, ReactElement } from 'react';
+import { ReactElement, memo } from 'react';
 
 import { ScaleType, scaleBand } from '@visx/scale';
 import { BarRounded } from '@visx/shape';
@@ -123,10 +123,10 @@ const BarStack = ({
             const barY =
               isNegativeValue && isStacked && !shouldApplyRadiusOnBottom
                 ? getPadding({
-                  isNegativeValue,
-                  padding: bar.y,
-                  size: bar.height
-                })
+                    isNegativeValue,
+                    padding: bar.y,
+                    size: bar.height
+                  })
                 : bar.y;
 
             return (
@@ -139,10 +139,10 @@ const BarStack = ({
                   barWidth,
                   y: isHorizontal
                     ? getPadding({
-                      isNegativeValue,
-                      padding: bar.y,
-                      size: bar.height
-                    })
+                        isNegativeValue,
+                        padding: bar.y,
+                        size: bar.height
+                      })
                     : barPadding,
                   isFirstBar: shouldApplyRadiusOnBottom,
                   isHorizontal,
@@ -157,19 +157,19 @@ const BarStack = ({
                   isHorizontal
                     ? barPadding
                     : getPadding({
-                      isNegativeValue,
-                      padding: bar.x,
-                      size: bar.width
-                    })
+                        isNegativeValue,
+                        padding: bar.x,
+                        size: bar.width
+                      })
                 }
                 y={isHorizontal ? barY : barPadding}
                 onMouseEnter={
                   isTooltipHidden
                     ? undefined
                     : hoverBar({
-                      barIndex,
-                      highlightedMetric: Number(bar.key)
-                    })
+                        barIndex,
+                        highlightedMetric: Number(bar.key)
+                      })
                 }
                 onMouseLeave={isTooltipHidden ? undefined : exitBar}
               />

package/src/Graph/BarChart/MemoizedGroup.tsx

@@ -59,17 +59,22 @@ const MemoizedGroup = ({
         const linesBar = isStackedBar
           ? stackedLinesTimeSeriesPerStackKeyAndUnit[bar.key].lines
           : (notStackedLines.find(({ metric_id }) =>
-            equals(metric_id, Number(bar.key))
-          ) as Line);
+              equals(metric_id, Number(bar.key))
+            ) as Line);
         const timeSeriesBar = isStackedBar
           ? stackedLinesTimeSeriesPerStackKeyAndUnit[bar.key].timeSeries
           : notStackedTimeSeries.map((timeSerie) => ({
-            timeTick: timeSerie.timeTick,
-            [bar.key]: timeSerie[Number(bar.key)]
-          }));
+              timeTick: timeSerie.timeTick,
+              [bar.key]: timeSerie[Number(bar.key)]
+            }));
 
-        const unit = isStackedBar ? bar.key.split('-')[1] : (linesBar as Line).unit;
-        const yScale = unit === '' && yScalesPerUnit[unit] === undefined ? yScalesPerUnit[undefined] : yScalesPerUnit[unit];
+        const unit = isStackedBar
+          ? bar.key.split('-')[1]
+          : (linesBar as Line).unit;
+        const yScale =
+          unit === '' && yScalesPerUnit[unit] === undefined
+            ? yScalesPerUnit[undefined]
+            : yScalesPerUnit[unit];
 
         return isStackedBar ? (
           <BarStack

package/src/Graph/Chart/BasicComponents/Lines/StackedLines/index.tsx

@@ -13,6 +13,7 @@ import {
   type
 } from 'ramda';
 
+import { ReactElement } from 'react';
 import { getDates, getTime } from '../../../../common/timeSeries';
 import { Line, TimeValue } from '../../../../common/timeSeries/models';
 import {
@@ -27,7 +28,6 @@ import { StackValue } from '../../../InteractiveComponents/AnchorPoint/models';
 import { getCurveFactory, getFillColor } from '../../../common';
 import { LineStyle } from '../../../models';
 import Point from '../Point';
-import { ReactElement } from 'react';
 
 interface Props {
   areaTransparency?: number;
@@ -135,9 +135,9 @@ const StackLines = ({
                   equals(style?.showArea, false)
                     ? 'transparent'
                     : getFillColor({
-                      areaColor: areaColor || lineColor,
-                      transparency: formattedTransparency
-                    })
+                        areaColor: areaColor || lineColor,
+                        transparency: formattedTransparency
+                      })
                 }
                 opacity={highlight === false ? 0.3 : 1}
                 stroke={lineColor}

package/src/Graph/Chart/BasicComponents/Lines/index.tsx

@@ -103,13 +103,18 @@ const Lines = ({
           {Object.entries(stackedLinesData).map(
             ([stackedKey, { lines, timeSeries: stackedTimeSeries }]) => {
               const [, unit] = stackedKey.split('-');
+              const yScale =
+                unit === '' && yScalesPerUnit[unit] === undefined
+                  ? yScalesPerUnit[undefined]
+                  : yScalesPerUnit[unit];
+
               return (
                 <StackedLines
                   lineStyle={lineStyle}
                   key={`stacked-${unit}`}
                   lines={lines}
                   timeSeries={stackedTimeSeries}
-                  yScale={yScalesPerUnit[unit ?? undefined]}
+                  yScale={yScale}
                   {...commonStackedLinesProps}
                 />
               );
@@ -128,7 +133,10 @@ const Lines = ({
                     invert: '1',
                     scale,
                     scaleLogarithmicBase,
-                    unit: unit ?? undefined,
+                    unit:
+                      unit === '' && yScalesPerUnit[unit] === undefined
+                        ? undefined
+                        : unit,
                     yScalesPerUnit
                   })}
                   {...commonStackedLinesProps}
@@ -152,107 +160,107 @@ const Lines = ({
 
       {displayAreaRegularLines
         ? regularLines.map(
-          ({
-            areaColor,
-            transparency,
-            lineColor,
-            filled,
-            unit,
-            highlight,
-            invert,
-            metric_id,
-            ...rest
-          }) => {
-            const yScale = getYScale({
-              invert,
-              scale,
-              scaleLogarithmicBase,
+            ({
+              areaColor,
+              transparency,
+              lineColor,
+              filled,
               unit,
-              yScalesPerUnit
-            });
-            const relatedTimeSeries = getTimeSeriesForLines({
+              highlight,
               invert,
-              lines: [
-                {
-                  areaColor,
-                  filled,
-                  highlight,
-                  invert,
-                  lineColor,
-                  metric_id,
-                  transparency,
-                  unit,
-                  ...rest
-                }
-              ],
-              timeSeries
-            });
+              metric_id,
+              ...rest
+            }) => {
+              const yScale = getYScale({
+                invert,
+                scale,
+                scaleLogarithmicBase,
+                unit,
+                yScalesPerUnit
+              });
+              const relatedTimeSeries = getTimeSeriesForLines({
+                invert,
+                lines: [
+                  {
+                    areaColor,
+                    filled,
+                    highlight,
+                    invert,
+                    lineColor,
+                    metric_id,
+                    transparency,
+                    unit,
+                    ...rest
+                  }
+                ],
+                timeSeries
+              });
 
-            const style = getStyle({
-              style: lineStyle,
-              metricId: metric_id
-            }) as LineStyle;
+              const style = getStyle({
+                style: lineStyle,
+                metricId: metric_id
+              }) as LineStyle;
 
-            return (
-              <g key={metric_id}>
-                {displayGuidingLines && (
-                  <RegularAnchorPoint
+              return (
+                <g key={metric_id}>
+                  {displayGuidingLines && (
+                    <RegularAnchorPoint
+                      areaColor={areaColor || lineColor}
+                      lineColor={lineColor}
+                      metric_id={metric_id}
+                      timeSeries={relatedTimeSeries}
+                      transparency={transparency}
+                      xScale={xScale}
+                      yScale={yScale}
+                      maxLeftAxisCharacters={maxLeftAxisCharacters}
+                      hasSecondUnit={hasSecondUnit}
+                    />
+                  )}
+                  {style?.showPoints &&
+                    getDates(relatedTimeSeries).map((timeTick) => (
+                      <Point
+                        key={timeTick.toString()}
+                        lineColor={lineColor}
+                        metric_id={metric_id}
+                        radius={getPointRadius(style?.lineWidth)}
+                        timeSeries={relatedTimeSeries}
+                        timeTick={timeTick}
+                        xScale={xScale}
+                        yPoint={getYAnchorPoint({
+                          metric_id,
+                          timeSeries: relatedTimeSeries,
+                          timeTick,
+                          yScale
+                        })}
+                        yScale={yScale}
+                      />
+                    ))}
+                  <RegularLine
                     areaColor={areaColor || lineColor}
+                    curve={style?.curve || 'linear'}
+                    dashLength={style?.dashLength}
+                    dashOffset={style?.dashOffset}
+                    dotOffset={style?.dotOffset}
+                    filled={isNil(style?.showArea) ? filled : style.showArea}
+                    graphHeight={height}
+                    highlight={highlight}
                     lineColor={lineColor}
+                    lineWidth={style?.lineWidth || 2}
                     metric_id={metric_id}
                     timeSeries={relatedTimeSeries}
-                    transparency={transparency}
+                    transparency={
+                      isNil(style?.areaTransparency)
+                        ? transparency || 80
+                        : style.areaTransparency
+                    }
+                    unit={unit}
                     xScale={xScale}
                     yScale={yScale}
-                    maxLeftAxisCharacters={maxLeftAxisCharacters}
-                    hasSecondUnit={hasSecondUnit}
                   />
-                )}
-                {style?.showPoints &&
-                  getDates(relatedTimeSeries).map((timeTick) => (
-                    <Point
-                      key={timeTick.toString()}
-                      lineColor={lineColor}
-                      metric_id={metric_id}
-                      radius={getPointRadius(style?.lineWidth)}
-                      timeSeries={relatedTimeSeries}
-                      timeTick={timeTick}
-                      xScale={xScale}
-                      yPoint={getYAnchorPoint({
-                        metric_id,
-                        timeSeries: relatedTimeSeries,
-                        timeTick,
-                        yScale
-                      })}
-                      yScale={yScale}
-                    />
-                  ))}
-                <RegularLine
-                  areaColor={areaColor || lineColor}
-                  curve={style?.curve || 'linear'}
-                  dashLength={style?.dashLength}
-                  dashOffset={style?.dashOffset}
-                  dotOffset={style?.dotOffset}
-                  filled={isNil(style?.showArea) ? filled : style.showArea}
-                  graphHeight={height}
-                  highlight={highlight}
-                  lineColor={lineColor}
-                  lineWidth={style?.lineWidth || 2}
-                  metric_id={metric_id}
-                  timeSeries={relatedTimeSeries}
-                  transparency={
-                    isNil(style?.areaTransparency)
-                      ? transparency || 80
-                      : style.areaTransparency
-                  }
-                  unit={unit}
-                  xScale={xScale}
-                  yScale={yScale}
-                />
-              </g>
-            );
-          }
-        )
+                </g>
+              );
+            }
+          )
         : null}
     </g>
   );

package/src/Graph/Chart/Legend/index.tsx

@@ -81,17 +81,17 @@ const MainLegend = ({
 
   const contextMenuClick =
     (metricId: number) =>
-      (event: MouseEvent): void => {
-        if (!secondaryClick) {
-          return;
-        }
-        event.preventDefault();
-        secondaryClick({
-          element: event.target,
-          metricId,
-          position: [event.pageX, event.pageY]
-        });
-      };
+    (event: MouseEvent): void => {
+      if (!secondaryClick) {
+        return;
+      }
+      event.preventDefault();
+      secondaryClick({
+        element: event.target,
+        metricId,
+        position: [event.pageX, event.pageY]
+      });
+    };
 
   const selectMetric = ({
     event,

package/src/Graph/Chart/index.tsx

@@ -1,22 +1,20 @@
-import { RefCallback, memo, useEffect } from 'react';
-
-import dayjs from 'dayjs';
-import 'dayjs/locale/en';
-import 'dayjs/locale/es';
-import 'dayjs/locale/fr';
-import 'dayjs/locale/pt';
-import localizedFormat from 'dayjs/plugin/localizedFormat';
-import timezonePlugin from 'dayjs/plugin/timezone';
-import utcPlugin from 'dayjs/plugin/utc';
-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';
-import type { GlobalAreaLines, LineChartProps } from './models';
-import useChartData from './useChartData';
+import dayjs from "dayjs";
+import { memo, useRef } from "react";
+import "dayjs/locale/en";
+import "dayjs/locale/es";
+import "dayjs/locale/fr";
+import "dayjs/locale/pt";
+import localizedFormat from "dayjs/plugin/localizedFormat";
+import timezonePlugin from "dayjs/plugin/timezone";
+import utcPlugin from "dayjs/plugin/utc";
+import useResizeObserver from "use-resize-observer";
+import Loading from "../../LoadingSkeleton";
+import type { LineChartData, Thresholds } from "../common/models";
+import Chart from "./Chart";
+import { useChartStyles } from "./Chart.styles";
+import LoadingSkeleton from "./LoadingSkeleton";
+import type { GlobalAreaLines, LineChartProps } from "./models";
+import useChartData from "./useChartData";
 
 dayjs.extend(localizedFormat);
 dayjs.extend(utcPlugin);
@@ -31,7 +29,7 @@ interface Props extends Partial<LineChartProps> {
   start: string;
   thresholdUnit?: string;
   thresholds?: Thresholds;
-  getRef?: (ref: RefCallback<Element>) => void;
+  getRef?: (ref: React.RefObject<HTMLDivElement | null>) => void;
   containerStyle?: string;
   transformMatrix?: {
     fx?: (pointX: number) => number;
@@ -52,19 +50,19 @@ const WrapperChart = ({
   loading,
   timeShiftZones,
   tooltip = {
-    mode: 'all',
-    sortOrder: 'name'
+    mode: "all",
+    sortOrder: "name",
   },
   annotationEvent,
   legend = {
     display: true,
-    mode: 'grid',
-    placement: 'bottom',
+    mode: "grid",
+    placement: "bottom",
     showCalculations: {
       min: true,
       max: true,
-      avg: true
-    }
+      avg: true,
+    },
   },
   header,
   lineStyle,
@@ -83,15 +81,25 @@ const WrapperChart = ({
   const { classes, cx } = useChartStyles();
 
   const { adjustedData } = useChartData({ data, end, start });
+
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
   const {
-    ref,
+    ref: resizeObserverRef,
     width: responsiveWidth,
-    height: responsiveHeight
+    height: responsiveHeight,
   } = useResizeObserver();
 
-  useEffect(() => {
-    getRef?.(ref);
-  }, [ref?.current]);
+  const combinedRef = (element: HTMLDivElement | null) => {
+    if (containerRef.current !== element) {
+      containerRef.current = element;
+      if (element) {
+        getRef?.(containerRef);
+      }
+    }
+    resizeObserverRef(element);
+  };
+
 
   if (loading && !adjustedData) {
     return (
@@ -108,11 +116,11 @@ const WrapperChart = ({
 
   return (
     <div
-      ref={ref}
+      ref={combinedRef}
       className={cx(classes.wrapperContainer, rest?.containerStyle)}
     >
       {!responsiveHeight ? (
-        <Loading height={height || '100%'} width={width} />
+        <Loading height={height || "100%"} width={width} />
       ) : (
         <Chart
           annotationEvent={annotationEvent}
@@ -121,7 +129,7 @@ const WrapperChart = ({
           displayAnchor={displayAnchor}
           graphData={adjustedData}
           graphInterval={{ end, start }}
-          graphRef={ref}
+          graphRef={containerRef}
           header={header}
           height={height || responsiveHeight || 0}
           legend={legend}

package/src/Graph/common/BaseChart/BaseChart.tsx

@@ -35,8 +35,8 @@ interface Props {
   limitLegend?: number | false;
   lines: Array<Line>;
   setLines:
-  | Dispatch<SetStateAction<Array<Line> | null>>
-  | Dispatch<SetStateAction<Array<Line>>>;
+    | Dispatch<SetStateAction<Array<Line> | null>>
+    | Dispatch<SetStateAction<Array<Line>>>;
   title: string;
   graphHeight: number;
 }
@@ -93,8 +93,8 @@ const BaseChart = ({
                 className={cx(
                   classes.legendContainer,
                   equals(legend?.placement, 'right') &&
-                  !isHorizontal &&
-                  classes.legendContainerVerticalSide
+                    !isHorizontal &&
+                    classes.legendContainerVerticalSide
                 )}
                 ref={legendRef}
               >

package/src/Graph/common/BaseChart/ChartSvgWrapper.tsx

@@ -2,13 +2,13 @@ import { MutableRefObject, ReactElement } from 'react';
 
 import { Group } from '@visx/visx';
 import { equals } from 'ramda';
+import { margin } from '../../Chart/common';
 import { ChartAxis } from '../../Chart/models';
 import Axes from '../Axes';
 import Grids from '../Grids';
 import { Line, TimeValue } from '../timeSeries/models';
 import { useMarginTop } from '../useMarginTop';
 import { computeGElementMarginLeft } from '../utils';
-import { margin } from '../../Chart/common';
 
 interface Props {
   allUnits: Array<string>;

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

@@ -52,21 +52,21 @@ export const useComputeBaseChartDimensions = ({
 
   const legendBoundingHeight =
     !equals(legendDisplay, false) &&
-      (isNil(legendPlacement) || equals(legendPlacement, 'bottom'))
+    (isNil(legendPlacement) || equals(legendPlacement, 'bottom'))
       ? currentLegendHeight
       : 0;
   const legendBoundingWidth =
     !equals(legendDisplay, false) &&
-      (equals(legendPlacement, 'left') || equals(legendPlacement, 'right'))
+    (equals(legendPlacement, 'left') || equals(legendPlacement, 'right'))
       ? legendRefWidth || 0
       : 0;
 
   const graphWidth =
     width > 0
       ? width -
-      (hasSecondUnit ? maxAxisCharacters * 2 : maxAxisCharacters) * 6 -
-      (hasSecondUnit ? margins.left * 0.8 : margin.left) -
-      legendBoundingWidth
+        (hasSecondUnit ? maxAxisCharacters * 2 : maxAxisCharacters) * 6 -
+        (hasSecondUnit ? margins.left * 0.8 : margin.left) -
+        legendBoundingWidth
       : 0;
   const graphHeight =
     (height || 0) > 0

package/src/Graph/common/timeSeries/index.ts

@@ -20,6 +20,7 @@ import {
   includes,
   isEmpty,
   isNil,
+  isNotNil,
   keys,
   last,
   lt,
@@ -33,8 +34,7 @@ import {
   reject,
   sortBy,
   split,
-  uniq,
-  isNotNil
+  uniq
 } from 'ramda';
 
 import { margin } from '../../Chart/common';
@@ -161,8 +161,8 @@ const getMetrics = (timeValue: TimeValue): Array<string> =>
 
 const getValueForMetric =
   (timeValue: TimeValue) =>
-    (metric_id: number): number =>
-      prop(metric_id, timeValue) as number;
+  (metric_id: number): number =>
+    prop(metric_id, timeValue) as number;
 
 const getUnits = (lines: Array<Line>): Array<string> =>
   pipe(map(prop('unit')), uniq)(lines);
@@ -309,8 +309,8 @@ const getTimeSeriesForLines = ({
             ...acc,
             [metric_id]:
               invert &&
-                metricsValue[metric_id] &&
-                gt(metricsValue[metric_id], 0)
+              metricsValue[metric_id] &&
+              gt(metricsValue[metric_id], 0)
                 ? negate(metricsValue[metric_id])
                 : metricsValue[metric_id]
           };
@@ -343,10 +343,10 @@ const getYScale = ({
 
   return invert
     ? getScaleType(scale)({
-      base: scaleLogarithmicBase,
-      domain: yScale.domain().reverse(),
-      range: yScale.range().reverse()
-    })
+        base: scaleLogarithmicBase,
+        domain: yScale.domain().reverse(),
+        range: yScale.range().reverse()
+      })
     : yScale;
 };
 
@@ -391,40 +391,40 @@ const getScale = ({
   const sanitizedValuesForMinimum = min
     ? [min]
     : getSanitizedValues([
-      invert && graphValues.every(lt(0))
-        ? negate(getMax(graphValues))
-        : getMin(graphValues),
-      !isEmpty(stackedValues) &&
-      !equals(stackedValues, [0]) &&
-      getMin(stackedValues),
-      Math.min(...thresholds)
-    ]);
+        invert && graphValues.every(lt(0))
+          ? negate(getMax(graphValues))
+          : getMin(graphValues),
+        !isEmpty(stackedValues) &&
+          !equals(stackedValues, [0]) &&
+          getMin(stackedValues),
+        Math.min(...thresholds)
+      ]);
   const minValue = Math.min(...sanitizedValuesForMinimum.filter(isNotNil));
 
   const sanitizedValuesForMaximum = max
     ? [max]
     : getSanitizedValues([
-      getMax(graphValues),
-      getMax(stackedValues),
-      hasOnlyZeroesHasValue(graphValues) ? 1 : null,
-      Math.max(...thresholds)
-    ]);
+        getMax(graphValues),
+        getMax(stackedValues),
+        hasOnlyZeroesHasValue(graphValues) ? 1 : null,
+        Math.max(...thresholds)
+      ]);
   const maxValue = Math.max(...sanitizedValuesForMaximum.filter(isNotNil));
 
   const minValueWithMargin =
     (hasDisplayAsBar && minValue > 0) ||
-      (hasLineFilled &&
-        Math.max(maxValue, minValue) > minValue &&
-        minValue > 0) ||
-      (hasStackedLines && minValue > maxValue)
+    (hasLineFilled &&
+      Math.max(maxValue, minValue) > minValue &&
+      minValue > 0) ||
+    (hasStackedLines && minValue > maxValue)
       ? 0
       : minValue - Math.abs(minValue) * 0.05;
   const maxValueWithMargin =
     (hasDisplayAsBar && maxValue < 0) ||
-      (hasLineFilled &&
-        Math.min(maxValue, minValue) < maxValue &&
-        maxValue < 0) ||
-      (hasStackedLines && minValue > maxValue)
+    (hasLineFilled &&
+      Math.min(maxValue, minValue) < maxValue &&
+      maxValue < 0) ||
+    (hasStackedLines && minValue > maxValue)
       ? 0
       : maxValue + Math.abs(maxValue) * 0.05;
 
@@ -521,11 +521,11 @@ const getYScaleUnit = ({
 
   const stackedValues = hasStackedLines
     ? getStackedMetricValues({
-      lines: getSortedStackedLines(dataLines).filter(
-        ({ unit: stackedUnit }) => equals(unit, stackedUnit)
-      ),
-      timeSeries: dataTimeSeries
-    })
+        lines: getSortedStackedLines(dataLines).filter(
+          ({ unit: stackedUnit }) => equals(unit, stackedUnit)
+        ),
+        timeSeries: dataTimeSeries
+      })
     : [];
 
   return getScale({
@@ -538,8 +538,8 @@ const getYScaleUnit = ({
       ),
     hasLineFilled: isNil(isFilled)
       ? dataLines.some(
-        ({ unit: lineUnit, filled }) => equals(unit, lineUnit) && filled
-      )
+          ({ unit: lineUnit, filled }) => equals(unit, lineUnit) && filled
+        )
       : isFilled,
     hasStackedLines: dataLines.some(
       ({ unit: lineUnit, stackKey, stackOrder }) =>

package/src/RichTextEditor/RichTextEditor.tsx

@@ -55,12 +55,6 @@ const useStyles = makeStyles<{ toolbarPositions: 'start' | 'end' }>()(
     bold: {
       fontWeight: theme.typography.fontWeightBold
     },
-    container: equals(toolbarPositions, 'end')
-      ? {
-          display: 'flex',
-          flexDirection: 'column-reverse'
-        }
-      : {},
     error: {
       color: theme.palette.error.main,
       fontSize: theme.spacing(1.5),
@@ -190,7 +184,9 @@ const RichTextEditor = ({
 
   return (
     <LexicalComposer initialConfig={initialConfig}>
-      <div className={classes.container}>
+      <div
+        className={`flex ${toolbarPositions === 'end' ? 'flex-col-reverse' : 'flex-col'}`}
+      >
         <div className={classes.toolbar}>
           <ToolbarPlugin
             className={toolbarClassName}

package/src/RichTextEditor/plugins/ToolbarPlugin/index.tsx

@@ -1,7 +1,6 @@
-import { makeStyles } from 'tss-react/mui';
-
 import { Divider } from '@mui/material';
 
+import { ReactElement } from 'react';
 import AlignPicker from './AlignPicker';
 import BlockButtons from './BlockButtons';
 import FormatButtons from './FormatButtons';
@@ -18,26 +17,17 @@ interface Props {
   editable: boolean;
 }
 
-export const useStyles = makeStyles()((theme) => ({
-  container: {
-    alignItems: 'center',
-    columnGap: theme.spacing(1),
-    display: 'flex',
-    marginBottom: theme.spacing(1)
-  }
-}));
-
 const ToolbarPlugin = ({
   editable,
   displayMacrosButton,
   disabled,
   displayBlockButtons,
   className
-}: Props): JSX.Element | null => {
-  const { cx, classes } = useStyles();
-
+}: Props): ReactElement | null => {
   return editable ? (
-    <div className={cx(classes.container, className)}>
+    <div
+      className={`flex items-center gap-2 mb-2 overflow-y-auto ${className}`}
+    >
       <UndoRedoButtons disabled={disabled} />
       {displayBlockButtons && (
         <>

package/src/components/ItemComposition/ItemComposition.tsx

@@ -19,6 +19,8 @@ export type Props = {
   labelAdd?: string;
   onAddItem?: () => void;
   secondaryLabel?: string;
+  isAddButtonSticky?: boolean;
+  addButtonClassName?: string;
 };
 
 export const ItemComposition = ({
@@ -29,8 +31,10 @@ export const ItemComposition = ({
   addButtonHidden,
   IconAdd,
   displayItemsAsLinked,
-  secondaryLabel
-}: Props): JSX.Element => {
+  secondaryLabel,
+  isAddButtonSticky,
+  addButtonClassName
+}: Props): ReactElement => {
   const { classes } = useItemCompositionStyles();
 
   const hasMoreThanOneChildren = gt(children.length, 1);
@@ -45,7 +49,9 @@ export const ItemComposition = ({
           </div>
         )}
       </div>
-      <div className={classes.buttonAndSecondaryLabel}>
+      <div
+        className={`flex justify-between items-center w-full ${isAddButtonSticky && 'bg-background-paper sticky bottom-0 z-2'} ${addButtonClassName}`}
+      >
         {!addButtonHidden && (
           <Button
             aria-label={labelAdd}

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

@@ -12,7 +12,12 @@ const useStyles = makeStyles<{
       padding: theme.spacing(2.5)
     },
     '&[data-size="fullscreen"]': {
-      zIndex: 0
+      zIndex: 0,
+      margin: 0,
+      marginLeft: props?.left ?? 0,
+      marginRight: props?.right ?? 0,
+      marginTop: props?.top ?? 0,
+      marginBottom: props?.bottom ?? 0
     },
     '&[data-size="fullscreen"] .MuiBackdrop-root': {
       display: 'none'
@@ -20,18 +25,18 @@ const useStyles = makeStyles<{
     '&[data-size="fullscreen"] .MuiDialog-container': {
       alignItems: 'flex-end',
       height: '100vh',
-      justifyContent: 'flex-end'
+      justifyContent: 'flex-end',
+      position: 'relative'
     },
     '&[data-size="fullscreen"] .MuiDialog-paper': {
-      bottom: props?.bottom ?? 0,
-      height: 'calc(100vh - 90px)',
-      left: props?.left ?? 0,
+      bottom: 0,
+      left: 0,
       margin: 0,
       maxWidth: 'unset',
       paddingBottom: theme.spacing(8),
       position: 'absolute',
-      right: props?.right ?? 0,
-      top: props?.top ?? 0,
+      right: 0,
+      top: 0,
       transition: theme.transitions.create('left')
     },
     '&[data-size="large"] .MuiDialog-paper': {
@@ -46,15 +51,13 @@ const useStyles = makeStyles<{
     },
     '&[data-size="xlarge"] .MuiDialog-paper': {
       maxWidth: '900px',
-      width: 'calc(100% - 64px)'
+      width: 'calc(100% - 78px)'
     }
   },
   modalActions: {
     '&[data-fixed="true"]': {
-      background: theme.palette.background.paper,
       padding: theme.spacing(1, 2.5, 2.5, 0),
-      position: 'fixed',
-      width: '100%'
+      position: 'fixed'
     },
     bottom: 0,
     display: 'flex',
@@ -64,14 +67,6 @@ const useStyles = makeStyles<{
     padding: theme.spacing(1, 0, 0, 0),
     right: 0,
     zIndex: theme.zIndex.modal
-  },
-  modalCloseButton: {
-    position: 'absolute',
-    right: theme.spacing(1),
-    svg: {
-      opacity: 0.6
-    },
-    top: theme.spacing(1)
   }
 }));
 

package/src/components/Modal/Modal.tsx

@@ -61,7 +61,7 @@ const Modal = ({
       {...attr}
     >
       {hasCloseButton && (
-        <div className={classes.modalCloseButton}>
+        <div className="absolute top-2 right-3 opacity-60">
           <IconButton
             aria-label="close"
             icon={<CloseIcon />}

package/src/components/Modal/modal.module.css

@@ -12,5 +12,4 @@
   overflow-y: auto;
   overflow-x: hidden;
   height: 100%;
-  padding-right: var(--spacing-4); /* To prevent scrollbar from overlapping content */
 }