@react-typed-forms/schemas 16.2.2 → 17.0.0

package/lib/RenderForm.d.ts

@@ -1,14 +1,21 @@
 import { ControlRenderOptions, ControlRenderProps, FormRenderer } from "./controlRender";
-import React, { FC } from "react";
-import { ControlDefinition, FormNode, JsonPath, SchemaDataNode, SchemaField } from "@astroapps/forms-core";
+import React, { FC, MutableRefObject } from "react";
+import { ControlDefinition, ControlDisableType, FormNode, FormNodeUi, FormStateNode, JsonPath, SchemaDataNode, SchemaField } from "@astroapps/forms-core";
 import { Control } from "@react-typed-forms/core";
 export interface RenderFormProps {
     data: SchemaDataNode;
     form: FormNode;
     renderer: FormRenderer;
     options?: ControlRenderOptions;
+    stateRef?: MutableRefObject<FormStateNode | null>;
 }
-export declare function RenderForm({ data, form, renderer, options, }: RenderFormProps): React.ReactNode;
+export declare function RenderForm({ data, form, renderer, options, stateRef, }: RenderFormProps): React.JSX.Element;
+export interface RenderFormNodeProps {
+    node: FormStateNode;
+    renderer: FormRenderer;
+    options?: ControlRenderOptions;
+}
+export declare function RenderFormNode({ node: state, renderer, options, }: RenderFormNodeProps): React.ReactNode;
 /**
  * @deprecated Use RenderForm instead.
  */
@@ -23,7 +30,7 @@ export declare function ControlRenderer({ definition, fields, renderer, options,
     options?: ControlRenderOptions;
     control: Control<any>;
     parentPath?: JsonPath[];
-}): JSX.Element;
+}): React.JSX.Element;
 /**
  * @deprecated Use RenderForm instead.
  */
@@ -32,8 +39,18 @@ export declare function NewControlRenderer({ definition, renderer, options, pare
     renderer: FormRenderer;
     options?: ControlRenderOptions;
     parentDataNode: SchemaDataNode;
-}): JSX.Element;
+}): React.JSX.Element;
 /**
  * @deprecated Use RenderForm instead.
  */
 export declare function useControlRenderer(definition: ControlDefinition, fields: SchemaField[], renderer: FormRenderer, options?: ControlRenderOptions): FC<ControlRenderProps>;
+export declare function useAsyncRunner(): {
+    runAsync: (cb: () => void) => void;
+};
+export declare class DefaultFormNodeUi implements FormNodeUi {
+    protected node: FormStateNode;
+    constructor(node: FormStateNode);
+    ensureVisible(): void;
+    ensureChildVisible(childIndex: number): void;
+    getDisabler(type: ControlDisableType): () => () => void;
+}

package/lib/controlBuilder.d.ts

@@ -1,58 +1,13 @@
-import { AccordionAdornment, ActionControlDefinition, AutocompleteRenderOptions, CheckListRenderOptions, ControlAdornmentType, ControlDefinition, DataControlDefinition, DataExpression, DataMatchExpression, DataRenderType, DateValidator, DisplayControlDefinition, DisplayOnlyRenderOptions, DynamicProperty, EntityExpression, GroupedControlsDefinition, JsonataExpression, JsonataRenderOptions, JsonataValidator, LengthValidator, RadioButtonRenderOptions, RenderOptions, SchemaField, SchemaMap, SchemaNode, TextfieldRenderOptions, ValidatorType } from "@astroapps/forms-core";
+import { ControlDefinition, GroupedControlsDefinition, SchemaField, SchemaMap, SchemaNode } from "@astroapps/forms-core";
 import { ActionRendererProps } from "./types";
-export declare function dataControl(field: string, title?: string | null, options?: Partial<DataControlDefinition>): DataControlDefinition;
-export declare function validatorOptions<A extends {
-    type: string;
-}>(type: ValidatorType): (options: Omit<A, "type">) => A;
-export declare function adornmentOptions<A extends {
-    type: string;
-}>(type: ControlAdornmentType): (options: Omit<A, "type">) => A;
-export declare function renderOptionsFor<A extends RenderOptions>(type: DataRenderType): (options: Omit<A, "type">) => {
-    renderOptions: A;
-};
-export declare const autocompleteOptions: (options: Omit<AutocompleteRenderOptions, "type">) => {
-    renderOptions: AutocompleteRenderOptions;
-};
-export declare const checkListOptions: (options: Omit<CheckListRenderOptions, "type">) => {
-    renderOptions: CheckListRenderOptions;
-};
-export declare const radioButtonOptions: (options: Omit<RadioButtonRenderOptions, "type">) => {
-    renderOptions: RadioButtonRenderOptions;
-};
-export declare const lengthValidatorOptions: (options: Omit<LengthValidator, "type">) => LengthValidator;
-export declare const jsonataValidatorOptions: (options: Omit<JsonataValidator, "type">) => JsonataValidator;
-export declare const dateValidatorOptions: (options: Omit<DateValidator, "type">) => DateValidator;
-export declare const accordionOptions: (options: Omit<AccordionAdornment, "type">) => AccordionAdornment;
-export declare const textfieldOptions: (options: Omit<TextfieldRenderOptions, "type">) => {
-    renderOptions: TextfieldRenderOptions;
-};
-export declare const displayOnlyOptions: (options: Omit<DisplayOnlyRenderOptions, "type">) => {
-    renderOptions: DisplayOnlyRenderOptions;
-};
-export declare const jsonataOptions: (options: Omit<JsonataRenderOptions, "type">) => {
-    renderOptions: JsonataRenderOptions;
-};
-export declare function textDisplayControl(text: string, options?: Partial<DisplayControlDefinition>): DisplayControlDefinition;
-export declare function htmlDisplayControl(html: string, options?: Partial<DisplayControlDefinition>): DisplayControlDefinition;
-export declare function dynamicDefaultValue(expr: EntityExpression): DynamicProperty;
-export declare function dynamicReadonly(expr: EntityExpression): DynamicProperty;
-export declare function dynamicVisibility(expr: EntityExpression): DynamicProperty;
-export declare function dynamicDisabled(expr: EntityExpression): DynamicProperty;
-export declare function fieldExpr(field: string): DataExpression;
-export declare function fieldEqExpr(field: string, value: any): DataMatchExpression;
-export declare function jsonataExpr(expression: string): JsonataExpression;
-export declare function groupedControl(children: ControlDefinition[], title?: string, options?: Partial<GroupedControlsDefinition>): GroupedControlsDefinition;
-export declare function compoundControl(field: string, title: string | undefined, children: ControlDefinition[], options?: Partial<DataControlDefinition>): DataControlDefinition;
-export declare function actionControl(actionText: string, actionId: string, options?: Partial<ActionControlDefinition>): ActionControlDefinition;
 export declare function createAction(actionId: string, onClick: () => void, actionText?: string | null, options?: Partial<ActionRendererProps>): ActionRendererProps;
-export declare const emptyGroupDefinition: GroupedControlsDefinition;
 export declare function useControlDefinitionForSchema(sf: SchemaField[], definition?: GroupedControlsDefinition): GroupedControlsDefinition;
 export interface EditorGroup {
     parent: string;
     group: ControlDefinition;
 }
 export interface CustomRenderOptions {
-    value: string;
+    value?: string;
     name: string;
     fields?: SchemaField[];
     groups?: EditorGroup[];
@@ -66,6 +21,8 @@ export type ControlDefinitionExtension = {
     SchemaValidator?: CustomRenderOptions | CustomRenderOptions[];
     DisplayData?: CustomRenderOptions | CustomRenderOptions[];
     IconReference?: CustomRenderOptions | CustomRenderOptions[];
+    ControlDefinition?: CustomRenderOptions | CustomRenderOptions[];
+    SchemaField?: CustomRenderOptions | CustomRenderOptions[];
 };
 export declare function applyExtensionToSchema<A extends SchemaMap>(schemaMap: A, extension: ControlDefinitionExtension): A;
 export declare function applyExtensionsToSchema<A extends SchemaMap>(schemaMap: A, extensions: ControlDefinitionExtension[]): A;

package/lib/controlRender.d.ts

@@ -1,6 +1,6 @@
 import React, { ComponentType, ElementType, HTMLAttributes, Key, ReactElement, ReactNode } from "react";
-import { Control } from "@react-typed-forms/core";
-import { AdornmentPlacement, ArrayActionOptions, ControlAdornment, ControlDefinition, ControlState, DataControlDefinition, DisplayData, FieldOption, FormContextOptions, FormNode, FormState, GroupRenderOptions, JsonPath, RenderOptions, SchemaDataNode, SchemaField, SchemaInterface } from "@astroapps/forms-core";
+import { ChangeListenerFunc, Control } from "@react-typed-forms/core";
+import { AdornmentPlacement, ArrayActionOptions, CheckEntryClasses, ChildNodeSpec, ControlAdornment, ControlDefinition, DataControlDefinition, DisplayData, FieldOption, FormStateNode, GroupRenderOptions, JsonPath, RenderOptions, SchemaDataNode, SchemaField, SchemaInterface } from "@astroapps/forms-core";
 import { ControlClasses } from "./util";
 import { ActionRendererProps, ControlActionHandler, ControlDataContext, RunExpression } from "./types";
 export interface HtmlIconProperties {
@@ -25,6 +25,7 @@ export interface HtmlDivProperties {
     html?: string;
     nativeRef?: (e: HTMLElement | null) => void;
     inline?: boolean;
+    role?: string;
 }
 export interface HtmlInputProperties {
     id?: string;
@@ -42,6 +43,8 @@ export interface HtmlInputProperties {
     inputRef?: (e: HTMLElement | null) => void;
     onChangeValue?: (value: string) => void;
     onChangeChecked?: (checked: boolean) => void;
+    "aria-describedby"?: string;
+    "aria-invalid"?: boolean;
 }
 export interface HtmlButtonProperties {
     className?: string;
@@ -55,6 +58,31 @@ export interface HtmlButtonProperties {
     notWrapInText?: boolean;
     androidRippleColor?: string;
     nonTextContent?: boolean;
+    "aria-expanded"?: boolean;
+    "aria-controls"?: string;
+}
+export interface CheckRendererOptions {
+    className?: string;
+    entryClass?: string;
+    checkClass?: string;
+    labelClass?: string;
+    entryWrapperClass?: string;
+    selectedClass?: string;
+    notSelectedClass?: string;
+}
+export interface CheckButtonsProps {
+    id?: string;
+    className?: string;
+    options?: FieldOption[] | null;
+    control: Control<any>;
+    classes: CheckRendererOptions;
+    controlClasses?: CheckEntryClasses;
+    readonly?: boolean;
+    type: "checkbox" | "radio";
+    isChecked: (c: Control<any>, o: FieldOption) => boolean;
+    setChecked: (c: Control<any>, o: FieldOption, checked: boolean) => void;
+    entryAdornment?: (c: FieldOption, i: number, selected: boolean) => ReactNode;
+    renderer: FormRenderer;
 }
 export interface HtmlComponents {
     Div: ComponentType<HtmlDivProperties>;
@@ -65,6 +93,7 @@ export interface HtmlComponents {
     B: ElementType<HTMLAttributes<HTMLElement>>;
     H1: ElementType<HTMLAttributes<HTMLElement>>;
     Input: ComponentType<HtmlInputProperties>;
+    CheckButtons: ComponentType<CheckButtonsProps>;
 }
 /**
  * Interface for rendering different types of form controls.
@@ -133,13 +162,14 @@ export interface FormRenderer {
      */
     renderLabelText: (props: ReactNode) => ReactNode;
     html: HtmlComponents;
+    resolveChildren(c: FormStateNode): ChildNodeSpec[];
 }
 export interface AdornmentProps {
     adornment: ControlAdornment;
     dataContext: ControlDataContext;
     runExpression?: RunExpression;
     designMode?: boolean;
-    formOptions: FormContextOptions;
+    formNode: FormStateNode;
 }
 export declare const AppendAdornmentPriority = 0;
 export declare const WrapAdornmentPriority = 1000;
@@ -153,13 +183,15 @@ export interface ArrayRendererProps {
     required: boolean;
     removeAction?: (elemIndex: number) => ActionRendererProps;
     editAction?: (elemIndex: number) => ActionRendererProps;
-    renderElement: (elemIndex: number, wrapEntry: (children: ReactNode) => ReactNode) => ReactNode;
-    arrayControl: Control<any[] | undefined | null>;
+    renderElement: (elemIndex: number, wrapEntry: (key: Key, children: ReactNode) => ReactNode) => ReactNode;
+    arrayControl?: Control<any[] | undefined | null>;
+    getElementCount(): number;
     className?: string;
     style?: React.CSSProperties;
     min?: number | null;
     max?: number | null;
     disabled?: boolean;
+    childOverrideClass?: string | null;
 }
 export interface Visibility {
     visible: boolean;
@@ -173,6 +205,7 @@ export interface RenderedLayout {
     label?: ReactNode;
     children?: ReactNode;
     errorControl?: Control<any>;
+    errorId?: string;
     className?: string;
     style?: React.CSSProperties;
     wrapLayout: (layout: ReactElement) => ReactElement;
@@ -191,6 +224,7 @@ export interface VisibilityRendererProps extends RenderedControl {
 export interface ControlLayoutProps {
     label?: LabelRendererProps;
     errorControl?: Control<any>;
+    errorId?: string;
     adornments?: AdornmentRenderer[];
     children?: ReactNode;
     processLayout?: (props: ControlLayoutProps) => ControlLayoutProps;
@@ -277,14 +311,12 @@ export interface DisplayRendererProps {
     inline?: boolean;
 }
 export interface ParentRendererProps {
-    formNode: FormNode;
-    state: ControlState;
+    formNode: FormStateNode;
     renderChild: ChildRenderer;
     className?: string;
     textClass?: string;
     style?: React.CSSProperties;
     dataContext: ControlDataContext;
-    getChildState(node: FormNode, parent?: SchemaDataNode): ControlState;
     runExpression: RunExpression;
     designMode?: boolean;
     actionOnClick?: ControlActionHandler;
@@ -306,6 +338,7 @@ export interface DataRendererProps extends ParentRendererProps {
     dataNode: SchemaDataNode;
     displayOnly: boolean;
     inline: boolean;
+    errorId: string;
 }
 export interface ControlRenderProps {
     control: Control<any>;
@@ -313,7 +346,6 @@ export interface ControlRenderProps {
 }
 export type CreateDataProps = (controlProps: RenderLayoutProps, definition: DataControlDefinition, control: Control<any>) => DataRendererProps;
 export interface ControlRenderOptions extends ControlClasses {
-    formState?: FormState;
     useDataHook?: (c: ControlDefinition) => CreateDataProps;
     actionOnClick?: ControlActionHandler;
     customDisplay?: (customId: string, displayProps: DisplayRendererProps) => ReactNode;
@@ -326,11 +358,10 @@ export interface ControlRenderOptions extends ControlClasses {
     clearHidden?: boolean;
     stateKey?: string;
     schemaInterface?: SchemaInterface;
-    variables?: Record<string, any>;
+    variables?: (changes: ChangeListenerFunc<any>) => Record<string, any>;
 }
-export declare function defaultDataProps({ formOptions, style, allowedOptions, schemaInterface, styleClass, textClass: tc, displayOnly, inline, ...props }: RenderLayoutProps, definition: DataControlDefinition, control: Control<any>): DataRendererProps;
+export declare function defaultDataProps({ formNode, style, schemaInterface, styleClass, textClass: tc, displayOnly, inline, ...props }: RenderLayoutProps, definition: DataControlDefinition, control: Control<any>): DataRendererProps;
 export interface ChildRendererOptions {
-    parentDataNode?: SchemaDataNode;
     inline?: boolean;
     displayOnly?: boolean;
     styleClass?: string;
@@ -338,22 +369,16 @@ export interface ChildRendererOptions {
     labelClass?: string;
     labelTextClass?: string;
     actionOnClick?: ControlActionHandler;
-    stateKey?: string;
-    variables?: Record<string, any>;
 }
-export type ChildRenderer = (k: Key, child: FormNode, options?: ChildRendererOptions) => ReactNode;
+export type ChildRenderer = (child: FormStateNode, options?: ChildRendererOptions) => ReactNode;
 export interface RenderLayoutProps {
-    formNode: FormNode;
+    formNode: FormStateNode;
     renderer: FormRenderer;
-    state: ControlState;
     renderChild: ChildRenderer;
     createDataProps: CreateDataProps;
-    formOptions: FormContextOptions;
     dataContext: ControlDataContext;
     control?: Control<any>;
     style?: React.CSSProperties;
-    allowedOptions?: any[];
-    getChildState(node: FormNode, parent?: SchemaDataNode): ControlState;
     runExpression: RunExpression;
     actionOnClick?: ControlActionHandler;
     schemaInterface?: SchemaInterface;
@@ -367,7 +392,7 @@ export interface RenderLayoutProps {
     displayOnly?: boolean;
 }
 export declare function renderControlLayout(props: RenderLayoutProps): ControlLayoutProps;
-type MarkupKeys = keyof Omit<RenderedLayout, "errorControl" | "style" | "className" | "wrapLayout" | "readonly" | "disabled" | "inline">;
+type MarkupKeys = keyof Omit<RenderedLayout, "errorControl" | "style" | "className" | "wrapLayout" | "readonly" | "disabled" | "inline" | "errorId">;
 export declare function appendMarkup(k: MarkupKeys, markup: ReactNode): (layout: RenderedLayout) => void;
 export declare function wrapMarkup(k: MarkupKeys, wrap: (ex: ReactNode) => ReactNode): (layout: RenderedLayout) => void;
 export declare function layoutKeyForPlacement(pos: AdornmentPlacement): MarkupKeys;
@@ -380,11 +405,11 @@ export declare function getLengthRestrictions(definition: DataControlDefinition)
     min: number | null | undefined;
     max: number | null | undefined;
 };
-export declare function createArrayActions(control: Control<any[]>, field: SchemaField, options?: ArrayActionOptions): Pick<ArrayRendererProps, "addAction" | "removeAction" | "editAction" | "arrayControl">;
-export declare function applyArrayLengthRestrictions({ arrayControl, min, max, editAction, addAction: aa, removeAction: ra, required, }: Pick<ArrayRendererProps, "addAction" | "removeAction" | "editAction" | "arrayControl" | "min" | "max" | "required">, disable?: boolean): Pick<ArrayRendererProps, "addAction" | "removeAction" | "editAction"> & {
+export declare function createArrayActions(control: Control<any[]>, getElementCount: () => number, field: SchemaField, options?: ArrayActionOptions): Pick<ArrayRendererProps, "addAction" | "removeAction" | "editAction" | "arrayControl" | "getElementCount">;
+export declare function applyArrayLengthRestrictions({ getElementCount, min, max, editAction, addAction: aa, removeAction: ra, required, }: Pick<ArrayRendererProps, "addAction" | "removeAction" | "editAction" | "getElementCount" | "min" | "max" | "required">, disable?: boolean): Pick<ArrayRendererProps, "addAction" | "removeAction" | "editAction"> & {
     addDisabled: boolean;
     removeDisabled: boolean;
 };
-export declare function fieldOptionAdornment(p: DataRendererProps): (o: FieldOption, fieldIndex: number, selected: boolean) => JSX.Element;
+export declare function fieldOptionAdornment(p: DataRendererProps): (o: FieldOption, fieldIndex: number, selected: boolean) => React.ReactNode;
 export declare function lookupChildDataContext(dataContext: ControlDataContext, c: ControlDefinition): ControlDataContext;
 export {};