@groupeactual/ui-kit 1.6.7-beta.0 → 1.7.0-beta.3

package/package.json

@@ -1,73 +1,68 @@
 {
   "name": "@groupeactual/ui-kit",
-  "version": "1.6.7-beta.0",
+  "version": "1.7.0-beta.3",
   "type": "module",
   "description": "A simple template for a custom React component library",
   "devDependencies": {
-    "@groupeactual/code-quality-front": "1.2.1",
-    "@babel/core": "^7.25.2",
-    "@babel/preset-env": "^7.25.4",
-    "@babel/preset-react": "^7.24.7",
-    "@babel/preset-typescript": "^7.24.7",
-    "@mdx-js/react": "^3.0.1",
-    "@types/google.picker": "^0.0.42",
-    "@types/lodash": "^4.17.7",
-    "@types/react": "^18.3.4",
+    "@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.41",
+    "postcss": "^8.4.49",
     "prettier": "^3.3.3",
     "prop-types": "^15.8.1",
-    "dotenv-webpack": "^8.1.0",
-    "sass": "^1.77.8",
-    "sass-loader": "^16.0.1",
+    "sass": "^1.81.0",
+    "sass-loader": "^16.0.3",
     "style-loader": "^4.0.0",
-    "styled-components": "^6.1.12",
-    "tslib": "^2.7.0",
-    "typescript": "^5.5.4"
+    "styled-components": "^6.1.13",
+    "tslib": "^2.8.1",
+    "typescript": "^5.6.3"
   },
   "main": "dist/cjs/index.js",
-  "module": "dist/es/index.mjs",
+  "module": "dist/es/index.js",
   "files": [
     "dist",
     "src"
   ],
-  "types": "dist/es/types/index.d.ts",
+  "types": "dist/es/index.d.ts",
   "dependencies": {
-    "@emotion/is-prop-valid": "^1.3.0",
+    "@emotion/is-prop-valid": "^1.3.1",
     "@emotion/react": "^11.13.3",
-    "@emotion/serialize": "^1.3.1",
+    "@emotion/serialize": "^1.3.2",
     "@emotion/styled": "^11.13.0",
-    "@react-oauth/google": "^0.12.1",
-    "react-google-picker": "^0.1.0",
-    "@fortawesome/fontawesome-svg-core": "^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",
-    "@fortawesome/free-brands-svg-icons": "^6.6.0",
     "@mui/material": "^5.16.7",
     "@mui/system": "^5.16.7",
     "@mui/x-date-pickers": "^7.15.0",
     "@mui/x-date-pickers-pro": "^7.15.0",
+    "@react-oauth/google": "^0.12.1",
     "dayjs": "^1.11.13",
     "notistack": "^3.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "@groupeactual/design-tokens": "1.6.7-beta.0"
-  },
-  "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-google-picker": "^0.1.0",
+    "@groupeactual/design-tokens": "1.7.0-beta.3"
   },
   "scripts": {
     "build": "rollup -c",
-    "build:watch": "rollup -c -w",
-    "dev": "npm run build:watch --bundleConfigAsCjs",
-    "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx",
+    "build:watch": "rollup --bundleConfigAsCjs -c -w",
+    "dev": "npm run build:watch",
+    "eslint": "eslint --config \"eslint.config.js\" --color \".\"",
     "lint": "npm run eslint"
   }
 }

package/src/DesignSystemProvider.tsx

@@ -35,7 +35,8 @@ const MaterialThemeProvider = ({ children }: PropsWithChildren<unknown>) => {
   const { themeName } =
     useContext<DesignSystemContextValues>(DesignSystemContext);
   const { muiTokens } = useMaterialThemeTokens(themeName);
-  const theme = createTheme(muiTokens);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const theme = createTheme(muiTokens as any);
 
   return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
 };

package/src/components/Accordion/Accordion.tsx

@@ -17,7 +17,7 @@ import {
   useTheme,
 } from '@mui/material';
 
-import IconProvider from '../IconProvider/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

@@ -4,7 +4,7 @@ import { faBell, faTimes } from '@fortawesome/pro-solid-svg-icons';
 import { BannerNotificationStyle } from '@groupeactual/design-tokens';
 import { Alert, AlertProps, styled, useTheme } from '@mui/material';
 
-import IconProvider from '../IconProvider/IconProvider';
+import IconProvider from '@/components/IconProvider';
 
 interface Props extends AlertProps {
   text: string;
@@ -30,6 +30,4 @@ const BannerNotification = ({ text, severity, onClose }: Props) => {
   );
 };
 
-BannerNotification.displayName = 'BannerNotification';
-
 export default BannerNotification;

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -8,8 +8,8 @@ import {
   useTheme,
 } from '@mui/material';
 
-import Link from '../Link';
-import Text from '../Text';
+import Link from '@/components/Link';
+import Text from '@/components/Text';
 
 interface LinkItem {
   link: string;
@@ -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

@@ -11,7 +11,7 @@ import {
   useTheme,
 } from '@mui/material';
 
-import IconProvider from '../IconProvider';
+import IconProvider from '@/components/IconProvider';
 
 interface Props
   extends Omit<
@@ -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

@@ -18,9 +18,10 @@ import {
   useTheme,
 } from '@mui/material';
 
-import IconButton from '../IconButton';
-import Pagination from '../Pagination';
-import Text from '../Text';
+import IconButton from '@/components/IconButton';
+import Pagination from '@/components/Pagination';
+import Text from '@/components/Text';
+
 import { RowDetail as D, Props } from './datatable.interface';
 import usePaginationProps from './use-pagination-props.hook';
 
@@ -31,6 +32,7 @@ const Datatable = <T extends object>({
   withHeader = false,
   withPagination,
   columns,
+  isTableLayoutFixed = false,
   ...props
 }: Props<T>) => {
   const { trans, limits, withTopPagination, setPage, setLimit } =
@@ -83,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">
@@ -103,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',
                         }}
                       >
@@ -170,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'
@@ -183,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

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import Text from '../Text';
-import Tooltip from '../Tooltip';
+import Text from '@/components/Text';
+import Tooltip from '@/components/Tooltip';
 
 const DatatableCellRender = ({ data }: { data: string }): JSX.Element => {
   if (!data) {
@@ -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

@@ -10,8 +10,8 @@ import {
 import { Box } from '@mui/material';
 import { BoxProps } from '@mui/system';
 
-import Icon from '../IconProvider/IconProvider';
-import Text from '../Text';
+import Text from '@/components//Text';
+import Icon from '@/components/IconProvider';
 
 interface Props extends BoxProps {
   variant: 'warning' | 'error' | 'success' | 'infos';
@@ -99,6 +99,4 @@ const EmbeddedNotification = ({
   );
 };
 
-EmbeddedNotification.displayName = 'EmbeddedNotification';
-
 export default EmbeddedNotification;

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

@@ -3,9 +3,10 @@ import React, { useMemo, useRef } from 'react';
 import {
   faCheck,
   faChevronDown,
-  faCircleX,
+  faSearch,
   faTimes,
-} from '@fortawesome/pro-solid-svg-icons';
+} from '@fortawesome/pro-regular-svg-icons';
+import { faCircleX } from '@fortawesome/pro-solid-svg-icons';
 import { AutoCompleteStyle } from '@groupeactual/design-tokens';
 import {
   type AutocompleteProps,
@@ -19,26 +20,33 @@ 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';
+import Chip from '@/components/Chip';
+import IconProvider from '@/components/IconProvider';
 
 interface AutocompleteMultipleSelectProps<T>
   extends Omit<
     AutocompleteProps<T, true, true, false>,
-    'onChange' | 'value' | 'options' | 'renderInput' | 'error'
+    | '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,>({
@@ -55,6 +63,7 @@ const AutocompleteMultipleSelect = <T,>({
   color,
   helperText,
   error,
+  searchIcon = false,
   ...props
 }: AutocompleteMultipleSelectProps<T>) => {
   const theme = useTheme();
@@ -105,6 +114,16 @@ const AutocompleteMultipleSelect = <T,>({
     return classNames.filter(Boolean).join(' ');
   }, [error, color, value]);
 
+  const getPopupIcon = useMemo(() => {
+    if (color === 'success') {
+      return faCheck;
+    } else if (searchIcon) {
+      return faSearch;
+    }
+
+    return faChevronDown;
+  }, [color, searchIcon]);
+
   const withPlaceholder = !value?.length && !!placeholder;
   const boxRef = useRef<HTMLHeadingElement>(null);
 
@@ -122,12 +141,18 @@ const AutocompleteMultipleSelect = <T,>({
           aria-placeholder={(withPlaceholder && placeholder) || ''}
           disableCloseOnSelect
           multiple
+          sx={{
+            ...props.sx,
+            '& .MuiAutocomplete-popupIndicator': { transform: 'none' },
+          }}
           disabled={disabled}
           options={options}
           slotProps={{
             paper: {
               sx: {
-                boxShadow: '0px 2px 10px 0px',
+                fontSize: '14px',
+                marginTop: '4px',
+                boxShadow: '0px 2px 10px 0px #2727271F',
               },
             },
           }}
@@ -147,8 +172,8 @@ const AutocompleteMultipleSelect = <T,>({
           popupIcon={
             <IconProvider
               className={disabled ? 'Mui-disabled SelectIcon' : 'SelectIcon'}
-              icon={color === 'success' ? faCheck : faChevronDown}
-              size={color === 'success' ? 'md' : 'sm'}
+              icon={getPopupIcon}
+              size="md"
             />
           }
           renderTags={(tag: T[]) => {

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

@@ -3,8 +3,9 @@ import React, { useMemo } from 'react';
 import {
   faCheck,
   faChevronDown,
+  faSearch,
   faTimes,
-} from '@fortawesome/pro-solid-svg-icons';
+} from '@fortawesome/pro-regular-svg-icons';
 import { AutoCompleteStyle } from '@groupeactual/design-tokens';
 import {
   Autocomplete,
@@ -19,7 +20,7 @@ import {
   useTheme,
 } from '@mui/material';
 
-import IconProvider from '../../IconProvider';
+import IconProvider from '@/components/IconProvider';
 
 interface Props<T>
   extends Omit<
@@ -37,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,>({
@@ -56,6 +58,7 @@ const AutoCompleteSingle = <T,>({
   color,
   helperText,
   error,
+  searchIcon = false,
   ...props
 }: Props<T>) => {
   const theme = useTheme();
@@ -111,6 +114,16 @@ const AutoCompleteSingle = <T,>({
     return classNames.filter(Boolean).join(' ');
   }, [color, placeholder, value]);
 
+  const getPopupIcon = useMemo(() => {
+    if (color === 'success') {
+      return faCheck;
+    } else if (searchIcon) {
+      return faSearch;
+    }
+
+    return faChevronDown;
+  }, [color, searchIcon]);
+
   return (
     <Box sx={{ width }}>
       <StyledAutoCompleteForm
@@ -120,21 +133,25 @@ const AutoCompleteSingle = <T,>({
       >
         <Autocomplete
           {...props}
-          value={isValueLabelNotEmpty && value || null}
+          value={(isValueLabelNotEmpty && value) || null}
           onChange={handleValueChange}
           aria-placeholder={placeholder}
           disabled={disabled}
           options={options}
           sx={{
+            ...props.sx,
             '.MuiOutlinedInput-input': {
               marginTop: value ? '0px' : '2px',
             },
+            '& .MuiAutocomplete-popupIndicator': { transform: 'none' },
           }}
-          getOptionLabel={getOptionLabel as (option: T) => string}
+          getOptionLabel={getOptionLabel as (_option: T) => string}
           slotProps={{
             paper: {
               sx: {
-                boxShadow: '0px 2px 10px 0px',
+                fontSize: '14px',
+                marginTop: '4px',
+                boxShadow: '0px 2px 10px 0px #2727271F',
               },
             },
           }}
@@ -175,8 +192,8 @@ const AutoCompleteSingle = <T,>({
           popupIcon={
             <IconProvider
               className={disabled ? 'icon-disabled SelectIcon' : 'SelectIcon'}
-              icon={color === 'success' ? faCheck : faChevronDown}
-              size={color === 'success' ? 'md' : 'sm'}
+              icon={getPopupIcon}
+              size="md"
             />
           }
           renderInput={(params) => (
@@ -186,6 +203,8 @@ const AutoCompleteSingle = <T,>({
               error={!!error}
               fullWidth
               variant="outlined"
+              type="text"
+              inputProps={{ ...params.inputProps }}
               InputLabelProps={{
                 shrink: (placeholder && true) || undefined,
                 disabled: false,
@@ -205,6 +224,4 @@ const AutoCompleteSingle = <T,>({
   );
 };
 
-AutoCompleteSingle.displayName = 'AutocompleteSingle';
-
 export default AutoCompleteSingle;