@groupeactual/ui-kit 1.0.20 → 1.0.22

package/dist/es/types/components/Form/RadioGroup/RadioGroup.d.ts

@@ -1,18 +1,18 @@
 import React from 'react';
 import { RadioGroupProps } from '@mui/material';
-interface ItemType<T = string> {
+interface ItemType<T> {
     label: string;
     value: T;
 }
-interface Props extends Omit<RadioGroupProps, 'onChange'> {
+interface Props<T> extends Omit<RadioGroupProps, 'onChange'> {
     label: string;
-    options: ItemType[];
-    onChange: (value: string) => void;
+    options: ItemType<T>[];
+    onChange: (value: T) => void;
     error?: string;
     disabled?: boolean;
 }
 declare const RadioGroup: {
-    ({ options, defaultValue, label, onChange, disabled, error }: Props): React.JSX.Element;
+    <T>({ options, value, defaultValue, label, onChange, disabled, error }: Props<T>): React.JSX.Element;
     displayName: string;
 };
 export default RadioGroup;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@groupeactual/ui-kit",
-  "version": "1.0.20",
+  "version": "1.0.22",
   "type": "module",
   "description": "A simple template for a custom React component library",
   "devDependencies": {
@@ -42,22 +42,22 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@emotion/serialize": "^1.1.2",
-    "@fortawesome/fontawesome-common-types": "^6.4.0",
-    "@fortawesome/fontawesome-svg-core": "^6.4.0",
-    "@fortawesome/pro-regular-svg-icons": "^6.4.0",
-    "@fortawesome/pro-solid-svg-icons": "^6.4.0",
+    "@fortawesome/fontawesome-common-types": "^6.4.2",
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/pro-regular-svg-icons": "git+https://github.com/actualtysoft/pro-regular-svg-icons.git#6.4.2",
+    "@fortawesome/pro-solid-svg-icons": "git+https://github.com/actualtysoft/pro-solid-svg-icons.git#6.4.2",
     "@mui/base": "5.0.0-beta.5",
     "@mui/material": "^5.13.6",
     "@mui/system": "^5.13.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@groupeactual/design-tokens": "1.0.20"
+    "@groupeactual/design-tokens": "1.0.22"
   },
   "peerDependencies": {
-    "@fortawesome/fontawesome-common-types": "^6.3.0",
-    "@fortawesome/fontawesome-svg-core": "^6.3.0",
-    "@fortawesome/pro-regular-svg-icons": "^6.3.0",
-    "@fortawesome/pro-solid-svg-icons": "^6.3.0",
+    "@fortawesome/fontawesome-common-types": "^6.4.2",
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/pro-regular-svg-icons": "git+https://github.com/actualtysoft/pro-regular-svg-icons.git#6.4.2",
+    "@fortawesome/pro-solid-svg-icons": "git+https://github.com/actualtysoft/pro-solid-svg-icons.git#6.4.2",
     "@mui/base": "^5.0.0-alpha.108",
     "@mui/material": "^5.12.0",
     "@mui/system": "^5.12.0",

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

@@ -1,4 +1,5 @@
-import React, { useMemo, useState } from 'react';
+/* eslint-disable no-undefined */
+import React, { useMemo, useState, useEffect } from 'react';
 import {
   FormControl,
   FormControlLabel,
@@ -14,48 +15,58 @@ import {
 
 import { RadioStyle } from '@groupeactual/design-tokens';
 
-interface ItemType<T = string> {
+interface ItemType<T> {
   label: string;
   value: T;
 }
 
-interface Props extends Omit<RadioGroupProps, 'onChange'> {
+interface Props<T> extends Omit<RadioGroupProps, 'onChange'> {
   label: string;
-  options: ItemType[];
-  onChange: (value: string) => void;
+  options: ItemType<T>[];
+  onChange: (value: T) => void;
   error?: string;
   disabled?: boolean;
 }
 
-const RadioGroup = ({
+const RadioGroup = <T,>({
   options,
+  value,
   defaultValue,
   label,
   onChange,
   disabled = false,
   error = ''
-}: Props) => {
+}: Props<T>) => {
   const theme = useTheme();
   const StyledRadioForm = useMemo(
     () => styled(FormControl)(RadioStyle(theme)),
     [theme]
   );
 
+  const isControlled = value !== undefined;
   const [selectedOption, setSelectedOption] = useState(defaultValue || '');
 
+  useEffect(() => {
+    if (!isControlled) {
+      setSelectedOption(defaultValue || '');
+    }
+  }, [defaultValue, isControlled]);
+
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const value = (event.target as HTMLInputElement).value;
-    setSelectedOption(value);
-    onChange(value);
+    const newValue = (event.target as HTMLInputElement).value as T;
+    if (!isControlled) {
+      setSelectedOption(newValue);
+    }
+    onChange(newValue);
   };
 
   const getFormControlClassName = useMemo(() => {
     const classNames: string[] = [];
     if (disabled) classNames.push('Mui-disabled');
-    if (!selectedOption && error) classNames.push('Mui-error');
+    if (!selectedOption && !isControlled && error) classNames.push('Mui-error');
 
     return classNames.join(' ');
-  }, [options, disabled, selectedOption, error]);
+  }, [disabled, selectedOption, error, isControlled]);
 
   return (
     <StyledRadioForm
@@ -65,8 +76,8 @@ const RadioGroup = ({
     >
       <FormLabel>{label}</FormLabel>
       <RadioGroupMUI
-        defaultValue={defaultValue}
-        value={selectedOption}
+        defaultValue={isControlled ? undefined : defaultValue}
+        value={isControlled ? value : selectedOption}
         onChange={handleChange}
       >
         {options?.slice(0, 7).map((option, index) => (