@payfit/unity-components
Version:
69 lines (68 loc) • 2.95 kB
TypeScript
import { ReactNode } from 'react';
import { LabelProps } from '../../../../core/components/label/Label.js';
import { FileUploadDropzoneInputProps } from './TanstackFileUploadDropzone.js';
export interface FileUploadDropzoneFieldProps extends FileUploadDropzoneInputProps, Pick<LabelProps, 'isRequired' | 'requiredVariant'> {
/** Visible name for the file field. */
label: string;
/** Supplemental guidance displayed above the dropzone. */
helperText?: ReactNode;
/** Additional field content displayed after validation feedback. */
contextualLink?: ReactNode;
}
/**
* Provides a complete labeled file-drop field for a TanStack Form `File[]`
* value.
* FileUploadDropzoneField composes the dropzone input with a Unity field
* label, optional guidance, and validation feedback. Keep a DropzoneLabel and
* DropzoneDescription in `children` so people can identify the drop target.
* @param props - Field content and file-acquisition configuration.
* @param props.label - The visible name for the file field.
* @param props.helperText - Supplemental guidance shown above the dropzone.
* @param props.contextualLink - Additional field content shown after feedback.
* @param props.isRequired - Marks the field label as required.
* @param props.requiredVariant - Controls how the required label indicator appears.
* @see {@link FileUploadDropzoneFieldProps} 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.FileUploadDropzoneField
* acceptedFileTypes={['application/pdf']}
* helperText="Upload the documents needed for review."
* label="Supporting documents"
* >
* <DropzoneLabel>Drop documents here</DropzoneLabel>
* <DropzoneDescription>
* Or choose PDF files from your device.
* </DropzoneDescription>
* </field.FileUploadDropzoneField>
* )}
* </form.AppField>
* </form.Form>
* </form.AppForm>
* )
* }
* ```
* @remarks
* - Render FileUploadDropzoneField inside `form.AppField`.
* - It links `label`, `helperText`, and validation feedback to the target.
* - Its children provide the target's accessible name and drop guidance.
*/
declare function FileUploadDropzoneField({ label, helperText, contextualLink, isRequired, requiredVariant, ...inputProps }: FileUploadDropzoneFieldProps): import('react/jsx-runtime').JSX.Element;
export { FileUploadDropzoneField };