@payfit/unity-components
Version:
53 lines (52 loc) • 2.26 kB
TypeScript
import { FileUploadDropzoneProps } from '../../../../core/components/file-upload-dropzone/FileUploadDropzone.js';
export interface FileUploadDropzoneInputProps extends Omit<FileUploadDropzoneProps, 'name' | 'onDrop' | 'onSelect' | 'state'> {
/** Disables both file selection and file dropping. */
isDisabled?: boolean;
}
/**
* Keeps file drops and picker selections in the same TanStack Form field.
*
* FileUploadDropzoneInput derives its field name, accessible relationships,
* disabled state, and invalid state from the current `AppField`. It replaces
* the field's `File[]` value after a picker selection or file drop.
* @param props - File-acquisition options and the Dropzone target content.
* @param props.children - The icon, label, and description shown in the target.
* @param props.isDisabled - Disables dropping and file selection.
* @see {@link FileUploadDropzoneInputProps} for all supported props.
* @example
* ```tsx
* import {
* DropzoneDescription,
* DropzoneLabel,
* } from '@payfit/unity-components'
* import { useTanstackUnityForm } from '@payfit/unity-components/forms'
*
* export function SupportingDocumentsForm() {
* const form = useTanstackUnityForm({
* defaultValues: { documents: [] as File[] },
* })
*
* return (
* <form.AppForm>
* <form.Form>
* <form.AppField name="documents">
* {field => (
* <field.FileUploadDropzoneInput allowsMultiple>
* <DropzoneLabel>Drop documents here</DropzoneLabel>
* <DropzoneDescription>
* Or choose files from your device.
* </DropzoneDescription>
* </field.FileUploadDropzoneInput>
* )}
* </form.AppField>
* </form.Form>
* </form.AppForm>
* )
* }
* ```
* @remarks
* - Render FileUploadDropzoneInput inside `form.AppField`.
* - Drops update TanStack Form state only; they cannot populate the browser's hidden native input.
* - Use `field.FileUploadDropzoneField` when the dropzone needs its own label, helper text, and validation feedback.
*/
export declare function FileUploadDropzoneInput({ isDisabled, ...props }: FileUploadDropzoneInputProps): import('react/jsx-runtime').JSX.Element;