@availity/mui-file-selector 1.6.5 → 1.7.0

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.7.0](https://github.com/Availity/element/compare/@availity/mui-file-selector@1.6.6...@availity/mui-file-selector@1.7.0) (2025-05-29)
+
+### Dependency Updates
+
+* `mui-form-utils` updated to version `1.6.6`
+* `mui-list` updated to version `1.6.6`
+* `mui-dialog` updated to version `1.6.6`
+* `mui-textfield` updated to version `1.6.6`
+
+### Features
+
+* **mui-file-selector:** update tests and remove unused deps ([46cc9c2](https://github.com/Availity/element/commit/46cc9c23c5d885ecff71e9f252ba080c6c336aed))
+* set uploads in form context instead of files ([6d96ea9](https://github.com/Availity/element/commit/6d96ea900857b085ca3975f3e319091b6ba1d8c9))
+
+## [1.6.6](https://github.com/Availity/element/compare/@availity/mui-file-selector@1.6.5...@availity/mui-file-selector@1.6.6) (2025-05-12)
+
+### Dependency Updates
+
+* `mui-dialog` updated to version `1.6.5`
+* `mui-textfield` updated to version `1.6.5`
 ## [1.6.5](https://github.com/Availity/element/compare/@availity/mui-file-selector@1.6.4...@availity/mui-file-selector@1.6.5) (2025-04-30)
 
 ### Dependency Updates

package/README.md

@@ -46,7 +46,38 @@ npm install @availity/mui-file-selector
 yarn add @availity/mui-file-selector
 ```
 
-### Usage
+### File Selector vs File Selector 2
+
+`<FileSelector />` and `<FileSelector2 />` are two takes on the same functionality.
+At a high level, the difference between the two is the logic for handling
+the upload request. The `<FileSelector />` component utilizes
+`@tanstack/react-query` to handle the upload request logic, while `<FileSelector2 />`
+uses the form state to handle the upload request logic.
+
+#### Which component should I use?
+
+`<FileSelector />` is a more established and battle-tested component. If you
+don't need access to the Upload object, `<FileSelector />` may be a good option
+for you.
+
+`<FileSelector2 />` is slightly more experimental. It maintains feature parity
+with `<FileSelector />`, but can be considered a work in progress. `<FileSelector2 />`
+more closely aligns with our future plans for the `<FileSelector />` component.
+
+#### Future Plans
+
+In a future major release of `@availity/element`, we will consolidate to a single File
+Selector component. You can think of `<FileSelector2 />` as a bridge to get
+there. If you want to continue using the existing `<FileSelector />`, we will
+provide a simple migration path when the consolidation happens.
+
+#### File Selector 2 Benefits
+
+- Easier access to the Upload object
+- Simplified internals
+- Aligns with future development plans
+
+### File Selector Usage
 
 #### Import through @availity/element
 
@@ -280,6 +311,58 @@ const MyComponent = () => {
 export default MyComponent;
 ```
 
+### File Selector 2 Usage
+
+#### Import through @availity/element
+
+```tsx
+import { FileSelector2 } from '@availity/element';
+```
+
+#### Direct import
+
+```tsx
+import { FileSelector2 } from '@availity/mui-file-selector';
+```
+
+#### Basic Example
+
+The `FileSelector2` component must be used inside a `FormProvider` from `react-hook-form`. Each provider has its own state that is necessary for using the component.
+
+```tsx
+import React from 'react';
+import { FileSelector2 } from '@availity/mui-file-selector';
+
+const MyComponent = () => {
+  const methods = useForm({
+    defaultValues: {
+      myFiles: [] as File[],
+    },
+  });
+
+  const uploads = methods.watch(props.name);
 
+  const handleOnSubmit = (values: Record<string, File[]>) => {
+    if (values.myFiles.length === 0) return;
+  };
 
+  return (
+    <FormProvider {...methods}>
+      <form onSubmit={methods.handleSubmit(handleOnSubmit)}>
+        <FileSelector2
+          name="myFiles"
+          bucketId="your-bucket-id"
+          customerId="your-customer-id"
+          clientId="your-client-id"
+          maxSize={5 * 1024 * 1024} // 5MB
+          maxFiles={3}
+          allowedFileTypes={['.pdf', '.doc', '.docx']}
+        />
+      </form>
+    </FormProvider>
+  );
+};
+
+export default MyComponent;
+```
 

package/dist/index.d.mts

@@ -1,5 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { MouseEvent, Dispatch, ChangeEvent, RefObject, ReactNode } from 'react';
+import MuiBox from '@mui/material/Box';
 import { DropEvent, FileRejection, FileError, DropzoneInputProps } from 'react-dropzone';
 import Upload, { UploadOptions } from '@availity/upload-core';
 import * as _tanstack_react_query from '@tanstack/react-query';
@@ -8,6 +9,26 @@ import { OnSuccessPayload } from 'tus-js-client';
 import { ButtonProps } from '@availity/mui-button';
 import { FileRejection as FileRejection$1, DropEvent as DropEvent$1, FileError as FileError$1 } from 'react-dropzone/typings/react-dropzone';
 
+declare const outerBoxStyles: {
+    backgroundColor: string;
+    border: string;
+    borderColor: string;
+    borderRadius: string;
+    padding: string;
+    '&:hover': {
+        backgroundColor: string;
+        borderColor: string;
+    };
+};
+declare const innerBoxStyles: {
+    width: string;
+    height: string;
+};
+/** Counter for creating unique id */
+declare const createCounter: () => {
+    id: number;
+    increment: () => number;
+};
 type DropzoneProps = {
     /**
      * Name given to the input field. Used by react-hook-form
@@ -66,8 +87,22 @@ type DropzoneProps = {
      * */
     validator?: (file: File) => FileError | FileError[] | null;
 };
+declare const DropzoneContainer: typeof MuiBox;
 declare const Dropzone: ({ allowedFileTypes, disabled, enableDropArea, maxFiles, maxSize, multiple, name, onChange, onClick, onDrop, setFileRejections, setTotalSize, validator, }: DropzoneProps) => react_jsx_runtime.JSX.Element;
 
+type Dropzone2Props = DropzoneProps & {
+    uploadOptions: UploadOptions;
+};
+/**
+ * `<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 />`.
+ */
+declare const Dropzone2: ({ allowedFileTypes, disabled, enableDropArea, maxFiles, maxSize, multiple, name, onChange, onClick, onDrop, setFileRejections, setTotalSize, uploadOptions, validator, }: Dropzone2Props) => react_jsx_runtime.JSX.Element;
+
 type ErrorAlertProps = {
     /**
      * Array of file rejection errors
@@ -134,6 +169,36 @@ type FileListProps = {
 } & Omit<FileRowProps, 'file'>;
 declare const FileList: ({ files, options, onRemoveFile, queryOptions, customFileRow, disableRemove, }: FileListProps) => JSX.Element | null;
 
+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.
+ */
+declare const FileRow2: ({ upload, options, onRemoveFile, customFileRow: CustomRow, disableRemove, }: FileRow2Props) => react_jsx_runtime.JSX.Element | null;
+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.
+ */
+declare const FileList2: ({ uploads, options, onRemoveFile, customFileRow, disableRemove, }: FileList2Props) => JSX.Element | null;
+
 type FilePickerBtnProps = {
     /**
      * Name attribute for the input field, used by react-hook-form for form state management.
@@ -160,6 +225,7 @@ type FilePickerBtnProps = {
 } & Omit<ButtonProps, 'onChange'>;
 declare const FilePickerBtn: ({ name, children, color, inputId, inputProps, maxSize, onChange, onClick, ...rest }: FilePickerBtnProps) => react_jsx_runtime.JSX.Element;
 
+declare const CLOUD_URL = "/cloud/web/appl/vault/upload/v1/resumable";
 type FileSelectorProps = {
     /**
      * Name attribute for the form field. Used by react-hook-form for form state management
@@ -283,6 +349,20 @@ type FileSelectorProps = {
 };
 declare const FileSelector: ({ name, allowedFileNameCharacters, allowedFileTypes, bucketId, clientId, children, customSizeMessage, customTypesMessage, customerId, customFileRow, disabled, enableDropArea, endpoint, isCloud, label, maxFiles, maxSize, multiple, onChange, onDrop, onUploadRemove, queryOptions, uploadOptions, validator, disableRemove, }: FileSelectorProps) => react_jsx_runtime.JSX.Element;
 
+type FileSelector2Props = Omit<FileSelectorProps, 'onUploadRemove' | 'queryOptions'> & {
+    onUploadRemove?: (uploads: Upload[], removedUploadId: string) => void;
+};
+/**
+ * `<FileSelector2 />` is the future of the the `<FileSelector />`
+ * component. In a future major release, the `<FileSelector />` and
+ * `<FileSelector2 />` components will be consolidated into a single
+ * component.
+ *
+ * `<FileSelector2 />` removes the reliance on `@tanstack/react-query`. The
+ * `Upload` object can now be accessed from the form state.
+ */
+declare const FileSelector2: ({ name, allowedFileNameCharacters, allowedFileTypes, bucketId, clientId, children, customSizeMessage, customTypesMessage, customerId, customFileRow, disabled, enableDropArea, endpoint, isCloud, label, maxFiles, maxSize, multiple, onChange, onDrop, onUploadRemove, uploadOptions, validator, disableRemove, }: FileSelector2Props) => react_jsx_runtime.JSX.Element;
+
 type FileTypesMessageProps = {
     /**
      * Allowed file type extensions. Each extension should be prefixed with a ".". eg: .txt, .pdf, .png
@@ -336,4 +416,4 @@ type UploadProgressBarProps = {
 };
 declare const UploadProgressBar: ({ upload, onProgress, onError, onSuccess }: UploadProgressBarProps) => react_jsx_runtime.JSX.Element;
 
-export { Dropzone, type DropzoneProps, ErrorAlert, type ErrorAlertProps, FileList, type FileListProps, FilePickerBtn, type FilePickerBtnProps, FileRow, type FileRowProps, FileSelector, type FileSelectorProps, FileTypesMessage, type FileTypesMessageProps, HeaderMessage, type HeaderMessageProps, type Options, UploadProgressBar, type UploadProgressBarProps, type UploadQueryOptions, formatFileTooLarge, useUploadCore };
+export { CLOUD_URL, Dropzone, Dropzone2, type Dropzone2Props, DropzoneContainer, type DropzoneProps, ErrorAlert, type ErrorAlertProps, FileList, FileList2, type FileList2Props, type FileListProps, FilePickerBtn, type FilePickerBtnProps, FileRow, FileRow2, type FileRow2Props, type FileRowProps, FileSelector, FileSelector2, type FileSelector2Props, type FileSelectorProps, FileTypesMessage, type FileTypesMessageProps, HeaderMessage, type HeaderMessageProps, type Options, UploadProgressBar, type UploadProgressBarProps, type UploadQueryOptions, createCounter, formatFileTooLarge, innerBoxStyles, outerBoxStyles, useUploadCore };

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { MouseEvent, Dispatch, ChangeEvent, RefObject, ReactNode } from 'react';
+import MuiBox from '@mui/material/Box';
 import { DropEvent, FileRejection, FileError, DropzoneInputProps } from 'react-dropzone';
 import Upload, { UploadOptions } from '@availity/upload-core';
 import * as _tanstack_react_query from '@tanstack/react-query';
@@ -8,6 +9,26 @@ import { OnSuccessPayload } from 'tus-js-client';
 import { ButtonProps } from '@availity/mui-button';
 import { FileRejection as FileRejection$1, DropEvent as DropEvent$1, FileError as FileError$1 } from 'react-dropzone/typings/react-dropzone';
 
+declare const outerBoxStyles: {
+    backgroundColor: string;
+    border: string;
+    borderColor: string;
+    borderRadius: string;
+    padding: string;
+    '&:hover': {
+        backgroundColor: string;
+        borderColor: string;
+    };
+};
+declare const innerBoxStyles: {
+    width: string;
+    height: string;
+};
+/** Counter for creating unique id */
+declare const createCounter: () => {
+    id: number;
+    increment: () => number;
+};
 type DropzoneProps = {
     /**
      * Name given to the input field. Used by react-hook-form
@@ -66,8 +87,22 @@ type DropzoneProps = {
      * */
     validator?: (file: File) => FileError | FileError[] | null;
 };
+declare const DropzoneContainer: typeof MuiBox;
 declare const Dropzone: ({ allowedFileTypes, disabled, enableDropArea, maxFiles, maxSize, multiple, name, onChange, onClick, onDrop, setFileRejections, setTotalSize, validator, }: DropzoneProps) => react_jsx_runtime.JSX.Element;
 
+type Dropzone2Props = DropzoneProps & {
+    uploadOptions: UploadOptions;
+};
+/**
+ * `<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 />`.
+ */
+declare const Dropzone2: ({ allowedFileTypes, disabled, enableDropArea, maxFiles, maxSize, multiple, name, onChange, onClick, onDrop, setFileRejections, setTotalSize, uploadOptions, validator, }: Dropzone2Props) => react_jsx_runtime.JSX.Element;
+
 type ErrorAlertProps = {
     /**
      * Array of file rejection errors
@@ -134,6 +169,36 @@ type FileListProps = {
 } & Omit<FileRowProps, 'file'>;
 declare const FileList: ({ files, options, onRemoveFile, queryOptions, customFileRow, disableRemove, }: FileListProps) => JSX.Element | null;
 
+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.
+ */
+declare const FileRow2: ({ upload, options, onRemoveFile, customFileRow: CustomRow, disableRemove, }: FileRow2Props) => react_jsx_runtime.JSX.Element | null;
+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.
+ */
+declare const FileList2: ({ uploads, options, onRemoveFile, customFileRow, disableRemove, }: FileList2Props) => JSX.Element | null;
+
 type FilePickerBtnProps = {
     /**
      * Name attribute for the input field, used by react-hook-form for form state management.
@@ -160,6 +225,7 @@ type FilePickerBtnProps = {
 } & Omit<ButtonProps, 'onChange'>;
 declare const FilePickerBtn: ({ name, children, color, inputId, inputProps, maxSize, onChange, onClick, ...rest }: FilePickerBtnProps) => react_jsx_runtime.JSX.Element;
 
+declare const CLOUD_URL = "/cloud/web/appl/vault/upload/v1/resumable";
 type FileSelectorProps = {
     /**
      * Name attribute for the form field. Used by react-hook-form for form state management
@@ -283,6 +349,20 @@ type FileSelectorProps = {
 };
 declare const FileSelector: ({ name, allowedFileNameCharacters, allowedFileTypes, bucketId, clientId, children, customSizeMessage, customTypesMessage, customerId, customFileRow, disabled, enableDropArea, endpoint, isCloud, label, maxFiles, maxSize, multiple, onChange, onDrop, onUploadRemove, queryOptions, uploadOptions, validator, disableRemove, }: FileSelectorProps) => react_jsx_runtime.JSX.Element;
 
+type FileSelector2Props = Omit<FileSelectorProps, 'onUploadRemove' | 'queryOptions'> & {
+    onUploadRemove?: (uploads: Upload[], removedUploadId: string) => void;
+};
+/**
+ * `<FileSelector2 />` is the future of the the `<FileSelector />`
+ * component. In a future major release, the `<FileSelector />` and
+ * `<FileSelector2 />` components will be consolidated into a single
+ * component.
+ *
+ * `<FileSelector2 />` removes the reliance on `@tanstack/react-query`. The
+ * `Upload` object can now be accessed from the form state.
+ */
+declare const FileSelector2: ({ name, allowedFileNameCharacters, allowedFileTypes, bucketId, clientId, children, customSizeMessage, customTypesMessage, customerId, customFileRow, disabled, enableDropArea, endpoint, isCloud, label, maxFiles, maxSize, multiple, onChange, onDrop, onUploadRemove, uploadOptions, validator, disableRemove, }: FileSelector2Props) => react_jsx_runtime.JSX.Element;
+
 type FileTypesMessageProps = {
     /**
      * Allowed file type extensions. Each extension should be prefixed with a ".". eg: .txt, .pdf, .png
@@ -336,4 +416,4 @@ type UploadProgressBarProps = {
 };
 declare const UploadProgressBar: ({ upload, onProgress, onError, onSuccess }: UploadProgressBarProps) => react_jsx_runtime.JSX.Element;
 
-export { Dropzone, type DropzoneProps, ErrorAlert, type ErrorAlertProps, FileList, type FileListProps, FilePickerBtn, type FilePickerBtnProps, FileRow, type FileRowProps, FileSelector, type FileSelectorProps, FileTypesMessage, type FileTypesMessageProps, HeaderMessage, type HeaderMessageProps, type Options, UploadProgressBar, type UploadProgressBarProps, type UploadQueryOptions, formatFileTooLarge, useUploadCore };
+export { CLOUD_URL, Dropzone, Dropzone2, type Dropzone2Props, DropzoneContainer, type DropzoneProps, ErrorAlert, type ErrorAlertProps, FileList, FileList2, type FileList2Props, type FileListProps, FilePickerBtn, type FilePickerBtnProps, FileRow, FileRow2, type FileRow2Props, type FileRowProps, FileSelector, FileSelector2, type FileSelector2Props, type FileSelectorProps, FileTypesMessage, type FileTypesMessageProps, HeaderMessage, type HeaderMessageProps, type Options, UploadProgressBar, type UploadProgressBarProps, type UploadQueryOptions, createCounter, formatFileTooLarge, innerBoxStyles, outerBoxStyles, useUploadCore };