@centreon/ui 26.5.8 → 26.5.10

package/src/Graph/common/timeSeries/index.ts

@@ -69,6 +69,7 @@ const toTimeTickWithMetrics = ({
   metrics,
   times
 }): Array<TimeTickWithMetrics> =>
+  // @ts-expect-error - suppressing pre-existing type mismatch
   map(
     (timeTick) => ({
       metrics,
@@ -178,6 +179,7 @@ const getTime = (timeValue: TimeValue): number =>
   new Date(timeValue.timeTick).valueOf();
 
 const getMetrics = (timeValue: TimeValue): Array<string> =>
+  // @ts-expect-error - suppressing pre-existing type mismatch
   pipe(keys, reject(equals('timeTick')))(timeValue);
 
 const getValueForMetric =
@@ -186,6 +188,7 @@ const getValueForMetric =
     prop(metric_id, timeValue) as number;
 
 const getUnits = (lines: Array<Line>): Array<string> =>
+  // @ts-expect-error - suppressing pre-existing type mismatch
   pipe(map(prop('unit')), uniq)(lines);
 
 interface ValuesForUnitProps {
@@ -270,7 +273,9 @@ const getStackedMetricValues = ({
     );
 
   const metricsValues = pipe(
+    // @ts-expect-error - suppressing pre-existing type mismatch
     map(prop('metric_id')) as (metric) => Array<number>,
+    // @ts-expect-error - suppressing pre-existing type mismatch
     map(getTimeSeriesValuesForMetric) as () => Array<Array<number>>
   )(lines as Array<Line>);
 
@@ -297,12 +302,14 @@ const getSortedStackedLines = (lines: Array<Line>): Array<Line> =>
 
 const getInvertedStackedLines = (lines: Array<Line>): Array<Line> =>
   pipe(
+    // @ts-expect-error - suppressing pre-existing type mismatch
     filter(({ invert }: Line): boolean => invert) as (lines) => Array<Line>,
     getSortedStackedLines
   )(lines);
 
 const getNotInvertedStackedLines = (lines: Array<Line>): Array<Line> =>
   pipe(
+    // @ts-expect-error - suppressing pre-existing type mismatch
     reject(({ invert }: Line): boolean => invert) as (lines) => Array<Line>,
     getSortedStackedLines
   )(lines);
@@ -313,6 +320,7 @@ interface HasStackedLines {
 }
 
 const hasUnitStackedLines = ({ lines, unit }: HasStackedLines): boolean =>
+  // @ts-expect-error - suppressing pre-existing type mismatch
   pipe(getSortedStackedLines, any(propEq(unit, 'unit')))(lines);
 
 const getTimeSeriesForLines = ({
@@ -336,6 +344,7 @@ const getTimeSeriesForLines = ({
                 : metricsValue[metric_id]
           };
         },
+        // @ts-expect-error - suppressing pre-existing type mismatch
         {},
         metrics
       ),
@@ -427,9 +436,11 @@ const getScale = ({
     : getSanitizedValues([
         getMax(graphValues),
         getMax(stackedValues),
+        // @ts-expect-error - suppressing pre-existing type mismatch
         hasOnlyZeroesHasValue(graphValues) ? 1 : null,
         Math.max(...thresholds)
       ]);
+  // @ts-expect-error - suppressing pre-existing type mismatch
   const maxValue = Math.max(...sanitizedValuesForMaximum.filter(isNotNil));
 
   const minValueWithMargin =
@@ -857,6 +868,7 @@ export const getStackedLinesTimeSeriesPerStackAndUnit = ({
     {}
   );
   const affectedLinesPerStackKey = flatten(
+    // @ts-expect-error - suppressing pre-existing type mismatch
     pluck('lines', Object.values(stackedLinesTimeSeriesPerStackKey))
   );
   const stackedLinesTimeSeriesPerUnit = stackedKeysWithOnlyUnit.reduce(

package/src/Graph/common/utils.ts

@@ -127,6 +127,7 @@ export const emphasizeCurveColor = ({
 
   if (gte(getLuminance(color), 0.5)) {
     if (gte(index, totalLevels * 2)) {
+      // @ts-expect-error - suppressing pre-existing type mismatch
       return darken(color, normalizeLevel({ factor, level: last(levels) }));
     }
     if (gte(index, totalLevels)) {
@@ -140,6 +141,7 @@ export const emphasizeCurveColor = ({
   }
 
   if (gte(index, totalLevels * 2)) {
+    // @ts-expect-error - suppressing pre-existing type mismatch
     return lighten(color, normalizeLevel({ factor, level: last(levels) }));
   }
   if (gte(index, totalLevels)) {
@@ -203,8 +205,10 @@ export const getStyle = ({
   metricId
 }: GetStyleProps): BarStyle | LineStyle => {
   return equals(type(style), 'Array')
-    ? style.find((metricStyle) => equals(metricId, metricStyle.metricId))
-    : style;
+    ? // @ts-expect-error - suppressing pre-existing type mismatch
+      style.find((metricStyle) => equals(metricId, metricStyle.metricId))
+    : // @ts-expect-error - suppressing pre-existing type mismatch
+      style;
 };
 
 interface GetFormattedAxisValuesProps {

package/src/InputField/Number/Number.tsx

@@ -43,10 +43,16 @@ const NumberField = ({
         T,
         always(
           clamp(
-            textFieldSlotsAndSlotProps?.slotProps?.htmlInput?.min ||
-              Number.NEGATIVE_INFINITY,
-            textFieldSlotsAndSlotProps?.slotProps?.htmlInput?.max ||
-              Number.POSITIVE_INFINITY,
+            (
+              textFieldSlotsAndSlotProps?.slotProps?.htmlInput as
+                | Record<string, number>
+                | undefined
+            )?.min || Number.NEGATIVE_INFINITY,
+            (
+              textFieldSlotsAndSlotProps?.slotProps?.htmlInput as
+                | Record<string, number>
+                | undefined
+            )?.max || Number.POSITIVE_INFINITY,
             number
           )
         )

package/src/InputField/Search/PersistentTooltip.tsx

@@ -2,7 +2,7 @@ import IconHelp from '@mui/icons-material/HelpOutline';
 import IconClose from '@mui/icons-material/HighlightOff';
 import { IconButton, Tooltip } from '@mui/material';
 
-import { cond, isNil, T } from 'ramda';
+import { isNil } from 'ramda';
 import { type ReactElement, useState } from 'react';
 import { makeStyles } from 'tss-react/mui';
 
@@ -41,10 +41,11 @@ const PersistentTooltip = ({
   const [open, setOpen] = useState(openTooltip || false);
 
   const toggleTooltip = (): void => {
-    cond([
-      [isNil, (): void => setOpen(!open)],
-      [T, (): void => toggleTooltipProp?.()]
-    ])(openTooltip);
+    if (isNil(openTooltip)) {
+      setOpen(!open);
+    } else {
+      toggleTooltipProp?.();
+    }
   };
 
   const closeTooltip = (): void => {

package/src/InputField/Select/Autocomplete/Connected/Single.tsx

@@ -1,8 +1,10 @@
+import type { ReactElement } from 'react';
+
 import AutocompleteField from '..';
 import ConnectedAutocompleteField from '.';
 
 const SingleConnectedAutocompleteField = ConnectedAutocompleteField(
-  AutocompleteField,
+  AutocompleteField as unknown as (props: unknown) => ReactElement,
   false
 );
 

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

@@ -95,7 +95,7 @@ describe(SingleConnectedAutocompleteField, () => {
 		});
 
 		await waitFor(() => {
-			expect(decodeURIComponent(getFetchCall(2))).toEqual(
+			expect(decodeURIComponent(getFetchCall(2) as string)).toEqual(
 				'endpoint?page=1&search={"$and":[{"$and":[{"host.name":{"$lk":"%My Option 2%"}}]}]}',
 			);
 		});

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

@@ -375,7 +375,11 @@ const ConnectedAutocompleteField = (
           allowUniqOption ? uniqBy(getRenderedOptionText, options) : options
         }
         renderOption={renderOptions}
-        total={data?.meta?.total || data?.totalElements || 1}
+        total={
+          (data && 'meta' in data ? data.meta.total : undefined) ||
+          (data && 'totalElements' in data ? data.totalElements : undefined) ||
+          1
+        }
         {...props}
       />
     );

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

@@ -2,7 +2,7 @@ import { lighten } from '@mui/material';
 
 import { rectIntersection } from '@dnd-kit/core';
 import { rectSortingStrategy } from '@dnd-kit/sortable';
-import { find, map, propEq } from 'ramda';
+import { find, propEq } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
 import SortableItems from '../../../../SortableItems';
@@ -46,10 +46,9 @@ const SortableList = ({
 
   const dragEnd = ({ items: newItems }): void =>
     changeItemsOrder(
-      map(
-        (item) => find(propEq(item, 'id'), items),
-        newItems
-      ) as Array<DraggableSelectEntry>
+      (newItems as Array<string>).map(
+        (item) => find(propEq(item, 'id'), items) as DraggableSelectEntry
+      )
     );
 
   return (

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

@@ -13,8 +13,7 @@ import {
   pipe,
   pluck,
   propEq,
-  remove,
-  type
+  remove
 } from 'ramda';
 import { type ChangeEvent, useEffect, useState } from 'react';
 
@@ -93,8 +92,8 @@ const DraggableAutocomplete = (
         return;
       }
       const lastValue = last(newValue);
-      if (pipe(type, equals('String'))(lastValue)) {
-        const lastDraggableItem = {
+      if (typeof lastValue === 'string') {
+        const lastDraggableItem: DraggableSelectEntry = {
           createOption: lastValue,
           id: `${lastValue}_${totalValues}`,
           name: lastValue
@@ -115,7 +114,7 @@ const DraggableAutocomplete = (
         newValue
       ) as DraggableSelectEntry;
 
-      const lastDraggableItem = {
+      const lastDraggableItem: DraggableSelectEntry = {
         id: `${lastItem.name}_${totalValues}`,
         name: lastItem.name
       };

package/src/InputField/Select/Autocomplete/Multi/Listbox.tsx

@@ -1,5 +1,6 @@
 import { ListSubheader, Typography } from '@mui/material';
 
+import type React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Button } from '../../../../components/Button';
@@ -8,6 +9,7 @@ import {
   labelSelectAll,
   labelUnSelectAll
 } from '../../../translatedLabels';
+import type { SelectEntry } from '../..';
 import { useListboxStyles } from './Multi.styles';
 
 const CustomListbox = ({
@@ -34,6 +36,19 @@ const CustomListbox = ({
   );
 };
 
+interface ListboxProps {
+  disableSelectAll?: boolean;
+  options: Array<SelectEntry>;
+  isOptionSelected: (opt: SelectEntry) => boolean;
+  onChange?: (
+    event: React.SyntheticEvent,
+    value: Array<SelectEntry>,
+    reason: string
+  ) => void;
+  total?: number;
+  value?: Array<SelectEntry>;
+}
+
 const ListboxComponent = ({
   disableSelectAll,
   options,
@@ -41,7 +56,7 @@ const ListboxComponent = ({
   onChange,
   total,
   value = []
-}) => {
+}: ListboxProps) => {
   const { t } = useTranslation();
 
   if (disableSelectAll) {

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

@@ -36,7 +36,8 @@ const MultiAutocompleteField = ({
   disableSortedOptions = false,
   disableSelectAll = true,
   optionProperty = 'name',
-  getOptionLabel = (option): string => option?.name,
+  getOptionLabel = (option): string =>
+    typeof option === 'string' ? option : option?.name,
   getTagLabel = (option): string => option[optionProperty],
   getOptionTooltipLabel,
   chipProps,
@@ -65,7 +66,13 @@ const MultiAutocompleteField = ({
             size="medium"
             {...getTagProps({ index })}
             {...chipProps}
-            onDelete={(event) => chipProps?.onDelete?.(event, option)}
+            onDelete={(event) =>
+              (
+                chipProps?.onDelete as
+                  | ((event: React.SyntheticEvent, option: SelectEntry) => void)
+                  | undefined
+              )?.(event, option)
+            }
           />
         </Tooltip>
       );
@@ -89,35 +96,42 @@ const MultiAutocompleteField = ({
 
   return (
     <Autocomplete
-      disableCloseOnSelect
-      displayOptionThumbnail
-      getLimitTagsText={getLimitTagsText}
-      ListboxComponent={ListboxComponent({
-        disableSelectAll,
-        isOptionSelected,
+      {...({
+        disableCloseOnSelect: true,
+        displayOptionThumbnail: true,
+        getLimitTagsText,
+        ListboxComponent: ListboxComponent({
+          disableSelectAll,
+          isOptionSelected,
+          onChange: onChange as (
+            event: React.SyntheticEvent,
+            value: Array<SelectEntry>,
+            reason: string
+          ) => void,
+          options: options as Array<SelectEntry>,
+          total,
+          value: values
+        }),
+        multiple: true,
         onChange,
-        options,
-        total,
-        value: values
-      })}
-      multiple
-      onChange={onChange}
-      options={autocompleteOptions}
-      renderOption={(renderProps, option, { selected }): JSX.Element => (
-        <li
-          key={option.id}
-          {...(renderProps as React.HTMLAttributes<HTMLLIElement>)}
-        >
-          <Option checkboxSelected={selected}>{getOptionLabel(option)}</Option>
-        </li>
-      )}
-      renderTags={(renderedValue, getTagProps): React.ReactNode =>
-        customRenderTags
-          ? customRenderTags(renderTags(renderedValue, getTagProps))
-          : renderTags(renderedValue, getTagProps)
-      }
-      value={values}
-      {...props}
+        options: autocompleteOptions,
+        renderOption: (renderProps, option, { selected }): JSX.Element => (
+          <li
+            key={option.id}
+            {...(renderProps as React.HTMLAttributes<HTMLLIElement>)}
+          >
+            <Option checkboxSelected={selected}>
+              {getOptionLabel(option)}
+            </Option>
+          </li>
+        ),
+        renderTags: (renderedValue, getTagProps): React.ReactNode =>
+          customRenderTags
+            ? customRenderTags(renderTags(renderedValue, getTagProps))
+            : renderTags(renderedValue, getTagProps),
+        value: values,
+        ...props
+      } as React.ComponentProps<typeof Autocomplete>)}
     />
   );
 };

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

@@ -1,3 +1,4 @@
 import MultiAutocompleteField from './Multi';
 
+export type { Props } from './Multi';
 export default MultiAutocompleteField;

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

@@ -153,7 +153,13 @@ const AutocompleteField = forwardRef(
             root: classes.textfield
           }}
           error={error}
-          externalValueForAutoSize={autocompleteProps?.value?.name}
+          externalValueForAutoSize={
+            typeof autocompleteProps?.value === 'object' &&
+            autocompleteProps?.value !== null &&
+            !Array.isArray(autocompleteProps.value)
+              ? (autocompleteProps.value as SelectEntry).name
+              : undefined
+          }
           helperText={helperText}
           label={label}
           onChange={onTextChange}

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

@@ -97,9 +97,6 @@ const IconPopoverMultiAutocomplete = ({
         </IconButton>
         <Popper
           anchorEl={anchorEl}
-          nonce={undefined}
-          onResize={(): undefined => undefined}
-          onResizeCapture={(): undefined => undefined}
           open={isOpen}
           placement={popperPlacement}
           style={{ zIndex: theme.zIndex.tooltip }}

package/src/InputField/Select/Option.tsx

@@ -47,7 +47,12 @@ const Option = forwardRef(
         )}
         <Stack alignItems="center" direction="row" spacing={1}>
           {thumbnailUrl && (
-            <img alt={children} height={20} src={thumbnailUrl} width={20} />
+            <img
+              alt={typeof children === 'string' ? children : ''}
+              height={20}
+              src={thumbnailUrl}
+              width={20}
+            />
           )}
           <Typography variant="body2">{children}</Typography>
         </Stack>

package/src/InputField/Select/index.tsx

@@ -59,7 +59,7 @@ type Props = {
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   options: Array<SelectEntry>;
   selectedOptionId: number | string;
-  formControlProps: FormControlProps;
+  formControlProps?: FormControlProps;
 } & Omit<SelectProps, 'error'>;
 
 const SelectField = ({
@@ -112,9 +112,9 @@ const SelectField = ({
               [classes.noLabelInput]: !label && !compact,
               [classes.compact]: compact
             }),
-            'data-testid': dataTestId,
             id: getNormalizedId(dataTestId || ''),
-            ...inputProps
+            ...inputProps,
+            ...({ 'data-testid': dataTestId } as Record<string, string>)
           }
         }}
         value={selectedOptionId}

package/src/InputField/Text/index.tsx

@@ -77,7 +77,7 @@ const OptionalLabelInputAdornment = ({
 type SizeVariant = 'large' | 'medium' | 'small' | 'compact';
 
 export type TextProps = {
-  EndAdornment?: React.FC | JSX.Element;
+  EndAdornment?: React.FC | React.ReactNode;
   StartAdornment?: React.FC;
   ariaLabel?: string;
   autoSize?: boolean;
@@ -192,9 +192,17 @@ const TextField = forwardRef(
                 endAdornment: (
                   <OptionalLabelInputAdornment label={label} position="end">
                     {EndAdornment ? (
-                      <EndAdornment />
+                      typeof EndAdornment === 'function' ? (
+                        <EndAdornment />
+                      ) : (
+                        EndAdornment
+                      )
                     ) : (
-                      textFieldSlotsAndSlotProps?.slotProps?.input?.endAdornment
+                      (
+                        textFieldSlotsAndSlotProps?.slotProps?.input as
+                          | Record<string, React.ReactNode>
+                          | undefined
+                      )?.endAdornment
                     )}
                   </OptionalLabelInputAdornment>
                 ),

package/src/InputField/Text/useAutoSize.ts

@@ -34,7 +34,7 @@ const useAutoSize = ({
 }: UseAutoSizeProps): UseAutoSizeState => {
   const [innerValue, setInnerValue] = useState(value || '');
   const [width, setWidth] = useState(autoSizeDefaultWidth);
-  const inputRef = useRef();
+  const inputRef = useRef<HTMLDivElement>(null);
   const theme = useTheme();
 
   const changeInputValue = (
@@ -58,7 +58,7 @@ const useAutoSize = ({
   return {
     changeInputValue,
     innerValue,
-    inputRef,
+    inputRef: inputRef as RefObject<HTMLDivElement>,
     width: `calc(${width}px + ${theme.spacing(
       autoSizeCustomPadding || defaultPaddingTotal
     )})`

package/src/Listing/ActionBar/index.tsx

@@ -216,9 +216,8 @@ const MemoListingActionBar = ({
       listingVariant,
       themeMode,
       limit,
-      pick(
-        ['id', 'label', 'disabled', 'width', 'shortLabel', 'sortField'],
-        columns
+      columns.map(
+        pick(['id', 'label', 'disabled', 'width', 'shortLabel', 'sortField'])
       ),
       columnConfiguration,
       customPaginationClassName,

package/src/Listing/Cell/index.tsx

@@ -11,7 +11,7 @@ import {
 import type { ListingVariant } from '@centreon/ui-context';
 
 import { useAtom } from 'jotai';
-import { append, equals, includes, isNil, reject } from 'ramda';
+import { equals, includes, isNil, reject } from 'ramda';
 import type { ElementType } from 'react';
 import type { CSSObject } from 'tss-react';
 
@@ -98,7 +98,7 @@ const handleSubItems = ({
     return reject(equals(id), currentSubItemsPivots);
   }
 
-  return append(id, currentSubItemsPivots);
+  return [...currentSubItemsPivots, id];
 };
 
 const Cell = ({
@@ -142,26 +142,28 @@ const Cell = ({
         root: 'flex items-center h-full overflow-hidden border-b-1 border-divider px-2 whitespace-nowrap py-0'
       }}
       component={'div' as unknown as ElementType<TableCellBaseProps>}
-      style={{
-        backgroundColor: getBackgroundColor({
-          disableRowCondition,
-          isRowHovered,
-          row,
-          rowColorConditions,
-          theme
-        }),
-        ...getTextStyleByViewMode({
-          listingVariant,
-          theme
-        }),
-        ...getRowTextColor({
-          disableRowCondition,
-          isRowHighlighted,
-          row,
-          theme
-        }),
-        ...style
-      }}
+      style={
+        {
+          backgroundColor: getBackgroundColor({
+            disableRowCondition,
+            isRowHovered,
+            row,
+            rowColorConditions,
+            theme
+          }),
+          ...getTextStyleByViewMode({
+            listingVariant,
+            theme
+          }),
+          ...getRowTextColor({
+            disableRowCondition,
+            isRowHighlighted,
+            row,
+            theme
+          }),
+          ...style
+        } as React.CSSProperties
+      }
       {...props}
     >
       {displaySubItemsCaret && hasSubItems && (

package/src/Listing/Header/Cell/ListingHeaderCell.styles.ts

@@ -0,0 +1,7 @@
+import type { ListingVariant } from '@centreon/ui-context';
+
+export interface StylesProps {
+  isDragging: boolean;
+  isInDragOverlay?: boolean;
+  listingVariant?: ListingVariant;
+}

package/src/Listing/Header/ListingHeader.tsx

@@ -159,8 +159,8 @@ const MemoizedListingHeader = memo<Props>(
     equals(prevProps.selectedRowCount, nextProps.selectedRowCount) &&
     equals(prevProps.rowCount, nextProps.rowCount) &&
     equals(
-      map(pick(columnMemoProps), prevProps.columns),
-      map(pick(columnMemoProps), nextProps.columns)
+      map(pick(columnMemoProps as Array<keyof Column>), prevProps.columns),
+      map(pick(columnMemoProps as Array<keyof Column>), nextProps.columns)
     ) &&
     equals(prevProps.checkable, nextProps.checkable) &&
     equals(prevProps.columnConfiguration, nextProps.columnConfiguration) &&

package/src/Listing/Header/_internals/PredefinedSelectionList.tsx

@@ -1,4 +1,4 @@
-import { List, ListItem, ListItemText } from '@mui/material';
+import { List, ListItemButton, ListItemText } from '@mui/material';
 
 import type { PredefinedRowSelection } from '../../models';
 
@@ -21,9 +21,9 @@ const PredefinedSelectionList = ({
       };
 
       return (
-        <ListItem button key={label} onClick={onSelectionClick}>
+        <ListItemButton key={label} onClick={onSelectionClick}>
           <ListItemText>{label}</ListItemText>
-        </ListItem>
+        </ListItemButton>
       );
     })}
   </List>