@centreon/ui 24.4.31 → 24.4.32

package/src/Listing/index.tsx

@@ -69,7 +69,7 @@ const getVisibleColumns = ({
   }
 
   return selectedColumnIds.map((id) =>
-    columns.find(propEq(id, 'id'))
+    columns.find(propEq('id', id))
   ) as Array<Column>;
 };
 
@@ -93,11 +93,9 @@ export interface Props<TRow> {
   columnConfiguration?: ColumnConfiguration;
   columns: Array<Column>;
   currentPage?: number;
-  customListingComponent?: JSX.Element;
   customPaginationClassName?: string;
   disableRowCheckCondition?: (row) => boolean;
   disableRowCondition?: (row) => boolean;
-  displayCustomListing?: boolean;
   getHighlightRowCondition?: (row: TRow) => boolean;
   getId?: (row: TRow) => RowId;
   headerMemoProps?: Array<unknown>;
@@ -123,9 +121,9 @@ export interface Props<TRow> {
   subItems?: {
     canCheckSubItems: boolean;
     enable: boolean;
-    getRowProperty: (row?) => string;
     labelCollapse: string;
     labelExpand: string;
+    rowProperty: string;
   };
   totalRows?: number;
   viewerModeConfiguration?: ViewerModeConfiguration;
@@ -140,8 +138,6 @@ const defaultColumnConfiguration = {
 export const performanceRowsLimit = 60;
 
 const Listing = <TRow extends { id: RowId }>({
-  customListingComponent,
-  displayCustomListing,
   limit = 10,
   visualizationActions,
   columns,
@@ -180,9 +176,9 @@ const Listing = <TRow extends { id: RowId }>({
   subItems = {
     canCheckSubItems: false,
     enable: false,
-    getRowProperty: () => '',
     labelCollapse: 'Collapse',
-    labelExpand: 'Expand'
+    labelExpand: 'Expand',
+    rowProperty: ''
   }
 }: Props<TRow>): JSX.Element => {
   const currentVisibleColumns = getVisibleColumns({
@@ -215,10 +211,10 @@ const Listing = <TRow extends { id: RowId }>({
         ? reduce<TRow, Array<TRow>>(
             (acc, row): Array<TRow> => {
               if (
-                row[subItems.getRowProperty()] &&
+                row[subItems.rowProperty] &&
                 subItemsPivots.includes(row.id)
               ) {
-                return [...acc, row, ...row[subItems.getRowProperty()]];
+                return [...acc, row, ...row[subItems.rowProperty]];
               }
 
               return [...acc, row];
@@ -233,6 +229,7 @@ const Listing = <TRow extends { id: RowId }>({
   const { classes } = useListingStyles({
     dataStyle,
     getGridTemplateColumn,
+    limit,
     listingVariant,
     rows: rowsToDisplay
   });
@@ -453,7 +450,7 @@ const Listing = <TRow extends { id: RowId }>({
       reduce<TRow | number, Array<string | number>>(
         (acc, row) => [
           ...acc,
-          ...pluck('id', row[subItems?.getRowProperty() || ''] || [])
+          ...pluck('id', row[subItems?.rowProperty || ''] || [])
         ],
         [],
         rows
@@ -498,7 +495,6 @@ const Listing = <TRow extends { id: RowId }>({
             onSelectColumns={onSelectColumns}
           />
         </div>
-
         <ParentSize
           parentSizeStyles={{
             height: '100%',
@@ -514,141 +510,132 @@ const Listing = <TRow extends { id: RowId }>({
                 height: innerScrollDisabled ? '100%' : `calc(${height}px - 4px)`
               }}
             >
-              {displayCustomListing ? (
-                customListingComponent
-              ) : (
-                <Table
-                  stickyHeader
-                  className={classes.table}
+              <Table
+                stickyHeader
+                className={classes.table}
+                component="div"
+                role={undefined}
+                size="small"
+              >
+                <ListingHeader
+                  areColumnsEditable={areColumnsEditable}
+                  checkable={checkable}
+                  columnConfiguration={columnConfiguration}
+                  columns={columns}
+                  listingVariant={listingVariant}
+                  memoProps={headerMemoProps}
+                  predefinedRowsSelection={predefinedRowsSelection}
+                  rowCount={limit - emptyRows}
+                  selectedRowCount={selectedRows.length}
+                  sortField={sortField}
+                  sortOrder={sortOrder}
+                  onSelectAllClick={selectAllRows}
+                  onSelectColumns={onSelectColumns}
+                  onSelectRowsWithCondition={onSelectRowsWithCondition}
+                  onSort={onSort}
+                />
+
+                <TableBody
+                  className={classes.tableBody}
                   component="div"
-                  role={undefined}
-                  size="small"
+                  onMouseLeave={clearHoveredRow}
                 >
-                  <ListingHeader
-                    areColumnsEditable={areColumnsEditable}
-                    checkable={checkable}
-                    columnConfiguration={columnConfiguration}
-                    columns={columns}
-                    listingVariant={listingVariant}
-                    memoProps={headerMemoProps}
-                    predefinedRowsSelection={predefinedRowsSelection}
-                    rowCount={limit - emptyRows}
-                    selectedRowCount={selectedRows.length}
-                    sortField={sortField}
-                    sortOrder={sortOrder}
-                    onSelectAllClick={selectAllRows}
-                    onSelectColumns={onSelectColumns}
-                    onSelectRowsWithCondition={onSelectRowsWithCondition}
-                    onSort={onSort}
-                  />
-
-                  <TableBody
-                    className={classes.tableBody}
-                    component="div"
-                    onMouseLeave={clearHoveredRow}
-                  >
-                    {rowsToDisplay.map((row, index) => {
-                      const isRowSelected = isSelected(row);
-                      const isRowHovered = equals(hoveredRowId, getId(row));
-                      const isSubItem = allSubItemIds.includes(row.id);
-
-                      return (
-                        <ListingRow
-                          checkable={
-                            checkable &&
-                            (!isSubItem || subItems.canCheckSubItems)
-                          }
-                          columnConfiguration={columnConfiguration}
-                          columnIds={columns.map(prop('id'))}
-                          disableRowCondition={disableRowCondition}
-                          isHovered={isRowHovered}
-                          isSelected={isRowSelected}
-                          isShiftKeyDown={isShiftKeyDown}
-                          key={
-                            gte(limit, performanceRowsLimit)
-                              ? `row_${index}`
-                              : getId(row)
-                          }
-                          lastSelectionIndex={lastSelectionIndex}
-                          limit={limit}
-                          listingVariant={listingVariant}
-                          row={row}
-                          rowColorConditions={rowColorConditions}
-                          shiftKeyDownRowPivot={shiftKeyDownRowPivot}
-                          subItemsPivots={subItemsPivots}
-                          tabIndex={-1}
-                          visibleColumns={visibleColumns}
-                          onClick={(): void => {
-                            onRowClick(row);
-                          }}
-                          onFocus={(): void => hoverRow(row)}
-                          onMouseOver={(): void => hoverRow(row)}
-                        >
-                          {checkable &&
-                            (!isSubItem || subItems.canCheckSubItems ? (
-                              <Cell
-                                align="left"
-                                className={classes.checkbox}
-                                disableRowCondition={disableRowCondition}
-                                isRowHovered={isRowHovered}
-                                row={row}
-                                rowColorConditions={rowColorConditions}
-                                onClick={(event): void => selectRow(event, row)}
-                              >
-                                <Checkbox
-                                  checked={isRowSelected}
-                                  disabled={
-                                    disableRowCheckCondition(row) ||
-                                    disableRowCondition(row)
-                                  }
-                                  inputProps={{
-                                    'aria-label': `Select row ${getId(row)}`
-                                  }}
-                                />
-                              </Cell>
-                            ) : (
-                              <Cell
-                                align="left"
-                                disableRowCondition={disableRowCondition}
-                                isRowHovered={isRowHovered}
-                                row={row}
-                                rowColorConditions={rowColorConditions}
+                  {rowsToDisplay.map((row, index) => {
+                    const isRowSelected = isSelected(row);
+                    const isRowHovered = equals(hoveredRowId, getId(row));
+                    const isSubItem = allSubItemIds.includes(row.id);
+
+                    return (
+                      <ListingRow
+                        checkable={
+                          checkable && (!isSubItem || subItems.canCheckSubItems)
+                        }
+                        columnConfiguration={columnConfiguration}
+                        columnIds={columns.map(prop('id'))}
+                        disableRowCondition={disableRowCondition}
+                        isHovered={isRowHovered}
+                        isSelected={isRowSelected}
+                        isShiftKeyDown={isShiftKeyDown}
+                        key={
+                          gte(limit, performanceRowsLimit)
+                            ? `row_${index}`
+                            : getId(row)
+                        }
+                        lastSelectionIndex={lastSelectionIndex}
+                        limit={limit}
+                        listingVariant={listingVariant}
+                        row={row}
+                        rowColorConditions={rowColorConditions}
+                        shiftKeyDownRowPivot={shiftKeyDownRowPivot}
+                        subItemsPivots={subItemsPivots}
+                        tabIndex={-1}
+                        visibleColumns={visibleColumns}
+                        onClick={(): void => {
+                          onRowClick(row);
+                        }}
+                        onFocus={(): void => hoverRow(row)}
+                        onMouseOver={(): void => hoverRow(row)}
+                      >
+                        {checkable &&
+                          (!isSubItem || subItems.canCheckSubItems ? (
+                            <Cell
+                              align="left"
+                              className={classes.checkbox}
+                              disableRowCondition={disableRowCondition}
+                              isRowHovered={isRowHovered}
+                              row={row}
+                              rowColorConditions={rowColorConditions}
+                              onClick={(event): void => selectRow(event, row)}
+                            >
+                              <Checkbox
+                                checked={isRowSelected}
+                                disabled={
+                                  disableRowCheckCondition(row) ||
+                                  disableRowCondition(row)
+                                }
+                                inputProps={{
+                                  'aria-label': `Select row ${getId(row)}`
+                                }}
                               />
-                            ))}
-
-                          {visibleColumns.map((column) => (
-                            <DataCell
-                              column={column}
+                            </Cell>
+                          ) : (
+                            <Cell
+                              align="left"
                               disableRowCondition={disableRowCondition}
-                              getHighlightRowCondition={
-                                getHighlightRowCondition
-                              }
                               isRowHovered={isRowHovered}
-                              isRowSelected={isRowSelected}
-                              key={`${getId(row)}-${column.id}`}
-                              labelCollapse={subItems.labelCollapse}
-                              labelExpand={subItems.labelExpand}
-                              listingVariant={listingVariant}
                               row={row}
                               rowColorConditions={rowColorConditions}
-                              subItemsRowProperty={subItems?.getRowProperty(
-                                row
-                              )}
                             />
                           ))}
-                        </ListingRow>
-                      );
-                    })}
-
-                    {rows.length < 1 &&
-                      (loading ? (
-                        <SkeletonLoader rows={limit} />
-                      ) : (
-                        <EmptyResult label={t(labelNoResultFound)} />
-                      ))}
-                  </TableBody>
-                </Table>
-              )}
+
+                        {visibleColumns.map((column) => (
+                          <DataCell
+                            column={column}
+                            disableRowCondition={disableRowCondition}
+                            getHighlightRowCondition={getHighlightRowCondition}
+                            isRowHovered={isRowHovered}
+                            isRowSelected={isRowSelected}
+                            key={`${getId(row)}-${column.id}`}
+                            labelCollapse={subItems.labelCollapse}
+                            labelExpand={subItems.labelExpand}
+                            listingVariant={listingVariant}
+                            row={row}
+                            rowColorConditions={rowColorConditions}
+                            subItemsRowProperty={subItems?.rowProperty}
+                          />
+                        ))}
+                      </ListingRow>
+                    );
+                  })}
+
+                  {rows.length < 1 &&
+                    (loading ? (
+                      <SkeletonLoader rows={limit} />
+                    ) : (
+                      <EmptyResult label={t(labelNoResultFound)} />
+                    ))}
+                </TableBody>
+              </Table>
             </Box>
           )}
         </ParentSize>

package/src/Module/index.tsx

@@ -1,3 +1,5 @@
+import * as React from 'react';
+
 import { Provider as JotaiProvider, createStore } from 'jotai';
 
 import { createGenerateClassName, StylesProvider } from '@mui/styles';
@@ -7,7 +9,7 @@ import SnackbarProvider from '../Snackbar/SnackbarProvider';
 
 export interface ModuleProps {
   children: React.ReactElement;
-  maxSnackbars?: number;
+  maxSnackbars: number;
   seedName: string;
   store: ReturnType<typeof createStore>;
 }
@@ -15,7 +17,7 @@ export interface ModuleProps {
 const Module = ({
   children,
   seedName,
-  maxSnackbars = 3,
+  maxSnackbars,
   store
 }: ModuleProps): JSX.Element => {
   const generateClassName = createGenerateClassName({

package/src/RichTextEditor/RichTextEditor.tsx

@@ -12,7 +12,6 @@ import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
 import { equals } from 'ramda';
 import { ListPlugin } from '@lexical/react/LexicalListPlugin';
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
-import { $generateHtmlFromNodes } from '@lexical/html';
 
 import { Typography } from '@mui/material';
 
@@ -39,7 +38,6 @@ export interface RichTextEditorProps {
   openLinkInNewTab?: boolean;
   placeholder?: string;
   resetEditorToInitialStateCondition?: () => boolean;
-  setHtmlString?: (htmlString: string) => void;
   toolbarClassName?: string;
   toolbarPositions?: 'start' | 'end';
 }
@@ -145,7 +143,6 @@ const RichTextEditor = ({
   openLinkInNewTab = true,
   initialize,
   displayBlockButtons = true,
-  setHtmlString,
   toolbarClassName
 }: RichTextEditorProps): JSX.Element => {
   const { classes } = useStyles({ toolbarPositions });
@@ -181,13 +178,6 @@ const RichTextEditor = ({
     }
   };
 
-  const change = (state: EditorState, editor: LexicalEditor): void => {
-    editor.update(() => {
-      setHtmlString?.($generateHtmlFromNodes(editor, null));
-    });
-    getEditorState?.(state, editor);
-  };
-
   return (
     <LexicalComposer initialConfig={initialConfig}>
       <div className={classes.container}>
@@ -220,7 +210,6 @@ const RichTextEditor = ({
                 resetEditorToInitialStateCondition={
                   resetEditorToInitialStateCondition
                 }
-                setHtmlString={setHtmlString}
                 onBlur={onBlur}
               />
             }
@@ -229,7 +218,7 @@ const RichTextEditor = ({
           <HistoryPlugin />
           <LinkPlugin />
           <ListPlugin />
-          <OnChangePlugin onChange={change} />
+          <OnChangePlugin onChange={getEditorState} />
           <AutoCompleteLinkPlugin openLinkInNewTab={openLinkInNewTab} />
           <FloatingLinkEditorPlugin
             editable={editable}

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

@@ -147,30 +147,6 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
     },
     MuiCssBaseline: {
       styleOverrides: (theme) => `
-        ::-webkit-scrollbar {
-          height: ${theme.spacing(1)};
-          width: ${theme.spacing(1)};
-          background-color: transparent;
-        }
-        ::-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;

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

@@ -2,15 +2,12 @@ import { useAtomValue } from 'jotai';
 import { makeStyles } from 'tss-react/mui';
 import { equals } from 'ramda';
 import { useTranslation } from 'react-i18next';
-import dayjs from 'dayjs';
-import utc from 'dayjs/plugin/utc';
-import timezone from 'dayjs/plugin/timezone';
 
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { Typography } from '@mui/material';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 
 import { userAtom } from '@centreon/ui-context';
+import { useDateTimePickerAdapter } from '@centreon/ui';
 
 import DateTimePickerInput from '../../DateTimePickerInput';
 import {
@@ -23,9 +20,6 @@ import ErrorText from './ErrorText';
 import { PickersData, PickersStartEndDateDirection } from './models';
 import { PickersStartEndDateModel } from './usePickersStartEndDate';
 
-dayjs.extend(utc);
-dayjs.extend(timezone);
-
 const useStyles = makeStyles()((theme) => ({
   error: {
     textAlign: 'center'
@@ -110,6 +104,7 @@ const PickersStartEndDate = ({
   direction = PickersStartEndDateDirection.column
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles();
+  const { Adapter } = useDateTimePickerAdapter();
 
   const { locale } = useAtomValue(userAtom);
   const error = useAtomValue(errorTimePeriodAtom);
@@ -131,7 +126,7 @@ const PickersStartEndDate = ({
   return (
     <LocalizationProvider
       adapterLocale={locale.substring(0, 2)}
-      dateAdapter={AdapterDayjs}
+      dateAdapter={Adapter}
     >
       <div className={styleContainer}>
         <PickerDateWithLabel

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

@@ -18,6 +18,8 @@ export interface PickersData {
   getError?: (value: boolean) => void;
   isDisabledEndPicker?: boolean;
   isDisabledStartPicker?: boolean;
+  onCloseEndPicker?: (isClosed: boolean) => void;
+  onCloseStartPicker?: (isClosed: boolean) => void;
   rangeEndDate?: RangeDate;
   rangeStartDate?: RangeDate;
 }

package/src/TimePeriods/DateTimePickerInput.tsx

@@ -1,85 +1,48 @@
-import { useCallback } from 'react';
+import dayjs from 'dayjs';
 
-import dayjs, { Dayjs } from 'dayjs';
-import { useAtomValue } from 'jotai';
-import { equals } from 'ramda';
+import { DateTimePicker } from '@mui/x-date-pickers';
 
-import {
-  DateTimePicker,
-  DateTimePickerProps,
-  LocalizationProvider
-} from '@mui/x-date-pickers';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-
-import { userAtom } from '@centreon/ui-context';
+import { useDateTimePickerAdapter } from '@centreon/ui';
 
 import { CustomTimePeriodProperty } from './models';
 
-interface ChangeDateProps {
-  date: Date;
-  property: CustomTimePeriodProperty | string;
-}
-
 interface Props {
-  changeDate: (props: ChangeDateProps) => void;
+  changeDate: (props) => void;
   date: Date | null;
   desktopMediaQuery?: string;
   disabled?: boolean;
   maxDate?: Date;
   minDate?: Date;
-  minDateTime?: Date;
-  property: CustomTimePeriodProperty | string;
+  property: CustomTimePeriodProperty;
 }
 
 const DateTimePickerInput = ({
   date,
   maxDate,
   minDate,
-  minDateTime,
   property,
   changeDate,
   disabled = false,
-  desktopMediaQuery,
-  ...rest
-}: Props & DateTimePickerProps<dayjs.Dayjs>): JSX.Element => {
-  const desktopPickerMediaQuery =
-    '@media (min-width: 1024px) or (pointer: fine)';
-
-  const { timezone, locale } = useAtomValue(userAtom);
-
-  const isUTC = equals(timezone, 'UTC');
+  desktopMediaQuery
+}: Props): JSX.Element => {
+  const { desktopPickerMediaQuery } = useDateTimePickerAdapter();
 
   const changeTime = (newValue: dayjs.Dayjs | null): void => {
     changeDate({ date: dayjs(newValue).toDate(), property });
   };
 
-  const formatDate = useCallback(
-    (currentDate: Date | null): Dayjs => {
-      return isUTC ? dayjs.utc(currentDate) : dayjs.tz(currentDate, timezone);
-    },
-    [isUTC, timezone]
-  );
-
   return (
-    <LocalizationProvider
-      adapterLocale={locale.substring(0, 2)}
-      dateAdapter={AdapterDayjs}
-      dateLibInstance={dayjs}
-    >
-      <DateTimePicker<dayjs.Dayjs>
-        dayOfWeekFormatter={(dayOfWeek) =>
-          dayOfWeek.substring(0, 2).toLocaleUpperCase()
-        }
-        desktopModeMediaQuery={desktopMediaQuery ?? desktopPickerMediaQuery}
-        disabled={disabled}
-        maxDate={maxDate && formatDate(maxDate)}
-        minDate={minDate && formatDate(minDate)}
-        minDateTime={minDateTime && formatDate(minDateTime)}
-        value={formatDate(date)}
-        onChange={changeTime}
-        {...rest}
-      />
-    </LocalizationProvider>
+    <DateTimePicker<dayjs.Dayjs>
+      dayOfWeekFormatter={(day: string): string =>
+        day.substring(0, 2).toUpperCase()
+      }
+      desktopModeMediaQuery={desktopMediaQuery ?? desktopPickerMediaQuery}
+      disabled={disabled}
+      maxDate={maxDate && dayjs(maxDate)}
+      minDate={minDate && dayjs(minDate)}
+      value={dayjs(date)}
+      onChange={changeTime}
+    />
   );
 };