Fixes incorrect useMemo and console.log

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mui-file-upload",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.3",
   "description": "A library of components that are related to file uploads built on top of MUI",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

src/components/FileDropzone/FileDropzoneBody.tsx

@@ -72,7 +72,7 @@ export const FileDropzoneBody = (props: FileDropzoneBodyProps) => {
           titleColor: "error",
         };
     }
-  }, [status]);
+  }, [status, normalTitle, dropTitle, fileOverloadTitle, dragRejectedTitle]);
   return (
     <Stack spacing={2} padding={5} alignItems="center">
       <Stack>

src/components/FileDropzone/FileDropzoneInputBody.tsx

@@ -38,7 +38,7 @@ export const FileDropzoneInputBody = (props: FileDropzoneInputBodyProps) => {
     () => FileDropzoneStatusUtils.getInfo(dropzoneState),
     [dropzoneState]
   );
-  console.log("render");
+
   return (
     <Typography
       paddingX={2}

src/components/FileUpload/MultiFileUpload.tsx

@@ -1,12 +1,17 @@
 import { Stack } from "@mui/material";
-import { useFileUploaderManager, useFileUploader } from "../../hooks";
+import {
+  useFileUploaderManager,
+  useFileUploader,
+  FileUploaderObservers,
+} from "../../hooks";
 import {
   useRejectedFileManager,
   FileDropzone,
   FileDropzoneBody,
 } from "../FileDropzone";
 import { BaseFileUploadProps } from "./types";
 import { FileUploadResults } from "./FileUploadResults";
+import { useMemo } from "react";
 
 export type MultiFileUploadProps<Response = string> =
   BaseFileUploadProps<Response>;
@@ -25,14 +30,18 @@ export const MultiFileUpload = <Response = string,>(
 
   const { fileUploads, removeFileUpload, handlers } =
     fileManager ?? useFileUploaderManager<Response>();
-  const { upload } = useFileUploader(uploadService, {
-    onFileUploadStart: handlers.onFileUploadStart,
-    onFileProgressUpdate: handlers.onFileProgressUpdate,
-    onFileUploadComplete: (fu) => {
-      onSuccessfulUpload?.(fu);
-      handlers.onFileUploadComplete(fu);
-    },
-  });
+  const mergedObservers = useMemo(
+    (): FileUploaderObservers<Response> => ({
+      onFileUploadStart: handlers.onFileUploadStart,
+      onFileProgressUpdate: handlers.onFileProgressUpdate,
+      onFileUploadComplete: (fu) => {
+        onSuccessfulUpload?.(fu);
+        handlers.onFileUploadComplete(fu);
+      },
+    }),
+    [handlers, onSuccessfulUpload]
+  );
+  const { upload } = useFileUploader(uploadService, mergedObservers);
 
   return (
     <Stack spacing={2}>

src/components/FileUpload/SingleFileUpload.tsx

@@ -5,8 +5,13 @@ import {
   FileDropzoneInputBody,
 } from "../FileDropzone";
 import { FileUploadResults } from "./FileUploadResults";
-import { useFileUploaderManager, useFileUploader } from "../../hooks";
+import {
+  useFileUploaderManager,
+  useFileUploader,
+  FileUploaderObservers,
+} from "../../hooks";
 import { BaseFileUploadProps } from "./types";
+import { useMemo } from "react";
 
 export type SingleFileUploadProps<Response = string> =
   BaseFileUploadProps<Response>;
@@ -26,14 +31,18 @@ export const SingleFileUpload = <Response = string,>(
 
   const { fileUploads, removeFileUpload, handlers } =
     fileManager ?? useFileUploaderManager<Response>();
-  const { upload } = useFileUploader(uploadService, {
-    onFileUploadStart: handlers.onFileUploadStart,
-    onFileProgressUpdate: handlers.onFileProgressUpdate,
-    onFileUploadComplete: (fu) => {
-      onSuccessfulUpload?.(fu);
-      handlers.onFileUploadComplete(fu);
-    },
-  });
+  const mergedObservers = useMemo(
+    (): FileUploaderObservers<Response> => ({
+      onFileUploadStart: handlers.onFileUploadStart,
+      onFileProgressUpdate: handlers.onFileProgressUpdate,
+      onFileUploadComplete: (fu) => {
+        onSuccessfulUpload?.(fu);
+        handlers.onFileUploadComplete(fu);
+      },
+    }),
+    [handlers, onSuccessfulUpload]
+  );
+  const { upload } = useFileUploader(uploadService, mergedObservers);
 
   const hasFiles = rejectedFiles.length + fileUploads.length > 0;
 

src/hooks/useFileUploader.ts

@@ -57,7 +57,7 @@ export const useFileUploader = <Response = string>(
         .catch(() => handleCompletion(true));
       onFileUploadStart(fileUpload, isRetry);
     },
-    [networkService]
+    [networkService, observers]
   );
 
   const upload = useCallback(

src/utils/accept-utils.ts

@@ -11,9 +11,9 @@ export interface MimeType {
 export class AcceptUtils {
   /**
    * NOTE: Issue with mime-db doesn't line up with input tag when provided mime types.
-   * 
+   *
    * Get all mime type present in an accept string which is comma separate.
-   * 
+   *
    * This also supports file extensions as well.
    * @param accepts An accepts string to get mime types from. i.e. "application/pdf,application/json", ".pdf,.json"
    * @returns An array of mime types parse from accepts string.
@@ -53,7 +53,6 @@ export class Accept {
   constructor(accepts: string) {
     this.accepts = accepts;
     this.mimeTypes = AcceptUtils.getMimeTypes(accepts);
-    console.log(this.mimeTypes);
   }
   /**
    * Parses out the include accept strings from accepts string.