@centreon/ui 24.9.4 → 24.9.6

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

@@ -1,12 +1,14 @@
-import { equals, isEmpty, isNil, pick } from 'ramda';
+import * as React from 'react';
+
+import { equals, isNil, pick } from 'ramda';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 
 import {
-  Autocomplete,
-  AutocompleteProps,
   CircularProgress,
   InputAdornment,
+  Autocomplete,
+  AutocompleteProps,
   useTheme
 } from '@mui/material';
 import { autocompleteClasses } from '@mui/material/Autocomplete';
@@ -14,12 +16,11 @@ 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 Option from '../Option';
 import TextField from '../../Text';
+import { SelectEntry } from '..';
 import { searchLabel } from '../../translatedLabels';
-import Option from '../Option';
+import getNormalizedId from '../../../utils/getNormalizedId';
 
 export type Props = {
   autoFocus?: boolean;
@@ -29,9 +30,8 @@ export type Props = {
   dataTestId?: string;
   displayOptionThumbnail?: boolean;
   displayPopupIcon?: boolean;
-  endAdornment?: ReactElement;
+  endAdornment?: React.ReactElement;
   error?: string;
-  getOptionItemLabel?: (option) => string;
   hideInput?: boolean;
   label: string;
   loading?: boolean;
@@ -140,139 +140,124 @@ type Multiple = boolean;
 type DisableClearable = boolean;
 type FreeSolo = boolean;
 
-const AutocompleteField = forwardRef(
-  (
-    {
-      options,
-      label,
-      placeholder,
-      loading = false,
-      onTextChange = (): void => undefined,
-      endAdornment = undefined,
-      inputValue,
-      displayOptionThumbnail = false,
-      required = false,
-      error,
-      displayPopupIcon = true,
-      autoFocus = false,
-      hideInput = false,
-      dataTestId,
-      autoSize = false,
-      autoSizeDefaultWidth = 0,
-      autoSizeCustomPadding,
-      getOptionItemLabel = (option) => option.name,
-      ...autocompleteProps
-    }: Props,
-    ref?: ForwardedRef<HTMLDivElement>
-  ): JSX.Element => {
-    const { classes, cx } = useStyles({ hideInput });
-    const { t } = useTranslation();
-    const theme = useTheme();
+const AutocompleteField = ({
+  options,
+  label,
+  placeholder,
+  loading = false,
+  onTextChange = (): void => undefined,
+  endAdornment = undefined,
+  inputValue,
+  displayOptionThumbnail = false,
+  required = false,
+  error,
+  displayPopupIcon = true,
+  autoFocus = false,
+  hideInput = false,
+  dataTestId,
+  autoSize = false,
+  autoSizeDefaultWidth = 0,
+  autoSizeCustomPadding,
+  ...autocompleteProps
+}: Props): JSX.Element => {
+  const { classes, cx } = useStyles({ hideInput });
+  const { t } = useTranslation();
+  const theme = useTheme();
 
-    const areSelectEntriesEqual = (option, value): boolean => {
-      const identifyingProps = ['id', 'name'];
+  const areSelectEntriesEqual = (option, value): boolean => {
+    const identifyingProps = ['id', 'name'];
 
-      return equals(
-        pick(identifyingProps, option),
-        pick(identifyingProps, value)
-      );
-    };
-
-    const renderInput = (params): JSX.Element => (
-      <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)}
-        autoSizeDefaultWidth={autoSizeDefaultWidth}
-        classes={{
-          root: classes.textfield
-        }}
-        error={error}
-        externalValueForAutoSize={autocompleteProps?.value?.name}
-        inputProps={{
-          ...params.inputProps,
-          'aria-label': label,
-          'data-testid': dataTestId || label,
-          id: getNormalizedId(label || ''),
-          ...autocompleteProps?.inputProps
-        }}
-        label={label}
-        placeholder={isNil(placeholder) ? t(searchLabel) : placeholder}
-        required={required}
-        value={inputValue || undefined}
-        onChange={onTextChange}
-      />
+    return equals(
+      pick(identifyingProps, option),
+      pick(identifyingProps, value)
     );
+  };
 
-    return (
-      <Autocomplete
-        disableClearable
-        classes={{
-          groupLabel: classes.inputLabel,
-          inputRoot: cx([
-            classes.input,
-            label ? classes.inputWithLabel : classes.inputWithoutLabel
-          ]),
-          popper: classes.popper,
-          root: classes.textfield
-        }}
-        forcePopupIcon={displayPopupIcon}
-        getOptionLabel={(option): string =>
-          (option as SelectEntry)?.name?.toString() || ''
+  const renderInput = (params): JSX.Element => (
+    <TextField
+      {...params}
+      InputLabelProps={{
+        classes: {
+          marginDense: classes.inputLabel,
+          shrink: classes.inputLabelShrink
+        }
+      }}
+      InputProps={{
+        ...params.InputProps,
+        endAdornment: (
+          <>
+            {endAdornment && (
+              <InputAdornment position="end">{endAdornment}</InputAdornment>
+            )}
+            {params.InputProps.endAdornment}
+          </>
+        ),
+        style: {
+          paddingRight: theme.spacing(5)
         }
-        isOptionEqualToValue={areSelectEntriesEqual}
-        loading={loading}
-        loadingText={<LoadingIndicator />}
-        options={options}
-        ref={ref}
-        renderInput={renderInput}
-        renderOption={(props, option): JSX.Element => {
-          return (
-            <li
-              className={classes.options}
-              {...(props as HTMLAttributes<HTMLLIElement>)}
+      }}
+      autoFocus={autoFocus}
+      autoSize={autoSize}
+      autoSizeCustomPadding={7 + (autoSizeCustomPadding || 0)}
+      autoSizeDefaultWidth={autoSizeDefaultWidth}
+      classes={{
+        root: classes.textfield
+      }}
+      error={error}
+      externalValueForAutoSize={autocompleteProps?.value?.name}
+      inputProps={{
+        ...params.inputProps,
+        'aria-label': label,
+        'data-testid': dataTestId || label,
+        id: getNormalizedId(label || '')
+      }}
+      label={label}
+      placeholder={isNil(placeholder) ? t(searchLabel) : placeholder}
+      required={required}
+      value={inputValue || undefined}
+      onChange={onTextChange}
+    />
+  );
+
+  return (
+    <Autocomplete
+      disableClearable
+      classes={{
+        groupLabel: classes.inputLabel,
+        inputRoot: cx([
+          classes.input,
+          label ? classes.inputWithLabel : classes.inputWithoutLabel
+        ]),
+        popper: classes.popper,
+        root: classes.textfield
+      }}
+      forcePopupIcon={displayPopupIcon}
+      getOptionLabel={(option): string =>
+        (option as SelectEntry)?.name?.toString() || ''
+      }
+      isOptionEqualToValue={areSelectEntriesEqual}
+      loading={loading}
+      loadingText={<LoadingIndicator />}
+      options={options}
+      renderInput={renderInput}
+      renderOption={(props, option): JSX.Element => {
+        return (
+          <li
+            className={classes.options}
+            {...(props as React.HTMLAttributes<HTMLLIElement>)}
+          >
+            <Option
+              thumbnailUrl={displayOptionThumbnail ? option.url : undefined}
             >
-              <Option
-                thumbnailUrl={displayOptionThumbnail ? option.url : undefined}
-              >
-                {getOptionItemLabel(option)}
-              </Option>
-            </li>
-          );
-        }}
-        size="small"
-        {...autocompleteProps}
-      />
-    );
-  }
-);
+              {option.name}
+            </Option>
+          </li>
+        );
+      }}
+      size="small"
+      {...autocompleteProps}
+    />
+  );
+};
 
 export default AutocompleteField;

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

@@ -1,10 +1,9 @@
 import { useState } from 'react';
 
-import { find, isNil, pipe, propEq, reject } from 'ramda';
 import { useTranslation } from 'react-i18next';
+import { find, isNil, pipe, propEq, reject } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
-import IconReset from '@mui/icons-material/RotateLeft';
 import {
   Button,
   ClickAwayListener,
@@ -14,10 +13,11 @@ import {
   PopperPlacementType,
   useTheme
 } from '@mui/material';
+import IconReset from '@mui/icons-material/RotateLeft';
 
-import { SelectEntry } from '..';
-import { IconButton } from '../../..';
+import IconButton from '../../../Button/Icon';
 import Option from '../Option';
+import { SelectEntry } from '..';
 
 import { labelReset } from './translatedLabels';
 
@@ -73,14 +73,14 @@ const IconPopoverMultiAutocomplete = ({
   };
 
   const isSelected = (id: number | string): boolean => {
-    return pipe(find(propEq(id, 'id')), Boolean)(value);
+    return pipe(find(propEq('id', id)), Boolean)(value);
   };
 
   const unSelect = (option: SelectEntry): void => {
     const { id } = option;
 
     const updatedValue = isSelected(id)
-      ? reject(propEq(id, 'id'), value)
+      ? reject(propEq('id', id), value)
       : [...value, option];
 
     onChange(updatedValue);

package/src/InputField/Select/Option.tsx

@@ -1,4 +1,4 @@
-import { RefObject, forwardRef } from 'react';
+import { forwardRef, RefObject } from 'react';
 
 import { equals, isNil } from 'ramda';
 import { makeStyles } from 'tss-react/mui';

package/src/InputField/Select/index.tsx

@@ -2,18 +2,18 @@ import { isNil, propEq } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
 import {
-  Divider,
+  Select,
+  MenuItem,
   FormControl,
-  FormHelperText,
   InputLabel,
-  ListSubheader,
-  MenuItem,
-  Select,
+  Theme,
   SelectProps,
-  Theme
+  FormHelperText,
+  ListSubheader,
+  Divider
 } from '@mui/material';
 
-import { getNormalizedId } from '../../utils';
+import getNormalizedId from '../../utils/getNormalizedId';
 
 import Option from './Option';
 
@@ -27,14 +27,6 @@ const useStyles = makeStyles()((theme: Theme) => ({
   },
   noLabelInput: {
     padding: theme.spacing(1)
-  },
-  select: {
-    '& .MuiInputLabel-shrink~.MuiInputBase-root fieldset legend': {
-      maxWidth: '100%'
-    },
-    '& fieldset legend': {
-      maxWidth: 0
-    }
   }
 }));
 
@@ -77,7 +69,7 @@ const SelectField = ({
   const { classes, cx } = useStyles();
 
   const getOption = (id): SelectEntry => {
-    return options.find(propEq(id, 'id')) as SelectEntry;
+    return options.find(propEq('id', id)) as SelectEntry;
   };
 
   const changeOption = (event): void => {
@@ -87,12 +79,7 @@ const SelectField = ({
   };
 
   return (
-    <FormControl
-      className={classes.select}
-      error={!isNil(error)}
-      fullWidth={fullWidth}
-      size="small"
-    >
+    <FormControl error={!isNil(error)} fullWidth={fullWidth} size="small">
       {label && <InputLabel>{label}</InputLabel>}
       <Select
         displayEmpty
@@ -128,7 +115,6 @@ const SelectField = ({
 
             return (
               <MenuItem
-                aria-label={name}
                 data-testid={testId}
                 key={key}
                 style={{ backgroundColor: color }}

package/src/InputField/Text/index.stories.tsx

@@ -1,9 +1,10 @@
+import * as React from 'react';
+
 import { makeStyles } from 'tss-react/mui';
 
-import AbcIcon from '@mui/icons-material/Abc';
 import { Theme } from '@mui/material';
+import AbcIcon from '@mui/icons-material/Abc';
 
-import { useState } from 'react';
 import TextField from '.';
 
 const useStyles = makeStyles()((theme: Theme) => ({
@@ -78,7 +79,7 @@ export const autoSizeCustomPadding = (): JSX.Element => (
 );
 
 const ControlledTextFieldWithAutoSize = (): JSX.Element => {
-  const [value, setValue] = useState('');
+  const [value, setValue] = React.useState('');
 
   const change = (event): void => {
     setValue(event.target.value);

package/src/InputField/Text/index.tsx

@@ -1,58 +1,52 @@
 import { forwardRef, useCallback } from 'react';
 
-import { equals, isNil } from 'ramda';
+import { isNil } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
 import {
-  Box,
-  InputAdornment,
   TextField as MuiTextField,
+  InputAdornment,
   TextFieldProps,
   Theme,
   Tooltip,
   Typography
 } from '@mui/material';
 
-import { getNormalizedId } from '../../utils';
+import getNormalizedId from '../../utils/getNormalizedId';
 
 import useAutoSize from './useAutoSize';
 
-const useStyles = makeStyles()((theme: Theme) => ({
-  autoSizeCompact: {
-    paddingRight: theme.spacing(1),
-    paddingTop: theme.spacing(0.6)
-  },
-  compactLabel: {
-    top: '-10px'
-  },
-  compactLabelShrink: {
-    top: '0px'
-  },
-  hiddenText: {
-    display: 'table',
-    lineHeight: 0,
-    transform: 'scaleY(0)'
-  },
-  input: {
-    fontSize: theme.typography.body1.fontSize
-  },
-  inputBase: {
-    display: 'inline-flex',
-    justifyItems: 'start',
-    paddingRight: theme.spacing(1)
-  },
-  noLabelInput: {
-    padding: theme.spacing(1)
-  },
-  textField: {
-    transition: theme.transitions.create(['width'], {
-      duration: theme.transitions.duration.shortest
-    })
-  },
-  transparent: {
-    backgroundColor: 'transparent'
-  }
-}));
+const useStyles = makeStyles<{ displayAsBlock: boolean }>()(
+  (theme: Theme, { displayAsBlock }) => ({
+    compact: {
+      fontSize: 'x-small'
+    },
+    hiddenText: {
+      display: 'table',
+      lineHeight: 0,
+      transform: 'scaleY(0)'
+    },
+    input: {
+      fontSize: theme.typography.body1.fontSize
+    },
+    inputBase: {
+      display: displayAsBlock ? 'block' : 'inline-flex',
+      justifyItems: 'start',
+      paddingRight: theme.spacing(1)
+    },
+    noLabelInput: {
+      padding: theme.spacing(1)
+    },
+    textField: {
+      transition: theme.transitions.create(['width'], {
+        duration: theme.transitions.duration.shortest
+      })
+    },
+    transparent: {
+      backgroundColor: 'transparent'
+    }
+  })
+);
 
 interface OptionalLabelInputAdornmentProps {
   children: React.ReactNode;
@@ -76,7 +70,7 @@ const OptionalLabelInputAdornment = ({
 
 type SizeVariant = 'large' | 'medium' | 'small' | 'compact';
 
-export type TextProps = {
+export type Props = {
   EndAdornment?: React.FC;
   StartAdornment?: React.FC;
   ariaLabel?: string;
@@ -84,14 +78,12 @@ export type TextProps = {
   autoSizeCustomPadding?: number;
   autoSizeDefaultWidth?: number;
   className?: string;
-  containerClassName?: string;
   dataTestId: string;
   debounced?: boolean;
   displayErrorInTooltip?: boolean;
   error?: string;
   externalValueForAutoSize?: string;
   open?: boolean;
-  required?: boolean;
   size?: SizeVariant;
   transparent?: boolean;
   value?: string;
@@ -116,20 +108,17 @@ const TextField = forwardRef(
       externalValueForAutoSize,
       autoSizeCustomPadding,
       defaultValue,
-      required = false,
-      containerClassName,
-      type,
       ...rest
-    }: TextProps,
+    }: Props,
     ref: React.ForwardedRef<HTMLDivElement>
   ): JSX.Element => {
-    const { classes, cx } = useStyles();
+    const { classes, cx } = useStyles({
+      displayAsBlock: autoSize && isNil(StartAdornment) && isNil(EndAdornment)
+    });
 
     const { inputRef, width, changeInputValue, innerValue } = useAutoSize({
       autoSize,
-      autoSizeCustomPadding: equals(type, 'number')
-        ? Math.max(6, autoSizeCustomPadding || 0)
-        : autoSizeCustomPadding,
+      autoSizeCustomPadding,
       autoSizeDefaultWidth,
       value: externalValueForAutoSize || rest.value
     });
@@ -149,10 +138,7 @@ const TextField = forwardRef(
     }, [innerValue, debounced, defaultValue]);
 
     return (
-      <Box
-        className={containerClassName}
-        sx={{ width: autoSize ? 'auto' : '100%' }}
-      >
+      <>
         <Tooltip placement="top" title={tooltipTitle}>
           <MuiTextField
             data-testid={dataTestId}
@@ -160,9 +146,9 @@ const TextField = forwardRef(
             helperText={displayErrorInTooltip ? undefined : error}
             id={getNormalizedId(dataTestId || '')}
             inputProps={{
+              ...rest.inputProps,
               'aria-label': ariaLabel,
-              'data-testid': dataTestId,
-              ...rest.inputProps
+              'data-testid': dataTestId
             }}
             label={label}
             ref={ref}
@@ -170,23 +156,15 @@ const TextField = forwardRef(
             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')
+                  [classes.transparent]: transparent
                 },
                 className
               ),
+              disableUnderline: true,
               endAdornment: (
                 <OptionalLabelInputAdornment label={label} position="end">
                   {EndAdornment ? (
@@ -204,12 +182,10 @@ const TextField = forwardRef(
               ...rest.InputProps
             }}
             className={classes.textField}
-            required={required}
             sx={{
               width: autoSize ? width : undefined,
               ...rest?.sx
             }}
-            type={type}
           />
         </Tooltip>
         {autoSize && (
@@ -217,7 +193,7 @@ const TextField = forwardRef(
             {rest.value || externalValueForAutoSize || innerValue}
           </Typography>
         )}
-      </Box>
+      </>
     );
   }
 );