@centreon/ui 24.8.6 → 24.9.0

package/src/InputField/Select/Autocomplete/Draggable/index.tsx

@@ -1,28 +1,27 @@
-import * as React from 'react';
-
 import {
-  remove,
+  F,
   equals,
-  pipe,
-  type,
-  last,
+  findIndex,
   inc,
-  F,
-  length,
   isEmpty,
   isNil,
+  last,
+  length,
   not,
-  findIndex,
+  pipe,
+  pluck,
   propEq,
-  pluck
+  remove,
+  type
 } from 'ramda';
 
 import { Typography } from '@mui/material';
 
-import { ConnectedAutoCompleteFieldProps } from '../Connected';
 import { Props as SingleAutocompletefieldProps } from '..';
 import TextField from '../../../Text';
+import { ConnectedAutoCompleteFieldProps } from '../Connected';
 
+import { ChangeEvent, useEffect, useState } from 'react';
 import SortableList, { DraggableSelectEntry } from './SortableList';
 
 export interface ItemActionProps {
@@ -61,13 +60,13 @@ const DraggableAutocomplete = (
       | ConnectedAutoCompleteFieldProps<string>
       | SingleAutocompletefieldProps
     )): JSX.Element => {
-    const [selectedValues, setSelectedValues] = React.useState<
+    const [selectedValues, setSelectedValues] = useState<
       Array<DraggableSelectEntry>
     >(initialValues || []);
-    const [totalValues, setTotalValues] = React.useState<number>(
+    const [totalValues, setTotalValues] = useState<number>(
       length(initialValues || [])
     );
-    const [inputText, setInputText] = React.useState<string | null>(null);
+    const [inputText, setInputText] = useState<string | null>(null);
 
     const onChangeSelectedValuesOrder = (newSelectedValues): void => {
       setSelectedValues(newSelectedValues);
@@ -144,7 +143,7 @@ const DraggableAutocomplete = (
       );
     };
 
-    const changeInput = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    const changeInput = (e: ChangeEvent<HTMLInputElement>): void => {
       if (pipe(isNil, not)(e)) {
         setInputText(e.target.value);
       }
@@ -193,7 +192,7 @@ const DraggableAutocomplete = (
       />
     );
 
-    React.useEffect(() => {
+    useEffect(() => {
       if (isNil(initialValues)) {
         return;
       }

package/src/InputField/Select/Autocomplete/Multi/index.tsx

@@ -1,4 +1,4 @@
-import { includes, map, prop, reject, sortBy, toLower, compose } from 'ramda';
+import { compose, includes, map, prop, reject, sortBy, toLower } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
 import { Chip, ChipProps, Tooltip } from '@mui/material';

package/src/InputField/Select/Autocomplete/Popover/index.tsx

@@ -3,8 +3,8 @@ import { useState } from 'react';
 import { equals, isEmpty } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
-import { UseAutocompleteProps } from '@mui/material/useAutocomplete';
 import { Avatar, Chip, useTheme } from '@mui/material';
+import { UseAutocompleteProps } from '@mui/material/useAutocomplete';
 
 import { ThemeMode } from '@centreon/ui-context';
 

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

@@ -1,8 +1,7 @@
-import * as React from 'react';
-
 import EditIcon from '@mui/icons-material/Edit';
 import { InputAdornment } from '@mui/material';
 
+import { useState } from 'react';
 import AutocompleteField from '.';
 
 export default { title: 'InputField/Autocomplete' };
@@ -85,7 +84,7 @@ const AutoSizeAutocompleteField = ({
   endAdornment,
   customPadding
 }: AutoSizeAutocompleteFieldProps): JSX.Element => {
-  const [value, setValue] = React.useState(null);
+  const [value, setValue] = useState(null);
 
   const change = (_, newValue): void => {
     setValue(newValue);

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

@@ -1,14 +1,12 @@
-import * as React from 'react';
-
 import { equals, isEmpty, isNil, pick } from 'ramda';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 
 import {
-  CircularProgress,
-  InputAdornment,
   Autocomplete,
   AutocompleteProps,
+  CircularProgress,
+  InputAdornment,
   useTheme
 } from '@mui/material';
 import { autocompleteClasses } from '@mui/material/Autocomplete';
@@ -16,11 +14,12 @@ import { UseAutocompleteProps } from '@mui/material/useAutocomplete';
 
 import { ThemeMode } from '@centreon/ui-context';
 
-import Option from '../Option';
-import TextField from '../../Text';
+import { ForwardedRef, HTMLAttributes, ReactElement, forwardRef } from 'react';
 import { SelectEntry } from '..';
-import { searchLabel } from '../../translatedLabels';
 import { getNormalizedId } from '../../../utils';
+import TextField from '../../Text';
+import { searchLabel } from '../../translatedLabels';
+import Option from '../Option';
 
 export type Props = {
   autoFocus?: boolean;
@@ -30,7 +29,7 @@ export type Props = {
   dataTestId?: string;
   displayOptionThumbnail?: boolean;
   displayPopupIcon?: boolean;
-  endAdornment?: React.ReactElement;
+  endAdornment?: ReactElement;
   error?: string;
   getOptionItemLabel?: (option) => string;
   hideInput?: boolean;
@@ -141,7 +140,7 @@ type Multiple = boolean;
 type DisableClearable = boolean;
 type FreeSolo = boolean;
 
-const AutocompleteField = React.forwardRef(
+const AutocompleteField = forwardRef(
   (
     {
       options,
@@ -164,7 +163,7 @@ const AutocompleteField = React.forwardRef(
       getOptionItemLabel = (option) => option.name,
       ...autocompleteProps
     }: Props,
-    ref?: React.ForwardedRef<HTMLDivElement>
+    ref?: ForwardedRef<HTMLDivElement>
   ): JSX.Element => {
     const { classes, cx } = useStyles({ hideInput });
     const { t } = useTranslation();
@@ -259,7 +258,7 @@ const AutocompleteField = React.forwardRef(
           return (
             <li
               className={classes.options}
-              {...(props as React.HTMLAttributes<HTMLLIElement>)}
+              {...(props as HTMLAttributes<HTMLLIElement>)}
             >
               <Option
                 thumbnailUrl={displayOptionThumbnail ? option.url : undefined}

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

@@ -1,9 +1,10 @@
 import { useState } from 'react';
 
-import { useTranslation } from 'react-i18next';
 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,
   ClickAwayListener,
@@ -13,11 +14,10 @@ import {
   PopperPlacementType,
   useTheme
 } from '@mui/material';
-import IconReset from '@mui/icons-material/RotateLeft';
 
+import { SelectEntry } from '..';
 import { IconButton } from '../../..';
 import Option from '../Option';
-import { SelectEntry } from '..';
 
 import { labelReset } from './translatedLabels';
 

package/src/InputField/Select/Option.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, RefObject } from 'react';
+import { RefObject, forwardRef } from 'react';
 
 import { equals, isNil } from 'ramda';
 import { makeStyles } from 'tss-react/mui';

package/src/InputField/Select/index.tsx

@@ -2,15 +2,15 @@ import { isNil, propEq } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
 import {
-  Select,
-  MenuItem,
+  Divider,
   FormControl,
-  InputLabel,
-  Theme,
-  SelectProps,
   FormHelperText,
+  InputLabel,
   ListSubheader,
-  Divider
+  MenuItem,
+  Select,
+  SelectProps,
+  Theme
 } from '@mui/material';
 
 import { getNormalizedId } from '../../utils';

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

@@ -1,10 +1,9 @@
-import * as React from 'react';
-
 import { makeStyles } from 'tss-react/mui';
 
-import { Theme } from '@mui/material';
 import AbcIcon from '@mui/icons-material/Abc';
+import { Theme } from '@mui/material';
 
+import { useState } from 'react';
 import TextField from '.';
 
 const useStyles = makeStyles()((theme: Theme) => ({
@@ -79,7 +78,7 @@ export const autoSizeCustomPadding = (): JSX.Element => (
 );
 
 const ControlledTextFieldWithAutoSize = (): JSX.Element => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = useState('');
 
   const change = (event): void => {
     setValue(event.target.value);

package/src/InputField/Text/index.tsx

@@ -4,13 +4,13 @@ import { equals, isNil } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
 import {
-  TextField as MuiTextField,
+  Box,
   InputAdornment,
+  TextField as MuiTextField,
   TextFieldProps,
   Theme,
   Tooltip,
-  Typography,
-  Box
+  Typography
 } from '@mui/material';
 
 import { getNormalizedId } from '../../utils';

package/src/InputField/Text/useAutoSize.ts

@@ -1,62 +1,62 @@
-import { useState, useRef, useEffect, RefObject, ChangeEvent } from 'react';
-
-import { useTheme } from '@mui/material';
-
-interface UseAutoSizeProps {
-  autoSize: boolean;
-  autoSizeCustomPadding?: number;
-  autoSizeDefaultWidth: number;
-  value?: string;
-}
-
-interface UseAutoSizeState {
-  changeInputValue: (
-    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ) => void;
-  innerValue: string;
-  inputRef: RefObject<HTMLDivElement>;
-  width: string;
-}
-
-const defaultPaddingTotal = 4.5;
-
-const useAutoSize = ({
-  autoSize,
-  autoSizeDefaultWidth,
-  value,
-  autoSizeCustomPadding
-}: UseAutoSizeProps): UseAutoSizeState => {
-  const [innerValue, setInnerValue] = useState(value || '');
-  const [width, setWidth] = useState(autoSizeDefaultWidth);
-  const inputRef = useRef();
-  const theme = useTheme();
-
-  const changeInputValue = (
-    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ): void => {
-    setInnerValue(event.target.value);
-  };
-
-  const textFieldValue = autoSize && (value || innerValue);
-
-  useEffect(() => {
-    if (!autoSize) {
-      return;
-    }
-
-    const newWidth = inputRef.current?.getBoundingClientRect().width || 0;
-
-    setWidth(newWidth < autoSizeDefaultWidth ? autoSizeDefaultWidth : newWidth);
-  }, [textFieldValue]);
-
-  return {
-    changeInputValue,
-    innerValue,
-    inputRef,
-    width: `calc(${width}px + ${theme.spacing(
-      autoSizeCustomPadding || defaultPaddingTotal
-    )})`
-  };
-};
-
-export default useAutoSize;
+import { ChangeEvent, RefObject, useEffect, useRef, useState } from 'react';
+
+import { useTheme } from '@mui/material';
+
+interface UseAutoSizeProps {
+  autoSize: boolean;
+  autoSizeCustomPadding?: number;
+  autoSizeDefaultWidth: number;
+  value?: string;
+}
+
+interface UseAutoSizeState {
+  changeInputValue: (
+    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => void;
+  innerValue: string;
+  inputRef: RefObject<HTMLDivElement>;
+  width: string;
+}
+
+const defaultPaddingTotal = 4.5;
+
+const useAutoSize = ({
+  autoSize,
+  autoSizeDefaultWidth,
+  value,
+  autoSizeCustomPadding
+}: UseAutoSizeProps): UseAutoSizeState => {
+  const [innerValue, setInnerValue] = useState(value || '');
+  const [width, setWidth] = useState(autoSizeDefaultWidth);
+  const inputRef = useRef();
+  const theme = useTheme();
+
+  const changeInputValue = (
+    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ): void => {
+    setInnerValue(event.target.value);
+  };
+
+  const textFieldValue = autoSize && (value || innerValue);
+
+  useEffect(() => {
+    if (!autoSize) {
+      return;
+    }
+
+    const newWidth = inputRef.current?.getBoundingClientRect().width || 0;
+
+    setWidth(newWidth < autoSizeDefaultWidth ? autoSizeDefaultWidth : newWidth);
+  }, [textFieldValue]);
+
+  return {
+    changeInputValue,
+    innerValue,
+    inputRef,
+    width: `calc(${width}px + ${theme.spacing(
+      autoSizeCustomPadding || defaultPaddingTotal
+    )})`
+  };
+};
+
+export default useAutoSize;

package/src/LicenseMessage/index.tsx

@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 
-import { alpha, Paper, Typography } from '@mui/material';
+import { Paper, Typography, alpha } from '@mui/material';
 
 import { labelInvalidLicense } from './translatedLabels';
 

package/src/Listing/ActionBar/ColumnMultiSelect.tsx

@@ -1,13 +1,13 @@
-import { useTranslation } from 'react-i18next';
 import { isNil, prop } from 'ramda';
+import { useTranslation } from 'react-i18next';
 
 import ColumnIcon from '@mui/icons-material/ViewColumn';
 
-import { getVisibleColumns, Props as ListingProps } from '..';
-import IconPopoverMultiSelect from '../../InputField/Select/IconPopover';
-import { labelAddColumns } from '../translatedLabels';
+import { Props as ListingProps, getVisibleColumns } from '..';
 import { SelectEntry } from '../../InputField/Select';
+import IconPopoverMultiSelect from '../../InputField/Select/IconPopover';
 import { Column } from '../models';
+import { labelAddColumns } from '../translatedLabels';
 
 type Props = Pick<
   ListingProps<unknown>,

package/src/Listing/ActionBar/PaginationActions.tsx

@@ -1,11 +1,11 @@
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 
-import IconButton from '@mui/material/IconButton';
 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 {

package/src/Listing/ActionBar/index.tsx

@@ -1,21 +1,21 @@
-import { useTranslation } from 'react-i18next';
+import { useAtomValue } from 'jotai';
 import { equals, isEmpty, isNil, not, pick } from 'ramda';
+import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
-import { useAtomValue } from 'jotai';
 
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
 import Divider from '@mui/material/Divider';
 
-import { userAtom, ListingVariant } from '@centreon/ui-context';
+import { ListingVariant, userAtom } from '@centreon/ui-context';
 
-import { ListingProps, IconButton } from '../..';
-import { labelOf, labelRowsPerPage } from '../translatedLabels';
+import { IconButton, ListingProps } from '../..';
 import { useMemoComponent } from '../../utils';
+import { labelOf, labelRowsPerPage } from '../translatedLabels';
 
+import ColumnMultiSelect from './ColumnMultiSelect';
 import StyledPagination from './Pagination';
 import PaginationActions from './PaginationActions';
-import ColumnMultiSelect from './ColumnMultiSelect';
 
 interface StyleProps {
   marginWidthTableListing: number;

package/src/Listing/Cell/DataCell.tsx

@@ -14,8 +14,8 @@ import {
 } from '../models';
 import useStyleTable from '../useStyleTable';
 
-import EllipsisTypography from './EllipsisTypography';
 import { useStyles } from './DataCell.styles';
+import EllipsisTypography from './EllipsisTypography';
 
 import Cell from '.';
 
@@ -280,4 +280,4 @@ const MemoizedDataCell = memo<Props>(
 );
 
 export default MemoizedDataCell;
-export { useStyles, Props };
+export { useStyles, type Props };

package/src/Listing/Cell/EllipsisTypography.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 import { makeStyles } from 'tss-react/mui';
 
 import { Typography } from '@mui/material';

package/src/Listing/Cell/index.tsx

@@ -1,25 +1,24 @@
-import * as React from 'react';
-
+import { useAtom } from 'jotai';
 import { append, equals, includes, isNil, omit, reject } from 'ramda';
-import { makeStyles } from 'tss-react/mui';
 import { CSSObject } from 'tss-react';
-import { useAtom } from 'jotai';
+import { makeStyles } from 'tss-react/mui';
 
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import {
-  alpha,
   TableCell,
   TableCellBaseProps,
   TableCellProps,
-  Theme
+  Theme,
+  alpha
 } from '@mui/material';
 
 import { ListingVariant } from '@centreon/ui-context';
 
 import { IconButton } from '../..';
-import { getTextStyleByViewMode } from '../useStyleTable';
 import { subItemsPivotsAtom } from '../tableAtoms';
+import { getTextStyleByViewMode } from '../useStyleTable';
 
+import { ElementType } from 'react';
 import { Props as DataCellProps } from './DataCell';
 
 interface GetBackgroundColorProps extends Omit<Props, 'isRowHighlighted'> {
@@ -182,7 +181,7 @@ const Cell = ({
       classes={{
         root: cx(classes.root)
       }}
-      component={'div' as unknown as React.ElementType<TableCellBaseProps>}
+      component={'div' as unknown as ElementType<TableCellBaseProps>}
       {...omit(
         [
           'isRowHovered',

package/src/Listing/Checkbox.tsx

@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui';
 
-import { Checkbox as MuiCheckbox, CheckboxProps } from '@mui/material';
+import { CheckboxProps, Checkbox as MuiCheckbox } from '@mui/material';
 
 const useStyles = makeStyles()({
   container: {

package/src/Listing/EmptyResult/EmptyResult.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { EmptyRow } from '../Row/EmptyRow';
 
 interface EmptyResultProps {

package/src/Listing/Header/Cell/ListingHeaderCell.styles.ts

@@ -68,4 +68,4 @@ const useStyles = makeStyles<StylesProps>()(
   })
 );
 
-export { useStyles, StylesProps };
+export { useStyles, type StylesProps };

package/src/Listing/Header/Cell/ListingHeaderCell.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 import { always, and, equals, ifElse, isNil } from 'ramda';
 
 import {
@@ -11,8 +9,8 @@ import {
 
 import { Props as ListingProps } from '../..';
 import { Column } from '../../models';
-import HeaderLabel from '../_internals/Label';
 import { DraggableIconButton } from '../_internals/DraggableIconButton';
+import HeaderLabel from '../_internals/Label';
 
 import { StylesProps, useStyles } from './ListingHeaderCell.styles';
 

package/src/Listing/Header/Cell/SelectActionListingHeaderCell.tsx

@@ -1,15 +1,13 @@
-import React from 'react';
-
 import { equals, isEmpty, not } from 'ramda';
 
-import { TableCell, TableCellBaseProps } from '@mui/material';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import { TableCell, TableCellBaseProps } from '@mui/material';
 
-import Checkbox from '../../Checkbox';
 import PopoverMenu from '../../../PopoverMenu';
+import Checkbox from '../../Checkbox';
+import { PredefinedRowSelection } from '../../models';
 import { labelPredefinedRowsSelectionMenu } from '../../translatedLabels';
 import PredefinedSelectionList from '../_internals/PredefinedSelectionList';
-import { PredefinedRowSelection } from '../../models';
 
 import { useStyles } from './SelectActionListingHeaderCell.styles';
 

package/src/Listing/Header/ListingHeader.tsx

@@ -1,6 +1,4 @@
-import * as React from 'react';
-
-import { closestCenter, DraggableSyntheticListeners } from '@dnd-kit/core';
+import { DraggableSyntheticListeners, closestCenter } from '@dnd-kit/core';
 import { horizontalListSortingStrategy } from '@dnd-kit/sortable';
 import { equals, find, map, pick, propEq } from 'ramda';
 
@@ -8,16 +6,17 @@ import { TableHead, TableRow } from '@mui/material';
 
 import { ListingVariant } from '@centreon/ui-context';
 
-import { getVisibleColumns, Props as ListingProps } from '..';
+import { Props as ListingProps, getVisibleColumns } from '..';
 import SortableItems from '../../SortableItems';
 import { Column } from '../models';
 
+import { memo, useCallback } from 'react';
 import ListingHeaderCell from './Cell/ListingHeaderCell';
-import { useStyles } from './ListingHeader.styles';
 import {
   SelectActionListingHeaderCell,
   SelectActionListingHeaderCellProps
 } from './Cell/SelectActionListingHeaderCell';
+import { useStyles } from './ListingHeader.styles';
 
 type Props = Pick<
   ListingProps<unknown>,
@@ -74,7 +73,7 @@ const ListingHeader = ({
     return find(propEq(id, 'id'), columns) as Column;
   };
 
-  const Content = React.useCallback(
+  const Content = useCallback(
     ({
       isInDragOverlay,
       listeners,
@@ -145,7 +144,7 @@ const columnMemoProps = [
   'type'
 ];
 
-const MemoizedListingHeader = React.memo<Props>(
+const MemoizedListingHeader = memo<Props>(
   ListingHeader,
   (prevProps, nextProps) =>
     equals(prevProps.sortOrder, nextProps.sortOrder) &&

package/src/Listing/Header/_internals/DraggableIconButton.tsx

@@ -1,9 +1,7 @@
-import * as React from 'react';
-
 import { useTranslation } from 'react-i18next';
 
-import { SvgIcon, IconButton as MuiIconButton } from '@mui/material';
 import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
+import { IconButton as MuiIconButton, SvgIcon } from '@mui/material';
 
 import { labelDragHandle } from '../../translatedLabels';