@centreon/ui 26.3.4 → 26.3.6

package/src/Listing/Cell/index.tsx

@@ -1,25 +1,24 @@
-import { useAtom } from 'jotai';
-import { append, equals, includes, isNil, reject } from 'ramda';
-import { CSSObject } from 'tss-react';
-
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import {
-  TableCell,
-  TableCellBaseProps,
-  TableCellProps,
-  Theme,
   alpha,
+  TableCell,
+  type TableCellBaseProps,
+  type TableCellProps,
+  type Theme,
   useTheme
 } from '@mui/material';
 
-import { ListingVariant } from '@centreon/ui-context';
+import type { ListingVariant } from '@centreon/ui-context';
+
+import { useAtom } from 'jotai';
+import { append, equals, includes, isNil, reject } from 'ramda';
+import type { ElementType } from 'react';
+import type { CSSObject } from 'tss-react';
 
 import { IconButton } from '../..';
 import { subItemsPivotsAtom } from '../tableAtoms';
 import { getTextStyleByViewMode } from '../useStyleTable';
-
-import { ElementType } from 'react';
-import { Props as DataCellProps } from './DataCell';
+import type { Props as DataCellProps } from './DataCell';
 
 interface GetBackgroundColorProps extends Omit<Props, 'isRowHighlighted'> {
   theme: Theme;
@@ -139,6 +138,10 @@ const Cell = ({
 
   return (
     <TableCell
+      classes={{
+        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>}
       style={{
         backgroundColor: getBackgroundColor({
           disableRowCondition,
@@ -152,17 +155,13 @@ const Cell = ({
           theme
         }),
         ...getRowTextColor({
-          isRowHighlighted,
           disableRowCondition,
+          isRowHighlighted,
           row,
           theme
         }),
         ...style
       }}
-      classes={{
-        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>}
       {...props}
     >
       {displaySubItemsCaret && hasSubItems && (
@@ -170,8 +169,8 @@ const Cell = ({
           ariaLabel={`${isSubItemsExpanded ? labelCollapse : labelExpand} ${
             row.id
           }`}
-          size="small"
           onClick={click}
+          size="small"
         >
           <ExpandMoreIcon
             className={`transition-transform ${isSubItemsExpanded ? 'rotate-z-180' : 'rotate-z-0'} transform-gpu`}

package/src/Listing/Checkbox.tsx

@@ -1,4 +1,4 @@
-import { CheckboxProps, Checkbox as MuiCheckbox } from '@mui/material';
+import { type CheckboxProps, Checkbox as MuiCheckbox } from '@mui/material';
 
 const Checkbox = ({
   className,

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

@@ -1,19 +1,18 @@
-import { always, and, equals, ifElse, isNil } from 'ramda';
-
 import {
   TableCell,
-  TableCellBaseProps,
+  type TableCellBaseProps,
   TableSortLabel,
   Tooltip
 } from '@mui/material';
 
-import { Props as ListingProps } from '../..';
-import { Column } from '../../models';
-import { DraggableIconButton } from '../_internals/DraggableIconButton';
-import HeaderLabel from '../_internals/Label';
+import { always, and, equals, ifElse, isNil } from 'ramda';
 
+import type { Props as ListingProps } from '../..';
+import type { Column } from '../../models';
 import useStyleTable from '../../useStyleTable';
-import { StylesProps } from './ListingHeaderCell.styles';
+import { DraggableIconButton } from '../_internals/DraggableIconButton';
+import HeaderLabel from '../_internals/Label';
+import type { StylesProps } from './ListingHeaderCell.styles';
 
 type Props = Pick<
   ListingProps<unknown>,
@@ -82,10 +81,10 @@ const ListingHeaderCell = ({
           <TableSortLabel
             active={sortField === columnSortField}
             aria-label={`Column ${column.label}`}
-            className="text-white"
             classes={{
               icon: 'text-white'
             }}
+            className="text-white"
             direction={sortOrder || 'desc'}
             onClick={sort}
           >

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

@@ -1,11 +1,11 @@
-import { equals, isEmpty, not } from 'ramda';
-
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
-import { TableCell, TableCellBaseProps } from '@mui/material';
+import { TableCell, type TableCellBaseProps } from '@mui/material';
+
+import { equals, isEmpty, not } from 'ramda';
 
 import PopoverMenu from '../../../PopoverMenu';
 import Checkbox from '../../Checkbox';
-import { PredefinedRowSelection } from '../../models';
+import type { PredefinedRowSelection } from '../../models';
 import { labelPredefinedRowsSelectionMenu } from '../../translatedLabels';
 import PredefinedSelectionList from '../_internals/PredefinedSelectionList';
 
@@ -37,8 +37,8 @@ const SelectActionListingHeaderCell = ({
         indeterminate={
           hasRows && selectedRowCount > 0 && selectedRowCount < rowCount
         }
-        slotProps={{ input: { 'aria-label': 'Select all' } }}
         onChange={onSelectAllClick}
+        slotProps={{ input: { 'aria-label': 'Select all' } }}
       />
       {not(isEmpty(predefinedRowsSelection)) ? (
         <PopoverMenu
@@ -49,8 +49,8 @@ const SelectActionListingHeaderCell = ({
           {({ close }): JSX.Element => (
             <PredefinedSelectionList
               close={close}
-              predefinedRowsSelection={predefinedRowsSelection}
               onSelectRowsWithCondition={onSelectRowsWithCondition}
+              predefinedRowsSelection={predefinedRowsSelection}
             />
           )}
         </PopoverMenu>

package/src/Listing/Header/ListingHeader.tsx

@@ -1,20 +1,19 @@
-import { DraggableSyntheticListeners, closestCenter } from '@dnd-kit/core';
-import { horizontalListSortingStrategy } from '@dnd-kit/sortable';
-import { equals, find, map, pick, propEq } from 'ramda';
-
 import { TableHead, TableRow } from '@mui/material';
 
-import { ListingVariant } from '@centreon/ui-context';
-
-import { Props as ListingProps, getVisibleColumns } from '..';
-import SortableItems from '../../SortableItems';
-import { Column } from '../models';
+import type { ListingVariant } from '@centreon/ui-context';
 
+import { closestCenter, type DraggableSyntheticListeners } from '@dnd-kit/core';
+import { horizontalListSortingStrategy } from '@dnd-kit/sortable';
+import { equals, find, map, pick, propEq } from 'ramda';
 import { memo, useCallback } from 'react';
+
+import SortableItems from '../../SortableItems';
+import { getVisibleColumns, type Props as ListingProps } from '..';
+import type { Column } from '../models';
 import ListingHeaderCell from './Cell/ListingHeaderCell';
 import {
   SelectActionListingHeaderCell,
-  SelectActionListingHeaderCellProps
+  type SelectActionListingHeaderCellProps
 } from './Cell/SelectActionListingHeaderCell';
 
 type Props = Pick<
@@ -66,9 +65,12 @@ const ListingHeader = ({
     columns
   });
 
-  const getColumnById = (id: string): Column => {
-    return find(propEq(id, 'id'), columns) as Column;
-  };
+  const getColumnById = useCallback(
+    (id: string): Column => {
+      return find(propEq(id, 'id'), columns) as Column;
+    },
+    [columns]
+  );
 
   const Content = useCallback(
     ({
@@ -89,16 +91,24 @@ const ListingHeader = ({
           isInDragOverlay={isInDragOverlay}
           itemRef={itemRef}
           listingVariant={listingVariant}
+          onSort={onSort}
           sortField={sortField}
           sortOrder={sortOrder}
           style={style}
-          onSort={onSort}
           {...listeners}
           {...attributes}
         />
       );
     },
-    [columnConfiguration, columns, sortField, sortOrder]
+    [
+      columnConfiguration,
+      sortField,
+      sortOrder,
+      areColumnsEditable,
+      getColumnById,
+      listingVariant,
+      onSort
+    ]
   );
 
   return (
@@ -106,25 +116,25 @@ const ListingHeader = ({
       <TableRow className="contents" component="div">
         {checkable && (
           <SelectActionListingHeaderCell
+            onSelectAllClick={onSelectAllClick}
+            onSelectRowsWithCondition={onSelectRowsWithCondition}
             predefinedRowsSelection={predefinedRowsSelection}
             rowCount={rowCount}
             selectedRowCount={selectedRowCount}
-            onSelectAllClick={onSelectAllClick}
-            onSelectRowsWithCondition={onSelectRowsWithCondition}
           />
         )}
         <SortableItems
-          updateSortableItemsOnItemsChange
-          Content={Content}
           additionalProps={[sortField, sortOrder]}
+          Content={Content}
           collisionDetection={closestCenter}
           itemProps={['id']}
           items={visibleColumns}
           memoProps={memoProps}
-          sortingStrategy={horizontalListSortingStrategy}
           onDragEnd={({ items }): void => {
             onSelectColumns?.(items);
           }}
+          sortingStrategy={horizontalListSortingStrategy}
+          updateSortableItemsOnItemsChange
         />
       </TableRow>
     </TableHead>

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

@@ -1,8 +1,8 @@
-import { useTranslation } from 'react-i18next';
-
 import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
 import { IconButton as MuiIconButton, SvgIcon } from '@mui/material';
 
+import { useTranslation } from 'react-i18next';
+
 import { labelDragHandle } from '../../translatedLabels';
 
 interface DraggableIconButtonProps {

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

@@ -1,5 +1,6 @@
-import { Typography, TypographyProps } from '@mui/material';
-import { ReactNode } from 'react';
+import { Typography, type TypographyProps } from '@mui/material';
+
+import type { ReactNode } from 'react';
 
 interface Props {
   children: ReactNode;

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

@@ -1,6 +1,6 @@
 import { List, ListItem, ListItemText } from '@mui/material';
 
-import { PredefinedRowSelection } from '../../models';
+import type { PredefinedRowSelection } from '../../models';
 
 interface Props {
   close: () => void;

package/src/Listing/Listing.cypress.spec.tsx

@@ -1,12 +1,11 @@
-import { useState } from 'react';
-
 import { Button, Typography } from '@mui/material';
 
 import { ListingVariant } from '@centreon/ui-context';
 
-import { ColumnType } from './models';
+import { useState } from 'react';
 
 import Listing from '.';
+import { ColumnType } from './models';
 
 interface Props {
   row: { name: string };
@@ -114,9 +113,9 @@ const mountListingResponsive = (listingVariant: ListingVariant): void => {
     Component: (
       <div style={{ height: '100vh' }}>
         <Listing
-          isResponsive
           columns={defaultColumn}
           currentPage={1}
+          isResponsive
           limit={10}
           listingVariant={listingVariant}
           rows={listingWithSubItems}
@@ -144,6 +143,7 @@ const TestComponent = ({
       columns={columnsWithSubItems}
       currentPage={1}
       limit={10}
+      onSelectRows={setSelectedRows}
       rows={isSmallListing ? listingWithSubItems3Rows : listingWithSubItems}
       selectedRows={selectedRows}
       subItems={{
@@ -154,7 +154,6 @@ const TestComponent = ({
         labelExpand: 'Expand'
       }}
       totalRows={10}
-      onSelectRows={setSelectedRows}
     />
   );
 };

package/src/Listing/Row/EmptyRow.tsx

@@ -1,7 +1,7 @@
-import { ReactNode } from 'react';
-
 import { TableRow } from '@mui/material';
 
+import type { ReactNode } from 'react';
+
 import Cell from '../Cell';
 
 interface EmptyRowProps {

package/src/Listing/Row/Row.tsx

@@ -1,17 +1,14 @@
-/* eslint-disable react/no-unused-prop-types */
+import { TableRow, type TableRowProps, useTheme } from '@mui/material';
 
-import { memo, useEffect, useRef } from 'react';
+import type { ListingVariant } from '@centreon/ui-context';
 
 import { equals, gte, lt, not, pluck } from 'ramda';
-
-import { TableRow, TableRowProps, useTheme } from '@mui/material';
-
-import { ListingVariant } from '@centreon/ui-context';
+import { memo, useCallback, useEffect, useRef } from 'react';
 
 import LoadingSkeleton from '../../LoadingSkeleton';
 import { useViewportIntersection } from '../../utils/useViewportIntersection';
 import { performanceRowsLimit } from '../index';
-import { Column, ColumnConfiguration, RowColorCondition } from '../models';
+import type { Column, ColumnConfiguration, RowColorCondition } from '../models';
 
 type Props = {
   checkable: boolean;
@@ -73,10 +70,10 @@ const Row = memo<RowProps>(
       <TableRow
         className="cursor-pointer contents w-full"
         component="div"
-        tabIndex={tabIndex}
         onClick={onClick}
         onFocus={onFocus}
         onMouseOver={onMouseOver}
+        tabIndex={tabIndex}
       >
         {children}
       </TableRow>
@@ -180,12 +177,15 @@ const IntersectionRow = ({ isHovered, ...rest }: Props): JSX.Element => {
     rootMargin: `${theme.spacing(20)} 0px ${theme.spacing(20)} 0px`
   });
 
-  const getFirstCellElement = (): ChildNode | null | undefined =>
-    rowRef.current?.firstChild?.firstChild?.firstChild;
+  const getFirstCellElement = useCallback(
+    (): ChildNode | null | undefined =>
+      rowRef.current?.firstChild?.firstChild?.firstChild,
+    []
+  );
 
   useEffect(() => {
     setElement(getFirstCellElement() as HTMLDivElement);
-  }, [getFirstCellElement()]);
+  }, [getFirstCellElement, setElement]);
 
   return (
     <div className="contents w-full" data-is-hovered={isHovered} ref={rowRef}>

package/src/Listing/Row/SkeletonLoaderRows.tsx

@@ -1,5 +1,4 @@
 import LoadingSkeleton from '../../LoadingSkeleton';
-
 import { EmptyRow } from './EmptyRow';
 
 interface SkeletonLoaderProps {

package/src/Listing/index.stories.tsx

@@ -1,22 +1,20 @@
 /* eslint-disable no-alert */
 /* eslint-disable react/prop-types */
 import '../ThemeProvider/tailwindcss.css';
-import { useState } from 'react';
-
-import { Meta, StoryObj } from '@storybook/react';
-import { equals, prop } from 'ramda';
-import { makeStyles } from 'tss-react/mui';
 
 import { Button } from '@mui/material';
 import { grey } from '@mui/material/colors';
 
 import { ListingVariant } from '@centreon/ui-context';
 
-import { ListingProps } from '..';
-
-import { Column, ColumnType, SortOrder } from './models';
+import type { Meta, StoryObj } from '@storybook/react';
+import { equals, prop } from 'ramda';
+import { useState } from 'react';
+import { makeStyles } from 'tss-react/mui';
 
+import type { ListingProps } from '..';
 import Listing from '.';
+import { type Column, ColumnType, type SortOrder } from './models';
 
 const meta: Meta<typeof Listing> = {
   argTypes: {
@@ -55,7 +53,7 @@ const ComponentColumn = ({ row, isSelected }): JSX.Element => (
 );
 
 const ButtonColumn = ({ row }): JSX.Element => (
-  <Button size="small" onClick={() => alert(JSON.stringify(row))}>
+  <Button onClick={() => alert(JSON.stringify(row))} size="small">
     Click to reveal details about {row.name}
   </Button>
 );
@@ -163,13 +161,13 @@ const StoryTemplate = ({
         disableRowCheckCondition={(row): boolean => row.disableCheckbox}
         disableRowCondition={(row): boolean => row.disableRow}
         limit={listing.length}
+        onSelectRows={setSelected}
         predefinedRowsSelection={predefinedRowsSelection}
         rowColorConditions={rowColorConditions}
         rows={props.rows ?? listing}
         selectedRows={selected}
         totalRows={listing.length}
         viewerModeConfiguration={viewerModeConfiguration}
-        onSelectRows={setSelected}
         {...props}
       />
     </div>
@@ -292,12 +290,12 @@ const ListingWithEditableColumns = (): JSX.Element => {
         sortable: true
       }}
       columns={editableColumns}
-      rows={sortedRows}
-      sortField={sortParams.sortField}
-      sortOrder={sortParams.sortOrder as SortOrder}
       onResetColumns={resetColumns}
       onSelectColumns={setSelectedColumnIds}
       onSort={onSort}
+      rows={sortedRows}
+      sortField={sortParams.sortField}
+      sortOrder={sortParams.sortOrder as SortOrder}
     />
   );
 };

package/src/Listing/index.tsx

@@ -1,3 +1,7 @@
+import { Box, LinearProgress, Table, TableBody } from '@mui/material';
+
+import { ListingVariant } from '@centreon/ui-context';
+
 import { useAtomValue } from 'jotai';
 import {
   concat,
@@ -24,32 +28,25 @@ import {
   subtract,
   uniqBy
 } from 'ramda';
-import { useTranslation } from 'react-i18next';
-
-import { Box, LinearProgress, Table, TableBody } from '@mui/material';
-
-import { ListingVariant } from '@centreon/ui-context';
-
-import { ParentSize } from '..';
-import { useKeyObserver, useMemoComponent } from '../utils';
-
 import {
-  RefObject,
+  type RefObject,
   useCallback,
   useEffect,
   useMemo,
   useRef,
   useState
 } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { ParentSize } from '..';
+import { useKeyObserver, useMemoComponent } from '../utils';
 import ListingActionBar from './ActionBar';
 import Cell from './Cell';
 import DataCell from './Cell/DataCell';
 import Checkbox from './Checkbox';
 import { EmptyResult } from './EmptyResult/EmptyResult';
 import { ListingHeader } from './Header';
-import ListingRow from './Row/Row';
-import { SkeletonLoader } from './Row/SkeletonLoaderRows';
-import {
+import type {
   Column,
   ColumnConfiguration,
   PredefinedRowSelection,
@@ -57,6 +54,8 @@ import {
   RowId,
   SortOrder
 } from './models';
+import ListingRow from './Row/Row';
+import { SkeletonLoader } from './Row/SkeletonLoaderRows';
 import { subItemsPivotsAtom } from './tableAtoms';
 import { labelNoResultFound as defaultLabelNoResultFound } from './translatedLabels';
 import useStyleTable, { useColumnStyle } from './useStyleTable';
@@ -238,7 +237,7 @@ const Listing = <
         [],
         rows
       ),
-    [rows, subItems]
+    [rows, subItems, getId]
   );
 
   const rowsToDisplay = useMemo(
@@ -278,14 +277,14 @@ const Listing = <
     (row: TRow) => {
       return allSubItemIds.includes(getSubItemRowId(row));
     },
-    [allSubItemIds]
+    [allSubItemIds, getSubItemRowId]
   );
 
   const getRowId = useCallback(
     (row: TRow) => {
       return getIsSubItem(row) ? getSubItemRowId(row) : getId(row);
     },
-    [allSubItemIds]
+    [getId, getIsSubItem, getSubItemRowId]
   );
   const { isShiftKeyDown } = useKeyObserver();
 
@@ -534,14 +533,14 @@ const Listing = <
               limit={limit}
               listingVariant={listingVariant}
               moveTablePagination={moveTablePagination}
-              paginated={paginated}
-              totalRows={totalRows}
-              viewerModeConfiguration={viewerModeConfiguration}
-              widthToMoveTablePagination={widthToMoveTablePagination}
               onLimitChange={changeLimit}
               onPaginate={onPaginate}
               onResetColumns={onResetColumns}
               onSelectColumns={onSelectColumns}
+              paginated={paginated}
+              totalRows={totalRows}
+              viewerModeConfiguration={viewerModeConfiguration}
+              widthToMoveTablePagination={widthToMoveTablePagination}
             />
           </div>
         )}
@@ -565,16 +564,16 @@ const Listing = <
                 customListingComponent
               ) : (
                 <Table
-                  stickyHeader
                   className="grid items-center relative"
+                  component="div"
+                  size="small"
+                  stickyHeader
                   style={{
                     gridTemplateColumns: gridTemplateColumn,
                     gridTemplateRows: `${dataStyle.header.height}px repeat(${
                       rowsToDisplay.length || 1
                     }, ${isResponsive ? 'auto' : `${dataStyle.body.height}px`})`
                   }}
-                  component="div"
-                  size="small"
                 >
                   <ListingHeader
                     areColumnsEditable={areColumnsEditable}
@@ -583,15 +582,15 @@ const Listing = <
                     columns={columns}
                     listingVariant={listingVariant}
                     memoProps={headerMemoProps}
+                    onSelectAllClick={selectAllRows}
+                    onSelectColumns={onSelectColumns}
+                    onSelectRowsWithCondition={onSelectRowsWithCondition}
+                    onSort={onSort}
                     predefinedRowsSelection={predefinedRowsSelection}
                     rowCount={rowsToDisplay.length}
                     selectedRowCount={selectedRows.length}
                     sortField={sortField}
                     sortOrder={sortOrder}
-                    onSelectAllClick={selectAllRows}
-                    onSelectColumns={onSelectColumns}
-                    onSelectRowsWithCondition={onSelectRowsWithCondition}
-                    onSort={onSort}
                   />
 
                   <TableBody
@@ -626,12 +625,6 @@ const Listing = <
                           lastSelectionIndex={lastSelectionIndex}
                           limit={limit}
                           listingVariant={listingVariant}
-                          row={row}
-                          rowColorConditions={rowColorConditions}
-                          shiftKeyDownRowPivot={shiftKeyDownRowPivot}
-                          subItemsPivots={subItemsPivots}
-                          tabIndex={-1}
-                          visibleColumns={visibleColumns}
                           onClick={
                             isSubItem
                               ? undefined
@@ -641,6 +634,12 @@ const Listing = <
                           }
                           onFocus={(): void => hoverRow(row)}
                           onMouseOver={(): void => hoverRow(row)}
+                          row={row}
+                          rowColorConditions={rowColorConditions}
+                          shiftKeyDownRowPivot={shiftKeyDownRowPivot}
+                          subItemsPivots={subItemsPivots}
+                          tabIndex={-1}
+                          visibleColumns={visibleColumns}
                         >
                           {checkable &&
                             (!isSubItem || subItems.canCheckSubItems ? (
@@ -649,12 +648,13 @@ const Listing = <
                                 className="justify-start"
                                 disableRowCondition={disableRowCondition}
                                 isRowHovered={isRowHovered}
+                                onClick={(event): void => selectRow(event, row)}
                                 row={row}
                                 rowColorConditions={rowColorConditions}
-                                onClick={(event): void => selectRow(event, row)}
                               >
                                 <Checkbox
                                   checked={isRowSelected}
+                                  className="pl-1"
                                   disabled={
                                     disableRowCheckCondition(row) ||
                                     disableRowCondition(row)
@@ -664,7 +664,6 @@ const Listing = <
                                       'aria-label': `Select row ${getId(row)}`
                                     }
                                   }}
-                                  className="pl-1"
                                 />
                               </Cell>
                             ) : (
@@ -758,6 +757,7 @@ export const MemoizedListing = <TRow extends { id: string | number }>({
         columns={columns}
         currentPage={currentPage}
         innerScrollDisabled={innerScrollDisabled}
+        labelNoResultFound={labelNoResultFound}
         limit={limit}
         listingVariant={listingVariant}
         loading={loading}
@@ -770,7 +770,6 @@ export const MemoizedListing = <TRow extends { id: string | number }>({
         sortOrder={sortOrder}
         totalRows={totalRows}
         widthToMoveTablePagination={widthToMoveTablePagination}
-        labelNoResultFound={labelNoResultFound}
         {...props}
       />
     ),