@availity/mui-file-selector 0.3.3 → 1.0.0-alpha.0

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.0.0-alpha.0](https://github.com/Availity/element/compare/@availity/mui-file-selector@0.3.3...@availity/mui-file-selector@1.0.0-alpha.0) (2025-02-24)
+
+
+### ⚠ BREAKING CHANGES
+
+* upgraded to @mui/material v6
+* **element:** upgraded to @mui/material v6
+
+### Features
+
+* **element:** upgrade to @mui/material v6 ([cb958bb](https://github.com/Availity/element/commit/cb958bba99a4f1ee6dab323f0ff54b69e6fd3493))
+* upgrade @mui/material ([571453a](https://github.com/Availity/element/commit/571453a34b21c344594ab4c03bc497d19aba942b))
+
 ## [0.3.3](https://github.com/Availity/element/compare/@availity/mui-file-selector@0.3.2...@availity/mui-file-selector@0.3.3) (2025-02-19)
 
 ### Dependency Updates

package/dist/index.js

@@ -77,12 +77,12 @@ var __async = (__this, __arguments, generator) => {
 };
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   FileSelector: () => FileSelector,
   UploadProgressBar: () => UploadProgressBar
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/lib/FileSelector.tsx
 var import_react3 = require("react");
@@ -226,8 +226,7 @@ var Dropzone = ({
           rejection.id = counter.increment();
         }
       }
-      if (setFileRejections)
-        setFileRejections(fileRejections);
+      if (setFileRejections) setFileRejections(fileRejections);
     },
     [setFileRejections]
   );
@@ -282,8 +281,7 @@ var codes = {
   "duplicate-name": "Duplicate file selected"
 };
 var ErrorAlert = ({ errors, fileName, id, onClose }) => {
-  if (errors.length === 0)
-    return null;
+  if (errors.length === 0) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: errors.map((error) => {
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_mui_alert.Alert, { severity: "error", onClose, children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_mui_alert.AlertTitle, { children: [
@@ -315,19 +313,16 @@ var UploadProgressBar = ({ upload, onProgress, onError, onSuccess }) => {
   const handleOnProgress = () => {
     setStatePercentage(upload.percentage);
     setError(false);
-    if (onProgress)
-      onProgress(upload);
+    if (onProgress) onProgress(upload);
   };
   const handleOnError = () => {
     setError(true);
-    if (onError)
-      onError(upload);
+    if (onError) onError(upload);
   };
   const handleOnSuccess = () => {
     setStatePercentage(100);
     setError(false);
-    if (onSuccess)
-      onSuccess(upload);
+    if (onSuccess) onSuccess(upload);
   };
   upload.onProgress.push(handleOnProgress);
   upload.onSuccess.push(handleOnSuccess);
@@ -342,8 +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";
+  if (!+bytes) return "0 Bytes";
   const k = 1024;
   const dm = decimals < 0 ? 0 : decimals;
   const sizes = ["Bytes", "KB", "MB", "GB"];
@@ -386,10 +380,8 @@ function startUpload(file, options) {
     const _a = options, { onSuccess, onError } = _a, uploadOptions = __objRest(_a, ["onSuccess", "onError"]);
     const upload = new import_upload_core.default(file, uploadOptions);
     yield upload.generateId();
-    if (onSuccess)
-      upload.onSuccess.push(onSuccess);
-    if (onError)
-      upload.onError.push(onError);
+    if (onSuccess) upload.onSuccess.push(onSuccess);
+    if (onError) upload.onError.push(onError);
     upload.start();
     return upload;
   });
@@ -408,8 +400,7 @@ var import_jsx_runtime5 = require("react/jsx-runtime");
 var FileRow = ({ file, options, onRemoveFile }) => {
   const Icon = getFileExtIcon(file.name);
   const { data: upload } = useUploadCore(file, options);
-  if (!upload)
-    return null;
+  if (!upload) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     import_mui_list2.ListItem,
     {
@@ -426,10 +417,10 @@ var FileRow = ({ file, options, onRemoveFile }) => {
       ),
       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_layout2.Grid, { size: { 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, { size: { 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, { size: { 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, { size: { xs: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(UploadProgressBar, { upload }) })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_divider2.Divider, {})
       ]
@@ -437,8 +428,7 @@ var FileRow = ({ file, options, onRemoveFile }) => {
   );
 };
 var FileList = ({ files, options, onRemoveFile }) => {
-  if (files.length === 0)
-    return null;
+  if (files.length === 0) return null;
   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);
   }) });
@@ -501,36 +491,28 @@ var FileSelector = ({
     onSuccess,
     retryDelays
   };
-  if (onFilePreUpload)
-    options.onPreStart = onFilePreUpload;
-  if (endpoint)
-    options.endpoint = endpoint;
-  if (isCloud)
-    options.endpoint = CLOUD_URL;
+  if (onFilePreUpload) options.onPreStart = onFilePreUpload;
+  if (endpoint) options.endpoint = endpoint;
+  if (isCloud) options.endpoint = CLOUD_URL;
   const handleOnRemoveFile = (uploadId, upload) => {
     const prevFiles = methods.watch(name);
     const newFiles = prevFiles.filter((file) => file.name !== upload.file.name);
     if (newFiles.length !== prevFiles.length) {
       const removedFile = prevFiles.find((file) => file.name === upload.file.name);
       methods.setValue(name, newFiles);
-      if (removedFile == null ? void 0 : removedFile.size)
-        setTotalSize(totalSize - removedFile.size);
-      if (onUploadRemove)
-        onUploadRemove(newFiles, uploadId);
+      if (removedFile == null ? void 0 : removedFile.size) setTotalSize(totalSize - removedFile.size);
+      if (onUploadRemove) onUploadRemove(newFiles, uploadId);
     }
   };
   const files = methods.watch(name);
   const handleOnSubmit = (values) => {
-    if (values[name].length === 0)
-      return;
+    if (values[name].length === 0) return;
     const queries = client.getQueriesData(["upload"]);
     const uploads = [];
     for (const [, data] of queries) {
-      if (data)
-        uploads.push(data);
+      if (data) uploads.push(data);
     }
-    if (onSubmit)
-      onSubmit(uploads, values);
+    if (onSubmit) onSubmit(uploads, values);
   };
   const handleRemoveRejection = (id) => {
     const rejections = fileRejections.filter((value) => value.id !== id);
@@ -567,7 +549,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_button3.Button, { type: "submit", sx: { marginLeft: "auto", marginRight: 0 }, children: "Submit" }) })
+    files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_mui_layout3.Grid, { size: { 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

@@ -192,8 +192,7 @@ var Dropzone = ({
           rejection.id = counter.increment();
         }
       }
-      if (setFileRejections)
-        setFileRejections(fileRejections);
+      if (setFileRejections) setFileRejections(fileRejections);
     },
     [setFileRejections]
   );
@@ -248,8 +247,7 @@ var codes = {
   "duplicate-name": "Duplicate file selected"
 };
 var ErrorAlert = ({ errors, fileName, id, onClose }) => {
-  if (errors.length === 0)
-    return null;
+  if (errors.length === 0) return null;
   return /* @__PURE__ */ jsx3(Fragment3, { children: errors.map((error) => {
     return /* @__PURE__ */ jsxs3(Alert, { severity: "error", onClose, children: [
       /* @__PURE__ */ jsxs3(AlertTitle, { children: [
@@ -281,19 +279,16 @@ var UploadProgressBar = ({ upload, onProgress, onError, onSuccess }) => {
   const handleOnProgress = () => {
     setStatePercentage(upload.percentage);
     setError(false);
-    if (onProgress)
-      onProgress(upload);
+    if (onProgress) onProgress(upload);
   };
   const handleOnError = () => {
     setError(true);
-    if (onError)
-      onError(upload);
+    if (onError) onError(upload);
   };
   const handleOnSuccess = () => {
     setStatePercentage(100);
     setError(false);
-    if (onSuccess)
-      onSuccess(upload);
+    if (onSuccess) onSuccess(upload);
   };
   upload.onProgress.push(handleOnProgress);
   upload.onSuccess.push(handleOnSuccess);
@@ -319,8 +314,7 @@ import {
   FileWordIcon
 } from "@availity/mui-icon";
 function formatBytes(bytes, decimals = 2) {
-  if (!+bytes)
-    return "0 Bytes";
+  if (!+bytes) return "0 Bytes";
   const k = 1024;
   const dm = decimals < 0 ? 0 : decimals;
   const sizes = ["Bytes", "KB", "MB", "GB"];
@@ -363,10 +357,8 @@ function startUpload(file, options) {
     const _a = options, { onSuccess, onError } = _a, uploadOptions = __objRest(_a, ["onSuccess", "onError"]);
     const upload = new Upload(file, uploadOptions);
     yield upload.generateId();
-    if (onSuccess)
-      upload.onSuccess.push(onSuccess);
-    if (onError)
-      upload.onError.push(onError);
+    if (onSuccess) upload.onSuccess.push(onSuccess);
+    if (onError) upload.onError.push(onError);
     upload.start();
     return upload;
   });
@@ -385,8 +377,7 @@ 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;
+  if (!upload) return null;
   return /* @__PURE__ */ jsxs5(
     ListItem,
     {
@@ -403,10 +394,10 @@ var FileRow = ({ file, options, onRemoveFile }) => {
       ),
       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(Grid, { size: { xs: 1 }, children: /* @__PURE__ */ jsx5(ListItemIcon, { children: /* @__PURE__ */ jsx5(Icon, {}) }) }),
+          /* @__PURE__ */ jsx5(Grid, { size: { xs: 3 }, children: /* @__PURE__ */ jsx5(ListItemText2, { children: upload.trimFileName(upload.file.name) }) }),
+          /* @__PURE__ */ jsx5(Grid, { size: { xs: 2 }, children: /* @__PURE__ */ jsx5(ListItemText2, { children: formatBytes(upload.file.size) }) }),
+          /* @__PURE__ */ jsx5(Grid, { size: { xs: 6 }, children: /* @__PURE__ */ jsx5(UploadProgressBar, { upload }) })
         ] }),
         /* @__PURE__ */ jsx5(Divider2, {})
       ]
@@ -414,8 +405,7 @@ var FileRow = ({ file, options, onRemoveFile }) => {
   );
 };
 var FileList = ({ files, options, onRemoveFile }) => {
-  if (files.length === 0)
-    return null;
+  if (files.length === 0) return null;
   return /* @__PURE__ */ jsx5(List, { children: files.map((file) => {
     return /* @__PURE__ */ jsx5(FileRow, { file, options, onRemoveFile }, file.name);
   }) });
@@ -478,36 +468,28 @@ var FileSelector = ({
     onSuccess,
     retryDelays
   };
-  if (onFilePreUpload)
-    options.onPreStart = onFilePreUpload;
-  if (endpoint)
-    options.endpoint = endpoint;
-  if (isCloud)
-    options.endpoint = CLOUD_URL;
+  if (onFilePreUpload) options.onPreStart = onFilePreUpload;
+  if (endpoint) options.endpoint = endpoint;
+  if (isCloud) options.endpoint = CLOUD_URL;
   const handleOnRemoveFile = (uploadId, upload) => {
     const prevFiles = methods.watch(name);
     const newFiles = prevFiles.filter((file) => file.name !== upload.file.name);
     if (newFiles.length !== prevFiles.length) {
       const removedFile = prevFiles.find((file) => file.name === upload.file.name);
       methods.setValue(name, newFiles);
-      if (removedFile == null ? void 0 : removedFile.size)
-        setTotalSize(totalSize - removedFile.size);
-      if (onUploadRemove)
-        onUploadRemove(newFiles, uploadId);
+      if (removedFile == null ? void 0 : removedFile.size) setTotalSize(totalSize - removedFile.size);
+      if (onUploadRemove) onUploadRemove(newFiles, uploadId);
     }
   };
   const files = methods.watch(name);
   const handleOnSubmit = (values) => {
-    if (values[name].length === 0)
-      return;
+    if (values[name].length === 0) return;
     const queries = client.getQueriesData(["upload"]);
     const uploads = [];
     for (const [, data] of queries) {
-      if (data)
-        uploads.push(data);
+      if (data) uploads.push(data);
     }
-    if (onSubmit)
-      onSubmit(uploads, values);
+    if (onSubmit) onSubmit(uploads, values);
   };
   const handleRemoveRejection = (id) => {
     const rejections = fileRejections.filter((value) => value.id !== id);
@@ -544,7 +526,7 @@ var FileSelector = ({
       rejection.id
     )) : null,
     /* @__PURE__ */ jsx6(FileList, { files, options, onRemoveFile: handleOnRemoveFile }),
-    files.length > 0 && /* @__PURE__ */ jsx6(Grid2, { xs: 12, justifyContent: "end", display: "flex", paddingTop: 2.5, children: /* @__PURE__ */ jsx6(Button2, { type: "submit", sx: { marginLeft: "auto", marginRight: 0 }, children: "Submit" }) })
+    files.length > 0 && /* @__PURE__ */ jsx6(Grid2, { size: { xs: 12 }, justifyContent: "end", display: "flex", paddingTop: 2.5, children: /* @__PURE__ */ jsx6(Button2, { type: "submit", sx: { marginLeft: "auto", marginRight: 0 }, children: "Submit" }) })
   ] }) }));
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-file-selector",
-  "version": "0.3.3",
+  "version": "1.0.0-alpha.0",
   "description": "Availity MUI file-selector Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -40,32 +40,33 @@
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "dependencies": {
-    "@availity/api-axios": "^9.0.6",
-    "@availity/mui-alert": "^0.8.0",
-    "@availity/mui-button": "^0.7.0",
-    "@availity/mui-divider": "^0.5.0",
-    "@availity/mui-form-utils": "^0.17.1",
-    "@availity/mui-icon": "^0.14.0",
-    "@availity/mui-layout": "^0.3.0",
-    "@availity/mui-list": "^0.3.0",
-    "@availity/mui-progress": "^0.5.1",
-    "@availity/mui-typography": "^0.3.0",
+    "@availity/api-axios": "^10.0.0",
+    "@availity/mui-alert": "^1.0.0-alpha.0",
+    "@availity/mui-button": "^1.0.0-alpha.0",
+    "@availity/mui-divider": "^1.0.0-alpha.0",
+    "@availity/mui-form-utils": "^1.0.0-alpha.0",
+    "@availity/mui-icon": "^1.0.0-alpha.0",
+    "@availity/mui-layout": "^1.0.0-alpha.0",
+    "@availity/mui-list": "^1.0.0-alpha.0",
+    "@availity/mui-progress": "^1.0.0-alpha.0",
+    "@availity/mui-typography": "^1.0.0-alpha.0",
     "@availity/upload-core": "^7.0.1",
     "@tanstack/react-query": "^4.36.1",
     "react-dropzone": "^11.7.1",
-    "react-hook-form": "^7.51.3",
+    "react-hook-form": "^7.54.2",
+    "tus-js-client": "4.2.3",
     "uuid": "^9.0.1"
   },
   "devDependencies": {
-    "@availity/mui-paper": "^0.2.0",
-    "@mui/material": "^5.15.15",
+    "@availity/mui-paper": "^1.0.0-alpha.0",
+    "@mui/material": "^6.4.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "tsup": "^8.0.2",
+    "tsup": "^8.3.6",
     "typescript": "^5.4.5"
   },
   "peerDependencies": {
-    "@mui/material": "^5.11.9",
+    "@mui/material": "^6.4.5",
     "react": ">=16.3.0"
   },
   "publishConfig": {

package/src/lib/FileList.tsx

@@ -44,18 +44,18 @@ const FileRow = ({ file, options, onRemoveFile }: FileRowProps) => {
       }
     >
       <Grid container spacing={2} alignItems="center" justifyContent="space-between" width="100%">
-        <Grid xs={1}>
+        <Grid size={{ xs: 1 }}>
           <ListItemIcon>
             <Icon />
           </ListItemIcon>
         </Grid>
-        <Grid xs={3}>
+        <Grid size={{ xs: 3 }}>
           <ListItemText>{upload.trimFileName(upload.file.name)}</ListItemText>
         </Grid>
-        <Grid xs={2}>
+        <Grid size={{ xs: 2 }}>
           <ListItemText>{formatBytes(upload.file.size)}</ListItemText>
         </Grid>
-        <Grid xs={6}>
+        <Grid size={{ xs: 6 }}>
           <UploadProgressBar upload={upload} />
         </Grid>
       </Grid>

package/src/lib/FileSelector.tsx

@@ -242,7 +242,7 @@ export const FileSelector = ({
           : null}
         <FileList files={files} options={options} onRemoveFile={handleOnRemoveFile} />
         {files.length > 0 && (
-          <Grid xs={12} justifyContent="end" display="flex" paddingTop={2.5}>
+          <Grid size={{ xs: 12 }} justifyContent="end" display="flex" paddingTop={2.5}>
             <Button type="submit" sx={{ marginLeft: 'auto', marginRight: 0 }}>
               Submit
             </Button>