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

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

@@ -1,29 +1,26 @@
-import React, { BaseSyntheticEvent, useMemo } from 'react';
+import React, { BaseSyntheticEvent, ReactNode, useId, useMemo } from 'react';
 
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { faCheck, faChevronDown } from '@fortawesome/pro-regular-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 IconProvider from '@/components/IconProvider';
+import Text from '@/components/Text';
 
 interface Props<T>
   extends Omit<SelectProps<T>, 'value' | 'onChange' | 'color' | 'error'> {
+  label?: ReactNode;
   options: T[];
   placeholder?: string;
   disabled?: boolean;
-  label?: string;
   helperText?: string;
   color?: 'success';
   value: T | undefined;
@@ -47,161 +44,184 @@ const MenuProps = {
   },
 };
 
-const Select = <T,>({
-  value,
-  label = '',
-  options,
-  color,
-  error,
-  placeholder = '',
-  helperText,
-  width = '100%',
-  disabled,
-  popupIcon = faChevronDown,
-  onChange,
-  getRenderValue,
-  ...props
-}: Props<T>) => {
-  const theme = useTheme();
-  const StyledSelectForm = 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 SelectComponent = <T,>(
+  {
+    value,
+    label = '',
+    options,
+    color,
+    error,
+    placeholder = '',
+    helperText,
+    width = '100%',
+    disabled,
+    popupIcon = faChevronDown,
+    onChange,
+    getRenderValue,
+    ...props
+  }: Props<T>,
+  ref: React.ForwardedRef<HTMLSelectElement>,
+) => {
+  const generatedId = useId();
+
+  const inputId = props.name || `select-${generatedId}`;
 
   const [isOpened, setIsOpened] = React.useState(props.open ?? false);
 
   const handleChange = (event: SelectChangeEvent<T>) =>
     onChange?.(event.target.value as T);
 
-  const getFormControlClassName = useMemo(() => {
+  const getClassName = useMemo(() => {
     const classNames = [
-      'DSSingleSelect',
-      (!placeholder && 'Select-mui') || 'Select-ds',
       value && 'Mui-filled',
       error && 'Mui-error',
+      disabled && 'Mui-disabled',
+      color === 'success' && 'Mui-success',
     ];
 
     return classNames.filter(Boolean).join(' ');
-  }, [value, error, placeholder]);
+  }, [value, error, color, disabled]);
 
   return (
-    <Box sx={{ width }}>
-      <StyledSelectForm
-        fullWidth
-        color={color}
-        className={getFormControlClassName}
-        disabled={disabled}
-        sx={{
-          '.MuiOutlinedInput-input': {
-            marginTop: value ? '0px' : '2px',
-          },
-        }}
-      >
-        <InputLabel error={!!error} disabled={disabled}>
+    <Box
+      sx={{
+        '.MuiOutlinedInput-input': {
+          marginTop: value ? '0px' : '2px',
+        },
+      }}
+      data-testid="ds-select-container"
+    >
+      {label && (
+        <InputLabel
+          htmlFor={inputId}
+          disabled={disabled}
+          className={getClassName}
+          id={props?.labelId}
+          data-testid="ds-select-label"
+        >
           {label}
         </InputLabel>
-        <MuiSelect
-          sx={{
-            color: color + '! important',
-            '& .MuiSelect-select .notranslate::after': placeholder
-              ? {
-                  content: `"${placeholder}"`,
-                  opacity: !placeholder ? '0 !important' : '1 !important',
-                }
-              : {},
-          }}
-          label={label}
-          value={value}
-          notched={(placeholder && true) || undefined}
-          onChange={handleChange}
-          IconComponent={({ className }) => (
-            <IconProvider
-              className={disabled ? 'Mui-disabled SelectIcon' : 'SelectIcon'}
-              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') &&
-                  color !== 'success'
-                    ? 'rotate(180deg)'
-                    : 'none',
-              }}
-            />
-          )}
-          MenuProps={MenuProps}
-          renderValue={(value) => getRenderValue(value)}
-          {...props}
-          open={isOpened}
-          onClose={(e) => {
-            if (!disabled) {
-              if (props.onClose) {
-                props.onClose(e);
+      )}
+      <MuiSelect
+        id={inputId}
+        ref={ref}
+        disabled={disabled}
+        className={getClassName}
+        sx={{
+          width,
+          '& .MuiSelect-select .notranslate::after': placeholder
+            ? {
+                content: `"${placeholder}"`,
+                opacity: !placeholder ? '0 !important' : '1 !important',
               }
-
-              setIsOpened(false);
+            : {},
+        }}
+        value={value !== undefined ? value : ''}
+        notched={(placeholder && true) || undefined}
+        onChange={handleChange}
+        IconComponent={({ className }) => (
+          <IconProvider
+            className={
+              getClassName + (color === 'success' ? '' : ' SelectIcon')
             }
-          }}
-          onOpen={(e) => {
-            if (!disabled) {
-              if (props.onOpen) {
-                props.onOpen(e);
+            icon={color === 'success' ? faCheck : popupIcon}
+            onClick={() => {
+              if (!disabled) {
+                setIsOpened(!isOpened);
               }
+            }}
+            size="md"
+            sx={{
+              marginTop: color === 'success' ? '2px' : '0px',
+              transform:
+                className.toString().includes('iconOpen') && color !== 'success'
+                  ? 'rotate(180deg)'
+                  : 'none',
+              ':hover': {
+                cursor: disabled ? 'auto' : 'pointer',
+              },
+            }}
+            data-testid="ds-icon-component"
+          />
+        )}
+        MenuProps={MenuProps}
+        renderValue={(value) => getRenderValue(value)}
+        {...props}
+        open={isOpened}
+        onClose={(e) => {
+          if (!disabled) {
+            if (props.onClose) {
+              props.onClose(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, i) => (
+          <MenuItem
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            {...(props as any)}
+            key={i}
+            value={option as never}
+            data-testid={`ds-menu-item-${i}`}
+            sx={{
+              wordBreak: 'break-word',
+              overflowWrap: 'break-word',
+              whiteSpace: 'normal',
+              hyphens: 'auto',
+              width: '100%',
+              justifyContent:
+                props.className === 'PaginationSelect'
+                  ? 'center'
+                  : 'flex-start',
+            }}
+          >
+            <Text variant="body2">
+              {getRenderValue ? getRenderValue(option) : option['label']}
+            </Text>
+          </MenuItem>
+        ))}
+      </MuiSelect>
+      {(error || helperText) && (
+        <FormHelperText
+          component="span"
+          className={getClassName}
+          sx={{
+            display: 'table',
+            width: '100%',
+            marginRight: '4px',
+            marginTop: '4px',
+            marginLeft: 0,
           }}
+          data-testid="ds-form-helper-text"
         >
-          {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',
-                wordWrap: 'break-word',
-                minWidth: '100%',
-                maxWidth: '100%',
-                backgroundColor:
-                  value === option ? 'blueHoverEquivalence' : 'white',
-              }}
-              key={i}
-              value={option as never}
-              onMouseEnter={(e: BaseSyntheticEvent) =>
-                (e.target.style.backgroundColor =
-                  theme.palette['blueHoverEquivalence'])
-              }
-              onMouseLeave={(e: BaseSyntheticEvent) => {
-                if (value !== option) {
-                  e.target.style.backgroundColor = theme.palette['white'];
-                }
-              }}
-            >
-              {getRenderValue ? getRenderValue(option) : option['label']}
-            </MenuItem>
-          ))}
-        </MuiSelect>
-        {(error || helperText) && (
-          <FormHelperText component="span" className={error ? 'Mui-error' : ''}>
-            {error || helperText}
-          </FormHelperText>
-        )}
-      </StyledSelectForm>
+          {error || helperText}
+        </FormHelperText>
+      )}
     </Box>
   );
 };
 
+SelectComponent.displayName = 'Select';
+
+const Select = fixedForwardRef(SelectComponent);
+
 export default Select;

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

@@ -1,68 +1,108 @@
-import React, { useMemo } from 'react';
+import React, { ReactNode, useMemo } from 'react';
 
-import { SwitchStyle } from '@groupeactual/design-tokens';
 import {
+  Box,
   FormControl,
   FormControlLabel,
   FormGroup,
+  FormHelperText,
   Switch as SwitchMui,
   SwitchProps,
   Typography,
-  styled,
-  useTheme,
 } from '@mui/material';
 
 interface Props {
-  label: string;
+  label?: ReactNode;
+  helperText?: string;
   checked: boolean;
   leftSideLabel?: string;
   onClick: () => void;
 }
 
-const Switch = ({
-  label,
-  checked,
-  leftSideLabel,
-  onClick,
-  ...props
-}: SwitchProps & Props) => {
-  const theme = useTheme();
-  const StyledSwitch = useMemo(
-    () => styled(SwitchMui)(SwitchStyle(theme)),
-    [theme],
-  );
+const Switch = React.forwardRef<HTMLButtonElement, SwitchProps & Props>(
+  ({ label, helperText, checked, leftSideLabel, onClick, ...props }, ref) => {
+    const getClassName = useMemo(() => {
+      const classNames = [
+        props.disabled && 'Mui-disabled',
+        checked && 'Mui-checked',
+      ];
 
-  return (
-    <FormControl component="fieldset" disabled={props.disabled}>
-      <FormGroup
-        sx={{
-          display: 'flex',
-          flexDirection: 'row',
-          alignItems: 'center',
-          gap: '10px',
-        }}
-      >
-        {leftSideLabel && <Typography>{leftSideLabel}</Typography>}
-        <FormControlLabel
-          control={
-            <StyledSwitch
-              role="switch"
-              disableFocusRipple
-              onClick={() => {
-                if (!props.disabled) {
-                  if (onClick) {
-                    onClick();
-                  }
+      return classNames.filter(Boolean).join(' ');
+    }, [props.disabled, checked]);
+
+    return (
+      <Box data-testid="ds-switch-container">
+        <FormControl
+          component="fieldset"
+          disabled={props.disabled}
+          sx={
+            props.disabled
+              ? {
+                  '.MuiTypography-root': {
+                    color: 'text.disabled',
+                    fontWeight: 500,
+                  },
                 }
-              }}
-              checked={checked}
-            />
+              : {}
           }
-          label={<Typography>{label}</Typography>}
-        />
-      </FormGroup>
-    </FormControl>
-  );
-};
+          data-testid="ds-switch-form-control"
+        >
+          <FormGroup
+            sx={{
+              display: 'flex',
+              flexDirection: 'row',
+              alignItems: 'center',
+              gap: '10px',
+            }}
+            data-testid="ds-switch-form-group"
+          >
+            {leftSideLabel && (
+              <Typography data-testid="ds-left-side-label">
+                {leftSideLabel}
+              </Typography>
+            )}
+            <FormControlLabel
+              control={
+                <SwitchMui
+                  {...props}
+                  ref={ref}
+                  className={getClassName}
+                  role="switch"
+                  disableFocusRipple
+                  onClick={() => {
+                    if (!props.disabled) {
+                      if (onClick) {
+                        onClick();
+                      }
+                    }
+                  }}
+                  checked={checked}
+                  data-testid="ds-switch"
+                />
+              }
+              label={
+                label && (
+                  <Typography data-testid="ds-switch-label">{label}</Typography>
+                )
+              }
+            />
+          </FormGroup>
+          {helperText && (
+            <FormHelperText
+              sx={{ margin: 0 }}
+              component="span"
+              className={getClassName}
+              data-testid="ds-form-helper-text"
+            >
+              {helperText}
+            </FormHelperText>
+          )}
+        </FormControl>
+      </Box>
+    );
+  },
+);
+
+Switch.displayName = 'Switch';
 
 export default Switch;