@availity/mui-file-selector 0.2.0 → 0.2.2

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.2.2](https://github.com/Availity/element/compare/@availity/mui-file-selector@0.2.1...@availity/mui-file-selector@0.2.2) (2025-01-02)
+
+## [0.2.1](https://github.com/Availity/element/compare/@availity/mui-file-selector@0.2.0...@availity/mui-file-selector@0.2.1) (2024-12-23)
+
+### Dependency Updates
+
+* `mui-form-utils` updated to version `0.2.0`
 ## [0.2.0](https://github.com/Availity/element/compare/@availity/mui-file-selector@0.1.3...@availity/mui-file-selector@0.2.0) (2024-12-16)
 
 

package/dist/index.d.mts

@@ -1,5 +1,110 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import Upload from '@availity/upload-core';
+import { ReactNode, ChangeEvent } from 'react';
+import Upload, { UploadOptions } from '@availity/upload-core';
+
+type FileSelectorProps = {
+    /**
+     * Name attribute for the form field. Used by react-hook-form for form state management
+     * and must be unique within the form context
+     */
+    name: string;
+    /**
+     * The ID of the bucket where files will be uploaded
+     */
+    bucketId: string;
+    /**
+     * The customer ID associated with the upload
+     */
+    customerId: string;
+    /**
+     * Regular expression pattern of allowed characters in file names
+     * @example "a-zA-Z0-9-_."
+     */
+    allowedFileNameCharacters?: string;
+    /**
+     * List of allowed file extensions. Each extension must start with a dot
+     * @example ['.pdf', '.doc', '.docx']
+     * @default []
+     */
+    allowedFileTypes?: `.${string}`[];
+    /**
+     * Optional content to render below the file upload area
+     */
+    children?: ReactNode;
+    /**
+     * Client identifier used for upload authentication
+     */
+    clientId: string;
+    /**
+     * Whether the file selector is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Custom endpoint URL for file uploads. If not provided, default endpoint will be used
+     */
+    endpoint?: string;
+    /**
+     * Whether to use the cloud upload endpoint
+     * When true, uses '/cloud/web/appl/vault/upload/v1/resumable'
+     */
+    isCloud?: boolean;
+    /**
+     * Label text or element displayed above the upload area
+     * @default 'Upload file'
+     */
+    label?: ReactNode;
+    /**
+     * Maximum number of files that can be uploaded simultaneously
+     */
+    maxFiles?: number;
+    /**
+     * Maximum file size allowed per file in bytes
+     * Use Kibi or Mibibytes. eg: 1kb = 1024 bytes; 1mb = 1024kb
+     */
+    maxSize: number;
+    /**
+     * Whether multiple file selection is allowed
+     * @default true
+     */
+    multiple?: boolean;
+    /**
+     * Callback fired when files are selected
+     * @param event - The change event containing the selected file(s)
+     */
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Callback fired when the form is submitted
+     * @param uploads - Array of Upload instances for the submitted files
+     * @param values - Object containing the form values, with files indexed by the name prop
+     */
+    onSubmit?: (uploads: Upload[], values: Record<string, File[]>) => void;
+    /**
+     * Callback fired when a file is successfully uploaded
+     */
+    onSuccess?: UploadOptions['onSuccess'];
+    /**
+     * Callback fired when an error occurs during upload
+     */
+    onError?: UploadOptions['onError'];
+    /**
+     * Array of functions to execute before file upload begins.
+     * Each function should return a boolean indicating whether to proceed with the upload.
+     * @default []
+     */
+    onFilePreUpload?: (() => boolean)[];
+    /**
+     * Callback fired when a file is removed from the upload list
+     * @param files - Array of remaining files
+     * @param removedUploadId - ID of the removed upload
+     */
+    onUploadRemove?: (files: File[], removedUploadId: string) => void;
+    /**
+     * Array of delays (in milliseconds) between upload retry attempts
+     */
+    retryDelays?: UploadOptions['retryDelays'];
+};
+declare const FileSelector: ({ name, allowedFileNameCharacters, allowedFileTypes, bucketId, clientId, children, customerId, disabled, endpoint, isCloud, label, maxFiles, maxSize, multiple, onChange, onSubmit, onSuccess, onError, onFilePreUpload, onUploadRemove, retryDelays, }: FileSelectorProps) => react_jsx_runtime.JSX.Element;
 
 type UploadProgressBarProps = {
     /**
@@ -21,4 +126,4 @@ type UploadProgressBarProps = {
 };
 declare const UploadProgressBar: ({ upload, onProgress, onError, onSuccess }: UploadProgressBarProps) => react_jsx_runtime.JSX.Element;
 
-export { UploadProgressBar, type UploadProgressBarProps };
+export { FileSelector, type FileSelectorProps, UploadProgressBar, type UploadProgressBarProps };

package/dist/index.d.ts

@@ -1,5 +1,110 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import Upload from '@availity/upload-core';
+import { ReactNode, ChangeEvent } from 'react';
+import Upload, { UploadOptions } from '@availity/upload-core';
+
+type FileSelectorProps = {
+    /**
+     * Name attribute for the form field. Used by react-hook-form for form state management
+     * and must be unique within the form context
+     */
+    name: string;
+    /**
+     * The ID of the bucket where files will be uploaded
+     */
+    bucketId: string;
+    /**
+     * The customer ID associated with the upload
+     */
+    customerId: string;
+    /**
+     * Regular expression pattern of allowed characters in file names
+     * @example "a-zA-Z0-9-_."
+     */
+    allowedFileNameCharacters?: string;
+    /**
+     * List of allowed file extensions. Each extension must start with a dot
+     * @example ['.pdf', '.doc', '.docx']
+     * @default []
+     */
+    allowedFileTypes?: `.${string}`[];
+    /**
+     * Optional content to render below the file upload area
+     */
+    children?: ReactNode;
+    /**
+     * Client identifier used for upload authentication
+     */
+    clientId: string;
+    /**
+     * Whether the file selector is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Custom endpoint URL for file uploads. If not provided, default endpoint will be used
+     */
+    endpoint?: string;
+    /**
+     * Whether to use the cloud upload endpoint
+     * When true, uses '/cloud/web/appl/vault/upload/v1/resumable'
+     */
+    isCloud?: boolean;
+    /**
+     * Label text or element displayed above the upload area
+     * @default 'Upload file'
+     */
+    label?: ReactNode;
+    /**
+     * Maximum number of files that can be uploaded simultaneously
+     */
+    maxFiles?: number;
+    /**
+     * Maximum file size allowed per file in bytes
+     * Use Kibi or Mibibytes. eg: 1kb = 1024 bytes; 1mb = 1024kb
+     */
+    maxSize: number;
+    /**
+     * Whether multiple file selection is allowed
+     * @default true
+     */
+    multiple?: boolean;
+    /**
+     * Callback fired when files are selected
+     * @param event - The change event containing the selected file(s)
+     */
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Callback fired when the form is submitted
+     * @param uploads - Array of Upload instances for the submitted files
+     * @param values - Object containing the form values, with files indexed by the name prop
+     */
+    onSubmit?: (uploads: Upload[], values: Record<string, File[]>) => void;
+    /**
+     * Callback fired when a file is successfully uploaded
+     */
+    onSuccess?: UploadOptions['onSuccess'];
+    /**
+     * Callback fired when an error occurs during upload
+     */
+    onError?: UploadOptions['onError'];
+    /**
+     * Array of functions to execute before file upload begins.
+     * Each function should return a boolean indicating whether to proceed with the upload.
+     * @default []
+     */
+    onFilePreUpload?: (() => boolean)[];
+    /**
+     * Callback fired when a file is removed from the upload list
+     * @param files - Array of remaining files
+     * @param removedUploadId - ID of the removed upload
+     */
+    onUploadRemove?: (files: File[], removedUploadId: string) => void;
+    /**
+     * Array of delays (in milliseconds) between upload retry attempts
+     */
+    retryDelays?: UploadOptions['retryDelays'];
+};
+declare const FileSelector: ({ name, allowedFileNameCharacters, allowedFileTypes, bucketId, clientId, children, customerId, disabled, endpoint, isCloud, label, maxFiles, maxSize, multiple, onChange, onSubmit, onSuccess, onError, onFilePreUpload, onUploadRemove, retryDelays, }: FileSelectorProps) => react_jsx_runtime.JSX.Element;
 
 type UploadProgressBarProps = {
     /**
@@ -21,4 +126,4 @@ type UploadProgressBarProps = {
 };
 declare const UploadProgressBar: ({ upload, onProgress, onError, onSuccess }: UploadProgressBarProps) => react_jsx_runtime.JSX.Element;
 
-export { UploadProgressBar, type UploadProgressBarProps };
+export { FileSelector, type FileSelectorProps, UploadProgressBar, type UploadProgressBarProps };

package/dist/index.js

@@ -1,8 +1,39 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -15,24 +46,243 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  FileSelector: () => FileSelector,
   UploadProgressBar: () => UploadProgressBar
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/lib/UploadProgressBar.tsx
+// src/lib/FileSelector.tsx
+var import_react3 = require("react");
+var import_react_hook_form3 = require("react-hook-form");
+var import_react_query2 = require("@tanstack/react-query");
+var import_mui_button2 = require("@availity/mui-button");
+var import_mui_layout3 = require("@availity/mui-layout");
+var import_mui_typography4 = require("@availity/mui-typography");
+
+// src/lib/Dropzone.tsx
 var import_react = require("react");
-var import_mui_progress = require("@availity/mui-progress");
-var import_mui_typography = require("@availity/mui-typography");
+var import_react_dropzone = require("react-dropzone");
+var import_mui_divider = require("@availity/mui-divider");
 var import_mui_icon = require("@availity/mui-icon");
+var import_mui_layout = require("@availity/mui-layout");
+var import_mui_typography = require("@availity/mui-typography");
+
+// src/lib/FilePickerBtn.tsx
+var import_react_hook_form = require("react-hook-form");
+var import_mui_button = require("@availity/mui-button");
+var import_mui_form_utils = require("@availity/mui-form-utils");
 var import_jsx_runtime = require("react/jsx-runtime");
+var FilePickerBtn = (_a) => {
+  var _b = _a, {
+    name,
+    children = "Browse Files",
+    color,
+    inputId,
+    inputProps = {},
+    maxSize,
+    onChange,
+    onClick
+  } = _b, rest = __objRest(_b, [
+    "name",
+    "children",
+    "color",
+    "inputId",
+    "inputProps",
+    "maxSize",
+    "onChange",
+    "onClick"
+  ]);
+  const { register } = (0, import_react_hook_form.useFormContext)();
+  const { accept, multiple, ref, style, type: inputType } = inputProps;
+  const field = register(name);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_mui_form_utils.Input,
+      __spreadProps(__spreadValues({}, field), {
+        onChange,
+        value: "",
+        inputRef: ref,
+        type: inputType,
+        sx: style,
+        inputProps: {
+          accept,
+          size: maxSize != null ? maxSize : void 0,
+          multiple
+        },
+        id: inputId
+      })
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_button.Button, __spreadProps(__spreadValues({ color }, rest), { onClick, fullWidth: false, children }))
+  ] });
+};
+
+// src/lib/Dropzone.tsx
+var import_react_hook_form2 = require("react-hook-form");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var outerBoxStyles = {
+  backgroundColor: "background.canvas",
+  border: "1px dotted",
+  borderRadius: "4px",
+  padding: "2rem"
+};
+var innerBoxStyles = {
+  width: "100%",
+  height: "100%"
+};
+var createCounter = () => {
+  let id = 0;
+  const increment = () => id += 1;
+  return {
+    id,
+    increment
+  };
+};
+var counter = createCounter();
+var Dropzone = ({
+  allowedFileTypes = [],
+  disabled,
+  maxFiles,
+  maxSize,
+  multiple,
+  name,
+  onChange,
+  onClick,
+  setFileRejections,
+  setTotalSize
+}) => {
+  const { setValue, watch } = (0, import_react_hook_form2.useFormContext)();
+  const validator = (0, import_react.useCallback)(
+    (file) => {
+      var _a;
+      const previous = (_a = watch(name)) != null ? _a : [];
+      const isDuplicate = previous.some((prev) => prev.name === file.name);
+      if (isDuplicate) {
+        return {
+          code: "duplicate-name",
+          message: "A file with this name already exists"
+        };
+      }
+      const hasMaxFiles = maxFiles && previous.length >= maxFiles;
+      if (hasMaxFiles) {
+        return {
+          code: "too-many-files",
+          message: `Too many files. You may only upload ${maxFiles} file(s).`
+        };
+      }
+      return null;
+    },
+    [maxFiles]
+  );
+  const onDrop = (0, import_react.useCallback)(
+    (acceptedFiles, fileRejections) => {
+      var _a;
+      let newSize = 0;
+      for (const file of acceptedFiles) {
+        newSize += file.size;
+      }
+      setTotalSize((prev) => prev + newSize);
+      const previous = (_a = watch(name)) != null ? _a : [];
+      setValue(name, previous.concat(acceptedFiles));
+      if (fileRejections.length > 0) {
+        for (const rejection of fileRejections) {
+          rejection.id = counter.increment();
+        }
+      }
+      if (setFileRejections)
+        setFileRejections(fileRejections);
+    },
+    [setFileRejections]
+  );
+  const accept = allowedFileTypes.join(",");
+  const { getRootProps, getInputProps } = (0, import_react_dropzone.useDropzone)({
+    onDrop,
+    maxSize,
+    maxFiles,
+    disabled,
+    multiple,
+    accept,
+    validator
+  });
+  const inputProps = getInputProps({
+    multiple,
+    accept,
+    onChange
+  });
+  const handleOnChange = (event) => {
+    if (inputProps.onChange) {
+      inputProps.onChange(event);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_layout.Box, __spreadProps(__spreadValues({ sx: outerBoxStyles }, getRootProps()), { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_layout.Box, { sx: innerBoxStyles, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_layout.Stack, { spacing: 2, divider: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_divider.Divider, { children: "OR" }), alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_icon.CloudDownloadIcon, { fontSize: "xlarge", color: "secondary" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_typography.Typography, { variant: "subtitle2", fontWeight: "700", children: "Drag and Drop Files Here" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      FilePickerBtn,
+      {
+        name,
+        color: "primary",
+        disabled,
+        maxSize,
+        onClick,
+        inputProps,
+        onChange: handleOnChange
+      }
+    )
+  ] }) }) }) }));
+};
+
+// src/lib/ErrorAlert.tsx
+var import_mui_alert = require("@availity/mui-alert");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var codes = {
+  "file-too-large": "File exceeds maximum size",
+  "file-invalid-type": "File has an invalid type",
+  "file-too-small": "File is smaller than minimum size",
+  "too-many-file": "Too many files",
+  "duplicate-name": "Duplicate file selected"
+};
+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}`);
+  }) });
+};
+
+// src/lib/FileList.tsx
+var import_mui_list = require("@availity/mui-list");
+var import_mui_icon3 = require("@availity/mui-icon");
+var import_mui_layout2 = require("@availity/mui-layout");
+
+// src/lib/UploadProgressBar.tsx
+var import_react2 = require("react");
+var import_mui_progress = require("@availity/mui-progress");
+var import_mui_typography2 = require("@availity/mui-typography");
+var import_mui_icon2 = require("@availity/mui-icon");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var UploadProgressBar = ({ upload, onProgress, onError, onSuccess }) => {
-  const [statePercentage, setStatePercentage] = (0, import_react.useState)(upload.percentage || 0);
-  const [error, setError] = (0, import_react.useState)(false);
+  const [statePercentage, setStatePercentage] = (0, import_react2.useState)(upload.percentage || 0);
+  const [error, setError] = (0, import_react2.useState)(false);
   const handleOnProgress = () => {
     setStatePercentage(upload.percentage);
     setError(false);
@@ -53,13 +303,226 @@ var UploadProgressBar = ({ upload, onProgress, onError, onSuccess }) => {
   upload.onProgress.push(handleOnProgress);
   upload.onSuccess.push(handleOnSuccess);
   upload.onError.push(handleOnError);
-  return upload.errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_mui_typography.Typography, { color: "text.error", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_icon.WarningTriangleIcon, {}),
+  return upload.errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_mui_typography2.Typography, { color: "text.error", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_mui_icon2.WarningTriangleIcon, {}),
     " ",
     upload.errorMessage
-  ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_progress.LinearProgress, { value: statePercentage, "aria-label": `${upload.file.name}-progress` });
+  ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_mui_progress.LinearProgress, { value: statePercentage, "aria-label": `${upload.file.name}-progress` });
+};
+
+// src/lib/util.ts
+function formatBytes(bytes, decimals = 2) {
+  if (!+bytes)
+    return "0 Bytes";
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ["Bytes", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+}
+var FILE_EXT_ICONS = {
+  png: "file-image",
+  jpg: "file-image",
+  jpeg: "file-image",
+  gif: "file-image",
+  ppt: "file-powerpoint",
+  pptx: "file-powerpoint",
+  xls: "file-excel",
+  xlsx: "file-excel",
+  doc: "file-word",
+  docx: "file-word",
+  txt: "doc-alt",
+  text: "doc-alt",
+  zip: "file-archive",
+  "7zip": "file-archive",
+  xml: "file-code",
+  html: "file-code",
+  pdf: "file-pdf"
+};
+var isValidKey = (key) => key ? key in FILE_EXT_ICONS : false;
+var getFileExtIcon = (fileName) => {
+  var _a;
+  const ext = ((_a = fileName.split(".").pop()) == null ? void 0 : _a.toLowerCase()) || "";
+  const icon = isValidKey(ext) ? FILE_EXT_ICONS[ext] : "doc";
+  return { ext, icon };
+};
+
+// src/lib/useUploadCore.tsx
+var import_react_query = require("@tanstack/react-query");
+var import_upload_core = __toESM(require("@availity/upload-core"));
+function startUpload(file, options) {
+  const upload = new import_upload_core.default(file, options);
+  upload.start();
+  return upload;
+}
+function useUploadCore(file, options) {
+  const isQueryEnabled = !!file;
+  return (0, import_react_query.useQuery)(["upload", file.name, options], () => startUpload(file, options), {
+    enabled: isQueryEnabled,
+    retry: false
+  });
+}
+
+// src/lib/FileList.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var FileRow = ({ file, options, onRemoveFile }) => {
+  const { ext, icon } = getFileExtIcon(file.name);
+  console.log("ext, icon:", ext, icon);
+  const { data: upload } = useUploadCore(file, options);
+  if (!upload)
+    return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_mui_layout2.Grid, { container: true, spacing: 2, alignItems: "center", justifyContent: "space-between", width: "100%", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_layout2.Grid, { xs: 1, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_list.ListItemIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_icon3.FileIcon, {}) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_layout2.Grid, { xs: 4, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_list.ListItemText, { children: upload.trimFileName(upload.file.name) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_layout2.Grid, { xs: 2, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_list.ListItem, { children: formatBytes(upload.file.size) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_layout2.Grid, { xs: 4, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(UploadProgressBar, { upload }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_layout2.Grid, { xs: 1, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      import_mui_list.ListItemButton,
+      {
+        onClick: () => {
+          onRemoveFile(upload.id, upload);
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_list.ListItemIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_icon3.DeleteIcon, {}) })
+      }
+    ) })
+  ] }) });
+};
+var FileList = ({ files, options, onRemoveFile }) => {
+  if (files.length === 0)
+    return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_list.List, { children: files.map((file) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FileRow, { file, options, onRemoveFile }, file.name);
+  }) });
+};
+
+// src/lib/FileTypesMessage.tsx
+var import_mui_typography3 = require("@availity/mui-typography");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var FileTypesMessage = ({ allowedFileTypes, maxFileSize }) => {
+  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_runtime6.jsxs)(import_mui_typography3.Typography, { variant: "caption", children: [
+    fileSizeMsg,
+    fileTypesMsg
+  ] });
+};
+
+// src/lib/FileSelector.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var CLOUD_URL = "/cloud/web/appl/vault/upload/v1/resumable";
+var FileSelector = ({
+  name,
+  allowedFileNameCharacters,
+  allowedFileTypes = [],
+  bucketId,
+  clientId,
+  children,
+  customerId,
+  disabled = false,
+  endpoint,
+  isCloud,
+  label = "Upload file",
+  maxFiles,
+  maxSize,
+  multiple = true,
+  onChange,
+  onSubmit,
+  onSuccess,
+  onError,
+  onFilePreUpload = [],
+  onUploadRemove,
+  retryDelays
+}) => {
+  const [totalSize, setTotalSize] = (0, import_react3.useState)(0);
+  const [fileRejections, setFileRejections] = (0, import_react3.useState)([]);
+  const client = (0, import_react_query2.useQueryClient)();
+  const methods = (0, import_react_hook_form3.useForm)({
+    defaultValues: {
+      [name]: []
+    }
+  });
+  const options = {
+    bucketId,
+    customerId,
+    clientId,
+    fileTypes: allowedFileTypes,
+    maxSize,
+    allowedFileNameCharacters,
+    onError,
+    onSuccess,
+    retryDelays
+  };
+  if (onFilePreUpload)
+    options.onPreStart = onFilePreUpload;
+  if (endpoint)
+    options.endpoint = endpoint;
+  if (isCloud)
+    options.endpoint = CLOUD_URL;
+  const handleOnRemoveFile = (uploadId, upload) => {
+    const prevFiles = methods.watch(name);
+    const newFiles = prevFiles.filter((file) => file.name !== upload.file.name);
+    if (newFiles.length !== prevFiles.length) {
+      const removedFile = prevFiles.find((file) => file.name === upload.file.name);
+      methods.setValue(name, newFiles);
+      if (removedFile == null ? void 0 : removedFile.size)
+        setTotalSize(totalSize - removedFile.size);
+      if (onUploadRemove)
+        onUploadRemove(newFiles, uploadId);
+    }
+  };
+  const files = methods.watch(name);
+  const handleOnSubmit = (values) => {
+    if (values[name].length === 0)
+      return;
+    const queries = client.getQueriesData(["upload"]);
+    const uploads = [];
+    for (const [, data] of queries) {
+      if (data)
+        uploads.push(data);
+    }
+    if (onSubmit)
+      onSubmit(uploads, values);
+  };
+  const handleRemoveRejection = (id) => {
+    const rejections = fileRejections.filter((value) => value.id !== id);
+    setFileRejections(rejections);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_hook_form3.FormProvider, __spreadProps(__spreadValues({}, methods), { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("form", { onSubmit: methods.handleSubmit(handleOnSubmit), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_mui_typography4.Typography, { children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        Dropzone,
+        {
+          name,
+          allowedFileTypes,
+          disabled,
+          maxFiles,
+          maxSize,
+          multiple,
+          onChange,
+          setFileRejections,
+          setTotalSize
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FileTypesMessage, { allowedFileTypes, maxFileSize: maxSize })
+    ] }),
+    children,
+    fileRejections.length > 0 ? fileRejections.map((rejection) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      ErrorAlert,
+      {
+        errors: rejection.errors,
+        fileName: rejection.file.name,
+        id: rejection.id,
+        onClose: () => handleRemoveRejection(rejection.id)
+      },
+      rejection.id
+    )) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FileList, { files, options, onRemoveFile: handleOnRemoveFile }),
+    files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_mui_layout3.Grid, { xs: 12, justifyContent: "end", display: "flex", paddingTop: 2.5, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_mui_button2.Button, { type: "submit", sx: { marginLeft: "auto", marginRight: 0 }, children: "Submit" }) })
+  ] }) }));
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  FileSelector,
   UploadProgressBar
 });

package/dist/index.mjs

@@ -1,9 +1,251 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/lib/FileSelector.tsx
+import { useState as useState2 } from "react";
+import { useForm, FormProvider } from "react-hook-form";
+import { useQueryClient } from "@tanstack/react-query";
+import { Button as Button2 } from "@availity/mui-button";
+import { Grid as Grid2 } from "@availity/mui-layout";
+import { Typography as Typography4 } from "@availity/mui-typography";
+
+// src/lib/Dropzone.tsx
+import { useCallback } from "react";
+import { useDropzone } from "react-dropzone";
+import { Divider } from "@availity/mui-divider";
+import { CloudDownloadIcon } from "@availity/mui-icon";
+import { Box, Stack } from "@availity/mui-layout";
+import { Typography } from "@availity/mui-typography";
+
+// src/lib/FilePickerBtn.tsx
+import { useFormContext } from "react-hook-form";
+import { Button } from "@availity/mui-button";
+import { Input } from "@availity/mui-form-utils";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var FilePickerBtn = (_a) => {
+  var _b = _a, {
+    name,
+    children = "Browse Files",
+    color,
+    inputId,
+    inputProps = {},
+    maxSize,
+    onChange,
+    onClick
+  } = _b, rest = __objRest(_b, [
+    "name",
+    "children",
+    "color",
+    "inputId",
+    "inputProps",
+    "maxSize",
+    "onChange",
+    "onClick"
+  ]);
+  const { register } = useFormContext();
+  const { accept, multiple, ref, style, type: inputType } = inputProps;
+  const field = register(name);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      __spreadProps(__spreadValues({}, field), {
+        onChange,
+        value: "",
+        inputRef: ref,
+        type: inputType,
+        sx: style,
+        inputProps: {
+          accept,
+          size: maxSize != null ? maxSize : void 0,
+          multiple
+        },
+        id: inputId
+      })
+    ),
+    /* @__PURE__ */ jsx(Button, __spreadProps(__spreadValues({ color }, rest), { onClick, fullWidth: false, children }))
+  ] });
+};
+
+// src/lib/Dropzone.tsx
+import { useFormContext as useFormContext2 } from "react-hook-form";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var outerBoxStyles = {
+  backgroundColor: "background.canvas",
+  border: "1px dotted",
+  borderRadius: "4px",
+  padding: "2rem"
+};
+var innerBoxStyles = {
+  width: "100%",
+  height: "100%"
+};
+var createCounter = () => {
+  let id = 0;
+  const increment = () => id += 1;
+  return {
+    id,
+    increment
+  };
+};
+var counter = createCounter();
+var Dropzone = ({
+  allowedFileTypes = [],
+  disabled,
+  maxFiles,
+  maxSize,
+  multiple,
+  name,
+  onChange,
+  onClick,
+  setFileRejections,
+  setTotalSize
+}) => {
+  const { setValue, watch } = useFormContext2();
+  const validator = useCallback(
+    (file) => {
+      var _a;
+      const previous = (_a = watch(name)) != null ? _a : [];
+      const isDuplicate = previous.some((prev) => prev.name === file.name);
+      if (isDuplicate) {
+        return {
+          code: "duplicate-name",
+          message: "A file with this name already exists"
+        };
+      }
+      const hasMaxFiles = maxFiles && previous.length >= maxFiles;
+      if (hasMaxFiles) {
+        return {
+          code: "too-many-files",
+          message: `Too many files. You may only upload ${maxFiles} file(s).`
+        };
+      }
+      return null;
+    },
+    [maxFiles]
+  );
+  const onDrop = useCallback(
+    (acceptedFiles, fileRejections) => {
+      var _a;
+      let newSize = 0;
+      for (const file of acceptedFiles) {
+        newSize += file.size;
+      }
+      setTotalSize((prev) => prev + newSize);
+      const previous = (_a = watch(name)) != null ? _a : [];
+      setValue(name, previous.concat(acceptedFiles));
+      if (fileRejections.length > 0) {
+        for (const rejection of fileRejections) {
+          rejection.id = counter.increment();
+        }
+      }
+      if (setFileRejections)
+        setFileRejections(fileRejections);
+    },
+    [setFileRejections]
+  );
+  const accept = allowedFileTypes.join(",");
+  const { getRootProps, getInputProps } = useDropzone({
+    onDrop,
+    maxSize,
+    maxFiles,
+    disabled,
+    multiple,
+    accept,
+    validator
+  });
+  const inputProps = getInputProps({
+    multiple,
+    accept,
+    onChange
+  });
+  const handleOnChange = (event) => {
+    if (inputProps.onChange) {
+      inputProps.onChange(event);
+    }
+  };
+  return /* @__PURE__ */ jsx2(Box, __spreadProps(__spreadValues({ sx: outerBoxStyles }, getRootProps()), { children: /* @__PURE__ */ jsx2(Box, { sx: innerBoxStyles, children: /* @__PURE__ */ jsx2(Stack, { spacing: 2, divider: /* @__PURE__ */ jsx2(Divider, { children: "OR" }), alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2(CloudDownloadIcon, { fontSize: "xlarge", color: "secondary" }),
+    /* @__PURE__ */ jsx2(Typography, { variant: "subtitle2", fontWeight: "700", children: "Drag and Drop Files Here" }),
+    /* @__PURE__ */ jsx2(
+      FilePickerBtn,
+      {
+        name,
+        color: "primary",
+        disabled,
+        maxSize,
+        onClick,
+        inputProps,
+        onChange: handleOnChange
+      }
+    )
+  ] }) }) }) }));
+};
+
+// src/lib/ErrorAlert.tsx
+import { Alert, AlertTitle } from "@availity/mui-alert";
+import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var codes = {
+  "file-too-large": "File exceeds maximum size",
+  "file-invalid-type": "File has an invalid type",
+  "file-too-small": "File is smaller than minimum size",
+  "too-many-file": "Too many files",
+  "duplicate-name": "Duplicate file selected"
+};
+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}`);
+  }) });
+};
+
+// src/lib/FileList.tsx
+import { List, ListItem, ListItemText, ListItemIcon, ListItemButton } from "@availity/mui-list";
+import { DeleteIcon, FileIcon } from "@availity/mui-icon";
+import { Grid } from "@availity/mui-layout";
+
 // src/lib/UploadProgressBar.tsx
 import { useState } from "react";
 import { LinearProgress } from "@availity/mui-progress";
-import { Typography } from "@availity/mui-typography";
+import { Typography as Typography2 } from "@availity/mui-typography";
 import { WarningTriangleIcon } from "@availity/mui-icon";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var UploadProgressBar = ({ upload, onProgress, onError, onSuccess }) => {
   const [statePercentage, setStatePercentage] = useState(upload.percentage || 0);
   const [error, setError] = useState(false);
@@ -27,12 +269,225 @@ var UploadProgressBar = ({ upload, onProgress, onError, onSuccess }) => {
   upload.onProgress.push(handleOnProgress);
   upload.onSuccess.push(handleOnSuccess);
   upload.onError.push(handleOnError);
-  return upload.errorMessage ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Typography, { color: "text.error", children: [
-    /* @__PURE__ */ jsx(WarningTriangleIcon, {}),
+  return upload.errorMessage ? /* @__PURE__ */ jsx4(Fragment4, { children: /* @__PURE__ */ jsxs4(Typography2, { color: "text.error", children: [
+    /* @__PURE__ */ jsx4(WarningTriangleIcon, {}),
     " ",
     upload.errorMessage
-  ] }) }) : /* @__PURE__ */ jsx(LinearProgress, { value: statePercentage, "aria-label": `${upload.file.name}-progress` });
+  ] }) }) : /* @__PURE__ */ jsx4(LinearProgress, { value: statePercentage, "aria-label": `${upload.file.name}-progress` });
+};
+
+// src/lib/util.ts
+function formatBytes(bytes, decimals = 2) {
+  if (!+bytes)
+    return "0 Bytes";
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ["Bytes", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+}
+var FILE_EXT_ICONS = {
+  png: "file-image",
+  jpg: "file-image",
+  jpeg: "file-image",
+  gif: "file-image",
+  ppt: "file-powerpoint",
+  pptx: "file-powerpoint",
+  xls: "file-excel",
+  xlsx: "file-excel",
+  doc: "file-word",
+  docx: "file-word",
+  txt: "doc-alt",
+  text: "doc-alt",
+  zip: "file-archive",
+  "7zip": "file-archive",
+  xml: "file-code",
+  html: "file-code",
+  pdf: "file-pdf"
+};
+var isValidKey = (key) => key ? key in FILE_EXT_ICONS : false;
+var getFileExtIcon = (fileName) => {
+  var _a;
+  const ext = ((_a = fileName.split(".").pop()) == null ? void 0 : _a.toLowerCase()) || "";
+  const icon = isValidKey(ext) ? FILE_EXT_ICONS[ext] : "doc";
+  return { ext, icon };
+};
+
+// src/lib/useUploadCore.tsx
+import { useQuery } from "@tanstack/react-query";
+import Upload from "@availity/upload-core";
+function startUpload(file, options) {
+  const upload = new Upload(file, options);
+  upload.start();
+  return upload;
+}
+function useUploadCore(file, options) {
+  const isQueryEnabled = !!file;
+  return useQuery(["upload", file.name, options], () => startUpload(file, options), {
+    enabled: isQueryEnabled,
+    retry: false
+  });
+}
+
+// src/lib/FileList.tsx
+import { Fragment as Fragment5, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var FileRow = ({ file, options, onRemoveFile }) => {
+  const { ext, icon } = getFileExtIcon(file.name);
+  console.log("ext, icon:", ext, icon);
+  const { data: upload } = useUploadCore(file, options);
+  if (!upload)
+    return null;
+  return /* @__PURE__ */ jsx5(Fragment5, { children: /* @__PURE__ */ jsxs5(Grid, { container: true, spacing: 2, alignItems: "center", justifyContent: "space-between", width: "100%", children: [
+    /* @__PURE__ */ jsx5(Grid, { xs: 1, children: /* @__PURE__ */ jsx5(ListItemIcon, { children: /* @__PURE__ */ jsx5(FileIcon, {}) }) }),
+    /* @__PURE__ */ jsx5(Grid, { xs: 4, children: /* @__PURE__ */ jsx5(ListItemText, { children: upload.trimFileName(upload.file.name) }) }),
+    /* @__PURE__ */ jsx5(Grid, { xs: 2, children: /* @__PURE__ */ jsx5(ListItem, { children: formatBytes(upload.file.size) }) }),
+    /* @__PURE__ */ jsx5(Grid, { xs: 4, children: /* @__PURE__ */ jsx5(UploadProgressBar, { upload }) }),
+    /* @__PURE__ */ jsx5(Grid, { xs: 1, children: /* @__PURE__ */ jsx5(
+      ListItemButton,
+      {
+        onClick: () => {
+          onRemoveFile(upload.id, upload);
+        },
+        children: /* @__PURE__ */ jsx5(ListItemIcon, { children: /* @__PURE__ */ jsx5(DeleteIcon, {}) })
+      }
+    ) })
+  ] }) });
+};
+var FileList = ({ files, options, onRemoveFile }) => {
+  if (files.length === 0)
+    return null;
+  return /* @__PURE__ */ jsx5(List, { children: files.map((file) => {
+    return /* @__PURE__ */ jsx5(FileRow, { file, options, onRemoveFile }, file.name);
+  }) });
+};
+
+// src/lib/FileTypesMessage.tsx
+import { Typography as Typography3 } from "@availity/mui-typography";
+import { jsxs as jsxs6 } from "react/jsx-runtime";
+var FileTypesMessage = ({ allowedFileTypes, maxFileSize }) => {
+  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__ */ jsxs6(Typography3, { variant: "caption", children: [
+    fileSizeMsg,
+    fileTypesMsg
+  ] });
+};
+
+// src/lib/FileSelector.tsx
+import { Fragment as Fragment6, jsx as jsx6, jsxs as jsxs7 } from "react/jsx-runtime";
+var CLOUD_URL = "/cloud/web/appl/vault/upload/v1/resumable";
+var FileSelector = ({
+  name,
+  allowedFileNameCharacters,
+  allowedFileTypes = [],
+  bucketId,
+  clientId,
+  children,
+  customerId,
+  disabled = false,
+  endpoint,
+  isCloud,
+  label = "Upload file",
+  maxFiles,
+  maxSize,
+  multiple = true,
+  onChange,
+  onSubmit,
+  onSuccess,
+  onError,
+  onFilePreUpload = [],
+  onUploadRemove,
+  retryDelays
+}) => {
+  const [totalSize, setTotalSize] = useState2(0);
+  const [fileRejections, setFileRejections] = useState2([]);
+  const client = useQueryClient();
+  const methods = useForm({
+    defaultValues: {
+      [name]: []
+    }
+  });
+  const options = {
+    bucketId,
+    customerId,
+    clientId,
+    fileTypes: allowedFileTypes,
+    maxSize,
+    allowedFileNameCharacters,
+    onError,
+    onSuccess,
+    retryDelays
+  };
+  if (onFilePreUpload)
+    options.onPreStart = onFilePreUpload;
+  if (endpoint)
+    options.endpoint = endpoint;
+  if (isCloud)
+    options.endpoint = CLOUD_URL;
+  const handleOnRemoveFile = (uploadId, upload) => {
+    const prevFiles = methods.watch(name);
+    const newFiles = prevFiles.filter((file) => file.name !== upload.file.name);
+    if (newFiles.length !== prevFiles.length) {
+      const removedFile = prevFiles.find((file) => file.name === upload.file.name);
+      methods.setValue(name, newFiles);
+      if (removedFile == null ? void 0 : removedFile.size)
+        setTotalSize(totalSize - removedFile.size);
+      if (onUploadRemove)
+        onUploadRemove(newFiles, uploadId);
+    }
+  };
+  const files = methods.watch(name);
+  const handleOnSubmit = (values) => {
+    if (values[name].length === 0)
+      return;
+    const queries = client.getQueriesData(["upload"]);
+    const uploads = [];
+    for (const [, data] of queries) {
+      if (data)
+        uploads.push(data);
+    }
+    if (onSubmit)
+      onSubmit(uploads, values);
+  };
+  const handleRemoveRejection = (id) => {
+    const rejections = fileRejections.filter((value) => value.id !== id);
+    setFileRejections(rejections);
+  };
+  return /* @__PURE__ */ jsx6(FormProvider, __spreadProps(__spreadValues({}, methods), { children: /* @__PURE__ */ jsxs7("form", { onSubmit: methods.handleSubmit(handleOnSubmit), children: [
+    /* @__PURE__ */ jsxs7(Fragment6, { children: [
+      /* @__PURE__ */ jsx6(Typography4, { children: label }),
+      /* @__PURE__ */ jsx6(
+        Dropzone,
+        {
+          name,
+          allowedFileTypes,
+          disabled,
+          maxFiles,
+          maxSize,
+          multiple,
+          onChange,
+          setFileRejections,
+          setTotalSize
+        }
+      ),
+      /* @__PURE__ */ jsx6(FileTypesMessage, { allowedFileTypes, maxFileSize: maxSize })
+    ] }),
+    children,
+    fileRejections.length > 0 ? fileRejections.map((rejection) => /* @__PURE__ */ jsx6(
+      ErrorAlert,
+      {
+        errors: rejection.errors,
+        fileName: rejection.file.name,
+        id: rejection.id,
+        onClose: () => handleRemoveRejection(rejection.id)
+      },
+      rejection.id
+    )) : null,
+    /* @__PURE__ */ jsx6(FileList, { files, options, onRemoveFile: handleOnRemoveFile }),
+    files.length > 0 && /* @__PURE__ */ jsx6(Grid2, { xs: 12, justifyContent: "end", display: "flex", paddingTop: 2.5, children: /* @__PURE__ */ jsx6(Button2, { type: "submit", sx: { marginLeft: "auto", marginRight: 0 }, children: "Submit" }) })
+  ] }) }));
 };
 export {
+  FileSelector,
   UploadProgressBar
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-file-selector",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Availity MUI file-selector Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -36,7 +36,7 @@
     "@availity/mui-alert": "^0.7.0",
     "@availity/mui-button": "^0.6.12",
     "@availity/mui-divider": "^0.4.0",
-    "@availity/mui-form-utils": "^0.15.1",
+    "@availity/mui-form-utils": "^0.16.0",
     "@availity/mui-icon": "^0.11.1",
     "@availity/mui-layout": "^0.2.0",
     "@availity/mui-list": "^0.2.2",

package/src/index.ts

@@ -1 +1,2 @@
+export * from './lib/FileSelector';
 export * from './lib/UploadProgressBar';