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

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

@@ -1,4 +1,4 @@
-import React, { useMemo, useRef } from 'react';
+import React, { ReactNode, useId, useMemo, useRef } from 'react';
 
 import {
   faCheck,
@@ -7,23 +7,22 @@ import {
   faTimes,
 } from '@fortawesome/pro-regular-svg-icons';
 import { faCircleX } from '@fortawesome/pro-solid-svg-icons';
-import { AutoCompleteStyle } from '@groupeactual/design-tokens';
 import {
   type AutocompleteProps,
-  FormControl,
+  Box,
   FormHelperText,
+  InputLabel,
+  ListSubheader,
   MenuItem,
-  styled,
-  useTheme,
+  TextField,
 } from '@mui/material';
-import Autocomplete from '@mui/material/Autocomplete';
-import Box from '@mui/material/Box';
-import TextField, { TextFieldProps } from '@mui/material/TextField';
+import { Autocomplete } from '@mui/material';
 
 import Chip from '@/components/Chip';
 import IconProvider from '@/components/IconProvider';
+import Text from '@/components/Text';
 
-interface AutocompleteMultipleSelectProps<T>
+interface Props<T>
   extends Omit<
     AutocompleteProps<T, true, true, false>,
     | 'onChange'
@@ -35,42 +34,57 @@ interface AutocompleteMultipleSelectProps<T>
     | 'searchIcon'
   > {
   value: T[] | undefined;
-  label?: string;
+  label?: ReactNode;
   helperText?: string;
   placeholder?: string;
   options: T[];
-  getOptionLabel: (_option: T) => string;
-  getKeyValue: (_option: T) => string;
-  onChange: (_value: T[]) => void;
-  getOptionDisabled?: (_option: T) => boolean;
   color?: 'success';
   width?: number | string;
   error?: string;
   searchIcon?: boolean;
+  icon?: ReactNode;
+  isOptionEqualToValue?: (_option: T, _value: T) => boolean;
+  getOptionLabel: (_option: T) => string;
+  getKeyValue: (_option: T) => string;
+  onChange: (_value: T[]) => void;
+  getOptionDisabled?: (_option: T) => boolean;
+  getOptionGroupLabel?: (_option: T) => string;
+  handleOptionChip?: (_option: T) => ReactNode | undefined;
 }
 
-const AutocompleteMultipleSelect = <T,>({
-  value,
-  label,
-  placeholder,
-  options,
-  disabled,
-  getOptionLabel,
-  getKeyValue,
-  onChange,
-  getOptionDisabled,
-  width = '100%',
-  color,
-  helperText,
-  error,
-  searchIcon = false,
-  ...props
-}: AutocompleteMultipleSelectProps<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 AutocompleteMultipleSelectComponent = <T,>(
+  {
+    value,
+    label,
+    placeholder,
+    options,
+    disabled,
+    width = '100%',
+    color,
+    helperText,
+    error,
+    searchIcon = false,
+    icon,
+    getOptionLabel,
+    getKeyValue,
+    isOptionEqualToValue,
+    onChange,
+    getOptionDisabled,
+    getOptionGroupLabel,
+    handleOptionChip,
+    ...props
+  }: Props<T>,
+  ref: React.ForwardedRef<HTMLSelectElement>,
+) => {
+  const generatedId = useId();
+  const inputId = `autocomplete-multi-${generatedId}`;
 
   const handleValueChange = (
     _event: React.SyntheticEvent<Element, Event>,
@@ -92,27 +106,27 @@ const AutocompleteMultipleSelect = <T,>({
     event.stopPropagation();
   };
 
-  const addFormControlClassName = useMemo(() => {
+  const getTextFieldClassName = useMemo(() => {
     const classNames = [
-      'DsAutoComplete',
-      value && value.length > 0 && 'Mui-filled',
       color === 'success' && 'Mui-success',
+      value && 'Mui-filled',
+      props.autoFocus && 'Mui-focused',
       disabled && 'Mui-disabled',
+      props.className,
     ];
 
     return classNames.filter(Boolean).join(' ');
-  }, [value]);
+  }, [value, color, props.className, disabled, props.autoFocus]);
 
-  const addInputLabelClassName = useMemo(() => {
+  const getLabelAndPlaceholderClassName = useMemo(() => {
     const classNames = [
-      (!placeholder && 'labelCustom') || 'labelClassic Mui-Input-filled',
-      error && 'Mui-error',
       color === 'success' && 'Mui-success',
-      value && value.length > 0 && 'Mui-Input-filled',
+      (error || error) && 'Mui-error',
+      props.autoFocus && 'Mui-focused',
+      disabled && 'Mui-disabled',
     ];
-
     return classNames.filter(Boolean).join(' ');
-  }, [error, color, value]);
+  }, [color, error, props.autoFocus, disabled]);
 
   const getPopupIcon = useMemo(() => {
     if (color === 'success') {
@@ -128,145 +142,248 @@ const AutocompleteMultipleSelect = <T,>({
   const boxRef = useRef<HTMLHeadingElement>(null);
 
   return (
-    <Box sx={{ width }} ref={boxRef}>
-      <StyledAutoCompleteForm
-        fullWidth
-        color={color}
-        className={addFormControlClassName}
-      >
-        <Autocomplete
-          value={value}
-          onChange={handleValueChange}
-          {...props}
-          aria-placeholder={(withPlaceholder && placeholder) || ''}
-          disableCloseOnSelect
-          multiple
-          sx={{
-            ...props.sx,
-            '& .MuiAutocomplete-popupIndicator': { transform: 'none' },
-          }}
-          disabled={disabled}
-          options={options}
-          slotProps={{
-            paper: {
-              sx: {
-                fontSize: '14px',
-                marginTop: '4px',
-                boxShadow: '0px 2px 10px 0px #2727271F',
-              },
+    <Box
+      sx={{ width }}
+      ref={boxRef}
+      data-testid="ds-autocomplete-multi-container"
+    >
+      <Autocomplete
+        {...props}
+        ref={ref}
+        value={value}
+        className="MuiTextField-root MuiAutocomplete-multi"
+        onChange={handleValueChange}
+        aria-placeholder={(withPlaceholder && placeholder) || ''}
+        disableCloseOnSelect
+        multiple
+        sx={{
+          ...props.sx,
+          '.MuiInputBase-root': {
+            height: 'auto !important',
+            minHeight: '44px',
+            padding: '4px 65px 4px 4px !important',
+          },
+          '.MuiOutlinedInput-input': {
+            marginTop: value ? '0px' : '2px',
+          },
+          '& .MuiAutocomplete-popupIndicator': { transform: 'none' },
+        }}
+        disabled={disabled}
+        options={options}
+        slotProps={{
+          paper: {
+            sx: {
+              fontSize: '14px',
+              marginTop: '4px',
+              boxShadow: '0px 2px 10px 0px #2727271F',
             },
-          }}
-          clearIcon={
-            <>
-              {!disabled && value && (
-                <Box
-                  className="clear"
-                  onClick={() => handleClearValue()}
-                  onMouseDown={preventEventPropagation}
-                >
-                  <IconProvider icon={faTimes} />
-                </Box>
-              )}
-            </>
-          }
-          popupIcon={
+          },
+        }}
+        clearIcon={
+          <>
+            {!disabled && value && (
+              <Box
+                className="clear"
+                onClick={() => handleClearValue()}
+                onMouseDown={preventEventPropagation}
+                data-testid="ds-clear-icon"
+              >
+                <IconProvider icon={faTimes} />
+              </Box>
+            )}
+          </>
+        }
+        popupIcon={
+          icon || (
             <IconProvider
-              className={disabled ? 'Mui-disabled SelectIcon' : 'SelectIcon'}
+              className={getLabelAndPlaceholderClassName}
               icon={getPopupIcon}
               size="md"
+              data-testid="ds-popup-icon"
             />
-          }
-          renderTags={(tag: T[]) => {
-            return (
-              <>
-                {tag.map((selectedOption: T, _index: number) => {
-                  const optionLabel = getOptionLabel(selectedOption);
-                  const isOptionLabelNotEmpty =
-                    optionLabel !== null &&
-                    optionLabel !== undefined &&
-                    optionLabel !== '';
+          )
+        }
+        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>
+        )}
+        renderTags={(tag: T[]) => {
+          return (
+            <>
+              {tag.map((selectedOption: T, _index: number) => {
+                const optionLabel = getOptionLabel(selectedOption);
+                const isOptionLabelNotEmpty =
+                  optionLabel !== null &&
+                  optionLabel !== undefined &&
+                  optionLabel !== '';
 
-                  return (
-                    isOptionLabelNotEmpty && (
-                      <Chip
-                        key={getKeyValue(selectedOption)}
-                        variant={disabled ? 'outlined' : 'filled'}
-                        color="default"
-                        label={optionLabel}
-                        onMouseDown={preventEventPropagation}
-                        disabled={disabled}
-                        suffixIcon={faCircleX}
-                        suffixAction={() =>
-                          !disabled && handleDeleteChip(selectedOption)
-                        }
-                        data-testid="ChipOption"
-                        sx={{
-                          margin: '3px',
-                          maxWidth: boxRef?.current
-                            ? parseFloat(
-                                String(boxRef.current?.offsetWidth).replace(
-                                  'px',
-                                  '',
-                                ),
-                              ) - 50
-                            : width,
-                        }}
-                      />
-                    )
-                  );
-                })}
-              </>
-            );
-          }}
-          getOptionLabel={getOptionLabel}
-          renderOption={(propsMenu, option) => (
-            <MenuItem
-              {...propsMenu}
-              disabled={getOptionDisabled?.(option)}
-              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,
-                },
-              }}
-            >
+                return (
+                  isOptionLabelNotEmpty && (
+                    <Chip
+                      key={getKeyValue(selectedOption)}
+                      variant={disabled ? 'outlined' : 'filled'}
+                      color="default"
+                      label={optionLabel}
+                      onMouseDown={preventEventPropagation}
+                      disabled={disabled}
+                      suffixIcon={faCircleX}
+                      suffixAction={() =>
+                        !disabled && handleDeleteChip(selectedOption)
+                      }
+                      data-testid="ds-chip-option"
+                      sx={{
+                        margin: '3px',
+                        maxWidth: boxRef?.current
+                          ? parseFloat(
+                              String(boxRef.current?.offsetWidth).replace(
+                                'px',
+                                '',
+                              ),
+                            ) - 80
+                          : width,
+                      }}
+                    />
+                  )
+                );
+              })}
+            </>
+          );
+        }}
+        getOptionLabel={getOptionLabel}
+        renderOption={(props, option: T) => (
+          <MenuItem
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            {...(props as any)}
+            disabled={getOptionDisabled?.(option)}
+            selected={value?.some((val) =>
+              isOptionEqualToValue ? isOptionEqualToValue(option, val) : false,
+            )}
+            data-testid="ds-menu-item"
+            sx={{
+              wordBreak: 'break-word',
+              overflowWrap: 'break-word',
+              whiteSpace: 'normal',
+              hyphens: 'auto',
+              width: '100%',
+            }}
+          >
+            <Text variant="body2" sx={{ wordBreak: 'break-word' }}>
               {getOptionLabel(option)}
-            </MenuItem>
-          )}
-          renderInput={(params) => (
+            </Text>
+            {handleOptionChip && (
+              <Box sx={{ marginLeft: '8px' }}>{handleOptionChip(option)}</Box>
+            )}
+          </MenuItem>
+        )}
+        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}
+              {...params}
+              disabled={disabled}
+              className={getTextFieldClassName}
+              placeholder={placeholder}
+              helperText={undefined}
+              variant="outlined"
               error={!!error}
-              fullWidth
-              inputProps={{
-                ...params.inputProps,
-              }}
-              InputLabelProps={{
-                shrink: (!!placeholder && true) || undefined,
-                className: addInputLabelClassName,
-                disabled: false,
+              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={(withPlaceholder && 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>
   );
 };
 
-export default AutocompleteMultipleSelect;
+AutocompleteMultipleSelectComponent.displayName = 'AutocompleteMultipleSelect';
+
+const AutoCompleteMulti = fixedForwardRef(AutocompleteMultipleSelectComponent);
+
+export default AutoCompleteMulti;