@react-typed-forms/schemas 5.0.3 → 7.0.0

package/lib/index.js

@@ -1,13 +1,13 @@
 var React = require('react');
+var clsx = require('clsx');
 var core = require('@react-typed-forms/core');
 var jsonata = require('jsonata');
-var clsx = require('clsx');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var jsonata__default = /*#__PURE__*/_interopDefaultLegacy(jsonata);
 var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);
+var jsonata__default = /*#__PURE__*/_interopDefaultLegacy(jsonata);
 
 exports.FieldType = void 0;
 (function (FieldType) {
@@ -36,11 +36,15 @@ exports.DynamicPropertyType = void 0;
   DynamicPropertyType["DefaultValue"] = "DefaultValue";
   DynamicPropertyType["Readonly"] = "Readonly";
   DynamicPropertyType["Disabled"] = "Disabled";
+  DynamicPropertyType["Display"] = "Display";
+  DynamicPropertyType["Style"] = "Style";
+  DynamicPropertyType["LayoutStyle"] = "LayoutStyle";
 })(exports.DynamicPropertyType || (exports.DynamicPropertyType = {}));
 exports.ExpressionType = void 0;
 (function (ExpressionType) {
   ExpressionType["Jsonata"] = "Jsonata";
-  ExpressionType["FieldValue"] = "FieldValue";
+  ExpressionType["Data"] = "Data";
+  ExpressionType["DataMatch"] = "FieldValue";
   ExpressionType["UserMatch"] = "UserMatch";
 })(exports.ExpressionType || (exports.ExpressionType = {}));
 exports.AdornmentPlacement = void 0;
@@ -55,6 +59,7 @@ exports.ControlAdornmentType = void 0;
   ControlAdornmentType["Tooltip"] = "Tooltip";
   ControlAdornmentType["Accordion"] = "Accordion";
   ControlAdornmentType["HelpText"] = "HelpText";
+  ControlAdornmentType["Icon"] = "Icon";
 })(exports.ControlAdornmentType || (exports.ControlAdornmentType = {}));
 exports.DataRenderType = void 0;
 (function (DataRenderType) {
@@ -69,6 +74,7 @@ exports.DataRenderType = void 0;
   DataRenderType["DateTime"] = "DateTime";
   DataRenderType["Checkbox"] = "Checkbox";
   DataRenderType["Dropdown"] = "Dropdown";
+  DataRenderType["DisplayOnly"] = "DisplayOnly";
 })(exports.DataRenderType || (exports.DataRenderType = {}));
 exports.SyncTextType = void 0;
 (function (SyncTextType) {
@@ -80,12 +86,14 @@ exports.GroupRenderType = void 0;
 (function (GroupRenderType) {
   GroupRenderType["Standard"] = "Standard";
   GroupRenderType["Grid"] = "Grid";
+  GroupRenderType["Flex"] = "Flex";
   GroupRenderType["GroupElement"] = "GroupElement";
 })(exports.GroupRenderType || (exports.GroupRenderType = {}));
 exports.DisplayDataType = void 0;
 (function (DisplayDataType) {
   DisplayDataType["Text"] = "Text";
   DisplayDataType["Html"] = "Html";
+  DisplayDataType["Icon"] = "Icon";
 })(exports.DisplayDataType || (exports.DisplayDataType = {}));
 exports.ValidatorType = void 0;
 (function (ValidatorType) {
@@ -126,6 +134,12 @@ function visitControlDefinition(x, visitor, defaultValue) {
 function isGridRenderer(options) {
   return options.type === exports.GroupRenderType.Grid;
 }
+function isFlexRenderer(options) {
+  return options.type === exports.GroupRenderType.Flex;
+}
+function isDisplayOnlyRenderer(options) {
+  return options.type === exports.DataRenderType.DisplayOnly;
+}
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -342,13 +356,10 @@ function hasOptions(o) {
 function defaultControlForField(sf) {
   if (isCompoundField(sf)) {
     return {
-      type: exports.ControlDefinitionType.Group,
+      type: exports.ControlDefinitionType.Data,
       title: sf.displayName,
-      compoundField: sf.field,
-      groupOptions: {
-        type: exports.GroupRenderType.Grid,
-        hideTitle: false
-      },
+      field: sf.field,
+      required: sf.required,
       children: sf.children.map(defaultControlForField)
     };
   } else if (isScalarField(sf)) {
@@ -418,6 +429,9 @@ function useUpdatedRef(a) {
 function isControlReadonly(c) {
   return isDataControl(c) && !!c.readonly;
 }
+function getDisplayOnlyOptions(d) {
+  return isDataControlDefinition(d) && d.renderOptions && isDisplayOnlyRenderer(d.renderOptions) ? d.renderOptions : undefined;
+}
 function getTypeField(context) {
   var _context$groupControl;
   var typeSchemaField = context.fields.find(function (x) {
@@ -466,7 +480,8 @@ function visitControlData(definition, ctx, cb) {
         if (isCompoundField(fieldData)) {
           var cfResult = visitControlDataArray(children, {
             fields: fieldData.children,
-            groupControl: c
+            groupControl: c,
+            schemaInterface: ctx.schemaInterface
           }, cb);
           if (cfResult !== undefined) return cfResult;
         }
@@ -515,6 +530,15 @@ 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"](c.styleClass, c.layoutClass);
+  if (childClasses && !tc) return childClasses;
+  if (!tc) return [];
+  if (childClasses) return [tc].concat(childClasses);
+  return [tc];
+}
 
 function dataControl(field, title, options) {
   return _extends({
@@ -567,7 +591,7 @@ function dynamicDisabled(expr) {
 }
 function fieldEqExpr(field, value) {
   return {
-    type: exports.ExpressionType.FieldValue,
+    type: exports.ExpressionType.DataMatch,
     field: field,
     value: value
   };
@@ -634,15 +658,23 @@ function useCalculatedControl(calculate) {
   });
   return c;
 }
+function cc(n) {
+  return n ? n : undefined;
+}
 
 function useEvalVisibilityHook(useEvalExpressionHook, definition, schemaField) {
   var dynamicVisibility = useEvalDynamicHook(definition, exports.DynamicPropertyType.Visible, useEvalExpressionHook);
-  var r = useUpdatedRef(schemaField);
+  var r = useUpdatedRef({
+    schemaField: schemaField,
+    definition: definition
+  });
   return React.useCallback(function (ctx) {
     var _dynamicVisibility;
-    var schemaField = r.current;
+    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);
+      return matchesType(ctx, schemaField == null ? void 0 : schemaField.onlyForTypes) && (!schemaField || !hideDisplayOnly(ctx, schemaField, definition, ctx.schemaInterface));
     });
   }, [dynamicVisibility, r]);
 }
@@ -656,6 +688,13 @@ function useEvalReadonlyHook(useEvalExpressionHook, definition) {
     });
   }, [dynamicReadonly, r]);
 }
+function useEvalStyleHook(useEvalExpressionHook, property, definition) {
+  var dynamicStyle = useEvalDynamicHook(definition, property, useEvalExpressionHook);
+  return React.useCallback(function (ctx) {
+    if (dynamicStyle) return dynamicStyle(ctx);
+    return core.useControl(undefined);
+  }, [dynamicStyle]);
+}
 function useEvalDisabledHook(useEvalExpressionHook, definition) {
   var dynamicDisabled = useEvalDynamicHook(definition, exports.DynamicPropertyType.Disabled, useEvalExpressionHook);
   return React.useCallback(function (ctx) {
@@ -663,6 +702,12 @@ function useEvalDisabledHook(useEvalExpressionHook, definition) {
     return core.useControl(false);
   }, [dynamicDisabled]);
 }
+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]);
+}
 function useEvalDefaultValueHook(useEvalExpressionHook, definition, schemaField) {
   var dynamicValue = useEvalDynamicHook(definition, exports.DynamicPropertyType.DefaultValue, useEvalExpressionHook);
   var r = useUpdatedRef({
@@ -671,9 +716,9 @@ function useEvalDefaultValueHook(useEvalExpressionHook, definition, schemaField)
   });
   return React.useCallback(function (ctx) {
     var _dynamicValue;
-    var _r$current = r.current,
-      definition = _r$current.definition,
-      schemaField = _r$current.schemaField;
+    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);
     function calcDefault() {
       var _ref = isDataControlDefinition(definition) ? [definition.required, definition.defaultValue] : [false, undefined],
@@ -683,7 +728,14 @@ function useEvalDefaultValueHook(useEvalExpressionHook, definition, schemaField)
     }
   }, [dynamicValue, r]);
 }
-function useFieldValueExpression(fvExpr, fields, data) {
+function useDataExpression(fvExpr, fields, data) {
+  var refField = findField(fields, fvExpr.field);
+  var otherField = refField ? data.fields[refField.field] : undefined;
+  return useCalculatedControl(function () {
+    return otherField == null ? void 0 : otherField.value;
+  });
+}
+function useDataMatchExpression(fvExpr, fields, data) {
   var refField = findField(fields, fvExpr.field);
   var otherField = refField ? data.fields[refField.field] : undefined;
   return core.useComputed(function () {
@@ -695,8 +747,10 @@ function defaultEvalHooks(expr, context) {
   switch (expr.type) {
     case exports.ExpressionType.Jsonata:
       return useJsonataExpression(expr.expression, context.groupControl);
-    case exports.ExpressionType.FieldValue:
-      return useFieldValueExpression(expr, context.fields, context.groupControl);
+    case exports.ExpressionType.Data:
+      return useDataExpression(expr, context.fields, context.groupControl);
+    case exports.ExpressionType.DataMatch:
+      return useDataMatchExpression(expr, context.fields, context.groupControl);
     default:
       return core.useControl(undefined);
   }
@@ -724,9 +778,18 @@ function matchesType(context, types) {
   var typeField = getTypeField(context);
   return typeField && types.includes(typeField.value);
 }
+function hideDisplayOnly(context, field, definition, schemaInterface) {
+  var displayOptions = getDisplayOnlyOptions(definition);
+  return displayOptions && !displayOptions.emptyText && schemaInterface.isEmptyValue(field, context.groupControl.fields[field.field].value);
+}
 function useJsonataExpression(jExpr, data) {
   var compiledExpr = React.useMemo(function () {
-    return jsonata__default["default"](jExpr);
+    try {
+      return jsonata__default["default"](jExpr);
+    } catch (e) {
+      console.error(e);
+      return jsonata__default["default"]("");
+    }
   }, [jExpr]);
   var control = core.useControl();
   core.useControlEffect(function () {
@@ -802,6 +865,31 @@ function useDateValidator(control, dv, i) {
   }, "date" + i);
 }
 
+var defaultSchemaInterface = {
+  isEmptyValue: defaultIsEmpty,
+  textValue: defaultTextValue
+};
+function defaultIsEmpty(f, value) {
+  if (f.collection) return Array.isArray(value) ? value.length === 0 : value == null;
+  switch (f.type) {
+    case exports.FieldType.String:
+      return !value;
+    default:
+      return value == null;
+  }
+}
+function defaultTextValue(f, value) {
+  switch (f.type) {
+    case exports.FieldType.DateTime:
+      return new Date(value).toLocaleDateString();
+    case exports.FieldType.Date:
+      return new Date(value).toLocaleDateString();
+    default:
+      return value != null ? value.toString() : undefined;
+  }
+}
+
+var _excluded$1 = ["definition", "field", "control", "options", "elementRenderer", "style"];
 var AppendAdornmentPriority = 0;
 var WrapAdornmentPriority = 1000;
 exports.LabelType = void 0;
@@ -810,17 +898,21 @@ exports.LabelType = void 0;
   LabelType[LabelType["Group"] = 1] = "Group";
 })(exports.LabelType || (exports.LabelType = {}));
 function useControlRenderer(definition, fields, renderer, options) {
-  var _options$useDataHook, _options$useEvalExpre;
+  var _options$useDataHook, _options$schemaInterf, _options$useEvalExpre;
   if (options === void 0) {
     options = {};
   }
   var dataProps = (_options$useDataHook = options.useDataHook == null ? void 0 : options.useDataHook(definition)) != null ? _options$useDataHook : defaultDataProps;
+  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 useCustomStyle = useEvalStyleHook(useExpr, exports.DynamicPropertyType.Style, definition);
+  var useLayoutStyle = useEvalStyleHook(useExpr, exports.DynamicPropertyType.LayoutStyle, definition);
+  var useDynamicDisplay = useEvalDisplayHook(useExpr, definition);
   var useValidation = useValidationHook(definition);
   var r = useUpdatedRef({
     options: options,
@@ -838,13 +930,17 @@ function useControlRenderer(definition, fields, renderer, options) {
         _options = _r$current.options,
         _fields = _r$current.fields,
         _schemaField = _r$current.schemaField;
-      var groupContext = {
+      var dataContext = {
         groupControl: parentControl,
-        fields: _fields
+        fields: _fields,
+        schemaInterface: schemaInterface
       };
-      var readonlyControl = useIsReadonly(groupContext);
-      var disabledControl = useIsDisabled(groupContext);
-      var visibleControl = useIsVisible(groupContext);
+      var readonlyControl = useIsReadonly(dataContext);
+      var disabledControl = useIsDisabled(dataContext);
+      var visibleControl = useIsVisible(dataContext);
+      var displayControl = useDynamicDisplay(dataContext);
+      var customStyle = useCustomStyle(dataContext).value;
+      var layoutStyle = useLayoutStyle(dataContext).value;
       var visible = visibleControl.current.value;
       var visibility = core.useControl(function () {
         return visible != null ? {
@@ -862,23 +958,24 @@ function useControlRenderer(definition, fields, renderer, options) {
           };
         });
       });
-      var defaultValueControl = useDefaultValue(groupContext);
-      var _getControlData = getControlData(_schemaField, groupContext),
+      var defaultValueControl = useDefaultValue(dataContext);
+      var _getControlData = getControlData(_schemaField, dataContext),
         control = _getControlData[0],
         childContext = _getControlData[1];
       core.useControlEffect(function () {
-        return [visibility.value, defaultValueControl.value, control, parentControl.isNull];
+        return [visibility.value, defaultValueControl.value, control, parentControl.isNull, isDataControlDefinition(definition) && definition.dontClearHidden];
       }, function (_ref2) {
         var vc = _ref2[0],
           dv = _ref2[1],
           cd = _ref2[2],
-          pn = _ref2[3];
+          pn = _ref2[3],
+          dontClear = _ref2[4];
         if (pn) {
           parentControl.value = {};
         }
         if (vc && cd && vc.visible === vc.showing) {
           if (!vc.visible) {
-            if (_options.clearHidden) cd.value = undefined;
+            if (_options.clearHidden && !dontClear) cd.value = undefined;
           } else if (cd.value == null) {
             cd.value = dv;
           }
@@ -892,7 +989,7 @@ function useControlRenderer(definition, fields, renderer, options) {
           disabled: _options.disabled || disabledControl.value
         };
       }).value;
-      useValidation(control, !!myOptions.hidden, groupContext);
+      useValidation(control, !!myOptions.hidden, dataContext);
       var childRenderers = (_c$children$map = (_c$children = c.children) == null ? void 0 : _c$children.map(function (cd) {
         return useControlRenderer(cd, childContext.fields, renderer, _extends({}, _options, myOptions));
       })) != null ? _c$children$map : [];
@@ -905,21 +1002,36 @@ function useControlRenderer(definition, fields, renderer, options) {
           adornment: x
         });
       })) != null ? _definition$adornment : [];
-      var labelAndChildren = renderControlLayout(c, renderer, childRenderers.length, function (k, i, props) {
-        var RenderChild = childRenderers[i];
-        return /*#__PURE__*/React__default["default"].createElement(RenderChild, _extends({
-          key: k
-        }, props));
-      }, dataProps, myOptions, groupContext, control, _schemaField);
-      return renderer.renderVisibility(visibility, function () {
-        return renderer.renderLayout(_extends({}, labelAndChildren, {
-          adornments: adornments
-        }));
+      var labelAndChildren = renderControlLayout({
+        definition: c,
+        renderer: renderer,
+        childCount: childRenderers.length,
+        renderChild: function renderChild(k, i, props) {
+          var RenderChild = childRenderers[i];
+          return /*#__PURE__*/React__default["default"].createElement(RenderChild, _extends({
+            key: k
+          }, props));
+        },
+        createDataProps: dataProps,
+        formOptions: myOptions,
+        dataContext: dataContext,
+        control: displayControl != null ? displayControl : control,
+        schemaField: _schemaField,
+        displayControl: displayControl,
+        style: customStyle
       });
+      var renderedControl = renderer.renderLayout(_extends({}, labelAndChildren, {
+        adornments: adornments,
+        className: c.layoutClass,
+        style: layoutStyle
+      }));
+      return renderer.renderVisibility(_extends({
+        visibility: visibility
+      }, renderedControl));
     } finally {
       stopTracking();
     }
-  }, [r, dataProps, useIsVisible, useDefaultValue, useIsReadonly, useIsDisabled, useValidation, renderer]);
+  }, [r, dataProps, useIsVisible, useDefaultValue, useIsReadonly, useIsDisabled, useCustomStyle, useLayoutStyle, useDynamicDisplay, useValidation, renderer, schemaInterface]);
   Component.displayName = "RenderControl";
   return Component;
 }
@@ -932,15 +1044,65 @@ function getControlData(schemaField, parentContext) {
   var childControl = schemaField ? (_parentContext$groupC = (_parentContext$groupC2 = parentContext.groupControl.fields) == null ? void 0 : _parentContext$groupC2[schemaField.field]) != null ? _parentContext$groupC : core.newControl({}) : undefined;
   return [childControl, schemaField && isCompoundField(schemaField) ? {
     groupControl: childControl,
-    fields: schemaField.children
+    fields: schemaField.children,
+    schemaInterface: parentContext.schemaInterface
   } : parentContext];
 }
-function renderArray(renderer, noun, field, required, arrayControl, _renderChild) {
-  var _arrayControl$element;
+function groupProps(renderOptions, childCount, _renderChild, control, className, style) {
+  if (renderOptions === void 0) {
+    renderOptions = {
+      type: "Standard"
+    };
+  }
+  return {
+    childCount: childCount,
+    renderChild: function renderChild(i) {
+      return _renderChild(i, i, {
+        control: control
+      });
+    },
+    renderOptions: renderOptions,
+    className: cc(className),
+    style: style
+  };
+}
+function defaultDataProps(_ref3) {
+  var _field$options$length, _field$options, _definition$renderOpt;
+  var definition = _ref3.definition,
+    field = _ref3.field,
+    control = _ref3.control,
+    options = _ref3.options,
+    elementRenderer = _ref3.elementRenderer,
+    style = _ref3.style,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded$1);
+  var className = cc(definition.styleClass);
+  var required = !!definition.required;
+  return _extends({
+    control: control,
+    field: field,
+    id: "c" + control.uniqueId,
+    options: ((_field$options$length = (_field$options = field.options) == null ? void 0 : _field$options.length) != null ? _field$options$length : 0) === 0 ? null : field.options,
+    readonly: !!options.readonly,
+    renderOptions: (_definition$renderOpt = definition.renderOptions) != null ? _definition$renderOpt : {
+      type: "Standard"
+    },
+    required: required,
+    hidden: !!options.hidden,
+    className: className,
+    style: style
+  }, props, {
+    toArrayProps: elementRenderer ? function () {
+      return defaultArrayProps(control, field, required, style, className, elementRenderer);
+    } : undefined
+  });
+}
+function defaultArrayProps(arrayControl, field, required, style, className, _renderElement) {
+  var _field$displayName, _arrayControl$element;
+  var noun = (_field$displayName = field.displayName) != null ? _field$displayName : field.field;
   var elems = (_arrayControl$element = arrayControl.elements) != null ? _arrayControl$element : [];
-  return renderer.renderArray({
+  return {
     arrayControl: arrayControl,
-    childCount: elems.length,
+    elementCount: elems.length,
     required: required,
     addAction: {
       actionId: "add",
@@ -949,7 +1111,7 @@ function renderArray(renderer, noun, field, required, arrayControl, _renderChild
         return core.addElement(arrayControl, elementValueForField(field));
       }
     },
-    childKey: function childKey(i) {
+    elementKey: function elementKey(i) {
       return elems[i].uniqueId;
     },
     removeAction: function removeAction(i) {
@@ -961,43 +1123,25 @@ function renderArray(renderer, noun, field, required, arrayControl, _renderChild
         }
       };
     },
-    renderChild: function renderChild(i) {
-      return _renderChild(i, elems[i]);
-    }
-  });
-}
-function groupProps(renderOptions, childCount, _renderChild2, control) {
-  if (renderOptions === void 0) {
-    renderOptions = {
-      type: "Standard"
-    };
-  }
-  return {
-    childCount: childCount,
-    renderChild: function renderChild(i) {
-      return _renderChild2(i, i, {
-        control: control
-      });
+    renderElement: function renderElement(i) {
+      return _renderElement(elems[i]);
     },
-    renderOptions: renderOptions
+    className: cc(className),
+    style: style
   };
 }
-var defaultDataProps = function defaultDataProps(definition, field, groupContext, control, options) {
-  var _field$options$length, _field$options, _definition$renderOpt;
-  return {
-    control: control,
-    field: field,
-    id: "c" + control.uniqueId,
-    options: ((_field$options$length = (_field$options = field.options) == null ? void 0 : _field$options.length) != null ? _field$options$length : 0) === 0 ? null : field.options,
-    readonly: !!options.readonly,
-    renderOptions: (_definition$renderOpt = definition.renderOptions) != null ? _definition$renderOpt : {
-      type: "Standard"
-    },
-    required: !!definition.required,
-    hidden: !!options.hidden
-  };
-};
-function renderControlLayout(c, renderer, childCount, childRenderer, dataProps, dataOptions, groupContext, childControl, schemaField) {
+function renderControlLayout(_ref4) {
+  var c = _ref4.definition,
+    renderer = _ref4.renderer,
+    childCount = _ref4.childCount,
+    childRenderer = _ref4.renderChild,
+    childControl = _ref4.control,
+    schemaField = _ref4.schemaField,
+    dataContext = _ref4.dataContext,
+    dataOptions = _ref4.formOptions,
+    dataProps = _ref4.createDataProps,
+    displayControl = _ref4.displayControl,
+    style = _ref4.style;
   if (isDataControlDefinition(c)) {
     return renderData(c);
   }
@@ -1011,7 +1155,7 @@ function renderControlLayout(c, renderer, childCount, childRenderer, dataProps,
       }));
     }
     return {
-      children: renderer.renderGroup(groupProps(c.groupOptions, childCount, childRenderer, groupContext.groupControl)),
+      processLayout: renderer.renderGroup(groupProps(c.groupOptions, childCount, childRenderer, dataContext.groupControl, c.styleClass, style)),
       label: {
         label: c.title,
         type: exports.LabelType.Group,
@@ -1025,7 +1169,9 @@ function renderControlLayout(c, renderer, childCount, childRenderer, dataProps,
       children: renderer.renderAction({
         actionText: (_c$title = c.title) != null ? _c$title : c.actionId,
         actionId: c.actionId,
-        onClick: function onClick() {}
+        onClick: function onClick() {},
+        className: cc(c.styleClass),
+        style: style
       })
     };
   }
@@ -1033,42 +1179,34 @@ function renderControlLayout(c, renderer, childCount, childRenderer, dataProps,
     var _c$displayData;
     return {
       children: renderer.renderDisplay({
-        data: (_c$displayData = c.displayData) != null ? _c$displayData : {}
+        data: (_c$displayData = c.displayData) != null ? _c$displayData : {},
+        className: cc(c.styleClass),
+        style: style,
+        display: displayControl
       })
     };
   }
   return {};
-  function renderData(c) {
+  function renderData(c, elementControl) {
     if (!schemaField) return {
       children: "No schema field for: " + c.field
     };
-    if (isCompoundField(schemaField)) {
-      var label = {
-        hide: c.hideTitle,
-        label: controlTitle(c.title, schemaField),
-        type: schemaField.collection ? exports.LabelType.Control : exports.LabelType.Group
-      };
-      if (schemaField.collection) {
-        return {
-          label: label,
-          children: renderArray(renderer, controlTitle(c.title, schemaField), schemaField, !!c.required, childControl, compoundRenderer),
-          errorControl: childControl
-        };
-      }
-      return {
-        children: renderer.renderGroup(groupProps({
-          type: "Standard"
-        }, childCount, childRenderer, childControl)),
-        label: label,
-        errorControl: childControl
-      };
-    }
-    var props = dataProps(c, schemaField, groupContext, childControl, dataOptions);
+    var props = dataProps({
+      definition: c,
+      field: schemaField,
+      dataContext: dataContext,
+      control: elementControl != null ? elementControl : childControl,
+      options: dataOptions,
+      style: style,
+      childCount: childCount,
+      renderChild: childRenderer,
+      elementRenderer: elementControl == null && schemaField.collection ? function (element) {
+        return renderLayoutParts(renderData(c, element), renderer).children;
+      } : undefined
+    });
     var labelText = !c.hideTitle ? controlTitle(c.title, schemaField) : undefined;
     return {
-      processLayout: renderer.renderData(props, schemaField.collection ? function () {
-        return renderArray(renderer, controlTitle(c.title, schemaField), schemaField, !!c.required, childControl, scalarRenderer(props));
-      } : undefined),
+      processLayout: renderer.renderData(props),
       label: {
         type: exports.LabelType.Control,
         label: labelText,
@@ -1079,31 +1217,6 @@ function renderControlLayout(c, renderer, childCount, childRenderer, dataProps,
       errorControl: childControl
     };
   }
-  function compoundRenderer(i, control) {
-    return /*#__PURE__*/React__default["default"].createElement(React.Fragment, {
-      key: control.uniqueId
-    }, renderer.renderGroup({
-      renderOptions: {
-        type: "Standard",
-        hideTitle: true
-      },
-      childCount: childCount,
-      renderChild: function renderChild(ci) {
-        return childRenderer(ci, ci, {
-          control: control
-        });
-      }
-    }));
-  }
-  function scalarRenderer(dataProps) {
-    return function (i, control) {
-      return /*#__PURE__*/React__default["default"].createElement(React.Fragment, {
-        key: control.uniqueId
-      }, renderer.renderData(_extends({}, dataProps, {
-        control: control
-      }), undefined)({}).children);
-    };
-  }
 }
 function appendMarkup(k, markup) {
   return function (layout) {
@@ -1134,28 +1247,36 @@ function wrapMarkupAt(pos, wrap) {
   return wrapMarkup(layoutKeyForPlacement(pos), wrap);
 }
 function renderLayoutParts(props, renderer) {
-  var _props$processLayout, _processed$adornments;
-  var processed = (_props$processLayout = props.processLayout == null ? void 0 : props.processLayout(props)) != null ? _props$processLayout : props;
+  var _props$processLayout;
+  var _ref5 = (_props$processLayout = props.processLayout == null ? void 0 : props.processLayout(props)) != null ? _props$processLayout : props,
+    className = _ref5.className,
+    children = _ref5.children,
+    style = _ref5.style,
+    errorControl = _ref5.errorControl,
+    label = _ref5.label,
+    adornments = _ref5.adornments;
   var layout = {
-    children: processed.children,
-    errorControl: processed.errorControl
+    children: children,
+    errorControl: errorControl,
+    style: style,
+    className: cc(className)
   };
-  ((_processed$adornments = processed.adornments) != null ? _processed$adornments : []).sort(function (a, b) {
+  (adornments != null ? adornments : []).sort(function (a, b) {
     return a.priority - b.priority;
   }).forEach(function (x) {
     return x.apply(layout);
   });
-  var l = processed.label;
-  layout.label = l && !l.hide ? renderer.renderLabel(l, layout.labelStart, layout.labelEnd) : undefined;
+  layout.label = label && !label.hide ? renderer.renderLabel(label, layout.labelStart, layout.labelEnd) : undefined;
   return layout;
 }
 function controlTitle(title, field) {
   return title ? title : fieldDisplayName(field);
 }
 
-var _excluded = ["control", "convert"],
-  _excluded2 = ["errorText", "value", "onChange"],
-  _excluded3 = ["state", "options", "className", "convert", "required", "emptyText", "requiredText"];
+var _excluded = ["data", "display", "className", "style"],
+  _excluded2 = ["control", "convert"],
+  _excluded3 = ["errorText", "value", "onChange"],
+  _excluded4 = ["state", "options", "className", "convert", "required", "emptyText", "requiredText"];
 function createFormRenderer(customRenderers, defaultRenderers) {
   var _customRenderers$find;
   if (customRenderers === void 0) {
@@ -1209,7 +1330,7 @@ function createFormRenderer(customRenderers, defaultRenderers) {
     })) != null ? _labelRenderers$find : defaultRenderers.label;
     return renderer.render(props, labelStart, labelEnd, formRenderers);
   }
-  function renderData(props, asArray) {
+  function renderData(props) {
     var _dataRegistrations$fi;
     var renderType = props.renderOptions.type,
       field = props.field;
@@ -1218,7 +1339,7 @@ function createFormRenderer(customRenderers, defaultRenderers) {
       var _x$collection, _field$collection, _x$options;
       return ((_x$collection = x.collection) != null ? _x$collection : false) === ((_field$collection = field.collection) != null ? _field$collection : false) && ((_x$options = x.options) != null ? _x$options : false) === options && isOneOf(x.schemaType, field.type) && isOneOf(x.renderType, renderType) && (!x.match || x.match(props));
     })) != null ? _dataRegistrations$fi : defaultRenderers.data;
-    var result = renderer.render(props, asArray, formRenderers);
+    var result = renderer.render(props, formRenderers);
     if (typeof result === "function") return result;
     return function (l) {
       return _extends({}, l, {
@@ -1232,7 +1353,13 @@ function createFormRenderer(customRenderers, defaultRenderers) {
     var renderer = (_groupRegistrations$f = groupRegistrations.find(function (x) {
       return isOneOf(x.renderType, renderType);
     })) != null ? _groupRegistrations$f : defaultRenderers.group;
-    return renderer.render(props, formRenderers);
+    var result = renderer.render(props, formRenderers);
+    if (typeof result === "function") return result;
+    return function (l) {
+      return _extends({}, l, {
+        children: result
+      });
+    };
   }
   function renderAction(props) {
     var _actionRenderers$find;
@@ -1297,29 +1424,29 @@ function createDefaultArrayRenderer(options) {
     removeActionClass = _ref2.removeActionClass,
     addActionClass = _ref2.addActionClass;
   function render(_ref3, _ref4) {
-    var childCount = _ref3.childCount,
-      renderChild = _ref3.renderChild,
+    var elementCount = _ref3.elementCount,
+      renderElement = _ref3.renderElement,
       addAction = _ref3.addAction,
       removeAction = _ref3.removeAction,
-      childKey = _ref3.childKey,
+      elementKey = _ref3.elementKey,
       required = _ref3.required;
     var renderAction = _ref4.renderAction;
-    var showRemove = !required || childCount > 1;
+    var showRemove = !required || elementCount > 1;
     return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
       className: clsx__default["default"](className, removeAction && removableClass)
     }, Array.from({
-      length: childCount
+      length: elementCount
     }, function (_, x) {
       return removeAction ? /*#__PURE__*/React__default["default"].createElement(React.Fragment, {
-        key: childKey(x)
+        key: elementKey(x)
       }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: clsx__default["default"](childClass, removableChildClass)
-      }, renderChild(x)), /*#__PURE__*/React__default["default"].createElement("div", {
+      }, renderElement(x)), /*#__PURE__*/React__default["default"].createElement("div", {
         className: removeActionClass
       }, showRemove && renderAction(removeAction(x)))) : /*#__PURE__*/React__default["default"].createElement("div", {
-        key: childKey(x),
+        key: elementKey(x),
         className: childClass
-      }, renderChild(x));
+      }, renderElement(x));
     })), addAction && /*#__PURE__*/React__default["default"].createElement("div", {
       className: addActionClass
     }, renderAction(addAction)));
@@ -1337,7 +1464,9 @@ function createDefaultGroupRenderer(options) {
     _ref5$defaultGridColu = _ref5.defaultGridColumns,
     defaultGridColumns = _ref5$defaultGridColu === void 0 ? 2 : _ref5$defaultGridColu,
     gridClassName = _ref5.gridClassName,
-    standardClassName = _ref5.standardClassName;
+    standardClassName = _ref5.standardClassName,
+    flexClassName = _ref5.flexClassName,
+    defaultFlexGap = _ref5.defaultFlexGap;
   function defaultGridStyles(_ref6) {
     var _ref6$columns = _ref6.columns,
       columns = _ref6$columns === void 0 ? defaultGridColumns : _ref6$columns;
@@ -1349,23 +1478,37 @@ function createDefaultGroupRenderer(options) {
       }
     };
   }
+  function flexStyles(options) {
+    return {
+      className: flexClassName,
+      style: {
+        display: "flex",
+        gap: options.gap ? options.gap : defaultFlexGap,
+        flexDirection: options.direction ? options.direction : undefined
+      }
+    };
+  }
   function render(props) {
     var childCount = props.childCount,
       renderChild = props.renderChild,
       renderOptions = props.renderOptions;
-    var _ref7 = isGridRenderer(renderOptions) ? gridStyles(renderOptions) : {
+    var _ref7 = isGridRenderer(renderOptions) ? gridStyles(renderOptions) : isFlexRenderer(renderOptions) ? flexStyles(renderOptions) : {
         className: standardClassName
       },
       style = _ref7.style,
       gcn = _ref7.className;
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: clsx__default["default"](className, gcn),
-      style: style
-    }, Array.from({
-      length: childCount
-    }, function (_, x) {
-      return renderChild(x);
-    }));
+    return function (cp) {
+      return _extends({}, cp, {
+        children: /*#__PURE__*/React__default["default"].createElement("div", {
+          className: clsx__default["default"](props.className, className, gcn),
+          style: style
+        }, Array.from({
+          length: childCount
+        }, function (_, x) {
+          return renderChild(x);
+        }))
+      });
+    };
   }
   return {
     type: "group",
@@ -1377,27 +1520,47 @@ function createDefaultDisplayRenderer(options) {
     options = {};
   }
   return {
-    render: function render(_ref8) {
-      var data = _ref8.data;
-      switch (data.type) {
-        case exports.DisplayDataType.Text:
-          return /*#__PURE__*/React__default["default"].createElement("div", {
-            className: options.textClassName
-          }, data.text);
-        case exports.DisplayDataType.Html:
-          return /*#__PURE__*/React__default["default"].createElement("div", {
-            className: options.htmlClassName,
-            dangerouslySetInnerHTML: {
-              __html: data.html
-            }
-          });
-        default:
-          return /*#__PURE__*/React__default["default"].createElement("h1", null, "Unknown display type: ", data.type);
-      }
+    render: function render(props) {
+      return /*#__PURE__*/React__default["default"].createElement(DefaultDisplay, _extends({}, options, props));
     },
     type: "display"
   };
 }
+function DefaultDisplay(_ref8) {
+  var _effect = core.useComponentTracking();
+  try {
+    var _display$value;
+    var data = _ref8.data,
+      display = _ref8.display,
+      className = _ref8.className,
+      style = _ref8.style,
+      options = _objectWithoutPropertiesLoose(_ref8, _excluded);
+    switch (data.type) {
+      case exports.DisplayDataType.Icon:
+        return /*#__PURE__*/React__default["default"].createElement("i", {
+          style: style,
+          className: clsx__default["default"](className, display ? display.value : data.iconClass)
+        });
+      case exports.DisplayDataType.Text:
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          style: style,
+          className: clsx__default["default"](className, options.textClassName)
+        }, display ? display.value : data.text);
+      case exports.DisplayDataType.Html:
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          style: style,
+          className: clsx__default["default"](className, options.htmlClassName),
+          dangerouslySetInnerHTML: {
+            __html: display ? (_display$value = display.value) != null ? _display$value : "" : data.html
+          }
+        });
+      default:
+        return /*#__PURE__*/React__default["default"].createElement("h1", null, "Unknown display type: ", data.type);
+    }
+  } finally {
+    _effect();
+  }
+}
 var DefaultBoolOptions = [{
   name: "Yes",
   value: true
@@ -1417,31 +1580,69 @@ function createDefaultDataRenderer(options) {
     }, options),
     inputClass = _optionRenderer$boole.inputClass,
     booleanOptions = _optionRenderer$boole.booleanOptions,
-    optionRenderer = _optionRenderer$boole.optionRenderer;
-  return createDataRenderer(function (props, asArray, renderers) {
-    if (asArray) {
-      return asArray();
-    }
-    var renderType = props.renderOptions.type;
+    optionRenderer = _optionRenderer$boole.optionRenderer,
+    displayOnlyClass = _optionRenderer$boole.displayOnlyClass;
+  return createDataRenderer(function (props, renderers) {
     var fieldType = props.field.type;
+    if (props.toArrayProps) {
+      return function (p) {
+        return _extends({}, p, {
+          children: renderers.renderArray(props.toArrayProps())
+        });
+      };
+    }
+    if (fieldType === exports.FieldType.Compound) {
+      return renderers.renderGroup({
+        style: props.style,
+        className: props.className,
+        renderOptions: {
+          type: "Standard",
+          hideTitle: true
+        },
+        renderChild: function renderChild(i) {
+          return props.renderChild(i, i, {
+            control: props.control
+          });
+        },
+        childCount: props.childCount
+      });
+    }
+    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) {
+      return _extends({}, p, {
+        className: displayOnlyClass,
+        children: /*#__PURE__*/React__default["default"].createElement(DefaultDisplayOnly, {
+          field: props.field,
+          schemaInterface: props.dataContext.schemaInterface,
+          control: props.control,
+          className: props.className,
+          style: props.style,
+          emptyText: renderOptions.emptyText
+        })
+      });
+    };
     var isBool = fieldType === exports.FieldType.Bool;
     if (booleanOptions != null && isBool && props.options == null) {
       return renderers.renderData(_extends({}, props, {
         options: booleanOptions
-      }), undefined);
+      }));
     }
     if (renderType === exports.DataRenderType.Standard && hasOptions(props)) {
-      return optionRenderer.render(props, undefined, renderers);
+      return optionRenderer.render(props, renderers);
     }
     switch (renderType) {
       case exports.DataRenderType.Dropdown:
-        return selectRenderer.render(props, undefined, renderers);
+        return selectRenderer.render(props, renderers);
     }
     return renderType === exports.DataRenderType.Checkbox ? /*#__PURE__*/React__default["default"].createElement(core.Fcheckbox, {
+      style: props.style,
+      className: props.className,
       control: props.control
     }) : /*#__PURE__*/React__default["default"].createElement(ControlInput, {
-      className: inputClass,
+      className: clsx__default["default"](props.className, inputClass),
+      style: props.style,
       id: props.id,
       readOnly: props.readonly,
       control: props.control,
@@ -1449,17 +1650,37 @@ function createDefaultDataRenderer(options) {
     });
   });
 }
-function ControlInput(_ref9) {
-  var _effect = core.useComponentTracking();
+function DefaultDisplayOnly(_ref9) {
+  var _effect2 = core.useComponentTracking();
   try {
+    var _ref10;
     var control = _ref9.control,
-      convert = _ref9.convert,
-      props = _objectWithoutPropertiesLoose(_ref9, _excluded);
+      className = _ref9.className,
+      emptyText = _ref9.emptyText,
+      schemaInterface = _ref9.schemaInterface,
+      field = _ref9.field,
+      style = _ref9.style;
+    var v = control.value;
+    var text = (_ref10 = schemaInterface.isEmptyValue(field, v) ? emptyText : schemaInterface.textValue(field, v)) != null ? _ref10 : "";
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      style: style,
+      className: className
+    }, text);
+  } finally {
+    _effect2();
+  }
+}
+function ControlInput(_ref11) {
+  var _effect3 = core.useComponentTracking();
+  try {
+    var control = _ref11.control,
+      convert = _ref11.convert,
+      props = _objectWithoutPropertiesLoose(_ref11, _excluded2);
     var _formControlProps = core.formControlProps(control),
       errorText = _formControlProps.errorText,
       value = _formControlProps.value,
       onChange = _formControlProps.onChange,
-      inputProps = _objectWithoutPropertiesLoose(_formControlProps, _excluded2);
+      inputProps = _objectWithoutPropertiesLoose(_formControlProps, _excluded3);
     return /*#__PURE__*/React__default["default"].createElement("input", _extends({}, inputProps, {
       type: convert[0],
       value: value == null ? "" : convert[2](value),
@@ -1468,16 +1689,23 @@ function ControlInput(_ref9) {
       }
     }, props));
   } finally {
-    _effect();
+    _effect3();
   }
 }
 function createDefaultAdornmentRenderer(options) {
   return {
     type: "adornment",
-    render: function render(_ref10) {
-      var adornment = _ref10.adornment;
+    render: function render(_ref12) {
+      var adornment = _ref12.adornment;
       return {
-        apply: function apply() {},
+        apply: function apply(rl) {
+          if (isIconAdornment(adornment)) {
+            var _adornment$placement;
+            return appendMarkupAt((_adornment$placement = adornment.placement) != null ? _adornment$placement : exports.AdornmentPlacement.ControlStart, /*#__PURE__*/React__default["default"].createElement("i", {
+              className: adornment.iconClass
+            }))(rl);
+          }
+        },
         priority: 0,
         adornment: adornment
       };
@@ -1505,9 +1733,19 @@ function createDefaultLayoutRenderer(options) {
     options = {};
   }
   return createLayoutRenderer(function (props, renderers) {
-    return /*#__PURE__*/React__default["default"].createElement(DefaultLayout, _extends({
-      layout: renderLayoutParts(props, renderers)
-    }, options));
+    var layout = renderLayoutParts(_extends({}, props, {
+      className: clsx__default["default"](props.className, options.className)
+    }), renderers);
+    return {
+      children: /*#__PURE__*/React__default["default"].createElement(DefaultLayout, _extends({
+        layout: layout
+      }, options)),
+      className: layout.className,
+      style: layout.style,
+      divRef: function divRef(e) {
+        return e && props.errorControl ? props.errorControl.meta.scrollElement = e : undefined;
+      }
+    };
   });
 }
 function createClassStyledRenderers() {
@@ -1563,6 +1801,9 @@ function isArrayRegistration(x) {
 function isOneOf(x, v) {
   return x == null ? true : Array.isArray(x) ? x.includes(v) : v === x;
 }
+function isIconAdornment(a) {
+  return a.type === exports.ControlAdornmentType.Icon;
+}
 function createLayoutRenderer(render, options) {
   return _extends({
     type: "layout",
@@ -1606,7 +1847,7 @@ function createSelectRenderer(options) {
   }
   return createDataRenderer(function (props, asArray) {
     return /*#__PURE__*/React__default["default"].createElement(SelectDataRenderer, {
-      className: options.className,
+      className: clsx__default["default"](props.className, options.className),
       state: props.control,
       id: props.id,
       options: props.options,
@@ -1619,19 +1860,19 @@ function createSelectRenderer(options) {
     options: true
   });
 }
-function SelectDataRenderer(_ref11) {
-  var _effect2 = core.useComponentTracking();
+function SelectDataRenderer(_ref13) {
+  var _effect4 = core.useComponentTracking();
   try {
-    var state = _ref11.state,
-      options = _ref11.options,
-      className = _ref11.className,
-      convert = _ref11.convert,
-      required = _ref11.required,
-      _ref11$emptyText = _ref11.emptyText,
-      emptyText = _ref11$emptyText === void 0 ? "N/A" : _ref11$emptyText,
-      _ref11$requiredText = _ref11.requiredText,
-      requiredText = _ref11$requiredText === void 0 ? "<please select>" : _ref11$requiredText,
-      props = _objectWithoutPropertiesLoose(_ref11, _excluded3);
+    var state = _ref13.state,
+      options = _ref13.options,
+      className = _ref13.className,
+      convert = _ref13.convert,
+      required = _ref13.required,
+      _ref13$emptyText = _ref13.emptyText,
+      emptyText = _ref13$emptyText === void 0 ? "N/A" : _ref13$emptyText,
+      _ref13$requiredText = _ref13.requiredText,
+      requiredText = _ref13$requiredText === void 0 ? "<please select>" : _ref13$requiredText,
+      props = _objectWithoutPropertiesLoose(_ref13, _excluded4);
     var value = state.value,
       disabled = state.disabled;
     var _useState = React.useState(!required || value == null),
@@ -1658,7 +1899,7 @@ function SelectDataRenderer(_ref11) {
       }, x.name);
     }));
   } finally {
-    _effect2();
+    _effect4();
   }
 }
 function createSelectConversion(ft) {
@@ -1718,18 +1959,18 @@ function createInputConversion(ft) {
   }
 }
 function createDefaultVisibilityRenderer() {
-  return createVisibilityRenderer(function (cv, ch) {
-    return /*#__PURE__*/React__default["default"].createElement(DefaultVisibility, {
-      visibility: cv,
-      children: ch
-    });
+  return createVisibilityRenderer(function (props) {
+    return /*#__PURE__*/React__default["default"].createElement(DefaultVisibility, props);
   });
 }
-function DefaultVisibility(_ref12) {
-  var _effect3 = core.useComponentTracking();
+function DefaultVisibility(_ref14) {
+  var _effect5 = core.useComponentTracking();
   try {
-    var visibility = _ref12.visibility,
-      children = _ref12.children;
+    var visibility = _ref14.visibility,
+      children = _ref14.children,
+      className = _ref14.className,
+      style = _ref14.style,
+      divRef = _ref14.divRef;
     var v = visibility.value;
     React.useEffect(function () {
       if (v) {
@@ -1741,35 +1982,33 @@ function DefaultVisibility(_ref12) {
         });
       }
     }, [v == null ? void 0 : v.visible]);
-    return v != null && v.visible ? children() : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null);
+    return v != null && v.visible ? /*#__PURE__*/React__default["default"].createElement("div", {
+      className: clsx__default["default"](className),
+      style: style,
+      ref: divRef
+    }, children) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null);
   } finally {
-    _effect3();
+    _effect5();
   }
 }
-function DefaultLayout(_ref13) {
-  var _effect4 = core.useComponentTracking();
+function DefaultLayout(_ref15) {
+  var _effect6 = core.useComponentTracking();
   try {
-    var className = _ref13.className,
-      errorClass = _ref13.errorClass,
-      _ref13$layout = _ref13.layout,
-      controlEnd = _ref13$layout.controlEnd,
-      controlStart = _ref13$layout.controlStart,
-      label = _ref13$layout.label,
-      children = _ref13$layout.children,
-      errorControl = _ref13$layout.errorControl;
+    var errorClass = _ref15.errorClass,
+      className = _ref15.className,
+      _ref15$layout = _ref15.layout,
+      controlEnd = _ref15$layout.controlEnd,
+      controlStart = _ref15$layout.controlStart,
+      label = _ref15$layout.label,
+      children = _ref15$layout.children,
+      errorControl = _ref15$layout.errorControl;
     var ec = errorControl;
     var errorText = ec && ec.touched ? ec.error : undefined;
-    var refCb = React.useCallback(function (e) {
-      if (ec) ec.meta.scrollElement = e;
-    }, [ec]);
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: className,
-      ref: refCb
-    }, label, controlStart, children, errorText && /*#__PURE__*/React__default["default"].createElement("div", {
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, label, controlStart, children, errorText && /*#__PURE__*/React__default["default"].createElement("div", {
       className: errorClass
     }, errorText), controlEnd);
   } finally {
-    _effect4();
+    _effect6();
   }
 }
 
@@ -1786,8 +2025,9 @@ var defaultTailwindTheme = {
     addActionClass: "my-2"
   },
   group: {
-    standardClassName: "space-y-4",
-    gridClassName: "gap-x-2 gap-y-4"
+    standardClassName: "flex flex-col gap-4",
+    gridClassName: "gap-x-2 gap-y-4",
+    flexClassName: "gap-2"
   },
   action: {
     className: "bg-primary rounded-lg p-3 text-white"
@@ -1795,12 +2035,17 @@ var defaultTailwindTheme = {
   layout: {
     className: "flex flex-col",
     errorClass: "text-sm text-danger-500"
+  },
+  data: {
+    displayOnlyClass: "flex flex-row items-center gap-2"
   }
 };
 
 exports.AppendAdornmentPriority = AppendAdornmentPriority;
 exports.ControlInput = ControlInput;
 exports.DefaultBoolOptions = DefaultBoolOptions;
+exports.DefaultDisplay = DefaultDisplay;
+exports.DefaultDisplayOnly = DefaultDisplayOnly;
 exports.DefaultLayout = DefaultLayout;
 exports.DefaultVisibility = DefaultVisibility;
 exports.SelectDataRenderer = SelectDataRenderer;
@@ -1837,12 +2082,16 @@ exports.createSelectConversion = createSelectConversion;
 exports.createSelectRenderer = createSelectRenderer;
 exports.createVisibilityRenderer = createVisibilityRenderer;
 exports.dataControl = dataControl;
+exports.defaultArrayProps = defaultArrayProps;
 exports.defaultCompoundField = defaultCompoundField;
 exports.defaultControlForField = defaultControlForField;
 exports.defaultDataProps = defaultDataProps;
 exports.defaultEvalHooks = defaultEvalHooks;
+exports.defaultIsEmpty = defaultIsEmpty;
 exports.defaultScalarField = defaultScalarField;
+exports.defaultSchemaInterface = defaultSchemaInterface;
 exports.defaultTailwindTheme = defaultTailwindTheme;
+exports.defaultTextValue = defaultTextValue;
 exports.defaultUseEvalExpressionHook = defaultUseEvalExpressionHook;
 exports.defaultValueForField = defaultValueForField;
 exports.defaultValueForFields = defaultValueForFields;
@@ -1858,10 +2107,13 @@ exports.fieldHasTag = fieldHasTag;
 exports.findCompoundField = findCompoundField;
 exports.findField = findField;
 exports.findScalarField = findScalarField;
+exports.getAllReferencedClasses = getAllReferencedClasses;
 exports.getControlData = getControlData;
+exports.getDisplayOnlyOptions = getDisplayOnlyOptions;
 exports.getTypeField = getTypeField;
 exports.groupedControl = groupedControl;
 exports.hasOptions = hasOptions;
+exports.hideDisplayOnly = hideDisplayOnly;
 exports.htmlDisplayControl = htmlDisplayControl;
 exports.intField = intField;
 exports.isActionControlsDefinition = isActionControlsDefinition;
@@ -1870,9 +2122,12 @@ exports.isControlReadonly = isControlReadonly;
 exports.isDataControl = isDataControl;
 exports.isDataControlDefinition = isDataControlDefinition;
 exports.isDisplayControlsDefinition = isDisplayControlsDefinition;
+exports.isDisplayOnlyRenderer = isDisplayOnlyRenderer;
+exports.isFlexRenderer = isFlexRenderer;
 exports.isGridRenderer = isGridRenderer;
 exports.isGroupControl = isGroupControl;
 exports.isGroupControlsDefinition = isGroupControlsDefinition;
+exports.isIconAdornment = isIconAdornment;
 exports.isScalarField = isScalarField;
 exports.jsonataExpr = jsonataExpr;
 exports.layoutKeyForPlacement = layoutKeyForPlacement;
@@ -1890,8 +2145,10 @@ exports.useControlDefinitionForSchema = useControlDefinitionForSchema;
 exports.useControlRenderer = useControlRenderer;
 exports.useEvalDefaultValueHook = useEvalDefaultValueHook;
 exports.useEvalDisabledHook = useEvalDisabledHook;
+exports.useEvalDisplayHook = useEvalDisplayHook;
 exports.useEvalDynamicHook = useEvalDynamicHook;
 exports.useEvalReadonlyHook = useEvalReadonlyHook;
+exports.useEvalStyleHook = useEvalStyleHook;
 exports.useEvalVisibilityHook = useEvalVisibilityHook;
 exports.useJsonataExpression = useJsonataExpression;
 exports.useUpdatedRef = useUpdatedRef;