@centreon/ui 24.11.14 → 24.11.21

package/src/Panel/Memoized.tsx

@@ -2,7 +2,7 @@
 
 import { forwardRef } from 'react';
 
-import useMemoComponent from '../utils/useMemoComponent';
+import { useMemoComponent } from '../utils';
 
 import Panel, { Props } from '.';
 

package/src/Panel/Section/ExpandableSection.tsx

@@ -1,15 +1,15 @@
 import { makeStyles } from 'tss-react/mui';
 
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import {
-  Typography,
-  AccordionSummary,
-  AccordionDetails,
   Accordion,
-  styled,
+  AccordionDetails,
   AccordionProps,
-  AccordionSummaryProps
+  AccordionSummary,
+  AccordionSummaryProps,
+  Typography,
+  styled
 } from '@mui/material';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
 const useStyles = makeStyles()((theme) => ({
   details: {

package/src/Panel/Section/index.test.tsx

@@ -1,4 +1,4 @@
-import { render, fireEvent } from '../../testRenderer';
+import { fireEvent, render } from '../../../test/testRenderer';
 
 import SectionPanel from '.';
 

package/src/Panel/Section/index.tsx

@@ -1,12 +1,12 @@
 import { isNil } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
-import { List, ListItem, Slide, Paper } from '@mui/material';
 import ForwardIcon from '@mui/icons-material/ArrowForwardIos';
+import { List, ListItem, Paper, Slide } from '@mui/material';
 
 import Panel from '..';
 import ContentWithCircularLoading from '../../ContentWithCircularProgress';
-import useMemoComponent from '../../utils/useMemoComponent';
+import { useMemoComponent } from '../../utils';
 
 import ExpandableSection from './ExpandableSection';
 

package/src/Panel/index.tsx

@@ -1,16 +1,18 @@
-/* eslint-disable react/no-unused-prop-types */
-// There is an issue about using forwardRef: https://github.com/yannickcr/eslint-plugin-react/issues/2760
-
-import * as React from 'react';
-
 import { isEmpty, isNil } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
-import { Paper, Slide, Divider, AppBar, Tabs } from '@mui/material';
 import IconClose from '@mui/icons-material/Clear';
+import { AppBar, Divider, Paper, Slide, Tabs } from '@mui/material';
 
-import IconButton from '../Button/Icon';
+import { IconButton } from '..';
 
+import {
+  ReactElement,
+  RefObject,
+  forwardRef,
+  useCallback,
+  useEffect
+} from 'react';
 import { minTabHeight } from './Tab';
 
 interface StylesProps extends Pick<Props, 'headerBackgroundColor' | 'width'> {
@@ -33,7 +35,7 @@ const useStyles = makeStyles<StylesProps>()(
       height: '100%'
     },
     container: {
-      backgroundColor: theme.palette.background.default,
+      backgroundColor: theme.palette.background.panel,
       borderTopRightRadius: 0,
       display: 'grid',
       gridTemplate: 'auto auto 1fr / 1fr',
@@ -85,20 +87,21 @@ export interface Tab {
 }
 
 export interface Props {
-  header: React.ReactElement;
+  className?: string;
+  header?: ReactElement;
   headerBackgroundColor?: string;
   labelClose?: string;
   minWidth?: number;
   onClose?: () => void;
   onResize?: (newWidth: number) => void;
   onTabSelect?: (event, id: number) => void;
-  selectedTab: React.ReactElement;
+  selectedTab: ReactElement;
   selectedTabId?: number;
   tabs?: Array<JSX.Element>;
   width?: number;
 }
 
-const Panel = React.forwardRef(
+const Panel = forwardRef(
   (
     {
       header,
@@ -111,11 +114,12 @@ const Panel = React.forwardRef(
       width = 550,
       minWidth = 550,
       headerBackgroundColor,
-      onResize
+      onResize,
+      className
     }: Props,
     ref
   ): JSX.Element => {
-    const { classes } = useStyles({
+    const { classes, cx } = useStyles({
       hasTabs: !isEmpty(tabs),
       headerBackgroundColor,
       width
@@ -131,7 +135,7 @@ const Panel = React.forwardRef(
       }
     };
 
-    React.useEffect(() => {
+    useEffect(() => {
       window.addEventListener('resize', resizeWindow);
 
       return (): void => {
@@ -149,7 +153,7 @@ const Panel = React.forwardRef(
       document.removeEventListener('mousemove', moveMouse, true);
     };
 
-    const moveMouse = React.useCallback((e) => {
+    const moveMouse = useCallback((e) => {
       e.preventDefault();
 
       const maxWidth = getMaxWidth();
@@ -179,9 +183,9 @@ const Panel = React.forwardRef(
           exit: 50
         }}
       >
-        <Paper className={classes.container} elevation={2}>
+        <Paper className={cx(classes.container, className)} elevation={2}>
           {!isNil(onResize) && (
-            <div className={classes.dragger} role="none" onMouseDown={resize} />
+            <div className={classes.dragger} onMouseDown={resize} />
           )}
           {header && (
             <>
@@ -222,9 +226,11 @@ const Panel = React.forwardRef(
             </AppBar>
             <div
               className={classes.contentContainer}
-              ref={ref as React.RefObject<HTMLDivElement>}
+              ref={ref as RefObject<HTMLDivElement>}
             >
-              <div className={classes.content}>{selectedTab}</div>
+              <div className={classes.content} id="panel-content">
+                {selectedTab}
+              </div>
             </div>
           </div>
         </Paper>

package/src/ParentSize/ParentSize.tsx

@@ -0,0 +1,24 @@
+import { ReactElement } from 'react';
+
+import { Responsive } from '@visx/visx';
+
+type ParentSizeState = {
+  height: number;
+  left: number;
+  top: number;
+  width: number;
+};
+
+type Props = {
+  children: (args: ParentSizeState) => ReactElement;
+};
+
+const ParentSize = ({ children, ...props }: Props): JSX.Element => {
+  return (
+    <Responsive.ParentSize {...props} debounceTime={0}>
+      {children}
+    </Responsive.ParentSize>
+  );
+};
+
+export default ParentSize;

package/src/ParentSize/index.ts

@@ -0,0 +1 @@
+export { default as ParentSize } from './ParentSize';

package/src/PopoverMenu/index.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { type Dispatch, type SetStateAction, useEffect, useState } from 'react';
 
 import { makeStyles } from 'tss-react/mui';
 
@@ -6,28 +6,40 @@ import {
   ClickAwayListener,
   Paper,
   Popper,
-  PopperPlacementType,
-  useTheme
+  type PopperPlacementType
 } from '@mui/material';
+import type { PopperProps } from '@mui/material/Popper';
 
+import { equals, type } from 'ramda';
 import { IconButton } from '..';
 
-const useStyles = makeStyles()(() => ({
+const useStyles = makeStyles()((theme) => ({
+  popover: {
+    zIndex: theme.zIndex.tooltip
+  },
   popoverIconButton: {
     padding: 0,
     width: '100%'
   }
 }));
 
+interface PopoverData {
+  anchorEl: HTMLElement | undefined;
+  setAnchorEl: Dispatch<SetStateAction<HTMLElement | undefined>>;
+}
+
 interface Props {
   canOpen?: boolean;
-  children: (props?) => JSX.Element;
+  children: (props?) => JSX.Element | JSX.Element;
   className?: string;
+  tooltipClassName?: string;
   dataTestId?: string;
+  getPopoverData?: (data: PopoverData) => void;
   icon: JSX.Element;
   onClose?: () => void;
   onOpen?: () => void;
   popperPlacement?: PopperPlacementType;
+  popperProps?: Partial<PopperProps>;
   title?: string;
 }
 
@@ -40,20 +52,21 @@ const PopoverMenu = ({
   onClose,
   canOpen = true,
   className,
-  dataTestId
+  dataTestId,
+  getPopoverData,
+  tooltipClassName,
+  popperProps
 }: Props): JSX.Element => {
-  const theme = useTheme();
   const { classes, cx } = useStyles();
   const [anchorEl, setAnchorEl] = useState<HTMLElement | undefined>();
-
   const isOpen = Boolean(anchorEl);
 
   const close = (reason?): void => {
     const isClosedByInputClick = reason?.type === 'mousedown';
-
     if (isClosedByInputClick) {
       return;
     }
+
     onClose?.();
     setAnchorEl(undefined);
   };
@@ -75,6 +88,10 @@ const PopoverMenu = ({
     }
   }, [canOpen]);
 
+  useEffect(() => {
+    getPopoverData?.({ anchorEl, setAnchorEl });
+  }, [anchorEl]);
+
   return (
     <>
       <IconButton
@@ -92,13 +109,18 @@ const PopoverMenu = ({
           <Popper
             open
             anchorEl={anchorEl}
+            className={classes.popover}
             nonce={undefined}
             placement={popperPlacement}
-            style={{ zIndex: theme.zIndex.tooltip }}
             onResize={(): undefined => undefined}
             onResizeCapture={(): undefined => undefined}
+            {...popperProps}
           >
-            <Paper>{children({ close })}</Paper>
+            <Paper className={tooltipClassName}>
+              {equals(type(children), 'Function')
+                ? children({ close })
+                : children}
+            </Paper>
           </Popper>
         </ClickAwayListener>
       )}

package/src/RichTextEditor/ContentEditable.tsx

@@ -1,149 +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;
-  minInputHeight: number;
-}
-
-const useStyles = makeStyles<StyleProps>()(
-  (theme, { minInputHeight, editable }) => ({
-    container: {
-      '& p': {
-        margin: 0
-      },
-      backgroundColor: theme.palette.background.paper,
-      border: '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: `1px solid ${theme.palette.primary.main}`
-    },
-    placeholder: {
-      color: theme.palette.grey[500],
-      pointerEvents: 'none'
-    }
-  })
-);
-
-interface Props {
-  editable: boolean;
-  editorState?: string;
-  hasInitialTextContent?: boolean;
-  initialEditorState?: string;
-  inputClassname?: string;
-  minInputHeight: number;
-  namespace: string;
-  placeholder: string;
-  resetEditorToInitialStateCondition?: () => boolean;
-}
-
-const ContentEditable = ({
-  minInputHeight,
-  inputClassname,
-  placeholder,
-  hasInitialTextContent,
-  editable,
-  editorState,
-  namespace,
-  resetEditorToInitialStateCondition,
-  initialEditorState
-}: Props): JSX.Element => {
-  const { classes, cx } = useStyles({ editable, minInputHeight });
-  const { t } = useTranslation();
-
-  const [editor] = useLexicalComposerContext();
-  const [isEditable, setEditable] = useState(false);
-  const [isFocused, setFocused] = useState(false);
-  const [root, setRoot] = useState('');
-
-  const ref = useCallback(
-    (rootElement: null | HTMLElement) => {
-      editor.setRootElement(rootElement);
-    },
-    [editor]
-  );
-
-  useLayoutEffect(() => {
-    setEditable(editor.isEditable());
-
-    if (editorState && !editable) {
-      const newEditorState = editor.parseEditorState(editorState);
-
-      editor.setEditorState(newEditorState);
-    }
-
-    return editor.registerEditableListener((currentIsEditable) => {
-      setEditable(currentIsEditable);
-    });
-  }, [editor, editorState]);
-
-  useEffect(() => {
-    editor.registerTextContentListener((currentRoot) => {
-      setRoot(currentRoot);
-    });
-
-    if (!hasInitialTextContent) {
-      return;
-    }
-
-    setRoot(' ');
-  }, [editor]);
-
-  useEffect(() => {
-    const shouldResetEditorToInitialState =
-      resetEditorToInitialStateCondition?.();
-
-    if (!shouldResetEditorToInitialState || isNil(initialEditorState)) {
-      return;
-    }
-
-    const newEditorState = editor.parseEditorState(initialEditorState);
-
-    editor.setEditorState(newEditorState);
-  }, [editorState]);
-
-  const isTextEmpty = isEmpty(root);
-
-  return (
-    <div
-      className={cx(classes.container, isFocused && classes.inputFocused)}
-      id={namespace}
-    >
-      {editable && isTextEmpty && (
-        <Typography className={classes.placeholder}>
-          {t(placeholder)}
-        </Typography>
-      )}
-      <div
-        aria-label={namespace}
-        className={cx(
-          isTextEmpty && classes.emptyInput,
-          classes.input,
-          inputClassname
-        )}
-        contentEditable={isEditable}
-        data-testid={namespace}
-        ref={ref}
-        onBlur={(): void => setFocused(false)}
-        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;