@react-typed-forms/schemas-html 3.1.0 → 4.0.1

package/lib/index.js

@@ -1,82 +1,68 @@
 import clsx from 'clsx';
-import { DisplayDataType, rendererClass, coerceToString, getOverrideClass, FieldType, createDataRenderer, fieldOptionAdornment, DataRenderType, createLayoutRenderer, renderLayoutParts, createGroupRenderer, GroupRenderType, isTabsRenderer, isSelectChildRenderer, isGridRenderer, isFlexRenderer, createVisibilityRenderer, getJsonPath, useJsonataExpression, getRootDataNode, getLastDefinedValue, getNullToggler, mergeObjects, isArrayRenderer, isCompoundField, ControlDefinitionType, makeHookDepString, createArrayActions, getLengthRestrictions, lookupDataNode, applyArrayLengthRestrictions, buildSchema, stringField, schemaDataForFieldRef, schemaForFieldRef, rootSchemaNode, addMissingControlsForSchema, useControlRendererComponent, groupedControl, makeSchemaDataNode, createAdornmentRenderer, getIsEditing, appendMarkupAt, AdornmentPlacement, wrapMarkup, getAllValues, ControlAdornmentType, getExternalEditData, visitFormDataInContext, validationVisitor, createActionRenderer, isDataGroupRenderer, isDisplayOnlyRenderer, hasOptions, isTextfieldRenderer, isOptionalAdornment, isSetFieldAdornment, useDynamicHooks, wrapLayout, isIconAdornment, isAccordionAdornment, LabelType } from '@react-typed-forms/schemas';
+import { DisplayDataType, rendererClass, coerceToString, getOverrideClass, FieldType, createDataRenderer, fieldOptionAdornment, DataRenderType, createLayoutRenderer, renderLayoutParts, createGroupRenderer, GroupRenderType, fontAwesomeIcon, deepMerge, createAction, IconPlacement, visitFormDataInContext, validationVisitor, ActionStyle, isTabsRenderer, isGridRenderer, isWizardRenderer, isDialogRenderer, isSelectChildRenderer, isFlexRenderer, isInlineRenderer, useExpression, createVisibilityRenderer, getJsonPath, ExpressionType, getLastDefinedValue, getNullToggler, mergeObjects, isArrayRenderer, isCompoundField, ControlDefinitionType, createArrayActions, getLengthRestrictions, applyArrayLengthRestrictions, buildSchema, stringField, boolField, schemaDataForFieldRef, schemaForFieldRef, defaultControlForField, createSchemaTree, useControlRendererComponent, makeSchemaDataNode, createAdornmentRenderer, getIsEditing, appendMarkupAt, AdornmentPlacement, wrapMarkup, getAllValues, ControlAdornmentType, getExternalEditData, createActionRenderer, isDataGroupRenderer, isDisplayOnlyRenderer, hasOptions, isTextfieldRenderer, isOptionalAdornment, isSetFieldAdornment, wrapLayout, isIconAdornment, isAccordionAdornment, LabelType, IconLibrary } from '@react-typed-forms/schemas';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useComponentTracking, formControlProps, useControl, useControlEffect, RenderArrayElements, useComputed, useTrackedComponent, RenderElements, controlValues, removeElement, setFields, newControl, Fcheckbox as Fcheckbox$1 } from '@react-typed-forms/core';
-import { useState, useMemo, useEffect, createElement, useRef } from 'react';
+import { useComponentTracking, formControlProps, useControl, useControlEffect, RenderArrayElements, useComputed, RenderElements, controlValues, removeElement, trackedValue, setFields, newControl, Fcheckbox as Fcheckbox$1 } from '@react-typed-forms/core';
+import { useState, useMemo, useEffect, Fragment as Fragment$1, createElement, useRef } from 'react';
+import { createOverlayState, Dialog, Modal } from '@astroapps/aria-base';
 import { useAutocomplete } from '@mui/base';
-import { Modal, Dialog } from '@astroapps/aria-base';
 import { useOverlayTriggerState } from '@react-stately/overlays';
 
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends.apply(null, arguments);
-}
-function _objectDestructuringEmpty(t) {
-  if (null == t) throw new TypeError("Cannot destructure " + t);
-}
-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;
-    t[n] = r[n];
-  }
-  return t;
-}
-
-const _excluded$4 = ["data", "display", "className", "style", "renderer"];
 function createDefaultDisplayRenderer(options = {}) {
   return {
-    render: (props, renderer) => /*#__PURE__*/jsx(DefaultDisplay, _extends({}, options, props, {
+    render: (props, renderer) => /*#__PURE__*/jsx(DefaultDisplay, {
+      options: options,
+      displayProps: props,
       renderer: renderer
-    })),
+    }),
     type: "display"
   };
 }
-function DefaultDisplay(_ref) {
+function DefaultDisplay({
+  renderer,
+  options,
+  displayProps
+}) {
   var _effect = useComponentTracking();
   try {
-    let {
-        data,
-        display,
-        className,
-        style,
-        renderer
-      } = _ref,
-      options = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+    var _iconDisplay$icon, _iconDisplay$icon2;
+    const {
+      data,
+      display,
+      className,
+      textClass,
+      style
+    } = displayProps;
     const {
       I,
       Div,
-      Span,
       B,
-      H1
+      H1,
+      Span
     } = renderer.html;
     switch (data.type) {
       case DisplayDataType.Icon:
+        const iconDisplay = data;
         return /*#__PURE__*/jsx(I, {
           style: style,
-          className: clsx(getOverrideClass(className), display ? display.value : data.iconClass)
+          className: clsx(getOverrideClass(className), display ? display.value : iconDisplay.iconClass),
+          iconName: display ? display.value : (_iconDisplay$icon = iconDisplay.icon) == null ? void 0 : _iconDisplay$icon.name,
+          iconLibrary: (_iconDisplay$icon2 = iconDisplay.icon) == null ? void 0 : _iconDisplay$icon2.library
         });
       case DisplayDataType.Text:
+        const text = display ? coerceToString(display.value) : data.text;
         return /*#__PURE__*/jsx(Div, {
           style: style,
           className: rendererClass(className, options.textClassName),
-          children: /*#__PURE__*/jsx(Span, {
-            children: display ? coerceToString(display.value) : data.text
-          })
+          textClass: rendererClass(textClass, options.textTextClass),
+          text: text,
+          inline: displayProps.inline
         });
       case DisplayDataType.Html:
         return /*#__PURE__*/jsx(Div, {
           style: style,
           className: rendererClass(className, options.htmlClassName),
-          dangerouslySetInnerHTML: {
-            __html: display ? coerceToString(display.value) : data.html
-          }
+          inline: displayProps.inline,
+          html: display ? coerceToString(display.value) : data.html
         });
       case DisplayDataType.Custom:
         return /*#__PURE__*/jsx(Div, {
@@ -94,8 +80,30 @@ function DefaultDisplay(_ref) {
   }
 }
 
-const _excluded$3 = ["control", "convert", "renderer"],
-  _excluded2$1 = ["errorText", "value", "onChange"];
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+function _objectDestructuringEmpty(t) {
+  if (null == t) throw new TypeError("Cannot destructure " + t);
+}
+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;
+    t[n] = r[n];
+  }
+  return t;
+}
+
+const _excluded$4 = ["control", "convert", "renderer"],
+  _excluded2$2 = ["errorText", "value", "onChange", "ref"];
 function ControlInput(_ref) {
   var _effect = useComponentTracking();
   try {
@@ -104,23 +112,25 @@ function ControlInput(_ref) {
         convert,
         renderer
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
     const _formControlProps = formControlProps(control),
       {
-        value
+        value,
+        ref
       } = _formControlProps,
-      inputProps = _objectWithoutPropertiesLoose(_formControlProps, _excluded2$1);
+      inputProps = _objectWithoutPropertiesLoose(_formControlProps, _excluded2$2);
     const textValue = useControl(() => toText(value));
     useControlEffect(() => control.value, v => textValue.value = toText(v));
     const {
       Input
     } = renderer.html;
     return /*#__PURE__*/jsx(Input, _extends({}, inputProps, {
+      inputRef: ref,
       type: convert[0],
       value: textValue.value,
-      onChange: e => {
-        textValue.value = e.target.value;
-        const converted = convert[1](e.target.value);
+      onChangeValue: e => {
+        textValue.value = e;
+        const converted = convert[1](e);
         if (converted !== undefined) control.value = converted;
       }
     }, props));
@@ -160,7 +170,7 @@ function createInputConversion(ft) {
   }
 }
 
-const _excluded$2 = ["state", "options", "className", "convert", "required", "emptyText", "requiredText", "readonly"];
+const _excluded$3 = ["state", "options", "className", "convert", "required", "emptyText", "requiredText", "readonly"];
 function createSelectRenderer(options = {}) {
   return createDataRenderer((props, asArray) => {
     var _props$options;
@@ -192,7 +202,7 @@ function SelectDataRenderer(_ref) {
         requiredText = "<please select>",
         readonly
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
     const {
       value,
       disabled
@@ -238,8 +248,8 @@ function createSelectConversion(ft) {
   }
 }
 
-const _excluded$1 = ["control", "type", "notValue", "renderer"],
-  _excluded2 = ["value", "onChange", "errorText"];
+const _excluded$2 = ["control", "type", "notValue", "renderer"],
+  _excluded2$1 = ["value", "onChange", "errorText", "ref"];
 function createRadioRenderer(options = {}) {
   return createDataRenderer((p, renderer) => /*#__PURE__*/jsx(CheckButtons, _extends({
     classes: options,
@@ -247,7 +257,10 @@ function createRadioRenderer(options = {}) {
   }, p, {
     className: rendererClass(p.className, options.className),
     isChecked: (control, o) => control.value == o.value,
-    setChecked: (c, o) => c.value = o.value,
+    setChecked: (c, o) => {
+      c.setTouched(true);
+      c.value = o.value;
+    },
     control: p.control,
     type: "radio",
     entryAdornment: fieldOptionAdornment(p),
@@ -267,6 +280,7 @@ function createCheckListRenderer(options = {}) {
       return Array.isArray(v) ? v.includes(o.value) : false;
     },
     setChecked: (c, o, checked) => {
+      c.setTouched(true);
       c.setValue(x => setIncluded(x != null ? x : [], o.value, checked));
     },
     control: p.control,
@@ -325,8 +339,8 @@ function CheckButtons({
                 readOnly: readonly,
                 disabled: disabled,
                 checked: checked,
-                onChange: x => {
-                  !readonly && setChecked(control, o, x.target.checked);
+                onChangeChecked: x => {
+                  !readonly && setChecked(control, o, x);
                 }
               }), /*#__PURE__*/jsx(Label, {
                 className: classes.labelClass,
@@ -365,7 +379,20 @@ function createCheckboxRenderer(options = {}) {
     renderType: DataRenderType.Checkbox
   });
 }
-function CheckBox({
+function createElementSelectedRenderer(options = {}) {
+  return createDataRenderer((props, renderer) => p => _extends({}, p, {
+    label: undefined,
+    children: /*#__PURE__*/jsx(CheckBoxSelected, {
+      p: p,
+      renderer: renderer,
+      options: options,
+      props: props
+    })
+  }), {
+    renderType: DataRenderType.ElementSelected
+  });
+}
+function CheckBoxSelected({
   p,
   props,
   renderer,
@@ -376,11 +403,24 @@ function CheckBox({
     const {
       Div
     } = renderer.html;
+    const elementValue = useControl();
+    useEffect(() => {
+      props.runExpression(elementValue, props.renderOptions.elementExpression, v => elementValue.value = v);
+    });
+    const isSelected = useComputed(() => {
+      var _props$control$as$val, _props$control$as$val2;
+      return (_props$control$as$val = (_props$control$as$val2 = props.control.as().value) == null ? void 0 : _props$control$as$val2.includes(elementValue.current.value)) != null ? _props$control$as$val : false;
+    });
+    const selControl = useControl(() => isSelected.current.value);
+    selControl.value = isSelected.value;
+    useControlEffect(() => selControl.value, v => {
+      props.control.as().setValue(x => setIncluded(x != null ? x : [], elementValue.value, v));
+    });
     return /*#__PURE__*/jsxs(Div, {
       className: rendererClass(props.className, options.entryClass),
       children: [/*#__PURE__*/jsx(Fcheckbox, {
         id: props.id,
-        control: props.control.as(),
+        control: selControl,
         style: props.style,
         className: options.checkClass,
         renderer: renderer
@@ -390,8 +430,33 @@ function CheckBox({
     _effect2();
   }
 }
-function Fcheckbox(_ref) {
+function CheckBox({
+  p,
+  props,
+  renderer,
+  options
+}) {
   var _effect3 = useComponentTracking();
+  try {
+    const {
+      Div
+    } = renderer.html;
+    return /*#__PURE__*/jsxs(Div, {
+      className: rendererClass(props.className, options.entryClass),
+      children: [/*#__PURE__*/jsx(Fcheckbox, {
+        id: props.id,
+        control: props.control.as(),
+        style: props.style,
+        className: options.checkClass,
+        renderer: renderer
+      }), p.label && renderer.renderLabel(p.label, undefined, undefined)]
+    });
+  } finally {
+    _effect3();
+  }
+}
+function Fcheckbox(_ref) {
+  var _effect4 = useComponentTracking();
   try {
     let {
         control,
@@ -399,7 +464,7 @@ function Fcheckbox(_ref) {
         notValue = false,
         renderer
       } = _ref,
-      others = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+      others = _objectWithoutPropertiesLoose(_ref, _excluded$2);
     const {
       Input
     } = renderer.html;
@@ -407,18 +472,18 @@ function Fcheckbox(_ref) {
       {
         value
       } = _formControlProps,
-      theseProps = _objectWithoutPropertiesLoose(_formControlProps, _excluded2);
+      theseProps = _objectWithoutPropertiesLoose(_formControlProps, _excluded2$1);
     return /*#__PURE__*/jsx(Input, _extends({}, theseProps, {
       checked: !!value !== notValue,
-      ref: r => control.element = r,
-      onChange: e => {
+      inputRef: r => control.element = r,
+      onChangeChecked: e => {
         control.touched = true;
-        control.value = e.target.checked !== notValue;
+        control.value = e !== notValue;
       },
       type: type
     }, others));
   } finally {
-    _effect3();
+    _effect4();
   }
 }
 
@@ -431,6 +496,7 @@ function createDefaultLayoutRenderer(options = {}) {
       }, options, {
         renderer: renderers
       }))),
+      inline: layout.inline,
       className: rendererClass(layout.className, options.className),
       style: layout.style,
       divRef: e => e && props.errorControl ? props.errorControl.meta.scrollElement = e : undefined
@@ -443,13 +509,12 @@ function DefaultLayout({
     html: {
       Div,
       Span
-    },
-    renderText
+    }
   },
   renderError = e => e && /*#__PURE__*/jsx(Div, {
     children: /*#__PURE__*/jsx(Span, {
       className: errorClass,
-      children: renderText(e)
+      children: e
     })
   }),
   layout: {
@@ -473,29 +538,28 @@ function DefaultLayout({
 }
 
 function DefaultDisplayOnly({
-  control,
+  dataNode,
   className,
   emptyText,
   schemaInterface,
-  field,
   style,
-  renderer
+  renderer,
+  textClass,
+  inline
 }) {
   var _effect = useComponentTracking();
   try {
     var _ref;
-    const v = control.value;
-    const text = (_ref = schemaInterface.isEmptyValue(field, v) ? emptyText : schemaInterface.textValue(field, v)) != null ? _ref : "";
+    const text = (_ref = schemaInterface.isEmptyValue(dataNode.schema.field, dataNode.control.value) ? emptyText : schemaInterface.textValueForData(dataNode)) != null ? _ref : "";
     const {
-      Div,
-      Span
+      Div
     } = renderer.html;
     return /*#__PURE__*/jsx(Div, {
       style: style,
       className: className,
-      children: /*#__PURE__*/jsx(Span, {
-        children: text
-      })
+      textClass: textClass,
+      text: text,
+      inline: inline
     });
   } finally {
     _effect();
@@ -508,10 +572,8 @@ function DefaultAccordion({
   contentStyle,
   contentClassName,
   designMode,
-  iconOpenName,
-  iconOpenClass,
-  iconClosedName,
-  iconClosedClass,
+  iconOpen,
+  iconClosed,
   className,
   renderTitle = t => t,
   renderToggler,
@@ -539,15 +601,16 @@ function DefaultAccordion({
       display: "none"
     });
     const title = renderers.renderLabelText(renderTitle(accordion.title, open));
+    const currentIcon = isOpen ? iconOpen : iconClosed;
     const toggler = renderToggler ? renderToggler(open, title) : /*#__PURE__*/jsxs(Button, {
       className: className,
       onClick: () => open.setValue(x => !x),
       children: [/*#__PURE__*/jsx(Label, {
         className: titleClass,
         children: title
-      }), /*#__PURE__*/jsx(I, {
-        title: isOpen ? iconOpenName : iconClosedName,
-        className: clsx(isOpen ? iconOpenClass : iconClosedClass)
+      }), currentIcon && /*#__PURE__*/jsx(I, {
+        iconLibrary: currentIcon.library,
+        iconName: currentIcon.name
       })]
     });
     return /*#__PURE__*/jsxs(Fragment, {
@@ -565,24 +628,45 @@ function getAccordionState(c) {
   return c.meta.accordionState;
 }
 
+/**
+ * @trackControls
+ */
+function VisibleChildrenRenderer(props) {
+  var _effect = useComponentTracking();
+  try {
+    const childStates = props.parentFormNode.getChildNodes().map(x => props.parent.getChildState(x));
+    return props.render(props.props, i => !childStates[i].hidden);
+  } finally {
+    _effect();
+  }
+}
+
 function createTabsRenderer(options = {}) {
-  return createGroupRenderer((p, renderer) => /*#__PURE__*/jsx(TabsGroupRenderer, _extends({}, p, {
-    tabOptions: p.renderOptions,
-    options: options
-  })), {
+  return createGroupRenderer((p, renderer) => {
+    return /*#__PURE__*/jsx(VisibleChildrenRenderer, {
+      render: renderAllTabs,
+      dataContext: p.dataContext,
+      parentFormNode: p.formNode,
+      parent: p,
+      props: {
+        groupProps: p,
+        tabOptions: p.renderOptions,
+        options: options
+      }
+    });
+  }, {
     renderType: GroupRenderType.Tabs
   });
-}
-function TabsGroupRenderer({
-  formNode,
-  className,
-  options,
-  renderChild,
-  designMode,
-  tabOptions
-}) {
-  var _effect = useComponentTracking();
-  try {
+  function renderAllTabs({
+    options,
+    groupProps: {
+      designMode,
+      formNode,
+      className,
+      renderChild
+    },
+    tabOptions
+  }, isVisible) {
     const tabIndex = useControl(0);
     const {
       tabClass,
@@ -595,7 +679,7 @@ function TabsGroupRenderer({
     const currentTab = tabIndex.value;
     return designMode ? /*#__PURE__*/jsx(Fragment, {
       children: formNode.getChildNodes().map((x, i) => renderTabs([x], i))
-    }) : renderTabs(formNode.getChildNodes(), 0);
+    }) : renderTabs(formNode.getChildNodes().filter((x, i) => isVisible(i)), 0);
     function renderTabs(tabs, key) {
       return /*#__PURE__*/jsxs("div", {
         className: rendererClass(className, options.className),
@@ -615,33 +699,285 @@ function TabsGroupRenderer({
         })]
       }, key);
     }
+  }
+}
+
+function createGridRenderer(options) {
+  return createGroupRenderer((props, formRenderer) => /*#__PURE__*/jsx(VisibleChildrenRenderer, {
+    props: _extends({}, props, {
+      formRenderer,
+      defaultOptions: options
+    }),
+    render: renderGrid,
+    parent: props,
+    dataContext: props.dataContext,
+    parentFormNode: props.formNode
+  }), {
+    renderType: GroupRenderType.Grid
+  });
+  function renderGrid(props, isChildVisible) {
+    var _props$defaultOptions, _ref, _gridOptions$columns;
+    const filteredChildren = props.formNode.getChildNodes().filter((x, i) => isChildVisible(i));
+    const {
+      Div
+    } = props.formRenderer.html;
+    const defaults = (_props$defaultOptions = props.defaultOptions) != null ? _props$defaultOptions : {};
+    const gridOptions = props.renderOptions;
+    const numColumns = (_ref = (_gridOptions$columns = gridOptions.columns) != null ? _gridOptions$columns : defaults.defaultColumns) != null ? _ref : 2;
+    const allChildren = filteredChildren.map((x, i) => props.renderChild(i, x));
+    // split into numColumns items wrapped a div each
+    const rows = [];
+    for (let i = 0; i < allChildren.length; i += numColumns) {
+      rows.push(allChildren.slice(i, i + numColumns));
+    }
+    return /*#__PURE__*/jsx(Div, {
+      className: rendererClass(props.className, defaults.className),
+      children: rows.map((row, rowIndex) => /*#__PURE__*/jsx(Div, {
+        className: rendererClass(gridOptions.rowClass, defaults.rowClass),
+        children: row
+      }, rowIndex))
+    });
+  }
+}
+
+const defaultOptions = {
+  classes: {
+    className: undefined,
+    contentClass: "min-h-96 overflow-auto",
+    navContainerClass: "flex justify-between gap-4 my-2"
+  },
+  actions: {
+    nextText: "Next",
+    nextIcon: fontAwesomeIcon("chevron-right"),
+    nextValidate: true,
+    prevText: "Prev",
+    prevIcon: fontAwesomeIcon("chevron-left"),
+    prevValidate: false
+  },
+  renderNavigation: defaultNavigationRender
+};
+function defaultNavigationRender({
+  formRenderer,
+  prev,
+  next,
+  className
+}) {
+  {
+    const {
+      html: {
+        Div
+      },
+      renderAction
+    } = formRenderer;
+    return /*#__PURE__*/jsxs(Div, {
+      className: className,
+      children: [renderAction(prev), renderAction(next)]
+    });
+  }
+}
+function createWizardRenderer(options) {
+  return createGroupRenderer((props, formRenderer) => /*#__PURE__*/jsx(VisibleChildrenRenderer, {
+    props: _extends({}, props, {
+      formRenderer,
+      defaultOptions: options
+    }),
+    render: renderWizard,
+    parent: props,
+    dataContext: props.dataContext,
+    parentFormNode: props.formNode
+  }), {
+    renderType: GroupRenderType.Wizard
+  });
+}
+function renderWizard(props, isChildVisible) {
+  var _props$defaultOptions;
+  const mergedOptions = deepMerge((_props$defaultOptions = props.defaultOptions) != null ? _props$defaultOptions : {}, defaultOptions);
+  const {
+    classes: {
+      className,
+      contentClass,
+      navContainerClass
+    },
+    actions: {
+      nextText,
+      nextIcon,
+      prevText,
+      prevIcon,
+      nextValidate,
+      prevValidate
+    },
+    renderNavigation
+  } = mergedOptions;
+  const {
+    html: {
+      Div
+    }
+  } = props.formRenderer;
+  const children = props.formNode.getChildNodes();
+  const allVisible = children.map((_, i) => isChildVisible(i));
+  const page = useControl(0);
+  const currentPage = page.value;
+  const isValid = useComputed(() => isPageValid());
+  const next = createAction("nav", () => nav(1, nextValidate), nextText, {
+    hidden: !props.designMode && nextVisibleInDirection(1) == null,
+    disabled: !isValid.value,
+    icon: nextIcon,
+    iconPlacement: IconPlacement.AfterText
+  });
+  const prev = createAction("nav", () => nav(-1, prevValidate), prevText, {
+    disabled: !props.designMode && nextVisibleInDirection(-1) == null,
+    icon: prevIcon
+  });
+  const navElement = renderNavigation({
+    formRenderer: props.formRenderer,
+    page: countVisibleUntil(currentPage),
+    totalPages: countVisibleUntil(children.length),
+    prev,
+    next: next,
+    className: navContainerClass,
+    validatePage: async () => validatePage()
+  });
+  const content = props.designMode ? /*#__PURE__*/jsx(Div, {
+    children: children.map((child, i) => props.renderChild(i, child))
+  }) : currentPage < children.length ? /*#__PURE__*/jsx(Div, {
+    className: contentClass,
+    children: props.renderChild(currentPage, children[currentPage])
+  }) : /*#__PURE__*/jsx(Fragment$1, {});
+  return /*#__PURE__*/jsxs(Div, {
+    className: rendererClass(props.className, className),
+    children: [content, navElement]
+  });
+  function countVisibleUntil(untilPage) {
+    let count = 0;
+    for (let i = 0; i < untilPage && i < allVisible.length; i++) {
+      if (allVisible[i]) {
+        count++;
+      }
+    }
+    return count;
+  }
+  function nav(dir, validate) {
+    if (validate && !validatePage()) {
+      return;
+    }
+    const next = nextVisibleInDirection(dir);
+    if (next != null) {
+      page.value = next;
+    }
+  }
+  function nextVisibleInDirection(dir) {
+    let next = currentPage + dir;
+    while (next >= 0 && next < children.length) {
+      if (allVisible[next]) {
+        return next;
+      }
+      next += dir;
+    }
+    return null;
+  }
+  function validatePage() {
+    const pageNode = children[currentPage];
+    let hasErrors = false;
+    visitFormDataInContext(props.dataContext.parentNode, pageNode, validationVisitor(() => {
+      hasErrors = true;
+    }));
+    return !hasErrors;
+  }
+  function isPageValid() {
+    const pageNode = children[currentPage];
+    let hasErrors = false;
+    visitFormDataInContext(props.dataContext.parentNode, pageNode, c => {
+      if (!c.control.valid) hasErrors = true;
+    });
+    return !hasErrors;
+  }
+}
+
+const defaultDialogOptions = {
+  classes: {
+    className: "",
+    titleClass: "text-2xl font-bold"
+  }
+};
+function createDialogRenderer(options) {
+  return createGroupRenderer((props, renderer) => /*#__PURE__*/jsx(DefaultDialogRenderer, {
+    props: props,
+    options: options,
+    renderer: renderer,
+    renderOptions: props.renderOptions
+  }), {
+    renderType: GroupRenderType.Dialog
+  });
+}
+function DefaultDialogRenderer({
+  props,
+  renderOptions,
+  options,
+  renderer
+}) {
+  var _effect = useComponentTracking();
+  try {
+    const {
+      classes: {
+        titleClass,
+        className
+      }
+    } = deepMerge(options, defaultDialogOptions);
+    const open = useControl(false);
+    const overlayState = createOverlayState(open);
+    const actionOnClick = action => {
+      switch (action) {
+        case "closeDialog":
+          return () => overlayState.close();
+        case "openDialog":
+          return () => overlayState.open();
+      }
+    };
+    const triggerChildren = props.formNode.getChildNodes().filter(x => x.definition.placement === "trigger");
+    const dialogContent = /*#__PURE__*/jsx(Dialog, {
+      title: renderOptions.title,
+      titleClass: titleClass,
+      className: rendererClass(props.className, className),
+      children: props.formNode.getChildNodes().filter(x => !x.definition.placement || x.definition.placement === "dialog").map((x, i) => props.renderChild(i, x, {
+        actionOnClick
+      }))
+    });
+    return /*#__PURE__*/jsxs(Fragment, {
+      children: [triggerChildren.map((x, i) => props.renderChild(i, x, {
+        actionOnClick
+      })), props.designMode ? designContent() : open.value && /*#__PURE__*/jsx(Modal, {
+        state: overlayState,
+        isDismissable: true,
+        children: dialogContent
+      })]
+    });
+    function designContent() {
+      return /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx("div", {
+          onClickCapture: () => overlayState.toggle(),
+          children: renderer.renderAction(createAction("Toggle Dialog", () => {}, open.value ? "Hide Content" : "Show Content", {
+            actionStyle: ActionStyle.Link
+          }))
+        }), open.value && dialogContent]
+      });
+    }
   } finally {
     _effect();
   }
 }
 
 function createDefaultGroupRenderer(options) {
+  const gridRenderer = createGridRenderer(options == null ? void 0 : options.grid);
   const tabsRenderer = createTabsRenderer(options == null ? void 0 : options.tabs);
+  const wizardRenderer = createWizardRenderer(options == null ? void 0 : options.wizard);
+  const dialogRenderer = createDialogRenderer(options == null ? void 0 : options.dialog);
   const {
     className,
-    gridStyles = defaultGridStyles,
-    defaultGridColumns = 2,
-    gridClassName,
     standardClassName,
     flexClassName,
+    inlineClass,
     defaultFlexGap
   } = options != null ? options : {};
-  function defaultGridStyles({
-    columns = defaultGridColumns
-  }) {
-    return {
-      className: gridClassName,
-      style: {
-        display: "grid",
-        gridTemplateColumns: `repeat(${columns}, 1fr)`
-      }
-    };
-  }
   function flexStyles(options) {
     return {
       className: flexClassName,
@@ -659,6 +995,9 @@ function createDefaultGroupRenderer(options) {
       formNode
     } = props;
     if (isTabsRenderer(renderOptions)) return tabsRenderer.render(props, renderer);
+    if (isGridRenderer(renderOptions)) return gridRenderer.render(props, renderer);
+    if (isWizardRenderer(renderOptions)) return wizardRenderer.render(props, renderer);
+    if (isDialogRenderer(renderOptions)) return dialogRenderer.render(props, renderer);
     if (isSelectChildRenderer(renderOptions) && !props.designMode) {
       return /*#__PURE__*/jsx(SelectChildGroupRenderer, _extends({}, props, {
         renderOptions: renderOptions
@@ -667,40 +1006,60 @@ function createDefaultGroupRenderer(options) {
     const {
       style,
       className: gcn
-    } = isGridRenderer(renderOptions) ? gridStyles(renderOptions) : isFlexRenderer(renderOptions) ? flexStyles(renderOptions) : {
+    } = isFlexRenderer(renderOptions) ? flexStyles(renderOptions) : isInlineRenderer(renderOptions) ? {
+      className: inlineClass
+    } : {
       className: standardClassName
     };
     const {
       Div
     } = renderer.html;
+    const inline = renderOptions.type == GroupRenderType.Inline;
+    const children = formNode.getChildNodes().map((c, i) => renderChild(i, c, {
+      inline
+    }));
     return /*#__PURE__*/jsx(Div, {
       className: rendererClass(props.className, clsx(className, gcn)),
+      textClass: props.textClass,
       style: style,
-      children: formNode.getChildNodes().map((c, i) => renderChild(i, c))
+      inline: inline,
+      children: children
     });
   }
+  function renderLayout(props, renderer) {
+    if (props.renderOptions.type === GroupRenderType.Contents) {
+      const {
+        formNode,
+        renderChild
+      } = props;
+      const children = formNode.getChildNodes().map((c, i) => renderChild(i, c));
+      return layout => {
+        return _extends({}, layout, {
+          inline: true,
+          children
+        });
+      };
+    }
+    return render(props, renderer);
+  }
   return {
     type: "group",
-    render
+    render: renderLayout
   };
 }
 function SelectChildGroupRenderer(props) {
   var _effect = useComponentTracking();
   try {
     const {
-      useEvalExpression,
+      runExpression,
       renderOptions
     } = props;
-    const dynHook = useEvalExpression(renderOptions == null ? void 0 : renderOptions.childIndexExpression, x => x == "string" ? parseInt(x) : x);
-    const Render = useTrackedComponent(p => {
-      const ctrl = dynHook.runHook(p.dataContext, dynHook.state);
-      const childIndex = ctrl == null ? void 0 : ctrl.value;
-      const childDefinitions = p.formNode.getChildNodes();
-      return /*#__PURE__*/jsx("div", {
-        children: typeof childIndex === "number" && childIndex < childDefinitions.length && childIndex >= 0 && p.renderChild(childIndex, childDefinitions[childIndex])
-      });
-    }, [dynHook.deps]);
-    return /*#__PURE__*/jsx(Render, _extends({}, props));
+    const ctrl = useExpression(undefined, runExpression, renderOptions == null ? void 0 : renderOptions.childIndexExpression, x => typeof x == "string" ? parseInt(x) : x);
+    const childIndex = ctrl == null ? void 0 : ctrl.value;
+    const childDefinitions = props.formNode.getChildNodes();
+    return /*#__PURE__*/jsx("div", {
+      children: typeof childIndex === "number" && childIndex < childDefinitions.length && childIndex >= 0 && props.renderChild(childIndex, childDefinitions[childIndex])
+    });
   } finally {
     _effect();
   }
@@ -717,7 +1076,8 @@ function DefaultVisibility({
   className,
   style,
   divRef,
-  renderer
+  renderer,
+  inline
 }) {
   var _effect = useComponentTracking();
   try {
@@ -733,10 +1093,11 @@ function DefaultVisibility({
     const {
       Div
     } = renderer.html;
+    if (inline) return v != null && v.visible ? children : undefined;
     return v != null && v.visible ? /*#__PURE__*/jsx(Div, {
       className: className,
       style: style,
-      ref: divRef,
+      nativeRef: divRef,
       children: children
     }) : /*#__PURE__*/jsx(Fragment, {});
   } finally {
@@ -751,7 +1112,8 @@ function createJsonataRenderer(className) {
     dataNode: p.dataNode,
     dataContext: p.dataContext,
     control: p.control,
-    readonly: p.readonly
+    readonly: p.readonly,
+    runExpression: p.runExpression
   }), {
     renderType: DataRenderType.Jsonata
   });
@@ -762,19 +1124,22 @@ function JsonataRenderer({
   readonly,
   className,
   dataContext,
-  dataNode
+  dataNode,
+  runExpression
 }) {
   var _effect = useComponentTracking();
   try {
     const sdn = dataNode.elementIndex != null ? dataNode : dataContext.parentNode;
-    const bindings = useComputed(() => ({
+    const bindings = useComputed(() => _extends({}, dataContext.variables, {
       value: control.value,
       readonly,
       disabled: control.disabled,
-      formData: dataContext.formData,
       dataPath: getJsonPath(dataNode)
     }));
-    const rendered = useJsonataExpression(renderOptions.expression, getRootDataNode(sdn).control, getJsonPath(sdn), bindings, coerceToString);
+    const rendered = useExpression("", runExpression, {
+      type: ExpressionType.Jsonata,
+      expression: renderOptions.expression
+    }, coerceToString, bindings);
     return /*#__PURE__*/jsx("div", {
       className: className,
       dangerouslySetInnerHTML: {
@@ -786,14 +1151,14 @@ function JsonataRenderer({
   }
 }
 
-const _excluded = ["control", "field", "renderOptions"];
+const _excluded$1 = ["control", "field", "renderOptions"];
 function createNullToggleRenderer() {
   return createDataRenderer((_ref, renderers) => {
     let {
         control,
         field
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
     const lastDefined = getLastDefinedValue(control);
     if (lastDefined.current.value == null) lastDefined.value = props.definition.defaultValue;
     const nullControl = getNullToggler(control);
@@ -824,100 +1189,108 @@ function createDefaultArrayDataRenderer(defaultActions) {
     collection: true
   });
 }
+/**
+ * @trackControls
+ */
 function DataArrayRenderer({
   dataProps,
   renderers,
   defaultActions
 }) {
-  var _definition$children;
-  const {
-    renderOptions,
-    control,
-    field,
-    readonly,
-    designMode,
-    required,
-    renderChild,
-    definition,
-    className,
-    style,
-    useChildVisibility,
-    dataContext,
-    formNode
-  } = dataProps;
-  const {
-    addText,
-    noAdd,
-    noRemove,
-    noReorder,
-    removeText,
-    editExternal
-  } = mergeObjects(isArrayRenderer(renderOptions) ? renderOptions : {}, defaultActions);
-  const childOptions = isArrayRenderer(renderOptions) ? renderOptions.childOptions : undefined;
-  const renderAsElement = !isCompoundField(field);
-  const childDefinition = formNode.tree.createTempNode(formNode.id + "child", !renderAsElement ? {
-    type: ControlDefinitionType.Group,
-    groupOptions: {
-      type: GroupRenderType.Standard,
+  var _effect = useComponentTracking();
+  try {
+    const {
+      renderOptions,
+      control,
+      field,
+      readonly,
+      designMode,
+      required,
+      renderChild,
+      definition,
+      className,
+      style,
+      dataContext,
+      formNode,
+      getChildState
+    } = dataProps;
+    const {
+      addText,
+      noAdd,
+      noRemove,
+      noReorder,
+      removeText,
+      editExternal
+    } = mergeObjects(isArrayRenderer(renderOptions) ? renderOptions : {}, defaultActions);
+    const childDefs = formNode.getResolvedChildren();
+    const renderAsElement = !isCompoundField(field);
+    const defaultChildDef = {
+      type: ControlDefinitionType.Data,
+      field: ".",
+      renderOptions: {
+        type: DataRenderType.Standard
+      },
       hideTitle: true
+    };
+    const childDef = {
+      type: ControlDefinitionType.Group,
+      groupOptions: {
+        type: GroupRenderType.Standard,
+        hideTitle: true
+      },
+      children: renderAsElement && childDefs.length == 0 ? [defaultChildDef] : childDefs
+    };
+    const childNode = formNode.createChildNode("child", childDef);
+    const childNodes = childNode.getChildNodes();
+    const arrayProps = _extends({}, createArrayActions(control.as(), field, {
+      addText,
+      removeText,
+      noAdd,
+      noRemove,
+      readonly,
+      disabled: control.disabled,
+      designMode,
+      editExternal
+    }), {
+      required,
+      renderElement: (i, wrap) => /*#__PURE__*/jsx(RenderEntry, {
+        index: i,
+        renderChildElement: renderChildElement,
+        dataContext: dataContext,
+        wrap: wrap,
+        isChildHidden: dataNode => childNodes.every(x => getChildState(x, dataNode).hidden)
+      }),
+      className: className ? className : undefined,
+      style
+    }, getLengthRestrictions(definition));
+    return renderers.renderArray(arrayProps);
+    function renderChildElement(i, elementNode) {
+      return renderChild(elementNode.control.uniqueId, childNode, {
+        parentDataNode: elementNode
+      });
     }
-  } : {
-    type: ControlDefinitionType.Data,
-    field: definition.field,
-    renderOptions: childOptions != null ? childOptions : {
-      type: DataRenderType.Standard
-    },
-    hideTitle: true
-  }, formNode.getChildNodes());
-  const visibilities = ((_definition$children = definition.children) != null ? _definition$children : []).map(x => [useChildVisibility(x, undefined, true), x]);
-  const deps = makeHookDepString(visibilities, x => x[0].deps);
-  const Entry = useTrackedComponent(RenderEntry, [deps]);
-  const arrayProps = _extends({}, createArrayActions(control.as(), field, {
-    addText,
-    removeText,
-    noAdd,
-    noRemove,
-    readonly,
-    disabled: control.disabled,
-    designMode,
-    editExternal
-  }), {
-    required,
-    renderElement: (i, wrap) => /*#__PURE__*/jsx(Entry, {
-      index: i,
-      renderChildElement: renderChildElement,
-      dataContext: dataContext,
-      visibilities: visibilities,
-      wrap: wrap
-    }),
-    className: className ? className : undefined,
-    style
-  }, getLengthRestrictions(definition));
-  return renderers.renderArray(arrayProps);
-  function renderChildElement(i, elementNode) {
-    var _control$elements$i$u, _control$elements;
-    return renderChild((_control$elements$i$u = (_control$elements = control.elements) == null ? void 0 : _control$elements[i].uniqueId) != null ? _control$elements$i$u : i, childDefinition, renderAsElement ? {
-      elementIndex: i
-    } : {
-      parentDataNode: elementNode
-    });
+  } finally {
+    _effect();
   }
 }
+/**
+ * @trackControls
+ */
 function RenderEntry({
   index: i,
   renderChildElement,
-  visibilities,
   wrap,
+  isChildHidden,
   dataContext
 }) {
-  const elementNode = dataContext.dataNode.getChildElement(i);
-  const childVis = visibilities.map(([hook, def]) => hook.runHook(_extends({}, dataContext, {
-    parentNode: elementNode,
-    dataNode: lookupDataNode(def, elementNode)
-  }), hook.state).value);
-  const anyVisible = childVis.length == 0 || childVis.some(x => x === true);
-  if (!anyVisible) return undefined;
-  return wrap(renderChildElement(i, elementNode));
+  var _effect2 = useComponentTracking();
+  try {
+    const elementNode = dataContext.dataNode.getChildElement(i);
+    if (isChildHidden(elementNode)) return undefined;
+    return wrap(renderChildElement(i, elementNode));
+  } finally {
+    _effect2();
+  }
 }
 function createDefaultArrayRenderer(options) {
   return {
@@ -932,7 +1305,7 @@ function createDefaultArrayRenderer(options) {
   };
 }
 function DefaultArrayRenderer(props) {
-  var _effect = useComponentTracking();
+  var _effect3 = useComponentTracking();
   try {
     const {
       renderElement,
@@ -979,7 +1352,7 @@ function DefaultArrayRenderer(props) {
       })]
     });
   } finally {
-    _effect();
+    _effect3();
   }
 }
 
@@ -1043,6 +1416,7 @@ function SingleAutocomplete(_ref) {
     } = useAutocomplete(_extends({
       freeSolo: true,
       multiple: false,
+      readOnly,
       value: selectedOptionControl.value,
       inputValue: inputControl.value,
       getOptionLabel: v => typeof v === "string" ? v : v.name,
@@ -1070,7 +1444,8 @@ function SingleAutocomplete(_ref) {
           type: "text"
         }, getInputProps(), {
           placeholder: (_controlClasses$place = controlClasses == null ? void 0 : controlClasses.placeholder) != null ? _controlClasses$place : "",
-          className: inputClass
+          className: inputClass,
+          readOnly: readOnly
         })), /*#__PURE__*/jsx("button", _extends({}, getPopupIndicatorProps(), {
           disabled: disabled || readOnly,
           className: "outline-0 shadow-none border-0 py-0 px-0.5 bg-transparent pr-[10px]",
@@ -1138,6 +1513,7 @@ function MultipleAutocomplete(_ref2) {
       value: (_selectedOptionsContr = selectedOptionsControl.value) != null ? _selectedOptionsContr : [],
       inputValue: inputControl.value,
       freeSolo: true,
+      readOnly,
       multiple: true,
       getOptionLabel: v => typeof v === "string" ? v : v.name,
       filterOptions: (o, s) => o.filter(o => {
@@ -1165,7 +1541,7 @@ function MultipleAutocomplete(_ref2) {
             text: typeof v === "string" ? v : v.name,
             chipContainerClass: chipContainerClass,
             chipCloseButtonClass: chipCloseButtonClass,
-            onDeleteClick: () => {
+            onDeleteClick: readOnly || disabled ? undefined : () => {
               const c = selectedOptionsControl.elements.find(x => x.value == v);
               if (c) removeElement(selectedOptionsControl, c);
             }
@@ -1173,7 +1549,8 @@ function MultipleAutocomplete(_ref2) {
             type: "text"
           }, getInputProps(), {
             placeholder: (_controlClasses$place2 = controlClasses == null ? void 0 : controlClasses.placeholder) != null ? _controlClasses$place2 : "",
-            className: clsx(inputClass)
+            className: clsx(inputClass),
+            readOnly: readOnly
           }))]
         }), /*#__PURE__*/jsx("button", _extends({}, getPopupIndicatorProps(), {
           disabled: disabled || readOnly,
@@ -1228,7 +1605,9 @@ const ValueForFieldExtension = {
     value: RenderType,
     name: "Value For Field",
     fields: buildSchema({
-      fieldRef: stringField("Field Reference")
+      fieldRef: stringField("Field Reference"),
+      noOptions: boolField("No Options"),
+      refIsDirect: boolField("Reference is direct")
     })
   }
 };
@@ -1236,14 +1615,23 @@ function createValueForFieldRenderer(options) {
   return createDataRenderer((o, renderer) => {
     var _schemaDataForFieldRe;
     const {
-      fieldRef
+      fieldRef,
+      noOptions,
+      refIsDirect
     } = o.renderOptions;
-    const actualFieldRef = fieldRef ? (_schemaDataForFieldRe = schemaDataForFieldRef(fieldRef, o.dataContext.parentNode)) == null || (_schemaDataForFieldRe = _schemaDataForFieldRe.control) == null ? void 0 : _schemaDataForFieldRe.value : undefined;
-    const node = actualFieldRef ? schemaForFieldRef(actualFieldRef, options.schema) : undefined;
-    return node ? /*#__PURE__*/jsx(ValueForField, {
+    const actualFieldRef = fieldRef ? refIsDirect ? fieldRef : (_schemaDataForFieldRe = schemaDataForFieldRef(fieldRef, o.dataContext.parentNode)) == null || (_schemaDataForFieldRe = _schemaDataForFieldRe.control) == null ? void 0 : _schemaDataForFieldRe.value : ".";
+    let schemaField;
+    if (refIsDirect) {
+      const dataNode = schemaDataForFieldRef(actualFieldRef, o.dataContext.parentNode);
+      schemaField = trackedValue(dataNode.control.as());
+    } else {
+      schemaField = actualFieldRef ? schemaForFieldRef(actualFieldRef, options.schema).field : undefined;
+    }
+    return schemaField ? /*#__PURE__*/jsx(ValueForField, {
       renderer: renderer,
-      schema: node,
-      control: o.control
+      schemaField: schemaField,
+      control: o.control,
+      noOptions: noOptions
     }) : /*#__PURE__*/jsx(Fragment, {
       children: actualFieldRef ? "No schema node for " + actualFieldRef : ""
     });
@@ -1252,9 +1640,10 @@ function createValueForFieldRenderer(options) {
   });
 }
 function ValueForField({
-  schema,
+  schemaField,
   renderer,
-  control
+  control,
+  noOptions
 }) {
   var _effect = useComponentTracking();
   try {
@@ -1264,16 +1653,22 @@ function ValueForField({
       default: control
     }));
     const [controls, rootSchema] = useMemo(() => {
-      const rootSchema = rootSchemaNode([_extends({}, schema.field, {
+      const adjustedField = _extends({}, schemaField, {
+        collection: noOptions ? false : schemaField.collection,
+        options: noOptions ? undefined : schemaField.options,
         field: "default",
         required: false,
         notNullable: false,
         onlyForTypes: null,
         defaultValue: undefined
-      })]);
-      return [addMissingControlsForSchema(rootSchema, []), rootSchema];
-    }, [schema]);
-    const Render = useControlRendererComponent(groupedControl(controls), renderer, {
+      });
+      const control = _extends({}, defaultControlForField(adjustedField), {
+        hideTitle: true
+      });
+      const rootSchema = createSchemaTree([adjustedField]).rootNode;
+      return [control, rootSchema];
+    }, [schemaField]);
+    const Render = useControlRendererComponent(controls, renderer, {
       disabled: control.disabled
     }, makeSchemaDataNode(rootSchema, value));
     return /*#__PURE__*/jsx(Render, {});
@@ -1303,21 +1698,19 @@ function createOptionalAdornment(options = {}) {
           control: editing,
           className: options.checkClass
         }))(rl);
-        wrapMarkup("children", children => options.customRender ? options.customRender({
-          allValues: getAllValues(dataControl),
-          editing,
-          children,
-          adornment,
-          nullToggler,
-          dataContext,
-          options
-        }) : /*#__PURE__*/jsx(OptionalEditRenderer, {
-          children: children,
-          options: options,
-          editing: editing.as(),
-          adornment: adornment,
-          dataControl: dataControl
-        }))(rl);
+        wrapMarkup("children", children => {
+          const props = {
+            allValues: getAllValues(dataControl),
+            editing,
+            children,
+            adornment,
+            nullToggler,
+            dataContext,
+            options,
+            dataControl
+          };
+          return options.customRender ? options.customRender(props) : /*#__PURE__*/jsx(OptionalEditRenderer, _extends({}, props));
+        })(rl);
       },
       priority: 0,
       adornment
@@ -1331,13 +1724,17 @@ function OptionalEditRenderer({
   options,
   adornment,
   editing,
-  dataControl
+  renderMultiValues,
+  allValues,
+  nullToggler
 }) {
   var _effect = useComponentTracking();
   try {
-    var _options$setNullText, _options$multiValuesT;
-    const nullToggler = getNullToggler(dataControl);
-    const allValues = getAllValues(dataControl);
+    var _options$setNullText;
+    renderMultiValues != null ? renderMultiValues : renderMultiValues = () => {
+      var _options$multiValuesT;
+      return (_options$multiValuesT = options.multiValuesText) != null ? _options$multiValuesT : "Differing values";
+    };
     const multipleValues = allValues.value.length > 1;
     const nullEdit = adornment.allowNull ? /*#__PURE__*/jsxs("div", {
       className: options.nullWrapperClass,
@@ -1353,7 +1750,7 @@ function OptionalEditRenderer({
       className: options.className,
       children: multipleValues && editing.value === false ? /*#__PURE__*/jsx("div", {
         className: options.multiValuesClass,
-        children: (_options$multiValuesT = options.multiValuesText) != null ? _options$multiValuesT : "Differing values"
+        children: renderMultiValues(allValues)
       }) : /*#__PURE__*/jsxs("div", {
         className: options.childWrapperClass,
         children: [nullEdit, children]
@@ -1426,18 +1823,18 @@ function ArrayElementRenderer({
     });
     if (designMode || extData.value !== undefined) {
       const parentDataNode = makeSchemaDataNode(dataProps.dataNode.schema, extData.fields.data);
-      const elementGroup = formNode.tree.createTempNode(formNode.id + "group", {
+      const elementGroup = formNode.createChildNode("group", {
         type: ControlDefinitionType.Group,
         groupOptions: {
           type: GroupRenderType.Standard,
           hideTitle: true
-        }
-      }, formNode.getChildNodes());
+        },
+        children: formNode.getResolvedChildren()
+      });
       const editContent = /*#__PURE__*/jsxs("div", {
         className: rendererClass(dataProps.className, options.className),
         children: [renderChild("", elementGroup, {
-          parentDataNode,
-          elementIndex: 0
+          parentDataNode
         }), /*#__PURE__*/jsx("div", {
           className: options.actionsClass,
           children: /*#__PURE__*/jsx(RenderElements, {
@@ -1475,29 +1872,64 @@ function ArrayElementRenderer({
 }
 
 function createButtonActionRenderer(actionId, options = {}) {
-  return createActionRenderer(actionId, ({
-    onClick,
-    actionText,
-    className,
-    style,
-    actionId,
-    actionData,
-    disabled
-  }, renderer) => {
-    var _options$renderConten;
+  return createActionRenderer(actionId, (props, renderer) => {
+    var _props$icon, _ref, _props$iconPlacement, _options$renderConten;
     const {
-      Button
+      key,
+      onClick,
+      actionText,
+      className,
+      style,
+      actionId,
+      actionData,
+      disabled,
+      textClass,
+      actionStyle,
+      inline,
+      actionContent
+    } = props;
+    const icon = (_props$icon = props.icon) != null && _props$icon.name ? props.icon : options.icon;
+    const iconPlacement = (_ref = (_props$iconPlacement = props.iconPlacement) != null ? _props$iconPlacement : options.iconPlacement) != null ? _ref : IconPlacement.BeforeText;
+    const {
+      Button,
+      I,
+      Span
     } = renderer.html;
-    const classNames = rendererClass(className, options.className);
+    const isLink = actionStyle == ActionStyle.Link;
+    const isGroup = actionStyle == ActionStyle.Group;
+    const classNames = rendererClass(className, isLink ? options.linkClass : isGroup ? options.groupClass : rendererClass(options.buttonClass, actionStyle == ActionStyle.Secondary ? options.secondaryClass : options.primaryClass));
+    const iconElement = icon && /*#__PURE__*/jsx(I, {
+      iconName: icon.name,
+      iconLibrary: icon.library,
+      className: iconPlacement == IconPlacement.BeforeText ? options.iconBeforeClass : options.iconAfterClass
+    });
+    const textClassNames = rendererClass(textClass, isLink ? options.linkTextClass : rendererClass(options.textClass, actionStyle == ActionStyle.Secondary ? options.secondaryTextClass : options.primaryTextClass));
+    const textElement = actionContent != null ? actionContent : actionText && /*#__PURE__*/jsx(Span, {
+      className: textClassNames,
+      children: actionText
+    });
     return /*#__PURE__*/jsx(Button, {
       className: classNames,
+      textClass: textClassNames,
       disabled: disabled,
       style: style,
       onClick: onClick,
-      children: (_options$renderConten = options.renderContent == null ? void 0 : options.renderContent(actionText, actionId, actionData)) != null ? _options$renderConten : renderer.renderText(actionText, classNames)
-    });
+      inline: inline,
+      nonTextContent: isGroup,
+      title: iconPlacement == IconPlacement.ReplaceText ? actionText : undefined,
+      notWrapInText: options.notWrapInText,
+      androidRippleColor: options.androidRippleColor,
+      children: (_options$renderConten = options.renderContent == null ? void 0 : options.renderContent(actionText, actionId, actionData)) != null ? _options$renderConten : /*#__PURE__*/jsxs(Fragment, {
+        children: [iconPlacement == IconPlacement.BeforeText && iconElement, iconPlacement != IconPlacement.ReplaceText && textElement, iconPlacement != IconPlacement.BeforeText && iconElement]
+      })
+    }, key);
   });
 }
+
+const _excluded = ["inline", "textClass", "className", "notWrapInText", "androidRippleColor", "onClick", "nonTextContent"],
+  _excluded2 = ["textClass", "className", "onChangeValue", "onChangeChecked", "inputRef"],
+  _excluded3 = ["text", "html", "children", "className", "textClass", "nativeRef", "inline"],
+  _excluded4 = ["textClass", "className"];
 const DefaultBoolOptions = [{
   name: "Yes",
   value: true
@@ -1506,17 +1938,19 @@ const DefaultBoolOptions = [{
   value: false
 }];
 function createDefaultDataRenderer(options = {}) {
-  var _options$checkOptions, _options$radioOptions, _options$checkListOpt;
+  var _options$checkboxOpti, _options$checkboxOpti2, _options$radioOptions, _options$checkListOpt;
+  const elementSelectedRenderer = createElementSelectedRenderer((_options$checkboxOpti = options.checkboxOptions) != null ? _options$checkboxOpti : options.checkOptions);
   const jsonataRenderer = createJsonataRenderer(options.jsonataClass);
   const nullToggler = createNullToggleRenderer();
   const multilineRenderer = createMultilineFieldRenderer(options.multilineClass);
-  const checkboxRenderer = createCheckboxRenderer((_options$checkOptions = options.checkOptions) != null ? _options$checkOptions : options.checkboxOptions);
+  const checkboxRenderer = createCheckboxRenderer((_options$checkboxOpti2 = options.checkboxOptions) != null ? _options$checkboxOpti2 : options.checkOptions);
   const selectRenderer = createSelectRenderer(options.selectOptions);
   const radioRenderer = createRadioRenderer((_options$radioOptions = options.radioOptions) != null ? _options$radioOptions : options.checkOptions);
   const checkListRenderer = createCheckListRenderer((_options$checkListOpt = options.checkListOptions) != null ? _options$checkListOpt : options.checkOptions);
   const arrayElementRenderer = createArrayElementRenderer(options.arrayElementOptions);
   const {
     inputClass,
+    inputTextClass,
     booleanOptions,
     optionRenderer,
     displayOnlyClass,
@@ -1534,7 +1968,7 @@ function createDefaultDataRenderer(options = {}) {
     const fieldType = field.type;
     const renderOptions = props.renderOptions;
     let renderType = renderOptions.type;
-    if (field.collection && props.elementIndex == null && (renderType == DataRenderType.Standard || renderType == DataRenderType.Array || renderType == DataRenderType.ArrayElement)) {
+    if (field.collection && props.dataNode.elementIndex == null && (renderType == DataRenderType.Standard || renderType == DataRenderType.Array || renderType == DataRenderType.ArrayElement)) {
       if (renderType == DataRenderType.ArrayElement) return arrayElementRenderer.render(props, renderers);
       return arrayRenderer.render(props, renderers);
     }
@@ -1552,11 +1986,12 @@ function createDefaultDataRenderer(options = {}) {
       return _extends({}, p, {
         className: "@ " + rendererClass(p.className, displayOnlyClass),
         children: /*#__PURE__*/jsx(DefaultDisplayOnly, {
-          field: props.field,
+          dataNode: props.dataNode,
           schemaInterface: props.dataContext.schemaInterface,
-          control: props.control,
           className: props.className,
+          textClass: props.textClass,
           style: props.style,
+          inline: props.inline,
           renderer: renderers,
           emptyText: isDisplayOnlyRenderer(renderOptions) && renderOptions.emptyText ? renderOptions.emptyText : defaultEmptyText
         })
@@ -1586,6 +2021,8 @@ function createDefaultDataRenderer(options = {}) {
         return jsonataRenderer.render(props, renderers);
       case DataRenderType.Autocomplete:
         return autocompleteRenderer.render(props, renderers);
+      case DataRenderType.ElementSelected:
+        return elementSelectedRenderer.render(props, renderers);
     }
     if (fieldType == FieldType.Any) {
       var _field$displayName;
@@ -1597,6 +2034,7 @@ function createDefaultDataRenderer(options = {}) {
     const placeholder = isTextfieldRenderer(renderOptions) ? renderOptions.placeholder : undefined;
     return /*#__PURE__*/jsx(ControlInput, {
       className: rendererClass(props.className, inputClass),
+      textClass: rendererClass(props.textClass, inputTextClass),
       style: props.style,
       id: props.id,
       readOnly: props.readonly,
@@ -1619,42 +2057,31 @@ function createDefaultAdornmentRenderer(options = {}) {
         adornment,
         designMode,
         dataContext,
-        useExpr
+        runExpression
       } = props;
       return {
         apply: rl => {
-          if (isSetFieldAdornment(adornment) && useExpr) {
-            const hook = useExpr(adornment.expression, x => x);
-            const dynamicHooks = useDynamicHooks({
-              value: hook
-            });
-            const SetFieldWrapper = useTrackedComponent(setFieldWrapper, [dynamicHooks]);
+          if (isSetFieldAdornment(adornment) && runExpression) {
             return wrapLayout(x => /*#__PURE__*/jsx(SetFieldWrapper, {
               children: x,
               parentContext: dataContext,
-              adornment: adornment
+              adornment: adornment,
+              runExpression: runExpression
             }))(rl);
-            function setFieldWrapper({
-              children,
-              adornment,
-              parentContext
-            }) {
-              const {
-                value
-              } = dynamicHooks(parentContext);
-              const fieldNode = schemaDataForFieldRef(adornment.field, parentContext.parentNode);
-              const otherField = fieldNode.control;
-              const always = !adornment.defaultOnly;
-              useControlEffect(() => [value == null ? void 0 : value.value, (otherField == null ? void 0 : otherField.value) == null], ([v]) => {
-                otherField == null || otherField.setValue(x => always || x == null ? v : x);
-              }, true);
-              return children;
-            }
           }
           if (isIconAdornment(adornment)) {
-            var _adornment$placement;
-            return appendMarkupAt((_adornment$placement = adornment.placement) != null ? _adornment$placement : AdornmentPlacement.ControlStart, /*#__PURE__*/jsx("i", {
-              className: adornment.iconClass
+            const {
+              I
+            } = renderers.html;
+            const {
+              icon,
+              placement,
+              iconClass
+            } = adornment;
+            return appendMarkupAt(placement != null ? placement : AdornmentPlacement.ControlStart, /*#__PURE__*/jsx(I, {
+              className: iconClass,
+              iconName: icon == null ? void 0 : icon.name,
+              iconLibrary: icon == null ? void 0 : icon.library
             }))(rl);
           }
           if (isAccordionAdornment(adornment)) {
@@ -1675,11 +2102,29 @@ function createDefaultAdornmentRenderer(options = {}) {
     }
   };
 }
+function SetFieldWrapper({
+  children,
+  adornment,
+  parentContext,
+  runExpression
+}) {
+  const fieldNode = schemaDataForFieldRef(adornment.field, parentContext.parentNode);
+  const otherField = fieldNode.control;
+  const always = !adornment.defaultOnly;
+  const value = useExpression(undefined, runExpression, adornment.expression, x => x);
+  useControlEffect(() => [value == null ? void 0 : value.value, (otherField == null ? void 0 : otherField.value) == null], ([v]) => {
+    otherField == null || otherField.setValue(x => always || x == null ? v : x);
+  }, true);
+  return children;
+}
 function createDefaultLabelRenderer(options) {
   const {
     className,
+    controlLabelTextClass,
+    groupLabelTextClass,
     groupLabelClass,
     controlLabelClass,
+    textClass,
     labelContainer
   } = _extends({
     labelContainer: c => c
@@ -1688,18 +2133,22 @@ function createDefaultLabelRenderer(options) {
     render: (props, labelStart, labelEnd, renderers) => {
       var _options$requiredElem;
       const {
-        Label
+        Label,
+        Span
       } = renderers.html;
       const requiredElement = (_options$requiredElem = options == null ? void 0 : options.requiredElement) != null ? _options$requiredElem : ({
         Span
       }) => /*#__PURE__*/jsx(Span, {
         children: " *"
       });
-      if (props.type == LabelType.Text) return renderers.renderText(props.label);
+      if (props.type == LabelType.Text) return /*#__PURE__*/jsx(Span, {
+        children: props.label
+      });
       return labelContainer(/*#__PURE__*/jsxs(Fragment, {
         children: [/*#__PURE__*/jsxs(Label, {
           htmlFor: props.forId,
           className: rendererClass(props.className, clsx(className, props.type === LabelType.Group && groupLabelClass, props.type === LabelType.Control && controlLabelClass)),
+          textClass: rendererClass(props.textClass, clsx(textClass, props.type === LabelType.Group && groupLabelTextClass, props.type === LabelType.Control && controlLabelTextClass)),
           children: [labelStart, renderers.renderLabelText(props.label), props.required && requiredElement(renderers.html)]
         }), labelEnd]
       }));
@@ -1708,17 +2157,127 @@ function createDefaultLabelRenderer(options) {
   };
 }
 const StandardHtmlComponents = {
-  Button: "button",
-  Label: "label",
-  I: "i",
+  Button: DefaultHtmlButtonRenderer,
+  Label: DefaultHtmlLabelRenderer,
+  I: DefaultHtmlIconRenderer,
   Span: "span",
-  Div: "div",
+  Div: DefaultHtmlDivRenderer,
   H1: "h1",
   B: "b",
-  Input: "input"
+  Input: DefaultHtmlInputRenderer
 };
+function DefaultHtmlButtonRenderer(_ref2) {
+  var _effect = useComponentTracking();
+  try {
+    let {
+        textClass,
+        className,
+        onClick,
+        nonTextContent
+      } = _ref2,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded);
+    const Comp = nonTextContent ? "div" : "button";
+    return /*#__PURE__*/jsx(Comp, _extends({
+      role: nonTextContent ? "button" : undefined,
+      onClick: onClick ? e => {
+        e.stopPropagation();
+        onClick();
+      } : undefined,
+      className: nonTextContent ? className : clsx(className, textClass)
+    }, props));
+  } finally {
+    _effect();
+  }
+}
+function DefaultHtmlInputRenderer(_ref3) {
+  var _effect2 = useComponentTracking();
+  try {
+    let {
+        textClass,
+        className,
+        onChangeValue,
+        onChangeChecked,
+        inputRef
+      } = _ref3,
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded2);
+    return /*#__PURE__*/jsx("input", _extends({
+      ref: inputRef
+    }, props, {
+      className: clsx(className, textClass),
+      onChange: onChangeValue ? e => onChangeValue(e.target.value) : onChangeChecked ? e => onChangeChecked(e.target.checked) : undefined
+    }));
+  } finally {
+    _effect2();
+  }
+}
+function DefaultHtmlDivRenderer(_ref4) {
+  var _effect3 = useComponentTracking();
+  try {
+    let {
+        text,
+        html,
+        children,
+        className,
+        textClass,
+        nativeRef,
+        inline
+      } = _ref4,
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded3);
+    const Tag = inline ? "span" : "div";
+    return /*#__PURE__*/jsx(Tag, _extends({}, props, {
+      ref: nativeRef,
+      className: clsx(className, textClass),
+      children: text != null ? text : children,
+      dangerouslySetInnerHTML: html ? {
+        __html: html
+      } : undefined
+    }));
+  } finally {
+    _effect3();
+  }
+}
+function DefaultHtmlLabelRenderer(_ref5) {
+  var _effect4 = useComponentTracking();
+  try {
+    let {
+        textClass,
+        className
+      } = _ref5,
+      props = _objectWithoutPropertiesLoose(_ref5, _excluded4);
+    return /*#__PURE__*/jsx("label", _extends({}, props, {
+      className: clsx(className, textClass)
+    }));
+  } finally {
+    _effect4();
+  }
+}
+function DefaultHtmlIconRenderer({
+  iconName,
+  iconLibrary,
+  className,
+  style
+}) {
+  var _effect5 = useComponentTracking();
+  try {
+    return iconName ? /*#__PURE__*/jsx("i", {
+      className: clsx(className, toIconClass()),
+      style: style
+    }) : undefined;
+    function toIconClass() {
+      if (!iconName) return undefined;
+      switch (iconLibrary) {
+        case IconLibrary.FontAwesome:
+          return "fa fa-" + iconName;
+        default:
+          return iconName;
+      }
+    }
+  } finally {
+    _effect5();
+  }
+}
 function createDefaultRenderers(options = {}) {
-  var _options$extraRendere, _options$renderText, _options$html;
+  var _options$extraRendere, _options$html;
   return {
     data: createDefaultDataRenderer(options.data),
     display: createDefaultDisplayRenderer(options.display),
@@ -1730,7 +2289,6 @@ function createDefaultRenderers(options = {}) {
     renderLayout: createDefaultLayoutRenderer(options.layout),
     visibility: createDefaultVisibilityRenderer(),
     extraRenderers: (_options$extraRendere = options.extraRenderers == null ? void 0 : options.extraRenderers(options)) != null ? _options$extraRendere : [],
-    renderText: (_options$renderText = options.renderText) != null ? _options$renderText : x => x,
     html: (_options$html = options.html) != null ? _options$html : StandardHtmlComponents
   };
 }
@@ -1746,7 +2304,7 @@ function createClassStyledRenderers() {
       className: "control-array"
     },
     action: {
-      className: "action"
+      buttonClass: "action"
     },
     data: {
       inputClass: "data"
@@ -1776,8 +2334,12 @@ const defaultTailwindTheme = {
   },
   group: {
     standardClassName: "flex flex-col gap-4",
-    gridClassName: "gap-x-2 gap-y-4",
+    grid: {
+      className: "flex flex-col gap-4",
+      rowClass: "flex flex-row gap-4 justify-between *:flex-1"
+    },
     flexClassName: "gap-2",
+    inlineClass: "",
     tabs: {
       className: "",
       tabListClass: "flex flex-wrap text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400",
@@ -1789,7 +2351,11 @@ const defaultTailwindTheme = {
     }
   },
   action: {
-    className: "bg-primary-500 rounded-lg p-3 text-white"
+    buttonClass: "rounded-lg p-3 text-white disabled:opacity-75 disabled:cursor-not-allowed",
+    primaryClass: "bg-primary-500",
+    secondaryClass: "bg-secondary-500",
+    iconBeforeClass: "px-2",
+    iconAfterClass: "px-2"
   },
   layout: {
     className: "flex flex-col",
@@ -1800,7 +2366,7 @@ const defaultTailwindTheme = {
     displayOnlyClass: "flex flex-row items-center gap-2",
     checkOptions: {
       className: "flex items-center gap-4",
-      entryClass: "flex gap-1 items-center"
+      entryClass: "flex items-center gap-1"
     },
     selectOptions: {
       emptyText: "<select>"
@@ -1821,8 +2387,8 @@ const defaultTailwindTheme = {
     accordion: {
       className: "flex items-center gap-2 my-2",
       titleClass: "cursor-pointer",
-      iconOpenClass: "fa fa-chevron-up",
-      iconClosedClass: "fa fa-chevron-down"
+      iconOpen: fontAwesomeIcon("chevron-up"),
+      iconClosed: fontAwesomeIcon("chevron-down")
     },
     optional: {
       checkClass: "m-2",
@@ -1833,5 +2399,5 @@ const defaultTailwindTheme = {
   }
 };
 
-export { CheckButtons, ControlInput, DataArrayRenderer, DefaultAccordion, DefaultArrayRenderer, DefaultBoolOptions, DefaultDisplay, DefaultDisplayOnly, DefaultLayout, DefaultVisibility, Fcheckbox, JsonataRenderer, OptionalEditRenderer, SelectDataRenderer, StandardHtmlComponents, ValueForFieldExtension, createAutocompleteRenderer, createButtonActionRenderer, createCheckListRenderer, createCheckboxRenderer, createClassStyledRenderers, createDefaultAdornmentRenderer, createDefaultArrayDataRenderer, createDefaultArrayRenderer, createDefaultDataRenderer, createDefaultDisplayRenderer, createDefaultGroupRenderer, createDefaultLabelRenderer, createDefaultLayoutRenderer, createDefaultRenderers, createDefaultVisibilityRenderer, createInputConversion, createJsonataRenderer, createNullToggleRenderer, createOptionalAdornment, createRadioRenderer, createSelectConversion, createSelectRenderer, createValueForFieldRenderer, defaultTailwindTheme, getAccordionState, setIncluded };
+export { CheckButtons, ControlInput, DataArrayRenderer, DefaultAccordion, DefaultArrayRenderer, DefaultBoolOptions, DefaultDisplay, DefaultDisplayOnly, DefaultHtmlButtonRenderer, DefaultHtmlDivRenderer, DefaultHtmlIconRenderer, DefaultHtmlInputRenderer, DefaultHtmlLabelRenderer, DefaultLayout, DefaultVisibility, Fcheckbox, JsonataRenderer, OptionalEditRenderer, SelectDataRenderer, StandardHtmlComponents, ValueForFieldExtension, createAutocompleteRenderer, createButtonActionRenderer, createCheckListRenderer, createCheckboxRenderer, createClassStyledRenderers, createDefaultAdornmentRenderer, createDefaultArrayDataRenderer, createDefaultArrayRenderer, createDefaultDataRenderer, createDefaultDisplayRenderer, createDefaultGroupRenderer, createDefaultLabelRenderer, createDefaultLayoutRenderer, createDefaultRenderers, createDefaultVisibilityRenderer, createElementSelectedRenderer, createInputConversion, createJsonataRenderer, createNullToggleRenderer, createOptionalAdornment, createRadioRenderer, createSelectConversion, createSelectRenderer, createValueForFieldRenderer, createWizardRenderer, defaultTailwindTheme, getAccordionState, setIncluded };
 //# sourceMappingURL=index.js.map