@groupeactual/ui-kit 1.7.0-beta.0 → 1.7.0-beta.4

package/package.json

@@ -1,34 +1,34 @@
 {
   "name": "@groupeactual/ui-kit",
-  "version": "1.7.0-beta.0",
+  "version": "1.7.0-beta.4",
   "type": "module",
   "description": "A simple template for a custom React component library",
   "devDependencies": {
-    "@babel/core": "^7.25.2",
-    "@babel/preset-env": "^7.25.4",
-    "@babel/preset-react": "^7.24.7",
-    "@babel/preset-typescript": "^7.24.7",
-    "@groupeactual/code-quality-front": "^1.2.1",
-    "@mdx-js/react": "^3.0.1",
-    "@types/google.picker": "^0.0.43",
-    "@types/lodash": "^4.17.12",
+    "@babel/core": "^7.26.0",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.25.9",
+    "@babel/preset-typescript": "^7.26.0",
+    "@groupeactual/code-quality-front": "^1.3.0",
+    "@mdx-js/react": "^3.1.0",
+    "@types/google.picker": "^0.0.46",
+    "@types/lodash": "^4.17.13",
     "@types/react": "^18.3.12",
     "@types/styled-components": "^5.1.34",
-    "babel-loader": "^9.1.3",
+    "babel-loader": "^9.2.1",
     "clsx": "^2.1.1",
     "css-loader": "^7.1.2",
-    "framer-motion": "^11.3.31",
+    "framer-motion": "^11.11.17",
     "identity-obj-proxy": "^3.0.0",
     "lodash": "^4.17.21",
-    "postcss": "^8.4.47",
+    "postcss": "^8.4.49",
     "prettier": "^3.3.3",
     "prop-types": "^15.8.1",
-    "sass": "^1.77.8",
-    "sass-loader": "^16.0.2",
+    "sass": "^1.81.0",
+    "sass-loader": "^16.0.3",
     "style-loader": "^4.0.0",
     "styled-components": "^6.1.13",
-    "tslib": "^2.7.0",
-    "typescript": "^5.5.4"
+    "tslib": "^2.8.1",
+    "typescript": "^5.6.3"
   },
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -42,8 +42,8 @@
     "@emotion/react": "^11.13.3",
     "@emotion/serialize": "^1.3.2",
     "@emotion/styled": "^11.13.0",
-    "@fortawesome/fontawesome-svg-core": "^6.6.0",
-    "@fortawesome/free-brands-svg-icons": "^6.6.0",
+    "@fortawesome/fontawesome-svg-core": "6.6.0",
+    "@fortawesome/free-brands-svg-icons": "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.16.7",
@@ -56,13 +56,13 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-google-picker": "^0.1.0",
-    "@groupeactual/design-tokens": "1.7.0-beta.0"
+    "@groupeactual/design-tokens": "1.7.0-beta.4"
   },
   "scripts": {
     "build": "rollup -c",
     "build:watch": "rollup --bundleConfigAsCjs -c -w",
     "dev": "npm run build:watch",
-    "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx",
+    "eslint": "eslint --config \"eslint.config.js\" --color \".\"",
     "lint": "npm run eslint"
   }
 }

package/src/components/Accordion/Accordion.tsx

@@ -17,7 +17,7 @@ import {
   useTheme,
 } from '@mui/material';
 
-import IconProvider from '@/components/IconProvider';
+import IconButton from '@/components/IconButton';
 
 interface Props extends AccordionProps {
   title?: string;
@@ -64,7 +64,9 @@ const Accordion = ({
       {...props}
     >
       <AccordionSummary
-        expandIcon={<IconProvider icon={faChevronDown} size="md" />}
+        expandIcon={
+          <IconButton variant="table" size="medium" icon={faChevronDown} />
+        }
         sx={{
           fontWeight: 500,
           fontSize: 18,
@@ -87,6 +89,4 @@ const Accordion = ({
   );
 };
 
-Accordion.displayName = 'Accordion';
-
 export default Accordion;

package/src/components/BannerNotification/BannerNotification.tsx

@@ -30,6 +30,4 @@ const BannerNotification = ({ text, severity, onClose }: Props) => {
   );
 };
 
-BannerNotification.displayName = 'BannerNotification';
-
 export default BannerNotification;

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -42,6 +42,4 @@ const Breadcrumbs = ({ PageName, links, ...props }: Props) => {
   );
 };
 
-Breadcrumbs.displayName = 'Breadcrumbs';
-
 export default Breadcrumbs;

package/src/components/Button/Button.tsx

@@ -27,6 +27,4 @@ const Button = ({ variant, children, ...props }: Props) => {
   );
 };
 
-Button.displayName = 'Button';
-
 export default Button;

package/src/components/Chip/Chip.tsx

@@ -22,7 +22,7 @@ interface Props
   label: string;
   prefixIcon?: IconDefinition;
   suffixIcon?: IconDefinition;
-  suffixAction?: (e: MouseEvent) => void;
+  suffixAction?: (_e: MouseEvent) => void;
   suffixTooltip?: string;
   tooltip?: string;
   maxWidth?: string | number;
@@ -145,6 +145,4 @@ const Chip = ({
   );
 };
 
-Chip.displayName = 'Chip';
-
 export default Chip;

package/src/components/Datatable/Datatable.tsx

@@ -32,6 +32,7 @@ const Datatable = <T extends object>({
   withHeader = false,
   withPagination,
   columns,
+  isTableLayoutFixed = false,
   ...props
 }: Props<T>) => {
   const { trans, limits, withTopPagination, setPage, setLimit } =
@@ -84,8 +85,14 @@ const Datatable = <T extends object>({
   return (
     <StyledDatatable>
       {withTopPagination && <SyncedPagination />}
-      <TableContainer>
-        <Table>
+      <TableContainer
+        sx={{ display: 'flex', maxWidth: '100%', overflow: 'auto' }}
+      >
+        <Table
+          sx={{
+            tableLayout: isTableLayoutFixed ? 'fixed' : 'auto',
+          }}
+        >
           {withHeader && (
             <TableHead>
               <TableRow data-testid="datatable-head-row">
@@ -104,8 +111,9 @@ const Datatable = <T extends object>({
                         key={name}
                         variant="head"
                         sx={{
+                          overflow: 'hidden',
+                          textOverflow: 'ellipsis',
                           width: width,
-                          maxWidth: width,
                           height: hasTopTitle ? '55px' : 'inherit',
                         }}
                       >
@@ -171,8 +179,10 @@ const Datatable = <T extends object>({
                       key={name}
                       variant="body"
                       sx={{
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        borderColor: 'greyLightDefaultBorder',
                         width: width,
-                        maxWidth: width,
                         border:
                           'details' in record && record.details
                             ? '0px'
@@ -184,8 +194,19 @@ const Datatable = <T extends object>({
                   ))}
                 </TableRow>
                 {'details' in record && record.details && (
-                  <TableRow>
-                    <TableCell sx={{ columnSpan: columns.length }}>
+                  <TableRow
+                    sx={{
+                      borderBottom: '1px solid',
+                      width: record.width,
+                      borderColor: 'greyLightDefaultBorder',
+                    }}
+                  >
+                    <TableCell
+                      sx={{
+                        columnSpan: columns.length,
+                        borderBottom: 'none',
+                      }}
+                    >
                       {record.details}
                     </TableCell>
                   </TableRow>

package/src/components/Datatable/DatatableCellRender.tsx

@@ -9,8 +9,9 @@ const DatatableCellRender = ({ data }: { data: string }): JSX.Element => {
   }
 
   return (
-    <Tooltip title={data} placement="top">
+    <Tooltip title={data} placement="bottom-start">
       <Text
+        variant="body2Regular"
         style={{
           whiteSpace: 'nowrap',
           overflow: 'hidden',

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

@@ -14,7 +14,7 @@ export interface PaginationTrans {
 
 export type ColumnDatatable<T> = {
   name: string;
-  render: (record: T) => JSX.Element;
+  render: (_record: T) => JSX.Element;
   title?: string;
   topTitle?: string;
   width?: string;
@@ -30,7 +30,8 @@ type BaseProps<T> = {
   withPagination: boolean;
   withHeader?: boolean;
   sortInfo?: SortInfo | null;
-  onSort?: (info: SortInfo | null) => void;
+  isTableLayoutFixed?: boolean;
+  onSort?: (_info: SortInfo | null) => void;
 };
 
 type WithoutPaginationProps = {
@@ -39,8 +40,8 @@ type WithoutPaginationProps = {
 
 export type PaginationProps = {
   withPagination: true;
-  setPage: (page: number) => void;
-  setLimit: (limit: number) => void;
+  setPage: (_page: number) => void;
+  setLimit: (_limit: number) => void;
   trans: PaginationTrans;
   withTopPagination?: boolean;
   limits?: number[];

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

@@ -7,8 +7,8 @@ const usePaginationProps = <T extends object>(
   let trans = {} as PaginationTrans;
   let limits: number[] = [3, 5, 10, 20];
   let withTopPagination = false;
-  let setPage: (page: number) => void = () => {};
-  let setLimit: (limit: number) => void = () => {};
+  let setPage: (_page: number) => void = () => {};
+  let setLimit: (_limit: number) => void = () => {};
 
   if ('trans' in props && props.trans) {
     trans = props.trans;

package/src/components/EmbbededNotification/EmbeddedNotification.tsx

@@ -99,6 +99,4 @@ const EmbeddedNotification = ({
   );
 };
 
-EmbeddedNotification.displayName = 'EmbeddedNotification';
-
 export default EmbeddedNotification;

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

@@ -1,7 +1,12 @@
 import React, { useMemo, useRef } from 'react';
 
-import { faSearch } from '@fortawesome/pro-regular-svg-icons';
-import { faCheck, faCircleX, faTimes } from '@fortawesome/pro-solid-svg-icons';
+import {
+  faCheck,
+  faChevronDown,
+  faSearch,
+  faTimes,
+} from '@fortawesome/pro-regular-svg-icons';
+import { faCircleX } from '@fortawesome/pro-solid-svg-icons';
 import { AutoCompleteStyle } from '@groupeactual/design-tokens';
 import {
   type AutocompleteProps,
@@ -21,20 +26,27 @@ import IconProvider from '@/components/IconProvider';
 interface AutocompleteMultipleSelectProps<T>
   extends Omit<
     AutocompleteProps<T, true, true, false>,
-    'onChange' | 'value' | 'options' | 'renderInput' | 'error' | 'autocomplete'
+    | 'onChange'
+    | 'value'
+    | 'options'
+    | 'renderInput'
+    | 'error'
+    | 'autocomplete'
+    | 'searchIcon'
   > {
   value: T[] | undefined;
   label?: string;
   helperText?: string;
   placeholder?: string;
   options: T[];
-  getOptionLabel: (option: T) => string;
-  getKeyValue: (option: T) => string;
-  onChange: (value: T[]) => void;
-  getOptionDisabled?: (option: T) => boolean;
+  getOptionLabel: (_option: T) => string;
+  getKeyValue: (_option: T) => string;
+  onChange: (_value: T[]) => void;
+  getOptionDisabled?: (_option: T) => boolean;
   color?: 'success';
   width?: number | string;
   error?: string;
+  searchIcon?: boolean;
 }
 
 const AutocompleteMultipleSelect = <T,>({
@@ -51,6 +63,7 @@ const AutocompleteMultipleSelect = <T,>({
   color,
   helperText,
   error,
+  searchIcon = false,
   ...props
 }: AutocompleteMultipleSelectProps<T>) => {
   const theme = useTheme();
@@ -104,10 +117,12 @@ const AutocompleteMultipleSelect = <T,>({
   const getPopupIcon = useMemo(() => {
     if (color === 'success') {
       return faCheck;
+    } else if (searchIcon) {
+      return faSearch;
     }
 
-    return faSearch;
-  }, [color]);
+    return faChevronDown;
+  }, [color, searchIcon]);
 
   const withPlaceholder = !value?.length && !!placeholder;
   const boxRef = useRef<HTMLHeadingElement>(null);

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

@@ -1,7 +1,11 @@
 import React, { useMemo } from 'react';
 
-import { faSearch } from '@fortawesome/pro-regular-svg-icons';
-import { faCheck, faTimes } from '@fortawesome/pro-solid-svg-icons';
+import {
+  faCheck,
+  faChevronDown,
+  faSearch,
+  faTimes,
+} from '@fortawesome/pro-regular-svg-icons';
 import { AutoCompleteStyle } from '@groupeactual/design-tokens';
 import {
   Autocomplete,
@@ -27,7 +31,6 @@ interface Props<T>
     | 'renderInput'
     | 'error'
     | 'getOptionLabel'
-    | 'autocomplete'
   > {
   label: string;
   options: T[];
@@ -35,11 +38,12 @@ interface Props<T>
   color?: 'success';
   placeholder?: string;
   // * Issue on MUI : MUI: The `getOptionLabel` method of Autocomplete returned undefined instead of a string
-  getOptionLabel: (option: T) => string | null | undefined;
-  onChange: (value: T | null) => void;
+  getOptionLabel: (_option: T) => string | null | undefined;
+  onChange: (_value: T | null) => void;
   value?: T | null;
   width?: number | string;
   error?: string;
+  searchIcon?: boolean;
 }
 
 const AutoCompleteSingle = <T,>({
@@ -54,6 +58,7 @@ const AutoCompleteSingle = <T,>({
   color,
   helperText,
   error,
+  searchIcon = false,
   ...props
 }: Props<T>) => {
   const theme = useTheme();
@@ -112,10 +117,12 @@ const AutoCompleteSingle = <T,>({
   const getPopupIcon = useMemo(() => {
     if (color === 'success') {
       return faCheck;
+    } else if (searchIcon) {
+      return faSearch;
     }
 
-    return faSearch;
-  }, [color]);
+    return faChevronDown;
+  }, [color, searchIcon]);
 
   return (
     <Box sx={{ width }}>
@@ -138,7 +145,7 @@ const AutoCompleteSingle = <T,>({
             },
             '& .MuiAutocomplete-popupIndicator': { transform: 'none' },
           }}
-          getOptionLabel={getOptionLabel as (option: T) => string}
+          getOptionLabel={getOptionLabel as (_option: T) => string}
           slotProps={{
             paper: {
               sx: {
@@ -217,6 +224,4 @@ const AutoCompleteSingle = <T,>({
   );
 };
 
-AutoCompleteSingle.displayName = 'AutocompleteSingle';
-
 export default AutoCompleteSingle;

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { ReactNode, useMemo } from 'react';
 
 import { faInfoCircle } from '@fortawesome/pro-solid-svg-icons';
 import { CheckboxStyle } from '@groupeactual/design-tokens';
@@ -9,22 +9,22 @@ import {
   FormControl,
   FormControlLabel,
   FormHelperText,
-  Typography,
   styled,
   useTheme,
 } from '@mui/material';
 
 import IconProvider from '@/components/IconProvider';
+import Text from '@/components/Text';
 import Tooltip from '@/components/Tooltip';
 
 interface Props {
   name: string;
   value: boolean;
-  label: string;
+  label: ReactNode;
   onChange?: (
-    field: string,
-    value: boolean,
-    shouldValidate?: boolean | undefined,
+    _field: string,
+    _value: boolean,
+    _shouldValidate?: boolean | undefined,
   ) => void;
   helperText?: string;
   error?: string;
@@ -97,25 +97,24 @@ const Checkbox = ({
           </Box>
         }
         label={
-          <Box display="flex">
-            <Typography component="span" className={getLabelClassName}>
+          <Box>
+            <Text
+              component="span"
+              variant="body1"
+              className={getLabelClassName}
+            >
               {label}
-            </Typography>
+            </Text>
             {infoBubbleContent && (
-              <Box py={0} pl={0.5} display="flex">
-                <Tooltip
-                  title={infoBubbleContent}
-                  placement={infoBubblePosition}
-                >
-                  <Box height={12} width={12}>
-                    <IconProvider
-                      icon={faInfoCircle}
-                      size="sm"
-                      color="#1d91c3"
-                    />
-                  </Box>
-                </Tooltip>
-              </Box>
+              <Tooltip
+                title={infoBubbleContent}
+                placement={infoBubblePosition}
+                sx={{
+                  ml: '6px',
+                }}
+              >
+                <IconProvider icon={faInfoCircle} size="sm" color="blueInfo" />
+              </Tooltip>
             )}
           </Box>
         }
@@ -129,6 +128,4 @@ const Checkbox = ({
   );
 };
 
-Checkbox.displayName = 'Checkbox';
-
 export default Checkbox;

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

@@ -12,33 +12,15 @@ import {
 
 import Checkbox from '@/components/Form/Checkbox';
 
-interface ItemType {
-  label: string;
-  value: boolean;
-  name: string;
-  infoBubbleContent?: string;
-  infoBubblePosition?:
-    | 'right'
-    | 'bottom'
-    | 'left'
-    | 'top'
-    | 'bottom-end'
-    | 'bottom-start'
-    | 'left-end'
-    | 'left-start'
-    | 'right-end'
-    | 'right-start'
-    | 'top-end'
-    | 'top-start'
-    | undefined;
-}
+import { CheckboxItemType } from './checkboxgroup.interface';
 
 interface CheckboxGroupProps {
   label: string;
-  options: ItemType[];
+  options: CheckboxItemType[];
   disabled?: boolean;
   error?: string;
   helperText?: string;
+  onChange?: (_selectedOptions: Record<string, boolean>) => void;
 }
 
 const CheckboxGroup = ({
@@ -47,6 +29,7 @@ const CheckboxGroup = ({
   disabled,
   error,
   helperText,
+  onChange,
 }: CheckboxGroupProps) => {
   const theme = useTheme();
   const StyledCheckboxGroupForm = useMemo(
@@ -56,10 +39,12 @@ const CheckboxGroup = ({
   const [selectedOptions, setSelectedOptions] = useState({});
 
   const handleChange = (label: string, isChecked: boolean) => {
-    setSelectedOptions({
+    const updatedOptions = {
       ...selectedOptions,
       [label]: isChecked,
-    });
+    };
+    setSelectedOptions(updatedOptions);
+    onChange?.(updatedOptions);
   };
 
   const getLegendClassName = useMemo(() => {
@@ -97,6 +82,4 @@ const CheckboxGroup = ({
   );
 };
 
-CheckboxGroup.displayName = 'CheckboxGroup';
-
 export default CheckboxGroup;

package/src/components/Form/CheckboxGroup/checkboxgroup.interface.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+
+export interface CheckboxItemType {
+  label: ReactNode;
+  value: boolean;
+  name: string;
+  infoBubbleContent?: string;
+  infoBubblePosition?:
+    | 'right'
+    | 'bottom'
+    | 'left'
+    | 'top'
+    | 'bottom-end'
+    | 'bottom-start'
+    | 'left-end'
+    | 'left-start'
+    | 'right-end'
+    | 'right-start'
+    | 'top-end'
+    | 'top-start'
+    | undefined;
+}

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

@@ -4,8 +4,9 @@ import {
   faAngleLeft,
   faAngleRight,
   faCalendarDay,
+  faCheck,
 } from '@fortawesome/pro-regular-svg-icons';
-import { faCaretDown, faCheck } from '@fortawesome/pro-solid-svg-icons';
+import { faCaretDown } from '@fortawesome/pro-solid-svg-icons';
 import { DatePickerStyle } from '@groupeactual/design-tokens';
 import {
   Box,
@@ -29,7 +30,7 @@ import IconProvider from '@/components/IconProvider';
 interface Props<T extends Dayjs>
   extends Omit<DatePickerProps<T>, 'onChange' | 'width'> {
   value: T | null | undefined;
-  onChange: (value: T | null | undefined) => void;
+  onChange: (_value: T | null | undefined) => void;
   error?: string;
   success?: boolean;
   helperText?: string;
@@ -114,6 +115,11 @@ const DatePicker = <T extends Dayjs>({
             ),
           }}
           slotProps={{
+            desktopPaper: {
+              sx: {
+                boxShadow: '0px 2px 10px 0px #2727271F',
+              },
+            },
             textField: {
               variant: 'outlined',
               error: !!error,
@@ -133,7 +139,13 @@ const DatePicker = <T extends Dayjs>({
             },
             clearButton: {
               disableRipple: true,
-              sx: { px: 0 },
+              sx: {
+                px: 0,
+                '.MuiSvgIcon-root': {
+                  width: 18,
+                  height: 18,
+                },
+              },
             },
           }}
           {...props}