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

package/dist/es/src/components/UploadDocument/FileUploaderSingle.d.ts

@@ -17,7 +17,7 @@ export interface Props {
     children?: JSX.Element | null;
     titleAddButton?: string;
     _isDroppingFile?: boolean;
-    validateFile?: (_size: number, _type: string) => boolean;
+    validateFile?: (_size: number, _type: string, _accept: string[], _setUploadFileError: React.Dispatch<React.SetStateAction<boolean | string>>) => boolean;
     removeExistingFile?: () => void;
     onTouched?: () => void;
     onFileDataChange?: (_fileData: {
@@ -57,13 +57,13 @@ export interface Props {
  *
  * Example:
  * ```js
- * validateFile={(size, type) => {
+ * validateFile={(size, type, accept, setUploadFileError) => {
  *   if (size > 10 * 1024 * 1024) {
- *     setCustomFileError('Le fichier doit être inférieur à 10 Mo');
+*      setUploadFileError('Le fichier doit être inférieur à 10 Mo');
  *     return true;
  *   }
- *   if (!['application/pdf', 'image/png', 'image/jpeg', 'image/jpg'].includes(type)) {
- *     setCustomFileError('Le fichier doit être au format PDF, PNG, JPEG ou JPG');
+ *   if (!accept.includes(type)) {
+ *     setUploadFileError('Le fichier doit être au format PDF, PNG, JPEG ou JPG');
  *     return true;
  *   }
  *   return false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@groupeactual/ui-kit",
-  "version": "1.7.0-beta.3",
+  "version": "1.7.0-beta.4",
   "type": "module",
   "description": "A simple template for a custom React component library",
   "devDependencies": {
@@ -56,7 +56,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-google-picker": "^0.1.0",
-    "@groupeactual/design-tokens": "1.7.0-beta.3"
+    "@groupeactual/design-tokens": "1.7.0-beta.4"
   },
   "scripts": {
     "build": "rollup -c",

package/src/components/Tooltip/Tooltip.tsx

@@ -32,8 +32,8 @@ const Tooltip = ({
       title={<>{title}</>}
       {...tooltipProps}
       sx={{
-        ...tooltipProps.sx,
         display: 'inline-flex',
+        ...tooltipProps.sx,
       }}
       placement={placement || undefined}
       slotProps={{

package/src/components/UploadDocument/FileUploaderSingle.tsx

@@ -48,7 +48,12 @@ export interface Props {
   children?: JSX.Element | null;
   titleAddButton?: string;
   _isDroppingFile?: boolean; // * Only used for storybook
-  validateFile?: (_size: number, _type: string) => boolean;
+  validateFile?: (
+    _size: number,
+    _type: string,
+    _accept: string[],
+    _setUploadFileError: React.Dispatch<React.SetStateAction<boolean | string>>,
+  ) => boolean;
   removeExistingFile?: () => void;
   onTouched?: () => void;
   onFileDataChange?: (
@@ -91,13 +96,13 @@ export interface Props {
  *
  * Example:
  * ```js
- * validateFile={(size, type) => {
+ * validateFile={(size, type, accept, setUploadFileError) => {
  *   if (size > 10 * 1024 * 1024) {
- *     setCustomFileError('Le fichier doit être inférieur à 10 Mo');
+*      setUploadFileError('Le fichier doit être inférieur à 10 Mo');
  *     return true;
  *   }
- *   if (!['application/pdf', 'image/png', 'image/jpeg', 'image/jpg'].includes(type)) {
- *     setCustomFileError('Le fichier doit être au format PDF, PNG, JPEG ou JPG');
+ *   if (!accept.includes(type)) {
+ *     setUploadFileError('Le fichier doit être au format PDF, PNG, JPEG ou JPG');
  *     return true;
  *   }
  *   return false;
@@ -147,6 +152,10 @@ const FileUploaderSingle = ({
     useState<boolean>(_isDroppingFile);
   const fileInputRef = useRef<HTMLInputElement | null>(null);
 
+  const [fileUploadError, setUploadFileError] = useState<string | boolean>(
+    false,
+  );
+
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
@@ -167,6 +176,7 @@ const FileUploaderSingle = ({
         }[];
       } | null,
       token: string | null = null,
+      accept: string[] = [],
       fakeClick?: boolean,
     ) => {
       if (fakeClick) {
@@ -175,13 +185,17 @@ const FileUploaderSingle = ({
       handleClose();
       onTouched?.();
 
+      // * Local File
       if (
         fileInputRef.current?.files &&
         fileInputRef.current.files.length > 0
       ) {
         const file = fileInputRef.current.files[0];
         setCurrentFile(file);
-        if (validateFile && validateFile(file.size, file.type)) {
+        if (
+          validateFile &&
+          validateFile(file.size, file.type, accept, setUploadFileError)
+        ) {
           setIsDroppingFile(false);
           return;
         }
@@ -199,6 +213,7 @@ const FileUploaderSingle = ({
         setIsDroppingFile(false);
       }
 
+      // * Google Drive
       if (token && data && data.docs && data.docs.length > 0) {
         const googleFile = data.docs[0];
         const fileData = {
@@ -210,7 +225,12 @@ const FileUploaderSingle = ({
         };
         if (
           validateFile &&
-          validateFile(googleFile.sizeBytes, googleFile.mimeType)
+          validateFile(
+            googleFile.sizeBytes,
+            googleFile.mimeType,
+            accept,
+            setUploadFileError,
+          )
         ) {
           return;
         }
@@ -251,9 +271,9 @@ const FileUploaderSingle = ({
 
   const dashedColor = useMemo(() => {
     if (isDroppingFile) return DROPPING_COLOR;
-    if (error) return ERROR_COLOR;
+    if (error || fileUploadError !== false) return ERROR_COLOR;
     return DEFAULT_COLOR;
-  }, [isDroppingFile, error]);
+  }, [isDroppingFile, error, fileUploadError]);
 
   const bgColor = useMemo(() => {
     if (fileData?.name || disabledInput) return 'greyXLight';
@@ -263,9 +283,9 @@ const FileUploaderSingle = ({
 
   const titleColor = useMemo(() => {
     if (fileData?.name) return 'greyDark';
-    if (error) return 'redError';
+    if (error || fileUploadError !== false) return 'redError';
     return 'greyXDark';
-  }, [fileData?.name, error]);
+  }, [fileData?.name, error, fileUploadError]);
 
   const inputCss = useMemo(
     () => ({
@@ -320,7 +340,12 @@ const FileUploaderSingle = ({
         </Text>
         {titleTooltip && (
           <Box sx={{ marginLeft: '4px' }}>
-            <Tooltip title={titleTooltip}>
+            <Tooltip
+              title={titleTooltip}
+              sx={{
+                display: 'flex',
+              }}
+            >
               <IconProvider icon={faInfoCircle} size="sm" color="blueInfo" />
             </Tooltip>
           </Box>
@@ -361,7 +386,7 @@ const FileUploaderSingle = ({
               disabled={!!fileData?.name || disabledInput}
               type="file"
               ref={fileInputRef}
-              onChange={handleFileChange}
+              onChange={(event) => handleFileChange(event, null, null, accept)}
               onBlur={onTouched}
               accept={accept.join(', ')}
             />
@@ -446,7 +471,7 @@ const FileUploaderSingle = ({
                 >
                   <MenuItem
                     testId="pc-add"
-                    onClick={() => handleFileChange(null, null, null, true)}
+                    onClick={() => handleFileChange(null, null, null, [], true)}
                   >
                     <Box gap={1} display="flex">
                       <IconProvider size="sm" icon={faFolderOpen} />
@@ -455,7 +480,7 @@ const FileUploaderSingle = ({
                   </MenuItem>
                   <GooglePickerWrapper
                     callback={(data, token) =>
-                      handleFileChange(null, data, token)
+                      handleFileChange(null, data, token, accept)
                     }
                     multiselect={true}
                     navHidden={false}
@@ -482,7 +507,7 @@ const FileUploaderSingle = ({
                     backgroundColor: '#FFFFFF !important',
                   },
                 }}
-                onClick={() => handleFileChange(null, null, null, true)}
+                onClick={() => handleFileChange(null, null, null, [], true)}
                 disabled={!!fileData?.name}
               >
                 <IconProvider icon={faUpload} size="md" mr={1} />
@@ -492,14 +517,16 @@ const FileUploaderSingle = ({
           </Box>
         </Box>
       </Tooltip>
-      {(error || helperText) && (
+      {(error || helperText || fileUploadError !== false) && (
         <Box pl={1} pt={1}>
           <Text
             variant="caption"
-            color={(error && 'redError') || 'greyDark'}
+            color={
+              ((error || fileUploadError !== false) && 'redError') || 'greyDark'
+            }
             data-testid="helperText"
           >
-            {helperText}
+            {fileUploadError !== false ? fileUploadError : helperText}
           </Text>
         </Box>
       )}