@react-typed-forms/schemas 15.1.3 → 16.0.0

package/src/controlRender.tsx

@@ -1,52 +1,50 @@
 import React, {
   ComponentType,
   ElementType,
-  FC,
   Fragment,
   HTMLAttributes,
   Key,
   ReactElement,
   ReactNode,
-  useCallback,
-  useEffect,
 } from "react";
 import {
   addElement,
   Control,
-  newControl,
   removeElement,
   RenderArrayElements,
-  trackedValue,
-  useComponentTracking,
-  useComputed,
-  useControl,
-  useControlEffect,
 } from "@react-typed-forms/core";
 import {
   ActionStyle,
   AdornmentPlacement,
   ArrayActionOptions,
-  ControlActionHandler,
   ControlAdornment,
-  ControlAdornmentType,
-  ControlDataContext,
   ControlDefinition,
+  ControlDefinitionType,
+  ControlState,
   CustomDisplay,
   DataControlDefinition,
-  DataRenderType,
+  defaultSchemaInterface,
   DisplayData,
   DisplayDataType,
-  DynamicPropertyType,
-  FormContextData,
+  FieldOption,
+  FormContextOptions,
+  FormNode,
+  FormState,
   GroupRenderOptions,
-  IconPlacement,
-  IconReference,
+  GroupRenderType,
   isActionControl,
   isDataControl,
   isDisplayControl,
   isGroupControl,
+  JsonPath,
+  LengthValidator,
+  lookupDataNode,
   RenderOptions,
-} from "./controlDefinition";
+  SchemaDataNode,
+  SchemaField,
+  SchemaInterface,
+  ValidatorType,
+} from "@astroapps/forms-core";
 import {
   applyLengthRestrictions,
   ControlClasses,
@@ -54,40 +52,15 @@ import {
   ExternalEditAction,
   fieldDisplayName,
   getExternalEditData,
-  getGroupClassOverrides,
-  isControlDisplayOnly,
-  JsonPath,
   rendererClass,
-  useUpdatedRef,
 } from "./util";
 import { createAction, dataControl } from "./controlBuilder";
 import {
-  defaultUseEvalExpressionHook,
-  EvalExpressionHook,
-  useEvalActionHook,
-  useEvalAllowedOptionsHook,
-  useEvalDefaultValueHook,
-  useEvalDisabledHook,
-  useEvalDisplayHook,
-  UseEvalExpressionHook,
-  useEvalLabelText,
-  useEvalReadonlyHook,
-  useEvalStyleHook,
-  useEvalVisibilityHook,
-} from "./hooks";
-import { useMakeValidationHook, ValidationContext } from "./validators";
-import { useDynamicHooks } from "./dynamicHooks";
-import { defaultSchemaInterface } from "./defaultSchemaInterface";
-import {
-  LengthValidator,
-  SchemaValidator,
-  ValidatorType,
-} from "./schemaValidator";
-import { FieldOption, SchemaField } from "./schemaField";
-import { FormNode, legacyFormNode, lookupDataNode } from "./formNode";
-import { SchemaInterface } from "./schemaInterface";
-import { makeSchemaDataNode, SchemaDataNode } from "./schemaDataNode";
-import { createSchemaTree } from "./schemaNode";
+  ActionRendererProps,
+  ControlActionHandler,
+  ControlDataContext,
+  RunExpression,
+} from "./types";
 
 export interface HtmlIconProperties {
   className?: string;
@@ -141,6 +114,10 @@ export interface HtmlButtonProperties {
   onClick?: () => void;
   inline?: boolean;
   children?: ReactNode;
+  title?: string;
+  notWrapInText?: boolean;
+  androidRippleColor?: string;
+  nonTextContent?: boolean;
 }
 export interface HtmlComponents {
   Div: ComponentType<HtmlDivProperties>;
@@ -242,7 +219,7 @@ export interface FormRenderer {
 export interface AdornmentProps {
   adornment: ControlAdornment;
   dataContext: ControlDataContext;
-  useExpr?: UseEvalExpressionHook;
+  runExpression?: RunExpression;
   designMode?: boolean;
   formOptions: FormContextOptions;
 }
@@ -408,21 +385,18 @@ export interface DisplayRendererProps {
   inline?: boolean;
 }
 
-export type ChildVisibilityFunc = (
-  child: ControlDefinition,
-  parentNode?: SchemaDataNode,
-  dontOverride?: boolean,
-) => EvalExpressionHook<boolean>;
 export interface ParentRendererProps {
   formNode: FormNode;
+  state: ControlState;
   renderChild: ChildRenderer;
   className?: string;
   textClass?: string;
   style?: React.CSSProperties;
   dataContext: ControlDataContext;
-  useChildVisibility: ChildVisibilityFunc;
-  useEvalExpression: UseEvalExpressionHook;
+  getChildState(node: FormNode, parent?: SchemaDataNode): ControlState;
+  runExpression: RunExpression;
   designMode?: boolean;
+  actionOnClick?: ControlActionHandler;
 }
 
 export interface GroupRendererProps extends ParentRendererProps {
@@ -445,383 +419,38 @@ export interface DataRendererProps extends ParentRendererProps {
   inline: boolean;
 }
 
-export interface ActionRendererProps {
-  actionId: string;
-  actionText: string;
-  actionData?: any;
-  actionStyle?: ActionStyle;
-  icon?: IconReference | null;
-  iconPlacement?: IconPlacement;
-  onClick: () => void;
-  className?: string | null;
-  textClass?: string | null;
-  style?: React.CSSProperties;
-  disabled?: boolean;
-  inline?: boolean;
-}
-
 export interface ControlRenderProps {
   control: Control<any>;
   parentPath?: JsonPath[];
 }
 
-export interface FormContextOptions {
-  readonly?: boolean | null;
-  hidden?: boolean | null;
-  disabled?: boolean | null;
-  displayOnly?: boolean;
-  inline?: boolean;
-}
-
 export type CreateDataProps = (
   controlProps: RenderLayoutProps,
   definition: DataControlDefinition,
   control: Control<any>,
 ) => DataRendererProps;
 
-export interface ControlRenderOptions
-  extends FormContextOptions,
-    ControlClasses {
+export interface ControlRenderOptions extends ControlClasses {
+  formState?: FormState;
   useDataHook?: (c: ControlDefinition) => CreateDataProps;
   actionOnClick?: ControlActionHandler;
   customDisplay?: (
     customId: string,
     displayProps: DisplayRendererProps,
   ) => ReactNode;
-  useValidationHook?: (
-    validator: SchemaValidator,
-    ctx: ValidationContext,
-  ) => void;
-  useEvalExpressionHook?: UseEvalExpressionHook;
   adjustLayout?: (
     context: ControlDataContext,
     layout: ControlLayoutProps,
   ) => ControlLayoutProps;
+  readonly?: boolean | null;
+  hidden?: boolean | null;
+  disabled?: boolean | null;
+  displayOnly?: boolean;
+  inline?: boolean;
   clearHidden?: boolean;
+  stateKey?: string;
   schemaInterface?: SchemaInterface;
-  formData?: FormContextData;
-}
-
-export function useControlRenderer(
-  definition: ControlDefinition,
-  fields: SchemaField[],
-  renderer: FormRenderer,
-  options: ControlRenderOptions = {},
-): FC<ControlRenderProps> {
-  const r = useUpdatedRef({ definition, fields, renderer, options });
-  return useCallback(
-    ({ control, parentPath }) => {
-      return (
-        <ControlRenderer
-          {...r.current}
-          control={control}
-          parentPath={parentPath}
-        />
-      );
-    },
-    [r],
-  );
-}
-export function useControlRendererComponent(
-  controlOrFormNode: ControlDefinition | FormNode,
-  renderer: FormRenderer,
-  options: ControlRenderOptions = {},
-  parentDataNode: SchemaDataNode,
-): FC<{}> {
-  const [definition, formNode] =
-    "definition" in controlOrFormNode
-      ? [controlOrFormNode.definition, controlOrFormNode]
-      : [controlOrFormNode, legacyFormNode(controlOrFormNode)];
-  const dataProps = options.useDataHook?.(definition) ?? defaultDataProps;
-  const schemaInterface = options.schemaInterface ?? defaultSchemaInterface;
-  const useExpr = options.useEvalExpressionHook ?? defaultUseEvalExpressionHook;
-
-  let dataNode = lookupDataNode(definition, parentDataNode);
-  const useValidation = useMakeValidationHook(
-    definition,
-    options.useValidationHook,
-  );
-  const dynamicHooks = useDynamicHooks({
-    defaultValueControl: useEvalDefaultValueHook(useExpr, definition),
-    visibleControl: useEvalVisibilityHook(useExpr, definition),
-    readonlyControl: useEvalReadonlyHook(useExpr, definition),
-    disabledControl: useEvalDisabledHook(useExpr, definition),
-    allowedOptions: useEvalAllowedOptionsHook(useExpr, definition),
-    labelText: useEvalLabelText(useExpr, definition),
-    actionData: useEvalActionHook(useExpr, definition),
-    customStyle: useEvalStyleHook(
-      useExpr,
-      DynamicPropertyType.Style,
-      definition,
-    ),
-    layoutStyle: useEvalStyleHook(
-      useExpr,
-      DynamicPropertyType.LayoutStyle,
-      definition,
-    ),
-    displayControl: useEvalDisplayHook(useExpr, definition),
-  });
-
-  const r = useUpdatedRef({
-    options,
-    definition,
-    parentDataNode,
-    dataNode,
-    formNode,
-  });
-
-  if (formNode == null) debugger;
-  const Component = useCallback(() => {
-    const stopTracking = useComponentTracking();
-
-    try {
-      const {
-        definition: c,
-        options,
-        parentDataNode: pdn,
-        dataNode: dn,
-        formNode,
-      } = r.current;
-      const formData = options.formData ?? {};
-      const dataContext: ControlDataContext = {
-        schemaInterface,
-        dataNode: dn,
-        parentNode: pdn,
-        formData,
-      };
-      const {
-        readonlyControl,
-        disabledControl,
-        visibleControl,
-        displayControl,
-        layoutStyle,
-        labelText,
-        customStyle,
-        allowedOptions,
-        defaultValueControl,
-        actionData,
-      } = dynamicHooks(dataContext);
-
-      const visible = visibleControl.current.value;
-      const visibility = useControl<Visibility | undefined>(() =>
-        visible != null
-          ? {
-              visible,
-              showing: visible,
-            }
-          : undefined,
-      );
-      useControlEffect(
-        () => visibleControl.value,
-        (visible) => {
-          if (visible != null)
-            visibility.setValue((ex) => ({
-              visible,
-              showing: ex ? ex.showing : visible,
-            }));
-        },
-      );
-
-      const parentControl = parentDataNode.control!;
-      const control = dataNode?.control;
-      useControlEffect(
-        () => [
-          visibility.value,
-          defaultValueControl.value,
-          control?.isNull,
-          isDataControl(definition) && definition.dontClearHidden,
-          definition.adornments?.some(
-            (x) => x.type === ControlAdornmentType.Optional,
-          ) ||
-            (isDataControl(definition) &&
-              definition.renderOptions?.type == DataRenderType.NullToggle),
-          parentControl.isNull,
-          options.hidden,
-          readonlyControl.value,
-        ],
-        ([vc, dv, _, dontClear, dontDefault, parentNull, hidden, ro]) => {
-          if (!ro) {
-            if (control) {
-              if (vc && vc.visible === vc.showing) {
-                if (hidden || !vc.visible) {
-                  control.setValue((x) =>
-                    options.clearHidden && !dontClear
-                      ? undefined
-                      : x == null && dontClear && !dontDefault
-                        ? dv
-                        : x,
-                  );
-                } else if (!dontDefault)
-                  control.setValue((x) => (x != null ? x : dv));
-              }
-            } else if (parentNull) {
-              parentControl.setValue((x) => x ?? {});
-            }
-          }
-        },
-        true,
-      );
-      const myOptionsControl = useComputed<FormContextOptions>(() => ({
-        hidden: options.hidden || !visibility.fields?.showing.value,
-        readonly: options.readonly || readonlyControl.value,
-        disabled: options.disabled || disabledControl.value,
-        displayOnly: options.displayOnly || isControlDisplayOnly(c),
-        inline: options.inline,
-      }));
-      const myOptions = trackedValue(myOptionsControl);
-      useValidation({
-        control: control ?? newControl(null),
-        hiddenControl: myOptionsControl.fields.hidden,
-        dataContext,
-      });
-      const {
-        styleClass,
-        labelClass,
-        layoutClass,
-        labelTextClass,
-        textClass,
-        ...inheritableOptions
-      } = options;
-      const childOptions: ControlRenderOptions = {
-        ...inheritableOptions,
-        ...myOptions,
-      };
-
-      useEffect(() => {
-        if (
-          control &&
-          typeof myOptions.disabled === "boolean" &&
-          control.disabled != myOptions.disabled
-        )
-          control.disabled = myOptions.disabled;
-      }, [control, myOptions.disabled]);
-
-      const adornments =
-        definition.adornments?.map((x) =>
-          renderer.renderAdornment({
-            adornment: x,
-            dataContext,
-            useExpr,
-            formOptions: myOptions,
-          }),
-        ) ?? [];
-
-      const labelAndChildren = renderControlLayout({
-        formNode,
-        renderer,
-        renderChild: (k, child, options) => {
-          const overrideClasses = getGroupClassOverrides(c);
-          const { parentDataNode, ...renderOptions } = options ?? {};
-          const dContext =
-            parentDataNode ?? dataContext.dataNode ?? dataContext.parentNode;
-          const allChildOptions = {
-            ...childOptions,
-            ...overrideClasses,
-            ...renderOptions,
-          };
-          return (
-            <NewControlRenderer
-              key={k}
-              definition={child}
-              renderer={renderer}
-              parentDataNode={dContext}
-              options={allChildOptions}
-            />
-          );
-        },
-        createDataProps: dataProps,
-        formOptions: myOptions,
-        dataContext,
-        control: displayControl ?? control,
-        schemaInterface,
-        labelText,
-        displayControl,
-        style: customStyle.value,
-        allowedOptions,
-        customDisplay: options.customDisplay,
-        actionDataControl: actionData,
-        actionOnClick: options.actionOnClick,
-        styleClass: options.styleClass,
-        labelClass: options.labelClass,
-        textClass: options.textClass,
-        useEvalExpression: useExpr,
-        useChildVisibility: (childDef, parentNode, dontOverride) => {
-          return useEvalVisibilityHook(
-            useExpr,
-            childDef,
-            !dontOverride
-              ? lookupDataNode(
-                  childDef,
-                  parentNode ?? dataNode ?? parentDataNode,
-                )
-              : undefined,
-          );
-        },
-      });
-      const layoutProps: ControlLayoutProps = {
-        ...labelAndChildren,
-        adornments,
-        className: rendererClass(options.layoutClass, c.layoutClass),
-        style: layoutStyle.value,
-      };
-      const renderedControl = renderer.renderLayout(
-        options.adjustLayout?.(dataContext, layoutProps) ?? layoutProps,
-      );
-      return renderer.renderVisibility({ visibility, ...renderedControl });
-    } finally {
-      stopTracking();
-    }
-  }, [r, dataProps, useValidation, renderer, schemaInterface, dynamicHooks]);
-  (Component as any).displayName = "RenderControl";
-  return Component;
-}
-
-export function ControlRenderer({
-  definition,
-  fields,
-  renderer,
-  options,
-  control,
-  parentPath,
-}: {
-  definition: ControlDefinition;
-  fields: SchemaField[];
-  renderer: FormRenderer;
-  options?: ControlRenderOptions;
-  control: Control<any>;
-  parentPath?: JsonPath[];
-}) {
-  const schemaDataNode = makeSchemaDataNode(
-    createSchemaTree(fields).rootNode,
-    control,
-  );
-  const Render = useControlRendererComponent(
-    definition,
-    renderer,
-    options,
-    schemaDataNode,
-  );
-  return <Render />;
-}
-
-export function NewControlRenderer({
-  definition,
-  renderer,
-  options,
-  parentDataNode,
-}: {
-  definition: ControlDefinition | FormNode;
-  renderer: FormRenderer;
-  options?: ControlRenderOptions;
-  parentDataNode: SchemaDataNode;
-}) {
-  const Render = useControlRendererComponent(
-    definition,
-    renderer,
-    options,
-    parentDataNode,
-  );
-  return <Render />;
+  variables?: Record<string, any>;
 }
 
 export function defaultDataProps(
@@ -832,6 +461,8 @@ export function defaultDataProps(
     schemaInterface = defaultSchemaInterface,
     styleClass,
     textClass: tc,
+    displayOnly,
+    inline,
     ...props
   }: RenderLayoutProps,
   definition: DataControlDefinition,
@@ -841,10 +472,9 @@ export function defaultDataProps(
   const field = dataNode.schema.field;
   const className = rendererClass(styleClass, definition.styleClass);
   const textClass = rendererClass(tc, definition.textClass);
-  const displayOnly = !!formOptions.displayOnly;
   const required = !!definition.required && !displayOnly;
   const fieldOptions = schemaInterface.getDataOptions(dataNode);
-  const _allowed = allowedOptions?.value ?? [];
+  const _allowed = allowedOptions ?? [];
   const allowed = Array.isArray(_allowed) ? _allowed : [_allowed];
   return {
     dataNode,
@@ -852,22 +482,22 @@ export function defaultDataProps(
     control,
     field,
     id: "c" + control.uniqueId,
-    inline: !!formOptions.inline,
+    inline: !!inline,
     options:
       allowed.length > 0
         ? allowed
             .map((x) =>
               typeof x === "object"
                 ? x
-                : (fieldOptions?.find((y) => y.value == x) ?? {
+                : fieldOptions?.find((y) => y.value == x) ?? {
                     name: x.toString(),
                     value: x,
-                  }),
+                  },
             )
             .filter((x) => x != null)
         : fieldOptions,
     readonly: !!formOptions.readonly,
-    displayOnly,
+    displayOnly: !!displayOnly,
     renderOptions: definition.renderOptions ?? { type: "Standard" },
     required,
     hidden: !!formOptions.hidden,
@@ -880,12 +510,15 @@ export function defaultDataProps(
 
 export interface ChildRendererOptions {
   parentDataNode?: SchemaDataNode;
-  formData?: FormContextData;
   inline?: boolean;
   displayOnly?: boolean;
   styleClass?: string;
   layoutClass?: string;
   labelClass?: string;
+  labelTextClass?: string;
+  actionOnClick?: ControlActionHandler;
+  stateKey?: string;
+  variables?: Record<string, any>;
 }
 
 export type ChildRenderer = (
@@ -897,18 +530,17 @@ export type ChildRenderer = (
 export interface RenderLayoutProps {
   formNode: FormNode;
   renderer: FormRenderer;
+  state: ControlState;
   renderChild: ChildRenderer;
   createDataProps: CreateDataProps;
   formOptions: FormContextOptions;
   dataContext: ControlDataContext;
   control?: Control<any>;
-  labelText?: Control<string | null | undefined>;
-  displayControl?: Control<string | undefined>;
   style?: React.CSSProperties;
-  allowedOptions?: Control<any[] | undefined>;
-  actionDataControl?: Control<any | undefined | null>;
-  useChildVisibility: ChildVisibilityFunc;
-  useEvalExpression: UseEvalExpressionHook;
+  allowedOptions?: any[];
+  getChildState(node: FormNode, parent?: SchemaDataNode): ControlState;
+  runExpression: RunExpression;
+
   actionOnClick?: ControlActionHandler;
   schemaInterface?: SchemaInterface;
   designMode?: boolean;
@@ -920,6 +552,8 @@ export interface RenderLayoutProps {
   labelTextClass?: string;
   styleClass?: string;
   textClass?: string;
+  inline?: boolean;
+  displayOnly?: boolean;
 }
 export function renderControlLayout(
   props: RenderLayoutProps,
@@ -930,21 +564,23 @@ export function renderControlLayout(
     control,
     dataContext,
     createDataProps: dataProps,
-    displayControl,
     style,
-    labelText,
-    useChildVisibility,
     designMode,
     customDisplay,
-    useEvalExpression,
+    runExpression,
     labelClass,
     labelTextClass,
     styleClass,
     textClass,
     formNode,
     formOptions,
+    actionOnClick,
+    state,
+    getChildState,
+    inline,
+    displayOnly,
   } = props;
-  const c = formNode.definition;
+  const c = state.definition;
   if (isDataControl(c)) {
     return renderData(c);
   }
@@ -959,22 +595,24 @@ export function renderControlLayout(
     }
 
     return {
-      inline: formOptions.inline,
+      inline,
       processLayout: renderer.renderGroup({
         formNode,
+        state,
         definition: c,
         renderChild,
-        useEvalExpression,
+        runExpression,
         dataContext,
         renderOptions: c.groupOptions ?? { type: "Standard" },
         className: rendererClass(styleClass, c.styleClass),
         textClass: rendererClass(textClass, c.textClass),
-        useChildVisibility,
         style,
         designMode,
+        actionOnClick,
+        getChildState,
       }),
       label: {
-        label: labelText?.value ?? c.title,
+        label: c.title,
         className: rendererClass(labelClass, c.labelClass),
         textClass: rendererClass(labelTextClass, c.labelTextClass),
         type: LabelType.Group,
@@ -983,17 +621,22 @@ export function renderControlLayout(
     };
   }
   if (isActionControl(c)) {
-    const actionData = props.actionDataControl?.value ?? c.actionData;
+    const actionData = c.actionData;
+    const actionStyle = c.actionStyle ?? ActionStyle.Button;
+    const actionContent =
+      actionStyle == ActionStyle.Group ? renderActionGroup() : undefined;
     return {
-      inline: formOptions.inline,
+      inline,
       children: renderer.renderAction({
-        actionText: labelText?.value ?? c.title ?? c.actionId,
+        actionText: c.title ?? c.actionId,
         actionId: c.actionId,
         actionData,
-        actionStyle: c.actionStyle ?? ActionStyle.Button,
+        actionContent,
+        actionStyle,
         textClass: rendererClass(textClass, c.textClass),
+        iconPlacement: c.iconPlacement,
         icon: c.icon,
-        inline: formOptions.inline,
+        inline,
         onClick:
           props.actionOnClick?.(c.actionId, actionData, dataContext) ??
           (() => {}),
@@ -1001,6 +644,17 @@ export function renderControlLayout(
         style,
       }),
     };
+
+    function renderActionGroup() {
+      const childDefs = formNode.getResolvedChildren();
+      const childDef = {
+        type: ControlDefinitionType.Group,
+        groupOptions: { type: GroupRenderType.Contents, hideTitle: true },
+        children: childDefs,
+      };
+      const childNode: FormNode = formNode.createChildNode("child", childDef);
+      return renderChild("child", childNode, {});
+    }
   }
   if (isDisplayControl(c)) {
     const data = c.displayData ?? {};
@@ -1009,18 +663,17 @@ export function renderControlLayout(
       className: rendererClass(styleClass, c.styleClass),
       textClass: rendererClass(textClass, c.textClass),
       style,
-      display: displayControl,
       dataContext,
-      inline: formOptions.inline,
+      inline,
     };
     if (data.type === DisplayDataType.Custom && customDisplay) {
       return {
-        inline: formOptions.inline,
+        inline,
         children: customDisplay((data as CustomDisplay).customId, displayProps),
       };
     }
     return {
-      inline: formOptions.inline,
+      inline,
       children: renderer.renderDisplay(displayProps),
     };
   }
@@ -1030,20 +683,17 @@ export function renderControlLayout(
     if (!control) return { children: "No control for: " + c.field };
     const rendererProps = dataProps(props, c, control);
     const label = !c.hideTitle
-      ? controlTitle(
-          labelText?.value ?? c.title,
-          props.dataContext.dataNode!.schema.field,
-        )
+      ? controlTitle(c.title, props.dataContext.dataNode!.schema.field)
       : undefined;
     return {
-      inline: formOptions.inline,
+      inline,
       processLayout: renderer.renderData(rendererProps),
       label: {
         type:
           (c.children?.length ?? 0) > 0 ? LabelType.Group : LabelType.Control,
         label,
         forId: rendererProps.id,
-        required: c.required && !props.formOptions.displayOnly,
+        required: c.required && !displayOnly,
         hide: c.hideTitle,
         className: rendererClass(labelClass, c.labelClass),
         textClass: rendererClass(labelTextClass, c.labelTextClass),
@@ -1329,15 +979,25 @@ export function applyArrayLengthRestrictions(
 }
 
 export function fieldOptionAdornment(p: DataRendererProps) {
-  return (o: FieldOption, i: number, selected: boolean) => (
+  return (o: FieldOption, fieldIndex: number, selected: boolean) => (
     <RenderArrayElements
       array={p.formNode.getChildNodes()}
       children={(cd, i) =>
         p.renderChild(i, cd, {
           parentDataNode: p.dataContext.parentNode,
-          formData: { option: o, optionSelected: selected },
+          stateKey: fieldIndex.toString(),
+          variables: { formData: { option: o, optionSelected: selected } },
         })
       }
     />
   );
 }
+
+export function lookupChildDataContext(
+  dataContext: ControlDataContext,
+  c: ControlDefinition,
+): ControlDataContext {
+  const parentNode = dataContext.dataNode ?? dataContext.parentNode;
+  const dataNode = lookupDataNode(c, parentNode);
+  return { ...dataContext, parentNode, dataNode };
+}