@react-typed-forms/schemas 7.1.0 → 7.3.0

package/lib/internal.d.ts

@@ -1,3 +1,4 @@
-import { Control } from "@react-typed-forms/core";
+import { ChangeListenerFunc, Control } from "@react-typed-forms/core";
 export declare function useCalculatedControl<V>(calculate: () => V): Control<V>;
 export declare function cc(n: string | null | undefined): string | undefined;
+export declare function trackedStructure<A>(c: Control<A>, tracker: ChangeListenerFunc<any>): A;

package/lib/schemaBuilder.d.ts

@@ -41,7 +41,7 @@ export declare function stringOptionsField(displayName: string, ...options: Fiel
     displayName: string;
     options: FieldOption[];
 };
-export declare function withScalarOptions<S extends SchemaField>(options: Partial<SchemaField>, v: (name: string) => S): (name: string) => S;
+export declare function withScalarOptions<S extends SchemaField, S2 extends Partial<SchemaField>>(options: S2, v: (name: string) => S): (name: string) => S & S2;
 export declare function makeScalarField<S extends Partial<SchemaField>>(options: S): (name: string) => SchemaField & S;
 export declare function makeCompoundField<S extends Partial<CompoundField>>(options: S): (name: string) => CompoundField & {
     type: FieldType.Compound;

package/lib/util.d.ts

@@ -1,8 +1,8 @@
 import { CompoundField, ControlDefinition, DataControlDefinition, DisplayOnlyRenderOptions, FieldOption, GroupedControlsDefinition, SchemaField, SchemaInterface } from "./types";
 import { MutableRefObject } from "react";
 import { Control } from "@react-typed-forms/core";
-export interface ControlDataContext {
-    groupControl: Control<any>;
+import { DataContext, JsonPath } from "./controlRender";
+export interface ControlDataContext extends DataContext {
     fields: SchemaField[];
     schemaInterface: SchemaInterface;
 }
@@ -33,7 +33,9 @@ export declare function getDisplayOnlyOptions(d: ControlDefinition): DisplayOnly
 export declare function getTypeField(context: ControlDataContext): Control<string> | undefined;
 export declare function visitControlDataArray<A>(controls: ControlDefinition[] | undefined | null, context: ControlDataContext, cb: (definition: DataControlDefinition, field: SchemaField, control: Control<any>, element: boolean) => A | undefined): A | undefined;
 export declare function visitControlData<A>(definition: ControlDefinition, ctx: ControlDataContext, cb: (definition: DataControlDefinition, field: SchemaField, control: Control<any>, element: boolean) => A | undefined): A | undefined;
+export declare function lookupChildControl(data: DataContext, child: JsonPath): Control<any> | undefined;
 export declare function cleanDataForSchema(v: {
     [k: string]: any;
 } | undefined, fields: SchemaField[]): any;
 export declare function getAllReferencedClasses(c: ControlDefinition): string[];
+export declare function jsonPathString(jsonPath: JsonPath[]): string;

package/package.json

@@ -1,49 +1,49 @@
 {
-	"name": "@react-typed-forms/schemas",
-	"version": "7.1.0",
-	"description": "",
-	"main": "lib/index.js",
-	"types": "lib/index.d.ts",
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/doolse/react-typed-forms.git"
-	},
-	"author": "Jolse Maginnis",
-	"license": "ISC",
-	"bugs": {
-		"url": "https://github.com/doolse/react-typed-forms/issues"
-	},
-	"homepage": "https://github.com/doolse/react-typed-forms#readme",
-	"publishConfig": {
-		"access": "public"
-	},
-	"keywords": [
-		"react",
-		"typescript",
-		"forms",
-		"material-ui"
-	],
-	"dependencies": {
-		"@react-typed-forms/core": "^3.0.0",
-		"clsx": "^1 || ^2",
-		"jsonata": "^2.0.4",
-		"react": "^18.2.0"
-	},
-	"devDependencies": {
-		"@react-typed-forms/transform": "^0.2.0",
-		"@types/react": "^18.2.28",
-		"markdown-magic": "^2.6.1",
-		"microbundle": "^0.15.1",
-		"nswag": "^13.18.2",
-		"prettier": "^3.0.3",
-		"rimraf": "^3.0.2",
-		"typescript": "^5.2.2"
-	},
-	"gitHead": "698e16cd3ab31b7dd0528fc76536f4d3205ce8c6",
-	"scripts": {
-		"build": "rimraf ./lib/ && microbundle -f cjs --no-compress --jsx React.createElement --jsxFragment React.Fragment",
-		"watch": "microbundle -w -f cjs --no-compress --jsx React.createElement --jsxFragment React.Fragment",
-		"update-readme": "md-magic --path README.md",
-		"gencode": "nswag swagger2tsclient /input:http://localhost:5216/swagger/v1/swagger.json /runtime:Net60 /output:src/types.ts /GenerateClientClasses:false /MarkOptionalProperties:false /Template:Fetch /TypeStyle:Interface /DateTimeType:string"
-	}
-}
+  "name": "@react-typed-forms/schemas",
+  "version": "7.3.0",
+  "description": "",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/doolse/react-typed-forms.git"
+  },
+  "author": "Jolse Maginnis",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/doolse/react-typed-forms/issues"
+  },
+  "homepage": "https://github.com/doolse/react-typed-forms#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "react",
+    "typescript",
+    "forms",
+    "material-ui"
+  ],
+  "dependencies": {
+    "@react-typed-forms/core": "^3.1.0",
+    "clsx": "^1 || ^2",
+    "jsonata": "^2.0.4",
+    "react": "^18.2.0"
+  },
+  "devDependencies": {
+    "@react-typed-forms/transform": "^0.2.0",
+    "@types/react": "^18.2.28",
+    "markdown-magic": "^2.6.1",
+    "microbundle": "^0.15.1",
+    "nswag": "^13.18.2",
+    "prettier": "^3.0.3",
+    "rimraf": "^3.0.2",
+    "typescript": "^5.2.2"
+  },
+  "gitHead": "698e16cd3ab31b7dd0528fc76536f4d3205ce8c6",
+  "scripts": {
+    "build": "rimraf ./lib/ && microbundle -f cjs --no-compress --jsx React.createElement --jsxFragment React.Fragment",
+    "watch": "microbundle -w -f cjs --no-compress --jsx React.createElement --jsxFragment React.Fragment",
+    "update-readme": "md-magic --path README.md",
+    "gencode": "nswag swagger2tsclient /input:http://localhost:5216/swagger/v1/swagger.json /runtime:Net60 /output:src/types.ts /GenerateClientClasses:false /MarkOptionalProperties:false /Template:Fetch /TypeStyle:Interface /DateTimeType:string"
+  }
+}

package/src/controlRender.tsx

@@ -10,8 +10,10 @@ import React, {
 import {
   addElement,
   Control,
+  ControlChange,
   newControl,
   removeElement,
+  trackControlChange,
   useComponentTracking,
   useControl,
   useControlEffect,
@@ -166,6 +168,7 @@ export interface GroupRendererProps {
 }
 
 export interface DataRendererProps {
+  definition: DataControlDefinition;
   renderOptions: RenderOptions;
   field: SchemaField;
   id: string;
@@ -192,6 +195,7 @@ export interface ActionRendererProps {
 
 export interface ControlRenderProps {
   control: Control<any>;
+  parentPath?: JsonPath[];
 }
 
 export interface FormContextOptions {
@@ -210,12 +214,18 @@ export interface DataControlProps {
   childCount: number;
   renderChild: ChildRenderer;
   allowedOptions?: Control<any[] | undefined>;
-  elementRenderer?: (elemProps: Control<any>) => ReactNode;
+  elementRenderer?: (elemIndex: number) => ReactNode;
 }
 export type CreateDataProps = (
   controlProps: DataControlProps,
 ) => DataRendererProps;
 
+export type JsonPath = string | number;
+
+export interface DataContext {
+  data: Control<any>;
+  path: JsonPath[];
+}
 export interface ControlRenderOptions extends FormContextOptions {
   useDataHook?: (c: ControlDefinition) => CreateDataProps;
   useEvalExpressionHook?: UseEvalExpressionHook;
@@ -257,21 +267,22 @@ export function useControlRenderer(
   const r = useUpdatedRef({ options, definition, fields, schemaField });
 
   const Component = useCallback(
-    ({ control: parentControl }: ControlRenderProps) => {
+    ({ control: rootControl, parentPath = [] }: ControlRenderProps) => {
       const stopTracking = useComponentTracking();
       try {
         const { definition: c, options, fields, schemaField } = r.current;
-        const dataContext: ControlDataContext = {
-          groupControl: parentControl,
+        const parentDataContext: ControlDataContext = {
           fields,
           schemaInterface,
+          data: rootControl,
+          path: parentPath,
         };
-        const readonlyControl = useIsReadonly(dataContext);
-        const disabledControl = useIsDisabled(dataContext);
-        const visibleControl = useIsVisible(dataContext);
-        const displayControl = useDynamicDisplay(dataContext);
-        const customStyle = useCustomStyle(dataContext).value;
-        const layoutStyle = useLayoutStyle(dataContext).value;
+        const readonlyControl = useIsReadonly(parentDataContext);
+        const disabledControl = useIsDisabled(parentDataContext);
+        const visibleControl = useIsVisible(parentDataContext);
+        const displayControl = useDynamicDisplay(parentDataContext);
+        const customStyle = useCustomStyle(parentDataContext).value;
+        const layoutStyle = useLayoutStyle(parentDataContext).value;
         const visible = visibleControl.current.value;
         const visibility = useControl<Visibility | undefined>(() =>
           visible != null
@@ -292,31 +303,35 @@ export function useControlRenderer(
           },
         );
 
-        const allowedOptions = useAllowedOptions(dataContext);
-        const defaultValueControl = useDefaultValue(dataContext);
-        const [control, childContext] = getControlData(
+        const allowedOptions = useAllowedOptions(parentDataContext);
+        const defaultValueControl = useDefaultValue(parentDataContext);
+        const [parentControl, control, controlDataContext] = getControlData(
           schemaField,
-          dataContext,
+          parentDataContext,
         );
         useControlEffect(
           () => [
             visibility.value,
             defaultValueControl.value,
             control,
-            parentControl.isNull,
             isDataControlDefinition(definition) && definition.dontClearHidden,
+            parentControl?.isNull,
           ],
-          ([vc, dv, cd, pn, dontClear]) => {
-            if (pn) {
-              parentControl.value = {};
-            }
+          ([vc, dv, cd, dontClear, parentNull]) => {
             if (vc && cd && vc.visible === vc.showing) {
               if (!vc.visible) {
-                if (options.clearHidden && !dontClear) cd.value = undefined;
+                if (options.clearHidden && !dontClear) {
+                  console.log("Clearing ", schemaField?.field);
+                  cd.value = undefined;
+                }
               } else if (cd.value == null) {
+                console.log("Defaulting ", schemaField?.field, dv);
                 cd.value = dv;
               }
             }
+            if (parentNull && parentControl?.isNull) {
+              parentControl.value = {};
+            }
           },
           true,
         );
@@ -325,19 +340,25 @@ export function useControlRenderer(
           readonly: options.readonly || readonlyControl.value,
           disabled: options.disabled || disabledControl.value,
         })).value;
-        useValidation(control!, !!myOptions.hidden, dataContext);
+        useValidation(
+          control ?? newControl(null),
+          !!myOptions.hidden,
+          parentDataContext,
+        );
         const childRenderers: FC<ControlRenderProps>[] =
           c.children?.map((cd) =>
-            useControlRenderer(cd, childContext.fields, renderer, {
+            useControlRenderer(cd, controlDataContext.fields, renderer, {
               ...options,
               ...myOptions,
             }),
           ) ?? [];
+
         useEffect(() => {
           if (control && typeof myOptions.disabled === "boolean")
             control.disabled = myOptions.disabled;
         }, [control, myOptions.disabled]);
-        if (parentControl.isNull) return <></>;
+        if (parentControl?.isNull) return <></>;
+
         const adornments =
           definition.adornments?.map((x) =>
             renderer.renderAdornment({ adornment: x }),
@@ -352,7 +373,7 @@ export function useControlRenderer(
           },
           createDataProps: dataProps,
           formOptions: myOptions,
-          dataContext,
+          dataContext: controlDataContext,
           control: displayControl ?? control,
           schemaField,
           displayControl,
@@ -396,24 +417,31 @@ export function lookupSchemaField(
   const fieldName = isGroupControlsDefinition(c)
     ? c.compoundField
     : isDataControlDefinition(c)
-      ? c.field
-      : undefined;
+    ? c.field
+    : undefined;
   return fieldName ? findField(fields, fieldName) : undefined;
 }
 export function getControlData(
   schemaField: SchemaField | undefined,
   parentContext: ControlDataContext,
-): [Control<any> | undefined, ControlDataContext] {
-  const childControl: Control<any> | undefined = schemaField
-    ? parentContext.groupControl.fields?.[schemaField.field] ?? newControl({})
-    : undefined;
+): [Control<any> | undefined, Control<any> | undefined, ControlDataContext] {
+  const { data, path } = parentContext;
+  const parentControl = data.lookupControl(path);
+  const childPath = schemaField ? [...path, schemaField.field] : path;
+  const childControl =
+    schemaField && parentControl
+      ? parentControl.fields[schemaField.field]
+      : undefined;
   return [
+    parentControl,
     childControl,
-    schemaField && isCompoundField(schemaField)
+    schemaField
       ? {
-          groupControl: childControl!,
-          fields: schemaField.children,
-          schemaInterface: parentContext.schemaInterface,
+          ...parentContext,
+          path: childPath,
+          fields: isCompoundField(schemaField)
+            ? schemaField.children
+            : parentContext.fields,
         }
       : parentContext,
   ];
@@ -423,13 +451,14 @@ function groupProps(
   renderOptions: GroupRenderOptions = { type: "Standard" },
   childCount: number,
   renderChild: ChildRenderer,
-  control: Control<any>,
+  data: DataContext,
   className: string | null | undefined,
   style: React.CSSProperties | undefined,
 ): GroupRendererProps {
   return {
     childCount,
-    renderChild: (i) => renderChild(i, i, { control }),
+    renderChild: (i) =>
+      renderChild(i, i, { control: data.data, parentPath: data.path }),
     renderOptions,
     className: cc(className),
     style,
@@ -452,6 +481,7 @@ export function defaultDataProps({
     (field.options?.length ?? 0) === 0 ? null : field.options;
   const allowed = allowedOptions?.value ?? [];
   return {
+    definition,
     control,
     field,
     id: "c" + control.uniqueId,
@@ -486,7 +516,7 @@ export function defaultArrayProps(
   required: boolean,
   style: CSSProperties | undefined,
   className: string | undefined,
-  renderElement: (elemProps: Control<any>) => ReactNode,
+  renderElement: (elemIndex: number) => ReactNode,
 ): ArrayRendererProps {
   const noun = field.displayName ?? field.field;
   const elems = arrayControl.elements ?? [];
@@ -505,7 +535,7 @@ export function defaultArrayProps(
       actionText: "Remove",
       onClick: () => removeElement(arrayControl, i),
     }),
-    renderElement: (i) => renderElement(elems[i]),
+    renderElement: (i) => renderElement(i),
     className: cc(className),
     style,
   };
@@ -563,7 +593,7 @@ export function renderControlLayout({
           c.groupOptions,
           childCount,
           childRenderer,
-          dataContext.groupControl,
+          dataContext,
           c.styleClass,
           style,
         ),
@@ -598,22 +628,26 @@ export function renderControlLayout({
   }
   return {};
 
-  function renderData(c: DataControlDefinition, elementControl?: Control<any>) {
+  function renderData(c: DataControlDefinition, elemIndex?: number) {
     if (!schemaField) return { children: "No schema field for: " + c.field };
+    if (!childControl) return { children: "No control for: " + c.field };
     const props = dataProps({
       definition: c,
       field: schemaField,
-      dataContext,
-      control: elementControl ?? childControl!,
+      dataContext:
+        elemIndex != null
+          ? { ...dataContext, path: [...dataContext.path, elemIndex] }
+          : dataContext,
+      control:
+        elemIndex != null ? childControl!.elements[elemIndex] : childControl,
       options: dataOptions,
       style,
       childCount,
       allowedOptions,
       renderChild: childRenderer,
       elementRenderer:
-        elementControl == null && schemaField.collection
-          ? (element) =>
-              renderLayoutParts(renderData(c, element), renderer).children
+        elemIndex == null && schemaField.collection
+          ? (ei) => renderLayoutParts(renderData(c, ei), renderer).children
           : undefined,
     });
 
@@ -632,32 +666,6 @@ export function renderControlLayout({
       errorControl: childControl,
     };
   }
-
-  function compoundRenderer(i: number, control: Control<any>): ReactNode {
-    const { className, style, children } = renderer.renderLayout({
-      processLayout: renderer.renderGroup({
-        renderOptions: { type: "Standard", hideTitle: true },
-        childCount,
-        renderChild: (ci) => childRenderer(ci, ci, { control }),
-      }),
-    });
-    return (
-      <div key={control.uniqueId} style={style} className={cc(className)}>
-        {children}
-      </div>
-    );
-  }
-  function scalarRenderer(
-    dataProps: DataRendererProps,
-  ): (i: number, control: Control<any>) => ReactNode {
-    return (i, control) => {
-      return (
-        <Fragment key={control.uniqueId}>
-          {renderer.renderData({ ...dataProps, control })({}).children}
-        </Fragment>
-      );
-    };
-  }
 }
 
 export function appendMarkup(
@@ -737,3 +745,23 @@ export function controlTitle(
 ) {
   return title ? title : fieldDisplayName(field);
 }
+
+function lookupControl(
+  base: Control<any> | undefined,
+  path: (string | number)[],
+): Control<any> | undefined {
+  let index = 0;
+  while (index < path.length && base) {
+    const childId = path[index];
+    const c = base.current;
+    if (typeof childId === "string") {
+      const next = c.fields?.[childId];
+      if (!next) trackControlChange(base, ControlChange.Structure);
+      base = next;
+    } else {
+      base = c.elements?.[childId];
+    }
+    index++;
+  }
+  return base;
+}

package/src/hooks.tsx

@@ -10,12 +10,15 @@ import {
   SchemaField,
   SchemaInterface,
 } from "./types";
-import { useCallback, useMemo } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 import {
+  addAfterChangesCallback,
+  collectChanges,
   Control,
+  makeChangeTracker,
   useComputed,
   useControl,
-  useControlEffect,
+  useRefState,
 } from "@react-typed-forms/core";
 
 import {
@@ -25,10 +28,13 @@ import {
   getDisplayOnlyOptions,
   getTypeField,
   isControlReadonly,
+  jsonPathString,
+  lookupChildControl,
   useUpdatedRef,
 } from "./util";
 import jsonata from "jsonata";
-import { useCalculatedControl } from "./internal";
+import { trackedStructure, useCalculatedControl } from "./internal";
+import { DataContext } from "./controlRender";
 
 export type UseEvalExpressionHook = (
   expr: EntityExpression | undefined,
@@ -106,20 +112,20 @@ export function useEvalStyleHook(
 }
 
 export function useEvalAllowedOptionsHook(
-    useEvalExpressionHook: UseEvalExpressionHook,
-    definition: ControlDefinition,
+  useEvalExpressionHook: UseEvalExpressionHook,
+  definition: ControlDefinition,
 ): EvalExpressionHook<any[]> {
   const dynamicAllowed = useEvalDynamicHook(
-      definition,
-      DynamicPropertyType.AllowedOptions,
-      useEvalExpressionHook,
+    definition,
+    DynamicPropertyType.AllowedOptions,
+    useEvalExpressionHook,
   );
   return useCallback(
-      (ctx) => {
-        if (dynamicAllowed) return dynamicAllowed(ctx);
-        return useControl([]);
-      },
-      [dynamicAllowed],
+    (ctx) => {
+      if (dynamicAllowed) return dynamicAllowed(ctx);
+      return useControl([]);
+    },
+    [dynamicAllowed],
   );
 }
 
@@ -192,20 +198,24 @@ export type EvalExpressionHook<A = any> = (
 function useDataExpression(
   fvExpr: DataExpression,
   fields: SchemaField[],
-  data: Control<any>,
+  data: DataContext,
 ) {
   const refField = findField(fields, fvExpr.field);
-  const otherField = refField ? data.fields[refField.field] : undefined;
+  const otherField = refField
+    ? lookupChildControl(data, refField.field)
+    : undefined;
   return useCalculatedControl(() => otherField?.value);
 }
 
 function useDataMatchExpression(
   fvExpr: DataMatchExpression,
   fields: SchemaField[],
-  data: Control<any>,
+  data: DataContext,
 ) {
   const refField = findField(fields, fvExpr.field);
-  const otherField = refField ? data.fields[refField.field] : undefined;
+  const otherField = refField
+    ? lookupChildControl(data, refField.field)
+    : undefined;
   return useComputed(() => {
     const fv = otherField?.value;
     return Array.isArray(fv) ? fv.includes(fvExpr.value) : fv === fvExpr.value;
@@ -220,19 +230,15 @@ export function defaultEvalHooks(
     case ExpressionType.Jsonata:
       return useJsonataExpression(
         (expr as JsonataExpression).expression,
-        context.groupControl,
+        context,
       );
     case ExpressionType.Data:
-      return useDataExpression(
-        expr as DataExpression,
-        context.fields,
-        context.groupControl,
-      );
+      return useDataExpression(expr as DataExpression, context.fields, context);
     case ExpressionType.DataMatch:
       return useDataMatchExpression(
         expr as DataMatchExpression,
         context.fields,
-        context.groupControl,
+        context,
       );
     default:
       return useControl(undefined);
@@ -290,30 +296,57 @@ export function hideDisplayOnly(
     !displayOptions.emptyText &&
     schemaInterface.isEmptyValue(
       field,
-      context.groupControl.fields[field.field].value,
+      lookupChildControl(context, field.field)?.value,
     )
   );
 }
 
 export function useJsonataExpression(
   jExpr: string,
-  data: Control<any>,
+  dataContext: DataContext,
+  bindings?: () => Record<string, any>,
 ): Control<any> {
+  const pathString = jsonPathString(dataContext.path);
   const compiledExpr = useMemo(() => {
     try {
-      return jsonata(jExpr);
+      return jsonata(pathString ? pathString + ".(" + jExpr + ")" : jExpr);
     } catch (e) {
       console.error(e);
-      return jsonata("");
+      return jsonata("null");
     }
-  }, [jExpr]);
+  }, [jExpr, pathString]);
   const control = useControl();
-  useControlEffect(
-    () => data.value,
-    async (v) => {
-      control.value = await compiledExpr.evaluate(v);
-    },
-    true,
+  const listenerRef = useRef<() => void>();
+  const [ref] = useRefState(() =>
+    makeChangeTracker(() => {
+      const l = listenerRef.current;
+      if (l) {
+        listenerRef.current = undefined;
+        addAfterChangesCallback(() => {
+          l();
+          listenerRef.current = l;
+        });
+      }
+    }),
   );
+  useEffect(() => {
+    listenerRef.current = apply;
+    apply();
+    async function apply() {
+      const [collect, updateSubscriptions] = ref.current;
+      try {
+        const bindingData = bindings
+          ? collectChanges(collect, bindings)
+          : undefined;
+        control.value = await compiledExpr.evaluate(
+          trackedStructure(dataContext.data, collect),
+          bindingData,
+        );
+      } finally {
+        updateSubscriptions();
+      }
+    }
+    return () => ref.current[1](true);
+  }, [compiledExpr]);
   return control;
 }