@centreon/ui 24.4.22 → 24.4.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.4.22",
+  "version": "24.4.24",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Button/Save/index.tsx

@@ -2,7 +2,7 @@ import { any, isEmpty, isNil, not, or, pipe } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
 import { Theme, Tooltip, TypographyProps } from '@mui/material';
-import { LoadingButton } from '@mui/lab';
+import { LoadingButton, LoadingButtonProps } from '@mui/lab';
 
 import { getNormalizedId } from '../../utils';
 
@@ -15,7 +15,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
   }
 }));
 
-interface Props extends Record<string, unknown> {
+interface Props {
   className?: string;
   labelLoading?: string;
   labelProps?: TypographyProps;
@@ -50,7 +50,7 @@ const SaveButton = ({
   startIcon = true,
   labelProps,
   ...rest
-}: Props): JSX.Element => {
+}: Props & LoadingButtonProps): JSX.Element => {
   const { classes, cx } = useStyles();
   const hasLabel = hasValue([labelLoading, labelSave, labelSucceeded]);
 

package/src/Dialog/index.tsx

@@ -43,7 +43,7 @@ export type Props = {
   dialogTitleClassName?: string;
   labelCancel?: string | null;
   labelConfirm?: string | null;
-  labelTitle?: string | null;
+  labelTitle?: ReactNode;
   onCancel?: () => void;
   onClose?: () => void;
   onConfirm: (event, value?) => void;

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

@@ -141,126 +141,132 @@ type Multiple = boolean;
 type DisableClearable = boolean;
 type FreeSolo = boolean;
 
-const AutocompleteField = ({
-  options,
-  label,
-  placeholder,
-  loading = false,
-  onTextChange = (): void => undefined,
-  endAdornment = undefined,
-  inputValue,
-  displayOptionThumbnail = false,
-  required = false,
-  error,
-  displayPopupIcon = true,
-  autoFocus = false,
-  hideInput = false,
-  dataTestId,
-  autoSize = false,
-  autoSizeDefaultWidth = 0,
-  autoSizeCustomPadding,
-  getOptionItemLabel = (option) => option.name,
-  ...autocompleteProps
-}: Props): JSX.Element => {
-  const { classes, cx } = useStyles({ hideInput });
-  const { t } = useTranslation();
-  const theme = useTheme();
+const AutocompleteField = React.forwardRef(
+  (
+    {
+      options,
+      label,
+      placeholder,
+      loading = false,
+      onTextChange = (): void => undefined,
+      endAdornment = undefined,
+      inputValue,
+      displayOptionThumbnail = false,
+      required = false,
+      error,
+      displayPopupIcon = true,
+      autoFocus = false,
+      hideInput = false,
+      dataTestId,
+      autoSize = false,
+      autoSizeDefaultWidth = 0,
+      autoSizeCustomPadding,
+      getOptionItemLabel = (option) => option.name,
+      ...autocompleteProps
+    }: Props,
+    ref?: React.ForwardedRef<HTMLDivElement>
+  ): JSX.Element => {
+    const { classes, cx } = useStyles({ hideInput });
+    const { t } = useTranslation();
+    const theme = useTheme();
 
-  const areSelectEntriesEqual = (option, value): boolean => {
-    const identifyingProps = ['id', 'name'];
+    const areSelectEntriesEqual = (option, value): boolean => {
+      const identifyingProps = ['id', 'name'];
 
-    return equals(
-      pick(identifyingProps, option),
-      pick(identifyingProps, value)
+      return equals(
+        pick(identifyingProps, option),
+        pick(identifyingProps, value)
+      );
+    };
+
+    const renderInput = (params): JSX.Element => (
+      <TextField
+        {...params}
+        InputLabelProps={{
+          classes: {
+            marginDense: classes.inputLabel,
+            shrink: classes.inputLabelShrink
+          }
+        }}
+        InputProps={{
+          ...params.InputProps,
+          endAdornment: (
+            <>
+              {endAdornment && (
+                <InputAdornment position="end">{endAdornment}</InputAdornment>
+              )}
+              {params.InputProps.endAdornment}
+            </>
+          ),
+          style: {
+            background: 'transparent',
+            paddingRight: theme.spacing(5)
+          }
+        }}
+        autoFocus={autoFocus}
+        autoSize={autoSize}
+        autoSizeCustomPadding={7 + (autoSizeCustomPadding || 0)}
+        autoSizeDefaultWidth={autoSizeDefaultWidth}
+        classes={{
+          root: classes.textfield
+        }}
+        error={error}
+        externalValueForAutoSize={autocompleteProps?.value?.name}
+        inputProps={{
+          ...params.inputProps,
+          'aria-label': label,
+          'data-testid': dataTestId || label,
+          id: getNormalizedId(label || '')
+        }}
+        label={label}
+        placeholder={isNil(placeholder) ? t(searchLabel) : placeholder}
+        required={required}
+        value={inputValue || undefined}
+        onChange={onTextChange}
+      />
     );
-  };
 
-  const renderInput = (params): JSX.Element => (
-    <TextField
-      {...params}
-      InputLabelProps={{
-        classes: {
-          marginDense: classes.inputLabel,
-          shrink: classes.inputLabelShrink
-        }
-      }}
-      InputProps={{
-        ...params.InputProps,
-        endAdornment: (
-          <>
-            {endAdornment && (
-              <InputAdornment position="end">{endAdornment}</InputAdornment>
-            )}
-            {params.InputProps.endAdornment}
-          </>
-        ),
-        style: {
-          background: 'transparent',
-          paddingRight: theme.spacing(5)
+    return (
+      <Autocomplete
+        disableClearable
+        classes={{
+          groupLabel: classes.inputLabel,
+          inputRoot: cx([
+            classes.input,
+            label ? classes.inputWithLabel : classes.inputWithoutLabel
+          ]),
+          popper: classes.popper,
+          root: classes.textfield
+        }}
+        forcePopupIcon={displayPopupIcon}
+        getOptionLabel={(option): string =>
+          (option as SelectEntry)?.name?.toString() || ''
         }
-      }}
-      autoFocus={autoFocus}
-      autoSize={autoSize}
-      autoSizeCustomPadding={7 + (autoSizeCustomPadding || 0)}
-      autoSizeDefaultWidth={autoSizeDefaultWidth}
-      classes={{
-        root: classes.textfield
-      }}
-      error={error}
-      externalValueForAutoSize={autocompleteProps?.value?.name}
-      inputProps={{
-        ...params.inputProps,
-        'aria-label': label,
-        'data-testid': dataTestId || label,
-        id: getNormalizedId(label || '')
-      }}
-      label={label}
-      placeholder={isNil(placeholder) ? t(searchLabel) : placeholder}
-      required={required}
-      value={inputValue || undefined}
-      onChange={onTextChange}
-    />
-  );
-
-  return (
-    <Autocomplete
-      disableClearable
-      classes={{
-        groupLabel: classes.inputLabel,
-        inputRoot: cx([
-          classes.input,
-          label ? classes.inputWithLabel : classes.inputWithoutLabel
-        ]),
-        popper: classes.popper,
-        root: classes.textfield
-      }}
-      forcePopupIcon={displayPopupIcon}
-      getOptionLabel={(option): string =>
-        (option as SelectEntry)?.name?.toString() || ''
-      }
-      isOptionEqualToValue={areSelectEntriesEqual}
-      loading={loading}
-      loadingText={<LoadingIndicator />}
-      options={options}
-      renderInput={renderInput}
-      renderOption={(props, option): JSX.Element => {
-        return (
-          <li
-            className={classes.options}
-            {...(props as React.HTMLAttributes<HTMLLIElement>)}
-          >
-            <Option
-              thumbnailUrl={displayOptionThumbnail ? option.url : undefined}
+        isOptionEqualToValue={areSelectEntriesEqual}
+        loading={loading}
+        loadingText={<LoadingIndicator />}
+        options={options}
+        ref={ref}
+        renderInput={renderInput}
+        renderOption={(props, option): JSX.Element => {
+          return (
+            <li
+              className={classes.options}
+              {...(props as React.HTMLAttributes<HTMLLIElement>)}
             >
-              {getOptionItemLabel(option)}
-            </Option>
-          </li>
-        );
-      }}
-      size="small"
-      {...autocompleteProps}
-    />
-  );
-};
+              <Option
+                thumbnailUrl={displayOptionThumbnail ? option.url : undefined}
+              >
+                {getOptionItemLabel(option)}
+              </Option>
+            </li>
+          );
+        }}
+        size="small"
+        {...autocompleteProps}
+      />
+    );
+  }
+);
 
 export default AutocompleteField;

package/src/InputField/Text/index.tsx

@@ -155,9 +155,9 @@ const TextField = forwardRef(
             helperText={displayErrorInTooltip ? undefined : error}
             id={getNormalizedId(dataTestId || '')}
             inputProps={{
-              ...rest.inputProps,
               'aria-label': ariaLabel,
-              'data-testid': dataTestId
+              'data-testid': dataTestId,
+              ...rest.inputProps
             }}
             label={label}
             ref={ref}

package/src/TimePeriods/DateTimePickerInput.tsx

@@ -4,7 +4,11 @@ import dayjs, { Dayjs } from 'dayjs';
 import { useAtomValue } from 'jotai';
 import { equals } from 'ramda';
 
-import { DateTimePicker, LocalizationProvider } 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';
@@ -23,6 +27,7 @@ interface Props {
   disabled?: boolean;
   maxDate?: Date;
   minDate?: Date;
+  minDateTime?: Date;
   property: CustomTimePeriodProperty | string;
 }
 
@@ -30,11 +35,13 @@ const DateTimePickerInput = ({
   date,
   maxDate,
   minDate,
+  minDateTime,
   property,
   changeDate,
   disabled = false,
-  desktopMediaQuery
-}: Props): JSX.Element => {
+  desktopMediaQuery,
+  ...rest
+}: Props & DateTimePickerProps<dayjs.Dayjs>): JSX.Element => {
   const desktopPickerMediaQuery =
     '@media (min-width: 1024px) or (pointer: fine)';
 
@@ -67,8 +74,10 @@ const DateTimePickerInput = ({
         disabled={disabled}
         maxDate={maxDate && formatDate(maxDate)}
         minDate={minDate && formatDate(minDate)}
+        minDateTime={minDateTime && formatDate(minDateTime)}
         value={formatDate(date)}
         onChange={changeTime}
+        {...rest}
       />
     </LocalizationProvider>
   );