@centreon/ui 26.3.4 → 26.3.6

package/src/components/ItemComposition/ItemComposition.tsx

@@ -1,13 +1,11 @@
-import { ReactElement } from 'react';
-
-import { gt } from 'ramda';
-
 import AddIcon from '@mui/icons-material/Add';
 import LinkIcon from '@mui/icons-material/Link';
 import { Typography } from '@mui/material';
 
-import { Button } from '..';
+import { gt } from 'ramda';
+import type { ReactElement } from 'react';
 
+import { Button } from '..';
 import { useItemCompositionStyles } from './ItemComposition.styles';
 
 export type Props = {
@@ -44,7 +42,7 @@ export const ItemComposition = ({
       <div className={classes.itemCompositionItemsAndLink}>
         <div className={classes.itemCompositionItems}>{children}</div>
         {displayItemsAsLinked && hasMoreThanOneChildren && (
-          <div data-linked className={classes.linkedItems}>
+          <div className={classes.linkedItems} data-linked>
             <LinkIcon className={classes.linkIcon} viewBox="0 0 24 24" />
           </div>
         )}
@@ -59,9 +57,9 @@ export const ItemComposition = ({
             disabled={addbuttonDisabled}
             icon={IconAdd || <AddIcon />}
             iconVariant="start"
+            onClick={onAddItem}
             size="small"
             variant="ghost"
-            onClick={onAddItem}
           >
             {labelAdd}
           </Button>

package/src/components/Layout/AreaIndicator.tsx

@@ -1,4 +1,5 @@
-import { ReactElement, ReactNode } from 'react';
+/** biome-ignore-all lint/a11y/noLabelWithoutControl: need it */
+import type { ReactElement, ReactNode } from 'react';
 
 type AreaIndicatorProps = {
   children?: ReactNode | Array<ReactNode>;
@@ -21,7 +22,6 @@ const AreaIndicator = ({
       data-depth={depth}
       style={{ height, width }}
     >
-      {/* biome-ignore lint/a11y: */}
       <label className="left-2 rounded-sm border border-[#9747FF7F] border-dashed text-[#9747FF] text-[0.75rem] font-medium left-2 top-1.5 px-2 py-0.5">
         {name}
       </label>

package/src/components/Layout/PageLayout/PageLayout.stories.tsx

@@ -1,8 +1,7 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { Default as DefaultPageHeaderStory } from '../../Header/PageHeader/PageHeader.stories';
 import { AreaIndicator } from '../AreaIndicator';
-
 import { PageLayout } from './index';
 import '../../../ThemeProvider/tailwindcss.css';
 

package/src/components/Layout/PageLayout/PageLayout.styles.ts

@@ -4,8 +4,8 @@ export const useStyles = makeStyles()((theme) => ({
   pageLayout: {
     display: 'grid',
     gridTemplateRows: 'auto 1fr',
-    overflow: 'hidden',
-    height: '100%'
+    height: '100%',
+    overflow: 'hidden'
   },
   pageLayoutActions: {
     '& > span': {
@@ -20,12 +20,12 @@ export const useStyles = makeStyles()((theme) => ({
     paddingBottom: theme.spacing(1.5)
   },
   pageLayoutBody: {
-    '&[data-has-background="true"]': {
-      backgroundColor: theme.palette.layout.body.background
-    },
     '&[data-has-actions="true"]': {
       gridTemplateRows: 'min-content auto'
     },
+    '&[data-has-background="true"]': {
+      backgroundColor: theme.palette.layout.body.background
+    },
     display: 'grid',
     gridTemplateRows: 'auto',
     overflow: 'hidden',

package/src/components/Layout/PageLayout/PageLayout.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 
 import { useStyles } from './PageLayout.styles';
 

package/src/components/Layout/PageLayout/PageLayoutActions.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 
 import { useStyles } from './PageLayout.styles';
 

package/src/components/Layout/PageLayout/PageLayoutBody.tsx

@@ -1,4 +1,5 @@
-import { ReactElement, ReactNode } from 'react';
+import { type } from 'ramda';
+import type { ReactElement, ReactNode } from 'react';
 
 import { useStyles } from './PageLayout.styles';
 
@@ -18,8 +19,8 @@ export const PageLayoutBody = ({
   return (
     <section
       className={cx(classes.pageLayoutBody, className)}
+      data-has-actions={type(children) === 'Array'}
       data-has-background={hasBackground}
-      data-has-actions={!!children?.length}
       id="page-body"
     >
       {children}

package/src/components/Layout/PageLayout/PageLayoutHeader.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 import { useStyles } from './PageLayout.styles';
 

package/src/components/Layout/PageLayout/PageQuickAccess.tsx

@@ -1,8 +1,8 @@
-import { useTranslation } from 'react-i18next';
-
 import AddIcon from '@mui/icons-material/Add';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 
+import { useTranslation } from 'react-i18next';
+
 import { Button, Menu } from '../..';
 
 interface NamedEntity {
@@ -40,10 +40,10 @@ export const PageQuickAccess = ({
       <Menu.Items>
         {elements?.map((element) => (
           <Menu.Item
-            key={`${element.id}`}
-            onClick={navigateToElement(element.id)}
             isActive={isActive(element.id)}
             isDisabled={isDisabled?.(element.id)}
+            key={`${element.id}`}
+            onClick={navigateToElement(element.id)}
           >
             {element.name}
           </Menu.Item>
@@ -53,8 +53,8 @@ export const PageQuickAccess = ({
           <Button
             icon={<ArrowBackIcon />}
             iconVariant="start"
-            variant="ghost"
             onClick={goBack}
+            variant="ghost"
           >
             {t(labels.goBack)}
           </Button>
@@ -62,8 +62,8 @@ export const PageQuickAccess = ({
             <Button
               icon={<AddIcon />}
               iconVariant="start"
-              variant="secondary"
               onClick={create}
+              variant="secondary"
             >
               {t(labels.create)}
             </Button>

package/src/components/Layout/PageLayout.cypress.spec.tsx

@@ -1,10 +1,8 @@
 import { T } from 'ramda';
 
 import { PageHeader } from '..';
-
-import { AreaIndicator } from './AreaIndicator';
-
 import { PageLayout } from '.';
+import { AreaIndicator } from './AreaIndicator';
 
 const initialize = (): void => {
   cy.mount({

package/src/components/List/Item/Avatar.tsx

@@ -1,10 +1,10 @@
-import { ReactElement } from 'react';
-
 import {
   Avatar as MuiAvatar,
   ListItemAvatar as MuiListItemAvatar
 } from '@mui/material';
 
+import type { ReactElement } from 'react';
+
 import { useStyles } from './ListItem.styles';
 
 type AvatarProps = {

package/src/components/List/Item/AvatarSkeleton.tsx

@@ -1,7 +1,7 @@
-import { ReactElement } from 'react';
-
 import { Skeleton as MuiSkeleton } from '@mui/material';
 
+import type { ReactElement } from 'react';
+
 import { useStyles } from './ListItem.styles';
 
 export const AvatarSkeleton = (): ReactElement => {

package/src/components/List/Item/ListItem.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { ListItem } from '.';
 

package/src/components/List/Item/ListItem.tsx

@@ -1,6 +1,11 @@
-import { ForwardedRef, ReactElement, ReactNode, forwardRef } from 'react';
+import { type ListItemProps, ListItem as MuiListItem } from '@mui/material';
 
-import { ListItemProps, ListItem as MuiListItem } from '@mui/material';
+import {
+  type ForwardedRef,
+  forwardRef,
+  type ReactElement,
+  type ReactNode
+} from 'react';
 
 import { useStyles } from './ListItem.styles';
 
@@ -19,8 +24,8 @@ export const ListItem = forwardRef(
 
     return (
       <MuiListItem
-        disableGutters
         className={cx(classes.listItem, className)}
+        disableGutters
         ref={ref}
         secondaryAction={
           action && <div className={classes.secondary}>{action}</div>

package/src/components/List/Item/Text.tsx

@@ -1,7 +1,7 @@
-import { ReactElement, ReactNode } from 'react';
-
 import { ListItemText as MuiListItemText } from '@mui/material';
 
+import type { ReactElement, ReactNode } from 'react';
+
 import { useStyles } from './ListItem.styles';
 
 type TextProps = {

package/src/components/List/Item/TextSkeleton.tsx

@@ -1,7 +1,7 @@
-import { ReactElement } from 'react';
-
 import { Skeleton as MuiSkeleton } from '@mui/material';
 
+import type { ReactElement } from 'react';
+
 import { useStyles } from './ListItem.styles';
 
 type TextSkeletonProps = {

package/src/components/List/List.stories.tsx

@@ -1,8 +1,8 @@
-import { Meta, StoryObj } from '@storybook/react';
-
 import DeleteIcon from '@mui/icons-material/Delete';
 import { Box } from '@mui/material';
 
+import type { Meta, StoryObj } from '@storybook/react';
+
 import { List } from '.';
 
 const meta: Meta<typeof List> = {
@@ -15,8 +15,8 @@ type Story = StoryObj<typeof List>;
 const sampleData = Array(50)
   .fill(0)
   .map((_, index) => ({
-    index,
     icon: <DeleteIcon />,
+    index,
     primary: 'Primary text',
     secondary: 'Secondary text'
   }));

package/src/components/List/List.tsx

@@ -1,7 +1,7 @@
-import { ReactElement, ReactNode } from 'react';
-
 import { List as MuiList } from '@mui/material';
 
+import type { ReactElement, ReactNode } from 'react';
+
 import { useStyles } from './List.styles';
 
 interface Props {
@@ -12,7 +12,7 @@ export const List = ({ children }: Props): ReactElement => {
   const { classes } = useStyles();
 
   return (
-    <MuiList dense className={classes.list}>
+    <MuiList className={classes.list} dense>
       {children}
     </MuiList>
   );

package/src/components/Menu/Button/MenuButton.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { MenuButton } from './MenuButton';
 

package/src/components/Menu/Button/MenuButton.tsx

@@ -1,13 +1,13 @@
-import { ReactElement, ReactNode, useCallback } from 'react';
-
 import {
   ArrowDropDown as ArrowDropDownIcon,
   Menu as MenuIcon
 } from '@mui/icons-material';
 
-import { AriaLabelingAttributes } from '../../../@types/aria-attributes';
-import { DataTestAttributes } from '../../../@types/data-attributes';
-import { Button, ButtonProps } from '../../Button';
+import { type ReactElement, type ReactNode, useCallback } from 'react';
+
+import type { AriaLabelingAttributes } from '../../../@types/aria-attributes';
+import type { DataTestAttributes } from '../../../@types/data-attributes';
+import { Button, type ButtonProps } from '../../Button';
 import { useMenu } from '../useMenu';
 
 type MenuButtonProps = {
@@ -41,7 +41,7 @@ const MenuButton = ({
       onClick?.({ isOpen: !isMenuOpen });
       if (!isMenuOpen) onOpen?.();
     },
-    [isMenuOpen, onClick, onOpen]
+    [isMenuOpen, onClick, onOpen, setAnchorEl, setIsMenuOpen]
   );
 
   return (
@@ -50,9 +50,9 @@ const MenuButton = ({
       aria-label={ariaLabel}
       className={`${isMenuOpen ? 'bg-primary-main/8 text-text-primary-main' : 'text-text-secondary'} ${className}`}
       data-is-active={isMenuOpen}
+      onClick={onToggle}
       size={size}
       variant={variant}
-      onClick={onToggle}
     >
       {children || <MenuIcon />}
       {hasArrow && (

package/src/components/Menu/Menu.stories.tsx

@@ -1,9 +1,8 @@
-import { Meta, StoryObj } from '@storybook/react';
-
 import { Add as AddIcon } from '@mui/icons-material';
 
-import { Button } from '../Button';
+import type { Meta, StoryObj } from '@storybook/react';
 
+import { Button } from '../Button';
 import { Menu } from '.';
 
 const meta: Meta<typeof Menu> = {

package/src/components/Menu/Menu.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 
 import { MenuProvider } from './useMenu';
 

package/src/components/Menu/MenuDivider.tsx

@@ -1,7 +1,7 @@
-import { ReactElement } from 'react';
-
 import { Divider as MuiDivider } from '@mui/material';
 
+import type { ReactElement } from 'react';
+
 const MenuDivider = (): ReactElement => {
   return <MuiDivider />;
 };

package/src/components/Menu/MenuItem.tsx

@@ -1,7 +1,7 @@
-import { ReactElement, ReactNode } from 'react';
-
 import { MenuItem as MuiMenuItem } from '@mui/material';
 
+import type { ReactElement, ReactNode } from 'react';
+
 type MenuItemProps = {
   children?: ReactNode;
   className?: string;
@@ -23,8 +23,8 @@ const MenuItem = ({
       data-is-active={isActive}
       data-is-disabled={isDisabled}
       disabled={isDisabled}
-      selected={isActive}
       onClick={() => onClick?.()}
+      selected={isActive}
     >
       {children}
     </MuiMenuItem>

package/src/components/Menu/MenuItems.tsx

@@ -1,7 +1,7 @@
-import { ReactElement, ReactNode } from 'react';
-
 import { Menu as MuiMenu } from '@mui/material';
 
+import type { ReactElement, ReactNode } from 'react';
+
 import { useMenu } from './useMenu';
 
 type MenuItemsProps = {
@@ -19,15 +19,15 @@ const MenuItems = ({ children, className }: MenuItemsProps): ReactElement => {
   return (
     <MuiMenu
       anchorEl={anchorEl}
-      className={className}
       classes={{
         paper:
           'rounded-sm shadow-lg min-w-[240px] bg-background-paper border-1 border-divider'
       }}
-      open={isMenuOpen}
-      variant="menu"
+      className={className}
       onClick={onCloseMenu}
       onClose={onCloseMenu}
+      open={isMenuOpen}
+      variant="menu"
     >
       {children}
     </MuiMenu>

package/src/components/Menu/useMenu.tsx

@@ -1,14 +1,13 @@
-import { ReactElement, ReactNode, useRef } from 'react';
-
 import {
-  Provider,
   atom,
   createStore,
+  Provider,
   useAtom,
   useAtomValue,
   useStore
 } from 'jotai';
 import { useHydrateAtoms } from 'jotai/utils';
+import { type ReactElement, type ReactNode, useRef } from 'react';
 
 /** state */
 

package/src/components/Modal/ConfirmationModal/ConfirmationModal.cypress.spec.tsx

@@ -1,8 +1,11 @@
-import { Provider, atom, createStore, useSetAtom } from 'jotai';
-
 import { Button } from '@mui/material';
 
-import { ConfirmationModal, ConfirmationModalProps } from './ConfirmationModal';
+import { atom, createStore, Provider, useSetAtom } from 'jotai';
+
+import {
+  ConfirmationModal,
+  type ConfirmationModalProps
+} from './ConfirmationModal';
 
 const testAtom = atom<string | null>(null);
 

package/src/components/Modal/ConfirmationModal/ConfirmationModal.stories.tsx

@@ -1,8 +1,7 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Provider, atom, createStore, useSetAtom } from 'jotai';
+import type { Meta, StoryObj } from '@storybook/react';
+import { atom, createStore, Provider, useSetAtom } from 'jotai';
 
 import { Button } from '../../Button';
-
 import { ConfirmationModal } from './ConfirmationModal';
 import '../../../ThemeProvider/tailwindcss.css';
 

package/src/components/Modal/ConfirmationModal/ConfirmationModal.tsx

@@ -1,7 +1,6 @@
-import { useMemo } from 'react';
-
-import { PrimitiveAtom, useAtom } from 'jotai';
+import { type PrimitiveAtom, useAtom } from 'jotai';
 import { equals, pick, type } from 'ramda';
+import { useMemo } from 'react';
 
 import { Modal } from '..';
 
@@ -72,8 +71,8 @@ export const ConfirmationModal = <TAtom,>({
   return (
     <Modal
       hasCloseButton={hasCloseButton}
-      open={Boolean(atomData)}
       onClose={closeModal}
+      open={Boolean(atomData)}
       size={size}
     >
       <Modal.Header>{formattedLabels.title}</Modal.Header>

package/src/components/Modal/Modal.stories.tsx

@@ -1,9 +1,9 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from '../Button';
-
 import { Modal } from '.';
 import '../../ThemeProvider/tailwindcss.css';
+
 import { basicFormWithCollapsibleGroups } from '../../Form/Form.stories';
 
 const meta: Meta<typeof Modal> = {

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

@@ -12,12 +12,12 @@ const useStyles = makeStyles<{
       padding: theme.spacing(2.5)
     },
     '&[data-size="fullscreen"]': {
-      zIndex: 0,
       margin: 0,
+      marginBottom: props?.bottom ?? 0,
       marginLeft: props?.left ?? 0,
       marginRight: props?.right ?? 0,
       marginTop: props?.top ?? 0,
-      marginBottom: props?.bottom ?? 0
+      zIndex: 0
     },
     '&[data-size="fullscreen"] .MuiBackdrop-root': {
       display: 'none'

package/src/components/Modal/Modal.tsx

@@ -1,13 +1,12 @@
-import React, { ReactElement } from 'react';
-
-import { equals } from 'ramda';
-
 import { Close as CloseIcon } from '@mui/icons-material';
 import { Dialog as MuiDialog, Slide } from '@mui/material';
 
-import { AriaLabelingAttributes } from '../../@types/aria-attributes';
-import { IconButton } from '../Button';
+import { equals } from 'ramda';
+import type React from 'react';
+import type { ReactElement } from 'react';
 
+import type { AriaLabelingAttributes } from '../../@types/aria-attributes';
+import { IconButton } from '../Button';
 import { useStyles } from './Modal.styles';
 
 export type ModalProps = {
@@ -50,14 +49,14 @@ const Modal = ({
 
   return (
     <MuiDialog
+      className={`${classes.modal} gap-6`}
+      data-size={size}
+      onClose={onClose}
+      open={open}
       TransitionComponent={isFullscreen ? Slide : undefined}
       TransitionProps={{
         direction: 'up'
       }}
-      className={`${classes.modal} gap-6`}
-      data-size={size}
-      open={open}
-      onClose={onClose}
       {...attr}
     >
       {hasCloseButton && (
@@ -65,9 +64,9 @@ const Modal = ({
           <IconButton
             aria-label="close"
             icon={<CloseIcon />}
+            onClick={(e) => onClose?.(e, 'closeButton')}
             size="small"
             variant="ghost"
-            onClick={(e) => onClose?.(e, 'closeButton')}
           />
         </div>
       )}

package/src/components/Modal/ModalActions.tsx

@@ -1,7 +1,7 @@
-import React, { ReactElement } from 'react';
+import type React from 'react';
+import type { ReactElement } from 'react';
 
 import { Button } from '../Button';
-
 import { useStyles } from './Modal.styles';
 
 export type ModalActionsProps = {
@@ -37,9 +37,9 @@ const ModalActions = ({
           <Button
             aria-label={labels?.cancel}
             data-testid="cancel"
+            onClick={() => onCancel?.()}
             size="small"
             variant="secondary"
-            onClick={() => onCancel?.()}
           >
             {labels?.cancel}
           </Button>
@@ -48,10 +48,10 @@ const ModalActions = ({
             data-testid="confirm"
             disabled={disabled}
             isDanger={isDanger}
+            onClick={() => onConfirm?.()}
             size="small"
             type="submit"
             variant="primary"
-            onClick={() => onConfirm?.()}
           >
             {labels?.confirm}
           </Button>

package/src/components/Modal/ModalBody.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 
 import { modalBody } from './modal.module.css';
 

package/src/components/Modal/ModalHeader.tsx

@@ -1,6 +1,9 @@
-import { ReactElement, ReactNode } from 'react';
+import {
+  type DialogTitleProps,
+  DialogTitle as MuiDialogTitle
+} from '@mui/material';
 
-import { DialogTitleProps, DialogTitle as MuiDialogTitle } from '@mui/material';
+import type { ReactElement, ReactNode } from 'react';
 
 import '../../../src/ThemeProvider/tailwindcss.css';
 

package/src/components/Tabs/Tabs.cypress.spec.tsx

@@ -1,8 +1,7 @@
 import { Typography } from '@mui/material';
 
-import { TabPanel } from './TabPanel';
-
 import { Tabs } from '.';
+import { TabPanel } from './TabPanel';
 
 const initialize = (withTabListProps = false): void => {
   cy.mount({

package/src/components/Tabs/Tabs.stories.tsx

@@ -1,10 +1,9 @@
-import { Meta, StoryObj } from '@storybook/react';
-
 import { Typography } from '@mui/material';
 
-import { TabPanel } from './TabPanel';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { Tabs } from '.';
+import { TabPanel } from './TabPanel';
 
 const meta: Meta<typeof Tabs> = {
   component: Tabs