@centreon/ui 24.4.72 → 24.4.74

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

@@ -34,7 +34,7 @@ export interface ConnectedAutoCompleteFieldProps<TData> {
   allowUniqOption?: boolean;
   baseEndpoint?: string;
   changeIdValue: (item: TData) => number | string;
-  conditionField?: keyof SelectEntry;
+  exclusionOptionProperty?: keyof SelectEntry;
   field: string;
   getEndpoint: ({ search, page }) => string;
   getRenderedOptionText: (option: TData) => string;
@@ -55,7 +55,7 @@ const ConnectedAutocompleteField = (
     field,
     labelKey,
     open,
-    conditionField = 'id',
+    exclusionOptionProperty = 'id',
     searchConditions = [],
     getRenderedOptionText = (option): string => option.name?.toString(),
     getRequestHeaders,
@@ -106,8 +106,8 @@ const ConnectedAutocompleteField = (
       ],
       isPaginated: true,
       queryOptions: {
-        cacheTime: 0,
         enabled: false,
+        gcTime: 0,
         staleTime: 0,
         suspense: false
       }
@@ -134,10 +134,11 @@ const ConnectedAutocompleteField = (
         : [selectedValue];
 
       return {
-        field: conditionField,
+        field,
+        operator: '$and',
         values: {
           $ni: map(
-            prop(conditionField),
+            prop(exclusionOptionProperty),
             selectedValues as Array<
               Record<keyof SelectEntry, string | undefined>
             >
@@ -155,6 +156,7 @@ const ConnectedAutocompleteField = (
 
       return {
         field,
+        operator: '$and',
         values: {
           $lk: `%${searchedValue}%`
         }
@@ -322,12 +324,13 @@ const ConnectedAutocompleteField = (
       <AutocompleteField
         filterOptions={(opt): SelectEntry => opt}
         loading={isFetching}
-        open={optionsOpen}
         options={
           allowUniqOption ? uniqBy(getRenderedOptionText, options) : options
         }
         renderOption={renderOptions}
-        onChange={(_, value) => setAutocompleteChangedValue(value)}
+        onChange={(_, value) => {
+          setAutocompleteChangedValue(value);
+        }}
         onClose={(): void => setOptionsOpen(false)}
         onOpen={(): void => setOptionsOpen(true)}
         onTextChange={changeText}

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

@@ -58,3 +58,22 @@ export const popoverWithoutInput = (): JSX.Element => {
     />
   );
 };
+
+export const customRenderedTags = (): JSX.Element => {
+  const customRender = (tags: React.ReactNode): React.ReactNode => (
+    <div style={{ display: 'flex' }}>
+      {tags}
+      <span style={{ color: '#999' }}>Custom wrapper</span>
+    </div>
+  );
+
+  return (
+    <MultiAutocompleteField
+      customRenderTags={customRender}
+      label="Custom Tags Render"
+      options={options}
+      placeholder="Type here..."
+      value={[options[0], options[1]]}
+    />
+  );
+};

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

@@ -9,10 +9,6 @@ import { SelectEntry } from '../..';
 import Option from '../../Option';
 
 const useStyles = makeStyles()((theme) => ({
-  checkbox: {
-    marginRight: theme.spacing(1),
-    padding: 0
-  },
   deleteIcon: {
     height: theme.spacing(1.5),
     width: theme.spacing(1.5)
@@ -33,6 +29,7 @@ export interface Props
       'multiple'
     > {
   chipProps?: ChipProps;
+  customRenderTags?: (tags: React.ReactNode) => React.ReactNode;
   disableSortedOptions?: boolean;
   getOptionTooltipLabel?: (option) => string;
   getTagLabel?: (option) => string;
@@ -48,6 +45,7 @@ const MultiAutocompleteField = ({
   getTagLabel = (option): string => option[optionProperty],
   getOptionTooltipLabel,
   chipProps,
+  customRenderTags,
   ...props
 }: Props): JSX.Element => {
   const { classes } = useStyles();
@@ -65,6 +63,7 @@ const MultiAutocompleteField = ({
               deleteIcon: classes.deleteIcon,
               root: classes.tag
             }}
+            data-testid={`tag-option-chip-${option.id}`}
             label={getTagLabel(option)}
             size="medium"
             {...getTagProps({ index })}
@@ -106,7 +105,11 @@ const MultiAutocompleteField = ({
           <Option checkboxSelected={selected}>{getOptionLabel(option)}</Option>
         </li>
       )}
-      renderTags={renderTags}
+      renderTags={(renderedValue, getTagProps): React.ReactNode =>
+        customRenderTags
+          ? customRenderTags(renderTags(renderedValue, getTagProps))
+          : renderTags(renderedValue, getTagProps)
+      }
       value={value}
       {...props}
     />

package/src/InputField/Text/index.tsx

@@ -4,13 +4,13 @@ import { equals, isNil } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
 import {
-  TextField as MuiTextField,
+  Box,
   InputAdornment,
+  TextField as MuiTextField,
   TextFieldProps,
   Theme,
   Tooltip,
-  Typography,
-  Box
+  Typography
 } from '@mui/material';
 
 import { getNormalizedId } from '../../utils';
@@ -84,6 +84,7 @@ export type TextProps = {
   displayErrorInTooltip?: boolean;
   error?: string;
   externalValueForAutoSize?: string;
+  forceUncontrolled?: boolean;
   open?: boolean;
   required?: boolean;
   size?: SizeVariant;
@@ -113,6 +114,7 @@ const TextField = forwardRef(
       required = false,
       containerClassName,
       type,
+      forceUncontrolled,
       ...rest
     }: TextProps,
     ref: React.ForwardedRef<HTMLDivElement>
@@ -131,7 +133,7 @@ const TextField = forwardRef(
     const tooltipTitle = displayErrorInTooltip && !isNil(error) ? error : '';
 
     const getValueProps = useCallback((): object => {
-      if (debounced) {
+      if (debounced || forceUncontrolled) {
         return {};
       }
 
@@ -140,7 +142,7 @@ const TextField = forwardRef(
       }
 
       return { value: innerValue };
-    }, [innerValue, debounced, defaultValue]);
+    }, [innerValue, debounced, defaultValue, forceUncontrolled]);
 
     return (
       <Box

package/src/Listing/ActionBar/index.tsx

@@ -28,6 +28,7 @@ const useStyles = makeStyles<StyleProps>()(
       paddingLeft: theme.spacing(1)
     },
     actions: {
+      flex: 1,
       padding: theme.spacing(1, 0)
     },
     container: {

package/src/PopoverMenu/index.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import { type Dispatch, type SetStateAction, useEffect, useState } from 'react';
 
 import { makeStyles } from 'tss-react/mui';
 
@@ -6,9 +6,9 @@ import {
   ClickAwayListener,
   Paper,
   Popper,
-  PopperPlacementType
+  type PopperPlacementType
 } from '@mui/material';
-import { PopperProps } from '@mui/material/Popper';
+import type { PopperProps } from '@mui/material/Popper';
 
 import { IconButton } from '..';
 
@@ -80,7 +80,7 @@ const PopoverMenu = ({
   };
 
   useEffect(() => {
-    if (!canOpen) {
+    if (!canOpen && isOpen) {
       close();
     }
   }, [canOpen]);

package/src/RichTextEditor/ContentEditable.tsx

@@ -1,195 +1,195 @@
-import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
-
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { makeStyles } from 'tss-react/mui';
-import { isEmpty, isNil } from 'ramda';
-import { useTranslation } from 'react-i18next';
-
-import { Typography } from '@mui/material';
-
-interface StyleProps {
-  editable: boolean;
-  error?: string;
-  minInputHeight: number;
-}
-
-const useStyles = makeStyles<StyleProps>()(
-  (theme, { minInputHeight, editable, error }) => ({
-    container: {
-      backgroundColor: theme.palette.background.paper,
-      border: error
-        ? `1px solid ${theme.palette.error.main}`
-        : '1px solid transparent',
-      borderRadius: theme.shape.borderRadius,
-      padding: theme.spacing(0.5, 1)
-    },
-    emptyInput: {
-      marginTop: '-22px'
-    },
-    input: {
-      minHeight: editable ? minInputHeight : 'min-content',
-      outline: '0px solid transparent'
-    },
-    inputFocused: {
-      border: error
-        ? `1px solid ${theme.palette.error.main}`
-        : `1px solid ${theme.palette.primary.main}`
-    },
-    notEditable: {
-      backgroundColor: 'transparent'
-    },
-    placeholder: {
-      color: theme.palette.grey[500],
-      pointerEvents: 'none'
-    },
-    root: {
-      '& p,h1,h2,h3,h4,h5,h6,span': {
-        margin: 0
-      }
-    }
-  })
-);
-
-interface Props {
-  className?: string;
-  disabled?: boolean;
-  editable: boolean;
-  editorState?: string;
-  error?: string;
-  hasInitialTextContent?: boolean;
-  initialEditorState?: string;
-  initialize?: (editor) => void;
-  inputClassname?: string;
-  minInputHeight: number;
-  namespace: string;
-  onBlur?: (e: string) => void;
-  placeholder: string;
-  resetEditorToInitialStateCondition?: () => boolean;
-}
-
-const defaultState =
-  '{"root":{"children":[{"children":[],"direction":null,"format":"","indent":0,"type":"paragraph","version":1}],"direction":null,"format":"","indent":0,"type":"root","version":1}}';
-
-const ContentEditable = ({
-  minInputHeight,
-  inputClassname,
-  placeholder,
-  hasInitialTextContent,
-  editable,
-  editorState,
-  namespace,
-  resetEditorToInitialStateCondition,
-  initialEditorState,
-  error,
-  onBlur,
-  className,
-  disabled,
-  initialize
-}: Props): JSX.Element => {
-  const { classes, cx } = useStyles({ editable, error, minInputHeight });
-  const { t } = useTranslation();
-
-  const [editor] = useLexicalComposerContext();
-  const [isFocused, setFocused] = useState(false);
-  const [root, setRoot] = useState('');
-
-  const ref = useCallback(
-    (rootElement: null | HTMLElement) => {
-      editor.setRootElement(rootElement);
-    },
-    [editor]
-  );
-
-  useLayoutEffect(() => {
-    if (!editable) {
-      const newEditorState = editor.parseEditorState(
-        editorState || defaultState
-      );
-
-      editor.setEditorState(newEditorState);
-    }
-  }, [editor, editorState]);
-
-  useEffect(() => {
-    editor.registerTextContentListener((currentRoot) => {
-      setRoot(currentRoot);
-    });
-
-    if (!hasInitialTextContent) {
-      return;
-    }
-
-    setRoot(' ');
-  }, [editor]);
-
-  useEffect(() => {
-    const shouldResetEditorToInitialState =
-      resetEditorToInitialStateCondition?.();
-
-    if (!shouldResetEditorToInitialState) {
-      return;
-    }
-
-    const newEditorState = editor.parseEditorState(
-      initialEditorState || defaultState
-    );
-
-    editor.setEditorState(newEditorState);
-  }, [editorState]);
-
-  const isTextEmpty =
-    isEmpty(root) &&
-    !editor.getEditorState().toJSON().root.children?.[0]?.children?.length;
-
-  const handleBlur = (event: React.FocusEvent<HTMLInputElement>): void => {
-    setFocused(false);
-    onBlur?.(event);
-  };
-
-  const isEditable = editor.isEditable();
-
-  useEffect(() => {
-    if (isNil(disabled)) {
-      return;
-    }
-
-    editor.setEditable(!disabled);
-  }, [disabled]);
-
-  useEffect(() => {
-    initialize?.(editor);
-  }, []);
-
-  return (
-    <div
-      className={cx(
-        classes.root,
-        editable && classes.container,
-        !isEditable && !disabled && classes.notEditable,
-        className,
-        isFocused && classes.inputFocused
-      )}
-    >
-      {editable && isTextEmpty && (
-        <Typography className={classes.placeholder}>
-          {t(placeholder)}
-        </Typography>
-      )}
-      <div
-        aria-label={namespace}
-        className={cx(
-          editable && isTextEmpty && classes.emptyInput,
-          classes.input,
-          inputClassname
-        )}
-        contentEditable={isEditable}
-        data-testid={namespace}
-        ref={ref}
-        onBlur={handleBlur}
-        onFocus={(): void => setFocused(true)}
-      />
-    </div>
-  );
-};
-
-export default ContentEditable;
+import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
+
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { isEmpty, isNil } from 'ramda';
+import { useTranslation } from 'react-i18next';
+import { makeStyles } from 'tss-react/mui';
+
+import { Typography } from '@mui/material';
+
+interface StyleProps {
+  editable: boolean;
+  error?: string;
+  minInputHeight: number;
+}
+
+const useStyles = makeStyles<StyleProps>()(
+  (theme, { minInputHeight, editable, error }) => ({
+    container: {
+      backgroundColor: theme.palette.background.paper,
+      border: error
+        ? `1px solid ${theme.palette.error.main}`
+        : '1px solid transparent',
+      borderRadius: theme.shape.borderRadius,
+      padding: theme.spacing(0.5, 1)
+    },
+    emptyInput: {
+      marginTop: '-22px'
+    },
+    input: {
+      minHeight: editable ? minInputHeight : 'min-content',
+      outline: '0px solid transparent'
+    },
+    inputFocused: {
+      border: error
+        ? `1px solid ${theme.palette.error.main}`
+        : `1px solid ${theme.palette.primary.main}`
+    },
+    notEditable: {
+      backgroundColor: 'transparent'
+    },
+    placeholder: {
+      color: theme.palette.grey[500],
+      pointerEvents: 'none'
+    },
+    root: {
+      '& p,h1,h2,h3,h4,h5,h6,span': {
+        margin: 0
+      }
+    }
+  })
+);
+
+interface Props {
+  className?: string;
+  disabled?: boolean;
+  editable: boolean;
+  editorState?: string;
+  error?: string;
+  hasInitialTextContent?: boolean;
+  initialEditorState?: string;
+  initialize?: (editor) => void;
+  inputClassname?: string;
+  minInputHeight: number;
+  namespace: string;
+  onBlur?: (e: string) => void;
+  placeholder: string;
+  resetEditorToInitialStateCondition?: () => boolean;
+}
+
+const defaultState =
+  '{"root":{"children":[{"children":[],"direction":null,"format":"","indent":0,"type":"paragraph","version":1}],"direction":null,"format":"","indent":0,"type":"root","version":1}}';
+
+const ContentEditable = ({
+  minInputHeight,
+  inputClassname,
+  placeholder,
+  hasInitialTextContent,
+  editable,
+  editorState,
+  namespace,
+  resetEditorToInitialStateCondition,
+  initialEditorState,
+  error,
+  onBlur,
+  className,
+  disabled,
+  initialize
+}: Props): JSX.Element => {
+  const { classes, cx } = useStyles({ editable, error, minInputHeight });
+  const { t } = useTranslation();
+
+  const [editor] = useLexicalComposerContext();
+  const [isFocused, setFocused] = useState(false);
+  const [root, setRoot] = useState('');
+
+  const ref = useCallback(
+    (rootElement: null | HTMLElement) => {
+      editor.setRootElement(rootElement);
+    },
+    [editor]
+  );
+
+  useLayoutEffect(() => {
+    if (!editable) {
+      const newEditorState = editor.parseEditorState(
+        editorState || defaultState
+      );
+
+      editor.setEditorState(newEditorState);
+    }
+  }, [editor, editorState]);
+
+  useEffect(() => {
+    editor.registerTextContentListener((currentRoot) => {
+      setRoot(currentRoot);
+    });
+
+    if (!hasInitialTextContent) {
+      return;
+    }
+
+    setRoot(' ');
+  }, [editor]);
+
+  useEffect(() => {
+    const shouldResetEditorToInitialState =
+      resetEditorToInitialStateCondition?.();
+
+    if (!shouldResetEditorToInitialState) {
+      return;
+    }
+
+    const newEditorState = editor.parseEditorState(
+      initialEditorState || defaultState
+    );
+
+    editor.setEditorState(newEditorState);
+  }, [editorState]);
+
+  const isTextEmpty =
+    isEmpty(root) &&
+    !editor.getEditorState().toJSON().root.children?.[0]?.children?.length;
+
+  const handleBlur = (event: React.FocusEvent<HTMLInputElement>): void => {
+    setFocused(false);
+    onBlur?.(event);
+  };
+
+  const isEditable = editor.isEditable();
+
+  useEffect(() => {
+    if (isNil(disabled)) {
+      return;
+    }
+
+    editor.setEditable(!disabled);
+  }, [disabled]);
+
+  useEffect(() => {
+    initialize?.(editor);
+  }, []);
+
+  return (
+    <div
+      className={cx(
+        classes.root,
+        editable && classes.container,
+        !isEditable && !disabled && classes.notEditable,
+        className,
+        !disabled && isFocused && classes.inputFocused
+      )}
+    >
+      {editable && isTextEmpty && (
+        <Typography className={classes.placeholder}>
+          {t(placeholder)}
+        </Typography>
+      )}
+      <div
+        aria-label={namespace}
+        className={cx(
+          editable && isTextEmpty && classes.emptyInput,
+          classes.input,
+          inputClassname
+        )}
+        contentEditable={isEditable}
+        data-testid={namespace}
+        ref={ref}
+        onBlur={handleBlur}
+        onFocus={(): void => setFocused(true)}
+      />
+    </div>
+  );
+};
+
+export default ContentEditable;

package/src/StoryBookThemeProvider/index.tsx

@@ -1,36 +1,35 @@
-import * as React from 'react';
-import { useMemo } from 'react';
-
-import {
-  ThemeProvider as MuiThemeProvider,
-  StyledEngineProvider,
-  createTheme,
-  CssBaseline
-} from '@mui/material';
-
-import { ThemeMode } from '@centreon/ui-context';
-
-import { getTheme } from '../ThemeProvider';
-
-interface Props {
-  children: React.ReactElement;
-  themeMode: ThemeMode;
-}
-
-const StoryBookThemeProvider = ({
-  children,
-  themeMode
-}: Props): JSX.Element => {
-  const theme = useMemo(() => createTheme(getTheme(themeMode)), [themeMode]);
-
-  return (
-    <StyledEngineProvider injectFirst>
-      <MuiThemeProvider theme={theme}>
-        {children}
-        <CssBaseline />
-      </MuiThemeProvider>
-    </StyledEngineProvider>
-  );
-};
-
-export default StoryBookThemeProvider;
+import { useMemo } from 'react';
+
+import {
+  CssBaseline,
+  ThemeProvider as MuiThemeProvider,
+  StyledEngineProvider,
+  createTheme
+} from '@mui/material';
+
+import { ThemeMode } from '@centreon/ui-context';
+
+import { getTheme } from '../ThemeProvider';
+
+interface Props {
+  children: React.ReactElement;
+  themeMode: ThemeMode;
+}
+
+const StoryBookThemeProvider = ({
+  children,
+  themeMode
+}: Props): JSX.Element => {
+  const theme = useMemo(() => createTheme(getTheme(themeMode)), [themeMode]);
+
+  return (
+    <StyledEngineProvider injectFirst>
+      <MuiThemeProvider theme={theme}>
+        {children}
+        <CssBaseline />
+      </MuiThemeProvider>
+    </StyledEngineProvider>
+  );
+};
+
+export default StoryBookThemeProvider;