@centreon/ui 24.4.1-MON-34494-delete-action.2 → 24.4.1-MON-24235-Filter-App-token.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.4.1-MON-34494-delete-action.2",
+  "version": "24.4.1-MON-24235-Filter-App-token.19",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

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

@@ -1,4 +1,4 @@
-import { includes, map, prop, reject } from 'ramda';
+import { includes, map, prop, reject, sortBy, toLower, compose } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
 import { Chip, ChipProps, Tooltip } from '@mui/material';
@@ -85,9 +85,11 @@ const MultiAutocompleteField = ({
     return includes(id, valueIds);
   };
 
+  const sortByName = sortBy(compose(toLower, prop('name')));
+
   const autocompleteOptions = disableSortedOptions
     ? options
-    : [...values, ...reject(isOptionSelected, options)];
+    : sortByName([...values, ...reject(isOptionSelected, options)]);
 
   return (
     <Autocomplete

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

@@ -216,7 +216,8 @@ const AutocompleteField = React.forwardRef(
           ...params.inputProps,
           'aria-label': label,
           'data-testid': dataTestId || label,
-          id: getNormalizedId(label || '')
+          id: getNormalizedId(label || ''),
+          ...autocompleteProps?.inputProps
         }}
         label={label}
         placeholder={isNil(placeholder) ? t(searchLabel) : placeholder}

package/src/components/DataTable/Item/DataTableItem.tsx

@@ -14,6 +14,7 @@ import {
 } from '@mui/icons-material';
 
 import { IconButton } from '../../Button';
+import { ConfirmationTooltip } from '../../Tooltip/ConfirmationTooltip';
 
 import { useStyles } from './DataTableItem.styles';
 
@@ -21,6 +22,13 @@ export interface DataTableItemProps {
   description?: string;
   hasActions?: boolean;
   hasCardAction?: boolean;
+  labelsDelete?: {
+    cancel: string;
+    confirm: {
+      label: string;
+      secondaryLabel?: string;
+    };
+  };
   onClick?: () => void;
   onDelete?: () => void;
   onEdit?: () => void;
@@ -38,7 +46,8 @@ const DataTableItem = forwardRef(
       onClick,
       onEdit,
       onDelete,
-      onEditAccessRights
+      onEditAccessRights,
+      labelsDelete
     }: DataTableItemProps,
     ref
   ): ReactElement => {
@@ -67,14 +76,24 @@ const DataTableItem = forwardRef(
         {hasActions && (
           <MuiCardActions>
             <span>
-              <IconButton
-                aria-label="delete"
-                data-testid="delete"
-                icon={<DeleteIcon />}
-                size="small"
-                variant="ghost"
-                onClick={onDelete}
-              />
+              {onDelete && labelsDelete && (
+                <ConfirmationTooltip
+                  confirmVariant="error"
+                  labels={labelsDelete}
+                  onConfirm={onDelete}
+                >
+                  {({ toggleTooltip }) => (
+                    <IconButton
+                      aria-label="delete"
+                      data-testid="delete"
+                      icon={<DeleteIcon />}
+                      size="small"
+                      variant="ghost"
+                      onClick={toggleTooltip}
+                    />
+                  )}
+                </ConfirmationTooltip>
+              )}
             </span>
             <span>
               <IconButton

package/src/components/List/Item/ListItem.tsx

@@ -1,10 +1,10 @@
 import { ForwardedRef, forwardRef, ReactElement, ReactNode } from 'react';
 
-import { ListItem as MuiListItem } from '@mui/material';
+import { ListItemProps, ListItem as MuiListItem } from '@mui/material';
 
 import { useStyles } from './ListItem.styles';
 
-type ListItemProps = {
+type Props = {
   action?: ReactElement;
   children: ReactNode | Array<ReactNode>;
   className?: string;
@@ -12,7 +12,7 @@ type ListItemProps = {
 
 export const ListItem = forwardRef(
   (
-    { action, children, className, ...attr }: ListItemProps,
+    { action, children, className, ...attr }: Props & ListItemProps,
     ref?: ForwardedRef<HTMLLIElement>
   ) => {
     const { classes, cx } = useStyles();