@centreon/ui 24.4.53 → 24.4.55

package/package.json

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

package/src/InputField/Select/index.tsx

@@ -27,6 +27,14 @@ const useStyles = makeStyles()((theme: Theme) => ({
   },
   noLabelInput: {
     padding: theme.spacing(1)
+  },
+  select: {
+    '& > fieldset > legend': {
+      maxWidth: 0
+    },
+    '&.Mui-focused > fieldset > legend': {
+      maxWidth: '100%'
+    }
   }
 }));
 
@@ -83,6 +91,9 @@ const SelectField = ({
       {label && <InputLabel>{label}</InputLabel>}
       <Select
         displayEmpty
+        classes={{
+          root: classes.select
+        }}
         fullWidth={fullWidth}
         inputProps={{
           'aria-label': ariaLabel,

package/src/Typography/FluidTypography/FluidTypography.cypress.spec.tsx

@@ -0,0 +1,27 @@
+import FluidTypography from '.';
+
+const initialize = ({ width, min, max, pref }): void => {
+  cy.viewport(width, 590);
+
+  cy.mount({
+    Component: (
+      <FluidTypography max={max} min={min} pref={pref} text="Unreachable" />
+    )
+  });
+};
+
+describe('FluidTypography', () => {
+  [500, 300, 150].forEach((width) => {
+    Object.entries({ max: '80px', min: '30px', pref: 10 }).forEach(
+      ([key, value]) => {
+        it(`displays the text when the viewport is ${width}px and the ${key} is ${value}`, () => {
+          initialize({ [key]: value, width });
+
+          cy.contains('Unreachable').should('be.visible');
+
+          cy.matchImageSnapshot();
+        });
+      }
+    );
+  });
+});

package/src/Typography/FluidTypography/index.stories.tsx

@@ -40,9 +40,9 @@ basic.args = {
 
 export const with200pxWidth = FluidTypographyTemplate.bind({});
 with200pxWidth.args = {
-  height: '200px',
+  height: '50%',
   text: 'Hello world',
-  width: '200px'
+  width: '50%'
 };
 
 export const with20pxHeight = FluidTypographyTemplate.bind({});

package/src/Typography/FluidTypography/index.tsx

@@ -1,49 +1,42 @@
-import { useRef } from 'react';
-
 import { Typography, TypographyProps } from '@mui/material';
 
-import useFluidResizeObserver from './useFluidResizeObserver';
-
 type CustomTypographyProps = Pick<TypographyProps, 'variant'>;
 export interface FluidTypographyProps extends CustomTypographyProps {
   className?: string;
+  containerClassName?: string;
+  max?: string;
+  min?: string;
+  pref?: number;
   text: string;
 }
 
 const FluidTypography = ({
   text,
   variant = 'body1',
-  className
+  className,
+  containerClassName,
+  min = '10px',
+  max = '1000px',
+  pref = 19
 }: FluidTypographyProps): JSX.Element => {
-  const containerRef = useRef<HTMLElement>();
-  const parentRef = useRef<HTMLElement>();
-
-  const size = useFluidResizeObserver({ ref: containerRef });
-  const parentSize = useFluidResizeObserver({ isParent: true, ref: parentRef });
-
   return (
     <div
-      ref={parentRef}
+      className={containerClassName}
       style={{
-        height: `${parentSize.height}px`,
+        containerType: 'inline-size',
+        height: `100%`,
         width: `100%`
       }}
     >
-      <div ref={containerRef} style={{ height: '100%', width: '100%' }}>
-        <Typography
-          className={className}
-          sx={{
-            fontSize: `clamp(10px, min(${Math.floor(
-              size.width / 6
-            )}px, ${Math.floor(size.height / 6)}px), min(${size.width}px, ${
-              size.height
-            }px))`
-          }}
-          variant={variant}
-        >
-          {text}
-        </Typography>
-      </div>
+      <Typography
+        className={className}
+        sx={{
+          fontSize: `clamp(${min}, ${pref}cqi, ${max})`
+        }}
+        variant={variant}
+      >
+        {text}
+      </Typography>
     </div>
   );
 };

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,15 @@ 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(
+        document.activeElement?.getAttribute('data-lexical-editor'),
+        'true'
+      ) ||
+      equals(document.activeElement?.getAttribute('contenteditable'), 'true') ||
+      !equals(event.code, 'KeyF')
+    ) {
       return;
     }
 

package/src/utils/useInfiniteScrollListing.ts

@@ -24,6 +24,7 @@ interface UseInfiniteScrollListing<T> {
 interface UseInfiniteScrollListingProps<T> {
   customQueryParameters?: Array<QueryParameter>;
   decoder?: JsonDecoder.Decoder<Listing<T>>;
+  enabled?: boolean;
   endpoint: string;
   limit?: number;
   pageAtom: PrimitiveAtom<number>;
@@ -40,7 +41,8 @@ export const useInfiniteScrollListing = <T>({
   suspense = true,
   parameters,
   customQueryParameters,
-  limit = 100
+  limit = 100,
+  enabled = true
 }: UseInfiniteScrollListingProps<T>): UseInfiniteScrollListing<T> => {
   const [maxPage, setMaxPage] = useState(1);
 
@@ -61,6 +63,7 @@ export const useInfiniteScrollListing = <T>({
     getQueryKey: () => [queryKeyName, page],
     isPaginated: true,
     queryOptions: {
+      enabled,
       refetchOnMount: false,
       refetchOnWindowFocus: false,
       suspense: suspense && equals(page, 1)

package/src/Typography/FluidTypography/useFluidResizeObserver.ts

@@ -1,56 +0,0 @@
-import {
-  MutableRefObject,
-  useCallback,
-  useEffect,
-  useRef,
-  useState
-} from 'react';
-
-interface Size {
-  height: number;
-  width: number;
-}
-
-interface UseFluidResizeObserver {
-  isParent?: boolean;
-  ref: MutableRefObject<HTMLElement | undefined>;
-}
-
-const useFluidResizeObserver = ({
-  ref,
-  isParent
-}: UseFluidResizeObserver): Size => {
-  const [size, setSize] = useState<Size>({ height: 0, width: 0 });
-
-  const observer = useRef<ResizeObserver | null>(null);
-
-  const resizeObserver = useCallback(
-    (element) => {
-      if (observer.current) {
-        observer.current.disconnect();
-      }
-
-      observer.current = new ResizeObserver(
-        ([entry]: Array<ResizeObserverEntry>) => {
-          setSize({
-            height: entry.target?.getBoundingClientRect().height || 0,
-            width: entry.target?.getBoundingClientRect().width || 0
-          });
-        }
-      );
-
-      if (element && observer.current) {
-        observer.current.observe(element);
-      }
-    },
-    [ref.current]
-  );
-
-  useEffect(() => {
-    resizeObserver(isParent ? ref.current?.parentElement : ref.current);
-  }, [ref.current]);
-
-  return size;
-};
-
-export default useFluidResizeObserver;