closes #15; fix banner negative margin top

Author: rouftom

.eslintrc.js

@@ -10,6 +10,7 @@ module.exports =  {
     ecmaVersion:  2018,  // Allows for the parsing of modern ECMAScript features
     sourceType:  'module',  // Allows for the use of imports
     ecmaFeatures:  {
+      js:  true,  // Allows for the parsing of JSX
       jsx:  true,  // Allows for the parsing of JSX
     },
   },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-mui-fileuploader",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "🗃️ React mui fileuploader is a react component based on @mui v5 that allows you to upload files with an awesome ui component",
   "main": "dist/index.esm.js",
   "module": "dist/index.umd.js",

src/FileAttachment.tsx

@@ -71,7 +71,6 @@ function FileAttachment(props: FileAttachmentProps) {
             </Typography>
             <Typography variant="caption" noWrap>
               <React.Fragment>
-
                 <b
                   // eslint-disable-next-line
                   // @ts-ignore
@@ -95,10 +94,10 @@ function FileAttachment(props: FileAttachmentProps) {
 }
 
 FileAttachment.propTypes = {
-  size: PropTypes.string.isRequired,
+  size: PropTypes.string,
   file: PropTypes.object,
-  index: PropTypes.number.isRequired,
   disabled: PropTypes.bool,
+  index: PropTypes.number.isRequired,
   handleRemoveFile: PropTypes.func.isRequired
 }
 

src/FileUpload.tsx

@@ -21,9 +21,7 @@ import { useTheme, styled } from '@mui/material/styles'
 // eslint-disable-next-line
 // @ts-ignore
 import uploadImage from '../public/Files And Folder_Two Color_2.svg'
-// eslint-disable-next-line
-// @ts-ignore
-import FileAttachment from "./FileAttachment.tsx"
+import FileAttachment from './FileAttachment'
 import {
   ExtendedFileProps,
   FileActionProps,
@@ -442,7 +440,7 @@ function FileUpload(props: FileUploadProps) {
             {files.length}
 
             {maxUploadFiles > 0 &&
-            `/${maxUploadFiles}`} file{files?.length > 0 && 's'} joined
+            `/${maxUploadFiles}`} file{files?.length > 1 && 's'} joined
           </Box>}
         </Typography>
 
@@ -478,7 +476,7 @@ function FileUpload(props: FileUploadProps) {
               sx={{
                 color: "#fff",
                 textAlign: 'center',
-                mt: { xs: -4, sm: 2 }
+                mt: { xs: showPlaceholderImage ? -4 : 0, sm: 2 }
               }}
               {...LabelsGridProps}
             >

src/index.types.ts

@@ -4,7 +4,7 @@ import {PaperTypeMap} from "@mui/material/Paper/Paper"
 
 export interface FileAttachmentProps {
   /** size of the attachment */
-  size: string | object,
+  size: string,
   /** file content of the attachment */
   file: FileProps,
   /** index of the attachment */

src/react-app-env.in.ts

@@ -0,0 +1,3 @@
+/// <reference types="react-scripts" />
+
+export {}

tsconfig.json

@@ -23,7 +23,7 @@
     "isolatedModules": true, // Unconditionally emit imports for unresolved files
     //"resolveJsonModule": true, // Include modules imported with .json extension
     "noEmit": true, // Do not emit output (meaning do not compile code, only perform type checking)
-    "jsx": "react", // Support JSX in .tsx files
+    "jsx": "react-jsx", // Support JSX in .tsx files
     "rootDir": "./src",
     "sourceMap": true, // Generate corrresponding .map file
     "declaration": true, // Generate corresponding .d.ts file
@@ -41,7 +41,6 @@
     "**/*.md",
     "scripts",
     "acceptance-tests",
-    "webpack",
     "jest",
     "src/setupTests.ts",
     "**/rollup.config.js"