@devopness/ui-react/dist/src/components/Forms/DynamicField/DynamicField.d.ts

Devopness Design System React Components - Painless essential DevOps to everyone

import { RefObject } from 'react';
/**
 * Supported field types for the DynamicField component.
 * - `text`: Multi-line text area
 * - `string`: Single-line text input
 * - `number`: Numeric input
 * - `boolean`: Boolean select (Yes/No)
 */
type FieldTypes = 'text' | 'boolean' | 'number' | 'string';
/**
 * Optional label configuration for a field.
 */
type LabelProps = {
    /** Field label text */
    value: string;
    /** Whether to show a help tooltip */
    help?: boolean;
    /** Help text content */
    helpValue?: string;
};
/**
 * External control props for managing field state.
 * Uses `any` types to remain agnostic to form libraries (e.g. React Hook Form, Formik, etc.)
 * and support different input types (Input, TextArea, Select) with varying event signatures.
 */
type ExternalControlProps = {
    value?: any;
    onChange?: (...args: any[]) => void;
    onBlur?: () => void;
};
/**
 * Props for the `DynamicField` component.
 */
type DynamicFieldProps = {
    /** Field name */
    name: string;
    /** Whether the field contains sensitive data (e.g. password) */
    sensitive?: boolean;
    /** Placeholder text */
    placeholder?: string;
    /** Validation configuration for the field */
    validation: {
        type: FieldTypes;
        required?: boolean;
        min: number;
        max: number;
    };
    /** Field validation error */
    error?: {
        message: string;
    } | null;
    /** Optional label configuration */
    labelProps?: LabelProps;
    /** Element reference */
    inputRef?: RefObject<HTMLInputElement> | RefObject<HTMLTextAreaElement> | RefObject<HTMLSelectElement> | ((instance: HTMLTextAreaElement | HTMLInputElement | HTMLSelectElement | null) => void);
} & ExternalControlProps;
/**
 * `DynamicField` is a flexible component that dynamically renders
 * different input types (`Input`, `TextArea`, `Select`) based on the given configuration.
 *
 * @example
 * ```tsx
 * <DynamicField
 *   name="age"
 *   value={age}
 *   onChange={setAge}
 *   validation={{ type: 'number', min: 0, max: 100 }}
 *   labelProps={{ value: 'Age' }}
 * />
 * ```
 */
declare const DynamicField: ({ name, sensitive, placeholder, error, labelProps, inputRef, validation: { type }, ...props }: DynamicFieldProps) => import("react/jsx-runtime").JSX.Element;
export { DynamicField };
export type { DynamicFieldProps };