@react-typed-forms/schemas 15.2.0 → 16.0.0

package/src/controlRender.tsx

@@ -1,54 +1,50 @@
 import React, {
-  ButtonHTMLAttributes,
+  ComponentType,
   ElementType,
-  FC,
   Fragment,
   HTMLAttributes,
-  InputHTMLAttributes,
   Key,
-  LabelHTMLAttributes,
   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,
+  GroupRenderType,
   isActionControl,
   isDataControl,
   isDisplayControl,
   isGroupControl,
-  legacyFormNode,
+  JsonPath,
+  LengthValidator,
   lookupDataNode,
   RenderOptions,
-} from "./controlDefinition";
+  SchemaDataNode,
+  SchemaField,
+  SchemaInterface,
+  ValidatorType,
+} from "@astroapps/forms-core";
 import {
   applyLengthRestrictions,
   ControlClasses,
@@ -56,53 +52,82 @@ 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 {
-  createSchemaLookup,
-  FieldOption,
-  makeSchemaDataNode,
-  SchemaDataNode,
-  SchemaField,
-  SchemaInterface,
-} from "./schemaField";
+  ActionRendererProps,
+  ControlActionHandler,
+  ControlDataContext,
+  RunExpression,
+} from "./types";
 
+export interface HtmlIconProperties {
+  className?: string;
+  style?: React.CSSProperties;
+  iconLibrary?: string;
+  iconName?: string;
+}
+
+export interface HtmlLabelProperties {
+  htmlFor?: string;
+  className?: string;
+  textClass?: string;
+  children?: ReactNode;
+}
+
+export interface HtmlDivProperties {
+  id?: string;
+  className?: string;
+  textClass?: string;
+  style?: React.CSSProperties;
+  children?: ReactNode;
+  text?: string;
+  html?: string;
+  nativeRef?: (e: HTMLElement | null) => void;
+  inline?: boolean;
+}
+
+export interface HtmlInputProperties {
+  id?: string;
+  className?: string;
+  textClass?: string;
+  name?: string;
+  type?: string;
+  checked?: boolean;
+  style?: React.CSSProperties;
+  readOnly?: boolean;
+  placeholder?: string;
+  value?: string | number;
+  onBlur?: () => void;
+  disabled?: boolean;
+  inputRef?: (e: HTMLElement | null) => void;
+  onChangeValue?: (value: string) => void;
+  onChangeChecked?: (checked: boolean) => void;
+}
+
+export interface HtmlButtonProperties {
+  className?: string;
+  textClass?: string;
+  disabled?: boolean;
+  style?: React.CSSProperties;
+  onClick?: () => void;
+  inline?: boolean;
+  children?: ReactNode;
+  title?: string;
+  notWrapInText?: boolean;
+  androidRippleColor?: string;
+  nonTextContent?: boolean;
+}
 export interface HtmlComponents {
-  Div: ElementType<HTMLAttributes<HTMLDivElement>, "div">;
+  Div: ComponentType<HtmlDivProperties>;
   Span: ElementType<HTMLAttributes<HTMLSpanElement>>;
-  Button: ElementType<ButtonHTMLAttributes<HTMLButtonElement>>;
-  I: ElementType<HTMLAttributes<HTMLElement>>;
-  Label: ElementType<LabelHTMLAttributes<HTMLLabelElement>>;
+  Button: ComponentType<HtmlButtonProperties>;
+  I: ComponentType<HtmlIconProperties>;
+  Label: ComponentType<HtmlLabelProperties>;
   B: ElementType<HTMLAttributes<HTMLElement>>;
   H1: ElementType<HTMLAttributes<HTMLElement>>;
-  Input: ElementType<InputHTMLAttributes<HTMLInputElement>, "input">;
+  Input: ComponentType<HtmlInputProperties>;
 }
 /**
  * Interface for rendering different types of form controls.
@@ -187,7 +212,6 @@ export interface FormRenderer {
    * @returns A React node.
    */
   renderLabelText: (props: ReactNode) => ReactNode;
-  renderText: (props: ReactNode, className?: string) => ReactNode;
 
   html: HtmlComponents;
 }
@@ -195,7 +219,7 @@ export interface FormRenderer {
 export interface AdornmentProps {
   adornment: ControlAdornment;
   dataContext: ControlDataContext;
-  useExpr?: UseEvalExpressionHook;
+  runExpression?: RunExpression;
   designMode?: boolean;
   formOptions: FormContextOptions;
 }
@@ -241,6 +265,7 @@ export interface RenderedLayout {
   className?: string;
   style?: React.CSSProperties;
   wrapLayout: (layout: ReactElement) => ReactElement;
+  inline?: boolean;
 }
 
 export interface RenderedControl {
@@ -248,6 +273,7 @@ export interface RenderedControl {
   className?: string;
   style?: React.CSSProperties;
   divRef?: (cb: HTMLElement | null) => void;
+  inline?: boolean;
 }
 
 export interface VisibilityRendererProps extends RenderedControl {
@@ -262,6 +288,7 @@ export interface ControlLayoutProps {
   processLayout?: (props: ControlLayoutProps) => ControlLayoutProps;
   className?: string | null;
   style?: React.CSSProperties;
+  inline?: boolean;
 }
 
 /**
@@ -318,6 +345,11 @@ export interface LabelRendererProps {
    * The CSS class name for the label.
    */
   className?: string;
+
+  /**
+   * The CSS class name for the label text.
+   */
+  textClass?: string;
 }
 
 /**
@@ -344,26 +376,27 @@ export interface DisplayRendererProps {
    */
   className?: string;
 
+  textClass?: string;
+
   /**
    * The CSS styles for the display renderer.
    */
   style?: React.CSSProperties;
+  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 {
@@ -375,7 +408,6 @@ export interface DataRendererProps extends ParentRendererProps {
   renderOptions: RenderOptions;
   definition: DataControlDefinition;
   field: SchemaField;
-  elementIndex?: number;
   id: string;
   control: Control<any>;
   readonly: boolean;
@@ -384,16 +416,7 @@ export interface DataRendererProps extends ParentRendererProps {
   hidden: boolean;
   dataNode: SchemaDataNode;
   displayOnly: boolean;
-}
-
-export interface ActionRendererProps {
-  actionId: string;
-  actionText: string;
-  actionData?: any;
-  onClick: () => void;
-  className?: string | null;
-  style?: React.CSSProperties;
-  disabled?: boolean;
+  inline: boolean;
 }
 
 export interface ControlRenderProps {
@@ -401,411 +424,57 @@ export interface ControlRenderProps {
   parentPath?: JsonPath[];
 }
 
-export interface FormContextOptions {
-  readonly?: boolean | null;
-  hidden?: boolean | null;
-  disabled?: boolean | null;
-  displayOnly?: boolean;
-}
-
-export interface DataControlProps {
-  formNode: FormNode;
-  definition: DataControlDefinition;
-  dataContext: ControlDataContext;
-  control: Control<any>;
-  formOptions: FormContextOptions;
-  style?: React.CSSProperties | undefined;
-  renderChild: ChildRenderer;
-  elementIndex?: number;
-  allowedOptions?: Control<any[] | undefined>;
-  useChildVisibility: ChildVisibilityFunc;
-  useEvalExpression: UseEvalExpressionHook;
-  schemaInterface?: SchemaInterface;
-  designMode?: boolean;
-  styleClass?: string;
-  layoutClass?: string;
-}
-
 export type CreateDataProps = (
-  controlProps: DataControlProps,
+  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;
-  elementIndex?: number;
-  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 elementIndex = options.elementIndex;
-  const schemaInterface = options.schemaInterface ?? defaultSchemaInterface;
-  const useExpr = options.useEvalExpressionHook ?? defaultUseEvalExpressionHook;
-
-  let dataNode: SchemaDataNode | undefined;
-  if (elementIndex != null) {
-    dataNode = parentDataNode.getChildElement(elementIndex);
-  } else {
-    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,
-    elementIndex,
-    parentDataNode,
-    dataNode,
-    formNode,
-  });
-
-  if (formNode == null) debugger;
-  const Component = useCallback(() => {
-    const stopTracking = useComponentTracking();
-
-    try {
-      const {
-        definition: c,
-        options,
-        elementIndex,
-        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),
-      }));
-      const myOptions = trackedValue(myOptionsControl);
-      useValidation({
-        control: control ?? newControl(null),
-        hiddenControl: myOptionsControl.fields.hidden,
-        dataContext,
-      });
-      const { styleClass, labelClass, layoutClass, ...inheritableOptions } =
-        options;
-      const childOptions: ControlRenderOptions = {
-        ...inheritableOptions,
-        ...myOptions,
-        elementIndex: undefined,
-      };
-
-      useEffect(() => {
-        if (
-          control &&
-          typeof myOptions.disabled === "boolean" &&
-          control.disabled != myOptions.disabled
-        )
-          control.disabled = myOptions.disabled;
-      }, [control, myOptions.disabled]);
-      if (parentControl.isNull) return <></>;
-
-      const adornments =
-        definition.adornments?.map((x) =>
-          renderer.renderAdornment({
-            adornment: x,
-            dataContext,
-            useExpr,
-            formOptions: myOptions,
-          }),
-        ) ?? [];
-      const otherChildNodes =
-        definition.childRefId &&
-        formNode.tree.getByRefId(definition.childRefId)?.getChildNodes();
-
-      const labelAndChildren = renderControlLayout({
-        formNode: otherChildNodes
-          ? formNode.tree.createTempNode(
-              formNode.id,
-              definition,
-              otherChildNodes,
-            )
-          : formNode,
-        definition: c,
-        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,
-        elementIndex,
-        schemaInterface,
-        labelText,
-        displayControl,
-        style: customStyle.value,
-        allowedOptions,
-        customDisplay: options.customDisplay,
-        actionDataControl: actionData,
-        actionOnClick: options.actionOnClick,
-        styleClass: options.styleClass,
-        labelClass: options.labelClass,
-        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(
-    createSchemaLookup({ "": fields }).getSchema("")!,
-    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({
-  definition,
-  control,
-  formOptions,
-  style,
-  allowedOptions,
-  schemaInterface = defaultSchemaInterface,
-  styleClass,
-  ...props
-}: DataControlProps): DataRendererProps {
+export function defaultDataProps(
+  {
+    formOptions,
+    style,
+    allowedOptions,
+    schemaInterface = defaultSchemaInterface,
+    styleClass,
+    textClass: tc,
+    displayOnly,
+    inline,
+    ...props
+  }: RenderLayoutProps,
+  definition: DataControlDefinition,
+  control: Control<any>,
+): DataRendererProps {
   const dataNode = props.dataContext.dataNode!;
   const field = dataNode.schema.field;
   const className = rendererClass(styleClass, definition.styleClass);
-  const displayOnly = !!formOptions.displayOnly;
+  const textClass = rendererClass(tc, definition.textClass);
   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,
@@ -813,38 +482,43 @@ export function defaultDataProps({
     control,
     field,
     id: "c" + control.uniqueId,
+    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,
     className,
+    textClass,
     style,
     ...props,
   };
 }
 
 export interface ChildRendererOptions {
-  elementIndex?: number;
   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 = (
@@ -853,23 +527,20 @@ export type ChildRenderer = (
   options?: ChildRendererOptions,
 ) => ReactNode;
 
-export interface RenderControlProps {
-  definition: ControlDefinition;
+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>;
-  elementIndex?: number;
-  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;
@@ -878,30 +549,38 @@ export interface RenderControlProps {
     displayProps: DisplayRendererProps,
   ) => ReactNode;
   labelClass?: string;
+  labelTextClass?: string;
   styleClass?: string;
+  textClass?: string;
+  inline?: boolean;
+  displayOnly?: boolean;
 }
 export function renderControlLayout(
-  props: RenderControlProps,
+  props: RenderLayoutProps,
 ): ControlLayoutProps {
   const {
-    definition: c,
     renderer,
     renderChild,
     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 = state.definition;
   if (isDataControl(c)) {
     return renderData(c);
   }
@@ -916,33 +595,48 @@ export function renderControlLayout(
     }
 
     return {
+      inline,
       processLayout: renderer.renderGroup({
         formNode,
+        state,
         definition: c,
         renderChild,
-        useEvalExpression,
+        runExpression,
         dataContext,
         renderOptions: c.groupOptions ?? { type: "Standard" },
         className: rendererClass(styleClass, c.styleClass),
-        useChildVisibility,
+        textClass: rendererClass(textClass, c.textClass),
         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,
         hide: c.groupOptions?.hideTitle,
       },
     };
   }
   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,
       children: renderer.renderAction({
-        actionText: labelText?.value ?? c.title ?? c.actionId,
+        actionText: c.title ?? c.actionId,
         actionId: c.actionId,
         actionData,
+        actionContent,
+        actionStyle,
+        textClass: rendererClass(textClass, c.textClass),
+        iconPlacement: c.iconPlacement,
+        icon: c.icon,
+        inline,
         onClick:
           props.actionOnClick?.(c.actionId, actionData, dataContext) ??
           (() => {}),
@@ -950,22 +644,36 @@ 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 ?? {};
     const displayProps = {
       data,
       className: rendererClass(styleClass, c.styleClass),
+      textClass: rendererClass(textClass, c.textClass),
       style,
-      display: displayControl,
       dataContext,
+      inline,
     };
     if (data.type === DisplayDataType.Custom && customDisplay) {
       return {
+        inline,
         children: customDisplay((data as CustomDisplay).customId, displayProps),
       };
     }
     return {
+      inline,
       children: renderer.renderDisplay(displayProps),
     };
   }
@@ -973,29 +681,22 @@ export function renderControlLayout(
 
   function renderData(c: DataControlDefinition): ControlLayoutProps {
     if (!control) return { children: "No control for: " + c.field };
-    const rendererProps = dataProps(
-      props as RenderControlProps & {
-        definition: DataControlDefinition;
-        control: Control<any>;
-      },
-    );
-
+    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,
       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),
       },
       errorControl: control,
     };
@@ -1010,6 +711,7 @@ type MarkupKeys = keyof Omit<
   | "wrapLayout"
   | "readonly"
   | "disabled"
+  | "inline"
 >;
 export function appendMarkup(
   k: MarkupKeys,
@@ -1071,13 +773,21 @@ export function renderLayoutParts(
   props: ControlLayoutProps,
   renderer: FormRenderer,
 ): RenderedLayout {
-  const { className, children, style, errorControl, label, adornments } =
-    props.processLayout?.(props) ?? props;
+  const {
+    className,
+    children,
+    style,
+    errorControl,
+    label,
+    adornments,
+    inline,
+  } = props.processLayout?.(props) ?? props;
   const layout: RenderedLayout = {
     children,
     errorControl,
     style,
     className: className!,
+    inline,
     wrapLayout: (x) => x,
   };
   (adornments ?? [])
@@ -1269,14 +979,25 @@ export function applyArrayLengthRestrictions(
 }
 
 export function fieldOptionAdornment(p: DataRendererProps) {
-  return (o: FieldOption, i: number, selected: boolean) => (
-    <RenderArrayElements array={p.formNode.getChildNodes()}>
-      {(cd, i) =>
+  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 } },
         })
       }
-    </RenderArrayElements>
+    />
   );
 }
+
+export function lookupChildDataContext(
+  dataContext: ControlDataContext,
+  c: ControlDefinition,
+): ControlDataContext {
+  const parentNode = dataContext.dataNode ?? dataContext.parentNode;
+  const dataNode = lookupDataNode(c, parentNode);
+  return { ...dataContext, parentNode, dataNode };
+}