@centreon/ui 25.1.6 → 25.1.8

package/package.json

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

package/src/Dashboard/Dashboard.styles.ts

@@ -148,10 +148,10 @@ export const useDashboardItemStyles = makeStyles<{ hasHeader: boolean }>()(
       '&:hover': {
         backgroundColor: theme.palette.action.hover
       },
-      '&[data-canMove="false"]': {
+      '&[data-can-move="false"]': {
         cursor: 'default'
       },
-      '&[data-canMove="true"]': {
+      '&[data-can-move="true"]': {
         cursor: 'move'
       },
       padding: theme.spacing(0, 1.5),

package/src/Dashboard/Item.tsx

@@ -124,7 +124,7 @@ const Item = forwardRef<HTMLDivElement, DashboardItemProps>(
                     {childrenHeader && (
                       <div
                         className={classes.widgetHeader}
-                        data-canMove={canControl}
+                        data-can-move={canControl}
                       >
                         {canControl && (
                           <div

package/src/Dialog/Confirm/index.tsx

@@ -1,4 +1,4 @@
-import { ButtonProps, DialogContentText, Typography } from '@mui/material';
+import { ButtonProps, DialogContentText, DialogContentTextProps, Typography } from '@mui/material';
 
 import Dialog, { Props as DialogProps } from '..';
 
@@ -8,6 +8,7 @@ type Props = DialogProps & {
   labelSecondMessage?: string | null;
   restCancelButtonProps?: ButtonProps;
   restConfirmButtonProps?: ButtonProps;
+  dialogContentTextProps?:DialogContentTextProps
 };
 
 const Confirm = ({
@@ -16,6 +17,7 @@ const Confirm = ({
   children,
   restCancelButtonProps,
   restConfirmButtonProps,
+  dialogContentTextProps,
   ...rest
 }: Props): JSX.Element => (
   <Dialog
@@ -23,7 +25,7 @@ const Confirm = ({
     restConfirmButtonProps={restConfirmButtonProps}
     {...rest}
   >
-    <DialogContentText>
+    <DialogContentText {...dialogContentTextProps}>
       {labelMessage && <Typography>{labelMessage}</Typography>}
       {labelSecondMessage && <Typography>{labelSecondMessage}</Typography>}
       {children}

package/src/Dialog/Duplicate/index.tsx

@@ -56,10 +56,12 @@ const Duplicate = ({
         fullWidth
         className={classes.container}
         color="primary"
-        inputProps={{
-          'aria-label': 'Duplications',
-          max: limit,
-          min: 1
+        slotProps={{
+          htmlInput: {
+            'aria-label': 'Duplications',
+            max: limit,
+            min: 1
+          }
         }}
         label={labelInput}
         margin="dense"

package/src/Dialog/index.tsx

@@ -10,6 +10,7 @@ import {
   DialogContent,
   DialogProps,
   DialogTitle,
+  DialogTitleProps,
   Dialog as MuiDialog
 } from '@mui/material';
 
@@ -37,6 +38,7 @@ export type Props = {
   className?: string;
   confirmDisabled?: boolean;
   contentWidth?: number;
+  dialogTitleProps?:DialogTitleProps
   dialogActionsClassName?: string;
   dialogConfirmButtonClassName?: string;
   dialogContentClassName?: string;
@@ -68,6 +70,7 @@ const Dialog = ({
   confirmDisabled = false,
   cancelDisabled = false,
   submitting = false,
+  dialogTitleProps,
   dialogPaperClassName,
   dialogTitleClassName,
   dialogContentClassName,
@@ -90,7 +93,7 @@ const Dialog = ({
       {...rest}
     >
       {labelTitle && (
-        <DialogTitle className={dialogTitleClassName}>{labelTitle}</DialogTitle>
+        <DialogTitle className={dialogTitleClassName} {...dialogTitleProps}>{labelTitle}</DialogTitle>
       )}
       {children && (
         <DialogContent

package/src/Form/FormButtons.tsx

@@ -66,7 +66,7 @@ const FormButtons = (): JSX.Element => {
           {t(labelReset)}
         </Button>
         <SaveButton
-          dataTestId={labelSave}
+          data-testid={labelSave}
           disabled={not(canSubmit)}
           labelLoading={labelSaving}
           labelSave={labelSave}

package/src/Form/Inputs/Text.tsx

@@ -138,10 +138,14 @@ const Text = ({
         value={value || ''}
         onBlur={handleBlur(fieldName)}
         onChange={changeText}
-        inputProps={{
-          'data-testid': dataTestId || label,
-          'aria-label': label,
-          min: text?.min
+        textFieldSlotsAndSlotProps={{
+          slotProps: {
+            htmlInput: {
+              'data-testid': dataTestId || label,
+              'aria-label': label,
+              min: text?.min
+            }
+          }
         }}
       />
     ),

package/src/Graph/Chart/Chart.tsx

@@ -232,7 +232,7 @@ const Chart = ({
     [axis?.showGridLines]
   );
 
-  if (!isInViewport && !skipIntersectionObserver) {
+  if ((!isInViewport && !skipIntersectionObserver) || !height) {
     return (
       <Skeleton
         height={graphSvgRef?.current?.clientHeight ?? graphHeight}

package/src/Graph/SingleBar/SingleBar.tsx

@@ -1,3 +1,4 @@
+import { Skeleton } from '@mui/material';
 import { ParentSize } from '../..';
 
 import ResponsiveSingleBar from './ResponsiveSingleBar';
@@ -10,14 +11,20 @@ const SingleBar = ({ data, ...props }: SingleBarProps): JSX.Element | null => {
 
   return (
     <ParentSize>
-      {({ width, height }) => (
-        <ResponsiveSingleBar
-          {...props}
-          data={data}
-          height={height}
-          width={width}
-        />
-      )}
+      {({ width, height }) => {
+        if (!height || !width) {
+          return <Skeleton height={20} variant="rectangular" width="100%" />;
+        }
+
+        return (
+          <ResponsiveSingleBar
+            {...props}
+            data={data}
+            height={height}
+            width={width}
+          />
+        );
+      }}
     </ParentSize>
   );
 };

package/src/Icon/FlappingIcon.tsx

@@ -0,0 +1,22 @@
+import { SvgIconProps } from '@mui/material';
+
+import BaseIcon from './BaseIcon';
+
+const icon = (
+  <g>
+    <path d="M22 10.07c-2.24 0-4.01-1.04-5.72-2.04-1.61-.94-3.13-1.83-4.96-1.83s-3.18.92-4.57 1.9c-1.33 1.16-3 1.85-4.76 1.97v-.83c1.7 0 2.95-.88 4.28-1.82 1.41-1.22 3.19-2.05 5.05-2.05 1.95 0 3.8.82 5.38 1.95 1.56 1.11 3.39 1.78 5.3 1.92v.83Z" />
+    <path d="M22 14.07c-2.24 0-4.01-1.04-5.72-2.04-1.61-.94-3.13-1.83-4.96-1.83s-3.18.92-4.57 1.9c-1.33 1.16-3 1.85-4.76 1.97v-.83c1.7 0 2.95-.88 4.28-1.82 1.41-1.22 3.18-2.05 5.05-2.05 1.87 0 3.8.82 5.38 1.95 1.56 1.11 3.39 1.78 5.3 1.92v.83Z" />
+    <path d="M22 18.07c-2.24 0-4.01-1.04-5.72-2.04-1.61-.94-3.13-1.83-4.96-1.83s-3.18.92-4.57 1.9c-1.33 1.16-3 1.85-4.76 1.97v-.83c1.7 0 2.95-.88 4.28-1.82 1.41-1.22 3.18-2.07 5.05-2.05 1.87.02 3.8.82 5.38 1.95 1.56 1.11 3.39 1.78 5.3 1.92v.83Z" />
+  </g>
+);
+
+export const FlappingIcon = (props: SvgIconProps): JSX.Element => (
+  <BaseIcon
+    {...props}
+    dataTestId="FlappingIcon"
+    Icon={icon}
+    height="24"
+    viewBox="0 0 24 24"
+    width="24"
+  />
+);

package/src/Icon/index.ts

@@ -1,4 +1,5 @@
 export { DowntimeIcon } from './DowntimeIcon';
+export { FlappingIcon } from './FlappingIcon';
 export { AcknowledgementIcon } from './AcknowledgementIcon';
 export { HostIcon } from './HostIcon';
 export { ServiceIcon } from './ServiceIcon';

package/src/InputField/Number/Number.cypress.spec.tsx

@@ -68,8 +68,12 @@ describe('Number field', () => {
     initialize({
       dataTestId: 'test',
       defaultValue: 25,
-      inputProps: {
-        min: 2
+      textFieldSlotsAndSlotProps: {
+        slotProps: {
+          htmlInput: {
+            min: 2
+          }
+        }
       },
       onChange: cy.stub()
     });

package/src/InputField/Number/Number.tsx

@@ -31,7 +31,7 @@ const NumberField = ({
     defaultValue ? `${defaultValue}` : ''
   );
 
-  const { inputProps } = props;
+  const { textFieldSlotsAndSlotProps } = props;
 
   const changeValue = (event: ChangeEvent<HTMLInputElement>): void => {
     const inputValue = event.target.value;
@@ -44,8 +44,10 @@ const NumberField = ({
         T,
         always(
           clamp(
-            inputProps?.min || Number.NEGATIVE_INFINITY,
-            inputProps?.max || Number.POSITIVE_INFINITY,
+            textFieldSlotsAndSlotProps?.slotProps?.htmlInput?.min ||
+              Number.NEGATIVE_INFINITY,
+            textFieldSlotsAndSlotProps?.slotProps?.htmlInput?.max ||
+              Number.POSITIVE_INFINITY,
             number
           )
         )
@@ -59,12 +61,15 @@ const NumberField = ({
 
   return (
     <TextField
-      defaultValue={defaultValue}
       type="number"
       value={actualValue}
       onChange={changeValue}
       {...props}
-      inputProps={inputProps}
+      textFieldSlotsAndSlotProps={{
+        slotProps: {
+          htmlInput: { ...textFieldSlotsAndSlotProps?.slotProps?.htmlInput }
+        }
+      }}
       placeholder={
         placeholder || (!defaultValue ? `${fallbackValue}` : undefined)
       }

package/src/InputField/Select/Autocomplete/Draggable/index.tsx

@@ -181,9 +181,19 @@ const DraggableAutocomplete = (
         {...renderProps}
         error={error}
         helperText={error}
-        inputProps={{
-          ...renderProps.inputProps,
-          value: inputText || ''
+        textFieldSlotsAndSlotProps={{
+          slotProps: {
+            input:{
+              ...renderProps?.InputProps
+            },
+            inputLabel:{
+              ...renderProps?.inputLabel
+            },
+            htmlInput: {
+              ...renderProps.inputProps,
+              value: inputText || ''
+            }
+          }
         }}
         label={label}
         required={required}

package/src/InputField/Select/Autocomplete/autoComplete.styles.ts

@@ -0,0 +1,92 @@
+import { equals } from 'ramda';
+import { makeStyles } from 'tss-react/mui';
+
+import { autocompleteClasses } from '@mui/material/Autocomplete';
+
+import { ThemeMode } from '@centreon/ui-context';
+
+interface StyledProps {
+  hideInput?: boolean;
+}
+
+const textfieldHeight = (hideInput?: boolean): number | undefined =>
+  hideInput ? 0 : undefined;
+
+export const useAutoCompleteStyles = makeStyles<StyledProps>()(
+  (theme, { hideInput }) => ({
+    hiddenText: {
+      transform: 'scale(0)'
+    },
+    input: {
+      '&:after': {
+        borderBottom: 0
+      },
+      '&:before': {
+        borderBottom: 0,
+        content: 'unset'
+      },
+      '&:hover:before': {
+        borderBottom: 0
+      },
+      height: textfieldHeight(hideInput)
+    },
+    inputLabel: {
+      '&&': {
+        fontSize: theme.typography.body1.fontSize,
+        maxWidth: '72%',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        transform: 'translate(12px, 14px) scale(1)',
+        whiteSpace: 'nowrap'
+      }
+    },
+    inputLabelShrink: {
+      '&&': {
+        maxWidth: '90%'
+      }
+    },
+    inputWithLabel: {
+      '&[class*="MuiFilledInput-root"]': {
+        paddingTop: theme.spacing(2)
+      },
+      paddingTop: theme.spacing(1)
+    },
+    inputWithoutLabel: {
+      '&[class*="MuiFilledInput-root"][class*="MuiFilledInput-marginDense"]': {
+        paddingBottom: hideInput ? 0 : theme.spacing(0.75),
+        paddingRight: hideInput ? 0 : theme.spacing(1),
+        paddingTop: hideInput ? 0 : theme.spacing(0.75)
+      }
+    },
+    loadingIndicator: {
+      textAlign: 'center'
+    },
+    options: {
+      alignItems: 'center',
+      display: 'grid',
+      gridAutoFlow: 'column',
+      gridGap: theme.spacing(1)
+    },
+    popper: {
+      [`& .${autocompleteClasses.listbox}`]: {
+        [`& .${autocompleteClasses.option}`]: {
+          [`&:hover, &[aria-selected="true"], &.${autocompleteClasses.focused},
+        &.${autocompleteClasses.focused}[aria-selected="true"]`]: {
+            background: equals(theme.palette.mode, ThemeMode.dark)
+              ? theme.palette.primary.dark
+              : theme.palette.primary.light,
+            color: equals(theme.palette.mode, ThemeMode.dark)
+              ? theme.palette.common.white
+              : theme.palette.primary.main
+          }
+        },
+        padding: 0
+      },
+      zIndex: theme.zIndex.tooltip + 1
+    },
+    textfield: {
+      height: textfieldHeight(hideInput),
+      visibility: hideInput ? 'hidden' : 'visible'
+    }
+  })
+);

package/src/InputField/Select/Autocomplete/index.tsx

@@ -1,25 +1,25 @@
 import { equals, isEmpty, isNil, pick } from 'ramda';
 import { useTranslation } from 'react-i18next';
-import { makeStyles } from 'tss-react/mui';
 
 import {
   Autocomplete,
   AutocompleteProps,
   CircularProgress,
   InputAdornment,
+  InputProps,
   useTheme
 } from '@mui/material';
-import { autocompleteClasses } from '@mui/material/Autocomplete';
+import { AutocompleteSlotsAndSlotProps } from '@mui/material/Autocomplete';
+import { TextFieldSlotsAndSlotProps } from '@mui/material/TextField';
 import { UseAutocompleteProps } from '@mui/material/useAutocomplete';
 
-import { ThemeMode } from '@centreon/ui-context';
-
 import { ForwardedRef, HTMLAttributes, ReactElement, forwardRef } from 'react';
 import { SelectEntry } from '..';
 import { getNormalizedId } from '../../../utils';
 import TextField from '../../Text';
 import { searchLabel } from '../../translatedLabels';
 import Option from '../Option';
+import { useAutoCompleteStyles } from './autoComplete.styles';
 
 export type Props = {
   autoFocus?: boolean;
@@ -39,96 +39,21 @@ export type Props = {
   placeholder?: string | undefined;
   required?: boolean;
   forceInputRenderValue?: boolean;
+  textFieldSlotsAndSlotProps?: TextFieldSlotsAndSlotProps<InputProps>;
+  autocompleteSlotsAndSlotProps?: AutocompleteSlotsAndSlotProps<
+    SelectEntry,
+    Multiple,
+    DisableClearable,
+    FreeSolo
+  >;
 } & Omit<
   AutocompleteProps<SelectEntry, Multiple, DisableClearable, FreeSolo>,
   'renderInput'
 > &
   UseAutocompleteProps<SelectEntry, Multiple, DisableClearable, FreeSolo>;
 
-type StyledProps = Partial<Pick<Props, 'hideInput'>>;
-
-const textfieldHeight = (hideInput?: boolean): number | undefined =>
-  hideInput ? 0 : undefined;
-
-const useStyles = makeStyles<StyledProps>()((theme, { hideInput }) => ({
-  hiddenText: {
-    transform: 'scale(0)'
-  },
-  input: {
-    '&:after': {
-      borderBottom: 0
-    },
-    '&:before': {
-      borderBottom: 0,
-      content: 'unset'
-    },
-    '&:hover:before': {
-      borderBottom: 0
-    },
-    height: textfieldHeight(hideInput)
-  },
-  inputLabel: {
-    '&&': {
-      fontSize: theme.typography.body1.fontSize,
-      maxWidth: '72%',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      transform: 'translate(12px, 14px) scale(1)',
-      whiteSpace: 'nowrap'
-    }
-  },
-  inputLabelShrink: {
-    '&&': {
-      maxWidth: '90%'
-    }
-  },
-  inputWithLabel: {
-    '&[class*="MuiFilledInput-root"]': {
-      paddingTop: theme.spacing(2)
-    },
-    paddingTop: theme.spacing(1)
-  },
-  inputWithoutLabel: {
-    '&[class*="MuiFilledInput-root"][class*="MuiFilledInput-marginDense"]': {
-      paddingBottom: hideInput ? 0 : theme.spacing(0.75),
-      paddingRight: hideInput ? 0 : theme.spacing(1),
-      paddingTop: hideInput ? 0 : theme.spacing(0.75)
-    }
-  },
-  loadingIndicator: {
-    textAlign: 'center'
-  },
-  options: {
-    alignItems: 'center',
-    display: 'grid',
-    gridAutoFlow: 'column',
-    gridGap: theme.spacing(1)
-  },
-  popper: {
-    [`& .${autocompleteClasses.listbox}`]: {
-      [`& .${autocompleteClasses.option}`]: {
-        [`&:hover, &[aria-selected="true"], &.${autocompleteClasses.focused},
-        &.${autocompleteClasses.focused}[aria-selected="true"]`]: {
-          background: equals(theme.palette.mode, ThemeMode.dark)
-            ? theme.palette.primary.dark
-            : theme.palette.primary.light,
-          color: equals(theme.palette.mode, ThemeMode.dark)
-            ? theme.palette.common.white
-            : theme.palette.primary.main
-        }
-      },
-      padding: 0
-    },
-    zIndex: theme.zIndex.tooltip + 1
-  },
-  textfield: {
-    height: textfieldHeight(hideInput),
-    visibility: hideInput ? 'hidden' : 'visible'
-  }
-}));
-
 const LoadingIndicator = (): JSX.Element => {
-  const { classes } = useStyles({});
+  const { classes } = useAutoCompleteStyles({});
 
   return (
     <div className={classes.loadingIndicator}>
@@ -163,11 +88,13 @@ const AutocompleteField = forwardRef(
       autoSizeCustomPadding,
       getOptionItemLabel = (option) => option?.name,
       forceInputRenderValue = false,
+      textFieldSlotsAndSlotProps,
+      autocompleteSlotsAndSlotProps,
       ...autocompleteProps
     }: Props,
     ref?: ForwardedRef<HTMLDivElement>
   ): JSX.Element => {
-    const { classes, cx } = useStyles({ hideInput });
+    const { classes, cx } = useAutoCompleteStyles({ hideInput });
     const { t } = useTranslation();
     const theme = useTheme();
 
@@ -184,33 +111,6 @@ const AutocompleteField = forwardRef(
       return (
         <TextField
           {...params}
-          InputLabelProps={{
-            classes: {
-              marginDense: classes.inputLabel,
-              shrink: classes.inputLabelShrink
-            }
-          }}
-          InputProps={{
-            ...params.InputProps,
-            endAdornment: (
-              <>
-                {endAdornment && (
-                  <InputAdornment position="end">{endAdornment}</InputAdornment>
-                )}
-                {params.InputProps.endAdornment}
-              </>
-            ),
-            style: {
-              background: 'transparent',
-              minWidth: 0,
-              padding: theme.spacing(
-                0.75,
-                isEmpty(placeholder) ? 0 : 5,
-                0.75,
-                0.75
-              )
-            }
-          }}
           autoFocus={autoFocus}
           autoSize={autoSize}
           autoSizeCustomPadding={7 + (autoSizeCustomPadding || 0)}
@@ -220,20 +120,6 @@ const AutocompleteField = forwardRef(
           }}
           error={error}
           externalValueForAutoSize={autocompleteProps?.value?.name}
-          inputProps={{
-            ...params.inputProps,
-            'aria-label': label,
-            'data-testid': dataTestId || label,
-            id: getNormalizedId(label || ''),
-            ...(forceInputRenderValue
-              ? {
-                  value: getOptionItemLabel(
-                    autocompleteProps?.value || undefined
-                  )
-                }
-              : {}),
-            ...autocompleteProps?.inputProps
-          }}
           label={label}
           placeholder={isNil(placeholder) ? t(searchLabel) : placeholder}
           required={required}
@@ -245,6 +131,51 @@ const AutocompleteField = forwardRef(
             undefined
           }
           onChange={onTextChange}
+          slotProps={{
+            input: {
+              ...params.InputProps,
+              endAdornment: (
+                <>
+                  {endAdornment && (
+                    <InputAdornment position="end">
+                      {endAdornment}
+                    </InputAdornment>
+                  )}
+                  {params.InputProps.endAdornment}
+                </>
+              ),
+              style: {
+                background: 'transparent',
+                minWidth: 0,
+                padding: theme.spacing(
+                  0.75,
+                  isEmpty(placeholder) ? 0 : 5,
+                  0.75,
+                  0.75
+                )
+              }
+            },
+            inputLabel: {
+              classes: {
+                marginDense: classes.inputLabel,
+                shrink: classes.inputLabelShrink
+              }
+            },
+            htmlInput: {
+              ...params.inputProps,
+              'aria-label': label,
+              'data-testid': dataTestId || label,
+              id: getNormalizedId(label || ''),
+              ...(forceInputRenderValue
+                ? {
+                    value: getOptionItemLabel(
+                      autocompleteProps?.value || undefined
+                    )
+                  }
+                : {}),
+              ...textFieldSlotsAndSlotProps?.slotProps?.htmlInput
+            }
+          }}
         />
       );
     };
@@ -286,6 +217,7 @@ const AutocompleteField = forwardRef(
           );
         }}
         size="small"
+        slotProps={autocompleteSlotsAndSlotProps?.slotProps}
         {...autocompleteProps}
       />
     );

package/src/InputField/Text/index.tsx

@@ -6,8 +6,10 @@ import { makeStyles } from 'tss-react/mui';
 import {
   Box,
   InputAdornment,
+  InputProps,
   TextField as MuiTextField,
   TextFieldProps,
+  TextFieldSlotsAndSlotProps,
   Theme,
   Tooltip,
   Typography
@@ -95,6 +97,7 @@ export type TextProps = {
   size?: SizeVariant;
   transparent?: boolean;
   value?: string;
+  textFieldSlotsAndSlotProps?: TextFieldSlotsAndSlotProps<InputProps>;
 } & Omit<TextFieldProps, 'variant' | 'size' | 'error'>;
 
 const TextField = forwardRef(
@@ -119,6 +122,7 @@ const TextField = forwardRef(
       required = false,
       containerClassName,
       type,
+      textFieldSlotsAndSlotProps,
       ...rest
     }: TextProps,
     ref: React.ForwardedRef<HTMLDivElement>
@@ -140,7 +144,6 @@ const TextField = forwardRef(
       if (debounced) {
         return {};
       }
-
       if (defaultValue) {
         return { defaultValue };
       }
@@ -159,50 +162,11 @@ const TextField = forwardRef(
             error={!isNil(error)}
             helperText={displayErrorInTooltip ? undefined : error}
             id={getNormalizedId(dataTestId || '')}
-            inputProps={{
-              'aria-label': ariaLabel,
-              'data-testid': dataTestId,
-              ...rest.inputProps
-            }}
             label={label}
             ref={ref}
             size={size || 'small'}
             onChange={changeInputValue}
             {...getValueProps()}
-            {...rest}
-            InputLabelProps={{
-              classes: {
-                root: cx(equals(size, 'compact') && classes.compactLabel),
-                shrink: cx(
-                  equals(size, 'compact') && classes.compactLabelShrink
-                )
-              }
-            }}
-            InputProps={{
-              className: cx(
-                classes.inputBase,
-                {
-                  [classes.transparent]: transparent,
-                  [classes.autoSizeCompact]: autoSize && equals(size, 'compact')
-                },
-                className
-              ),
-              endAdornment: (
-                <OptionalLabelInputAdornment label={label} position="end">
-                  {EndAdornment ? (
-                    <EndAdornment />
-                  ) : (
-                    rest.InputProps?.endAdornment
-                  )}
-                </OptionalLabelInputAdornment>
-              ),
-              startAdornment: StartAdornment && (
-                <OptionalLabelInputAdornment label={label} position="start">
-                  <StartAdornment />
-                </OptionalLabelInputAdornment>
-              ),
-              ...rest.InputProps
-            }}
             className={classes.textField}
             required={required}
             sx={{
@@ -210,6 +174,48 @@ const TextField = forwardRef(
               ...rest?.sx
             }}
             type={type}
+            slotProps={{
+              input: {
+                className: cx(
+                  classes.inputBase,
+                  {
+                    [classes.transparent]: transparent,
+                    [classes.autoSizeCompact]:
+                      autoSize && equals(size, 'compact')
+                  },
+                  className
+                ),
+                endAdornment: (
+                  <OptionalLabelInputAdornment label={label} position="end">
+                    {EndAdornment ? (
+                      <EndAdornment />
+                    ) : (
+                      textFieldSlotsAndSlotProps?.slotProps?.input?.endAdornment
+                    )}
+                  </OptionalLabelInputAdornment>
+                ),
+                startAdornment: StartAdornment && (
+                  <OptionalLabelInputAdornment label={label} position="start">
+                    <StartAdornment />
+                  </OptionalLabelInputAdornment>
+                ),
+                ...textFieldSlotsAndSlotProps?.slotProps?.input
+              },
+              inputLabel: {
+                classes: {
+                  root: cx(equals(size, 'compact') && classes.compactLabel),
+                  shrink: cx(
+                    equals(size, 'compact') && classes.compactLabelShrink
+                  )
+                }
+              },
+              htmlInput: {
+                'aria-label': ariaLabel,
+                'data-testid': dataTestId,
+                ...textFieldSlotsAndSlotProps?.slotProps?.htmlInput
+              }
+            }}
+            {...rest}
           />
         </Tooltip>
         {autoSize && (

package/src/Listing/Header/Cell/ListingHeaderCell.tsx

@@ -64,7 +64,9 @@ const ListingHeaderCell = ({
 
   const headerContent = (
     <Tooltip placement="top" title={getTooltipLabel(column.shortLabel)}>
-      <HeaderLabel>{columnLabel}</HeaderLabel>
+      <span>
+        <HeaderLabel>{columnLabel}</HeaderLabel>
+      </span>
     </Tooltip>
   );
 

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

@@ -227,8 +227,8 @@ describe('Listing', () => {
 
       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.get('[data-is-hovered="true"]').should('have.length', 1);
+      cy.get('[data-is-hovered="true"]').contains('Sub Item 0').should('exist');
 
       cy.findByLabelText('Collapse 0').click();
       cy.findByLabelText('Collapse 2').click();

package/src/Listing/Row/Row.tsx

@@ -215,7 +215,7 @@ const IntersectionRow = ({ isHovered, ...rest }: Props): JSX.Element => {
   return (
     <div
       className={classes.intersectionRow}
-      data-isHovered={isHovered}
+      data-is-hovered={isHovered}
       ref={rowRef}
     >
       <Row {...rest} isHovered={isHovered} isInViewport={isInViewport} />

package/src/ThemeProvider/palettes.ts

@@ -27,6 +27,8 @@ declare module '@mui/material/styles/createPalette' {
     acknowledgedBackground: string;
     inDowntime: string;
     inDowntimeBackground: string;
+    inFlapping: string;
+    inFlappingBackground: string;
   }
 }
 
@@ -159,6 +161,8 @@ export const lightPalette: PaletteOptions = {
   action: {
     acknowledged: '#745F35',
     acknowledgedBackground: '#DFD2B9',
+    inFlapping: '#064A3F',
+    inFlappingBackground: '#D8F3EF',
     activatedOpacity: 0.12,
     active: '#666666',
     disabled: '#999999',
@@ -299,6 +303,8 @@ export const darkPalette: PaletteOptions = {
   action: {
     acknowledged: '#DFD2B9',
     acknowledgedBackground: '#745F35',
+    inFlapping: '#D8F3EF',
+    inFlappingBackground: '#064A3F',
     activatedOpacity: 0.3,
     active: '#B5B5B5',
     disabled: '#999999',

package/src/TopCounterElements/ResourceCounters.tsx

@@ -53,9 +53,7 @@ export default ({ counters }: CounterProps): JSX.Element => {
       {counters.map(
         ({ to, ariaLabel, onClick, count, severityCode }, index) => (
           <Fragment key={to.toString().replace(/\W/g, '')}>
-            {index === 2 && (
-              <li aria-hidden="true" className={classes.splitter} />
-            )}
+            {index === 2 && <li className={classes.splitter} />}
             <li className={classes.item}>
               <Link
                 aria-label={ariaLabel}

package/src/api/useMutationQuery/useOptimisticMutation.ts

@@ -60,9 +60,12 @@ export const useOptimisticMutation = <T, TMeta>({
   }: GetOptimisticMutationListingProps<T, TMeta>): object => {
     const listingQueryKey = getListingQueryKey();
 
+    const updatedPayload = payload && 'id' in payload ? payload :{...payload, id: optimisticListing?.total}
+
+
     const hasOnlyOnePage =
       (optimisticListing?.total || 0) <= (optimisticListing?.limit || 0);
-    const isFormDataPayload = equals(type(payload), 'FormData');
+    const isFormDataPayload = equals(type(updatedPayload), 'FormData');
 
     const items = last(
       queryClient.getQueriesData({
@@ -71,7 +74,7 @@ export const useOptimisticMutation = <T, TMeta>({
     )?.[1];
 
     if (equals(Method.POST, method) && !isFormDataPayload && hasOnlyOnePage) {
-      const newItems = append(payload, items.result);
+      const newItems = append(updatedPayload, items.result);
 
       return { ...items, result: newItems };
     }
@@ -96,12 +99,12 @@ export const useOptimisticMutation = <T, TMeta>({
       );
       const item = items.result.find(({ id }) => equals(id, _meta.id));
       const updatedItem = equals(Method.PUT, method)
-        ? payload
+        ? updatedPayload
         : {
             ...item,
             ...(isFormDataPayload
-              ? Object.fromEntries(payload.entries())
-              : payload)
+              ? Object.fromEntries(updatedPayload.entries())
+              : updatedPayload)
           };
       const newItems = update(itemIndex, updatedItem, items.result);
 

package/src/components/Button/Icon/IconButton.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from 'react';
+import { ReactElement, ReactNode, forwardRef } from 'react';
 
 import {
   IconButton as MuiIconButton,
@@ -32,31 +32,36 @@ type IconButtonProps = {
 /**
  * @todo re-factor as `iconVariant: 'icon-only'` Button variant, and remove IconButton component (reason: code duplication)
  */
-const IconButton = ({
-  variant = 'primary',
-  size = 'medium',
-  icon,
-  disabled = false,
-  onClick,
-  ...attr
-}: IconButtonProps): ReactElement => {
-  const { classes } = useStyles();
-
-  return (
-    <MuiIconButton
-      className={classes.iconButton}
-      data-size={size}
-      data-variant={variant}
-      disabled={disabled}
-      size={size}
-      onClick={(e) => onClick?.(e)}
-      {...attr}
-      // Mui overrides
-      color={muiColorMap[variant]}
-    >
-      {icon}
-    </MuiIconButton>
-  );
-};
+const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  (
+    {
+      variant = 'primary',
+      size = 'medium',
+      icon,
+      disabled = false,
+      onClick,
+      ...attr
+    },
+    ref
+  ): ReactElement => {
+    const { classes } = useStyles();
 
+    return (
+      <MuiIconButton
+        ref={ref}
+        className={classes.iconButton}
+        data-size={size}
+        data-variant={variant}
+        disabled={disabled}
+        size={size}
+        onClick={(e) => onClick?.(e)}
+        {...attr}
+        // Mui overrides
+        color={muiColorMap[variant]}
+      >
+        {icon}
+      </MuiIconButton>
+    );
+  }
+);
 export { IconButton };

package/src/components/CrudPage/Actions/Search.tsx

@@ -21,8 +21,12 @@ const Search = ({ label, filters }: Props): JSX.Element => {
       dataTestId={label}
       placeholder={label}
       onChange={change}
-      InputProps={{
-        endAdornment: <Filters label="filters" filters={filters} />
+      textFieldSlotsAndSlotProps={{
+        slotProps: {
+          input: {
+            endAdornment: <Filters label="filters" filters={filters} />
+          }
+        }
       }}
     />
   );

package/src/components/DataTable/Item/DataTableItem.tsx

@@ -52,7 +52,7 @@ const DataTableItem = forwardRef(
             <img
               alt={`thumbnail-${title}-${description}`}
               className={classes.thumbnail}
-              data-testId={`thumbnail-${title}-${description}`}
+              data-testid={`thumbnail-${title}-${description}`}
               loading="lazy"
               src={thumbnail}
             />

package/src/components/Form/Dashboard/GlobalRefreshFieldOption.tsx

@@ -42,9 +42,13 @@ const GlobalRefreshFieldOption = (): JSX.Element => {
       <TextField
         autoSize
         dataTestId={labelInterval}
-        inputProps={{
-          'aria-label': t(labelInterval) as string,
-          min: 1
+        textFieldSlotsAndSlotProps={{
+          slotProps: {
+            htmlInput: {
+              'aria-label': t(labelInterval) as string,
+              min: 1
+            }
+          }
         }}
         size="compact"
         type="number"