@availity/mui-file-selector 0.2.6 → 0.2.8

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.2.8](https://github.com/Availity/element/compare/@availity/mui-file-selector@0.2.7...@availity/mui-file-selector@0.2.8) (2025-01-10)
+
+
+### Bug Fixes
+
+* remove debug story ([091c909](https://github.com/Availity/element/commit/091c909acfb22464723dec19d6c258d30cd2ba8d))
+* update FileList ([036e91c](https://github.com/Availity/element/commit/036e91cd37f89ef67d77d4782dced6ebf841dd5c))
+
+## [0.2.7](https://github.com/Availity/element/compare/@availity/mui-file-selector@0.2.6...@availity/mui-file-selector@0.2.7) (2025-01-08)
+
+### Dependency Updates
+
+* `mui-form-utils` updated to version `0.2.6`
+* `mui-list` updated to version `0.2.6`
 ## [0.2.6](https://github.com/Availity/element/compare/@availity/mui-file-selector@0.2.5...@availity/mui-file-selector@0.2.6) (2025-01-08)
 
 

package/README.md

@@ -12,7 +12,7 @@ This package extends the MUI File Selector component: [MUI File Selector Docs](h
 
 Live demo and documentation in our [Storybook](https://availity.github.io/element/?path=/docs/components-file-selector-introduction--docs)
 
-Availity standards for design and usage can be found in the [Availity Design Guide](https://zeroheight.com/2e36e50c7)
+Availity standards for design and usage can be found in the [Availity Design Guide](https://design.availity.com/2e36e50c7)
 
 ## Installation
 

package/dist/index.js

@@ -88,9 +88,9 @@ module.exports = __toCommonJS(src_exports);
 var import_react3 = require("react");
 var import_react_hook_form3 = require("react-hook-form");
 var import_react_query2 = require("@tanstack/react-query");
-var import_mui_button2 = require("@availity/mui-button");
+var import_mui_button3 = require("@availity/mui-button");
 var import_mui_layout3 = require("@availity/mui-layout");
-var import_mui_typography4 = require("@availity/mui-typography");
+var import_mui_typography3 = require("@availity/mui-typography");
 
 // src/lib/Dropzone.tsx
 var import_react = require("react");
@@ -297,7 +297,8 @@ var ErrorAlert = ({ errors, fileName, id, onClose }) => {
 };
 
 // src/lib/FileList.tsx
-var import_mui_list = require("@availity/mui-list");
+var import_mui_list2 = require("@availity/mui-list");
+var import_mui_button2 = require("@availity/mui-button");
 var import_mui_icon4 = require("@availity/mui-icon");
 var import_mui_layout2 = require("@availity/mui-layout");
 var import_mui_divider2 = require("@availity/mui-divider");
@@ -305,8 +306,8 @@ var import_mui_divider2 = require("@availity/mui-divider");
 // src/lib/UploadProgressBar.tsx
 var import_react2 = require("react");
 var import_mui_progress = require("@availity/mui-progress");
-var import_mui_typography2 = require("@availity/mui-typography");
 var import_mui_icon2 = require("@availity/mui-icon");
+var import_mui_list = require("@availity/mui-list");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var UploadProgressBar = ({ upload, onProgress, onError, onSuccess }) => {
   const [statePercentage, setStatePercentage] = (0, import_react2.useState)(upload.percentage || 0);
@@ -331,7 +332,7 @@ var UploadProgressBar = ({ upload, onProgress, onError, onSuccess }) => {
   upload.onProgress.push(handleOnProgress);
   upload.onSuccess.push(handleOnSuccess);
   upload.onError.push(handleOnError);
-  return upload.errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_mui_typography2.Typography, { color: "text.error", children: [
+  return upload.errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_mui_list.ListItemText, { primaryTypographyProps: { color: "text.error", variant: "body2" }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_mui_icon2.WarningTriangleIcon, {}),
     " ",
     upload.errorMessage
@@ -403,40 +404,47 @@ var FileRow = ({ file, options, onRemoveFile }) => {
   const { data: upload } = useUploadCore(file, options);
   if (!upload)
     return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_mui_layout2.Grid, { container: true, spacing: 2, alignItems: "center", justifyContent: "space-between", width: "100%", borderBottom: "1px", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_layout2.Grid, { xs: 1, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_list.ListItemIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, {}) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_layout2.Grid, { xs: 4, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_list.ListItemText, { children: upload.trimFileName(upload.file.name) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_layout2.Grid, { xs: 2, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_list.ListItem, { children: formatBytes(upload.file.size) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_layout2.Grid, { xs: 4, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(UploadProgressBar, { upload }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_layout2.Grid, { xs: 1, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        import_mui_list.ListItemButton,
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    import_mui_list2.ListItem,
+    {
+      secondaryAction: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        import_mui_button2.IconButton,
         {
+          title: "remove file",
+          edge: "end",
           onClick: () => {
             onRemoveFile(upload.id, upload);
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_list.ListItemIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_icon4.DeleteIcon, {}) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_icon4.DeleteIcon, {})
         }
-      ) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_divider2.Divider, { component: "li" })
-  ] });
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_mui_layout2.Grid, { container: true, spacing: 2, alignItems: "center", justifyContent: "space-between", width: "100%", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_layout2.Grid, { xs: 1, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_list2.ListItemIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, {}) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_layout2.Grid, { xs: 3, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_list2.ListItemText, { children: upload.trimFileName(upload.file.name) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_layout2.Grid, { xs: 2, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_list2.ListItemText, { children: formatBytes(upload.file.size) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_layout2.Grid, { xs: 6, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(UploadProgressBar, { upload }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_divider2.Divider, {})
+      ]
+    }
+  );
 };
 var FileList = ({ files, options, onRemoveFile }) => {
   if (files.length === 0)
     return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_list.List, { children: files.map((file) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_list2.List, { children: files.map((file) => {
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FileRow, { file, options, onRemoveFile }, file.name);
   }) });
 };
 
 // src/lib/FileTypesMessage.tsx
-var import_mui_typography3 = require("@availity/mui-typography");
+var import_mui_typography2 = require("@availity/mui-typography");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var FileTypesMessage = ({ allowedFileTypes, maxFileSize }) => {
   const fileSizeMsg = typeof maxFileSize === "number" ? `Maximum file size is ${formatBytes(maxFileSize)}. ` : null;
   const fileTypesMsg = allowedFileTypes.length > 0 ? `Supported file types include: ${allowedFileTypes.join(", ")}.` : "All file types allowed.";
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_mui_typography3.Typography, { variant: "caption", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_mui_typography2.Typography, { variant: "caption", children: [
     fileSizeMsg,
     fileTypesMsg
   ] });
@@ -524,7 +532,7 @@ var FileSelector = ({
   };
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_hook_form3.FormProvider, __spreadProps(__spreadValues({}, methods), { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("form", { onSubmit: methods.handleSubmit(handleOnSubmit), children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_mui_typography4.Typography, { marginBottom: "4px", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_mui_typography3.Typography, { marginBottom: "4px", children: label }),
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         Dropzone,
         {
@@ -553,7 +561,7 @@ var FileSelector = ({
       rejection.id
     )) : null,
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FileList, { files, options, onRemoveFile: handleOnRemoveFile }),
-    files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_mui_layout3.Grid, { xs: 12, justifyContent: "end", display: "flex", paddingTop: 2.5, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_mui_button2.Button, { type: "submit", sx: { marginLeft: "auto", marginRight: 0 }, children: "Submit" }) })
+    files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_mui_layout3.Grid, { xs: 12, justifyContent: "end", display: "flex", paddingTop: 2.5, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_mui_button3.Button, { type: "submit", sx: { marginLeft: "auto", marginRight: 0 }, children: "Submit" }) })
   ] }) }));
 };
 // Annotate the CommonJS export names for ESM import in node:

package/dist/index.mjs

@@ -56,7 +56,7 @@ import { useForm, FormProvider } from "react-hook-form";
 import { useQueryClient } from "@tanstack/react-query";
 import { Button as Button2 } from "@availity/mui-button";
 import { Grid as Grid2 } from "@availity/mui-layout";
-import { Typography as Typography4 } from "@availity/mui-typography";
+import { Typography as Typography3 } from "@availity/mui-typography";
 
 // src/lib/Dropzone.tsx
 import { useCallback } from "react";
@@ -263,7 +263,8 @@ var ErrorAlert = ({ errors, fileName, id, onClose }) => {
 };
 
 // src/lib/FileList.tsx
-import { List, ListItem, ListItemText, ListItemIcon, ListItemButton } from "@availity/mui-list";
+import { List, ListItem, ListItemText as ListItemText2, ListItemIcon } from "@availity/mui-list";
+import { IconButton } from "@availity/mui-button";
 import { DeleteIcon } from "@availity/mui-icon";
 import { Grid } from "@availity/mui-layout";
 import { Divider as Divider2 } from "@availity/mui-divider";
@@ -271,8 +272,8 @@ import { Divider as Divider2 } from "@availity/mui-divider";
 // src/lib/UploadProgressBar.tsx
 import { useState } from "react";
 import { LinearProgress } from "@availity/mui-progress";
-import { Typography as Typography2 } from "@availity/mui-typography";
 import { WarningTriangleIcon } from "@availity/mui-icon";
+import { ListItemText } from "@availity/mui-list";
 import { Fragment as Fragment4, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var UploadProgressBar = ({ upload, onProgress, onError, onSuccess }) => {
   const [statePercentage, setStatePercentage] = useState(upload.percentage || 0);
@@ -297,7 +298,7 @@ var UploadProgressBar = ({ upload, onProgress, onError, onSuccess }) => {
   upload.onProgress.push(handleOnProgress);
   upload.onSuccess.push(handleOnSuccess);
   upload.onError.push(handleOnError);
-  return upload.errorMessage ? /* @__PURE__ */ jsx4(Fragment4, { children: /* @__PURE__ */ jsxs4(Typography2, { color: "text.error", children: [
+  return upload.errorMessage ? /* @__PURE__ */ jsx4(Fragment4, { children: /* @__PURE__ */ jsxs4(ListItemText, { primaryTypographyProps: { color: "text.error", variant: "body2" }, children: [
     /* @__PURE__ */ jsx4(WarningTriangleIcon, {}),
     " ",
     upload.errorMessage
@@ -374,30 +375,37 @@ function useUploadCore(file, options) {
 }
 
 // src/lib/FileList.tsx
-import { Fragment as Fragment5, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var FileRow = ({ file, options, onRemoveFile }) => {
   const Icon = getFileExtIcon(file.name);
   const { data: upload } = useUploadCore(file, options);
   if (!upload)
     return null;
-  return /* @__PURE__ */ jsxs5(Fragment5, { children: [
-    /* @__PURE__ */ jsxs5(Grid, { container: true, spacing: 2, alignItems: "center", justifyContent: "space-between", width: "100%", borderBottom: "1px", children: [
-      /* @__PURE__ */ jsx5(Grid, { xs: 1, children: /* @__PURE__ */ jsx5(ListItemIcon, { children: /* @__PURE__ */ jsx5(Icon, {}) }) }),
-      /* @__PURE__ */ jsx5(Grid, { xs: 4, children: /* @__PURE__ */ jsx5(ListItemText, { children: upload.trimFileName(upload.file.name) }) }),
-      /* @__PURE__ */ jsx5(Grid, { xs: 2, children: /* @__PURE__ */ jsx5(ListItem, { children: formatBytes(upload.file.size) }) }),
-      /* @__PURE__ */ jsx5(Grid, { xs: 4, children: /* @__PURE__ */ jsx5(UploadProgressBar, { upload }) }),
-      /* @__PURE__ */ jsx5(Grid, { xs: 1, children: /* @__PURE__ */ jsx5(
-        ListItemButton,
+  return /* @__PURE__ */ jsxs5(
+    ListItem,
+    {
+      secondaryAction: /* @__PURE__ */ jsx5(
+        IconButton,
         {
+          title: "remove file",
+          edge: "end",
           onClick: () => {
             onRemoveFile(upload.id, upload);
           },
-          children: /* @__PURE__ */ jsx5(ListItemIcon, { children: /* @__PURE__ */ jsx5(DeleteIcon, {}) })
+          children: /* @__PURE__ */ jsx5(DeleteIcon, {})
         }
-      ) })
-    ] }),
-    /* @__PURE__ */ jsx5(Divider2, { component: "li" })
-  ] });
+      ),
+      children: [
+        /* @__PURE__ */ jsxs5(Grid, { container: true, spacing: 2, alignItems: "center", justifyContent: "space-between", width: "100%", children: [
+          /* @__PURE__ */ jsx5(Grid, { xs: 1, children: /* @__PURE__ */ jsx5(ListItemIcon, { children: /* @__PURE__ */ jsx5(Icon, {}) }) }),
+          /* @__PURE__ */ jsx5(Grid, { xs: 3, children: /* @__PURE__ */ jsx5(ListItemText2, { children: upload.trimFileName(upload.file.name) }) }),
+          /* @__PURE__ */ jsx5(Grid, { xs: 2, children: /* @__PURE__ */ jsx5(ListItemText2, { children: formatBytes(upload.file.size) }) }),
+          /* @__PURE__ */ jsx5(Grid, { xs: 6, children: /* @__PURE__ */ jsx5(UploadProgressBar, { upload }) })
+        ] }),
+        /* @__PURE__ */ jsx5(Divider2, {})
+      ]
+    }
+  );
 };
 var FileList = ({ files, options, onRemoveFile }) => {
   if (files.length === 0)
@@ -408,19 +416,19 @@ var FileList = ({ files, options, onRemoveFile }) => {
 };
 
 // src/lib/FileTypesMessage.tsx
-import { Typography as Typography3 } from "@availity/mui-typography";
+import { Typography as Typography2 } from "@availity/mui-typography";
 import { jsxs as jsxs6 } from "react/jsx-runtime";
 var FileTypesMessage = ({ allowedFileTypes, maxFileSize }) => {
   const fileSizeMsg = typeof maxFileSize === "number" ? `Maximum file size is ${formatBytes(maxFileSize)}. ` : null;
   const fileTypesMsg = allowedFileTypes.length > 0 ? `Supported file types include: ${allowedFileTypes.join(", ")}.` : "All file types allowed.";
-  return /* @__PURE__ */ jsxs6(Typography3, { variant: "caption", children: [
+  return /* @__PURE__ */ jsxs6(Typography2, { variant: "caption", children: [
     fileSizeMsg,
     fileTypesMsg
   ] });
 };
 
 // src/lib/FileSelector.tsx
-import { Fragment as Fragment6, jsx as jsx6, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx6, jsxs as jsxs7 } from "react/jsx-runtime";
 var CLOUD_URL = "/cloud/web/appl/vault/upload/v1/resumable";
 var FileSelector = ({
   name,
@@ -500,8 +508,8 @@ var FileSelector = ({
     setFileRejections(rejections);
   };
   return /* @__PURE__ */ jsx6(FormProvider, __spreadProps(__spreadValues({}, methods), { children: /* @__PURE__ */ jsxs7("form", { onSubmit: methods.handleSubmit(handleOnSubmit), children: [
-    /* @__PURE__ */ jsxs7(Fragment6, { children: [
-      /* @__PURE__ */ jsx6(Typography4, { marginBottom: "4px", children: label }),
+    /* @__PURE__ */ jsxs7(Fragment5, { children: [
+      /* @__PURE__ */ jsx6(Typography3, { marginBottom: "4px", children: label }),
       /* @__PURE__ */ jsx6(
         Dropzone,
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-file-selector",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "description": "Availity MUI file-selector Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -36,10 +36,10 @@
     "@availity/mui-alert": "^0.7.2",
     "@availity/mui-button": "^0.6.14",
     "@availity/mui-divider": "^0.4.0",
-    "@availity/mui-form-utils": "^0.16.2",
+    "@availity/mui-form-utils": "^0.16.3",
     "@availity/mui-icon": "^0.12.1",
     "@availity/mui-layout": "^0.2.0",
-    "@availity/mui-list": "^0.2.4",
+    "@availity/mui-list": "^0.2.5",
     "@availity/mui-progress": "^0.4.3",
     "@availity/mui-typography": "^0.2.1",
     "@availity/upload-core": "7.0.0-alpha.6",
@@ -50,6 +50,7 @@
     "uuid": "^9.0.1"
   },
   "devDependencies": {
+    "@availity/mui-paper": "^0.1.9",
     "@mui/material": "^5.15.15",
     "react": "18.2.0",
     "react-dom": "18.2.0",

package/src/lib/FileList.tsx

@@ -1,5 +1,6 @@
 import type { default as Upload, UploadOptions } from '@availity/upload-core';
-import { List, ListItem, ListItemText, ListItemIcon, ListItemButton } from '@availity/mui-list';
+import { List, ListItem, ListItemText, ListItemIcon } from '@availity/mui-list';
+import { IconButton } from '@availity/mui-button';
 import { DeleteIcon } from '@availity/mui-icon';
 import { Grid } from '@availity/mui-layout';
 import { Divider } from '@availity/mui-divider';
@@ -29,36 +30,37 @@ const FileRow = ({ file, options, onRemoveFile }: FileRowProps) => {
   if (!upload) return null;
 
   return (
-    <>
-      <Grid container spacing={2} alignItems="center" justifyContent="space-between" width="100%" borderBottom="1px">
+    <ListItem
+      secondaryAction={
+        <IconButton
+          title="remove file"
+          edge="end"
+          onClick={() => {
+            onRemoveFile(upload.id, upload);
+          }}
+        >
+          <DeleteIcon />
+        </IconButton>
+      }
+    >
+      <Grid container spacing={2} alignItems="center" justifyContent="space-between" width="100%">
         <Grid xs={1}>
           <ListItemIcon>
             <Icon />
           </ListItemIcon>
         </Grid>
-        <Grid xs={4}>
+        <Grid xs={3}>
           <ListItemText>{upload.trimFileName(upload.file.name)}</ListItemText>
         </Grid>
         <Grid xs={2}>
-          <ListItem>{formatBytes(upload.file.size)}</ListItem>
+          <ListItemText>{formatBytes(upload.file.size)}</ListItemText>
         </Grid>
-        <Grid xs={4}>
+        <Grid xs={6}>
           <UploadProgressBar upload={upload} />
         </Grid>
-        <Grid xs={1}>
-          <ListItemButton
-            onClick={() => {
-              onRemoveFile(upload.id, upload);
-            }}
-          >
-            <ListItemIcon>
-              <DeleteIcon />
-            </ListItemIcon>
-          </ListItemButton>
-        </Grid>
       </Grid>
-      <Divider component="li" />
-    </>
+      <Divider />
+    </ListItem>
   );
 };
 

package/src/lib/UploadProgressBar.tsx

@@ -1,9 +1,8 @@
 import { useState } from 'react';
-// import { ChangeEvent, FormEventHandler, useState } from 'react';
 import { LinearProgress } from '@availity/mui-progress';
 import type Upload from '@availity/upload-core';
-import { Typography } from '@availity/mui-typography';
 import { WarningTriangleIcon } from '@availity/mui-icon';
+import { ListItemText } from '@availity/mui-list';
 
 export type UploadProgressBarProps = {
   /**
@@ -72,9 +71,9 @@ export const UploadProgressBar = ({ upload, onProgress, onError, onSuccess }: Up
 
   return upload.errorMessage ? (
     <>
-      <Typography color="text.error">
+      <ListItemText primaryTypographyProps={{ color: 'text.error', variant: 'body2' }}>
         <WarningTriangleIcon /> {upload.errorMessage}
-      </Typography>
+      </ListItemText>
       {/* {upload.status === 'encrypted' && (
         <div className="pwRequired">
           <Button color="primary" onClick={toggleModal}>