@centreon/ui 26.3.4 → 26.3.6

package/src/components/Tabs/Tabs.tsx

@@ -1,7 +1,7 @@
-import { useCallback, useState } from 'react';
-
 import { TabContext } from '@mui/lab';
-import { Tabs as MuiTabs, Tab, TabsProps } from '@mui/material';
+import { Tabs as MuiTabs, Tab, type TabsProps } from '@mui/material';
+
+import { useCallback, useState } from 'react';
 
 import { useTabsStyles } from './Tab.styles';
 
@@ -18,7 +18,7 @@ type Props = {
   tabList?: TabsProps;
   variant?: 'standard' | 'scrollable' | 'fullWidth';
   scrollButtons?: boolean | 'auto';
-  tabs: TabI[];
+  tabs: Array<TabI>;
   onChange?: (newValue: string) => void;
 };
 
@@ -50,24 +50,24 @@ export const Tabs = ({
   return (
     <TabContext value={selectedTab}>
       <MuiTabs
-        scrollButtons={scrollButtons}
-        variant={variant}
         classes={{
           indicator: classes.indicator,
           root: classes.tabs
         }}
         onChange={changeTab}
+        scrollButtons={scrollButtons}
         value={selectedTab}
+        variant={variant}
         {...tabList}
       >
         {tabs.map(({ value, label }) => (
           <Tab
             aria-label={label}
             className={`${classes.tab} ${selectedTab === value ? selectedTabStyle : defaultTabStyle}`}
+            data-testid={`tab-${value}`}
             key={value}
             label={label}
             value={value}
-            data-testid={`tab-${value}`}
           />
         ))}
       </MuiTabs>

package/src/components/Tooltip/ConfirmationTooltip/ConfirmationTooltip.stories.tsx

@@ -1,9 +1,8 @@
-import { Meta, StoryObj } from '@storybook/react';
-
 import { Delete as DeleteIcon, Save as SaveIcon } from '@mui/icons-material';
 
-import { IconButton } from '../..';
+import type { Meta, StoryObj } from '@storybook/react';
 
+import { IconButton } from '../..';
 import { ConfirmationTooltip } from './ConfirmationTooltip';
 
 const meta: Meta<typeof ConfirmationTooltip> = {

package/src/components/Tooltip/ConfirmationTooltip/ConfirmationTooltip.styles.tsx

@@ -1,8 +1,8 @@
+import { ThemeMode } from '@centreon/ui-context';
+
 import { equals } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
-import { ThemeMode } from '@centreon/ui-context';
-
 export const useStyles = makeStyles()((theme) => ({
   list: {
     padding: 0

package/src/components/Tooltip/ConfirmationTooltip/ConfirmationTooltip.tsx

@@ -1,10 +1,10 @@
-import { MouseEvent, useState } from 'react';
-
 import { Box, ClickAwayListener, Popper } from '@mui/material';
 
+import { type MouseEvent, useState } from 'react';
+
 import { useStyles } from './ConfirmationTooltip.styles';
+import type { Props } from './models';
 import TooltipContent from './TooltipContent';
-import { Props } from './models';
 
 export const ConfirmationTooltip = ({
   children,

package/src/components/Tooltip/ConfirmationTooltip/TooltipContent.tsx

@@ -1,6 +1,5 @@
 import { ActionsList } from '../../..';
-import { ActionVariants } from '../../../ActionsList/models';
-
+import type { ActionVariants } from '../../../ActionsList/models';
 import { useStyles } from './ConfirmationTooltip.styles';
 
 interface Props {

package/src/components/Tooltip/ConfirmationTooltip/models.ts

@@ -1,6 +1,6 @@
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';
 
-import { ActionVariants } from '../../../ActionsList/models';
+import type { ActionVariants } from '../../../ActionsList/models';
 
 interface Labels {
   cancel: string;

package/src/components/Tooltip/TextOverflowTooltip/TextOverflowTooltip.stories.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-import { useEffect, useState } from 'react';
 
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { useEffect, useState } from 'react';
 
 import { TextOverflowTooltip } from './TextOverflowTooltip';
 
@@ -55,10 +55,10 @@ export const AsMultiLine: Story = {
       <TextOverflowTooltip {...args} label={labelValue}>
         <p
           style={{
-            WebkitBoxOrient: 'vertical',
-            WebkitLineClamp: '2',
             display: '-webkit-box',
             overflow: 'hidden',
+            WebkitBoxOrient: 'vertical',
+            WebkitLineClamp: '2',
             width: '40vw'
           }}
         >

package/src/components/Tooltip/TextOverflowTooltip/TextOverflowTooltip.tsx

@@ -1,10 +1,9 @@
-import { ReactElement, useCallback, useEffect, useRef } from 'react';
-
+/** biome-ignore-all lint/a11y/noStaticElementInteractions: need it */
 import { atom, useAtom } from 'jotai';
+import { type ReactElement, useCallback, useEffect, useRef } from 'react';
 
 import { useResizeObserver } from '../../../utils/useResizeObserver';
-import { Tooltip, TooltipProps } from '../Tooltip';
-
+import { Tooltip, type TooltipProps } from '../Tooltip';
 import { useStyles } from './TextOverflowTooltip.styles';
 
 type TextOverflowTooltipProps = Omit<TooltipProps, 'followCursor' | 'hasCaret'>;
@@ -54,7 +53,7 @@ const TextOverflowTooltip = ({
         ...state,
         isOpen: true
       }),
-    [state.hasOverflow]
+    [state.hasOverflow, setState, state]
   );
 
   const onMouseLeave = useCallback(
@@ -64,7 +63,7 @@ const TextOverflowTooltip = ({
         ...state,
         isOpen: false
       }),
-    [state.hasOverflow]
+    [state.hasOverflow, setState, state]
   );
 
   const elRef = useRef<HTMLDivElement>(null);
@@ -102,9 +101,9 @@ const TextOverflowTooltip = ({
       <div
         className={classes.textOverflowTooltip}
         data-has-overflow={state.hasOverflow}
-        ref={elRef}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
+        ref={elRef}
       >
         {children}
       </div>

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -1,7 +1,7 @@
-import { Meta, StoryObj } from '@storybook/react';
-
 import { Info as InfoIcon } from '@mui/icons-material';
 
+import type { Meta, StoryObj } from '@storybook/react';
+
 import { Tooltip } from './Tooltip';
 
 const meta: Meta<typeof Tooltip> = {

package/src/components/Tooltip/Tooltip.tsx

@@ -1,12 +1,12 @@
-import { ReactElement, ReactNode } from 'react';
-
 import {
   Tooltip as MuiTooltip,
-  TooltipProps as MuiTooltipProps
+  type TooltipProps as MuiTooltipProps
 } from '@mui/material';
 
-import { AriaLabelingAttributes } from '../../@types/aria-attributes';
-import { DataTestAttributes } from '../../@types/data-attributes';
+import type { ReactElement, ReactNode } from 'react';
+
+import type { AriaLabelingAttributes } from '../../@types/aria-attributes';
+import type { DataTestAttributes } from '../../@types/data-attributes';
 
 export type TooltipProps = {
   children: ReactElement;

package/src/components/Tooltip/index.ts

@@ -1,2 +1,2 @@
-export * from './Tooltip';
 export * from './ConfirmationTooltip';
+export * from './Tooltip';

package/src/components/Zoom/Minimap.tsx

@@ -1,10 +1,10 @@
-import { useMemo } from 'react';
-
+/** biome-ignore-all lint/a11y/noStaticElementInteractions: need it */
 import { scaleLinear } from '@visx/scale';
+import { useMemo } from 'react';
 
-import { useZoomStyles } from './Zoom.styles';
 import { minimapScale, radius } from './constants';
-import { UseMinimapProps, useMinimap } from './useMinimap';
+import { type UseMinimapProps, useMinimap } from './useMinimap';
+import { useZoomStyles } from './Zoom.styles';
 
 interface Props extends Omit<UseMinimapProps, 'minimapScale' | 'scale'> {
   children: JSX.Element;
@@ -34,11 +34,11 @@ const Minimap = ({
 
   const yMinimapScale = useMemo(
     () => contentClientRect.height / zoom.transformMatrix.scaleY / height,
-    [contentClientRect.height, height]
+    [contentClientRect.height, height, zoom.transformMatrix.scaleY]
   );
   const xMinimapScale = useMemo(
     () => contentClientRect.width / zoom.transformMatrix.scaleX / width,
-    [contentClientRect.width, width]
+    [contentClientRect.width, width, zoom.transformMatrix.scaleX]
   );
 
   const scale = Math.max(yMinimapScale, xMinimapScale);
@@ -73,14 +73,14 @@ const Minimap = ({
       -diffBetweenContentAndSvg.left /
       zoom.transformMatrix.scaleX /
       minimapScale,
-    [diffBetweenContentAndSvg.left]
+    [diffBetweenContentAndSvg.left, zoom.transformMatrix.scaleX]
   );
   const translateY = useMemo(
     () =>
       -diffBetweenContentAndSvg.top /
       zoom.transformMatrix.scaleX /
       minimapScale,
-    [diffBetweenContentAndSvg.top]
+    [diffBetweenContentAndSvg.top, zoom.transformMatrix.scaleX]
   );
 
   return (
@@ -113,14 +113,14 @@ const Minimap = ({
         data-testid="minimap-interaction"
         fill="transparent"
         height={finalHeight}
-        rx={radius}
-        width={finalWidth}
         onMouseDown={dragStart}
         onMouseEnter={dragStart}
         onMouseLeave={dragEnd}
         onMouseMove={move}
         onMouseUp={dragEnd}
         onWheel={zoomInOut}
+        rx={radius}
+        width={finalWidth}
       />
     </g>
   );

package/src/components/Zoom/Zoom.stories.tsx

@@ -1,6 +1,6 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
-import Zoom, { ZoomProps } from './Zoom';
+import Zoom, { type ZoomProps } from './Zoom';
 
 const meta: Meta<typeof Zoom> = {
   argTypes: {
@@ -99,6 +99,10 @@ export const WithMinimapPosition: Story = {
 };
 
 export const Playground: Story = {
+  args: {
+    children: Content,
+    showMinimap: true
+  },
   argTypes: {
     redCircleXPosition: {
       control: { max: 2600, min: 400, step: 10, type: 'range' }
@@ -107,9 +111,5 @@ export const Playground: Story = {
       control: { max: 2600, min: 400, step: 10, type: 'range' }
     }
   },
-  args: {
-    children: Content,
-    showMinimap: true
-  },
   render: TemplateResponsive
 };

package/src/components/Zoom/Zoom.styles.tsx

@@ -1,7 +1,7 @@
-import { makeStyles } from 'tss-react/mui';
-
 import { alpha } from '@mui/system';
 
+import { makeStyles } from 'tss-react/mui';
+
 import { minimapScale } from './constants';
 
 export const useZoomStyles = makeStyles()((theme) => ({

package/src/components/Zoom/Zoom.tsx

@@ -1,11 +1,10 @@
 import { Zoom as VisxZoom } from '@visx/zoom';
-import { TransformMatrix } from '@visx/zoom/lib/types';
-import { type MutableRefObject } from 'react';
+import type { TransformMatrix } from '@visx/zoom/lib/types';
+import type { MutableRefObject } from 'react';
 
 import { ParentSize } from '../..';
-
-import ZoomContent from './ZoomContent';
 import type { MinimapPosition, ZoomChildren } from './models';
+import ZoomContent from './ZoomContent';
 
 export interface ZoomProps extends ZoomChildren {
   id?: number | string;
@@ -51,10 +50,10 @@ const Zoom = ({
               height={height}
               id={id}
               minimapPosition={minimapPosition}
+              ref={contentRef}
               showMinimap={showMinimap}
               width={width}
               zoom={zoom}
-              ref={contentRef}
             >
               {children}
             </ZoomContent>

package/src/components/Zoom/ZoomContent.tsx

@@ -1,30 +1,28 @@
+import ZoomInIcon from '@mui/icons-material/Add';
+import ZoomOutIcon from '@mui/icons-material/Remove';
+import ReplayIcon from '@mui/icons-material/Replay';
+
+import { RectClipPath } from '@visx/clip-path';
 import {
   type ForwardedRef,
-  MutableRefObject,
   forwardRef,
+  type MutableRefObject,
   useEffect,
   useRef,
   useState
 } from 'react';
 
-import { RectClipPath } from '@visx/clip-path';
-
-import ZoomInIcon from '@mui/icons-material/Add';
-import ZoomOutIcon from '@mui/icons-material/Remove';
-import ReplayIcon from '@mui/icons-material/Replay';
-
 import { IconButton } from '../Button';
-
-import Minimap from './Minimap';
-import { useZoomStyles } from './Zoom.styles';
 import { minimapScale, radius } from './constants';
-import {
-  type Dimension,
-  type MinimapPosition,
+import Minimap from './Minimap';
+import type {
+  Dimension,
+  MinimapPosition,
   ZoomChildren,
-  type ZoomInterface
+  ZoomInterface
 } from './models';
 import { useZoom } from './useZoom';
+import { useZoomStyles } from './Zoom.styles';
 
 export interface Props extends Dimension, ZoomInterface, ZoomChildren {
   id?: number | string;
@@ -67,7 +65,7 @@ const ZoomContent = forwardRef(
       return () => {
         resizeObserver.disconnect();
       };
-    }, [contentRef.current]);
+    }, [contentRef.current, resizeObserver.disconnect, resizeObserver.observe]);
 
     const { move, dragEnd, dragStart, isDragging } = useZoom();
 
@@ -88,13 +86,13 @@ const ZoomContent = forwardRef(
           data-is-grabbing={isDragging}
           data-testid="zoom-container"
           height={height}
-          width={width}
           onMouseDown={dragStart(zoom)}
           onMouseEnter={dragStart(zoom)}
           onMouseLeave={dragEnd}
           onMouseMove={move(zoom)}
           onMouseUp={dragEnd}
           onWheel={zoom.handleWheel}
+          width={width}
         >
           <RectClipPath
             height={Math.max(contentClientRect?.height || 0, height)}
@@ -152,20 +150,20 @@ const ZoomContent = forwardRef(
             <IconButton
               data-testid="zoom in"
               icon={<ZoomInIcon />}
-              size="small"
               onClick={() => zoom.scale({ scaleX: 1.2, scaleY: 1.2 })}
+              size="small"
             />
             <IconButton
               data-testid="zoom out"
               icon={<ZoomOutIcon />}
-              size="small"
               onClick={() => zoom.scale({ scaleX: 0.8, scaleY: 0.8 })}
+              size="small"
             />
             <IconButton
               data-testid="clear"
               icon={<ReplayIcon />}
-              size="small"
               onClick={zoom.reset}
+              size="small"
             />
           </div>
         </div>

package/src/components/Zoom/localPoint.ts

@@ -1,11 +1,10 @@
+import type { Point } from '@visx/point';
 import type {
   FocusEvent as ReactFocusEvent,
   MouseEvent as ReactMouseEvent,
   TouchEvent as ReactTouchEvent
 } from 'react';
 
-import { Point } from '@visx/point';
-
 type EventType =
   | MouseEvent
   | TouchEvent

package/src/components/Zoom/models.ts

@@ -1,4 +1,4 @@
-import { ProvidedZoom, TransformMatrix } from '@visx/zoom/lib/types';
+import type { ProvidedZoom, TransformMatrix } from '@visx/zoom/lib/types';
 
 export interface ZoomState {
   transformMatrix: TransformMatrix;

package/src/components/Zoom/useMinimap.ts

@@ -1,10 +1,9 @@
-import { useCallback, useState } from 'react';
-
-import { Point } from '@visx/point';
-import { ProvidedZoom, Translate } from '@visx/zoom/lib/types';
+import type { Point } from '@visx/point';
+import type { ProvidedZoom, Translate } from '@visx/zoom/lib/types';
 import { equals, gt, pick } from 'ramda';
+import { useCallback, useState } from 'react';
 
-import { ZoomState } from './models';
+import type { ZoomState } from './models';
 
 export interface UseMinimapProps {
   height: number;
@@ -73,7 +72,7 @@ export const useMinimap = ({
         translateY: y
       });
     },
-    [zoom.transformMatrix, scale]
+    [zoom.transformMatrix, getMatrixPoint, zoom.setTransformMatrix]
   );
 
   const dragStart = (e: MouseEvent): void => {
@@ -106,7 +105,13 @@ export const useMinimap = ({
       });
     },
 
-    [zoom.transformMatrix, isDraggingFromContainer, scale, startPoint]
+    [
+      zoom.transformMatrix,
+      startPoint,
+      getMatrixPoint,
+      startTranslate,
+      zoom.setTransformMatrix
+    ]
   );
 
   const zoomInOut = useCallback(
@@ -133,14 +138,7 @@ export const useMinimap = ({
         translateY: zoom.transformMatrix.translateY + diffY / 4
       });
     },
-    [
-      zoom.transformMatrix,
-      width,
-      height,
-      isDraggingFromContainer,
-      scale,
-      startPoint
-    ]
+    [zoom.transformMatrix, getMatrixPoint, zoom.setTransformMatrix]
   );
 
   return {

package/src/components/Zoom/useZoom.ts

@@ -1,10 +1,9 @@
-import { useCallback, useState } from 'react';
-
-import { Point, ProvidedZoom, Translate } from '@visx/zoom/lib/types';
+import type { Point, ProvidedZoom, Translate } from '@visx/zoom/lib/types';
 import { equals } from 'ramda';
+import { useCallback, useState } from 'react';
 
 import { localPoint } from './localPoint';
-import { ZoomState } from './models';
+import type { ZoomState } from './models';
 
 const isLeftMouseButtonClicked = (e: MouseEvent): boolean =>
   equals(e.buttons, 1);

package/src/components/Zoom/utils.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 
 interface Props {
   contentClientRect: {

package/src/components/index.ts

@@ -1,17 +1,17 @@
+export * from './Avatar';
 export * from './Button';
-export * from './Modal';
+export * from './CollapsibleItem';
+export { default as CopyCommand } from './CopyCommand/CopyCommand';
+export * from './DataTable';
 export * from './Form';
 export * from './Header';
-export * from './DataTable';
+export * from './Inputs';
+export * from './ItemComposition';
 export * from './Layout';
-export * from './Tooltip';
-export * from './Menu';
 export * from './List';
-export * from './ItemComposition';
-export * from './Avatar';
-export * from './CollapsibleItem';
-export * from './Inputs';
-export { default as Zoom } from './Zoom/Zoom';
-export type { ZoomState } from './Zoom/models';
+export * from './Menu';
+export * from './Modal';
 export * from './Tabs';
-export { default as CopyCommand } from './CopyCommand/CopyCommand';
+export * from './Tooltip';
+export type { ZoomState } from './Zoom/models';
+export { default as Zoom } from './Zoom/Zoom';