@centreon/ui 25.10.22 → 25.10.23

package/package.json

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

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

@@ -11,10 +11,11 @@ interface NamedEntity {
 }
 
 type Props = {
-  create: () => void;
+  create?: () => void;
   elements: Array<NamedEntity>;
   goBack: () => void;
   isActive: (id: number | string) => boolean;
+  isDisabled?: (id: number | string) => boolean;
   labels: {
     create: string;
     goBack: string;
@@ -25,6 +26,7 @@ type Props = {
 export const PageQuickAccess = ({
   elements,
   isActive,
+  isDisabled,
   navigateToElement,
   goBack,
   create,
@@ -40,25 +42,23 @@ export const PageQuickAccess = ({
           <Menu.Item
             key={`${element.id}`}
             onClick={navigateToElement(element.id)}
-            {...(isActive(element.id) && {
-              isActive: true,
-              isDisabled: true
-            })}
+            isActive={isActive(element.id)}
+            isDisabled={isDisabled?.(element.id)}
           >
             {element.name}
           </Menu.Item>
         ))}
         <Menu.Divider key="divider" />
-        <Menu.Item key="create">
-          <>
-            <Button
-              icon={<ArrowBackIcon />}
-              iconVariant="start"
-              variant="ghost"
-              onClick={goBack}
-            >
-              {t(labels.goBack)}
-            </Button>
+        <div className="px-2 pb-2 flex gap-4">
+          <Button
+            icon={<ArrowBackIcon />}
+            iconVariant="start"
+            variant="ghost"
+            onClick={goBack}
+          >
+            {t(labels.goBack)}
+          </Button>
+          {create && (
             <Button
               icon={<AddIcon />}
               iconVariant="start"
@@ -67,8 +67,8 @@ export const PageQuickAccess = ({
             >
               {t(labels.create)}
             </Button>
-          </>
-        </Menu.Item>
+          )}
+        </div>
       </Menu.Items>
     </Menu>
   );

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

@@ -33,8 +33,6 @@ const MenuButton = ({
   className,
   ...attr
 }: MenuButtonProps): ReactElement => {
-  const { cx, classes } = useStyles();
-
   const { isMenuOpen, setIsMenuOpen, setAnchorEl, onOpen } = useMenu();
 
   const onToggle = useCallback(
@@ -52,14 +50,18 @@ const MenuButton = ({
     <Button
       {...attr}
       aria-label={ariaLabel}
-      className={cx(classes.menuButton, className)}
+      className={`${isMenuOpen ? 'bg-primary-main/8 text-text-primary-main' : 'text-text-secondary'} ${className}`}
       data-is-active={isMenuOpen}
       size={size}
       variant={variant}
       onClick={onToggle}
     >
       {children || <MenuIcon />}
-      {hasArrow && <ArrowDropDownIcon className={classes.buttonIcon} />}
+      {hasArrow && (
+        <ArrowDropDownIcon
+          className={`transform-gpu transition-[rotate] ${isMenuOpen ? 'rotate-180' : 'rotate-0'}`}
+        />
+      )}
     </Button>
   );
 };

package/src/components/Menu/MenuDivider.tsx

@@ -2,12 +2,8 @@ import { ReactElement } from 'react';
 
 import { Divider as MuiDivider } from '@mui/material';
 
-import { useStyles } from './Menu.styles';
-
 const MenuDivider = (): ReactElement => {
-  const { classes } = useStyles();
-
-  return <MuiDivider className={classes.menuDivider} />;
+  return <MuiDivider />;
 };
 
 export { MenuDivider };

package/src/components/Menu/MenuItem.tsx

@@ -2,8 +2,6 @@ import { ReactElement, ReactNode } from 'react';
 
 import { MenuItem as MuiMenuItem } from '@mui/material';
 
-import { useStyles } from './Menu.styles';
-
 type MenuItemProps = {
   children?: ReactNode;
   className?: string;
@@ -19,11 +17,9 @@ const MenuItem = ({
   isDisabled = false,
   className
 }: MenuItemProps): ReactElement => {
-  const { cx, classes } = useStyles();
-
   return (
     <MuiMenuItem
-      className={cx(classes.menuItem, className)}
+      className={className}
       data-is-active={isActive}
       data-is-disabled={isDisabled}
       disabled={isDisabled}

package/src/components/Menu/MenuItems.tsx

@@ -2,7 +2,6 @@ import { ReactElement, ReactNode } from 'react';
 
 import { Menu as MuiMenu } from '@mui/material';
 
-import { useStyles } from './Menu.styles';
 import { useMenu } from './useMenu';
 
 type MenuItemsProps = {
@@ -10,8 +9,6 @@ type MenuItemsProps = {
   className?: string;
 };
 const MenuItems = ({ children, className }: MenuItemsProps): ReactElement => {
-  const { cx, classes } = useStyles();
-
   const { isMenuOpen, setIsMenuOpen, anchorEl, onClose } = useMenu();
 
   const onCloseMenu = (): void => {
@@ -22,7 +19,11 @@ const MenuItems = ({ children, className }: MenuItemsProps): ReactElement => {
   return (
     <MuiMenu
       anchorEl={anchorEl}
-      className={cx(classes.menuItems, className)}
+      className={className}
+      classes={{
+        paper:
+          'rounded-sm shadow-lg min-w-[240px] bg-background-paper border-1 border-divider'
+      }}
       open={isMenuOpen}
       variant="menu"
       onClick={onCloseMenu}

package/src/components/Menu/Button/MenuButton.styles.ts

@@ -1,27 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()((theme) => ({
-  buttonIcon: {
-    '[data-is-active="true"] &': {
-      transform: 'rotate(180deg)'
-    },
-
-    fontSize: '1.25rem',
-    transition: 'transform 0.15s ease-in-out'
-  },
-  menuButton: {
-    '&:hover:not(&[data-is-active="true"])': {
-      backgroundColor: theme.palette.menu.button.background.hover,
-      color: theme.palette.menu.button.color.hover
-    },
-    '&[data-is-active="true"]': {
-      backgroundColor: theme.palette.menu.button.background.active,
-      color: theme.palette.menu.button.color.active
-    },
-    backgroundColor: theme.palette.menu.button.background.default,
-    color: theme.palette.menu.button.color.default,
-    display: 'flex',
-    height: 'unset',
-    minWidth: 'unset'
-  }
-}));

package/src/components/Menu/Menu.styles.ts

@@ -1,68 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()((theme) => ({
-  menuDivider: {
-    '&, &.MuiDivider-root': {
-      borderColor: theme.palette.menu.divider.border
-    }
-  },
-  menuItem: {
-    '&, &.MuiMenuItem-root': {
-      '& > button': {
-        fontSize: '1rem',
-        justifyContent: 'flex-start'
-      },
-
-      '&:has(button)': {
-        '& > .MuiTouchRipple-root': {
-          display: 'none'
-        },
-        '&:hover:not(&[data-is-active="true"])': {
-          backgroundColor: 'unset'
-        },
-        padding: theme.spacing(0, 2)
-      },
-
-      '&:not(:has(button))': {
-        '&:hover:not(&[data-is-active="true"])': {
-          backgroundColor: theme.palette.menu.item.background.hover,
-          color: theme.palette.menu.item.color.hover
-        },
-        '&[data-is-active="true"], &.Mui-selected': {
-          '&[data-is-disabled="true"], &.Mui-disabled': {
-            opacity: 1
-          },
-          backgroundColor: theme.palette.menu.item.background.active,
-          color: theme.palette.menu.item.color.active,
-          opacity: 1
-        },
-        '&[data-is-disabled="true"], &.Mui-disabled': {
-          opacity: 0.5
-        },
-        backgroundColor: theme.palette.menu.item.background.default,
-        color: theme.palette.menu.item.color.default,
-        padding: theme.spacing(0.75, 2)
-      },
-
-      alignItems: 'center',
-      display: 'flex',
-      flexDirection: 'row',
-      fontSize: '1rem',
-      gap: theme.spacing(2),
-      justifyContent: 'space-between',
-      minHeight: 'unset'
-    }
-  },
-  menuItems: {
-    '& > .MuiPaper-root.MuiMenu-paper': {
-      backgroundColor: theme.palette.menu.background,
-      borderRadius: '4px',
-      boxShadow: theme.shadows[8],
-      minWidth: '240px',
-      transform: `translateY(${theme.spacing(0.5)}) !important`
-    },
-    '& ul, & ul.MuiMenu-list': {
-      padding: theme.spacing(1, 0)
-    }
-  }
-}));