@groupeactual/ui-kit 1.7.0-beta.0 → 1.7.0-beta.4

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,
@@ -41,9 +41,9 @@ 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 = {
@@ -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[]);
@@ -180,7 +181,15 @@ const MultiSelect = <T,>({
               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'
@@ -191,6 +200,25 @@ 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
@@ -227,6 +255,4 @@ const MultiSelect = <T,>({
   );
 };
 
-MultiSelect.displayName = 'MultiSelect';
-
 export default MultiSelect;

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

@@ -16,6 +16,7 @@ import {
 } from '@mui/material';
 
 import IconProvider from '@/components/IconProvider';
+import Text from '@/components/Text';
 import Tooltip from '@/components/Tooltip';
 
 interface ItemType<T> {
@@ -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,7 +1,7 @@
 import React, { BaseSyntheticEvent, useMemo } from 'react';
 
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-import { faCheck, faChevronDown } from '@fortawesome/pro-solid-svg-icons';
+import { faCheck, faChevronDown } from '@fortawesome/pro-regular-svg-icons';
 import { SelectStyle } from '@groupeactual/design-tokens';
 import {
   Box,
@@ -31,9 +31,10 @@ interface Props<T>
   error?: string;
   className?: string;
   popupIcon?: IconDefinition;
-  getRenderValue: (option: T) => string;
-  onChange: (value: T) => void;
-  onBlur?: (event: BaseSyntheticEvent) => void;
+  getRenderValue: (_option: T) => string;
+  onChange: (_value: T) => void;
+  onBlur?: (_event: BaseSyntheticEvent) => void;
+  onClick?: (_event: BaseSyntheticEvent) => void;
 }
 
 const MenuProps = {
@@ -67,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);
 
@@ -115,8 +118,16 @@ const Select = <T,>({
             <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') &&
@@ -129,6 +140,25 @@ 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
@@ -174,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;

package/src/components/Form/TextField/TextField.tsx

@@ -19,7 +19,7 @@ import Icon from '@/components/IconProvider';
 
 interface Props extends Omit<TextFieldProps, 'error'> {
   error?: string;
-  label: string;
+  label?: string;
   value?: string | unknown;
   name?: string;
   placeholder?: string;
@@ -28,124 +28,137 @@ interface Props extends Omit<TextFieldProps, 'error'> {
   maxLength?: number;
   width?: number | string;
   className?: string;
+  focused?: boolean;
+  onClick?: (_e: React.MouseEvent<HTMLInputElement>) => void;
   onBlur?: FocusEventHandler<unknown>;
   onChange?: (
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+    _e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
   ) => void;
 }
-const TextField = ({
-  name,
-  value,
-  error,
-  onBlur,
-  onChange,
-  label,
-  disabled,
-  width = '100%',
-  endAdornment,
-  placeholder = '',
-  maxLength,
-  ...props
-}: Props) => {
-  const theme = useTheme();
-  const StyledTextField = useMemo(
-    () => styled(MuiTextField)(TextFieldStyle(theme)),
-    [theme],
-  );
 
-  const [showPassword, setShowPassword] = useState(false);
-  const [currentType, setCurrentType] = useState<string>(props.type ?? 'text');
+const TextField = React.forwardRef<HTMLDivElement, Props>(
+  (
+    {
+      name,
+      value,
+      error,
+      onBlur,
+      onChange,
+      label = '',
+      disabled,
+      width = '100%',
+      endAdornment,
+      placeholder = '',
+      maxLength,
+      focused,
+      ...props
+    },
+    ref,
+  ) => {
+    const theme = useTheme();
+    const StyledTextField = useMemo(
+      () => styled(MuiTextField)(TextFieldStyle(theme)),
+      [theme],
+    );
 
-  const passwordEndAdornment: React.ReactNode = useMemo(() => {
-    return (
-      <Icon
-        className="DsTextField-passwordIcon"
-        icon={showPassword ? faEyeSlash : faEye}
-        color="blueClickable"
-        onClick={() => setShowPassword(!showPassword)}
-      />
+    const [showPassword, setShowPassword] = useState(false);
+    const [currentType, setCurrentType] = useState<string>(
+      props.type ?? 'text',
     );
-  }, [showPassword]);
 
-  useEffect(() => {
-    if (showPassword) {
-      setCurrentType('text');
-    } else {
-      setCurrentType(props.type ?? 'text');
-    }
-  }, [showPassword]);
+    const passwordEndAdornment: React.ReactNode = useMemo(() => {
+      return (
+        <Icon
+          className="DsTextField-passwordIcon"
+          icon={showPassword ? faEyeSlash : faEye}
+          color="blueClickable"
+          onClick={() => setShowPassword(!showPassword)}
+        />
+      );
+    }, [showPassword]);
 
-  const getTextFieldClassName = useMemo(() => {
-    const classNames = [
-      (!placeholder && 'TextField-mui') || 'TextField-ds',
-      props.color === 'success' && 'Mui-success',
-      value && 'Mui-filled',
-      props.className,
-    ];
+    useEffect(() => {
+      if (showPassword) {
+        setCurrentType('text');
+      } else {
+        setCurrentType(props.type ?? 'text');
+      }
+    }, [showPassword]);
 
-    return classNames.filter(Boolean).join(' ');
-  }, [value]);
+    const getTextFieldClassName = useMemo(() => {
+      const classNames = [
+        (!placeholder && 'TextField-mui') || 'TextField-ds',
+        props.color === 'success' && 'Mui-success',
+        value && 'Mui-filled',
+        props.className,
+      ];
 
-  const hasError = useMemo(
-    () =>
-      Boolean(
-        (error && error?.length > 0) ||
-          (maxLength && String(value).length > maxLength),
-      ),
-    [error, maxLength, value],
-  );
+      return classNames.filter(Boolean).join(' ');
+    }, [value]);
 
-  return (
-    <StyledTextField
-      variant="outlined"
-      name={name}
-      label={label}
-      value={value}
-      sx={{ width }}
-      placeholder={placeholder}
-      FormHelperTextProps={{ component: 'div' } as never}
-      InputLabelProps={{
-        shrink: (placeholder && true) || undefined,
-      }}
-      onClick={(e) => e.stopPropagation()}
-      onChange={(e) => {
-        onChange?.(e);
-      }}
-      onBlur={(e) => {
-        onBlur?.(e);
-      }}
-      error={hasError}
-      disabled={disabled}
-      InputProps={
-        props.type === 'password'
-          ? { endAdornment: passwordEndAdornment }
-          : { endAdornment }
-      }
-      {...props}
-      className={getTextFieldClassName}
-      type={currentType}
-      helperText={
-        <div style={{ display: 'table', width: '100%', marginRight: '4px' }}>
-          {(error || props.helperText) && (
-            <div
-              style={{
-                display: maxLength ? 'table-cell' : '',
-                float: 'left',
-              }}
-            >
-              {error || props.helperText}
-            </div>
-          )}
-          {maxLength && (
-            <div style={{ display: 'table-cell', float: 'right' }}>
-              {String(value).length}/{maxLength} caract.
-            </div>
-          )}
-        </div>
-      }
-    />
-  );
-};
+    const hasError = useMemo(
+      () =>
+        Boolean(
+          (error && error?.length > 0) ||
+            (maxLength && String(value).length > maxLength),
+        ),
+      [error, maxLength, value],
+    );
+
+    return (
+      <StyledTextField
+        variant="outlined"
+        name={name}
+        ref={ref}
+        label={label}
+        value={value}
+        sx={{ width }}
+        placeholder={placeholder}
+        focused={focused}
+        FormHelperTextProps={{ component: 'div' } as never}
+        InputLabelProps={{
+          shrink: (placeholder && true) || undefined,
+        }}
+        onClick={(e) => e.stopPropagation()}
+        onChange={(e) => {
+          onChange?.(e);
+        }}
+        onBlur={(e) => {
+          onBlur?.(e);
+        }}
+        error={hasError}
+        disabled={disabled}
+        InputProps={
+          props.type === 'password'
+            ? { endAdornment: passwordEndAdornment }
+            : { endAdornment }
+        }
+        {...props}
+        className={getTextFieldClassName}
+        type={currentType}
+        helperText={
+          <div style={{ display: 'table', width: '100%', marginRight: '4px' }}>
+            {(error || props.helperText) && (
+              <div
+                style={{
+                  display: maxLength ? 'table-cell' : '',
+                  float: 'left',
+                }}
+              >
+                {error || props.helperText}
+              </div>
+            )}
+            {maxLength && (
+              <div style={{ display: 'table-cell', float: 'right' }}>
+                {String(value).length}/{maxLength} caract.
+              </div>
+            )}
+          </div>
+        }
+      />
+    );
+  },
+);
 
 TextField.displayName = 'TextField';