@centreon/ui 23.10.55 → 23.10.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.55",
+  "version": "23.10.57",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Form/Inputs/index.tsx

@@ -1,7 +1,6 @@
 import { Fragment, useMemo } from 'react';
 
 import * as R from 'ramda';
-import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 import { FormikValues, useFormikContext } from 'formik';
 
@@ -126,7 +125,6 @@ const Inputs = ({
   areGroupsOpen
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({ groupDirection });
-  const { t } = useTranslation();
   const formikContext = useFormikContext<FormikValues>();
 
   const groupsName = R.pluck('name', groups);
@@ -228,7 +226,7 @@ const Inputs = ({
                             )}
                             variant="body1"
                           >
-                            {t(inputProps.additionalLabel)}
+                            {inputProps.additionalLabel}
                           </Typography>
                         )}
                         <div className={inputProps?.inputClassName || ''}>

package/src/Form/Inputs/models.ts

@@ -29,7 +29,7 @@ interface FieldsTableGetRequiredProps {
 export type LabelPlacement = 'bottom' | 'top' | 'end' | 'start' | undefined;
 
 export interface InputProps {
-  additionalLabel?: string;
+  additionalLabel?: string | JSX.Element;
   additionalLabelClassName?: string;
   additionalMemoProps?: Array<unknown>;
   autocomplete?: {

package/src/RichTextEditor/ContentEditable.tsx

@@ -47,7 +47,7 @@ const useStyles = makeStyles<StyleProps>()(
 
 interface Props {
   className?: string;
-  disabled: boolean;
+  disabled?: boolean;
   editable: boolean;
   editorState?: string;
   error?: string;
@@ -61,6 +61,9 @@ interface Props {
   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,
@@ -91,8 +94,10 @@ const ContentEditable = ({
   );
 
   useLayoutEffect(() => {
-    if (editorState && !editable) {
-      const newEditorState = editor.parseEditorState(editorState);
+    if (!editable) {
+      const newEditorState = editor.parseEditorState(
+        editorState || defaultState
+      );
 
       editor.setEditorState(newEditorState);
     }

package/src/RichTextEditor/RichTextEditor.tsx

@@ -63,6 +63,36 @@ const useStyles = makeStyles<{ toolbarPositions: 'start' | 'end' }>()(
       paddingLeft: theme.spacing(1.5),
       paddingTop: theme.spacing(0.5)
     },
+    h1: {
+      fontSize: theme.typography.h1.fontSize,
+      fontWeight: theme.typography.h1.fontWeight,
+      lineHeight: theme.typography.h1.lineHeight
+    },
+    h2: {
+      fontSize: theme.typography.h2.fontSize,
+      fontWeight: theme.typography.h2.fontWeight,
+      lineHeight: theme.typography.h2.lineHeight
+    },
+    h3: {
+      fontSize: theme.typography.h3.fontSize,
+      fontWeight: theme.typography.h3.fontWeight,
+      lineHeight: theme.typography.h3.lineHeight
+    },
+    h4: {
+      fontSize: theme.typography.h4.fontSize,
+      fontWeight: theme.typography.h4.fontWeight,
+      lineHeight: theme.typography.h4.lineHeight
+    },
+    h5: {
+      fontSize: theme.typography.h5.fontSize,
+      fontWeight: theme.typography.h5.fontWeight,
+      lineHeight: theme.typography.h5.lineHeight
+    },
+    h6: {
+      fontSize: theme.typography.h6.fontSize,
+      fontWeight: theme.typography.h6.fontWeight,
+      lineHeight: theme.typography.h6.lineHeight
+    },
     italic: {
       fontStyle: 'italic'
     },
@@ -101,7 +131,7 @@ const RichTextEditor = ({
   onBlur,
   contentClassName,
   displayMacrosButton = false,
-  disabled = false,
+  disabled,
   openLinkInNewTab = true
 }: RichTextEditorProps): JSX.Element => {
   const { classes } = useStyles({ toolbarPositions });
@@ -117,6 +147,14 @@ const RichTextEditor = ({
     nodes: [AutoLinkNode, LinkNode, HeadingNode, ListNode, ListItemNode],
     onError,
     theme: {
+      heading: {
+        h1: classes.h1,
+        h2: classes.h2,
+        h3: classes.h3,
+        h4: classes.h4,
+        h5: classes.h5,
+        h6: classes.h6
+      },
       link: classes.link,
       text: {
         bold: classes.bold,

package/src/RichTextEditor/plugins/ToolbarPlugin/index.tsx

@@ -8,7 +8,7 @@ import MacrosButton from './MacrosButton';
 import BlockButtons from './BlockButtons';
 
 interface Props {
-  disabled: boolean;
+  disabled?: boolean;
   displayMacrosButton?: boolean;
   editable: boolean;
 }