/**
 * The intrinsic value data type for a multi field. Used as input for the (homogenous)
 * Array<T> to be managed by the `FieldArray`.
 */
type MultiFieldValue = string | number | null;
export interface RenderFieldProps {
    name: string;
    index: number;
    label: React.ReactNode;
    isReadOnly: boolean;
}
export interface MultiFieldProps<T extends MultiFieldValue> {
    /**
     * The name of the form field/input, used to set/track the field value in the form state.
     */
    name: string;
    /**
     * The value to use for a freshly/newly added item.
     */
    newItemValue: T;
    /**
     * Component taking `RenderFieldProps` to render an individual item/field.`
     */
    renderField: React.FC<RenderFieldProps>;
    /**
     * The (accessible) label for the field - anything that can be rendered.
     *
     * You must always provide a label to ensure the field is accessible to users of
     * assistive technologies.
     */
    label: React.ReactNode;
    /**
     * Required fields get additional markup/styling to indicate this validation requirement.
     */
    isRequired?: boolean;
    /**
     * Readonly fields get marked as such in an accessible manner.
     */
    isReadOnly?: boolean;
    /**
     * Additional description displayed close to the field - use this to document any
     * validation requirements that are crucial to successfully submit the form. More
     * information that is contextual/background typically belongs in a tooltip.
     */
    description?: React.ReactNode;
    /**
     * Optional tooltip to provide additional information that is not crucial but may
     * assist users in filling out the field correctly.
     */
    tooltip?: React.ReactNode;
    /**
     * Optional callback invoked when a new item is added that should receive auto focus.
     *
     * If provided, you receive the Formik field name of the inserted item, e.g. `myField.3`.
     * The return value must be a query selector that can be passed to `document.querySelector`,
     * resolving to an (input) element to focus.
     *
     * You *should* provide a stable reference (with `useCallback`, if needed), but we
     * have taken precautions in case you forget.
     */
    getAutoFocusQuerySelector?: (itemName: string) => string;
}
/**
 * A container for fields that support multiple values, allowing the editing, removing
 * and adding of individual values within a collection. Multifields only support arrays
 * of primitives - for complex objects, use editgrid instead.
 *
 * The outer container renders as a fieldset to indicate the fields inside belong
 * together. The label is used as fieldset legend the describe the collection of fields,
 * and each individual item also gets a (screenreader-only) label with the item index
 * appended as suffix.
 *
 * Adding an item auto-focuses the new item. On first mount/render, if there are no items
 * at all (yet) in the values state, one is added automatically, but the user can remove
 * this item again. This automatic item-insertion does not auto-focus the input.
 *
 * Validation errors (that are item-specific)
 * are displayed close to the item itself, while validation errors for the collection as
 * a whole are positioned all the way at the bottom. Any kind of validation errors styles
 * the fieldset as a whole as being invalid, rather than highlighting only the individual
 * item.
 */
declare function MultiField<T extends MultiFieldValue>({ name, newItemValue, renderField, label, isRequired, isReadOnly, description, tooltip, getAutoFocusQuerySelector, }: MultiFieldProps<T>): import("react/jsx-runtime").JSX.Element;
declare namespace MultiField {
    var displayName: string;
}
export default MultiField;