@availity/mui-file-selector 1.2.1 → 1.3.1

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.3.1](https://github.com/Availity/element/compare/@availity/mui-file-selector@1.3.0...@availity/mui-file-selector@1.3.1) (2025-03-27)
+
+### Dependency Updates
+
+* `mui-dialog` updated to version `1.3.0`
+* `mui-textfield` updated to version `1.3.0`
+## [1.3.0](https://github.com/Availity/element/compare/@availity/mui-file-selector@1.2.1...@availity/mui-file-selector@1.3.0) (2025-03-24)
+
+
+### Features
+
+* **mui-file-selector:** error alert and file list style updates ([341f5c9](https://github.com/Availity/element/commit/341f5c90cab723f786908f88e72963a4e588f1ac))
+
 ## [1.2.1](https://github.com/Availity/element/compare/@availity/mui-file-selector@1.2.0...@availity/mui-file-selector@1.2.1) (2025-03-21)
 
 ### Dependency Updates

package/dist/index.js

@@ -323,6 +323,7 @@ var Dropzone = ({
 
 // src/lib/ErrorAlert.tsx
 var import_mui_alert = require("@availity/mui-alert");
+var import_mui_list = require("@availity/mui-list");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var codes = {
   "file-too-large": "File exceeds maximum size",
@@ -333,20 +334,35 @@ var codes = {
 };
 var ErrorAlert = ({ errors, fileName, id, onClose }) => {
   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: [
-        codes[error.code] || "Error",
-        ": ",
-        fileName
-      ] }),
-      error.message
-    ] }, `${id}-${error.code}`);
-  }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_mui_alert.Alert, { severity: "error", onClose, children: errors.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_mui_alert.AlertTitle, { children: [
+      "There were ",
+      errors.length,
+      " error(s) found when uploading ",
+      fileName
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_mui_list.List, { sx: {
+      listStyleType: "disc",
+      listStylePosition: "inside",
+      marginLeft: 1,
+      ".MuiListItem-root": {
+        display: "list-item"
+      }
+    }, disablePadding: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: errors.map((error) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_mui_list.ListItem, { disableGutters: true, disablePadding: true, divider: false, children: error.message }, `${id}-${error.code}`);
+    }) }) })
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_mui_alert.AlertTitle, { children: [
+      codes[errors[0].code] || "Error",
+      ": ",
+      fileName
+    ] }),
+    errors[0].message
+  ] }) });
 };
 
 // src/lib/FileList.tsx
-var import_mui_list2 = require("@availity/mui-list");
+var import_mui_list3 = require("@availity/mui-list");
 var import_mui_button4 = require("@availity/mui-button");
 var import_mui_icon5 = require("@availity/mui-icon");
 var import_mui_layout4 = require("@availity/mui-layout");
@@ -430,7 +446,7 @@ var DialogTitle = (_a) => {
 var import_mui_form_utils3 = require("@availity/mui-form-utils");
 var import_mui_icon3 = require("@availity/mui-icon");
 var import_mui_layout3 = require("@availity/mui-layout");
-var import_mui_list = require("@availity/mui-list");
+var import_mui_list2 = require("@availity/mui-list");
 var import_mui_progress = require("@availity/mui-progress");
 
 // ../textfield/src/lib/TextField.tsx
@@ -438,6 +454,7 @@ var import_react2 = require("react");
 var import_TextField = __toESM(require("@mui/material/TextField"));
 var import_mui_form_utils2 = require("@availity/mui-form-utils");
 var import_mui_layout2 = require("@availity/mui-layout");
+var import_mui_typography2 = require("@availity/mui-typography");
 var import_styles4 = require("@mui/material/styles");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var SelectPlaceholder = (0, import_styles4.styled)("span", {
@@ -445,6 +462,24 @@ var SelectPlaceholder = (0, import_styles4.styled)("span", {
   slot: "SelectPlaceholder",
   overridesResolver: (props, styles) => styles.avFilled
 })(({ theme }) => ({ opacity: 1, color: theme.palette.grey[400] }));
+var TextFieldFormHelperText = ({
+  charCount,
+  helperText,
+  maxLength,
+  showCharacterCount
+}) => {
+  if (showCharacterCount) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_mui_layout2.Grid, { container: true, justifyContent: "space-between", flexWrap: "nowrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_mui_form_utils2.FormHelperText, { sx: { marginRight: "12px" }, children: helperText }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_mui_typography2.Typography, { variant: "caption", marginTop: "4px", lineHeight: "1.25rem", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_mui_typography2.Typography, { component: "span", variant: "inherit", color: charCount > maxLength ? "error" : "textPrimary", children: charCount || 0 }),
+        "/",
+        maxLength
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_mui_form_utils2.FormHelperText, { children: helperText });
+};
 var TextField = (0, import_react2.forwardRef)((props, ref) => {
   var _b, _c, _d, _e, _f, _g, _h;
   const _a = props, {
@@ -456,7 +491,8 @@ var TextField = (0, import_react2.forwardRef)((props, ref) => {
     SelectProps: SelectProps2,
     inputProps,
     helperText,
-    showCharacterCount = false
+    showCharacterCount = false,
+    displayOverflowMaxLength = false
   } = _a, rest = __objRest(_a, [
     "InputProps",
     "helpTopicId",
@@ -466,10 +502,12 @@ var TextField = (0, import_react2.forwardRef)((props, ref) => {
     "SelectProps",
     "inputProps",
     "helperText",
-    "showCharacterCount"
+    "showCharacterCount",
+    "displayOverflowMaxLength"
   ]);
   const [openDetected, setOpenDetected] = (0, import_react2.useState)(false);
   const [charCount, setCharCount] = (0, import_react2.useState)(0);
+  const maxLength = (inputProps == null ? void 0 : inputProps.maxLength) || ((_c = (_b = rest.slotProps) == null ? void 0 : _b.htmlInput) == null ? void 0 : _c.maxLength);
   const resolvedProps = (props2) => !props2 || Object.keys(props2).length === 0 ? void 0 : props2;
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     import_TextField.default,
@@ -478,19 +516,15 @@ var TextField = (0, import_react2.forwardRef)((props, ref) => {
         setCharCount(event.target.value.length);
         if (rest.onChange) rest.onChange(event);
       },
-      helperText: showCharacterCount ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_mui_layout2.Grid, { container: true, justifyContent: "space-between", children: [
-        helperText,
-        " ",
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { marginLeft: 4 }, children: [
-          charCount || 0,
-          "/",
-          (inputProps == null ? void 0 : inputProps.maxLength) || ((_c = (_b = rest.slotProps) == null ? void 0 : _b.htmlInput) == null ? void 0 : _c.maxLength)
-        ] })
-      ] }) : helperText,
-      slots: { formHelperText: import_mui_form_utils2.FormHelperText },
+      helperText: helperText || /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, {}),
+      slots: { formHelperText: TextFieldFormHelperText },
       slotProps: {
         input: resolvedProps(__spreadValues(__spreadValues(__spreadValues({}, InputProps2), import_mui_form_utils2.InputPropOverrides), (_d = rest.slotProps) == null ? void 0 : _d.input)),
-        htmlInput: resolvedProps(__spreadValues(__spreadValues({ "aria-required": required }, inputProps), (_e = rest.slotProps) == null ? void 0 : _e.htmlInput)),
+        htmlInput: resolvedProps(__spreadProps(__spreadValues(__spreadValues({
+          "aria-required": required
+        }, inputProps), (_e = rest.slotProps) == null ? void 0 : _e.htmlInput), {
+          maxLength: !displayOverflowMaxLength ? maxLength : void 0
+        })),
         select: resolvedProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
           displayEmpty: !!rest.placeholder,
           renderValue: (value) => rest.placeholder && (!value || Array.isArray(value) && value.length === 0) ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectPlaceholder, { className: "MuiSelect-placeholder", children: rest.placeholder }) : value
@@ -501,7 +535,15 @@ var TextField = (0, import_react2.forwardRef)((props, ref) => {
           required,
           shrink: true
         }, InputLabelProps), (_g = rest.slotProps) == null ? void 0 : _g.inputLabel)),
-        formHelperText: resolvedProps(__spreadValues(__spreadValues({ component: "div" }, FormHelperTextProps2), (_h = rest.slotProps) == null ? void 0 : _h.formHelperText))
+        formHelperText: resolvedProps(__spreadProps(__spreadValues(__spreadValues({
+          component: "div"
+        }, FormHelperTextProps2), (_h = rest.slotProps) == null ? void 0 : _h.formHelperText), {
+          charCount,
+          helperText,
+          maxLength,
+          displayOverflowMaxLength,
+          showCharacterCount
+        }))
       },
       ref
     })
@@ -547,7 +589,7 @@ 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_list.ListItemText, { slotProps: { primary: { color: "text.error", variant: "body2", component: "div" } }, 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_icon3.WarningTriangleIcon, { sx: { verticalAlign: "middle", mt: "-2px" } }),
       " ",
       errorMessage
@@ -653,7 +695,7 @@ var FileRow = ({
   if (CustomRow) return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CustomRow, { upload, options, onRemoveFile });
   if (!upload) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-    import_mui_list2.ListItem,
+    import_mui_list3.ListItem,
     {
       disableGutters: true,
       secondaryAction: !disableRemove && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
@@ -668,11 +710,11 @@ var FileRow = ({
         }
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_mui_layout4.Grid, { container: true, spacing: 2, alignItems: "center", justifyContent: "space-between", width: "100%", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_layout4.Grid, { size: { xs: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_list2.ListItemIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, {}) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_layout4.Grid, { size: { xs: 3 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_list2.ListItemText, { children: upload.trimFileName(upload.file.name) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_layout4.Grid, { size: { xs: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_list2.ListItemText, { children: formatBytes(upload.file.size) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_layout4.Grid, { size: { xs: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(UploadProgressBar, { upload }) })
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_mui_layout4.Grid, { container: true, spacing: 2, alignItems: "center", justifyContent: "space-between", width: "100%", flexWrap: "wrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_layout4.Grid, { size: { xs: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_list3.ListItemIcon, { sx: { minWidth: "1.5rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, {}) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_layout4.Grid, { size: { xs: 4 }, sx: { minWidth: "8rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_list3.ListItemText, { sx: { wordBreak: "break-all" }, children: upload.trimFileName(upload.file.name) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_layout4.Grid, { size: { xs: 2 }, sx: { minWidth: "3rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_list3.ListItemText, { sx: { textAlign: "end" }, children: formatBytes(upload.file.size) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_layout4.Grid, { size: { xs: "grow" }, sx: { minWidth: "6rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(UploadProgressBar, { upload }) })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_divider2.Divider, {})
       ]
@@ -688,7 +730,7 @@ var FileList = ({
   disableRemove
 }) => {
   if (files.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_list2.List, { children: files.map((file) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_list3.List, { children: files.map((file) => {
     return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       FileRow,
       {
@@ -709,10 +751,10 @@ var import_react4 = require("react");
 var import_react_hook_form3 = require("react-hook-form");
 var import_react_query2 = require("@tanstack/react-query");
 var import_mui_layout5 = require("@availity/mui-layout");
-var import_mui_typography4 = require("@availity/mui-typography");
+var import_mui_typography5 = require("@availity/mui-typography");
 
 // src/lib/FileTypesMessage.tsx
-var import_mui_typography2 = require("@availity/mui-typography");
+var import_mui_typography3 = require("@availity/mui-typography");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var FileTypesMessage = ({
   allowedFileTypes = [],
@@ -721,17 +763,17 @@ var FileTypesMessage = ({
 }) => {
   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_runtime12.jsxs)(import_mui_typography2.Typography, { variant, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_mui_typography3.Typography, { variant, children: [
     fileSizeMsg,
     fileTypesMsg
   ] });
 };
 
 // src/lib/HeaderMessage.tsx
-var import_mui_typography3 = require("@availity/mui-typography");
+var import_mui_typography4 = require("@availity/mui-typography");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var HeaderMessage = ({ maxFiles, maxSize }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_mui_typography3.Typography, { variant: "h6", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_mui_typography4.Typography, { variant: "h6", children: [
     "Attach up to ",
     maxFiles,
     " file(s), with a maximum individual size of ",
@@ -804,7 +846,7 @@ var FileSelector = ({
   };
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
     enableDropArea ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-      label ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_mui_typography4.Typography, { marginBottom: "4px", children: label }) : null,
+      label ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_mui_typography5.Typography, { marginBottom: "4px", children: label }) : null,
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         Dropzone,
         {

package/dist/index.mjs

@@ -281,6 +281,7 @@ var Dropzone = ({
 
 // src/lib/ErrorAlert.tsx
 import { Alert, AlertTitle } from "@availity/mui-alert";
+import { List, ListItem } from "@availity/mui-list";
 import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var codes = {
   "file-too-large": "File exceeds maximum size",
@@ -291,20 +292,35 @@ var codes = {
 };
 var ErrorAlert = ({ errors, fileName, id, onClose }) => {
   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: [
-        codes[error.code] || "Error",
-        ": ",
-        fileName
-      ] }),
-      error.message
-    ] }, `${id}-${error.code}`);
-  }) });
+  return /* @__PURE__ */ jsx3(Alert, { severity: "error", onClose, children: errors.length > 1 ? /* @__PURE__ */ jsxs3(Fragment3, { children: [
+    /* @__PURE__ */ jsxs3(AlertTitle, { children: [
+      "There were ",
+      errors.length,
+      " error(s) found when uploading ",
+      fileName
+    ] }),
+    /* @__PURE__ */ jsx3(List, { sx: {
+      listStyleType: "disc",
+      listStylePosition: "inside",
+      marginLeft: 1,
+      ".MuiListItem-root": {
+        display: "list-item"
+      }
+    }, disablePadding: true, children: /* @__PURE__ */ jsx3(Fragment3, { children: errors.map((error) => {
+      return /* @__PURE__ */ jsx3(ListItem, { disableGutters: true, disablePadding: true, divider: false, children: error.message }, `${id}-${error.code}`);
+    }) }) })
+  ] }) : /* @__PURE__ */ jsxs3(Fragment3, { children: [
+    /* @__PURE__ */ jsxs3(AlertTitle, { children: [
+      codes[errors[0].code] || "Error",
+      ": ",
+      fileName
+    ] }),
+    errors[0].message
+  ] }) });
 };
 
 // src/lib/FileList.tsx
-import { List, ListItem, ListItemText as ListItemText2, ListItemIcon } from "@availity/mui-list";
+import { List as List2, ListItem as ListItem2, ListItemText as ListItemText2, ListItemIcon } from "@availity/mui-list";
 import { IconButton as IconButton3 } from "@availity/mui-button";
 import { DeleteIcon } from "@availity/mui-icon";
 import { Grid as Grid2 } from "@availity/mui-layout";
@@ -402,13 +418,32 @@ import {
   SelectPropOverrides
 } from "@availity/mui-form-utils";
 import { Grid } from "@availity/mui-layout";
+import { Typography as Typography2 } from "@availity/mui-typography";
 import { styled as styled4 } from "@mui/material/styles";
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var SelectPlaceholder = styled4("span", {
   name: "MuiTextField",
   slot: "SelectPlaceholder",
   overridesResolver: (props, styles) => styles.avFilled
 })(({ theme }) => ({ opacity: 1, color: theme.palette.grey[400] }));
+var TextFieldFormHelperText = ({
+  charCount,
+  helperText,
+  maxLength,
+  showCharacterCount
+}) => {
+  if (showCharacterCount) {
+    return /* @__PURE__ */ jsxs6(Grid, { container: true, justifyContent: "space-between", flexWrap: "nowrap", children: [
+      /* @__PURE__ */ jsx9(FormHelperText, { sx: { marginRight: "12px" }, children: helperText }),
+      /* @__PURE__ */ jsxs6(Typography2, { variant: "caption", marginTop: "4px", lineHeight: "1.25rem", children: [
+        /* @__PURE__ */ jsx9(Typography2, { component: "span", variant: "inherit", color: charCount > maxLength ? "error" : "textPrimary", children: charCount || 0 }),
+        "/",
+        maxLength
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsx9(FormHelperText, { children: helperText });
+};
 var TextField = forwardRef((props, ref) => {
   var _b, _c, _d, _e, _f, _g, _h;
   const _a = props, {
@@ -420,7 +455,8 @@ var TextField = forwardRef((props, ref) => {
     SelectProps: SelectProps2,
     inputProps,
     helperText,
-    showCharacterCount = false
+    showCharacterCount = false,
+    displayOverflowMaxLength = false
   } = _a, rest = __objRest(_a, [
     "InputProps",
     "helpTopicId",
@@ -430,10 +466,12 @@ var TextField = forwardRef((props, ref) => {
     "SelectProps",
     "inputProps",
     "helperText",
-    "showCharacterCount"
+    "showCharacterCount",
+    "displayOverflowMaxLength"
   ]);
   const [openDetected, setOpenDetected] = useState(false);
   const [charCount, setCharCount] = useState(0);
+  const maxLength = (inputProps == null ? void 0 : inputProps.maxLength) || ((_c = (_b = rest.slotProps) == null ? void 0 : _b.htmlInput) == null ? void 0 : _c.maxLength);
   const resolvedProps = (props2) => !props2 || Object.keys(props2).length === 0 ? void 0 : props2;
   return /* @__PURE__ */ jsx9(
     MuiTextField,
@@ -442,19 +480,15 @@ var TextField = forwardRef((props, ref) => {
         setCharCount(event.target.value.length);
         if (rest.onChange) rest.onChange(event);
       },
-      helperText: showCharacterCount ? /* @__PURE__ */ jsxs6(Grid, { container: true, justifyContent: "space-between", children: [
-        helperText,
-        " ",
-        /* @__PURE__ */ jsxs6("span", { style: { marginLeft: 4 }, children: [
-          charCount || 0,
-          "/",
-          (inputProps == null ? void 0 : inputProps.maxLength) || ((_c = (_b = rest.slotProps) == null ? void 0 : _b.htmlInput) == null ? void 0 : _c.maxLength)
-        ] })
-      ] }) : helperText,
-      slots: { formHelperText: FormHelperText },
+      helperText: helperText || /* @__PURE__ */ jsx9(Fragment4, {}),
+      slots: { formHelperText: TextFieldFormHelperText },
       slotProps: {
         input: resolvedProps(__spreadValues(__spreadValues(__spreadValues({}, InputProps2), InputPropOverrides), (_d = rest.slotProps) == null ? void 0 : _d.input)),
-        htmlInput: resolvedProps(__spreadValues(__spreadValues({ "aria-required": required }, inputProps), (_e = rest.slotProps) == null ? void 0 : _e.htmlInput)),
+        htmlInput: resolvedProps(__spreadProps(__spreadValues(__spreadValues({
+          "aria-required": required
+        }, inputProps), (_e = rest.slotProps) == null ? void 0 : _e.htmlInput), {
+          maxLength: !displayOverflowMaxLength ? maxLength : void 0
+        })),
         select: resolvedProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
           displayEmpty: !!rest.placeholder,
           renderValue: (value) => rest.placeholder && (!value || Array.isArray(value) && value.length === 0) ? /* @__PURE__ */ jsx9(SelectPlaceholder, { className: "MuiSelect-placeholder", children: rest.placeholder }) : value
@@ -465,7 +499,15 @@ var TextField = forwardRef((props, ref) => {
           required,
           shrink: true
         }, InputLabelProps), (_g = rest.slotProps) == null ? void 0 : _g.inputLabel)),
-        formHelperText: resolvedProps(__spreadValues(__spreadValues({ component: "div" }, FormHelperTextProps2), (_h = rest.slotProps) == null ? void 0 : _h.formHelperText))
+        formHelperText: resolvedProps(__spreadProps(__spreadValues(__spreadValues({
+          component: "div"
+        }, FormHelperTextProps2), (_h = rest.slotProps) == null ? void 0 : _h.formHelperText), {
+          charCount,
+          helperText,
+          maxLength,
+          displayOverflowMaxLength,
+          showCharacterCount
+        }))
       },
       ref
     })
@@ -511,7 +553,7 @@ 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" } }, 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
@@ -628,7 +670,7 @@ var FileRow = ({
   if (CustomRow) return /* @__PURE__ */ jsx11(CustomRow, { upload, options, onRemoveFile });
   if (!upload) return null;
   return /* @__PURE__ */ jsxs8(
-    ListItem,
+    ListItem2,
     {
       disableGutters: true,
       secondaryAction: !disableRemove && /* @__PURE__ */ jsx11(
@@ -643,11 +685,11 @@ var FileRow = ({
         }
       ),
       children: [
-        /* @__PURE__ */ jsxs8(Grid2, { container: true, spacing: 2, alignItems: "center", justifyContent: "space-between", width: "100%", children: [
-          /* @__PURE__ */ jsx11(Grid2, { size: { xs: 1 }, children: /* @__PURE__ */ jsx11(ListItemIcon, { children: /* @__PURE__ */ jsx11(Icon, {}) }) }),
-          /* @__PURE__ */ jsx11(Grid2, { size: { xs: 3 }, children: /* @__PURE__ */ jsx11(ListItemText2, { children: upload.trimFileName(upload.file.name) }) }),
-          /* @__PURE__ */ jsx11(Grid2, { size: { xs: 2 }, children: /* @__PURE__ */ jsx11(ListItemText2, { children: formatBytes(upload.file.size) }) }),
-          /* @__PURE__ */ jsx11(Grid2, { size: { xs: 6 }, children: /* @__PURE__ */ jsx11(UploadProgressBar, { upload }) })
+        /* @__PURE__ */ jsxs8(Grid2, { container: true, spacing: 2, alignItems: "center", justifyContent: "space-between", width: "100%", flexWrap: "wrap", children: [
+          /* @__PURE__ */ jsx11(Grid2, { size: { xs: "auto" }, children: /* @__PURE__ */ jsx11(ListItemIcon, { sx: { minWidth: "1.5rem" }, children: /* @__PURE__ */ jsx11(Icon, {}) }) }),
+          /* @__PURE__ */ jsx11(Grid2, { size: { xs: 4 }, sx: { minWidth: "8rem" }, children: /* @__PURE__ */ jsx11(ListItemText2, { sx: { wordBreak: "break-all" }, children: upload.trimFileName(upload.file.name) }) }),
+          /* @__PURE__ */ jsx11(Grid2, { size: { xs: 2 }, sx: { minWidth: "3rem" }, children: /* @__PURE__ */ jsx11(ListItemText2, { sx: { textAlign: "end" }, children: formatBytes(upload.file.size) }) }),
+          /* @__PURE__ */ jsx11(Grid2, { size: { xs: "grow" }, sx: { minWidth: "6rem" }, children: /* @__PURE__ */ jsx11(UploadProgressBar, { upload }) })
         ] }),
         /* @__PURE__ */ jsx11(Divider2, {})
       ]
@@ -663,7 +705,7 @@ var FileList = ({
   disableRemove
 }) => {
   if (files.length === 0) return null;
-  return /* @__PURE__ */ jsx11(List, { children: files.map((file) => {
+  return /* @__PURE__ */ jsx11(List2, { children: files.map((file) => {
     return /* @__PURE__ */ jsx11(
       FileRow,
       {
@@ -684,10 +726,10 @@ import { useState as useState3 } from "react";
 import { useFormContext as useFormContext2 } from "react-hook-form";
 import { useQueryClient } from "@tanstack/react-query";
 import { Grid as Grid3 } from "@availity/mui-layout";
-import { Typography as Typography4 } from "@availity/mui-typography";
+import { Typography as Typography5 } from "@availity/mui-typography";
 
 // src/lib/FileTypesMessage.tsx
-import { Typography as Typography2 } from "@availity/mui-typography";
+import { Typography as Typography3 } from "@availity/mui-typography";
 import { jsxs as jsxs9 } from "react/jsx-runtime";
 var FileTypesMessage = ({
   allowedFileTypes = [],
@@ -696,17 +738,17 @@ var FileTypesMessage = ({
 }) => {
   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__ */ jsxs9(Typography2, { variant, children: [
+  return /* @__PURE__ */ jsxs9(Typography3, { variant, children: [
     fileSizeMsg,
     fileTypesMsg
   ] });
 };
 
 // src/lib/HeaderMessage.tsx
-import { Typography as Typography3 } from "@availity/mui-typography";
+import { Typography as Typography4 } from "@availity/mui-typography";
 import { jsxs as jsxs10 } from "react/jsx-runtime";
 var HeaderMessage = ({ maxFiles, maxSize }) => {
-  return /* @__PURE__ */ jsxs10(Typography3, { variant: "h6", children: [
+  return /* @__PURE__ */ jsxs10(Typography4, { variant: "h6", children: [
     "Attach up to ",
     maxFiles,
     " file(s), with a maximum individual size of ",
@@ -715,7 +757,7 @@ var HeaderMessage = ({ maxFiles, maxSize }) => {
 };
 
 // src/lib/FileSelector.tsx
-import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 var CLOUD_URL = "/cloud/web/appl/vault/upload/v1/resumable";
 var FileSelector = ({
   name,
@@ -777,9 +819,9 @@ var FileSelector = ({
     const rejections = fileRejections.filter((value) => value.id !== id);
     setFileRejections(rejections);
   };
-  return /* @__PURE__ */ jsxs11(Fragment4, { children: [
-    enableDropArea ? /* @__PURE__ */ jsxs11(Fragment4, { children: [
-      label ? /* @__PURE__ */ jsx12(Typography4, { marginBottom: "4px", children: label }) : null,
+  return /* @__PURE__ */ jsxs11(Fragment5, { children: [
+    enableDropArea ? /* @__PURE__ */ jsxs11(Fragment5, { children: [
+      label ? /* @__PURE__ */ jsx12(Typography5, { marginBottom: "4px", children: label }) : null,
       /* @__PURE__ */ jsx12(
         Dropzone,
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-file-selector",
-  "version": "1.2.1",
+  "version": "1.3.1",
   "description": "Availity MUI file-selector Component - part of the @availity/element design system",
   "keywords": [
     "react",

package/src/lib/ErrorAlert.tsx

@@ -1,4 +1,5 @@
 import { Alert, AlertTitle } from '@availity/mui-alert';
+import { List, ListItem } from '@availity/mui-list';
 import type { FileRejection } from 'react-dropzone';
 
 const codes: Record<string, string> = {
@@ -30,17 +31,39 @@ export const ErrorAlert = ({ errors, fileName, id, onClose }: ErrorAlertProps) =
   if (errors.length === 0) return null;
 
   return (
-    <>
-      {errors.map((error) => {
-        return (
-          <Alert severity="error" onClose={onClose} key={`${id}-${error.code}`}>
-            <AlertTitle>
-              {codes[error.code] || 'Error'}: {fileName}
-            </AlertTitle>
-            {error.message}
-          </Alert>
-        );
-      })}
-    </>
+    <Alert severity="error" onClose={onClose}>
+      {errors.length > 1 ?
+        <>
+          <AlertTitle>
+            There were {errors.length} error(s) found when uploading {fileName}
+          </AlertTitle>
+          <List sx={{
+            listStyleType: 'disc',
+            listStylePosition: 'inside',
+            marginLeft: 1,
+            '.MuiListItem-root': {
+              display: 'list-item'
+            }
+          }} disablePadding>
+            <>
+              {errors.map((error) => {
+                return (
+                  <ListItem disableGutters disablePadding divider={false} key={`${id}-${error.code}`}>
+                    {error.message}
+                  </ListItem>
+                );
+              })}
+            </>
+          </List>
+        </>
+      :
+        <>
+          <AlertTitle>
+            {codes[errors[0].code] || 'Error'}: {fileName}
+          </AlertTitle>
+          {errors[0].message}
+        </>
+      }
+    </Alert>
   );
 };

package/src/lib/FileList.tsx

@@ -74,19 +74,19 @@ export const FileRow = ({
         )
       }
     >
-      <Grid container spacing={2} alignItems="center" justifyContent="space-between" width="100%">
-        <Grid size={{ xs: 1 }}>
-          <ListItemIcon>
+      <Grid container spacing={2} alignItems="center" justifyContent="space-between" width="100%"  flexWrap="wrap">
+        <Grid size={{ xs: "auto" }}>
+          <ListItemIcon sx={{minWidth: '1.5rem'}}>
             <Icon />
           </ListItemIcon>
         </Grid>
-        <Grid size={{ xs: 3 }}>
-          <ListItemText>{upload.trimFileName(upload.file.name)}</ListItemText>
+        <Grid size={{ xs: 4 }} sx={{minWidth: '8rem'}}>
+          <ListItemText sx={{wordBreak: 'break-all'}}>{upload.trimFileName(upload.file.name)}</ListItemText>
         </Grid>
-        <Grid size={{ xs: 2 }}>
-          <ListItemText>{formatBytes(upload.file.size)}</ListItemText>
+        <Grid size={{ xs: 2 }} sx={{minWidth: '3rem'}}>
+          <ListItemText sx={{textAlign: 'end'}}>{formatBytes(upload.file.size)}</ListItemText>
         </Grid>
-        <Grid size={{ xs: 6 }}>
+        <Grid size={{ xs: 'grow' }} sx={{minWidth: '6rem'}}>
           <UploadProgressBar upload={upload} />
         </Grid>
       </Grid>

package/src/lib/UploadProgressBar.tsx

@@ -77,7 +77,7 @@ export const UploadProgressBar = ({ upload, onProgress, onError, onSuccess }: Up
 
   return errorMessage ? (
     <Box sx={{display: 'flex', flexWrap: 'wrap', columnGap: '4px'}}>
-      <ListItemText slotProps={{primary: { color: 'text.error', variant: 'body2', component: 'div' }}}>
+      <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' && (