@centreon/ui 23.10.95 → 23.10.96

package/package.json

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

package/src/Checkbox/Checkbox.tsx

@@ -2,12 +2,8 @@ import { makeStyles } from 'tss-react/mui';
 import { T, always, cond, equals } from 'ramda';
 
 import { SvgIconComponent } from '@mui/icons-material';
-import {
-  FormControlLabel,
-  Checkbox as MuiCheckbox,
-  Box,
-  Typography
-} from '@mui/material';
+import Typography, { TypographyTypeMap } from '@mui/material/Typography';
+import { FormControlLabel, Checkbox as MuiCheckbox, Box } from '@mui/material';
 
 export type LabelPlacement = 'bottom' | 'top' | 'end' | 'start' | undefined;
 
@@ -60,6 +56,7 @@ interface Props {
   disabled?: boolean;
   label: string;
   labelPlacement?: LabelPlacement;
+  labelProps?: TypographyTypeMap['props'];
   onChange?: (e) => void;
 }
 
@@ -71,7 +68,8 @@ const Checkbox = ({
   className,
   disabled = false,
   labelPlacement = 'end',
-  dataTestId
+  dataTestId,
+  labelProps
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({
     hasIcon: !!Icon,
@@ -96,7 +94,11 @@ const Checkbox = ({
         }
         data-testid={dataTestId || ''}
         key={label}
-        label={<Typography className={classes.label}>{label}</Typography>}
+        label={
+          <Typography classes={{ root: classes.label }} {...labelProps}>
+            {label}
+          </Typography>
+        }
         labelPlacement={labelPlacement}
         sx={{ margin: 0, padding: 0 }}
       />

package/src/Checkbox/CheckboxGroup/index.tsx

@@ -1,15 +1,19 @@
 import { equals, includes } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
-import { FormGroup } from '@mui/material';
+import FormGroup, { FormGroupProps } from '@mui/material/FormGroup';
+import { TypographyTypeMap } from '@mui/material/Typography';
 
 import Checkbox, { LabelPlacement } from '../Checkbox';
 
 interface Props {
+  className?: string;
   dataTestId?: string;
   direction?: 'horizontal' | 'vertical';
   disabled?: boolean;
+  formGroupProps?: FormGroupProps;
   labelPlacement?: LabelPlacement;
+  labelProps?: TypographyTypeMap['props'];
   onChange?: (e) => void;
   options: Array<string>;
   values: Array<string>;
@@ -34,27 +38,32 @@ const CheckboxGroup = ({
   onChange,
   labelPlacement = 'end',
   disabled = false,
-  dataTestId
+  dataTestId,
+  className,
+  labelProps,
+  formGroupProps
 }: Props): JSX.Element => {
-  const { classes } = useStyles();
+  const { classes, cx } = useStyles();
 
   const row = !equals(direction, 'vertical');
 
   return (
     <FormGroup
-      className={classes.container}
+      classes={{ root: classes.container }}
       data-testid={dataTestId || ''}
       row={row}
+      {...formGroupProps}
     >
       {options.map((value) => {
         return (
           <Checkbox
             checked={includes(value, values)}
-            className={classes.checkbox}
+            className={cx(classes.checkbox, className)}
             disabled={disabled}
             key={value}
             label={value}
             labelPlacement={labelPlacement}
+            labelProps={labelProps}
             onChange={onChange}
           />
         );

package/src/PopoverMenu/index.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 
 import { makeStyles } from 'tss-react/mui';
 
@@ -9,6 +9,7 @@ import {
   PopperPlacementType,
   useTheme
 } from '@mui/material';
+import { PopperProps } from '@mui/material/Popper';
 
 import { IconButton } from '..';
 
@@ -19,15 +20,22 @@ const useStyles = makeStyles()(() => ({
   }
 }));
 
+interface PopoverData {
+  anchorEl: HTMLElement | undefined;
+  setAnchorEl: Dispatch<SetStateAction<HTMLElement | undefined>>;
+}
+
 interface Props {
   canOpen?: boolean;
   children: (props?) => JSX.Element;
   className?: string;
   dataTestId?: string;
+  getPopoverData?: (data: PopoverData) => void;
   icon: JSX.Element;
   onClose?: () => void;
   onOpen?: () => void;
   popperPlacement?: PopperPlacementType;
+  popperProps?: Partial<PopperProps>;
   title?: string;
 }
 
@@ -40,20 +48,21 @@ const PopoverMenu = ({
   onClose,
   canOpen = true,
   className,
-  dataTestId
+  dataTestId,
+  getPopoverData,
+  popperProps
 }: Props): JSX.Element => {
   const theme = useTheme();
   const { classes, cx } = useStyles();
   const [anchorEl, setAnchorEl] = useState<HTMLElement | undefined>();
-
   const isOpen = Boolean(anchorEl);
 
   const close = (reason?): void => {
     const isClosedByInputClick = reason?.type === 'mousedown';
-
     if (isClosedByInputClick) {
       return;
     }
+
     onClose?.();
     setAnchorEl(undefined);
   };
@@ -75,6 +84,10 @@ const PopoverMenu = ({
     }
   }, [canOpen]);
 
+  useEffect(() => {
+    getPopoverData?.({ anchorEl, setAnchorEl });
+  }, [anchorEl]);
+
   return (
     <>
       <IconButton
@@ -97,6 +110,7 @@ const PopoverMenu = ({
             style={{ zIndex: theme.zIndex.tooltip }}
             onResize={(): undefined => undefined}
             onResizeCapture={(): undefined => undefined}
+            {...popperProps}
           >
             <Paper>{children({ close })}</Paper>
           </Popper>

package/src/api/buildListingEndpoint/getSearchQueryParameterValue.ts

@@ -21,7 +21,7 @@ import {
   GetConditionsSearchQueryParameterValueState
 } from './models';
 
-const getFoundFields = ({
+export const getFoundFields = ({
   value,
   fields
 }: RegexSearchParameter): Array<SearchMatch> => {
@@ -108,7 +108,7 @@ const getConditionsSearchQueryParameterValue = (
   };
 };
 
-const getSearchQueryParameterValue = (
+export const getSearchQueryParameterValue = (
   search: SearchParameter | undefined
 ): SearchQueryParameterValue => {
   if (search === undefined) {
@@ -134,5 +134,3 @@ const getSearchQueryParameterValue = (
 
   return { $and: result };
 };
-
-export default getSearchQueryParameterValue;

package/src/api/buildListingEndpoint/index.ts

@@ -1,7 +1,7 @@
 import toRawQueryParameters from '../../queryParameters';
 import { QueryParameter } from '../../queryParameters/models';
 
-import getSearchQueryParameterValue from './getSearchQueryParameterValue';
+import { getSearchQueryParameterValue } from './getSearchQueryParameterValue';
 import { Parameters, BuildListingEndpointParameters } from './models';
 
 const getQueryParameters = ({

package/src/index.ts

@@ -75,7 +75,10 @@ export { default as useCancelTokenSource } from './api/useCancelTokenSource';
 export { getData, patchData, postData, putData, deleteData } from './api';
 export { default as useRequest } from './api/useRequest';
 export { default as buildListingEndpoint } from './api/buildListingEndpoint';
-export { default as getSearchQueryParameterValue } from './api/buildListingEndpoint/getSearchQueryParameterValue';
+export {
+  getSearchQueryParameterValue,
+  getFoundFields
+} from './api/buildListingEndpoint/getSearchQueryParameterValue';
 export type {
   Parameters as ListingParameters,
   BuildListingEndpointParameters,

package/src/utils/useDebounce.ts

@@ -1,4 +1,4 @@
-import { useRef, useCallback } from 'react';
+import { useRef, useCallback, useEffect } from 'react';
 
 interface Props {
   functionToDebounce: (...args) => void;
@@ -12,6 +12,11 @@ export const useDebounce = ({
   memoProps = []
 }: Props): ((...args) => void) => {
   const timeoutRef = useRef<number | null>(null);
+  const ref = useRef();
+
+  useEffect(() => {
+    ref.current = functionToDebounce;
+  }, [functionToDebounce]);
 
   return useCallback((...args): void => {
     if (timeoutRef.current) {
@@ -19,7 +24,7 @@ export const useDebounce = ({
     }
 
     timeoutRef.current = setTimeout(() => {
-      functionToDebounce(...args);
+      ref.current?.(...args);
     }, wait);
   }, memoProps);
 };