@react-typed-forms/schemas-html 4.2.0 → 5.0.0

package/lib/index.js

@@ -1,8 +1,8 @@
-import clsx from 'clsx';
-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 { useState, useMemo, useEffect, Fragment as Fragment$1, useId, createElement, useRef, isValidElement } from 'react';
+import clsx, { clsx as clsx$1 } from 'clsx';
+import { DisplayDataType, rendererClass, coerceToString, getOverrideClass, FieldType, createDataRenderer, fieldOptionAdornment, DataRenderType, setIncluded, useElementSelectedRenderer, createLayoutRenderer, renderLayoutParts, createGroupRenderer, GroupRenderType, DefaultFormNodeUi, fontAwesomeIcon, deepMerge, createAction, IconPlacement, ActionStyle, schemaDataForFieldRef, isTabsRenderer, isGridRenderer, isWizardRenderer, isDialogRenderer, isAccordionRenderer, isSelectChildRenderer, isFlexRenderer, isInlineRenderer, useExpression, createVisibilityRenderer, getJsonPath, ExpressionType, getLastDefinedValue, getNullToggler, mergeObjects, isArrayRenderer, createArrayActions, getLengthRestrictions, applyArrayLengthRestrictions, buildSchema, stringField, boolField, schemaForFieldRef, defaultControlForField, createSchemaTree, createFormTree, RenderForm, createSchemaDataNode, createAdornmentRenderer, getIsEditing, appendMarkupAt, AdornmentPlacement, wrapMarkup, getAllValues, ControlAdornmentType, getExternalEditData, makeSchemaDataNode, createActionRenderer, getLoadingControl, getHasMoreControl, NoOpControlActionContext, 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, 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 { useComponentTracking, formControlProps, useControl, useControlEffect, useComputed, trackedValue, RenderControl, controlValues, removeElement, setFields, newControl, Fcheckbox as Fcheckbox$1, RenderElements, RenderArrayElements } from '@react-typed-forms/core';
 import { createOverlayState, Dialog, Modal } from '@astroapps/aria-base';
 import { useAutocomplete } from '@mui/base';
 import { useOverlayTriggerState } from '@react-stately/overlays';
@@ -96,13 +96,13 @@ function _objectWithoutPropertiesLoose(r, e) {
   if (null == r) return {};
   var t = {};
   for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (e.includes(n)) continue;
+    if (-1 !== e.indexOf(n)) continue;
     t[n] = r[n];
   }
   return t;
 }
 
-const _excluded$4 = ["control", "convert", "renderer"],
+const _excluded$4 = ["control", "convert", "renderer", "errorId"],
   _excluded2$2 = ["errorText", "value", "onChange", "ref"];
 function ControlInput(_ref) {
   var _effect = useComponentTracking();
@@ -110,11 +110,13 @@ function ControlInput(_ref) {
     let {
         control,
         convert,
-        renderer
+        renderer,
+        errorId
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
     const _formControlProps = formControlProps(control),
       {
+        errorText,
         value,
         ref
       } = _formControlProps,
@@ -128,6 +130,8 @@ function ControlInput(_ref) {
       inputRef: ref,
       type: convert[0],
       value: textValue.value,
+      "aria-describedby": !!errorText ? errorId : undefined,
+      "aria-invalid": !!errorText || undefined,
       onChangeValue: e => {
         textValue.value = e;
         const converted = convert[1](e);
@@ -173,7 +177,8 @@ function createInputConversion(ft) {
 const _excluded$3 = ["state", "options", "className", "convert", "required", "emptyText", "requiredText", "readonly"];
 function createSelectRenderer(options = {}) {
   return createDataRenderer((props, asArray) => {
-    var _props$options;
+    var _props$options, _renderOptions$requir;
+    const renderOptions = props.definition.renderOptions;
     return /*#__PURE__*/jsx(SelectDataRenderer, {
       className: rendererClass(props.className, options.className),
       state: props.control,
@@ -182,7 +187,7 @@ function createSelectRenderer(options = {}) {
       options: (_props$options = props.options) != null ? _props$options : [],
       required: props.required,
       emptyText: options.emptyText,
-      requiredText: options.requiredText,
+      requiredText: (_renderOptions$requir = renderOptions == null ? void 0 : renderOptions.requiredText) != null ? _renderOptions$requir : options.requiredText,
       convert: createSelectConversion(props.field.type)
     });
   }, {
@@ -251,7 +256,7 @@ function createSelectConversion(ft) {
 const _excluded$2 = ["control", "type", "notValue", "renderer"],
   _excluded2$1 = ["value", "onChange", "errorText", "ref"];
 function createRadioRenderer(options = {}) {
-  return createDataRenderer((p, renderer) => /*#__PURE__*/jsx(CheckButtons, _extends({
+  return createDataRenderer((p, renderer) => /*#__PURE__*/jsx(renderer.html.CheckButtons, _extends({
     classes: options,
     controlClasses: p.renderOptions
   }, p, {
@@ -270,7 +275,7 @@ function createRadioRenderer(options = {}) {
   });
 }
 function createCheckListRenderer(options = {}) {
-  return createDataRenderer((p, renderer) => /*#__PURE__*/jsx(CheckButtons, _extends({
+  return createDataRenderer((p, renderer) => /*#__PURE__*/jsx(renderer.html.CheckButtons, _extends({
     classes: options,
     controlClasses: p.renderOptions
   }, p, {
@@ -292,80 +297,6 @@ function createCheckListRenderer(options = {}) {
     renderType: DataRenderType.CheckList
   });
 }
-function CheckButtons({
-  control,
-  options,
-  readonly,
-  className,
-  id,
-  type,
-  isChecked,
-  setChecked,
-  entryAdornment,
-  classes,
-  controlClasses = {},
-  renderer
-}) {
-  var _effect = useComponentTracking();
-  try {
-    const {
-      Button,
-      Input,
-      Label,
-      Div
-    } = renderer.html;
-    const {
-      disabled
-    } = control;
-    const name = "r" + control.uniqueId;
-    return /*#__PURE__*/jsx(Div, {
-      className: className,
-      id: id,
-      children: /*#__PURE__*/jsx(RenderArrayElements, {
-        array: options == null ? void 0 : options.filter(x => x.value != null),
-        children: (o, i) => {
-          const checked = useComputed(() => isChecked(control, o)).value;
-          const selOrUnsel = checked ? rendererClass(controlClasses == null ? void 0 : controlClasses.selectedClass, classes.selectedClass) : rendererClass(controlClasses == null ? void 0 : controlClasses.notSelectedClass, classes.notSelectedClass);
-          return /*#__PURE__*/jsxs(Button, {
-            className: clsx(rendererClass(controlClasses == null ? void 0 : controlClasses.entryWrapperClass, classes.entryWrapperClass), selOrUnsel),
-            onClick: () => !readonly && setChecked(control, o, !checked),
-            children: [/*#__PURE__*/jsxs(Div, {
-              className: classes.entryClass,
-              children: [/*#__PURE__*/jsx(Input, {
-                id: name + "_" + i,
-                className: classes.checkClass,
-                type: type,
-                name: name,
-                readOnly: readonly,
-                disabled: disabled,
-                checked: checked,
-                onChangeChecked: x => {
-                  !readonly && setChecked(control, o, x);
-                }
-              }), /*#__PURE__*/jsx(Label, {
-                className: classes.labelClass,
-                htmlFor: name + "_" + i,
-                children: o.name
-              })]
-            }), entryAdornment == null ? void 0 : entryAdornment(o, i, checked)]
-          });
-        }
-      })
-    });
-  } finally {
-    _effect();
-  }
-}
-function setIncluded(array, elem, included) {
-  const already = array.includes(elem);
-  if (included === already) {
-    return array;
-  }
-  if (included) {
-    return [...array, elem];
-  }
-  return array.filter(e => e !== elem);
-}
 function createCheckboxRenderer(options = {}) {
   return createDataRenderer((props, renderer) => p => _extends({}, p, {
     label: undefined,
@@ -398,24 +329,13 @@ function CheckBoxSelected({
   renderer,
   options
 }) {
-  var _effect2 = useComponentTracking();
+  var _effect = useComponentTracking();
   try {
+    var _p$label;
     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));
-    });
+    const selControl = useElementSelectedRenderer(props);
     return /*#__PURE__*/jsxs(Div, {
       className: rendererClass(props.className, options.entryClass),
       children: [/*#__PURE__*/jsx(Fcheckbox, {
@@ -424,10 +344,10 @@ function CheckBoxSelected({
         style: props.style,
         className: options.checkClass,
         renderer: renderer
-      }), p.label && renderer.renderLabel(p.label, undefined, undefined)]
+      }), ((_p$label = p.label) == null ? void 0 : _p$label.label) && renderer.renderLabel(p.label, undefined, undefined)]
     });
   } finally {
-    _effect2();
+    _effect();
   }
 }
 function CheckBox({
@@ -436,7 +356,7 @@ function CheckBox({
   renderer,
   options
 }) {
-  var _effect3 = useComponentTracking();
+  var _effect2 = useComponentTracking();
   try {
     const {
       Div
@@ -452,11 +372,11 @@ function CheckBox({
       }), p.label && renderer.renderLabel(p.label, undefined, undefined)]
     });
   } finally {
-    _effect3();
+    _effect2();
   }
 }
 function Fcheckbox(_ref) {
-  var _effect4 = useComponentTracking();
+  var _effect3 = useComponentTracking();
   try {
     let {
         control,
@@ -483,7 +403,7 @@ function Fcheckbox(_ref) {
       type: type
     }, others));
   } finally {
-    _effect4();
+    _effect3();
   }
 }
 
@@ -511,8 +431,9 @@ function DefaultLayout({
       Span
     }
   },
-  renderError = e => e && /*#__PURE__*/jsx(Div, {
+  renderError = (e, errorId) => e && /*#__PURE__*/jsx(Div, {
     children: /*#__PURE__*/jsx(Span, {
+      id: errorId,
       className: errorClass,
       children: e
     })
@@ -522,7 +443,8 @@ function DefaultLayout({
     controlStart,
     label,
     children,
-    errorControl
+    errorControl,
+    errorId
   }
 }) {
   var _effect = useComponentTracking();
@@ -530,7 +452,7 @@ function DefaultLayout({
     const ec = errorControl;
     const errorText = ec && ec.touched ? ec.error : undefined;
     return /*#__PURE__*/jsxs(Fragment, {
-      children: [label, controlStart, children, renderError(errorText), controlEnd]
+      children: [label, controlStart, children, renderError(errorText, errorId), controlEnd]
     });
   } finally {
     _effect();
@@ -551,7 +473,10 @@ function DefaultDisplayOnly({
   var _effect = useComponentTracking();
   try {
     var _ref;
-    const text = state.display != null ? state.display : (_ref = schemaInterface.isEmptyValue(dataNode.schema.field, dataNode.control.value) ? emptyText : schemaInterface.textValueForData(dataNode)) != null ? _ref : "";
+    const {
+      display
+    } = state.resolved;
+    const text = display != null ? display : (_ref = schemaInterface.isEmptyValue(dataNode.schema.field, dataNode.control.value) ? emptyText : schemaInterface.textValueForData(dataNode)) != null ? _ref : "";
     const {
       Div
     } = renderer.html;
@@ -567,110 +492,33 @@ function DefaultDisplayOnly({
   }
 }
 
-function DefaultAccordion({
-  children,
-  accordion,
-  contentStyle,
-  contentClassName,
-  designMode,
-  iconOpen,
-  iconClosed,
-  className,
-  renderTitle = t => t,
-  renderToggler,
-  renderers,
-  titleClass,
-  useCss,
-  dataContext
-}) {
-  var _effect = useComponentTracking();
-  try {
-    var _dataContext$dataNode;
-    const {
-      Button,
-      I,
-      Div,
-      Label
-    } = renderers.html;
-    const dataControl = ((_dataContext$dataNode = dataContext.dataNode) != null ? _dataContext$dataNode : dataContext.parentNode).control;
-    const open = useControl(!!accordion.defaultExpanded);
-    if (dataControl && !dataControl.meta.accordionState) {
-      dataControl.meta.accordionState = open;
-    }
-    const isOpen = open.value;
-    const fullContentStyle = isOpen || designMode ? contentStyle : _extends({}, contentStyle, {
-      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
-      }), currentIcon && /*#__PURE__*/jsx(I, {
-        iconLibrary: currentIcon.library,
-        iconName: currentIcon.name
-      })]
-    });
-    return /*#__PURE__*/jsxs(Fragment, {
-      children: [toggler, (useCss || isOpen || designMode) && /*#__PURE__*/jsx(Div, {
-        style: fullContentStyle,
-        className: contentClassName,
-        children: children
-      })]
-    });
-  } finally {
-    _effect();
-  }
-}
-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) => {
-    return /*#__PURE__*/jsx(VisibleChildrenRenderer, {
-      render: renderAllTabs,
-      dataContext: p.dataContext,
-      parentFormNode: p.formNode,
-      parent: p,
-      props: {
-        groupProps: p,
-        tabOptions: p.renderOptions,
-        options: options
-      }
+    return /*#__PURE__*/jsx(TabsRenderer, {
+      groupProps: p,
+      tabOptions: p.renderOptions,
+      options: options
     });
   }, {
     renderType: GroupRenderType.Tabs
   });
-  function renderAllTabs({
-    options,
-    groupProps: {
-      designMode,
-      formNode,
-      className,
-      renderChild,
-      state
-    },
-    tabOptions
-  }, isVisible) {
-    var _tabIndex$value;
-    const tabIndex = state.meta.fields.tabIndex.as();
+}
+function TabsRenderer({
+  options,
+  groupProps: {
+    designMode,
+    formNode,
+    className,
+    renderChild
+  },
+  tabOptions
+}) {
+  var _effect = useComponentTracking();
+  try {
+    const tabIndex = useControl(0);
+    useEffect(() => {
+      formNode.attachUi(new TabUi(tabIndex, formNode));
+    }, [formNode, tabIndex]);
     const {
       tabClass,
       labelClass,
@@ -679,10 +527,10 @@ function createTabsRenderer(options = {}) {
       activeClass,
       contentClass
     } = options;
-    const currentTab = (_tabIndex$value = tabIndex.value) != null ? _tabIndex$value : 0;
+    const currentTab = tabIndex.value;
     return designMode ? /*#__PURE__*/jsx(Fragment, {
-      children: formNode.getChildNodes().map((x, i) => renderTabs([x], i))
-    }) : renderTabs(formNode.getChildNodes().filter((x, i) => isVisible(i)), 0);
+      children: formNode.children.map((x, i) => renderTabs([x], i))
+    }) : renderTabs(formNode.children.filter((x, i) => x.visible), 0);
     function renderTabs(tabs, key) {
       return /*#__PURE__*/jsxs("div", {
         className: rendererClass(className, options.className),
@@ -698,52 +546,81 @@ function createTabsRenderer(options = {}) {
           }, i))
         }), /*#__PURE__*/jsx("div", {
           className: rendererClass(tabOptions.contentClass, contentClass),
-          children: renderChild(currentTab, tabs[currentTab])
+          children: renderChild(tabs[currentTab])
         })]
       }, key);
     }
+  } finally {
+    _effect();
+  }
+}
+class TabUi extends DefaultFormNodeUi {
+  constructor(tabIndex, node) {
+    super(node);
+    this.tabIndex = void 0;
+    this.tabIndex = tabIndex;
+  }
+  ensureChildVisible(childIndex) {
+    this.tabIndex.value = childIndex;
+    super.ensureChildVisible(childIndex);
   }
 }
 
 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
+  return createGroupRenderer((props, formRenderer) => /*#__PURE__*/jsx(GridRenderer, {
+    groupProps: props,
+    formRenderer: formRenderer,
+    options: options
   }), {
     renderType: GroupRenderType.Grid
   });
-  function renderGrid(props, isChildVisible) {
-    var _props$defaultOptions, _ref, _gridOptions$columns;
-    const filteredChildren = props.formNode.getChildNodes().filter((x, i) => isChildVisible(i));
+}
+function GridRenderer(props) {
+  var _effect = useComponentTracking();
+  try {
+    var _props$options, _ref, _gridOptions$columns;
+    const {
+      formNode,
+      renderOptions,
+      renderChild,
+      className
+    } = props.groupProps;
+    const filteredChildren = formNode.children.filter((x, i) => x.visible);
     const {
       Div
     } = props.formRenderer.html;
-    const defaults = (_props$defaultOptions = props.defaultOptions) != null ? _props$defaultOptions : {};
-    const gridOptions = props.renderOptions;
+    const defaults = (_props$options = props.options) != null ? _props$options : {};
+    const gridOptions = 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));
+    const allChildren = filteredChildren.map(x => renderChild(x));
+    const cellClass = gridOptions.cellClass ? getCellClassNames(gridOptions.cellClass) : getCellClassNames(defaults.cellClass);
     // 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),
+      className: rendererClass(className, defaults.className),
       children: rows.map((row, rowIndex) => /*#__PURE__*/jsx(Div, {
         className: rendererClass(gridOptions.rowClass, defaults.rowClass),
-        children: row
+        children: row.map((cell, cellIndex) => {
+          var _cellClass$at;
+          return /*#__PURE__*/jsx(Div, {
+            className: (_cellClass$at = cellClass == null ? void 0 : cellClass.at(cellIndex)) != null ? _cellClass$at : "flex-1",
+            children: cell
+          }, cellIndex);
+        })
       }, rowIndex))
     });
+  } finally {
+    _effect();
   }
 }
+function getCellClassNames(cellClass) {
+  return cellClass == null ? void 0 : cellClass.split(",");
+}
 
-const defaultOptions = {
+const defaultOptions$1 = {
   classes: {
     className: undefined,
     contentClass: "min-h-96 overflow-auto",
@@ -779,120 +656,123 @@ function defaultNavigationRender({
   }
 }
 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
+  return createGroupRenderer((props, formRenderer) => /*#__PURE__*/jsx(WizardRenderer, {
+    groupProps: props,
+    formRenderer: formRenderer,
+    options: options
   }), {
     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++;
+function WizardRenderer({
+  groupProps: props,
+  formRenderer,
+  options
+}) {
+  var _effect = useComponentTracking();
+  try {
+    const mergedOptions = deepMerge(options != null ? options : {}, defaultOptions$1);
+    const {
+      classes: {
+        className,
+        contentClass,
+        navContainerClass
+      },
+      actions: {
+        nextText,
+        nextIcon,
+        prevText,
+        prevIcon,
+        nextValidate,
+        prevValidate
+      },
+      renderNavigation
+    } = mergedOptions;
+    const {
+      formNode,
+      designMode,
+      renderChild
+    } = props;
+    const {
+      html: {
+        Div
       }
+    } = formRenderer;
+    const childrenLength = formNode.getChildCount();
+    const page = useControl(0);
+    const currentPage = page.value;
+    const isValid = useComputed(() => isPageValid());
+    const next = createAction("nav", () => nav(1, nextValidate), nextText, {
+      hidden: !designMode && nextVisibleInDirection(1) == null,
+      disabled: !isValid.value,
+      icon: nextIcon,
+      iconPlacement: IconPlacement.AfterText
+    });
+    const prev = createAction("nav", () => nav(-1, prevValidate), prevText, {
+      disabled: !designMode && nextVisibleInDirection(-1) == null,
+      icon: prevIcon
+    });
+    const navElement = renderNavigation({
+      formRenderer,
+      page: countVisibleUntil(currentPage),
+      totalPages: countVisibleUntil(childrenLength),
+      prev,
+      next: next,
+      className: navContainerClass,
+      validatePage: async () => validatePage()
+    });
+    const content = designMode ? /*#__PURE__*/jsx(Div, {
+      children: formNode.children.map(child => renderChild(child))
+    }) : currentPage < childrenLength ? /*#__PURE__*/jsx(Div, {
+      className: contentClass,
+      children: renderChild(formNode.getChild(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 < childrenLength; i++) {
+        if (formNode.getChild(i).visible) {
+          count++;
+        }
+      }
+      return count;
     }
-    return count;
-  }
-  function nav(dir, validate) {
-    if (validate && !validatePage()) {
-      return;
+    function nav(dir, validate) {
+      if (validate && !validatePage()) {
+        return;
+      }
+      const next = nextVisibleInDirection(dir);
+      if (next != null) {
+        page.value = next;
+      }
     }
-    const next = nextVisibleInDirection(dir);
-    if (next != null) {
-      page.value = next;
+    function nextVisibleInDirection(dir) {
+      let next = currentPage + dir;
+      while (next >= 0 && next < childrenLength) {
+        if (formNode.getChild(next).visible) {
+          return next;
+        }
+        next += dir;
+      }
+      return null;
     }
-  }
-  function nextVisibleInDirection(dir) {
-    let next = currentPage + dir;
-    while (next >= 0 && next < children.length) {
-      if (allVisible[next]) {
-        return next;
+    function validatePage() {
+      const pageNode = formNode.getChild(currentPage);
+      if (pageNode) {
+        const valid = pageNode.validate();
+        pageNode.setTouched(true);
+        return valid;
       }
-      next += dir;
+      return false;
     }
-    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;
+    function isPageValid() {
+      return formNode.getChild(currentPage).valid;
+    }
+  } finally {
+    _effect();
   }
 }
 
@@ -938,17 +818,18 @@ function DefaultDialogRenderer({
           return () => overlayState.open();
       }
     };
-    const triggerChildren = props.formNode.getChildNodes().filter(x => x.definition.placement === "trigger");
+    const allChildren = props.formNode.children;
+    const triggerChildren = allChildren.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, {
+      children: allChildren.filter(x => !x.definition.placement || x.definition.placement === "dialog").map((x, i) => props.renderChild(x, {
         actionOnClick
       }))
     });
     return /*#__PURE__*/jsxs(Fragment, {
-      children: [triggerChildren.map((x, i) => props.renderChild(i, x, {
+      children: [triggerChildren.map((x, i) => props.renderChild(x, {
         actionOnClick
       })), props.designMode ? designContent() : open.value && /*#__PURE__*/jsx(Modal, {
         state: overlayState,
@@ -972,11 +853,140 @@ function DefaultDialogRenderer({
   }
 }
 
-function createDefaultGroupRenderer(options) {
+function DefaultAccordion({
+  openCtrl,
+  children,
+  contentStyle,
+  className,
+  contentClassName,
+  designMode,
+  renderers,
+  dataContext,
+  title,
+  options,
+  defaultExpanded,
+  isGroup,
+  titleTextClass
+}) {
+  var _effect = useComponentTracking();
+  try {
+    var _dataContext$dataNode;
+    const {
+      iconOpen,
+      iconClosed,
+      togglerClass,
+      renderTitle = t => t,
+      renderToggler,
+      useCss
+    } = options != null ? options : {};
+    const panelId = useId();
+    const {
+      Button,
+      I,
+      Div,
+      Label
+    } = renderers.html;
+    const dataControl = ((_dataContext$dataNode = dataContext.dataNode) != null ? _dataContext$dataNode : dataContext.parentNode).control;
+    const open = useControl(!!defaultExpanded, {
+      use: openCtrl
+    });
+    if (dataControl && !dataControl.meta.accordionState) {
+      dataControl.meta.accordionState = open;
+    }
+    const isOpen = open.value;
+    const fullContentStyle = isOpen || designMode ? contentStyle : _extends({}, contentStyle, {
+      display: "none"
+    });
+    const currentIcon = isOpen ? iconOpen : iconClosed;
+    const accordionClassName = rendererClass(className, options == null ? void 0 : options.className);
+    const accordionTitleTextClass = rendererClass(titleTextClass, options == null ? void 0 : options.titleTextClass);
+    const accordionTitle = isGroup ? title : /*#__PURE__*/jsx(Label, {
+      textClass: accordionTitleTextClass,
+      children: title
+    });
+    const toggler = renderToggler ? renderToggler(open, renderTitle(title, open)) : /*#__PURE__*/jsxs(Button, {
+      className: accordionClassName,
+      notWrapInText: true,
+      onClick: () => open.setValue(x => !x),
+      "aria-expanded": isOpen,
+      "aria-controls": panelId,
+      children: [accordionTitle, currentIcon && /*#__PURE__*/jsx(I, {
+        className: togglerClass,
+        iconLibrary: currentIcon.library,
+        iconName: currentIcon.name
+      })]
+    });
+    // The content class name not currently used since if the content is wrapped in a group, the group will handle the styling
+    return /*#__PURE__*/jsxs(Fragment, {
+      children: [toggler, (useCss || isOpen || designMode) && /*#__PURE__*/jsx(Div, {
+        id: panelId,
+        role: "region",
+        style: fullContentStyle,
+        className: contentClassName,
+        children: children
+      })]
+    });
+  } finally {
+    _effect();
+  }
+}
+function getAccordionState(c) {
+  return c.meta.accordionState;
+}
+function createAccordionGroupRenderer(options) {
+  return createGroupRenderer((p, renderer) => /*#__PURE__*/jsx(AccordionGroupRenderer, {
+    groupProps: p,
+    renderer: renderer,
+    options: options
+  }), {
+    renderType: GroupRenderType.Accordion
+  });
+}
+function AccordionGroupRenderer({
+  groupProps,
+  renderer,
+  options
+}) {
+  var _effect2 = useComponentTracking();
+  try {
+    const allChildren = groupProps.formNode.children;
+    const titleChildren = allChildren.filter(x => x.definition.placement === "title");
+    const contentChildren = allChildren.filter(x => x.definition.placement !== "title");
+    const {
+      expandStateField,
+      defaultExpanded
+    } = groupProps.renderOptions;
+    const expandStateFieldNode = expandStateField ? schemaDataForFieldRef(expandStateField, groupProps.dataContext.parentNode) : null;
+    const open = expandStateFieldNode == null ? void 0 : expandStateFieldNode.control.as();
+    return /*#__PURE__*/jsx(DefaultAccordion, {
+      openCtrl: open,
+      isGroup: true,
+      options: options,
+      children: /*#__PURE__*/jsx(Fragment, {
+        children: contentChildren.map(x => groupProps.renderChild(x))
+      }),
+      title: /*#__PURE__*/jsx(Fragment, {
+        children: titleChildren.map(x => groupProps.renderChild(x))
+      }),
+      renderers: renderer,
+      className: groupProps.className,
+      dataContext: groupProps.dataContext,
+      designMode: groupProps.designMode,
+      defaultExpanded: defaultExpanded,
+      contentStyle: groupProps.style
+    });
+  } finally {
+    _effect2();
+  }
+}
+
+function createDefaultGroupRenderer(options, adornmentOptions) {
+  var _options$accordion;
   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 accordionRenderer = createAccordionGroupRenderer((_options$accordion = options == null ? void 0 : options.accordion) != null ? _options$accordion : adornmentOptions == null ? void 0 : adornmentOptions.accordion);
   const {
     className,
     standardClassName,
@@ -1004,10 +1014,14 @@ function createDefaultGroupRenderer(options) {
     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 (isAccordionRenderer(renderOptions)) return accordionRenderer.render(props, renderer);
     if (isSelectChildRenderer(renderOptions) && !props.designMode) {
-      return /*#__PURE__*/jsx(SelectChildGroupRenderer, _extends({}, props, {
-        renderOptions: renderOptions
-      }));
+      return /*#__PURE__*/jsx(SelectChildGroupRenderer, {
+        props: _extends({}, props, {
+          renderOptions
+        }),
+        renderer: renderer
+      });
     }
     const {
       style,
@@ -1021,7 +1035,7 @@ function createDefaultGroupRenderer(options) {
       Div
     } = renderer.html;
     const inline = renderOptions.type == GroupRenderType.Inline;
-    const children = formNode.getChildNodes().map((c, i) => renderChild(i, c, {
+    const children = formNode.children.map((c, i) => renderChild(c, {
       inline
     }));
     return /*#__PURE__*/jsx(Div, {
@@ -1038,7 +1052,7 @@ function createDefaultGroupRenderer(options) {
         formNode,
         renderChild
       } = props;
-      const children = formNode.getChildNodes().map((c, i) => renderChild(i, c));
+      const children = formNode.children.map(c => renderChild(c));
       return layout => {
         return _extends({}, layout, {
           inline: true,
@@ -1053,18 +1067,24 @@ function createDefaultGroupRenderer(options) {
     render: renderLayout
   };
 }
-function SelectChildGroupRenderer(props) {
+function SelectChildGroupRenderer({
+  props,
+  renderer
+}) {
   var _effect = useComponentTracking();
   try {
+    const {
+      Div
+    } = renderer.html;
     const {
       runExpression,
       renderOptions
     } = 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])
+    const childCount = props.formNode.getChildCount();
+    return /*#__PURE__*/jsx(Div, {
+      children: typeof childIndex === "number" && childIndex < childCount && childIndex >= 0 && props.renderChild(props.formNode.getChild(childIndex))
     });
   } finally {
     _effect();
@@ -1135,13 +1155,12 @@ function JsonataRenderer({
 }) {
   var _effect = useComponentTracking();
   try {
-    const sdn = dataNode.elementIndex != null ? dataNode : dataContext.parentNode;
-    const bindings = useComputed(() => _extends({}, dataContext.variables, {
-      value: control.value,
+    const bindings = changes => ({
+      value: trackedValue(control, changes),
       readonly,
       disabled: control.disabled,
       dataPath: getJsonPath(dataNode)
-    }));
+    });
     const rendered = useExpression("", runExpression, {
       type: ExpressionType.Jsonata,
       expression: renderOptions.expression
@@ -1217,8 +1236,7 @@ function DataArrayRenderer({
       className,
       style,
       dataContext,
-      formNode,
-      getChildState
+      formNode
     } = dataProps;
     const {
       addText,
@@ -1226,29 +1244,10 @@ function DataArrayRenderer({
       noRemove,
       noReorder,
       removeText,
-      editExternal
+      editExternal,
+      childOverrideClass
     } = 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, {
+    const arrayProps = _extends({}, createArrayActions(control.as(), () => formNode.getChildCount(), field, {
       addText,
       removeText,
       noAdd,
@@ -1258,46 +1257,20 @@ function DataArrayRenderer({
       designMode,
       editExternal
     }), {
+      childOverrideClass,
       required,
-      renderElement: (i, wrap) => /*#__PURE__*/jsx(RenderEntry, {
-        index: i,
-        renderChildElement: renderChildElement,
-        dataContext: dataContext,
-        wrap: wrap,
-        isChildHidden: dataNode => childNodes.every(x => getChildState(x, dataNode).hidden)
-      }),
+      renderElement: (i, wrap) => {
+        const n = formNode.getChild(i);
+        return !n || !n.visible ? undefined : wrap(n.childKey, renderChild(n));
+      },
       className: className ? className : undefined,
       style
     }, getLengthRestrictions(definition));
     return renderers.renderArray(arrayProps);
-    function renderChildElement(i, elementNode) {
-      return renderChild(elementNode.control.uniqueId, childNode, {
-        parentDataNode: elementNode
-      });
-    }
   } finally {
     _effect();
   }
 }
-/**
- * @trackControls
- */
-function RenderEntry({
-  index: i,
-  renderChildElement,
-  wrap,
-  isChildHidden,
-  dataContext
-}) {
-  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 {
     render: (props, {
@@ -1311,7 +1284,7 @@ function createDefaultArrayRenderer(options) {
   };
 }
 function DefaultArrayRenderer(props) {
-  var _effect3 = useComponentTracking();
+  var _effect2 = useComponentTracking();
   try {
     const {
       renderElement,
@@ -1319,9 +1292,10 @@ function DefaultArrayRenderer(props) {
       removableClass,
       childClass,
       removableChildClass,
+      childOverrideClass,
       removeActionClass,
       addActionClass,
-      arrayControl,
+      getElementCount,
       renderAction,
       style,
       editAction,
@@ -1337,28 +1311,29 @@ function DefaultArrayRenderer(props) {
       style: style,
       children: [/*#__PURE__*/jsx(Div, {
         className: clsx(className, removeAction && removableClass),
-        children: /*#__PURE__*/jsx(RenderElements, {
-          control: arrayControl,
-          children: (_, x) => renderElement(x, children => removeAction || editAction ? /*#__PURE__*/jsxs(Fragment, {
+        children: Array.from({
+          length: getElementCount()
+        }, (_, x) => /*#__PURE__*/jsx(RenderControl, {
+          render: () => renderElement(x, (key, children) => removeAction || editAction ? /*#__PURE__*/jsxs(Fragment$1, {
             children: [/*#__PURE__*/jsx(Div, {
-              className: clsx(childClass, removableChildClass),
+              className: clsx(rendererClass(childOverrideClass, childClass), removableChildClass),
               children: children
             }), /*#__PURE__*/jsxs(Div, {
               className: removeActionClass,
               children: [editAction && renderAction(editAction(x)), removeAction && renderAction(removeAction(x))]
             })]
-          }) : /*#__PURE__*/jsx(Div, {
-            className: childClass,
+          }, key) : /*#__PURE__*/jsx(Div, {
+            className: rendererClass(childOverrideClass, childClass),
             children: children
-          }))
-        })
+          }, key))
+        }, x))
       }), addAction && /*#__PURE__*/jsx(Div, {
         className: addActionClass,
         children: renderAction(addAction)
       })]
     });
   } finally {
-    _effect3();
+    _effect2();
   }
 }
 
@@ -1672,12 +1647,16 @@ function ValueForField({
         hideTitle: true
       });
       const rootSchema = createSchemaTree([adjustedField]).rootNode;
-      return [control, rootSchema];
+      return [createFormTree([control]), rootSchema];
     }, [schemaField]);
-    const Render = useControlRendererComponent(controls, renderer, {
-      disabled: control.disabled
-    }, makeSchemaDataNode(rootSchema, value));
-    return /*#__PURE__*/jsx(Render, {});
+    return /*#__PURE__*/jsx(RenderForm, {
+      form: controls.rootNode,
+      renderer: renderer,
+      data: createSchemaDataNode(rootSchema, value),
+      options: {
+        disabled: control.disabled
+      }
+    });
   } finally {
     _effect();
   }
@@ -1699,7 +1678,7 @@ function createOptionalAdornment(options = {}) {
     return {
       apply: rl => {
         var _ref, _adornment$placement;
-        if (props.formOptions.readonly) return rl;
+        if (props.formNode.readonly) return rl;
         if (!options.hideEdit && adornment.editSelectable) appendMarkupAt((_ref = (_adornment$placement = adornment.placement) != null ? _adornment$placement : options.defaultPlacement) != null ? _ref : AdornmentPlacement.LabelStart, /*#__PURE__*/jsx(Fcheckbox$1, {
           control: editing,
           className: options.checkClass
@@ -1796,6 +1775,17 @@ function MultilineTextfield({
   }
 }
 
+// ============================================================================
+// ADDITIONAL CONSTANTS
+// ============================================================================
+const DefaultBoolOptions = [{
+  name: "Yes",
+  value: true
+}, {
+  name: "No",
+  value: false
+}];
+
 function createArrayElementRenderer(options = {}) {
   return createDataRenderer((props, formRenderer) => /*#__PURE__*/jsx(ArrayElementRenderer, {
     dataProps: props,
@@ -1829,25 +1819,21 @@ function ArrayElementRenderer({
     });
     if (designMode || extData.value !== undefined) {
       const parentDataNode = makeSchemaDataNode(dataProps.dataNode.schema, extData.fields.data);
-      const elementGroup = formNode.createChildNode("group", {
-        type: ControlDefinitionType.Group,
-        groupOptions: {
-          type: GroupRenderType.Standard,
-          hideTitle: true
-        },
-        children: formNode.getResolvedChildren()
-      });
-      const editContent = /*#__PURE__*/jsxs("div", {
+      // TODO
+      // const elementGroup: FormNode = formNode.createChildNode("group", {
+      //   type: ControlDefinitionType.Group,
+      //   groupOptions: { type: GroupRenderType.Standard, hideTitle: true },
+      //   children: formNode.getResolvedChildren(),
+      // } as GroupedControlsDefinition);
+      const editContent = /*#__PURE__*/jsx("div", {
         className: rendererClass(dataProps.className, options.className),
-        children: [renderChild("", elementGroup, {
-          parentDataNode
-        }), /*#__PURE__*/jsx("div", {
+        children: /*#__PURE__*/jsx("div", {
           className: options.actionsClass,
           children: /*#__PURE__*/jsx(RenderElements, {
             control: extData.fields.actions,
             children: c => formRenderer.renderAction(applyValidation(c.value))
           })
-        })]
+        })
       });
       if (renderOptions.showInline || designMode) return editContent;
       return /*#__PURE__*/jsx(Modal, {
@@ -1857,11 +1843,16 @@ function ArrayElementRenderer({
         })
       });
       function runValidation(onClick) {
-        let hasErrors = false;
-        visitFormDataInContext(parentDataNode, elementGroup, validationVisitor(() => {
-          hasErrors = true;
-        }));
-        if (!hasErrors) onClick();
+        // TODO
+        // let hasErrors = false;
+        // visitFormDataInContext(
+        //   parentDataNode,
+        //   elementGroup,
+        //   validationVisitor(() => {
+        //     hasErrors = true;
+        //   }),
+        // );
+        // if (!hasErrors) onClick();
       }
       function applyValidation({
         action,
@@ -1879,7 +1870,7 @@ function ArrayElementRenderer({
 
 function createButtonActionRenderer(actionId, options = {}) {
   return createActionRenderer(actionId, (props, renderer) => {
-    var _props$icon, _ref, _props$iconPlacement, _options$renderConten;
+    var _props$icon, _ref, _props$iconPlacement, _ref2, _props$iconPlacement2, _options$renderConten;
     const {
       key,
       onClick,
@@ -1892,10 +1883,15 @@ function createButtonActionRenderer(actionId, options = {}) {
       textClass,
       actionStyle,
       inline,
-      actionContent
+      actionContent,
+      busy
     } = 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 busyIcon = props.busy ? options.busyIcon : undefined;
+    const stdIcon = (_props$icon = props.icon) != null && _props$icon.name ? props.icon : options.icon;
+    const icon = busyIcon != null ? busyIcon : stdIcon;
+    const stdIconPlacement = (_ref = (_props$iconPlacement = props.iconPlacement) != null ? _props$iconPlacement : options.iconPlacement) != null ? _ref : IconPlacement.BeforeText;
+    const busyPlacement = (_ref2 = (_props$iconPlacement2 = props.iconPlacement) != null ? _props$iconPlacement2 : options.busyIconPlacement) != null ? _ref2 : IconPlacement.ReplaceText;
+    const iconPlacement = busyIcon ? busyPlacement : stdIconPlacement;
     const {
       Button,
       I,
@@ -1904,12 +1900,12 @@ function createButtonActionRenderer(actionId, options = {}) {
     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 textClassNames = rendererClass(textClass, isLink ? options.linkTextClass : rendererClass(options.textClass, actionStyle == ActionStyle.Secondary ? options.secondaryTextClass : options.primaryTextClass));
     const iconElement = icon && /*#__PURE__*/jsx(I, {
       iconName: icon.name,
       iconLibrary: icon.library,
-      className: rendererClass(textClass, iconPlacement == IconPlacement.BeforeText ? options.iconBeforeClass : options.iconAfterClass)
+      className: rendererClass(textClassNames, 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
@@ -1925,24 +1921,188 @@ function createButtonActionRenderer(actionId, options = {}) {
       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: (_options$renderConten = options.renderContent == null ? void 0 : options.renderContent(actionText, actionId, actionData, busy)) != null ? _options$renderConten : /*#__PURE__*/jsxs(Fragment, {
         children: [iconPlacement == IconPlacement.BeforeText && iconElement, iconPlacement != IconPlacement.ReplaceText && textElement, iconPlacement != IconPlacement.BeforeText && iconElement]
       })
     }, key);
   });
 }
 
+const defaultOptions = {
+  spinnerClass: "flex justify-center my-6",
+  className: "flex flex-row",
+  loadingIcon: undefined,
+  iconClass: "text-[36px]"
+};
+function createScrollListRenderer(options) {
+  return createDataRenderer((p, renderer) => /*#__PURE__*/jsx(ScrollListRenderer, {
+    dataProps: p,
+    renderer: renderer,
+    options: options
+  }), {
+    collection: true,
+    renderType: DataRenderType.ScrollList
+  });
+}
+function ScrollListRenderer({
+  dataProps: {
+    formNode,
+    renderChild,
+    dataNode,
+    actionOnClick,
+    renderOptions,
+    dataContext,
+    className
+  },
+  renderer,
+  options
+}) {
+  var _effect = useComponentTracking();
+  try {
+    const {
+      bottomActionId
+    } = renderOptions;
+    const loadingControl = getLoadingControl(dataNode.control);
+    const hasMoreControl = getHasMoreControl(dataNode.control);
+    const handler = bottomActionId ? actionOnClick == null ? void 0 : actionOnClick(bottomActionId, undefined, dataContext) : undefined;
+    const {
+      I
+    } = renderer.html;
+    const {
+      loadingIcon,
+      spinnerClass,
+      iconClass
+    } = deepMerge(options, defaultOptions);
+    return /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx("div", {
+        className: rendererClass(className, options == null ? void 0 : options.className),
+        children: formNode.children.map(x => renderChild(x))
+      }), (loadingIcon == null ? void 0 : loadingIcon.name) && /*#__PURE__*/jsx(RenderControl, {
+        render: spinner
+      }), /*#__PURE__*/jsx(ScrollTrigger, {
+        hasMoreControl: hasMoreControl,
+        loadingControl: loadingControl,
+        fetchMore: () => handler == null ? void 0 : handler(NoOpControlActionContext)
+      })]
+    });
+    function spinner() {
+      return loadingControl.value && /*#__PURE__*/jsx("div", {
+        className: spinnerClass,
+        ref: e => e == null ? void 0 : e.scrollIntoView({
+          behavior: "smooth"
+        }),
+        children: /*#__PURE__*/jsx(I, {
+          iconName: loadingIcon.name,
+          iconLibrary: loadingIcon.library,
+          className: iconClass
+        })
+      });
+    }
+  } finally {
+    _effect();
+  }
+}
+function ScrollTrigger({
+  hasMoreControl,
+  loadingControl,
+  fetchMore
+}) {
+  var _effect2 = useComponentTracking();
+  try {
+    const observerTarget = useRef(null);
+    const hasMore = hasMoreControl.value;
+    const loading = loadingControl.value;
+    useEffect(() => {
+      const observer = new IntersectionObserver(entries => {
+        if (entries[0].isIntersecting && hasMore && !loading) {
+          fetchMore();
+        }
+      }, {
+        threshold: 0.5
+      }); // Trigger when 50% of the target is visible
+      if (observerTarget.current) {
+        observer.observe(observerTarget.current);
+      }
+      return () => {
+        if (observerTarget.current) {
+          observer.unobserve(observerTarget.current);
+        }
+      };
+    }, [hasMore, loading]); // Re-run effect if hasMore or loading state changes
+    return /*#__PURE__*/jsx("div", {
+      ref: observerTarget,
+      style: {
+        height: "1px"
+      }
+    });
+  } finally {
+    _effect2();
+  }
+}
+
+function HtmlCheckButtons(props) {
+  var _effect = useComponentTracking();
+  try {
+    const {
+      control,
+      options,
+      readonly,
+      className,
+      id,
+      type,
+      isChecked,
+      setChecked,
+      entryAdornment,
+      classes,
+      controlClasses = {}
+    } = props;
+    const {
+      disabled
+    } = control;
+    const name = "r" + control.uniqueId;
+    return /*#__PURE__*/jsx("div", {
+      role: "group",
+      className: className,
+      id: id,
+      children: /*#__PURE__*/jsx(RenderArrayElements, {
+        array: options == null ? void 0 : options.filter(x => x.value != null),
+        children: (o, i) => {
+          const checked = useComputed(() => isChecked(control, o)).value;
+          const selOrUnsel = checked ? rendererClass(controlClasses == null ? void 0 : controlClasses.selectedClass, classes.selectedClass) : rendererClass(controlClasses == null ? void 0 : controlClasses.notSelectedClass, classes.notSelectedClass);
+          return /*#__PURE__*/jsxs("div", {
+            className: clsx$1(rendererClass(controlClasses == null ? void 0 : controlClasses.entryWrapperClass, classes.entryWrapperClass), selOrUnsel),
+            children: [/*#__PURE__*/jsxs("div", {
+              className: classes.entryClass,
+              children: [/*#__PURE__*/jsx("input", {
+                id: name + "_" + i,
+                className: classes.checkClass,
+                type: type,
+                name: name,
+                readOnly: readonly,
+                disabled: disabled,
+                checked: checked,
+                onChange: x => {
+                  !readonly && setChecked(control, o, x.target.checked);
+                }
+              }), /*#__PURE__*/jsx("label", {
+                className: classes.labelClass,
+                htmlFor: name + "_" + i,
+                children: o.name
+              })]
+            }), entryAdornment == null ? void 0 : entryAdornment(o, i, checked)]
+          });
+        }
+      })
+    });
+  } finally {
+    _effect();
+  }
+}
+
 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
-}, {
-  name: "No",
-  value: false
-}];
 function createDefaultDataRenderer(options = {}) {
   var _options$checkboxOpti, _options$checkboxOpti2, _options$radioOptions, _options$checkListOpt;
   const elementSelectedRenderer = createElementSelectedRenderer((_options$checkboxOpti = options.checkboxOptions) != null ? _options$checkboxOpti : options.checkOptions);
@@ -1967,18 +2127,19 @@ function createDefaultDataRenderer(options = {}) {
   }, options);
   const arrayRenderer = createDefaultArrayDataRenderer(options.arrayOptions);
   const autocompleteRenderer = createAutocompleteRenderer(options.autocompleteOptions);
+  const scrollListRenderer = createScrollListRenderer(options.scrollListOptions);
   return createDataRenderer((props, renderers) => {
     const {
       field
     } = props;
     const fieldType = field.type;
     const renderOptions = props.renderOptions;
-    let renderType = renderOptions.type;
+    let renderType = renderOptions.type ? renderOptions.type : DataRenderType.Standard;
     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);
     }
-    if (fieldType === FieldType.Compound) {
+    if (fieldType === FieldType.Compound && (isDataGroupRenderer(renderOptions) || renderType === DataRenderType.Standard)) {
       var _ref;
       const groupOptions = (_ref = isDataGroupRenderer(renderOptions) ? renderOptions.groupOptions : undefined) != null ? _ref : {
         type: "Standard",
@@ -1993,7 +2154,7 @@ function createDefaultDataRenderer(options = {}) {
         className: "@ " + rendererClass(p.className, displayOnlyClass),
         children: /*#__PURE__*/jsx(DefaultDisplayOnly, {
           dataNode: props.dataNode,
-          state: props.state,
+          state: props.formNode,
           schemaInterface: props.dataContext.schemaInterface,
           className: props.className,
           textClass: props.textClass,
@@ -2018,6 +2179,8 @@ function createDefaultDataRenderer(options = {}) {
         return nullToggler.render(props, renderers);
       case DataRenderType.CheckList:
         return checkListRenderer.render(props, renderers);
+      case DataRenderType.ScrollList:
+        return scrollListRenderer.render(props, renderers);
       case DataRenderType.Dropdown:
         return selectRenderer.render(props, renderers);
       case DataRenderType.Radio:
@@ -2044,6 +2207,7 @@ function createDefaultDataRenderer(options = {}) {
       textClass: rendererClass(props.textClass, inputTextClass),
       style: props.style,
       id: props.id,
+      errorId: props.errorId,
       readOnly: props.readonly,
       control: props.control,
       placeholder: placeholder != null ? placeholder : undefined,
@@ -2092,15 +2256,24 @@ function createDefaultAdornmentRenderer(options = {}) {
             }))(rl);
           }
           if (isAccordionAdornment(adornment)) {
-            return wrapLayout(x => /*#__PURE__*/jsx(DefaultAccordion, _extends({
-              renderers: renderers,
-              children: x,
-              accordion: adornment,
-              contentStyle: rl.style,
-              contentClassName: rl.className,
-              designMode: designMode,
-              dataContext: dataContext
-            }, options.accordion)))(rl);
+            return wrapLayout(x => {
+              var _rl$children$props;
+              const displayProps = /*#__PURE__*/isValidElement(rl.children) ? (_rl$children$props = rl.children.props) == null ? void 0 : _rl$children$props.displayProps : undefined;
+              return /*#__PURE__*/jsx(DefaultAccordion, {
+                isGroup: false,
+                renderers: renderers,
+                children: x,
+                className: displayProps == null ? void 0 : displayProps.className,
+                titleTextClass: displayProps == null ? void 0 : displayProps.textClass,
+                title: renderers.renderLabelText(adornment.title),
+                defaultExpanded: adornment.defaultExpanded,
+                contentStyle: rl.style,
+                contentClassName: rl.className,
+                designMode: designMode,
+                dataContext: dataContext,
+                options: options.accordion
+              });
+            })(rl);
           }
         },
         priority: 0,
@@ -2171,21 +2344,23 @@ const StandardHtmlComponents = {
   Div: DefaultHtmlDivRenderer,
   H1: "h1",
   B: "b",
-  Input: DefaultHtmlInputRenderer
+  Input: DefaultHtmlInputRenderer,
+  CheckButtons: HtmlCheckButtons
 };
 function DefaultHtmlButtonRenderer(_ref2) {
   var _effect = useComponentTracking();
   try {
     let {
+        inline,
         textClass,
         className,
         onClick,
         nonTextContent
       } = _ref2,
       props = _objectWithoutPropertiesLoose(_ref2, _excluded);
-    const Comp = nonTextContent ? "div" : "button";
+    const Comp = inline ? "span" : nonTextContent ? "div" : "button";
     return /*#__PURE__*/jsx(Comp, _extends({
-      role: nonTextContent ? "button" : undefined,
+      role: nonTextContent || inline ? "button" : undefined,
       onClick: onClick ? e => {
         e.stopPropagation();
         onClick();
@@ -2293,7 +2468,7 @@ function createDefaultRenderers(options = {}) {
     display: createDefaultDisplayRenderer(options.display),
     action: createButtonActionRenderer(undefined, options.action),
     array: createDefaultArrayRenderer(options.array),
-    group: createDefaultGroupRenderer(options.group),
+    group: createDefaultGroupRenderer(options.group, options.adornment),
     label: createDefaultLabelRenderer(options.label),
     adornment: createDefaultAdornmentRenderer(options.adornment),
     renderLayout: createDefaultLayoutRenderer(options.layout),
@@ -2346,7 +2521,8 @@ const defaultTailwindTheme = {
     standardClassName: "flex flex-col gap-4",
     grid: {
       className: "flex flex-col gap-4",
-      rowClass: "flex flex-row gap-4 justify-between *:flex-1"
+      rowClass: "flex flex-row gap-4 justify-between",
+      cellClass: "flex-1"
     },
     flexClassName: "gap-2",
     inlineClass: "",
@@ -2365,7 +2541,8 @@ const defaultTailwindTheme = {
     primaryClass: "bg-primary-500",
     secondaryClass: "bg-secondary-500",
     iconBeforeClass: "px-2",
-    iconAfterClass: "px-2"
+    iconAfterClass: "px-2",
+    busyIcon: fontAwesomeIcon("spinner fa-spin")
   },
   layout: {
     className: "flex flex-col",
@@ -2391,12 +2568,15 @@ const defaultTailwindTheme = {
       listEntryClass: "list-none p-2 rounded-lg cursor-default last-of-type:border-b-0 hover:cursor-pointer hover:bg-primary-100 aria-selected:bg-primary-200 aria-selected:text-primary-900 focused:bg-surface-100 focus-visible:bg-surface-100 focused:text-surface-900 focus-visible:text-surface-900 focus-visible:shadow-[0_0_0_3px_transparent] focus-visible:shadow-primary-200  focused:aria-selected:bg-primary-200 focus-visible:aria-selected:bg-primary-200 focused:aria-selected:text-primary-900 focus-visible:aria-selected:text-primary-900",
       chipContainerClass: "flex flex-row items-center px-3 py-1 rounded-full bg-surface-100 m-1 gap-2 truncate",
       chipCloseButtonClass: "fa-solid fa-xmark p-1 bg-surface-300 rounded-full min-w-[24px] flex justify-center text-surface-50 hover:bg-surface-400 hover:text-surface-100 hover:cursor-pointer"
+    },
+    scrollListOptions: {
+      loadingIcon: fontAwesomeIcon("spinner fa-spin")
     }
   },
   adornment: {
     accordion: {
-      className: "flex items-center gap-2 my-2",
-      titleClass: "cursor-pointer",
+      className: "flex items-center gap-2 my-2 w-fit",
+      titleTextClass: "cursor-pointer",
       iconOpen: fontAwesomeIcon("chevron-up"),
       iconClosed: fontAwesomeIcon("chevron-down")
     },
@@ -2409,5 +2589,5 @@ const defaultTailwindTheme = {
   }
 };
 
-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 };
+export { ControlInput, DataArrayRenderer, DefaultAccordion, DefaultArrayRenderer, DefaultBoolOptions, DefaultDisplay, DefaultDisplayOnly, DefaultHtmlButtonRenderer, DefaultHtmlDivRenderer, DefaultHtmlIconRenderer, DefaultHtmlInputRenderer, DefaultHtmlLabelRenderer, DefaultLayout, DefaultVisibility, Fcheckbox, JsonataRenderer, OptionalEditRenderer, SelectDataRenderer, StandardHtmlComponents, ValueForFieldExtension, createAccordionGroupRenderer, createAutocompleteRenderer, createButtonActionRenderer, createCheckListRenderer, createCheckboxRenderer, createClassStyledRenderers, createDefaultAdornmentRenderer, createDefaultArrayDataRenderer, createDefaultArrayRenderer, createDefaultDataRenderer, createDefaultDisplayRenderer, createDefaultGroupRenderer, createDefaultLabelRenderer, createDefaultLayoutRenderer, createDefaultRenderers, createDefaultVisibilityRenderer, createElementSelectedRenderer, createInputConversion, createJsonataRenderer, createNullToggleRenderer, createOptionalAdornment, createRadioRenderer, createScrollListRenderer, createSelectConversion, createSelectRenderer, createValueForFieldRenderer, createWizardRenderer, defaultTailwindTheme, getAccordionState };
 //# sourceMappingURL=index.js.map