@react-typed-forms/schemas 16.2.2 → 17.0.0

package/lib/index.cjs

@@ -21,7 +21,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;
@@ -772,137 +772,19 @@ function useExpression(defaultValue, runExpression, expression, coerce, bindings
   }, value);
   return value;
 }
-
-function dataControl(field, title, options) {
-  return _extends({
-    type: formsCore.ControlDefinitionType.Data,
-    field: field,
-    title: title
-  }, options);
-}
-function validatorOptions(type) {
-  return function (o) {
-    return _extends({
-      type: type
-    }, o);
-  };
-}
-function adornmentOptions(type) {
-  return function (o) {
-    return _extends({
-      type: type
-    }, o);
-  };
-}
-function renderOptionsFor(type) {
-  return function (o) {
-    return {
-      renderOptions: _extends({
-        type: type
-      }, o)
-    };
-  };
-}
-var autocompleteOptions = renderOptionsFor(formsCore.DataRenderType.Autocomplete);
-var checkListOptions = renderOptionsFor(formsCore.DataRenderType.CheckList);
-var radioButtonOptions = renderOptionsFor(formsCore.DataRenderType.Radio);
-var lengthValidatorOptions = validatorOptions(formsCore.ValidatorType.Length);
-var jsonataValidatorOptions = validatorOptions(formsCore.ValidatorType.Jsonata);
-var dateValidatorOptions = validatorOptions(formsCore.ValidatorType.Date);
-var accordionOptions = adornmentOptions(formsCore.ControlAdornmentType.Accordion);
-var textfieldOptions = renderOptionsFor(formsCore.DataRenderType.Textfield);
-var displayOnlyOptions = renderOptionsFor(formsCore.DataRenderType.DisplayOnly);
-var jsonataOptions = renderOptionsFor(formsCore.DataRenderType.Jsonata);
-function textDisplayControl(text, options) {
-  return _extends({
-    type: formsCore.ControlDefinitionType.Display,
-    displayData: {
-      type: formsCore.DisplayDataType.Text,
-      text: text
-    }
-  }, options);
-}
-function htmlDisplayControl(html, options) {
-  return _extends({
-    type: formsCore.ControlDefinitionType.Display,
-    displayData: {
-      type: formsCore.DisplayDataType.Html,
-      html: html
-    }
-  }, options);
-}
-function dynamicDefaultValue(expr) {
-  return {
-    type: formsCore.DynamicPropertyType.DefaultValue,
-    expr: expr
-  };
-}
-function dynamicReadonly(expr) {
-  return {
-    type: formsCore.DynamicPropertyType.Readonly,
-    expr: expr
-  };
-}
-function dynamicVisibility(expr) {
-  return {
-    type: formsCore.DynamicPropertyType.Visible,
-    expr: expr
-  };
-}
-function dynamicDisabled(expr) {
-  return {
-    type: formsCore.DynamicPropertyType.Disabled,
-    expr: expr
-  };
-}
-function fieldExpr(field) {
-  return {
-    type: formsCore.ExpressionType.Data,
-    field: field
-  };
-}
-function fieldEqExpr(field, value) {
-  return {
-    type: formsCore.ExpressionType.DataMatch,
-    field: field,
-    value: value
-  };
-}
-function jsonataExpr(expression) {
-  return {
-    type: formsCore.ExpressionType.Jsonata,
-    expression: expression
-  };
-}
-function groupedControl(children, title, options) {
-  return _extends({
-    type: formsCore.ControlDefinitionType.Group,
-    children: children,
-    title: title,
-    groupOptions: {
-      type: "Standard",
-      hideTitle: !title
-    }
-  }, options);
-}
-function compoundControl(field, title, children, options) {
-  return _extends({
-    type: formsCore.ControlDefinitionType.Data,
-    field: field,
-    children: children,
-    title: title,
-    renderOptions: {
-      type: "Standard"
-    }
-  }, options);
-}
-function actionControl(actionText, actionId, options) {
-  return _extends({
-    type: formsCore.ControlDefinitionType.Action,
-    title: actionText,
-    actionId: actionId
-  }, options);
+function setIncluded(array, elem, included) {
+  var already = array.includes(elem);
+  if (included === already) {
+    return array;
+  }
+  if (included) {
+    return [].concat(array, [elem]);
+  }
+  return array.filter(function (e) {
+    return e !== elem;
+  });
 }
+
 function createAction(actionId, onClick, actionText, options) {
   return _extends({
     actionId: actionId,
@@ -910,17 +792,9 @@ function createAction(actionId, onClick, actionText, options) {
     actionText: actionText != null ? actionText : actionId
   }, options);
 }
-var emptyGroupDefinition = {
-  type: formsCore.ControlDefinitionType.Group,
-  children: [],
-  groupOptions: {
-    type: formsCore.GroupRenderType.Standard,
-    hideTitle: true
-  }
-};
 function useControlDefinitionForSchema(sf, definition) {
   if (definition === void 0) {
-    definition = emptyGroupDefinition;
+    definition = formsCore.emptyGroupDefinition;
   }
   return react.useMemo(function () {
     var _definition$children;
@@ -954,7 +828,7 @@ function createIconLibraryExtension(name, value) {
   };
 }
 
-var _excluded$1 = ["formOptions", "style", "allowedOptions", "schemaInterface", "styleClass", "textClass", "displayOnly", "inline"];
+var _excluded$1 = ["formNode", "style", "schemaInterface", "styleClass", "textClass", "displayOnly", "inline"];
 var AppendAdornmentPriority = 0;
 var WrapAdornmentPriority = 1000;
 /**
@@ -977,11 +851,8 @@ exports.LabelType = void 0;
 })(exports.LabelType || (exports.LabelType = {}));
 function defaultDataProps(_ref, definition, control) {
   var _definition$renderOpt;
-  var formOptions = _ref.formOptions,
+  var formNode = _ref.formNode,
     style = _ref.style,
-    allowedOptions = _ref.allowedOptions,
-    _ref$schemaInterface = _ref.schemaInterface,
-    schemaInterface = _ref$schemaInterface === void 0 ? formsCore.defaultSchemaInterface : _ref$schemaInterface,
     styleClass = _ref.styleClass,
     tc = _ref.textClass,
     displayOnly = _ref.displayOnly,
@@ -992,34 +863,24 @@ function defaultDataProps(_ref, definition, control) {
   var className = rendererClass(styleClass, definition.styleClass);
   var textClass = rendererClass(tc, definition.textClass);
   var required = !!definition.required && !displayOnly;
-  var fieldOptions = schemaInterface.getDataOptions(dataNode);
-  var _allowed = allowedOptions != null ? allowedOptions : [];
-  var allowed = Array.isArray(_allowed) ? _allowed : [_allowed];
+  var id = "c" + control.uniqueId;
   return _extends({
     dataNode: dataNode,
+    formNode: formNode,
     definition: definition,
     control: control,
     field: field,
-    id: "c" + control.uniqueId,
+    id: id,
+    errorId: "err_" + id,
     inline: !!inline,
-    options: allowed.length > 0 ? allowed.map(function (x) {
-      var _fieldOptions$find;
-      return typeof x === "object" ? x : (_fieldOptions$find = fieldOptions == null ? void 0 : fieldOptions.find(function (y) {
-        return y.value == x;
-      })) != null ? _fieldOptions$find : {
-        name: x.toString(),
-        value: x
-      };
-    }).filter(function (x) {
-      return 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: required,
-    hidden: !!formOptions.hidden,
+    hidden: !formNode.visible,
     className: className,
     textClass: textClass,
     style: style
@@ -1041,11 +902,9 @@ function renderControlLayout(props) {
     textClass = props.textClass,
     formNode = props.formNode,
     actionOnClick = props.actionOnClick,
-    state = props.state,
-    getChildState = props.getChildState,
     inline = props.inline,
     displayOnly = props.displayOnly;
-  var c = state.definition;
+  var c = formNode.definition;
   if (formsCore.isDataControl(c)) {
     return renderData(c);
   }
@@ -1053,7 +912,7 @@ function renderControlLayout(props) {
     var _c$groupOptions2, _c$groupOptions3;
     if (c.compoundField) {
       var _c$groupOptions;
-      return renderData(dataControl(c.compoundField, c.title, {
+      return renderData(formsCore.dataControl(c.compoundField, c.title, {
         children: c.children,
         hideTitle: (_c$groupOptions = c.groupOptions) == null ? void 0 : _c$groupOptions.hideTitle
       }));
@@ -1062,7 +921,6 @@ function renderControlLayout(props) {
       inline: inline,
       processLayout: renderer.renderGroup({
         formNode: formNode,
-        state: state,
         definition: c,
         renderChild: renderChild,
         runExpression: runExpression,
@@ -1074,8 +932,7 @@ function renderControlLayout(props) {
         textClass: rendererClass(textClass, c.textClass),
         style: style,
         designMode: designMode,
-        actionOnClick: actionOnClick,
-        getChildState: getChildState
+        actionOnClick: actionOnClick
       }),
       label: {
         label: c.title,
@@ -1087,23 +944,18 @@ function renderControlLayout(props) {
     };
   }
   if (formsCore.isActionControl(c)) {
-    var _c$actionStyle, _c$title, _props$actionOnClick;
+    var _c$actionStyle, _c$title;
     var renderActionGroup = function renderActionGroup() {
-      var childDefs = formNode.getResolvedChildren();
-      var childDef = {
-        type: formsCore.ControlDefinitionType.Group,
-        groupOptions: {
-          type: formsCore.GroupRenderType.Contents,
-          hideTitle: true
-        },
-        children: childDefs
-      };
-      var childNode = formNode.createChildNode("child", childDef);
-      return renderChild("child", childNode, {});
+      return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: formNode.children.map(function (x) {
+          return renderChild(x);
+        })
+      });
     };
     var actionData = c.actionData;
     var actionStyle = (_c$actionStyle = c.actionStyle) != null ? _c$actionStyle : formsCore.ActionStyle.Button;
     var actionContent = actionStyle == formsCore.ActionStyle.Group ? renderActionGroup() : undefined;
+    var handler = props.actionOnClick == null ? void 0 : props.actionOnClick(c.actionId, actionData, dataContext);
     return {
       inline: inline,
       children: renderer.renderAction({
@@ -1116,10 +968,35 @@ function renderControlLayout(props) {
         iconPlacement: c.iconPlacement,
         icon: c.icon,
         inline: inline,
-        disabled: state.disabled,
-        onClick: (_props$actionOnClick = props.actionOnClick == null ? void 0 : props.actionOnClick(c.actionId, actionData, dataContext)) != null ? _props$actionOnClick : function () {},
+        disabled: formNode.disabled,
+        onClick: handler ? function () {
+          var _c$disableType;
+          var disableType = (_c$disableType = c.disableType) != null ? _c$disableType : formsCore.ControlDisableType.Self;
+          var actionContext = {
+            disableForm: function disableForm(type) {
+              disableType = type;
+            },
+            runAction: function runAction(actionId, actionData) {
+              var h = props.actionOnClick == null ? void 0 : props.actionOnClick(actionId, actionData, dataContext);
+              if (h) {
+                h(actionContext);
+              }
+              return;
+            }
+          };
+          var r = handler(actionContext);
+          if (r instanceof Promise) {
+            var cleanup = formNode.ui.getDisabler(disableType)();
+            formNode.setBusy(true);
+            r.then(function () {
+              cleanup();
+              formNode.setBusy(false);
+            });
+          }
+        } : function () {},
         className: rendererClass(styleClass, c.styleClass),
-        style: style
+        style: style,
+        busy: formNode.busy
       })
     };
   }
@@ -1165,7 +1042,8 @@ function renderControlLayout(props) {
         className: rendererClass(labelClass, c.labelClass),
         textClass: rendererClass(labelTextClass, c.labelTextClass)
       },
-      errorControl: control
+      errorControl: control,
+      errorId: rendererProps.errorId
     };
   }
 }
@@ -1216,13 +1094,15 @@ function renderLayoutParts(props, renderer) {
     errorControl = _ref2.errorControl,
     label = _ref2.label,
     adornments = _ref2.adornments,
-    inline = _ref2.inline;
+    inline = _ref2.inline,
+    errorId = _ref2.errorId;
   var layout = {
     children: children,
     errorControl: errorControl,
     style: style,
     className: className,
     inline: inline,
+    errorId: errorId,
     wrapLayout: function wrapLayout(x) {
       return x;
     }
@@ -1248,7 +1128,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;
   var noun = (_field$displayName = field.displayName) != null ? _field$displayName : field.field;
   var _ref3 = options != null ? options : {},
@@ -1266,6 +1146,7 @@ function createArrayActions(control, field, options) {
     editExternal = _ref3.editExternal;
   return {
     arrayControl: control,
+    getElementCount: getElementCount,
     addAction: !readonly && !noAdd ? makeAdd(function () {
       if (!designMode) {
         var newValue = elementValueForField(field);
@@ -1340,15 +1221,14 @@ function createArrayActions(control, field, options) {
   }
 }
 function applyArrayLengthRestrictions(_ref4, disable) {
-  var _arrayControl$element, _arrayControl$element2;
-  var arrayControl = _ref4.arrayControl,
+  var getElementCount = _ref4.getElementCount,
     min = _ref4.min,
     max = _ref4.max,
     editAction = _ref4.editAction,
     aa = _ref4.addAction,
     ra = _ref4.removeAction,
     required = _ref4.required;
-  var _applyLengthRestricti = 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),
+  var _applyLengthRestricti = applyLengthRestrictions(getElementCount(), min == null && required ? 1 : min, max, true, true),
     removeAllowed = _applyLengthRestricti[0],
     addAllowed = _applyLengthRestricti[1];
   return {
@@ -1361,21 +1241,11 @@ function applyArrayLengthRestrictions(_ref4, disable) {
 }
 function fieldOptionAdornment(p) {
   return function (o, fieldIndex, selected) {
-    return /*#__PURE__*/jsxRuntime.jsx(core.RenderArrayElements, {
-      array: p.formNode.getChildNodes(),
-      children: function children(cd, i) {
-        return p.renderChild(i, cd, {
-          parentDataNode: p.dataContext.parentNode,
-          stateKey: fieldIndex.toString(),
-          variables: {
-            formData: {
-              option: o,
-              optionSelected: selected
-            }
-          }
-        });
-      }
+    var fieldChild = p.formNode.children.find(function (x) {
+      return x.meta["fieldOptionValue"] === o.value;
     });
+    if (fieldChild) return p.renderChild(fieldChild);
+    return undefined;
   };
 }
 function lookupChildDataContext(dataContext, c) {
@@ -1483,7 +1353,19 @@ function createFormRenderer(customRenderers, defaultRenderers) {
     renderLayout: renderLayout,
     renderVisibility: renderVisibility,
     renderLabelText: renderLabelText,
-    html: defaultRenderers.html
+    html: defaultRenderers.html,
+    resolveChildren: function resolveChildren(c) {
+      var def = c.definition;
+      if (formsCore.isDataControl(def)) {
+        var _def$renderOptions;
+        if (!c.dataNode) return [];
+        var matching = matchData(c, (_def$renderOptions = def.renderOptions) != null ? _def$renderOptions : {
+          type: formsCore.DataRenderType.Standard
+        }, c.dataNode);
+        if (matching != null && matching.resolveChildren) return matching.resolveChildren(c);
+      }
+      return formsCore.defaultResolveChildNodes(c);
+    }
   };
   function renderVisibility(props) {
     return visibilityRenderer.render(props, formRenderers);
@@ -1519,12 +1401,25 @@ function createFormRenderer(customRenderers, defaultRenderers) {
     })) != null ? _labelRenderers$find : defaultRenderers.label;
     return renderer.render(props, labelStart, labelEnd, formRenderers);
   }
-  function renderData(props) {
-    var renderOptions = props.renderOptions,
-      field = props.field;
-    var options = hasOptions(props);
+  function matchData(formState, renderOptions, dataNode) {
+    var _formState$resolved$f, _formState$resolved$f2;
+    var field = dataNode.schema.field;
+    var options = ((_formState$resolved$f = (_formState$resolved$f2 = formState.resolved.fieldOptions) == null ? void 0 : _formState$resolved$f2.length) != null ? _formState$resolved$f : 0) > 0;
     var renderType = renderOptions.type;
-    var renderer = dataRegistrations.find(matchesRenderer);
+    return dataRegistrations.find(matchesRenderer);
+    function matchesRenderer(x) {
+      var _x$collection, _field$collection, _x$options;
+      var noMatch = x.match ? !x.match(formState, renderOptions) : undefined;
+      if (noMatch === true) return false;
+      var matchCollection = ((_x$collection = x.collection) != null ? _x$collection : false) === (dataNode.elementIndex == null && ((_field$collection = field.collection) != null ? _field$collection : false));
+      var isSchemaAllowed = !!x.schemaType && renderType == formsCore.DataRenderType.Standard ? isOneOf(x.schemaType, field.type) : undefined;
+      var isRendererAllowed = !!x.renderType && isOneOf(x.renderType, renderType);
+      var 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) {
+    var renderer = matchData(props.formNode, props.renderOptions, props.dataNode);
     var result = (renderer != null ? renderer : defaultRenderers.data).render(props, formRenderers);
     if (typeof result === "function") return result;
     return function (l) {
@@ -1532,15 +1427,6 @@ function createFormRenderer(customRenderers, defaultRenderers) {
         children: result
       });
     };
-    function matchesRenderer(x) {
-      var _x$collection, _field$collection, _x$options;
-      var noMatch = x.match ? !x.match(props, renderOptions) : undefined;
-      if (noMatch === true) return false;
-      var matchCollection = ((_x$collection = x.collection) != null ? _x$collection : false) === (props.dataNode.elementIndex == null && ((_field$collection = field.collection) != null ? _field$collection : false));
-      var isSchemaAllowed = !!x.schemaType && renderType == formsCore.DataRenderType.Standard ? isOneOf(x.schemaType, field.type) : undefined;
-      var 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);
-    }
   }
   function renderGroup(props) {
     var _groupRegistrations$f;
@@ -1605,55 +1491,104 @@ function isArrayRegistration(x) {
 }
 
 var _excluded = ["styleClass", "labelClass", "layoutClass", "labelTextClass", "textClass"],
-  _excluded2 = ["parentDataNode", "actionOnClick", "variables"];
+  _excluded2 = ["actionOnClick"];
 function RenderForm(_ref) {
   var _effect = core.useComponentTracking();
   try {
-    var _options$schemaInterf, _definition$adornment, _definition$adornment2, _dataContext$dataNode, _options$adjustLayout;
+    var _options$schemaInterf;
     var data = _ref.data,
       form = _ref.form,
       renderer = _ref.renderer,
       _ref$options = _ref.options,
-      options = _ref$options === void 0 ? {} : _ref$options;
+      options = _ref$options === void 0 ? {} : _ref$options,
+      stateRef = _ref.stateRef;
+    var readonly = options.readonly,
+      disabled = options.disabled,
+      displayOnly = options.displayOnly,
+      hidden = options.hidden,
+      variables = options.variables,
+      clearHidden = options.clearHidden;
     var schemaInterface = (_options$schemaInterf = options.schemaInterface) != null ? _options$schemaInterf : formsCore.defaultSchemaInterface;
-    var _useState = react.useState(function () {
-        var _options$formState;
-        return (_options$formState = options == null ? void 0 : options.formState) != null ? _options$formState : formsCore.createFormState(schemaInterface);
-      }),
-      formState = _useState[0],
-      setFormState = _useState[1];
-    var effects = [];
-    var runAsync = function runAsync(cb) {
-      if (effects) effects.push(cb);else cb();
+    var _useAsyncRunner = useAsyncRunner(),
+      runAsync = _useAsyncRunner.runAsync;
+    var globals = {
+      runAsync: runAsync,
+      schemaInterface: schemaInterface,
+      evalExpression: function evalExpression(e, ctx) {
+        var _defaultEvaluators$e$;
+        return (_defaultEvaluators$e$ = formsCore.defaultEvaluators[e.type]) == null ? void 0 : _defaultEvaluators$e$.call(formsCore.defaultEvaluators, e, ctx);
+      },
+      resolveChildren: renderer.resolveChildren,
+      clearHidden: !!clearHidden
     };
-    var state = formState.getControlState(data, form, options, runAsync);
+    var state = react.useMemo(function () {
+      return formsCore.createFormStateNode(form, data, globals, {
+        forceReadonly: !!readonly,
+        forceDisabled: !!disabled,
+        variables: variables,
+        forceHidden: !!hidden
+      });
+    }, [form.id]);
+    state.globals.value = globals;
+    state.options.setValue(function (x) {
+      return {
+        variables: variables,
+        forceHidden: hidden != null ? hidden : x.forceHidden,
+        forceDisabled: disabled != null ? disabled : x.forceDisabled,
+        forceReadonly: readonly != null ? readonly : x.forceReadonly
+      };
+    });
+    if (stateRef) stateRef.current = state;
     react.useEffect(function () {
-      if (!(options != null && options.formState)) {
-        return function () {
-          return formState.cleanup();
-        };
-      }
-    }, [formState, options == null ? void 0 : options.formState]);
+      return function () {
+        state.cleanup();
+      };
+    }, [state]);
+    return /*#__PURE__*/jsxRuntime.jsx(RenderFormNode, {
+      node: state,
+      renderer: renderer,
+      options: options
+    });
+  } finally {
+    _effect();
+  }
+}
+/* @trackControls */
+function RenderFormNode(_ref2) {
+  var _effect2 = core.useComponentTracking();
+  try {
+    var _definition$adornment, _definition$adornment2, _dataContext$dataNode, _options$adjustLayout;
+    var state = _ref2.node,
+      renderer = _ref2.renderer,
+      _ref2$options = _ref2.options,
+      options = _ref2$options === void 0 ? {} : _ref2$options;
+    react.useEffect(function () {
+      state.attachUi(new DefaultFormNodeUi(state));
+    }, [state]);
+    var _useAsyncRunner2 = useAsyncRunner(),
+      runAsync = _useAsyncRunner2.runAsync;
+    var schemaInterface = state.schemaInterface;
     var definition = state.definition;
-    var visible = !state.hidden;
+    var visible = state.visible;
     var visibility = core.useControl(function () {
       return visible != null ? {
         visible: visible,
         showing: visible
       } : undefined;
     });
-    visibility.fields.visible.value = visible;
+    if (visible != null) {
+      visibility.fields.visible.value = visible;
+    }
     var dataContext = {
       schemaInterface: state.schemaInterface,
       dataNode: state.dataNode,
-      parentNode: data,
-      variables: state.variables
+      parentNode: state.parent
     };
     var adornments = (_definition$adornment = (_definition$adornment2 = definition.adornments) == null ? void 0 : _definition$adornment2.map(function (x) {
       return renderer.renderAdornment({
         adornment: x,
         dataContext: dataContext,
-        formOptions: state
+        formNode: state
       });
     })) != null ? _definition$adornment : [];
     var styleClass = options.styleClass,
@@ -1663,65 +1598,51 @@ function RenderForm(_ref) {
       textClass = options.textClass,
       inheritableOptions = _objectWithoutPropertiesLoose(options, _excluded);
     var readonly = state.readonly,
-      hidden = state.hidden,
+      vis = state.visible,
       disabled = state.disabled,
       variables = state.variables;
     var childOptions = _extends({}, inheritableOptions, {
       readonly: readonly,
       disabled: disabled,
       variables: variables,
-      formState: formState,
-      hidden: hidden
+      hidden: vis === false
     });
     var labelAndChildren = renderControlLayout({
-      formNode: form,
+      formNode: state,
       renderer: renderer,
-      state: state,
-      renderChild: function renderChild(k, child, options) {
-        var _ref3;
+      renderChild: function renderChild(child, options) {
         var overrideClasses = getGroupClassOverrides(definition);
-        var _ref2 = options != null ? options : {},
-          parentDataNode = _ref2.parentDataNode,
-          actionOnClick = _ref2.actionOnClick,
-          variables = _ref2.variables,
-          renderOptions = _objectWithoutPropertiesLoose(_ref2, _excluded2);
-        var dContext = (_ref3 = parentDataNode != null ? parentDataNode : dataContext.dataNode) != null ? _ref3 : data;
+        var _ref3 = options != null ? options : {},
+          actionOnClick = _ref3.actionOnClick,
+          renderOptions = _objectWithoutPropertiesLoose(_ref3, _excluded2);
         var allChildOptions = _extends({}, childOptions, overrideClasses, renderOptions, {
-          variables: _extends({}, childOptions.variables, variables),
           actionOnClick: actionHandlers(actionOnClick, childOptions.actionOnClick)
         });
-        return /*#__PURE__*/jsxRuntime.jsx(RenderForm, {
-          form: child,
+        return /*#__PURE__*/jsxRuntime.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: dataContext,
       control: (_dataContext$dataNode = dataContext.dataNode) == null ? void 0 : _dataContext$dataNode.control,
       schemaInterface: 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: function getChildState(child, parent) {
-        var _ref4;
-        return formState.getControlState((_ref4 = parent != null ? parent : state.dataNode) != null ? _ref4 : data, child, childOptions, runAsync);
-      },
       runExpression: function runExpression(scope, expr, returnResult) {
         if (expr != null && expr.type) {
-          formState.evalExpression(expr, {
-            scope: scope,
-            dataNode: data,
+          formsCore.defaultEvaluators[expr.type](expr, {
+            dataNode: state.parent,
             schemaInterface: schemaInterface,
+            scope: scope,
             returnResult: returnResult,
             runAsync: runAsync
           });
@@ -1731,24 +1652,14 @@ function RenderForm(_ref) {
     var layoutProps = _extends({}, labelAndChildren, {
       adornments: adornments,
       className: rendererClass(options.layoutClass, definition.layoutClass),
-      style: state.layoutStyle
+      style: state.resolved.layoutStyle
     });
     var renderedControl = renderer.renderLayout((_options$adjustLayout = options.adjustLayout == null ? void 0 : options.adjustLayout(dataContext, layoutProps)) != null ? _options$adjustLayout : layoutProps);
-    var rendered = renderer.renderVisibility(_extends({
+    return renderer.renderVisibility(_extends({
       visibility: visibility
     }, renderedControl));
-    react.useEffect(function () {
-      if (effects) {
-        var toRun = effects;
-        effects = undefined;
-        toRun.forEach(function (cb) {
-          return cb();
-        });
-      }
-    }, [effects]);
-    return rendered;
   } finally {
-    _effect();
+    _effect2();
   }
 }
 /**
@@ -1758,8 +1669,8 @@ function useControlRendererComponent(controlOrFormNode, renderer, options, paren
   if (options === void 0) {
     options = {};
   }
-  var _ref5 = "definition" in controlOrFormNode ? [controlOrFormNode.definition, controlOrFormNode] : [controlOrFormNode, formsCore.legacyFormNode(controlOrFormNode)],
-    formNode = _ref5[1];
+  var _ref4 = "definition" in controlOrFormNode ? [controlOrFormNode.definition, controlOrFormNode] : [controlOrFormNode, formsCore.legacyFormNode(controlOrFormNode)],
+    formNode = _ref4[1];
   var r = useUpdatedRef({
     options: options,
     renderer: renderer,
@@ -1785,36 +1696,36 @@ function useControlRendererComponent(controlOrFormNode, renderer, options, paren
 /**
  * @deprecated Use RenderForm instead.
  */
-function ControlRenderer(_ref6) {
-  var _effect2 = core.useComponentTracking();
+function ControlRenderer(_ref5) {
+  var _effect3 = core.useComponentTracking();
   try {
-    var definition = _ref6.definition,
-      fields = _ref6.fields,
-      renderer = _ref6.renderer,
-      options = _ref6.options,
-      control = _ref6.control,
-      parentPath = _ref6.parentPath;
+    var definition = _ref5.definition,
+      fields = _ref5.fields,
+      renderer = _ref5.renderer,
+      options = _ref5.options,
+      control = _ref5.control,
+      parentPath = _ref5.parentPath;
     var schemaDataNode = formsCore.createSchemaDataNode(formsCore.createSchemaTree(fields).rootNode, control);
     var Render = useControlRendererComponent(definition, renderer, options, schemaDataNode);
     return /*#__PURE__*/jsxRuntime.jsx(Render, {});
   } finally {
-    _effect2();
+    _effect3();
   }
 }
 /**
  * @deprecated Use RenderForm instead.
  */
-function NewControlRenderer(_ref7) {
-  var _effect3 = core.useComponentTracking();
+function NewControlRenderer(_ref6) {
+  var _effect4 = core.useComponentTracking();
   try {
-    var definition = _ref7.definition,
-      renderer = _ref7.renderer,
-      options = _ref7.options,
-      parentDataNode = _ref7.parentDataNode;
+    var definition = _ref6.definition,
+      renderer = _ref6.renderer,
+      options = _ref6.options,
+      parentDataNode = _ref6.parentDataNode;
     var Render = useControlRendererComponent(definition, renderer, options, parentDataNode);
     return /*#__PURE__*/jsxRuntime.jsx(Render, {});
   } finally {
-    _effect3();
+    _effect4();
   }
 }
 /**
@@ -1830,27 +1741,115 @@ function useControlRenderer(definition, fields, renderer, options) {
     renderer: renderer,
     options: options
   });
-  return react.useCallback(function (_ref8) {
-    var control = _ref8.control,
-      parentPath = _ref8.parentPath;
+  return react.useCallback(function (_ref7) {
+    var control = _ref7.control,
+      parentPath = _ref7.parentPath;
     return /*#__PURE__*/jsxRuntime.jsx(ControlRenderer, _extends({}, r.current, {
       control: control,
       parentPath: parentPath
     }));
   }, [r]);
 }
+function useAsyncRunner() {
+  var effects = [];
+  var runAsync = function runAsync(cb) {
+    if (effects) effects.push(cb);else cb();
+  };
+  react.useEffect(function () {
+    if (effects) {
+      var toRun = effects;
+      effects = undefined;
+      toRun.forEach(function (cb) {
+        return cb();
+      });
+    }
+  }, [effects]);
+  return {
+    runAsync: runAsync
+  };
+}
+var DefaultFormNodeUi = /*#__PURE__*/function () {
+  function DefaultFormNodeUi(node) {
+    this.node = void 0;
+    this.node = node;
+  }
+  var _proto = DefaultFormNodeUi.prototype;
+  _proto.ensureVisible = function ensureVisible() {
+    var _this$node$parentNode;
+    (_this$node$parentNode = this.node.parentNode) == null || _this$node$parentNode.ui.ensureChildVisible(this.node.childIndex);
+  };
+  _proto.ensureChildVisible = function ensureChildVisible(childIndex) {
+    this.ensureVisible();
+  };
+  _proto.getDisabler = function getDisabler(type) {
+    var _this = this;
+    if (type === formsCore.ControlDisableType.Self) {
+      return function () {
+        var old = !!_this.node.forceDisabled;
+        _this.node.setForceDisabled(true);
+        return function () {
+          _this.node.setForceDisabled(old);
+        };
+      };
+    }
+    if (type === formsCore.ControlDisableType.Global) {
+      var topLevel = this.node;
+      while (topLevel.parentNode) {
+        topLevel = topLevel.parentNode;
+      }
+      return topLevel.ui.getDisabler(formsCore.ControlDisableType.Self);
+    }
+    return function () {
+      return function () {};
+    };
+  };
+  return DefaultFormNodeUi;
+}();
+
+var NoOpControlActionContext = {
+  disableForm: function disableForm(disable) {},
+  runAction: function runAction(actionId, actionData) {}
+};
+
+function useElementSelectedRenderer(_ref) {
+  var runExpression = _ref.runExpression,
+    renderOptions = _ref.renderOptions,
+    control = _ref.control;
+  var elementValue = core.useControl();
+  react.useEffect(function () {
+    runExpression(elementValue, renderOptions.elementExpression, function (v) {
+      return elementValue.value = v;
+    });
+  }, []);
+  var isSelected = core.useComputed(function () {
+    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;
+  });
+  var selControl = core.useControl(function () {
+    return isSelected.current.value;
+  });
+  selControl.value = isSelected.value;
+  core.useControlEffect(function () {
+    return selControl.value;
+  }, function (v) {
+    control.as().setValue(function (x) {
+      return setIncluded(x != null ? x : [], elementValue.value, v);
+    });
+  });
+  return selControl;
+}
 
 exports.AppendAdornmentPriority = AppendAdornmentPriority;
 exports.ControlRenderer = ControlRenderer;
+exports.DefaultFormNodeUi = DefaultFormNodeUi;
 exports.NewControlRenderer = NewControlRenderer;
+exports.NoOpControlActionContext = NoOpControlActionContext;
 exports.RenderForm = RenderForm;
+exports.RenderFormNode = RenderFormNode;
 exports.WrapAdornmentPriority = WrapAdornmentPriority;
-exports.accordionOptions = accordionOptions;
-exports.actionControl = actionControl;
 exports.actionHandlers = actionHandlers;
 exports.addMissingControls = addMissingControls;
 exports.addMissingControlsForSchema = addMissingControlsForSchema;
-exports.adornmentOptions = adornmentOptions;
 exports.appendMarkup = appendMarkup;
 exports.appendMarkupAt = appendMarkupAt;
 exports.applyArrayLengthRestrictions = applyArrayLengthRestrictions;
@@ -1860,13 +1859,10 @@ exports.applyExtensionToSchema = applyExtensionToSchema;
 exports.applyExtensionsToSchema = applyExtensionsToSchema;
 exports.applyLengthRestrictions = applyLengthRestrictions;
 exports.applyValues = applyValues;
-exports.autocompleteOptions = autocompleteOptions;
-exports.checkListOptions = checkListOptions;
 exports.cleanDataForSchema = cleanDataForSchema;
 exports.clearMultiValues = clearMultiValues;
 exports.coerceToString = coerceToString;
 exports.collectDifferences = collectDifferences;
-exports.compoundControl = compoundControl;
 exports.controlTitle = controlTitle;
 exports.createAction = createAction;
 exports.createActionRenderer = createActionRenderer;
@@ -1881,23 +1877,13 @@ exports.createIconLibraryExtension = createIconLibraryExtension;
 exports.createLabelRenderer = createLabelRenderer;
 exports.createLayoutRenderer = createLayoutRenderer;
 exports.createVisibilityRenderer = createVisibilityRenderer;
-exports.dataControl = dataControl;
-exports.dateValidatorOptions = dateValidatorOptions;
 exports.deepMerge = deepMerge;
 exports.defaultControlForField = defaultControlForField;
 exports.defaultDataProps = defaultDataProps;
 exports.defaultValueForField = defaultValueForField;
 exports.defaultValueForFields = defaultValueForFields;
-exports.displayOnlyOptions = displayOnlyOptions;
-exports.dynamicDefaultValue = dynamicDefaultValue;
-exports.dynamicDisabled = dynamicDisabled;
-exports.dynamicReadonly = dynamicReadonly;
-exports.dynamicVisibility = dynamicVisibility;
 exports.elementValueForField = elementValueForField;
-exports.emptyGroupDefinition = emptyGroupDefinition;
 exports.fieldDisplayName = fieldDisplayName;
-exports.fieldEqExpr = fieldEqExpr;
-exports.fieldExpr = fieldExpr;
 exports.fieldHasTag = fieldHasTag;
 exports.fieldOptionAdornment = fieldOptionAdornment;
 exports.findChildDefinition = findChildDefinition;
@@ -1916,34 +1902,26 @@ exports.getLastDefinedValue = getLastDefinedValue;
 exports.getLengthRestrictions = getLengthRestrictions;
 exports.getNullToggler = getNullToggler;
 exports.getOverrideClass = getOverrideClass;
-exports.groupedControl = groupedControl;
 exports.hasOptions = hasOptions;
-exports.htmlDisplayControl = htmlDisplayControl;
 exports.isAccordionAdornment = isAccordionAdornment;
 exports.isIconAdornment = isIconAdornment;
 exports.isOptionalAdornment = isOptionalAdornment;
 exports.isSetFieldAdornment = isSetFieldAdornment;
-exports.jsonataExpr = jsonataExpr;
-exports.jsonataOptions = jsonataOptions;
-exports.jsonataValidatorOptions = jsonataValidatorOptions;
 exports.layoutKeyForPlacement = layoutKeyForPlacement;
-exports.lengthValidatorOptions = lengthValidatorOptions;
 exports.lookupChildDataContext = lookupChildDataContext;
 exports.mergeObjects = mergeObjects;
-exports.radioButtonOptions = radioButtonOptions;
 exports.renderControlLayout = renderControlLayout;
 exports.renderLayoutParts = renderLayoutParts;
-exports.renderOptionsFor = renderOptionsFor;
 exports.rendererClass = rendererClass;
-exports.textDisplayControl = textDisplayControl;
-exports.textfieldOptions = textfieldOptions;
+exports.setIncluded = setIncluded;
+exports.useAsyncRunner = useAsyncRunner;
 exports.useControlDefinitionForSchema = useControlDefinitionForSchema;
 exports.useControlRenderer = useControlRenderer;
 exports.useControlRendererComponent = useControlRendererComponent;
+exports.useElementSelectedRenderer = useElementSelectedRenderer;
 exports.useExpression = useExpression;
 exports.useUpdatedRef = useUpdatedRef;
 exports.validationVisitor = validationVisitor;
-exports.validatorOptions = validatorOptions;
 exports.wrapLayout = wrapLayout;
 exports.wrapMarkup = wrapMarkup;
 exports.wrapMarkupAt = wrapMarkupAt;