@availity/mui-file-selector 1.3.1 → 1.4.0

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.4.0](https://github.com/Availity/element/compare/@availity/mui-file-selector@1.3.2...@availity/mui-file-selector@1.4.0) (2025-04-04)
+
+
+### Features
+
+* **mui-file-selector:** add onProgress to useUploadCore ([6bef795](https://github.com/Availity/element/commit/6bef7950f0e392fdbf7b395f45ed16562cda0295))
+
+## [1.3.2](https://github.com/Availity/element/compare/@availity/mui-file-selector@1.3.1...@availity/mui-file-selector@1.3.2) (2025-03-31)
+
+
+### Bug Fixes
+
+* **mui-file-selector:** check if upload is defined before attempting to render CustomRow ([26d22cc](https://github.com/Availity/element/commit/26d22cc44e18ac9c0fce9ea64c2d8d6c8a4cff47))
+* **mui-file-selector:** update customFileRow type on FileSelector ([8020d04](https://github.com/Availity/element/commit/8020d045d68b744fddd21b8f4953a4fd63c551de))
+
 ## [1.3.1](https://github.com/Availity/element/compare/@availity/mui-file-selector@1.3.0...@availity/mui-file-selector@1.3.1) (2025-03-27)
 
 ### Dependency Updates

package/README.md

@@ -170,6 +170,10 @@ const MyFileUploadComponent = () => {
     // Handle upload error - e.g., show error message, retry upload
   };
 
+  const handleOnProgress = (error) => {
+    // Handle upload error - e.g., show error message, retry upload
+  };
+
   return (
     <FileSelector
       name="documentUpload"
@@ -183,6 +187,7 @@ const MyFileUploadComponent = () => {
       uploadOptions={{
         onSuccess: handleOnSuccess,
         onError: handleOnError,
+        onProgress: handleOnProgress,
       }}
     />
   );

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { MouseEvent, Dispatch, ChangeEvent, RefObject, ReactNode, ElementType } from 'react';
+import { MouseEvent, Dispatch, ChangeEvent, RefObject, ReactNode } from 'react';
 import { DropEvent, FileRejection, FileError, DropzoneInputProps } from 'react-dropzone';
 import Upload, { UploadOptions } from '@availity/upload-core';
 import * as _tanstack_react_query from '@tanstack/react-query';
@@ -87,6 +87,7 @@ declare const ErrorAlert: ({ errors, fileName, id, onClose }: ErrorAlertProps) =
 type Options = {
     onError?: (error: Error) => void;
     onSuccess?: () => void;
+    onProgress?: () => void;
 } & UploadOptions;
 type UploadQueryOptions = UseQueryOptions<Upload, Error, Upload, [string, string, Options]>;
 declare function useUploadCore(file: File, options: Options, queryOptions?: UploadQueryOptions): _tanstack_react_query.UseQueryResult<Upload, Error>;
@@ -205,7 +206,11 @@ type FileSelectorProps = {
     /**
      * Componet to render the File information. This should return a `ListItem`
      */
-    customFileRow?: ElementType<FileListProps>;
+    customFileRow?: React.ElementType<{
+        upload?: Upload;
+        options: Options;
+        onRemoveFile: (id: string, upload: Upload) => void;
+    }>;
     /**
      * Whether to use the cloud upload endpoint
      * When true, uses '/cloud/web/appl/vault/upload/v1/resumable'

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { MouseEvent, Dispatch, ChangeEvent, RefObject, ReactNode, ElementType } from 'react';
+import { MouseEvent, Dispatch, ChangeEvent, RefObject, ReactNode } from 'react';
 import { DropEvent, FileRejection, FileError, DropzoneInputProps } from 'react-dropzone';
 import Upload, { UploadOptions } from '@availity/upload-core';
 import * as _tanstack_react_query from '@tanstack/react-query';
@@ -87,6 +87,7 @@ declare const ErrorAlert: ({ errors, fileName, id, onClose }: ErrorAlertProps) =
 type Options = {
     onError?: (error: Error) => void;
     onSuccess?: () => void;
+    onProgress?: () => void;
 } & UploadOptions;
 type UploadQueryOptions = UseQueryOptions<Upload, Error, Upload, [string, string, Options]>;
 declare function useUploadCore(file: File, options: Options, queryOptions?: UploadQueryOptions): _tanstack_react_query.UseQueryResult<Upload, Error>;
@@ -205,7 +206,11 @@ type FileSelectorProps = {
     /**
      * Componet to render the File information. This should return a `ListItem`
      */
-    customFileRow?: ElementType<FileListProps>;
+    customFileRow?: React.ElementType<{
+        upload?: Upload;
+        options: Options;
+        onRemoveFile: (id: string, upload: Upload) => void;
+    }>;
     /**
      * Whether to use the cloud upload endpoint
      * When true, uses '/cloud/web/appl/vault/upload/v1/resumable'

package/dist/index.js

@@ -660,11 +660,12 @@ var import_react_query = require("@tanstack/react-query");
 var import_upload_core = __toESM(require("@availity/upload-core"));
 function startUpload(file, options) {
   return __async(this, null, function* () {
-    const _a = options, { onSuccess, onError } = _a, uploadOptions = __objRest(_a, ["onSuccess", "onError"]);
+    const _a = options, { onSuccess, onError, onProgress } = _a, uploadOptions = __objRest(_a, ["onSuccess", "onError", "onProgress"]);
     const upload = new import_upload_core.default(file, uploadOptions);
     yield upload.generateId();
     if (onSuccess) upload.onSuccess.push(onSuccess);
     if (onError) upload.onError.push(onError);
+    if (onProgress) upload.onProgress.push(onProgress);
     upload.start();
     return upload;
   });
@@ -692,8 +693,8 @@ var FileRow = ({
 }) => {
   const Icon = getFileExtIcon(file.name);
   const { data: upload } = useUploadCore(file, options, queryOptions);
-  if (CustomRow) return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CustomRow, { upload, options, onRemoveFile });
   if (!upload) return null;
+  if (CustomRow) return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CustomRow, { upload, options, onRemoveFile });
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     import_mui_list3.ListItem,
     {

package/dist/index.mjs

@@ -635,11 +635,12 @@ import { useQuery } from "@tanstack/react-query";
 import Upload from "@availity/upload-core";
 function startUpload(file, options) {
   return __async(this, null, function* () {
-    const _a = options, { onSuccess, onError } = _a, uploadOptions = __objRest(_a, ["onSuccess", "onError"]);
+    const _a = options, { onSuccess, onError, onProgress } = _a, uploadOptions = __objRest(_a, ["onSuccess", "onError", "onProgress"]);
     const upload = new Upload(file, uploadOptions);
     yield upload.generateId();
     if (onSuccess) upload.onSuccess.push(onSuccess);
     if (onError) upload.onError.push(onError);
+    if (onProgress) upload.onProgress.push(onProgress);
     upload.start();
     return upload;
   });
@@ -667,8 +668,8 @@ var FileRow = ({
 }) => {
   const Icon = getFileExtIcon(file.name);
   const { data: upload } = useUploadCore(file, options, queryOptions);
-  if (CustomRow) return /* @__PURE__ */ jsx11(CustomRow, { upload, options, onRemoveFile });
   if (!upload) return null;
+  if (CustomRow) return /* @__PURE__ */ jsx11(CustomRow, { upload, options, onRemoveFile });
   return /* @__PURE__ */ jsxs8(
     ListItem2,
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-file-selector",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "Availity MUI file-selector Component - part of the @availity/element design system",
   "keywords": [
     "react",

package/src/lib/FileList.tsx

@@ -53,10 +53,10 @@ export const FileRow = ({
 
   const { data: upload } = useUploadCore(file, options, queryOptions);
 
-  if (CustomRow) return <CustomRow upload={upload} options={options} onRemoveFile={onRemoveFile} />;
-
   if (!upload) return null;
 
+  if (CustomRow) return <CustomRow upload={upload} options={options} onRemoveFile={onRemoveFile} />;
+
   return (
     <ListItem
       disableGutters
@@ -74,19 +74,19 @@ export const FileRow = ({
         )
       }
     >
-      <Grid container spacing={2} alignItems="center" justifyContent="space-between" width="100%"  flexWrap="wrap">
-        <Grid size={{ xs: "auto" }}>
-          <ListItemIcon sx={{minWidth: '1.5rem'}}>
+      <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 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 size={{ xs: 2 }} sx={{ minWidth: '3rem' }}>
+          <ListItemText sx={{ textAlign: 'end' }}>{formatBytes(upload.file.size)}</ListItemText>
         </Grid>
-        <Grid size={{ xs: 'grow' }} sx={{minWidth: '6rem'}}>
+        <Grid size={{ xs: 'grow' }} sx={{ minWidth: '6rem' }}>
           <UploadProgressBar upload={upload} />
         </Grid>
       </Grid>

package/src/lib/FileSelector.tsx

@@ -66,7 +66,11 @@ export type FileSelectorProps = {
   /**
    * Componet to render the File information. This should return a `ListItem`
    */
-  customFileRow?: ElementType<FileListProps>;
+  customFileRow?: React.ElementType<{
+    upload?: Upload;
+    options: Options;
+    onRemoveFile: (id: string, upload: Upload) => void;
+  }>;
   /**
    * Whether to use the cloud upload endpoint
    * When true, uses '/cloud/web/appl/vault/upload/v1/resumable'

package/src/lib/bs4migration.mdx

@@ -0,0 +1,120 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="BS4 Migration/Upload" />
+
+# Upload Migration
+
+The `Upload` component from `@availity/upload` and `@availity/form-upload` has been renamed to the `FileSelector` component. It still uses `@availity/upload-core` package to do the lifting, however, we have renamed, removed, and added some things.
+
+For more in depth component information, visit:
+
+- [Availity Design Documentation](https://design.availity.com/2e36e50c7/p/121639-file-selector)
+- [Component Documentation](./?path=/docs/components-file-selector-file-selector--docs)
+
+## Key Differences (not exhaustive list)
+
+### Props
+
+#### ✅ New
+
+- `onDrop`: this prop serves as an `onChange` callback. Use it to get access to the files and the change event
+- `disableRemove`: used to prevent removing the file from the list
+- `validator`: allows for custom validation
+- `customFileRow`: pass in your own component to be used in the FileList
+- `queryOptions`: options for the `useQuery` hook
+
+#### ⚠️ Changed
+
+- `max` -> `maxFiles`
+- `showFileDrop` -> `enableDropArea`
+
+#### 🚫 Removed
+
+- `onFileUpload`: this prop has been removed in favor of adding `onProgress`, `onSuccess`, and `onError`. Previously, you were required to add these functions yourself. Now they can be passed directly to the component
+- `buttonText` (use children prop instead)
+- `buttonClassName`
+- `dropZoneText`
+- `component`
+
+### Form Management
+
+- The FileSelector uses `react-hook-form` instead of `Formik`
+- Must wrap component with FormProvider from `react-hook-form`
+- The `react-hook-form` provider maintains the state of the selected files. It does not use `@availity/upload-core`.
+
+## Code Examples
+
+`availity-react` Example:
+
+```tsx
+import { Upload } from '@availity/form-upload';
+import { Form } from '@availity/form';
+
+const UploadForm = () => (
+  <Form initialValues={{ fileUpload: [] }} onSubmit={(values) => console.log(values)}>
+    <Upload
+      name="fileUpload"
+      clientId="my-client-id"
+      bucketId="my-bucket-id"
+      customerId="my-customer-id"
+      maxSize={5 * 1024 * 1024}
+      multiple={true}
+      allowedFileTypes={['.pdf', '.doc', '.docx']}
+    />
+  </Form>
+);
+```
+
+`@availity/element` Example:
+
+```tsx
+import { FileSelector } from '@availity/mui-file-selector';
+import { FormProvider, useForm } from 'react-hook-form';
+
+const UploadForm = () => {
+  const methods = useForm({
+    defaultValues: {
+      fileUpload: [],
+    },
+  });
+
+  const onSubmit = (data) => console.log(data);
+
+  return (
+    <FormProvider {...methods}>
+      <form onSubmit={methods.handleSubmit(onSubmit)}>
+        <FileSelector
+          name="fileUpload"
+          clientId="my-client-id"
+          bucketId="my-bucket-id"
+          customerId="my-customer-id"
+          maxSize={5 * 1024 * 1024}
+          maxFiles={5}
+          multiple={true}
+          allowedFileTypes={['.pdf', '.doc', '.docx']}
+        />
+      </form>
+    </FormProvider>
+  );
+};
+```
+
+## Additional Considerations
+
+### Error Handling
+
+- The new component provides more detailed error feedback
+- Errors are displayed using Element Alert components
+- Custom error handling can be implemented through the validator prop
+
+### File List Display
+
+- Files are now displayed in a MUI List component
+- Can be customized using the customFileRow prop
+- Shows upload progress and status more clearly
+
+### Accessibility
+
+- Improved keyboard navigation
+- Better screen reader support
+- Clear focus indicators

package/src/lib/useUploadCore.tsx

@@ -6,18 +6,20 @@ import type { UploadOptions } from '@availity/upload-core';
 export type Options = {
   onError?: (error: Error) => void;
   onSuccess?: () => void;
+  onProgress?: () => void;
 } & UploadOptions;
 
 export type UploadQueryOptions = UseQueryOptions<Upload, Error, Upload, [string, string, Options]>;
 
 async function startUpload(file: File, options: Options) {
-  const { onSuccess, onError, ...uploadOptions } = options;
+  const { onSuccess, onError, onProgress, ...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);
 
   upload.start();