@centreon/ui 23.10.91 → 23.10.93

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.91",
+  "version": "23.10.93",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/ActionsList/ActionsList.styles.ts

@@ -0,0 +1,116 @@
+import { makeStyles } from 'tss-react/mui';
+import { equals } from 'ramda';
+
+import { Theme, alpha } from '@mui/material';
+
+interface GetBackgroundAndColorProps {
+  status: string;
+  theme: Theme;
+}
+
+const getColor = ({ theme, status }: GetBackgroundAndColorProps): string =>
+  equals(theme.palette.mode, 'dark')
+    ? theme.palette.common.white
+    : theme.palette[status].main;
+
+export const useStyles = makeStyles()((theme) => ({
+  item: {
+    '& .MuiListItemText-secondary': {
+      textWrap: 'pretty'
+    },
+    '&[data-variant="error"]': {
+      '& .MuiListItemIcon-root': {
+        color: getColor({ status: 'error', theme })
+      },
+      '&:hover': {
+        background: alpha(
+          theme.palette.error.main,
+          theme.palette.action.focusOpacity
+        ),
+        color: getColor({ status: 'error', theme })
+      },
+      color: theme.palette.error.main
+    },
+    '&[data-variant="info"]': {
+      '& .MuiListItemIcon-root': {
+        color: getColor({ status: 'info', theme })
+      },
+      '&:hover': {
+        background: alpha(
+          theme.palette.info.main,
+          theme.palette.action.focusOpacity
+        ),
+        color: getColor({ status: 'info', theme })
+      },
+      color: theme.palette.info.main
+    },
+    '&[data-variant="pending"]': {
+      '& .MuiListItemIcon-root': {
+        color: getColor({ status: 'pending', theme })
+      },
+      '&:hover': {
+        background: alpha(
+          theme.palette.pending.main,
+          theme.palette.action.focusOpacity
+        ),
+        color: getColor({ status: 'pending', theme })
+      },
+      color: theme.palette.pending.main
+    },
+    '&[data-variant="primary"]': {
+      '& .MuiListItemIcon-root': {
+        color: getColor({ status: 'primary', theme })
+      },
+      '&:hover': {
+        background: alpha(
+          theme.palette.primary.main,
+          theme.palette.action.focusOpacity
+        ),
+        color: getColor({ status: 'primary', theme })
+      },
+      color: theme.palette.primary.main
+    },
+    '&[data-variant="secondary"]': {
+      '& .MuiListItemIcon-root': {
+        color: getColor({ status: 'secondary', theme })
+      },
+      '&:hover': {
+        background: alpha(
+          theme.palette.secondary.main,
+          theme.palette.action.focusOpacity
+        ),
+        color: getColor({ status: 'secondary', theme })
+      },
+      color: theme.palette.secondary.main
+    },
+    '&[data-variant="success"]': {
+      '& .MuiListItemIcon-root': {
+        color: getColor({ status: 'success', theme })
+      },
+      '&:hover': {
+        background: alpha(
+          theme.palette.success.main,
+          theme.palette.action.focusOpacity
+        ),
+        color: getColor({ status: 'success', theme })
+      },
+      color: theme.palette.success.main
+    },
+    '&[data-variant="warning"]': {
+      '& .MuiListItemIcon-root': {
+        color: getColor({ status: 'warning', theme })
+      },
+      '&:hover': {
+        background: alpha(
+          theme.palette.warning.main,
+          theme.palette.action.focusOpacity
+        ),
+        color: getColor({ status: 'warning', theme })
+      },
+      color: theme.palette.warning.main
+    }
+  },
+  list: {
+    width: '100%'
+  }
+}));

package/src/ActionsList/index.stories.tsx

@@ -24,6 +24,68 @@ const actions = [
   }
 ];
 
+const actionsWithVariants = [
+  {
+    label: 'No variant',
+    onClick: (): void => undefined
+  },
+  {
+    label: 'Primary',
+    onClick: (): void => undefined,
+    variant: 'primary'
+  },
+  {
+    label: 'Secondary',
+    onClick: (): void => undefined,
+    variant: 'secondary'
+  },
+  {
+    label: 'Success',
+    onClick: (): void => undefined,
+    variant: 'success'
+  },
+  {
+    label: 'Warning',
+    onClick: (): void => undefined,
+    variant: 'warning'
+  },
+  {
+    label: 'Error',
+    onClick: (): void => undefined,
+    variant: 'error'
+  },
+  {
+    label: 'Info',
+    onClick: (): void => undefined,
+    variant: 'info'
+  },
+  {
+    label: 'Pending',
+    onClick: (): void => undefined,
+    variant: 'pending'
+  }
+];
+
+const actionsWithSecondaryLabel = [
+  {
+    Icon: EditIcon,
+    label: 'Edit',
+    onClick: (): void => undefined
+  },
+  {
+    Icon: CopyIcon,
+    label: 'Duplicate',
+    onClick: (): void => undefined,
+    secondaryLabel:
+      'This is a secondary label that the purpose is to give a small description about an action'
+  },
+  {
+    Icon: DeleteIcon,
+    label: 'Delete',
+    onClick: (): void => undefined
+  }
+];
+
 export default {
   argTypes: {},
   component: ActionsList,
@@ -39,3 +101,15 @@ export const Playground = Template.bind({});
 Playground.args = {
   actions
 };
+
+export const Variants = Template.bind({});
+
+Variants.args = {
+  actions: actionsWithVariants
+};
+
+export const SecondaryLabel = Template.bind({});
+
+SecondaryLabel.args = {
+  actions: actionsWithSecondaryLabel
+};

package/src/ActionsList/index.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable react/no-array-index-key */
-import { makeStyles } from 'tss-react/mui';
 import { useTranslation } from 'react-i18next';
 import { equals } from 'ramda';
 
@@ -12,10 +11,15 @@ import {
   Divider
 } from '@mui/material';
 
+import { useStyles } from './ActionsList.styles';
+import { ActionVariants } from './models';
+
 interface ActionsType {
   Icon?: (props: SvgIconProps) => JSX.Element;
   label: string;
   onClick?: (e?) => void;
+  secondaryLabel?: string;
+  variant?: ActionVariants;
 }
 
 interface Props {
@@ -24,12 +28,6 @@ interface Props {
   listItemClassName?: string;
 }
 
-const useStyles = makeStyles()({
-  list: {
-    maxWidth: '100%'
-  }
-});
-
 const ActionsList = ({
   className,
   listItemClassName,
@@ -45,18 +43,28 @@ const ActionsList = ({
           return <Divider key={`divider_${idx}`} />;
         }
 
-        const { label, Icon, onClick } = action as ActionsType;
+        const { label, Icon, onClick, variant, secondaryLabel } =
+          action as ActionsType;
 
         return (
-          <MenuItem aria-label={label} id={label} key={label} onClick={onClick}>
+          <MenuItem
+            aria-label={label}
+            className={classes.item}
+            data-variant={variant}
+            id={label}
+            key={label}
+            onClick={onClick}
+          >
             {Icon && (
               <ListItemIcon>
                 <Icon fontSize="small" />
               </ListItemIcon>
             )}
-            <ListItemText className={listItemClassName}>
-              {t(label)}
-            </ListItemText>
+            <ListItemText
+              className={listItemClassName}
+              primary={t(label)}
+              secondary={secondaryLabel && t(secondaryLabel)}
+            />
           </MenuItem>
         );
       })}

package/src/ActionsList/models.ts

@@ -0,0 +1,8 @@
+export type ActionVariants =
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'warning'
+  | 'error'
+  | 'info'
+  | 'pending';

package/src/Checkbox/Checkbox.tsx

@@ -12,7 +12,6 @@ import {
 export type LabelPlacement = 'bottom' | 'top' | 'end' | 'start' | undefined;
 
 interface StyleProps {
-  disabled: boolean;
   hasIcon: boolean;
   labelPlacement: LabelPlacement;
 }
@@ -26,7 +25,13 @@ const getLabelSpacing = (labelPlacement, theme): string => {
 };
 
 const useStyles = makeStyles<StyleProps>()(
-  (theme, { disabled, hasIcon, labelPlacement }) => ({
+  (theme, { hasIcon, labelPlacement }) => ({
+    checkbox: {
+      '&.Mui-checked': {
+        color: theme.palette.primary.main
+      },
+      color: theme.palette.primary.main
+    },
     container: hasIcon
       ? {
           alignItems: 'center',
@@ -40,13 +45,8 @@ const useStyles = makeStyles<StyleProps>()(
       fontSize: theme.spacing(10)
     },
     label: {
-      color: disabled
-        ? theme.palette.action.disabled
-        : theme.palette.text.secondary,
-      fontSize: theme.typography.body1.fontSize,
-      fontWeight: equals(labelPlacement, 'top')
-        ? theme.typography.fontWeightBold
-        : theme.typography.fontWeightMedium,
+      fontSize: theme.typography.body2.fontSize,
+      fontWeight: theme.typography.fontWeightMedium,
       padding: getLabelSpacing(labelPlacement, theme)
     }
   })
@@ -74,7 +74,6 @@ const Checkbox = ({
   dataTestId
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({
-    disabled,
     hasIcon: !!Icon,
     labelPlacement
   });
@@ -86,6 +85,7 @@ const Checkbox = ({
         control={
           <MuiCheckbox
             checked={checked}
+            className={classes.checkbox}
             color="primary"
             disabled={disabled}
             id={label}

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

@@ -67,21 +67,23 @@ const mountListing = (): void => {
 
   cy.mount({
     Component: (
-      <Listing
-        checkable
-        columns={columnsWithSubItems}
-        currentPage={1}
-        limit={10}
-        rows={listingWithSubItems}
-        subItems={{
-          canCheckSubItems: false,
-          enable: true,
-          labelCollapse: 'Collapse',
-          labelExpand: 'Expand',
-          rowProperty: 'subItems'
-        }}
-        totalRows={10}
-      />
+      <div style={{ height: '100vh' }}>
+        <Listing
+          checkable
+          columns={columnsWithSubItems}
+          currentPage={1}
+          limit={10}
+          rows={listingWithSubItems}
+          subItems={{
+            canCheckSubItems: false,
+            enable: true,
+            labelCollapse: 'Collapse',
+            labelExpand: 'Expand',
+            rowProperty: 'subItems'
+          }}
+          totalRows={10}
+        />
+      </div>
     )
   });
 };

package/src/Listing/Listing.styles.ts

@@ -30,6 +30,11 @@ const useListingStyles = makeStyles<StylesProps>()(
       height: '100%',
       width: '100%'
     },
+    listingContainer: {
+      height: '100%',
+      overflow: 'hidden',
+      width: '100%'
+    },
     loadingIndicator: {
       height: loadingIndicatorHeight,
       width: '100%'

package/src/Listing/index.stories.tsx

@@ -34,7 +34,8 @@ type Story = StoryObj<typeof Listing>;
 
 const useStyles = makeStyles()((theme) => ({
   listing: {
-    backgroundColor: theme.palette.background.default
+    backgroundColor: theme.palette.background.default,
+    height: '100vh'
   }
 }));
 

package/src/Listing/index.tsx

@@ -35,12 +35,12 @@ import { Box, LinearProgress, Table, TableBody } from '@mui/material';
 import { ListingVariant } from '@centreon/ui-context';
 
 import { useKeyObserver, useMemoComponent } from '../utils';
+import { ParentSize } from '..';
 
 import ListingActionBar from './ActionBar';
 import Cell from './Cell';
 import DataCell from './Cell/DataCell';
 import Checkbox from './Checkbox';
-import getCumulativeOffset from './getCumulativeOffset';
 import {
   Column,
   ColumnConfiguration,
@@ -51,9 +51,8 @@ import {
 } from './models';
 import ListingRow from './Row/Row';
 import { labelNoResultFound } from './translatedLabels';
-import useResizeObserver from './useResizeObserver';
 import useStyleTable from './useStyleTable';
-import { loadingIndicatorHeight, useListingStyles } from './Listing.styles';
+import { useListingStyles } from './Listing.styles';
 import { EmptyResult } from './EmptyResult/EmptyResult';
 import { SkeletonLoader } from './Row/SkeletonLoaderRows';
 import { ListingHeader } from './Header';
@@ -194,7 +193,6 @@ const Listing = <TRow extends { id: RowId }>({
 
   const { t } = useTranslation();
 
-  const [tableTopOffset, setTableTopOffset] = React.useState(0);
   const [hoveredRowId, setHoveredRowId] = React.useState<RowId | null>(null);
   const [shiftKeyDownRowPivot, setShiftKeyDownRowPivot] = React.useState<
     number | null
@@ -228,7 +226,7 @@ const Listing = <TRow extends { id: RowId }>({
     [rows, subItemsPivots, subItems]
   );
 
-  const { classes, theme } = useListingStyles({
+  const { classes } = useListingStyles({
     dataStyle,
     getGridTemplateColumn,
     limit,
@@ -236,13 +234,6 @@ const Listing = <TRow extends { id: RowId }>({
     rows: rowsToDisplay
   });
 
-  useResizeObserver({
-    onResize: () => {
-      setTableTopOffset(getCumulativeOffset(containerRef.current));
-    },
-    ref: containerRef
-  });
-
   const { isShiftKeyDown } = useKeyObserver();
 
   const haveSameId = (row: TRow, rowToCompare: TRow): boolean =>
@@ -434,18 +425,6 @@ const Listing = <TRow extends { id: RowId }>({
 
   const emptyRows = limit - Math.min(limit, totalRows - currentPage * limit);
 
-  const tableMaxHeight = (): string => {
-    if (innerScrollDisabled) {
-      return '100%';
-    }
-
-    return `calc(100vh - ${tableTopOffset}px - ${
-      actionBarRef.current?.offsetHeight
-    }px - ${
-      dataStyle.header.height
-    }px - ${loadingIndicatorHeight}px - ${theme.spacing(1)})`;
-  };
-
   const changeLimit = (updatedLimit: string): void => {
     onLimitChange?.(Number(updatedLimit));
   };
@@ -480,7 +459,7 @@ const Listing = <TRow extends { id: RowId }>({
   );
 
   return (
-    <>
+    <div className={classes.listingContainer}>
       {loading && rows.length > 0 && (
         <LinearProgress className={classes.loadingIndicator} />
       )}
@@ -516,142 +495,152 @@ const Listing = <TRow extends { id: RowId }>({
             onSelectColumns={onSelectColumns}
           />
         </div>
-        <Box
-          className={classes.tableWrapper}
-          component="div"
-          style={{
-            maxHeight: tableMaxHeight()
+        <ParentSize
+          parentSizeStyles={{
+            height: '100%',
+            overflowY: 'auto',
+            width: '100%'
           }}
         >
-          <Table
-            stickyHeader
-            className={classes.table}
-            component="div"
-            role={undefined}
-            size="small"
-          >
-            <ListingHeader
-              areColumnsEditable={areColumnsEditable}
-              checkable={checkable}
-              columnConfiguration={columnConfiguration}
-              columns={columns}
-              listingVariant={listingVariant}
-              memoProps={headerMemoProps}
-              predefinedRowsSelection={predefinedRowsSelection}
-              rowCount={limit - emptyRows}
-              selectedRowCount={selectedRows.length}
-              sortField={sortField}
-              sortOrder={sortOrder}
-              onSelectAllClick={selectAllRows}
-              onSelectColumns={onSelectColumns}
-              onSelectRowsWithCondition={onSelectRowsWithCondition}
-              onSort={onSort}
-            />
-
-            <TableBody
-              className={classes.tableBody}
+          {({ height }) => (
+            <Box
+              className={classes.tableWrapper}
               component="div"
-              onMouseLeave={clearHoveredRow}
+              style={{
+                height: innerScrollDisabled ? '100%' : `calc(${height}px - 4px)`
+              }}
             >
-              {rowsToDisplay.map((row, index) => {
-                const isRowSelected = isSelected(row);
-                const isRowHovered = equals(hoveredRowId, getId(row));
-                const isSubItem = allSubItemIds.includes(row.id);
-
-                return (
-                  <ListingRow
-                    checkable={
-                      checkable && (!isSubItem || subItems.canCheckSubItems)
-                    }
-                    columnConfiguration={columnConfiguration}
-                    columnIds={columns.map(prop('id'))}
-                    disableRowCondition={disableRowCondition}
-                    isHovered={isRowHovered}
-                    isSelected={isRowSelected}
-                    isShiftKeyDown={isShiftKeyDown}
-                    key={
-                      gte(limit, performanceRowsLimit)
-                        ? `row_${index}`
-                        : getId(row)
-                    }
-                    lastSelectionIndex={lastSelectionIndex}
-                    limit={limit}
-                    listingVariant={listingVariant}
-                    row={row}
-                    rowColorConditions={rowColorConditions}
-                    shiftKeyDownRowPivot={shiftKeyDownRowPivot}
-                    subItemsPivots={subItemsPivots}
-                    tabIndex={-1}
-                    visibleColumns={visibleColumns}
-                    onClick={(): void => {
-                      onRowClick(row);
-                    }}
-                    onFocus={(): void => hoverRow(row)}
-                    onMouseOver={(): void => hoverRow(row)}
-                  >
-                    {checkable &&
-                      (!isSubItem || subItems.canCheckSubItems ? (
-                        <Cell
-                          align="left"
-                          className={classes.checkbox}
-                          disableRowCondition={disableRowCondition}
-                          isRowHovered={isRowHovered}
-                          row={row}
-                          rowColorConditions={rowColorConditions}
-                          onClick={(event): void => selectRow(event, row)}
-                        >
-                          <Checkbox
-                            checked={isRowSelected}
-                            disabled={
-                              disableRowCheckCondition(row) ||
-                              disableRowCondition(row)
-                            }
-                            inputProps={{
-                              'aria-label': `Select row ${getId(row)}`
-                            }}
-                          />
-                        </Cell>
-                      ) : (
-                        <Cell
-                          align="left"
-                          disableRowCondition={disableRowCondition}
-                          isRowHovered={isRowHovered}
-                          row={row}
-                          rowColorConditions={rowColorConditions}
-                        />
-                      ))}
-
-                    {visibleColumns.map((column) => (
-                      <DataCell
-                        column={column}
+              <Table
+                stickyHeader
+                className={classes.table}
+                component="div"
+                role={undefined}
+                size="small"
+              >
+                <ListingHeader
+                  areColumnsEditable={areColumnsEditable}
+                  checkable={checkable}
+                  columnConfiguration={columnConfiguration}
+                  columns={columns}
+                  listingVariant={listingVariant}
+                  memoProps={headerMemoProps}
+                  predefinedRowsSelection={predefinedRowsSelection}
+                  rowCount={limit - emptyRows}
+                  selectedRowCount={selectedRows.length}
+                  sortField={sortField}
+                  sortOrder={sortOrder}
+                  onSelectAllClick={selectAllRows}
+                  onSelectColumns={onSelectColumns}
+                  onSelectRowsWithCondition={onSelectRowsWithCondition}
+                  onSort={onSort}
+                />
+
+                <TableBody
+                  className={classes.tableBody}
+                  component="div"
+                  onMouseLeave={clearHoveredRow}
+                >
+                  {rowsToDisplay.map((row, index) => {
+                    const isRowSelected = isSelected(row);
+                    const isRowHovered = equals(hoveredRowId, getId(row));
+                    const isSubItem = allSubItemIds.includes(row.id);
+
+                    return (
+                      <ListingRow
+                        checkable={
+                          checkable && (!isSubItem || subItems.canCheckSubItems)
+                        }
+                        columnConfiguration={columnConfiguration}
+                        columnIds={columns.map(prop('id'))}
                         disableRowCondition={disableRowCondition}
-                        getHighlightRowCondition={getHighlightRowCondition}
-                        isRowHovered={isRowHovered}
-                        isRowSelected={isRowSelected}
-                        key={`${getId(row)}-${column.id}`}
-                        labelCollapse={subItems.labelCollapse}
-                        labelExpand={subItems.labelExpand}
+                        isHovered={isRowHovered}
+                        isSelected={isRowSelected}
+                        isShiftKeyDown={isShiftKeyDown}
+                        key={
+                          gte(limit, performanceRowsLimit)
+                            ? `row_${index}`
+                            : getId(row)
+                        }
+                        lastSelectionIndex={lastSelectionIndex}
+                        limit={limit}
                         listingVariant={listingVariant}
                         row={row}
                         rowColorConditions={rowColorConditions}
-                        subItemsRowProperty={subItems?.rowProperty}
-                      />
+                        shiftKeyDownRowPivot={shiftKeyDownRowPivot}
+                        subItemsPivots={subItemsPivots}
+                        tabIndex={-1}
+                        visibleColumns={visibleColumns}
+                        onClick={(): void => {
+                          onRowClick(row);
+                        }}
+                        onFocus={(): void => hoverRow(row)}
+                        onMouseOver={(): void => hoverRow(row)}
+                      >
+                        {checkable &&
+                          (!isSubItem || subItems.canCheckSubItems ? (
+                            <Cell
+                              align="left"
+                              className={classes.checkbox}
+                              disableRowCondition={disableRowCondition}
+                              isRowHovered={isRowHovered}
+                              row={row}
+                              rowColorConditions={rowColorConditions}
+                              onClick={(event): void => selectRow(event, row)}
+                            >
+                              <Checkbox
+                                checked={isRowSelected}
+                                disabled={
+                                  disableRowCheckCondition(row) ||
+                                  disableRowCondition(row)
+                                }
+                                inputProps={{
+                                  'aria-label': `Select row ${getId(row)}`
+                                }}
+                              />
+                            </Cell>
+                          ) : (
+                            <Cell
+                              align="left"
+                              disableRowCondition={disableRowCondition}
+                              isRowHovered={isRowHovered}
+                              row={row}
+                              rowColorConditions={rowColorConditions}
+                            />
+                          ))}
+
+                        {visibleColumns.map((column) => (
+                          <DataCell
+                            column={column}
+                            disableRowCondition={disableRowCondition}
+                            getHighlightRowCondition={getHighlightRowCondition}
+                            isRowHovered={isRowHovered}
+                            isRowSelected={isRowSelected}
+                            key={`${getId(row)}-${column.id}`}
+                            labelCollapse={subItems.labelCollapse}
+                            labelExpand={subItems.labelExpand}
+                            listingVariant={listingVariant}
+                            row={row}
+                            rowColorConditions={rowColorConditions}
+                            subItemsRowProperty={subItems?.rowProperty}
+                          />
+                        ))}
+                      </ListingRow>
+                    );
+                  })}
+
+                  {rows.length < 1 &&
+                    (loading ? (
+                      <SkeletonLoader rows={limit} />
+                    ) : (
+                      <EmptyResult label={t(labelNoResultFound)} />
                     ))}
-                  </ListingRow>
-                );
-              })}
-
-              {rows.length < 1 &&
-                (loading ? (
-                  <SkeletonLoader rows={limit} />
-                ) : (
-                  <EmptyResult label={t(labelNoResultFound)} />
-                ))}
-            </TableBody>
-          </Table>
-        </Box>
+                </TableBody>
+              </Table>
+            </Box>
+          )}
+        </ParentSize>
       </div>
-    </>
+    </div>
   );
 };
 

package/src/ListingPage/index.stories.tsx

@@ -14,7 +14,7 @@ import Panel from '../Panel';
 
 import Filter from './Filter';
 
-import ListingPage from '.';
+import ListingPage, { ListingPageProps } from '.';
 
 export default { title: 'Listing Page' };
 
@@ -59,6 +59,9 @@ const useStyles = makeStyles()((theme) => ({
     gridGap: theme.spacing(2),
     gridTemplateColumns: 'auto auto 1fr'
   },
+  page: {
+    height: '100vh'
+  },
   title: {
     alignItems: 'center',
     gridArea: 'title',
@@ -251,8 +254,18 @@ const DetailsPanelWithTabs = (): JSX.Element => (
   />
 );
 
+const Template = (args: ListingPageProps): JSX.Element => {
+  const { classes } = useStyles();
+
+  return (
+    <div className={classes.page}>
+      <ListingPage {...args} />
+    </div>
+  );
+};
+
 export const normal = (): JSX.Element => (
-  <ListingPage
+  <Template
     filter={<FilterWithContent />}
     listing={listing}
     panelOpen={false}
@@ -260,7 +273,7 @@ export const normal = (): JSX.Element => (
 );
 
 export const withOpenPanel = (): JSX.Element => (
-  <ListingPage
+  <Template
     panelOpen
     filter={<FilterWithContent />}
     listing={listing}
@@ -269,7 +282,7 @@ export const withOpenPanel = (): JSX.Element => (
 );
 
 export const withOpenPanelAndTabs = (): JSX.Element => (
-  <ListingPage
+  <Template
     panelOpen
     filter={<FilterWithContent />}
     listing={listing}
@@ -278,7 +291,7 @@ export const withOpenPanelAndTabs = (): JSX.Element => (
 );
 
 export const withFilterDetailsAndOpenPanel = (): JSX.Element => (
-  <ListingPage
+  <Template
     panelOpen
     filter={<FilterWithContent />}
     listing={listing}
@@ -290,7 +303,7 @@ export const withFixedPanel = (): JSX.Element => {
   const [open, setOpen] = useState(true);
 
   return (
-    <ListingPage
+    <Template
       panelFixed
       filter={<FilterWithOpenButton onOpen={(): void => setOpen(true)} />}
       listing={listing}
@@ -304,7 +317,7 @@ export const withResponsivePaginationTable = (): JSX.Element => {
   const [open, setOpen] = useState(true);
 
   return (
-    <ListingPage
+    <Template
       filter={<FilterWithOpenButton onOpen={(): void => setOpen(true)} />}
       listing={
         <Listing
@@ -326,7 +339,7 @@ export const withResponsivePaginationTable = (): JSX.Element => {
 };
 
 export const withALongContent = (): JSX.Element => (
-  <ListingPage
+  <Template
     filter={<FilterWithContent />}
     listing={
       <div>

package/src/ListingPage/index.tsx

@@ -1,4 +1,4 @@
-import { Suspense, useEffect, useRef, useState } from 'react';
+import { Suspense, useRef } from 'react';
 
 import { makeStyles } from 'tss-react/mui';
 
@@ -6,6 +6,7 @@ import { Box } from '@mui/material';
 
 import { useMemoComponent } from '../utils';
 import WithPanel from '../Panel/WithPanel';
+import { ParentSize } from '..';
 
 import FilterSkeleton from './FilterSkeleton';
 import ListingSkeleton from './ListingSkeleton';
@@ -30,7 +31,7 @@ const useStyles = makeStyles()((theme) => {
   };
 });
 
-interface Props {
+export interface ListingPageProps {
   filter: JSX.Element;
   fullHeight?: boolean;
   listing: JSX.Element;
@@ -52,32 +53,10 @@ const ListingPage = ({
   listingScrollOffset = 16,
   fullHeight = false,
   memoListingProps = []
-}: Props): JSX.Element => {
+}: ListingPageProps): JSX.Element => {
   const { classes, cx } = useStyles();
-  const [listingHeight, setListingHeight] = useState(0);
-  const listingRef = useRef<HTMLDivElement | null>(null);
   const filtersRef = useRef<HTMLDivElement | null>(null);
 
-  const resize = (): void => {
-    setListingHeight(window.innerHeight);
-  };
-
-  useEffect(() => {
-    window.addEventListener('resize', resize);
-
-    setListingHeight(window.innerHeight);
-
-    return () => {
-      window.removeEventListener('resize', resize);
-    };
-  }, []);
-
-  const listingContainerHeight =
-    listingHeight -
-    (filtersRef.current?.getBoundingClientRect().height || 0) -
-    (filtersRef.current?.getBoundingClientRect().top || 0) -
-    listingScrollOffset;
-
   const memoListingComponent = useMemoComponent({
     Component: listing,
     memoProps: [...memoListingProps]
@@ -90,18 +69,21 @@ const ListingPage = ({
       </div>
 
       <WithPanel fixed={panelFixed} open={panelOpen} panel={panel}>
-        <Box
-          className={classes.listing}
-          ref={listingRef}
-          sx={{
-            ...(fullHeight && { height: '100%' }),
-            maxHeight: listingContainerHeight
-          }}
-        >
-          <Suspense fallback={<ListingSkeleton />}>
-            {memoListingComponent}
-          </Suspense>
-        </Box>
+        <ParentSize>
+          {({ height }) => (
+            <Box
+              className={classes.listing}
+              sx={{
+                height: `calc(${height}px - ${listingScrollOffset}px)`,
+                ...(fullHeight && { height: '100%' })
+              }}
+            >
+              <Suspense fallback={<ListingSkeleton />}>
+                {memoListingComponent}
+              </Suspense>
+            </Box>
+          )}
+        </ParentSize>
       </WithPanel>
     </div>
   );

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

@@ -0,0 +1,62 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Delete as DeleteIcon, Save as SaveIcon } from '@mui/icons-material';
+
+import { IconButton } from '../..';
+
+import { ConfirmationTooltip } from './ConfirmationTooltip';
+
+const meta: Meta<typeof ConfirmationTooltip> = {
+  component: ConfirmationTooltip
+};
+
+export default meta;
+type Story = StoryObj<typeof ConfirmationTooltip>;
+
+export const Default: Story = {
+  args: {
+    children: (toggleTooltip) => (
+      <IconButton icon={<SaveIcon />} onClick={toggleTooltip} />
+    ),
+    labels: {
+      cancel: 'Cancel',
+      confirm: {
+        label: 'Save'
+      }
+    },
+    onConfirm: () => undefined
+  }
+};
+
+export const WithConfirmVariant: Story = {
+  args: {
+    children: (toggleTooltip) => (
+      <IconButton icon={<DeleteIcon color="error" />} onClick={toggleTooltip} />
+    ),
+    confirmVariant: 'error',
+    labels: {
+      cancel: 'Cancel',
+      confirm: {
+        label: 'Delete'
+      }
+    },
+    onConfirm: () => undefined
+  }
+};
+
+export const WithSecondaryLabel: Story = {
+  args: {
+    children: (toggleTooltip) => (
+      <IconButton icon={<DeleteIcon color="error" />} onClick={toggleTooltip} />
+    ),
+    confirmVariant: 'error',
+    labels: {
+      cancel: 'Cancel',
+      confirm: {
+        label: 'Delete',
+        secondaryLabel: 'This action will delete the current item'
+      }
+    },
+    onConfirm: () => undefined
+  }
+};

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

@@ -0,0 +1,19 @@
+import { equals } from 'ramda';
+import { makeStyles } from 'tss-react/mui';
+
+import { ThemeMode } from '@centreon/ui-context';
+
+export const useStyles = makeStyles()((theme) => ({
+  list: {
+    padding: 0
+  },
+  paper: {
+    backgroundColor: equals(theme.palette.mode, ThemeMode.dark)
+      ? theme.palette.background.widget
+      : theme.palette.background.default,
+    borderRadius: theme.shape.borderRadius,
+    boxShadow: theme.shadows[3],
+    marginLeft: theme.spacing(2),
+    maxWidth: '350px'
+  }
+}));

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

@@ -0,0 +1,67 @@
+import { MouseEvent, useState } from 'react';
+
+import { ClickAwayListener, Box, Popper } from '@mui/material';
+
+import TooltipContent from './TooltipContent';
+import { Props } from './models';
+import { useStyles } from './ConfirmationTooltip.styles';
+
+export const ConfirmationTooltip = ({
+  children,
+  labels,
+  onConfirm,
+  confirmVariant
+}: Props): JSX.Element => {
+  const { classes } = useStyles();
+
+  const [anchorElement, setAnchorElement] = useState<
+    HTMLButtonElement | undefined
+  >(undefined);
+
+  const close = (): void => {
+    setAnchorElement(undefined);
+  };
+
+  const open = (event: MouseEvent<HTMLButtonElement>): void => {
+    setAnchorElement(event.currentTarget);
+  };
+
+  const confirm = (): void => {
+    close();
+    onConfirm();
+  };
+
+  const actions = [
+    {
+      action: close,
+      label: labels.cancel
+    },
+    {
+      action: confirm,
+      label: labels.confirm.label,
+      secondaryLabel: labels.confirm.secondaryLabel,
+      variant: confirmVariant
+    }
+  ];
+
+  const isOpen = Boolean(anchorElement);
+
+  return (
+    <ClickAwayListener onClickAway={close}>
+      <div>
+        {children(isOpen ? close : open)}
+        <Popper
+          anchorEl={anchorElement}
+          open={isOpen}
+          popperOptions={{
+            placement: 'bottom-start'
+          }}
+        >
+          <Box className={classes.paper}>
+            <TooltipContent actions={actions} />
+          </Box>
+        </Popper>
+      </div>
+    </ClickAwayListener>
+  );
+};

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

@@ -0,0 +1,31 @@
+import { ActionVariants } from '../../../ActionsList/models';
+import { ActionsList } from '../../..';
+
+import { useStyles } from './ConfirmationTooltip.styles';
+
+interface Props {
+  actions: Array<{
+    action: () => void;
+    label: string;
+    secondaryLabel?: string;
+    variant?: ActionVariants;
+  }>;
+}
+
+const TooltipContent = ({ actions }: Props): JSX.Element => {
+  const { classes } = useStyles();
+
+  return (
+    <ActionsList
+      actions={actions.map(({ label, action, variant, secondaryLabel }) => ({
+        label,
+        onClick: action,
+        secondaryLabel,
+        variant
+      }))}
+      className={classes.list}
+    />
+  );
+};
+
+export default TooltipContent;

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

@@ -0,0 +1,18 @@
+import { ReactElement } from 'react';
+
+import { ActionVariants } from '../../../ActionsList/models';
+
+interface Labels {
+  cancel: string;
+  confirm: {
+    label: string;
+    secondaryLabel?: string;
+  };
+}
+
+export interface Props {
+  children: (toggleTooltip) => ReactElement;
+  confirmVariant?: ActionVariants;
+  labels: Labels;
+  onConfirm: () => void;
+}

package/src/components/Tooltip/Tooltip.tsx

@@ -1,21 +1,35 @@
 import { ReactElement, ReactNode } from 'react';
 
-import { Tooltip as MuiTooltip } from '@mui/material';
+import {
+  Tooltip as MuiTooltip,
+  TooltipProps as MuiTooltipProps
+} from '@mui/material';
 
 import { AriaLabelingAttributes } from '../../@types/aria-attributes';
 import { DataTestAttributes } from '../../@types/data-attributes';
 
-import { useStyles } from './Tooltip.styles';
-
 export type TooltipProps = {
   children: ReactElement;
   followCursor?: boolean;
   hasCaret?: boolean;
   isOpen?: boolean;
   label: ReactNode;
-  position?: 'top' | 'bottom' | 'left' | 'right';
+  position?:
+    | 'top'
+    | 'bottom'
+    | 'left'
+    | 'right'
+    | 'bottom-end'
+    | 'bottom-start'
+    | 'left-end'
+    | 'left-start'
+    | 'right-end'
+    | 'right-start'
+    | 'top-end'
+    | 'top-start';
 } & AriaLabelingAttributes &
-  DataTestAttributes;
+  DataTestAttributes &
+  Omit<MuiTooltipProps, 'title'>;
 
 const Tooltip = ({
   children,
@@ -26,12 +40,9 @@ const Tooltip = ({
   hasCaret = false,
   ...attr
 }: TooltipProps): ReactElement => {
-  const { classes } = useStyles();
-
   return (
     <MuiTooltip
       arrow={hasCaret}
-      className={classes.tooltip}
       followCursor={followCursor}
       open={isOpen}
       placement={position}

package/src/components/Tooltip/Tooltip.styles.ts

@@ -1,5 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(() => ({
-  tooltip: {}
-}));