@centreon/ui 26.3.4 → 26.3.6

package/src/InputField/Select/IconPopover/index.tsx

@@ -1,9 +1,3 @@
-import { useState } from 'react';
-
-import { find, isNil, pipe, propEq, reject } from 'ramda';
-import { useTranslation } from 'react-i18next';
-import { makeStyles } from 'tss-react/mui';
-
 import IconReset from '@mui/icons-material/RotateLeft';
 import {
   Button,
@@ -11,14 +5,18 @@ import {
   MenuItem,
   Paper,
   Popper,
-  PopperPlacementType,
+  type PopperPlacementType,
   useTheme
 } from '@mui/material';
 
-import { SelectEntry } from '..';
+import { find, isNil, pipe, propEq, reject } from 'ramda';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { makeStyles } from 'tss-react/mui';
+
 import { IconButton } from '../../..';
+import type { SelectEntry } from '..';
 import Option from '../Option';
-
 import { labelReset } from './translatedLabels';
 
 const useStyles = makeStyles()((theme) => ({
@@ -91,30 +89,30 @@ const IconPopoverMultiAutocomplete = ({
       <div>
         <IconButton
           ariaLabel={title}
+          onClick={toggle}
           size="large"
           title={title}
-          onClick={toggle}
         >
           {icon}
         </IconButton>
         <Popper
           anchorEl={anchorEl}
           nonce={undefined}
+          onResize={(): undefined => undefined}
+          onResizeCapture={(): undefined => undefined}
           open={isOpen}
           placement={popperPlacement}
           style={{ zIndex: theme.zIndex.tooltip }}
-          onResize={(): undefined => undefined}
-          onResizeCapture={(): undefined => undefined}
         >
           <Paper>
             {!isNil(onReset) && (
               <Button
-                fullWidth
                 className={classes.button}
                 color="primary"
+                fullWidth
+                onClick={onReset}
                 size="small"
                 startIcon={<IconReset />}
-                onClick={onReset}
               >
                 {t(labelReset)}
               </Button>
@@ -126,8 +124,8 @@ const IconPopoverMultiAutocomplete = ({
                 <MenuItem
                   disabled={option.disabled || false}
                   key={id}
-                  value={name}
                   onClick={(): void => unSelect(option)}
+                  value={name}
                 >
                   <Option checkboxSelected={isSelected(id)}>{name}</Option>
                 </MenuItem>

package/src/InputField/Select/Option.tsx

@@ -1,12 +1,11 @@
-import { ReactElement, RefObject, forwardRef } from 'react';
-
-import { equals, isNil } from 'ramda';
-import { makeStyles } from 'tss-react/mui';
-
 import { Checkbox, Stack, Typography } from '@mui/material';
 
 import { ThemeMode } from '@centreon/ui-context';
 
+import { equals, isNil } from 'ramda';
+import { forwardRef, type ReactElement, type RefObject } from 'react';
+import { makeStyles } from 'tss-react/mui';
+
 const useStyles = makeStyles()((theme) => ({
   checkbox: {
     marginRight: theme.spacing(1),

package/src/InputField/Select/index.stories.tsx

@@ -21,9 +21,9 @@ export const withThreeOptions = (): JSX.Element => {
   return (
     <SelectField
       label="name"
+      onChange={changeSelectedOption}
       options={options}
       selectedOptionId={selectedOptionId}
-      onChange={changeSelectedOption}
     />
   );
 };
@@ -32,35 +32,36 @@ export const withError = (): JSX.Element => (
   <SelectField
     error="Something went wrong"
     label="name"
+    onChange={(): void => undefined}
     options={[{ id: 0, name: 'Selected' }]}
     selectedOptionId={0}
-    onChange={(): void => undefined}
   />
 );
 
 export const compact = (): JSX.Element => (
   <SelectField
     compact
+    onChange={(): void => undefined}
     options={[{ id: 0, name: 'Tiny' }]}
     selectedOptionId={0}
-    onChange={(): void => undefined}
   />
 );
 
 export const openWithColors = (): JSX.Element => (
   <SelectField
+    onChange={(): void => undefined}
     open
     options={[
       { color: 'red', id: 0, name: 'Red' },
       { color: 'yellow', id: 1, name: 'Yellow' }
     ]}
     selectedOptionId={0}
-    onChange={(): void => undefined}
   />
 );
 
 export const openWithHeader = (): JSX.Element => (
   <SelectField
+    onChange={(): void => undefined}
     open
     options={[
       {
@@ -71,6 +72,5 @@ export const openWithHeader = (): JSX.Element => (
       { id: 1, name: 'Item' }
     ]}
     selectedOptionId={0}
-    onChange={(): void => undefined}
   />
 );

package/src/InputField/Select/index.tsx

@@ -1,21 +1,20 @@
-import { isNil, propEq } from 'ramda';
-import { makeStyles } from 'tss-react/mui';
-
 import {
   Divider,
   FormControl,
-  FormControlProps,
+  type FormControlProps,
   FormHelperText,
   InputLabel,
   ListSubheader,
   MenuItem,
   Select,
-  SelectProps,
-  Theme
+  type SelectProps,
+  type Theme
 } from '@mui/material';
 
-import { getNormalizedId } from '../../utils';
+import { isNil, propEq } from 'ramda';
+import { makeStyles } from 'tss-react/mui';
 
+import { getNormalizedId } from '../../utils';
 import Option from './Option';
 
 const useStyles = makeStyles()((theme: Theme) => ({
@@ -101,6 +100,11 @@ const SelectField = ({
       <Select
         displayEmpty
         fullWidth={fullWidth}
+        label={label}
+        onChange={changeOption}
+        renderValue={(id): string => {
+          return getOption(id)?.name;
+        }}
         slotProps={{
           input: {
             'aria-label': ariaLabel,
@@ -113,12 +117,7 @@ const SelectField = ({
             ...inputProps
           }
         }}
-        label={label}
-        renderValue={(id): string => {
-          return getOption(id)?.name;
-        }}
         value={selectedOptionId}
-        onChange={changeOption}
         {...props}
       >
         {options

package/src/InputField/Text/index.stories.tsx

@@ -1,9 +1,9 @@
-import { makeStyles } from 'tss-react/mui';
-
 import AbcIcon from '@mui/icons-material/Abc';
-import { Theme } from '@mui/material';
+import type { Theme } from '@mui/material';
 
 import { useState } from 'react';
+import { makeStyles } from 'tss-react/mui';
+
 import TextField from '.';
 
 const useStyles = makeStyles()((theme: Theme) => ({
@@ -53,7 +53,7 @@ export const defaultValue = (): JSX.Element => (
 );
 
 export const transparent = (): JSX.Element => (
-  <TextField transparent placeholder="Transparent" />
+  <TextField placeholder="Transparent" transparent />
 );
 
 const CustomTextField = (): JSX.Element => {
@@ -88,9 +88,9 @@ const ControlledTextFieldWithAutoSize = (): JSX.Element => {
     <TextField
       autoSize
       autoSizeDefaultWidth={60}
+      onChange={change}
       placeholder="Auto size"
       value={value}
-      onChange={change}
     />
   );
 };
@@ -102,9 +102,9 @@ export const AutoSizeControlled = (): JSX.Element => (
 export const autoSizeWithEndAdornment = (): JSX.Element => (
   <TextField
     autoSize
-    EndAdornment={AbcIcon}
     autoSizeCustomPadding={10}
     autoSizeDefaultWidth={60}
+    EndAdornment={AbcIcon}
     placeholder="Auto size"
   />
 );

package/src/InputField/Text/index.tsx

@@ -1,22 +1,20 @@
-import { forwardRef, useCallback } from 'react';
-
-import { equals, isNil } from 'ramda';
-import { makeStyles } from 'tss-react/mui';
-
 import {
   Box,
   InputAdornment,
-  InputProps,
+  type InputProps,
   TextField as MuiTextField,
-  TextFieldProps,
-  TextFieldSlotsAndSlotProps,
-  Theme,
+  type TextFieldProps,
+  type TextFieldSlotsAndSlotProps,
+  type Theme,
   Tooltip,
   Typography
 } from '@mui/material';
 
-import { getNormalizedId } from '../../utils';
+import { equals, isNil } from 'ramda';
+import { forwardRef, useCallback } from 'react';
+import { makeStyles } from 'tss-react/mui';
 
+import { getNormalizedId } from '../../utils';
 import useAutoSize from './useAutoSize';
 
 const useStyles = makeStyles()((theme: Theme) => ({
@@ -165,18 +163,18 @@ const TextField = forwardRef(
             helperText={displayErrorInTooltip ? undefined : error}
             id={getNormalizedId(dataTestId || '')}
             label={label}
+            onChange={changeInputValue}
             ref={ref}
             size={size || 'small'}
-            onChange={changeInputValue}
             {...getValueProps()}
             className={classes.textField}
             required={required}
-            sx={{
-              width: autoSize ? width : undefined,
-              ...rest?.sx
-            }}
-            type={type}
             slotProps={{
+              htmlInput: {
+                'aria-label': ariaLabel,
+                'data-testid': dataTestId,
+                ...textFieldSlotsAndSlotProps?.slotProps?.htmlInput
+              },
               input: {
                 className: cx(
                   classes.inputBase,
@@ -210,13 +208,13 @@ const TextField = forwardRef(
                     equals(size, 'compact') && classes.compactLabelShrink
                   )
                 }
-              },
-              htmlInput: {
-                'aria-label': ariaLabel,
-                'data-testid': dataTestId,
-                ...textFieldSlotsAndSlotProps?.slotProps?.htmlInput
               }
             }}
+            sx={{
+              width: autoSize ? width : undefined,
+              ...rest?.sx
+            }}
+            type={type}
             {...rest}
           />
         </Tooltip>

package/src/InputField/Text/useAutoSize.ts

@@ -1,7 +1,13 @@
-import { ChangeEvent, RefObject, useEffect, useRef, useState } from 'react';
-
 import { useTheme } from '@mui/material';
 
+import {
+  type ChangeEvent,
+  type RefObject,
+  useEffect,
+  useRef,
+  useState
+} from 'react';
+
 interface UseAutoSizeProps {
   autoSize: boolean;
   autoSizeCustomPadding?: number;
@@ -37,7 +43,7 @@ const useAutoSize = ({
     setInnerValue(event.target.value);
   };
 
-  const textFieldValue = autoSize && (value || innerValue);
+  const _textFieldValue = autoSize && (value || innerValue);
 
   useEffect(() => {
     if (!autoSize) {
@@ -47,7 +53,7 @@ const useAutoSize = ({
     const newWidth = inputRef.current?.getBoundingClientRect().width || 0;
 
     setWidth(newWidth < autoSizeDefaultWidth ? autoSizeDefaultWidth : newWidth);
-  }, [textFieldValue]);
+  }, [autoSize, autoSizeDefaultWidth]);
 
   return {
     changeInputValue,

package/src/LicenseMessage/index.stories.tsx

@@ -1,7 +1,7 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { makeStyles } from 'tss-react/mui';
+import type { Theme } from '@mui/material';
 
-import { Theme } from '@mui/material';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { makeStyles } from 'tss-react/mui';
 
 import LicenseMessage from '.';
 

package/src/LicenseMessage/index.tsx

@@ -1,8 +1,8 @@
+import { alpha, Paper, Typography } from '@mui/material';
+
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 
-import { Paper, Typography, alpha } from '@mui/material';
-
 import { labelInvalidLicense } from './translatedLabels';
 
 const useStyles = makeStyles()((theme) => ({

package/src/Listing/ActionBar/ColumnMultiSelect.tsx

@@ -1,12 +1,12 @@
+import ColumnIcon from '@mui/icons-material/ViewColumn';
+
 import { isNil, prop } from 'ramda';
 import { useTranslation } from 'react-i18next';
 
-import ColumnIcon from '@mui/icons-material/ViewColumn';
-
-import { Props as ListingProps, getVisibleColumns } from '..';
-import { SelectEntry } from '../../InputField/Select';
+import type { SelectEntry } from '../../InputField/Select';
 import IconPopoverMultiSelect from '../../InputField/Select/IconPopover';
-import { Column } from '../models';
+import { getVisibleColumns, type Props as ListingProps } from '..';
+import type { Column } from '../models';
 import { labelAddColumns } from '../translatedLabels';
 
 type Props = Pick<
@@ -41,12 +41,12 @@ const ColumnMultiSelect = ({
   return (
     <IconPopoverMultiSelect
       icon={<ColumnIcon />}
+      onChange={selectColumnIds}
+      onReset={onResetColumns}
       options={toSelectEntries(columns)}
       popperPlacement="bottom-end"
       title={t(labelAddColumns)}
       value={toSelectEntries(visibleColumns)}
-      onChange={selectColumnIds}
-      onReset={onResetColumns}
     />
   );
 };

package/src/Listing/ActionBar/Pagination.tsx

@@ -1,8 +1,7 @@
-import { memo } from 'react';
+import TablePagination from '@mui/material/TablePagination';
 
 import { equals } from 'ramda';
-
-import TablePagination from '@mui/material/TablePagination';
+import { memo } from 'react';
 
 const Pagination = (props): JSX.Element => (
   <TablePagination

package/src/Listing/ActionBar/PaginationActions.tsx

@@ -1,11 +1,11 @@
-import { useTranslation } from 'react-i18next';
-
 import FirstPageIcon from '@mui/icons-material/FirstPage';
 import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
 import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
 import LastPageIcon from '@mui/icons-material/LastPage';
 import IconButton from '@mui/material/IconButton';
-import { TablePaginationActionsProps } from '@mui/material/TablePagination/TablePaginationActions';
+import type { TablePaginationActionsProps } from '@mui/material/TablePagination/TablePaginationActions';
+
+import { useTranslation } from 'react-i18next';
 
 import {
   labelFirstPage,
@@ -48,32 +48,32 @@ const PaginationActions = ({
       <IconButton
         aria-label={t(labelFirstPage) || ''}
         disabled={isFirstPage}
-        size="large"
         onClick={changeToFirstPage}
+        size="large"
       >
         <FirstPageIcon />
       </IconButton>
       <IconButton
         aria-label={t(labelPreviousPage) || ''}
         disabled={isFirstPage}
-        size="large"
         onClick={changeToPreviousPage}
+        size="large"
       >
         <KeyboardArrowLeft />
       </IconButton>
       <IconButton
         aria-label={t(labelNextPage) || ''}
         disabled={isLastPage}
-        size="large"
         onClick={changeToNextPage}
+        size="large"
       >
         <KeyboardArrowRight />
       </IconButton>
       <IconButton
         aria-label={t(labelLastPage) || ''}
         disabled={isLastPage}
-        size="large"
         onClick={changeToLastPage}
+        size="large"
       >
         <LastPageIcon />
       </IconButton>

package/src/Listing/ActionBar/index.tsx

@@ -1,18 +1,17 @@
-import { useAtomValue } from 'jotai';
-import { equals, isEmpty, isNil, not, pick } from 'ramda';
-import { useTranslation } from 'react-i18next';
-import { makeStyles } from 'tss-react/mui';
-
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
 import Divider from '@mui/material/Divider';
 
 import { ListingVariant, userAtom } from '@centreon/ui-context';
 
-import { IconButton, ListingProps } from '../..';
+import { useAtomValue } from 'jotai';
+import { equals, isEmpty, isNil, not, pick } from 'ramda';
+import { useTranslation } from 'react-i18next';
+import { makeStyles } from 'tss-react/mui';
+
+import { IconButton, type ListingProps } from '../..';
 import { useMemoComponent } from '../../utils';
 import { labelOf, labelRowsPerPage } from '../translatedLabels';
-
 import ColumnMultiSelect from './ColumnMultiSelect';
 import StyledPagination from './Pagination';
 import PaginationActions from './PaginationActions';
@@ -24,9 +23,6 @@ interface StyleProps {
 
 const useStyles = makeStyles<StyleProps>()(
   (theme, { width, marginWidthTableListing }) => ({
-    ModeViewer: {
-      paddingLeft: theme.spacing(1)
-    },
     actions: {
       flex: 1,
       padding: theme.spacing(1, 1, 1, 0)
@@ -45,6 +41,9 @@ const useStyles = makeStyles<StyleProps>()(
       display: 'flex',
       flexDirection: 'column'
     },
+    ModeViewer: {
+      paddingLeft: theme.spacing(1)
+    },
     mode: {
       flexDirection: 'column-reverse'
     },
@@ -149,9 +148,9 @@ const MemoListingActionBar = ({
                 }
                 data-testid={viewerModeConfiguration?.testId}
                 disabled={viewerModeConfiguration?.disabled}
+                onClick={viewerModeConfiguration?.onClick}
                 size="large"
                 title={viewerModeConfiguration?.title}
-                onClick={viewerModeConfiguration?.onClick}
               >
                 <div
                   className={cx(
@@ -185,12 +184,6 @@ const MemoListingActionBar = ({
           {paginated && (
             <StyledPagination
               ActionsComponent={PaginationActions}
-              SelectProps={{
-                MenuProps: {
-                  className: classes.selectMenu
-                },
-                id: labelRowsPerPage
-              }}
               className={cx(classes.pagination, customPaginationClassName, {
                 [classes.moving]: moveTablePagination
               })}
@@ -198,11 +191,17 @@ const MemoListingActionBar = ({
               count={totalRows}
               labelDisplayedRows={labelDisplayedRows}
               labelRowsPerPage={null}
+              onPageChange={changePage}
+              onRowsPerPageChange={changeRowPerPage}
               page={currentPage}
               rowsPerPage={limit}
               rowsPerPageOptions={[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]}
-              onPageChange={changePage}
-              onRowsPerPageChange={changeRowPerPage}
+              SelectProps={{
+                id: labelRowsPerPage,
+                MenuProps: {
+                  className: classes.selectMenu
+                }
+              }}
             />
           )}
         </div>
@@ -266,14 +265,14 @@ const ListingActionBar = ({
       limit={limit}
       listingVariant={listingVariant}
       moveTablePagination={moveTablePagination}
-      paginated={paginated}
-      totalRows={totalRows}
-      viewerModeConfiguration={viewerModeConfiguration}
-      widthToMoveTablePagination={widthToMoveTablePagination}
       onLimitChange={onLimitChange}
       onPaginate={onPaginate}
       onResetColumns={onResetColumns}
       onSelectColumns={onSelectColumns}
+      paginated={paginated}
+      totalRows={totalRows}
+      viewerModeConfiguration={viewerModeConfiguration}
+      widthToMoveTablePagination={widthToMoveTablePagination}
     />
   );
 };

package/src/Listing/Cell/DataCell.tsx

@@ -1,22 +1,19 @@
-import { memo } from 'react';
-
-import { equals, props } from 'ramda';
-
 import { Tooltip } from '@mui/material';
 
-import { ListingVariant } from '@centreon/ui-context';
+import type { ListingVariant } from '@centreon/ui-context';
+
+import { equals, props } from 'ramda';
+import { memo } from 'react';
 
 import {
-  Column,
+  type Column,
   ColumnType,
-  ComponentColumnProps,
-  RowColorCondition
+  type ComponentColumnProps,
+  type RowColorCondition
 } from '../models';
 import useStyleTable from '../useStyleTable';
-
-import EllipsisTypography from './EllipsisTypography';
-
 import Cell from '.';
+import EllipsisTypography from './EllipsisTypography';
 
 interface Props {
   column: Column;
@@ -75,8 +72,8 @@ const DataCell = ({
           dataStyle={dataStyle}
           disableRowCondition={disableRowCondition(row)}
           formattedString={formattedString}
-          isRowHovered={isRowHovered}
           isRowHighlighted={isRowHighlighted}
+          isRowHovered={isRowHovered}
         />
       );
 
@@ -129,9 +126,6 @@ const DataCell = ({
           className={`flex align-items h-full overflow-hidden whitespace-nowrap ${clickable && 'cursor-default'}`}
           isRowHighlighted={isRowHighlighted}
           listingVariant={listingVariant}
-          style={{
-            alignItems: align
-          }}
           onClick={(e): void => {
             if (!clickable) {
               return;
@@ -139,6 +133,9 @@ const DataCell = ({
             e.preventDefault();
             e.stopPropagation();
           }}
+          style={{
+            alignItems: align
+          }}
           {...commonCellProps}
         >
           <Component
@@ -154,8 +151,8 @@ const DataCell = ({
                   dataStyle={dataStyle}
                   disableRowCondition={disableRowCondition(row)}
                   formattedString={formattedString}
-                  isRowHovered={isRowHovered}
                   isRowHighlighted={isRowHighlighted}
+                  isRowHovered={isRowHovered}
                 />
               );
             }}

package/src/Listing/Cell/EllipsisTypography.tsx

@@ -1,6 +1,6 @@
 import { Typography } from '@mui/material';
 
-import { TableStyleAtom as TableStyle } from '../models';
+import type { TableStyleAtom as TableStyle } from '../models';
 
 interface Ellipsis {
   className?: string;