@availity/mui-file-selector 1.2.0 → 1.2.1

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 (4) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/index.js +67 -20
  3. package/dist/index.mjs +80 -33
  4. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -2,6 +2,13 @@
2
2
 
3
3
  This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
4
4
 
5
+ ## [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)
6
+
7
+ ### Dependency Updates
8
+
9
+ * `mui-form-utils` updated to version `1.2.0`
10
+ * `mui-dialog` updated to version `1.2.0`
11
+ * `mui-textfield` updated to version `1.2.0`
5
12
  ## [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
13
 
7
14
 
package/dist/index.js CHANGED
@@ -349,7 +349,7 @@ var ErrorAlert = ({ errors, fileName, id, onClose }) => {
349
349
  var import_mui_list2 = require("@availity/mui-list");
350
350
  var import_mui_button4 = require("@availity/mui-button");
351
351
  var import_mui_icon5 = require("@availity/mui-icon");
352
- var import_mui_layout3 = require("@availity/mui-layout");
352
+ var import_mui_layout4 = require("@availity/mui-layout");
353
353
  var import_mui_divider2 = require("@availity/mui-divider");
354
354
 
355
355
  // src/lib/UploadProgressBar.tsx
@@ -429,7 +429,7 @@ var DialogTitle = (_a) => {
429
429
  // src/lib/UploadProgressBar.tsx
430
430
  var import_mui_form_utils3 = require("@availity/mui-form-utils");
431
431
  var import_mui_icon3 = require("@availity/mui-icon");
432
- var import_mui_layout2 = require("@availity/mui-layout");
432
+ var import_mui_layout3 = require("@availity/mui-layout");
433
433
  var import_mui_list = require("@availity/mui-list");
434
434
  var import_mui_progress = require("@availity/mui-progress");
435
435
 
@@ -437,24 +437,71 @@ var import_mui_progress = require("@availity/mui-progress");
437
437
  var import_react2 = require("react");
438
438
  var import_TextField = __toESM(require("@mui/material/TextField"));
439
439
  var import_mui_form_utils2 = require("@availity/mui-form-utils");
440
+ var import_mui_layout2 = require("@availity/mui-layout");
441
+ var import_styles4 = require("@mui/material/styles");
440
442
  var import_jsx_runtime9 = require("react/jsx-runtime");
443
+ var SelectPlaceholder = (0, import_styles4.styled)("span", {
444
+ name: "MuiTextField",
445
+ slot: "SelectPlaceholder",
446
+ overridesResolver: (props, styles) => styles.avFilled
447
+ })(({ theme }) => ({ opacity: 1, color: theme.palette.grey[400] }));
441
448
  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"]);
449
+ var _b, _c, _d, _e, _f, _g, _h;
450
+ const _a = props, {
451
+ InputProps: InputProps2,
452
+ helpTopicId,
453
+ InputLabelProps,
454
+ FormHelperTextProps: FormHelperTextProps2,
455
+ required,
456
+ SelectProps: SelectProps2,
457
+ inputProps,
458
+ helperText,
459
+ showCharacterCount = false
460
+ } = _a, rest = __objRest(_a, [
461
+ "InputProps",
462
+ "helpTopicId",
463
+ "InputLabelProps",
464
+ "FormHelperTextProps",
465
+ "required",
466
+ "SelectProps",
467
+ "inputProps",
468
+ "helperText",
469
+ "showCharacterCount"
470
+ ]);
443
471
  const [openDetected, setOpenDetected] = (0, import_react2.useState)(false);
472
+ const [charCount, setCharCount] = (0, import_react2.useState)(0);
473
+ const resolvedProps = (props2) => !props2 || Object.keys(props2).length === 0 ? void 0 : props2;
444
474
  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
445
475
  import_TextField.default,
446
476
  __spreadProps(__spreadValues({}, rest), {
477
+ onChange: (event) => {
478
+ setCharCount(event.target.value.length);
479
+ if (rest.onChange) rest.onChange(event);
480
+ },
481
+ helperText: showCharacterCount ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_mui_layout2.Grid, { container: true, justifyContent: "space-between", children: [
482
+ helperText,
483
+ " ",
484
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { marginLeft: 4 }, children: [
485
+ charCount || 0,
486
+ "/",
487
+ (inputProps == null ? void 0 : inputProps.maxLength) || ((_c = (_b = rest.slotProps) == null ? void 0 : _b.htmlInput) == null ? void 0 : _c.maxLength)
488
+ ] })
489
+ ] }) : helperText,
490
+ slots: { formHelperText: import_mui_form_utils2.FormHelperText },
447
491
  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({
492
+ input: resolvedProps(__spreadValues(__spreadValues(__spreadValues({}, InputProps2), import_mui_form_utils2.InputPropOverrides), (_d = rest.slotProps) == null ? void 0 : _d.input)),
493
+ htmlInput: resolvedProps(__spreadValues(__spreadValues({ "aria-required": required }, inputProps), (_e = rest.slotProps) == null ? void 0 : _e.htmlInput)),
494
+ select: resolvedProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
495
+ displayEmpty: !!rest.placeholder,
496
+ 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
497
+ }, 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)),
498
+ inputLabel: resolvedProps(__spreadValues(__spreadValues({
452
499
  component: import_mui_form_utils2.FormLabel,
453
500
  helpTopicId,
454
501
  required,
455
502
  shrink: true
456
- }, InputLabelProps),
457
- formHelperText: __spreadValues({ component: import_mui_form_utils2.FormHelperText }, FormHelperTextProps2)
503
+ }, InputLabelProps), (_g = rest.slotProps) == null ? void 0 : _g.inputLabel)),
504
+ formHelperText: resolvedProps(__spreadValues(__spreadValues({ component: "div" }, FormHelperTextProps2), (_h = rest.slotProps) == null ? void 0 : _h.formHelperText))
458
505
  },
459
506
  ref
460
507
  })
@@ -499,7 +546,7 @@ var UploadProgressBar = ({ upload, onProgress, onError, onSuccess }) => {
499
546
  upload.onProgress.push(handleOnProgress);
500
547
  upload.onSuccess.push(handleOnSuccess);
501
548
  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: [
549
+ return errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_mui_layout3.Box, { sx: { display: "flex", flexWrap: "wrap", columnGap: "4px" }, children: [
503
550
  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_mui_list.ListItemText, { slotProps: { primary: { color: "text.error", variant: "body2", component: "div" } }, children: [
504
551
  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_mui_icon3.WarningTriangleIcon, { sx: { verticalAlign: "middle", mt: "-2px" } }),
505
552
  " ",
@@ -621,11 +668,11 @@ var FileRow = ({
621
668
  }
622
669
  ),
623
670
  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 }) })
671
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_mui_layout4.Grid, { container: true, spacing: 2, alignItems: "center", justifyContent: "space-between", width: "100%", children: [
672
+ /* @__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, {}) }) }),
673
+ /* @__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) }) }),
674
+ /* @__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) }) }),
675
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_layout4.Grid, { size: { xs: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(UploadProgressBar, { upload }) })
629
676
  ] }),
630
677
  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_divider2.Divider, {})
631
678
  ]
@@ -661,7 +708,7 @@ var FileList = ({
661
708
  var import_react4 = require("react");
662
709
  var import_react_hook_form3 = require("react-hook-form");
663
710
  var import_react_query2 = require("@tanstack/react-query");
664
- var import_mui_layout4 = require("@availity/mui-layout");
711
+ var import_mui_layout5 = require("@availity/mui-layout");
665
712
  var import_mui_typography4 = require("@availity/mui-typography");
666
713
 
667
714
  // src/lib/FileTypesMessage.tsx
@@ -777,13 +824,13 @@ var FileSelector = ({
777
824
  ),
778
825
  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FileTypesMessage, { allowedFileTypes, maxFileSize: maxSize, variant: "caption" }),
779
826
  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: [
827
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_mui_layout5.Grid, { container: true, rowSpacing: 3, flexDirection: "column", children: [
828
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_mui_layout5.Grid, { children: [
782
829
  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(HeaderMessage, { maxFiles, maxSize }),
783
830
  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FileTypesMessage, { allowedFileTypes, variant: "body2" })
784
831
  ] }),
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)(
832
+ children ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_mui_layout5.Grid, { children }) : null,
833
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_mui_layout5.Grid, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
787
834
  Dropzone,
788
835
  {
789
836
  name,
package/dist/index.mjs CHANGED
@@ -307,7 +307,7 @@ var ErrorAlert = ({ errors, fileName, id, onClose }) => {
307
307
  import { List, ListItem, ListItemText as ListItemText2, ListItemIcon } from "@availity/mui-list";
308
308
  import { IconButton as IconButton3 } from "@availity/mui-button";
309
309
  import { DeleteIcon } from "@availity/mui-icon";
310
- import { Grid } from "@availity/mui-layout";
310
+ import { Grid as Grid2 } from "@availity/mui-layout";
311
311
  import { Divider as Divider2 } from "@availity/mui-divider";
312
312
 
313
313
  // src/lib/UploadProgressBar.tsx
@@ -401,24 +401,71 @@ import {
401
401
  SelectAccessibilityOverrides,
402
402
  SelectPropOverrides
403
403
  } from "@availity/mui-form-utils";
404
- import { jsx as jsx9 } from "react/jsx-runtime";
404
+ import { Grid } from "@availity/mui-layout";
405
+ import { styled as styled4 } from "@mui/material/styles";
406
+ import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
407
+ var SelectPlaceholder = styled4("span", {
408
+ name: "MuiTextField",
409
+ slot: "SelectPlaceholder",
410
+ overridesResolver: (props, styles) => styles.avFilled
411
+ })(({ theme }) => ({ opacity: 1, color: theme.palette.grey[400] }));
405
412
  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"]);
413
+ var _b, _c, _d, _e, _f, _g, _h;
414
+ const _a = props, {
415
+ InputProps: InputProps2,
416
+ helpTopicId,
417
+ InputLabelProps,
418
+ FormHelperTextProps: FormHelperTextProps2,
419
+ required,
420
+ SelectProps: SelectProps2,
421
+ inputProps,
422
+ helperText,
423
+ showCharacterCount = false
424
+ } = _a, rest = __objRest(_a, [
425
+ "InputProps",
426
+ "helpTopicId",
427
+ "InputLabelProps",
428
+ "FormHelperTextProps",
429
+ "required",
430
+ "SelectProps",
431
+ "inputProps",
432
+ "helperText",
433
+ "showCharacterCount"
434
+ ]);
407
435
  const [openDetected, setOpenDetected] = useState(false);
436
+ const [charCount, setCharCount] = useState(0);
437
+ const resolvedProps = (props2) => !props2 || Object.keys(props2).length === 0 ? void 0 : props2;
408
438
  return /* @__PURE__ */ jsx9(
409
439
  MuiTextField,
410
440
  __spreadProps(__spreadValues({}, rest), {
441
+ onChange: (event) => {
442
+ setCharCount(event.target.value.length);
443
+ if (rest.onChange) rest.onChange(event);
444
+ },
445
+ helperText: showCharacterCount ? /* @__PURE__ */ jsxs6(Grid, { container: true, justifyContent: "space-between", children: [
446
+ helperText,
447
+ " ",
448
+ /* @__PURE__ */ jsxs6("span", { style: { marginLeft: 4 }, children: [
449
+ charCount || 0,
450
+ "/",
451
+ (inputProps == null ? void 0 : inputProps.maxLength) || ((_c = (_b = rest.slotProps) == null ? void 0 : _b.htmlInput) == null ? void 0 : _c.maxLength)
452
+ ] })
453
+ ] }) : helperText,
454
+ slots: { formHelperText: FormHelperText },
411
455
  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({
456
+ input: resolvedProps(__spreadValues(__spreadValues(__spreadValues({}, InputProps2), InputPropOverrides), (_d = rest.slotProps) == null ? void 0 : _d.input)),
457
+ htmlInput: resolvedProps(__spreadValues(__spreadValues({ "aria-required": required }, inputProps), (_e = rest.slotProps) == null ? void 0 : _e.htmlInput)),
458
+ select: resolvedProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
459
+ displayEmpty: !!rest.placeholder,
460
+ renderValue: (value) => rest.placeholder && (!value || Array.isArray(value) && value.length === 0) ? /* @__PURE__ */ jsx9(SelectPlaceholder, { className: "MuiSelect-placeholder", children: rest.placeholder }) : value
461
+ }, SelectProps2), SelectPropOverrides), SelectAccessibilityOverrides(openDetected, setOpenDetected, SelectProps2 == null ? void 0 : SelectProps2.open)), (_f = rest.slotProps) == null ? void 0 : _f.select)),
462
+ inputLabel: resolvedProps(__spreadValues(__spreadValues({
416
463
  component: FormLabel,
417
464
  helpTopicId,
418
465
  required,
419
466
  shrink: true
420
- }, InputLabelProps),
421
- formHelperText: __spreadValues({ component: FormHelperText }, FormHelperTextProps2)
467
+ }, InputLabelProps), (_g = rest.slotProps) == null ? void 0 : _g.inputLabel)),
468
+ formHelperText: resolvedProps(__spreadValues(__spreadValues({ component: "div" }, FormHelperTextProps2), (_h = rest.slotProps) == null ? void 0 : _h.formHelperText))
422
469
  },
423
470
  ref
424
471
  })
@@ -426,7 +473,7 @@ var TextField = forwardRef((props, ref) => {
426
473
  });
427
474
 
428
475
  // src/lib/UploadProgressBar.tsx
429
- import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
476
+ import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
430
477
  var UploadProgressBar = ({ upload, onProgress, onError, onSuccess }) => {
431
478
  const [statePercentage, setStatePercentage] = useState2(upload.percentage || 0);
432
479
  const [errorMessage, setErrorMessage] = useState2(upload.errorMessage || "");
@@ -463,15 +510,15 @@ var UploadProgressBar = ({ upload, onProgress, onError, onSuccess }) => {
463
510
  upload.onProgress.push(handleOnProgress);
464
511
  upload.onSuccess.push(handleOnSuccess);
465
512
  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: [
513
+ return errorMessage ? /* @__PURE__ */ jsxs7(Box2, { sx: { display: "flex", flexWrap: "wrap", columnGap: "4px" }, children: [
514
+ /* @__PURE__ */ jsxs7(ListItemText, { slotProps: { primary: { color: "text.error", variant: "body2", component: "div" } }, children: [
468
515
  /* @__PURE__ */ jsx10(WarningTriangleIcon, { sx: { verticalAlign: "middle", mt: "-2px" } }),
469
516
  " ",
470
517
  errorMessage
471
518
  ] }),
472
- upload.status === "encrypted" && /* @__PURE__ */ jsxs6("div", { className: "pwRequired", children: [
519
+ upload.status === "encrypted" && /* @__PURE__ */ jsxs7("div", { className: "pwRequired", children: [
473
520
  /* @__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: [
521
+ /* @__PURE__ */ jsx10(Dialog, { open: modalOpen, onClose: toggleModal, children: /* @__PURE__ */ jsxs7("form", { onSubmit: verifyPassword, children: [
475
522
  /* @__PURE__ */ jsx10(DialogTitle, { children: "Enter Password" }),
476
523
  /* @__PURE__ */ jsx10(DialogContent, { children: /* @__PURE__ */ jsx10(
477
524
  TextField,
@@ -567,7 +614,7 @@ function useUploadCore(file, options, queryOptions) {
567
614
  }
568
615
 
569
616
  // src/lib/FileList.tsx
570
- import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
617
+ import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
571
618
  var FileRow = ({
572
619
  file,
573
620
  options,
@@ -580,7 +627,7 @@ var FileRow = ({
580
627
  const { data: upload } = useUploadCore(file, options, queryOptions);
581
628
  if (CustomRow) return /* @__PURE__ */ jsx11(CustomRow, { upload, options, onRemoveFile });
582
629
  if (!upload) return null;
583
- return /* @__PURE__ */ jsxs7(
630
+ return /* @__PURE__ */ jsxs8(
584
631
  ListItem,
585
632
  {
586
633
  disableGutters: true,
@@ -596,11 +643,11 @@ var FileRow = ({
596
643
  }
597
644
  ),
598
645
  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 }) })
646
+ /* @__PURE__ */ jsxs8(Grid2, { container: true, spacing: 2, alignItems: "center", justifyContent: "space-between", width: "100%", children: [
647
+ /* @__PURE__ */ jsx11(Grid2, { size: { xs: 1 }, children: /* @__PURE__ */ jsx11(ListItemIcon, { children: /* @__PURE__ */ jsx11(Icon, {}) }) }),
648
+ /* @__PURE__ */ jsx11(Grid2, { size: { xs: 3 }, children: /* @__PURE__ */ jsx11(ListItemText2, { children: upload.trimFileName(upload.file.name) }) }),
649
+ /* @__PURE__ */ jsx11(Grid2, { size: { xs: 2 }, children: /* @__PURE__ */ jsx11(ListItemText2, { children: formatBytes(upload.file.size) }) }),
650
+ /* @__PURE__ */ jsx11(Grid2, { size: { xs: 6 }, children: /* @__PURE__ */ jsx11(UploadProgressBar, { upload }) })
604
651
  ] }),
605
652
  /* @__PURE__ */ jsx11(Divider2, {})
606
653
  ]
@@ -636,12 +683,12 @@ var FileList = ({
636
683
  import { useState as useState3 } from "react";
637
684
  import { useFormContext as useFormContext2 } from "react-hook-form";
638
685
  import { useQueryClient } from "@tanstack/react-query";
639
- import { Grid as Grid2 } from "@availity/mui-layout";
686
+ import { Grid as Grid3 } from "@availity/mui-layout";
640
687
  import { Typography as Typography4 } from "@availity/mui-typography";
641
688
 
642
689
  // src/lib/FileTypesMessage.tsx
643
690
  import { Typography as Typography2 } from "@availity/mui-typography";
644
- import { jsxs as jsxs8 } from "react/jsx-runtime";
691
+ import { jsxs as jsxs9 } from "react/jsx-runtime";
645
692
  var FileTypesMessage = ({
646
693
  allowedFileTypes = [],
647
694
  maxFileSize,
@@ -649,7 +696,7 @@ var FileTypesMessage = ({
649
696
  }) => {
650
697
  const fileSizeMsg = typeof maxFileSize === "number" ? `Maximum file size is ${formatBytes(maxFileSize)}. ` : null;
651
698
  const fileTypesMsg = allowedFileTypes.length > 0 ? `Supported file types include: ${allowedFileTypes.join(", ")}` : "All file types allowed.";
652
- return /* @__PURE__ */ jsxs8(Typography2, { variant, children: [
699
+ return /* @__PURE__ */ jsxs9(Typography2, { variant, children: [
653
700
  fileSizeMsg,
654
701
  fileTypesMsg
655
702
  ] });
@@ -657,9 +704,9 @@ var FileTypesMessage = ({
657
704
 
658
705
  // src/lib/HeaderMessage.tsx
659
706
  import { Typography as Typography3 } from "@availity/mui-typography";
660
- import { jsxs as jsxs9 } from "react/jsx-runtime";
707
+ import { jsxs as jsxs10 } from "react/jsx-runtime";
661
708
  var HeaderMessage = ({ maxFiles, maxSize }) => {
662
- return /* @__PURE__ */ jsxs9(Typography3, { variant: "h6", children: [
709
+ return /* @__PURE__ */ jsxs10(Typography3, { variant: "h6", children: [
663
710
  "Attach up to ",
664
711
  maxFiles,
665
712
  " file(s), with a maximum individual size of ",
@@ -668,7 +715,7 @@ var HeaderMessage = ({ maxFiles, maxSize }) => {
668
715
  };
669
716
 
670
717
  // src/lib/FileSelector.tsx
671
- import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
718
+ import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
672
719
  var CLOUD_URL = "/cloud/web/appl/vault/upload/v1/resumable";
673
720
  var FileSelector = ({
674
721
  name,
@@ -730,8 +777,8 @@ var FileSelector = ({
730
777
  const rejections = fileRejections.filter((value) => value.id !== id);
731
778
  setFileRejections(rejections);
732
779
  };
733
- return /* @__PURE__ */ jsxs10(Fragment4, { children: [
734
- enableDropArea ? /* @__PURE__ */ jsxs10(Fragment4, { children: [
780
+ return /* @__PURE__ */ jsxs11(Fragment4, { children: [
781
+ enableDropArea ? /* @__PURE__ */ jsxs11(Fragment4, { children: [
735
782
  label ? /* @__PURE__ */ jsx12(Typography4, { marginBottom: "4px", children: label }) : null,
736
783
  /* @__PURE__ */ jsx12(
737
784
  Dropzone,
@@ -752,13 +799,13 @@ var FileSelector = ({
752
799
  ),
753
800
  /* @__PURE__ */ jsx12(FileTypesMessage, { allowedFileTypes, maxFileSize: maxSize, variant: "caption" }),
754
801
  children
755
- ] }) : /* @__PURE__ */ jsxs10(Grid2, { container: true, rowSpacing: 3, flexDirection: "column", children: [
756
- /* @__PURE__ */ jsxs10(Grid2, { children: [
802
+ ] }) : /* @__PURE__ */ jsxs11(Grid3, { container: true, rowSpacing: 3, flexDirection: "column", children: [
803
+ /* @__PURE__ */ jsxs11(Grid3, { children: [
757
804
  /* @__PURE__ */ jsx12(HeaderMessage, { maxFiles, maxSize }),
758
805
  /* @__PURE__ */ jsx12(FileTypesMessage, { allowedFileTypes, variant: "body2" })
759
806
  ] }),
760
- children ? /* @__PURE__ */ jsx12(Grid2, { children }) : null,
761
- /* @__PURE__ */ jsx12(Grid2, { children: /* @__PURE__ */ jsx12(
807
+ children ? /* @__PURE__ */ jsx12(Grid3, { children }) : null,
808
+ /* @__PURE__ */ jsx12(Grid3, { children: /* @__PURE__ */ jsx12(
762
809
  Dropzone,
763
810
  {
764
811
  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.2.1",
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",