@centreon/ui 23.10.113 → 23.10.115

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

@@ -1,65 +1,35 @@
+import { EditorState } from 'lexical';
 import { makeStyles } from 'tss-react/mui';
 
 import { Divider } from '@mui/material';
 
 import FormatButtons from './FormatButtons';
 import UndoRedoButtons from './UndoRedoButtons';
-import MacrosButton from './MacrosButton';
-import BlockButtons from './BlockButtons';
-import AlignPicker from './AlignPicker';
 
 interface Props {
-  className?: string;
-  disabled: boolean;
-  displayBlockButtons: boolean;
-  displayMacrosButton?: boolean;
   editable: boolean;
+  getEditorState?: (editorState: EditorState) => void;
 }
 
-export const useStyles = makeStyles()((theme) => ({
+const useStyles = makeStyles()((theme) => ({
   container: {
-    alignItems: 'center',
     columnGap: theme.spacing(1),
     display: 'flex',
     marginBottom: theme.spacing(1)
-  },
-  macros: {
-    '& span': {
-      fontSize: theme.typography.caption.fontSize
-    }
-  },
-  macrosButton: {
-    marginBottom: theme.spacing(0.5)
   }
 }));
 
 const ToolbarPlugin = ({
-  editable,
-  displayMacrosButton,
-  disabled,
-  displayBlockButtons,
-  className
+  getEditorState,
+  editable
 }: Props): JSX.Element | null => {
-  const { cx, classes } = useStyles();
+  const { classes } = useStyles();
 
   return editable ? (
-    <div className={cx(classes.container, className)}>
-      <UndoRedoButtons disabled={disabled} />
-      {displayBlockButtons && (
-        <>
-          <Divider flexItem orientation="vertical" />
-          <BlockButtons disabled={disabled} />
-        </>
-      )}
+    <div className={classes.container}>
+      <UndoRedoButtons />
       <Divider flexItem orientation="vertical" />
-      <FormatButtons disabled={disabled} />
-      <AlignPicker disabled={disabled} />
-      {displayMacrosButton && (
-        <>
-          <Divider flexItem orientation="vertical" />
-          <MacrosButton disabled={disabled} />
-        </>
-      )}
+      <FormatButtons getEditorState={getEditorState} />
     </div>
   ) : null;
 };

package/src/Snackbar/index.tsx

@@ -7,28 +7,22 @@ import { makeStyles } from 'tss-react/mui';
 import { IconButton, Alert } from '@mui/material';
 import IconClose from '@mui/icons-material/Close';
 
-import { sanitizedHTML } from '../utils';
-
 import Severity from './Severity';
 
-const useStyles = makeStyles()((theme) => ({
+const useStyles = makeStyles()({
   alertIcon: {
-    paddingTop: theme.spacing(1.25)
+    paddingTop: '10px'
   },
   closeIcon: {
     fontSize: 20,
     opacity: 0.9
   },
   message: {
-    '& a': {
-      color: theme.palette.primary.main,
-      textDecoration: 'none'
-    },
     display: 'flex',
     flexDirection: 'column',
     justifyContent: 'center'
   }
-}));
+});
 
 export interface SnackbarProps {
   id: string | number;
@@ -57,10 +51,6 @@ const Snackbar = React.forwardRef(
       }
       closeSnackbar(id);
     };
-    const sanitizedMessage = sanitizedHTML({ initialContent: message });
-
-    const formatedMessage =
-      typeof message === 'string' ? <div>{sanitizedMessage}</div> : message;
 
     return (
       <SnackbarContent ref={ref}>
@@ -79,7 +69,7 @@ const Snackbar = React.forwardRef(
           severity={severity}
           variant="filled"
         >
-          {formatedMessage}
+          {message}
         </Alert>
       </SnackbarContent>
     );

package/src/Snackbar/useSnackbar.tsx

@@ -2,8 +2,6 @@ import { useSnackbar as useNotistackSnackbar } from 'notistack';
 
 import { Typography } from '@mui/material';
 
-import { sanitizedHTML } from '../utils';
-
 import Severity from './Severity';
 
 import Snackbar from '.';
@@ -61,9 +59,7 @@ const useSnackbar = (): UseSnackbar => {
         <div>
           {formattedMessages.map((errorMessage, index) => (
             <Typography key={messageKeys[index]} variant="body2">
-              {sanitizedHTML({
-                initialContent: errorMessage
-              })}
+              {errorMessage}
             </Typography>
           ))}
         </div>

package/src/SortableItems/SortableItem.tsx

@@ -2,7 +2,7 @@ import { props } from 'ramda';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 
-import { useMemoComponent } from '../utils';
+import useMemoComponent from '../utils/useMemoComponent';
 
 import Item from './Item';
 
@@ -56,8 +56,7 @@ const SortableItem = ({
       transform,
       props(itemProps, rest),
       ...memoProps,
-      ...additionalProps,
-      ...Object.values(rest)
+      ...additionalProps
     ]
   });
 };

package/src/SortableItems/index.tsx

@@ -15,7 +15,11 @@ import {
   DragEndEvent,
   Over
 } from '@dnd-kit/core';
-import { SortableContext, SortingStrategy } from '@dnd-kit/sortable';
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  SortingStrategy
+} from '@dnd-kit/sortable';
 import {
   equals,
   find,
@@ -113,6 +117,7 @@ const SortableItems = <T extends { [propertyToFilterItemsOn]: string }>({
     useSensor(MouseSensor),
     useSensor(PointerSensor),
     useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
       keyboardCodes: {
         cancel: ['Escape'],
         end: ['Space', 'Enter'],
@@ -164,7 +169,7 @@ const SortableItems = <T extends { [propertyToFilterItemsOn]: string }>({
   };
 
   const getItemById = (id): T | undefined =>
-    find(propEq(id, propertyToFilterItemsOn), items);
+    find(propEq(propertyToFilterItemsOn, id), items);
 
   const activeItem = getItemById(activeId) as Record<string, unknown>;
 

package/src/ThemeProvider/index.tsx

@@ -5,22 +5,18 @@ import { CSSInterpolation } from 'tss-react';
 import { equals } from 'ramda';
 
 import {
-  ButtonProps,
+  ThemeProvider as MuiThemeProvider,
+  Theme,
+  StyledEngineProvider,
   createTheme,
   InputBaseProps,
-  StyledEngineProvider,
-  Theme,
-  ThemeProvider as MuiThemeProvider
+  ButtonProps
 } from '@mui/material';
 import CssBaseline from '@mui/material/CssBaseline';
 import { autocompleteClasses } from '@mui/material/Autocomplete';
 import { ThemeOptions } from '@mui/material/styles/createTheme';
 
 import { ThemeMode, userAtom } from '@centreon/ui-context';
-import RobotoLightWoff2 from '@centreon/ui/fonts/roboto-light-webfont.woff2';
-import RobotoRegularWoff2 from '@centreon/ui/fonts/roboto-regular-webfont.woff2';
-import RobotoMediumWoff2 from '@centreon/ui/fonts/roboto-medium-webfont.woff2';
-import RobotoBoldWoff2 from '@centreon/ui/fonts/roboto-bold-webfont.woff2';
 
 import { getPalette } from './palettes';
 
@@ -48,7 +44,8 @@ const getInputBaseRootStyle = ({
 
   if (equals(size, 'compact')) {
     return {
-      padding: '0px 0px 0px 8px'
+      padding: '8px 8px',
+      paddingRight: '0px'
     };
   }
   if (equals(size, 'small')) {
@@ -74,6 +71,7 @@ const getInputBaseRootStyle = ({
 const getInputBaseInputStyle = ({ size }: InputBaseProps): CSSInterpolation => {
   if (equals(size, 'compact')) {
     return {
+      fontSize: 'x-small',
       minHeight: '32px'
     };
   }
@@ -121,7 +119,6 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
     MuiChip: {
       styleOverrides: {
         root: ({ ownerState, theme }) => ({
-          backgroundColor: !ownerState.color && theme.palette.divider,
           ...(equals(ownerState.size, 'medium') && {
             borderRadius: theme.spacing(1.25),
             fontSize: theme.typography.body2.fontSize,
@@ -147,12 +144,35 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
     },
     MuiCssBaseline: {
       styleOverrides: (theme) => `
+        ::-webkit-scrollbar {
+          height: ${theme.spacing(1)};
+          width: ${theme.spacing(1)};
+          background-color: ${theme.palette.background.default};
+        }
+        ::-webkit-scrollbar-thumb {
+          background-color: ${
+            equals(mode, 'dark')
+              ? theme.palette.divider
+              : theme.palette.text.disabled
+          };
+          border-radius: ${theme.spacing(0.5)};
+        }
+        ::-webkit-scrollbar-thumb:hover {
+          background-color: ${theme.palette.primary.main};
+        }
+        * {
+          scrollbar-color: ${
+            equals(mode, 'dark')
+              ? theme.palette.divider
+              : theme.palette.text.disabled
+          } ${theme.palette.background.default};
+          scrollbar-width: thin;
+        }
         html {
           margin: 0;
           padding: 0;
           width: 100%;
           height: 100%;
-          text-rendering: optimizeLegibility;
         }
         body {
           background-color: ${theme.palette.background.paper};
@@ -160,38 +180,11 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
           padding: 0;
           width: 100%;
         }
-        @font-face {
-          font-family: 'Roboto';
-          font-style: normal;
-          font-weight: 300;
-          src: local('Roboto'), local('Roboto-Light'), url(${RobotoLightWoff2}) format('woff2');
-        }
-        @font-face {
-          font-family: 'Roboto';
-          font-style: normal;
-          font-weight: 400;
-          src: local('Roboto'), local('Roboto-Regular'), url(${RobotoRegularWoff2}) format('woff2');
-        }
-        @font-face {
-          font-family: 'Roboto';
-          font-style: normal;
-          font-weight: 500;
-          src: local('Roboto'), local('Roboto-Medium'), url(${RobotoMediumWoff2}) format('woff2');
-        }
-        @font-face {
-          font-family: 'Roboto';
-          font-style: normal;
-          font-weight: 700;
-          src: local('Roboto'), local('Roboto-Bold'), url(${RobotoBoldWoff2}) format('woff2');
-        }
       `
     },
     MuiInputBase: {
       styleOverrides: {
-        root: ({ ownerState, theme }) => ({
-          ...getInputBaseInputStyle(ownerState),
-          backgroundColor: theme.palette.background.paper
-        })
+        root: ({ ownerState }) => getInputBaseInputStyle(ownerState)
       }
     },
     MuiList: {
@@ -260,8 +253,7 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
     },
     caption: {
       fontSize: '0.625rem'
-    },
-    fontFamily: 'Roboto, Arial'
+    }
   }
 });