@availity/mui-file-selector 1.0.0 → 1.1.0

package/dist/index.d.ts

@@ -1,6 +1,160 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode, ChangeEvent } from 'react';
+import { MouseEvent, Dispatch, ChangeEvent, RefObject, ReactNode, ElementType } 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';
+import { UseQueryOptions } from '@tanstack/react-query';
+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';
+
+type DropzoneProps = {
+    /**
+     * Name given to the input field. Used by react-hook-form
+     */
+    name: string;
+    /**
+     * List of allowed file extensions (e.g. ['.pdf', '.doc']). Each extension must start with a dot
+     */
+    allowedFileTypes?: `.${string}`[];
+    /**
+     * Whether the dropzone is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether to enable the dropzone area
+     */
+    enableDropArea?: 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: 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
+     */
+    setFileRejections?: (fileRejections: (FileRejection & {
+        id: number;
+    })[]) => void;
+    /**
+     * 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;
+};
+declare const Dropzone: ({ allowedFileTypes, disabled, enableDropArea, maxFiles, maxSize, multiple, name, onChange, onClick, onDrop, setFileRejections, setTotalSize, validator, }: DropzoneProps) => react_jsx_runtime.JSX.Element;
+
+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;
+};
+declare const ErrorAlert: ({ errors, fileName, id, onClose }: ErrorAlertProps) => react_jsx_runtime.JSX.Element | null;
+
+type Options = {
+    onError?: (error: Error) => void;
+    onSuccess?: () => 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>;
+
+type FileRowProps = {
+    /**
+     * 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 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;
+};
+declare const FileRow: ({ file, options, onRemoveFile, queryOptions, customFileRow: CustomRow, disableRemove, }: FileRowProps) => react_jsx_runtime.JSX.Element | null;
+type FileListProps = {
+    /**
+     * Array of File objects to be displayed in the list
+     */
+    files: File[];
+} & Omit<FileRowProps, 'file'>;
+declare const FileList: ({ files, options, onRemoveFile, queryOptions, customFileRow, disableRemove, }: FileListProps) => JSX.Element | null;
+
+type FilePickerBtnProps = {
+    /**
+     * Name attribute for the input field, used by react-hook-form for form state management.
+     */
+    name: string;
+    /**
+     *  Callback function triggered when files are selected through the input.
+     */
+    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Optional ID attribute for the file input element.
+     */
+    inputId?: string;
+    /**
+     * Additional props to customize the underlying input element.
+     */
+    inputProps?: DropzoneInputProps & {
+        ref?: RefObject<HTMLInputElement>;
+    };
+    /**
+     * Maximum allowed size per file in bytes. Files exceeding this size will be rejected.
+     */
+    maxSize?: number;
+} & Omit<ButtonProps, 'onChange'>;
+declare const FilePickerBtn: ({ name, children, color, inputId, inputProps, maxSize, onChange, onClick, ...rest }: FilePickerBtnProps) => react_jsx_runtime.JSX.Element;
 
 type FileSelectorProps = {
     /**
@@ -40,10 +194,18 @@ type FileSelectorProps = {
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Whether to enable the dropzone area
+     */
+    enableDropArea?: boolean;
     /**
      * Custom endpoint URL for file uploads. If not provided, default endpoint will be used
      */
     endpoint?: string;
+    /**
+     * Componet to render the File information. This should return a `ListItem`
+     */
+    customFileRow?: ElementType<FileListProps>;
     /**
      * Whether to use the cloud upload endpoint
      * When true, uses '/cloud/web/appl/vault/upload/v1/resumable'
@@ -57,7 +219,7 @@ type FileSelectorProps = {
     /**
      * Maximum number of files that can be uploaded simultaneously
      */
-    maxFiles?: number;
+    maxFiles: number;
     /**
      * Maximum file size allowed per file in bytes
      * Use Kibi or Mibibytes. eg: 1kb = 1024 bytes; 1mb = 1024kb
@@ -74,37 +236,61 @@ type FileSelectorProps = {
      */
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
     /**
-     * Callback fired when the form is submitted
-     * @param uploads - Array of Upload instances for the submitted files
-     * @param values - Object containing the form values, with files indexed by the name prop
+     *
      */
-    onSubmit?: (uploads: Upload[], values: Record<string, File[]>) => void;
+    onDrop?: (acceptedFiles: File[], fileRejections: (FileRejection$1 & {
+        id: number;
+    })[], event: DropEvent$1) => void;
     /**
-     * Callback fired when a file is successfully uploaded
+     * Callback fired when a file is removed from the upload list
+     * @param files - Array of remaining files
+     * @param removedUploadId - ID of the removed upload
      */
-    onSuccess?: () => void;
+    onUploadRemove?: (files: File[], removedUploadId: string) => void;
+    /**
+     * Query options from `react-query` for the upload call
+     * */
+    queryOptions?: UploadQueryOptions;
     /**
-     * Callback fired when an error occurs during upload
+     * Options that are passed to the Upload class from `@availity/upload-core`
      */
-    onError?: (error: Error) => void;
+    uploadOptions?: Partial<Options>;
     /**
-     * Array of functions to execute before file upload begins.
-     * Each function should return a boolean indicating whether to proceed with the upload.
-     * @default []
+     * Validation function used for custom validation that is not covered with the other props
+     * */
+    validator?: (file: File) => FileError$1 | FileError$1[] | null;
+    /**
+     * Whether the remove button is disabled
+     * @default false
+     */
+    disableRemove?: boolean;
+};
+declare const FileSelector: ({ name, allowedFileNameCharacters, allowedFileTypes, bucketId, clientId, children, customerId, customFileRow, disabled, enableDropArea, endpoint, isCloud, label, maxFiles, maxSize, multiple, onChange, onDrop, onUploadRemove, queryOptions, uploadOptions, validator, disableRemove, }: FileSelectorProps) => react_jsx_runtime.JSX.Element;
+
+type FileTypesMessageProps = {
+    /**
+     * Allowed file type extensions. Each extension should be prefixed with a ".". eg: .txt, .pdf, .png
      */
-    onFilePreUpload?: (() => boolean)[];
+    allowedFileTypes?: `.${string}`[];
     /**
-     * Callback fired when a file is removed from the upload list
-     * @param files - Array of remaining files
-     * @param removedUploadId - ID of the removed upload
+     * Maximum size per file in bytes. This will be formatted. eg: 1024 * 20 = 20 KB
      */
-    onUploadRemove?: (files: File[], removedUploadId: string) => void;
+    maxFileSize?: number;
+    variant?: 'caption' | 'body2';
+};
+declare const FileTypesMessage: ({ allowedFileTypes, maxFileSize, variant, }: FileTypesMessageProps) => react_jsx_runtime.JSX.Element;
+
+type HeaderMessageProps = {
     /**
-     * Array of delays (in milliseconds) between upload retry attempts
+     * Maximum number of files allowed
      */
-    retryDelays?: UploadOptions['retryDelays'];
+    maxFiles: number;
+    /**
+     * Maximum combined total size of all files
+     */
+    maxSize: number;
 };
-declare const FileSelector: ({ name, allowedFileNameCharacters, allowedFileTypes, bucketId, clientId, children, customerId, disabled, endpoint, isCloud, label, maxFiles, maxSize, multiple, onChange, onSubmit, onSuccess, onError, onFilePreUpload, onUploadRemove, retryDelays, }: FileSelectorProps) => react_jsx_runtime.JSX.Element;
+declare const HeaderMessage: ({ maxFiles, maxSize }: HeaderMessageProps) => react_jsx_runtime.JSX.Element;
 
 type UploadProgressBarProps = {
     /**
@@ -126,4 +312,4 @@ type UploadProgressBarProps = {
 };
 declare const UploadProgressBar: ({ upload, onProgress, onError, onSuccess }: UploadProgressBarProps) => react_jsx_runtime.JSX.Element;
 
-export { FileSelector, type FileSelectorProps, UploadProgressBar, type UploadProgressBarProps };
+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, useUploadCore };