@centreon/ui 25.10.24 → 25.10.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "25.10.24",
+  "version": "25.10.26",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

package/src/Graph/common/BaseChart/Header/index.tsx

@@ -1,3 +1,5 @@
+import { ReactElement } from 'react';
+
 import Typography from '@mui/material/Typography';
 
 import { useMemoComponent } from '@centreon/ui';
@@ -10,7 +12,7 @@ interface Props {
   title: string;
 }
 
-const Header = ({ title, header }: Props): JSX.Element => {
+const Header = ({ title, header }: Props): ReactElement => {
   const { classes } = ussHeaderChartStyles();
 
   const displayTitle = header?.displayTitle ?? true;

package/src/Graph/index.ts

@@ -6,6 +6,7 @@ export { default as BarChart } from './BarChart/BarChart';
 export { Gauge } from './Gauge';
 export { SingleBar } from './SingleBar';
 export { Text as GraphText } from './Text';
+export { default as Header } from './common/BaseChart/Header';
 
 export { HeatMap } from './HeatMap';
 export { BarStack } from './BarStack';

package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/PickersStartEndDate.tsx

@@ -95,10 +95,9 @@ const PickersStartEndDate = ({
   changeDate,
   rangeStartDate,
   rangeEndDate,
-  direction = PickersStartEndDateDirection.column
+  direction = PickersStartEndDateDirection.column,
+  className
 }: PickersStartEndDateProps): JSX.Element => {
-  const { classes } = useStyles();
-
   const locale = useLocale();
   const error = useAtomValue(errorTimePeriodAtom);
   const isError = error || isInvalidDate({ endDate, startDate });
@@ -108,16 +107,14 @@ const PickersStartEndDate = ({
   const maxEnd = rangeEndDate?.max;
   const minEnd = rangeEndDate?.min || startDate;
 
-  const styleContainer = equals(direction, PickersStartEndDateDirection.column)
-    ? classes.verticalDirection
-    : classes.horizontalDirection;
+  const isColumn = equals(direction, PickersStartEndDateDirection.column)
 
   return (
     <LocalizationProvider
       adapterLocale={locale.substring(0, 2)}
       dateAdapter={AdapterDayjs}
     >
-      <div className={styleContainer}>
+      <div className={`flex ${isColumn ? 'flex-col justify-center' : 'flex-row items-center py-2 px-4'} gap-2 ${className}`}>
         <PickerDateWithLabel
           changeDate={changeDate}
           date={startDate}
@@ -143,7 +140,7 @@ const PickersStartEndDate = ({
       {isError && (
         <ErrorText
           message="The end date must be greater than the start date"
-          style={classes.error}
+          style="text-center"
         />
       )}
     </LocalizationProvider>

package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/models.ts

@@ -71,4 +71,5 @@ export interface PickersStartEndDateProps
     PickersStartEndDateModel {
   direction?: PickersStartEndDateDirection;
   disabled?: DisabledPicker;
+  className?: string;
 }