@groupeactual/ui-kit 1.7.9 → 2.0.0-beta.0

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { ReactNode, useId, useMemo } from 'react';
 
 import {
   faCheck,
@@ -6,21 +6,19 @@ import {
   faSearch,
   faTimes,
 } from '@fortawesome/pro-regular-svg-icons';
-import { AutoCompleteStyle } from '@groupeactual/design-tokens';
 import {
   Autocomplete,
   type AutocompleteProps,
   Box,
-  FormControl,
   FormHelperText,
-  MenuItem,
+  InputLabel,
+  ListSubheader,
   TextField,
-  TextFieldProps,
-  styled,
-  useTheme,
 } from '@mui/material';
 
 import IconProvider from '@/components/IconProvider';
+import MenuItem from '@/components/MenuItem';
+import Text from '@/components/Text';
 
 interface Props<T>
   extends Omit<
@@ -32,41 +30,53 @@ interface Props<T>
     | 'error'
     | 'getOptionLabel'
   > {
-  label: string;
+  label?: ReactNode;
   options: T[];
   helperText?: string;
   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;
   value?: T | null;
   width?: number | string;
   error?: string;
   searchIcon?: boolean;
+  icon?: ReactNode;
+  getOptionGroupLabel?: (_option: T) => string;
+  handleOptionChip?: (_option: T) => ReactNode | undefined;
+  // * 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;
 }
 
-const AutoCompleteSingle = <T,>({
-  value,
-  label,
-  placeholder = '',
-  options,
-  disabled,
-  getOptionLabel,
-  onChange,
-  width = '100%',
-  color,
-  helperText,
-  error,
-  searchIcon = false,
-  ...props
-}: Props<T>) => {
-  const theme = useTheme();
-
-  const StyledAutoCompleteForm = useMemo(
-    () => styled(FormControl)(AutoCompleteStyle(theme)),
-    [theme],
-  );
+function fixedForwardRef<T, P = {}>(
+  render: (_props: P, _ref: React.Ref<T>) => React.ReactNode,
+): (_props: P & React.RefAttributes<T>) => React.ReactNode {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return React.forwardRef(render as any) as any;
+}
+
+const AutoCompleteSingleComponent = <T,>(
+  {
+    value,
+    label,
+    placeholder = '',
+    options,
+    disabled,
+    width = '100%',
+    color,
+    helperText,
+    error,
+    searchIcon = false,
+    icon,
+    getOptionGroupLabel,
+    handleOptionChip,
+    getOptionLabel,
+    onChange,
+    ...props
+  }: Props<T>,
+  ref: React.ForwardedRef<HTMLSelectElement>,
+) => {
+  const generatedId = useId();
+  const inputId = `autocomplete-${generatedId}`;
 
   const handleValueChange = (
     _event: React.SyntheticEvent<Element, Event>,
@@ -93,26 +103,27 @@ const AutoCompleteSingle = <T,>({
     [value, options, props?.isOptionEqualToValue],
   );
 
-  const getFormControlClassName = useMemo(() => {
+  const getTextFieldClassName = useMemo(() => {
     const classNames = [
-      'DsAutoComplete',
-      isValueLabelNotEmpty && 'Mui-filled',
       color === 'success' && 'Mui-success',
+      value && 'Mui-filled',
+      props.autoFocus && 'Mui-focused',
       disabled && 'Mui-disabled',
+      props.className,
     ];
 
     return classNames.filter(Boolean).join(' ');
-  }, [value, disabled, color]);
+  }, [value, color, props.className, disabled, props.autoFocus]);
 
-  const getInputLabelClassName = useMemo(() => {
+  const getLabelAndPlaceholderClassName = useMemo(() => {
     const classNames = [
-      (!placeholder && 'labelCustom') || 'labelClassic Mui-Input-filled',
       color === 'success' && 'Mui-success',
-      isValueLabelNotEmpty && 'Mui-Input-filled Mui-InputLabel-shrink',
+      (error || error) && 'Mui-error',
+      props.autoFocus && 'Mui-focused',
+      disabled && 'Mui-disabled',
     ];
-
     return classNames.filter(Boolean).join(' ');
-  }, [color, placeholder, value]);
+  }, [color, error, props.autoFocus, disabled]);
 
   const getPopupIcon = useMemo(() => {
     if (color === 'success') {
@@ -125,103 +136,194 @@ const AutoCompleteSingle = <T,>({
   }, [color, searchIcon]);
 
   return (
-    <Box sx={{ width }}>
-      <StyledAutoCompleteForm
-        fullWidth
-        color={color}
-        className={getFormControlClassName}
-      >
-        <Autocomplete
-          {...props}
-          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}
-          slotProps={{
-            paper: {
-              sx: {
-                fontSize: '14px',
-                marginTop: '4px',
-                boxShadow: '0px 2px 10px 0px #2727271F',
-              },
+    <Box sx={{ width }} data-testid="ds-autocomplete-single-container">
+      <Autocomplete
+        {...props}
+        ref={ref}
+        className="MuiTextField-root"
+        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}
+        slotProps={{
+          paper: {
+            sx: {
+              fontSize: '14px',
+              marginTop: '4px',
+              boxShadow: '0px 2px 10px 0px #2727271F',
             },
-          }}
-          renderOption={(props, option: T) => (
-            <MenuItem
-              {...props}
-              className="MenuItem DsAutoComplete"
-              sx={{
-                backgroundColor: 'white',
-                fontWeight: 400,
-                whiteSpace: 'break-spaces',
-                wordBreak: 'break-word',
-                '&.MenuItem[aria-selected="true"]': {
-                  backgroundColor: theme.palette.greyXLight,
-                  fontWeight: 500,
-                },
-                '&:hover': {
-                  backgroundColor: theme.palette.blueHoverEquivalence,
-                },
-              }}
-            >
-              {getOptionLabel(option)}
-            </MenuItem>
-          )}
-          clearIcon={
-            <>
-              {!disabled && value && (
-                <Box
-                  className="clear"
-                  onClick={handleClearValue}
-                  onMouseDown={preventEventPropagation}
-                >
-                  <IconProvider icon={faTimes} />
-                </Box>
-              )}
-            </>
-          }
-          popupIcon={
+          },
+        }}
+        renderOption={(menuProps, option: T) => (
+          <MenuItem
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            {...(menuProps as any)}
+            selected={
+              props?.isOptionEqualToValue
+                ? props.isOptionEqualToValue(option, value as T)
+                : false
+            }
+            data-testid="ds-menu-item"
+            sx={{
+              wordBreak: 'break-word',
+              overflowWrap: 'break-word',
+              whiteSpace: 'normal',
+              hyphens: 'auto',
+              width: '100%',
+            }}
+          >
+            <Text variant="body2">{getOptionLabel(option)}</Text>
+            {handleOptionChip && (
+              <Box sx={{ marginLeft: '8px' }}>{handleOptionChip(option)}</Box>
+            )}
+          </MenuItem>
+        )}
+        groupBy={getOptionGroupLabel}
+        renderGroup={(params) => (
+          <Box
+            key={params.key}
+            sx={{ padding: '0 !important' }}
+            data-testid="ds-select-grouped-options-group"
+          >
+            {params.group?.length !== 0 && (
+              <ListSubheader
+                component="div"
+                sx={{
+                  color: '#808080',
+                  width: '100%',
+                  fontSize: '14px',
+                  fontWeight: '700 !important',
+                  lineHeight: '18px',
+                  padding: '7.5px 8px 7.5px 8px',
+                  height: '39px',
+                  textTransform: 'uppercase',
+                  display: 'flex',
+                  alignItems: 'center',
+                  pointerEvents: 'none !important',
+                }}
+                data-testid="ds-select-grouped-options-active-group"
+              >
+                {params.group}
+              </ListSubheader>
+            )}
+            <Box component="ul" sx={{ padding: '0 !important' }}>
+              {params.children}
+            </Box>
+          </Box>
+        )}
+        clearIcon={
+          <>
+            {!disabled && value && (
+              <Box
+                className="clear"
+                onClick={handleClearValue}
+                onMouseDown={preventEventPropagation}
+                data-testid="ds-clear-icon"
+              >
+                <IconProvider icon={faTimes} />
+              </Box>
+            )}
+          </>
+        }
+        popupIcon={
+          icon || (
             <IconProvider
-              className={disabled ? 'icon-disabled SelectIcon' : 'SelectIcon'}
+              className={getLabelAndPlaceholderClassName}
               icon={getPopupIcon}
               size="md"
+              data-testid="ds-popup-icon"
             />
-          }
-          renderInput={(params) => (
+          )
+        }
+        renderInput={(params) => (
+          <Box data-testid="ds-render-input">
+            {label && (
+              <InputLabel
+                htmlFor={inputId}
+                className={getLabelAndPlaceholderClassName}
+                disabled={disabled}
+                data-testid="ds-input-label"
+              >
+                {label}
+              </InputLabel>
+            )}
             <TextField
-              {...(params as TextFieldProps)}
-              label={label}
-              error={!!error}
-              fullWidth
+              {...params}
+              disabled={disabled}
+              className={getTextFieldClassName}
+              placeholder={placeholder}
+              helperText={undefined}
               variant="outlined"
-              type="text"
-              inputProps={{ ...params.inputProps }}
-              InputLabelProps={{
-                shrink: (placeholder && true) || undefined,
-                disabled: false,
-                className: getInputLabelClassName,
+              error={!!error}
+              sx={{
+                '& .MuiFormHelperText-root': {
+                  padding: '8px 0 0 8px',
+                  margin: '0 !important',
+                  color: error ? '#b80025' : '#545352',
+                },
+                '& .MuiAutocomplete-tag': {
+                  borderRadius: '4px',
+                  fontSize: '14px',
+                  paddingLeft: '8px',
+                  paddingRight: '8px',
+                  height: '24px',
+                },
+                '& .MuiChip-deleteIcon': {
+                  margin: '0 0 0 4px !important',
+                  width: '12px',
+                  height: '12px',
+                  marginLeft: '8px',
+                  marginRight: '2px',
+                  color: 'primary.main !important',
+                },
+                '& .MuiChip-label': {
+                  padding: '0',
+                  lineHeight: '18px',
+                },
               }}
-              placeholder={placeholder}
+              data-testid="ds-text-field"
             />
-          )}
-        />
-        {(error || helperText) && (
-          <FormHelperText component="span" className={error ? 'Mui-error' : ''}>
-            {error || helperText}
-          </FormHelperText>
+            {(error || helperText) && (
+              <FormHelperText
+                component="span"
+                className={getLabelAndPlaceholderClassName}
+                sx={{
+                  display: 'table',
+                  width: '100%',
+                  marginRight: '4px',
+                  marginTop: '4px',
+                }}
+                data-testid="ds-form-helper-text"
+              >
+                {(error || helperText) && (
+                  <div
+                    style={{
+                      float: 'left',
+                    }}
+                  >
+                    {error || helperText}
+                  </div>
+                )}
+              </FormHelperText>
+            )}
+          </Box>
         )}
-      </StyledAutoCompleteForm>
+      />
     </Box>
   );
 };
 
+AutoCompleteSingleComponent.displayName = 'AutoCompleteSingle';
+
+const AutoCompleteSingle = fixedForwardRef(AutoCompleteSingleComponent);
+
 export default AutoCompleteSingle;

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

@@ -1,21 +1,17 @@
-import React, { ReactNode, useMemo } from 'react';
+import React, { ReactNode } from 'react';
 
-import { faInfoCircle } from '@fortawesome/pro-solid-svg-icons';
-import { CheckboxStyle } from '@groupeactual/design-tokens';
+import { faSquare, faSquareMinus } from '@fortawesome/pro-regular-svg-icons';
+import { faCheckSquare } from '@fortawesome/pro-solid-svg-icons';
 import {
   Box,
   Checkbox as CheckboxMUI,
   CheckboxProps,
   FormControl,
   FormControlLabel,
-  FormHelperText,
-  styled,
-  useTheme,
 } from '@mui/material';
 
 import IconProvider from '@/components/IconProvider';
 import Text from '@/components/Text';
-import Tooltip from '@/components/Tooltip';
 
 interface Props {
   name: string;
@@ -28,104 +24,50 @@ interface Props {
   ) => void;
   helperText?: string;
   error?: string;
-  infoBubbleContent?: string;
-  infoBubblePosition?:
-    | 'top'
-    | 'right'
-    | 'bottom'
-    | 'left'
-    | 'bottom-end'
-    | 'bottom-start'
-    | 'left-end'
-    | 'left-start'
-    | 'right-end'
-    | 'right-start'
-    | 'top-end'
-    | 'top-start'
-    | undefined;
 }
 
-const Checkbox = ({
-  name,
-  value,
-  error,
-  helperText,
-  label,
-  infoBubbleContent,
-  infoBubblePosition = 'right',
-  onChange,
-  disabled,
-  ...props
-}: CheckboxProps & Props) => {
-  const theme = useTheme();
-  const StyledCheckboxForm = useMemo(
-    () => styled(FormControl)(CheckboxStyle(theme)),
-    [theme],
-  );
-
-  const getComponentClassName = useMemo(() => {
-    const classNames: string[] = ['DsCheckbox'];
-    if (disabled) classNames.push('Mui-disabled');
-
-    return classNames.join(' ');
-  }, [disabled]);
-
-  const getLabelClassName = useMemo(() => {
-    const classNames: string[] = ['DsCheckbox-label'];
-    if (disabled) classNames.push('Mui-disabled');
-
-    return classNames.join(' ');
-  }, [disabled]);
-
-  return (
-    <StyledCheckboxForm className={getComponentClassName}>
-      <FormControlLabel
-        disabled={disabled}
-        control={
-          <Box>
+const Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps & Props>(
+  ({ name, value, label, onChange, disabled, ...props }, ref) => {
+    return (
+      <FormControl ref={ref} data-testid="ds-checkbox-form-control">
+        <FormControlLabel
+          disabled={disabled}
+          control={
             <CheckboxMUI
-              inputProps={{ name }}
+              indeterminateIcon={
+                <IconProvider icon={faSquareMinus} size={14} color="inherit" />
+              }
+              icon={<IconProvider icon={faSquare} size={14} color="inherit" />}
+              checkedIcon={
+                <IconProvider icon={faCheckSquare} size={14} color="inherit" />
+              }
+              color="primary"
+              {...props}
               disabled={disabled}
-              sx={{ marginTop: '-2px' }}
               checked={value}
-              color="primary"
               onChange={(e) => {
                 onChange?.(name, e.target.checked, true);
               }}
-              {...props}
+              data-testid="ds-checkbox"
             />
-          </Box>
-        }
-        label={
-          <Box>
-            <Text
-              component="span"
-              variant="body1"
-              className={getLabelClassName}
+          }
+          label={
+            <Box
+              display="flex"
+              alignItems="center"
+              data-testid="ds-checkbox-label"
             >
-              {label}
-            </Text>
-            {infoBubbleContent && (
-              <Tooltip
-                title={infoBubbleContent}
-                placement={infoBubblePosition}
-                sx={{
-                  ml: '4px',
-                }}
-              >
-                <IconProvider icon={faInfoCircle} size="sm" color="blueInfo" />
-              </Tooltip>
-            )}
-          </Box>
-        }
-      />
-      {(error || helperText) && (
-        <FormHelperText component="span" className={error ? 'Mui-error' : ''}>
-          {error || helperText}
-        </FormHelperText>
-      )}
-    </StyledCheckboxForm>
-  );
-};
+              <Text component="span" variant="body1">
+                {label}
+              </Text>
+            </Box>
+          }
+        />
+      </FormControl>
+    );
+  },
+);
+
+Checkbox.displayName = 'Checkbox';
 
 export default Checkbox;