@centreon/ui 25.5.1 → 25.5.3

package/package.json

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

package/src/Listing/ActionBar/index.tsx

@@ -29,7 +29,7 @@ const useStyles = makeStyles<StyleProps>()(
     },
     actions: {
       flex: 1,
-      padding: theme.spacing(1, 0)
+      padding: theme.spacing(1, 1, 1, 0)
     },
     container: {
       alignItems: 'center',

package/src/Listing/Listing.styles.ts

@@ -6,13 +6,13 @@ const loadingIndicatorHeight = 3;
 
 interface StylesProps {
   dataStyle: TableStyle;
-  getGridTemplateColumn: string;
+  gridTemplateColumn: string;
   isResponsive: string;
   rows: Array<unknown>;
 }
 
 const useListingStyles = makeStyles<StylesProps>()(
-  (theme, { dataStyle, getGridTemplateColumn, rows, isResponsive }) => ({
+  (theme, { dataStyle, gridTemplateColumn, rows, isResponsive }) => ({
     actionBar: {
       alignItems: 'center',
       display: 'flex'
@@ -51,7 +51,7 @@ const useListingStyles = makeStyles<StylesProps>()(
       },
       alignItems: 'center',
       display: 'grid',
-      gridTemplateColumns: getGridTemplateColumn,
+      gridTemplateColumns: gridTemplateColumn,
       gridTemplateRows: `${theme.spacing(dataStyle.header.height / 8)} repeat(${
         rows?.length || 1
       }, ${isResponsive ? 'auto' : `${dataStyle.body.height}px`})`,

package/src/Listing/index.tsx

@@ -62,7 +62,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 +207,13 @@ const Listing = <
     columnConfiguration,
     columns
   });
-  const { dataStyle, getGridTemplateColumn } = useStyleTable({
-    checkable,
-    currentVisibleColumns,
+  const { dataStyle } = useStyleTable({
     listingVariant
   });
+  const gridTemplateColumn = useColumnStyle({
+    checkable,
+    currentVisibleColumns
+  });
 
   const { t } = useTranslation();
 
@@ -291,7 +293,7 @@ const Listing = <
 
   const { classes } = useListingStyles({
     dataStyle,
-    getGridTemplateColumn,
+    gridTemplateColumn,
     isResponsive,
     rows: rowsToDisplay
   });

package/src/Listing/useStyleTable.ts

@@ -1,7 +1,7 @@
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 
 import { useAtomValue, useSetAtom } from 'jotai';
-import { equals, isNil, pick, type } from 'ramda';
+import { equals, isEmpty, isNil, pick, type, update } from 'ramda';
 import { CSSObject } from 'tss-react';
 
 import { Theme } from '@mui/material';
@@ -12,14 +12,11 @@ import { Column, TableStyleAtom as Style } from './models';
 import { tableStyleAtom, tableStyleDerivedAtom } from './tableAtoms';
 
 interface TableStyle {
-  checkable?: boolean;
-  currentVisibleColumns?: Array<Column>;
   listingVariant?: ListingVariant;
 }
 
 interface TableStyleState {
   dataStyle: Style;
-  getGridTemplateColumn: string;
 }
 
 const isCompactMode = equals<ListingVariant | undefined>(
@@ -40,35 +37,11 @@ export const getTextStyleByViewMode = ({
     theme.typography[isCompactMode(listingVariant) ? 'body2' : 'body1']
   );
 
-const useStyleTable = ({
-  checkable,
-  currentVisibleColumns,
-  listingVariant
-}: TableStyle): TableStyleState => {
+const useStyleTable = ({ listingVariant }: TableStyle): TableStyleState => {
   const dataStyle = useAtomValue(tableStyleAtom);
 
   const updateStyleTable = useSetAtom(tableStyleDerivedAtom);
 
-  const getGridTemplateColumn = (): string => {
-    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';
-        }
-        if (isNil(width)) {
-          return 'auto';
-        }
-
-        return equals(type(width), 'Number') ? `${width}px` : width;
-      })
-      .join(' ');
-
-    return `${checkbox}${columnTemplate}`;
-  };
-
   useEffect(() => {
     if (listingVariant) {
       updateStyleTable({ listingVariant });
@@ -76,9 +49,62 @@ const useStyleTable = ({
   }, [listingVariant]);
 
   return {
-    dataStyle,
-    getGridTemplateColumn: getGridTemplateColumn()
+    dataStyle
   };
 };
 
 export default useStyleTable;
+
+interface UseColumnStyleProps {
+  checkable?: boolean;
+  currentVisibleColumns?: Array<Column>;
+}
+
+export const useColumnStyle = ({
+  checkable,
+  currentVisibleColumns
+}: UseColumnStyleProps): string => {
+  const gridTemplateColumn = useMemo((): string => {
+    const checkbox = checkable ? 'fit-content(1rem) ' : ''; // SelectAction (checkbox) cell adjusts to content
+
+    const columnTemplate: Array<string> =
+      currentVisibleColumns
+        ?.filter((column) => column)
+        ?.map(({ width, shortLabel }) => {
+          if (!isNil(shortLabel)) {
+            return 'min-content';
+          }
+          if (isNil(width)) {
+            return 'auto';
+          }
+
+          return (
+            equals(type(width), 'Number') ? `${width}px` : width
+          ) as string;
+        }) || [];
+
+    const hasOnlyContainerResponsiveColumns =
+      !isEmpty(columnTemplate) &&
+      columnTemplate.every(
+        (width: string) =>
+          width.includes('auto') ||
+          width.includes('fr') ||
+          width.includes('%') ||
+          width.includes('px')
+      );
+
+    if (!hasOnlyContainerResponsiveColumns) {
+      const fixedColumnTemplate = update(
+        columnTemplate.length - 1,
+        'auto',
+        columnTemplate
+      );
+
+      return `${checkbox}${fixedColumnTemplate.join(' ')}`;
+    }
+
+    return `${checkbox}${columnTemplate.join(' ')}`;
+  }, [checkable, currentVisibleColumns]);
+
+  return gridTemplateColumn;
+};