@centreon/ui 26.5.14 → 26.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "26.5.14",
+  "version": "26.7.0",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",
@@ -85,10 +85,15 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@testing-library/react-hooks": "^8.0.1",
+    "@types/humanize-duration": "^3.27.4",
     "@types/jest": "^29.5.14",
     "@types/mocha": "^10.0.10",
+    "@types/numeral": "^2.0.5",
     "@types/ramda": "^0.30.2",
     "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.2.3",
+    "@types/react-transition-group": "^4.4.12",
+    "@types/sanitize-html": "^2.16.1",
     "@types/testing-library__jest-dom": "^6.0.0",
     "@vitejs/plugin-react": "^4.3.4",
     "@vitejs/plugin-react-swc": "^3.8.0",

package/src/ActionsList/ActionsList.styles.ts

@@ -11,7 +11,8 @@ interface GetBackgroundAndColorProps {
 const getColor = ({ theme, status }: GetBackgroundAndColorProps): string =>
   equals(theme.palette.mode, 'dark')
     ? theme.palette.common.white
-    : theme.palette[status].main;
+    : (theme.palette[status as keyof Theme['palette']] as { main: string })
+        .main;
 
 export const useStyles = makeStyles()((theme) => ({
   item: {

package/src/ActionsList/index.tsx

@@ -20,7 +20,7 @@ interface ActionsType {
     muiName: string;
   };
   label: string;
-  onClick?: (e?) => void;
+  onClick?: (e?: React.MouseEvent) => void;
   secondaryLabel?: string;
   variant?: ActionVariants;
 }

package/src/Button/Icon/index.tsx

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

package/src/Button/Save/useSave.tsx

@@ -25,7 +25,8 @@ interface StartIconConfigProps {
   enabled: boolean;
 }
 
-const isNilOrEmpty = (value): boolean => or(isNil(value), isEmpty(value));
+const isNilOrEmpty = (value: unknown): boolean =>
+  or(isNil(value), isEmpty(value));
 const hasValue = any(pipe(isNilOrEmpty, not));
 
 interface UseSaveState {

package/src/Checkbox/Checkbox.tsx

@@ -1,8 +1,12 @@
 import type { SvgIconComponent } from '@mui/icons-material';
-import { Box, FormControlLabel, Checkbox as MuiCheckbox } from '@mui/material';
+import {
+  Box,
+  FormControlLabel,
+  Checkbox as MuiCheckbox,
+  type Theme
+} from '@mui/material';
 import Typography, { type TypographyProps } from '@mui/material/Typography';
 
-import { always, cond, equals, T } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
 export type LabelPlacement = 'bottom' | 'top' | 'end' | 'start' | undefined;
@@ -12,12 +16,13 @@ interface StyleProps {
   labelPlacement: LabelPlacement;
 }
 
-const getLabelSpacing = (labelPlacement, theme): string => {
-  return cond([
-    [equals('top'), always(theme.spacing(0, 0, 0.5))],
-    [equals('end'), always(theme.spacing(0, 0, 0, 0.5))],
-    [T, always(0)]
-  ])(labelPlacement);
+const getLabelSpacing = (
+  labelPlacement: LabelPlacement,
+  theme: Theme
+): string => {
+  if (labelPlacement === 'top') return theme.spacing(0, 0, 0.5);
+  if (labelPlacement === 'end') return theme.spacing(0, 0, 0, 0.5);
+  return '0';
 };
 
 const useStyles = makeStyles<StyleProps>()(
@@ -58,7 +63,7 @@ interface Props {
   id: string;
   labelPlacement?: LabelPlacement;
   labelProps?: TypographyProps;
-  onChange?: (e) => void;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 const Checkbox = ({

package/src/Checkbox/CheckboxGroup/index.tsx

@@ -15,7 +15,7 @@ interface Props {
   formGroupProps?: FormGroupProps;
   labelPlacement?: LabelPlacement;
   labelProps?: TypographyProps;
-  onChange?: (e) => void;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
   options: Array<string>;
   values: Array<string>;
 }

package/src/Colors/index.tsx

@@ -1,4 +1,12 @@
-import { Box, Divider, Grid, Stack, Typography, useTheme } from '@mui/material';
+import {
+  Box,
+  Divider,
+  Grid,
+  Stack,
+  type Theme,
+  Typography,
+  useTheme
+} from '@mui/material';
 
 import type { ThemeMode } from '@centreon/ui-context';
 
@@ -52,7 +60,9 @@ const ContainerDescription = ({
     <Box sx={{ width: '100%' }}>
       <Typography variant="h4">{containerTitle}</Typography>
       <Grid columnSpacing={{ md: 3, sm: 2, xs: 1 }} container rowSpacing={5}>
-        {toPairs(palette[keyTheme]).map(
+        {toPairs(
+          palette[keyTheme as keyof Theme['palette']] as Record<string, string>
+        ).map(
           ([key, value]) =>
             !includes(key, keysToRemove) && (
               <Grid key={key} size={6}>

package/src/Dashboard/Item.tsx

@@ -30,7 +30,7 @@ interface DashboardItemProps {
   id: string;
   onMouseDown?: (e: MouseEvent<HTMLDivElement>) => void;
   onMouseUp?: (e: MouseEvent<HTMLDivElement>) => void;
-  onTouchEnd?: (e) => void;
+  onTouchEnd?: (e: React.TouchEvent<HTMLDivElement>) => void;
   style?: CSSProperties;
   ref?: RefObject<HTMLDivElement>;
 }

package/src/Dialog/Duplicate/index.tsx

@@ -26,13 +26,15 @@ const Duplicate = ({
   ...rest
 }: Props): JSX.Element => {
   const { classes } = useStyles();
-  const [value, setValue] = useState(1);
+  const [value, setValue] = useState<string | number>(1);
 
-  const handleChange = ({ target }): void => {
+  const handleChange = ({
+    target
+  }: React.ChangeEvent<HTMLInputElement>): void => {
     setValue(target.value);
   };
 
-  const handleConfirm = (event): void => {
+  const handleConfirm = (event: React.MouseEvent<HTMLButtonElement>): void => {
     onConfirm(event, value);
   };
 

package/src/Dialog/index.tsx

@@ -48,7 +48,10 @@ export type Props = {
   labelTitle?: ReactNode;
   onCancel?: () => void;
   onClose?: () => void;
-  onConfirm: (event, value?) => void;
+  onConfirm: (
+    event: React.MouseEvent<HTMLButtonElement>,
+    value?: unknown
+  ) => void;
   open: boolean;
   restCancelButtonProps?: ButtonProps;
   restConfirmButtonProps?: ButtonProps;

package/src/Form/Inputs/Autocomplete.tsx

@@ -12,28 +12,37 @@ import { useMemoComponent } from '../../utils';
 import { labelPressEnterToAccept } from '../translatedLabels';
 import { type InputPropsWithoutGroup, InputType } from './models';
 
+interface NormalizeNewValuesProps {
+  isCreatable?: boolean;
+  isMultiple: boolean;
+  newValues: SelectEntry | Array<SelectEntry | string> | null;
+}
+
 const normalizeNewValues = ({
   newValues,
   isMultiple,
   isCreatable
-}): SelectEntry | Array<string | SelectEntry> => {
+}: NormalizeNewValuesProps): SelectEntry | Array<string | SelectEntry> => {
   const isSingle = not(isMultiple);
   if (isSingle) {
-    return newValues;
+    return newValues as SelectEntry;
   }
 
-  return map((newValue: SelectEntry | string) => {
-    const isManualValue = equals(type(newValue), 'String');
-    if (isCreatable && isManualValue) {
-      return newValue;
-    }
+  return map(
+    (newValue: SelectEntry | string) => {
+      const isManualValue = equals(type(newValue), 'String');
+      if (isCreatable && isManualValue) {
+        return newValue;
+      }
 
-    if (isCreatable) {
-      return prop('name', newValue as SelectEntry);
-    }
+      if (isCreatable) {
+        return prop('name', newValue as SelectEntry);
+      }
 
-    return newValue;
-  }, newValues);
+      return newValue;
+    },
+    newValues as Array<SelectEntry | string>
+  );
 };
 
 const Autocomplete = ({
@@ -63,7 +72,10 @@ const Autocomplete = ({
 
   const isMultiple = equals(inputType, InputType.MultiAutocomplete);
 
-  const changeValues = (_, newValues): void => {
+  const changeValues = (
+    _: React.SyntheticEvent,
+    newValues: SelectEntry | Array<SelectEntry | string> | null
+  ): void => {
     const normalizedNewValues = normalizeNewValues({
       isCreatable,
       isMultiple,
@@ -116,7 +128,7 @@ const Autocomplete = ({
             return undefined;
           }
 
-          return `${selectedValues?.[index]}: ${errorText}`;
+          return `${(selectedValues as Array<SelectEntry> | undefined)?.[index]}: ${errorText}`;
         }
       );
 
@@ -133,7 +145,8 @@ const Autocomplete = ({
   }, [errors, fieldName, isMultiple, selectedValues, touched]);
 
   const textChange = useCallback(
-    (event): void => setInputText(event.target.value),
+    (event: React.ChangeEvent<HTMLInputElement>): void =>
+      setInputText(event.target.value),
     []
   );
 
@@ -143,9 +156,7 @@ const Autocomplete = ({
     | undefined => {
     if (isMultiple && isCreatable) {
       return equals(type(selectedValues), 'Array')
-        ? (
-            selectedValues as Array<SelectEntry> | Array<string> | undefined
-          )?.map((value) => ({
+        ? (selectedValues as Array<string> | undefined)?.map((value) => ({
             id: value,
             name: value
           }))
@@ -179,7 +190,7 @@ const Autocomplete = ({
             equals(option, selectedValue)
           }
           label={`${t(label)}${additionalLabel}`}
-          onChange={changeValues}
+          onChange={changeValues as never}
           onTextChange={textChange}
           open={isCreatable ? false : undefined}
           options={autocomplete?.options || []}

package/src/Form/Inputs/ConnectedAutocomplete.tsx

@@ -8,6 +8,8 @@ import {
   SingleConnectedAutocompleteField,
   useMemoComponent
 } from '../..';
+import type { SelectEntry } from '../../InputField/Select';
+import type { GetEndpointParams } from '../../InputField/Select/Autocomplete/Connected';
 import MultiConnectedAutocompleteField from '../../InputField/Select/Autocomplete/Connected/Multi';
 import { InputPropsWithoutGroup, InputType } from './models';
 
@@ -42,13 +44,15 @@ const ConnectedAutocomplete = ({
 
   const isMultiple = equals(type, InputType.MultiConnectedAutocomplete);
 
-  const getEndpoint = (parameters): string => {
+  const getEndpoint = (parameters: GetEndpointParams): string => {
     const nameQueryParameters =
       connectedAutocomplete?.useNewAPIFormat && parameters?.search
         ? [
             {
               name: 'name[lk]',
-              value: parameters.search.conditions[0].values.$lk.slice(1, -1)
+              value: (
+                parameters.search.conditions?.[0].values?.$lk as string
+              ).slice(1, -1)
             }
           ]
         : [];
@@ -79,7 +83,13 @@ const ConnectedAutocomplete = ({
   const fieldNamePath = split('.', fieldName);
 
   const changeAutocomplete = useCallback(
-    (_, value): void => {
+    (
+      _: React.SyntheticEvent,
+      value:
+        | NonNullable<string | SelectEntry>
+        | Array<string | SelectEntry>
+        | null
+    ): void => {
       if (change) {
         change({
           setFieldTouched,
@@ -102,10 +112,13 @@ const ConnectedAutocomplete = ({
   const blur = (): void => void setFieldTouched(fieldName, true);
 
   const isOptionEqualToValue = useCallback(
-    (option, value): boolean => {
+    (option: SelectEntry, value: SelectEntry): boolean => {
       return isEmpty(value)
         ? false
-        : equals(option[filterKey], value[filterKey]);
+        : equals(
+            option[filterKey as keyof SelectEntry],
+            value[filterKey as keyof SelectEntry]
+          );
     },
     [filterKey]
   );
@@ -116,7 +129,7 @@ const ConnectedAutocomplete = ({
     | undefined;
 
   const error = path(fieldNamePath, touched)
-    ? path(fieldNamePath, errors)
+    ? (path(fieldNamePath, errors) as string | undefined)
     : undefined;
 
   const disabled = getDisabled?.(values) || false;
@@ -130,10 +143,10 @@ const ConnectedAutocomplete = ({
     [isMultiple]
   );
 
-  const deleteItem = (_, option): void => {
+  const deleteItem = (_: React.SyntheticEvent, option: SelectEntry): void => {
     const newValue = reject(
       propEq(option.id, 'id'),
-      (value ?? []) as Array<Record<string, unknown>>
+      (value ?? []) as Array<unknown> as Array<{ id: string | number }>
     );
 
     setFieldTouched(fieldName, true, false);
@@ -145,9 +158,14 @@ const ConnectedAutocomplete = ({
     onDelete: deleteItem
   };
 
+  const TypedAutocompleteField =
+    AutocompleteField as unknown as React.ComponentType<
+      Record<string, unknown>
+    >;
+
   return useMemoComponent({
     Component: (
-      <AutocompleteField
+      <TypedAutocompleteField
         chipProps={chipProps}
         dataTestId={dataTestId}
         decoder={connectedAutocomplete?.decoder}

package/src/Form/Inputs/FieldsTable/FieldsTable.tsx

@@ -93,12 +93,12 @@ interface Entity extends FieldsTableContextProps {
 }
 
 interface ContentProps extends Entity {
-  attributes;
+  attributes: Record<string, unknown>;
   index: number;
   isDragging: boolean;
   itemRef: React.RefObject<HTMLDivElement>;
   listeners: DraggableSyntheticListeners;
-  style;
+  style: React.CSSProperties;
 }
 
 const SortableRow = ({
@@ -269,25 +269,36 @@ const FieldsTable = ({
     }
   }, [fieldsTable, values, getSortableDefined]);
 
-  const updatePriorities = (items): Array<unknown> =>
-    items.reduce((acc, curr, index) => {
-      const row = acc[curr];
-
-      if (isNil(row)) {
-        return acc;
-      }
+  const updatePriorities = (items: Array<string>): Array<unknown> =>
+    items.reduce(
+      (
+        acc: Array<TableRowValue>,
+        curr: string,
+        index: number
+      ): Array<TableRowValue> => {
+        const row = acc[Number(curr)];
+
+        if (isNil(row)) {
+          return acc;
+        }
 
-      (row as Record<string, unknown>).priority = index;
+        (row as Record<string, unknown>).priority = index;
 
-      return acc;
-    }, clone(tableValues));
+        return acc;
+      },
+      clone(tableValues)
+    );
 
   const dragEnd = ({ items }: DragEnd): void => {
     const updatedPriorities = updatePriorities(items);
     setFieldValue(fieldName, updatedPriorities);
   };
 
-  const disableOverItemSortableCondition = ({ id }): boolean =>
+  const disableOverItemSortableCondition = ({
+    id
+  }: {
+    id: number | string;
+  }): boolean =>
     Number(id) === tableValues.length || not(isNil(fieldsTableError));
 
   return useMemoComponent({

package/src/Form/Inputs/FieldsTable/Row.tsx

@@ -88,7 +88,13 @@ const Row = ({
     setFieldValue(tableFieldName, remove(index, 1, tableValues));
   };
 
-  const changeRow = ({ property, value }): void => {
+  const changeRow = ({
+    property,
+    value
+  }: {
+    property: string;
+    value: unknown;
+  }): void => {
     const currentRowValue = rowValues || defaultRowValue;
 
     setFieldValue(

package/src/Form/Inputs/List/Content.tsx

@@ -8,7 +8,7 @@ import { IconButton } from '../../../components';
 import { useListStyles } from './List.styles';
 
 export interface ContentProps {
-  attributes;
+  attributes: Record<string, unknown>;
   children: ReactNode;
   deleteItem: (id: string) => () => void;
   id: string;
@@ -17,7 +17,7 @@ export interface ContentProps {
   itemRef: React.RefObject<HTMLDivElement>;
   listeners: DraggableSyntheticListeners;
   name: string;
-  style;
+  style: React.CSSProperties;
 }
 
 const Content = ({

package/src/Form/Inputs/List/List.tsx

@@ -3,6 +3,7 @@ import { verticalListSortingStrategy } from '@dnd-kit/sortable';
 import type { ComponentType } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import type { SelectEntry } from '../../..';
 import { SortableItems, Subtitle } from '../../..';
 import type { InputPropsWithoutGroup } from '../models';
 import Content, { type ContentProps } from './Content';
@@ -19,7 +20,7 @@ const List = ({
   const { addItem, sortList, sortedList, deleteItem } = useList({ fieldName });
 
   const { AddItem, addItemLabel, sortLabel, SortContent, itemProps } = list as {
-    AddItem: ComponentType<{ addItem }>;
+    AddItem: ComponentType<{ addItem: (newItem: SelectEntry) => void }>;
     SortContent: ComponentType;
     addItemLabel?: string;
     itemProps: Array<string>;

package/src/Form/Inputs/List/useList.ts

@@ -20,7 +20,7 @@ interface UseListState {
   sortedList: Array<unknown>;
 }
 
-export const useList = ({ fieldName }): UseListState => {
+export const useList = ({ fieldName }: { fieldName: string }): UseListState => {
   const { values, setFieldValue } = useFormikContext<FormikValues>();
   const maxOrder = useRef(0);
 

package/src/Form/Inputs/Radio.tsx

@@ -28,7 +28,10 @@ const Radio = ({
   const { values, setFieldValue, setFieldTouched, setValues, setTouched } =
     useFormikContext<FormikValues>();
 
-  const changeRadio = (_, value): void => {
+  const changeRadio = (
+    _: React.ChangeEvent<HTMLInputElement>,
+    value: string
+  ): void => {
     if (includes(value, ['true', 'false'])) {
       if (change) {
         change({

package/src/Form/Inputs/models.ts

@@ -1,11 +1,39 @@
 import type { SvgIconProps, TypographyProps } from '@mui/material';
 
-import type { FormikValues } from 'formik';
+import type { FormikErrors, FormikTouched, FormikValues } from 'formik';
+import type { JsonDecoder } from 'ts.data.json';
 
 import type { ConditionsSearchParameter } from '../../api/buildListingEndpoint/models';
 import type { SelectEntry } from '../../InputField/Select';
 import type { QueryParameter } from '../../queryParameters/models';
 
+export interface ChangeArgs {
+  setFieldValue: (
+    field: string,
+    value: unknown,
+    shouldValidate?: boolean
+    // biome-ignore lint/suspicious/noConfusingVoidType: matches Formik's type signature
+  ) => Promise<void | FormikErrors<FormikValues>>;
+  setFieldTouched: (
+    field: string,
+    isTouched?: boolean,
+    shouldValidate?: boolean
+    // biome-ignore lint/suspicious/noConfusingVoidType: matches Formik's type signature
+  ) => Promise<void | FormikErrors<FormikValues>>;
+  setValues: (
+    values: React.SetStateAction<FormikValues>,
+    shouldValidate?: boolean
+    // biome-ignore lint/suspicious/noConfusingVoidType: matches Formik's type signature
+  ) => Promise<void | FormikErrors<FormikValues>>;
+  setTouched: (
+    touched: FormikTouched<FormikValues>,
+    shouldValidate?: boolean
+    // biome-ignore lint/suspicious/noConfusingVoidType: matches Formik's type signature
+  ) => Promise<void | FormikErrors<FormikValues>>;
+  value: unknown;
+  values: FormikValues;
+}
+
 export enum InputType {
   Switch = 0,
   Radio = 1,
@@ -49,7 +77,7 @@ export interface InputProps {
     setValues,
     values,
     setTouched
-  }) => void;
+  }: ChangeArgs) => void;
   checkbox?: {
     direction?: 'horizontal' | 'vertical';
     labelPlacement?: LabelPlacement;
@@ -62,19 +90,23 @@ export interface InputProps {
     chipColor?: string;
     endpoint?: string;
     filterKey?: string;
-    getRenderedOptionText?: (option) => string | JSX.Element;
-    getOptionLabel?: (option) => string;
+    getRenderedOptionText?: (option: { name: string }) => string | JSX.Element;
+    getOptionLabel?: (option: string | SelectEntry) => string;
     helperText?: string;
     optionProperty?: string;
     disableSelectAll?: boolean;
     limitTags?: number;
-    decoder?;
+    decoder?: JsonDecoder.Decoder<unknown>;
   };
   file?: {
     multiple?: boolean;
     accept?: string;
     maxFileSize?: number;
-    CustomDropZoneContent: ({ files }) => JSX.Element;
+    CustomDropZoneContent: ({
+      files
+    }: {
+      files: FileList | null;
+    }) => JSX.Element;
   };
   custom?: {
     Component: React.ComponentType<InputPropsWithoutGroup>;
@@ -105,7 +137,9 @@ export interface InputProps {
   inputClassName?: string;
   label: string;
   list?: {
-    AddItem: React.ComponentType<{ addItem }>;
+    AddItem: React.ComponentType<{
+      addItem: (newItem: SelectEntry) => void;
+    }>;
     SortContent: React.ComponentType<object>;
     addItemLabel?: string;
     itemProps: Array<string>;
@@ -120,7 +154,7 @@ export interface InputProps {
   };
   required?: boolean;
   switchInput?: {
-    getChecked?: (value) => boolean;
+    getChecked?: (value: unknown) => boolean;
   };
   text?: {
     endAdornment?: JSX.Element;

package/src/Form/Section/PanelTabs.tsx

@@ -1,6 +1,6 @@
 import { prop, sortBy } from 'ramda';
-import type { TabI } from 'src/components/Tabs/Tabs';
 
+import type { TabI } from '../../components/Tabs/Tabs';
 import type { Group } from '../Inputs/models';
 
 const groupToTab = (groups?: Array<Group>): Array<TabI> => {

package/src/Form/storiesData.tsx

@@ -483,7 +483,7 @@ export const CustomButton = (): JSX.Element => {
   );
 };
 
-const buildEntities = (from): Array<SelectEntry> => {
+const buildEntities = (from: number): Array<SelectEntry> => {
   return Array(10)
     .fill(0)
     .map((_, index) => ({
@@ -492,7 +492,7 @@ const buildEntities = (from): Array<SelectEntry> => {
     }));
 };
 
-export const buildResult = (page): Listing<SelectEntry> => ({
+export const buildResult = (page: number): Listing<SelectEntry> => ({
   meta: {
     limit: 10,
     page,