@centreon/ui 24.4.1-MON-23368-containers.76 → 24.4.1-MON-24235-Filter-App-token.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.4.1-MON-23368-containers.76",
+  "version": "24.4.1-MON-24235-Filter-App-token.13",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",
@@ -47,11 +47,11 @@
     "test/*"
   ],
   "devDependencies": {
-    "@cypress/react": "^8.0.0",
-    "@cypress/webpack-dev-server": "^3.7.3",
+    "@cypress/react": "^7.0.2",
+    "@cypress/webpack-dev-server": "^3.2.3",
     "@faker-js/faker": "^8.0.2",
-    "@mdx-js/react": "^3.0.0",
-    "@simonsmith/cypress-image-snapshot": "^9.0.1",
+    "@mdx-js/react": "^2.1.4",
+    "@simonsmith/cypress-image-snapshot": "^6.1.0",
     "@storybook/addon-a11y": "^7.0.9",
     "@storybook/addon-docs": "^7.0.9",
     "@storybook/addon-essentials": "^7.0.9",
@@ -72,15 +72,16 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/react-hooks": "^8.0.1",
-    "@types/jest": "^29.5.11",
+    "@types/cypress": "^1.1.3",
+    "@types/jest": "^27.5.0",
     "@types/mocha": "^10.0.6",
-    "@types/ramda": "^0.29.9",
-    "@types/react": "^18.2.48",
-    "@types/testing-library__jest-dom": "^6.0.0",
+    "@types/ramda": "^0.29.6",
+    "@types/react": "^18.0.26",
+    "@types/testing-library__jest-dom": "^5.14.6",
     "@vitejs/plugin-react": "^4.0.0",
     "@vitejs/plugin-react-swc": "^3.3.0",
-    "axios-mock-adapter": "^1.22.0",
-    "cypress": "^13.6.2",
+    "axios-mock-adapter": "^1.21.4",
+    "cypress": "^13.3.1",
     "identity-obj-proxy": "^3.0.0",
     "jest-transform-stub": "^2.0.0",
     "mochawesome": "^7.1.3",
@@ -91,26 +92,27 @@
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
     "remark-gfm": "^3.0.1",
+    "sass": "^1.62.1",
     "speed-measure-vite-plugin": "^0.1.2",
-    "storybook": "^7.6.8",
+    "storybook": "^7.0.9",
     "storybook-addon-mock": "^4.0.0",
-    "storybook-dark-mode": "^3.0.3",
+    "storybook-dark-mode": "^3.0.0",
     "style-dictionary": "^3.8.0",
-    "ts-node": "^10.9.2",
+    "ts-node": "^10.9.1",
     "use-resize-observer": "^9.1.0",
     "vite": "^4.3.5",
     "vite-plugin-istanbul": "^5.0.0",
     "vite-plugin-svgr": "^3.2.0",
-    "vite-plugin-turbosnap": "^1.0.3"
+    "vite-plugin-turbosnap": "^1.0.2"
   },
   "dependencies": {
-    "@lexical/html": "^0.12.6",
-    "@lexical/link": "^0.12.6",
-    "@lexical/list": "^0.12.6",
-    "@lexical/react": "^0.12.6",
-    "@lexical/rich-text": "^0.12.6",
-    "@lexical/selection": "^0.12.6",
-    "@lexical/utils": "^0.12.6",
+    "@lexical/html": "^0.12.2",
+    "@lexical/link": "^0.12.2",
+    "@lexical/list": "^0.12.2",
+    "@lexical/react": "^0.12.2",
+    "@lexical/rich-text": "^0.12.2",
+    "@lexical/selection": "^0.12.2",
+    "@lexical/utils": "^0.12.2",
     "@react-spring/web": "^9.7.3",
     "@visx/curve": "^2.1.0",
     "@visx/group": "^3.3.0",
@@ -120,9 +122,9 @@
     "@visx/threshold": "^2.12.2",
     "@visx/visx": "2.16.0",
     "anylogger": "^1.0.11",
-    "d3-array": "3.2.4",
+    "d3-array": "3.2.0",
     "humanize-duration": "^3.27.3",
-    "lexical": "^0.12.6",
+    "lexical": "^0.12.2",
     "notistack": "^3.0.1",
     "ramda": "0.29.1",
     "react-grid-layout": "^1.3.4",

package/src/Dialog/Confirm/index.tsx

@@ -1,4 +1,4 @@
-import { DialogContentText, Typography } from '@mui/material';
+import { ButtonProps, DialogContentText, Typography } from '@mui/material';
 
 import Dialog, { Props as DialogProps } from '..';
 
@@ -6,15 +6,23 @@ type Props = DialogProps & {
   children?: JSX.Element;
   labelMessage?: string | null;
   labelSecondMessage?: string | null;
+  restCancelButtonProps?: ButtonProps;
+  restConfirmButtonProps?: ButtonProps;
 };
 
 const Confirm = ({
   labelMessage,
   labelSecondMessage,
   children,
+  restCancelButtonProps,
+  restConfirmButtonProps,
   ...rest
 }: Props): JSX.Element => (
-  <Dialog {...rest}>
+  <Dialog
+    restCancelButtonProps={restCancelButtonProps}
+    restConfirmButtonProps={restConfirmButtonProps}
+    {...rest}
+  >
     <DialogContentText>
       {labelMessage && <Typography>{labelMessage}</Typography>}
       {labelSecondMessage && <Typography>{labelSecondMessage}</Typography>}

package/src/Dialog/index.tsx

@@ -9,7 +9,8 @@ import {
   DialogContent,
   DialogActions,
   DialogProps,
-  CircularProgress
+  CircularProgress,
+  ButtonProps
 } from '@mui/material';
 
 import { DataTestAttributes } from '../@types/data-attributes';
@@ -48,6 +49,8 @@ export type Props = {
   onClose?: () => void;
   onConfirm: (event, value?) => void;
   open: boolean;
+  restCancelButtonProps?: ButtonProps;
+  restConfirmButtonProps?: ButtonProps;
   submitting?: boolean;
 } & DialogProps &
   DataTestAttributes;
@@ -70,6 +73,8 @@ const Dialog = ({
   dialogContentClassName,
   dialogActionsClassName,
   dialogConfirmButtonClassName,
+  restCancelButtonProps,
+  restConfirmButtonProps,
   ...rest
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({ contentWidth });
@@ -101,6 +106,7 @@ const Dialog = ({
             data-testid="Cancel"
             disabled={cancelDisabled}
             onClick={onCancel}
+            {...restCancelButtonProps}
           >
             {labelCancel}
           </Button>
@@ -113,6 +119,7 @@ const Dialog = ({
           disabled={confirmDisabled}
           endIcon={submitting && <CircularProgress size={15} />}
           onClick={onConfirm}
+          {...restConfirmButtonProps}
         >
           {labelConfirm}
         </Button>

package/src/Form/Inputs/CheckboxGroup.tsx

@@ -46,10 +46,7 @@ const CheckboxGroup = ({
       return;
     }
 
-    setFieldValue(
-      fieldName,
-      value?.filter((elm) => !equals(elm, label))
-    );
+    setFieldValue(fieldName, value?.filter((elm) => !equals(elm, label)));
   };
 
   return useMemoComponent({

package/src/Graph/LineChart/BasicComponents/Lines/Threshold/index.tsx

@@ -130,10 +130,11 @@ const WrapperThresholdLines = ({
 
   return (
     <g>
-      {filteredThresholdLines.map((element) =>
-        element?.map(({ Component, props, key }) => (
-          <Component {...props} id={key} key={key} />
-        ))
+      {filteredThresholdLines.map(
+        (element) =>
+          element?.map(({ Component, props, key }) => (
+            <Component {...props} id={key} key={key} />
+          ))
       )}
     </g>
   );

package/src/Graph/LineChart/InteractiveComponents/Annotations/Annotation/index.tsx

@@ -43,9 +43,8 @@ const Annotation = ({
 
   const setAnnotationHovered = useSetAtom(annotationHoveredAtom);
 
-  const content = `${truncate(event.content)} (${t(labelBy)} ${
-    event.contact?.name
-  })`;
+  const content = `${truncate(event.content)} (${t(labelBy)} ${event.contact
+    ?.name})`;
 
   return (
     <g>

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/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();