@centreon/ui 25.1.5 → 25.1.7

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

@@ -163,7 +163,7 @@ export const lightPalette: PaletteOptions = {
     active: '#666666',
     disabled: '#999999',
     disabledBackground: 'rgba(0, 0, 0, 0.12)',
-    focus: 'rgba(0, 0, 0, 0.12)',
+    focus: '#dadada',
     focusOpacity: 0.12,
     hover: 'rgba(0, 0, 0, 0.06)',
     hoverOpacity: 0.06,
@@ -303,7 +303,7 @@ export const darkPalette: PaletteOptions = {
     active: '#B5B5B5',
     disabled: '#999999',
     disabledBackground: '#555555',
-    focus: 'rgba(255, 255, 255, 0.30)',
+    focus: '#6d6d6d',
     focusOpacity: 0.3,
     hover: 'rgba(255, 255, 255, 0.16)',
     hoverOpacity: 0.16,

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/CrudPage/CrudPageRoot.tsx

@@ -83,7 +83,9 @@ export const CrudPageRoot = <
     <PageLayout>
       <PageLayout.Header>
         <PageHeader>
-          <PageHeader.Title title={labels.title} />
+          <PageHeader.Main>
+            <PageHeader.Title title={labels.title} />
+          </PageHeader.Main>
         </PageHeader>
       </PageLayout.Header>
       <PageLayout.Body>

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"