@centreon/ui 24.4.33 → 24.4.34

package/package.json

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

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

@@ -377,9 +377,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

@@ -123,9 +123,9 @@ export interface Props<TRow> {
   subItems?: {
     canCheckSubItems: boolean;
     enable: boolean;
+    getRowProperty: (row?) => string;
     labelCollapse: string;
     labelExpand: string;
-    rowProperty: string;
   };
   totalRows?: number;
   viewerModeConfiguration?: ViewerModeConfiguration;
@@ -180,9 +180,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({
@@ -215,10 +215,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];
@@ -454,7 +454,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
@@ -632,7 +632,9 @@ const Listing = <TRow extends { id: RowId }>({
                               listingVariant={listingVariant}
                               row={row}
                               rowColorConditions={rowColorConditions}
-                              subItemsRowProperty={subItems?.rowProperty}
+                              subItemsRowProperty={subItems?.getRowProperty(
+                                row
+                              )}
                             />
                           ))}
                         </ListingRow>

package/src/components/Modal/Modal.styles.ts

@@ -49,13 +49,14 @@ const useStyles = makeStyles<{
     }
   },
   modalActions: {
-    bottom: 0,
+    '&[data-fixed="true"]': {
+      position: 'fixed'
+    },
     bottom: theme.spacing(2),
     display: 'flex',
     flexDirection: 'row',
     gap: theme.spacing(2),
     justifyContent: 'flex-end',
-    position: 'fixed',
     right: theme.spacing(2)
   },
   modalBody: {

package/src/components/Modal/ModalActions.tsx

@@ -8,6 +8,7 @@ export type ModalActionsProps = {
   children?: React.ReactNode;
   disabled?: boolean;
   isDanger?: boolean;
+  isFixed?: boolean;
   labels?: ModalActionsLabels;
   onCancel?: () => void;
   onConfirm?: () => void;
@@ -24,12 +25,13 @@ const ModalActions = ({
   onCancel,
   onConfirm,
   isDanger = false,
-  disabled
+  disabled,
+  isFixed
 }: ModalActionsProps): ReactElement => {
   const { classes } = useStyles();
 
   return (
-    <div className={classes.modalActions}>
+    <div className={classes.modalActions} data-fixed={isFixed}>
       {children || (
         <>
           <Button