@groupeactual/ui-kit 1.6.0-beta.7 → 1.6.0-beta.9

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

@@ -1,6 +1,6 @@
 import { MouseEvent } from 'react';
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { ChipProps as ChipPropsMUI } from '@mui/material';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 interface Props extends Omit<ChipPropsMUI, 'suffix' | 'prefix' | 'onDelete' | 'onDeleteIcon' | 'variant'> {
     variant: 'filled' | 'outlined' | 'status' | 'statusFilled';
     label: string;

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

@@ -1,5 +1,5 @@
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { IconButtonProps, SxProps, Theme } from '@mui/material';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { Placement } from '../Tooltip/tooltip.interface';
 interface Props extends IconButtonProps {
     icon: IconDefinition;

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

@@ -1,5 +1,5 @@
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { BoxProps } from '@mui/material';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 declare const FontSizes: {
     xs: number;
     sm: number;

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

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { CardProps } from '@mui/material';
 import { ModalProps as ModalPropsMUI } from '@mui/material/Modal';
 import { DefaultComponentProps, OverridableTypeMap } from '@mui/material/OverridableComponent';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 export type CloseButtonProps = {
     onClose: () => void;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@groupeactual/ui-kit",
-  "version": "1.6.0-beta.7",
+  "version": "1.6.0-beta.9",
   "type": "module",
   "description": "A simple template for a custom React component library",
   "devDependencies": {
@@ -52,11 +52,11 @@
     "notistack": "^3.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "@groupeactual/design-tokens": "1.6.0-beta.7"
+    "@groupeactual/design-tokens": "1.6.0-beta.9"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "scripts": {
     "build": "rollup -c",

package/src/DesignSystemProvider.tsx

@@ -1,8 +1,9 @@
 import { PropsWithChildren, createContext, useContext, useState } from 'react';
 
-import { useMaterialThemeTokens } from '@groupeactual/design-tokens';
 import { ThemeProvider, createTheme } from '@mui/material';
 
+import { useMaterialThemeTokens } from '@groupeactual/design-tokens';
+
 // Deux themes pour le moment :
 // Default = Theme backoffice Material
 // Ep = Espace personnel

package/src/components/Accordion/Accordion.tsx

@@ -6,8 +6,6 @@ import {
   useState,
 } from 'react';
 
-import { faChevronDown } from '@fortawesome/pro-regular-svg-icons';
-import { AccordionStyle } from '@groupeactual/design-tokens';
 import {
   AccordionDetails,
   Accordion as AccordionMui,
@@ -17,6 +15,9 @@ import {
   useTheme,
 } from '@mui/material';
 
+import { faChevronDown } from '@fortawesome/pro-regular-svg-icons';
+import { AccordionStyle } from '@groupeactual/design-tokens';
+
 import IconProvider from '../IconProvider/IconProvider';
 
 interface Props extends AccordionProps {

package/src/components/BannerNotification/BannerNotification.tsx

@@ -1,8 +1,9 @@
 import { useMemo } from 'react';
 
+import { Alert, AlertProps, styled, useTheme } from '@mui/material';
+
 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';
 

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
 
-import { BreadcrumbsStyle } from '@groupeactual/design-tokens';
 import {
   Breadcrumbs as BreadcrumbsMui,
   BreadcrumbsProps,
@@ -8,6 +7,8 @@ import {
   useTheme,
 } from '@mui/material';
 
+import { BreadcrumbsStyle } from '@groupeactual/design-tokens';
+
 import Link from '../Link';
 import Text from '../Text';
 

package/src/components/Button/Button.tsx

@@ -1,6 +1,5 @@
 import { ReactNode, useMemo } from 'react';
 
-import { ButtonStyle } from '@groupeactual/design-tokens';
 import {
   Button as ButtonMUI,
   ButtonProps,
@@ -8,6 +7,8 @@ import {
   useTheme,
 } from '@mui/material';
 
+import { ButtonStyle } from '@groupeactual/design-tokens';
+
 interface Props extends Omit<ButtonProps, 'variant' | 'children'> {
   variant?: 'primary' | 'secondary';
   children?: ReactNode;

package/src/components/Chip/Chip.tsx

@@ -1,7 +1,5 @@
 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,
@@ -11,6 +9,9 @@ import {
   useTheme,
 } from '@mui/material';
 
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { ChipStyle } from '@groupeactual/design-tokens';
+
 import IconProvider from '../IconProvider';
 
 interface Props
@@ -48,22 +49,19 @@ const Chip = ({
 
   const ref = useRef<HTMLDivElement>(null);
 
-  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`;
-    }
+  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');
 
-    return '';
-  }, [props.color, theme.palette]);
+  if (variant === 'filled' || variant === 'statusFilled') {
+    // opacity 0.08
+    backgroundColor = `${backgroundColor}14`;
+  } else if (variant === 'status') {
+    backgroundColor = 'white';
+  }
 
   return (
     <Tooltip title={tooltip} placement="right-start" open={isTooltipOpen}>

package/src/components/Datatable/Datatable.tsx

@@ -1,10 +1,5 @@
 import { Fragment, useEffect, useMemo, useState } from 'react';
 
-import {
-  faArrowDownLong,
-  faArrowUpLong,
-} from '@fortawesome/pro-regular-svg-icons';
-import { DatatableStyle } from '@groupeactual/design-tokens';
 import {
   Box,
   Table,
@@ -18,6 +13,12 @@ import {
   useTheme,
 } from '@mui/material';
 
+import {
+  faArrowDownLong,
+  faArrowUpLong,
+} from '@fortawesome/pro-regular-svg-icons';
+import { DatatableStyle } from '@groupeactual/design-tokens';
+
 import IconButton from '../IconButton';
 import Pagination from '../Pagination';
 import Text from '../Text';

package/src/components/EmbbededNotification/EmbeddedNotification.tsx

@@ -1,5 +1,9 @@
 import { ReactNode } from 'react';
 
+import { Box } from '@mui/material';
+
+import { BoxProps } from '@mui/system';
+
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import {
   faCircleCheck,
@@ -7,8 +11,6 @@ import {
   faCircleInfo,
   faCircleXmark,
 } from '@fortawesome/pro-solid-svg-icons';
-import { Box } from '@mui/material';
-import { BoxProps } from '@mui/system';
 
 import Icon from '../IconProvider/IconProvider';
 import Text from '../Text';

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

@@ -1,12 +1,5 @@
 import React, { useMemo, useRef } from 'react';
 
-import {
-  faCheck,
-  faChevronDown,
-  faCircleX,
-  faTimes,
-} from '@fortawesome/pro-solid-svg-icons';
-import { AutoCompleteStyle } from '@groupeactual/design-tokens';
 import {
   type AutocompleteProps,
   FormControl,
@@ -19,6 +12,14 @@ import Autocomplete from '@mui/material/Autocomplete';
 import Box from '@mui/material/Box';
 import TextField, { TextFieldProps } from '@mui/material/TextField';
 
+import {
+  faCheck,
+  faChevronDown,
+  faCircleX,
+  faTimes,
+} from '@fortawesome/pro-solid-svg-icons';
+import { AutoCompleteStyle } from '@groupeactual/design-tokens';
+
 import Chip from '../../Chip/Chip';
 import IconProvider from '../../IconProvider';
 

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

@@ -1,11 +1,5 @@
 import React, { useMemo } from 'react';
 
-import {
-  faCheck,
-  faChevronDown,
-  faTimes,
-} from '@fortawesome/pro-solid-svg-icons';
-import { AutoCompleteStyle } from '@groupeactual/design-tokens';
 import {
   Autocomplete,
   type AutocompleteProps,
@@ -19,6 +13,13 @@ import {
   useTheme,
 } from '@mui/material';
 
+import {
+  faCheck,
+  faChevronDown,
+  faTimes,
+} from '@fortawesome/pro-solid-svg-icons';
+import { AutoCompleteStyle } from '@groupeactual/design-tokens';
+
 import IconProvider from '../../IconProvider';
 
 interface Props<T>

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

@@ -1,7 +1,5 @@
 import { useMemo } from 'react';
 
-import { faInfoCircle } from '@fortawesome/pro-solid-svg-icons';
-import { CheckboxStyle } from '@groupeactual/design-tokens';
 import {
   Box,
   Checkbox as CheckboxMUI,
@@ -14,6 +12,9 @@ import {
   useTheme,
 } from '@mui/material';
 
+import { faInfoCircle } from '@fortawesome/pro-solid-svg-icons';
+import { CheckboxStyle } from '@groupeactual/design-tokens';
+
 import IconProvider from '../../IconProvider';
 import Tooltip from '../../Tooltip';
 

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

@@ -1,6 +1,5 @@
 import { useMemo, useState } from 'react';
 
-import { CheckboxGroupStyle } from '@groupeactual/design-tokens';
 import {
   FormControl,
   FormGroup,
@@ -10,6 +9,8 @@ import {
   useTheme,
 } from '@mui/material';
 
+import { CheckboxGroupStyle } from '@groupeactual/design-tokens';
+
 import Checkbox from '../Checkbox/Checkbox';
 
 interface ItemType {

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

@@ -1,12 +1,5 @@
 import { useMemo } from 'react';
 
-import {
-  faAngleLeft,
-  faAngleRight,
-  faCalendarDay,
-} from '@fortawesome/pro-regular-svg-icons';
-import { faCaretDown, faCheck } from '@fortawesome/pro-solid-svg-icons';
-import { DatePickerStyle } from '@groupeactual/design-tokens';
 import {
   Box,
   FormHelperText,
@@ -14,6 +7,14 @@ import {
   styled,
   useTheme,
 } from '@mui/material';
+
+import {
+  faAngleLeft,
+  faAngleRight,
+  faCalendarDay,
+} from '@fortawesome/pro-regular-svg-icons';
+import { faCaretDown, faCheck } from '@fortawesome/pro-solid-svg-icons';
+import { DatePickerStyle } from '@groupeactual/design-tokens';
 import {
   DatePicker as DatePickerMUI,
   DatePickerProps,

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

@@ -1,12 +1,5 @@
 import React, { FocusEventHandler, useMemo, useRef } from 'react';
 
-import {
-  faCheck,
-  faChevronDown,
-  faCircleX,
-  faTimes,
-} from '@fortawesome/pro-solid-svg-icons';
-import { SelectStyle } from '@groupeactual/design-tokens';
 import {
   Box,
   FormControl,
@@ -20,6 +13,14 @@ import {
   useTheme,
 } from '@mui/material';
 
+import {
+  faCheck,
+  faChevronDown,
+  faCircleX,
+  faTimes,
+} from '@fortawesome/pro-solid-svg-icons';
+import { SelectStyle } from '@groupeactual/design-tokens';
+
 import Chip from '../../Chip/Chip';
 import IconProvider from '../../IconProvider';
 

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

@@ -1,7 +1,5 @@
 import { ChangeEvent, useMemo } from 'react';
 
-import { faInfoCircle } from '@fortawesome/pro-solid-svg-icons';
-import { RadioStyle } from '@groupeactual/design-tokens';
 import {
   Box,
   FormControl,
@@ -15,6 +13,9 @@ import {
   useTheme,
 } from '@mui/material';
 
+import { faInfoCircle } from '@fortawesome/pro-solid-svg-icons';
+import { RadioStyle } from '@groupeactual/design-tokens';
+
 import IconProvider from '../../IconProvider';
 import Tooltip from '../../Tooltip';
 

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

@@ -1,7 +1,5 @@
 import { BaseSyntheticEvent, useMemo } from 'react';
 
-import { faCheck, faChevronDown } from '@fortawesome/pro-solid-svg-icons';
-import { SelectStyle } from '@groupeactual/design-tokens';
 import {
   Box,
   FormControl,
@@ -15,6 +13,9 @@ import {
   useTheme,
 } from '@mui/material';
 
+import { faCheck, faChevronDown } from '@fortawesome/pro-solid-svg-icons';
+import { SelectStyle } from '@groupeactual/design-tokens';
+
 import Icon from '../../IconProvider';
 
 interface Props<T>

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

@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
 
-import { SwitchStyle } from '@groupeactual/design-tokens';
 import {
   FormControl,
   FormControlLabel,
@@ -12,6 +11,8 @@ import {
   useTheme,
 } from '@mui/material';
 
+import { SwitchStyle } from '@groupeactual/design-tokens';
+
 interface Props {
   label: string;
   checked: boolean;

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

@@ -6,8 +6,6 @@ import React, {
   useState,
 } from 'react';
 
-import { faEye, faEyeSlash } from '@fortawesome/pro-solid-svg-icons';
-import { TextFieldStyle } from '@groupeactual/design-tokens';
 import {
   TextField as MuiTextField,
   TextFieldProps,
@@ -15,6 +13,9 @@ import {
   useTheme,
 } from '@mui/material';
 
+import { faEye, faEyeSlash } from '@fortawesome/pro-solid-svg-icons';
+import { TextFieldStyle } from '@groupeactual/design-tokens';
+
 import Icon from '../../IconProvider';
 
 interface Props extends Omit<TextFieldProps, 'error'> {

package/src/components/IconButton/IconButton.tsx

@@ -1,7 +1,5 @@
 import { useMemo } from 'react';
 
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-import { IconButtonStyle } from '@groupeactual/design-tokens';
 import {
   IconButton as IconButtonMUI,
   IconButtonProps,
@@ -11,6 +9,9 @@ import {
   useTheme,
 } from '@mui/material';
 
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { IconButtonStyle } from '@groupeactual/design-tokens';
+
 import IconProvider from '../IconProvider';
 import Tooltip from '../Tooltip';
 import { Placement } from '../Tooltip/tooltip.interface';

package/src/components/IconProvider/IconProvider.tsx

@@ -1,6 +1,5 @@
 import { forwardRef, useMemo } from 'react';
 
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import {
   Box,
   BoxProps,
@@ -10,6 +9,8 @@ import {
   useTheme,
 } from '@mui/material';
 
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+
 const FontSizes = {
   xs: 8,
   sm: 12,

package/src/components/Link/Link.tsx

@@ -1,8 +1,9 @@
 import { useMemo } from 'react';
 
-import { LinkStyle } from '@groupeactual/design-tokens';
 import { Link as LinkMui, LinkProps, styled, useTheme } from '@mui/material';
 
+import { LinkStyle } from '@groupeactual/design-tokens';
+
 interface Props extends Omit<LinkProps, 'variant'> {
   variant?: 'link1' | 'link2';
   /* eslint-disable @typescript-eslint/no-explicit-any */

package/src/components/Modal/Dialog/Dialog.tsx

@@ -1,4 +1,3 @@
-import { faClose } from '@fortawesome/pro-solid-svg-icons/faClose';
 import {
   Box,
   DialogContent,
@@ -8,6 +7,8 @@ import {
 } from '@mui/material';
 import { OverridableTypeMap } from '@mui/material/OverridableComponent';
 
+import { faClose } from '@fortawesome/pro-solid-svg-icons/faClose';
+
 import IconButton from '../../IconButton';
 import IconProvider from '../../IconProvider';
 import Text from '../../Text';

package/src/components/Modal/Drawer/Drawer.tsx

@@ -1,4 +1,3 @@
-import { faClose } from '@fortawesome/pro-solid-svg-icons/faClose';
 import {
   Box,
   Card,
@@ -7,6 +6,8 @@ import {
   Drawer as DrawerMUI,
 } from '@mui/material';
 
+import { faClose } from '@fortawesome/pro-solid-svg-icons/faClose';
+
 import IconButton from '../../IconButton';
 import { ModalProps } from '../modal.interface';
 

package/src/components/Modal/modal.interface.ts

@@ -1,6 +1,5 @@
 import { ReactNode } from 'react';
 
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { CardProps } from '@mui/material';
 import { ModalProps as ModalPropsMUI } from '@mui/material/Modal';
 import {
@@ -8,6 +7,8 @@ import {
   OverridableTypeMap,
 } from '@mui/material/OverridableComponent';
 
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+
 export type CloseButtonProps = {
   onClose: () => void;
 };

package/src/components/Navigation/Stepper/Step.tsx

@@ -1,6 +1,7 @@
+import { Box, Stack, useTheme } from '@mui/material';
+
 import { faCheck } from '@fortawesome/pro-regular-svg-icons';
 import { faCheckCircle, faDotCircle } from '@fortawesome/pro-solid-svg-icons';
-import { Box, Stack, useTheme } from '@mui/material';
 
 import IconProvider from '../../IconProvider';
 import Text from '../../Text';

package/src/components/Pagination/Pagination.tsx

@@ -1,6 +1,5 @@
 import { ChangeEvent, useEffect, useMemo, useState } from 'react';
 
-import { PaginationStyle } from '@groupeactual/design-tokens';
 import {
   Box,
   Divider,
@@ -9,6 +8,8 @@ import {
   useTheme,
 } from '@mui/material';
 
+import { PaginationStyle } from '@groupeactual/design-tokens';
+
 import Select from '../Form/Select';
 import Text from '../Text';
 import { getTotalPages } from './pagination.helper';

package/src/components/Snackbar/Snackbar.tsx

@@ -1,5 +1,7 @@
 import React, { useMemo } from 'react';
 
+import { Alert, AlertProps, styled, useTheme } from '@mui/material';
+
 import {
   IconDefinition,
   faCheckCircle,
@@ -7,7 +9,6 @@ import {
   faTimesCircle,
 } from '@fortawesome/pro-solid-svg-icons';
 import { SnackbarStyle } from '@groupeactual/design-tokens';
-import { Alert, AlertProps, styled, useTheme } from '@mui/material';
 
 import IconProvider from '../IconProvider/IconProvider';
 

package/src/components/UploadDocument/FileUploaderSingle.tsx

@@ -1,8 +1,9 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
+import { Box, IconButton } from '@mui/material';
+
 import { faEye, faTrash, faUpload } from '@fortawesome/pro-regular-svg-icons';
 import { faFileAlt } from '@fortawesome/pro-solid-svg-icons';
-import { Box, IconButton } from '@mui/material';
 
 import Button from '../Button/Button';
 import IconProvider from '../IconProvider/IconProvider';