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

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

@@ -1,4 +1,10 @@
-import React, { FocusEventHandler, useMemo, useRef } from 'react';
+import React, {
+  FocusEventHandler,
+  ReactNode,
+  useId,
+  useMemo,
+  useRef,
+} from 'react';
 
 import {
   faCheck,
@@ -6,29 +12,26 @@ import {
   faTimes,
 } from '@fortawesome/pro-regular-svg-icons';
 import { faCircleX } from '@fortawesome/pro-solid-svg-icons';
-import { SelectStyle } from '@groupeactual/design-tokens';
 import {
   Box,
-  FormControl,
   FormHelperText,
   InputLabel,
-  MenuItem,
   Select as MuiSelect,
   SelectChangeEvent,
   SelectProps,
-  styled,
-  useTheme,
 } from '@mui/material';
 
 import Chip from '@/components/Chip';
 import IconProvider from '@/components/IconProvider';
+import MenuItem from '@/components/MenuItem';
+import Text from '@/components/Text';
 
 interface Props<T>
   extends Omit<
     SelectProps<T[]>,
     'value' | 'onChange' | 'value' | 'color' | 'error'
   > {
-  label: string;
+  label: ReactNode;
   options: T[] | [];
   helperText?: string;
   color?: 'success';
@@ -56,26 +59,35 @@ const MenuProps = {
   },
 };
 
-const MultiSelect = <T,>({
-  value,
-  label,
-  options,
-  color,
-  error,
-  placeholder = '',
-  helperText,
-  width = '100%',
-  getRenderValue,
-  getKeyValue,
-  onChange,
-  disabled,
-  ...props
-}: Props<T>) => {
-  const theme = useTheme();
-  const StyledMultiSelectForm = useMemo(
-    () => styled(FormControl)(SelectStyle(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 MultiSelectComponent = <T,>(
+  {
+    value,
+    label,
+    options,
+    color,
+    error,
+    placeholder = '',
+    helperText,
+    width = '100%',
+    getRenderValue,
+    getKeyValue,
+    onChange,
+    disabled,
+    ...props
+  }: Props<T>,
+  ref: React.ForwardedRef<HTMLSelectElement>,
+) => {
+  const generatedId = useId();
+  const boxRef = useRef<HTMLHeadingElement>(null);
+
+  const inputId = props.name || `multi-select-${generatedId}`;
   const [isOpened, setIsOpened] = React.useState(props.open ?? false);
 
   const handleChange = (event: SelectChangeEvent<typeof options>) =>
@@ -90,169 +102,182 @@ const MultiSelect = <T,>({
     event.stopPropagation();
   };
 
-  const getFormControlClassName = useMemo(() => {
+  const getClassName = useMemo(() => {
     const classNames = [
-      'DsMultiSelect',
-      (!placeholder && 'Select-mui') || 'Select-ds',
-      value.length > 0 && 'Mui-filled',
+      value && 'Mui-filled',
       error && 'Mui-error',
+      disabled && 'Mui-disabled',
+      color === 'success' && 'Mui-success',
     ];
 
     return classNames.filter(Boolean).join(' ');
-  }, [value, error, placeholder]);
-
-  const boxRef = useRef<HTMLHeadingElement>(null);
+  }, [value, error, color, disabled]);
 
   return (
-    <Box sx={{ width }} ref={boxRef}>
-      <StyledMultiSelectForm
-        fullWidth
-        color={color}
-        className={getFormControlClassName}
+    <Box
+      ref={boxRef}
+      sx={{
+        '.MuiOutlinedInput-input': {
+          marginTop: value?.length > 0 ? '0px' : '2px',
+        },
+      }}
+      data-testid="ds-multi-select-container"
+    >
+      {label && (
+        <InputLabel
+          htmlFor={inputId}
+          disabled={disabled}
+          className={getClassName}
+          id={props?.labelId}
+          data-testid="ds-multi-select-label"
+        >
+          {label}
+        </InputLabel>
+      )}
+      <MuiSelect
+        ref={ref}
+        id={inputId}
         disabled={disabled}
+        className={getClassName + ' MuiMultipleSelect'}
         sx={{
-          '.MuiOutlinedInput-input': {
-            marginTop: value?.length > 0 ? '0px' : '2px',
-          },
+          width,
+          color: color + '! important',
+          '& .MuiSelect-select .notranslate::after': placeholder
+            ? {
+                content: `"${placeholder}"`,
+                opacity:
+                  label === placeholder ? '0 !important' : '1 !important',
+              }
+            : {},
         }}
-      >
-        <InputLabel disabled={disabled} error={!!error}>
-          {label}
-        </InputLabel>
-        <MuiSelect
-          sx={{
-            color: color + '! important',
-            '& .MuiSelect-select .notranslate::after': placeholder
-              ? {
-                  content: `"${placeholder}"`,
-                  opacity:
-                    label === placeholder ? '0 !important' : '1 !important',
-                }
-              : {},
-          }}
-          multiple
-          label={label}
-          notched={(placeholder && true) || undefined}
-          value={value}
-          onChange={handleChange}
-          renderValue={(selected) => (
-            <Box sx={{ display: 'flex' }}>
-              <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
-                {selected.map((selectedOption: T) => (
-                  <Chip
-                    key={getKeyValue(selectedOption)}
-                    variant={disabled ? 'outlined' : 'filled'}
-                    color="default"
-                    label={getRenderValue(selectedOption)}
-                    onMouseDown={preventEventPropagation}
-                    disabled={disabled}
-                    suffixIcon={faCircleX}
-                    suffixAction={() =>
-                      !disabled && handleDeleteChip(selectedOption)
-                    }
-                    sx={{
-                      m: 0,
-                      maxWidth: boxRef?.current
-                        ? parseFloat(
-                            String(boxRef.current?.offsetWidth).replace(
-                              'px',
-                              '',
-                            ),
-                          ) - 60
-                        : width,
-                    }}
-                  />
-                ))}
-              </Box>
-              <Box flexGrow={1} />
-              {!disabled && (
-                <Box
-                  className="clear"
-                  onClick={handleClearValues}
+        multiple
+        notched={(placeholder && true) || undefined}
+        value={value}
+        onChange={handleChange}
+        renderValue={(selected) => (
+          <Box sx={{ display: 'flex' }} data-testid="ds-render-value">
+            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
+              {selected.map((selectedOption: T) => (
+                <Chip
+                  key={getKeyValue(selectedOption)}
+                  variant={disabled ? 'outlined' : 'filled'}
+                  color="default"
+                  label={getRenderValue(selectedOption)}
                   onMouseDown={preventEventPropagation}
-                >
-                  <IconProvider icon={faTimes} />
-                </Box>
-              )}
+                  disabled={disabled}
+                  suffixIcon={faCircleX}
+                  suffixAction={() =>
+                    !disabled && handleDeleteChip(selectedOption)
+                  }
+                  sx={{
+                    m: 0,
+                    maxWidth: boxRef?.current
+                      ? parseFloat(
+                          String(boxRef.current?.offsetWidth).replace('px', ''),
+                        ) - 70
+                      : width,
+                  }}
+                  data-testid="ds-chip"
+                />
+              ))}
             </Box>
-          )}
-          IconComponent={({ className }) => (
-            <IconProvider
-              className={disabled ? 'Mui-disabled SelectIcon' : 'SelectIcon'}
-              icon={color === 'success' ? faCheck : faChevronDown}
-              size="md"
-              onClick={() => {
-                if (!disabled) {
-                  setIsOpened(!isOpened);
-                }
-              }}
-              sx={{
-                ':hover': {
-                  cursor: disabled ? 'auto' : 'pointer',
-                },
-                transform:
-                  className.toString().includes('iconOpen') &&
-                  color !== 'success'
-                    ? 'rotate(180deg)'
-                    : 'none',
-              }}
-            />
-          )}
-          MenuProps={MenuProps}
-          {...props}
-          open={isOpened}
-          onClose={(e) => {
-            if (!disabled) {
-              if (props.onClose) {
-                props.onClose(e);
+            <Box flexGrow={1} />
+            {!disabled && (
+              <Box
+                className="clear"
+                sx={{
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  width: '16px',
+                }}
+                onClick={handleClearValues}
+                onMouseDown={preventEventPropagation}
+                data-testid="ds-clear-icon"
+              >
+                <IconProvider icon={faTimes} />
+              </Box>
+            )}
+          </Box>
+        )}
+        IconComponent={({ className }) => (
+          <IconProvider
+            className={disabled ? 'Mui-disabled SelectIcon' : 'SelectIcon'}
+            icon={color === 'success' ? faCheck : faChevronDown}
+            size="md"
+            onClick={() => {
+              if (!disabled) {
+                setIsOpened(!isOpened);
               }
-
-              setIsOpened(false);
+            }}
+            sx={{
+              ':hover': {
+                cursor: disabled ? 'auto' : 'pointer',
+              },
+              transform:
+                className.toString().includes('iconOpen') && color !== 'success'
+                  ? 'rotate(180deg)'
+                  : 'none',
+            }}
+            data-testid="ds-icon-component"
+          />
+        )}
+        MenuProps={MenuProps}
+        {...props}
+        open={isOpened}
+        onClose={(e) => {
+          if (!disabled) {
+            if (props.onClose) {
+              props.onClose(e);
             }
-          }}
-          onOpen={(e) => {
-            if (!disabled) {
-              if (props.onOpen) {
-                props.onOpen(e);
-              }
 
-              setIsOpened(true);
+            setIsOpened(false);
+          }
+        }}
+        onOpen={(e) => {
+          if (!disabled) {
+            if (props.onOpen) {
+              props.onOpen(e);
             }
-          }}
+
+            setIsOpened(true);
+          }
+        }}
+        data-testid="ds-mui-select"
+      >
+        {options?.map((option) => (
+          <MenuItem
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            {...(props as any)}
+            key={getKeyValue(option)}
+            value={option as never}
+            data-testid={`ds-menu-item-${getKeyValue(option)}`}
+            sx={{
+              wordBreak: 'break-word',
+              overflowWrap: 'break-word',
+              whiteSpace: 'normal',
+              hyphens: 'auto',
+              width: '100%',
+            }}
+          >
+            <Text variant="body2">{getRenderValue(option)}</Text>
+          </MenuItem>
+        ))}
+      </MuiSelect>
+      {(error || helperText) && (
+        <FormHelperText
+          component="span"
+          className={getClassName}
+          data-testid="ds-form-helper-text"
         >
-          {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',
-                wordWrap: 'break-word',
-                minWidth: '100%',
-                maxWidth: '100%',
-                backgroundColor:
-                  value.indexOf(option) === -1 ? 'white' : 'greyXLight',
-              }}
-            >
-              {getRenderValue(option)}
-            </MenuItem>
-          ))}
-        </MuiSelect>
-        {(error || helperText) && (
-          <FormHelperText component="span" className={error ? 'Mui-error' : ''}>
-            {error || helperText}
-          </FormHelperText>
-        )}
-      </StyledMultiSelectForm>
+          {error || helperText}
+        </FormHelperText>
+      )}
     </Box>
   );
 };
 
+MultiSelectComponent.displayName = 'MultiSelect';
+
+const MultiSelect = fixedForwardRef(MultiSelectComponent);
+
 export default MultiSelect;

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

@@ -1,7 +1,5 @@
-import React, { ChangeEvent, useMemo } from 'react';
+import React, { ChangeEvent, ReactNode, useMemo } from 'react';
 
-import { faInfoCircle } from '@fortawesome/pro-solid-svg-icons';
-import { RadioStyle } from '@groupeactual/design-tokens';
 import {
   Box,
   FormControl,
@@ -11,36 +9,17 @@ import {
   Radio as MUIRadio,
   RadioGroup as RadioGroupMUI,
   RadioGroupProps,
-  styled,
-  useTheme,
 } from '@mui/material';
 
-import IconProvider from '@/components/IconProvider';
 import Text from '@/components/Text';
-import Tooltip from '@/components/Tooltip';
 
 interface ItemType<T> {
-  label: string;
+  label?: ReactNode;
   value: T;
-  infoBubbleContent?: string;
-  infoBubblePosition?:
-    | 'top'
-    | 'right'
-    | 'bottom'
-    | 'left'
-    | 'bottom-end'
-    | 'bottom-start'
-    | 'left-end'
-    | 'left-start'
-    | 'right-end'
-    | 'right-start'
-    | 'top-end'
-    | 'top-start'
-    | undefined;
 }
 
 interface Props<T> extends Omit<RadioGroupProps, 'onChange'> {
-  label: string;
+  label?: ReactNode;
   options: ItemType<T>[];
   onChange: (_value: T) => void;
   error?: string;
@@ -48,84 +27,99 @@ interface Props<T> extends Omit<RadioGroupProps, 'onChange'> {
   disabled?: boolean;
 }
 
-const RadioGroup = <T,>({
-  options,
-  value,
-  label,
-  onChange,
-  helperText,
-  disabled = false,
-  error = '',
-  ...props
-}: Props<T>) => {
-  const theme = useTheme();
-  const StyledRadioForm = useMemo(
-    () => styled(FormControl)(RadioStyle(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 RadioGroupComponent = <T,>(
+  {
+    options,
+    value,
+    label,
+    onChange,
+    helperText,
+    disabled = false,
+    error = '',
+    ...props
+  }: Props<T>,
+  ref: React.ForwardedRef<HTMLTableElement>,
+) => {
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     onChange((event.target as HTMLInputElement).value as T);
   };
 
-  const getFormControlClassName = useMemo(() => {
+  const getClassName = useMemo(() => {
     const classNames = [disabled && 'Mui-disabled', error && 'Mui-error'];
 
     return classNames.filter(Boolean).join(' ');
   }, [disabled, error]);
 
   return (
-    <StyledRadioForm
+    <FormControl
       disabled={disabled}
       error={!!error}
-      className={getFormControlClassName}
+      ref={ref}
+      data-testid="ds-radio-group-form-control"
     >
-      <FormLabel>{label}</FormLabel>
-      <RadioGroupMUI value={value} onChange={handleChange} {...props}>
-        {options
-          ?.slice(0, 7)
-          .map(
-            (
-              { value, label, infoBubbleContent, infoBubblePosition },
-              index,
-            ) => (
-              <FormControlLabel
-                key={index}
-                control={<MUIRadio size="small" />}
-                value={value}
-                label={
-                  <Box>
-                    <Text component="span" variant="body1">
-                      {label}
-                    </Text>
-                    {infoBubbleContent && (
-                      <Tooltip
-                        title={infoBubbleContent}
-                        placement={infoBubblePosition}
-                        sx={{
-                          ml: '6px',
-                        }}
-                      >
-                        <IconProvider
-                          icon={faInfoCircle}
-                          size="sm"
-                          color="blueInfo"
-                        />
-                      </Tooltip>
-                    )}
-                  </Box>
-                }
-              />
-            ),
-          )}
+      {label && (
+        <FormLabel
+          component="legend"
+          className={getClassName}
+          sx={{
+            marginLeft: '-6px',
+            marginBottom: '4px',
+          }}
+          data-testid="ds-radio-group-label"
+        >
+          {label}
+        </FormLabel>
+      )}
+      <RadioGroupMUI
+        value={value}
+        onChange={handleChange}
+        {...props}
+        data-testid="ds-radio-group"
+      >
+        {options?.slice(0, 7).map(({ value, label }, index) => (
+          <FormControlLabel
+            key={index}
+            control={
+              <MUIRadio size="small" data-testid={`ds-radio-${index}`} />
+            }
+            value={value}
+            label={
+              <Box
+                display="flex"
+                alignItems="center"
+                data-testid={`ds-radio-label-${index}`}
+              >
+                <Text component="span" variant="body1">
+                  {label}
+                </Text>
+              </Box>
+            }
+          />
+        ))}
       </RadioGroupMUI>
       {((error || helperText) && (
-        <FormHelperText component="span" className={error ? 'Mui-error' : ''}>
+        <FormHelperText
+          component="span"
+          className={getClassName}
+          sx={{ marginTop: '3px', marginLeft: '-6px' }}
+          data-testid="ds-radio-group-helper-text"
+        >
           {error || helperText}
         </FormHelperText>
       )) || <Box height={18} />}
-    </StyledRadioForm>
+    </FormControl>
   );
 };
 
+RadioGroupComponent.displayName = 'RadioGroup';
+
+const RadioGroup = fixedForwardRef(RadioGroupComponent);
+
 export default RadioGroup;