@centreon/ui 25.3.3 → 25.4.0-MON-191119-npm-develop.0

package/src/Listing/Cell/index.tsx

@@ -1,7 +1,6 @@
 import { useAtom } from 'jotai';
-import { append, equals, includes, isNil, omit, reject } from 'ramda';
+import { append, equals, includes, isNil, reject } from 'ramda';
 import { CSSObject } from 'tss-react';
-import { makeStyles } from 'tss-react/mui';
 
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import {
@@ -9,7 +8,8 @@ import {
   TableCellBaseProps,
   TableCellProps,
   Theme,
-  alpha
+  alpha,
+  useTheme
 } from '@mui/material';
 
 import { ListingVariant } from '@centreon/ui-context';
@@ -25,6 +25,13 @@ interface GetBackgroundColorProps extends Omit<Props, 'isRowHighlighted'> {
   theme: Theme;
 }
 
+interface GetRowHighlightStyleProps {
+  isRowHighlighted?: boolean;
+  theme: Theme;
+  disableRowCondition;
+  row;
+}
+
 const getBackgroundColor = ({
   isRowHovered,
   row,
@@ -51,73 +58,20 @@ const getBackgroundColor = ({
   return 'unset';
 };
 
-interface StylesProps extends Props {
-  isRowHighlighted?: boolean;
-  listingVariant?: ListingVariant;
-}
-
-interface GetRowHighlightStyleProps {
-  isRowHighlighted?: boolean;
-  theme: Theme;
-}
-
-const getRowHighlightStyle = ({
+const getRowTextColor = ({
   isRowHighlighted,
-  theme
-}: GetRowHighlightStyleProps): CSSObject | undefined =>
-  isRowHighlighted
-    ? {
-        color: theme.palette.text.primary
-      }
-    : undefined;
-
-const useStyles = makeStyles<StylesProps>()(
-  (
-    theme,
-    {
-      isRowHovered,
-      row,
-      rowColorConditions,
-      disableRowCondition,
-      isRowHighlighted,
-      listingVariant
-    }
-  ) => ({
-    caret: {
-      transition: theme.transitions.create('transform', {
-        duration: theme.transitions.duration.short
-      })
-    },
-    caretLess: {
-      transform: 'rotate3d(0,0,1,0deg)'
-    },
-    caretMore: {
-      transform: 'rotate3d(0,0,1,180deg)'
-    },
-    root: {
-      alignItems: 'center',
-      backgroundColor: getBackgroundColor({
-        disableRowCondition,
-        isRowHovered,
-        row,
-        rowColorConditions,
-        theme
-      }),
-      borderBottom: `1px solid ${theme.palette.divider}`,
-      display: 'flex',
-      'div:nth-of-type(n)': {
-        alignItems: 'center',
-        display: 'flex'
-      },
-      height: '100%',
-      overflow: 'hidden',
-      ...getTextStyleByViewMode({ listingVariant, theme }),
-      p: getRowHighlightStyle({ isRowHighlighted, theme }),
-      padding: theme.spacing(0, 1),
-      whiteSpace: 'nowrap'
-    }
-  })
-);
+  theme,
+  disableRowCondition,
+  row
+}: GetRowHighlightStyleProps): CSSObject | undefined => {
+  if (isRowHighlighted) {
+    return { color: theme.palette.text.primary };
+  }
+
+  if (disableRowCondition(row)) {
+    return { color: alpha(theme.palette.text.secondary, 0.5) };
+  }
+};
 
 interface Props
   extends Pick<
@@ -153,15 +107,22 @@ const Cell = ({
   subItemsRowProperty,
   labelCollapse,
   labelExpand,
+  disableRowCondition,
+  isRowHovered,
+  isRowHighlighted,
+  rowColorConditions,
+  listingVariant,
+  row,
+  style,
   ...props
 }: Props): JSX.Element => {
-  const { classes, cx } = useStyles(props);
+  const theme = useTheme();
 
   const [subItemsPivots, setSubItemsPivots] = useAtom(subItemsPivotsAtom);
 
   const { children } = props;
 
-  const rowId = props.row?.id;
+  const rowId = row?.id;
 
   const click = (e): void => {
     e.preventDefault();
@@ -174,39 +135,46 @@ const Cell = ({
 
   const isSubItemsExpanded = isPivotExistInTheList(rowId)(subItemsPivots);
 
-  const hasSubItems = subItemsRowProperty && props.row[subItemsRowProperty];
+  const hasSubItems = subItemsRowProperty && row[subItemsRowProperty];
 
   return (
     <TableCell
+      style={{
+        backgroundColor: getBackgroundColor({
+          disableRowCondition,
+          isRowHovered,
+          row,
+          rowColorConditions,
+          theme
+        }),
+        ...getTextStyleByViewMode({
+          listingVariant,
+          theme
+        }),
+        ...getRowTextColor({
+          isRowHighlighted,
+          disableRowCondition,
+          row,
+          theme
+        }),
+        ...style
+      }}
       classes={{
-        root: cx(classes.root)
+        root: 'flex items-center h-full overflow-hidden border-b-1 border-divider px-2 whitespace-nowrap py-0'
       }}
       component={'div' as unknown as ElementType<TableCellBaseProps>}
-      {...omit(
-        [
-          'isRowHovered',
-          'row',
-          'rowColorConditions',
-          'disableRowCondition',
-          'isRowHighlighted',
-          'listingVariant'
-        ],
-        props
-      )}
+      {...props}
     >
       {displaySubItemsCaret && hasSubItems && (
         <IconButton
           ariaLabel={`${isSubItemsExpanded ? labelCollapse : labelExpand} ${
-            props.row.id
+            row.id
           }`}
           size="small"
           onClick={click}
         >
           <ExpandMoreIcon
-            className={cx(
-              classes.caret,
-              isSubItemsExpanded ? classes.caretMore : classes.caretLess
-            )}
+            className={`transition-transform ${isSubItemsExpanded ? 'rotate-z-180' : 'rotate-z-0'} transform-gpu`}
             fontSize="small"
           />
         </IconButton>

package/src/Listing/Checkbox.tsx

@@ -1,30 +1,18 @@
-import { makeStyles } from 'tss-react/mui';
-
 import { CheckboxProps, Checkbox as MuiCheckbox } from '@mui/material';
 
-const useStyles = makeStyles()({
-  container: {
-    padding: 0
-  }
-});
-
 const Checkbox = ({
   className,
   ...props
 }: { className?: string } & Omit<
   CheckboxProps,
   'size' | 'color'
->): JSX.Element => {
-  const { classes, cx } = useStyles();
-
-  return (
-    <MuiCheckbox
-      className={cx(classes.container, className)}
-      color="primary"
-      size="small"
-      {...props}
-    />
-  );
-};
+>): JSX.Element => (
+  <MuiCheckbox
+    className={`p-0 ${className}`}
+    color="primary"
+    size="small"
+    {...props}
+  />
+);
 
 export default Checkbox;

package/src/Listing/Header/Cell/ListingHeaderCell.tsx

@@ -12,7 +12,8 @@ import { Column } from '../../models';
 import { DraggableIconButton } from '../_internals/DraggableIconButton';
 import HeaderLabel from '../_internals/Label';
 
-import { StylesProps, useStyles } from './ListingHeaderCell.styles';
+import useStyleTable from '../../useStyleTable';
+import { StylesProps } from './ListingHeaderCell.styles';
 
 type Props = Pick<
   ListingProps<unknown>,
@@ -39,11 +40,7 @@ const ListingHeaderCell = ({
   listingVariant,
   ...props
 }: Props): JSX.Element => {
-  const { classes, cx } = useStyles({
-    isDragging,
-    isInDragOverlay,
-    listingVariant
-  });
+  const { dataStyle } = useStyleTable({ listingVariant });
   const columnLabel = column.shortLabel || column.label;
 
   const columnSortField = column.sortField || column.id;
@@ -72,32 +69,38 @@ const ListingHeaderCell = ({
 
   return (
     <TableCell
-      className={classes.tableCell}
+      className={`bg-background-listing-header border-b-0 h-[inherit] py-0 px-2 ${isInDragOverlay && 'block opacity-70'}`}
       component={'div' as unknown as React.ElementType<TableCellBaseProps>}
-      data-isdragging={isDragging}
-      data-isindragoverlay={isInDragOverlay}
       ref={itemRef}
-      style={style}
+      style={{
+        ...style,
+        height: dataStyle.header.height
+      }}
     >
-      <div className={classes.content}>
+      <div className="flex items-center h-full justify-between text-white p-0">
         {column.sortable ? (
           <TableSortLabel
             active={sortField === columnSortField}
             aria-label={`Column ${column.label}`}
-            className={classes.active}
+            className="text-white"
+            classes={{
+              icon: 'text-white'
+            }}
             direction={sortOrder || 'desc'}
             onClick={sort}
           >
             {headerContent}
           </TableSortLabel>
         ) : (
-          <div className={classes.simpleHeaderCellContent}>{headerContent}</div>
+          <div className="mr-4 inline-flex items-center select-none">
+            {headerContent}
+          </div>
         )}
 
         {columnConfiguration?.sortable && areColumnsEditable && (
           <DraggableIconButton
             {...props}
-            className={cx(classes.dragHandle, 'dragHandle')}
+            className={`p-0 ${isDragging ? 'cursor-grabbing' : 'cursor-grab'} text-white  opacity-0 hover:opacity-100 focus:opacity-100`}
             columnLabel={columnLabel}
           />
         )}

package/src/Listing/Header/Cell/SelectActionListingHeaderCell.tsx

@@ -9,8 +9,6 @@ import { PredefinedRowSelection } from '../../models';
 import { labelPredefinedRowsSelectionMenu } from '../../translatedLabels';
 import PredefinedSelectionList from '../_internals/PredefinedSelectionList';
 
-import { useStyles } from './SelectActionListingHeaderCell.styles';
-
 export interface SelectActionListingHeaderCellProps {
   onSelectAllClick: (event) => void;
   onSelectRowsWithCondition: (condition) => void;
@@ -26,27 +24,25 @@ const SelectActionListingHeaderCell = ({
   predefinedRowsSelection,
   onSelectRowsWithCondition
 }: SelectActionListingHeaderCellProps): JSX.Element => {
-  const { classes } = useStyles();
-
   const hasRows = not(equals(rowCount, 0));
 
   return (
     <TableCell
-      className={classes.checkboxHeaderCell}
+      className="bg-background-listing-header h-full pt-0 pr-1 pb-0 pl-3 flex flex-row items-center leading=[inherit] justify-start border-b-0"
       component={'div' as unknown as React.ElementType<TableCellBaseProps>}
     >
       <Checkbox
         checked={hasRows && selectedRowCount === rowCount}
-        className={classes.checkbox}
+        className="text-white"
         indeterminate={
           hasRows && selectedRowCount > 0 && selectedRowCount < rowCount
         }
-        inputProps={{ 'aria-label': 'Select all' }}
+        slotProps={{ input: { 'aria-label': 'Select all' } }}
         onChange={onSelectAllClick}
       />
       {not(isEmpty(predefinedRowsSelection)) ? (
         <PopoverMenu
-          className={classes.predefinedRowsMenu}
+          className="text-white"
           icon={<ArrowDropDownIcon />}
           title={labelPredefinedRowsSelectionMenu}
         >
@@ -59,7 +55,7 @@ const SelectActionListingHeaderCell = ({
           )}
         </PopoverMenu>
       ) : (
-        <div className={classes.predefinedRowsMenu} />
+        <div className="text-white" />
       )}
     </TableCell>
   );

package/src/Listing/Header/ListingHeader.tsx

@@ -16,7 +16,6 @@ import {
   SelectActionListingHeaderCell,
   SelectActionListingHeaderCellProps
 } from './Cell/SelectActionListingHeaderCell';
-import { useStyles } from './ListingHeader.styles';
 
 type Props = Pick<
   ListingProps<unknown>,
@@ -62,8 +61,6 @@ const ListingHeader = ({
   predefinedRowsSelection,
   onSelectRowsWithCondition
 }: Props): JSX.Element => {
-  const { classes, cx } = useStyles();
-
   const visibleColumns = getVisibleColumns({
     columnConfiguration,
     columns
@@ -105,8 +102,8 @@ const ListingHeader = ({
   );
 
   return (
-    <TableHead className={cx(classes.row, 'listingHeader')} component="div">
-      <TableRow className={classes.row} component="div">
+    <TableHead className="contents" component="div">
+      <TableRow className="contents" component="div">
         {checkable && (
           <SelectActionListingHeaderCell
             predefinedRowsSelection={predefinedRowsSelection}

package/src/Listing/Header/_internals/Label.tsx

@@ -1,14 +1,6 @@
-import { makeStyles } from 'tss-react/mui';
-
 import { Typography, TypographyProps } from '@mui/material';
 import { ReactNode } from 'react';
 
-const useStyles = makeStyles()(() => ({
-  root: {
-    fontWeight: 'bold'
-  }
-}));
-
 interface Props {
   children: ReactNode;
 }
@@ -17,16 +9,8 @@ const HeaderLabel = ({
   children,
   className
 }: Props & Pick<TypographyProps, 'className'>): JSX.Element => {
-  const { classes } = useStyles();
-
   return (
-    <Typography
-      className={className}
-      classes={{
-        root: classes.root
-      }}
-      variant="body2"
-    >
+    <Typography className={`font-bold ${className}`} variant="body2">
       {children}
     </Typography>
   );

package/src/Listing/Row/EmptyRow.tsx

@@ -4,20 +4,16 @@ import { TableRow } from '@mui/material';
 
 import Cell from '../Cell';
 
-import { useStyles } from './EmptyRow.styles';
-
 interface EmptyRowProps {
   children: ReactNode;
 }
 
 const EmptyRow = ({ children }: EmptyRowProps): JSX.Element => {
-  const { classes } = useStyles();
-
   return (
-    <TableRow className={classes.emptyDataRow} component="div" tabIndex={-1}>
+    <TableRow className="contents" component="div" tabIndex={-1}>
       <Cell
         align="center"
-        className={classes.emptyDataCell}
+        className="col-span-full flex justify-center"
         disableRowCondition={(): boolean => false}
         isRowHovered={false}
       >

package/src/Listing/Row/Row.tsx

@@ -3,7 +3,6 @@
 import { memo, useEffect, useRef } from 'react';
 
 import { equals, gte, lt, not, pluck } from 'ramda';
-import { makeStyles } from 'tss-react/mui';
 
 import { TableRow, TableRowProps, useTheme } from '@mui/material';
 
@@ -14,27 +13,6 @@ import { useViewportIntersection } from '../../utils/useViewportIntersection';
 import { performanceRowsLimit } from '../index';
 import { Column, ColumnConfiguration, RowColorCondition } from '../models';
 
-const useStyles = makeStyles()((theme) => {
-  return {
-    intersectionRow: {
-      display: 'contents',
-      width: '100%'
-    },
-    row: {
-      cursor: 'pointer',
-      display: 'contents',
-      width: '100%'
-    },
-    skeleton: {
-      height: theme.spacing(2.5),
-      width: '100%'
-    },
-    skeletonContainer: {
-      padding: theme.spacing(0.5)
-    }
-  };
-});
-
 type Props = {
   checkable: boolean;
   children;
@@ -70,22 +48,20 @@ const Row = memo<RowProps>(
     checkable,
     limit
   }: RowProps): JSX.Element => {
-    const { classes } = useStyles();
-
     if (not(isInViewport) && gte(limit, performanceRowsLimit)) {
       return (
-        <div style={{ display: 'contents' }}>
+        <div className="contents">
           {checkable && (
-            <div className={classes.skeletonContainer}>
+            <div className="p-1">
               <div>
-                <LoadingSkeleton className={classes.skeleton} />
+                <LoadingSkeleton className="w-full" />
               </div>
             </div>
           )}
           {visibleColumns.map(({ id }) => (
-            <div className={classes.skeletonContainer} key={`loading_${id}`}>
+            <div className="p-1" key={`loading_${id}`}>
               <div>
-                <LoadingSkeleton className={classes.skeleton} />
+                <LoadingSkeleton className="w-full" />
               </div>
             </div>
           ))}
@@ -95,7 +71,7 @@ const Row = memo<RowProps>(
 
     return (
       <TableRow
-        className={classes.row}
+        className="cursor-pointer contents w-full"
         component="div"
         tabIndex={tabIndex}
         onClick={onClick}
@@ -203,7 +179,6 @@ const IntersectionRow = ({ isHovered, ...rest }: Props): JSX.Element => {
     root: rowRef.current?.parentElement?.parentElement?.parentElement,
     rootMargin: `${theme.spacing(20)} 0px ${theme.spacing(20)} 0px`
   });
-  const { classes } = useStyles();
 
   const getFirstCellElement = (): ChildNode | null | undefined =>
     rowRef.current?.firstChild?.firstChild?.firstChild;
@@ -213,11 +188,7 @@ const IntersectionRow = ({ isHovered, ...rest }: Props): JSX.Element => {
   }, [getFirstCellElement()]);
 
   return (
-    <div
-      className={classes.intersectionRow}
-      data-is-hovered={isHovered}
-      ref={rowRef}
-    >
+    <div className="contents w-full" data-is-hovered={isHovered} ref={rowRef}>
       <Row {...rest} isHovered={isHovered} isInViewport={isInViewport} />
     </div>
   );

package/src/Listing/index.stories.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable no-alert */
 /* eslint-disable react/prop-types */
+import '../ThemeProvider/tailwindcss.css';
 import { useState } from 'react';
 
 import { Meta, StoryObj } from '@storybook/react';

package/src/Listing/index.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable react/no-array-index-key */
-
 import { useAtomValue } from 'jotai';
 import {
   concat,
@@ -49,7 +47,6 @@ import DataCell from './Cell/DataCell';
 import Checkbox from './Checkbox';
 import { EmptyResult } from './EmptyResult/EmptyResult';
 import { ListingHeader } from './Header';
-import { useListingStyles } from './Listing.styles';
 import ListingRow from './Row/Row';
 import { SkeletonLoader } from './Row/SkeletonLoaderRows';
 import {
@@ -62,7 +59,7 @@ import {
 } from './models';
 import { subItemsPivotsAtom } from './tableAtoms';
 import { labelNoResultFound as defaultLabelNoResultFound } from './translatedLabels';
-import useStyleTable from './useStyleTable';
+import useStyleTable, { useColumnStyle } from './useStyleTable';
 
 const subItemPrefixKey = 'listing';
 
@@ -207,11 +204,13 @@ const Listing = <
     columnConfiguration,
     columns
   });
-  const { dataStyle, getGridTemplateColumn } = useStyleTable({
-    checkable,
-    currentVisibleColumns,
+  const { dataStyle } = useStyleTable({
     listingVariant
   });
+  const gridTemplateColumn = useColumnStyle({
+    checkable,
+    currentVisibleColumns
+  });
 
   const { t } = useTranslation();
 
@@ -288,14 +287,6 @@ const Listing = <
     },
     [allSubItemIds]
   );
-
-  const { classes } = useListingStyles({
-    dataStyle,
-    getGridTemplateColumn,
-    isResponsive,
-    rows: rowsToDisplay
-  });
-
   const { isShiftKeyDown } = useKeyObserver();
 
   const haveSameId = (row: TRow, rowToCompare: TRow): boolean =>
@@ -517,20 +508,20 @@ const Listing = <
   const areColumnsEditable = not(isNil(onSelectColumns));
 
   return (
-    <div className={classes.listingContainer}>
+    <div className="h-full w-full overflow-hidden">
       {loading && rows.length > 0 && (
-        <LinearProgress className={classes.loadingIndicator} />
+        <LinearProgress className="w-full h-[3px]" />
       )}
       {(!loading || (loading && rows.length < 1)) && (
-        <div className={classes.loadingIndicator} />
+        <div className="w-full h-[3px]" />
       )}
       <div
-        className={classes.container}
+        className="bg-[none] flex flex-col h-full w-full"
         ref={containerRef as RefObject<HTMLDivElement>}
       >
         {isActionBarVisible && (
           <div
-            className={classes.actionBar}
+            className="flex items-center"
             ref={actionBarRef as RefObject<HTMLDivElement>}
           >
             <ListingActionBar
@@ -564,7 +555,7 @@ const Listing = <
         >
           {({ height }) => (
             <Box
-              className={classes.tableWrapper}
+              className="border-b-[none] overflow-auto"
               component="div"
               style={{
                 height: innerScrollDisabled ? '100%' : `calc(${height}px - 4px)`
@@ -575,7 +566,13 @@ const Listing = <
               ) : (
                 <Table
                   stickyHeader
-                  className={classes.table}
+                  className="grid items-center relative"
+                  style={{
+                    gridTemplateColumns: gridTemplateColumn,
+                    gridTemplateRows: `${dataStyle.header.height}px repeat(${
+                      rowsToDisplay.length || 1
+                    }, ${isResponsive ? 'auto' : `${dataStyle.body.height}px`})`
+                  }}
                   component="div"
                   size="small"
                 >
@@ -598,7 +595,7 @@ const Listing = <
                   />
 
                   <TableBody
-                    className={classes.tableBody}
+                    className="contents relative"
                     component="div"
                     onMouseLeave={clearHoveredRow}
                   >
@@ -649,7 +646,7 @@ const Listing = <
                             (!isSubItem || subItems.canCheckSubItems ? (
                               <Cell
                                 align="left"
-                                className={classes.checkbox}
+                                className="justify-start"
                                 disableRowCondition={disableRowCondition}
                                 isRowHovered={isRowHovered}
                                 row={row}
@@ -662,9 +659,12 @@ const Listing = <
                                     disableRowCheckCondition(row) ||
                                     disableRowCondition(row)
                                   }
-                                  inputProps={{
-                                    'aria-label': `Select row ${getId(row)}`
+                                  slotProps={{
+                                    input: {
+                                      'aria-label': `Select row ${getId(row)}`
+                                    }
                                   }}
+                                  className="pl-1"
                                 />
                               </Cell>
                             ) : (