@groupeactual/ui-kit 1.5.2 → 1.6.0-beta.4

package/src/components/Datatable/use-pagination-props.hook.ts

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 import { PaginationProps, PaginationTrans, Props } from './datatable.interface';
 
-const usePaginationProps = <T extends {}>(
-  props: Props<T> | {}
+const usePaginationProps = <T extends object>(
+  props: Props<T> | object,
 ): Omit<PaginationProps, 'withPagination'> => {
   let trans = {} as PaginationTrans;
   let limits: number[] = [3, 5, 10, 20];
@@ -35,7 +35,7 @@ const usePaginationProps = <T extends {}>(
     limits,
     withTopPagination,
     setPage,
-    setLimit
+    setLimit,
   };
 };
 

package/src/components/EmbbededNotification/EmbeddedNotification.tsx

@@ -5,9 +5,10 @@ import {
   faCircleCheck,
   faCircleExclamation,
   faCircleInfo,
-  faCircleXmark
+  faCircleXmark,
 } from '@fortawesome/pro-solid-svg-icons';
-import { Box, BoxProps } from '@mui/material';
+import { Box } from '@mui/material';
+import { BoxProps } from '@mui/system';
 
 import Icon from '../IconProvider/IconProvider';
 import Text from '../Text';
@@ -34,20 +35,20 @@ const EmbeddedNotification = ({
   const variantNotification: Record<string, EmbeddedNotifVariant> = {
     warning: {
       color: 'orangeWarning',
-      icon: faCircleExclamation
+      icon: faCircleExclamation,
     },
     error: {
       color: 'redError',
-      icon: faCircleXmark
+      icon: faCircleXmark,
     },
     success: {
       color: 'greenSuccess',
-      icon: faCircleCheck
+      icon: faCircleCheck,
     },
     infos: {
       color: 'blueInfo',
-      icon: faCircleInfo
-    }
+      icon: faCircleInfo,
+    },
   };
 
   return (

package/src/components/Form/AutoCompleteMulti/AutoCompleteMulti.tsx

@@ -8,16 +8,16 @@ import {
 } from '@fortawesome/pro-solid-svg-icons';
 import { AutoCompleteStyle } from '@groupeactual/design-tokens';
 import {
-  Autocomplete,
   type AutocompleteProps,
-  Box,
   FormControl,
   FormHelperText,
   MenuItem,
-  TextField,
   styled,
   useTheme,
 } from '@mui/material';
+import Autocomplete from '@mui/material/Autocomplete';
+import Box from '@mui/material/Box';
+import TextField, { TextFieldProps } from '@mui/material/TextField';
 
 import Chip from '../../Chip/Chip';
 import IconProvider from '../../IconProvider';
@@ -86,7 +86,8 @@ const AutocompleteMultipleSelect = <T,>({
   const addFormControlClassName = useMemo(() => {
     const classNames = [
       'DsAutoComplete',
-      value && value.length > 0 && 'Mui-filled',
+      value && 'Mui-filled',
+      color === 'success' && 'Mui-success',
       disabled && 'Mui-disabled',
     ];
 
@@ -95,7 +96,7 @@ const AutocompleteMultipleSelect = <T,>({
 
   const addInputLabelClassName = useMemo(() => {
     const classNames = [
-      (!placeholder && 'labelCustom') || 'labelClassic',
+      (!placeholder && 'labelCustom') || 'labelClassic Mui-Input-filled',
       error && 'Mui-error',
       color === 'success' && 'Mui-success',
       value && value.length > 0 && 'Mui-Input-filled',
@@ -165,6 +166,7 @@ const AutocompleteMultipleSelect = <T,>({
                     suffixAction={() =>
                       !disabled && handleDeleteChip(selectedOption)
                     }
+                    data-testid="ChipOption"
                     sx={{
                       margin: '3px',
                       maxWidth: boxRef?.current
@@ -206,11 +208,13 @@ const AutocompleteMultipleSelect = <T,>({
           )}
           renderInput={(params) => (
             <TextField
-              {...params}
+              {...(params as TextFieldProps)}
               label={label}
               error={!!error}
               fullWidth
-              className={addInputLabelClassName}
+              inputProps={{
+                ...params.inputProps,
+              }}
               InputLabelProps={{
                 shrink: (!!placeholder && true) || undefined,
                 className: addInputLabelClassName,

package/src/components/Form/AutoCompleteSingle/AutoCompleteSingle.tsx

@@ -14,6 +14,7 @@ import {
   FormHelperText,
   MenuItem,
   TextField,
+  TextFieldProps,
   styled,
   useTheme,
 } from '@mui/material';
@@ -73,6 +74,7 @@ const AutoCompleteSingle = <T,>({
     const classNames = [
       'DsAutoComplete',
       value && 'Mui-filled',
+      color === 'success' && 'Mui-success',
       disabled && 'Mui-disabled',
     ];
 
@@ -81,8 +83,9 @@ const AutoCompleteSingle = <T,>({
 
   const getInputLabelClassName = useMemo(() => {
     const classNames = [
-      (!placeholder && 'labelCustom') || 'labelClassic',
+      (!placeholder && 'labelCustom') || 'labelClassic Mui-Input-filled',
       color === 'success' && 'Mui-success',
+      value && 'Mui-Input-filled',
     ];
 
     return classNames.filter(Boolean).join(' ');
@@ -158,12 +161,14 @@ const AutoCompleteSingle = <T,>({
           }
           renderInput={(params) => (
             <TextField
-              {...params}
+              {...(params as TextFieldProps)}
               label={label}
               error={!!error}
               fullWidth
-              className={getInputLabelClassName}
               variant="outlined"
+              inputProps={{
+                ...params.inputProps,
+              }}
               InputLabelProps={{
                 shrink: (placeholder && true) || undefined,
                 className: getInputLabelClassName,

package/src/components/Form/Checkbox/Checkbox.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 
 import { faInfoCircle } from '@fortawesome/pro-solid-svg-icons';
 import { CheckboxStyle } from '@groupeactual/design-tokens';
@@ -11,7 +11,7 @@ import {
   FormHelperText,
   Typography,
   styled,
-  useTheme
+  useTheme,
 } from '@mui/material';
 
 import IconProvider from '../../IconProvider';
@@ -24,7 +24,7 @@ interface Props {
   onChange?: (
     field: string,
     value: boolean,
-    shouldValidate?: boolean | undefined
+    shouldValidate?: boolean | undefined,
   ) => void;
   helperText?: string;
   error?: string;
@@ -60,7 +60,7 @@ const Checkbox = ({
   const theme = useTheme();
   const StyledCheckboxForm = useMemo(
     () => styled(FormControl)(CheckboxStyle(theme)),
-    [theme]
+    [theme],
   );
 
   const getComponentClassName = useMemo(() => {
@@ -84,7 +84,7 @@ const Checkbox = ({
         control={
           <Box>
             <CheckboxMUI
-              name={name}
+              inputProps={{ name }}
               disabled={disabled}
               sx={{ marginTop: '-2px' }}
               checked={value}

package/src/components/Form/CheckboxGroup/CheckboxGroup.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { CheckboxGroupStyle } from '@groupeactual/design-tokens';
 import {

package/src/components/Form/DatePicker/DatePicker.tsx

@@ -18,17 +18,18 @@ import {
   DatePicker as DatePickerMUI,
   DatePickerProps,
   LocalizationProvider,
-  enUS,
-  frFR,
 } from '@mui/x-date-pickers-pro';
 import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
+import { enUS, frFR } from '@mui/x-date-pickers/locales';
+import { Dayjs } from 'dayjs';
 import 'dayjs/locale/fr';
 
 import IconProvider from '../../IconProvider/IconProvider';
 
-interface Props<T> extends Omit<DatePickerProps<T>, 'onChange' | 'width'> {
-  value: T;
-  onChange: (value: T | null) => void;
+interface Props<T extends Dayjs>
+  extends Omit<DatePickerProps<Dayjs>, 'onChange' | 'width'> {
+  value: T | null;
+  onChange: (value: Dayjs | null) => void;
   error?: string;
   success?: boolean;
   helperText?: string;
@@ -36,7 +37,7 @@ interface Props<T> extends Omit<DatePickerProps<T>, 'onChange' | 'width'> {
   locale?: 'fr' | 'en';
 }
 
-const DatePicker = <T extends {} | undefined>({
+const DatePicker = <T extends Dayjs>({
   value,
   onChange,
   error,

package/src/components/Form/MultiSelect/MultiSelect.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useRef } from 'react';
+import React, { FocusEventHandler, useMemo, useRef } from 'react';
 
 import {
   faCheck,
@@ -32,14 +32,30 @@ interface Props<T>
   options: T[] | [];
   helperText?: string;
   color?: 'success';
-  onChange: (value: T[]) => void;
-  getRenderValue: (option: T) => string;
-  getKeyValue: (option: T) => string;
   value: T[];
   width?: number | string;
   error?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+  onBlur?:
+    | FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>
+    | undefined;
+  onChange: (value: T[]) => void;
+  getRenderValue: (option: T) => string;
+  getKeyValue: (option: T) => string;
 }
 
+const MenuProps = {
+  disableAutoFocusItem: true,
+  PaperProps: {
+    sx: {
+      boxShadow: '0px 2px 10px 0px',
+      width: 0,
+    },
+  },
+};
+
 const MultiSelect = <T,>({
   value,
   label,
@@ -52,7 +68,6 @@ const MultiSelect = <T,>({
   getRenderValue,
   getKeyValue,
   onChange,
-  onBlur,
   disabled,
   ...props
 }: Props<T>) => {
@@ -79,6 +94,7 @@ const MultiSelect = <T,>({
       'DsMultiSelect',
       (!placeholder && 'Select-mui') || 'Select-ds',
       value.length > 0 && 'Mui-filled',
+      error && 'Mui-error',
     ];
 
     return classNames.filter(Boolean).join(' ');
@@ -115,12 +131,9 @@ const MultiSelect = <T,>({
           }}
           multiple
           label={label}
-          placeholder={placeholder}
           notched={(placeholder && true) || undefined}
           value={value}
-          error={!!error}
           onChange={handleChange}
-          onBlur={onBlur}
           renderValue={(selected) => (
             <Box sx={{ display: 'flex' }}>
               <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
@@ -176,15 +189,7 @@ const MultiSelect = <T,>({
               }}
             />
           )}
-          MenuProps={{
-            disableAutoFocusItem: true,
-            PaperProps: {
-              sx: {
-                boxShadow: '0px 2px 10px 0px',
-                width: 0,
-              },
-            },
-          }}
+          MenuProps={MenuProps}
           {...props}
         >
           {options?.map((option) => (

package/src/components/Form/RadioGroup/RadioGroup.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { ChangeEvent, useMemo } from 'react';
 
 import { faInfoCircle } from '@fortawesome/pro-solid-svg-icons';
 import { RadioStyle } from '@groupeactual/design-tokens';
@@ -12,7 +12,7 @@ import {
   RadioGroup as RadioGroupMUI,
   RadioGroupProps,
   styled,
-  useTheme
+  useTheme,
 } from '@mui/material';
 
 import IconProvider from '../../IconProvider';
@@ -60,10 +60,10 @@ const RadioGroup = <T,>({
   const theme = useTheme();
   const StyledRadioForm = useMemo(
     () => styled(FormControl)(RadioStyle(theme)),
-    [theme]
+    [theme],
   );
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     onChange((event.target as HTMLInputElement).value as T);
   };
 
@@ -86,7 +86,7 @@ const RadioGroup = <T,>({
           .map(
             (
               { value, label, infoBubbleContent, infoBubblePosition },
-              index
+              index,
             ) => (
               <FormControlLabel
                 key={index}
@@ -119,7 +119,7 @@ const RadioGroup = <T,>({
                   </Box>
                 }
               />
-            )
+            ),
           )}
       </RadioGroupMUI>
       {((error || helperText) && (

package/src/components/Form/Select/Select.tsx

@@ -1,4 +1,4 @@
-import React, { BaseSyntheticEvent, useMemo } from 'react';
+import { BaseSyntheticEvent, useMemo } from 'react';
 
 import { faCheck, faChevronDown } from '@fortawesome/pro-solid-svg-icons';
 import { SelectStyle } from '@groupeactual/design-tokens';
@@ -20,16 +20,30 @@ import Icon from '../../IconProvider';
 interface Props<T>
   extends Omit<SelectProps<T>, 'value' | 'onChange' | 'color' | 'error'> {
   options: T[];
-  getRenderValue: (option: T) => string;
-  onChange: (value: T) => void;
+  placeholder?: string;
+  disabled?: boolean;
   label: string;
   helperText?: string;
   color?: 'success';
   value: T | undefined;
   width?: number | string;
   error?: string;
+  className?: string;
+  getRenderValue: (option: T) => string;
+  onChange: (value: T) => void;
+  onBlur?: (event: BaseSyntheticEvent) => void;
 }
 
+const MenuProps = {
+  disableAutoFocusItem: true,
+  PaperProps: {
+    sx: {
+      boxShadow: '0px 2px 10px 0px',
+      width: 0,
+    },
+  },
+};
+
 const Select = <T,>({
   value,
   label = '',
@@ -37,12 +51,11 @@ const Select = <T,>({
   color,
   error,
   placeholder = '',
-  onChange,
-  getRenderValue,
   helperText,
-  onBlur,
   width = '100%',
   disabled,
+  onChange,
+  getRenderValue,
   ...props
 }: Props<T>) => {
   const theme = useTheme();
@@ -59,6 +72,7 @@ const Select = <T,>({
       'DSSingleSelect',
       (!placeholder && 'Select-mui') || 'Select-ds',
       value && 'Mui-filled',
+      error && 'Mui-error',
     ];
 
     return classNames.filter(Boolean).join(' ');
@@ -91,12 +105,9 @@ const Select = <T,>({
               : {},
           }}
           label={label}
-          placeholder={placeholder}
           value={value}
-          error={!!error}
           notched={(placeholder && true) || undefined}
           onChange={handleChange}
-          onBlur={onBlur}
           IconComponent={({ className }) => (
             <Icon
               className={disabled ? 'Mui-disabled SelectIcon' : 'SelectIcon'}
@@ -112,15 +123,7 @@ const Select = <T,>({
               }}
             />
           )}
-          MenuProps={{
-            disableAutoFocusItem: true,
-            PaperProps: {
-              sx: {
-                boxShadow: '0px 2px 10px 0px',
-                width: 0,
-              },
-            },
-          }}
+          MenuProps={MenuProps}
           renderValue={(value) => getRenderValue(value)}
           {...props}
         >

package/src/components/Form/Switch/Switch.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 
 import { SwitchStyle } from '@groupeactual/design-tokens';
 import {

package/src/components/Form/TextField/TextField.tsx

@@ -10,7 +10,6 @@ import { faEye, faEyeSlash } from '@fortawesome/pro-solid-svg-icons';
 import { TextFieldStyle } from '@groupeactual/design-tokens';
 import {
   TextField as MuiTextField,
-  InputProps as StandardInputProps,
   TextFieldProps,
   styled,
   useTheme,
@@ -20,8 +19,6 @@ import Icon from '../../IconProvider';
 
 interface Props extends Omit<TextFieldProps, 'error'> {
   error?: string;
-  onBlur?: FocusEventHandler<unknown>;
-  onChange?: StandardInputProps['onChange'];
   label: string;
   value?: string | unknown;
   name?: string;
@@ -30,6 +27,11 @@ interface Props extends Omit<TextFieldProps, 'error'> {
   endAdornment?: ReactNode;
   maxLength?: number;
   width?: number | string;
+  className?: string;
+  onBlur?: FocusEventHandler<unknown>;
+  onChange?: (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => void;
 }
 const TextField = ({
   name,

package/src/components/IconButton/IconButton.tsx

@@ -2,8 +2,14 @@ import { useMemo } from 'react';
 
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { IconButtonStyle } from '@groupeactual/design-tokens';
-import { IconButtonProps, styled, useTheme } from '@mui/material';
-import { IconButton as IconButtonMUI } from '@mui/material';
+import {
+  IconButton as IconButtonMUI,
+  IconButtonProps,
+  SxProps,
+  Theme,
+  styled,
+  useTheme,
+} from '@mui/material';
 
 import IconProvider from '../IconProvider';
 import Tooltip from '../Tooltip';
@@ -15,6 +21,9 @@ interface Props extends IconButtonProps {
   positionGroup?: 'left' | 'middle' | 'right';
   tooltipText?: string;
   tooltipPosition?: Placement;
+  size?: 'small' | 'medium';
+  sx?: SxProps<Theme>;
+  onClick?: () => void;
 }
 
 const IconButton = ({
@@ -29,7 +38,7 @@ const IconButton = ({
   const theme = useTheme();
   const StyledIconButton = useMemo(
     () => styled(IconButtonMUI)(IconButtonStyle(theme)),
-    [theme]
+    [theme],
   );
   return (
     <Tooltip title={tooltipText} placement={tooltipPosition}>

package/src/components/IconProvider/IconProvider.tsx

@@ -1,12 +1,13 @@
-import React, { forwardRef } from 'react';
+import { forwardRef, useMemo } from 'react';
+
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import {
   Box,
   BoxProps,
+  SvgIcon,
   SxProps,
   Theme,
-  SvgIcon,
-  useTheme
+  useTheme,
 } from '@mui/material';
 
 const FontSizes = {
@@ -16,7 +17,7 @@ const FontSizes = {
   lg: 24,
   xl: 32,
   xxl: 40,
-  xxxl: 72
+  xxxl: 72,
 };
 
 interface Props {
@@ -27,6 +28,7 @@ interface Props {
 }
 
 interface FontAwesomeSvgIconProps {
+  /* eslint-disable @typescript-eslint/no-explicit-any */
   icon: any;
   fontSize: number | undefined;
 }
@@ -35,7 +37,7 @@ interface FontAwesomeSvgIconProps {
 const FontAwesomeSvgIcon = forwardRef<SVGSVGElement, FontAwesomeSvgIconProps>(
   ({ icon, fontSize }, ref) => {
     const {
-      icon: [width, height, , , svgPathData]
+      icon: [width, height, , , svgPathData],
     } = icon;
 
     return (
@@ -43,7 +45,7 @@ const FontAwesomeSvgIcon = forwardRef<SVGSVGElement, FontAwesomeSvgIconProps>(
         ref={ref}
         viewBox={`0 0 ${width as string} ${height as string}`}
         sx={{
-          fontSize: fontSize ?? '14px'
+          fontSize: fontSize ?? '14px',
         }}
       >
         {typeof svgPathData === 'string' ? (
@@ -62,7 +64,7 @@ const FontAwesomeSvgIcon = forwardRef<SVGSVGElement, FontAwesomeSvgIconProps>(
         )}
       </SvgIcon>
     );
-  }
+  },
 );
 
 const IconProvider = ({
@@ -73,14 +75,21 @@ const IconProvider = ({
   sx,
   ...props
 }: Props & BoxProps): JSX.Element => {
-  const getStyles = (): SxProps<Theme> => {
-    const theme = useTheme();
-    const usedColor = theme.palette[color]
-      ? theme.palette[color]
-      : !color || color?.length === 0
-      ? '#136cac'
-      : color;
+  const theme = useTheme();
+
+  const usedColor = useMemo(() => {
+    if (theme.palette[color]) {
+      return theme.palette[color];
+    } else {
+      if (!color || color.length === 0) {
+        return '#136cac';
+      } else {
+        return color;
+      }
+    }
+  }, [theme.palette, color]);
 
+  const getStyles = (): SxProps<Theme> => {
     switch (variant) {
       case 'square':
         return {
@@ -95,7 +104,7 @@ const IconProvider = ({
           height: '36px',
           display: 'flex',
           justifyContent: 'center',
-          alignItems: 'center'
+          alignItems: 'center',
         };
       default:
         return {
@@ -105,7 +114,7 @@ const IconProvider = ({
           height: size,
           display: 'inline-flex',
           alignItems: 'center',
-          justifyContent: 'center'
+          justifyContent: 'center',
         };
     }
   };
@@ -114,14 +123,17 @@ const IconProvider = ({
     return key in FontSizes;
   };
 
-  const usedFontSize: number =
-    variant === 'square'
-      ? 16
-      : isKey(size)
-      ? FontSizes[size]
-      : size >= 0
-      ? size
-      : 16;
+  const usedFontSize = useMemo(() => {
+    if (variant === 'square') {
+      return 16;
+    } else if (isKey(size)) {
+      return FontSizes[size];
+    } else if (size >= 0) {
+      return size;
+    } else {
+      return 16;
+    }
+  }, [variant, size]);
 
   return (
     <Box component="span" sx={getStyles()} {...props}>