@availity/mui-file-selector 0.1.3 → 0.2.1

package/CHANGELOG.md

@@ -2,6 +2,30 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [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)
+
+
+### Features
+
+* **mui-file-selector:** add support for dropping files and fix removing ([66af280](https://github.com/Availity/element/commit/66af28076ed7149bc47c6b9758bb9a2e5461f201))
+* **mui-file-selector:** update upload-core ([0da6ec7](https://github.com/Availity/element/commit/0da6ec7672f1d7a884f42d03772ec20249a3309b))
+* pass uploads to onSubmit ([e894489](https://github.com/Availity/element/commit/e8944899a6a6ed4b4bb192a51b707a9aa88b6833))
+
+
+### Bug Fixes
+
+* add better error handling ([c2db0c0](https://github.com/Availity/element/commit/c2db0c0a1d06bebbb03bc38309d65829487717fb))
+* fixes for file selector ([add8801](https://github.com/Availity/element/commit/add88013c18816ccdaeeb9366768089d68aded7f))
+* fixes for tests ([e112880](https://github.com/Availity/element/commit/e11288079f203464f55f35cbaed47f86f4db3755))
+* **mui-file-selector:** update upload-core ([e24b673](https://github.com/Availity/element/commit/e24b67337a8b1a71441c6954e84a6bd3a1b8e323))
+* update upload-core ([e11a6ad](https://github.com/Availity/element/commit/e11a6ad155743afb221739686b608e581099c37a))
+* update upload-core ([5d820db](https://github.com/Availity/element/commit/5d820db3f146e9e0015daa0f5e9a9d9316cd6807))
+
 ## [0.1.3](https://github.com/Availity/element/compare/@availity/mui-file-selector@0.1.2...@availity/mui-file-selector@0.1.3) (2024-12-09)
 
 ### Dependency Updates

package/dist/index.d.mts

@@ -2,13 +2,21 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import Upload from '@availity/upload-core';
 
 type UploadProgressBarProps = {
-    /** The upload instance returned by creating a new Upload via @availity/upload-core. */
+    /**
+     * The upload instance returned by creating a new Upload via @availity/upload-core.
+     */
     upload: Upload;
-    /** Callback function to hook into the onProgress within the Upload instance provided in the upload prop. */
+    /**
+     * Callback function to hook into the onProgress within the Upload instance provided in the upload prop.
+     */
     onProgress?: (upload: Upload) => void;
-    /** Callback function to hook into the onSuccess within the Upload instance provided in the upload prop. */
+    /**
+     * Callback function to hook into the onSuccess within the Upload instance provided in the upload prop.
+     */
     onSuccess?: (upload: Upload) => void;
-    /** Callback function to hook into the onError within the Upload instance provided in the upload prop. */
+    /**
+     * Callback function to hook into the onError within the Upload instance provided in the upload prop.
+     */
     onError?: (upload: Upload) => void;
 };
 declare const UploadProgressBar: ({ upload, onProgress, onError, onSuccess }: UploadProgressBarProps) => react_jsx_runtime.JSX.Element;

package/dist/index.d.ts

@@ -2,13 +2,21 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import Upload from '@availity/upload-core';
 
 type UploadProgressBarProps = {
-    /** The upload instance returned by creating a new Upload via @availity/upload-core. */
+    /**
+     * The upload instance returned by creating a new Upload via @availity/upload-core.
+     */
     upload: Upload;
-    /** Callback function to hook into the onProgress within the Upload instance provided in the upload prop. */
+    /**
+     * Callback function to hook into the onProgress within the Upload instance provided in the upload prop.
+     */
     onProgress?: (upload: Upload) => void;
-    /** Callback function to hook into the onSuccess within the Upload instance provided in the upload prop. */
+    /**
+     * Callback function to hook into the onSuccess within the Upload instance provided in the upload prop.
+     */
     onSuccess?: (upload: Upload) => void;
-    /** Callback function to hook into the onError within the Upload instance provided in the upload prop. */
+    /**
+     * Callback function to hook into the onError within the Upload instance provided in the upload prop.
+     */
     onError?: (upload: Upload) => void;
 };
 declare const UploadProgressBar: ({ upload, onProgress, onError, onSuccess }: UploadProgressBarProps) => react_jsx_runtime.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-file-selector",
-  "version": "0.1.3",
+  "version": "0.2.1",
   "description": "Availity MUI file-selector Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -33,23 +33,24 @@
   },
   "dependencies": {
     "@availity/api-axios": "^9.0.4",
+    "@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",
     "@availity/mui-progress": "^0.4.1",
     "@availity/mui-typography": "^0.2.1",
-    "@availity/upload-core": "^6.1.1",
+    "@availity/upload-core": "7.0.0-alpha.5",
     "@tanstack/react-query": "^4.36.1",
     "react-dropzone": "^11.7.1",
     "react-hook-form": "^7.51.3",
+    "tus-js-client": "4.2.3",
     "uuid": "^9.0.1"
   },
   "devDependencies": {
     "@mui/material": "^5.15.15",
-    "@types/tus-js-client": "^1.8.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "tsup": "^8.0.2",

package/src/lib/Dropzone.test.tsx

@@ -18,7 +18,7 @@ describe('Dropzone', () => {
     render(
       <QueryClientProvider client={client}>
         <TestForm>
-          <Dropzone name="test" bucketId="test" customerId="123" clientId="test" maxSize={1000} />
+          <Dropzone name="test" maxSize={1000} setTotalSize={jest.fn()} />
         </TestForm>
       </QueryClientProvider>
     );

package/src/lib/Dropzone.tsx

@@ -1,13 +1,12 @@
-import { ChangeEvent, MouseEvent, useCallback, useState } from 'react';
-import { useDropzone, FileRejection, DropEvent } from 'react-dropzone';
-import { v4 as uuid } from 'uuid';
+import { Dispatch, MouseEvent, useCallback, ChangeEvent } from 'react';
+import { useDropzone, FileRejection } 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';
-import Upload, { Options } from '@availity/upload-core';
 
 import { FilePickerBtn } from './FilePickerBtn';
+import { useFormContext } from 'react-hook-form';
 
 const outerBoxStyles = {
   backgroundColor: 'background.canvas',
@@ -21,141 +20,158 @@ const innerBoxStyles = {
   height: '100%',
 };
 
-const CLOUD_URL = '/cloud/web/appl/vault/upload/v1/resumable';
+/** Counter for creating unique id */
+const createCounter = () => {
+  let id = 0;
+  const increment = () => (id += 1);
+  return {
+    id,
+    increment,
+  };
+};
+
+const counter = createCounter();
 
 export type DropzoneProps = {
+  /**
+   * Name given to the input field. Used by react-hook-form
+   */
   name: string;
-  bucketId: string;
-  clientId: string;
-  customerId: string;
-  allowedFileNameCharacters?: string;
+  /**
+   * List of allowed file extensions (e.g. ['.pdf', '.doc']). Each extension must start with a dot
+   */
   allowedFileTypes?: `.${string}`[];
-  deliverFileOnSubmit?: boolean;
-  deliveryChannel?: string;
+  /**
+   * Whether the dropzone is disabled
+   */
   disabled?: boolean;
-  endpoint?: string;
-  fileDeliveryMetadata?: Record<string, unknown> | ((file: Upload) => Record<string, unknown>);
-  getDropRejectionMessages?: (fileRejectsions: FileRejection[]) => void;
-  isCloud?: boolean;
+  /**
+   * Maximum number of files that can be uploaded
+   */
   maxFiles?: number;
+  /**
+   * Maximum size of each file in bytes
+   */
   maxSize?: number;
+  /**
+   * Whether multiple file selection is allowed
+   */
   multiple?: boolean;
+  /**
+   * Handler called when the file input's value changes
+   */
   onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+  /**
+   * Handler called when the file picker button is clicked
+   */
   onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-  // onDeliveryError?: (responses: unknown[]) => void;
-  // onDeliverySuccess?: (responses: unknown[]) => void;
-  onFileDelivery?: (upload: Upload) => void;
-  onFilePreUpload?: ((upload: Upload) => boolean)[];
+  /**
+   * Callback to handle rejected files that don't meet validation criteria
+   */
+  setFileRejections?: (fileRejections: (FileRejection & { id: number })[]) => void;
+  /**
+   * Callback to update the total size of all uploaded files
+   */
+  setTotalSize: Dispatch<React.SetStateAction<number>>;
 };
 
+// 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;
+
 export const Dropzone = ({
-  allowedFileNameCharacters,
   allowedFileTypes = [],
-  bucketId,
-  clientId,
-  customerId,
-  deliveryChannel,
-  // deliverFileOnSubmit,
-  fileDeliveryMetadata,
   disabled,
-  endpoint,
-  getDropRejectionMessages,
-  isCloud,
   maxFiles,
   maxSize,
   multiple,
   name,
   onChange,
   onClick,
-  onFilePreUpload,
-  onFileDelivery,
+  setFileRejections,
+  setTotalSize,
 }: DropzoneProps) => {
-  const [totalSize, setTotalSize] = useState(0);
-  const [files, setFiles] = useState<Upload[]>([]);
+  const { setValue, watch } = useFormContext();
 
-  const onDrop = useCallback(
-    (acceptedFiles: File[], fileRejections: FileRejection[], dropEvent: DropEvent) => {
-      // Do something with the files
-      console.log('Dropzone acceptedFiles:', acceptedFiles);
-      console.log('Dropzone fileRejections:', fileRejections);
-      console.log('Dropzone dropEvent:', dropEvent);
-
-      // Verify we have not exceeded max number of files
-      if (maxFiles && acceptedFiles.length > maxFiles) {
-        acceptedFiles.slice(0, Math.max(9, maxFiles));
+  const validator = useCallback(
+    (file: File) => {
+      const previous: File[] = watch(name) ?? [];
+
+      const isDuplicate = previous.some((prev) => prev.name === file.name);
+      if (isDuplicate) {
+        return {
+          code: 'duplicate-name',
+          message: 'A file with this name already exists',
+        };
       }
 
-      const uploads = acceptedFiles.map((file) => {
-        const options: Options = {
-          bucketId,
-          customerId,
-          clientId,
-          fileTypes: allowedFileTypes,
-          maxSize,
-          allowedFileNameCharacters,
+      const hasMaxFiles = maxFiles && previous.length >= maxFiles;
+      if (hasMaxFiles) {
+        return {
+          code: 'too-many-files',
+          message: `Too many files. You may only upload ${maxFiles} file(s).`,
         };
+      }
 
-        if (onFilePreUpload) options.onPreStart = onFilePreUpload;
-        if (endpoint) options.endpoint = endpoint;
-        if (isCloud) options.endpoint = CLOUD_URL;
-
-        const upload = new Upload(file, options);
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        upload.id = `${upload.id}-${uuid()}`;
-
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        if (file.dropRejectionMessage) {
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          upload.errorMessage = file.dropRejectionMessage;
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-        } else if (maxSize && totalSize + newFilesTotalSize + upload.file.size > maxSize) {
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          upload.errorMessage = 'Total documents size is too large';
-        } else {
-          upload.start();
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          newFilesTotalSize += upload.file.size;
-        }
-        if (onFileDelivery) {
-          onFileDelivery(upload);
-        } else if (deliveryChannel && fileDeliveryMetadata) {
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          // upload.onSuccess.push(() => {
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          // if (upload?.references?.[0]) {
-          // allow form to revalidate when upload is complete
-          // setFieldTouched(name, true);
-          // deliver upon upload complete, not form submit
-          // if (!deliverFileOnSubmit) {
-          //   callFileDelivery(upload);
-          // }
-          // }
-          // });
-        }
+      return null;
+    },
+    [maxFiles]
+  );
+
+  const onDrop = useCallback(
+    (acceptedFiles: File[], fileRejections: (FileRejection & { id: number })[]) => {
+      let newSize = 0;
+      for (const file of acceptedFiles) {
+        newSize += file.size;
+      }
+
+      setTotalSize((prev) => prev + newSize);
 
-        return upload;
-      });
+      const previous = watch(name) ?? [];
 
-      // Set uploads somewhere. state?
-      setFiles(files);
+      // Set accepted files to form context
+      setValue(name, previous.concat(acceptedFiles));
 
-      if (getDropRejectionMessages) getDropRejectionMessages(fileRejections);
+      if (fileRejections.length > 0) {
+        for (const rejection of fileRejections) {
+          rejection.id = counter.increment();
+        }
+      }
+
+      if (setFileRejections) setFileRejections(fileRejections);
     },
-    [getDropRejectionMessages]
+    [setFileRejections]
   );
 
-  const { getRootProps, getInputProps } = useDropzone({ onDrop });
-
   const accept = allowedFileTypes.join(',');
 
+  const { getRootProps, getInputProps } = useDropzone({
+    onDrop,
+    maxSize,
+    maxFiles,
+    disabled,
+    multiple,
+    accept,
+    validator,
+  });
+
+  const inputProps = getInputProps({
+    multiple,
+    accept,
+    onChange,
+  });
+
+  const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (inputProps.onChange) {
+      inputProps.onChange(event);
+    }
+  };
+
   return (
     <Box sx={outerBoxStyles} {...getRootProps()}>
       <Box sx={innerBoxStyles}>
@@ -171,11 +187,8 @@ export const Dropzone = ({
               disabled={disabled}
               maxSize={maxSize}
               onClick={onClick}
-              inputProps={getInputProps({
-                multiple,
-                accept,
-                onChange,
-              })}
+              inputProps={inputProps}
+              onChange={handleOnChange}
             />
           </>
         </Stack>

package/src/lib/ErrorAlert.test.tsx

@@ -0,0 +1,11 @@
+import { render, screen } from '@testing-library/react';
+
+import { ErrorAlert } from './ErrorAlert';
+
+describe('ErrorAlert', () => {
+  test('should render error message', () => {
+    render(<ErrorAlert id={0} errors={[{ code: 'test', message: 'example' }]} fileName="file" onClose={jest.fn()} />);
+
+    expect(screen.getByText('Error: file')).toBeDefined();
+  });
+});

package/src/lib/ErrorAlert.tsx

@@ -0,0 +1,46 @@
+import { Alert, AlertTitle } from '@availity/mui-alert';
+import type { FileRejection } from 'react-dropzone';
+
+const codes: Record<string, string> = {
+  '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',
+};
+
+export type ErrorAlertProps = {
+  /**
+   * Array of file rejection errors
+   */
+  errors: FileRejection['errors'];
+  /**
+   * Name of the file that encountered errors
+   */
+  fileName: string;
+  /**
+   * Unique identifier for the error alert
+   */
+  id: number;
+
+  onClose: () => void;
+};
+
+export const ErrorAlert = ({ errors, fileName, id, onClose }: ErrorAlertProps) => {
+  if (errors.length === 0) return null;
+
+  return (
+    <>
+      {errors.map((error) => {
+        return (
+          <Alert severity="error" onClose={onClose} key={`${id}-${error.code}`}>
+            <AlertTitle>
+              {codes[error.code] || 'Error'}: {fileName}
+            </AlertTitle>
+            {error.message}
+          </Alert>
+        );
+      })}
+    </>
+  );
+};

package/src/lib/FileList.test.tsx

@@ -1,16 +1,50 @@
-import { render } from '@testing-library/react';
+import { screen, render, fireEvent, waitFor } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 import { FileList } from './FileList';
 
 describe('FileList', () => {
-  test('should render successfully', () => {
+  test('should render successfully', async () => {
+    const mockFile = new File(['file content'], 'mock.txt', { type: 'text/plain' });
+
     render(
-      <FileList
-        uploads={[]}
-        onRemoveFile={() => {
-          // noop
-        }}
-      />
+      <QueryClientProvider client={new QueryClient()}>
+        <FileList
+          files={[mockFile]}
+          options={{ bucketId: '123', customerId: '123', clientId: '123' }}
+          onRemoveFile={() => {
+            // noop
+          }}
+        />
+      </QueryClientProvider>
     );
+
+    await waitFor(() => {
+      expect(screen.getByText('mock.txt')).toBeDefined();
+    });
+  });
+
+  test('should call onRemoveFile', 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);
+          }}
+        />
+      </QueryClientProvider>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('mock.txt')).toBeDefined();
+    });
+
+    fireEvent.click(screen.getByRole('button'));
+    expect(mockRemove).toHaveBeenCalled();
   });
 });

package/src/lib/FileList.tsx

@@ -1,24 +1,35 @@
-import type Upload from '@availity/upload-core';
+import type { default as Upload, UploadOptions } from '@availity/upload-core';
 import { List, ListItem, ListItemText, ListItemIcon, ListItemButton } from '@availity/mui-list';
 import { DeleteIcon, FileIcon } from '@availity/mui-icon';
 import { Grid } from '@availity/mui-layout';
 
 import { UploadProgressBar } from './UploadProgressBar';
 import { formatBytes, getFileExtIcon } from './util';
+import { useUploadCore } from './useUploadCore';
 
 type FileRowProps = {
-  /** The upload instance returned by creating a new Upload via @availity/upload-core. */
-  upload: Upload;
-  /** Callback called when file is removed. The callback is passed the id of the file that was removed. */
-  onRemoveFile: (id: string) => void;
+  /** The File object containing information about the uploaded file */
+  file: File;
+  /**
+   * Callback function called when a file is removed
+   * @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 for the upload process */
+  options: UploadOptions;
 };
 
-const FileRow = ({ upload, onRemoveFile }: FileRowProps) => {
-  const { ext, icon } = getFileExtIcon(upload.file.name);
+const FileRow = ({ file, options, onRemoveFile }: FileRowProps) => {
+  const { ext, icon } = getFileExtIcon(file.name);
   console.log('ext, icon:', ext, icon);
 
+  const { data: upload } = useUploadCore(file, options);
+
+  if (!upload) return null;
+
   return (
-    <ListItem>
+    <>
       <Grid container spacing={2} alignItems="center" justifyContent="space-between" width="100%">
         <Grid xs={1}>
           <ListItemIcon>
@@ -35,35 +46,45 @@ const FileRow = ({ upload, onRemoveFile }: FileRowProps) => {
           <UploadProgressBar upload={upload} />
         </Grid>
         <Grid xs={1}>
-          <ListItemButton>
-            <ListItemIcon
-              onClick={() => {
-                onRemoveFile(upload.id);
-              }}
-            >
+          <ListItemButton
+            onClick={() => {
+              onRemoveFile(upload.id, upload);
+            }}
+          >
+            <ListItemIcon>
               <DeleteIcon />
             </ListItemIcon>
           </ListItemButton>
         </Grid>
       </Grid>
-    </ListItem>
+    </>
   );
 };
 
 export type FileListProps = {
-  /** List of Upload objects */
-  uploads: Upload[];
-  /** Callback called when file is removed. The callback is passed the id of the file that was removed. */
-  onRemoveFile: (id: string) => void;
+  /**
+   * 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: UploadOptions;
 };
 
-export const FileList = ({ uploads, onRemoveFile }: FileListProps) => {
-  if (uploads.length === 0) return null;
+export const FileList = ({ files, options, onRemoveFile }: FileListProps) => {
+  if (files.length === 0) return null;
 
   return (
     <List>
-      {uploads.map((upload) => {
-        return <FileRow key={upload.id} upload={upload} onRemoveFile={onRemoveFile} />;
+      {files.map((file) => {
+        return <FileRow key={file.name} file={file} options={options} onRemoveFile={onRemoveFile} />;
       })}
     </List>
   );

package/src/lib/FilePickerBtn.test.tsx

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