@availity/mui-file-selector 1.0.0 → 1.1.0

package/src/lib/Dropzone.tsx

@@ -1,8 +1,12 @@
-import { Dispatch, MouseEvent, useCallback, ChangeEvent } from 'react';
-import { useDropzone, FileRejection } from 'react-dropzone';
+import { useCallback } from 'react';
+import type { Dispatch, MouseEvent } from 'react';
+import { styled } from '@mui/material/styles';
+import MuiBox from '@mui/material/Box';
+import { useDropzone } from 'react-dropzone';
+import type { DropEvent, FileError, FileRejection } from 'react-dropzone';
 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';
 
@@ -50,6 +54,10 @@ export type DropzoneProps = {
    * Whether the dropzone is disabled
    */
   disabled?: boolean;
+  /**
+   * Whether to enable the dropzone area
+   */
+  enableDropArea?: boolean;
   /**
    * Maximum number of files that can be uploaded
    */
@@ -65,11 +73,15 @@ export type DropzoneProps = {
   /**
    * Handler called when the file input's value changes
    */
-  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+  onChange?: (event: DropEvent) => void;
   /**
    * Handler called when the file picker button is clicked
    */
   onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+  /**
+   * More sophisticated version of "onChange". This is the recommend function to use for changes to the form state
+   */
+  onDrop?: (acceptedFiles: File[], fileRejections: (FileRejection & { id: number })[], event: DropEvent) => void;
   /**
    * Callback to handle rejected files that don't meet validation criteria
    */
@@ -78,58 +90,76 @@ export type DropzoneProps = {
    * Callback to update the total size of all uploaded files
    */
   setTotalSize: Dispatch<React.SetStateAction<number>>;
+  /**
+   * Validation function used for custom validation that is not covered with the other props
+   * */
+  validator?: (file: File) => FileError | FileError[] | null;
 };
 
-// The types below were props used in the availity-react implementation.
-// Perserving this here in case it needs to be added back
-// deliverFileOnSubmit?: boolean;
-// deliveryChannel?: string;
-// fileDeliveryMetadata?: Record<string, unknown> | ((file: Upload) => Record<string, unknown>);
-// onDeliveryError?: (responses: unknown[]) => void;
-// onDeliverySuccess?: (responses: unknown[]) => void;
-// onFileDelivery?: (upload: Upload) => void;
+const DropzoneContainer = styled(Box, { name: 'AvDropzoneContainer', slot: 'root' })({
+  '.MuiDivider-root': {
+    width: '196px',
+    marginLeft: 'auto',
+    marginRight: 'auto',
+  },
+}) as typeof MuiBox;
 
 export const Dropzone = ({
   allowedFileTypes = [],
   disabled,
+  enableDropArea = true,
   maxFiles,
   maxSize,
   multiple,
   name,
   onChange,
   onClick,
+  onDrop,
   setFileRejections,
   setTotalSize,
+  validator,
 }: DropzoneProps) => {
-  const { setValue, watch } = useFormContext();
+  const { getValues, setValue, watch } = useFormContext();
 
-  const validator = useCallback(
+  const handleValidation = useCallback(
     (file: File) => {
       const previous: File[] = watch(name) ?? [];
+      const errors: FileError[] = [];
 
       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 = useCallback(
-    (acceptedFiles: File[], fileRejections: (FileRejection & { id: number })[]) => {
+  const handleOnDrop = useCallback(
+    (acceptedFiles: File[], fileRejections: (FileRejection & { id: number })[], event: DropEvent) => {
       let newSize = 0;
       for (const file of acceptedFiles) {
         newSize += file.size;
@@ -149,6 +179,7 @@ export const Dropzone = ({
       }
 
       if (setFileRejections) setFileRejections(fileRejections);
+      if (onDrop) onDrop(acceptedFiles, fileRejections, event);
     },
     [setFileRejections]
   );
@@ -156,13 +187,13 @@ export const Dropzone = ({
   const accept = allowedFileTypes.join(',');
 
   const { getRootProps, getInputProps } = useDropzone({
-    onDrop,
+    onDrop: handleOnDrop,
     maxSize,
     maxFiles,
     disabled,
     multiple,
     accept,
-    validator,
+    validator: handleValidation,
   });
 
   const inputProps = getInputProps({
@@ -171,18 +202,30 @@ export const Dropzone = ({
     onChange,
   });
 
+  // Remove role and tabIndex for accessibility
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { role, tabIndex, ...rootProps } = getRootProps();
+
   const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (inputProps.onChange) {
       inputProps.onChange(event);
     }
   };
 
-  // Remove role and tabIndex for accessibility
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { role, tabIndex, ...rootProps } = getRootProps();
+  const handleOnClick = (event: MouseEvent<HTMLButtonElement>) => {
+    if (!enableDropArea && rootProps.onClick) rootProps.onClick(event);
+    if (onClick) onClick;
+  };
+
+  const getFieldValue = () => {
+    const field = getValues();
+    return field[name] || [];
+  };
+
+  const hasFiles = getFieldValue().length > 0;
 
-  return (
-    <Box sx={outerBoxStyles} {...rootProps}>
+  return enableDropArea ? (
+    <DropzoneContainer sx={outerBoxStyles} {...rootProps}>
       <Box sx={innerBoxStyles}>
         <Stack spacing={2} alignItems="center" justifyContent="center">
           <>
@@ -190,7 +233,9 @@ export const Dropzone = ({
             <Typography variant="subtitle2" fontWeight="700">
               Drag and Drop Files Here
             </Typography>
-            <Divider>OR</Divider>
+            <Divider flexItem>
+              <Typography variant="subtitle2">OR</Typography>
+            </Divider>
             <FilePickerBtn
               name={name}
               color="primary"
@@ -199,10 +244,25 @@ export const Dropzone = ({
               onClick={onClick}
               inputProps={inputProps}
               onChange={handleOnChange}
-            />
+            >
+              Browse Files
+            </FilePickerBtn>
           </>
         </Stack>
       </Box>
-    </Box>
+    </DropzoneContainer>
+  ) : (
+    <FilePickerBtn
+      name={name}
+      color="tertiary"
+      disabled={disabled}
+      maxSize={maxSize}
+      onClick={handleOnClick}
+      inputProps={inputProps}
+      onChange={handleOnChange}
+      startIcon={<PlusIcon />}
+    >
+      {hasFiles ? 'Add More Files' : 'Add File(s)'}
+    </FilePickerBtn>
   );
 };

package/src/lib/FileList.test.tsx

@@ -44,7 +44,31 @@ describe('FileList', () => {
       expect(screen.getByText('mock.txt')).toBeDefined();
     });
 
-    fireEvent.click(screen.getByRole('button'));
+    fireEvent.click(screen.getByLabelText('remove file'));
     expect(mockRemove).toHaveBeenCalled();
   });
+
+  test('should not display remove button when disableRemove is set to true', async () => {
+    const mockRemove = jest.fn();
+    const mockFile = new File(['file content'], 'mock.txt', { type: 'text/plain' });
+
+    render(
+      <QueryClientProvider client={new QueryClient()}>
+        <FileList
+          files={[mockFile]}
+          options={{ bucketId: '123', customerId: '123', clientId: '123' }}
+          onRemoveFile={(id) => {
+            mockRemove(id);
+          }}
+          disableRemove
+        />
+      </QueryClientProvider>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('mock.txt')).toBeDefined();
+    });
+
+    expect(() => screen.getByLabelText('remove file')).toThrow();
+  });
 });

package/src/lib/FileList.tsx

@@ -7,10 +7,13 @@ import { Divider } from '@availity/mui-divider';
 
 import { UploadProgressBar } from './UploadProgressBar';
 import { formatBytes, getFileExtIcon } from './util';
-import { useUploadCore, Options } from './useUploadCore';
+import { useUploadCore } from './useUploadCore';
+import type { Options, UploadQueryOptions } from './useUploadCore';
 
-type FileRowProps = {
-  /** The File object containing information about the uploaded file */
+export type FileRowProps = {
+  /**
+   * The File object containing information about the uploaded file
+   * */
   file: File;
   /**
    * Callback function called when a file is removed
@@ -18,29 +21,57 @@ type FileRowProps = {
    * @param upload - The Upload instance associated with the file
    */
   onRemoveFile: (id: string, upload: Upload) => void;
-  /** Configuration options for the upload process */
+  /**
+   * Configuration options for the upload call
+   * */
   options: Options;
+  /**
+   * Query options from `react-query` for the upload call
+   * */
+  queryOptions?: UploadQueryOptions;
+  customFileRow?: React.ElementType<{
+    upload?: Upload;
+    options: Options;
+    onRemoveFile: (id: string, upload: Upload) => void;
+  }>;
+  /**
+   * Whether the remove button is disabled
+   * @default false
+   */
+  disableRemove?: boolean;
 };
 
-const FileRow = ({ file, options, onRemoveFile }: FileRowProps) => {
+export const FileRow = ({
+  file,
+  options,
+  onRemoveFile,
+  queryOptions,
+  customFileRow: CustomRow,
+  disableRemove = false,
+}: FileRowProps) => {
   const Icon = getFileExtIcon(file.name);
 
-  const { data: upload } = useUploadCore(file, options);
+  const { data: upload } = useUploadCore(file, options, queryOptions);
+
+  if (CustomRow) return <CustomRow upload={upload} options={options} onRemoveFile={onRemoveFile} />;
 
   if (!upload) return null;
 
   return (
     <ListItem
+      disableGutters
       secondaryAction={
-        <IconButton
-          title="remove file"
-          edge="end"
-          onClick={() => {
-            onRemoveFile(upload.id, upload);
-          }}
-        >
-          <DeleteIcon />
-        </IconButton>
+        !disableRemove && (
+          <IconButton
+            title="remove file"
+            edge="end"
+            onClick={() => {
+              onRemoveFile(upload.id, upload);
+            }}
+          >
+            <DeleteIcon />
+          </IconButton>
+        )
       }
     >
       <Grid container spacing={2} alignItems="center" justifyContent="space-between" width="100%">
@@ -69,25 +100,32 @@ export type FileListProps = {
    * Array of File objects to be displayed in the list
    */
   files: File[];
-  /**
-   * Callback function called when a file is removed from the list
-   * @param id - The unique identifier of the file being removed
-   * @param upload - The Upload instance associated with the file
-   */
-  onRemoveFile: (id: string, upload: Upload) => void;
-  /**
-   * Configuration options applied to all file uploads in the list
-   */
-  options: Options;
-};
+} & Omit<FileRowProps, 'file'>;
 
-export const FileList = ({ files, options, onRemoveFile }: FileListProps) => {
+export const FileList = ({
+  files,
+  options,
+  onRemoveFile,
+  queryOptions,
+  customFileRow,
+  disableRemove,
+}: FileListProps): JSX.Element | null => {
   if (files.length === 0) return null;
 
   return (
     <List>
       {files.map((file) => {
-        return <FileRow key={file.name} file={file} options={options} onRemoveFile={onRemoveFile} />;
+        return (
+          <FileRow
+            key={file.name}
+            file={file}
+            options={options}
+            onRemoveFile={onRemoveFile}
+            queryOptions={queryOptions}
+            customFileRow={customFileRow}
+            disableRemove={disableRemove}
+          />
+        );
       })}
     </List>
   );

package/src/lib/FilePickerBtn.test.tsx

@@ -10,7 +10,9 @@ const TestForm = () => {
 
   return (
     <FormProvider {...methods}>
-      <FilePickerBtn name="test" inputProps={{ ref }} onChange={jest.fn()} />
+      <FilePickerBtn name="test" inputProps={{ ref }} onChange={jest.fn()}>
+        Browse Files
+      </FilePickerBtn>
     </FormProvider>
   );
 };

package/src/lib/FilePickerBtn.tsx

@@ -1,10 +1,10 @@
-import { ChangeEvent, RefObject } from 'react';
+import type { ChangeEvent, RefObject } from 'react';
 import type { DropzoneInputProps } from 'react-dropzone';
-import { useFormContext } from 'react-hook-form';
+import { Controller } from 'react-hook-form';
 import { Button, ButtonProps } from '@availity/mui-button';
 import { Input } from '@availity/mui-form-utils';
 
-type FilePickerBtnProps = {
+export type FilePickerBtnProps = {
   /**
    * Name attribute for the input field, used by react-hook-form for form state management.
    */
@@ -29,7 +29,7 @@ type FilePickerBtnProps = {
 
 export const FilePickerBtn = ({
   name,
-  children = 'Browse Files',
+  children,
   color,
   inputId,
   inputProps = {},
@@ -38,27 +38,29 @@ export const FilePickerBtn = ({
   onClick,
   ...rest
 }: FilePickerBtnProps) => {
-  const { register } = useFormContext();
-
   const { accept, multiple, ref, style, type: inputType } = inputProps;
 
-  const field = register(name);
-
   return (
     <>
-      <Input
-        {...field}
-        onChange={onChange}
-        value=""
-        inputRef={ref}
-        type={inputType}
-        sx={style}
-        inputProps={{
-          accept,
-          size: maxSize ?? undefined,
-          multiple,
-        }}
-        id={inputId}
+      <Controller
+        name={name}
+        defaultValue={[]}
+        render={({ field }) => (
+          <Input
+            {...field}
+            onChange={onChange}
+            value={[]}
+            inputRef={ref}
+            type={inputType}
+            sx={style}
+            inputProps={{
+              accept,
+              size: maxSize ?? undefined,
+              multiple,
+            }}
+            id={inputId}
+          />
+        )}
       />
       <Button color={color} {...rest} onClick={onClick} fullWidth={false}>
         {children}

package/src/lib/FileSelector.stories.tsx

@@ -1,7 +1,14 @@
 // Each exported component in the package should have its own stories file
+import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { FormProvider, useForm } from 'react-hook-form';
+import { QueryClient, QueryClientProvider, useQueryClient } from '@tanstack/react-query';
+import type { default as Upload } from '@availity/upload-core';
 import { Paper } from '@availity/mui-paper';
+import { Alert, AlertProps, AlertTitle } from '@availity/mui-alert';
+import { Grid } from '@availity/mui-layout';
+import { Button } from '@availity/mui-button';
+import Collapse from '@mui/material/Collapse';
 
 import { FileSelector, FileSelectorProps } from './FileSelector';
 
@@ -30,22 +37,77 @@ const meta: Meta<typeof FileSelector> = {
 
 export default meta;
 
+const DismissableAlert = (props: AlertProps) => {
+  const [visible, setVisible] = useState(true);
+
+  const onClose = () => {
+    setVisible(false);
+  };
+
+  return (
+    <Collapse in={visible}>
+      <Alert onClose={onClose} {...props} />
+    </Collapse>
+  );
+};
+
 export const _FileSelector: StoryObj<typeof FileSelector> = {
   render: (props: FileSelectorProps) => {
+    const methods = useForm({
+      defaultValues: {
+        [props.name]: [] as File[],
+      },
+    });
+
+    const client = useQueryClient();
+
+    const files = methods.watch(props.name);
+
+    const handleOnSubmit = (values: Record<string, File[]>) => {
+      if (values[props.name].length === 0) return;
+
+      const queries = client.getQueriesData<Upload>(['upload']);
+      const uploads = [];
+      for (const [, data] of queries) {
+        if (data) uploads.push(data);
+      }
+    };
+
     return (
       <Paper sx={{ padding: '2rem' }}>
-        <FileSelector {...props} />
+        <FormProvider {...methods}>
+          <form onSubmit={methods.handleSubmit(handleOnSubmit)}>
+            <FileSelector {...props}>
+              <DismissableAlert severity="warning">
+                <AlertTitle>Make an Appeal</AlertTitle>
+                This is an example alert. It is not part of the component. `children` you pass to the component will
+                show up here.
+              </DismissableAlert>
+            </FileSelector>
+            {files.length > 0 && (
+              <Grid xs={12} justifyContent="end" display="flex" paddingTop={2.5}>
+                <Button type="submit" sx={{ marginLeft: 'auto', marginRight: 0 }}>
+                  Submit
+                </Button>
+              </Grid>
+            )}
+          </form>
+        </FormProvider>
       </Paper>
     );
   },
   args: {
     name: 'file-selector',
-    allowedFileTypes: [],
+    allowedFileTypes: ['.txt', '.png', '.pdf'],
     clientId: '123',
     customerId: '456',
     bucketId: '789',
-    retryDelays: [],
+    uploadOptions: {
+      retryDelays: [],
+    },
+    maxFiles: 5,
     maxSize: 1 * 1024 * 1024, // 1MB
+    enableDropArea: true,
     isCloud: true,
     multiple: true,
   },

package/src/lib/FileSelector.test.tsx

@@ -1,14 +1,24 @@
+import type { ReactNode } from 'react';
 import { render } from '@testing-library/react';
+import { useForm, FormProvider } from 'react-hook-form';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 import { FileSelector } from './FileSelector';
 
+const TestForm = ({ children }: { children: ReactNode }) => {
+  const methods = useForm();
+
+  return <FormProvider {...methods}>{children}</FormProvider>;
+};
+
 describe('FileSelector', () => {
   test('should render successfully', () => {
     const client = new QueryClient();
     const { getByText } = render(
       <QueryClientProvider client={client}>
-        <FileSelector name="test" bucketId="test" customerId="123" clientId="test" maxSize={1000} />
+        <TestForm>
+          <FileSelector name="test" bucketId="test" customerId="123" clientId="test" maxSize={1000} maxFiles={1} />
+        </TestForm>
       </QueryClientProvider>
     );