@centreon/ui 24.4.56 → 24.4.58

package/package.json

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

package/src/Graph/BarStack/BarStack.stories.tsx

@@ -58,11 +58,6 @@ export const WithoutTitle: Story = {
   render: Template
 };
 
-export const WithPencentage: Story = {
-  args: { data, title: 'hosts', unit: 'percentage' },
-  render: Template
-};
-
 export const WithoutLegend: Story = {
   args: { data, displayLegend: false, title: 'hosts' },
 
@@ -74,6 +69,11 @@ export const withDisplayedValues: Story = {
   render: Template
 };
 
+export const WithPencentage: Story = {
+  args: { data, displayValues: true, title: 'hosts', unit: 'percentage' },
+  render: Template
+};
+
 export const WithTooltip: Story = {
   args: { TooltipContent, data, title: 'hosts' },
   render: Template

package/src/Graph/BarStack/BarStack.styles.ts

@@ -16,7 +16,7 @@ export const useBarStackStyles = makeStyles()((theme) => ({
   svgContainer: {
     alignItems: 'center',
     backgroundColor: theme.palette.background.panelGroups,
-    borderRadius: theme.shape.borderRadius,
+    borderRadius: theme.spacing(1.25),
     display: 'flex',
     justifyContent: 'center'
   },
@@ -31,6 +31,7 @@ export const useBarStackStyles = makeStyles()((theme) => ({
     fontSize: theme.typography.h6.fontSize,
     fontWeight: theme.typography.fontWeightMedium,
     margin: 0,
-    padding: 0
+    padding: 0,
+    textAlign: 'center'
   }
 }));

package/src/Graph/BarStack/ResponsiveBarStack.tsx

@@ -5,6 +5,7 @@ import { Group } from '@visx/group';
 import numeral from 'numeral';
 import { Text } from '@visx/text';
 import { useTranslation } from 'react-i18next';
+import { equals } from 'ramda';
 
 import { Typography } from '@mui/material';
 
@@ -12,7 +13,7 @@ import { Tooltip } from '../../components';
 import { LegendProps } from '../Legend/models';
 import { Legend as LegendComponent } from '../Legend';
 import { getValueByUnit } from '../common/utils';
-import { labelNoDataFound } from '../translatedLabels';
+import { labelNoDataFound as defaultlabelNoDataFound } from '../translatedLabels';
 
 import { BarStackProps } from './models';
 import { useBarStackStyles } from './BarStack.styles';
@@ -35,7 +36,8 @@ const BarStack = ({
   unit = 'number',
   displayValues,
   variant = 'vertical',
-  legendDirection = 'column'
+  legendDirection = 'column',
+  labelNoDataFound = defaultlabelNoDataFound
 }: BarStackProps & { height: number; width: number }): JSX.Element => {
   const { t } = useTranslation();
   const { classes } = useBarStackStyles();
@@ -90,7 +92,7 @@ const BarStack = ({
       >
         {title && (
           <div className={classes.title} data-testid="Title" ref={titleRef}>
-            {`${numeral(total).format('0a').toUpperCase()} `} {title}
+            {`${numeral(total).format('0a').toUpperCase()} `} {t(title)}
           </div>
         )}
         <div
@@ -117,6 +119,20 @@ const BarStack = ({
                 {(barStacks) =>
                   barStacks.map((barStack) =>
                     barStack.bars.map((bar) => {
+                      const shouldDisplayValues = (): boolean => {
+                        if (bar.height < 10) {
+                          return false;
+                        }
+
+                        return (
+                          (equals(unit, 'number') && bar.width > 10) ||
+                          (equals(unit, 'percentage') && bar.width > 25)
+                        );
+                      };
+
+                      const TextX = bar.x + bar.width / 2;
+                      const TextY = bar.y + bar.height / 2;
+
                       const onClick = (): void => {
                         onSingleBarClick?.(bar);
                       };
@@ -144,40 +160,38 @@ const BarStack = ({
                             isVerticalBar ? 'right-start' : 'bottom-start'
                           }
                         >
-                          <g data-testid={bar.key}>
+                          <g data-testid={bar.key} onClick={onClick}>
                             <rect
+                              cursor="pointer"
                               fill={bar.color}
                               height={
                                 isVerticalBar ? bar.height - 1 : bar.height
                               }
                               key={`bar-stack-${barStack.index}-${bar.index}`}
-                              ry={5}
+                              ry={10}
                               width={isVerticalBar ? bar.width : bar.width - 1}
                               x={bar.x}
                               y={bar.y}
-                              onClick={onClick}
                             />
-                            {displayValues &&
-                              bar.height > 10 &&
-                              bar.width > 10 && (
-                                <Text
-                                  cursor="pointer"
-                                  data-testid="value"
-                                  fill="#000"
-                                  fontSize={12}
-                                  textAnchor="middle"
-                                  verticalAnchor="middle"
-                                  x={bar.x + bar.width / 2}
-                                  y={bar.y + bar.height / 2}
-                                >
-                                  {getValueByUnit({
-                                    total,
-                                    unit,
-                                    value:
-                                      barStack.bars[0].bar.data[barStack.key]
-                                  })}
-                                </Text>
-                              )}
+                            {displayValues && shouldDisplayValues() && (
+                              <Text
+                                cursor="pointer"
+                                data-testid="value"
+                                fill="#000"
+                                fontSize={12}
+                                fontWeight={600}
+                                textAnchor="middle"
+                                verticalAnchor="middle"
+                                x={TextX}
+                                y={TextY}
+                              >
+                                {getValueByUnit({
+                                  total,
+                                  unit,
+                                  value: barStack.bars[0].bar.data[barStack.key]
+                                })}
+                              </Text>
+                            )}
                           </g>
                         </Tooltip>
                       );

package/src/Graph/BarStack/models.ts

@@ -10,6 +10,7 @@ export type BarStackProps = {
   data: Array<BarType>;
   displayLegend?: boolean;
   displayValues?: boolean;
+  labelNoDataFound?: string;
   legendDirection?: 'row' | 'column';
   onSingleBarClick?: (barData) => void;
   size?: number;

package/src/Graph/BarStack/useResponsiveBarStack.ts

@@ -55,7 +55,7 @@ const useResponsiveBarStack = ({
   const verticalGap = heightOfTitle > 0 ? 8 : 0;
 
   const svgWrapperWidth = isVerticalBar
-    ? size + 24
+    ? size + 36
     : width - widthOfLegend - horizontalGap;
 
   const svgContainerSize = {
@@ -72,8 +72,7 @@ const useResponsiveBarStack = ({
 
   const yScale = isVerticalBar
     ? scaleLinear({
-        domain: [0, total],
-        nice: true
+        domain: [0, total]
       })
     : scaleBand({
         domain: [0, 0],
@@ -86,8 +85,7 @@ const useResponsiveBarStack = ({
         padding: 0
       })
     : scaleLinear({
-        domain: [0, total],
-        nice: true
+        domain: [0, total]
       });
 
   const keys = pluck('label', data);

package/src/Graph/PieChart/ResponsivePie.tsx

@@ -13,7 +13,7 @@ import { Tooltip } from '../../components';
 import { Legend as LegendComponent } from '../Legend';
 import { LegendProps } from '../Legend/models';
 import { getValueByUnit } from '../common/utils';
-import { labelNoDataFound } from '../translatedLabels';
+import { labelNoDataFound as defaultlabelNoDataFound } from '../translatedLabels';
 
 import { PieProps } from './models';
 import { usePieStyles } from './PieChart.styles';
@@ -54,7 +54,8 @@ const ResponsivePie = ({
   onArcClick,
   displayValues,
   TooltipContent,
-  legendDirection = 'column'
+  legendDirection = 'column',
+  labelNoDataFound = defaultlabelNoDataFound
 }: PieProps & { height: number; width: number }): JSX.Element => {
   const { t } = useTranslation();
   const theme = useTheme();
@@ -109,7 +110,7 @@ const ResponsivePie = ({
       >
         {equals(variant, 'pie') && title && (
           <div className={classes.title} data-testid="Title" ref={titleRef}>
-            {`${numeral(total).format('0a').toUpperCase()} `} {title}
+            {`${numeral(total).format('0a').toUpperCase()} `} {t(title)}
           </div>
         )}
         <div
@@ -178,6 +179,7 @@ const ResponsivePie = ({
                       >
                         <g data-testid={arc.data.label} onClick={onClick}>
                           <path
+                            cursor="pointer"
                             d={pie.path(arc) as string}
                             fill={arc.data.color}
                           />
@@ -189,6 +191,7 @@ const ResponsivePie = ({
                                 dy=".33em"
                                 fill="#000"
                                 fontSize={12}
+                                fontWeight={600}
                                 pointerEvents="none"
                                 textAnchor="middle"
                                 x={x}
@@ -224,7 +227,7 @@ const ResponsivePie = ({
                     fill={theme.palette.text.primary}
                     textAnchor="middle"
                   >
-                    {title}
+                    {t(title)}
                   </Text>
                 </>
               )}

package/src/Graph/PieChart/models.ts

@@ -11,6 +11,7 @@ export interface PieProps {
   displayLegend?: boolean;
   displayValues?: boolean;
   innerRadius?: number;
+  labelNoDataFound?: string;
   legendDirection?: 'row' | 'column';
   onArcClick?: (ardata) => void;
   title?: string;

package/src/Graph/PieChart/useResponsivePie.ts

@@ -41,12 +41,11 @@ export const useResponsivePie = ({
   const horizontalGap = widthOfLegend > 0 ? 16 : 0;
   const verticalGap = heightOfTitle > 0 ? 8 : 0;
 
-  const svgWrapperWidth = width - widthOfLegend - horizontalGap;
-
   const svgContainerSize = Math.min(
     height - heightOfTitle - verticalGap,
     width - widthOfLegend - horizontalGap
   );
+  const svgWrapperWidth = svgContainerSize;
 
   const outerRadius = Math.min(32, svgContainerSize / 6);
 

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

@@ -1,3 +1,5 @@
+import { useState } from 'react';
+
 import { Button, Typography } from '@mui/material';
 
 import { ListingVariant } from '@centreon/ui-context';
@@ -20,20 +22,20 @@ const LargeText = (): JSX.Element => (
   </Typography>
 );
 
-const generateSubItems = (parentIndex: number): Array<unknown> => {
+const tenElements = new Array(10).fill(0);
+
+const generateSubItems = (): Array<unknown> => {
   return tenElements.map((__, subIndex) => ({
     active: false,
-    description: `Sub item ${subIndex + (parentIndex + 10) * 10} description`,
+    description: `Sub item ${subIndex * 10} description`,
     disableCheckbox: false,
     disableRow: false,
-    id: subIndex + (parentIndex + 10) * 10,
-    name: `Sub Item ${subIndex + (parentIndex + 10) * 10}`,
+    id: subIndex * 10,
+    name: `Sub Item ${subIndex * 10}`,
     selected: false
   }));
 };
 
-const tenElements = new Array(10).fill(0);
-
 const listingWithSubItems = tenElements.map((_, index) => ({
   active: false,
   description: `Entity ${index}`,
@@ -42,9 +44,22 @@ const listingWithSubItems = tenElements.map((_, index) => ({
   id: index,
   name: `E${index}`,
   selected: false,
-  subItems: index % 2 === 0 ? generateSubItems(index) : undefined
+  subItems: index % 2 === 0 ? generateSubItems() : undefined
 }));
 
+const listingWithSubItems3Rows = Array(3)
+  .fill(0)
+  .map((_, index) => ({
+    active: false,
+    description: `Entity ${index}`,
+    disableCheckbox: false,
+    disableRow: false,
+    id: index,
+    name: `E${index}`,
+    selected: false,
+    subItems: index % 2 === 0 ? generateSubItems() : undefined
+  }));
+
 const defaultColumn = [
   {
     getFormattedString: ({ name }): string => name,
@@ -112,26 +127,50 @@ const mountListingResponsive = (listingVariant: ListingVariant): void => {
   });
 };
 
-const mountListingForSubItems = (): void => {
+interface TestComponentProps {
+  canCheckSubItems?: boolean;
+  isSmallListing?: boolean;
+}
+
+const TestComponent = ({
+  isSmallListing = false,
+  canCheckSubItems = false
+}: TestComponentProps): JSX.Element => {
+  const [selectedRows, setSelectedRows] = useState([]);
+
+  return (
+    <Listing
+      checkable
+      columns={columnsWithSubItems}
+      currentPage={1}
+      limit={10}
+      rows={isSmallListing ? listingWithSubItems3Rows : listingWithSubItems}
+      selectedRows={selectedRows}
+      subItems={{
+        canCheckSubItems,
+        enable: true,
+        getRowProperty: () => 'subItems',
+        labelCollapse: 'Collapse',
+        labelExpand: 'Expand'
+      }}
+      totalRows={10}
+      onSelectRows={setSelectedRows}
+    />
+  );
+};
+
+const mountListingForSubItems = ({
+  isSmallListing = false,
+  canCheckSubItems = false
+}: TestComponentProps): void => {
   cy.viewport('macbook-13');
 
   cy.mount({
     Component: (
       <div style={{ height: '100vh' }}>
-        <Listing
-          checkable
-          columns={columnsWithSubItems}
-          currentPage={1}
-          limit={10}
-          rows={listingWithSubItems}
-          subItems={{
-            canCheckSubItems: false,
-            enable: true,
-            getRowProperty: () => 'subItems',
-            labelCollapse: 'Collapse',
-            labelExpand: 'Expand'
-          }}
-          totalRows={10}
+        <TestComponent
+          canCheckSubItems={canCheckSubItems}
+          isSmallListing={isSmallListing}
         />
       </div>
     )
@@ -139,37 +178,107 @@ const mountListingForSubItems = (): void => {
 };
 
 describe('Listing', () => {
-  it('expands the row when the corresponding icon si clicked', () => {
-    mountListingForSubItems();
+  describe('Sub items', () => {
+    it('expands the row when the corresponding icon is clicked', () => {
+      mountListingForSubItems({});
+
+      cy.contains('E0').should('be.visible');
 
-    cy.contains('E0').should('be.visible');
+      expandedItems.forEach((index) => {
+        const subItems = generateSubItems(index);
 
-    expandedItems.forEach((index) => {
-      const subItems = generateSubItems(index);
+        cy.findByLabelText(`Expand ${index}`).click();
 
-      cy.findByLabelText(`Expand ${index}`).click();
+        cy.findByLabelText(`Collapse ${index}`).should('exist');
 
-      cy.findByLabelText(`Collapse ${index}`).should('exist');
+        subItems.forEach(({ name, description }) => {
+          cy.contains(name).should('exist');
+          cy.contains(description).should('exist');
+        });
 
-      subItems.forEach(({ name, description }) => {
-        cy.contains(name).should('exist');
-        cy.contains(description).should('exist');
+        cy.findByLabelText(`Collapse ${index}`).click();
       });
+
+      cy.makeSnapshot();
     });
 
-    cy.makeSnapshot();
-  });
+    it('collapses the row when the corresponding icon is clicked', () => {
+      mountListingForSubItems({});
 
-  it('collapses the row when the corresponding icon si clicked', () => {
-    mountListingForSubItems();
+      cy.findByLabelText(`Expand 0`).click();
 
-    cy.contains('Sub item 100').should('be.visible');
+      cy.contains('Sub item 10').should('be.visible');
 
-    cy.findByLabelText('Collapse 0').click();
+      cy.findByLabelText('Collapse 0').click();
 
-    cy.contains('Sub item 100').should('not.exist');
+      cy.contains('Sub item 10').should('not.exist');
 
-    cy.makeSnapshot();
+      cy.makeSnapshot();
+    });
+
+    it('displays only one row as hovered when mutilple rows are expanded and a sub item row is hovered', () => {
+      mountListingForSubItems({ isSmallListing: true });
+
+      cy.findByLabelText('Expand 2').click();
+      cy.findByLabelText('Expand 0').click();
+
+      cy.findByLabelText('Collapse 0').should('be.visible');
+      cy.findByLabelText('Collapse 2').should('be.visible');
+
+      cy.contains('Sub Item 0').realHover();
+
+      cy.get('[data-isHovered="true"]').should('have.length', 1);
+      cy.get('[data-isHovered="true"]').contains('Sub Item 0').should('exist');
+
+      cy.findByLabelText('Collapse 0').click();
+      cy.findByLabelText('Collapse 2').click();
+    });
+
+    it('selects displayed rows when a row is selected and another row is selected with the shift key', () => {
+      mountListingForSubItems({ canCheckSubItems: true, isSmallListing: true });
+
+      cy.findByLabelText('Expand 0').click();
+
+      cy.findByLabelText('Collapse 0').should('be.visible');
+
+      cy.findAllByLabelText('Select row 0').eq(0).click();
+      cy.get('body').type('{shift}', { release: false });
+      cy.findByLabelText('Select row 50').eq(0).click();
+
+      cy.findAllByLabelText('Select row 0').eq(0).should('be.checked');
+      cy.findAllByLabelText('Select row 0').eq(1).should('be.checked');
+      cy.findByLabelText('Select row 10').should('be.checked');
+      cy.findByLabelText('Select row 20').should('be.checked');
+      cy.findByLabelText('Select row 30').should('be.checked');
+      cy.findByLabelText('Select row 40').should('be.checked');
+      cy.findByLabelText('Select row 50').should('be.checked');
+
+      cy.findByLabelText('Collapse 0').click();
+    });
+
+    it('selects displayed rows when the corresponding checkbox is clicked', () => {
+      mountListingForSubItems({ canCheckSubItems: true, isSmallListing: true });
+
+      cy.findByLabelText('Expand 0').click();
+
+      cy.findByLabelText('Collapse 0').should('be.visible');
+
+      cy.findAllByLabelText('Select all').eq(0).click();
+
+      cy.findAllByLabelText('Select row 0').eq(0).should('be.checked');
+      tenElements.forEach((_, index) => {
+        if (index === 0) {
+          cy.findAllByLabelText('Select row 0').eq(1).should('be.checked');
+
+          return;
+        }
+        cy.findByLabelText(`Select row ${index * 10}`).should('be.checked');
+      });
+      cy.findByLabelText('Select row 1').should('be.checked');
+      cy.findByLabelText('Select row 2').should('be.checked');
+
+      cy.findByLabelText('Collapse 0').click();
+    });
   });
 
   it('displays the last column on several lines in compact mode when the isResponsive prop is set', () => {

package/src/Listing/Row/Row.tsx

@@ -197,7 +197,7 @@ const Row = memo<RowProps>(
   }
 );
 
-const IntersectionRow = (props: Props): JSX.Element => {
+const IntersectionRow = ({ isHovered, ...rest }: Props): JSX.Element => {
   const rowRef = useRef<HTMLDivElement | null>(null);
   const theme = useTheme();
   const { isInViewport, setElement } = useViewportIntersection({
@@ -214,8 +214,12 @@ const IntersectionRow = (props: Props): JSX.Element => {
   }, [getFirstCellElement()]);
 
   return (
-    <div className={classes.intersectionRow} ref={rowRef}>
-      <Row {...props} isInViewport={isInViewport} />
+    <div
+      className={classes.intersectionRow}
+      data-isHovered={isHovered}
+      ref={rowRef}
+    >
+      <Row {...rest} isHovered={isHovered} isInViewport={isInViewport} />
     </div>
   );
 };

package/src/Listing/index.tsx

@@ -18,7 +18,6 @@ import {
   map,
   not,
   pick,
-  pluck,
   prop,
   propEq,
   reduce,
@@ -58,6 +57,8 @@ import { SkeletonLoader } from './Row/SkeletonLoaderRows';
 import { ListingHeader } from './Header';
 import { subItemsPivotsAtom } from './tableAtoms';
 
+const subItemPrefixKey = 'listing';
+
 const getVisibleColumns = ({
   columnConfiguration,
   columns
@@ -140,7 +141,7 @@ const defaultColumnConfiguration = {
 
 export const performanceRowsLimit = 60;
 
-const Listing = <TRow extends { id: RowId }>({
+const Listing = <TRow extends { id: RowId; internalListingParentId?: RowId }>({
   customListingComponent,
   displayCustomListing,
   limit = 10,
@@ -211,6 +212,21 @@ const Listing = <TRow extends { id: RowId }>({
 
   const subItemsPivots = useAtomValue(subItemsPivotsAtom);
 
+  const allSubItemIds = React.useMemo(
+    () =>
+      reduce<TRow | number, Array<string | number>>(
+        (acc, row) => [
+          ...acc,
+          ...(row[subItems?.getRowProperty() || ''] || []).map(
+            ({ id }) => `${subItemPrefixKey}_${getId(row)}_${id}`
+          )
+        ],
+        [],
+        rows
+      ),
+    [rows, subItems]
+  );
+
   const rowsToDisplay = React.useMemo(
     () =>
       subItems?.enable
@@ -220,7 +236,14 @@ const Listing = <TRow extends { id: RowId }>({
                 row[subItems.getRowProperty()] &&
                 subItemsPivots.includes(row.id)
               ) {
-                return [...acc, row, ...row[subItems.getRowProperty()]];
+                return [
+                  ...acc,
+                  row,
+                  ...row[subItems.getRowProperty()].map((subRow) => ({
+                    ...subRow,
+                    internalListingParentId: row.id
+                  }))
+                ];
               }
 
               return [...acc, row];
@@ -232,6 +255,24 @@ const Listing = <TRow extends { id: RowId }>({
     [rows, subItemsPivots, subItems]
   );
 
+  const getSubItemRowId = React.useCallback((row: TRow) => {
+    return `${subItemPrefixKey}_${row.internalListingParentId}_${row.id}`;
+  }, []);
+
+  const getIsSubItem = React.useCallback(
+    (row: TRow) => {
+      return allSubItemIds.includes(getSubItemRowId(row));
+    },
+    [allSubItemIds]
+  );
+
+  const getRowId = React.useCallback(
+    (row: TRow) => {
+      return getIsSubItem(row) ? getSubItemRowId(row) : getId(row);
+    },
+    [allSubItemIds]
+  );
+
   const { classes } = useListingStyles({
     dataStyle,
     getGridTemplateColumn,
@@ -255,7 +296,7 @@ const Listing = <TRow extends { id: RowId }>({
       event.target.checked &&
       event.target.getAttribute('data-indeterminate') === 'false'
     ) {
-      onSelectRows(reject(disableRowCheckCondition, rows));
+      onSelectRows(reject(disableRowCheckCondition, rowsToDisplay));
       setLastSelectionIndex(null);
 
       return;
@@ -327,7 +368,11 @@ const Listing = <TRow extends { id: RowId }>({
   const selectRowsWithShiftKey = (selectedRowIndex: number): void => {
     const lastSelectedIndex = lastSelectionIndex as number;
     if (isNil(shiftKeyDownRowPivot)) {
-      const selectedRowsFromTheStart = slice(0, selectedRowIndex + 1, rows);
+      const selectedRowsFromTheStart = slice(
+        0,
+        selectedRowIndex + 1,
+        rowsToDisplay
+      );
 
       onSelectRows(reject(disableRowCheckCondition, selectedRowsFromTheStart));
 
@@ -336,7 +381,10 @@ const Listing = <TRow extends { id: RowId }>({
 
     const selectedRowsIndex = map(
       (row) =>
-        findIndex((listingRow) => equals(getId(row), getId(listingRow)), rows),
+        findIndex(
+          (listingRow) => equals(getId(row), getId(listingRow)),
+          rowsToDisplay
+        ),
       selectedRows
     ).sort(subtract);
 
@@ -344,7 +392,7 @@ const Listing = <TRow extends { id: RowId }>({
       const newSelection = slice(
         selectedRowIndex,
         (lastSelectionIndex as number) + 1,
-        rows
+        rowsToDisplay
       );
       onSelectRows(
         reject(
@@ -363,7 +411,11 @@ const Listing = <TRow extends { id: RowId }>({
       return;
     }
 
-    const newSelection = slice(lastSelectedIndex, selectedRowIndex + 1, rows);
+    const newSelection = slice(
+      lastSelectedIndex,
+      selectedRowIndex + 1,
+      rowsToDisplay
+    );
     onSelectRows(
       reject(
         disableRowCheckCondition,
@@ -387,7 +439,7 @@ const Listing = <TRow extends { id: RowId }>({
 
     const selectedRowIndex = findIndex(
       (listingRow) => equals(getId(row), getId(listingRow)),
-      rows
+      rowsToDisplay
     );
 
     if (isShiftKeyDown) {
@@ -414,10 +466,10 @@ const Listing = <TRow extends { id: RowId }>({
   };
 
   const hoverRow = (row): void => {
-    if (equals(hoveredRowId, getId(row))) {
+    if (equals(hoveredRowId, getRowId(row))) {
       return;
     }
-    setHoveredRowId(getId(row));
+    setHoveredRowId(getRowId(row));
   };
 
   const clearHoveredRow = (): void => {
@@ -428,8 +480,6 @@ const Listing = <TRow extends { id: RowId }>({
     return selectedRowsInclude(row);
   };
 
-  const emptyRows = limit - Math.min(limit, totalRows - currentPage * limit);
-
   const changeLimit = (updatedLimit: string): void => {
     onLimitChange?.(Number(updatedLimit));
   };
@@ -450,19 +500,6 @@ const Listing = <TRow extends { id: RowId }>({
 
   const areColumnsEditable = not(isNil(onSelectColumns));
 
-  const allSubItemIds = React.useMemo(
-    () =>
-      reduce<TRow | number, Array<string | number>>(
-        (acc, row) => [
-          ...acc,
-          ...pluck('id', row[subItems?.getRowProperty() || ''] || [])
-        ],
-        [],
-        rows
-      ),
-    [rows, subItems]
-  );
-
   return (
     <div className={classes.listingContainer}>
       {loading && rows.length > 0 && (
@@ -534,7 +571,7 @@ const Listing = <TRow extends { id: RowId }>({
                     listingVariant={listingVariant}
                     memoProps={headerMemoProps}
                     predefinedRowsSelection={predefinedRowsSelection}
-                    rowCount={limit - emptyRows}
+                    rowCount={rowsToDisplay.length}
                     selectedRowCount={selectedRows.length}
                     sortField={sortField}
                     sortOrder={sortOrder}
@@ -551,8 +588,10 @@ const Listing = <TRow extends { id: RowId }>({
                   >
                     {rowsToDisplay.map((row, index) => {
                       const isRowSelected = isSelected(row);
-                      const isRowHovered = equals(hoveredRowId, getId(row));
-                      const isSubItem = allSubItemIds.includes(row.id);
+                      const isSubItem = allSubItemIds.includes(
+                        getSubItemRowId(row)
+                      );
+                      const isRowHovered = equals(hoveredRowId, getRowId(row));
 
                       return (
                         <ListingRow
@@ -569,7 +608,7 @@ const Listing = <TRow extends { id: RowId }>({
                           key={
                             gte(limit, performanceRowsLimit)
                               ? `row_${index}`
-                              : getId(row)
+                              : getRowId(row)
                           }
                           lastSelectionIndex={lastSelectionIndex}
                           limit={limit}
@@ -580,9 +619,13 @@ const Listing = <TRow extends { id: RowId }>({
                           subItemsPivots={subItemsPivots}
                           tabIndex={-1}
                           visibleColumns={visibleColumns}
-                          onClick={(): void => {
-                            onRowClick(row);
-                          }}
+                          onClick={
+                            isSubItem
+                              ? undefined
+                              : (): void => {
+                                  onRowClick(row);
+                                }
+                          }
                           onFocus={(): void => hoverRow(row)}
                           onMouseOver={(): void => hoverRow(row)}
                         >

package/src/Listing/useStyleTable.ts

@@ -53,6 +53,7 @@ const useStyleTable = ({
     const checkbox = checkable ? 'fit-content(1rem) ' : ''; // SelectAction (checkbox) cell adjusts to content
 
     const columnTemplate = currentVisibleColumns
+      ?.filter((column) => column)
       ?.map(({ width, shortLabel }) => {
         if (!isNil(shortLabel)) {
           return 'min-content';