@availity/mui-file-selector 1.2.0 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/index.js +98 -35
  3. package/dist/index.mjs +109 -46
  4. package/package.json +2 -2
  5. package/src/lib/ErrorAlert.tsx +35 -12
  6. package/src/lib/FileList.tsx +8 -8
  7. package/src/lib/UploadProgressBar.tsx +1 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,20 @@
2
2
 
3
3
  This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
4
4
 
5
+ ## [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)
6
+
7
+
8
+ ### Features
9
+
10
+ * **mui-file-selector:** error alert and file list style updates ([341f5c9](https://github.com/Availity/element/commit/341f5c90cab723f786908f88e72963a4e588f1ac))
11
+
12
+ ## [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)
13
+
14
+ ### Dependency Updates
15
+
16
+ * `mui-form-utils` updated to version `1.2.0`
17
+ * `mui-dialog` updated to version `1.2.0`
18
+ * `mui-textfield` updated to version `1.2.0`
5
19
  ## [1.2.0](https://github.com/Availity/element/compare/@availity/mui-file-selector@1.1.2...@availity/mui-file-selector@1.2.0) (2025-03-13)
6
20
 
7
21
 
package/dist/index.js CHANGED
@@ -323,6 +323,7 @@ var Dropzone = ({
323
323
 
324
324
  // src/lib/ErrorAlert.tsx
325
325
  var import_mui_alert = require("@availity/mui-alert");
326
+ var import_mui_list = require("@availity/mui-list");
326
327
  var import_jsx_runtime3 = require("react/jsx-runtime");
327
328
  var codes = {
328
329
  "file-too-large": "File exceeds maximum size",
@@ -333,23 +334,38 @@ var codes = {
333
334
  };
334
335
  var ErrorAlert = ({ errors, fileName, id, onClose }) => {
335
336
  if (errors.length === 0) return null;
336
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: errors.map((error) => {
337
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_mui_alert.Alert, { severity: "error", onClose, children: [
338
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_mui_alert.AlertTitle, { children: [
339
- codes[error.code] || "Error",
340
- ": ",
341
- fileName
342
- ] }),
343
- error.message
344
- ] }, `${id}-${error.code}`);
345
- }) });
337
+ 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: [
338
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_mui_alert.AlertTitle, { children: [
339
+ "There were ",
340
+ errors.length,
341
+ " error(s) found when uploading ",
342
+ fileName
343
+ ] }),
344
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_mui_list.List, { sx: {
345
+ listStyleType: "disc",
346
+ listStylePosition: "inside",
347
+ marginLeft: 1,
348
+ ".MuiListItem-root": {
349
+ display: "list-item"
350
+ }
351
+ }, disablePadding: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: errors.map((error) => {
352
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_mui_list.ListItem, { disableGutters: true, disablePadding: true, divider: false, children: error.message }, `${id}-${error.code}`);
353
+ }) }) })
354
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
355
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_mui_alert.AlertTitle, { children: [
356
+ codes[errors[0].code] || "Error",
357
+ ": ",
358
+ fileName
359
+ ] }),
360
+ errors[0].message
361
+ ] }) });
346
362
  };
347
363
 
348
364
  // src/lib/FileList.tsx
349
- var import_mui_list2 = require("@availity/mui-list");
365
+ var import_mui_list3 = require("@availity/mui-list");
350
366
  var import_mui_button4 = require("@availity/mui-button");
351
367
  var import_mui_icon5 = require("@availity/mui-icon");
352
- var import_mui_layout3 = require("@availity/mui-layout");
368
+ var import_mui_layout4 = require("@availity/mui-layout");
353
369
  var import_mui_divider2 = require("@availity/mui-divider");
354
370
 
355
371
  // src/lib/UploadProgressBar.tsx
@@ -429,32 +445,79 @@ var DialogTitle = (_a) => {
429
445
  // src/lib/UploadProgressBar.tsx
430
446
  var import_mui_form_utils3 = require("@availity/mui-form-utils");
431
447
  var import_mui_icon3 = require("@availity/mui-icon");
432
- var import_mui_layout2 = require("@availity/mui-layout");
433
- var import_mui_list = require("@availity/mui-list");
448
+ var import_mui_layout3 = require("@availity/mui-layout");
449
+ var import_mui_list2 = require("@availity/mui-list");
434
450
  var import_mui_progress = require("@availity/mui-progress");
435
451
 
436
452
  // ../textfield/src/lib/TextField.tsx
437
453
  var import_react2 = require("react");
438
454
  var import_TextField = __toESM(require("@mui/material/TextField"));
439
455
  var import_mui_form_utils2 = require("@availity/mui-form-utils");
456
+ var import_mui_layout2 = require("@availity/mui-layout");
457
+ var import_styles4 = require("@mui/material/styles");
440
458
  var import_jsx_runtime9 = require("react/jsx-runtime");
459
+ var SelectPlaceholder = (0, import_styles4.styled)("span", {
460
+ name: "MuiTextField",
461
+ slot: "SelectPlaceholder",
462
+ overridesResolver: (props, styles) => styles.avFilled
463
+ })(({ theme }) => ({ opacity: 1, color: theme.palette.grey[400] }));
441
464
  var TextField = (0, import_react2.forwardRef)((props, ref) => {
442
- const _a = props, { InputProps: InputProps2, helpTopicId, InputLabelProps, FormHelperTextProps: FormHelperTextProps2, required, SelectProps: SelectProps2, inputProps } = _a, rest = __objRest(_a, ["InputProps", "helpTopicId", "InputLabelProps", "FormHelperTextProps", "required", "SelectProps", "inputProps"]);
465
+ var _b, _c, _d, _e, _f, _g, _h;
466
+ const _a = props, {
467
+ InputProps: InputProps2,
468
+ helpTopicId,
469
+ InputLabelProps,
470
+ FormHelperTextProps: FormHelperTextProps2,
471
+ required,
472
+ SelectProps: SelectProps2,
473
+ inputProps,
474
+ helperText,
475
+ showCharacterCount = false
476
+ } = _a, rest = __objRest(_a, [
477
+ "InputProps",
478
+ "helpTopicId",
479
+ "InputLabelProps",
480
+ "FormHelperTextProps",
481
+ "required",
482
+ "SelectProps",
483
+ "inputProps",
484
+ "helperText",
485
+ "showCharacterCount"
486
+ ]);
443
487
  const [openDetected, setOpenDetected] = (0, import_react2.useState)(false);
488
+ const [charCount, setCharCount] = (0, import_react2.useState)(0);
489
+ const resolvedProps = (props2) => !props2 || Object.keys(props2).length === 0 ? void 0 : props2;
444
490
  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
445
491
  import_TextField.default,
446
492
  __spreadProps(__spreadValues({}, rest), {
493
+ onChange: (event) => {
494
+ setCharCount(event.target.value.length);
495
+ if (rest.onChange) rest.onChange(event);
496
+ },
497
+ helperText: showCharacterCount ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_mui_layout2.Grid, { container: true, justifyContent: "space-between", children: [
498
+ helperText,
499
+ " ",
500
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { marginLeft: 4 }, children: [
501
+ charCount || 0,
502
+ "/",
503
+ (inputProps == null ? void 0 : inputProps.maxLength) || ((_c = (_b = rest.slotProps) == null ? void 0 : _b.htmlInput) == null ? void 0 : _c.maxLength)
504
+ ] })
505
+ ] }) : helperText,
506
+ slots: { formHelperText: import_mui_form_utils2.FormHelperText },
447
507
  slotProps: {
448
- input: __spreadValues(__spreadValues({}, InputProps2), import_mui_form_utils2.InputPropOverrides),
449
- htmlInput: __spreadValues({ "aria-required": required }, inputProps),
450
- select: __spreadValues(__spreadValues(__spreadValues({}, SelectProps2), import_mui_form_utils2.SelectPropOverrides), (0, import_mui_form_utils2.SelectAccessibilityOverrides)(openDetected, setOpenDetected, SelectProps2 == null ? void 0 : SelectProps2.open)),
451
- inputLabel: __spreadValues({
508
+ input: resolvedProps(__spreadValues(__spreadValues(__spreadValues({}, InputProps2), import_mui_form_utils2.InputPropOverrides), (_d = rest.slotProps) == null ? void 0 : _d.input)),
509
+ htmlInput: resolvedProps(__spreadValues(__spreadValues({ "aria-required": required }, inputProps), (_e = rest.slotProps) == null ? void 0 : _e.htmlInput)),
510
+ select: resolvedProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
511
+ displayEmpty: !!rest.placeholder,
512
+ 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
513
+ }, SelectProps2), import_mui_form_utils2.SelectPropOverrides), (0, import_mui_form_utils2.SelectAccessibilityOverrides)(openDetected, setOpenDetected, SelectProps2 == null ? void 0 : SelectProps2.open)), (_f = rest.slotProps) == null ? void 0 : _f.select)),
514
+ inputLabel: resolvedProps(__spreadValues(__spreadValues({
452
515
  component: import_mui_form_utils2.FormLabel,
453
516
  helpTopicId,
454
517
  required,
455
518
  shrink: true
456
- }, InputLabelProps),
457
- formHelperText: __spreadValues({ component: import_mui_form_utils2.FormHelperText }, FormHelperTextProps2)
519
+ }, InputLabelProps), (_g = rest.slotProps) == null ? void 0 : _g.inputLabel)),
520
+ formHelperText: resolvedProps(__spreadValues(__spreadValues({ component: "div" }, FormHelperTextProps2), (_h = rest.slotProps) == null ? void 0 : _h.formHelperText))
458
521
  },
459
522
  ref
460
523
  })
@@ -499,8 +562,8 @@ var UploadProgressBar = ({ upload, onProgress, onError, onSuccess }) => {
499
562
  upload.onProgress.push(handleOnProgress);
500
563
  upload.onSuccess.push(handleOnSuccess);
501
564
  upload.onError.push(handleOnError);
502
- return errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_mui_layout2.Box, { sx: { display: "flex", flexWrap: "wrap", columnGap: "4px" }, children: [
503
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_mui_list.ListItemText, { slotProps: { primary: { color: "text.error", variant: "body2", component: "div" } }, children: [
565
+ return errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_mui_layout3.Box, { sx: { display: "flex", flexWrap: "wrap", columnGap: "4px" }, children: [
566
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_mui_list2.ListItemText, { slotProps: { primary: { color: "text.error", variant: "body2", component: "div" } }, sx: { wordWrap: "break-word" }, children: [
504
567
  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_mui_icon3.WarningTriangleIcon, { sx: { verticalAlign: "middle", mt: "-2px" } }),
505
568
  " ",
506
569
  errorMessage
@@ -606,7 +669,7 @@ var FileRow = ({
606
669
  if (CustomRow) return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CustomRow, { upload, options, onRemoveFile });
607
670
  if (!upload) return null;
608
671
  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
609
- import_mui_list2.ListItem,
672
+ import_mui_list3.ListItem,
610
673
  {
611
674
  disableGutters: true,
612
675
  secondaryAction: !disableRemove && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
@@ -621,11 +684,11 @@ var FileRow = ({
621
684
  }
622
685
  ),
623
686
  children: [
624
- /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_mui_layout3.Grid, { container: true, spacing: 2, alignItems: "center", justifyContent: "space-between", width: "100%", children: [
625
- /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_layout3.Grid, { size: { xs: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_list2.ListItemIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, {}) }) }),
626
- /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_layout3.Grid, { size: { xs: 3 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_list2.ListItemText, { children: upload.trimFileName(upload.file.name) }) }),
627
- /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_layout3.Grid, { size: { xs: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_list2.ListItemText, { children: formatBytes(upload.file.size) }) }),
628
- /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_layout3.Grid, { size: { xs: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(UploadProgressBar, { upload }) })
687
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_mui_layout4.Grid, { container: true, spacing: 2, alignItems: "center", justifyContent: "space-between", width: "100%", flexWrap: "wrap", children: [
688
+ /* @__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, {}) }) }),
689
+ /* @__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) }) }),
690
+ /* @__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) }) }),
691
+ /* @__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 }) })
629
692
  ] }),
630
693
  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_divider2.Divider, {})
631
694
  ]
@@ -641,7 +704,7 @@ var FileList = ({
641
704
  disableRemove
642
705
  }) => {
643
706
  if (files.length === 0) return null;
644
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_list2.List, { children: files.map((file) => {
707
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_list3.List, { children: files.map((file) => {
645
708
  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
646
709
  FileRow,
647
710
  {
@@ -661,7 +724,7 @@ var FileList = ({
661
724
  var import_react4 = require("react");
662
725
  var import_react_hook_form3 = require("react-hook-form");
663
726
  var import_react_query2 = require("@tanstack/react-query");
664
- var import_mui_layout4 = require("@availity/mui-layout");
727
+ var import_mui_layout5 = require("@availity/mui-layout");
665
728
  var import_mui_typography4 = require("@availity/mui-typography");
666
729
 
667
730
  // src/lib/FileTypesMessage.tsx
@@ -777,13 +840,13 @@ var FileSelector = ({
777
840
  ),
778
841
  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FileTypesMessage, { allowedFileTypes, maxFileSize: maxSize, variant: "caption" }),
779
842
  children
780
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_mui_layout4.Grid, { container: true, rowSpacing: 3, flexDirection: "column", children: [
781
- /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_mui_layout4.Grid, { children: [
843
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_mui_layout5.Grid, { container: true, rowSpacing: 3, flexDirection: "column", children: [
844
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_mui_layout5.Grid, { children: [
782
845
  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(HeaderMessage, { maxFiles, maxSize }),
783
846
  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FileTypesMessage, { allowedFileTypes, variant: "body2" })
784
847
  ] }),
785
- children ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_mui_layout4.Grid, { children }) : null,
786
- /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_mui_layout4.Grid, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
848
+ children ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_mui_layout5.Grid, { children }) : null,
849
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_mui_layout5.Grid, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
787
850
  Dropzone,
788
851
  {
789
852
  name,
package/dist/index.mjs CHANGED
@@ -281,6 +281,7 @@ var Dropzone = ({
281
281
 
282
282
  // src/lib/ErrorAlert.tsx
283
283
  import { Alert, AlertTitle } from "@availity/mui-alert";
284
+ import { List, ListItem } from "@availity/mui-list";
284
285
  import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
285
286
  var codes = {
286
287
  "file-too-large": "File exceeds maximum size",
@@ -291,23 +292,38 @@ var codes = {
291
292
  };
292
293
  var ErrorAlert = ({ errors, fileName, id, onClose }) => {
293
294
  if (errors.length === 0) return null;
294
- return /* @__PURE__ */ jsx3(Fragment3, { children: errors.map((error) => {
295
- return /* @__PURE__ */ jsxs3(Alert, { severity: "error", onClose, children: [
296
- /* @__PURE__ */ jsxs3(AlertTitle, { children: [
297
- codes[error.code] || "Error",
298
- ": ",
299
- fileName
300
- ] }),
301
- error.message
302
- ] }, `${id}-${error.code}`);
303
- }) });
295
+ return /* @__PURE__ */ jsx3(Alert, { severity: "error", onClose, children: errors.length > 1 ? /* @__PURE__ */ jsxs3(Fragment3, { children: [
296
+ /* @__PURE__ */ jsxs3(AlertTitle, { children: [
297
+ "There were ",
298
+ errors.length,
299
+ " error(s) found when uploading ",
300
+ fileName
301
+ ] }),
302
+ /* @__PURE__ */ jsx3(List, { sx: {
303
+ listStyleType: "disc",
304
+ listStylePosition: "inside",
305
+ marginLeft: 1,
306
+ ".MuiListItem-root": {
307
+ display: "list-item"
308
+ }
309
+ }, disablePadding: true, children: /* @__PURE__ */ jsx3(Fragment3, { children: errors.map((error) => {
310
+ return /* @__PURE__ */ jsx3(ListItem, { disableGutters: true, disablePadding: true, divider: false, children: error.message }, `${id}-${error.code}`);
311
+ }) }) })
312
+ ] }) : /* @__PURE__ */ jsxs3(Fragment3, { children: [
313
+ /* @__PURE__ */ jsxs3(AlertTitle, { children: [
314
+ codes[errors[0].code] || "Error",
315
+ ": ",
316
+ fileName
317
+ ] }),
318
+ errors[0].message
319
+ ] }) });
304
320
  };
305
321
 
306
322
  // src/lib/FileList.tsx
307
- import { List, ListItem, ListItemText as ListItemText2, ListItemIcon } from "@availity/mui-list";
323
+ import { List as List2, ListItem as ListItem2, ListItemText as ListItemText2, ListItemIcon } from "@availity/mui-list";
308
324
  import { IconButton as IconButton3 } from "@availity/mui-button";
309
325
  import { DeleteIcon } from "@availity/mui-icon";
310
- import { Grid } from "@availity/mui-layout";
326
+ import { Grid as Grid2 } from "@availity/mui-layout";
311
327
  import { Divider as Divider2 } from "@availity/mui-divider";
312
328
 
313
329
  // src/lib/UploadProgressBar.tsx
@@ -401,24 +417,71 @@ import {
401
417
  SelectAccessibilityOverrides,
402
418
  SelectPropOverrides
403
419
  } from "@availity/mui-form-utils";
404
- import { jsx as jsx9 } from "react/jsx-runtime";
420
+ import { Grid } from "@availity/mui-layout";
421
+ import { styled as styled4 } from "@mui/material/styles";
422
+ import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
423
+ var SelectPlaceholder = styled4("span", {
424
+ name: "MuiTextField",
425
+ slot: "SelectPlaceholder",
426
+ overridesResolver: (props, styles) => styles.avFilled
427
+ })(({ theme }) => ({ opacity: 1, color: theme.palette.grey[400] }));
405
428
  var TextField = forwardRef((props, ref) => {
406
- const _a = props, { InputProps: InputProps2, helpTopicId, InputLabelProps, FormHelperTextProps: FormHelperTextProps2, required, SelectProps: SelectProps2, inputProps } = _a, rest = __objRest(_a, ["InputProps", "helpTopicId", "InputLabelProps", "FormHelperTextProps", "required", "SelectProps", "inputProps"]);
429
+ var _b, _c, _d, _e, _f, _g, _h;
430
+ const _a = props, {
431
+ InputProps: InputProps2,
432
+ helpTopicId,
433
+ InputLabelProps,
434
+ FormHelperTextProps: FormHelperTextProps2,
435
+ required,
436
+ SelectProps: SelectProps2,
437
+ inputProps,
438
+ helperText,
439
+ showCharacterCount = false
440
+ } = _a, rest = __objRest(_a, [
441
+ "InputProps",
442
+ "helpTopicId",
443
+ "InputLabelProps",
444
+ "FormHelperTextProps",
445
+ "required",
446
+ "SelectProps",
447
+ "inputProps",
448
+ "helperText",
449
+ "showCharacterCount"
450
+ ]);
407
451
  const [openDetected, setOpenDetected] = useState(false);
452
+ const [charCount, setCharCount] = useState(0);
453
+ const resolvedProps = (props2) => !props2 || Object.keys(props2).length === 0 ? void 0 : props2;
408
454
  return /* @__PURE__ */ jsx9(
409
455
  MuiTextField,
410
456
  __spreadProps(__spreadValues({}, rest), {
457
+ onChange: (event) => {
458
+ setCharCount(event.target.value.length);
459
+ if (rest.onChange) rest.onChange(event);
460
+ },
461
+ helperText: showCharacterCount ? /* @__PURE__ */ jsxs6(Grid, { container: true, justifyContent: "space-between", children: [
462
+ helperText,
463
+ " ",
464
+ /* @__PURE__ */ jsxs6("span", { style: { marginLeft: 4 }, children: [
465
+ charCount || 0,
466
+ "/",
467
+ (inputProps == null ? void 0 : inputProps.maxLength) || ((_c = (_b = rest.slotProps) == null ? void 0 : _b.htmlInput) == null ? void 0 : _c.maxLength)
468
+ ] })
469
+ ] }) : helperText,
470
+ slots: { formHelperText: FormHelperText },
411
471
  slotProps: {
412
- input: __spreadValues(__spreadValues({}, InputProps2), InputPropOverrides),
413
- htmlInput: __spreadValues({ "aria-required": required }, inputProps),
414
- select: __spreadValues(__spreadValues(__spreadValues({}, SelectProps2), SelectPropOverrides), SelectAccessibilityOverrides(openDetected, setOpenDetected, SelectProps2 == null ? void 0 : SelectProps2.open)),
415
- inputLabel: __spreadValues({
472
+ input: resolvedProps(__spreadValues(__spreadValues(__spreadValues({}, InputProps2), InputPropOverrides), (_d = rest.slotProps) == null ? void 0 : _d.input)),
473
+ htmlInput: resolvedProps(__spreadValues(__spreadValues({ "aria-required": required }, inputProps), (_e = rest.slotProps) == null ? void 0 : _e.htmlInput)),
474
+ select: resolvedProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
475
+ displayEmpty: !!rest.placeholder,
476
+ renderValue: (value) => rest.placeholder && (!value || Array.isArray(value) && value.length === 0) ? /* @__PURE__ */ jsx9(SelectPlaceholder, { className: "MuiSelect-placeholder", children: rest.placeholder }) : value
477
+ }, SelectProps2), SelectPropOverrides), SelectAccessibilityOverrides(openDetected, setOpenDetected, SelectProps2 == null ? void 0 : SelectProps2.open)), (_f = rest.slotProps) == null ? void 0 : _f.select)),
478
+ inputLabel: resolvedProps(__spreadValues(__spreadValues({
416
479
  component: FormLabel,
417
480
  helpTopicId,
418
481
  required,
419
482
  shrink: true
420
- }, InputLabelProps),
421
- formHelperText: __spreadValues({ component: FormHelperText }, FormHelperTextProps2)
483
+ }, InputLabelProps), (_g = rest.slotProps) == null ? void 0 : _g.inputLabel)),
484
+ formHelperText: resolvedProps(__spreadValues(__spreadValues({ component: "div" }, FormHelperTextProps2), (_h = rest.slotProps) == null ? void 0 : _h.formHelperText))
422
485
  },
423
486
  ref
424
487
  })
@@ -426,7 +489,7 @@ var TextField = forwardRef((props, ref) => {
426
489
  });
427
490
 
428
491
  // src/lib/UploadProgressBar.tsx
429
- import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
492
+ import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
430
493
  var UploadProgressBar = ({ upload, onProgress, onError, onSuccess }) => {
431
494
  const [statePercentage, setStatePercentage] = useState2(upload.percentage || 0);
432
495
  const [errorMessage, setErrorMessage] = useState2(upload.errorMessage || "");
@@ -463,15 +526,15 @@ var UploadProgressBar = ({ upload, onProgress, onError, onSuccess }) => {
463
526
  upload.onProgress.push(handleOnProgress);
464
527
  upload.onSuccess.push(handleOnSuccess);
465
528
  upload.onError.push(handleOnError);
466
- return errorMessage ? /* @__PURE__ */ jsxs6(Box2, { sx: { display: "flex", flexWrap: "wrap", columnGap: "4px" }, children: [
467
- /* @__PURE__ */ jsxs6(ListItemText, { slotProps: { primary: { color: "text.error", variant: "body2", component: "div" } }, children: [
529
+ return errorMessage ? /* @__PURE__ */ jsxs7(Box2, { sx: { display: "flex", flexWrap: "wrap", columnGap: "4px" }, children: [
530
+ /* @__PURE__ */ jsxs7(ListItemText, { slotProps: { primary: { color: "text.error", variant: "body2", component: "div" } }, sx: { wordWrap: "break-word" }, children: [
468
531
  /* @__PURE__ */ jsx10(WarningTriangleIcon, { sx: { verticalAlign: "middle", mt: "-2px" } }),
469
532
  " ",
470
533
  errorMessage
471
534
  ] }),
472
- upload.status === "encrypted" && /* @__PURE__ */ jsxs6("div", { className: "pwRequired", children: [
535
+ upload.status === "encrypted" && /* @__PURE__ */ jsxs7("div", { className: "pwRequired", children: [
473
536
  /* @__PURE__ */ jsx10(Button2, { color: "secondary", size: "small", onClick: toggleModal, children: "Enter Password" }),
474
- /* @__PURE__ */ jsx10(Dialog, { open: modalOpen, onClose: toggleModal, children: /* @__PURE__ */ jsxs6("form", { onSubmit: verifyPassword, children: [
537
+ /* @__PURE__ */ jsx10(Dialog, { open: modalOpen, onClose: toggleModal, children: /* @__PURE__ */ jsxs7("form", { onSubmit: verifyPassword, children: [
475
538
  /* @__PURE__ */ jsx10(DialogTitle, { children: "Enter Password" }),
476
539
  /* @__PURE__ */ jsx10(DialogContent, { children: /* @__PURE__ */ jsx10(
477
540
  TextField,
@@ -567,7 +630,7 @@ function useUploadCore(file, options, queryOptions) {
567
630
  }
568
631
 
569
632
  // src/lib/FileList.tsx
570
- import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
633
+ import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
571
634
  var FileRow = ({
572
635
  file,
573
636
  options,
@@ -580,8 +643,8 @@ var FileRow = ({
580
643
  const { data: upload } = useUploadCore(file, options, queryOptions);
581
644
  if (CustomRow) return /* @__PURE__ */ jsx11(CustomRow, { upload, options, onRemoveFile });
582
645
  if (!upload) return null;
583
- return /* @__PURE__ */ jsxs7(
584
- ListItem,
646
+ return /* @__PURE__ */ jsxs8(
647
+ ListItem2,
585
648
  {
586
649
  disableGutters: true,
587
650
  secondaryAction: !disableRemove && /* @__PURE__ */ jsx11(
@@ -596,11 +659,11 @@ var FileRow = ({
596
659
  }
597
660
  ),
598
661
  children: [
599
- /* @__PURE__ */ jsxs7(Grid, { container: true, spacing: 2, alignItems: "center", justifyContent: "space-between", width: "100%", children: [
600
- /* @__PURE__ */ jsx11(Grid, { size: { xs: 1 }, children: /* @__PURE__ */ jsx11(ListItemIcon, { children: /* @__PURE__ */ jsx11(Icon, {}) }) }),
601
- /* @__PURE__ */ jsx11(Grid, { size: { xs: 3 }, children: /* @__PURE__ */ jsx11(ListItemText2, { children: upload.trimFileName(upload.file.name) }) }),
602
- /* @__PURE__ */ jsx11(Grid, { size: { xs: 2 }, children: /* @__PURE__ */ jsx11(ListItemText2, { children: formatBytes(upload.file.size) }) }),
603
- /* @__PURE__ */ jsx11(Grid, { size: { xs: 6 }, children: /* @__PURE__ */ jsx11(UploadProgressBar, { upload }) })
662
+ /* @__PURE__ */ jsxs8(Grid2, { container: true, spacing: 2, alignItems: "center", justifyContent: "space-between", width: "100%", flexWrap: "wrap", children: [
663
+ /* @__PURE__ */ jsx11(Grid2, { size: { xs: "auto" }, children: /* @__PURE__ */ jsx11(ListItemIcon, { sx: { minWidth: "1.5rem" }, children: /* @__PURE__ */ jsx11(Icon, {}) }) }),
664
+ /* @__PURE__ */ jsx11(Grid2, { size: { xs: 4 }, sx: { minWidth: "8rem" }, children: /* @__PURE__ */ jsx11(ListItemText2, { sx: { wordBreak: "break-all" }, children: upload.trimFileName(upload.file.name) }) }),
665
+ /* @__PURE__ */ jsx11(Grid2, { size: { xs: 2 }, sx: { minWidth: "3rem" }, children: /* @__PURE__ */ jsx11(ListItemText2, { sx: { textAlign: "end" }, children: formatBytes(upload.file.size) }) }),
666
+ /* @__PURE__ */ jsx11(Grid2, { size: { xs: "grow" }, sx: { minWidth: "6rem" }, children: /* @__PURE__ */ jsx11(UploadProgressBar, { upload }) })
604
667
  ] }),
605
668
  /* @__PURE__ */ jsx11(Divider2, {})
606
669
  ]
@@ -616,7 +679,7 @@ var FileList = ({
616
679
  disableRemove
617
680
  }) => {
618
681
  if (files.length === 0) return null;
619
- return /* @__PURE__ */ jsx11(List, { children: files.map((file) => {
682
+ return /* @__PURE__ */ jsx11(List2, { children: files.map((file) => {
620
683
  return /* @__PURE__ */ jsx11(
621
684
  FileRow,
622
685
  {
@@ -636,12 +699,12 @@ var FileList = ({
636
699
  import { useState as useState3 } from "react";
637
700
  import { useFormContext as useFormContext2 } from "react-hook-form";
638
701
  import { useQueryClient } from "@tanstack/react-query";
639
- import { Grid as Grid2 } from "@availity/mui-layout";
702
+ import { Grid as Grid3 } from "@availity/mui-layout";
640
703
  import { Typography as Typography4 } from "@availity/mui-typography";
641
704
 
642
705
  // src/lib/FileTypesMessage.tsx
643
706
  import { Typography as Typography2 } from "@availity/mui-typography";
644
- import { jsxs as jsxs8 } from "react/jsx-runtime";
707
+ import { jsxs as jsxs9 } from "react/jsx-runtime";
645
708
  var FileTypesMessage = ({
646
709
  allowedFileTypes = [],
647
710
  maxFileSize,
@@ -649,7 +712,7 @@ var FileTypesMessage = ({
649
712
  }) => {
650
713
  const fileSizeMsg = typeof maxFileSize === "number" ? `Maximum file size is ${formatBytes(maxFileSize)}. ` : null;
651
714
  const fileTypesMsg = allowedFileTypes.length > 0 ? `Supported file types include: ${allowedFileTypes.join(", ")}` : "All file types allowed.";
652
- return /* @__PURE__ */ jsxs8(Typography2, { variant, children: [
715
+ return /* @__PURE__ */ jsxs9(Typography2, { variant, children: [
653
716
  fileSizeMsg,
654
717
  fileTypesMsg
655
718
  ] });
@@ -657,9 +720,9 @@ var FileTypesMessage = ({
657
720
 
658
721
  // src/lib/HeaderMessage.tsx
659
722
  import { Typography as Typography3 } from "@availity/mui-typography";
660
- import { jsxs as jsxs9 } from "react/jsx-runtime";
723
+ import { jsxs as jsxs10 } from "react/jsx-runtime";
661
724
  var HeaderMessage = ({ maxFiles, maxSize }) => {
662
- return /* @__PURE__ */ jsxs9(Typography3, { variant: "h6", children: [
725
+ return /* @__PURE__ */ jsxs10(Typography3, { variant: "h6", children: [
663
726
  "Attach up to ",
664
727
  maxFiles,
665
728
  " file(s), with a maximum individual size of ",
@@ -668,7 +731,7 @@ var HeaderMessage = ({ maxFiles, maxSize }) => {
668
731
  };
669
732
 
670
733
  // src/lib/FileSelector.tsx
671
- import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
734
+ import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
672
735
  var CLOUD_URL = "/cloud/web/appl/vault/upload/v1/resumable";
673
736
  var FileSelector = ({
674
737
  name,
@@ -730,8 +793,8 @@ var FileSelector = ({
730
793
  const rejections = fileRejections.filter((value) => value.id !== id);
731
794
  setFileRejections(rejections);
732
795
  };
733
- return /* @__PURE__ */ jsxs10(Fragment4, { children: [
734
- enableDropArea ? /* @__PURE__ */ jsxs10(Fragment4, { children: [
796
+ return /* @__PURE__ */ jsxs11(Fragment4, { children: [
797
+ enableDropArea ? /* @__PURE__ */ jsxs11(Fragment4, { children: [
735
798
  label ? /* @__PURE__ */ jsx12(Typography4, { marginBottom: "4px", children: label }) : null,
736
799
  /* @__PURE__ */ jsx12(
737
800
  Dropzone,
@@ -752,13 +815,13 @@ var FileSelector = ({
752
815
  ),
753
816
  /* @__PURE__ */ jsx12(FileTypesMessage, { allowedFileTypes, maxFileSize: maxSize, variant: "caption" }),
754
817
  children
755
- ] }) : /* @__PURE__ */ jsxs10(Grid2, { container: true, rowSpacing: 3, flexDirection: "column", children: [
756
- /* @__PURE__ */ jsxs10(Grid2, { children: [
818
+ ] }) : /* @__PURE__ */ jsxs11(Grid3, { container: true, rowSpacing: 3, flexDirection: "column", children: [
819
+ /* @__PURE__ */ jsxs11(Grid3, { children: [
757
820
  /* @__PURE__ */ jsx12(HeaderMessage, { maxFiles, maxSize }),
758
821
  /* @__PURE__ */ jsx12(FileTypesMessage, { allowedFileTypes, variant: "body2" })
759
822
  ] }),
760
- children ? /* @__PURE__ */ jsx12(Grid2, { children }) : null,
761
- /* @__PURE__ */ jsx12(Grid2, { children: /* @__PURE__ */ jsx12(
823
+ children ? /* @__PURE__ */ jsx12(Grid3, { children }) : null,
824
+ /* @__PURE__ */ jsx12(Grid3, { children: /* @__PURE__ */ jsx12(
762
825
  Dropzone,
763
826
  {
764
827
  name,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@availity/mui-file-selector",
3
- "version": "1.2.0",
3
+ "version": "1.3.0",
4
4
  "description": "Availity MUI file-selector Component - part of the @availity/element design system",
5
5
  "keywords": [
6
6
  "react",
@@ -44,7 +44,7 @@
44
44
  "@availity/mui-alert": "^1.0.1",
45
45
  "@availity/mui-button": "^1.0.1",
46
46
  "@availity/mui-divider": "^1.0.1",
47
- "@availity/mui-form-utils": "^1.0.1",
47
+ "@availity/mui-form-utils": "^1.1.0",
48
48
  "@availity/mui-icon": "^1.0.1",
49
49
  "@availity/mui-layout": "^1.0.1",
50
50
  "@availity/mui-list": "^1.0.1",
package/src/lib/ErrorAlert.tsx CHANGED
@@ -1,4 +1,5 @@
1
1
  import { Alert, AlertTitle } from '@availity/mui-alert';
2
+ import { List, ListItem } from '@availity/mui-list';
2
3
  import type { FileRejection } from 'react-dropzone';
3
4
 
4
5
  const codes: Record<string, string> = {
@@ -30,17 +31,39 @@ export const ErrorAlert = ({ errors, fileName, id, onClose }: ErrorAlertProps) =
30
31
  if (errors.length === 0) return null;
31
32
 
32
33
  return (
33
- <>
34
- {errors.map((error) => {
35
- return (
36
- <Alert severity="error" onClose={onClose} key={`${id}-${error.code}`}>
37
- <AlertTitle>
38
- {codes[error.code] || 'Error'}: {fileName}
39
- </AlertTitle>
40
- {error.message}
41
- </Alert>
42
- );
43
- })}
44
- </>
34
+ <Alert severity="error" onClose={onClose}>
35
+ {errors.length > 1 ?
36
+ <>
37
+ <AlertTitle>
38
+ There were {errors.length} error(s) found when uploading {fileName}
39
+ </AlertTitle>
40
+ <List sx={{
41
+ listStyleType: 'disc',
42
+ listStylePosition: 'inside',
43
+ marginLeft: 1,
44
+ '.MuiListItem-root': {
45
+ display: 'list-item'
46
+ }
47
+ }} disablePadding>
48
+ <>
49
+ {errors.map((error) => {
50
+ return (
51
+ <ListItem disableGutters disablePadding divider={false} key={`${id}-${error.code}`}>
52
+ {error.message}
53
+ </ListItem>
54
+ );
55
+ })}
56
+ </>
57
+ </List>
58
+ </>
59
+ :
60
+ <>
61
+ <AlertTitle>
62
+ {codes[errors[0].code] || 'Error'}: {fileName}
63
+ </AlertTitle>
64
+ {errors[0].message}
65
+ </>
66
+ }
67
+ </Alert>
45
68
  );
46
69
  };
package/src/lib/FileList.tsx CHANGED
@@ -74,19 +74,19 @@ export const FileRow = ({
74
74
  )
75
75
  }
76
76
  >
77
- <Grid container spacing={2} alignItems="center" justifyContent="space-between" width="100%">
78
- <Grid size={{ xs: 1 }}>
79
- <ListItemIcon>
77
+ <Grid container spacing={2} alignItems="center" justifyContent="space-between" width="100%" flexWrap="wrap">
78
+ <Grid size={{ xs: "auto" }}>
79
+ <ListItemIcon sx={{minWidth: '1.5rem'}}>
80
80
  <Icon />
81
81
  </ListItemIcon>
82
82
  </Grid>
83
- <Grid size={{ xs: 3 }}>
84
- <ListItemText>{upload.trimFileName(upload.file.name)}</ListItemText>
83
+ <Grid size={{ xs: 4 }} sx={{minWidth: '8rem'}}>
84
+ <ListItemText sx={{wordBreak: 'break-all'}}>{upload.trimFileName(upload.file.name)}</ListItemText>
85
85
  </Grid>
86
- <Grid size={{ xs: 2 }}>
87
- <ListItemText>{formatBytes(upload.file.size)}</ListItemText>
86
+ <Grid size={{ xs: 2 }} sx={{minWidth: '3rem'}}>
87
+ <ListItemText sx={{textAlign: 'end'}}>{formatBytes(upload.file.size)}</ListItemText>
88
88
  </Grid>
89
- <Grid size={{ xs: 6 }}>
89
+ <Grid size={{ xs: 'grow' }} sx={{minWidth: '6rem'}}>
90
90
  <UploadProgressBar upload={upload} />
91
91
  </Grid>
92
92
  </Grid>
package/src/lib/UploadProgressBar.tsx CHANGED
@@ -77,7 +77,7 @@ export const UploadProgressBar = ({ upload, onProgress, onError, onSuccess }: Up
77
77
 
78
78
  return errorMessage ? (
79
79
  <Box sx={{display: 'flex', flexWrap: 'wrap', columnGap: '4px'}}>
80
- <ListItemText slotProps={{primary: { color: 'text.error', variant: 'body2', component: 'div' }}}>
80
+ <ListItemText slotProps={{primary: { color: 'text.error', variant: 'body2', component: 'div' }}} sx={{wordWrap: 'break-word'}}>
81
81
  <WarningTriangleIcon sx={{verticalAlign: 'middle', mt: '-2px'}}/> {errorMessage}
82
82
  </ListItemText>
83
83
  {upload.status === 'encrypted' && (