@centreon/ui 26.3.5 → 26.3.6

package/package.json

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

package/src/ActionsList/ActionsList.styles.ts

@@ -1,8 +1,8 @@
+import type { Theme } from '@mui/material';
+
 import { equals } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
-import { Theme } from '@mui/material';
-
 interface GetBackgroundAndColorProps {
   status: string;
   theme: Theme;

package/src/ActionsList/index.stories.tsx

@@ -1,12 +1,11 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-
 import CopyIcon from '@mui/icons-material/ContentCopy';
 import DeleteIcon from '@mui/icons-material/Delete';
 import EditIcon from '@mui/icons-material/Edit';
 
-import { ActionVariants } from './models';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 
 import ActionsList from '.';
+import type { ActionVariants } from './models';
 
 const actions = [
   {

package/src/ActionsList/index.tsx

@@ -1,20 +1,19 @@
-import { equals } from 'ramda';
-import { useTranslation } from 'react-i18next';
-
 import {
   Divider,
   ListItemIcon,
   ListItemText,
   MenuItem,
   MenuList,
-  SvgIconTypeMap
+  type SvgIconTypeMap
 } from '@mui/material';
-import { OverridableComponent } from '@mui/material/OverridableComponent';
+import type { OverridableComponent } from '@mui/material/OverridableComponent';
 
-import { sanitizedHTML } from '..';
+import { equals } from 'ramda';
+import { useTranslation } from 'react-i18next';
 
+import { sanitizedHTML } from '..';
 import { useStyles } from './ActionsList.styles';
-import { ActionVariants } from './models';
+import type { ActionVariants } from './models';
 
 interface ActionsType {
   Icon?: OverridableComponent<SvgIconTypeMap<object, 'svg'>> & {
@@ -49,7 +48,7 @@ const ActionsList = ({
     <MenuList className={cx(classes.list, className)}>
       {actions?.map((action, idx) => {
         if (equals(action, ActionsListActionDivider.divider)) {
-          // biome-ignore lint/suspicious/noArrayIndexKey:
+          // biome-ignore lint/suspicious/noArrayIndexKey: need it
           return <Divider key={`divider_${idx}`} />;
         }
 
@@ -59,8 +58,8 @@ const ActionsList = ({
         return (
           <MenuItem
             aria-label={label}
-            data-testid={label}
             className={classes.item}
+            data-testid={label}
             data-variant={variant}
             id={label}
             key={label}

package/src/Button/Icon/index.stories.tsx

@@ -1,8 +1,8 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { makeStyles } from 'tss-react/mui';
-
 import AccessibilityIcon from '@mui/icons-material/Accessibility';
-import { Theme } from '@mui/material';
+import type { Theme } from '@mui/material';
+
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { makeStyles } from 'tss-react/mui';
 
 import { IconButton } from '.';
 
@@ -41,8 +41,8 @@ const CustomIconButton = (): JSX.Element => {
   return (
     <IconButton
       className={classes.root}
-      title="custom Button"
       onClick={(): void => undefined}
+      title="custom Button"
     >
       <AccessibilityIcon />
     </IconButton>

package/src/Button/Icon/index.tsx

@@ -1,11 +1,11 @@
-import { makeStyles } from 'tss-react/mui';
-
 import {
-  IconButtonProps,
+  type IconButtonProps,
   IconButton as MuiIconButton,
   Tooltip
 } from '@mui/material';
 
+import { makeStyles } from 'tss-react/mui';
+
 import { getNormalizedId } from '../../utils';
 
 const useStyles = makeStyles()((theme) => ({

package/src/Button/Save/index.stories.tsx

@@ -1,7 +1,7 @@
-import { ComponentStory } from '@storybook/react';
-import { makeStyles } from 'tss-react/mui';
+import type { Theme } from '@mui/material';
 
-import { Theme } from '@mui/material';
+import type { ComponentStory } from '@storybook/react';
+import { makeStyles } from 'tss-react/mui';
 
 import ButtonSave from '.';
 import '../../ThemeProvider/tailwindcss.css';
@@ -56,11 +56,11 @@ export const largeWithText = (): JSX.Element => (
 );
 
 export const loadingWithTextAndMediumSize = (): JSX.Element => (
-  <ButtonSave loading labelLoading="Loading" size="medium" />
+  <ButtonSave labelLoading="Loading" loading size="medium" />
 );
 
 export const succeededWithText = (): JSX.Element => (
-  <ButtonSave succeeded labelSucceeded="Succeeded" />
+  <ButtonSave labelSucceeded="Succeeded" succeeded />
 );
 
 export const normalWithTextAndSmallSize = (): JSX.Element => (
@@ -68,15 +68,15 @@ export const normalWithTextAndSmallSize = (): JSX.Element => (
 );
 
 export const loadingWithTextAndSmallSize = (): JSX.Element => (
-  <ButtonSave loading labelLoading="Loading" size="small" />
+  <ButtonSave labelLoading="Loading" loading size="small" />
 );
 
 export const loadingWithTextAndLargeSize = (): JSX.Element => (
-  <ButtonSave loading labelLoading="Loading" size="large" />
+  <ButtonSave labelLoading="Loading" loading size="large" />
 );
 
 export const succeededWithTextAndSmallSize = (): JSX.Element => (
-  <ButtonSave succeeded labelSucceeded="Succeeded" size="small" />
+  <ButtonSave labelSucceeded="Succeeded" size="small" succeeded />
 );
 
 const CustomButton = (): JSX.Element => {

package/src/Button/Save/index.tsx

@@ -1,10 +1,9 @@
-import { makeStyles } from 'tss-react/mui';
+import { type Theme, Tooltip } from '@mui/material';
 
-import { Theme, Tooltip } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
 
+import { Button, type ButtonProps } from '../../components';
 import { getNormalizedId } from '../../utils';
-
-import { Button, ButtonProps } from '../../components';
 import { useSave } from './useSave';
 
 const useStyles = makeStyles()((theme: Theme) => ({
@@ -45,8 +44,8 @@ const SaveButton = ({
     labelSave,
     labelSucceeded,
     loading,
-    succeeded,
-    startIcon
+    startIcon,
+    succeeded
   });
 
   return (

package/src/Button/Save/useSave.tsx

@@ -1,7 +1,7 @@
 import CheckIcon from '@mui/icons-material/Check';
 import SaveIcon from '@mui/icons-material/Save';
+
 import {
-  T,
   always,
   any,
   cond,
@@ -10,11 +10,13 @@ import {
   not,
   or,
   pipe,
-  propEq
+  propEq,
+  T
 } from 'ramda';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Props } from '.';
+
+import type { Props } from '.';
 
 interface StartIconConfigProps {
   hasLabel: boolean;
@@ -53,10 +55,10 @@ export const useSave = ({
   const hasLabel = hasValue([labelLoading, labelSave, labelSucceeded]);
 
   const startIconConfig = {
+    enabled: startIcon,
     hasLabel,
     loading,
-    succeeded,
-    enabled: startIcon
+    succeeded
   } as StartIconConfigProps;
 
   const content = useMemo(() => {
@@ -69,7 +71,7 @@ export const useSave = ({
     }
 
     return labelSave ? t(labelSave) : <SaveIcon />;
-  }, [labelLoading, labelSucceeded, labelSave, loading, succeeded]);
+  }, [labelLoading, labelSucceeded, labelSave, loading, succeeded, t]);
 
   const startIconToDisplay = useMemo(() => {
     return cond<Array<StartIconConfigProps>, JSX.Element | null>([
@@ -83,7 +85,7 @@ export const useSave = ({
 
   return {
     content,
-    startIconToDisplay,
-    hasLabel
+    hasLabel,
+    startIconToDisplay
   };
 };

package/src/Checkbox/Checkbox.tsx

@@ -1,9 +1,9 @@
-import { T, always, cond, equals } from 'ramda';
-import { makeStyles } from 'tss-react/mui';
-
-import { SvgIconComponent } from '@mui/icons-material';
+import type { SvgIconComponent } from '@mui/icons-material';
 import { Box, FormControlLabel, Checkbox as MuiCheckbox } from '@mui/material';
-import Typography, { TypographyProps } from '@mui/material/Typography';
+import Typography, { type TypographyProps } from '@mui/material/Typography';
+
+import { always, cond, equals, T } from 'ramda';
+import { makeStyles } from 'tss-react/mui';
 
 export type LabelPlacement = 'bottom' | 'top' | 'end' | 'start' | undefined;
 
@@ -89,9 +89,9 @@ const Checkbox = ({
             color="primary"
             disabled={disabled}
             id={id}
+            onChange={onChange}
             size="small"
             sx={{ padding: 0 }}
-            onChange={onChange}
           />
         }
         data-testid={dataTestId || ''}

package/src/Checkbox/CheckboxGroup/index.stories.tsx

@@ -1,4 +1,4 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 
 import CheckboxGroup from '.';
 

package/src/Checkbox/CheckboxGroup/index.tsx

@@ -1,12 +1,11 @@
+import FormGroup, { type FormGroupProps } from '@mui/material/FormGroup';
+import type { TypographyProps } from '@mui/material/Typography';
+
 import { equals, includes } from 'ramda';
+import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 
-import FormGroup, { FormGroupProps } from '@mui/material/FormGroup';
-import { TypographyProps } from '@mui/material/Typography';
-
-import Checkbox, { LabelPlacement } from '../Checkbox';
-
-import { useTranslation } from 'react-i18next';
+import Checkbox, { type LabelPlacement } from '../Checkbox';
 
 interface Props {
   className?: string;
@@ -64,12 +63,12 @@ const CheckboxGroup = ({
             checked={includes(value, values)}
             className={cx(classes.checkbox, className)}
             disabled={disabled}
+            id={value}
             key={value}
             label={t(value)}
             labelPlacement={labelPlacement}
             labelProps={labelProps}
             onChange={onChange}
-            id={value}
           />
         );
       })}

package/src/Checkbox/index.stories.tsx

@@ -1,7 +1,7 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-
 import MailIcon from '@mui/icons-material/MailOutline';
 
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
 import Checkbox from './Checkbox';
 
 export default {
@@ -24,8 +24,8 @@ Playground.args = {
 export const WithIcon = Template.bind({});
 
 WithIcon.args = {
-  Icon: MailIcon,
   checked: true,
+  Icon: MailIcon,
   label: 'Mail',
   labelPlacement: 'end'
 };

package/src/Checkbox/index.tsx

@@ -1,2 +1,2 @@
-export { default as CheckboxGroup } from './CheckboxGroup';
 export { default as Checkbox } from './Checkbox';
+export { default as CheckboxGroup } from './CheckboxGroup';

package/src/Colors/index.stories.tsx

@@ -1,11 +1,10 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-
 import { Paper } from '@mui/material';
 
 import { ThemeMode } from '@centreon/ui-context';
 
-import StoryBookThemeProvider from '../StoryBookThemeProvider';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 
+import StoryBookThemeProvider from '../StoryBookThemeProvider';
 import { ColorStory } from '.';
 
 export default {

package/src/Colors/index.tsx

@@ -1,9 +1,9 @@
-import { includes, toPairs } from 'ramda';
-import { makeStyles } from 'tss-react/mui';
-
 import { Box, Divider, Grid, Stack, Typography, useTheme } from '@mui/material';
 
-import { ThemeMode } from '@centreon/ui-context';
+import type { ThemeMode } from '@centreon/ui-context';
+
+import { includes, toPairs } from 'ramda';
+import { makeStyles } from 'tss-react/mui';
 
 const useStyles = makeStyles()((theme) => ({
   divider: {
@@ -51,7 +51,7 @@ const ContainerDescription = ({
   return (
     <Box sx={{ width: '100%' }}>
       <Typography variant="h4">{containerTitle}</Typography>
-      <Grid container columnSpacing={{ md: 3, sm: 2, xs: 1 }} rowSpacing={5}>
+      <Grid columnSpacing={{ md: 3, sm: 2, xs: 1 }} container rowSpacing={5}>
         {toPairs(palette[keyTheme]).map(
           ([key, value]) =>
             !includes(key, keysToRemove) && (
@@ -92,8 +92,8 @@ const GroupedColorStatus = (): JSX.Element => {
           />
           <Divider
             className={classes.divider}
-            variant="middle"
             key={`${status}-divider`}
+            variant="middle"
           />
         </>
       ))}

package/src/ContentWithCircularProgress/index.stories.tsx

@@ -1,7 +1,7 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { makeStyles } from 'tss-react/mui';
+import { type Theme, Typography } from '@mui/material';
 
-import { Theme, Typography } from '@mui/material';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { makeStyles } from 'tss-react/mui';
 
 import ContentWithCircularLoading from '.';
 
@@ -51,7 +51,7 @@ export const loaded = (): JSX.Element => (
 );
 
 export const loadingNotCentered = (): JSX.Element => (
-  <ContentWithCircularLoading loading alignCenter={false}>
+  <ContentWithCircularLoading alignCenter={false} loading>
     <Content />
   </ContentWithCircularLoading>
 );
@@ -67,8 +67,8 @@ const CustomLoading = (): JSX.Element => {
 
   return (
     <ContentWithCircularLoading
-      loading
       className={classes.root}
+      loading
       loadingContainerClassname={classes.container}
       loadingIndicatorSize={50}
     >

package/src/ContentWithCircularProgress/index.tsx

@@ -1,9 +1,8 @@
-import { ReactElement } from 'react';
+import { CircularProgress } from '@mui/material';
 
+import type { ReactElement } from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import { CircularProgress } from '@mui/material';
-
 const useStyles = makeStyles()(() => ({
   alignCenter: {
     alignItems: 'center',

package/src/Dashboard/Dashboard.styles.ts

@@ -1,7 +1,7 @@
-import { makeStyles } from 'tss-react/mui';
-
 import { alpha } from '@mui/material';
 
+import { makeStyles } from 'tss-react/mui';
+
 export const useDashboardLayoutStyles = makeStyles<boolean>()(
   (theme, isStatic: boolean) => ({
     container: {
@@ -24,8 +24,8 @@ export const useDashboardLayoutStyles = makeStyles<boolean>()(
       },
       '& .react-resizable-handle': {
         display: isStatic ? 'none' : 'flex',
-        position: 'absolute',
         opacity: 0,
+        position: 'absolute',
         transition: theme.transitions.create('opacity')
       },
       '& .react-resizable-handle-e': {
@@ -37,34 +37,16 @@ export const useDashboardLayoutStyles = makeStyles<boolean>()(
           height: 'calc(100% / 3)',
           width: '100%'
         },
+        alignItems: 'center',
         cursor: 'ew-resize',
         height: `calc(100% - ${theme.spacing(3)})`,
         marginTop: 0,
         right: 0,
         top: 0,
-        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'
+        width: theme.spacing(0.75)
       },
 
       '& .react-resizable-handle-s': {
-        justifyContent: 'center',
         '& .handle-content-s': {
           backgroundColor: theme.palette.action.focus,
           backgroundImage: 'none',
@@ -75,6 +57,7 @@ export const useDashboardLayoutStyles = makeStyles<boolean>()(
         bottom: 4,
         cursor: 'ns-resize',
         height: theme.spacing(0.75),
+        justifyContent: 'center',
         left: 0,
         marginLeft: 0,
         width: `calc(100% - ${theme.spacing(1)})`
@@ -85,15 +68,15 @@ export const useDashboardLayoutStyles = makeStyles<boolean>()(
           backgroundImage: 'none',
           borderRadius: theme.shape.borderRadius,
           display: isStatic ? 'none' : 'block',
-          width: '100%',
-          height: '100%'
+          height: '100%',
+          width: '100%'
         },
         bottom: 4,
         cursor: 'nwse-resize',
         height: theme.spacing(1.5),
+        opacity: 0.7,
         right: 0,
-        width: theme.spacing(1.5),
-        opacity: 0.7
+        width: theme.spacing(1.5)
       },
       '& .react-resizable-handle-sw': {
         '& .handle-content-sw': {
@@ -101,24 +84,41 @@ export const useDashboardLayoutStyles = makeStyles<boolean>()(
           backgroundImage: 'none',
           borderRadius: theme.shape.borderRadius,
           display: isStatic ? 'none' : 'block',
-          width: '100%',
-          height: '100%'
+          height: '100%',
+          width: '100%'
         },
         bottom: 4,
         cursor: 'nesw-resize',
         height: theme.spacing(1.5),
         left: 0,
-        width: theme.spacing(1.5),
-        opacity: 0.7
+        opacity: 0.7,
+        width: theme.spacing(1.5)
       },
-      '& .react-resizable-handle:hover': {
-        opacity: 1
+      '& .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%'
+        },
+        alignItems: 'center',
+        cursor: 'ew-resize',
+        height: `calc(100% - ${theme.spacing(3)})`,
+        left: 0,
+        marginTop: 0,
+        top: 0,
+        width: theme.spacing(0.75)
       },
       '& .react-resizable-handle::after': {
         content: 'none'
       },
-      position: 'relative',
-      height: '100%'
+      '& .react-resizable-handle:hover': {
+        opacity: 1
+      },
+      height: '100%',
+      position: 'relative'
     }
   })
 );
@@ -135,10 +135,6 @@ export const useDashboardItemStyles = makeStyles<{ hasHeader: boolean }>()(
       height: '100%',
       width: '100%'
     },
-    widgetSubContainer: {
-      height: '100%',
-      width: '100%'
-    },
     widgetContent: {
       height: hasHeader
         ? `calc(100% - ${theme.spacing(3.5)} - ${theme.spacing(0.5)})`
@@ -166,6 +162,10 @@ export const useDashboardItemStyles = makeStyles<{ hasHeader: boolean }>()(
       overflowX: 'auto',
       padding: theme.spacing(0.5, 1.5, 1.5),
       position: 'relative'
+    },
+    widgetSubContainer: {
+      height: '100%',
+      width: '100%'
     }
   })
 );

package/src/Dashboard/DashboardLayout.stories.tsx

@@ -1,10 +1,9 @@
-import { ComponentMeta } from '@storybook/react';
-import { Layout } from 'react-grid-layout';
-
 import { Typography } from '@mui/material';
 
-import FluidTypography from '../Typography/FluidTypography';
+import type { ComponentMeta } from '@storybook/react';
+import type { Layout } from 'react-grid-layout';
 
+import FluidTypography from '../Typography/FluidTypography';
 import { DashboardLayout } from '.';
 
 interface CustomLayout extends Layout {

package/src/Dashboard/Grid.tsx

@@ -1,12 +1,10 @@
-import { ReactElement, useMemo } from 'react';
+import { useTheme } from '@mui/material';
 
 import { scaleLinear } from '@visx/scale';
 import { Grid as VisxGrid } from '@visx/visx';
-
-import { useTheme } from '@mui/material';
+import { type ReactElement, useMemo } from 'react';
 
 import { useMemoComponent } from '../utils';
-
 import { maxColumns, rowHeight } from './utils';
 
 interface Props {
@@ -35,7 +33,7 @@ const Grid = ({ width, height, columns }: Props): ReactElement => {
         domain: [0, numberOfRows],
         range: [0, height]
       }),
-    [height]
+    [height, numberOfRows]
   );
 
   const tick = maxColumns / columns;
@@ -53,13 +51,13 @@ const Grid = ({ width, height, columns }: Props): ReactElement => {
       <svg style={{ height, position: 'absolute', width }}>
         <VisxGrid.Grid
           columnTickValues={xTickValues}
-          rowTickValues={yTickValues}
           height={height}
-          yScale={yScale}
-          xScale={xScale}
+          left={-8}
+          rowTickValues={yTickValues}
           stroke={theme.palette.divider}
           width={width}
-          left={-8}
+          xScale={xScale}
+          yScale={yScale}
         />
       </svg>
     ),