@react-typed-forms/schemas 16.2.2 → 17.0.0

package/lib/index.js

@@ -1,9 +1,9 @@
-import { isCompoundField, findField, getTagParam, SchemaTags, ControlDefinitionType, isScalarField, DataRenderType, isDataControl, isGroupControl, createSchemaTree, relativePath, isCompoundNode, fieldPathForDefinition, schemaForFieldPath, isCheckEntryClasses, isGridRenderer, isAutoCompleteClasses, getGroupRendererOptions, ValidatorType, ControlAdornmentType, DisplayDataType, DynamicPropertyType, ExpressionType, GroupRenderType, mergeOption, mergeFields, resolveSchemas, isActionControl, ActionStyle, isDisplayControl, AdornmentPlacement, lookupDataNode, defaultSchemaInterface, createFormState, legacyFormNode, createSchemaDataNode } from '@astroapps/forms-core';
+import { isCompoundField, findField, getTagParam, SchemaTags, ControlDefinitionType, isScalarField, DataRenderType, isDataControl, isGroupControl, createSchemaTree, relativePath, isCompoundNode, fieldPathForDefinition, schemaForFieldPath, isCheckEntryClasses, isGridRenderer, isAutoCompleteClasses, getGroupRendererOptions, emptyGroupDefinition, mergeOption, mergeFields, resolveSchemas, dataControl, isActionControl, ActionStyle, isDisplayControl, DisplayDataType, AdornmentPlacement, ValidatorType, lookupDataNode, defaultSchemaInterface, ControlDisableType, ControlAdornmentType, defaultResolveChildNodes, defaultEvaluators, createFormStateNode, legacyFormNode, createSchemaDataNode } from '@astroapps/forms-core';
 export * from '@astroapps/forms-core';
-import { useRef, useMemo, useState, useEffect, useCallback } from 'react';
+import { useRef, useMemo, useEffect, useCallback } from 'react';
 import clsx from 'clsx';
-import { getElementIndex, ensureMetaValue, newControl, ControlChange, useControl, createScopedEffect, removeElement, RenderArrayElements, addElement, useComponentTracking } from '@react-typed-forms/core';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { getElementIndex, ensureMetaValue, newControl, ControlChange, useControl, createScopedEffect, removeElement, addElement, useComponentTracking, useComputed, useControlEffect } from '@react-typed-forms/core';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -18,7 +18,7 @@ function _objectWithoutPropertiesLoose(r, e) {
   if (null == r) return {};
   var t = {};
   for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (e.includes(n)) continue;
+    if (-1 !== e.indexOf(n)) continue;
     t[n] = r[n];
   }
   return t;
@@ -726,131 +726,17 @@ function useExpression(defaultValue, runExpression, expression, coerce, bindings
   }, value);
   return value;
 }
-
-function dataControl(field, title, options) {
-  return _extends({
-    type: ControlDefinitionType.Data,
-    field,
-    title
-  }, options);
-}
-function validatorOptions(type) {
-  return o => _extends({
-    type
-  }, o);
-}
-function adornmentOptions(type) {
-  return o => _extends({
-    type
-  }, o);
-}
-function renderOptionsFor(type) {
-  return o => ({
-    renderOptions: _extends({
-      type
-    }, o)
-  });
-}
-const autocompleteOptions = renderOptionsFor(DataRenderType.Autocomplete);
-const checkListOptions = renderOptionsFor(DataRenderType.CheckList);
-const radioButtonOptions = renderOptionsFor(DataRenderType.Radio);
-const lengthValidatorOptions = validatorOptions(ValidatorType.Length);
-const jsonataValidatorOptions = validatorOptions(ValidatorType.Jsonata);
-const dateValidatorOptions = validatorOptions(ValidatorType.Date);
-const accordionOptions = adornmentOptions(ControlAdornmentType.Accordion);
-const textfieldOptions = renderOptionsFor(DataRenderType.Textfield);
-const displayOnlyOptions = renderOptionsFor(DataRenderType.DisplayOnly);
-const jsonataOptions = renderOptionsFor(DataRenderType.Jsonata);
-function textDisplayControl(text, options) {
-  return _extends({
-    type: ControlDefinitionType.Display,
-    displayData: {
-      type: DisplayDataType.Text,
-      text
-    }
-  }, options);
-}
-function htmlDisplayControl(html, options) {
-  return _extends({
-    type: ControlDefinitionType.Display,
-    displayData: {
-      type: DisplayDataType.Html,
-      html
-    }
-  }, options);
-}
-function dynamicDefaultValue(expr) {
-  return {
-    type: DynamicPropertyType.DefaultValue,
-    expr
-  };
-}
-function dynamicReadonly(expr) {
-  return {
-    type: DynamicPropertyType.Readonly,
-    expr
-  };
-}
-function dynamicVisibility(expr) {
-  return {
-    type: DynamicPropertyType.Visible,
-    expr
-  };
-}
-function dynamicDisabled(expr) {
-  return {
-    type: DynamicPropertyType.Disabled,
-    expr
-  };
-}
-function fieldExpr(field) {
-  return {
-    type: ExpressionType.Data,
-    field
-  };
-}
-function fieldEqExpr(field, value) {
-  return {
-    type: ExpressionType.DataMatch,
-    field,
-    value
-  };
-}
-function jsonataExpr(expression) {
-  return {
-    type: ExpressionType.Jsonata,
-    expression
-  };
-}
-function groupedControl(children, title, options) {
-  return _extends({
-    type: ControlDefinitionType.Group,
-    children,
-    title,
-    groupOptions: {
-      type: "Standard",
-      hideTitle: !title
-    }
-  }, options);
-}
-function compoundControl(field, title, children, options) {
-  return _extends({
-    type: ControlDefinitionType.Data,
-    field,
-    children,
-    title,
-    renderOptions: {
-      type: "Standard"
-    }
-  }, options);
-}
-function actionControl(actionText, actionId, options) {
-  return _extends({
-    type: ControlDefinitionType.Action,
-    title: actionText,
-    actionId
-  }, options);
+function setIncluded(array, elem, included) {
+  const already = array.includes(elem);
+  if (included === already) {
+    return array;
+  }
+  if (included) {
+    return [...array, elem];
+  }
+  return array.filter(e => e !== elem);
 }
+
 function createAction(actionId, onClick, actionText, options) {
   return _extends({
     actionId,
@@ -858,14 +744,6 @@ function createAction(actionId, onClick, actionText, options) {
     actionText: actionText != null ? actionText : actionId
   }, options);
 }
-const emptyGroupDefinition = {
-  type: ControlDefinitionType.Group,
-  children: [],
-  groupOptions: {
-    type: GroupRenderType.Standard,
-    hideTitle: true
-  }
-};
 function useControlDefinitionForSchema(sf, definition = emptyGroupDefinition) {
   return useMemo(() => {
     var _definition$children;
@@ -897,7 +775,7 @@ function createIconLibraryExtension(name, value) {
   };
 }
 
-const _excluded$1 = ["formOptions", "style", "allowedOptions", "schemaInterface", "styleClass", "textClass", "displayOnly", "inline"];
+const _excluded$1 = ["formNode", "style", "schemaInterface", "styleClass", "textClass", "displayOnly", "inline"];
 const AppendAdornmentPriority = 0;
 const WrapAdornmentPriority = 1000;
 /**
@@ -921,9 +799,8 @@ var LabelType;
 function defaultDataProps(_ref, definition, control) {
   var _definition$renderOpt;
   let {
-      formOptions,
+      formNode,
       style,
-      allowedOptions,
       schemaInterface = defaultSchemaInterface,
       styleClass,
       textClass: tc,
@@ -936,30 +813,24 @@ function defaultDataProps(_ref, definition, control) {
   const className = rendererClass(styleClass, definition.styleClass);
   const textClass = rendererClass(tc, definition.textClass);
   const required = !!definition.required && !displayOnly;
-  const fieldOptions = schemaInterface.getDataOptions(dataNode);
-  const _allowed = allowedOptions != null ? allowedOptions : [];
-  const allowed = Array.isArray(_allowed) ? _allowed : [_allowed];
+  const id = "c" + control.uniqueId;
   return _extends({
     dataNode,
+    formNode,
     definition,
     control,
     field,
-    id: "c" + control.uniqueId,
+    id,
+    errorId: "err_" + id,
     inline: !!inline,
-    options: allowed.length > 0 ? allowed.map(x => {
-      var _fieldOptions$find;
-      return typeof x === "object" ? x : (_fieldOptions$find = fieldOptions == null ? void 0 : fieldOptions.find(y => y.value == x)) != null ? _fieldOptions$find : {
-        name: x.toString(),
-        value: x
-      };
-    }).filter(x => x != null) : fieldOptions,
-    readonly: !!formOptions.readonly,
+    options: formNode.resolved.fieldOptions,
+    readonly: formNode.readonly,
     displayOnly: !!displayOnly,
     renderOptions: (_definition$renderOpt = definition.renderOptions) != null ? _definition$renderOpt : {
       type: "Standard"
     },
     required,
-    hidden: !!formOptions.hidden,
+    hidden: !formNode.visible,
     className,
     textClass,
     style
@@ -981,14 +852,11 @@ function renderControlLayout(props) {
     styleClass,
     textClass,
     formNode,
-    formOptions,
     actionOnClick,
-    state,
-    getChildState,
     inline,
     displayOnly
   } = props;
-  const c = state.definition;
+  const c = formNode.definition;
   if (isDataControl(c)) {
     return renderData(c);
   }
@@ -1005,7 +873,6 @@ function renderControlLayout(props) {
       inline,
       processLayout: renderer.renderGroup({
         formNode,
-        state,
         definition: c,
         renderChild,
         runExpression,
@@ -1017,8 +884,7 @@ function renderControlLayout(props) {
         textClass: rendererClass(textClass, c.textClass),
         style,
         designMode,
-        actionOnClick,
-        getChildState
+        actionOnClick
       }),
       label: {
         label: c.title,
@@ -1030,10 +896,11 @@ function renderControlLayout(props) {
     };
   }
   if (isActionControl(c)) {
-    var _c$actionStyle, _c$title, _props$actionOnClick;
+    var _c$actionStyle, _c$title;
     const actionData = c.actionData;
     const actionStyle = (_c$actionStyle = c.actionStyle) != null ? _c$actionStyle : ActionStyle.Button;
     const actionContent = actionStyle == ActionStyle.Group ? renderActionGroup() : undefined;
+    const handler = props.actionOnClick == null ? void 0 : props.actionOnClick(c.actionId, actionData, dataContext);
     return {
       inline,
       children: renderer.renderAction({
@@ -1046,24 +913,41 @@ function renderControlLayout(props) {
         iconPlacement: c.iconPlacement,
         icon: c.icon,
         inline,
-        disabled: state.disabled,
-        onClick: (_props$actionOnClick = props.actionOnClick == null ? void 0 : props.actionOnClick(c.actionId, actionData, dataContext)) != null ? _props$actionOnClick : () => {},
+        disabled: formNode.disabled,
+        onClick: handler ? () => {
+          var _c$disableType;
+          let disableType = (_c$disableType = c.disableType) != null ? _c$disableType : ControlDisableType.Self;
+          const actionContext = {
+            disableForm(type) {
+              disableType = type;
+            },
+            runAction(actionId, actionData) {
+              const h = props.actionOnClick == null ? void 0 : props.actionOnClick(actionId, actionData, dataContext);
+              if (h) {
+                h(actionContext);
+              }
+              return;
+            }
+          };
+          const r = handler(actionContext);
+          if (r instanceof Promise) {
+            const cleanup = formNode.ui.getDisabler(disableType)();
+            formNode.setBusy(true);
+            r.then(() => {
+              cleanup();
+              formNode.setBusy(false);
+            });
+          }
+        } : () => {},
         className: rendererClass(styleClass, c.styleClass),
-        style
+        style,
+        busy: formNode.busy
       })
     };
     function renderActionGroup() {
-      const childDefs = formNode.getResolvedChildren();
-      const childDef = {
-        type: ControlDefinitionType.Group,
-        groupOptions: {
-          type: GroupRenderType.Contents,
-          hideTitle: true
-        },
-        children: childDefs
-      };
-      const childNode = formNode.createChildNode("child", childDef);
-      return renderChild("child", childNode, {});
+      return /*#__PURE__*/jsx(Fragment, {
+        children: formNode.children.map(x => renderChild(x))
+      });
     }
   }
   if (isDisplayControl(c)) {
@@ -1108,7 +992,8 @@ function renderControlLayout(props) {
         className: rendererClass(labelClass, c.labelClass),
         textClass: rendererClass(labelTextClass, c.labelTextClass)
       },
-      errorControl: control
+      errorControl: control,
+      errorId: rendererProps.errorId
     };
   }
 }
@@ -1153,7 +1038,8 @@ function renderLayoutParts(props, renderer) {
     errorControl,
     label,
     adornments,
-    inline
+    inline,
+    errorId
   } = (_props$processLayout = props.processLayout == null ? void 0 : props.processLayout(props)) != null ? _props$processLayout : props;
   const layout = {
     children,
@@ -1161,6 +1047,7 @@ function renderLayoutParts(props, renderer) {
     style,
     className: className,
     inline,
+    errorId,
     wrapLayout: x => x
   };
   (adornments != null ? adornments : []).sort((a, b) => a.priority - b.priority).forEach(x => x.apply(layout));
@@ -1178,7 +1065,7 @@ function getLengthRestrictions(definition) {
     max: lengthVal == null ? void 0 : lengthVal.max
   };
 }
-function createArrayActions(control, field, options) {
+function createArrayActions(control, getElementCount, field, options) {
   var _field$displayName;
   const noun = (_field$displayName = field.displayName) != null ? _field$displayName : field.field;
   const {
@@ -1197,6 +1084,7 @@ function createArrayActions(control, field, options) {
   } = options != null ? options : {};
   return {
     arrayControl: control,
+    getElementCount,
     addAction: !readonly && !noAdd ? makeAdd(() => {
       if (!designMode) {
         const newValue = elementValueForField(field);
@@ -1267,7 +1155,7 @@ function createArrayActions(control, field, options) {
   }
 }
 function applyArrayLengthRestrictions({
-  arrayControl,
+  getElementCount,
   min,
   max,
   editAction,
@@ -1275,8 +1163,7 @@ function applyArrayLengthRestrictions({
   removeAction: ra,
   required
 }, disable) {
-  var _arrayControl$element, _arrayControl$element2;
-  const [removeAllowed, addAllowed] = applyLengthRestrictions((_arrayControl$element = (_arrayControl$element2 = arrayControl.elements) == null ? void 0 : _arrayControl$element2.length) != null ? _arrayControl$element : 0, min == null && required ? 1 : min, max, true, true);
+  const [removeAllowed, addAllowed] = applyLengthRestrictions(getElementCount(), min == null && required ? 1 : min, max, true, true);
   return {
     addAction: disable || addAllowed ? aa : undefined,
     removeAction: disable || removeAllowed ? ra : undefined,
@@ -1286,19 +1173,11 @@ function applyArrayLengthRestrictions({
   };
 }
 function fieldOptionAdornment(p) {
-  return (o, fieldIndex, selected) => /*#__PURE__*/jsx(RenderArrayElements, {
-    array: p.formNode.getChildNodes(),
-    children: (cd, i) => p.renderChild(i, cd, {
-      parentDataNode: p.dataContext.parentNode,
-      stateKey: fieldIndex.toString(),
-      variables: {
-        formData: {
-          option: o,
-          optionSelected: selected
-        }
-      }
-    })
-  });
+  return (o, fieldIndex, selected) => {
+    const fieldChild = p.formNode.children.find(x => x.meta["fieldOptionValue"] === o.value);
+    if (fieldChild) return p.renderChild(fieldChild);
+    return undefined;
+  };
 }
 function lookupChildDataContext(dataContext, c) {
   var _dataContext$dataNode;
@@ -1402,7 +1281,19 @@ function createFormRenderer(customRenderers = [], defaultRenderers) {
     renderLayout,
     renderVisibility,
     renderLabelText,
-    html: defaultRenderers.html
+    html: defaultRenderers.html,
+    resolveChildren(c) {
+      const def = c.definition;
+      if (isDataControl(def)) {
+        var _def$renderOptions;
+        if (!c.dataNode) return [];
+        const matching = matchData(c, (_def$renderOptions = def.renderOptions) != null ? _def$renderOptions : {
+          type: DataRenderType.Standard
+        }, c.dataNode);
+        if (matching != null && matching.resolveChildren) return matching.resolveChildren(c);
+      }
+      return defaultResolveChildNodes(c);
+    }
   };
   function renderVisibility(props) {
     return visibilityRenderer.render(props, formRenderers);
@@ -1432,29 +1323,31 @@ function createFormRenderer(customRenderers = [], defaultRenderers) {
     const renderer = (_labelRenderers$find = labelRenderers.find(x => isOneOf(x.labelType, props.type))) != null ? _labelRenderers$find : defaultRenderers.label;
     return renderer.render(props, labelStart, labelEnd, formRenderers);
   }
-  function renderData(props) {
-    const {
-      renderOptions,
-      field
-    } = props;
-    const options = hasOptions(props);
+  function matchData(formState, renderOptions, dataNode) {
+    var _formState$resolved$f, _formState$resolved$f2;
+    const field = dataNode.schema.field;
+    const options = ((_formState$resolved$f = (_formState$resolved$f2 = formState.resolved.fieldOptions) == null ? void 0 : _formState$resolved$f2.length) != null ? _formState$resolved$f : 0) > 0;
     const renderType = renderOptions.type;
-    const renderer = dataRegistrations.find(matchesRenderer);
-    const result = (renderer != null ? renderer : defaultRenderers.data).render(props, formRenderers);
-    if (typeof result === "function") return result;
-    return l => _extends({}, l, {
-      children: result
-    });
+    return dataRegistrations.find(matchesRenderer);
     function matchesRenderer(x) {
       var _x$collection, _field$collection, _x$options;
-      const noMatch = x.match ? !x.match(props, renderOptions) : undefined;
+      const noMatch = x.match ? !x.match(formState, renderOptions) : undefined;
       if (noMatch === true) return false;
-      const matchCollection = ((_x$collection = x.collection) != null ? _x$collection : false) === (props.dataNode.elementIndex == null && ((_field$collection = field.collection) != null ? _field$collection : false));
+      const matchCollection = ((_x$collection = x.collection) != null ? _x$collection : false) === (dataNode.elementIndex == null && ((_field$collection = field.collection) != null ? _field$collection : false));
       const isSchemaAllowed = !!x.schemaType && renderType == DataRenderType.Standard ? isOneOf(x.schemaType, field.type) : undefined;
       const isRendererAllowed = !!x.renderType && isOneOf(x.renderType, renderType);
-      return matchCollection && ((_x$options = x.options) != null ? _x$options : false) === options && (isSchemaAllowed || isRendererAllowed || !x.renderType && !x.schemaType && noMatch === false);
+      const optionsMatch = isRendererAllowed || ((_x$options = x.options) != null ? _x$options : false) === options;
+      return matchCollection && optionsMatch && (isSchemaAllowed || isRendererAllowed || !x.renderType && !x.schemaType && noMatch === false);
     }
   }
+  function renderData(props) {
+    const renderer = matchData(props.formNode, props.renderOptions, props.dataNode);
+    const result = (renderer != null ? renderer : defaultRenderers.data).render(props, formRenderers);
+    if (typeof result === "function") return result;
+    return l => _extends({}, l, {
+      children: result
+    });
+  }
   function renderGroup(props) {
     var _groupRegistrations$f;
     const renderType = props.renderOptions.type;
@@ -1510,48 +1403,101 @@ function isArrayRegistration(x) {
 }
 
 const _excluded = ["styleClass", "labelClass", "layoutClass", "labelTextClass", "textClass"],
-  _excluded2 = ["parentDataNode", "actionOnClick", "variables"];
+  _excluded2 = ["actionOnClick"];
 function RenderForm({
   data,
   form,
   renderer,
-  options = {}
+  options = {},
+  stateRef
 }) {
   var _effect = useComponentTracking();
   try {
-    var _options$schemaInterf, _definition$adornment, _definition$adornment2, _dataContext$dataNode, _options$adjustLayout;
+    var _options$schemaInterf;
+    const {
+      readonly,
+      disabled,
+      displayOnly,
+      hidden,
+      variables,
+      clearHidden
+    } = options;
     const schemaInterface = (_options$schemaInterf = options.schemaInterface) != null ? _options$schemaInterf : defaultSchemaInterface;
-    const [formState, setFormState] = useState(() => {
-      var _options$formState;
-      return (_options$formState = options == null ? void 0 : options.formState) != null ? _options$formState : createFormState(schemaInterface);
-    });
-    let effects = [];
-    const runAsync = cb => {
-      if (effects) effects.push(cb);else cb();
+    const {
+      runAsync
+    } = useAsyncRunner();
+    const globals = {
+      runAsync,
+      schemaInterface,
+      evalExpression: (e, ctx) => {
+        var _defaultEvaluators$e$;
+        return (_defaultEvaluators$e$ = defaultEvaluators[e.type]) == null ? void 0 : _defaultEvaluators$e$.call(defaultEvaluators, 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 != null ? hidden : x.forceHidden,
+      forceDisabled: disabled != null ? disabled : x.forceDisabled,
+      forceReadonly: readonly != null ? readonly : x.forceReadonly
+    }));
+    if (stateRef) stateRef.current = state;
     useEffect(() => {
-      if (!(options != null && options.formState)) {
-        return () => formState.cleanup();
-      }
-    }, [formState, options == null ? void 0 : options.formState]);
+      return () => {
+        state.cleanup();
+      };
+    }, [state]);
+    return /*#__PURE__*/jsx(RenderFormNode, {
+      node: state,
+      renderer: renderer,
+      options: options
+    });
+  } finally {
+    _effect();
+  }
+}
+/* @trackControls */
+function RenderFormNode({
+  node: state,
+  renderer,
+  options = {}
+}) {
+  var _effect2 = useComponentTracking();
+  try {
+    var _definition$adornment, _definition$adornment2, _dataContext$dataNode, _options$adjustLayout;
+    useEffect(() => {
+      state.attachUi(new DefaultFormNodeUi(state));
+    }, [state]);
+    const {
+      runAsync
+    } = useAsyncRunner();
+    const schemaInterface = state.schemaInterface;
     const definition = state.definition;
-    const visible = !state.hidden;
+    const visible = state.visible;
     const visibility = useControl(() => visible != null ? {
       visible,
       showing: visible
     } : undefined);
-    visibility.fields.visible.value = visible;
+    if (visible != null) {
+      visibility.fields.visible.value = visible;
+    }
     const dataContext = {
       schemaInterface: state.schemaInterface,
       dataNode: state.dataNode,
-      parentNode: data,
-      variables: state.variables
+      parentNode: state.parent
     };
     const adornments = (_definition$adornment = (_definition$adornment2 = definition.adornments) == null ? void 0 : _definition$adornment2.map(x => renderer.renderAdornment({
       adornment: x,
       dataContext,
-      formOptions: state
+      formNode: state
     }))) != null ? _definition$adornment : [];
     const {
         styleClass,
@@ -1562,7 +1508,7 @@ function RenderForm({
       inheritableOptions = _objectWithoutPropertiesLoose(options, _excluded);
     const {
       readonly,
-      hidden,
+      visible: vis,
       disabled,
       variables
     } = state;
@@ -1570,60 +1516,46 @@ function RenderForm({
       readonly,
       disabled,
       variables,
-      formState,
-      hidden
+      hidden: vis === false
     });
     const labelAndChildren = renderControlLayout({
-      formNode: form,
+      formNode: state,
       renderer,
-      state,
-      renderChild: (k, child, options) => {
-        var _ref2;
+      renderChild: (child, options) => {
         const overrideClasses = getGroupClassOverrides(definition);
         const _ref = options != null ? options : {},
           {
-            parentDataNode,
-            actionOnClick,
-            variables
+            actionOnClick
           } = _ref,
           renderOptions = _objectWithoutPropertiesLoose(_ref, _excluded2);
-        const dContext = (_ref2 = parentDataNode != null ? parentDataNode : dataContext.dataNode) != null ? _ref2 : data;
         const allChildOptions = _extends({}, childOptions, overrideClasses, renderOptions, {
-          variables: _extends({}, childOptions.variables, variables),
           actionOnClick: actionHandlers(actionOnClick, childOptions.actionOnClick)
         });
-        return /*#__PURE__*/jsx(RenderForm, {
-          form: child,
+        return /*#__PURE__*/jsx(RenderFormNode, {
+          node: child,
           renderer: renderer,
-          data: dContext,
           options: allChildOptions
-        }, k);
+        }, child.childKey);
       },
       inline: options == null ? void 0 : options.inline,
       displayOnly: options == null ? void 0 : options.displayOnly,
       createDataProps: defaultDataProps,
-      formOptions: state,
       dataContext,
       control: (_dataContext$dataNode = dataContext.dataNode) == null ? void 0 : _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, parent) {
-        var _ref3;
-        return formState.getControlState((_ref3 = parent != null ? parent : state.dataNode) != null ? _ref3 : data, child, childOptions, runAsync);
-      },
       runExpression: (scope, expr, returnResult) => {
         if (expr != null && expr.type) {
-          formState.evalExpression(expr, {
-            scope,
-            dataNode: data,
+          defaultEvaluators[expr.type](expr, {
+            dataNode: state.parent,
             schemaInterface,
+            scope,
             returnResult,
             runAsync
           });
@@ -1633,22 +1565,14 @@ function RenderForm({
     const layoutProps = _extends({}, labelAndChildren, {
       adornments,
       className: rendererClass(options.layoutClass, definition.layoutClass),
-      style: state.layoutStyle
+      style: state.resolved.layoutStyle
     });
     const renderedControl = renderer.renderLayout((_options$adjustLayout = options.adjustLayout == null ? void 0 : options.adjustLayout(dataContext, layoutProps)) != null ? _options$adjustLayout : layoutProps);
-    const rendered = renderer.renderVisibility(_extends({
+    return renderer.renderVisibility(_extends({
       visibility
     }, renderedControl));
-    useEffect(() => {
-      if (effects) {
-        const toRun = effects;
-        effects = undefined;
-        toRun.forEach(cb => cb());
-      }
-    }, [effects]);
-    return rendered;
   } finally {
-    _effect();
+    _effect2();
   }
 }
 /**
@@ -1688,13 +1612,13 @@ function ControlRenderer({
   control,
   parentPath
 }) {
-  var _effect2 = useComponentTracking();
+  var _effect3 = useComponentTracking();
   try {
     const schemaDataNode = createSchemaDataNode(createSchemaTree(fields).rootNode, control);
     const Render = useControlRendererComponent(definition, renderer, options, schemaDataNode);
     return /*#__PURE__*/jsx(Render, {});
   } finally {
-    _effect2();
+    _effect3();
   }
 }
 /**
@@ -1706,12 +1630,12 @@ function NewControlRenderer({
   options,
   parentDataNode
 }) {
-  var _effect3 = useComponentTracking();
+  var _effect4 = useComponentTracking();
   try {
     const Render = useControlRendererComponent(definition, renderer, options, parentDataNode);
     return /*#__PURE__*/jsx(Render, {});
   } finally {
-    _effect3();
+    _effect4();
   }
 }
 /**
@@ -1734,6 +1658,80 @@ function useControlRenderer(definition, fields, renderer, options = {}) {
     }));
   }, [r]);
 }
+function useAsyncRunner() {
+  let effects = [];
+  const runAsync = cb => {
+    if (effects) effects.push(cb);else cb();
+  };
+  useEffect(() => {
+    if (effects) {
+      const toRun = effects;
+      effects = undefined;
+      toRun.forEach(cb => cb());
+    }
+  }, [effects]);
+  return {
+    runAsync
+  };
+}
+class DefaultFormNodeUi {
+  constructor(node) {
+    this.node = void 0;
+    this.node = node;
+  }
+  ensureVisible() {
+    var _this$node$parentNode;
+    (_this$node$parentNode = this.node.parentNode) == null || _this$node$parentNode.ui.ensureChildVisible(this.node.childIndex);
+  }
+  ensureChildVisible(childIndex) {
+    this.ensureVisible();
+  }
+  getDisabler(type) {
+    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 () => () => {};
+  }
+}
+
+const NoOpControlActionContext = {
+  disableForm(disable) {},
+  runAction(actionId, actionData) {}
+};
+
+function useElementSelectedRenderer({
+  runExpression,
+  renderOptions,
+  control
+}) {
+  const elementValue = useControl();
+  useEffect(() => {
+    runExpression(elementValue, renderOptions.elementExpression, v => elementValue.value = v);
+  }, []);
+  const isSelected = useComputed(() => {
+    var _control$as$value$inc, _control$as$value;
+    return (_control$as$value$inc = (_control$as$value = control.as().value) == null ? void 0 : _control$as$value.includes(elementValue.value)) != null ? _control$as$value$inc : false;
+  });
+  const selControl = useControl(() => isSelected.current.value);
+  selControl.value = isSelected.value;
+  useControlEffect(() => selControl.value, v => {
+    control.as().setValue(x => setIncluded(x != null ? x : [], elementValue.value, v));
+  });
+  return selControl;
+}
 
-export { AppendAdornmentPriority, ControlRenderer, LabelType, NewControlRenderer, RenderForm, WrapAdornmentPriority, accordionOptions, actionControl, actionHandlers, addMissingControls, addMissingControlsForSchema, adornmentOptions, appendMarkup, appendMarkupAt, applyArrayLengthRestrictions, applyDefaultForField, applyDefaultValues, applyExtensionToSchema, applyExtensionsToSchema, applyLengthRestrictions, applyValues, autocompleteOptions, checkListOptions, cleanDataForSchema, clearMultiValues, coerceToString, collectDifferences, compoundControl, controlTitle, createAction, createActionRenderer, createAdornmentRenderer, createArrayActions, createArrayRenderer, createDataRenderer, createDisplayRenderer, createFormRenderer, createGroupRenderer, createIconLibraryExtension, createLabelRenderer, createLayoutRenderer, createVisibilityRenderer, dataControl, dateValidatorOptions, deepMerge, defaultControlForField, defaultDataProps, defaultValueForField, defaultValueForFields, displayOnlyOptions, dynamicDefaultValue, dynamicDisabled, dynamicReadonly, dynamicVisibility, elementValueForField, emptyGroupDefinition, fieldDisplayName, fieldEqExpr, fieldExpr, fieldHasTag, fieldOptionAdornment, findChildDefinition, findCompoundField, findControlsForCompound, findFieldPath, findNonDataGroups, findScalarField, getAllReferencedClasses, getAllValues, getDiffObject, getExternalEditData, getGroupClassOverrides, getIsEditing, getLastDefinedValue, getLengthRestrictions, getNullToggler, getOverrideClass, groupedControl, hasOptions, htmlDisplayControl, isAccordionAdornment, isIconAdornment, isOptionalAdornment, isSetFieldAdornment, jsonataExpr, jsonataOptions, jsonataValidatorOptions, layoutKeyForPlacement, lengthValidatorOptions, lookupChildDataContext, mergeObjects, radioButtonOptions, renderControlLayout, renderLayoutParts, renderOptionsFor, rendererClass, textDisplayControl, textfieldOptions, useControlDefinitionForSchema, useControlRenderer, useControlRendererComponent, useExpression, useUpdatedRef, validationVisitor, validatorOptions, wrapLayout, wrapMarkup, wrapMarkupAt };
+export { AppendAdornmentPriority, ControlRenderer, DefaultFormNodeUi, LabelType, NewControlRenderer, NoOpControlActionContext, RenderForm, RenderFormNode, WrapAdornmentPriority, actionHandlers, addMissingControls, addMissingControlsForSchema, appendMarkup, appendMarkupAt, applyArrayLengthRestrictions, applyDefaultForField, applyDefaultValues, applyExtensionToSchema, applyExtensionsToSchema, applyLengthRestrictions, applyValues, cleanDataForSchema, clearMultiValues, coerceToString, collectDifferences, controlTitle, createAction, createActionRenderer, createAdornmentRenderer, createArrayActions, createArrayRenderer, createDataRenderer, createDisplayRenderer, createFormRenderer, createGroupRenderer, createIconLibraryExtension, createLabelRenderer, createLayoutRenderer, createVisibilityRenderer, deepMerge, defaultControlForField, defaultDataProps, defaultValueForField, defaultValueForFields, elementValueForField, fieldDisplayName, fieldHasTag, fieldOptionAdornment, findChildDefinition, findCompoundField, findControlsForCompound, findFieldPath, findNonDataGroups, findScalarField, getAllReferencedClasses, getAllValues, getDiffObject, getExternalEditData, getGroupClassOverrides, getIsEditing, getLastDefinedValue, getLengthRestrictions, getNullToggler, getOverrideClass, hasOptions, isAccordionAdornment, isIconAdornment, isOptionalAdornment, isSetFieldAdornment, layoutKeyForPlacement, lookupChildDataContext, mergeObjects, renderControlLayout, renderLayoutParts, rendererClass, setIncluded, useAsyncRunner, useControlDefinitionForSchema, useControlRenderer, useControlRendererComponent, useElementSelectedRenderer, useExpression, useUpdatedRef, validationVisitor, wrapLayout, wrapMarkup, wrapMarkupAt };
 //# sourceMappingURL=index.js.map