@centreon/ui 24.4.10 → 24.4.11

package/package.json

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

package/src/Button/Icon/index.tsx

@@ -21,7 +21,7 @@ type Props = {
   ariaLabel?: string;
   className?: string;
   onClick: (event) => void;
-  title?: string;
+  title?: string | JSX.Element;
   tooltipClassName?: string;
   tooltipPlacement?:
     | 'bottom'

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

@@ -77,9 +77,9 @@ const mountListing = (): void => {
           subItems={{
             canCheckSubItems: false,
             enable: true,
+            getRowProperty: () => 'subItems',
             labelCollapse: 'Collapse',
-            labelExpand: 'Expand',
-            rowProperty: 'subItems'
+            labelExpand: 'Expand'
           }}
           totalRows={10}
         />

package/src/Listing/index.stories.tsx

@@ -387,9 +387,9 @@ export const ListingWithSubItems = {
     subItems: {
       canCheckSubItems: false,
       enable: true,
+      getRowProperty: () => 'subItems',
       labelCollapse: 'Collapse',
-      labelExpand: 'Expand',
-      rowProperty: 'subItems'
+      labelExpand: 'Expand'
     },
     totalRows: 10
   },

package/src/Listing/index.tsx

@@ -121,9 +121,9 @@ export interface Props<TRow> {
   subItems?: {
     canCheckSubItems: boolean;
     enable: boolean;
+    getRowProperty: (row?) => string;
     labelCollapse: string;
     labelExpand: string;
-    rowProperty: string;
   };
   totalRows?: number;
   viewerModeConfiguration?: ViewerModeConfiguration;
@@ -176,9 +176,9 @@ const Listing = <TRow extends { id: RowId }>({
   subItems = {
     canCheckSubItems: false,
     enable: false,
+    getRowProperty: () => '',
     labelCollapse: 'Collapse',
-    labelExpand: 'Expand',
-    rowProperty: ''
+    labelExpand: 'Expand'
   }
 }: Props<TRow>): JSX.Element => {
   const currentVisibleColumns = getVisibleColumns({
@@ -211,10 +211,10 @@ const Listing = <TRow extends { id: RowId }>({
         ? reduce<TRow, Array<TRow>>(
             (acc, row): Array<TRow> => {
               if (
-                row[subItems.rowProperty] &&
+                row[subItems.getRowProperty()] &&
                 subItemsPivots.includes(row.id)
               ) {
-                return [...acc, row, ...row[subItems.rowProperty]];
+                return [...acc, row, ...row[subItems.getRowProperty()]];
               }
 
               return [...acc, row];
@@ -449,7 +449,7 @@ const Listing = <TRow extends { id: RowId }>({
       reduce<TRow | number, Array<string | number>>(
         (acc, row) => [
           ...acc,
-          ...pluck('id', row[subItems?.rowProperty || ''] || [])
+          ...pluck('id', row[subItems?.getRowProperty() || ''] || [])
         ],
         [],
         rows
@@ -620,7 +620,7 @@ const Listing = <TRow extends { id: RowId }>({
                             listingVariant={listingVariant}
                             row={row}
                             rowColorConditions={rowColorConditions}
-                            subItemsRowProperty={subItems?.rowProperty}
+                            subItemsRowProperty={subItems?.getRowProperty(row)}
                           />
                         ))}
                       </ListingRow>