@centreon/ui 26.3.4 → 26.3.6

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

@@ -1,11 +1,16 @@
-import { useEffect, useState } from 'react';
+import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
+import { FormHelperText, IconButton, Typography } from '@mui/material';
 
-import { DraggableSyntheticListeners, rectIntersection } from '@dnd-kit/core';
+import { userAtom } from '@centreon/ui-context';
+
+import {
+  type DraggableSyntheticListeners,
+  rectIntersection
+} from '@dnd-kit/core';
 import { verticalListSortingStrategy } from '@dnd-kit/sortable';
-import { FormikValues, useFormikContext } from 'formik';
+import { type FormikValues, useFormikContext } from 'formik';
 import { useAtomValue } from 'jotai';
 import {
-  path,
   clone,
   dec,
   equals,
@@ -16,26 +21,22 @@ import {
   map,
   not,
   or,
+  path,
   pick,
   pipe,
   split,
   type
 } from 'ramda';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 
-import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
-import { FormHelperText, IconButton, Typography } from '@mui/material';
-
-import { userAtom } from '@centreon/ui-context';
-
 import { SortableItems, useMemoComponent } from '../../..';
-import { DragEnd } from '../../../SortableItems';
-import {
+import type { DragEnd } from '../../../SortableItems';
+import type {
   InputPropsWithoutGroup,
   InputPropsWithoutGroupAndType
 } from '../models';
-
 import Row from './Row';
 
 interface StylesProps {
@@ -146,8 +147,8 @@ const SortableRow = ({
         index={Number(id)}
         isLastElement={isLastElement}
         label={label}
-        tableFieldName={fieldName}
         onDeleteRow={deleteRow}
+        tableFieldName={fieldName}
       />
     </div>
   );
@@ -266,7 +267,7 @@ const FieldsTable = ({
     if (getSortableDefined) {
       setIsSortable(fieldsTable?.getSortable?.(values) || false);
     }
-  }, [fieldName, fieldsTable, fieldsTableRows, label, values]);
+  }, [fieldsTable, values, getSortableDefined]);
 
   const updatePriorities = (items): Array<unknown> =>
     items.reduce((acc, curr, index) => {
@@ -296,7 +297,6 @@ const FieldsTable = ({
         <div className={classes.table}>
           {isSortable ? (
             <SortableItems<Entity>
-              updateSortableItemsOnItemsChange
               Content={SortableRow}
               collisionDetection={rectIntersection}
               getDisableOverItemSortableCondition={
@@ -312,8 +312,9 @@ const FieldsTable = ({
                 'onDeleteRow'
               ]}
               items={sortableItems}
-              sortingStrategy={verticalListSortingStrategy}
               onDragEnd={dragEnd}
+              sortingStrategy={verticalListSortingStrategy}
+              updateSortableItemsOnItemsChange
             />
           ) : (
             keysToIterate.map((idx): JSX.Element => {
@@ -333,8 +334,8 @@ const FieldsTable = ({
                     index={idx}
                     isLastElement={isLastElement}
                     label={label}
-                    tableFieldName={fieldName}
                     onDeleteRow={getSortableDefined ? onDeleteRow : undefined}
+                    tableFieldName={fieldName}
                   />
                 </div>
               );

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

@@ -1,15 +1,14 @@
-import { Children } from 'react';
+import DeleteIcon from '@mui/icons-material/Delete';
 
-import { FormikValues, useFormikContext } from 'formik';
-import { path, inc, is, not, remove, split } from 'ramda';
+import { type FormikValues, useFormikContext } from 'formik';
+import { inc, is, not, path, remove, split } from 'ramda';
+import { Children } from 'react';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 
-import DeleteIcon from '@mui/icons-material/Delete';
-
-import { getInput } from '..';
 import { IconButton } from '../../..';
-import { InputPropsWithoutGroup } from '../models';
+import { getInput } from '..';
+import type { InputPropsWithoutGroup } from '../models';
 
 interface StylesProps {
   actionsCount?: number;
@@ -133,8 +132,8 @@ const Row = ({
           <IconButton
             ariaLabel={deleteLabel && (t(deleteLabel) || '')}
             className={classes.icon}
-            title={deleteLabel && (t(deleteLabel) || '')}
             onClick={deleteRow}
+            title={deleteLabel && (t(deleteLabel) || '')}
           >
             <DeleteIcon />
           </IconButton>

package/src/Form/Inputs/File.tsx

@@ -1,11 +1,13 @@
 import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined';
 import { Box, Typography } from '@mui/material';
-import { FormikValues, useFormikContext } from 'formik';
+
+import { type FormikValues, useFormikContext } from 'formik';
 import { path, split } from 'ramda';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+
 import FileDropZone, { transformFileListToArray } from '../../FileDropZone';
-import { InputPropsWithoutGroup } from './models';
+import type { InputPropsWithoutGroup } from './models';
 
 const File = ({
   fieldName,
@@ -23,14 +25,14 @@ const File = ({
 
   const files = useMemo(
     () => path(fieldNamePath, values),
-    [values]
+    [values, fieldNamePath]
   ) as FileList;
 
   const filesArray = transformFileListToArray(files);
 
   const changeFiles = (newFiles: FileList | null): void => {
     if (change) {
-      change({ setFieldValue, setFieldTouched, value: newFiles });
+      change({ setFieldTouched, setFieldValue, value: newFiles });
 
       return;
     }
@@ -39,22 +41,22 @@ const File = ({
   };
 
   return (
-    <Box data-testid={dataTestId} aria-label={t(label)}>
+    <Box aria-label={t(label)} data-testid={dataTestId}>
       <Typography variant="h6">{t(label)}</Typography>
-      <Box sx={{ display: 'flex', gap: 1, flexDirection: 'column' }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
         <FileDropZone
           {...file}
           accept={file?.accept || '*'}
-          files={files || null}
           changeFiles={changeFiles}
-          resetFilesStatusAndUploadData={() => undefined}
+          files={files || null}
           label={label}
+          resetFilesStatusAndUploadData={() => undefined}
         />
-        <Box sx={{ display: 'flex', gap: 1, flexDirection: 'column' }}>
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
           {filesArray.map((file) => (
             <Box
               key={file.name}
-              sx={{ display: 'flex', gap: 1, flexDirection: 'row' }}
+              sx={{ display: 'flex', flexDirection: 'row', gap: 1 }}
             >
               <DescriptionOutlinedIcon color="success" fontSize="small" />
               <Typography>{file.name}</Typography>

package/src/Form/Inputs/Grid.tsx

@@ -1,9 +1,10 @@
-import { InputPropsWithoutGroup } from './models';
-
 import { Box, Typography } from '@mui/material';
-import { FormikValues, useFormikContext } from 'formik';
+
+import { type FormikValues, useFormikContext } from 'formik';
 import { isNotEmpty, isNotNil } from 'ramda';
+
 import { getInput } from '.';
+import type { InputPropsWithoutGroup } from './models';
 
 const Grid = ({
   grid,
@@ -21,11 +22,11 @@ const Grid = ({
     <div
       className={`${className} grid gap-3`}
       style={{
+        alignItems: grid?.alignItems || 'flex-start',
         gridTemplateColumns: className
           ? grid?.gridTemplateColumns || undefined
           : grid?.gridTemplateColumns ||
-            `repeat(${grid?.columns.length || 1}, 1fr)`,
-        alignItems: grid?.alignItems || 'flex-start'
+            `repeat(${grid?.columns.length || 1}, 1fr)`
       }}
     >
       {grid?.columns.map((field) => {
@@ -41,11 +42,11 @@ const Grid = ({
         }
 
         return (
-          <Box sx={{ width: '100%' }} key={key}>
+          <Box key={key} sx={{ width: '100%' }}>
             {field.additionalLabel && (
               <Typography
-                sx={{ marginBottom: 0.5, color: 'primary.main' }}
                 className={field?.additionalLabelClassName}
+                sx={{ color: 'primary.main', marginBottom: 0.5 }}
                 variant="h6"
               >
                 {field.additionalLabel}

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

@@ -1,12 +1,10 @@
-import { ReactNode } from 'react';
-
-import { DraggableSyntheticListeners } from '@dnd-kit/core';
-
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import KrilinIndicatorIcon from '@mui/icons-material/DragIndicator';
 
-import { IconButton } from '../../../components';
+import type { DraggableSyntheticListeners } from '@dnd-kit/core';
+import type { ReactNode } from 'react';
 
+import { IconButton } from '../../../components';
 import { useListStyles } from './List.styles';
 
 export interface ContentProps {
@@ -52,8 +50,8 @@ const Content = ({
       <IconButton
         aria-label={`delete-${id}`}
         icon={<DeleteOutlineIcon color="error" fontSize="small" />}
-        size="small"
         onClick={deleteItem(id)}
+        size="small"
       />
     </div>
   );

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

@@ -18,7 +18,7 @@ export const useListStyles = makeStyles()((theme) => ({
     flexGrow: 1
   },
   items: {
-    maxHeight: theme.spacing(16),
+    maxHweight: theme.spacing(16),
     overflowY: 'auto'
   },
   list: {

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

@@ -1,13 +1,11 @@
-import { ComponentType } from 'react';
-
 import { closestCenter } from '@dnd-kit/core';
 import { verticalListSortingStrategy } from '@dnd-kit/sortable';
+import type { ComponentType } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { SortableItems, Subtitle } from '../../..';
-import { InputPropsWithoutGroup } from '../models';
-
-import Content, { ContentProps } from './Content';
+import type { InputPropsWithoutGroup } from '../models';
+import Content, { type ContentProps } from './Content';
 import { useListStyles } from './List.styles';
 import { useList } from './useList';
 
@@ -35,20 +33,20 @@ const List = ({
       {sortLabel && <Subtitle>{t(sortLabel)}</Subtitle>}
       <div className={classes.items}>
         <SortableItems
-          updateSortableItemsOnItemsChange
-          // eslint-disable-next-line react/no-unstable-nested-components
           Content={(props: Omit<ContentProps, 'children' | 'deleteItem'>) => (
             <Content {...props} deleteItem={deleteItem}>
               <SortContent {...props} />
             </Content>
           )}
+          // eslint-disable-next-line react/no-unstable-nested-components
           collisionDetection={closestCenter}
           itemProps={itemProps}
           items={sortedList}
-          sortingStrategy={verticalListSortingStrategy}
           onDragEnd={({ items }): void => {
             sortList(items);
           }}
+          sortingStrategy={verticalListSortingStrategy}
+          updateSortableItemsOnItemsChange
         />
       </div>
     </div>

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

@@ -1,6 +1,4 @@
-import { useMemo, useRef } from 'react';
-
-import { FormikValues, useFormikContext } from 'formik';
+import { type FormikValues, useFormikContext } from 'formik';
 import {
   append,
   equals,
@@ -11,8 +9,9 @@ import {
   reject,
   sortBy
 } from 'ramda';
+import { useMemo, useRef } from 'react';
 
-import { SelectEntry } from '../../..';
+import type { SelectEntry } from '../../..';
 
 interface UseListState {
   addItem: (newItem: SelectEntry) => void;
@@ -75,7 +74,7 @@ export const useList = ({ fieldName }): UseListState => {
   return {
     addItem,
     deleteItem,
-    sortList,
-    sortedList
+    sortedList,
+    sortList
   };
 };

package/src/Form/Inputs/LoadingSkeleton.tsx

@@ -1,8 +1,7 @@
 import { always, cond, equals } from 'ramda';
 
 import LoadingSkeleton from '../../LoadingSkeleton';
-
-import { InputProps, InputType } from './models';
+import { type InputProps, InputType } from './models';
 
 const getSkeleton = cond<Array<InputType>, JSX.Element>([
   [

package/src/Form/Inputs/PasswordEndAdornment.tsx

@@ -1,9 +1,9 @@
-import { useTranslation } from 'react-i18next';
-
 import VisibilityIcon from '@mui/icons-material/Visibility';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import { InputAdornment } from '@mui/material';
 
+import { useTranslation } from 'react-i18next';
+
 import { IconButton } from '../..';
 import {
   labelDisplayThePassword,
@@ -28,8 +28,8 @@ const PasswordEndAdornment = ({
     <InputAdornment position="end">
       <IconButton
         ariaLabel={t(label) || ''}
-        size="small"
         onClick={changeVisibility}
+        size="small"
       >
         {icon}
       </IconButton>

package/src/Form/Inputs/Radio.tsx

@@ -1,7 +1,3 @@
-import { FormikValues, useFormikContext } from 'formik';
-import { path, equals, includes, split, type } from 'ramda';
-import { useTranslation } from 'react-i18next';
-
 import {
   FormControlLabel,
   FormGroup,
@@ -10,10 +6,13 @@ import {
   RadioGroup
 } from '@mui/material';
 
+import { type FormikValues, useFormikContext } from 'formik';
+import { equals, includes, path, split, type } from 'ramda';
+import { useTranslation } from 'react-i18next';
+
 import { useMemoComponent } from '../..';
 import { getNormalizedId } from '../../utils';
-
-import { InputPropsWithoutGroup } from './models';
+import type { InputPropsWithoutGroup } from './models';
 
 const Radio = ({
   dataTestId,
@@ -33,12 +32,12 @@ const Radio = ({
     if (includes(value, ['true', 'false'])) {
       if (change) {
         change({
-          setFieldValue,
-          value: equals(value, 'true'),
-          values,
           setFieldTouched,
+          setFieldValue,
+          setTouched,
           setValues,
-          setTouched
+          value: equals(value, 'true'),
+          values
         });
 
         return;
@@ -50,7 +49,7 @@ const Radio = ({
     }
 
     if (change) {
-      change({ setFieldValue, value, values, setFieldTouched, setValues });
+      change({ setFieldTouched, setFieldValue, setValues, value, values });
 
       return;
     }
@@ -69,9 +68,9 @@ const Radio = ({
       <FormGroup>
         <FormLabel>{t(label)}</FormLabel>
         <RadioGroup
+          onChange={changeRadio}
           row={radio?.row || false}
           value={value}
-          onChange={changeRadio}
         >
           {radio?.options?.map(({ value: optionValue, label: optionLabel }) => (
             <FormControlLabel

package/src/Form/Inputs/Switch.tsx

@@ -1,15 +1,13 @@
-import { ChangeEvent } from 'react';
+import { FormControlLabel, Switch as MUISwitch } from '@mui/material';
 
-import { FormikValues, useFormikContext } from 'formik';
+import { type FormikValues, useFormikContext } from 'formik';
 import { path, split } from 'ramda';
+import type { ChangeEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { FormControlLabel, Switch as MUISwitch } from '@mui/material';
-
 import { useMemoComponent } from '../..';
 import { getNormalizedId } from '../../utils/getNormalizedId';
-
-import { InputPropsWithoutGroup } from './models';
+import type { InputPropsWithoutGroup } from './models';
 
 const Switch = ({
   dataTestId,
@@ -28,12 +26,12 @@ const Switch = ({
   const changeSwitchValue = (event: ChangeEvent<HTMLInputElement>): void => {
     if (change) {
       change({
-        setFieldValue,
-        value: event.target.checked,
-        values,
         setFieldTouched,
+        setFieldValue,
+        setTouched,
         setValues,
-        setTouched
+        value: event.target.checked,
+        values
       });
 
       return;
@@ -58,12 +56,12 @@ const Switch = ({
             data-testid={dataTestId}
             disabled={disabled}
             id={getNormalizedId(dataTestId || '')}
+            onChange={changeSwitchValue}
             slotProps={{
               input: {
                 'aria-label': t(label) || ''
               }
             }}
-            onChange={changeSwitchValue}
           />
         }
         label={t(label) as string}

package/src/Form/Inputs/Text.tsx

@@ -1,23 +1,21 @@
-import { ChangeEvent, useCallback, useState } from 'react';
+import { InputAdornment } from '@mui/material';
 
-import { FormikValues, useFormikContext } from 'formik';
+import { type FormikValues, useFormikContext } from 'formik';
 import {
-  path,
   equals,
   gt,
   isEmpty,
   not,
+  path,
   split,
   type as variableType
 } from 'ramda';
+import { type ChangeEvent, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { InputAdornment } from '@mui/material';
-
 import { TextField, useMemoComponent } from '../..';
-
+import { type InputPropsWithoutGroup, InputType } from './models';
 import PasswordEndAdornment from './PasswordEndAdornment';
-import { InputPropsWithoutGroup, InputType } from './models';
 
 const Text = ({
   dataTestId,
@@ -53,12 +51,12 @@ const Text = ({
     const { value } = event.target;
     if (change) {
       change({
-        setFieldValue,
-        value,
         setFieldTouched,
+        setFieldValue,
+        setTouched,
         setValues,
-        values,
-        setTouched
+        value,
+        values
       });
 
       return;
@@ -99,7 +97,7 @@ const Text = ({
     }
 
     return null;
-  }, [isVisible]);
+  }, [isVisible, changeVisibility, text?.endAdornment, type]);
 
   const getInputType = (): string => {
     if (text?.type) {
@@ -122,32 +120,32 @@ const Text = ({
   return useMemoComponent({
     Component: (
       <TextField
-        fullWidth={text?.fullWidth ?? true}
-        EndAdornment={EndAdornment}
         ariaLabel={t(label) || ''}
         autoFocus={autoFocus}
-        dataTestId={dataTestId || label}
         data-testid-suffix={`test-${label}`}
+        dataTestId={dataTestId || label}
         disabled={disabled}
+        EndAdornment={EndAdornment}
         error={error as string | undefined}
+        fullWidth={text?.fullWidth ?? true}
         label={t(label)}
         multiline={isMultiline}
+        onBlur={handleBlur(fieldName)}
+        onChange={changeText}
         placeholder={text?.placeholder}
         required={isRequired}
         rows={rows}
-        type={getInputType()}
-        value={value || ''}
-        onBlur={handleBlur(fieldName)}
-        onChange={changeText}
         textFieldSlotsAndSlotProps={{
           slotProps: {
             htmlInput: {
-              'data-testid': dataTestId || label,
               'aria-label': label,
+              'data-testid': dataTestId || label,
               min: text?.min
             }
           }
         }}
+        type={getInputType()}
+        value={value || ''}
       />
     ),
     memoProps: [

package/src/Form/Inputs/index.tsx

@@ -1,15 +1,7 @@
-import { Fragment, useMemo } from 'react';
-
-import { FormikValues, useFormikContext } from 'formik';
-import { makeStyles } from 'tss-react/mui';
-
 import { Divider, Typography } from '@mui/material';
 
-import { GroupDirection } from '..';
-import CollapsibleGroup from '../CollapsibleGroup';
-
+import { type FormikValues, useFormikContext } from 'formik';
 import {
-  T,
   always,
   any,
   ascend,
@@ -30,8 +22,14 @@ import {
   propEq,
   reduce,
   sort,
+  T,
   toPairs
 } from 'ramda';
+import { Fragment, useMemo } from 'react';
+import { makeStyles } from 'tss-react/mui';
+
+import { GroupDirection } from '..';
+import CollapsibleGroup from '../CollapsibleGroup';
 import Autocomplete from './Autocomplete';
 import Checkbox from './Checkbox';
 import CheckboxGroup from './CheckboxGroup';
@@ -42,11 +40,16 @@ import File from './File';
 import Grid from './Grid';
 import List from './List/List';
 import LoadingSkeleton from './LoadingSkeleton';
+import {
+  type Group,
+  type InputProps,
+  type InputPropsWithoutGroup,
+  InputType
+} from './models';
 import RadioInput from './Radio';
 import { SubgroupDivider } from './SubGroupDivider';
 import SwitchInput from './Switch';
 import TextInput from './Text';
-import { Group, InputProps, InputPropsWithoutGroup, InputType } from './models';
 
 export const getInput = cond<
   Array<InputType>,
@@ -116,14 +119,14 @@ const useStyles = makeStyles<StylesProps>()((theme, { groupDirection }) => ({
       ? 'row'
       : 'column'
   },
-  inputWrapper: {
-    width: '100%'
-  },
   inputs: {
     display: 'flex',
     flexDirection: 'column',
     margin: theme.spacing(2, 0),
     rowGap: theme.spacing(2)
+  },
+  inputWrapper: {
+    width: '100%'
   }
 }));
 
@@ -163,7 +166,7 @@ const Inputs = ({
         ({ group }) => find(equals(group), groupsName) as string,
         visibleInputs
       ),
-    [visibleInputs]
+    [visibleInputs, groupsName]
   ) as Record<string, Array<InputProps>>;
 
   const sortedGroupNames = useMemo(() => {
@@ -190,10 +193,10 @@ const Inputs = ({
         {},
         sortedGroupNames
       ),
-    [visibleInputs]
+    [inputsByGroup, sortedGroupNames]
   );
 
-  const lastGroup = useMemo(() => last(sortedGroupNames), []);
+  const lastGroup = useMemo(() => last(sortedGroupNames), [sortedGroupNames]);
 
   const normalizedInputsByGroup = (
     isEmpty(sortedInputsByGroup)
@@ -262,8 +265,8 @@ const Inputs = ({
               hasGroupTitle &&
               not(equals(lastGroup, groupName as string)) && (
                 <Divider
-                  flexItem
                   className={classes.divider}
+                  flexItem
                   orientation={
                     equals(groupDirection, GroupDirection.Horizontal)
                       ? 'vertical'