@availity/mui-file-selector 1.6.2 → 1.6.4

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.6.4](https://github.com/Availity/element/compare/@availity/mui-file-selector@1.6.3...@availity/mui-file-selector@1.6.4) (2025-04-28)
+
+### Dependency Updates
+
+* `mui-form-utils` updated to version `1.6.3`
+* `mui-dialog` updated to version `1.6.3`
+* `mui-textfield` updated to version `1.6.3`
+## [1.6.3](https://github.com/Availity/element/compare/@availity/mui-file-selector@1.6.2...@availity/mui-file-selector@1.6.3) (2025-04-25)
+
+
+### Bug Fixes
+
+* **mui-file-selector:** only throw too-many files rejection once ([3b3b22f](https://github.com/Availity/element/commit/3b3b22f8b34b73ee61be0501aba58f6adf54e3b0))
+
 ## [1.6.2](https://github.com/Availity/element/compare/@availity/mui-file-selector@1.6.1...@availity/mui-file-selector@1.6.2) (2025-04-24)
 
 ### Dependency Updates

package/dist/index.js

@@ -250,9 +250,27 @@ var Dropzone = ({
       const previous = (_a2 = watch(name)) != null ? _a2 : [];
       setValue(name, previous.concat(acceptedFiles));
       if (fileRejections.length > 0) {
-        for (const rejection of fileRejections) {
-          rejection.id = counter.increment();
-        }
+        const TOO_MANY_FILES_CODE = "too-many-files";
+        let hasTooManyFiles = false;
+        fileRejections = fileRejections.reduce(
+          (acc, rejection) => {
+            const isTooManyFiles = rejection.errors.some((error) => error.code === TOO_MANY_FILES_CODE);
+            if (isTooManyFiles) {
+              if (!hasTooManyFiles) {
+                hasTooManyFiles = true;
+                acc.push(__spreadProps(__spreadValues({}, rejection), {
+                  id: counter.increment()
+                }));
+              }
+            } else {
+              acc.push(__spreadProps(__spreadValues({}, rejection), {
+                id: counter.increment()
+              }));
+            }
+            return acc;
+          },
+          []
+        );
       }
       if (setFileRejections) setFileRejections(fileRejections);
       if (onDrop) onDrop(acceptedFiles, fileRejections, event);
@@ -605,9 +623,21 @@ var TextField = (0, import_react2.forwardRef)((props, ref) => {
 
 // src/lib/UploadProgressBar.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
+var ERROR_MAPPINGS = [
+  {
+    pattern: /but has an extension for/i,
+    friendlyMessage: "File format does not match file extension."
+  }
+];
+var friendlyErrorMessage = (errorMessage) => {
+  const mapping = ERROR_MAPPINGS.find(({ pattern }) => pattern.test(errorMessage));
+  return mapping ? mapping.friendlyMessage : errorMessage;
+};
 var UploadProgressBar = ({ upload, onProgress, onError, onSuccess }) => {
   const [statePercentage, setStatePercentage] = (0, import_react3.useState)(upload.percentage || 0);
-  const [errorMessage, setErrorMessage] = (0, import_react3.useState)(upload.errorMessage || "");
+  const [errorMessage, setErrorMessage] = (0, import_react3.useState)(
+    upload.errorMessage ? friendlyErrorMessage(upload.errorMessage) : ""
+  );
   const [password, setPassword] = (0, import_react3.useState)("");
   const [showPassword, setShowPassword] = (0, import_react3.useState)(false);
   const [modalOpen, setModalOpen] = (0, import_react3.useState)(false);
@@ -617,7 +647,7 @@ var UploadProgressBar = ({ upload, onProgress, onError, onSuccess }) => {
     if (onProgress) onProgress(upload);
   };
   const handleOnError = () => {
-    setErrorMessage(upload.errorMessage || "Error");
+    setErrorMessage(upload.errorMessage ? friendlyErrorMessage(upload.errorMessage) : "Error");
     if (onError) onError(upload);
   };
   const handleOnSuccess = () => {
@@ -642,11 +672,18 @@ var UploadProgressBar = ({ upload, onProgress, onError, onSuccess }) => {
   upload.onSuccess.push(handleOnSuccess);
   upload.onError.push(handleOnError);
   return errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_mui_layout3.Box, { sx: { display: "flex", flexWrap: "wrap", columnGap: "4px" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_mui_list2.ListItemText, { slotProps: { primary: { color: "text.error", variant: "body2", component: "div" } }, sx: { wordWrap: "break-word" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_mui_icon4.WarningTriangleIcon, { sx: { verticalAlign: "middle", mt: "-2px" } }),
-      " ",
-      errorMessage
-    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      import_mui_list2.ListItemText,
+      {
+        slotProps: { primary: { color: "text.error", variant: "body2", component: "div" } },
+        sx: { wordWrap: "break-word" },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_mui_icon4.WarningTriangleIcon, { sx: { verticalAlign: "middle", mt: "-2px" } }),
+          " ",
+          errorMessage
+        ]
+      }
+    ),
     upload.status === "encrypted" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "pwRequired", children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_mui_button3.Button, { color: "secondary", size: "small", onClick: toggleModal, children: "Enter Password" }),
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Dialog, { open: modalOpen, onClose: toggleModal, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("form", { onSubmit: verifyPassword, children: [
@@ -660,7 +697,15 @@ var UploadProgressBar = ({ upload, onProgress, onError, onSuccess }) => {
             onChange: handlePasswordChange,
             autoFocus: true,
             InputProps: {
-              endAdornment: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_mui_form_utils3.InputAdornment, { position: "end", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_mui_button3.IconButton, { title: "password visibility", onClick: () => setShowPassword((prev) => !prev), edge: "end", children: showPassword ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_mui_icon4.EyeIcon, { fontSize: "small" }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_mui_icon4.EyeSlashIcon, { fontSize: "small" }) }) })
+              endAdornment: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_mui_form_utils3.InputAdornment, { position: "end", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                import_mui_button3.IconButton,
+                {
+                  title: "password visibility",
+                  onClick: () => setShowPassword((prev) => !prev),
+                  edge: "end",
+                  children: showPassword ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_mui_icon4.EyeIcon, { fontSize: "small" }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_mui_icon4.EyeSlashIcon, { fontSize: "small" })
+                }
+              ) })
             }
           }
         ) }),

package/dist/index.mjs

@@ -207,9 +207,27 @@ var Dropzone = ({
       const previous = (_a2 = watch(name)) != null ? _a2 : [];
       setValue(name, previous.concat(acceptedFiles));
       if (fileRejections.length > 0) {
-        for (const rejection of fileRejections) {
-          rejection.id = counter.increment();
-        }
+        const TOO_MANY_FILES_CODE = "too-many-files";
+        let hasTooManyFiles = false;
+        fileRejections = fileRejections.reduce(
+          (acc, rejection) => {
+            const isTooManyFiles = rejection.errors.some((error) => error.code === TOO_MANY_FILES_CODE);
+            if (isTooManyFiles) {
+              if (!hasTooManyFiles) {
+                hasTooManyFiles = true;
+                acc.push(__spreadProps(__spreadValues({}, rejection), {
+                  id: counter.increment()
+                }));
+              }
+            } else {
+              acc.push(__spreadProps(__spreadValues({}, rejection), {
+                id: counter.increment()
+              }));
+            }
+            return acc;
+          },
+          []
+        );
       }
       if (setFileRejections) setFileRejections(fileRejections);
       if (onDrop) onDrop(acceptedFiles, fileRejections, event);
@@ -579,9 +597,21 @@ var TextField = forwardRef((props, ref) => {
 
 // src/lib/UploadProgressBar.tsx
 import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+var ERROR_MAPPINGS = [
+  {
+    pattern: /but has an extension for/i,
+    friendlyMessage: "File format does not match file extension."
+  }
+];
+var friendlyErrorMessage = (errorMessage) => {
+  const mapping = ERROR_MAPPINGS.find(({ pattern }) => pattern.test(errorMessage));
+  return mapping ? mapping.friendlyMessage : errorMessage;
+};
 var UploadProgressBar = ({ upload, onProgress, onError, onSuccess }) => {
   const [statePercentage, setStatePercentage] = useState2(upload.percentage || 0);
-  const [errorMessage, setErrorMessage] = useState2(upload.errorMessage || "");
+  const [errorMessage, setErrorMessage] = useState2(
+    upload.errorMessage ? friendlyErrorMessage(upload.errorMessage) : ""
+  );
   const [password, setPassword] = useState2("");
   const [showPassword, setShowPassword] = useState2(false);
   const [modalOpen, setModalOpen] = useState2(false);
@@ -591,7 +621,7 @@ var UploadProgressBar = ({ upload, onProgress, onError, onSuccess }) => {
     if (onProgress) onProgress(upload);
   };
   const handleOnError = () => {
-    setErrorMessage(upload.errorMessage || "Error");
+    setErrorMessage(upload.errorMessage ? friendlyErrorMessage(upload.errorMessage) : "Error");
     if (onError) onError(upload);
   };
   const handleOnSuccess = () => {
@@ -616,11 +646,18 @@ var UploadProgressBar = ({ upload, onProgress, onError, onSuccess }) => {
   upload.onSuccess.push(handleOnSuccess);
   upload.onError.push(handleOnError);
   return errorMessage ? /* @__PURE__ */ jsxs7(Box2, { sx: { display: "flex", flexWrap: "wrap", columnGap: "4px" }, children: [
-    /* @__PURE__ */ jsxs7(ListItemText, { slotProps: { primary: { color: "text.error", variant: "body2", component: "div" } }, sx: { wordWrap: "break-word" }, children: [
-      /* @__PURE__ */ jsx10(WarningTriangleIcon, { sx: { verticalAlign: "middle", mt: "-2px" } }),
-      " ",
-      errorMessage
-    ] }),
+    /* @__PURE__ */ jsxs7(
+      ListItemText,
+      {
+        slotProps: { primary: { color: "text.error", variant: "body2", component: "div" } },
+        sx: { wordWrap: "break-word" },
+        children: [
+          /* @__PURE__ */ jsx10(WarningTriangleIcon, { sx: { verticalAlign: "middle", mt: "-2px" } }),
+          " ",
+          errorMessage
+        ]
+      }
+    ),
     upload.status === "encrypted" && /* @__PURE__ */ jsxs7("div", { className: "pwRequired", children: [
       /* @__PURE__ */ jsx10(Button2, { color: "secondary", size: "small", onClick: toggleModal, children: "Enter Password" }),
       /* @__PURE__ */ jsx10(Dialog, { open: modalOpen, onClose: toggleModal, children: /* @__PURE__ */ jsxs7("form", { onSubmit: verifyPassword, children: [
@@ -634,7 +671,15 @@ var UploadProgressBar = ({ upload, onProgress, onError, onSuccess }) => {
             onChange: handlePasswordChange,
             autoFocus: true,
             InputProps: {
-              endAdornment: /* @__PURE__ */ jsx10(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx10(IconButton2, { title: "password visibility", onClick: () => setShowPassword((prev) => !prev), edge: "end", children: showPassword ? /* @__PURE__ */ jsx10(EyeIcon, { fontSize: "small" }) : /* @__PURE__ */ jsx10(EyeSlashIcon, { fontSize: "small" }) }) })
+              endAdornment: /* @__PURE__ */ jsx10(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx10(
+                IconButton2,
+                {
+                  title: "password visibility",
+                  onClick: () => setShowPassword((prev) => !prev),
+                  edge: "end",
+                  children: showPassword ? /* @__PURE__ */ jsx10(EyeIcon, { fontSize: "small" }) : /* @__PURE__ */ jsx10(EyeSlashIcon, { fontSize: "small" })
+                }
+              ) })
             }
           }
         ) }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-file-selector",
-  "version": "1.6.2",
+  "version": "1.6.4",
   "description": "Availity MUI file-selector Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -44,7 +44,7 @@
     "@availity/mui-alert": "^1.0.5",
     "@availity/mui-button": "^1.1.3",
     "@availity/mui-divider": "^1.0.2",
-    "@availity/mui-form-utils": "^1.2.2",
+    "@availity/mui-form-utils": "^1.3.0",
     "@availity/mui-icon": "^1.0.2",
     "@availity/mui-layout": "^1.0.2",
     "@availity/mui-list": "^1.0.5",

package/src/lib/Dropzone.tsx

@@ -173,9 +173,34 @@ export const Dropzone = ({
       setValue(name, previous.concat(acceptedFiles));
 
       if (fileRejections.length > 0) {
-        for (const rejection of fileRejections) {
-          rejection.id = counter.increment();
-        }
+        const TOO_MANY_FILES_CODE = 'too-many-files';
+        let hasTooManyFiles = false;
+
+        fileRejections = fileRejections.reduce(
+          (acc, rejection) => {
+            const isTooManyFiles = rejection.errors.some((error) => error.code === TOO_MANY_FILES_CODE);
+
+            if (isTooManyFiles) {
+              // Only add the first too-many-files rejection
+              if (!hasTooManyFiles) {
+                hasTooManyFiles = true;
+                acc.push({
+                  ...rejection,
+                  id: counter.increment(),
+                });
+              }
+            } else {
+              // Add all other rejection types normally
+              acc.push({
+                ...rejection,
+                id: counter.increment(),
+              });
+            }
+
+            return acc;
+          },
+          [] as Array<(typeof fileRejections)[0] & { id: number }>
+        );
       }
 
       if (setFileRejections) setFileRejections(fileRejections);

package/src/lib/UploadProgressBar.test.tsx

@@ -38,6 +38,23 @@ describe('UploadProgressBar', () => {
     expect(screen.getByText('error message')).toBeTruthy();
   });
 
+  test('should intercept file extension error message', () => {
+    const mockUpload: unknown = {
+      onProgress: [],
+      onError: [],
+      onSuccess: [],
+      errorMessage: '.txt is application/pdf but has an extension for text/plain',
+      file: {
+        name: 'test',
+      },
+      percentage: 0,
+    };
+
+    render(<UploadProgressBar upload={mockUpload as Upload} />);
+
+    expect(screen.getByText('File format does not match file extension.')).toBeTruthy();
+  });
+
   test('should allow passwords for encrypted files', () => {
     const mockUpload: unknown = {
       onProgress: [],
@@ -47,7 +64,7 @@ describe('UploadProgressBar', () => {
       file: {
         name: 'test',
       },
-      status: 'encrypted'
+      status: 'encrypted',
     };
 
     render(<UploadProgressBar upload={mockUpload as Upload} />);

package/src/lib/UploadProgressBar.tsx

@@ -28,9 +28,32 @@ export type UploadProgressBarProps = {
   onError?: (upload: Upload) => void;
 };
 
+type ErrorMapping = {
+  pattern: RegExp;
+  friendlyMessage: string;
+};
+
+/**
+ * These errors are separate from the errors associated with ErrorAlert.
+ * These are errors received in the response from vault.
+ */
+const ERROR_MAPPINGS: ErrorMapping[] = [
+  {
+    pattern: /but has an extension for/i,
+    friendlyMessage: 'File format does not match file extension.',
+  },
+];
+
+const friendlyErrorMessage = (errorMessage: string): string => {
+  const mapping = ERROR_MAPPINGS.find(({ pattern }) => pattern.test(errorMessage));
+  return mapping ? mapping.friendlyMessage : errorMessage;
+};
+
 export const UploadProgressBar = ({ upload, onProgress, onError, onSuccess }: UploadProgressBarProps) => {
   const [statePercentage, setStatePercentage] = useState(upload.percentage || 0);
-  const [errorMessage, setErrorMessage] = useState(upload.errorMessage || '');
+  const [errorMessage, setErrorMessage] = useState(
+    upload.errorMessage ? friendlyErrorMessage(upload.errorMessage) : ''
+  );
   const [password, setPassword] = useState('');
   const [showPassword, setShowPassword] = useState(false);
   const [modalOpen, setModalOpen] = useState(false);
@@ -43,7 +66,7 @@ export const UploadProgressBar = ({ upload, onProgress, onError, onSuccess }: Up
   };
 
   const handleOnError = () => {
-    setErrorMessage(upload.errorMessage || 'Error');
+    setErrorMessage(upload.errorMessage ? friendlyErrorMessage(upload.errorMessage) : 'Error');
 
     if (onError) onError(upload);
   };
@@ -76,9 +99,12 @@ export const UploadProgressBar = ({ upload, onProgress, onError, onSuccess }: Up
   upload.onError.push(handleOnError);
 
   return errorMessage ? (
-    <Box sx={{display: 'flex', flexWrap: 'wrap', columnGap: '4px'}}>
-      <ListItemText slotProps={{primary: { color: 'text.error', variant: 'body2', component: 'div' }}} sx={{wordWrap: 'break-word'}}>
-        <WarningTriangleIcon sx={{verticalAlign: 'middle', mt: '-2px'}}/> {errorMessage}
+    <Box sx={{ display: 'flex', flexWrap: 'wrap', columnGap: '4px' }}>
+      <ListItemText
+        slotProps={{ primary: { color: 'text.error', variant: 'body2', component: 'div' } }}
+        sx={{ wordWrap: 'break-word' }}
+      >
+        <WarningTriangleIcon sx={{ verticalAlign: 'middle', mt: '-2px' }} /> {errorMessage}
       </ListItemText>
       {upload.status === 'encrypted' && (
         <div className="pwRequired">
@@ -98,7 +124,11 @@ export const UploadProgressBar = ({ upload, onProgress, onError, onSuccess }: Up
                   InputProps={{
                     endAdornment: (
                       <InputAdornment position="end">
-                        <IconButton title="password visibility" onClick={() => setShowPassword((prev) => !prev)} edge="end">
+                        <IconButton
+                          title="password visibility"
+                          onClick={() => setShowPassword((prev) => !prev)}
+                          edge="end"
+                        >
                           {showPassword ? <EyeIcon fontSize="small" /> : <EyeSlashIcon fontSize="small" />}
                         </IconButton>
                       </InputAdornment>
@@ -107,7 +137,9 @@ export const UploadProgressBar = ({ upload, onProgress, onError, onSuccess }: Up
                 />
               </DialogContent>
               <DialogActions>
-                <Button color="primary" type="submit">Ok</Button>
+                <Button color="primary" type="submit">
+                  Ok
+                </Button>
               </DialogActions>
             </form>
           </Dialog>