@centreon/ui 26.3.4 → 26.3.6

package/src/Listing/tableAtoms.ts

@@ -1,9 +1,9 @@
+import { ListingVariant } from '@centreon/ui-context';
+
 import { atom } from 'jotai';
 import { equals } from 'ramda';
 
-import { ListingVariant } from '@centreon/ui-context';
-
-import { TableStyleAtom } from './models';
+import type { TableStyleAtom } from './models';
 
 const compactTableBody = {
   fontSize: '0.75rem',

package/src/Listing/useResizeObserver.ts

@@ -1,5 +1,4 @@
-import { RefObject, useEffect } from 'react';
-
+import { type RefObject, useEffect } from 'react';
 import ResizeObserver from 'resize-observer-polyfill';
 
 interface Props<TRef> {
@@ -21,7 +20,7 @@ const useResizeObserver = <TRef extends Element>({
     return (): void => {
       ro.unobserve(element);
     };
-  }, []);
+  }, [onResize, ref?.current]);
 };
 
 export default useResizeObserver;

package/src/Listing/useStyleTable.ts

@@ -1,14 +1,13 @@
-import { useEffect, useMemo } from 'react';
+import type { Theme } from '@mui/material';
+
+import { ListingVariant } from '@centreon/ui-context';
 
 import { useAtomValue, useSetAtom } from 'jotai';
 import { equals, isEmpty, isNil, pick, type, update } from 'ramda';
-import { CSSObject } from 'tss-react';
-
-import { Theme } from '@mui/material';
-
-import { ListingVariant } from '@centreon/ui-context';
+import { useEffect, useMemo } from 'react';
+import type { CSSObject } from 'tss-react';
 
-import { Column, TableStyleAtom as Style } from './models';
+import type { Column, TableStyleAtom as Style } from './models';
 import { tableStyleAtom, tableStyleDerivedAtom } from './tableAtoms';
 
 interface TableStyle {
@@ -46,7 +45,7 @@ const useStyleTable = ({ listingVariant }: TableStyle): TableStyleState => {
     if (listingVariant) {
       updateStyleTable({ listingVariant });
     }
-  }, [listingVariant]);
+  }, [listingVariant, updateStyleTable]);
 
   return {
     dataStyle

package/src/ListingPage/Filter.tsx

@@ -1,8 +1,8 @@
-import { makeStyles } from 'tss-react/mui';
-
 import { Box } from '@mui/material';
 
-import { ReactElement, forwardRef } from 'react';
+import { forwardRef, type ReactElement } from 'react';
+import { makeStyles } from 'tss-react/mui';
+
 import { useMemoComponent } from '..';
 
 const useStyles = makeStyles()((theme) => ({

package/src/ListingPage/FilterSkeleton.tsx

@@ -1,7 +1,7 @@
-import { makeStyles } from 'tss-react/mui';
-
 import { Skeleton } from '@mui/material';
 
+import { makeStyles } from 'tss-react/mui';
+
 const useStyles = makeStyles()((theme) => ({
   filterSkeleton: {
     height: theme.spacing(6),

package/src/ListingPage/ListingSkeleton.tsx

@@ -1,7 +1,7 @@
-import { makeStyles } from 'tss-react/mui';
-
 import { Skeleton } from '@mui/material';
 
+import { makeStyles } from 'tss-react/mui';
+
 const useStyles = makeStyles()((theme) => ({
   listingSkeleton: {
     height: theme.spacing(50),

package/src/ListingPage/index.stories.tsx

@@ -1,20 +1,17 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 
-import { useState } from 'react';
-
-import { makeStyles } from 'tss-react/mui';
-
 import { Button, Paper, Tab, Typography } from '@mui/material';
 import { grey } from '@mui/material/colors';
 
+import { useState } from 'react';
+import { makeStyles } from 'tss-react/mui';
+
 import { SearchField } from '..';
 import Listing from '../Listing';
 import { ColumnType } from '../Listing/models';
 import Panel from '../Panel';
-
+import ListingPage, { type ListingPageProps } from '.';
 import Filter from './Filter';
-
-import ListingPage, { ListingPageProps } from '.';
 import '../ThemeProvider/tailwindcss.css';
 
 export default { title: 'Listing Page' };
@@ -242,8 +239,8 @@ const DetailsPanel = ({
 }: PanelProps): JSX.Element => (
   <Panel
     header={<DetailsPanelHeader />}
-    selectedTab={<DetailsPanelContent />}
     onClose={onClose}
+    selectedTab={<DetailsPanelContent />}
   />
 );
 
@@ -275,28 +272,28 @@ export const normal = (): JSX.Element => (
 
 export const withOpenPanel = (): JSX.Element => (
   <Template
-    panelOpen
     filter={<FilterWithContent />}
     listing={listing}
     panel={<DetailsPanel />}
+    panelOpen
   />
 );
 
 export const withOpenPanelAndTabs = (): JSX.Element => (
   <Template
-    panelOpen
     filter={<FilterWithContent />}
     listing={listing}
     panel={<DetailsPanelWithTabs />}
+    panelOpen
   />
 );
 
 export const withFilterDetailsAndOpenPanel = (): JSX.Element => (
   <Template
-    panelOpen
     filter={<FilterWithContent />}
     listing={listing}
     panel={<DetailsPanel />}
+    panelOpen
   />
 );
 
@@ -305,10 +302,10 @@ export const withFixedPanel = (): JSX.Element => {
 
   return (
     <Template
-      panelFixed
       filter={<FilterWithOpenButton onOpen={(): void => setOpen(true)} />}
       listing={listing}
       panel={<DetailsPanel onClose={(): void => setOpen(false)} />}
+      panelFixed
       panelOpen={open}
     />
   );

package/src/ListingPage/index.tsx

@@ -1,13 +1,11 @@
-import { Suspense, useRef } from 'react';
+import { Box } from '@mui/material';
 
+import { Suspense, useRef } from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import { Box } from '@mui/material';
-
 import { ParentSize } from '..';
 import WithPanel from '../Panel/WithPanel';
 import { useMemoComponent } from '../utils';
-
 import FilterSkeleton from './FilterSkeleton';
 import ListingSkeleton from './ListingSkeleton';
 

package/src/LoadingSkeleton/index.stories.tsx

@@ -1,7 +1,7 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { makeStyles } from 'tss-react/mui';
+import type { Theme } from '@mui/material';
 
-import { Theme } from '@mui/material';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { makeStyles } from 'tss-react/mui';
 
 import LoadingSkeleton from '.';
 

package/src/LoadingSkeleton/index.tsx

@@ -1,4 +1,4 @@
-import { Skeleton, SkeletonProps } from '@mui/material';
+import { Skeleton, type SkeletonProps } from '@mui/material';
 
 const LoadingSkeleton = (props: SkeletonProps): JSX.Element => {
   return <Skeleton animation="wave" variant="rectangular" {...props} />;

package/src/Logo/CentreonLogo.stories.tsx

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

package/src/Logo/CentreonLogo.tsx

@@ -1,5 +1,4 @@
-import { FC } from 'react';
-
+import type { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 
@@ -8,7 +7,6 @@ import CentreonLogoDark from '../@assets/brand/centreon-logo-one-line-dark.svg';
 import CentreonLogoLight from '../@assets/brand/centreon-logo-one-line-light.svg';
 import LoadingSkeleton from '../LoadingSkeleton';
 import { useThemeMode } from '../utils/useThemeMode';
-
 import { labelCentreonLogo } from './translatedLabels';
 
 const useStyles = makeStyles()((theme) => ({

package/src/MenuSkeleton/index.stories.tsx

@@ -1,4 +1,4 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { makeStyles } from 'tss-react/mui';
 
 import MenuLoader from '.';

package/src/MenuSkeleton/index.tsx

@@ -1,6 +1,6 @@
-import { makeStyles } from 'tss-react/mui';
+import { alpha, type SkeletonProps, useTheme } from '@mui/material';
 
-import { SkeletonProps, alpha, useTheme } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
 
 import LoadingSkeleton from '../LoadingSkeleton';
 

package/src/Module/LicensedModule/LicenseCheck/decoder.ts

@@ -1,6 +1,6 @@
 import { JsonDecoder } from 'ts.data.json';
 
-import { License } from './models';
+import type { License } from './models';
 
 export const licenseDecoder = JsonDecoder.object<License>(
   {

package/src/Module/LicensedModule/LicenseCheck/index.stories.tsx

@@ -1,10 +1,9 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { makeStyles } from 'tss-react/mui';
-
 import { Alert, Container } from '@mui/material';
 
-import { getModuleLicenseCheckEndpoint } from '../api';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { makeStyles } from 'tss-react/mui';
 
+import { getModuleLicenseCheckEndpoint } from '../api';
 import LicenseCheck from '.';
 
 const useStyles = makeStyles()({

package/src/Module/LicensedModule/LicenseCheck/index.tsx

@@ -3,9 +3,8 @@ import { useTranslation } from 'react-i18next';
 import { MenuSkeleton, PageSkeleton, useFetchQuery } from '../../..';
 import { FallbackPage } from '../../../FallbackPage/FallbackPage';
 import { getModuleLicenseCheckEndpoint } from '../api';
-
 import { licenseDecoder } from './decoder';
-import { License } from './models';
+import type { License } from './models';
 import {
   labelContactYourAdministrator,
   labelInvalidLicense,

package/src/Module/LicensedModule/index.tsx

@@ -1,6 +1,5 @@
-import Module, { ModuleProps } from '../index';
-
-import LicenseCheck, { LicenseCheckProps } from './LicenseCheck';
+import Module, { type ModuleProps } from '../index';
+import LicenseCheck, { type LicenseCheckProps } from './LicenseCheck';
 
 type Props = ModuleProps & LicenseCheckProps;
 

package/src/Module/Module.cypress.spec.tsx

@@ -1,10 +1,8 @@
 import { createStore } from 'jotai';
 
 import { Method } from '..';
-
-import LicensedModule from './LicensedModule';
-
 import Module from '.';
+import LicensedModule from './LicensedModule';
 
 const initializeModule = (): void => {
   cy.mount({

package/src/Module/index.tsx

@@ -1,9 +1,9 @@
-import { QueryClient } from '@tanstack/react-query';
-import { Provider as JotaiProvider, createStore } from 'jotai';
+import type { ThemeOptions } from '@mui/material';
+import { createGenerateClassName, StylesProvider } from '@mui/styles';
 
-import { StylesProvider, createGenerateClassName } from '@mui/styles';
+import type { QueryClient } from '@tanstack/react-query';
+import { type createStore, Provider as JotaiProvider } from 'jotai';
 
-import { ThemeOptions } from '@mui/material';
 import { QueryProvider, ThemeProvider } from '..';
 import SnackbarProvider from '../Snackbar/SnackbarProvider';
 

package/src/MultiSelectEntries/index.stories.tsx

@@ -1,4 +1,4 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 
 import MultiSelectEntries from '.';
 import '../ThemeProvider/tailwindcss.css';
@@ -46,18 +46,18 @@ export const oneElement = (): JSX.Element => (
   <MultiSelectEntries
     emptyLabel={emptyLabel}
     label={label}
-    values={[entries[0]]}
     onClick={noOp}
+    values={[entries[0]]}
   />
 );
 
 export const oneElementHighlight = (): JSX.Element => (
   <MultiSelectEntries
-    highlight
     emptyLabel={emptyLabel}
+    highlight
     label={label}
-    values={[entries[0]]}
     onClick={noOp}
+    values={[entries[0]]}
   />
 );
 
@@ -65,8 +65,8 @@ export const sixElements = (): JSX.Element => (
   <MultiSelectEntries
     emptyLabel={emptyLabel}
     label={label}
-    values={entries}
     onClick={noOp}
+    values={entries}
   />
 );
 
@@ -75,7 +75,7 @@ export const sixElementsError = (): JSX.Element => (
     emptyLabel={emptyLabel}
     error="Something went wrong"
     label={label}
-    values={entries}
     onClick={noOp}
+    values={entries}
   />
 );

package/src/MultiSelectEntries/index.tsx

@@ -1,13 +1,11 @@
-/* eslint-disable react/prop-types */
-
-import { Ref } from 'react';
-
-import { CxArg } from 'tss-react';
-import { makeStyles } from 'tss-react/mui';
-
+/** biome-ignore-all lint/a11y/noStaticElementInteractions: need it */
 import IconCreate from '@mui/icons-material/Create';
 import { Box, Chip, FormHelperText, Grid, Typography } from '@mui/material';
 
+import type { Ref } from 'react';
+import type { CxArg } from 'tss-react';
+import { makeStyles } from 'tss-react/mui';
+
 import useHover from './useHover';
 
 const maxChips = 5;
@@ -133,9 +131,9 @@ const MultiSelectEntries = ({
         [classes.hovered]: (isHovered as boolean) || highlight,
         [classes.container]: true
       } as CxArg)}
-      ref={hoverRef as Ref<HTMLDivElement>}
       onClick={onClick}
       onKeyDown={onClick}
+      ref={hoverRef as Ref<HTMLDivElement>}
     >
       <Box display="flex">
         <Box flexGrow={1}>

package/src/MultiSelectEntries/useHover.ts

@@ -1,12 +1,12 @@
-import { Ref, useEffect, useRef, useState } from 'react';
+import { type Ref, useCallback, useEffect, useRef, useState } from 'react';
 
 const useHover = (): Array<Ref<Node> | boolean> => {
   const [value, setValue] = useState<boolean>(false);
 
   const ref = useRef<Node>(null);
 
-  const mouseHover = (): void => setValue(true);
-  const mouseOut = (): void => setValue(false);
+  const mouseHover = useCallback((): void => setValue(true), []);
+  const mouseOut = useCallback((): void => setValue(false), []);
 
   useEffect((): (() => void) | undefined => {
     const node = ref.current;
@@ -22,7 +22,7 @@ const useHover = (): Array<Ref<Node> | boolean> => {
       node.removeEventListener('mouseover', mouseHover);
       node.removeEventListener('mouseout', mouseOut);
     };
-  }, []);
+  }, [mouseHover, mouseOut]);
 
   return [ref, value];
 };

package/src/PageSkeleton/BaseSkeleton.tsx

@@ -1,10 +1,9 @@
-import { makeStyles } from 'tss-react/mui';
+import type { SkeletonProps } from '@mui/material';
 
-import { SkeletonProps } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
 
 import LoadingSkeleton from '../LoadingSkeleton';
-
-import { PageSkeletonProps } from '.';
+import type { PageSkeletonProps } from '.';
 
 export const useSkeletonStyles = makeStyles()((theme) => ({
   skeletonLayout: {

package/src/PageSkeleton/ContentSkeleton.tsx

@@ -1,10 +1,9 @@
-import { makeStyles } from 'tss-react/mui';
-
 import { useTheme } from '@mui/material';
 
-import BaseRectSkeleton from './BaseSkeleton';
+import { makeStyles } from 'tss-react/mui';
 
-import { PageSkeletonProps } from '.';
+import type { PageSkeletonProps } from '.';
+import BaseRectSkeleton from './BaseSkeleton';
 
 const numberOfActionButtons = 2;
 const filterHeight = 6;

package/src/PageSkeleton/index.stories.tsx

@@ -1,4 +1,4 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 
 import PageSkeleton from '.';
 
@@ -24,5 +24,5 @@ PlaygroundPageSkeleton.args = {
 export const normal = (): JSX.Element => <PageSkeleton animate={false} />;
 
 export const normalWidthHeaderAndNavigation = (): JSX.Element => (
-  <PageSkeleton displayHeaderAndNavigation animate={false} />
+  <PageSkeleton animate={false} displayHeaderAndNavigation />
 );

package/src/PageSkeleton/index.tsx

@@ -1,9 +1,8 @@
-import { makeStyles } from 'tss-react/mui';
-
 import { useTheme } from '@mui/material';
 
-import LoadingSkeleton from '../LoadingSkeleton';
+import { makeStyles } from 'tss-react/mui';
 
+import LoadingSkeleton from '../LoadingSkeleton';
 import BaseRectSkeleton, { useSkeletonStyles } from './BaseSkeleton';
 import ContentSkeleton from './ContentSkeleton';
 

package/src/Pagination/Pagination.cypress.spec.tsx

@@ -1,6 +1,6 @@
-import { labelNextPage, labelPreviousPage } from '../Listing/translatedLabels';
 import TestQueryProvider from '../api/TestQueryProvider';
 import { Method } from '../api/useMutationQuery';
+import { labelNextPage, labelPreviousPage } from '../Listing/translatedLabels';
 import Pagination from './Pagination';
 import { generateItems } from './utils';
 
@@ -11,18 +11,21 @@ const totalPages = Math.ceil(defaultTotalItems / itemsPerPage);
 const initialize = ({
   total = defaultTotalItems,
   currentPage = 1
-}: { total?: number; currentPage?: number }) => {
+}: {
+  total?: number;
+  currentPage?: number;
+}) => {
   cy.interceptAPIRequest({
     alias: 'list',
     method: Method.GET,
     path: '**/listing**',
     response: {
-      result: generateItems(itemsPerPage),
       meta: {
+        limit: itemsPerPage,
         page: currentPage,
-        total,
-        limit: itemsPerPage
-      }
+        total
+      },
+      result: generateItems(itemsPerPage)
     }
   });
 
@@ -30,17 +33,17 @@ const initialize = ({
     Component: (
       <div
         style={{
-          width: '100%',
-          height: '100vh',
+          alignItems: 'center',
           display: 'flex',
+          height: '100vh',
           justifyContent: 'center',
-          alignItems: 'center'
+          width: '100%'
         }}
       >
         <div
           style={{
-            height: '176px',
-            boxShadow: '2px 2px 4px rgba(0, 0, 0, 0.2)'
+            boxShadow: '2px 2px 4px rgba(0, 0, 0, 0.2)',
+            height: '176px'
           }}
         >
           <TestQueryProvider>

package/src/Pagination/Pagination.stories.tsx

@@ -1,15 +1,16 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { http, HttpResponse } from 'msw';
+import type { Meta, StoryObj } from '@storybook/react';
+import { HttpResponse, http } from 'msw';
+
 import Pagination from '.';
 import { generateItems } from './utils';
 
 const mockedListing = {
-  result: generateItems(6),
   meta: {
+    limit: 6,
     page: 1,
-    total: 35,
-    limit: 6
-  }
+    total: 35
+  },
+  result: generateItems(6)
 };
 
 const meta: Meta<typeof Pagination> = {
@@ -28,8 +29,8 @@ const meta: Meta<typeof Pagination> = {
     return (
       <div
         style={{
-          width: '240px',
-          background: '#EDEDED'
+          background: '#EDEDED',
+          width: '240px'
         }}
       >
         <Pagination {...args} />

package/src/Pagination/Pagination.styles.ts

@@ -1,56 +1,56 @@
 import { makeStyles } from 'tss-react/mui';
 
 export const useStyles = makeStyles()((theme) => ({
-  container: {
-    height: theme.spacing(22),
-    width: theme.spacing(30),
-    padding: theme.spacing(1),
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    gap: theme.spacing(2)
+  arrow: {
+    fontSize: theme.spacing(2)
   },
-  notFound: {
-    height: theme.spacing(10),
-    width: theme.spacing(30),
-    padding: theme.spacing(1)
+  arrowContainer: {
+    alignItems: 'center',
+    display: 'flex',
+    justifyContent: 'space-between'
   },
   body: {
-    width: '100%',
-    height: '100%',
     display: 'flex',
+    gap: theme.spacing(1),
+    height: '100%',
     justifyContent: 'space-between',
-    gap: theme.spacing(1)
+    width: '100%'
   },
-  content: {
-    width: '100%',
+  container: {
+    alignItems: 'center',
     display: 'flex',
     flexDirection: 'column',
-    gap: theme.spacing(0.5)
-  },
-  page: {
-    fontWeight: theme.typography.fontWeightMedium
+    gap: theme.spacing(2),
+    height: theme.spacing(22),
+    justifyContent: 'space-between',
+    padding: theme.spacing(1),
+    width: theme.spacing(30)
   },
-  arrowContainer: {
+  content: {
     display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center'
+    flexDirection: 'column',
+    gap: theme.spacing(0.5),
+    width: '100%'
   },
   icon: {
     color: theme.palette.text.primary
   },
-  arrow: {
-    fontSize: theme.spacing(2)
-  },
   item: {
     color: 'inherit',
     textDecoration: 'none'
   },
   link: {
     '&:hover': {
-      cursor: 'pointer',
-      color: theme.palette.primary.main
+      color: theme.palette.primary.main,
+      cursor: 'pointer'
     }
+  },
+  notFound: {
+    height: theme.spacing(10),
+    padding: theme.spacing(1),
+    width: theme.spacing(30)
+  },
+  page: {
+    fontWeight: theme.typography.fontWeightMedium
   }
 }));