@centreon/ui 26.3.4 → 26.3.6

package/src/Pagination/Pagination.tsx

@@ -1,19 +1,20 @@
+import ArrowBackIcon from '@mui/icons-material/ArrowBackIosNew';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForwardIos';
 import { CircularProgress, Link, Typography } from '@mui/material';
+
 import { equals, isEmpty, isNil } from 'ramda';
 import { useMemo, useState } from 'react';
-
-import ArrowBackIcon from '@mui/icons-material/ArrowBackIosNew';
-import ArrowForwardIcon from '@mui/icons-material/ArrowForwardIos';
 import { useTranslation } from 'react-i18next';
+
+import buildListingEndpoint from '../api/buildListingEndpoint';
+import type { Listing } from '../api/models';
+import useFetchQuery from '../api/useFetchQuery';
 import IconButton from '../Button/Icon';
 import {
   labelNextPage,
   labelNoResultFound,
   labelPreviousPage
 } from '../Listing/translatedLabels';
-import buildListingEndpoint from '../api/buildListingEndpoint';
-import { Listing } from '../api/models';
-import useFetchQuery from '../api/useFetchQuery';
 import { truncate } from '../utils';
 import { useStyles } from './Pagination.styles';
 
@@ -46,8 +47,8 @@ const Pagination = ({
         baseEndpoint: baseEndpoint,
         parameters: {
           ...parameters,
-          page,
           limit,
+          page,
           ...(searchConditions
             ? {
                 search: {
@@ -86,10 +87,10 @@ const Pagination = ({
         {arePaginationComponentsDisplayed && (
           <div className={classes.arrowContainer}>
             <IconButton
-              onClick={() => setPage(page - 1)}
-              disabled={equals(page, 1)}
-              dataTestid={labelPreviousPage}
               className={classes.icon}
+              dataTestid={labelPreviousPage}
+              disabled={equals(page, 1)}
+              onClick={() => setPage(page - 1)}
             >
               <ArrowBackIcon className={classes.arrow} />
             </IconButton>
@@ -102,13 +103,13 @@ const Pagination = ({
           ) : (
             data?.result.map(({ id, name }) => (
               <Link
-                key={id}
-                variant="body2"
                 className={cx({
                   [classes.item]: true,
                   [classes.link]: !!onItemClick
                 })}
+                key={id}
                 onClick={() => onItemClick?.({ id })}
+                variant="body2"
               >
                 {truncate({
                   content: name,
@@ -122,10 +123,10 @@ const Pagination = ({
         {arePaginationComponentsDisplayed && (
           <div className={classes.arrowContainer}>
             <IconButton
-              onClick={() => setPage(page + 1)}
-              disabled={equals(pagesCount, page)}
               className={classes.icon}
               dataTestid={labelNextPage}
+              disabled={equals(pagesCount, page)}
+              onClick={() => setPage(page + 1)}
             >
               <ArrowForwardIcon className={classes.arrow} />
             </IconButton>

package/src/Panel/Memoized.tsx

@@ -3,8 +3,7 @@
 import { forwardRef } from 'react';
 
 import { useMemoComponent } from '../utils';
-
-import Panel, { Props } from '.';
+import Panel, { type Props } from '.';
 
 interface MemoizedPanelProps extends Props {
   memoProps?: Array<unknown>;

package/src/Panel/Section/ExpandableSection.tsx

@@ -1,16 +1,16 @@
-import { makeStyles } from 'tss-react/mui';
-
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import {
   Accordion,
   AccordionDetails,
-  AccordionProps,
+  type AccordionProps,
   AccordionSummary,
-  AccordionSummaryProps,
-  Typography,
-  styled
+  type AccordionSummaryProps,
+  styled,
+  Typography
 } from '@mui/material';
 
+import { makeStyles } from 'tss-react/mui';
+
 const useStyles = makeStyles()((theme) => ({
   details: {
     backgroundColor: theme.palette.background.paper,
@@ -24,7 +24,7 @@ const Title = styled(Typography)(({ theme }) => ({
 }));
 
 const Section = styled((props: AccordionProps) => (
-  <Accordion disableGutters square elevation={0} {...props} />
+  <Accordion disableGutters elevation={0} square {...props} />
 ))(({ theme }) => ({
   '&:before': {
     display: 'none'

package/src/Panel/Section/index.stories.tsx

@@ -1,7 +1,7 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-
 import { Typography } from '@mui/material';
 
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
 import SectionPanel from '.';
 
 export default {
@@ -33,9 +33,9 @@ const PanelWithHeader = ({
       header={<Typography>Header</Typography>}
       loading={loading}
       mainPanelWidth={mainPanelWidth}
+      onClose={(): undefined => undefined}
       secondaryPanel={secondaryPanel}
       sections={sections}
-      onClose={(): undefined => undefined}
     />
   </div>
 );

package/src/Panel/Section/index.test.tsx

@@ -1,54 +1,54 @@
-import { fireEvent, render } from '../../../test/testRenderer';
+import { fireEvent, render } from "../../../test/testRenderer";
 
-import SectionPanel from '.';
+import SectionPanel from ".";
 
 describe(SectionPanel, () => {
-  it('displays given Header and sections', async () => {
-    const header = <>Header</>;
-    const sections = [
-      {
-        expandable: false,
-        id: 'non-expandable',
-        section: <>Non Expandable Section</>
-      },
-      {
-        expandable: true,
-        id: 'expandable',
-        section: <>Expandable Section</>,
-        title: 'Expand me'
-      }
-    ];
-    const { getByText } = render(
-      <SectionPanel header={header} sections={sections} onClose={jest.fn()} />
-    );
-
-    expect(getByText('Header')).toBeInTheDocument();
-    expect(getByText('Non Expandable Section')).toBeInTheDocument();
-    expect(getByText('Expand me')).toBeInTheDocument();
-    expect(getByText('Expandable Section')).toBeInTheDocument();
-  });
-
-  it('displays secondary Panel when secondary Panel bar is clicked', () => {
-    const secondaryPanel = <>Secondary Panel</>;
-
-    const { baseElement, getByText, queryByText } = render(
-      <SectionPanel
-        header={<>Header</>}
-        secondaryPanel={secondaryPanel}
-        sections={[]}
-        onClose={jest.fn()}
-      />
-    );
-
-    expect(queryByText('Secondary Panel')).toBeNull();
-
-    const svgs = baseElement.querySelectorAll('svg');
-
-    // The first SVG corresponds to the close icon.
-    const secondSvg = svgs[1];
-
-    fireEvent.click(secondSvg);
-
-    expect(getByText('Secondary Panel')).toBeInTheDocument();
-  });
+	it("displays given Header and sections", async () => {
+		const header = <>Header</>;
+		const sections = [
+			{
+				expandable: false,
+				id: "non-expandable",
+				section: <>Non Expandable Section</>,
+			},
+			{
+				expandable: true,
+				id: "expandable",
+				section: <>Expandable Section</>,
+				title: "Expand me",
+			},
+		];
+		const { getByText } = render(
+			<SectionPanel header={header} sections={sections} onClose={jest.fn()} />,
+		);
+
+		expect(getByText("Header")).toBeInTheDocument();
+		expect(getByText("Non Expandable Section")).toBeInTheDocument();
+		expect(getByText("Expand me")).toBeInTheDocument();
+		expect(getByText("Expandable Section")).toBeInTheDocument();
+	});
+
+	it("displays secondary Panel when secondary Panel bar is clicked", () => {
+		const secondaryPanel = <>Secondary Panel</>;
+
+		const { baseElement, getByText, queryByText } = render(
+			<SectionPanel
+				header={<>Header</>}
+				secondaryPanel={secondaryPanel}
+				sections={[]}
+				onClose={jest.fn()}
+			/>,
+		);
+
+		expect(queryByText("Secondary Panel")).toBeNull();
+
+		const svgs = baseElement.querySelectorAll("svg");
+
+		// The first SVG corresponds to the close icon.
+		const secondSvg = svgs[1];
+
+		fireEvent.click(secondSvg);
+
+		expect(getByText("Secondary Panel")).toBeInTheDocument();
+	});
 });

package/src/Panel/Section/index.tsx

@@ -1,13 +1,12 @@
-import { isNil } from 'ramda';
-import { makeStyles } from 'tss-react/mui';
-
 import ForwardIcon from '@mui/icons-material/ArrowForwardIos';
 import { List, ListItem, Paper, Slide } from '@mui/material';
 
-import Panel from '..';
+import { isNil } from 'ramda';
+import { makeStyles } from 'tss-react/mui';
+
 import ContentWithCircularLoading from '../../ContentWithCircularProgress';
 import { useMemoComponent } from '../../utils';
-
+import Panel from '..';
 import ExpandableSection from './ExpandableSection';
 
 const panelWidth = 550;
@@ -125,6 +124,8 @@ const SectionPanel = ({
   return (
     <Panel
       header={header}
+      onClose={onClose}
+      onResize={onResize}
       selectedTab={
         <ContentWithCircularLoading alignCenter loading={loading}>
           <div className={classes.container}>
@@ -142,10 +143,10 @@ const SectionPanel = ({
 
             {hasSecondaryPanel && (
               <Paper
-                square
                 aria-label="Close Secondary Panel"
                 className={classes.closeSecondaryPanelBar}
                 onClick={onSecondaryPanelClose}
+                square
               >
                 <ForwardIcon className={classes.closeIcon} color="primary" />
               </Paper>
@@ -162,8 +163,6 @@ const SectionPanel = ({
         </ContentWithCircularLoading>
       }
       width={getWidth()}
-      onClose={onClose}
-      onResize={onResize}
     />
   );
 };

package/src/Panel/Tab.tsx

@@ -1,6 +1,6 @@
-import { makeStyles } from 'tss-react/mui';
+import { Tab as MuiTab, type TabProps } from '@mui/material';
 
-import { Tab as MuiTab, TabProps } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
 
 const minTabHeight = 40;
 

package/src/Panel/index.stories.tsx

@@ -1,7 +1,7 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-
 import { Typography } from '@mui/material';
 
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
 import Panel from '.';
 
 export default {

package/src/Panel/index.tsx

@@ -1,18 +1,18 @@
-import { isEmpty, isNil } from 'ramda';
-import { makeStyles } from 'tss-react/mui';
-
+/** biome-ignore-all lint/a11y/noStaticElementInteractions: need it */
 import IconClose from '@mui/icons-material/Clear';
 import { AppBar, Divider, Paper, Slide, Tabs } from '@mui/material';
 
-import { IconButton } from '..';
-
+import { isEmpty, isNil } from 'ramda';
 import {
-  ReactElement,
-  RefObject,
   forwardRef,
+  type ReactElement,
+  type RefObject,
   useCallback,
   useEffect
 } from 'react';
+import { makeStyles } from 'tss-react/mui';
+
+import { IconButton } from '..';
 import { minTabHeight } from './Tab';
 
 interface StylesProps extends Pick<Props, 'headerBackgroundColor' | 'width'> {
@@ -141,7 +141,7 @@ const Panel = forwardRef(
       return (): void => {
         window.removeEventListener('resize', resizeWindow);
       };
-    }, []);
+    }, [resizeWindow]);
 
     const resize = (): void => {
       document.addEventListener('mouseup', releaseMouse, true);
@@ -153,31 +153,34 @@ const Panel = forwardRef(
       document.removeEventListener('mousemove', moveMouse, true);
     };
 
-    const moveMouse = useCallback((e) => {
-      e.preventDefault();
+    const moveMouse = useCallback(
+      (e) => {
+        e.preventDefault();
 
-      const maxWidth = getMaxWidth();
-      const newWidth = document.body.clientWidth - e.clientX;
+        const maxWidth = getMaxWidth();
+        const newWidth = document.body.clientWidth - e.clientX;
 
-      const getResizedWidth = (): number => {
-        if (newWidth <= minWidth) {
-          return minWidth;
-        }
+        const getResizedWidth = (): number => {
+          if (newWidth <= minWidth) {
+            return minWidth;
+          }
 
-        if (newWidth > maxWidth) {
-          return maxWidth;
-        }
+          if (newWidth > maxWidth) {
+            return maxWidth;
+          }
 
-        return newWidth;
-      };
+          return newWidth;
+        };
 
-      onResize?.(getResizedWidth());
-    }, []);
+        onResize?.(getResizedWidth());
+      },
+      [getMaxWidth, minWidth, onResize]
+    );
 
     return (
       <Slide
-        in
         direction="left"
+        in
         timeout={{
           enter: 150,
           exit: 50
@@ -194,9 +197,9 @@ const Panel = forwardRef(
                 {onClose && (
                   <IconButton
                     ariaLabel={labelClose}
+                    onClick={onClose}
                     size="large"
                     title={labelClose}
-                    onClick={onClose}
                   >
                     <IconClose color="action" />
                   </IconButton>
@@ -215,10 +218,10 @@ const Panel = forwardRef(
                 <Tabs
                   className={classes.tabs}
                   indicatorColor="primary"
+                  onChange={onTabSelect}
                   textColor="primary"
                   value={selectedTabId}
                   variant="fullWidth"
-                  onChange={onTabSelect}
                 >
                   {tabs.map((tab) => tab)}
                 </Tabs>

package/src/ParentSize/ParentSize.tsx

@@ -1,6 +1,5 @@
-import { ReactElement } from 'react';
-
 import { Responsive } from '@visx/visx';
+import type { ReactElement } from 'react';
 
 type ParentSizeState = {
   height: number;

package/src/PopoverMenu/index.tsx

@@ -1,7 +1,3 @@
-import { type Dispatch, type SetStateAction, useEffect, useState } from 'react';
-
-import { makeStyles } from 'tss-react/mui';
-
 import {
   ClickAwayListener,
   Paper,
@@ -11,6 +7,9 @@ import {
 import type { PopperProps } from '@mui/material/Popper';
 
 import { equals, type } from 'ramda';
+import { type Dispatch, type SetStateAction, useEffect, useState } from 'react';
+import { makeStyles } from 'tss-react/mui';
+
 import { IconButton } from '..';
 
 const useStyles = makeStyles()((theme) => ({
@@ -86,11 +85,11 @@ const PopoverMenu = ({
     if (!canOpen && isOpen) {
       close();
     }
-  }, [canOpen]);
+  }, [canOpen, close, isOpen]);
 
   useEffect(() => {
     getPopoverData?.({ anchorEl, setAnchorEl });
-  }, [anchorEl]);
+  }, [anchorEl, getPopoverData]);
 
   return (
     <>
@@ -98,22 +97,22 @@ const PopoverMenu = ({
         ariaLabel={title}
         className={cx(classes.popoverIconButton, className)}
         data-testid={dataTestId}
+        onClick={toggle}
         size="large"
         title={title}
-        onClick={toggle}
       >
         {icon}
       </IconButton>
       {isOpen && (
         <ClickAwayListener onClickAway={close}>
           <Popper
-            open
             anchorEl={anchorEl}
             className={classes.popover}
             nonce={undefined}
-            placement={popperPlacement}
             onResize={(): undefined => undefined}
             onResizeCapture={(): undefined => undefined}
+            open
+            placement={popperPlacement}
             {...popperProps}
           >
             <Paper className={tooltipClassName}>

package/src/Responsive/index.stories.tsx

@@ -1,7 +1,7 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-
 import { Typography } from '@mui/material';
 
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
 import Responsive from '.';
 
 export default {

package/src/Responsive/index.tsx

@@ -1,7 +1,13 @@
-import { ReactNode, useEffect, useRef, useState } from 'react';
-
 import { Box } from '@mui/material';
 
+import {
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from 'react';
+
 interface Props {
   children: ReactNode;
   margin?: number;
@@ -13,9 +19,9 @@ const Responsive = ({ children, margin = 0 }: Props): JSX.Element => {
   const [windowHeight, setWindowHeight] = useState(window.innerHeight);
   const [clientRect, setClientRect] = useState<DOMRect | null>(null);
 
-  const resize = (): void => {
+  const resize = useCallback((): void => {
     setWindowHeight(window.innerHeight);
-  };
+  }, []);
 
   useEffect(() => {
     window.addEventListener('resize', resize);
@@ -25,7 +31,7 @@ const Responsive = ({ children, margin = 0 }: Props): JSX.Element => {
     return () => {
       window.removeEventListener('resize', resize);
     };
-  }, []);
+  }, [resize]);
 
   const containerHeight = windowHeight - (clientRect?.top || 0) - margin;
 

package/src/RichTextEditor/ContentEditable.tsx

@@ -1,12 +1,13 @@
-import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
+/** biome-ignore-all lint/a11y/noStaticElementInteractions: need it */
+/** biome-ignore-all lint/a11y/useAriaPropsSupportedByRole: nedd it */
+import { Typography } from '@mui/material';
 
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { isEmpty, isNil } from 'ramda';
+import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 
-import { Typography } from '@mui/material';
-
 interface StyleProps {
   editable: boolean;
   error?: string;
@@ -108,7 +109,7 @@ const ContentEditable = ({
 
       editor.setEditorState(newEditorState);
     }
-  }, [editor, editorState]);
+  }, [editor, editorState, editable]);
 
   useEffect(() => {
     editor.registerTextContentListener((currentRoot) => {
@@ -120,7 +121,7 @@ const ContentEditable = ({
     }
 
     setRoot(' ');
-  }, [editor]);
+  }, [editor, hasInitialTextContent]);
 
   useEffect(() => {
     const shouldResetEditorToInitialState =
@@ -135,7 +136,12 @@ const ContentEditable = ({
     );
 
     editor.setEditorState(newEditorState);
-  }, [editorState]);
+  }, [
+    editor.parseEditorState,
+    editor.setEditorState,
+    initialEditorState,
+    resetEditorToInitialStateCondition
+  ]);
 
   const isTextEmpty =
     isEmpty(root) &&
@@ -154,11 +160,11 @@ const ContentEditable = ({
     }
 
     editor.setEditable(!disabled);
-  }, [disabled]);
+  }, [disabled, editor.setEditable]);
 
   useEffect(() => {
     initialize?.(editor);
-  }, []);
+  }, [editor, initialize]);
 
   return (
     <div
@@ -184,9 +190,9 @@ const ContentEditable = ({
         )}
         contentEditable={isEditable}
         data-testid={namespace}
-        ref={ref}
         onBlur={handleBlur}
         onFocus={(): void => setFocused(true)}
+        ref={ref}
       />
     </div>
   );

package/src/RichTextEditor/RichTextEditor.cypress.spec.tsx

@@ -1,5 +1,5 @@
-import RichTextEditor from './RichTextEditor';
 import { standardMacros } from './plugins/ToolbarPlugin/MacrosButton';
+import RichTextEditor from './RichTextEditor';
 import { labelAlignPicker } from './translatedLabels';
 
 interface CheckElementStyleOnRichTextEditorProps {

package/src/RichTextEditor/RichTextEditor.tsx

@@ -1,3 +1,5 @@
+import { Typography } from '@mui/material';
+
 import { $generateHtmlFromNodes } from '@lexical/html';
 import { AutoLinkNode, LinkNode } from '@lexical/link';
 import { ListItemNode, ListNode } from '@lexical/list';
@@ -10,12 +12,10 @@ import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
 import { HeadingNode } from '@lexical/rich-text';
 import anylogger from 'anylogger';
-import { EditorState, LexicalEditor } from 'lexical';
+import type { EditorState, LexicalEditor } from 'lexical';
 import { equals } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
-import { Typography } from '@mui/material';
-
 import ContentEditable from './ContentEditable';
 import AutoCompleteLinkPlugin from './plugins/AutoLinkPlugin/index';
 import FloatingLinkEditorPlugin from './plugins/FloatingLinkEditorPlugin';
@@ -198,7 +198,6 @@ const RichTextEditor = ({
         </div>
         <div>
           <RichTextPlugin
-            ErrorBoundary={LexicalErrorBoundary}
             contentEditable={
               <ContentEditable
                 className={contentClassName || ''}
@@ -212,14 +211,15 @@ const RichTextEditor = ({
                 inputClassname={inputClassname}
                 minInputHeight={minInputHeight}
                 namespace={namespace}
+                onBlur={onBlur}
                 placeholder={placeholder}
                 resetEditorToInitialStateCondition={
                   resetEditorToInitialStateCondition
                 }
                 setHtmlString={setHtmlString}
-                onBlur={onBlur}
               />
             }
+            ErrorBoundary={LexicalErrorBoundary}
             placeholder={null}
           />
           <HistoryPlugin />