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

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 '../../IconProvider';
-import Tooltip from '../../Tooltip';
+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

@@ -10,35 +10,17 @@ import {
   useTheme,
 } from '@mui/material';
 
-import Checkbox from '../Checkbox/Checkbox';
+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,
@@ -24,12 +25,12 @@ import { enUS, frFR } from '@mui/x-date-pickers/locales';
 import { Dayjs } from 'dayjs';
 import 'dayjs/locale/fr';
 
-import IconProvider from '../../IconProvider/IconProvider';
+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}

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

@@ -3,9 +3,9 @@ import React, { FocusEventHandler, useMemo, useRef } from 'react';
 import {
   faCheck,
   faChevronDown,
-  faCircleX,
   faTimes,
-} from '@fortawesome/pro-solid-svg-icons';
+} from '@fortawesome/pro-regular-svg-icons';
+import { faCircleX } from '@fortawesome/pro-solid-svg-icons';
 import { SelectStyle } from '@groupeactual/design-tokens';
 import {
   Box,
@@ -20,8 +20,8 @@ import {
   useTheme,
 } from '@mui/material';
 
-import Chip from '../../Chip/Chip';
-import IconProvider from '../../IconProvider';
+import Chip from '@/components/Chip';
+import IconProvider from '@/components/IconProvider';
 
 interface Props<T>
   extends Omit<
@@ -41,16 +41,16 @@ interface Props<T>
   onBlur?:
     | FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>
     | undefined;
-  onChange: (value: T[]) => void;
-  getRenderValue: (option: T) => string;
-  getKeyValue: (option: T) => string;
+  onChange: (_value: T[]) => void;
+  getRenderValue: (_option: T) => string;
+  getKeyValue: (_option: T) => string;
 }
 
 const MenuProps = {
   disableAutoFocusItem: true,
   PaperProps: {
     sx: {
-      boxShadow: '0px 2px 10px 0px',
+      boxShadow: '0px 2px 10px 0px #2727271F',
       width: 0,
     },
   },
@@ -76,6 +76,7 @@ const MultiSelect = <T,>({
     () => styled(FormControl)(SelectStyle(theme)),
     [theme],
   );
+  const [isOpened, setIsOpened] = React.useState(props.open ?? false);
 
   const handleChange = (event: SelectChangeEvent<typeof options>) =>
     onChange?.(event.target.value as T[]);
@@ -179,8 +180,16 @@ const MultiSelect = <T,>({
             <IconProvider
               className={disabled ? 'Mui-disabled SelectIcon' : 'SelectIcon'}
               icon={color === 'success' ? faCheck : faChevronDown}
-              size={color === 'success' ? 'md' : 'sm'}
+              size="md"
+              onClick={() => {
+                if (!disabled) {
+                  setIsOpened(!isOpened);
+                }
+              }}
               sx={{
+                ':hover': {
+                  cursor: disabled ? 'auto' : 'pointer',
+                },
                 transform:
                   className.toString().includes('iconOpen') &&
                   color !== 'success'
@@ -191,12 +200,37 @@ const MultiSelect = <T,>({
           )}
           MenuProps={MenuProps}
           {...props}
+          open={isOpened}
+          onClose={(e) => {
+            if (!disabled) {
+              if (props.onClose) {
+                props.onClose(e);
+              }
+
+              setIsOpened(false);
+            }
+          }}
+          onOpen={(e) => {
+            if (!disabled) {
+              if (props.onOpen) {
+                props.onOpen(e);
+              }
+
+              setIsOpened(true);
+            }
+          }}
         >
           {options?.map((option) => (
             <MenuItem
               key={getKeyValue(option)}
               value={option as never}
               sx={{
+                '&:hover': {
+                  backgroundColor: theme.palette['blueHoverEquivalence'],
+                },
+                '&.Mui-selected': {
+                  backgroundColor: theme.palette['greyXLight'] + ' !important',
+                },
                 fontSize: 14,
                 fontWeight: value.indexOf(option) === -1 ? 400 : 500,
                 whiteSpace: 'normal',
@@ -205,9 +239,6 @@ const MultiSelect = <T,>({
                 maxWidth: '100%',
                 backgroundColor:
                   value.indexOf(option) === -1 ? 'white' : 'greyXLight',
-                '&:hover': {
-                  backgroundColor: 'blueHoverEquivalence',
-                },
               }}
             >
               {getRenderValue(option)}
@@ -224,6 +255,4 @@ const MultiSelect = <T,>({
   );
 };
 
-MultiSelect.displayName = 'MultiSelect';
-
 export default MultiSelect;

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

@@ -15,8 +15,9 @@ import {
   useTheme,
 } from '@mui/material';
 
-import IconProvider from '../../IconProvider';
-import Tooltip from '../../Tooltip';
+import IconProvider from '@/components/IconProvider';
+import Text from '@/components/Text';
+import Tooltip from '@/components/Tooltip';
 
 interface ItemType<T> {
   label: string;
@@ -41,7 +42,7 @@ interface ItemType<T> {
 interface Props<T> extends Omit<RadioGroupProps, 'onChange'> {
   label: string;
   options: ItemType<T>[];
-  onChange: (value: T) => void;
+  onChange: (_value: T) => void;
   error?: string;
   helperText?: string;
   disabled?: boolean;
@@ -93,28 +94,24 @@ const RadioGroup = <T,>({
                 control={<MUIRadio size="small" />}
                 value={value}
                 label={
-                  <Box display="flex">
-                    {label}
+                  <Box>
+                    <Text component="span" variant="body1">
+                      {label}
+                    </Text>
                     {infoBubbleContent && (
-                      <Box
-                        py={0}
-                        pl={0.5}
-                        width={16}
-                        height={21}
-                        display="flex"
-                        alignItems="center"
+                      <Tooltip
+                        title={infoBubbleContent}
+                        placement={infoBubblePosition}
+                        sx={{
+                          ml: '6px',
+                        }}
                       >
-                        <Tooltip
-                          title={infoBubbleContent}
-                          placement={infoBubblePosition}
-                        >
-                          <IconProvider
-                            icon={faInfoCircle}
-                            size="sm"
-                            color="#1d91c3"
-                          />
-                        </Tooltip>
-                      </Box>
+                        <IconProvider
+                          icon={faInfoCircle}
+                          size="sm"
+                          color="blueInfo"
+                        />
+                      </Tooltip>
                     )}
                   </Box>
                 }
@@ -131,6 +128,4 @@ const RadioGroup = <T,>({
   );
 };
 
-RadioGroup.displayName = 'RadioGroup';
-
 export default RadioGroup;

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

@@ -1,6 +1,7 @@
 import React, { BaseSyntheticEvent, useMemo } from 'react';
 
-import { faCheck, faChevronDown } from '@fortawesome/pro-solid-svg-icons';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { faCheck, faChevronDown } from '@fortawesome/pro-regular-svg-icons';
 import { SelectStyle } from '@groupeactual/design-tokens';
 import {
   Box,
@@ -15,30 +16,32 @@ import {
   useTheme,
 } from '@mui/material';
 
-import Icon from '../../IconProvider';
+import IconProvider from '@/components/IconProvider';
 
 interface Props<T>
   extends Omit<SelectProps<T>, 'value' | 'onChange' | 'color' | 'error'> {
   options: T[];
   placeholder?: string;
   disabled?: boolean;
-  label: string;
+  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;
+  popupIcon?: IconDefinition;
+  getRenderValue: (_option: T) => string;
+  onChange: (_value: T) => void;
+  onBlur?: (_event: BaseSyntheticEvent) => void;
+  onClick?: (_event: BaseSyntheticEvent) => void;
 }
 
 const MenuProps = {
   disableAutoFocusItem: true,
   PaperProps: {
     sx: {
-      boxShadow: '0px 2px 10px 0px',
+      boxShadow: '0px 2px 10px 0px #2727271F',
       width: 0,
     },
   },
@@ -54,6 +57,7 @@ const Select = <T,>({
   helperText,
   width = '100%',
   disabled,
+  popupIcon = faChevronDown,
   onChange,
   getRenderValue,
   ...props
@@ -64,6 +68,8 @@ const Select = <T,>({
     [theme],
   );
 
+  const [isOpened, setIsOpened] = React.useState(props.open ?? false);
+
   const handleChange = (event: SelectChangeEvent<T>) =>
     onChange?.(event.target.value as T);
 
@@ -109,11 +115,19 @@ const Select = <T,>({
           notched={(placeholder && true) || undefined}
           onChange={handleChange}
           IconComponent={({ className }) => (
-            <Icon
+            <IconProvider
               className={disabled ? 'Mui-disabled SelectIcon' : 'SelectIcon'}
-              icon={color === 'success' ? faCheck : faChevronDown}
-              size={color === 'success' ? 'md' : 'sm'}
+              icon={color === 'success' ? faCheck : popupIcon}
+              onClick={() => {
+                if (!disabled) {
+                  setIsOpened(!isOpened);
+                }
+              }}
+              size="md"
               sx={{
+                ':hover': {
+                  cursor: disabled ? 'auto' : 'pointer',
+                },
                 marginTop: color === 'success' ? '2px' : '0px',
                 transform:
                   className.toString().includes('iconOpen') &&
@@ -126,10 +140,35 @@ const Select = <T,>({
           MenuProps={MenuProps}
           renderValue={(value) => getRenderValue(value)}
           {...props}
+          open={isOpened}
+          onClose={(e) => {
+            if (!disabled) {
+              if (props.onClose) {
+                props.onClose(e);
+              }
+
+              setIsOpened(false);
+            }
+          }}
+          onOpen={(e) => {
+            if (!disabled) {
+              if (props.onOpen) {
+                props.onOpen(e);
+              }
+
+              setIsOpened(true);
+            }
+          }}
         >
           {options?.map((option, i) => (
             <MenuItem
               sx={{
+                '&:hover': {
+                  backgroundColor: theme.palette['blueHoverEquivalence'],
+                },
+                '&.Mui-selected': {
+                  backgroundColor: theme.palette['greyXLight'] + ' !important',
+                },
                 fontSize: 14,
                 fontWeight: value === option ? 500 : 400,
                 whiteSpace: 'normal',
@@ -165,6 +204,4 @@ const Select = <T,>({
   );
 };
 
-Select.displayName = 'Select';
-
 export default Select;

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

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