@groupeactual/ui-kit 1.7.5 → 1.7.6-beta.0

package/dist/es/src/components/Datatable/datatable.interface.d.ts

@@ -11,7 +11,7 @@ export interface PaginationTrans {
 export type ColumnDatatable<T> = {
     name: string;
     render: (_record: T) => JSX.Element;
-    title?: string;
+    title?: ReactNode;
     topTitle?: string;
     width?: string;
     sortable?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@groupeactual/ui-kit",
-  "version": "1.7.5",
+  "version": "1.7.6-beta.0",
   "type": "module",
   "description": "A simple template for a custom React component library",
   "main": "dist/cjs/index.js",
@@ -33,7 +33,7 @@
     "@mui/x-date-pickers": "7.15.0",
     "@mui/x-date-pickers-pro": "7.15.0",
     "styled-components": "^6.1.13",
-    "@groupeactual/design-tokens": "1.7.5"
+    "@groupeactual/design-tokens": "1.7.6-beta.0"
   },
   "scripts": {
     "build": "rollup -c",

package/src/components/Datatable/Datatable.tsx

@@ -159,11 +159,29 @@ const Datatable = <T extends object>({
                               />
                             )}
                           >
-                            <Text variant="body1Medium" pr={1}>
+                            <Box
+                              sx={{
+                                pr: 1,
+                                fontWeight: 500,
+                                lineHeight: '16px',
+                                fontSize: '13px',
+                              }}
+                            >
                               {title}
-                            </Text>
+                            </Box>
                           </TableSortLabel>
-                        )) || <Text variant="body1Medium">{title}</Text>}
+                        )) || (
+                          <Box
+                            sx={{
+                              pr: 1,
+                              fontWeight: 500,
+                              lineHeight: '16px',
+                              fontSize: '13px',
+                            }}
+                          >
+                            {title}
+                          </Box>
+                        )}
                       </TableCell>
                     );
                   },

package/src/components/Datatable/datatable.interface.ts

@@ -15,7 +15,7 @@ export interface PaginationTrans {
 export type ColumnDatatable<T> = {
   name: string;
   render: (_record: T) => JSX.Element;
-  title?: string;
+  title?: ReactNode;
   topTitle?: string;
   width?: string;
   sortable?: boolean;

package/src/components/Form/Checkbox/Checkbox.tsx

@@ -78,7 +78,7 @@ const Checkbox = ({
   }, [disabled]);
 
   return (
-    <StyledCheckboxForm className={getComponentClassName}>
+    <StyledCheckboxForm className={getComponentClassName} sx={props?.sx}>
       <FormControlLabel
         disabled={disabled}
         control={

package/src/components/UploadDocument/FileUploader.tsx

@@ -95,7 +95,9 @@ const FileUploader = ({
   // * States
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   // * filesData is used to display the files in the component
-  const [filesData, setFilesData] = useState<FileDataType[] | undefined>([]);
+  const [filesData, setFilesData] = useState<FileDataType[] | undefined>(
+    undefined,
+  );
   const [isDroppingFile, setIsDroppingFile] =
     useState<boolean>(_isDroppingFile);
   // * uploadFileError is used to display the error message when the file is not valid from the validateFile function
@@ -328,42 +330,51 @@ const FileUploader = ({
     });
   };
 
-  // * UseEffects
-
-  // * Initialize the component with the files passed as props
-  useEffect(() => {
-    if (!isInitialized && files.length > 0) {
-      const initializeFiles = async () => {
-        const initialFiles = await Promise.all(
-          files.map(async (file) => {
-            const response = await fetch(file.url);
-            const blob = await response.blob();
+  const initializeFiles = async () => {
+    const initialFiles = await Promise.all(
+      files.map(async (file) => {
+        let fileTmp: File | undefined = undefined;
+
+        if (isMulti) {
+          const response = await fetch(file.url);
+          const blob = await response.blob();
+          fileTmp = new File([blob], file.name, {
+            type: file.type,
+          });
+        }
 
-            return {
-              name: file.name,
-              size: Math.round(file.size / 1024), // Convert size to KB
-              type: file.type,
-              url: file.url,
-              file: new File([blob], file.name, {
-                type: file.type,
-              }),
-            };
-          }),
-        );
+        return {
+          name: file.name,
+          size: Math.round(file.size / 1024), // Convert size to KB
+          type: file.type,
+          url: file.url,
+          file: fileTmp,
+        };
+      }),
+    );
+
+    setFilesData(initialFiles);
+  };
 
-        setFilesData(initialFiles);
-      };
+  // * UseEffects
 
-      initializeFiles();
+  // * Manage isInitialized state
+  useEffect(() => {
+    if (!isInitialized && filesData && filesData.length >= 0) {
       setIsInitialized(true);
     }
-  }, [files]);
+  }, [isInitialized, filesData]);
 
+  // * Manage filesData state
   useEffect(() => {
-    // * Notify parent component
-    onFilesDataChange?.(filesData);
+    if (isInitialized && typeof filesData !== 'undefined') {
+      onFilesDataChange?.(filesData);
+    } else if (!isInitialized && typeof filesData === 'undefined') {
+      initializeFiles();
+    }
   }, [filesData]);
 
+  // * Revoke the object URL to free up memory
   useEffect(() => {
     return () => {
       if (!filesData?.length) return;