@centreon/ui 26.3.4 → 26.3.6

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

@@ -1,17 +1,15 @@
+import { lighten } from '@mui/material';
+
 import { rectIntersection } from '@dnd-kit/core';
 import { rectSortingStrategy } from '@dnd-kit/sortable';
 import { find, map, propEq } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
-import { lighten } from '@mui/material';
-
-import { SelectEntry } from '../..';
 import SortableItems from '../../../../SortableItems';
-
+import type { SelectEntry } from '../..';
+import type { ItemActionProps } from '.';
 import SortableListContent from './SortableListContent';
 
-import { ItemActionProps } from '.';
-
 export interface DraggableSelectEntry extends SelectEntry {
   id: string;
 }
@@ -56,7 +54,6 @@ const SortableList = ({
 
   return (
     <SortableItems
-      updateSortableItemsOnItemsChange
       Content={SortableListContent({
         classes,
         deleteValue,
@@ -67,8 +64,9 @@ const SortableList = ({
       collisionDetection={rectIntersection}
       itemProps={['id', 'name', 'createOption']}
       items={items}
-      sortingStrategy={rectSortingStrategy}
       onDragEnd={dragEnd}
+      sortingStrategy={rectSortingStrategy}
+      updateSortableItemsOnItemsChange
     />
   );
 };

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

@@ -1,11 +1,11 @@
-import { DraggableSyntheticListeners } from '@dnd-kit/core';
+import { Chip, Typography, useTheme } from '@mui/material';
+
+import type { DraggableSyntheticListeners } from '@dnd-kit/core';
 import clsx from 'clsx';
 import { findIndex, not, propEq } from 'ramda';
+import { type RefObject, useRef } from 'react';
 
-import { Chip, Typography, useTheme } from '@mui/material';
-
-import { RefObject, useRef } from 'react';
-import { DraggableSelectEntry, SortableListProps } from './SortableList';
+import type { DraggableSelectEntry, SortableListProps } from './SortableList';
 
 interface ContentProps
   extends Pick<DraggableSelectEntry, 'name' | 'createOption' | 'id'> {
@@ -68,29 +68,29 @@ const SortableListContent = ({
     return (
       <div ref={itemRef} style={style}>
         <Chip
-          clickable
-          className={clsx(classes.tag, createOption && classes.createdTag)}
           classes={{
             deleteIcon: classes.deleteIcon
           }}
+          className={clsx(classes.tag, createOption && classes.createdTag)}
+          clickable
           label={
             <Typography
+              onMouseUp={mouseUp}
               ref={labelItemRef}
               variant="body2"
-              onMouseUp={mouseUp}
               {...attributes}
               {...listeners}
             >
               {name}
             </Typography>
           }
+          onDelete={deleteItem}
+          onMouseEnter={mouseEnter}
+          onMouseLeave={mouseLeave}
           size="medium"
           style={{
             backgroundColor: isDragging ? theme.palette.grey[300] : undefined
           }}
-          onDelete={deleteItem}
-          onMouseEnter={mouseEnter}
-          onMouseLeave={mouseLeave}
         />
       </div>
     );

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

@@ -1,18 +1,15 @@
-import { useState } from 'react';
+import { Tooltip, Typography } from '@mui/material';
 
 import { isNil, not } from 'ramda';
+import { useState } from 'react';
 
-import { Tooltip, Typography } from '@mui/material';
-
-import { SelectEntry } from '../..';
 import { buildListingEndpoint } from '../../../..';
-import { Listing } from '../../../../api/models';
-
+import type { Listing } from '../../../../api/models';
+import type { SelectEntry } from '../..';
+import type { ItemActionProps } from '.';
 import MultiDraggableAutocompleteField from './Multi';
 import MultiDraggableConnectedAutocompleteField from './MultiConnected';
 
-import { ItemActionProps } from '.';
-
 export default {
   title: 'InputField/Autocomplete/Draggable'
 };
@@ -125,10 +122,10 @@ export const draggableWithError = (): JSX.Element => <MultiDraggableError />;
 
 const MultiDraggableRequired = (): JSX.Element => (
   <MultiDraggableAutocompleteField
-    required
     label="Draggable Autocomplete"
     options={options}
     placeholder="Type here..."
+    required
   />
 );
 
@@ -156,10 +153,10 @@ const MultiDraggableClickAndHoverItem = (): JSX.Element => {
   return (
     <div>
       <Tooltip
+        open={not(isNil(hoveredItem?.anchorElement))}
         PopperProps={{
           anchorEl: hoveredItem?.anchorElement
         }}
-        open={not(isNil(hoveredItem?.anchorElement))}
         title={hoveredItem?.item.name || ''}
       >
         <MultiDraggableAutocompleteField

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

@@ -1,6 +1,8 @@
+import { Typography } from '@mui/material';
+
 import {
-  F,
   equals,
+  F,
   findIndex,
   inc,
   isEmpty,
@@ -14,15 +16,12 @@ import {
   remove,
   type
 } from 'ramda';
+import { type ChangeEvent, useEffect, useState } from 'react';
 
-import { Typography } from '@mui/material';
-
-import { Props as SingleAutocompletefieldProps } from '..';
 import TextField from '../../../Text';
-import { ConnectedAutoCompleteFieldProps } from '../Connected';
-
-import { ChangeEvent, useEffect, useState } from 'react';
-import SortableList, { DraggableSelectEntry } from './SortableList';
+import type { Props as SingleAutocompletefieldProps } from '..';
+import type { ConnectedAutoCompleteFieldProps } from '../Connected';
+import SortableList, { type DraggableSelectEntry } from './SortableList';
 
 export interface ItemActionProps {
   anchorElement?: HTMLElement | null;
@@ -181,24 +180,24 @@ const DraggableAutocomplete = (
         {...renderProps}
         error={error}
         helperText={error}
+        label={label}
+        onBlur={blurInput}
+        onChange={changeInput}
+        required={required}
         textFieldSlotsAndSlotProps={{
           slotProps: {
+            htmlInput: {
+              ...renderProps.inputProps,
+              value: inputText || ''
+            },
             input: {
               ...renderProps?.InputProps
             },
             inputLabel: {
               ...renderProps?.inputLabel
-            },
-            htmlInput: {
-              ...renderProps.inputProps,
-              value: inputText || ''
             }
           }
         }}
-        label={label}
-        required={required}
-        onBlur={blurInput}
-        onChange={changeInput}
       />
     );
 
@@ -217,21 +216,21 @@ const DraggableAutocomplete = (
       }
 
       setSelectedValues(initialValues);
-    }, [initialValues]);
+    }, [initialValues, selectedValues]);
 
     return (
       <MultiAutocomplete
+        disableCloseOnSelect={false}
         disableSortedOptions
         freeSolo
         handleHomeEndKeys
-        selectOnFocus
-        disableCloseOnSelect={false}
         isOptionEqualToValue={F}
+        onChange={onChange}
         renderInput={renderInput}
         renderOption={renderOption}
         renderTags={renderTags}
+        selectOnFocus
         value={selectedValues}
-        onChange={onChange}
         {...props}
       />
     );

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

@@ -1,13 +1,14 @@
 import { ListSubheader, Typography } from '@mui/material';
+
 import { useTranslation } from 'react-i18next';
-import { Button } from '../../../../components/Button';
-import { useListboxStyles } from './Multi.styles';
 
+import { Button } from '../../../../components/Button';
 import {
   labelElementsFound,
   labelSelectAll,
   labelUnSelectAll
 } from '../../../translatedLabels';
+import { useListboxStyles } from './Multi.styles';
 
 const CustomListbox = ({
   children,
@@ -23,7 +24,7 @@ const CustomListbox = ({
       <ListSubheader sx={{ padding: 0 }}>
         <div className={classes.lisSubHeader}>
           <Typography variant="body2">{labelTotal}</Typography>
-          <Button variant="ghost" size="small" onClick={handleSelectAllToggle}>
+          <Button onClick={handleSelectAllToggle} size="small" variant="ghost">
             {label}
           </Button>
         </div>
@@ -40,13 +41,13 @@ const ListboxComponent = ({
   onChange,
   total
 }) => {
+  const { t } = useTranslation();
+
   if (disableSelectAll) {
     return;
   }
 
   return (listboxProps): JSX.Element | undefined => {
-    const { t } = useTranslation();
-
     const allSelected =
       options.length > 0 && options.every((opt) => isOptionSelected(opt));
 
@@ -65,8 +66,8 @@ const ListboxComponent = ({
     return (
       <CustomListbox
         {...listboxProps}
-        label={t(allSelected ? labelUnSelectAll : labelSelectAll)}
         handleSelectAllToggle={handleSelectAllToggle}
+        label={t(allSelected ? labelUnSelectAll : labelSelectAll)}
         labelTotal={t(labelElementsFound, {
           total: total || options.length
         })}

package/src/InputField/Select/Autocomplete/Multi/Multi.styles.ts

@@ -11,16 +11,16 @@ export const useStyles = makeStyles()((theme) => ({
 }));
 
 export const useListboxStyles = makeStyles()((theme) => ({
+  dropdown: {
+    background: theme.palette.background.paper,
+    width: '100%'
+  },
   lisSubHeader: {
-    width: '100%',
+    alignItems: 'center',
     background: theme.palette.background.default,
-    padding: theme.spacing(0.5, 1, 0.5, 1.5),
     display: 'flex',
     justifyContent: 'space-between',
-    alignItems: 'center'
-  },
-  dropdown: {
-    width: '100%',
-    background: theme.palette.background.paper
+    padding: theme.spacing(0.5, 1, 0.5, 1.5),
+    width: '100%'
   }
 }));

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

@@ -1,12 +1,12 @@
-import { compose, includes, map, prop, reject, sortBy, toLower } from 'ramda';
-import { JSX } from 'react';
+import { Chip, type ChipProps, Tooltip } from '@mui/material';
+import type { UseAutocompleteProps } from '@mui/material/useAutocomplete';
 
-import { Chip, ChipProps, Tooltip } from '@mui/material';
-import { UseAutocompleteProps } from '@mui/material/useAutocomplete';
+import { compose, includes, map, prop, reject, sortBy, toLower } from 'ramda';
+import type { JSX } from 'react';
 
-import Autocomplete, { Props as AutocompleteProps } from '..';
-import { SelectEntry } from '../..';
+import type { SelectEntry } from '../..';
 import Option from '../../Option';
+import Autocomplete, { type Props as AutocompleteProps } from '..';
 import ListboxComponent from './Listbox';
 import { useStyles } from './Multi.styles';
 
@@ -91,8 +91,16 @@ const MultiAutocompleteField = ({
     <Autocomplete
       disableCloseOnSelect
       displayOptionThumbnail
-      multiple
       getLimitTagsText={getLimitTagsText}
+      ListboxComponent={ListboxComponent({
+        disableSelectAll,
+        isOptionSelected,
+        onChange,
+        options,
+        total
+      })}
+      multiple
+      onChange={onChange}
       options={autocompleteOptions}
       renderOption={(renderProps, option, { selected }): JSX.Element => (
         <li
@@ -102,20 +110,12 @@ const MultiAutocompleteField = ({
           <Option checkboxSelected={selected}>{getOptionLabel(option)}</Option>
         </li>
       )}
-      value={values}
       renderTags={(renderedValue, getTagProps): React.ReactNode =>
         customRenderTags
           ? customRenderTags(renderTags(renderedValue, getTagProps))
           : renderTags(renderedValue, getTagProps)
       }
-      ListboxComponent={ListboxComponent({
-        total,
-        onChange,
-        isOptionSelected,
-        disableSelectAll,
-        options
-      })}
-      onChange={onChange}
+      value={values}
       {...props}
     />
   );

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

@@ -1,5 +1,4 @@
 import PopoverAutocomplete from '../Popover';
-
 import MultiAutocompleteField from './index';
 
 const PopoverMultiAutocomplete = PopoverAutocomplete(MultiAutocompleteField);

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

@@ -1,8 +1,7 @@
 import EditIcon from '@mui/icons-material/Edit';
 
-import MultiPopoverAutocomplete from './Popover';
-
 import MultiAutocompleteField from '.';
+import MultiPopoverAutocomplete from './Popover';
 
 export default { title: 'InputField/Autocomplete/Multi' };
 
@@ -15,8 +14,8 @@ const options = [
 export const openWithThreeOptions = (): JSX.Element => {
   return (
     <MultiAutocompleteField
-      open
       label="Autocomplete"
+      open
       options={options}
       placeholder=""
       value={[options[1]]}
@@ -69,11 +68,11 @@ export const customRenderedTags = (): JSX.Element => {
 
   return (
     <MultiAutocompleteField
+      customRenderTags={customRender}
       label="Custom Tags Render"
       options={options}
       placeholder="Type here..."
       value={[options[0], options[1]]}
-      customRenderTags={customRender}
     />
   );
 };

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

@@ -1,16 +1,15 @@
-import { useState } from 'react';
-
-import { equals, isEmpty } from 'ramda';
-import { makeStyles } from 'tss-react/mui';
-
 import { Avatar, Chip, useTheme } from '@mui/material';
-import { UseAutocompleteProps } from '@mui/material/useAutocomplete';
+import type { UseAutocompleteProps } from '@mui/material/useAutocomplete';
 
 import { ThemeMode } from '@centreon/ui-context';
 
-import { Props as AutocompleteProps } from '..';
-import { SelectEntry } from '../..';
+import { equals, isEmpty } from 'ramda';
+import { useState } from 'react';
+import { makeStyles } from 'tss-react/mui';
+
 import PopoverMenu from '../../../../PopoverMenu';
+import type { SelectEntry } from '../..';
+import type { Props as AutocompleteProps } from '..';
 
 type Multiple = boolean;
 type DisableClearable = boolean;
@@ -63,8 +62,8 @@ const PopoverAutocomplete = (
         className={classes.chip}
         color={isEmpty(value) ? undefined : 'primary'}
         label={label}
-        size="small"
         onDelete={(e): void => onChange?.(e, [], 'clear')}
+        size="small"
       />
     );
 
@@ -82,14 +81,14 @@ const PopoverAutocomplete = (
           <AutocompleteField
             autoFocus
             disableCloseOnSelect
-            multiple
             displayPopupIcon={false}
             hideInput={hideInput}
+            multiple
+            onChange={onChange}
             open={optionsOpen}
             renderTags={(): null => null}
             style={{ minWidth: theme.spacing(20) }}
             value={value}
-            onChange={onChange}
             {...props}
           />
         )}

package/src/InputField/Select/Autocomplete/autoComplete.styles.ts

@@ -1,10 +1,10 @@
-import { equals } from 'ramda';
-import { makeStyles } from 'tss-react/mui';
-
 import { autocompleteClasses } from '@mui/material/Autocomplete';
 
 import { ThemeMode } from '@centreon/ui-context';
 
+import { equals } from 'ramda';
+import { makeStyles } from 'tss-react/mui';
+
 interface StyledProps {
   hideInput?: boolean;
 }

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

@@ -2,6 +2,7 @@ import EditIcon from '@mui/icons-material/Edit';
 import { InputAdornment } from '@mui/material';
 
 import { useState } from 'react';
+
 import AutocompleteField from '.';
 
 export default { title: 'InputField/Autocomplete' };
@@ -21,8 +22,8 @@ const EndAdornment = (): JSX.Element => (
 export const openWithThreeOptions = (): JSX.Element => {
   return (
     <AutocompleteField
-      open
       label="Autocomplete"
+      open
       options={options}
       placeholder="Type here..."
       value={options[1]}
@@ -45,11 +46,11 @@ export const closeWithEndAdornment = (): JSX.Element => {
 export const required = (): JSX.Element => {
   return (
     <AutocompleteField
-      required
       endAdornment={<EndAdornment />}
       label="Autocomplete"
       options={options}
       placeholder="Type here..."
+      required
       value={options[1]}
     />
   );
@@ -58,9 +59,9 @@ export const required = (): JSX.Element => {
 export const closeWithError = (): JSX.Element => {
   return (
     <AutocompleteField
-      freeSolo
       endAdornment={<EndAdornment />}
       error="Error"
+      freeSolo
       label="Autocomplete"
       options={options}
       placeholder="Type here..."
@@ -96,10 +97,10 @@ const AutoSizeAutocompleteField = ({
       autoSizeCustomPadding={customPadding}
       endAdornment={endAdornment}
       label="Autocomplete"
+      onChange={change}
       options={autoSizeOptions}
       placeholder="Type here..."
       value={value}
-      onChange={change}
     />
   );
 };

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

@@ -1,24 +1,31 @@
-import { equals, isEmpty, isNil, pick } from 'ramda';
-import { useTranslation } from 'react-i18next';
-
 import {
   Autocomplete,
-  AutocompleteProps,
+  type AutocompleteProps,
   CircularProgress,
   InputAdornment,
-  InputProps,
+  type InputProps,
   useTheme
 } from '@mui/material';
-import { AutocompleteSlotsAndSlotProps } from '@mui/material/Autocomplete';
-import { TextFieldSlotsAndSlotProps } from '@mui/material/TextField';
-import { UseAutocompleteProps } from '@mui/material/useAutocomplete';
+import type {
+  AutocompleteRenderOptionState,
+  AutocompleteSlotsAndSlotProps
+} from '@mui/material/Autocomplete';
+import type { TextFieldSlotsAndSlotProps } from '@mui/material/TextField';
+import type { UseAutocompleteProps } from '@mui/material/useAutocomplete';
+
+import { equals, isEmpty, isNil, pick } from 'ramda';
+import {
+  type ForwardedRef,
+  forwardRef,
+  type HTMLAttributes,
+  type ReactElement
+} from 'react';
+import { useTranslation } from 'react-i18next';
 
-import type { AutocompleteRenderOptionState } from '@mui/material/Autocomplete';
-import { ForwardedRef, HTMLAttributes, ReactElement, forwardRef } from 'react';
-import { SelectEntry } from '..';
 import { getNormalizedId } from '../../../utils';
 import TextField from '../../Text';
 import { labelClear, labelOpen, searchLabel } from '../../translatedLabels';
+import type { SelectEntry } from '..';
 import Option from '../Option';
 import { useAutoCompleteStyles } from './autoComplete.styles';
 
@@ -145,17 +152,24 @@ const AutocompleteField = forwardRef(
           error={error}
           externalValueForAutoSize={autocompleteProps?.value?.name}
           label={label}
+          onChange={onTextChange}
           placeholder={isNil(placeholder) ? t(searchLabel) : placeholder}
           required={required}
-          value={
-            inputValue ||
-            (forceInputRenderValue
-              ? getOptionItemLabel(autocompleteProps?.value || undefined)
-              : undefined) ||
-            undefined
-          }
-          onChange={onTextChange}
           slotProps={{
+            htmlInput: {
+              ...params.inputProps,
+              'aria-label': label,
+              'data-testid': dataTestId || label,
+              id: getNormalizedId(label || ''),
+              ...(forceInputRenderValue
+                ? {
+                    value: getOptionItemLabel(
+                      autocompleteProps?.value || undefined
+                    )
+                  }
+                : {}),
+              ...textFieldSlotsAndSlotProps?.slotProps?.htmlInput
+            },
             input: {
               ...params.InputProps,
               endAdornment: (
@@ -184,29 +198,21 @@ const AutocompleteField = forwardRef(
                 marginDense: classes.inputLabel,
                 shrink: classes.inputLabelShrink
               }
-            },
-            htmlInput: {
-              ...params.inputProps,
-              'aria-label': label,
-              'data-testid': dataTestId || label,
-              id: getNormalizedId(label || ''),
-              ...(forceInputRenderValue
-                ? {
-                    value: getOptionItemLabel(
-                      autocompleteProps?.value || undefined
-                    )
-                  }
-                : {}),
-              ...textFieldSlotsAndSlotProps?.slotProps?.htmlInput
             }
           }}
+          value={
+            inputValue ||
+            (forceInputRenderValue
+              ? getOptionItemLabel(autocompleteProps?.value || undefined)
+              : undefined) ||
+            undefined
+          }
         />
       );
     };
 
     return (
       <Autocomplete
-        disableClearable
         classes={{
           groupLabel: classes.inputLabel,
           inputRoot: cx([
@@ -216,6 +222,7 @@ const AutocompleteField = forwardRef(
           popper: classes.popper,
           root: classes.textfield
         }}
+        disableClearable
         forcePopupIcon={displayPopupIcon}
         getOptionLabel={(option): string =>
           (option as SelectEntry)?.name?.toString() || ''

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

@@ -14,10 +14,10 @@ export const withThreeOptions = (): JSX.Element => {
   return (
     <IconPopoverMultiAutocompleteField
       icon={<EditIcon />}
+      onChange={(): undefined => undefined}
       options={options}
       title="Edit"
       value={[options[1]]}
-      onChange={(): undefined => undefined}
     />
   );
 };