@react-typed-forms/schemas 9.2.0 → 10.0.0

package/lib/index.js

@@ -103,6 +103,7 @@ exports.ValidatorType = void 0;
 (function (ValidatorType) {
   ValidatorType["Jsonata"] = "Jsonata";
   ValidatorType["Date"] = "Date";
+  ValidatorType["Length"] = "Length";
 })(exports.ValidatorType || (exports.ValidatorType = {}));
 exports.DateComparison = void 0;
 (function (DateComparison) {
@@ -570,6 +571,14 @@ function toDepString(x) {
   if (x === null) return "~";
   return x.toString();
 }
+function appendElementIndex(dataContext, elementIndex) {
+  return _extends({}, dataContext, {
+    path: [].concat(dataContext.path, [elementIndex])
+  });
+}
+function applyLengthRestrictions(length, min, max, minValue, maxValue) {
+  return [min == null || length > min ? minValue : undefined, max == null || length < max ? maxValue : undefined];
+}
 
 function buildSchema(def) {
   return Object.entries(def).map(function (x) {
@@ -923,7 +932,7 @@ function useEvalDisabledHook(useEvalExpressionHook, definition) {
 function useEvalDisplayHook(useEvalExpressionHook, definition) {
   return useEvalDynamicHook(definition, exports.DynamicPropertyType.Display, useEvalExpressionHook);
 }
-function useEvalDefaultValueHook(useEvalExpressionHook, definition, schemaField) {
+function useEvalDefaultValueHook(useEvalExpressionHook, definition, schemaField, element) {
   var dynamicValue = useEvalDynamicHook(definition, exports.DynamicPropertyType.DefaultValue, useEvalExpressionHook);
   return makeDynamicPropertyHook(dynamicValue, function (ctx, _ref3) {
     var definition = _ref3.definition,
@@ -933,7 +942,7 @@ function useEvalDefaultValueHook(useEvalExpressionHook, definition, schemaField)
       var _ref4 = isDataControlDefinition(definition) ? [definition.required, definition.defaultValue] : [false, undefined],
         required = _ref4[0],
         dcv = _ref4[1];
-      return dcv != null ? dcv : schemaField ? defaultValueForField(schemaField, required) : undefined;
+      return dcv != null ? dcv : schemaField ? element ? elementValueForField(schemaField) : defaultValueForField(schemaField, required) : undefined;
     }
   }, {
     definition: definition,
@@ -1070,16 +1079,21 @@ function makeDynamicPropertyHook(dynamicValue, makeDefault, state, deps) {
   };
 }
 
-function useValidationHook(definition) {
+function useValidationHook(definition, field) {
   var _definition$validator, _definition$validator2;
   var validatorTypes = isDataControlDefinition(definition) ? (_definition$validator = (_definition$validator2 = definition.validators) == null ? void 0 : _definition$validator2.map(function (x) {
     return x.type;
   })) != null ? _definition$validator : [] : null;
-  var r = useUpdatedRef(definition);
-  return React.useCallback(function (control, hidden, groupContext) {
+  var r = useUpdatedRef({
+    definition: definition,
+    field: field
+  });
+  return React.useCallback(function (control, hidden, groupContext, schemaInterface) {
     var _dd$validators;
     if (!validatorTypes) return;
-    var dd = r.current;
+    var _r$current = r.current,
+      dd = _r$current.definition,
+      field = _r$current.field;
     core.useValueChangeEffect(control, function () {
       return control.setError("default", "");
     });
@@ -1088,6 +1102,27 @@ function useValidationHook(definition) {
     }, "required");
     ((_dd$validators = dd.validators) != null ? _dd$validators : []).forEach(function (x, i) {
       switch (x.type) {
+        case exports.ValidatorType.Length:
+          var lv = x;
+          core.useControlEffect(function () {
+            core.trackControlChange(control, core.ControlChange.Validate);
+            return field ? schemaInterface.controlLength(field, control) : 0;
+          }, function (len) {
+            if (lv.min != null && len < lv.min) {
+              if (field != null && field.collection) {
+                control.setValue(function (v) {
+                  return [].concat(v, Array.from({
+                    length: lv.min - len
+                  }));
+                });
+              } else {
+                control.setError("length", "Length must be at least " + lv.min);
+              }
+            } else if (lv.max != null && len > lv.max) {
+              control.setError("length", "Length must be less than " + lv.max);
+            }
+          }, true);
+          break;
         case exports.ValidatorType.Jsonata:
           return useJsonataValidator(control, groupContext, x, hidden, i);
         case exports.ValidatorType.Date:
@@ -1129,31 +1164,41 @@ function useDateValidator(control, dv, i) {
   }, "date" + i);
 }
 
-var defaultSchemaInterface = {
-  isEmptyValue: defaultIsEmpty,
-  textValue: defaultTextValue
-};
-function defaultIsEmpty(f, value) {
-  if (f.collection) return Array.isArray(value) ? value.length === 0 : value == null;
-  switch (f.type) {
-    case exports.FieldType.String:
-      return !value;
-    default:
-      return value == null;
-  }
-}
-function defaultTextValue(f, value) {
-  switch (f.type) {
-    case exports.FieldType.DateTime:
-      return new Date(value).toLocaleDateString();
-    case exports.FieldType.Date:
-      return new Date(value).toLocaleDateString();
-    default:
-      return value != null ? value.toString() : undefined;
-  }
-}
+var DefaultSchemaInterface = /*#__PURE__*/function () {
+  function DefaultSchemaInterface() {}
+  var _proto = DefaultSchemaInterface.prototype;
+  _proto.isEmptyValue = function isEmptyValue(f, value) {
+    if (f.collection) return Array.isArray(value) ? value.length === 0 : value == null;
+    switch (f.type) {
+      case exports.FieldType.String:
+        return !value;
+      default:
+        return value == null;
+    }
+  };
+  _proto.textValue = function textValue(field, value, element) {
+    switch (field.type) {
+      case exports.FieldType.DateTime:
+        return new Date(value).toLocaleDateString();
+      case exports.FieldType.Date:
+        return new Date(value).toLocaleDateString();
+      default:
+        return value != null ? value.toString() : undefined;
+    }
+  };
+  _proto.controlLength = function controlLength(f, control) {
+    var _control$elements$len, _control$elements;
+    return f.collection ? (_control$elements$len = (_control$elements = control.elements) == null ? void 0 : _control$elements.length) != null ? _control$elements$len : 0 : this.valueLength(f, control.value);
+  };
+  _proto.valueLength = function valueLength(field, value) {
+    var _ref;
+    return (_ref = value && (value == null ? void 0 : value.length)) != null ? _ref : 0;
+  };
+  return DefaultSchemaInterface;
+}();
+var defaultSchemaInterface = new DefaultSchemaInterface();
 
-var _excluded$3 = ["definition", "field", "control", "options", "elementRenderer", "style", "allowedOptions"];
+var _excluded$3 = ["definition", "field", "control", "formOptions", "style", "allowedOptions"];
 var AppendAdornmentPriority = 0;
 var WrapAdornmentPriority = 1000;
 exports.LabelType = void 0;
@@ -1167,11 +1212,12 @@ function useControlRenderer(definition, fields, renderer, options) {
     options = {};
   }
   var dataProps = (_options$useDataHook = options.useDataHook == null ? void 0 : options.useDataHook(definition)) != null ? _options$useDataHook : defaultDataProps;
+  var elementIndex = options.elementIndex;
   var schemaInterface = (_options$schemaInterf = options.schemaInterface) != null ? _options$schemaInterf : defaultSchemaInterface;
   var useExpr = (_options$useEvalExpre = options.useEvalExpressionHook) != null ? _options$useEvalExpre : defaultUseEvalExpressionHook;
   var schemaField = lookupSchemaField(definition, fields);
   var dynamicHooks = useDynamicHooks({
-    defaultValueControl: useEvalDefaultValueHook(useExpr, definition, schemaField),
+    defaultValueControl: useEvalDefaultValueHook(useExpr, definition, schemaField, elementIndex != null),
     visibleControl: useEvalVisibilityHook(useExpr, definition, schemaField),
     readonlyControl: useEvalReadonlyHook(useExpr, definition),
     disabledControl: useEvalDisabledHook(useExpr, definition),
@@ -1181,12 +1227,13 @@ function useControlRenderer(definition, fields, renderer, options) {
     layoutStyle: useEvalStyleHook(useExpr, exports.DynamicPropertyType.LayoutStyle, definition),
     displayControl: useEvalDisplayHook(useExpr, definition)
   });
-  var useValidation = useValidationHook(definition);
+  var useValidation = useValidationHook(definition, schemaField);
   var r = useUpdatedRef({
     options: options,
     definition: definition,
     fields: fields,
-    schemaField: schemaField
+    schemaField: schemaField,
+    elementIndex: elementIndex
   });
   var Component = React.useCallback(function (_ref) {
     var rootControl = _ref.control,
@@ -1199,7 +1246,8 @@ function useControlRenderer(definition, fields, renderer, options) {
         c = _r$current.definition,
         _options = _r$current.options,
         _fields = _r$current.fields,
-        _schemaField = _r$current.schemaField;
+        _schemaField = _r$current.schemaField,
+        _elementIndex = _r$current.elementIndex;
       var parentDataContext = {
         fields: _fields,
         schemaInterface: schemaInterface,
@@ -1233,7 +1281,7 @@ function useControlRenderer(definition, fields, renderer, options) {
           };
         });
       });
-      var _getControlData = getControlData(_schemaField, parentDataContext),
+      var _getControlData = getControlData(_schemaField, parentDataContext, _elementIndex),
         parentControl = _getControlData[0],
         control = _getControlData[1],
         controlDataContext = _getControlData[2];
@@ -1267,8 +1315,10 @@ function useControlRenderer(definition, fields, renderer, options) {
           disabled: _options.disabled || disabledControl.value
         };
       }).value;
-      useValidation(control != null ? control : core.newControl(null), !!myOptions.hidden, parentDataContext);
-      var childOptions = _extends({}, _options, myOptions);
+      useValidation(control != null ? control : core.newControl(null), !!myOptions.hidden, parentDataContext, schemaInterface);
+      var childOptions = _extends({}, _options, myOptions, {
+        elementIndex: undefined
+      });
       React.useEffect(function () {
         if (control && typeof myOptions.disabled === "boolean") control.disabled = myOptions.disabled;
       }, [control, myOptions.disabled]);
@@ -1281,29 +1331,34 @@ function useControlRenderer(definition, fields, renderer, options) {
       var labelAndChildren = renderControlLayout({
         definition: c,
         renderer: renderer,
-        renderChild: function renderChild(k, child, path) {
+        renderChild: function renderChild(k, child, options) {
+          var _options$dataContext;
+          var dataContext = (_options$dataContext = options == null ? void 0 : options.dataContext) != null ? _options$dataContext : controlDataContext;
           return /*#__PURE__*/React__default["default"].createElement(ControlRenderer, {
             key: k,
-            control: controlDataContext.data,
-            fields: controlDataContext.fields,
-            definition: findChildDefinition(c, child),
-            parentPath: path ? [].concat(controlDataContext.path, path) : controlDataContext.path,
+            control: dataContext.data,
+            fields: dataContext.fields,
+            definition: child,
+            parentPath: dataContext.path,
             renderer: renderer,
-            options: childOptions
+            options: options ? _extends({}, childOptions, {
+              elementIndex: options == null ? void 0 : options.elementIndex
+            }) : childOptions
           });
         },
         createDataProps: dataProps,
         formOptions: myOptions,
         dataContext: controlDataContext,
+        parentContext: parentDataContext,
         control: displayControl != null ? displayControl : control,
+        elementIndex: _elementIndex,
         labelText: labelText,
-        schemaField: _schemaField,
+        field: _schemaField,
         displayControl: displayControl,
         style: customStyle.value,
         allowedOptions: allowedOptions,
-        useChildVisibility: function useChildVisibility(child) {
-          var childDef = findChildDefinition(c, child);
-          var schemaField = lookupSchemaField(childDef, controlDataContext.fields);
+        useChildVisibility: function useChildVisibility(childDef, context) {
+          var schemaField = lookupSchemaField(childDef, (context != null ? context : controlDataContext).fields);
           return useEvalVisibilityHook(useExpr, childDef, schemaField);
         }
       });
@@ -1326,14 +1381,14 @@ function lookupSchemaField(c, fields) {
   var fieldName = isGroupControlsDefinition(c) ? c.compoundField : isDataControlDefinition(c) ? c.field : undefined;
   return fieldName ? findField(fields, fieldName) : undefined;
 }
-function getControlData(schemaField, parentContext) {
-  var _parentControl$fields;
+function getControlData(schemaField, parentContext, elementIndex) {
+  var _parentControl$fields, _childControl$element;
   var data = parentContext.data,
     path = parentContext.path;
   var parentControl = data.lookupControl(path);
-  var childPath = schemaField ? [].concat(path, [schemaField.field]) : path;
+  var childPath = schemaField ? elementIndex != null ? [].concat(path, [schemaField.field, elementIndex]) : [].concat(path, [schemaField.field]) : path;
   var childControl = schemaField && parentControl ? (_parentControl$fields = parentControl.fields) == null ? void 0 : _parentControl$fields[schemaField.field] : undefined;
-  return [parentControl, childControl, schemaField ? _extends({}, parentContext, {
+  return [parentControl, childControl && elementIndex != null ? (_childControl$element = childControl.elements) == null ? void 0 : _childControl$element[elementIndex] : childControl, schemaField ? _extends({}, parentContext, {
     path: childPath,
     fields: isCompoundField(schemaField) ? schemaField.children : parentContext.fields
   }) : parentContext];
@@ -1356,64 +1411,61 @@ function ControlRenderer(_ref3) {
     _effect();
   }
 }
-function groupProps(definition, renderChild, dataContext, className, style, useChildVisibility) {
-  var _definition$children, _definition$groupOpti;
-  return {
-    childDefinitions: (_definition$children = definition.children) != null ? _definition$children : [],
-    renderChild: renderChild,
-    dataContext: dataContext,
-    renderOptions: (_definition$groupOpti = definition.groupOptions) != null ? _definition$groupOpti : {
-      type: "Standard"
-    },
-    className: cc(className),
-    useChildVisibility: useChildVisibility,
-    style: style
-  };
-}
 function defaultDataProps(_ref4) {
-  var _field$options$length, _field$options, _allowedOptions$value, _definition$children2, _definition$renderOpt;
+  var _definition$validator, _field$options$length, _field$options, _allowedOptions$value, _definition$children, _definition$renderOpt;
   var definition = _ref4.definition,
     field = _ref4.field,
     control = _ref4.control,
-    options = _ref4.options,
-    elementRenderer = _ref4.elementRenderer,
+    formOptions = _ref4.formOptions,
     style = _ref4.style,
     allowedOptions = _ref4.allowedOptions,
     props = _objectWithoutPropertiesLoose(_ref4, _excluded$3);
+  var lengthVal = (_definition$validator = definition.validators) == null ? void 0 : _definition$validator.find(function (x) {
+    return x.type === exports.ValidatorType.Length;
+  });
   var className = cc(definition.styleClass);
   var required = !!definition.required;
   var fieldOptions = ((_field$options$length = (_field$options = field.options) == null ? void 0 : _field$options.length) != null ? _field$options$length : 0) === 0 ? null : field.options;
   var allowed = (_allowedOptions$value = allowedOptions == null ? void 0 : allowedOptions.value) != null ? _allowedOptions$value : [];
   return _extends({
     definition: definition,
-    childDefinitions: (_definition$children2 = definition.children) != null ? _definition$children2 : [],
+    childDefinitions: (_definition$children = definition.children) != null ? _definition$children : [],
     control: control,
     field: field,
     id: "c" + control.uniqueId,
     options: fieldOptions && allowed.length > 0 ? fieldOptions.filter(function (x) {
       return allowed.includes(x.value);
     }) : fieldOptions,
-    readonly: !!options.readonly,
+    readonly: !!formOptions.readonly,
     renderOptions: (_definition$renderOpt = definition.renderOptions) != null ? _definition$renderOpt : {
       type: "Standard"
     },
     required: required,
-    hidden: !!options.hidden,
+    hidden: !!formOptions.hidden,
     className: className,
     style: style
   }, props, {
-    toArrayProps: elementRenderer ? function () {
-      return defaultArrayProps(control, field, required, style, className, elementRenderer);
+    toArrayProps: field.collection && props.elementIndex == null ? function () {
+      return defaultArrayProps(control, field, required, style, className, function (elementIndex) {
+        var _control$elements$ele, _control$elements;
+        return props.renderChild((_control$elements$ele = (_control$elements = control.elements) == null ? void 0 : _control$elements[elementIndex].uniqueId) != null ? _control$elements$ele : elementIndex, {
+          type: exports.ControlDefinitionType.Data,
+          field: definition.field,
+          children: definition.children,
+          hideTitle: true
+        }, {
+          elementIndex: elementIndex,
+          dataContext: props.parentContext
+        });
+      }, lengthVal == null ? void 0 : lengthVal.min, lengthVal == null ? void 0 : lengthVal.max);
     } : undefined
   });
 }
-function defaultArrayProps(arrayControl, field, required, style, className, _renderElement) {
-  var _field$displayName, _arrayControl$element;
+function defaultArrayProps(arrayControl, field, required, style, className, _renderElement, min, max) {
+  var _field$displayName;
   var noun = (_field$displayName = field.displayName) != null ? _field$displayName : field.field;
-  var elems = (_arrayControl$element = arrayControl.elements) != null ? _arrayControl$element : [];
   return {
     arrayControl: arrayControl,
-    elementCount: elems.length,
     required: required,
     addAction: {
       actionId: "add",
@@ -1422,9 +1474,6 @@ function defaultArrayProps(arrayControl, field, required, style, className, _ren
         return core.addElement(arrayControl, elementValueForField(field));
       }
     },
-    elementKey: function elementKey(i) {
-      return elems[i].uniqueId;
-    },
     removeAction: function removeAction(i) {
       return {
         actionId: "",
@@ -1438,28 +1487,29 @@ function defaultArrayProps(arrayControl, field, required, style, className, _ren
       return _renderElement(i);
     },
     className: cc(className),
-    style: style
+    style: style,
+    min: min,
+    max: max
   };
 }
-function renderControlLayout(_ref5) {
-  var c = _ref5.definition,
-    renderer = _ref5.renderer,
-    childRenderer = _ref5.renderChild,
-    childControl = _ref5.control,
-    schemaField = _ref5.schemaField,
-    dataContext = _ref5.dataContext,
-    dataOptions = _ref5.formOptions,
-    dataProps = _ref5.createDataProps,
-    displayControl = _ref5.displayControl,
-    style = _ref5.style,
-    labelText = _ref5.labelText,
-    allowedOptions = _ref5.allowedOptions,
-    useChildVisibility = _ref5.useChildVisibility;
+function renderControlLayout(props) {
+  var c = props.definition,
+    renderer = props.renderer,
+    renderChild = props.renderChild,
+    control = props.control,
+    field = props.field,
+    dataContext = props.dataContext,
+    dataProps = props.createDataProps,
+    displayControl = props.displayControl,
+    style = props.style,
+    labelText = props.labelText,
+    parentContext = props.parentContext,
+    useChildVisibility = props.useChildVisibility;
   if (isDataControlDefinition(c)) {
     return renderData(c);
   }
   if (isGroupControlsDefinition(c)) {
-    var _labelText$value, _c$groupOptions2;
+    var _c$children, _c$groupOptions2, _labelText$value, _c$groupOptions3;
     if (c.compoundField) {
       var _c$groupOptions;
       return renderData(dataControl(c.compoundField, c.title, {
@@ -1468,20 +1518,32 @@ function renderControlLayout(_ref5) {
       }));
     }
     return {
-      processLayout: renderer.renderGroup(groupProps(c, childRenderer, dataContext, c.styleClass, style, useChildVisibility)),
+      processLayout: renderer.renderGroup({
+        childDefinitions: (_c$children = c.children) != null ? _c$children : [],
+        definition: c,
+        parentContext: parentContext,
+        renderChild: renderChild,
+        dataContext: dataContext,
+        renderOptions: (_c$groupOptions2 = c.groupOptions) != null ? _c$groupOptions2 : {
+          type: "Standard"
+        },
+        className: cc(c.styleClass),
+        useChildVisibility: useChildVisibility,
+        style: style
+      }),
       label: {
         label: (_labelText$value = labelText == null ? void 0 : labelText.value) != null ? _labelText$value : c.title,
         className: cc(c.labelClass),
         type: exports.LabelType.Group,
-        hide: (_c$groupOptions2 = c.groupOptions) == null ? void 0 : _c$groupOptions2.hideTitle
+        hide: (_c$groupOptions3 = c.groupOptions) == null ? void 0 : _c$groupOptions3.hideTitle
       }
     };
   }
   if (isActionControlsDefinition(c)) {
-    var _ref6, _labelText$value2;
+    var _ref5, _labelText$value2;
     return {
       children: renderer.renderAction({
-        actionText: (_ref6 = (_labelText$value2 = labelText == null ? void 0 : labelText.value) != null ? _labelText$value2 : c.title) != null ? _ref6 : c.actionId,
+        actionText: (_ref5 = (_labelText$value2 = labelText == null ? void 0 : labelText.value) != null ? _labelText$value2 : c.title) != null ? _ref5 : c.actionId,
         actionId: c.actionId,
         onClick: function onClick() {},
         className: cc(c.styleClass),
@@ -1502,44 +1564,27 @@ function renderControlLayout(_ref5) {
     };
   }
   return {};
-  function renderData(c, elemIndex) {
+  function renderData(c) {
     var _labelText$value3;
-    if (!schemaField) return {
+    if (!field) return {
       children: "No schema field for: " + c.field
     };
-    if (!childControl) return {
+    if (!control) return {
       children: "No control for: " + c.field
     };
-    var props = dataProps({
-      definition: c,
-      field: schemaField,
-      dataContext: elemIndex != null ? _extends({}, dataContext, {
-        path: [].concat(dataContext.path, [elemIndex])
-      }) : dataContext,
-      control: elemIndex != null ? childControl.elements[elemIndex] : childControl,
-      options: dataOptions,
-      style: style,
-      allowedOptions: allowedOptions,
-      renderChild: elemIndex != null ? function (k, d, p) {
-        return childRenderer(k, d, p ? [elemIndex].concat(p) : [elemIndex]);
-      } : childRenderer,
-      useChildVisibility: useChildVisibility,
-      elementRenderer: elemIndex == null && schemaField.collection ? function (ei) {
-        return renderLayoutParts(renderData(c, ei), renderer).children;
-      } : undefined
-    });
-    var label = !c.hideTitle ? controlTitle((_labelText$value3 = labelText == null ? void 0 : labelText.value) != null ? _labelText$value3 : c.title, schemaField) : undefined;
+    var rendererProps = dataProps(props);
+    var label = !c.hideTitle ? controlTitle((_labelText$value3 = labelText == null ? void 0 : labelText.value) != null ? _labelText$value3 : c.title, field) : undefined;
     return {
-      processLayout: renderer.renderData(props),
+      processLayout: renderer.renderData(rendererProps),
       label: {
         type: exports.LabelType.Control,
         label: label,
-        forId: props.id,
+        forId: rendererProps.id,
         required: c.required,
         hide: c.hideTitle,
         className: cc(c.labelClass)
       },
-      errorControl: childControl
+      errorControl: control
     };
   }
 }
@@ -1573,13 +1618,13 @@ function wrapMarkupAt(pos, wrap) {
 }
 function renderLayoutParts(props, renderer) {
   var _props$processLayout;
-  var _ref7 = (_props$processLayout = props.processLayout == null ? void 0 : props.processLayout(props)) != null ? _props$processLayout : props,
-    className = _ref7.className,
-    children = _ref7.children,
-    style = _ref7.style,
-    errorControl = _ref7.errorControl,
-    label = _ref7.label,
-    adornments = _ref7.adornments;
+  var _ref6 = (_props$processLayout = props.processLayout == null ? void 0 : props.processLayout(props)) != null ? _props$processLayout : props,
+    className = _ref6.className,
+    children = _ref6.children,
+    style = _ref6.style,
+    errorControl = _ref6.errorControl,
+    label = _ref6.label,
+    adornments = _ref6.adornments;
   var layout = {
     children: children,
     errorControl: errorControl,
@@ -1597,6 +1642,24 @@ function renderLayoutParts(props, renderer) {
 function controlTitle(title, field) {
   return title ? title : fieldDisplayName(field);
 }
+function applyArrayLengthRestrictions(_ref7, disable) {
+  var _arrayControl$element, _arrayControl$element2;
+  var arrayControl = _ref7.arrayControl,
+    min = _ref7.min,
+    max = _ref7.max,
+    aa = _ref7.addAction,
+    ra = _ref7.removeAction,
+    required = _ref7.required;
+  var _applyLengthRestricti = applyLengthRestrictions((_arrayControl$element = (_arrayControl$element2 = arrayControl.elements) == null ? void 0 : _arrayControl$element2.length) != null ? _arrayControl$element : 0, min == null && required ? 1 : min, max, true, true),
+    removeAllowed = _applyLengthRestricti[0],
+    addAllowed = _applyLengthRestricti[1];
+  return {
+    addAction: disable || addAllowed ? aa : undefined,
+    removeAction: disable || removeAllowed ? ra : undefined,
+    removeDisabled: !removeAllowed,
+    addDisabled: !addAllowed
+  };
+}
 
 function isIconAdornment(a) {
   return a.type === exports.ControlAdornmentType.Icon;
@@ -2008,78 +2071,86 @@ function RadioButtons(_ref) {
   }
 }
 
-function createDefaultActionRenderer(options) {
-  if (options === void 0) {
-    options = {};
-  }
-  function render(_ref) {
-    var onClick = _ref.onClick,
-      actionText = _ref.actionText;
-    return /*#__PURE__*/React__default["default"].createElement("button", {
-      className: options.className,
-      onClick: onClick
-    }, actionText);
-  }
+function createDefaultArrayRenderer(options) {
   return {
-    render: render,
-    type: "action"
+    render: function render(props, _ref) {
+      var renderAction = _ref.renderAction;
+      return /*#__PURE__*/React__default["default"].createElement(DefaultArrayRenderer, _extends({}, props, options, {
+        renderAction: renderAction
+      }));
+    },
+    type: "array"
   };
 }
-function createDefaultArrayRenderer(options) {
-  var _ref2 = options != null ? options : {},
-    className = _ref2.className,
-    removableClass = _ref2.removableClass,
-    childClass = _ref2.childClass,
-    removableChildClass = _ref2.removableChildClass,
-    removeActionClass = _ref2.removeActionClass,
-    addActionClass = _ref2.addActionClass;
-  function render(_ref3, _ref4) {
-    var elementCount = _ref3.elementCount,
-      renderElement = _ref3.renderElement,
-      addAction = _ref3.addAction,
-      removeAction = _ref3.removeAction,
-      elementKey = _ref3.elementKey,
-      required = _ref3.required;
-    var renderAction = _ref4.renderAction;
-    var showRemove = !required || elementCount > 1;
-    return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
+function DefaultArrayRenderer(props) {
+  var _effect = core.useComponentTracking();
+  try {
+    var renderElement = props.renderElement,
+      className = props.className,
+      removableClass = props.removableClass,
+      childClass = props.childClass,
+      removableChildClass = props.removableChildClass,
+      removeActionClass = props.removeActionClass,
+      addActionClass = props.addActionClass,
+      arrayControl = props.arrayControl,
+      renderAction = props.renderAction,
+      style = props.style;
+    var _applyArrayLengthRest = applyArrayLengthRestrictions(props),
+      addAction = _applyArrayLengthRest.addAction,
+      removeAction = _applyArrayLengthRest.removeAction;
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      style: style
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: clsx__default["default"](className, removeAction && removableClass)
-    }, Array.from({
-      length: elementCount
+    }, /*#__PURE__*/React__default["default"].createElement(core.RenderElements, {
+      control: arrayControl
     }, function (_, x) {
-      return removeAction ? /*#__PURE__*/React__default["default"].createElement(React.Fragment, {
-        key: elementKey(x)
-      }, /*#__PURE__*/React__default["default"].createElement("div", {
+      return removeAction ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
         className: clsx__default["default"](childClass, removableChildClass)
       }, renderElement(x)), /*#__PURE__*/React__default["default"].createElement("div", {
         className: removeActionClass
-      }, showRemove && renderAction(removeAction(x)))) : /*#__PURE__*/React__default["default"].createElement("div", {
-        key: elementKey(x),
+      }, renderAction(removeAction(x)))) : /*#__PURE__*/React__default["default"].createElement("div", {
         className: childClass
       }, renderElement(x));
     })), addAction && /*#__PURE__*/React__default["default"].createElement("div", {
       className: addActionClass
     }, renderAction(addAction)));
+  } finally {
+    _effect();
+  }
+}
+
+function createDefaultActionRenderer(options) {
+  if (options === void 0) {
+    options = {};
+  }
+  function render(_ref) {
+    var onClick = _ref.onClick,
+      actionText = _ref.actionText;
+    return /*#__PURE__*/React__default["default"].createElement("button", {
+      className: options.className,
+      onClick: onClick
+    }, actionText);
   }
   return {
     render: render,
-    type: "array"
+    type: "action"
   };
 }
 function createDefaultGroupRenderer(options) {
-  var _ref5 = options != null ? options : {},
-    className = _ref5.className,
-    _ref5$gridStyles = _ref5.gridStyles,
-    gridStyles = _ref5$gridStyles === void 0 ? defaultGridStyles : _ref5$gridStyles,
-    _ref5$defaultGridColu = _ref5.defaultGridColumns,
-    defaultGridColumns = _ref5$defaultGridColu === void 0 ? 2 : _ref5$defaultGridColu,
-    gridClassName = _ref5.gridClassName,
-    standardClassName = _ref5.standardClassName,
-    flexClassName = _ref5.flexClassName,
-    defaultFlexGap = _ref5.defaultFlexGap;
-  function defaultGridStyles(_ref6) {
-    var _ref6$columns = _ref6.columns,
-      columns = _ref6$columns === void 0 ? defaultGridColumns : _ref6$columns;
+  var _ref2 = options != null ? options : {},
+    className = _ref2.className,
+    _ref2$gridStyles = _ref2.gridStyles,
+    gridStyles = _ref2$gridStyles === void 0 ? defaultGridStyles : _ref2$gridStyles,
+    _ref2$defaultGridColu = _ref2.defaultGridColumns,
+    defaultGridColumns = _ref2$defaultGridColu === void 0 ? 2 : _ref2$defaultGridColu,
+    gridClassName = _ref2.gridClassName,
+    standardClassName = _ref2.standardClassName,
+    flexClassName = _ref2.flexClassName,
+    defaultFlexGap = _ref2.defaultFlexGap;
+  function defaultGridStyles(_ref3) {
+    var _ref3$columns = _ref3.columns,
+      columns = _ref3$columns === void 0 ? defaultGridColumns : _ref3$columns;
     return {
       className: gridClassName,
       style: {
@@ -2102,18 +2173,18 @@ function createDefaultGroupRenderer(options) {
     var renderChild = props.renderChild,
       renderOptions = props.renderOptions,
       childDefinitions = props.childDefinitions;
-    var _ref7 = isGridRenderer(renderOptions) ? gridStyles(renderOptions) : isFlexRenderer(renderOptions) ? flexStyles(renderOptions) : {
+    var _ref4 = isGridRenderer(renderOptions) ? gridStyles(renderOptions) : isFlexRenderer(renderOptions) ? flexStyles(renderOptions) : {
         className: standardClassName
       },
-      style = _ref7.style,
-      gcn = _ref7.className;
+      style = _ref4.style,
+      gcn = _ref4.className;
     return function (cp) {
       return _extends({}, cp, {
         children: /*#__PURE__*/React__default["default"].createElement("div", {
           className: rendererClass(props.className, clsx__default["default"](className, gcn)),
           style: style
         }, childDefinitions == null ? void 0 : childDefinitions.map(function (c, i) {
-          return renderChild(i, i);
+          return renderChild(i, c);
         }))
       });
     };
@@ -2155,25 +2226,14 @@ function createDefaultDataRenderer(options) {
     }
     var renderOptions = props.renderOptions;
     if (fieldType === exports.FieldType.Compound) {
-      var groupOptions = isDataGroupRenderer(renderOptions) ? renderOptions.groupOptions : undefined;
-      var style = props.style,
-        className = props.className,
-        childDefinitions = props.childDefinitions,
-        renderChild = props.renderChild,
-        dataContext = props.dataContext,
-        useChildVisibility = props.useChildVisibility;
-      return renderers.renderGroup({
-        style: style,
-        className: className,
-        childDefinitions: childDefinitions,
-        renderOptions: groupOptions != null ? groupOptions : {
-          type: "Standard",
-          hideTitle: true
-        },
-        renderChild: renderChild,
-        dataContext: dataContext,
-        useChildVisibility: useChildVisibility
-      });
+      var _ref5;
+      var groupOptions = (_ref5 = isDataGroupRenderer(renderOptions) ? renderOptions.groupOptions : undefined) != null ? _ref5 : {
+        type: "Standard",
+        hideTitle: true
+      };
+      return renderers.renderGroup(_extends({}, props, {
+        renderOptions: groupOptions
+      }));
     }
     var renderType = renderOptions.type;
     if (fieldType == exports.FieldType.Any) return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, "No control for Any");
@@ -2226,8 +2286,8 @@ function createDefaultDataRenderer(options) {
 function createDefaultAdornmentRenderer(options) {
   return {
     type: "adornment",
-    render: function render(_ref8) {
-      var adornment = _ref8.adornment;
+    render: function render(_ref6) {
+      var adornment = _ref6.adornment;
       return {
         apply: function apply(rl) {
           if (isIconAdornment(adornment)) {
@@ -2362,7 +2422,7 @@ function createFormRenderer(customRenderers, defaultRenderers) {
     var options = hasOptions(props);
     var renderer = (_dataRegistrations$fi = dataRegistrations.find(function (x) {
       var _x$collection, _field$collection, _x$options;
-      return ((_x$collection = x.collection) != null ? _x$collection : false) === ((_field$collection = field.collection) != null ? _field$collection : false) && ((_x$options = x.options) != null ? _x$options : false) === options && (x.schemaType && isOneOf(x.schemaType, field.type) || x.renderType && isOneOf(x.renderType, renderType) || x.match && x.match(props));
+      return ((_x$collection = x.collection) != null ? _x$collection : false) === (props.elementIndex == null && ((_field$collection = field.collection) != null ? _field$collection : false)) && ((_x$options = x.options) != null ? _x$options : false) === options && (x.schemaType && isOneOf(x.schemaType, field.type) || x.renderType && isOneOf(x.renderType, renderType) || x.match && x.match(props));
     })) != null ? _dataRegistrations$fi : defaultRenderers.data;
     var result = renderer.render(props, formRenderers);
     if (typeof result === "function") return result;
@@ -2464,18 +2524,22 @@ exports.DefaultBoolOptions = DefaultBoolOptions;
 exports.DefaultDisplay = DefaultDisplay;
 exports.DefaultDisplayOnly = DefaultDisplayOnly;
 exports.DefaultLayout = DefaultLayout;
+exports.DefaultSchemaInterface = DefaultSchemaInterface;
 exports.DefaultVisibility = DefaultVisibility;
 exports.RadioButtons = RadioButtons;
 exports.SelectDataRenderer = SelectDataRenderer;
 exports.WrapAdornmentPriority = WrapAdornmentPriority;
 exports.addFieldOption = addFieldOption;
 exports.addMissingControls = addMissingControls;
+exports.appendElementIndex = appendElementIndex;
 exports.appendMarkup = appendMarkup;
 exports.appendMarkupAt = appendMarkupAt;
+exports.applyArrayLengthRestrictions = applyArrayLengthRestrictions;
 exports.applyDefaultForField = applyDefaultForField;
 exports.applyDefaultValues = applyDefaultValues;
 exports.applyExtensionToSchema = applyExtensionToSchema;
 exports.applyExtensionsToSchema = applyExtensionsToSchema;
+exports.applyLengthRestrictions = applyLengthRestrictions;
 exports.boolField = boolField;
 exports.buildSchema = buildSchema;
 exports.cleanDataForSchema = cleanDataForSchema;
@@ -2488,7 +2552,6 @@ exports.createArrayRenderer = createArrayRenderer;
 exports.createDataRenderer = createDataRenderer;
 exports.createDefaultActionRenderer = createDefaultActionRenderer;
 exports.createDefaultAdornmentRenderer = createDefaultAdornmentRenderer;
-exports.createDefaultArrayRenderer = createDefaultArrayRenderer;
 exports.createDefaultDataRenderer = createDefaultDataRenderer;
 exports.createDefaultDisplayRenderer = createDefaultDisplayRenderer;
 exports.createDefaultGroupRenderer = createDefaultGroupRenderer;
@@ -2511,11 +2574,9 @@ exports.defaultCompoundField = defaultCompoundField;
 exports.defaultControlForField = defaultControlForField;
 exports.defaultDataProps = defaultDataProps;
 exports.defaultEvalHooks = defaultEvalHooks;
-exports.defaultIsEmpty = defaultIsEmpty;
 exports.defaultScalarField = defaultScalarField;
 exports.defaultSchemaInterface = defaultSchemaInterface;
 exports.defaultTailwindTheme = defaultTailwindTheme;
-exports.defaultTextValue = defaultTextValue;
 exports.defaultUseEvalExpressionHook = defaultUseEvalExpressionHook;
 exports.defaultValueForField = defaultValueForField;
 exports.defaultValueForFields = defaultValueForFields;