@react-typed-forms/schemas 16.2.2 → 17.0.0

package/lib/renderer/elementSelected.d.ts

@@ -0,0 +1,8 @@
+import { Control } from "@react-typed-forms/core";
+import { RenderOptions } from "@astroapps/forms-core";
+import { RunExpression } from "../types";
+export declare function useElementSelectedRenderer({ runExpression, renderOptions, control, }: {
+    runExpression: RunExpression;
+    renderOptions: RenderOptions;
+    control: Control<any>;
+}): Control<boolean>;

package/lib/renderers.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement, ReactNode } from "react";
 import { AdornmentProps, AdornmentRenderer, ArrayRendererProps, ControlLayoutProps, DataRendererProps, DisplayRendererProps, FormRenderer, GroupRendererProps, HtmlComponents, LabelRendererProps, LabelType, RenderedControl, VisibilityRendererProps } from "./controlRender";
-import { AccordionAdornment, ControlAdornment, IconAdornment, OptionalAdornment, RenderOptions, SetFieldAdornment } from "@astroapps/forms-core";
+import { AccordionAdornment, ChildResolverFunc, ControlAdornment, FormStateNode, IconAdornment, OptionalAdornment, RenderOptions, SetFieldAdornment } from "@astroapps/forms-core";
 import { ActionRendererProps } from "./types";
 export interface DefaultRenderers {
     data: DataRendererRegistration;
@@ -26,8 +26,9 @@ export interface DataRendererRegistration {
     renderType?: string | string[];
     options?: boolean;
     collection?: boolean;
-    match?: (props: DataRendererProps, renderOptions: RenderOptions) => boolean;
+    match?: (props: FormStateNode, renderOptions: RenderOptions) => boolean;
     render: (props: DataRendererProps, renderers: FormRenderer) => ReactNode | ((layout: ControlLayoutProps) => ControlLayoutProps);
+    resolveChildren?: ChildResolverFunc;
 }
 export interface LabelRendererRegistration {
     type: "label";
@@ -38,6 +39,7 @@ export interface ActionRendererRegistration {
     type: "action";
     actionType?: string | string[];
     render: (props: ActionRendererProps, renderers: FormRenderer) => ReactElement;
+    resolveChildren?: ChildResolverFunc;
 }
 export interface ArrayRendererRegistration {
     type: "array";
@@ -47,11 +49,13 @@ export interface GroupRendererRegistration {
     type: "group";
     renderType?: string | string[];
     render: (props: GroupRendererProps, renderers: FormRenderer) => ReactElement | ((layout: ControlLayoutProps) => ControlLayoutProps);
+    resolveChildren?: ChildResolverFunc;
 }
 export interface DisplayRendererRegistration {
     type: "display";
     renderType?: string | string[];
     render: (props: DisplayRendererProps, renderers: FormRenderer) => ReactElement;
+    resolveChildren?: ChildResolverFunc;
 }
 export interface AdornmentRendererRegistration {
     type: "adornment";

package/lib/types.d.ts

@@ -1,6 +1,6 @@
-import { ActionStyle, EntityExpression, FormContextData, IconPlacement, IconReference, SchemaDataNode, SchemaInterface } from "@astroapps/forms-core";
+import { ActionStyle, EntityExpression, IconPlacement, IconReference, SchemaDataNode, SchemaInterface, ControlDisableType } from "@astroapps/forms-core";
 import React, { Key, ReactNode } from "react";
-import { CleanupScope } from "@react-typed-forms/core";
+import { ChangeListenerFunc, CleanupScope } from "@react-typed-forms/core";
 /**
  * Interface representing the control data context.
  */
@@ -8,9 +8,13 @@ export interface ControlDataContext {
     schemaInterface: SchemaInterface;
     dataNode: SchemaDataNode | undefined;
     parentNode: SchemaDataNode;
-    variables: Record<string, any>;
 }
-export type ControlActionHandler = (actionId: string, actionData: any, ctx: ControlDataContext) => (() => void) | undefined;
+export interface ControlActionContext {
+    disableForm(disable: ControlDisableType): void;
+    runAction(action: string, actionData?: any): void | Promise<any>;
+}
+export declare const NoOpControlActionContext: ControlActionContext;
+export type ControlActionHandler = (actionId: string, actionData: any, dataContext: ControlDataContext) => ((actionContext: ControlActionContext) => void | Promise<any>) | undefined;
 export interface ActionRendererProps {
     key?: Key;
     actionId: string;
@@ -27,5 +31,6 @@ export interface ActionRendererProps {
     disabled?: boolean;
     hidden?: boolean;
     inline?: boolean;
+    busy?: boolean;
 }
-export type RunExpression = (scope: CleanupScope, expression: EntityExpression, returnResult: (v: unknown) => void, bindings?: FormContextData) => void;
+export type RunExpression = (scope: CleanupScope, expression: EntityExpression, returnResult: (v: unknown) => void, variables?: (changes: ChangeListenerFunc<any>) => Record<string, any>) => void;

package/lib/util.d.ts

@@ -1,6 +1,6 @@
 import { CompoundField, ControlDataVisitor, ControlDefinition, DataControlDefinition, EntityExpression, FieldOption, SchemaDataNode, SchemaField, SchemaNode } from "@astroapps/forms-core";
 import { MutableRefObject } from "react";
-import { Control } from "@react-typed-forms/core";
+import { ChangeListenerFunc, Control } from "@react-typed-forms/core";
 import { ActionRendererProps, ControlActionHandler, RunExpression } from "./types";
 /**
  * Interface representing the classes for a control.
@@ -229,4 +229,5 @@ export declare function collectDifferences(dataNode: SchemaDataNode, values: unk
     editing: number;
 };
 export declare function validationVisitor(onInvalid: (data: Control<unknown>) => void): ControlDataVisitor<any>;
-export declare function useExpression<T>(defaultValue: T, runExpression: RunExpression, expression: EntityExpression | null | undefined, coerce: (x: any) => T, bindings?: Record<string, any>): Control<T>;
+export declare function useExpression<T>(defaultValue: T, runExpression: RunExpression, expression: EntityExpression | null | undefined, coerce: (x: any) => T, bindings?: (changes: ChangeListenerFunc<any>) => Record<string, any>): Control<T>;
+export declare function setIncluded<A>(array: A[], elem: A, included: boolean): A[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-typed-forms/schemas",
-  "version": "16.2.2",
+  "version": "17.0.0",
   "description": "",
   "type": "module",
   "main": "lib/index.cjs",
@@ -34,7 +34,7 @@
     "clsx": "^1 || ^2",
     "uuid": "^10.0.0",
     "jsonata": "^2.0.4",
-    "@astroapps/forms-core": "^1.2.2"
+    "@astroapps/forms-core": "^2.0.0"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19",
@@ -51,7 +51,7 @@
     "@jest/globals": "^29.7.0",
     "typedoc": "^0.27.2",
     "@types/uuid": "^10.0.0",
-    "@types/react": "^18.2.28",
+    "@types/react": "^18.2.28 || ^19",
     "markdown-magic": "^2.6.1",
     "microbundle": "^0.15.1",
     "nswag": "^13.18.2",
@@ -61,8 +61,8 @@
   },
   "gitHead": "698e16cd3ab31b7dd0528fc76536f4d3205ce8c6",
   "scripts": {
-    "build": "rimraf ./lib/ node_modules/.cache && microbundle -f modern,cjs --no-compress --jsxImportSource=react",
-    "watch": "microbundle -w -f modern,cjs --no-compress --jsxImportSource=react",
+    "build": "rimraf ./lib/ node_modules/.cache && microbundle -f modern,cjs --no-compress --jsx React --jsxImportSource=react",
+    "watch": "microbundle -f modern,cjs --no-compress --jsx React --jsxImportSource=react",
     "test": "jest --coverage",
     "play": "tsx test/play.ts",
     "update-readme": "md-magic --path README.md",

package/src/RenderForm.tsx

@@ -9,22 +9,24 @@ import {
 } from "./controlRender";
 import React, {
   FC,
+  MutableRefObject,
   useCallback,
   useEffect,
   useMemo,
-  useRef,
-  useState,
 } from "react";
 import {
   ControlDefinition,
-  ControlState,
-  createFormState,
+  ControlDisableType,
+  createFormStateNode,
   createSchemaDataNode,
   createSchemaTree,
+  defaultEvaluators,
   defaultSchemaInterface,
+  FormGlobalOptions,
   FormNode,
-  FormState,
-  isDataControl,
+  FormNodeOptions,
+  FormNodeUi,
+  FormStateNode,
   JsonPath,
   legacyFormNode,
   SchemaDataNode,
@@ -44,6 +46,7 @@ export interface RenderFormProps {
   form: FormNode;
   renderer: FormRenderer;
   options?: ControlRenderOptions;
+  stateRef?: MutableRefObject<FormStateNode | null>;
 }
 
 /* @trackControls */
@@ -52,28 +55,64 @@ export function RenderForm({
   form,
   renderer,
   options = {},
+  stateRef,
 }: RenderFormProps) {
+  const { readonly, disabled, displayOnly, hidden, variables, clearHidden } =
+    options;
   const schemaInterface = options.schemaInterface ?? defaultSchemaInterface;
-  const [formState, setFormState] = useState(
-    () => options?.formState ?? createFormState(schemaInterface),
-  );
-  let effects: (() => void)[] | undefined = [];
-  const runAsync = (cb: () => void) => {
-    if (effects) effects.push(cb);
-    else cb();
+  const { runAsync } = useAsyncRunner();
+  const globals: FormGlobalOptions = {
+    runAsync,
+    schemaInterface,
+    evalExpression: (e, ctx) => defaultEvaluators[e.type]?.(e, ctx),
+    resolveChildren: renderer.resolveChildren,
+    clearHidden: !!clearHidden,
   };
-  const state = formState.getControlState(data, form, options, runAsync);
-
+  const state = useMemo(
+    () =>
+      createFormStateNode(form, data, globals, {
+        forceReadonly: !!readonly,
+        forceDisabled: !!disabled,
+        variables,
+        forceHidden: !!hidden,
+      }),
+    [form.id],
+  );
+  state.globals.value = globals;
+  state.options.setValue((x) => ({
+    variables,
+    forceHidden: hidden ?? x.forceHidden,
+    forceDisabled: disabled ?? x.forceDisabled,
+    forceReadonly: readonly ?? x.forceReadonly,
+  }));
+  if (stateRef) stateRef.current = state;
   useEffect(() => {
-    if (!options?.formState) {
-      return () => formState.cleanup();
-    }
-  }, [formState, options?.formState]);
-
-  const definition = state.definition;
+    return () => {
+      state.cleanup();
+    };
+  }, [state]);
+  return <RenderFormNode node={state} renderer={renderer} options={options} />;
+}
 
-  const visible = !state.hidden;
+export interface RenderFormNodeProps {
+  node: FormStateNode;
+  renderer: FormRenderer;
+  options?: ControlRenderOptions;
+}
 
+/* @trackControls */
+export function RenderFormNode({
+  node: state,
+  renderer,
+  options = {},
+}: RenderFormNodeProps) {
+  useEffect(() => {
+    state.attachUi(new DefaultFormNodeUi(state));
+  }, [state]);
+  const { runAsync } = useAsyncRunner();
+  const schemaInterface = state.schemaInterface;
+  const definition = state.definition;
+  const visible = state.visible;
   const visibility = useControl<Visibility | undefined>(() =>
     visible != null
       ? {
@@ -82,13 +121,14 @@ export function RenderForm({
         }
       : undefined,
   );
-  visibility.fields.visible.value = visible;
+  if (visible != null) {
+    visibility.fields.visible.value = visible;
+  }
 
   const dataContext: ControlDataContext = {
     schemaInterface: state.schemaInterface,
     dataNode: state.dataNode,
-    parentNode: data,
-    variables: state.variables,
+    parentNode: state.parent,
   };
 
   const adornments =
@@ -96,7 +136,7 @@ export function RenderForm({
       renderer.renderAdornment({
         adornment: x,
         dataContext,
-        formOptions: state,
+        formNode: state,
       }),
     ) ?? [];
 
@@ -108,41 +148,35 @@ export function RenderForm({
     textClass,
     ...inheritableOptions
   } = options;
-  const { readonly, hidden, disabled, variables } = state;
+  const { readonly, visible: vis, disabled, variables } = state;
   const childOptions: ControlRenderOptions = {
     ...inheritableOptions,
     readonly,
     disabled,
     variables,
-    formState,
-    hidden,
+    hidden: vis === false,
   };
 
   const labelAndChildren = renderControlLayout({
-    formNode: form,
+    formNode: state,
     renderer,
-    state,
-    renderChild: (k, child, options) => {
+    renderChild: (child, options) => {
       const overrideClasses = getGroupClassOverrides(definition);
-      const { parentDataNode, actionOnClick, variables, ...renderOptions } =
-        options ?? {};
-      const dContext = parentDataNode ?? dataContext.dataNode ?? data;
+      const { actionOnClick, ...renderOptions } = options ?? {};
       const allChildOptions = {
         ...childOptions,
         ...overrideClasses,
         ...renderOptions,
-        variables: { ...childOptions.variables, ...variables },
         actionOnClick: actionHandlers(
           actionOnClick,
           childOptions.actionOnClick,
         ),
       };
       return (
-        <RenderForm
-          key={k}
-          form={child}
+        <RenderFormNode
+          key={child.childKey}
+          node={child}
           renderer={renderer}
-          data={dContext}
           options={allChildOptions}
         />
       );
@@ -150,32 +184,22 @@ export function RenderForm({
     inline: options?.inline,
     displayOnly: options?.displayOnly,
     createDataProps: defaultDataProps,
-    formOptions: state,
     dataContext,
     control: dataContext.dataNode?.control,
     schemaInterface,
-    style: state.style,
-    allowedOptions: state.allowedOptions,
+    style: state.resolved.style,
     customDisplay: options.customDisplay,
     actionOnClick: options.actionOnClick,
     styleClass: styleClass,
     labelClass: labelClass,
     labelTextClass: labelTextClass,
     textClass: textClass,
-    getChildState(child: FormNode, parent?: SchemaDataNode): ControlState {
-      return formState.getControlState(
-        parent ?? state.dataNode ?? data,
-        child,
-        childOptions,
-        runAsync,
-      );
-    },
     runExpression: (scope, expr, returnResult) => {
       if (expr?.type) {
-        formState.evalExpression(expr, {
-          scope,
-          dataNode: data,
+        defaultEvaluators[expr.type](expr, {
+          dataNode: state.parent,
           schemaInterface,
+          scope,
           returnResult,
           runAsync,
         });
@@ -186,23 +210,15 @@ export function RenderForm({
     ...labelAndChildren,
     adornments,
     className: rendererClass(options.layoutClass, definition.layoutClass),
-    style: state.layoutStyle,
+    style: state.resolved.layoutStyle,
   };
   const renderedControl = renderer.renderLayout(
     options.adjustLayout?.(dataContext, layoutProps) ?? layoutProps,
   );
-  const rendered = renderer.renderVisibility({
+  return renderer.renderVisibility({
     visibility,
     ...renderedControl,
   });
-  useEffect(() => {
-    if (effects) {
-      const toRun = effects;
-      effects = undefined;
-      toRun.forEach((cb) => cb());
-    }
-  }, [effects]);
-  return rendered;
 }
 
 /**
@@ -319,3 +335,53 @@ export function useControlRenderer(
     [r],
   );
 }
+
+export function useAsyncRunner(): {
+  runAsync: (cb: () => void) => void;
+} {
+  let effects: (() => void)[] | undefined = [];
+  const runAsync = (cb: () => void) => {
+    if (effects) effects.push(cb);
+    else cb();
+  };
+  useEffect(() => {
+    if (effects) {
+      const toRun = effects;
+      effects = undefined;
+      toRun.forEach((cb) => cb());
+    }
+  }, [effects]);
+
+  return {
+    runAsync,
+  };
+}
+
+export class DefaultFormNodeUi implements FormNodeUi {
+  constructor(protected node: FormStateNode) {}
+  ensureVisible() {
+    this.node.parentNode?.ui.ensureChildVisible(this.node.childIndex);
+  }
+  ensureChildVisible(childIndex: number) {
+    this.ensureVisible();
+  }
+  getDisabler(type: ControlDisableType): () => () => void {
+    if (type === ControlDisableType.Self) {
+      return () => {
+        const old = !!this.node.forceDisabled;
+        this.node.setForceDisabled(true);
+        return () => {
+          this.node.setForceDisabled(old);
+        };
+      };
+    }
+    if (type === ControlDisableType.Global) {
+      let topLevel = this.node;
+      while (topLevel.parentNode) {
+        topLevel = topLevel.parentNode;
+      }
+      return topLevel.ui.getDisabler(ControlDisableType.Self);
+    }
+    return () => () => {};
+  }
+}

package/src/controlBuilder.ts

@@ -1,201 +1,18 @@
 import {
-  AccordionAdornment,
-  ActionControlDefinition,
-  AutocompleteRenderOptions,
-  CheckListRenderOptions,
-  ControlAdornmentType,
   ControlDefinition,
-  ControlDefinitionType,
-  DataControlDefinition,
-  DataExpression,
-  DataMatchExpression,
-  DataRenderType,
-  DateValidator,
-  DisplayControlDefinition,
-  DisplayDataType,
-  DisplayOnlyRenderOptions,
-  DynamicProperty,
-  DynamicPropertyType,
-  EntityExpression,
-  ExpressionType,
+  emptyGroupDefinition,
   GroupedControlsDefinition,
-  GroupRenderType,
-  HtmlDisplay,
-  JsonataExpression,
-  JsonataRenderOptions,
-  JsonataValidator,
-  LengthValidator,
+  mergeFields,
   mergeOption,
-  RadioButtonRenderOptions,
-  RenderOptions,
+  resolveSchemas,
   SchemaField,
   SchemaMap,
   SchemaNode,
-  TextDisplay,
-  TextfieldRenderOptions,
-  ValidatorType,
 } from "@astroapps/forms-core";
 import { useMemo } from "react";
 import { addMissingControls } from "./util";
-import { mergeFields, resolveSchemas } from "@astroapps/forms-core";
 import { ActionRendererProps } from "./types";
 
-export function dataControl(
-  field: string,
-  title?: string | null,
-  options?: Partial<DataControlDefinition>,
-): DataControlDefinition {
-  return { type: ControlDefinitionType.Data, field, title, ...options };
-}
-
-export function validatorOptions<A extends { type: string }>(
-  type: ValidatorType,
-): (options: Omit<A, "type">) => A {
-  return (o) => ({ type, ...o }) as A;
-}
-
-export function adornmentOptions<A extends { type: string }>(
-  type: ControlAdornmentType,
-): (options: Omit<A, "type">) => A {
-  return (o) => ({ type, ...o }) as A;
-}
-
-export function renderOptionsFor<A extends RenderOptions>(
-  type: DataRenderType,
-): (options: Omit<A, "type">) => { renderOptions: A } {
-  return (o) => ({ renderOptions: { type, ...o } as A });
-}
-
-export const autocompleteOptions = renderOptionsFor<AutocompleteRenderOptions>(
-  DataRenderType.Autocomplete,
-);
-
-export const checkListOptions = renderOptionsFor<CheckListRenderOptions>(
-  DataRenderType.CheckList,
-);
-
-export const radioButtonOptions = renderOptionsFor<RadioButtonRenderOptions>(
-  DataRenderType.Radio,
-);
-
-export const lengthValidatorOptions = validatorOptions<LengthValidator>(
-  ValidatorType.Length,
-);
-
-export const jsonataValidatorOptions = validatorOptions<JsonataValidator>(
-  ValidatorType.Jsonata,
-);
-
-export const dateValidatorOptions = validatorOptions<DateValidator>(
-  ValidatorType.Date,
-);
-
-export const accordionOptions = adornmentOptions<AccordionAdornment>(
-  ControlAdornmentType.Accordion,
-);
-
-export const textfieldOptions = renderOptionsFor<TextfieldRenderOptions>(
-  DataRenderType.Textfield,
-);
-
-export const displayOnlyOptions = renderOptionsFor<DisplayOnlyRenderOptions>(
-  DataRenderType.DisplayOnly,
-);
-
-export const jsonataOptions = renderOptionsFor<JsonataRenderOptions>(
-  DataRenderType.Jsonata,
-);
-
-export function textDisplayControl(
-  text: string,
-  options?: Partial<DisplayControlDefinition>,
-): DisplayControlDefinition {
-  return {
-    type: ControlDefinitionType.Display,
-    displayData: { type: DisplayDataType.Text, text } as TextDisplay,
-    ...options,
-  };
-}
-
-export function htmlDisplayControl(
-  html: string,
-  options?: Partial<DisplayControlDefinition>,
-): DisplayControlDefinition {
-  return {
-    type: ControlDefinitionType.Display,
-    displayData: { type: DisplayDataType.Html, html } as HtmlDisplay,
-    ...options,
-  };
-}
-
-export function dynamicDefaultValue(expr: EntityExpression): DynamicProperty {
-  return { type: DynamicPropertyType.DefaultValue, expr };
-}
-
-export function dynamicReadonly(expr: EntityExpression): DynamicProperty {
-  return { type: DynamicPropertyType.Readonly, expr };
-}
-
-export function dynamicVisibility(expr: EntityExpression): DynamicProperty {
-  return { type: DynamicPropertyType.Visible, expr };
-}
-
-export function dynamicDisabled(expr: EntityExpression): DynamicProperty {
-  return { type: DynamicPropertyType.Disabled, expr };
-}
-
-export function fieldExpr(field: string): DataExpression {
-  return { type: ExpressionType.Data, field };
-}
-
-export function fieldEqExpr(field: string, value: any): DataMatchExpression {
-  return { type: ExpressionType.DataMatch, field, value };
-}
-export function jsonataExpr(expression: string): JsonataExpression {
-  return { type: ExpressionType.Jsonata, expression };
-}
-
-export function groupedControl(
-  children: ControlDefinition[],
-  title?: string,
-  options?: Partial<GroupedControlsDefinition>,
-): GroupedControlsDefinition {
-  return {
-    type: ControlDefinitionType.Group,
-    children,
-    title,
-    groupOptions: { type: "Standard", hideTitle: !title },
-    ...options,
-  };
-}
-export function compoundControl(
-  field: string,
-  title: string | undefined,
-  children: ControlDefinition[],
-  options?: Partial<DataControlDefinition>,
-): DataControlDefinition {
-  return {
-    type: ControlDefinitionType.Data,
-    field,
-    children,
-    title,
-    renderOptions: { type: "Standard" },
-    ...options,
-  };
-}
-
-export function actionControl(
-  actionText: string,
-  actionId: string,
-  options?: Partial<ActionControlDefinition>,
-): ActionControlDefinition {
-  return {
-    type: ControlDefinitionType.Action,
-    title: actionText,
-    actionId,
-    ...options,
-  };
-}
 export function createAction(
   actionId: string,
   onClick: () => void,
@@ -210,12 +27,6 @@ export function createAction(
   };
 }
 
-export const emptyGroupDefinition: GroupedControlsDefinition = {
-  type: ControlDefinitionType.Group,
-  children: [],
-  groupOptions: { type: GroupRenderType.Standard, hideTitle: true },
-};
-
 export function useControlDefinitionForSchema(
   sf: SchemaField[],
   definition: GroupedControlsDefinition = emptyGroupDefinition,
@@ -235,7 +46,7 @@ export interface EditorGroup {
 }
 
 export interface CustomRenderOptions {
-  value: string;
+  value?: string;
   name: string;
   fields?: SchemaField[];
   groups?: EditorGroup[];
@@ -250,6 +61,8 @@ export type ControlDefinitionExtension = {
   SchemaValidator?: CustomRenderOptions | CustomRenderOptions[];
   DisplayData?: CustomRenderOptions | CustomRenderOptions[];
   IconReference?: CustomRenderOptions | CustomRenderOptions[];
+  ControlDefinition?: CustomRenderOptions | CustomRenderOptions[];
+  SchemaField?: CustomRenderOptions | CustomRenderOptions[];
 };
 
 export function applyExtensionToSchema<A extends SchemaMap>(