@centreon/ui 24.5.12 → 24.5.13

package/src/Snackbar/index.tsx

@@ -7,22 +7,28 @@ 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()({
+const useStyles = makeStyles()((theme) => ({
   alertIcon: {
-    paddingTop: '10px'
+    paddingTop: theme.spacing(1.25)
   },
   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;
@@ -51,6 +57,10 @@ const Snackbar = React.forwardRef(
       }
       closeSnackbar(id);
     };
+    const sanitizedMessage = sanitizedHTML({ initialContent: message });
+
+    const formatedMessage =
+      typeof message === 'string' ? <div>{sanitizedMessage}</div> : message;
 
     return (
       <SnackbarContent ref={ref}>
@@ -69,7 +79,7 @@ const Snackbar = React.forwardRef(
           severity={severity}
           variant="filled"
         >
-          {message}
+          {formatedMessage}
         </Alert>
       </SnackbarContent>
     );

package/src/Snackbar/useSnackbar.tsx

@@ -2,6 +2,8 @@ import { useSnackbar as useNotistackSnackbar } from 'notistack';
 
 import { Typography } from '@mui/material';
 
+import { sanitizedHTML } from '../utils';
+
 import Severity from './Severity';
 
 import Snackbar from '.';
@@ -59,7 +61,9 @@ const useSnackbar = (): UseSnackbar => {
         <div>
           {formattedMessages.map((errorMessage, index) => (
             <Typography key={messageKeys[index]} variant="body2">
-              {errorMessage}
+              {sanitizedHTML({
+                initialContent: 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/useMemoComponent';
+import { useMemoComponent } from '../utils';
 
 import Item from './Item';
 
@@ -56,7 +56,8 @@ const SortableItem = ({
       transform,
       props(itemProps, rest),
       ...memoProps,
-      ...additionalProps
+      ...additionalProps,
+      ...Object.values(rest)
     ]
   });
 };

package/src/SortableItems/index.tsx

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

package/src/ThemeProvider/index.tsx

@@ -5,18 +5,22 @@ import { CSSInterpolation } from 'tss-react';
 import { equals } from 'ramda';
 
 import {
-  ThemeProvider as MuiThemeProvider,
-  Theme,
-  StyledEngineProvider,
+  ButtonProps,
   createTheme,
   InputBaseProps,
-  ButtonProps
+  StyledEngineProvider,
+  Theme,
+  ThemeProvider as MuiThemeProvider
 } 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';
 
@@ -44,8 +48,7 @@ const getInputBaseRootStyle = ({
 
   if (equals(size, 'compact')) {
     return {
-      padding: '8px 8px',
-      paddingRight: '0px'
+      padding: '0px 0px 0px 8px'
     };
   }
   if (equals(size, 'small')) {
@@ -71,7 +74,6 @@ const getInputBaseRootStyle = ({
 const getInputBaseInputStyle = ({ size }: InputBaseProps): CSSInterpolation => {
   if (equals(size, 'compact')) {
     return {
-      fontSize: 'x-small',
       minHeight: '32px'
     };
   }
@@ -119,6 +121,7 @@ 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,7 +150,7 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
         ::-webkit-scrollbar {
           height: ${theme.spacing(1)};
           width: ${theme.spacing(1)};
-          background-color: ${theme.palette.background.default};
+          background-color: transparent;
         }
         ::-webkit-scrollbar-thumb {
           background-color: ${
@@ -173,6 +176,7 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
           padding: 0;
           width: 100%;
           height: 100%;
+          text-rendering: optimizeLegibility;
         }
         body {
           background-color: ${theme.palette.background.paper};
@@ -180,11 +184,41 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
           padding: 0;
           width: 100%;
         }
+        #root {
+          background-color: ${theme.palette.background.paper};
+        }
+        @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 }) => getInputBaseInputStyle(ownerState)
+        root: ({ ownerState, theme }) => ({
+          ...getInputBaseInputStyle(ownerState),
+          backgroundColor: theme.palette.background.paper
+        })
       }
     },
     MuiList: {
@@ -253,7 +287,8 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
     },
     caption: {
       fontSize: '0.625rem'
-    }
+    },
+    fontFamily: 'Roboto, Arial'
   }
 });