@availity/mui-file-selector 0.2.3 → 0.2.5

package/CHANGELOG.md

@@ -2,6 +2,30 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.2.5](https://github.com/Availity/element/compare/@availity/mui-file-selector@0.2.4...@availity/mui-file-selector@0.2.5) (2025-01-07)
+
+
+### Bug Fixes
+
+* bump upload-core ([60dc9a3](https://github.com/Availity/element/commit/60dc9a38f27aa93098d593efcd20026b39a2b7d7))
+* generate id before starting ([3514684](https://github.com/Availity/element/commit/3514684dfb9ca218d8d320c43235d4a0866d31a4))
+
+## [0.2.4](https://github.com/Availity/element/compare/@availity/mui-file-selector@0.2.3...@availity/mui-file-selector@0.2.4) (2025-01-06)
+
+### Dependency Updates
+
+* `mui-alert` updated to version `0.2.3`
+* `mui-button` updated to version `0.2.3`
+* `mui-form-utils` updated to version `0.2.3`
+* `mui-icon` updated to version `0.2.3`
+* `mui-list` updated to version `0.2.3`
+* `mui-progress` updated to version `0.2.3`
+
+### Bug Fixes
+
+* add hover color ([5001b77](https://github.com/Availity/element/commit/5001b77407b26de13d44b3ac3e39f05224aacc08))
+* various fixes for file selector ([26c651d](https://github.com/Availity/element/commit/26c651d7b8e89919fac335f233acbe528d10956a))
+
 ## [0.2.3](https://github.com/Availity/element/compare/@availity/mui-file-selector@0.2.2...@availity/mui-file-selector@0.2.3) (2025-01-03)
 
 ### Dependency Updates

package/dist/index.js

@@ -55,6 +55,26 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 
 // src/index.ts
 var src_exports = {};
@@ -75,6 +95,7 @@ var import_mui_typography4 = require("@availity/mui-typography");
 // src/lib/Dropzone.tsx
 var import_react = require("react");
 var import_react_dropzone = require("react-dropzone");
+var import_react_hook_form2 = require("react-hook-form");
 var import_mui_divider = require("@availity/mui-divider");
 var import_mui_icon = require("@availity/mui-icon");
 var import_mui_layout = require("@availity/mui-layout");
@@ -130,13 +151,16 @@ var FilePickerBtn = (_a) => {
 };
 
 // src/lib/Dropzone.tsx
-var import_react_hook_form2 = require("react-hook-form");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var outerBoxStyles = {
-  backgroundColor: "background.canvas",
+  backgroundColor: "background.secondary",
   border: "1px dotted",
+  borderColor: "secondary.light",
   borderRadius: "4px",
-  padding: "2rem"
+  padding: "2rem",
+  "&:hover": {
+    backgroundColor: "background.primary"
+  }
 };
 var innerBoxStyles = {
   width: "100%",
@@ -226,9 +250,10 @@ var Dropzone = ({
       inputProps.onChange(event);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_layout.Box, __spreadProps(__spreadValues({ sx: outerBoxStyles }, getRootProps()), { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_layout.Box, { sx: innerBoxStyles, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_layout.Stack, { spacing: 2, divider: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_divider.Divider, { children: "OR" }), alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_icon.CloudDownloadIcon, { fontSize: "xlarge", color: "secondary" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_layout.Box, __spreadProps(__spreadValues({ sx: outerBoxStyles }, getRootProps()), { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_layout.Box, { sx: innerBoxStyles, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_layout.Stack, { spacing: 2, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_icon.CloudUploadIcon, { fontSize: "xlarge", color: "secondary" }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_typography.Typography, { variant: "subtitle2", fontWeight: "700", children: "Drag and Drop Files Here" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_divider.Divider, { children: "OR" }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       FilePickerBtn,
       {
@@ -271,8 +296,9 @@ var ErrorAlert = ({ errors, fileName, id, onClose }) => {
 
 // src/lib/FileList.tsx
 var import_mui_list = require("@availity/mui-list");
-var import_mui_icon3 = require("@availity/mui-icon");
+var import_mui_icon4 = require("@availity/mui-icon");
 var import_mui_layout2 = require("@availity/mui-layout");
+var import_mui_divider2 = require("@availity/mui-divider");
 
 // src/lib/UploadProgressBar.tsx
 var import_react2 = require("react");
@@ -311,6 +337,7 @@ var UploadProgressBar = ({ upload, onProgress, onError, onSuccess }) => {
 };
 
 // src/lib/util.ts
+var import_mui_icon3 = require("@availity/mui-icon");
 function formatBytes(bytes, decimals = 2) {
   if (!+bytes)
     return "0 Bytes";
@@ -321,39 +348,43 @@ function formatBytes(bytes, decimals = 2) {
   return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
 }
 var FILE_EXT_ICONS = {
-  png: "file-image",
-  jpg: "file-image",
-  jpeg: "file-image",
-  gif: "file-image",
-  ppt: "file-powerpoint",
-  pptx: "file-powerpoint",
-  xls: "file-excel",
-  xlsx: "file-excel",
-  doc: "file-word",
-  docx: "file-word",
-  txt: "doc-alt",
-  text: "doc-alt",
-  zip: "file-archive",
-  "7zip": "file-archive",
-  xml: "file-code",
-  html: "file-code",
-  pdf: "file-pdf"
+  png: import_mui_icon3.FileImageIcon,
+  jpg: import_mui_icon3.FileImageIcon,
+  jpeg: import_mui_icon3.FileImageIcon,
+  gif: import_mui_icon3.FileImageIcon,
+  csv: import_mui_icon3.FileCsvIcon,
+  ppt: import_mui_icon3.FilePowerpointIcon,
+  pptx: import_mui_icon3.FilePowerpointIcon,
+  xls: import_mui_icon3.FileExcelIcon,
+  xlsx: import_mui_icon3.FileExcelIcon,
+  doc: import_mui_icon3.FileWordIcon,
+  docx: import_mui_icon3.FileWordIcon,
+  txt: import_mui_icon3.FileLinesIcon,
+  text: import_mui_icon3.FileLinesIcon,
+  zip: import_mui_icon3.FileArchiveIcon,
+  "7zip": import_mui_icon3.FileArchiveIcon,
+  xml: import_mui_icon3.FileCodeIcon,
+  html: import_mui_icon3.FileCodeIcon,
+  pdf: import_mui_icon3.FilePdfIcon
 };
 var isValidKey = (key) => key ? key in FILE_EXT_ICONS : false;
 var getFileExtIcon = (fileName) => {
   var _a;
   const ext = ((_a = fileName.split(".").pop()) == null ? void 0 : _a.toLowerCase()) || "";
-  const icon = isValidKey(ext) ? FILE_EXT_ICONS[ext] : "doc";
-  return { ext, icon };
+  const icon = isValidKey(ext) ? FILE_EXT_ICONS[ext] : import_mui_icon3.FileIcon;
+  return icon;
 };
 
 // src/lib/useUploadCore.tsx
 var import_react_query = require("@tanstack/react-query");
 var import_upload_core = __toESM(require("@availity/upload-core"));
 function startUpload(file, options) {
-  const upload = new import_upload_core.default(file, options);
-  upload.start();
-  return upload;
+  return __async(this, null, function* () {
+    const upload = new import_upload_core.default(file, options);
+    yield upload.generateId();
+    upload.start();
+    return upload;
+  });
 }
 function useUploadCore(file, options) {
   const isQueryEnabled = !!file;
@@ -366,26 +397,28 @@ function useUploadCore(file, options) {
 // src/lib/FileList.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var FileRow = ({ file, options, onRemoveFile }) => {
-  const { ext, icon } = getFileExtIcon(file.name);
-  console.log("ext, icon:", ext, icon);
+  const Icon = getFileExtIcon(file.name);
   const { data: upload } = useUploadCore(file, options);
   if (!upload)
     return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(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%", 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)(import_mui_icon3.FileIcon, {}) }) }),
-    /* @__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,
-      {
-        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_icon3.DeleteIcon, {}) })
-      }
-    ) })
-  ] }) });
+  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,
+        {
+          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, {}) })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_divider2.Divider, { component: "li" })
+  ] });
 };
 var FileList = ({ files, options, onRemoveFile }) => {
   if (files.length === 0)
@@ -489,7 +522,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, { children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_mui_typography4.Typography, { marginBottom: "4px", children: label }),
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         Dropzone,
         {

package/dist/index.mjs

@@ -29,6 +29,26 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 
 // src/lib/FileSelector.tsx
 import { useState as useState2 } from "react";
@@ -41,8 +61,9 @@ import { Typography as Typography4 } from "@availity/mui-typography";
 // src/lib/Dropzone.tsx
 import { useCallback } from "react";
 import { useDropzone } from "react-dropzone";
+import { useFormContext as useFormContext2 } from "react-hook-form";
 import { Divider } from "@availity/mui-divider";
-import { CloudDownloadIcon } from "@availity/mui-icon";
+import { CloudUploadIcon } from "@availity/mui-icon";
 import { Box, Stack } from "@availity/mui-layout";
 import { Typography } from "@availity/mui-typography";
 
@@ -96,13 +117,16 @@ var FilePickerBtn = (_a) => {
 };
 
 // src/lib/Dropzone.tsx
-import { useFormContext as useFormContext2 } from "react-hook-form";
 import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var outerBoxStyles = {
-  backgroundColor: "background.canvas",
+  backgroundColor: "background.secondary",
   border: "1px dotted",
+  borderColor: "secondary.light",
   borderRadius: "4px",
-  padding: "2rem"
+  padding: "2rem",
+  "&:hover": {
+    backgroundColor: "background.primary"
+  }
 };
 var innerBoxStyles = {
   width: "100%",
@@ -192,9 +216,10 @@ var Dropzone = ({
       inputProps.onChange(event);
     }
   };
-  return /* @__PURE__ */ jsx2(Box, __spreadProps(__spreadValues({ sx: outerBoxStyles }, getRootProps()), { children: /* @__PURE__ */ jsx2(Box, { sx: innerBoxStyles, children: /* @__PURE__ */ jsx2(Stack, { spacing: 2, divider: /* @__PURE__ */ jsx2(Divider, { children: "OR" }), alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx2(CloudDownloadIcon, { fontSize: "xlarge", color: "secondary" }),
+  return /* @__PURE__ */ jsx2(Box, __spreadProps(__spreadValues({ sx: outerBoxStyles }, getRootProps()), { children: /* @__PURE__ */ jsx2(Box, { sx: innerBoxStyles, children: /* @__PURE__ */ jsx2(Stack, { spacing: 2, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2(CloudUploadIcon, { fontSize: "xlarge", color: "secondary" }),
     /* @__PURE__ */ jsx2(Typography, { variant: "subtitle2", fontWeight: "700", children: "Drag and Drop Files Here" }),
+    /* @__PURE__ */ jsx2(Divider, { children: "OR" }),
     /* @__PURE__ */ jsx2(
       FilePickerBtn,
       {
@@ -237,8 +262,9 @@ var ErrorAlert = ({ errors, fileName, id, onClose }) => {
 
 // src/lib/FileList.tsx
 import { List, ListItem, ListItemText, ListItemIcon, ListItemButton } from "@availity/mui-list";
-import { DeleteIcon, FileIcon } from "@availity/mui-icon";
+import { DeleteIcon } from "@availity/mui-icon";
 import { Grid } from "@availity/mui-layout";
+import { Divider as Divider2 } from "@availity/mui-divider";
 
 // src/lib/UploadProgressBar.tsx
 import { useState } from "react";
@@ -277,6 +303,18 @@ var UploadProgressBar = ({ upload, onProgress, onError, onSuccess }) => {
 };
 
 // src/lib/util.ts
+import {
+  FileArchiveIcon,
+  FileCodeIcon,
+  FileCsvIcon,
+  FileExcelIcon,
+  FileIcon,
+  FileImageIcon,
+  FileLinesIcon,
+  FilePdfIcon,
+  FilePowerpointIcon,
+  FileWordIcon
+} from "@availity/mui-icon";
 function formatBytes(bytes, decimals = 2) {
   if (!+bytes)
     return "0 Bytes";
@@ -287,39 +325,43 @@ function formatBytes(bytes, decimals = 2) {
   return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
 }
 var FILE_EXT_ICONS = {
-  png: "file-image",
-  jpg: "file-image",
-  jpeg: "file-image",
-  gif: "file-image",
-  ppt: "file-powerpoint",
-  pptx: "file-powerpoint",
-  xls: "file-excel",
-  xlsx: "file-excel",
-  doc: "file-word",
-  docx: "file-word",
-  txt: "doc-alt",
-  text: "doc-alt",
-  zip: "file-archive",
-  "7zip": "file-archive",
-  xml: "file-code",
-  html: "file-code",
-  pdf: "file-pdf"
+  png: FileImageIcon,
+  jpg: FileImageIcon,
+  jpeg: FileImageIcon,
+  gif: FileImageIcon,
+  csv: FileCsvIcon,
+  ppt: FilePowerpointIcon,
+  pptx: FilePowerpointIcon,
+  xls: FileExcelIcon,
+  xlsx: FileExcelIcon,
+  doc: FileWordIcon,
+  docx: FileWordIcon,
+  txt: FileLinesIcon,
+  text: FileLinesIcon,
+  zip: FileArchiveIcon,
+  "7zip": FileArchiveIcon,
+  xml: FileCodeIcon,
+  html: FileCodeIcon,
+  pdf: FilePdfIcon
 };
 var isValidKey = (key) => key ? key in FILE_EXT_ICONS : false;
 var getFileExtIcon = (fileName) => {
   var _a;
   const ext = ((_a = fileName.split(".").pop()) == null ? void 0 : _a.toLowerCase()) || "";
-  const icon = isValidKey(ext) ? FILE_EXT_ICONS[ext] : "doc";
-  return { ext, icon };
+  const icon = isValidKey(ext) ? FILE_EXT_ICONS[ext] : FileIcon;
+  return icon;
 };
 
 // src/lib/useUploadCore.tsx
 import { useQuery } from "@tanstack/react-query";
 import Upload from "@availity/upload-core";
 function startUpload(file, options) {
-  const upload = new Upload(file, options);
-  upload.start();
-  return upload;
+  return __async(this, null, function* () {
+    const upload = new Upload(file, options);
+    yield upload.generateId();
+    upload.start();
+    return upload;
+  });
 }
 function useUploadCore(file, options) {
   const isQueryEnabled = !!file;
@@ -332,26 +374,28 @@ function useUploadCore(file, options) {
 // src/lib/FileList.tsx
 import { Fragment as Fragment5, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var FileRow = ({ file, options, onRemoveFile }) => {
-  const { ext, icon } = getFileExtIcon(file.name);
-  console.log("ext, icon:", ext, icon);
+  const Icon = getFileExtIcon(file.name);
   const { data: upload } = useUploadCore(file, options);
   if (!upload)
     return null;
-  return /* @__PURE__ */ jsx5(Fragment5, { 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(FileIcon, {}) }) }),
-    /* @__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,
-      {
-        onClick: () => {
-          onRemoveFile(upload.id, upload);
-        },
-        children: /* @__PURE__ */ jsx5(ListItemIcon, { children: /* @__PURE__ */ jsx5(DeleteIcon, {}) })
-      }
-    ) })
-  ] }) });
+  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,
+        {
+          onClick: () => {
+            onRemoveFile(upload.id, upload);
+          },
+          children: /* @__PURE__ */ jsx5(ListItemIcon, { children: /* @__PURE__ */ jsx5(DeleteIcon, {}) })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx5(Divider2, { component: "li" })
+  ] });
 };
 var FileList = ({ files, options, onRemoveFile }) => {
   if (files.length === 0)
@@ -455,7 +499,7 @@ var FileSelector = ({
   };
   return /* @__PURE__ */ jsx6(FormProvider, __spreadProps(__spreadValues({}, methods), { children: /* @__PURE__ */ jsxs7("form", { onSubmit: methods.handleSubmit(handleOnSubmit), children: [
     /* @__PURE__ */ jsxs7(Fragment6, { children: [
-      /* @__PURE__ */ jsx6(Typography4, { children: label }),
+      /* @__PURE__ */ jsx6(Typography4, { marginBottom: "4px", children: label }),
       /* @__PURE__ */ jsx6(
         Dropzone,
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-file-selector",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "Availity MUI file-selector Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -33,16 +33,16 @@
   },
   "dependencies": {
     "@availity/api-axios": "^9.0.4",
-    "@availity/mui-alert": "^0.7.1",
-    "@availity/mui-button": "^0.6.13",
+    "@availity/mui-alert": "^0.7.2",
+    "@availity/mui-button": "^0.6.14",
     "@availity/mui-divider": "^0.4.0",
-    "@availity/mui-form-utils": "^0.16.1",
-    "@availity/mui-icon": "^0.12.0",
+    "@availity/mui-form-utils": "^0.16.2",
+    "@availity/mui-icon": "^0.12.1",
     "@availity/mui-layout": "^0.2.0",
-    "@availity/mui-list": "^0.2.3",
-    "@availity/mui-progress": "^0.4.2",
+    "@availity/mui-list": "^0.2.4",
+    "@availity/mui-progress": "^0.4.3",
     "@availity/mui-typography": "^0.2.1",
-    "@availity/upload-core": "7.0.0-alpha.5",
+    "@availity/upload-core": "7.0.0-alpha.6",
     "@tanstack/react-query": "^4.36.1",
     "react-dropzone": "^11.7.1",
     "react-hook-form": "^7.51.3",

package/src/lib/Dropzone.tsx

@@ -1,18 +1,22 @@
 import { Dispatch, MouseEvent, useCallback, ChangeEvent } from 'react';
 import { useDropzone, FileRejection } from 'react-dropzone';
+import { useFormContext } from 'react-hook-form';
 import { Divider } from '@availity/mui-divider';
-import { CloudDownloadIcon } from '@availity/mui-icon';
+import { CloudUploadIcon } from '@availity/mui-icon';
 import { Box, Stack } from '@availity/mui-layout';
 import { Typography } from '@availity/mui-typography';
 
 import { FilePickerBtn } from './FilePickerBtn';
-import { useFormContext } from 'react-hook-form';
 
 const outerBoxStyles = {
-  backgroundColor: 'background.canvas',
+  backgroundColor: 'background.secondary',
   border: '1px dotted',
+  borderColor: 'secondary.light',
   borderRadius: '4px',
   padding: '2rem',
+  '&:hover': {
+    backgroundColor: 'background.primary',
+  },
 };
 
 const innerBoxStyles = {
@@ -175,12 +179,13 @@ export const Dropzone = ({
   return (
     <Box sx={outerBoxStyles} {...getRootProps()}>
       <Box sx={innerBoxStyles}>
-        <Stack spacing={2} divider={<Divider>OR</Divider>} alignItems="center" justifyContent="center">
+        <Stack spacing={2} alignItems="center" justifyContent="center">
           <>
-            <CloudDownloadIcon fontSize="xlarge" color="secondary" />
+            <CloudUploadIcon fontSize="xlarge" color="secondary" />
             <Typography variant="subtitle2" fontWeight="700">
               Drag and Drop Files Here
             </Typography>
+            <Divider>OR</Divider>
             <FilePickerBtn
               name={name}
               color="primary"

package/src/lib/FileList.tsx

@@ -1,7 +1,8 @@
 import type { default as Upload, UploadOptions } from '@availity/upload-core';
 import { List, ListItem, ListItemText, ListItemIcon, ListItemButton } from '@availity/mui-list';
-import { DeleteIcon, FileIcon } from '@availity/mui-icon';
+import { DeleteIcon } from '@availity/mui-icon';
 import { Grid } from '@availity/mui-layout';
+import { Divider } from '@availity/mui-divider';
 
 import { UploadProgressBar } from './UploadProgressBar';
 import { formatBytes, getFileExtIcon } from './util';
@@ -21,8 +22,7 @@ type FileRowProps = {
 };
 
 const FileRow = ({ file, options, onRemoveFile }: FileRowProps) => {
-  const { ext, icon } = getFileExtIcon(file.name);
-  console.log('ext, icon:', ext, icon);
+  const Icon = getFileExtIcon(file.name);
 
   const { data: upload } = useUploadCore(file, options);
 
@@ -30,10 +30,10 @@ const FileRow = ({ file, options, onRemoveFile }: FileRowProps) => {
 
   return (
     <>
-      <Grid container spacing={2} alignItems="center" justifyContent="space-between" width="100%">
+      <Grid container spacing={2} alignItems="center" justifyContent="space-between" width="100%" borderBottom="1px">
         <Grid xs={1}>
           <ListItemIcon>
-            <FileIcon />
+            <Icon />
           </ListItemIcon>
         </Grid>
         <Grid xs={4}>
@@ -57,6 +57,7 @@ const FileRow = ({ file, options, onRemoveFile }: FileRowProps) => {
           </ListItemButton>
         </Grid>
       </Grid>
+      <Divider component="li" />
     </>
   );
 };

package/src/lib/FileSelector.tsx

@@ -213,7 +213,7 @@ export const FileSelector = ({
     <FormProvider {...methods}>
       <form onSubmit={methods.handleSubmit(handleOnSubmit)}>
         <>
-          <Typography>{label}</Typography>
+          <Typography marginBottom="4px">{label}</Typography>
           <Dropzone
             name={name}
             allowedFileTypes={allowedFileTypes}
@@ -228,7 +228,6 @@ export const FileSelector = ({
           <FileTypesMessage allowedFileTypes={allowedFileTypes} maxFileSize={maxSize} />
         </>
         {children}
-
         {fileRejections.length > 0
           ? fileRejections.map((rejection) => (
               <ErrorAlert

package/src/lib/useUploadCore.tsx

@@ -1,9 +1,11 @@
 import { useQuery } from '@tanstack/react-query';
 import Upload, { UploadOptions } from '@availity/upload-core';
 
-function startUpload(file: File, options: UploadOptions) {
+async function startUpload(file: File, options: UploadOptions) {
   const upload = new Upload(file, options);
 
+  await upload.generateId();
+
   upload.start();
 
   return upload;

package/src/lib/util.ts

@@ -1,3 +1,16 @@
+import {
+  FileArchiveIcon,
+  FileCodeIcon,
+  FileCsvIcon,
+  FileExcelIcon,
+  FileIcon,
+  FileImageIcon,
+  FileLinesIcon,
+  FilePdfIcon,
+  FilePowerpointIcon,
+  FileWordIcon,
+} from '@availity/mui-icon';
+
 export function formatBytes(bytes: number, decimals = 2) {
   if (!+bytes) return '0 Bytes';
 
@@ -11,23 +24,24 @@ export function formatBytes(bytes: number, decimals = 2) {
 }
 
 export const FILE_EXT_ICONS = {
-  png: 'file-image',
-  jpg: 'file-image',
-  jpeg: 'file-image',
-  gif: 'file-image',
-  ppt: 'file-powerpoint',
-  pptx: 'file-powerpoint',
-  xls: 'file-excel',
-  xlsx: 'file-excel',
-  doc: 'file-word',
-  docx: 'file-word',
-  txt: 'doc-alt',
-  text: 'doc-alt',
-  zip: 'file-archive',
-  '7zip': 'file-archive',
-  xml: 'file-code',
-  html: 'file-code',
-  pdf: 'file-pdf',
+  png: FileImageIcon,
+  jpg: FileImageIcon,
+  jpeg: FileImageIcon,
+  gif: FileImageIcon,
+  csv: FileCsvIcon,
+  ppt: FilePowerpointIcon,
+  pptx: FilePowerpointIcon,
+  xls: FileExcelIcon,
+  xlsx: FileExcelIcon,
+  doc: FileWordIcon,
+  docx: FileWordIcon,
+  txt: FileLinesIcon,
+  text: FileLinesIcon,
+  zip: FileArchiveIcon,
+  '7zip': FileArchiveIcon,
+  xml: FileCodeIcon,
+  html: FileCodeIcon,
+  pdf: FilePdfIcon,
 } as const;
 
 export type FileExtensionKey = keyof typeof FILE_EXT_ICONS;
@@ -36,7 +50,7 @@ export const isValidKey = (key: string): key is FileExtensionKey => (key ? key i
 
 export const getFileExtIcon = (fileName: string) => {
   const ext = fileName.split('.').pop()?.toLowerCase() || '';
-  const icon = isValidKey(ext) ? FILE_EXT_ICONS[ext] : 'doc';
+  const icon = isValidKey(ext) ? FILE_EXT_ICONS[ext] : FileIcon;
 
-  return { ext, icon };
+  return icon;
 };