@availity/mui-file-selector 1.6.5 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-file-selector",
-  "version": "1.6.5",
+  "version": "1.7.0",
   "description": "Availity MUI file-selector Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -40,21 +40,20 @@
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "dependencies": {
-    "@availity/api-axios": "^10.0.3",
+    "@availity/api-axios": "^11.0.0",
     "@availity/mui-alert": "^1.0.6",
     "@availity/mui-button": "^1.1.4",
     "@availity/mui-divider": "^1.0.2",
-    "@availity/mui-form-utils": "^1.3.1",
+    "@availity/mui-form-utils": "^1.3.2",
     "@availity/mui-icon": "^1.1.0",
     "@availity/mui-layout": "^1.0.2",
-    "@availity/mui-list": "^1.0.6",
+    "@availity/mui-list": "^1.0.7",
     "@availity/mui-progress": "^1.0.3",
     "@availity/mui-typography": "^1.0.2",
-    "@availity/upload-core": "^7.1.1",
-    "@tanstack/react-query": "^4.36.1",
+    "@availity/upload-core": "^8.0.0",
     "react-dropzone": "^11.7.1",
     "react-hook-form": "^7.55.0",
-    "tus-js-client": "4.2.3",
+    "tus-js-client": "4.3.1",
     "uuid": "^9.0.1"
   },
   "devDependencies": {

package/src/index.ts

@@ -1,8 +1,11 @@
 export * from './lib/Dropzone';
+export * from './lib/Dropzone2';
 export * from './lib/ErrorAlert';
 export * from './lib/FileList';
+export * from './lib/FileList2';
 export * from './lib/FilePickerBtn';
 export * from './lib/FileSelector';
+export * from './lib/FileSelector2';
 export * from './lib/FileTypesMessage';
 export * from './lib/HeaderMessage';
 export * from './lib/UploadProgressBar';

package/src/lib/Dropzone.tsx

@@ -12,7 +12,7 @@ import { Typography } from '@availity/mui-typography';
 
 import { FilePickerBtn } from './FilePickerBtn';
 
-const outerBoxStyles = {
+export const outerBoxStyles = {
   backgroundColor: 'background.secondary',
   border: '1px dotted',
   borderColor: 'secondary.light',
@@ -24,13 +24,13 @@ const outerBoxStyles = {
   },
 };
 
-const innerBoxStyles = {
+export const innerBoxStyles = {
   width: '100%',
   height: '100%',
 };
 
 /** Counter for creating unique id */
-const createCounter = () => {
+export const createCounter = () => {
   let id = 0;
   const increment = () => (id += 1);
   return {
@@ -96,7 +96,7 @@ export type DropzoneProps = {
   validator?: (file: File) => FileError | FileError[] | null;
 };
 
-const DropzoneContainer = styled(Box, { name: 'AvDropzoneContainer', slot: 'root' })({
+export const DropzoneContainer = styled(Box, { name: 'AvDropzoneContainer', slot: 'root' })({
   '.MuiDivider-root': {
     width: '196px',
     marginLeft: 'auto',

package/src/lib/Dropzone2.test.tsx

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { render, screen } from '@testing-library/react';
+import { useForm, FormProvider } from 'react-hook-form';
+
+import { Dropzone2 } from './Dropzone2';
+
+const TestForm = ({ children }: { children: ReactNode }) => {
+  const methods = useForm();
+
+  return <FormProvider {...methods}>{children}</FormProvider>;
+};
+
+describe('Dropzone', () => {
+  test('should render successfully', () => {
+    render(
+      <TestForm>
+        <Dropzone2
+          name="test"
+          maxSize={1000}
+          setTotalSize={jest.fn()}
+          uploadOptions={{ customerId: '123', clientId: 'test', bucketId: 'abc' }}
+        />
+      </TestForm>
+    );
+
+    expect(screen.getByText('Drag and Drop Files Here')).toBeTruthy();
+  });
+});

package/src/lib/Dropzone2.tsx

@@ -0,0 +1,244 @@
+import { useCallback } from 'react';
+import type { MouseEvent } from 'react';
+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, PlusIcon } from '@availity/mui-icon';
+import { Box, Stack } from '@availity/mui-layout';
+import { Typography } from '@availity/mui-typography';
+import Upload from '@availity/upload-core';
+import type { UploadOptions } from '@availity/upload-core';
+import type { OnSuccessPayload } from 'tus-js-client';
+
+import { FilePickerBtn } from './FilePickerBtn';
+import { dedupeErrors } from './util';
+import { createCounter, DropzoneContainer, innerBoxStyles, outerBoxStyles } from './Dropzone';
+import type { DropzoneProps } from './Dropzone';
+
+const counter = createCounter();
+
+export type Dropzone2Props = DropzoneProps & {
+  uploadOptions: UploadOptions;
+};
+
+type Options = {
+  onError?: (error: Error) => void;
+  onSuccess?: (response: OnSuccessPayload) => void;
+  onProgress?: () => void;
+  onChunkComplete?: (chunkSize: number, bytesAccepted: number, bytesTotal: number | null) => void;
+} & UploadOptions;
+
+async function startUpload(file: File, options: Options) {
+  const { onSuccess, onError, onProgress, onChunkComplete, ...uploadOptions } = options;
+  const upload = new Upload(file, uploadOptions);
+
+  await upload.generateId();
+
+  if (onSuccess) upload.onSuccess.push(onSuccess);
+  if (onError) upload.onError.push(onError);
+  if (onProgress) upload.onProgress.push(onProgress);
+  if (onChunkComplete) upload.onChunkComplete.push(onChunkComplete);
+
+  upload.start();
+
+  return upload;
+}
+
+/**
+ * `<Dropzone2 />` is the future of the the `<Dropzone />` component. In a
+ * future release, the `<Dropzone />` and `<Dropzone2 />` components will be
+ * consolidated into a single component.
+ *
+ * `<Dropzone2 />` adds the `uploadOptions` prop that previously existed on
+ * `<FileSelector />`.
+ */
+export const Dropzone2 = ({
+  allowedFileTypes = [],
+  disabled,
+  enableDropArea = true,
+  maxFiles,
+  maxSize,
+  multiple,
+  name,
+  onChange,
+  onClick,
+  onDrop,
+  setFileRejections,
+  setTotalSize,
+  uploadOptions,
+  validator,
+}: Dropzone2Props) => {
+  const { getValues, setValue, watch } = useFormContext();
+
+  const accept = allowedFileTypes.join(',');
+
+  const handleValidation = useCallback(
+    (file: File) => {
+      const previous: Upload[] = watch(name) ?? [];
+      const errors: FileError[] = [];
+
+      const isDuplicate = previous.some((prev) => prev.file.name === file.name);
+      if (isDuplicate) {
+        errors.push({
+          code: 'duplicate-name',
+          message: 'A file with this name already exists',
+        });
+      }
+
+      const hasMaxFiles = maxFiles && previous.length >= maxFiles;
+      if (hasMaxFiles) {
+        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 errors.length > 0 ? dedupeErrors(errors) : null;
+    },
+    [maxFiles, validator]
+  );
+
+  const handleOnDrop = useCallback(
+    async (acceptedFiles: File[], fileRejections: (FileRejection & { id: number })[], event: DropEvent) => {
+      let newSize = 0;
+      for (const file of acceptedFiles) {
+        newSize += file.size;
+      }
+
+      setTotalSize((prev) => prev + newSize);
+
+      const previous = watch(name) ?? [];
+
+      // Set accepted files to form context
+      const uploads = acceptedFiles.map((file) => startUpload(file, uploadOptions));
+      setValue(name, previous.concat(await Promise.all(uploads)));
+
+      if (fileRejections.length > 0) {
+        const TOO_MANY_FILES_CODE = 'too-many-files';
+        let hasTooManyFiles = false;
+
+        fileRejections = fileRejections.reduce(
+          (acc, rejection) => {
+            const isTooManyFiles = rejection.errors.some((error) => error.code === TOO_MANY_FILES_CODE);
+
+            if (isTooManyFiles) {
+              // Only add the first too-many-files rejection
+              if (!hasTooManyFiles) {
+                hasTooManyFiles = true;
+                acc.push({
+                  ...rejection,
+                  id: counter.increment(),
+                });
+              }
+            } else {
+              // Add all other rejection types normally
+              acc.push({
+                ...rejection,
+                id: counter.increment(),
+              });
+            }
+
+            return acc;
+          },
+          [] as Array<(typeof fileRejections)[0] & { id: number }>
+        );
+      }
+
+      if (setFileRejections) setFileRejections(fileRejections);
+      if (onDrop) onDrop(acceptedFiles, fileRejections, event);
+    },
+    [setFileRejections]
+  );
+
+  const { getRootProps, getInputProps } = useDropzone({
+    onDrop: handleOnDrop,
+    maxSize,
+    maxFiles,
+    disabled,
+    multiple,
+    accept,
+    validator: handleValidation,
+  });
+
+  const inputProps = getInputProps({
+    multiple,
+    accept,
+    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);
+    }
+  };
+
+  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 enableDropArea ? (
+    <DropzoneContainer sx={outerBoxStyles} {...rootProps}>
+      <Box sx={innerBoxStyles}>
+        <Stack spacing={2} alignItems="center" justifyContent="center">
+          <>
+            <CloudUploadIcon fontSize="xlarge" color="secondary" />
+            <Typography variant="subtitle2" fontWeight="700">
+              Drag and Drop Files Here
+            </Typography>
+            <Divider flexItem>
+              <Typography variant="subtitle2">OR</Typography>
+            </Divider>
+            <FilePickerBtn
+              name={name}
+              color="primary"
+              disabled={disabled}
+              maxSize={maxSize}
+              onClick={onClick}
+              inputProps={inputProps}
+              onChange={handleOnChange}
+            >
+              Browse Files
+            </FilePickerBtn>
+          </>
+        </Stack>
+      </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/FileList2.test.tsx

@@ -0,0 +1,73 @@
+import { screen, render, fireEvent, waitFor } from '@testing-library/react';
+
+import { FileList2 } from './FileList2';
+import Upload from '@availity/upload-core';
+
+const options = { bucketId: '123', customerId: '123', clientId: '123' };
+
+describe('FileList2', () => {
+  test('should render successfully', async () => {
+    const mockFile = new File(['file content'], 'mock.txt', { type: 'text/plain' });
+    const upload = new Upload(mockFile, options);
+
+    render(
+      <FileList2
+        uploads={[upload]}
+        options={options}
+        onRemoveFile={() => {
+          // noop
+        }}
+      />
+    );
+
+    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' });
+    const upload = new Upload(mockFile, options);
+
+    render(
+      <FileList2
+        uploads={[upload]}
+        options={options}
+        onRemoveFile={(id) => {
+          mockRemove(id);
+        }}
+      />
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('mock.txt')).toBeDefined();
+    });
+
+    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' });
+    const upload = new Upload(mockFile, options);
+
+    render(
+      <FileList2
+        uploads={[upload]}
+        options={options}
+        onRemoveFile={(id) => {
+          mockRemove(id);
+        }}
+        disableRemove
+      />
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('mock.txt')).toBeDefined();
+    });
+
+    expect(() => screen.getByLabelText('remove file')).toThrow();
+  });
+});

package/src/lib/FileList2.tsx

@@ -0,0 +1,118 @@
+import type { default as Upload } from '@availity/upload-core';
+import { List, ListItem, ListItemText, ListItemIcon } from '@availity/mui-list';
+import { IconButton } from '@availity/mui-button';
+import { DeleteIcon } from '@availity/mui-icon';
+import { Grid } from '@availity/mui-layout';
+import { Divider } from '@availity/mui-divider';
+
+import { UploadProgressBar } from './UploadProgressBar';
+import { formatBytes, getFileExtIcon } from './util';
+
+import type { FileListProps, FileRowProps } from './FileList';
+
+export type FileRow2Props = Omit<FileRowProps, 'file' | 'queryOptions'> & {
+  /**
+   * The File object containing information about the uploaded file
+   * */
+  upload: Upload;
+};
+
+/**
+ * `<FileRow2 />` is the future of the the `<FileRow />` component. In a
+ * future release, the `<FileRow />` and `<FileRow2 />` components will be
+ * consolidated into a single component.
+ *
+ * `<FileRow2 />` replaces the `file` prop with the `upload` prop and
+ * removes the `queryOptions` prop.
+ */
+export const FileRow2 = ({
+  upload,
+  options,
+  onRemoveFile,
+  customFileRow: CustomRow,
+  disableRemove = false,
+}: FileRow2Props) => {
+  const Icon = getFileExtIcon(upload.file.name);
+
+  if (!upload) return null;
+
+  if (CustomRow) return <CustomRow upload={upload} options={options} onRemoveFile={onRemoveFile} />;
+
+  return (
+    <ListItem
+      disableGutters
+      secondaryAction={
+        !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%" flexWrap="wrap">
+        <Grid size={{ xs: 'auto' }}>
+          <ListItemIcon sx={{ minWidth: '1.5rem' }}>
+            <Icon />
+          </ListItemIcon>
+        </Grid>
+        <Grid size={{ xs: 4 }} sx={{ minWidth: '8rem' }}>
+          <ListItemText sx={{ wordBreak: 'break-all' }}>{upload.trimFileName(upload.file.name)}</ListItemText>
+        </Grid>
+        <Grid size={{ xs: 2 }} sx={{ minWidth: '3rem' }}>
+          <ListItemText sx={{ textAlign: 'end' }}>{formatBytes(upload.file.size)}</ListItemText>
+        </Grid>
+        <Grid size={{ xs: 'grow' }} sx={{ minWidth: '6rem' }}>
+          <UploadProgressBar upload={upload} />
+        </Grid>
+      </Grid>
+      <Divider />
+    </ListItem>
+  );
+};
+
+export type FileList2Props = Omit<FileListProps, 'files'> & {
+  /**
+   * Array of File objects to be displayed in the list
+   */
+  uploads: Upload[];
+} & Omit<FileRow2Props, 'upload'>;
+
+/**
+ * `<FileList2 />` is the future of the the `<FileList />` component. In a
+ * future release, the `<FileList />` and `<FileList2 />` components will
+ * be consolidated into a single component.
+ *
+ * `<FileList2 />` replaces the `files` prop with the `uploads` prop.
+ */
+export const FileList2 = ({
+  uploads,
+  options,
+  onRemoveFile,
+  customFileRow,
+  disableRemove,
+}: FileList2Props): JSX.Element | null => {
+  if (uploads.length === 0) return null;
+
+  return (
+    <List>
+      {uploads.map((upload) => {
+        return (
+          <FileRow2
+            key={upload.id}
+            upload={upload}
+            options={options}
+            onRemoveFile={onRemoveFile}
+            customFileRow={customFileRow}
+            disableRemove={disableRemove}
+          />
+        );
+      })}
+    </List>
+  );
+};

package/src/lib/FileSelector.tsx

@@ -15,7 +15,7 @@ import { FileTypesMessage } from './FileTypesMessage';
 import { HeaderMessage } from './HeaderMessage';
 import type { Options, UploadQueryOptions } from './useUploadCore';
 
-const CLOUD_URL = '/cloud/web/appl/vault/upload/v1/resumable';
+export const CLOUD_URL = '/cloud/web/appl/vault/upload/v1/resumable';
 
 export type FileSelectorProps = {
   /**