@centreon/ui 24.4.52 → 24.4.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.4.52",
+  "version": "24.4.54",
   "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(optionProperty)));
+
   const autocompleteOptions = disableSortedOptions
     ? options
-    : [...values, ...reject(isOptionSelected, options)];
+    : sortByName([...values, ...reject(isOptionSelected, options)]);
 
   return (
     <Autocomplete

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

@@ -222,7 +222,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/PopoverMenu/index.tsx

@@ -6,14 +6,16 @@ import {
   ClickAwayListener,
   Paper,
   Popper,
-  PopperPlacementType,
-  useTheme
+  PopperPlacementType
 } from '@mui/material';
 import { PopperProps } from '@mui/material/Popper';
 
 import { IconButton } from '..';
 
-const useStyles = makeStyles()(() => ({
+const useStyles = makeStyles()((theme) => ({
+  popover: {
+    zIndex: theme.zIndex.tooltip
+  },
   popoverIconButton: {
     padding: 0,
     width: '100%'
@@ -52,7 +54,6 @@ const PopoverMenu = ({
   getPopoverData,
   popperProps
 }: Props): JSX.Element => {
-  const theme = useTheme();
   const { classes, cx } = useStyles();
   const [anchorEl, setAnchorEl] = useState<HTMLElement | undefined>();
   const isOpen = Boolean(anchorEl);
@@ -105,9 +106,9 @@ const PopoverMenu = ({
           <Popper
             open
             anchorEl={anchorEl}
+            className={classes.popover}
             nonce={undefined}
             placement={popperPlacement}
-            style={{ zIndex: theme.zIndex.tooltip }}
             onResize={(): undefined => undefined}
             onResizeCapture={(): undefined => undefined}
             {...popperProps}

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

package/src/utils/useFullscreen/Fullscreen.cypress.spec.tsx

@@ -22,6 +22,8 @@ const ChildComponent = (): JSX.Element => {
       <Button onClick={() => toggleFullscreen(document.body)}>
         {isFullscreenActivated ? labelExitFullscreen : labelEnterFullscreen}
       </Button>
+      <input id="input" />
+      <textarea id="textarea" />
     </div>
   );
 };
@@ -94,16 +96,35 @@ describe('Fullscreen', () => {
       .should('have.attr', 'data-fullscreenActivated', 'false')
       .should('have.attr', 'data-fullscreenEnabled', 'true');
 
-    cy.get('#test').realPress(['Alt', 'F']);
+    cy.get('#test').realPress(['F']);
 
     cy.get('#test')
       .should('have.attr', 'data-fullscreenActivated', 'true')
       .should('have.attr', 'data-fullscreenEnabled', 'true');
 
-    cy.get('#test').realPress(['Alt', 'F']);
+    cy.get('#test').realPress(['F']);
 
     cy.get('#test')
       .should('have.attr', 'data-fullscreenActivated', 'false')
       .should('have.attr', 'data-fullscreenEnabled', 'true');
   });
+
+  ['input', 'textarea'].forEach((tag) => {
+    it(`cannot toggle fullscreen feature using the shortcut when ${tag === 'input' ? 'an' : 'a'} ${tag} is focused`, () => {
+      initialize();
+
+      cy.get('#test')
+        .should('have.attr', 'data-fullscreenActivated', 'false')
+        .should('have.attr', 'data-fullscreenEnabled', 'true');
+
+      cy.get(`#${tag}`).focus();
+
+      cy.get('#test').realPress(['F']);
+
+      cy.get('#test')
+        .should('have.attr', 'data-fullscreenActivated', 'false')
+        .should('have.attr', 'data-fullscreenEnabled', 'true');
+      cy.get(`#${tag}`).should('have.value', 'F');
+    });
+  });
 });

package/src/utils/useFullscreen/useFullscreenListener.ts

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 
-import { equals } from 'ramda';
+import { equals, includes } from 'ramda';
 import { useSearchParams } from 'react-router-dom';
 
 import { useDeepCompare } from '../useMemoComponent';
@@ -16,7 +16,10 @@ export const useFullscreenListener = (): boolean => {
     useFullscreen();
 
   const toggle = (event: KeyboardEvent): void => {
-    if (!event.altKey || !equals(event.code, 'KeyF')) {
+    if (
+      includes(document.activeElement?.tagName, ['INPUT', 'TEXTAREA']) ||
+      !equals(event.code, 'KeyF')
+    ) {
       return;
     }