@availity/mui-file-selector 1.0.0 → 1.1.1

package/dist/index.mjs

@@ -50,32 +50,25 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 
-// 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 Typography3 } from "@availity/mui-typography";
-
 // src/lib/Dropzone.tsx
 import { useCallback } from "react";
+import { styled } from "@mui/material/styles";
 import { useDropzone } from "react-dropzone";
-import { useFormContext as useFormContext2 } from "react-hook-form";
+import { useFormContext } from "react-hook-form";
 import { Divider } from "@availity/mui-divider";
-import { CloudUploadIcon } from "@availity/mui-icon";
+import { CloudUploadIcon, PlusIcon } 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 { Controller } 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",
+    children,
     color,
     inputId,
     inputProps = {},
@@ -92,25 +85,30 @@ var FilePickerBtn = (_a) => {
     "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
-      })
+      Controller,
+      {
+        name,
+        defaultValue: [],
+        render: ({ field }) => /* @__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 }))
   ] });
@@ -142,43 +140,64 @@ var createCounter = () => {
   };
 };
 var counter = createCounter();
+var DropzoneContainer = styled(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 } = useFormContext2();
-  const validator = useCallback(
+  const { getValues, setValue, watch } = useFormContext();
+  const handleValidation = 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).`
-        };
+        });
+      }
+      if (validator) {
+        const validatorErrors = validator(file);
+        if (validatorErrors) {
+          if (Array.isArray(validatorErrors)) {
+            errors.push(...validatorErrors);
+          } else {
+            errors.push(validatorErrors);
+          }
+        }
       }
-      return null;
+      return errors.length > 0 ? errors : null;
     },
-    [maxFiles]
+    [maxFiles, validator]
   );
-  const onDrop = useCallback(
-    (acceptedFiles, fileRejections) => {
+  const handleOnDrop = useCallback(
+    (acceptedFiles, fileRejections, event) => {
       var _a2;
       let newSize = 0;
       for (const file of acceptedFiles) {
@@ -193,34 +212,44 @@ var Dropzone = ({
         }
       }
       if (setFileRejections) setFileRejections(fileRejections);
+      if (onDrop) onDrop(acceptedFiles, fileRejections, event);
     },
     [setFileRejections]
   );
   const accept = allowedFileTypes.join(",");
   const { getRootProps, getInputProps } = 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__ */ jsx2(Box, __spreadProps(__spreadValues({ sx: outerBoxStyles }, rootProps), { children: /* @__PURE__ */ jsx2(Box, { sx: innerBoxStyles, children: /* @__PURE__ */ jsx2(Stack, { spacing: 2, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsxs2(Fragment2, { 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__ */ jsx2(DropzoneContainer, __spreadProps(__spreadValues({ sx: outerBoxStyles }, rootProps), { children: /* @__PURE__ */ jsx2(Box, { sx: innerBoxStyles, children: /* @__PURE__ */ jsx2(Stack, { spacing: 2, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsxs2(Fragment2, { children: [
     /* @__PURE__ */ jsx2(CloudUploadIcon, { fontSize: "xlarge", color: "secondary" }),
     /* @__PURE__ */ jsx2(Typography, { variant: "subtitle2", fontWeight: "700", children: "Drag and Drop Files Here" }),
-    /* @__PURE__ */ jsx2(Divider, { children: "OR" }),
+    /* @__PURE__ */ jsx2(Divider, { flexItem: true, children: /* @__PURE__ */ jsx2(Typography, { variant: "subtitle2", children: "OR" }) }),
     /* @__PURE__ */ jsx2(
       FilePickerBtn,
       {
@@ -230,10 +259,24 @@ var Dropzone = ({
         maxSize,
         onClick,
         inputProps,
-        onChange: handleOnChange
+        onChange: handleOnChange,
+        children: "Browse Files"
       }
     )
-  ] }) }) }) }));
+  ] }) }) }) })) : /* @__PURE__ */ jsx2(
+    FilePickerBtn,
+    {
+      name,
+      color: "tertiary",
+      disabled,
+      maxSize,
+      onClick: handleOnClick,
+      inputProps,
+      onChange: handleOnChange,
+      startIcon: /* @__PURE__ */ jsx2(PlusIcon, {}),
+      children: hasFiles ? "Add More Files" : "Add File(s)"
+    }
+  );
 };
 
 // src/lib/ErrorAlert.tsx
@@ -363,25 +406,36 @@ function startUpload(file, options) {
     return upload;
   });
 }
-function useUploadCore(file, options) {
+function useUploadCore(file, options, queryOptions) {
   const isQueryEnabled = !!file;
-  return useQuery(["upload", file.name, options], () => startUpload(file, options), {
+  return useQuery(__spreadValues({
+    queryKey: ["upload", file.name, options],
+    queryFn: () => startUpload(file, options),
     enabled: isQueryEnabled,
     retry: false,
     refetchOnWindowFocus: false
-  });
+  }, queryOptions));
 }
 
 // src/lib/FileList.tsx
 import { jsx as jsx5, jsxs as jsxs5 } from "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__ */ jsx5(CustomRow, { upload, options, onRemoveFile });
   if (!upload) return null;
   return /* @__PURE__ */ jsxs5(
     ListItem,
     {
-      secondaryAction: /* @__PURE__ */ jsx5(
+      disableGutters: true,
+      secondaryAction: !disableRemove && /* @__PURE__ */ jsx5(
         IconButton,
         {
           title: "remove file",
@@ -404,27 +458,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__ */ jsx5(List, { children: files.map((file) => {
-    return /* @__PURE__ */ jsx5(FileRow, { file, options, onRemoveFile }, file.name);
+    return /* @__PURE__ */ jsx5(
+      FileRow,
+      {
+        file,
+        options,
+        onRemoveFile,
+        queryOptions,
+        customFileRow,
+        disableRemove
+      },
+      file.name
+    );
   }) });
 };
 
+// src/lib/FileSelector.tsx
+import { useState as useState2 } from "react";
+import { useFormContext as useFormContext2 } from "react-hook-form";
+import { useQueryClient } from "@tanstack/react-query";
+import { Grid as Grid2 } from "@availity/mui-layout";
+import { Typography as Typography4 } from "@availity/mui-typography";
+
 // src/lib/FileTypesMessage.tsx
 import { Typography as Typography2 } from "@availity/mui-typography";
 import { jsxs as jsxs6 } from "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__ */ jsxs6(Typography2, { variant: "caption", children: [
+  const fileTypesMsg = allowedFileTypes.length > 0 ? `Supported file types include: ${allowedFileTypes.join(", ")}` : "All file types allowed.";
+  return /* @__PURE__ */ jsxs6(Typography2, { variant, children: [
     fileSizeMsg,
     fileTypesMsg
   ] });
 };
 
+// src/lib/HeaderMessage.tsx
+import { Typography as Typography3 } from "@availity/mui-typography";
+import { jsxs as jsxs7 } from "react/jsx-runtime";
+var HeaderMessage = ({ maxFiles, maxSize }) => {
+  return /* @__PURE__ */ jsxs7(Typography3, { variant: "h6", children: [
+    "Attach up to ",
+    maxFiles,
+    " file(s), with a maximum individual size of ",
+    formatBytes(maxSize)
+  ] });
+};
+
 // src/lib/FileSelector.tsx
-import { Fragment as Fragment5, jsx as jsx6, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx6, jsxs as jsxs8 } from "react/jsx-runtime";
 var CLOUD_URL = "/cloud/web/appl/vault/upload/v1/resumable";
 var FileSelector = ({
   name,
@@ -434,7 +529,9 @@ var FileSelector = ({
   clientId,
   children,
   customerId,
+  customFileRow,
   disabled = false,
+  enableDropArea = true,
   endpoint,
   isCloud,
   label = "Upload file",
@@ -442,79 +539,94 @@ var FileSelector = ({
   maxSize,
   multiple = true,
   onChange,
-  onSubmit,
-  onSuccess,
-  onError,
-  onFilePreUpload = [],
+  onDrop,
   onUploadRemove,
-  retryDelays
+  queryOptions,
+  uploadOptions,
+  validator,
+  disableRemove
 }) => {
   const [totalSize, setTotalSize] = useState2(0);
   const [fileRejections, setFileRejections] = useState2([]);
   const client = useQueryClient();
-  const methods = useForm({
-    defaultValues: {
-      [name]: []
-    }
-  });
-  const options = {
+  const formMethods = useFormContext2();
+  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__ */ jsx6(FormProvider, __spreadProps(__spreadValues({}, methods), { children: /* @__PURE__ */ jsxs7("form", { onSubmit: methods.handleSubmit(handleOnSubmit), children: [
-    /* @__PURE__ */ jsxs7(Fragment5, { children: [
-      /* @__PURE__ */ jsx6(Typography3, { marginBottom: "4px", children: label }),
+  return /* @__PURE__ */ jsxs8(Fragment5, { children: [
+    enableDropArea ? /* @__PURE__ */ jsxs8(Fragment5, { children: [
+      label ? /* @__PURE__ */ jsx6(Typography4, { marginBottom: "4px", children: label }) : null,
       /* @__PURE__ */ jsx6(
         Dropzone,
         {
           name,
           allowedFileTypes,
           disabled,
+          enableDropArea,
           maxFiles,
           maxSize,
           multiple,
           onChange,
+          onDrop,
           setFileRejections,
-          setTotalSize
+          setTotalSize,
+          validator
         }
       ),
-      /* @__PURE__ */ jsx6(FileTypesMessage, { allowedFileTypes, maxFileSize: maxSize })
+      /* @__PURE__ */ jsx6(FileTypesMessage, { allowedFileTypes, maxFileSize: maxSize, variant: "caption" }),
+      children
+    ] }) : /* @__PURE__ */ jsxs8(Grid2, { container: true, rowSpacing: 3, flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs8(Grid2, { children: [
+        /* @__PURE__ */ jsx6(HeaderMessage, { maxFiles, maxSize }),
+        /* @__PURE__ */ jsx6(FileTypesMessage, { allowedFileTypes, variant: "body2" })
+      ] }),
+      children ? /* @__PURE__ */ jsx6(Grid2, { children }) : null,
+      /* @__PURE__ */ jsx6(Grid2, { children: /* @__PURE__ */ jsx6(
+        Dropzone,
+        {
+          name,
+          allowedFileTypes,
+          disabled,
+          enableDropArea,
+          maxFiles,
+          maxSize,
+          multiple,
+          onChange,
+          onDrop,
+          setFileRejections,
+          setTotalSize,
+          validator
+        }
+      ) })
     ] }),
-    children,
     fileRejections.length > 0 ? fileRejections.map((rejection) => /* @__PURE__ */ jsx6(
       ErrorAlert,
       {
@@ -525,11 +637,28 @@ var FileSelector = ({
       },
       rejection.id
     )) : null,
-    /* @__PURE__ */ jsx6(FileList, { files, options, onRemoveFile: handleOnRemoveFile }),
-    files.length > 0 && /* @__PURE__ */ jsx6(Grid2, { size: { xs: 12 }, justifyContent: "end", display: "flex", paddingTop: 2.5, children: /* @__PURE__ */ jsx6(Button2, { type: "submit", sx: { marginLeft: "auto", marginRight: 0 }, children: "Submit" }) })
-  ] }) }));
+    /* @__PURE__ */ jsx6(
+      FileList,
+      {
+        files: files || [],
+        options,
+        onRemoveFile: handleOnRemoveFile,
+        queryOptions,
+        customFileRow,
+        disableRemove
+      }
+    )
+  ] });
 };
 export {
+  Dropzone,
+  ErrorAlert,
+  FileList,
+  FilePickerBtn,
+  FileRow,
   FileSelector,
-  UploadProgressBar
+  FileTypesMessage,
+  HeaderMessage,
+  UploadProgressBar,
+  useUploadCore
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-file-selector",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "Availity MUI file-selector Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -41,15 +41,15 @@
   },
   "dependencies": {
     "@availity/api-axios": "^10.0.0",
-    "@availity/mui-alert": "^1.0.0",
-    "@availity/mui-button": "^1.0.0",
-    "@availity/mui-divider": "^1.0.0",
-    "@availity/mui-form-utils": "^1.0.0",
-    "@availity/mui-icon": "^1.0.0",
-    "@availity/mui-layout": "^1.0.0",
-    "@availity/mui-list": "^1.0.0",
-    "@availity/mui-progress": "^1.0.0",
-    "@availity/mui-typography": "^1.0.0",
+    "@availity/mui-alert": "^1.0.1",
+    "@availity/mui-button": "^1.0.1",
+    "@availity/mui-divider": "^1.0.1",
+    "@availity/mui-form-utils": "^1.0.1",
+    "@availity/mui-icon": "^1.0.1",
+    "@availity/mui-layout": "^1.0.1",
+    "@availity/mui-list": "^1.0.1",
+    "@availity/mui-progress": "^1.0.1",
+    "@availity/mui-typography": "^1.0.1",
     "@availity/upload-core": "^7.0.1",
     "@tanstack/react-query": "^4.36.1",
     "react-dropzone": "^11.7.1",
@@ -58,7 +58,7 @@
     "uuid": "^9.0.1"
   },
   "devDependencies": {
-    "@availity/mui-paper": "^1.0.0",
+    "@availity/mui-paper": "^1.0.1",
     "@mui/material": "^6.4.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",

package/src/index.ts

@@ -1,2 +1,9 @@
+export * from './lib/Dropzone';
+export * from './lib/ErrorAlert';
+export * from './lib/FileList';
+export * from './lib/FilePickerBtn';
 export * from './lib/FileSelector';
+export * from './lib/FileTypesMessage';
+export * from './lib/HeaderMessage';
 export * from './lib/UploadProgressBar';
+export * from './lib/useUploadCore';

package/src/lib/Dropzone.test.tsx

@@ -11,10 +11,10 @@ const TestForm = ({ children }: { children: ReactNode }) => {
   return <FormProvider {...methods}>{children}</FormProvider>;
 };
 
+const client = new QueryClient();
+
 describe('Dropzone', () => {
   test('should render successfully', () => {
-    const client = new QueryClient();
-
     render(
       <QueryClientProvider client={client}>
         <TestForm>