@centreon/ui 26.5.9 → 26.5.11

package/src/components/Modal/ModalHeader.tsx

@@ -7,7 +7,7 @@ import type { ReactElement, ReactNode } from 'react';
 
 import '../../../src/ThemeProvider/tailwindcss.css';
 
-import { modalHeader } from './modal.module.css';
+import styles from './modal.module.css';
 
 export type ModalHeaderProps = {
   children?: ReactNode;
@@ -18,7 +18,7 @@ const ModalHeader = ({
   ...rest
 }: ModalHeaderProps & DialogTitleProps): ReactElement => {
   return (
-    <div className={modalHeader}>
+    <div className={styles.modalHeader}>
       <MuiDialogTitle
         className="p-0 font-bold text-2xl"
         color="primary"

package/src/components/Tooltip/TextOverflowTooltip/TextOverflowTooltip.tsx

@@ -1,6 +1,12 @@
 /** biome-ignore-all lint/a11y/noStaticElementInteractions: need it */
 import { atom, useAtom } from 'jotai';
-import { type ReactElement, useCallback, useEffect, useRef } from 'react';
+import {
+  type ReactElement,
+  type RefObject,
+  useCallback,
+  useEffect,
+  useRef
+} from 'react';
 
 import { useResizeObserver } from '../../../utils/useResizeObserver';
 import { Tooltip, type TooltipProps } from '../Tooltip';
@@ -81,7 +87,7 @@ const TextOverflowTooltip = ({
 
   useResizeObserver({
     onResize,
-    ref: elRef
+    ref: elRef as RefObject<HTMLElement>
   });
 
   useEffect(() => {

package/src/index.ts

@@ -88,7 +88,7 @@ export type { Props as MultiAutocompleteFieldProps } from './InputField/Select/A
 export { default as MultiAutocompleteField } from './InputField/Select/Autocomplete/Multi';
 export { default as PopoverMultiAutocompleteField } from './InputField/Select/Autocomplete/Multi/Popover';
 export { default as IconPopoverMultiSelectField } from './InputField/Select/IconPopover';
-export type { Props as TextFieldProps } from './InputField/Text';
+export type { TextProps as TextFieldProps } from './InputField/Text';
 export { default as TextField } from './InputField/Text';
 export { default as LicenseMessage } from './LicenseMessage';
 export type { Props as ListingProps } from './Listing';

package/src/utils/sanitizedHTML.ts

@@ -12,7 +12,7 @@ const sanitizedHTML = ({
 }: UseSanitizedHTMLProps): JSX.Element => {
   const sanitizedContent = sanitizeHtml(initialContent, sanitizeOptions);
 
-  return ReactHtmlParser(sanitizedContent);
+  return ReactHtmlParser(sanitizedContent) as JSX.Element;
 };
 
 export { sanitizedHTML };

package/src/utils/useDebounce.ts

@@ -12,7 +12,9 @@ export const useDebounce = ({
   memoProps = []
 }: Props): ((...args) => void) => {
   const timeoutRef = useRef<number | null>(null);
-  const ref = useRef();
+  const ref = useRef<((...args: Array<unknown>) => void) | undefined>(
+    undefined
+  );
 
   useEffect(() => {
     ref.current = functionToDebounce;

package/src/utils/useLicenseExpirationWarning.ts

@@ -1,5 +1,5 @@
 import dayjs from 'dayjs';
-import { find, isNil, lt, path, pipe, propEq } from 'ramda';
+import { isNil, lt, path } from 'ramda';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -24,11 +24,16 @@ export const useLicenseExpirationWarning = ({ module }: Props): void => {
 
   const currentDate = dayjs();
 
-  const getExpirationDate = pipe(
-    path(['result', 'module', 'entities']),
-    find(propEq(module, 'id')),
-    path(['license', 'expiration_date'])
-  ) as (data) => string;
+  const getExpirationDate = (obj: unknown): string => {
+    const entities = path(['result', 'module', 'entities'], obj) as
+      | Array<Record<string, unknown>>
+      | undefined;
+    const entity = entities ? entities.find((e) => e.id === module) : undefined;
+    return path(
+      ['license', 'expiration_date'],
+      entity as Record<string, unknown>
+    ) as string;
+  };
 
   useEffect(() => {
     if (isNil(data)) {

package/src/utils/useLocaleDateTimeFormat/index.test.tsx

@@ -2,7 +2,7 @@ import dayjs from "dayjs";
 import { useEffect } from "react";
 import "dayjs/locale/en";
 
-import { ThemeMode, userAtom } from "@centreon/ui-context";
+import { ListingVariant, ThemeMode, userAtom } from "@centreon/ui-context";
 import { type RenderResult, render } from "@testing-library/react";
 import localizedFormatPlugin from "dayjs/plugin/localizedFormat";
 import timezonePlugin from "dayjs/plugin/timezone";
@@ -25,6 +25,7 @@ const TestComponent = (): JSX.Element => {
 	useEffect(() => {
 		setUser({
 			alias: "admin",
+			canManageApiTokens: false,
 			default_page: "/monitoring/resources",
 			isExportButtonEnabled: false,
 			locale: "en",
@@ -32,6 +33,7 @@ const TestComponent = (): JSX.Element => {
 			themeMode: ThemeMode.light,
 			timezone: "Europe/Paris",
 			use_deprecated_pages: false,
+			user_interface_density: ListingVariant.compact,
 		});
 	}, [setUser]);
 

package/src/utils/useLocaleDateTimeFormat/localeFallback.test.tsx

@@ -2,7 +2,7 @@ import dayjs from "dayjs";
 import { useEffect } from "react";
 import "dayjs/locale/en";
 
-import { ThemeMode, userAtom } from "@centreon/ui-context";
+import { ListingVariant, ThemeMode, userAtom } from "@centreon/ui-context";
 import { type RenderResult, render } from "@testing-library/react";
 import localizedFormatPlugin from "dayjs/plugin/localizedFormat";
 import timezonePlugin from "dayjs/plugin/timezone";
@@ -25,6 +25,7 @@ const TestComponent = (): JSX.Element => {
 	useEffect(() => {
 		setUser({
 			alias: "admin",
+			canManageApiTokens: false,
 			default_page: "/monitoring/resources",
 			isExportButtonEnabled: false,
 			locale: "unsupported_locale",
@@ -32,6 +33,7 @@ const TestComponent = (): JSX.Element => {
 			themeMode: ThemeMode.light,
 			timezone: "Europe/Paris",
 			use_deprecated_pages: false,
+			user_interface_density: ListingVariant.compact,
 		});
 	}, [setUser]);
 

package/src/utils/useMemoComponent.ts

@@ -2,7 +2,7 @@ import { equals } from 'ramda';
 import { type DependencyList, type ReactElement, useMemo, useRef } from 'react';
 
 export const useDeepCompare = (value: DependencyList): Array<number> => {
-  const ref = useRef<React.DependencyList>();
+  const ref = useRef<React.DependencyList>(undefined);
   const signalRef = useRef<number>(0);
 
   if (!equals(value, ref.current)) {

package/src/utils/usePluralizedTranslation.test.ts

@@ -7,7 +7,9 @@ import { usePluralizedTranslation } from './usePluralizedTranslation';
 
 const baseUser = {
   alias: 'admin',
+  canManageApiTokens: false,
   isExportButtonEnabled: false,
+  locale: 'en' as string | null,
   name: 'admin',
   timezone: 'Europe/Paris',
   use_deprecated_pages: false,

package/src/utils/useViewportIntersection.ts

@@ -32,10 +32,9 @@ export const useViewportIntersection = (
       observer.current.disconnect();
     }
 
-    observer.current = new window.IntersectionObserver(
-      ([newEntry]) => setEntry(newEntry),
-      options
-    );
+    observer.current = new window.IntersectionObserver(([newEntry]) => {
+      setEntry(newEntry);
+    }, options);
 
     if (element) {
       observer.current.observe(element);