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

package/dist/es/types/DesignSystemProvider.d.ts

@@ -1,13 +1,13 @@
-import React, { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 type Theme = 'Default' | 'Ep';
 export interface DesignSystemContextValues {
     isDarkTheme: boolean;
     themeName: Theme;
     toggleDarkTheme: () => void;
 }
-export declare const DesignSystemContext: React.Context<DesignSystemContextValues>;
+export declare const DesignSystemContext: import("react").Context<DesignSystemContextValues>;
 interface Props {
     name?: Theme;
 }
-declare const DesignSystemProvider: ({ children, name: themeName }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element;
+declare const DesignSystemProvider: ({ children, name: themeName, }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element;
 export default DesignSystemProvider;

package/dist/es/types/components/Accordion/Accordion.d.ts

@@ -1,9 +1,11 @@
-import { MouseEventHandler } from 'react';
+import { MouseEventHandler, ReactNode } from 'react';
 import { AccordionProps } from '@mui/material';
 interface Props extends AccordionProps {
     title?: string;
     summaryHeight?: number;
     expanded?: boolean;
+    children: NonNullable<ReactNode>;
+    disabled?: boolean;
     onClick?: MouseEventHandler;
 }
 declare const Accordion: {

package/dist/es/types/components/Chip/Chip.d.ts

@@ -1,12 +1,12 @@
-import React from 'react';
-import { ChipProps as ChipPropsMUI } from '@mui/material';
+import { MouseEvent } from 'react';
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { ChipProps as ChipPropsMUI } from '@mui/material';
 interface Props extends Omit<ChipPropsMUI, 'suffix' | 'prefix' | 'onDelete' | 'onDeleteIcon' | 'variant'> {
     variant: 'filled' | 'outlined' | 'status' | 'statusFilled';
     label: string;
     prefixIcon?: IconDefinition;
     suffixIcon?: IconDefinition;
-    suffixAction?: (e: React.MouseEvent) => void;
+    suffixAction?: (e: MouseEvent) => void;
     suffixTooltip?: string;
     tooltip?: string;
     maxWidth?: string | number;

package/dist/es/types/components/Datatable/Datatable.d.ts

@@ -1,3 +1,3 @@
 import { Props } from './datatable.interface';
-declare const Datatable: <T extends {}>({ onLoad, onSort, sortInfo, withHeader, withPagination, columns, ...props }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+declare const Datatable: <T extends object>({ onLoad, onSort, sortInfo, withHeader, withPagination, columns, ...props }: Props<T>) => import("react/jsx-runtime").JSX.Element;
 export default Datatable;

package/dist/es/types/components/Datatable/DatatableCellRender.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const DatatableCellRender: ({ data }: {
     data: string;
 }) => JSX.Element;

package/dist/es/types/components/Datatable/datatable.interface.d.ts

@@ -49,5 +49,5 @@ type WithDetailsProps<T, D> = {
 type WithoutDetailsProps<T> = {
     onLoad: () => Promise<DatatableDataSet<T>>;
 };
-export type Props<T extends {}> = BaseProps<T> & (WithoutPaginationProps | PaginationProps) & (WithDetailsProps<T, RowDetail> | WithoutDetailsProps<T>);
+export type Props<T extends object> = BaseProps<T> & (WithoutPaginationProps | PaginationProps) & (WithDetailsProps<T, RowDetail> | WithoutDetailsProps<T>);
 export {};

package/dist/es/types/components/Datatable/use-pagination-props.hook.d.ts

@@ -1,3 +1,3 @@
 import { PaginationProps, Props } from './datatable.interface';
-declare const usePaginationProps: <T extends {}>(props: {} | Props<T>) => Omit<PaginationProps, 'withPagination'>;
+declare const usePaginationProps: <T extends object>(props: Props<T> | object) => Omit<PaginationProps, "withPagination">;
 export default usePaginationProps;

package/dist/es/types/components/EmbbededNotification/EmbeddedNotification.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { BoxProps } from '@mui/material';
+import { BoxProps } from '@mui/system';
 interface Props extends BoxProps {
     variant: 'warning' | 'error' | 'success' | 'infos';
     title: string;

package/dist/es/types/components/Form/DatePicker/DatePicker.d.ts

@@ -1,13 +1,14 @@
 import { DatePickerProps } from '@mui/x-date-pickers-pro';
+import { Dayjs } from 'dayjs';
 import 'dayjs/locale/fr';
-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;
     width?: string;
     locale?: 'fr' | 'en';
 }
-declare const DatePicker: <T extends {} | undefined>({ value, onChange, error, success, helperText, width, locale, ...props }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+declare const DatePicker: <T extends Dayjs>({ value, onChange, error, success, helperText, width, locale, ...props }: Props<T>) => import("react/jsx-runtime").JSX.Element;
 export default DatePicker;

package/dist/es/types/components/Form/MultiSelect/MultiSelect.d.ts

@@ -1,18 +1,23 @@
+import { FocusEventHandler } from 'react';
 import { SelectProps } from '@mui/material';
 interface Props<T> extends Omit<SelectProps<T[]>, 'value' | 'onChange' | 'value' | 'color' | 'error'> {
     label: string;
     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;
 }
 declare const MultiSelect: {
-    <T>({ value, label, options, color, error, placeholder, helperText, width, getRenderValue, getKeyValue, onChange, onBlur, disabled, ...props }: Props<T>): import("react/jsx-runtime").JSX.Element;
+    <T>({ value, label, options, color, error, placeholder, helperText, width, getRenderValue, getKeyValue, onChange, disabled, ...props }: Props<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default MultiSelect;

package/dist/es/types/components/Form/Select/Select.d.ts

@@ -1,17 +1,22 @@
+import { BaseSyntheticEvent } from 'react';
 import { SelectProps } from '@mui/material';
 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;
 }
 declare const Select: {
-    <T>({ value, label, options, color, error, placeholder, onChange, getRenderValue, helperText, onBlur, width, disabled, ...props }: Props<T>): import("react/jsx-runtime").JSX.Element;
+    <T>({ value, label, options, color, error, placeholder, helperText, width, disabled, onChange, getRenderValue, ...props }: Props<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Select;

package/dist/es/types/components/Form/TextField/TextField.d.ts

@@ -1,9 +1,7 @@
-import { FocusEventHandler, ReactNode } from 'react';
-import { InputProps as StandardInputProps, TextFieldProps } from '@mui/material';
+import React, { FocusEventHandler, ReactNode } from 'react';
+import { TextFieldProps } from '@mui/material';
 interface Props extends Omit<TextFieldProps, 'error'> {
     error?: string;
-    onBlur?: FocusEventHandler<unknown>;
-    onChange?: StandardInputProps['onChange'];
     label: string;
     value?: string | unknown;
     name?: string;
@@ -12,6 +10,9 @@ 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;
 }
 declare const TextField: {
     ({ name, value, error, onBlur, onChange, label, disabled, width, endAdornment, placeholder, maxLength, ...props }: Props): import("react/jsx-runtime").JSX.Element;

package/dist/es/types/components/IconButton/IconButton.d.ts

@@ -1,5 +1,5 @@
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-import { IconButtonProps } from '@mui/material';
+import { IconButtonProps, SxProps, Theme } from '@mui/material';
 import { Placement } from '../Tooltip/tooltip.interface';
 interface Props extends IconButtonProps {
     icon: IconDefinition;
@@ -7,6 +7,9 @@ interface Props extends IconButtonProps {
     positionGroup?: 'left' | 'middle' | 'right';
     tooltipText?: string;
     tooltipPosition?: Placement;
+    size?: 'small' | 'medium';
+    sx?: SxProps<Theme>;
+    onClick?: () => void;
 }
 declare const IconButton: {
     ({ icon, variant, positionGroup, tooltipText, tooltipPosition, size, ...iconButtonProps }: Props): import("react/jsx-runtime").JSX.Element;

package/dist/es/types/components/IconProvider/IconProvider.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { BoxProps } from '@mui/material';
 declare const FontSizes: {

package/dist/es/types/components/Modal/Dialog/Dialog.d.ts

@@ -1,3 +1,3 @@
 import { ModalProps } from '../modal.interface';
-declare const Dialog: ({ title, open, onClose, component, icon, ...props }: Omit<ModalProps, 'footer' | 'cardProps' | 'size'>) => import("react/jsx-runtime").JSX.Element;
+declare const Dialog: ({ title, open, onClose, component, icon, ...props }: Omit<ModalProps, "footer" | "cardProps" | "size">) => import("react/jsx-runtime").JSX.Element;
 export default Dialog;

package/dist/es/types/components/Modal/Drawer/Drawer.d.ts

@@ -1,3 +1,3 @@
 import { ModalProps } from '../modal.interface';
-declare const Drawer: ({ title, open, onClose, component, footer, cardProps, size, ...props }: Omit<ModalProps, 'withHeaderDivider' | 'icon'>) => import("react/jsx-runtime").JSX.Element;
+declare const Drawer: ({ title, open, onClose, component, footer, cardProps, size, ...props }: Omit<ModalProps, "withHeaderDivider" | "icon">) => import("react/jsx-runtime").JSX.Element;
 export default Drawer;

package/dist/es/types/components/Modal/modal.interface.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import { ReactNode } from 'react';
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { CardProps } from '@mui/material';
 import { ModalProps as ModalPropsMUI } from '@mui/material/Modal';
@@ -10,15 +10,15 @@ export interface ModalProps extends Omit<ModalPropsMUI, 'component' | 'open' | '
     open: boolean;
     title?: string;
     size?: 'small' | 'large';
-    component: ReactElement<any> | null;
-    footer?: ReactElement<any> | null;
+    component: ReactNode | null;
+    footer?: ReactNode | null;
     cardProps?: Partial<CardProps>;
     className?: string;
     icon?: IconDefinition;
     onClose?: () => void;
 }
 export type DialogTitleProps<T extends OverridableTypeMap> = DefaultComponentProps<T> & {
-    children?: React.ReactNode;
+    children?: ReactNode;
     icon?: IconDefinition | null;
     onClose: () => void;
 };

package/dist/es/types/components/NotistackAdapter/NotistackAdapter.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { CustomContentProps } from 'notistack';
-declare const NotistackAdapter: React.ForwardRefExoticComponent<CustomContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const NotistackAdapter: import("react").ForwardRefExoticComponent<CustomContentProps & import("react").RefAttributes<HTMLDivElement>>;
 export default NotistackAdapter;

package/dist/es/types/components/UploadDocument/FileUploaderSingle.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface Props {
     setFile: (file: File | null) => void;
     removeExistingFile: () => void;

package/package.json

@@ -1,35 +1,33 @@
 {
   "name": "@groupeactual/ui-kit",
-  "version": "1.5.2",
+  "version": "1.6.0-beta.4",
   "type": "module",
   "description": "A simple template for a custom React component library",
   "devDependencies": {
-    "@babel/core": "^7.24.4",
-    "@babel/preset-env": "^7.24.4",
-    "@babel/preset-react": "^7.24.1",
-    "@babel/preset-typescript": "^7.24.1",
-    "@groupeactual/code-quality-front": "^1.1.1",
+    "@groupeactual/code-quality-front": "1.2.0-beta.5",
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.3",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
     "@mdx-js/react": "^3.0.1",
-    "@types/lodash": "^4.17.0",
-    "@types/react": "^18.2.75",
+    "@types/lodash": "^4.17.7",
+    "@types/react": "^18.3.4",
     "@types/styled-components": "^5.1.34",
     "babel-loader": "^9.1.3",
-    "clsx": "^2.1.0",
-    "css-loader": "^7.1.1",
-    "framer-motion": "^11.0.27",
-    "html-webpack-plugin": "^5.6.0",
+    "clsx": "^2.1.1",
+    "css-loader": "^7.1.2",
+    "framer-motion": "^11.3.28",
     "identity-obj-proxy": "^3.0.0",
     "lodash": "^4.17.21",
-    "postcss": "^8.4.38",
-    "prettier": "^3.2.5",
+    "postcss": "^8.4.41",
+    "prettier": "^3.3.3",
     "prop-types": "^15.8.1",
-    "sass": "^1.74.1",
-    "sass-loader": "^14.1.1",
+    "sass": "^1.77.8",
+    "sass-loader": "^16.0.1",
     "style-loader": "^4.0.0",
-    "styled-components": "^6.1.8",
-    "tslib": "^2.6.2",
-    "typescript": "^4.9.5",
-    "webpack": "^5.91.0"
+    "styled-components": "^6.1.12",
+    "tslib": "^2.6.3",
+    "typescript": "^5.5.4"
   },
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.mjs",
@@ -39,22 +37,22 @@
   ],
   "types": "dist/es/types/index.d.ts",
   "dependencies": {
-    "@emotion/is-prop-valid": "^1.2.2",
-    "@emotion/react": "^11.11.4",
-    "@emotion/serialize": "^1.1.4",
-    "@emotion/styled": "^11.11.5",
-    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@emotion/is-prop-valid": "^1.3.0",
+    "@emotion/react": "^11.13.0",
+    "@emotion/serialize": "^1.3.0",
+    "@emotion/styled": "^11.13.0",
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
     "@fortawesome/pro-regular-svg-icons": "git+https://github.com/actualtysoft/pro-regular-svg-icons.git#6.4.2",
     "@fortawesome/pro-solid-svg-icons": "git+https://github.com/actualtysoft/pro-solid-svg-icons.git#6.4.2",
-    "@mui/material": "^5.15.15",
-    "@mui/system": "^5.15.15",
-    "@mui/x-date-pickers": "^6.11.0",
-    "@mui/x-date-pickers-pro": "^6.11.0",
-    "dayjs": "^1.11.10",
+    "@mui/material": "^5.16.7",
+    "@mui/system": "^5.16.7",
+    "@mui/x-date-pickers": "^7.13.0",
+    "@mui/x-date-pickers-pro": "^7.13.0",
+    "dayjs": "^1.11.12",
     "notistack": "^3.0.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "@groupeactual/design-tokens": "1.5.2"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "@groupeactual/design-tokens": "1.6.0-beta.4"
   },
   "peerDependencies": {
     "react": "^18.2.0",

package/src/DesignSystemProvider.tsx

@@ -1,9 +1,4 @@
-import React, {
-  PropsWithChildren,
-  createContext,
-  useContext,
-  useState
-} from 'react';
+import { PropsWithChildren, createContext, useContext, useState } from 'react';
 
 import { useMaterialThemeTokens } from '@groupeactual/design-tokens';
 import { ThemeProvider, createTheme } from '@mui/material';
@@ -24,7 +19,7 @@ export const DesignSystemContext = createContext<DesignSystemContextValues>({
   themeName: 'Default',
   toggleDarkTheme: () => {
     return;
-  }
+  },
 });
 
 interface Props {
@@ -42,7 +37,7 @@ const MaterialThemeProvider = ({ children }: PropsWithChildren<unknown>) => {
 
 const DesignSystemProvider = ({
   children,
-  name: themeName = 'Default'
+  name: themeName = 'Default',
 }: PropsWithChildren<Props>) => {
   const [isDarkTheme, setIsDarkTheme] = useState(false);
 

package/src/components/Accordion/Accordion.tsx

@@ -1,4 +1,4 @@
-import React, {
+import {
   MouseEventHandler,
   ReactNode,
   useEffect,
@@ -23,6 +23,8 @@ interface Props extends AccordionProps {
   title?: string;
   summaryHeight?: number;
   expanded?: boolean;
+  children: NonNullable<ReactNode>;
+  disabled?: boolean;
   onClick?: MouseEventHandler;
 }
 
@@ -74,9 +76,9 @@ const Accordion = ({
       </AccordionSummary>
       <AccordionDetails
         sx={{
-          backgroundColor: 'greyXLight',
+          backgroundColor: theme.palette.greyXLight,
           borderTop: '1px solid',
-          borderColor: 'greyLightDefaultBorder',
+          borderColor: theme.palette.greyLightDefaultBorder,
         }}
       >
         {children}

package/src/components/BannerNotification/BannerNotification.tsx

@@ -2,8 +2,7 @@ import { useMemo } from 'react';
 
 import { faBell, faTimes } from '@fortawesome/pro-solid-svg-icons';
 import { BannerNotificationStyle } from '@groupeactual/design-tokens';
-import { Alert, AlertProps, styled } from '@mui/material';
-import { useTheme } from '@mui/material';
+import { Alert, AlertProps, styled, useTheme } from '@mui/material';
 
 import IconProvider from '../IconProvider/IconProvider';
 
@@ -17,7 +16,7 @@ const BannerNotification = ({ text, severity, onClose }: Props) => {
 
   const StyledBannerNotification = useMemo(
     () => styled(Alert)(BannerNotificationStyle(theme)),
-    []
+    [],
   );
 
   return (

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,11 +1,11 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 
 import { BreadcrumbsStyle } from '@groupeactual/design-tokens';
 import {
   Breadcrumbs as BreadcrumbsMui,
   BreadcrumbsProps,
   styled,
-  useTheme
+  useTheme,
 } from '@mui/material';
 
 import Link from '../Link';
@@ -25,7 +25,7 @@ const Breadcrumbs = ({ PageName, links, ...props }: Props) => {
   const theme = useTheme();
   const StyledBreadcrumbs = useMemo(
     () => styled(BreadcrumbsMui)(BreadcrumbsStyle(theme)),
-    [theme]
+    [theme],
   );
 
   return (

package/src/components/Button/Button.tsx

@@ -1,13 +1,13 @@
-import React, { ReactNode, useMemo } from 'react';
+import { ReactNode, useMemo } from 'react';
+
+import { ButtonStyle } from '@groupeactual/design-tokens';
 import {
   Button as ButtonMUI,
-  styled,
   ButtonProps,
-  useTheme
+  styled,
+  useTheme,
 } from '@mui/material';
 
-import { ButtonStyle } from '@groupeactual/design-tokens';
-
 interface Props extends Omit<ButtonProps, 'variant' | 'children'> {
   variant?: 'primary' | 'secondary';
   children?: ReactNode;
@@ -17,7 +17,7 @@ const Button = ({ variant, children, ...props }: Props) => {
   const theme = useTheme();
   const StyledButton = useMemo(
     () => styled(ButtonMUI)(ButtonStyle(theme)),
-    [theme]
+    [theme],
   );
 
   return (

package/src/components/Chip/Chip.tsx

@@ -1,15 +1,15 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { MouseEvent, useMemo, useRef, useState } from 'react';
+
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { ChipStyle } from '@groupeactual/design-tokens';
 import {
   Box,
   Chip as ChipMUI,
+  ChipProps as ChipPropsMUI,
   Tooltip,
   styled,
-  ChipProps as ChipPropsMUI,
-  useTheme
+  useTheme,
 } from '@mui/material';
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-
-import { ChipStyle } from '@groupeactual/design-tokens';
 
 import IconProvider from '../IconProvider';
 
@@ -22,7 +22,7 @@ interface Props
   label: string;
   prefixIcon?: IconDefinition;
   suffixIcon?: IconDefinition;
-  suffixAction?: (e: React.MouseEvent) => void;
+  suffixAction?: (e: MouseEvent) => void;
   suffixTooltip?: string;
   tooltip?: string;
   maxWidth?: string | number;
@@ -48,19 +48,22 @@ const Chip = ({
 
   const ref = useRef<HTMLDivElement>(null);
 
-  let backgroundColor: string =
-    props.color && theme.palette[props.color]
-      ? typeof theme.palette[props.color] === 'object'
-        ? theme.palette[props.color]['main']
-        : theme.palette[props.color]
-      : props.color ?? 'white';
+  const backgroundColor: string = useMemo(() => {
+    if (props.color && theme.palette[props.color]) {
+      if (typeof theme.palette[props.color] === 'object') {
+        return theme.palette[props.color]['main'];
+      } else {
+        return theme.palette[props.color] as string;
+      }
+    } else if (props.color || variant === 'status') {
+      return 'white';
+    } else if (variant === 'filled' || variant === 'statusFilled') {
+      // opacity 0.08
+      return `${backgroundColor}14`;
+    }
 
-  if (variant === 'filled' || variant === 'statusFilled') {
-    // opacity 0.08
-    backgroundColor = `${backgroundColor}14`;
-  } else if (variant === 'status') {
-    backgroundColor = 'white';
-  }
+    return '';
+  }, [props.color, theme.palette]);
 
   return (
     <Tooltip title={tooltip} placement="right-start" open={isTooltipOpen}>
@@ -88,24 +91,24 @@ const Chip = ({
                   '&:hover': {
                     borderColor: '#004f88 !important',
                     '.MuiChip-deleteIcon': {
-                      color: '#004f88 !important'
-                    }
-                  }
+                      color: '#004f88 !important',
+                    },
+                  },
                 },
               '&.MuiChip-colorPrimary': suffixIcon &&
                 suffixAction && {
                   '&:hover': {
-                    backgroundColor: '#004f88 !important'
-                  }
+                    backgroundColor: '#004f88 !important',
+                  },
                 },
               '&.MuiChip-colorDefault': suffixIcon &&
                 suffixAction && {
                   '&:hover': {
                     '.MuiChip-deleteIcon': {
-                      color: '#004f88 !important'
-                    }
-                  }
-                }
+                      color: '#004f88 !important',
+                    },
+                  },
+                },
             }}
             avatar={
               prefixIcon ? <IconProvider icon={prefixIcon} size="sm" /> : <></>
@@ -127,7 +130,7 @@ const Chip = ({
                     }
                   }}
                   sx={{
-                    cursor: suffixAction ? 'pointer !important' : 'default'
+                    cursor: suffixAction ? 'pointer !important' : 'default',
                   }}
                   size="sm"
                 />

package/src/components/Datatable/Datatable.tsx

@@ -24,7 +24,7 @@ import Text from '../Text';
 import { RowDetail as D, Props } from './datatable.interface';
 import usePaginationProps from './use-pagination-props.hook';
 
-const Datatable = <T extends {}>({
+const Datatable = <T extends object>({
   onLoad,
   onSort = () => undefined,
   sortInfo = null,
@@ -102,10 +102,10 @@ const Datatable = <T extends {}>({
                       <TableCell
                         key={name}
                         variant="head"
-                        height={hasTopTitle ? '55px' : 'inherit'}
                         sx={{
                           width: width,
                           maxWidth: width,
+                          height: hasTopTitle ? '55px' : 'inherit',
                         }}
                       >
                         {hasTopTitle && (
@@ -140,7 +140,7 @@ const Datatable = <T extends {}>({
                                 icon={isAsc ? faArrowUpLong : faArrowDownLong}
                                 variant="table"
                                 size="small"
-                                style={{
+                                sx={{
                                   visibility:
                                     sortActive || hover === name
                                       ? 'visible'
@@ -184,7 +184,7 @@ const Datatable = <T extends {}>({
                 </TableRow>
                 {'details' in record && record.details && (
                   <TableRow>
-                    <TableCell colSpan={columns.length}>
+                    <TableCell sx={{ columnSpan: columns.length }}>
                       {record.details}
                     </TableCell>
                   </TableRow>

package/src/components/Datatable/datatable.interface.ts

@@ -61,6 +61,6 @@ type WithoutDetailsProps<T> = {
   onLoad: () => Promise<DatatableDataSet<T>>;
 };
 
-export type Props<T extends {}> = BaseProps<T> &
+export type Props<T extends object> = BaseProps<T> &
   (WithoutPaginationProps | PaginationProps) &
   (WithDetailsProps<T, RowDetail> | WithoutDetailsProps<T>);