@react-typed-forms/schemas 6.0.0 → 7.1.0

package/lib/index.js

@@ -1,13 +1,13 @@
 var React = require('react');
+var clsx = require('clsx');
 var core = require('@react-typed-forms/core');
 var jsonata = require('jsonata');
-var clsx = require('clsx');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var jsonata__default = /*#__PURE__*/_interopDefaultLegacy(jsonata);
 var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);
+var jsonata__default = /*#__PURE__*/_interopDefaultLegacy(jsonata);
 
 exports.FieldType = void 0;
 (function (FieldType) {
@@ -39,6 +39,7 @@ exports.DynamicPropertyType = void 0;
   DynamicPropertyType["Display"] = "Display";
   DynamicPropertyType["Style"] = "Style";
   DynamicPropertyType["LayoutStyle"] = "LayoutStyle";
+  DynamicPropertyType["AllowedOptions"] = "AllowedOptions";
 })(exports.DynamicPropertyType || (exports.DynamicPropertyType = {}));
 exports.ExpressionType = void 0;
 (function (ExpressionType) {
@@ -356,13 +357,10 @@ function hasOptions(o) {
 function defaultControlForField(sf) {
   if (isCompoundField(sf)) {
     return {
-      type: exports.ControlDefinitionType.Group,
+      type: exports.ControlDefinitionType.Data,
       title: sf.displayName,
-      compoundField: sf.field,
-      groupOptions: {
-        type: exports.GroupRenderType.Grid,
-        hideTitle: false
-      },
+      field: sf.field,
+      required: sf.required,
       children: sf.children.map(defaultControlForField)
     };
   } else if (isScalarField(sf)) {
@@ -533,6 +531,15 @@ function cleanDataForSchema(v, fields) {
 
   return out;
 }
+function getAllReferencedClasses(c) {
+  var _c$children;
+  var childClasses = (_c$children = c.children) == null ? void 0 : _c$children.flatMap(getAllReferencedClasses);
+  var tc = clsx__default["default"](c.styleClass, c.layoutClass);
+  if (childClasses && !tc) return childClasses;
+  if (!tc) return [];
+  if (childClasses) return [tc].concat(childClasses);
+  return [tc];
+}
 
 function dataControl(field, title, options) {
   return _extends({
@@ -689,6 +696,13 @@ function useEvalStyleHook(useEvalExpressionHook, property, definition) {
     return core.useControl(undefined);
   }, [dynamicStyle]);
 }
+function useEvalAllowedOptionsHook(useEvalExpressionHook, definition) {
+  var dynamicAllowed = useEvalDynamicHook(definition, exports.DynamicPropertyType.AllowedOptions, useEvalExpressionHook);
+  return React.useCallback(function (ctx) {
+    if (dynamicAllowed) return dynamicAllowed(ctx);
+    return core.useControl([]);
+  }, [dynamicAllowed]);
+}
 function useEvalDisabledHook(useEvalExpressionHook, definition) {
   var dynamicDisabled = useEvalDynamicHook(definition, exports.DynamicPropertyType.Disabled, useEvalExpressionHook);
   return React.useCallback(function (ctx) {
@@ -883,6 +897,7 @@ function defaultTextValue(f, value) {
   }
 }
 
+var _excluded$1 = ["definition", "field", "control", "options", "elementRenderer", "style", "allowedOptions"];
 var AppendAdornmentPriority = 0;
 var WrapAdornmentPriority = 1000;
 exports.LabelType = void 0;
@@ -903,6 +918,7 @@ function useControlRenderer(definition, fields, renderer, options) {
   var useIsVisible = useEvalVisibilityHook(useExpr, definition, schemaField);
   var useIsReadonly = useEvalReadonlyHook(useExpr, definition);
   var useIsDisabled = useEvalDisabledHook(useExpr, definition);
+  var useAllowedOptions = useEvalAllowedOptionsHook(useExpr, definition);
   var useCustomStyle = useEvalStyleHook(useExpr, exports.DynamicPropertyType.Style, definition);
   var useLayoutStyle = useEvalStyleHook(useExpr, exports.DynamicPropertyType.LayoutStyle, definition);
   var useDynamicDisplay = useEvalDisplayHook(useExpr, definition);
@@ -951,23 +967,25 @@ function useControlRenderer(definition, fields, renderer, options) {
           };
         });
       });
+      var allowedOptions = useAllowedOptions(dataContext);
       var defaultValueControl = useDefaultValue(dataContext);
       var _getControlData = getControlData(_schemaField, dataContext),
         control = _getControlData[0],
         childContext = _getControlData[1];
       core.useControlEffect(function () {
-        return [visibility.value, defaultValueControl.value, control, parentControl.isNull];
+        return [visibility.value, defaultValueControl.value, control, parentControl.isNull, isDataControlDefinition(definition) && definition.dontClearHidden];
       }, function (_ref2) {
         var vc = _ref2[0],
           dv = _ref2[1],
           cd = _ref2[2],
-          pn = _ref2[3];
+          pn = _ref2[3],
+          dontClear = _ref2[4];
         if (pn) {
           parentControl.value = {};
         }
         if (vc && cd && vc.visible === vc.showing) {
           if (!vc.visible) {
-            if (_options.clearHidden) cd.value = undefined;
+            if (_options.clearHidden && !dontClear) cd.value = undefined;
           } else if (cd.value == null) {
             cd.value = dv;
           }
@@ -1010,7 +1028,8 @@ function useControlRenderer(definition, fields, renderer, options) {
         control: displayControl != null ? displayControl : control,
         schemaField: _schemaField,
         displayControl: displayControl,
-        style: customStyle
+        style: customStyle,
+        allowedOptions: allowedOptions
       });
       var renderedControl = renderer.renderLayout(_extends({}, labelAndChildren, {
         adornments: adornments,
@@ -1023,7 +1042,7 @@ function useControlRenderer(definition, fields, renderer, options) {
     } finally {
       stopTracking();
     }
-  }, [r, dataProps, useIsVisible, useDefaultValue, useIsReadonly, useIsDisabled, useCustomStyle, useLayoutStyle, useDynamicDisplay, useValidation, renderer, schemaInterface]);
+  }, [r, dataProps, useIsVisible, useDefaultValue, useIsReadonly, useIsDisabled, useCustomStyle, useLayoutStyle, useAllowedOptions, useDynamicDisplay, useValidation, renderer, schemaInterface]);
   Component.displayName = "RenderControl";
   return Component;
 }
@@ -1040,40 +1059,7 @@ function getControlData(schemaField, parentContext) {
     schemaInterface: parentContext.schemaInterface
   } : parentContext];
 }
-function renderArray(renderer, noun, field, required, arrayControl, _renderChild, className, style) {
-  var _arrayControl$element;
-  var elems = (_arrayControl$element = arrayControl.elements) != null ? _arrayControl$element : [];
-  return renderer.renderArray({
-    arrayControl: arrayControl,
-    childCount: elems.length,
-    required: required,
-    addAction: {
-      actionId: "add",
-      actionText: "Add " + noun,
-      onClick: function onClick() {
-        return core.addElement(arrayControl, elementValueForField(field));
-      }
-    },
-    childKey: function childKey(i) {
-      return elems[i].uniqueId;
-    },
-    removeAction: function removeAction(i) {
-      return {
-        actionId: "",
-        actionText: "Remove",
-        onClick: function onClick() {
-          return core.removeElement(arrayControl, i);
-        }
-      };
-    },
-    renderChild: function renderChild(i) {
-      return _renderChild(i, elems[i]);
-    },
-    className: cc(className),
-    style: style
-  });
-}
-function groupProps(renderOptions, childCount, _renderChild2, control, className, style) {
+function groupProps(renderOptions, childCount, _renderChild, control, className, style) {
   if (renderOptions === void 0) {
     renderOptions = {
       type: "Standard"
@@ -1082,7 +1068,7 @@ function groupProps(renderOptions, childCount, _renderChild2, control, className
   return {
     childCount: childCount,
     renderChild: function renderChild(i) {
-      return _renderChild2(i, i, {
+      return _renderChild(i, i, {
         control: control
       });
     },
@@ -1092,27 +1078,72 @@ function groupProps(renderOptions, childCount, _renderChild2, control, className
   };
 }
 function defaultDataProps(_ref3) {
-  var _field$options$length, _field$options, _definition$renderOpt;
+  var _field$options$length, _field$options, _allowedOptions$value, _definition$renderOpt;
   var definition = _ref3.definition,
     field = _ref3.field,
-    dataContext = _ref3.dataContext,
     control = _ref3.control,
     options = _ref3.options,
-    style = _ref3.style;
-  return {
+    elementRenderer = _ref3.elementRenderer,
+    style = _ref3.style,
+    allowedOptions = _ref3.allowedOptions,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded$1);
+  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({
     control: control,
     field: field,
     id: "c" + control.uniqueId,
-    options: ((_field$options$length = (_field$options = field.options) == null ? void 0 : _field$options.length) != null ? _field$options$length : 0) === 0 ? null : field.options,
+    options: fieldOptions && allowed.length > 0 ? fieldOptions.filter(function (x) {
+      return allowed.includes(x.value);
+    }) : fieldOptions,
     readonly: !!options.readonly,
     renderOptions: (_definition$renderOpt = definition.renderOptions) != null ? _definition$renderOpt : {
       type: "Standard"
     },
-    required: !!definition.required,
+    required: required,
     hidden: !!options.hidden,
-    className: cc(definition.styleClass),
-    style: style,
-    dataContext: dataContext
+    className: className,
+    style: style
+  }, props, {
+    toArrayProps: elementRenderer ? function () {
+      return defaultArrayProps(control, field, required, style, className, elementRenderer);
+    } : undefined
+  });
+}
+function defaultArrayProps(arrayControl, field, required, style, className, _renderElement) {
+  var _field$displayName, _arrayControl$element;
+  var noun = (_field$displayName = field.displayName) != null ? _field$displayName : field.field;
+  var elems = (_arrayControl$element = arrayControl.elements) != null ? _arrayControl$element : [];
+  return {
+    arrayControl: arrayControl,
+    elementCount: elems.length,
+    required: required,
+    addAction: {
+      actionId: "add",
+      actionText: "Add " + noun,
+      onClick: function onClick() {
+        return core.addElement(arrayControl, elementValueForField(field));
+      }
+    },
+    elementKey: function elementKey(i) {
+      return elems[i].uniqueId;
+    },
+    removeAction: function removeAction(i) {
+      return {
+        actionId: "",
+        actionText: "Remove",
+        onClick: function onClick() {
+          return core.removeElement(arrayControl, i);
+        }
+      };
+    },
+    renderElement: function renderElement(i) {
+      return _renderElement(elems[i]);
+    },
+    className: cc(className),
+    style: style
   };
 }
 function renderControlLayout(_ref4) {
@@ -1126,7 +1157,8 @@ function renderControlLayout(_ref4) {
     dataOptions = _ref4.formOptions,
     dataProps = _ref4.createDataProps,
     displayControl = _ref4.displayControl,
-    style = _ref4.style;
+    style = _ref4.style,
+    allowedOptions = _ref4.allowedOptions;
   if (isDataControlDefinition(c)) {
     return renderData(c);
   }
@@ -1172,44 +1204,27 @@ function renderControlLayout(_ref4) {
     };
   }
   return {};
-  function renderData(c) {
+  function renderData(c, elementControl) {
     if (!schemaField) return {
       children: "No schema field for: " + c.field
     };
-    if (isCompoundField(schemaField)) {
-      var label = {
-        hide: c.hideTitle,
-        label: controlTitle(c.title, schemaField),
-        type: schemaField.collection ? exports.LabelType.Control : exports.LabelType.Group
-      };
-      if (schemaField.collection) {
-        return {
-          label: label,
-          children: renderArray(renderer, controlTitle(c.title, schemaField), schemaField, !!c.required, childControl, compoundRenderer, c.styleClass, style),
-          errorControl: childControl
-        };
-      }
-      return {
-        processLayout: renderer.renderGroup(groupProps({
-          type: "Standard"
-        }, childCount, childRenderer, childControl, c.styleClass, style)),
-        label: label,
-        errorControl: childControl
-      };
-    }
     var props = dataProps({
       definition: c,
       field: schemaField,
       dataContext: dataContext,
-      control: childControl,
+      control: elementControl != null ? elementControl : childControl,
       options: dataOptions,
-      style: style
+      style: style,
+      childCount: childCount,
+      allowedOptions: allowedOptions,
+      renderChild: childRenderer,
+      elementRenderer: elementControl == null && schemaField.collection ? function (element) {
+        return renderLayoutParts(renderData(c, element), renderer).children;
+      } : undefined
     });
     var labelText = !c.hideTitle ? controlTitle(c.title, schemaField) : undefined;
     return {
-      processLayout: renderer.renderData(props, schemaField.collection ? function () {
-        return renderArray(renderer, controlTitle(c.title, schemaField), schemaField, !!c.required, childControl, scalarRenderer(props), c.styleClass, style);
-      } : undefined),
+      processLayout: renderer.renderData(props),
       label: {
         type: exports.LabelType.Control,
         label: labelText,
@@ -1220,39 +1235,6 @@ function renderControlLayout(_ref4) {
       errorControl: childControl
     };
   }
-  function compoundRenderer(i, control) {
-    var _renderer$renderLayou = renderer.renderLayout({
-        processLayout: renderer.renderGroup({
-          renderOptions: {
-            type: "Standard",
-            hideTitle: true
-          },
-          childCount: childCount,
-          renderChild: function renderChild(ci) {
-            return childRenderer(ci, ci, {
-              control: control
-            });
-          }
-        })
-      }),
-      className = _renderer$renderLayou.className,
-      style = _renderer$renderLayou.style,
-      children = _renderer$renderLayou.children;
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      key: control.uniqueId,
-      style: style,
-      className: cc(className)
-    }, children);
-  }
-  function scalarRenderer(dataProps) {
-    return function (i, control) {
-      return /*#__PURE__*/React__default["default"].createElement(React.Fragment, {
-        key: control.uniqueId
-      }, renderer.renderData(_extends({}, dataProps, {
-        control: control
-      }), undefined)({}).children);
-    };
-  }
 }
 function appendMarkup(k, markup) {
   return function (layout) {
@@ -1366,7 +1348,7 @@ function createFormRenderer(customRenderers, defaultRenderers) {
     })) != null ? _labelRenderers$find : defaultRenderers.label;
     return renderer.render(props, labelStart, labelEnd, formRenderers);
   }
-  function renderData(props, asArray) {
+  function renderData(props) {
     var _dataRegistrations$fi;
     var renderType = props.renderOptions.type,
       field = props.field;
@@ -1375,7 +1357,7 @@ function createFormRenderer(customRenderers, defaultRenderers) {
       var _x$collection, _field$collection, _x$options;
       return ((_x$collection = x.collection) != null ? _x$collection : false) === ((_field$collection = field.collection) != null ? _field$collection : false) && ((_x$options = x.options) != null ? _x$options : false) === options && isOneOf(x.schemaType, field.type) && isOneOf(x.renderType, renderType) && (!x.match || x.match(props));
     })) != null ? _dataRegistrations$fi : defaultRenderers.data;
-    var result = renderer.render(props, asArray, formRenderers);
+    var result = renderer.render(props, formRenderers);
     if (typeof result === "function") return result;
     return function (l) {
       return _extends({}, l, {
@@ -1460,29 +1442,29 @@ function createDefaultArrayRenderer(options) {
     removeActionClass = _ref2.removeActionClass,
     addActionClass = _ref2.addActionClass;
   function render(_ref3, _ref4) {
-    var childCount = _ref3.childCount,
-      renderChild = _ref3.renderChild,
+    var elementCount = _ref3.elementCount,
+      renderElement = _ref3.renderElement,
       addAction = _ref3.addAction,
       removeAction = _ref3.removeAction,
-      childKey = _ref3.childKey,
+      elementKey = _ref3.elementKey,
       required = _ref3.required;
     var renderAction = _ref4.renderAction;
-    var showRemove = !required || childCount > 1;
+    var showRemove = !required || elementCount > 1;
     return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
       className: clsx__default["default"](className, removeAction && removableClass)
     }, Array.from({
-      length: childCount
+      length: elementCount
     }, function (_, x) {
       return removeAction ? /*#__PURE__*/React__default["default"].createElement(React.Fragment, {
-        key: childKey(x)
+        key: elementKey(x)
       }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: clsx__default["default"](childClass, removableChildClass)
-      }, renderChild(x)), /*#__PURE__*/React__default["default"].createElement("div", {
+      }, renderElement(x)), /*#__PURE__*/React__default["default"].createElement("div", {
         className: removeActionClass
       }, showRemove && renderAction(removeAction(x)))) : /*#__PURE__*/React__default["default"].createElement("div", {
-        key: childKey(x),
+        key: elementKey(x),
         className: childClass
-      }, renderChild(x));
+      }, renderElement(x));
     })), addAction && /*#__PURE__*/React__default["default"].createElement("div", {
       className: addActionClass
     }, renderAction(addAction)));
@@ -1618,13 +1600,33 @@ function createDefaultDataRenderer(options) {
     booleanOptions = _optionRenderer$boole.booleanOptions,
     optionRenderer = _optionRenderer$boole.optionRenderer,
     displayOnlyClass = _optionRenderer$boole.displayOnlyClass;
-  return createDataRenderer(function (props, asArray, renderers) {
-    if (asArray) {
-      return asArray();
+  return createDataRenderer(function (props, renderers) {
+    var fieldType = props.field.type;
+    if (props.toArrayProps) {
+      return function (p) {
+        return _extends({}, p, {
+          children: renderers.renderArray(props.toArrayProps())
+        });
+      };
+    }
+    if (fieldType === exports.FieldType.Compound) {
+      return renderers.renderGroup({
+        style: props.style,
+        className: props.className,
+        renderOptions: {
+          type: "Standard",
+          hideTitle: true
+        },
+        renderChild: function renderChild(i) {
+          return props.renderChild(i, i, {
+            control: props.control
+          });
+        },
+        childCount: props.childCount
+      });
     }
     var renderOptions = props.renderOptions;
     var renderType = renderOptions.type;
-    var fieldType = props.field.type;
     if (fieldType == exports.FieldType.Any) return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, "No control for Any");
     if (isDisplayOnlyRenderer(renderOptions)) return function (p) {
       return _extends({}, p, {
@@ -1643,14 +1645,14 @@ function createDefaultDataRenderer(options) {
     if (booleanOptions != null && isBool && props.options == null) {
       return renderers.renderData(_extends({}, props, {
         options: booleanOptions
-      }), undefined);
+      }));
     }
     if (renderType === exports.DataRenderType.Standard && hasOptions(props)) {
-      return optionRenderer.render(props, undefined, renderers);
+      return optionRenderer.render(props, renderers);
     }
     switch (renderType) {
       case exports.DataRenderType.Dropdown:
-        return selectRenderer.render(props, undefined, renderers);
+        return selectRenderer.render(props, renderers);
     }
     return renderType === exports.DataRenderType.Checkbox ? /*#__PURE__*/React__default["default"].createElement(core.Fcheckbox, {
       style: props.style,
@@ -2098,6 +2100,7 @@ exports.createSelectConversion = createSelectConversion;
 exports.createSelectRenderer = createSelectRenderer;
 exports.createVisibilityRenderer = createVisibilityRenderer;
 exports.dataControl = dataControl;
+exports.defaultArrayProps = defaultArrayProps;
 exports.defaultCompoundField = defaultCompoundField;
 exports.defaultControlForField = defaultControlForField;
 exports.defaultDataProps = defaultDataProps;
@@ -2122,6 +2125,7 @@ exports.fieldHasTag = fieldHasTag;
 exports.findCompoundField = findCompoundField;
 exports.findField = findField;
 exports.findScalarField = findScalarField;
+exports.getAllReferencedClasses = getAllReferencedClasses;
 exports.getControlData = getControlData;
 exports.getDisplayOnlyOptions = getDisplayOnlyOptions;
 exports.getTypeField = getTypeField;
@@ -2157,6 +2161,7 @@ exports.stringOptionsField = stringOptionsField;
 exports.textDisplayControl = textDisplayControl;
 exports.useControlDefinitionForSchema = useControlDefinitionForSchema;
 exports.useControlRenderer = useControlRenderer;
+exports.useEvalAllowedOptionsHook = useEvalAllowedOptionsHook;
 exports.useEvalDefaultValueHook = useEvalDefaultValueHook;
 exports.useEvalDisabledHook = useEvalDisabledHook;
 exports.useEvalDisplayHook = useEvalDisplayHook;