@react-typed-forms/schemas 8.1.0 → 9.0.0

package/lib/index.js

@@ -1,6 +1,6 @@
 var React = require('react');
-var clsx = require('clsx');
 var core = require('@react-typed-forms/core');
+var clsx = require('clsx');
 var jsonata = require('jsonata');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -77,6 +77,7 @@ exports.DataRenderType = void 0;
   DataRenderType["Checkbox"] = "Checkbox";
   DataRenderType["Dropdown"] = "Dropdown";
   DataRenderType["DisplayOnly"] = "DisplayOnly";
+  DataRenderType["Group"] = "Group";
 })(exports.DataRenderType || (exports.DataRenderType = {}));
 exports.SyncTextType = void 0;
 (function (SyncTextType) {
@@ -142,6 +143,9 @@ function isFlexRenderer(options) {
 function isDisplayOnlyRenderer(options) {
   return options.type === exports.DataRenderType.DisplayOnly;
 }
+function isDataGroupRenderer(options) {
+  return options.type === exports.DataRenderType.Group;
+}
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -201,96 +205,6 @@ function _createForOfIteratorHelperLoose(o, allowArrayLike) {
   throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
-function buildSchema(def) {
-  return Object.entries(def).map(function (x) {
-    return x[1](x[0]);
-  });
-}
-function stringField(displayName, options) {
-  return makeScalarField(_extends({
-    type: exports.FieldType.String,
-    displayName: displayName
-  }, options));
-}
-function stringOptionsField(displayName) {
-  return makeScalarField({
-    type: exports.FieldType.String,
-    displayName: displayName,
-    options: [].slice.call(arguments, 1)
-  });
-}
-function withScalarOptions(options, v) {
-  return function (n) {
-    return _extends({}, v(n), options);
-  };
-}
-function makeScalarField(options) {
-  return function (n) {
-    return _extends({}, defaultScalarField(n, n), options);
-  };
-}
-function makeCompoundField(options) {
-  return function (n) {
-    return _extends({}, defaultCompoundField(n, n, false), options);
-  };
-}
-function intField(displayName, options) {
-  return makeScalarField(_extends({
-    type: exports.FieldType.Int,
-    displayName: displayName
-  }, options));
-}
-function boolField(displayName, options) {
-  return makeScalarField(_extends({
-    type: exports.FieldType.Bool,
-    displayName: displayName
-  }, options));
-}
-function compoundField(displayName, fields, other) {
-  return function (field) {
-    return _extends({}, defaultCompoundField(field, displayName, false), other, {
-      children: fields
-    });
-  };
-}
-function defaultScalarField(field, displayName) {
-  return {
-    field: field,
-    displayName: displayName,
-    type: exports.FieldType.String
-  };
-}
-function defaultCompoundField(field, displayName, collection) {
-  return {
-    field: field,
-    displayName: displayName,
-    type: exports.FieldType.Compound,
-    collection: collection,
-    children: []
-  };
-}
-function mergeField(field, mergeInto) {
-  var existing = mergeInto.find(function (x) {
-    return x.field === field.field;
-  });
-  if (existing) {
-    return mergeInto.map(function (x) {
-      return x !== existing ? x : _extends({}, x, {
-        onlyForTypes: mergeTypes(x.onlyForTypes, field.onlyForTypes)
-      });
-    });
-  }
-  return [].concat(mergeInto, [field]);
-  function mergeTypes(f, s) {
-    if (!f) return s;
-    if (!s) return f;
-    var extras = s.filter(function (x) {
-      return !f.includes(x);
-    });
-    return extras.length ? [].concat(f, extras) : f;
-  }
-}
-
 function applyDefaultValues(v, fields) {
   if (!v) return defaultValueForFields(fields);
   var applyValue = fields.filter(function (x) {
@@ -516,7 +430,7 @@ function visitControlData(definition, ctx, cb) {
 }
 function lookupChildControl(data, child) {
   var childPath = [].concat(data.path, [child]);
-  return data.data.lookupControl(childPath);
+  return watchControlLookup(data.data, childPath);
 }
 function cleanDataForSchema(v, fields) {
   if (!v) return v;
@@ -558,10 +472,12 @@ function cleanDataForSchema(v, fields) {
   });
   return out;
 }
-function getAllReferencedClasses(c) {
-  var _c$children;
-  var childClasses = (_c$children = c.children) == null ? void 0 : _c$children.flatMap(getAllReferencedClasses);
-  var tc = clsx__default["default"](getOverrideClass(c.styleClass), getOverrideClass(c.layoutClass), getOverrideClass(c.labelClass));
+function getAllReferencedClasses(c, collectExtra) {
+  var _c$children, _collectExtra;
+  var childClasses = (_c$children = c.children) == null ? void 0 : _c$children.flatMap(function (x) {
+    return getAllReferencedClasses(x, collectExtra);
+  });
+  var tc = clsx__default["default"]([c.styleClass, c.layoutClass, c.labelClass].concat((_collectExtra = collectExtra == null ? void 0 : collectExtra(c)) != null ? _collectExtra : []).map(getOverrideClass));
   if (childClasses && !tc) return childClasses;
   if (!tc) return [];
   if (childClasses) return [tc].concat(childClasses);
@@ -601,6 +517,189 @@ function rendererClass(controlClass, globalClass) {
   if (oc === controlClass) return clsx__default["default"](controlClass, globalClass);
   return oc ? oc : undefined;
 }
+function watchControlLookup(base, path) {
+  var index = 0;
+  while (index < path.length && base) {
+    var childId = path[index];
+    var c = base.current;
+    if (typeof childId === "string") {
+      var _c$fields;
+      var next = (_c$fields = c.fields) == null ? void 0 : _c$fields[childId];
+      if (!next) core.trackControlChange(base, core.ControlChange.Structure);
+      base = next;
+    } else {
+      var _c$elements;
+      base = (_c$elements = c.elements) == null ? void 0 : _c$elements[childId];
+    }
+    index++;
+  }
+  return base;
+}
+function makeHook(runHook, state, deps) {
+  return {
+    deps: deps,
+    state: state,
+    runHook: runHook
+  };
+}
+function useDynamicHooks(hooks) {
+  var hookEntries = Object.entries(hooks);
+  var deps = hookEntries.map(function (_ref) {
+    var x = _ref[1];
+    return toDepString(x.deps);
+  }).join(",");
+  var ref = React.useRef({});
+  var s = ref.current;
+  hookEntries.forEach(function (x) {
+    return s[x[0]] = x[1].state;
+  });
+  return React.useCallback(function (p) {
+    return Object.fromEntries(hookEntries.map(function (_ref2) {
+      var f = _ref2[0],
+        hg = _ref2[1];
+      return [f, hg.runHook(p, ref.current[f])];
+    }));
+  }, [deps]);
+}
+function toDepString(x) {
+  if (x === undefined) return "_";
+  if (x === null) return "~";
+  return x.toString();
+}
+
+function buildSchema(def) {
+  return Object.entries(def).map(function (x) {
+    return x[1](x[0]);
+  });
+}
+function stringField(displayName, options) {
+  return makeScalarField(_extends({
+    type: exports.FieldType.String,
+    displayName: displayName
+  }, options));
+}
+function stringOptionsField(displayName) {
+  return makeScalarField({
+    type: exports.FieldType.String,
+    displayName: displayName,
+    options: [].slice.call(arguments, 1)
+  });
+}
+function withScalarOptions(options, v) {
+  return function (n) {
+    return _extends({}, v(n), options);
+  };
+}
+function makeScalarField(options) {
+  return function (n) {
+    return _extends({}, defaultScalarField(n, n), options);
+  };
+}
+function makeCompoundField(options) {
+  return function (n) {
+    return _extends({}, defaultCompoundField(n, n, false), options);
+  };
+}
+function intField(displayName, options) {
+  return makeScalarField(_extends({
+    type: exports.FieldType.Int,
+    displayName: displayName
+  }, options));
+}
+function boolField(displayName, options) {
+  return makeScalarField(_extends({
+    type: exports.FieldType.Bool,
+    displayName: displayName
+  }, options));
+}
+function compoundField(displayName, fields, other) {
+  return function (field) {
+    return _extends({}, defaultCompoundField(field, displayName, false), other, {
+      children: fields
+    });
+  };
+}
+function defaultScalarField(field, displayName) {
+  return {
+    field: field,
+    displayName: displayName,
+    type: exports.FieldType.String
+  };
+}
+function defaultCompoundField(field, displayName, collection) {
+  return {
+    field: field,
+    displayName: displayName,
+    type: exports.FieldType.Compound,
+    collection: collection,
+    children: []
+  };
+}
+function mergeField(field, mergeInto) {
+  var existing = mergeInto.find(function (x) {
+    return x.field === field.field;
+  });
+  if (existing) {
+    return mergeInto.map(function (x) {
+      return x !== existing ? x : _extends({}, x, {
+        onlyForTypes: mergeTypes(x.onlyForTypes, field.onlyForTypes)
+      });
+    });
+  }
+  return [].concat(mergeInto, [field]);
+  function mergeTypes(f, s) {
+    if (!f) return s;
+    if (!s) return f;
+    var extras = s.filter(function (x) {
+      return !f.includes(x);
+    });
+    return extras.length ? [].concat(f, extras) : f;
+  }
+}
+function mergeFields(fields, name, value, newFields) {
+  var withType = fields.map(function (x) {
+    return x.isTypeField ? addFieldOption(x, name, value) : x;
+  });
+  return newFields.map(function (x) {
+    return _extends({}, x, {
+      onlyForTypes: [value]
+    });
+  }).reduce(function (af, x) {
+    return mergeField(x, af);
+  }, withType);
+}
+function addFieldOption(typeField, name, value) {
+  var _typeField$options;
+  var options = (_typeField$options = typeField.options) != null ? _typeField$options : [];
+  return _extends({}, typeField, {
+    options: [].concat(options, [{
+      name: name,
+      value: value
+    }])
+  });
+}
+function resolveSchemas(schemaMap) {
+  var out = {};
+  function resolveSchemaType(type) {
+    if (type in out) {
+      return out[type];
+    }
+    var resolvedFields = [];
+    out[type] = resolvedFields;
+    schemaMap[type].forEach(function (x) {
+      if (isCompoundField(x) && x.schemaRef) {
+        resolvedFields.push(_extends({}, x, {
+          children: resolveSchemaType(x.schemaRef)
+        }));
+      } else {
+        resolvedFields.push(x);
+      }
+    });
+    return resolvedFields;
+  }
+  Object.keys(schemaMap).forEach(resolveSchemaType);
+  return out;
+}
 
 function dataControl(field, title, options) {
   return _extends({
@@ -712,41 +811,19 @@ function useControlDefinitionForSchema(sf, definition) {
     });
   }, [sf, definition]);
 }
-function addCustomDataRenderOptions(controlFields, customRenderOptions) {
-  return controlFields.map(function (x) {
-    return x.field === "renderOptions" && isCompoundField(x) ? addRenderOptions(x) : x;
+function applyExtensionToSchema(schemaMap, extension) {
+  var outMap = _extends({}, schemaMap);
+  Object.entries(extension).forEach(function (_ref) {
+    var field = _ref[0],
+      cro = _ref[1];
+    outMap[field] = (Array.isArray(cro) ? cro : [cro]).reduce(function (a, cr) {
+      return mergeFields(a, cr.name, cr.value, cr.fields);
+    }, outMap[field]);
   });
-  function addRenderOptions(roField) {
-    var children = roField.children;
-    var withTypes = children.map(function (x) {
-      return x.field === "type" ? addRenderOptionType(x) : x;
-    });
-    return _extends({}, roField, {
-      children: customRenderOptions.reduce(function (renderOptionFields, ro) {
-        return ro.fields.map(function (x) {
-          return _extends({}, x, {
-            onlyForTypes: [ro.value]
-          });
-        }).reduce(function (af, x) {
-          return mergeField(x, af);
-        }, renderOptionFields);
-      }, withTypes)
-    });
-  }
-  function addRenderOptionType(typeField) {
-    var _typeField$options;
-    var options = (_typeField$options = typeField.options) != null ? _typeField$options : [];
-    return _extends({}, typeField, {
-      options: [].concat(options, customRenderOptions.map(function (_ref) {
-        var name = _ref.name,
-          value = _ref.value;
-        return {
-          name: name,
-          value: value
-        };
-      }))
-    });
-  }
+  return outMap;
+}
+function applyExtensionsToSchema(schemaMap, extensions) {
+  return resolveSchemas(extensions.reduce(applyExtensionToSchema, schemaMap));
 }
 
 function useCalculatedControl(calculate) {
@@ -799,76 +876,65 @@ function _finallyRethrows(body, finalizer) {
 }
 function useEvalVisibilityHook(useEvalExpressionHook, definition, schemaField) {
   var dynamicVisibility = useEvalDynamicHook(definition, exports.DynamicPropertyType.Visible, useEvalExpressionHook);
-  var r = useUpdatedRef({
+  return makeDynamicPropertyHook(dynamicVisibility, function (ctx, _ref) {
+    var schemaField = _ref.schemaField,
+      definition = _ref.definition;
+    return core.useComputed(function () {
+      return matchesType(ctx, schemaField == null ? void 0 : schemaField.onlyForTypes) && (!schemaField || !hideDisplayOnly(ctx, schemaField, definition, ctx.schemaInterface));
+    });
+  }, {
     schemaField: schemaField,
     definition: definition
   });
-  return React.useCallback(function (ctx) {
-    var _dynamicVisibility;
-    var _r$current = r.current,
-      schemaField = _r$current.schemaField,
-      definition = _r$current.definition;
-    return (_dynamicVisibility = dynamicVisibility == null ? void 0 : dynamicVisibility(ctx)) != null ? _dynamicVisibility : core.useComputed(function () {
-      return matchesType(ctx, schemaField == null ? void 0 : schemaField.onlyForTypes) && (!schemaField || !hideDisplayOnly(ctx, schemaField, definition, ctx.schemaInterface));
-    });
-  }, [dynamicVisibility, r]);
 }
 function useEvalReadonlyHook(useEvalExpressionHook, definition) {
   var dynamicReadonly = useEvalDynamicHook(definition, exports.DynamicPropertyType.Readonly, useEvalExpressionHook);
-  var r = useUpdatedRef(definition);
-  return React.useCallback(function (ctx) {
-    if (dynamicReadonly) return dynamicReadonly(ctx);
+  return makeDynamicPropertyHook(dynamicReadonly, function (ctx, _ref2) {
+    var definition = _ref2.definition;
     return useCalculatedControl(function () {
-      return isControlReadonly(r.current);
+      return isControlReadonly(definition);
     });
-  }, [dynamicReadonly, r]);
+  }, {
+    definition: definition
+  });
 }
 function useEvalStyleHook(useEvalExpressionHook, property, definition) {
   var dynamicStyle = useEvalDynamicHook(definition, property, useEvalExpressionHook);
-  return React.useCallback(function (ctx) {
-    if (dynamicStyle) return dynamicStyle(ctx);
+  return makeDynamicPropertyHook(dynamicStyle, function () {
     return core.useControl(undefined);
-  }, [dynamicStyle]);
+  }, undefined);
 }
 function useEvalAllowedOptionsHook(useEvalExpressionHook, definition) {
   var dynamicAllowed = useEvalDynamicHook(definition, exports.DynamicPropertyType.AllowedOptions, useEvalExpressionHook);
-  return React.useCallback(function (ctx) {
-    if (dynamicAllowed) return dynamicAllowed(ctx);
+  return makeDynamicPropertyHook(dynamicAllowed, function () {
     return core.useControl([]);
-  }, [dynamicAllowed]);
+  }, undefined);
 }
 function useEvalDisabledHook(useEvalExpressionHook, definition) {
   var dynamicDisabled = useEvalDynamicHook(definition, exports.DynamicPropertyType.Disabled, useEvalExpressionHook);
-  return React.useCallback(function (ctx) {
-    if (dynamicDisabled) return dynamicDisabled(ctx);
+  return makeDynamicPropertyHook(dynamicDisabled, function () {
     return core.useControl(false);
-  }, [dynamicDisabled]);
+  }, undefined);
 }
 function useEvalDisplayHook(useEvalExpressionHook, definition) {
-  var dynamicDisplay = useEvalDynamicHook(definition, exports.DynamicPropertyType.Display, useEvalExpressionHook);
-  return React.useCallback(function (ctx) {
-    return dynamicDisplay == null ? void 0 : dynamicDisplay(ctx);
-  }, [dynamicDisplay]);
+  return useEvalDynamicHook(definition, exports.DynamicPropertyType.Display, useEvalExpressionHook);
 }
 function useEvalDefaultValueHook(useEvalExpressionHook, definition, schemaField) {
   var dynamicValue = useEvalDynamicHook(definition, exports.DynamicPropertyType.DefaultValue, useEvalExpressionHook);
-  var r = useUpdatedRef({
-    definition: definition,
-    schemaField: schemaField
-  });
-  return React.useCallback(function (ctx) {
-    var _dynamicValue;
-    var _r$current2 = r.current,
-      definition = _r$current2.definition,
-      schemaField = _r$current2.schemaField;
-    return (_dynamicValue = dynamicValue == null ? void 0 : dynamicValue(ctx)) != null ? _dynamicValue : core.useComputed(calcDefault);
+  return makeDynamicPropertyHook(dynamicValue, function (ctx, _ref3) {
+    var definition = _ref3.definition,
+      schemaField = _ref3.schemaField;
+    return core.useComputed(calcDefault);
     function calcDefault() {
-      var _ref = isDataControlDefinition(definition) ? [definition.required, definition.defaultValue] : [false, undefined],
-        required = _ref[0],
-        dcv = _ref[1];
+      var _ref4 = isDataControlDefinition(definition) ? [definition.required, definition.defaultValue] : [false, undefined],
+        required = _ref4[0],
+        dcv = _ref4[1];
       return dcv != null ? dcv : schemaField ? defaultValueForField(schemaField, required) : undefined;
     }
-  }, [dynamicValue, r]);
+  }, {
+    definition: definition,
+    schemaField: schemaField
+  });
 }
 function useDataExpression(fvExpr, fields, data) {
   var refField = findField(fields, fvExpr.field);
@@ -900,12 +966,13 @@ function defaultEvalHooks(expr, context) {
 var defaultUseEvalExpressionHook = makeEvalExpressionHook(defaultEvalHooks);
 function makeEvalExpressionHook(f) {
   return function (expr) {
-    var r = useUpdatedRef(expr);
-    var cb = React.useCallback(function (ctx) {
-      var expr = r.current;
-      return f(expr, ctx);
-    }, [expr == null ? void 0 : expr.type, r]);
-    return expr ? cb : undefined;
+    return {
+      deps: expr == null ? void 0 : expr.type,
+      state: expr,
+      runHook: function runHook(ctx, state) {
+        return state ? f(state, ctx) : undefined;
+      }
+    };
   };
 }
 function useEvalDynamicHook(definition, type, useEvalExpressionHook) {
@@ -984,12 +1051,19 @@ function useJsonataExpression(jExpr, dataContext, bindings) {
 }
 function useEvalLabelText(useExpr, definition) {
   var dynamicValue = useEvalDynamicHook(definition, exports.DynamicPropertyType.Label, useExpr);
-  return React.useCallback(function (ctx) {
-    if (dynamicValue) {
-      return dynamicValue(ctx);
-    }
+  return makeDynamicPropertyHook(dynamicValue, function () {
     return core.useControl(null);
-  }, [dynamicValue]);
+  }, undefined);
+}
+function makeDynamicPropertyHook(dynamicValue, makeDefault, state, deps) {
+  return {
+    deps: deps !== undefined ? dynamicValue.deps : [deps, dynamicValue.deps].map(toDepString).join(),
+    runHook: function runHook(ctx, s) {
+      var _dynamicValue$runHook;
+      return (_dynamicValue$runHook = dynamicValue.runHook(ctx, s[0])) != null ? _dynamicValue$runHook : makeDefault(ctx, s[1]);
+    },
+    state: [dynamicValue.state, state]
+  };
 }
 
 function useValidationHook(definition) {
@@ -1092,15 +1166,17 @@ function useControlRenderer(definition, fields, renderer, options) {
   var schemaInterface = (_options$schemaInterf = options.schemaInterface) != null ? _options$schemaInterf : defaultSchemaInterface;
   var useExpr = (_options$useEvalExpre = options.useEvalExpressionHook) != null ? _options$useEvalExpre : defaultUseEvalExpressionHook;
   var schemaField = lookupSchemaField(definition, fields);
-  var useDefaultValue = useEvalDefaultValueHook(useExpr, definition, schemaField);
-  var useIsVisible = useEvalVisibilityHook(useExpr, definition, schemaField);
-  var useIsReadonly = useEvalReadonlyHook(useExpr, definition);
-  var useIsDisabled = useEvalDisabledHook(useExpr, definition);
-  var useAllowedOptions = useEvalAllowedOptionsHook(useExpr, definition);
-  var useLabelText = useEvalLabelText(useExpr, definition);
-  var useCustomStyle = useEvalStyleHook(useExpr, exports.DynamicPropertyType.Style, definition);
-  var useLayoutStyle = useEvalStyleHook(useExpr, exports.DynamicPropertyType.LayoutStyle, definition);
-  var useDynamicDisplay = useEvalDisplayHook(useExpr, definition);
+  var dynamicHooks = useDynamicHooks({
+    defaultValueControl: useEvalDefaultValueHook(useExpr, definition, schemaField),
+    visibleControl: useEvalVisibilityHook(useExpr, definition, schemaField),
+    readonlyControl: useEvalReadonlyHook(useExpr, definition),
+    disabledControl: useEvalDisabledHook(useExpr, definition),
+    allowedOptions: useEvalAllowedOptionsHook(useExpr, definition),
+    labelText: useEvalLabelText(useExpr, definition),
+    customStyle: useEvalStyleHook(useExpr, exports.DynamicPropertyType.Style, definition),
+    layoutStyle: useEvalStyleHook(useExpr, exports.DynamicPropertyType.LayoutStyle, definition),
+    displayControl: useEvalDisplayHook(useExpr, definition)
+  });
   var useValidation = useValidationHook(definition);
   var r = useUpdatedRef({
     options: options,
@@ -1126,13 +1202,16 @@ function useControlRenderer(definition, fields, renderer, options) {
         data: rootControl,
         path: parentPath
       };
-      var readonlyControl = useIsReadonly(parentDataContext);
-      var disabledControl = useIsDisabled(parentDataContext);
-      var visibleControl = useIsVisible(parentDataContext);
-      var displayControl = useDynamicDisplay(parentDataContext);
-      var customStyle = useCustomStyle(parentDataContext).value;
-      var layoutStyle = useLayoutStyle(parentDataContext).value;
-      var labelText = useLabelText(parentDataContext);
+      var _dynamicHooks = dynamicHooks(parentDataContext),
+        readonlyControl = _dynamicHooks.readonlyControl,
+        disabledControl = _dynamicHooks.disabledControl,
+        visibleControl = _dynamicHooks.visibleControl,
+        displayControl = _dynamicHooks.displayControl,
+        layoutStyle = _dynamicHooks.layoutStyle,
+        labelText = _dynamicHooks.labelText,
+        customStyle = _dynamicHooks.customStyle,
+        allowedOptions = _dynamicHooks.allowedOptions,
+        defaultValueControl = _dynamicHooks.defaultValueControl;
       var visible = visibleControl.current.value;
       var visibility = core.useControl(function () {
         return visible != null ? {
@@ -1150,8 +1229,6 @@ function useControlRenderer(definition, fields, renderer, options) {
           };
         });
       });
-      var allowedOptions = useAllowedOptions(parentDataContext);
-      var defaultValueControl = useDefaultValue(parentDataContext);
       var _getControlData = getControlData(_schemaField, parentDataContext),
         parentControl = _getControlData[0],
         control = _getControlData[1],
@@ -1217,13 +1294,18 @@ function useControlRenderer(definition, fields, renderer, options) {
         labelText: labelText,
         schemaField: _schemaField,
         displayControl: displayControl,
-        style: customStyle,
-        allowedOptions: allowedOptions
+        style: customStyle.value,
+        allowedOptions: allowedOptions,
+        useChildVisibility: function useChildVisibility(child) {
+          var childDef = findChildDefinition(c, child);
+          var schemaField = lookupSchemaField(childDef, controlDataContext.fields);
+          return useEvalVisibilityHook(useExpr, childDef, schemaField);
+        }
       });
       var renderedControl = renderer.renderLayout(_extends({}, labelAndChildren, {
         adornments: adornments,
         className: c.layoutClass,
-        style: layoutStyle
+        style: layoutStyle.value
       }));
       return renderer.renderVisibility(_extends({
         visibility: visibility
@@ -1231,7 +1313,7 @@ function useControlRenderer(definition, fields, renderer, options) {
     } finally {
       stopTracking();
     }
-  }, [r, dataProps, useIsVisible, useDefaultValue, useIsReadonly, useIsDisabled, useCustomStyle, useLayoutStyle, useAllowedOptions, useLabelText, useDynamicDisplay, useValidation, renderer, schemaInterface]);
+  }, [r, dataProps, useValidation, renderer, schemaInterface, dynamicHooks]);
   Component.displayName = "RenderControl";
   return Component;
 }
@@ -1269,15 +1351,17 @@ function ControlRenderer(_ref3) {
     _effect();
   }
 }
-function groupProps(definition, renderChild, data, className, style) {
+function groupProps(definition, renderChild, dataContext, className, style, useChildVisibility) {
   var _definition$children, _definition$groupOpti;
   return {
-    children: (_definition$children = definition.children) != null ? _definition$children : [],
+    childDefinitions: (_definition$children = definition.children) != null ? _definition$children : [],
     renderChild: renderChild,
+    dataContext: dataContext,
     renderOptions: (_definition$groupOpti = definition.groupOptions) != null ? _definition$groupOpti : {
       type: "Standard"
     },
     className: cc(className),
+    useChildVisibility: useChildVisibility,
     style: style
   };
 }
@@ -1296,7 +1380,7 @@ function defaultDataProps(_ref4) {
   var fieldOptions = ((_field$options$length = (_field$options = field.options) == null ? void 0 : _field$options.length) != null ? _field$options$length : 0) === 0 ? null : field.options;
   var allowed = (_allowedOptions$value = allowedOptions == null ? void 0 : allowedOptions.value) != null ? _allowedOptions$value : [];
   return _extends({
-    children: (_definition$children2 = definition.children) != null ? _definition$children2 : [],
+    childDefinitions: (_definition$children2 = definition.children) != null ? _definition$children2 : [],
     control: control,
     field: field,
     id: "c" + control.uniqueId,
@@ -1363,7 +1447,8 @@ function renderControlLayout(_ref5) {
     displayControl = _ref5.displayControl,
     style = _ref5.style,
     labelText = _ref5.labelText,
-    allowedOptions = _ref5.allowedOptions;
+    allowedOptions = _ref5.allowedOptions,
+    useChildVisibility = _ref5.useChildVisibility;
   if (isDataControlDefinition(c)) {
     return renderData(c);
   }
@@ -1377,7 +1462,7 @@ function renderControlLayout(_ref5) {
       }));
     }
     return {
-      processLayout: renderer.renderGroup(groupProps(c, childRenderer, dataContext, c.styleClass, style)),
+      processLayout: renderer.renderGroup(groupProps(c, childRenderer, dataContext, c.styleClass, style, useChildVisibility)),
       label: {
         label: (_labelText$value = labelText == null ? void 0 : labelText.value) != null ? _labelText$value : c.title,
         className: cc(c.labelClass),
@@ -1431,6 +1516,7 @@ function renderControlLayout(_ref5) {
       renderChild: elemIndex != null ? function (k, d, p) {
         return childRenderer(k, d, p ? [elemIndex].concat(p) : [elemIndex]);
       } : childRenderer,
+      useChildVisibility: useChildVisibility,
       elementRenderer: elemIndex == null && schemaField.collection ? function (ei) {
         return renderLayoutParts(renderData(c, ei), renderer).children;
       } : undefined
@@ -1724,7 +1810,7 @@ function createDefaultGroupRenderer(options) {
   function render(props) {
     var renderChild = props.renderChild,
       renderOptions = props.renderOptions,
-      children = props.children;
+      childDefinitions = props.childDefinitions;
     var _ref7 = isGridRenderer(renderOptions) ? gridStyles(renderOptions) : isFlexRenderer(renderOptions) ? flexStyles(renderOptions) : {
         className: standardClassName
       },
@@ -1735,7 +1821,7 @@ function createDefaultGroupRenderer(options) {
         children: /*#__PURE__*/React__default["default"].createElement("div", {
           className: rendererClass(props.className, clsx__default["default"](className, gcn)),
           style: style
-        }, children == null ? void 0 : children.map(function (c, i) {
+        }, childDefinitions == null ? void 0 : childDefinitions.map(function (c, i) {
           return renderChild(i, i);
         }))
       });
@@ -1822,19 +1908,28 @@ function createDefaultDataRenderer(options) {
         });
       };
     }
+    var renderOptions = props.renderOptions;
     if (fieldType === exports.FieldType.Compound) {
+      var groupOptions = isDataGroupRenderer(renderOptions) ? renderOptions.groupOptions : undefined;
+      var style = props.style,
+        className = props.className,
+        childDefinitions = props.childDefinitions,
+        renderChild = props.renderChild,
+        dataContext = props.dataContext,
+        useChildVisibility = props.useChildVisibility;
       return renderers.renderGroup({
-        style: props.style,
-        className: props.className,
-        children: props.children,
-        renderOptions: {
+        style: style,
+        className: className,
+        childDefinitions: childDefinitions,
+        renderOptions: groupOptions != null ? groupOptions : {
           type: "Standard",
           hideTitle: true
         },
-        renderChild: props.renderChild
+        renderChild: renderChild,
+        dataContext: dataContext,
+        useChildVisibility: useChildVisibility
       });
     }
-    var renderOptions = props.renderOptions;
     var renderType = renderOptions.type;
     if (fieldType == exports.FieldType.Any) return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, "No control for Any");
     if (isDisplayOnlyRenderer(renderOptions)) return function (p) {
@@ -2049,6 +2144,12 @@ function createDataRenderer(render, options) {
     render: render
   }, options);
 }
+function createGroupRenderer(render, options) {
+  return _extends({
+    type: "group",
+    render: render
+  }, options);
+}
 function createLabelRenderer(render, options) {
   return _extends({
     type: "label",
@@ -2277,12 +2378,14 @@ exports.DefaultLayout = DefaultLayout;
 exports.DefaultVisibility = DefaultVisibility;
 exports.SelectDataRenderer = SelectDataRenderer;
 exports.WrapAdornmentPriority = WrapAdornmentPriority;
-exports.addCustomDataRenderOptions = addCustomDataRenderOptions;
+exports.addFieldOption = addFieldOption;
 exports.addMissingControls = addMissingControls;
 exports.appendMarkup = appendMarkup;
 exports.appendMarkupAt = appendMarkupAt;
 exports.applyDefaultForField = applyDefaultForField;
 exports.applyDefaultValues = applyDefaultValues;
+exports.applyExtensionToSchema = applyExtensionToSchema;
+exports.applyExtensionsToSchema = applyExtensionsToSchema;
 exports.boolField = boolField;
 exports.buildSchema = buildSchema;
 exports.cleanDataForSchema = cleanDataForSchema;
@@ -2303,6 +2406,7 @@ exports.createDefaultLabelRenderer = createDefaultLabelRenderer;
 exports.createDefaultRenderers = createDefaultRenderers;
 exports.createDefaultVisibilityRenderer = createDefaultVisibilityRenderer;
 exports.createFormRenderer = createFormRenderer;
+exports.createGroupRenderer = createGroupRenderer;
 exports.createInputConversion = createInputConversion;
 exports.createLabelRenderer = createLabelRenderer;
 exports.createLayoutRenderer = createLayoutRenderer;
@@ -2351,6 +2455,7 @@ exports.isCompoundField = isCompoundField;
 exports.isControlReadonly = isControlReadonly;
 exports.isDataControl = isDataControl;
 exports.isDataControlDefinition = isDataControlDefinition;
+exports.isDataGroupRenderer = isDataGroupRenderer;
 exports.isDisplayControlsDefinition = isDisplayControlsDefinition;
 exports.isDisplayOnlyRenderer = isDisplayOnlyRenderer;
 exports.isFlexRenderer = isFlexRenderer;
@@ -2366,17 +2471,22 @@ exports.lookupChildControl = lookupChildControl;
 exports.lookupSchemaField = lookupSchemaField;
 exports.makeCompoundField = makeCompoundField;
 exports.makeEvalExpressionHook = makeEvalExpressionHook;
+exports.makeHook = makeHook;
 exports.makeScalarField = makeScalarField;
 exports.matchesType = matchesType;
 exports.mergeField = mergeField;
+exports.mergeFields = mergeFields;
 exports.renderControlLayout = renderControlLayout;
 exports.renderLayoutParts = renderLayoutParts;
 exports.rendererClass = rendererClass;
+exports.resolveSchemas = resolveSchemas;
 exports.stringField = stringField;
 exports.stringOptionsField = stringOptionsField;
 exports.textDisplayControl = textDisplayControl;
+exports.toDepString = toDepString;
 exports.useControlDefinitionForSchema = useControlDefinitionForSchema;
 exports.useControlRenderer = useControlRenderer;
+exports.useDynamicHooks = useDynamicHooks;
 exports.useEvalAllowedOptionsHook = useEvalAllowedOptionsHook;
 exports.useEvalDefaultValueHook = useEvalDefaultValueHook;
 exports.useEvalDisabledHook = useEvalDisabledHook;