@availity/mui-file-selector 1.0.0-alpha.0 → 1.1.0

package/dist/index.js

@@ -79,21 +79,22 @@ var __async = (__this, __arguments, generator) => {
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  Dropzone: () => Dropzone,
+  ErrorAlert: () => ErrorAlert,
+  FileList: () => FileList,
+  FilePickerBtn: () => FilePickerBtn,
+  FileRow: () => FileRow,
   FileSelector: () => FileSelector,
-  UploadProgressBar: () => UploadProgressBar
+  FileTypesMessage: () => FileTypesMessage,
+  HeaderMessage: () => HeaderMessage,
+  UploadProgressBar: () => UploadProgressBar,
+  useUploadCore: () => useUploadCore
 });
 module.exports = __toCommonJS(index_exports);
 
-// 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_button3 = require("@availity/mui-button");
-var import_mui_layout3 = require("@availity/mui-layout");
-var import_mui_typography3 = require("@availity/mui-typography");
-
 // src/lib/Dropzone.tsx
 var import_react = require("react");
+var import_styles = require("@mui/material/styles");
 var import_react_dropzone = require("react-dropzone");
 var import_react_hook_form2 = require("react-hook-form");
 var import_mui_divider = require("@availity/mui-divider");
@@ -109,7 +110,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var FilePickerBtn = (_a) => {
   var _b = _a, {
     name,
-    children = "Browse Files",
+    children,
     color,
     inputId,
     inputProps = {},
@@ -126,25 +127,30 @@ var FilePickerBtn = (_a) => {
     "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
-      })
+      import_react_hook_form.Controller,
+      {
+        name,
+        defaultValue: [],
+        render: ({ field }) => /* @__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 }))
   ] });
@@ -176,43 +182,64 @@ var createCounter = () => {
   };
 };
 var counter = createCounter();
+var DropzoneContainer = (0, import_styles.styled)(import_mui_layout.Box, { name: "AvDropzoneContainer", slot: "root" })({
+  ".MuiDivider-root": {
+    width: "196px",
+    marginLeft: "auto",
+    marginRight: "auto"
+  }
+});
 var Dropzone = ({
   allowedFileTypes = [],
   disabled,
+  enableDropArea = true,
   maxFiles,
   maxSize,
   multiple,
   name,
   onChange,
   onClick,
+  onDrop,
   setFileRejections,
-  setTotalSize
+  setTotalSize,
+  validator
 }) => {
-  const { setValue, watch } = (0, import_react_hook_form2.useFormContext)();
-  const validator = (0, import_react.useCallback)(
+  const { getValues, setValue, watch } = (0, import_react_hook_form2.useFormContext)();
+  const handleValidation = (0, import_react.useCallback)(
     (file) => {
       var _a2;
       const previous = (_a2 = watch(name)) != null ? _a2 : [];
+      const errors = [];
       const isDuplicate = previous.some((prev) => prev.name === file.name);
       if (isDuplicate) {
-        return {
+        errors.push({
           code: "duplicate-name",
           message: "A file with this name already exists"
-        };
+        });
       }
       const hasMaxFiles = maxFiles && previous.length >= maxFiles;
       if (hasMaxFiles) {
-        return {
+        errors.push({
           code: "too-many-files",
           message: `Too many files. You may only upload ${maxFiles} file(s).`
-        };
+        });
       }
-      return null;
+      if (validator) {
+        const validatorErrors = validator(file);
+        if (validatorErrors) {
+          if (Array.isArray(validatorErrors)) {
+            errors.push(...validatorErrors);
+          } else {
+            errors.push(validatorErrors);
+          }
+        }
+      }
+      return errors.length > 0 ? errors : null;
     },
-    [maxFiles]
+    [maxFiles, validator]
   );
-  const onDrop = (0, import_react.useCallback)(
-    (acceptedFiles, fileRejections) => {
+  const handleOnDrop = (0, import_react.useCallback)(
+    (acceptedFiles, fileRejections, event) => {
       var _a2;
       let newSize = 0;
       for (const file of acceptedFiles) {
@@ -227,34 +254,44 @@ var Dropzone = ({
         }
       }
       if (setFileRejections) setFileRejections(fileRejections);
+      if (onDrop) onDrop(acceptedFiles, fileRejections, event);
     },
     [setFileRejections]
   );
   const accept = allowedFileTypes.join(",");
   const { getRootProps, getInputProps } = (0, import_react_dropzone.useDropzone)({
-    onDrop,
+    onDrop: handleOnDrop,
     maxSize,
     maxFiles,
     disabled,
     multiple,
     accept,
-    validator
+    validator: handleValidation
   });
   const inputProps = getInputProps({
     multiple,
     accept,
     onChange
   });
+  const _a = getRootProps(), { role, tabIndex } = _a, rootProps = __objRest(_a, ["role", "tabIndex"]);
   const handleOnChange = (event) => {
     if (inputProps.onChange) {
       inputProps.onChange(event);
     }
   };
-  const _a = getRootProps(), { role, tabIndex } = _a, rootProps = __objRest(_a, ["role", "tabIndex"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_layout.Box, __spreadProps(__spreadValues({ sx: outerBoxStyles }, rootProps), { 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, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+  const handleOnClick = (event) => {
+    if (!enableDropArea && rootProps.onClick) rootProps.onClick(event);
+    if (onClick) onClick;
+  };
+  const getFieldValue = () => {
+    const field = getValues();
+    return field[name] || [];
+  };
+  const hasFiles = getFieldValue().length > 0;
+  return enableDropArea ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DropzoneContainer, __spreadProps(__spreadValues({ sx: outerBoxStyles }, rootProps), { 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, 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.CloudUploadIcon, { 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)(import_mui_divider.Divider, { children: "OR" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_divider.Divider, { flexItem: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_typography.Typography, { variant: "subtitle2", children: "OR" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       FilePickerBtn,
       {
@@ -264,10 +301,24 @@ var Dropzone = ({
         maxSize,
         onClick,
         inputProps,
-        onChange: handleOnChange
+        onChange: handleOnChange,
+        children: "Browse Files"
       }
     )
-  ] }) }) }) }));
+  ] }) }) }) })) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    FilePickerBtn,
+    {
+      name,
+      color: "tertiary",
+      disabled,
+      maxSize,
+      onClick: handleOnClick,
+      inputProps,
+      onChange: handleOnChange,
+      startIcon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_icon.PlusIcon, {}),
+      children: hasFiles ? "Add More Files" : "Add File(s)"
+    }
+  );
 };
 
 // src/lib/ErrorAlert.tsx
@@ -386,25 +437,36 @@ function startUpload(file, options) {
     return upload;
   });
 }
-function useUploadCore(file, options) {
+function useUploadCore(file, options, queryOptions) {
   const isQueryEnabled = !!file;
-  return (0, import_react_query.useQuery)(["upload", file.name, options], () => startUpload(file, options), {
+  return (0, import_react_query.useQuery)(__spreadValues({
+    queryKey: ["upload", file.name, options],
+    queryFn: () => startUpload(file, options),
     enabled: isQueryEnabled,
     retry: false,
     refetchOnWindowFocus: false
-  });
+  }, queryOptions));
 }
 
 // src/lib/FileList.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var FileRow = ({ file, options, onRemoveFile }) => {
+var FileRow = ({
+  file,
+  options,
+  onRemoveFile,
+  queryOptions,
+  customFileRow: CustomRow,
+  disableRemove = false
+}) => {
   const Icon = getFileExtIcon(file.name);
-  const { data: upload } = useUploadCore(file, options);
+  const { data: upload } = useUploadCore(file, options, queryOptions);
+  if (CustomRow) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CustomRow, { upload, options, onRemoveFile });
   if (!upload) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     import_mui_list2.ListItem,
     {
-      secondaryAction: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      disableGutters: true,
+      secondaryAction: !disableRemove && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         import_mui_button2.IconButton,
         {
           title: "remove file",
@@ -427,27 +489,68 @@ var FileRow = ({ file, options, onRemoveFile }) => {
     }
   );
 };
-var FileList = ({ files, options, onRemoveFile }) => {
+var FileList = ({
+  files,
+  options,
+  onRemoveFile,
+  queryOptions,
+  customFileRow,
+  disableRemove
+}) => {
   if (files.length === 0) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_list2.List, { children: files.map((file) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FileRow, { file, options, onRemoveFile }, file.name);
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      FileRow,
+      {
+        file,
+        options,
+        onRemoveFile,
+        queryOptions,
+        customFileRow,
+        disableRemove
+      },
+      file.name
+    );
   }) });
 };
 
+// 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_layout3 = require("@availity/mui-layout");
+var import_mui_typography4 = require("@availity/mui-typography");
+
 // src/lib/FileTypesMessage.tsx
 var import_mui_typography2 = require("@availity/mui-typography");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var FileTypesMessage = ({ allowedFileTypes, maxFileSize }) => {
+var FileTypesMessage = ({
+  allowedFileTypes = [],
+  maxFileSize,
+  variant = "caption"
+}) => {
   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_typography2.Typography, { variant: "caption", children: [
+  const fileTypesMsg = allowedFileTypes.length > 0 ? `Supported file types include: ${allowedFileTypes.join(", ")}` : "All file types allowed.";
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_mui_typography2.Typography, { variant, children: [
     fileSizeMsg,
     fileTypesMsg
   ] });
 };
 
-// src/lib/FileSelector.tsx
+// src/lib/HeaderMessage.tsx
+var import_mui_typography3 = require("@availity/mui-typography");
 var import_jsx_runtime7 = require("react/jsx-runtime");
+var HeaderMessage = ({ maxFiles, maxSize }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_mui_typography3.Typography, { variant: "h6", children: [
+    "Attach up to ",
+    maxFiles,
+    " file(s), with a maximum individual size of ",
+    formatBytes(maxSize)
+  ] });
+};
+
+// src/lib/FileSelector.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var CLOUD_URL = "/cloud/web/appl/vault/upload/v1/resumable";
 var FileSelector = ({
   name,
@@ -457,7 +560,9 @@ var FileSelector = ({
   clientId,
   children,
   customerId,
+  customFileRow,
   disabled = false,
+  enableDropArea = true,
   endpoint,
   isCloud,
   label = "Upload file",
@@ -465,80 +570,95 @@ var FileSelector = ({
   maxSize,
   multiple = true,
   onChange,
-  onSubmit,
-  onSuccess,
-  onError,
-  onFilePreUpload = [],
+  onDrop,
   onUploadRemove,
-  retryDelays
+  queryOptions,
+  uploadOptions,
+  validator,
+  disableRemove
 }) => {
   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 = {
+  const formMethods = (0, import_react_hook_form3.useFormContext)();
+  const options = __spreadProps(__spreadValues({}, uploadOptions), {
     bucketId,
     customerId,
     clientId,
     fileTypes: allowedFileTypes,
     maxSize,
-    allowedFileNameCharacters,
-    onError,
-    onSuccess,
-    retryDelays
-  };
-  if (onFilePreUpload) options.onPreStart = onFilePreUpload;
+    allowedFileNameCharacters
+  });
   if (endpoint) options.endpoint = endpoint;
   if (isCloud) options.endpoint = CLOUD_URL;
   const handleOnRemoveFile = (uploadId, upload) => {
-    const prevFiles = methods.watch(name);
+    const prevFiles = formMethods.getValues(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);
+      try {
+        upload.abort();
+      } catch (e) {
+        console.error("Encountered an issue stopping the file upload");
+      }
+      formMethods.setValue(name, newFiles);
+      client.removeQueries(["upload", upload.file.name]);
       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 files = formMethods.watch(name);
   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_typography3.Typography, { marginBottom: "4px", children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    enableDropArea ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+      label ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_mui_typography4.Typography, { marginBottom: "4px", children: label }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         Dropzone,
         {
           name,
           allowedFileTypes,
           disabled,
+          enableDropArea,
           maxFiles,
           maxSize,
           multiple,
           onChange,
+          onDrop,
           setFileRejections,
-          setTotalSize
+          setTotalSize,
+          validator
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FileTypesMessage, { allowedFileTypes, maxFileSize: maxSize })
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FileTypesMessage, { allowedFileTypes, maxFileSize: maxSize, variant: "caption" }),
+      children
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_mui_layout3.Grid, { container: true, rowSpacing: 3, flexDirection: "column", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_mui_layout3.Grid, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(HeaderMessage, { maxFiles, maxSize }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FileTypesMessage, { allowedFileTypes, variant: "body2" })
+      ] }),
+      children ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_mui_layout3.Grid, { children }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_mui_layout3.Grid, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        Dropzone,
+        {
+          name,
+          allowedFileTypes,
+          disabled,
+          enableDropArea,
+          maxFiles,
+          maxSize,
+          multiple,
+          onChange,
+          onDrop,
+          setFileRejections,
+          setTotalSize,
+          validator
+        }
+      ) })
     ] }),
-    children,
-    fileRejections.length > 0 ? fileRejections.map((rejection) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    fileRejections.length > 0 ? fileRejections.map((rejection) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       ErrorAlert,
       {
         errors: rejection.errors,
@@ -548,12 +668,29 @@ var FileSelector = ({
       },
       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, { size: { xs: 12 }, justifyContent: "end", display: "flex", paddingTop: 2.5, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_mui_button3.Button, { type: "submit", sx: { marginLeft: "auto", marginRight: 0 }, children: "Submit" }) })
-  ] }) }));
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      FileList,
+      {
+        files: files || [],
+        options,
+        onRemoveFile: handleOnRemoveFile,
+        queryOptions,
+        customFileRow,
+        disableRemove
+      }
+    )
+  ] });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Dropzone,
+  ErrorAlert,
+  FileList,
+  FilePickerBtn,
+  FileRow,
   FileSelector,
-  UploadProgressBar
+  FileTypesMessage,
+  HeaderMessage,
+  UploadProgressBar,
+  useUploadCore
 });