@centreon/ui 24.9.6 → 24.10.0

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

@@ -1,28 +1,27 @@
-import * as React from 'react';
-
 import {
-  remove,
+  F,
   equals,
-  pipe,
-  type,
-  last,
+  findIndex,
   inc,
-  F,
-  length,
   isEmpty,
   isNil,
+  last,
+  length,
   not,
-  findIndex,
+  pipe,
+  pluck,
   propEq,
-  pluck
+  remove,
+  type
 } from 'ramda';
 
 import { Typography } from '@mui/material';
 
-import { ConnectedAutoCompleteFieldProps } from '../Connected';
 import { Props as SingleAutocompletefieldProps } from '..';
 import TextField from '../../../Text';
+import { ConnectedAutoCompleteFieldProps } from '../Connected';
 
+import { ChangeEvent, useEffect, useState } from 'react';
 import SortableList, { DraggableSelectEntry } from './SortableList';
 
 export interface ItemActionProps {
@@ -61,13 +60,13 @@ const DraggableAutocomplete = (
       | ConnectedAutoCompleteFieldProps<string>
       | SingleAutocompletefieldProps
     )): JSX.Element => {
-    const [selectedValues, setSelectedValues] = React.useState<
+    const [selectedValues, setSelectedValues] = useState<
       Array<DraggableSelectEntry>
     >(initialValues || []);
-    const [totalValues, setTotalValues] = React.useState<number>(
+    const [totalValues, setTotalValues] = useState<number>(
       length(initialValues || [])
     );
-    const [inputText, setInputText] = React.useState<string | null>(null);
+    const [inputText, setInputText] = useState<string | null>(null);
 
     const onChangeSelectedValuesOrder = (newSelectedValues): void => {
       setSelectedValues(newSelectedValues);
@@ -77,7 +76,7 @@ const DraggableAutocomplete = (
     const deleteValue = (id): void => {
       itemHover?.(null);
       setSelectedValues((values: Array<DraggableSelectEntry>) => {
-        const index = findIndex(propEq('id', id), values);
+        const index = findIndex(propEq(id, 'id'), values);
 
         const newSelectedValues = remove(index, 1, values);
 
@@ -144,7 +143,7 @@ const DraggableAutocomplete = (
       );
     };
 
-    const changeInput = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    const changeInput = (e: ChangeEvent<HTMLInputElement>): void => {
       if (pipe(isNil, not)(e)) {
         setInputText(e.target.value);
       }
@@ -193,7 +192,7 @@ const DraggableAutocomplete = (
       />
     );
 
-    React.useEffect(() => {
+    useEffect(() => {
       if (isNil(initialValues)) {
         return;
       }

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

@@ -1,7 +1,7 @@
-import { includes, map, prop, reject } from 'ramda';
+import { compose, includes, map, prop, reject, sortBy, toLower } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
-import { Chip } from '@mui/material';
+import { Chip, ChipProps, Tooltip } from '@mui/material';
 import { UseAutocompleteProps } from '@mui/material/useAutocomplete';
 
 import Autocomplete, { Props as AutocompleteProps } from '..';
@@ -18,7 +18,6 @@ const useStyles = makeStyles()((theme) => ({
     width: theme.spacing(1.5)
   },
   tag: {
-    backgroundColor: theme.palette.divider,
     fontSize: theme.typography.caption.fontSize
   }
 }));
@@ -33,30 +32,48 @@ export interface Props
       UseAutocompleteProps<SelectEntry, Multiple, DisableClearable, FreeSolo>,
       'multiple'
     > {
+  chipProps?: ChipProps;
   disableSortedOptions?: boolean;
+  getOptionTooltipLabel?: (option) => string;
+  getTagLabel?: (option) => string;
+  optionProperty?: string;
 }
 
 const MultiAutocompleteField = ({
   value,
   options,
   disableSortedOptions = false,
+  optionProperty = 'name',
+  getOptionLabel = (option): string => option.name,
+  getTagLabel = (option): string => option[optionProperty],
+  getOptionTooltipLabel,
+  chipProps,
   ...props
 }: Props): JSX.Element => {
   const { classes } = useStyles();
 
   const renderTags = (renderedValue, getTagProps): Array<JSX.Element> =>
-    renderedValue.map((option, index) => (
-      <Chip
-        classes={{
-          deleteIcon: classes.deleteIcon,
-          root: classes.tag
-        }}
-        key={option.id}
-        label={option.name}
-        size="medium"
-        {...getTagProps({ index })}
-      />
-    ));
+    renderedValue.map((option, index) => {
+      return (
+        <Tooltip
+          key={option.id}
+          placement="top"
+          title={getOptionTooltipLabel?.(option)}
+        >
+          <Chip
+            classes={{
+              deleteIcon: classes.deleteIcon,
+              root: classes.tag
+            }}
+            label={getTagLabel(option)}
+            size="medium"
+            {...getTagProps({ index })}
+            {...chipProps}
+            onDelete={(event) => chipProps?.onDelete?.(event, option)}
+          />
+        </Tooltip>
+      );
+    });
 
   const getLimitTagsText = (more): JSX.Element => <Option>{`+${more}`}</Option>;
 
@@ -68,9 +85,11 @@ const MultiAutocompleteField = ({
     return includes(id, valueIds);
   };
 
+  const sortByName = sortBy(compose(toLower, prop(optionProperty)));
+
   const autocompleteOptions = disableSortedOptions
     ? options
-    : [...values, ...reject(isOptionSelected, options)];
+    : sortByName([...values, ...reject(isOptionSelected, options)]);
 
   return (
     <Autocomplete
@@ -84,7 +103,7 @@ const MultiAutocompleteField = ({
           key={option.id}
           {...(renderProps as React.HTMLAttributes<HTMLLIElement>)}
         >
-          <Option checkboxSelected={selected}>{option.name}</Option>
+          <Option checkboxSelected={selected}>{getOptionLabel(option)}</Option>
         </li>
       )}
       renderTags={renderTags}

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

@@ -3,8 +3,8 @@ import { useState } from 'react';
 import { equals, isEmpty } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
-import { UseAutocompleteProps } from '@mui/material/useAutocomplete';
 import { Avatar, Chip, useTheme } from '@mui/material';
+import { UseAutocompleteProps } from '@mui/material/useAutocomplete';
 
 import { ThemeMode } from '@centreon/ui-context';
 

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

@@ -1,8 +1,7 @@
-import * as React from 'react';
-
 import EditIcon from '@mui/icons-material/Edit';
 import { InputAdornment } from '@mui/material';
 
+import { useState } from 'react';
 import AutocompleteField from '.';
 
 export default { title: 'InputField/Autocomplete' };
@@ -85,7 +84,7 @@ const AutoSizeAutocompleteField = ({
   endAdornment,
   customPadding
 }: AutoSizeAutocompleteFieldProps): JSX.Element => {
-  const [value, setValue] = React.useState(autoSizeOptions[1]);
+  const [value, setValue] = useState(null);
 
   const change = (_, newValue): void => {
     setValue(newValue);
@@ -108,12 +107,3 @@ const AutoSizeAutocompleteField = ({
 export const autoSize = (): JSX.Element => {
   return <AutoSizeAutocompleteField />;
 };
-
-export const autoSizeWithCustomPadding = (): JSX.Element => {
-  return (
-    <AutoSizeAutocompleteField
-      customPadding={5}
-      endAdornment={<EndAdornment />}
-    />
-  );
-};

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

@@ -1,14 +1,12 @@
-import * as React from 'react';
-
-import { equals, isNil, pick } from 'ramda';
+import { equals, isEmpty, isNil, pick } from 'ramda';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 
 import {
-  CircularProgress,
-  InputAdornment,
   Autocomplete,
   AutocompleteProps,
+  CircularProgress,
+  InputAdornment,
   useTheme
 } from '@mui/material';
 import { autocompleteClasses } from '@mui/material/Autocomplete';
@@ -16,11 +14,12 @@ import { UseAutocompleteProps } from '@mui/material/useAutocomplete';
 
 import { ThemeMode } from '@centreon/ui-context';
 
-import Option from '../Option';
-import TextField from '../../Text';
+import { ForwardedRef, HTMLAttributes, ReactElement, forwardRef } from 'react';
 import { SelectEntry } from '..';
+import { getNormalizedId } from '../../../utils';
+import TextField from '../../Text';
 import { searchLabel } from '../../translatedLabels';
-import getNormalizedId from '../../../utils/getNormalizedId';
+import Option from '../Option';
 
 export type Props = {
   autoFocus?: boolean;
@@ -30,8 +29,9 @@ export type Props = {
   dataTestId?: string;
   displayOptionThumbnail?: boolean;
   displayPopupIcon?: boolean;
-  endAdornment?: React.ReactElement;
+  endAdornment?: ReactElement;
   error?: string;
+  getOptionItemLabel?: (option) => string;
   hideInput?: boolean;
   label: string;
   loading?: boolean;
@@ -140,124 +140,139 @@ type Multiple = boolean;
 type DisableClearable = boolean;
 type FreeSolo = boolean;
 
-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 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 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)
+      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}
+      />
     );
-  };
 
-  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)
+    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() || ''
         }
-      }}
-      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}
+        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>)}
             >
-              {option.name}
-            </Option>
-          </li>
-        );
-      }}
-      size="small"
-      {...autocompleteProps}
-    />
-  );
-};
+              <Option
+                thumbnailUrl={displayOptionThumbnail ? option.url : undefined}
+              >
+                {getOptionItemLabel(option)}
+              </Option>
+            </li>
+          );
+        }}
+        size="small"
+        {...autocompleteProps}
+      />
+    );
+  }
+);
 
 export default AutocompleteField;

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

@@ -1,9 +1,10 @@
 import { useState } from 'react';
 
-import { useTranslation } from 'react-i18next';
 import { find, isNil, pipe, propEq, reject } from 'ramda';
+import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 
+import IconReset from '@mui/icons-material/RotateLeft';
 import {
   Button,
   ClickAwayListener,
@@ -13,11 +14,10 @@ import {
   PopperPlacementType,
   useTheme
 } from '@mui/material';
-import IconReset from '@mui/icons-material/RotateLeft';
 
-import IconButton from '../../../Button/Icon';
-import Option from '../Option';
 import { SelectEntry } from '..';
+import { IconButton } from '../../..';
+import Option from '../Option';
 
 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 { forwardRef, RefObject } from 'react';
+import { RefObject, forwardRef } 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 {
-  Select,
-  MenuItem,
+  Divider,
   FormControl,
-  InputLabel,
-  Theme,
-  SelectProps,
   FormHelperText,
+  InputLabel,
   ListSubheader,
-  Divider
+  MenuItem,
+  Select,
+  SelectProps,
+  Theme
 } from '@mui/material';
 
-import getNormalizedId from '../../utils/getNormalizedId';
+import { getNormalizedId } from '../../utils';
 
 import Option from './Option';
 
@@ -27,6 +27,14 @@ const useStyles = makeStyles()((theme: Theme) => ({
   },
   noLabelInput: {
     padding: theme.spacing(1)
+  },
+  select: {
+    '& .MuiInputLabel-shrink~.MuiInputBase-root fieldset legend': {
+      maxWidth: '100%'
+    },
+    '& fieldset legend': {
+      maxWidth: 0
+    }
   }
 }));
 
@@ -69,7 +77,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 => {
@@ -79,7 +87,12 @@ const SelectField = ({
   };
 
   return (
-    <FormControl error={!isNil(error)} fullWidth={fullWidth} size="small">
+    <FormControl
+      className={classes.select}
+      error={!isNil(error)}
+      fullWidth={fullWidth}
+      size="small"
+    >
       {label && <InputLabel>{label}</InputLabel>}
       <Select
         displayEmpty
@@ -115,6 +128,7 @@ const SelectField = ({
 
             return (
               <MenuItem
+                aria-label={name}
                 data-testid={testId}
                 key={key}
                 style={{ backgroundColor: color }}

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

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