@dynamic-field-kit/react 1.3.0 → 1.5.0

package/dist/index.d.ts

@@ -1,7 +1,6 @@
 import React, { ReactNode, ComponentType } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { FieldTypeKey, Properties, FieldDescription, FieldTypeMap, FieldRendererProps } from '@dynamic-field-kit/core';
-export { FieldDescription, FieldRendererProps, FieldTypeKey } from '@dynamic-field-kit/core';
+import { FieldTypeKey, Properties, FieldDescription, LayoutConfig, ValidationResult, FieldRendererProps, FieldTypeMap } from '@dynamic-field-kit/core';
+export { FieldDescription, FieldRegistry, FieldRendererProps, FieldTypeKey, LayoutConfig, ValidationResult, resolveDisabled, resolveOptions, resolveReadOnly, validateField, validateFieldAsync, validateFields, validateFieldsAsync, validators } from '@dynamic-field-kit/core';
 
 type LayoutRenderer<C = unknown> = (props: {
     children: React.ReactNode;
@@ -14,43 +13,106 @@ declare class LayoutRegistry {
 }
 declare const layoutRegistry: LayoutRegistry;
 
-type BaseLayout = 'column' | 'row' | {
-    type: 'grid';
-    columns?: number;
-    gap?: number;
-};
-type LayoutConfig = BaseLayout | {
-    type: 'responsive';
-    mobile: BaseLayout;
-    desktop: BaseLayout;
-};
-
 interface Props$2<T extends FieldTypeKey> {
     type: T;
     value?: unknown;
     onChange?: (value: unknown) => void;
+    onBlur?: () => void;
     label?: string;
     options?: Properties[];
     className?: string;
     description?: ReactNode;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    touched?: boolean;
+    dirty?: boolean;
+    error?: string | string[];
+    id?: string;
+    ariaInvalid?: boolean;
+    ariaDescribedBy?: string;
+    ariaRequired?: boolean;
+    /** Extra, framework-agnostic props forwarded verbatim to the renderer. */
+    extraProps?: Properties;
 }
-declare const DynamicInputInner: <T extends FieldTypeKey>({ type, value, onChange, label, options, className, description, }: Props$2<T>) => react_jsx_runtime.JSX.Element;
+declare const DynamicInputInner: <T extends FieldTypeKey>({ type, value, onChange, onBlur, label, options, className, description, disabled, readOnly, required, touched, dirty, error, id, ariaInvalid, ariaDescribedBy, ariaRequired, extraProps, }: Props$2<T>) => React.JSX.Element;
 declare const DynamicInput: typeof DynamicInputInner;
 
 interface Props$1 {
     fieldDescription: FieldDescription;
     renderInfos: Properties;
+    rootData?: Properties;
+    touched?: boolean;
+    dirty?: boolean;
+    onBlurField?: (key: string) => void;
     onValueChangeField: (value: unknown, key: string) => void;
 }
-declare const FieldInput: React.MemoExoticComponent<({ fieldDescription, renderInfos, onValueChangeField, }: Props$1) => react_jsx_runtime.JSX.Element>;
+declare const FieldInput: React.MemoExoticComponent<({ fieldDescription, renderInfos, rootData, touched, dirty, onBlurField, onValueChangeField, }: Props$1) => React.JSX.Element>;
 
 interface Props {
     fieldDescriptions: FieldDescription[];
     properties?: Properties;
     onChange?: (data: Properties) => void;
     layout?: LayoutConfig;
+    /**
+     * Top-level form data, threaded down through repeatable groups so a nested
+     * field's `appearCondition`/`computeValue` can read the root form. Omitted at
+     * the top level, where the form's own data is the root.
+     */
+    rootData?: Properties;
+    /**
+     * Called with the recursive validation result ({ valid, errors }) on every
+     * change. On the top-level component this covers the whole form (groups
+     * included).
+     */
+    onValidityChange?: (result: ValidationResult) => void;
+    /**
+     * Called with a field's name when it loses focus. Touched state is still
+     * tracked internally either way; this is the hook for driving an external
+     * form store - pass `useDynamicForm`'s `handleBlur` to get its `touched`
+     * map and `validateOnBlur` behaviour.
+     */
+    onBlurField?: (fieldName: string) => void;
+}
+declare const MultiFieldInput: ({ fieldDescriptions, properties, onChange, layout, rootData, onValidityChange, onBlurField, }: Props) => React.JSX.Element;
+
+interface DynamicFormDevToolsProps {
+    data: Properties;
+    errors?: Record<string, string[]>;
+    touched?: Record<string, boolean>;
+    isDirty?: boolean;
+    fields?: FieldDescription[];
+    position?: 'bottom-right' | 'bottom-left';
+}
+declare const DynamicFormDevTools: React.FC<DynamicFormDevToolsProps>;
+
+interface UseDynamicFormOptions {
+    fields: FieldDescription[];
+    initialValues?: Properties;
+    validateOnBlur?: boolean;
+    validateOnChange?: boolean;
 }
-declare const MultiFieldInput: ({ fieldDescriptions, properties, onChange, layout, }: Props) => react_jsx_runtime.JSX.Element;
+interface UseDynamicFormResult {
+    data: Properties;
+    errors: Record<string, string[]>;
+    isValid: boolean;
+    isDirty: boolean;
+    isSubmitting: boolean;
+    isSubmitted: boolean;
+    touched: Record<string, boolean>;
+    setData: React.Dispatch<React.SetStateAction<Properties>>;
+    setFieldValue: (name: string, value: unknown) => void;
+    setFieldTouched: (name: string, isTouched?: boolean) => void;
+    handleChange: (newData: Properties) => void;
+    handleBlur: (fieldName: string) => void;
+    reset: (newValues?: Properties) => void;
+    validate: () => boolean;
+    handleSubmit: (onValid: (data: Properties) => void | Promise<void>, onInvalid?: (errors: Record<string, string[]>) => void) => (e?: React.FormEvent) => Promise<void>;
+}
+declare function useDynamicForm({ fields, initialValues, validateOnBlur, validateOnChange, }: UseDynamicFormOptions): UseDynamicFormResult;
+
+declare const defaultRenderersMap: Record<string, React.FC<FieldRendererProps>>;
+declare function getDefaultRenderer(type: string): React.FC<FieldRendererProps> | undefined;
 
 type ReactFieldRenderer<T = unknown> = ComponentType<FieldRendererProps<T>>;
 interface ReactFieldRegistry {
@@ -59,4 +121,12 @@ interface ReactFieldRegistry {
 }
 declare const fieldRegistry: ReactFieldRegistry;
 
-export { DynamicInput, FieldInput, type LayoutConfig, MultiFieldInput, type ReactFieldRegistry, type ReactFieldRenderer, fieldRegistry, layoutRegistry };
+interface FieldRegistryProviderProps {
+    registry: ReactFieldRegistry;
+    children: React.ReactNode;
+}
+declare const FieldRegistryProvider: ({ registry, children, }: FieldRegistryProviderProps) => React.ReactElement;
+/** The registry for the nearest provider, or the global singleton. */
+declare function useFieldRegistry(): ReactFieldRegistry;
+
+export { DynamicFormDevTools, DynamicInput, FieldInput, FieldRegistryProvider, type FieldRegistryProviderProps, MultiFieldInput, type ReactFieldRegistry, type ReactFieldRenderer, defaultRenderersMap, fieldRegistry, getDefaultRenderer, layoutRegistry, useDynamicForm, useFieldRegistry };