@scenid/react-formulator 0.1.14 → 0.3.0

package/dist/index.esm.js

@@ -2,19 +2,42 @@ import * as React from 'react';
 import React__default, { useState, useEffect } from 'react';
 import * as PropTypes from 'prop-types';
 import PropTypes__default from 'prop-types';
-import { Box, Typography, Paper, makeStyles, FormGroup, InputAdornment, FormControl, FormControlLabel, FormHelperText, TextField, MenuItem, Checkbox, Switch, List, ListItem, ListItemText, ListItemSecondaryAction, IconButton, Button, InputLabel, Select, Input } from '@material-ui/core';
+import _Input from '@material-ui/core/esm/Input';
+import _Paper from '@material-ui/core/esm/Paper';
+import _Box from '@material-ui/core/esm/Box';
+import _Typography from '@material-ui/core/esm/Typography';
+import { makeStyles, withStyles, darken, lighten, alpha as alpha$1, useTheme, duration, emphasize } from '@material-ui/core/styles';
+import _FormGroup from '@material-ui/core/esm/FormGroup';
+import _FormControl from '@material-ui/core/esm/FormControl';
+import _FormHelperText from '@material-ui/core/esm/FormHelperText';
+import _FormControlLabel from '@material-ui/core/esm/FormControlLabel';
+import _InputAdornment from '@material-ui/core/esm/InputAdornment';
 import cx from 'classnames';
 import { makeStyles as makeStyles$1 } from '@material-ui/styles';
 import AutorenewIcon from '@material-ui/icons/Autorenew';
-import { Delete, Save, Clear } from '@material-ui/icons';
+import _TextField from '@material-ui/core/esm/TextField';
+import _MenuItem from '@material-ui/core/esm/MenuItem';
+import _Switch from '@material-ui/core/esm/Switch';
+import _Checkbox from '@material-ui/core/esm/Checkbox';
+import _Select from '@material-ui/core/esm/Select';
+import _InputLabel from '@material-ui/core/esm/InputLabel';
+import _Clear from '@material-ui/icons/esm/Clear';
+import _Save from '@material-ui/icons/esm/Save';
+import _Button from '@material-ui/core/esm/Button';
+import _List from '@material-ui/core/esm/List';
+import _ListItem from '@material-ui/core/esm/ListItem';
+import _ListItemSecondaryAction from '@material-ui/core/esm/ListItemSecondaryAction';
+import _IconButton from '@material-ui/core/esm/IconButton';
+import _Delete from '@material-ui/icons/esm/Delete';
+import _ListItemText from '@material-ui/core/esm/ListItemText';
 import { DateTime } from 'luxon';
 import path$3 from 'path';
 import proc from 'process';
 import { fileURLToPath } from 'url';
-import { withStyles, darken, lighten, alpha as alpha$1, useTheme, duration, emphasize } from '@material-ui/core/styles';
-import Paper$1 from '@material-ui/core/Paper';
+import Paper from '@material-ui/core/Paper';
 import { createSvgIcon, capitalize, unstable_useId, useControlled, useEventCallback, setRef, useIsFocusVisible, useForkRef, isMuiElement } from '@material-ui/core/utils';
-import IconButton$1 from '@material-ui/core/IconButton';
+import IconButton from '@material-ui/core/IconButton';
+import { Typography } from '@material-ui/core';
 import Popper from '@material-ui/core/Popper';
 import ListSubheader from '@material-ui/core/ListSubheader';
 import Chip from '@material-ui/core/Chip';
@@ -29010,20 +29033,20 @@ var FormGroupHeader = function FormGroupHeader(_ref) {
       desc = _ref.desc,
       descVariant = _ref.descVariant,
       textAlign = _ref.textAlign;
-  return /*#__PURE__*/React__default.createElement(Box, {
+  return /*#__PURE__*/React__default.createElement(_Box, {
     style: {
       width: '100%',
       display: 'flex',
       flexDirection: 'column'
     }
-  }, label && /*#__PURE__*/React__default.createElement(Box, {
+  }, label && /*#__PURE__*/React__default.createElement(_Box, {
     mb: 2
-  }, /*#__PURE__*/React__default.createElement(Typography, {
+  }, /*#__PURE__*/React__default.createElement(_Typography, {
     variant: labelVariant,
     align: textAlign
-  }, label)), desc && /*#__PURE__*/React__default.createElement(Box, {
+  }, label)), desc && /*#__PURE__*/React__default.createElement(_Box, {
     mb: 2
-  }, /*#__PURE__*/React__default.createElement(Typography, {
+  }, /*#__PURE__*/React__default.createElement(_Typography, {
     variant: descVariant,
     align: textAlign
   }, desc)));
@@ -29049,11 +29072,11 @@ var FormSectionCard = function FormSectionCard(_ref) {
       descVariant = _ref.descVariant,
       textAlign = _ref.textAlign,
       children = _ref.children;
-  return /*#__PURE__*/React__default.createElement(Box, {
+  return /*#__PURE__*/React__default.createElement(_Box, {
     mb: 2
-  }, /*#__PURE__*/React__default.createElement(Paper, {
+  }, /*#__PURE__*/React__default.createElement(_Paper, {
     elevation: 0
-  }, /*#__PURE__*/React__default.createElement(Box, {
+  }, /*#__PURE__*/React__default.createElement(_Box, {
     p: 2
   }, /*#__PURE__*/React__default.createElement(FormGroupHeader, {
     label: label,
@@ -29091,7 +29114,7 @@ var FormSectionBlock = function FormSectionBlock(_ref) {
       textAlign = _ref.textAlign,
       children = _ref.children;
   var styles = useStyles$1();
-  return /*#__PURE__*/React__default.createElement(Box, {
+  return /*#__PURE__*/React__default.createElement(_Box, {
     className: styles.formSectionBlock
   }, /*#__PURE__*/React__default.createElement(FormGroupHeader, {
     label: label,
@@ -29155,10 +29178,10 @@ var FormControlField$1 = function FormControlField(_ref) {
     onChange: onChange
   });
 
-  var isRender = type === 'render';
+  var isRender = type === '@@render';
 
   if (validating) {
-    finalProps.endAdornment = [/*#__PURE__*/React__default.createElement(InputAdornment, {
+    finalProps.endAdornment = [/*#__PURE__*/React__default.createElement(_InputAdornment, {
       position: "end"
     }, /*#__PURE__*/React__default.createElement(AutorenewIcon, null))];
   }
@@ -29166,40 +29189,48 @@ var FormControlField$1 = function FormControlField(_ref) {
   var control;
 
   if (isRender) {
-    control = /*#__PURE__*/React__default.cloneElement(component, _objectSpread$4(_objectSpread$4({
-      variant: variant
-    }, finalProps), {}, {
-      label: label,
-      hasErrors: hasErrors,
-      errors: errors,
-      dirty: dirty
-    }));
+    try {
+      control = /*#__PURE__*/React__default.cloneElement(component, _objectSpread$4(_objectSpread$4({
+        variant: variant
+      }, finalProps), {}, {
+        label: label,
+        hasErrors: hasErrors,
+        errors: errors,
+        dirty: dirty
+      }));
+    } catch (e) {
+      throw new Error("error creating control for field \"".concat(name, "\": ").concat(e.message));
+    }
   } else {
-    control = /*#__PURE__*/React__default.createElement(component, _objectSpread$4({
-      variant: variant
-    }, finalProps));
+    try {
+      control = /*#__PURE__*/React__default.createElement(component, _objectSpread$4({
+        variant: variant
+      }, finalProps));
+    } catch (e) {
+      throw new Error("error creating control for field \"".concat(name, "\": ").concat(e.message));
+    }
   }
 
   var isSwitch = type === 'boolean';
-  var isRepeater = type === 'array' && !isRender;
+  var isRepeater = type === 'array';
 
   if (isRepeater || isRender) {
     return control;
   }
 
-  return /*#__PURE__*/React__default.createElement(FormControl, {
+  return /*#__PURE__*/React__default.createElement(_FormControl, {
     className: "data-card-field",
     error: dirty && hasErrors,
     variant: variant,
     margin: "dense",
     fullWidth: true,
     required: required
-  }, isSwitch && /*#__PURE__*/React__default.createElement(FormControlLabel, {
+  }, isSwitch && /*#__PURE__*/React__default.createElement(_FormControlLabel, {
     className: cx(_defineProperty({}, styles.error, dirty && hasErrors)),
     control: control,
     label: label,
     labelPlacement: finalProps.labelPlacement || 'end'
-  }), !isSwitch && !isRepeater && !isRender && control, dirty && hasErrors && /*#__PURE__*/React__default.createElement(FormHelperText, null, errors.map(function (e) {
+  }), !isSwitch && !isRepeater && !isRender && control, dirty && hasErrors && /*#__PURE__*/React__default.createElement(_FormHelperText, null, errors.map(function (e) {
     return e.message;
   }).join('. ')));
 };
@@ -29244,7 +29275,7 @@ var FormField = function FormField(_ref2) {
     });
   }
 
-  return /*#__PURE__*/React__default.createElement(FormGroup, null, prepend, /*#__PURE__*/React__default.createElement(FormControlField$1, finalProps), append);
+  return /*#__PURE__*/React__default.createElement(_FormGroup, null, prepend, /*#__PURE__*/React__default.createElement(FormControlField$1, finalProps), append);
 };
 
 FormField.propTypes = {
@@ -29275,7 +29306,7 @@ var FormField$1 = /*#__PURE__*/React__default.memo(FormField, function (prevProp
 function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
+// eslint-disable-next-line react/prop-types, react/jsx-props-no-spreading
 var FormText = (function (props) {
   var finalProps = _objectSpread$3({}, props);
 
@@ -29285,7 +29316,7 @@ var FormText = (function (props) {
     };
   }
 
-  return /*#__PURE__*/React__default.createElement(TextField, finalProps);
+  return /*#__PURE__*/React__default.createElement(_TextField, finalProps);
 });
 
 function _extends() {
@@ -29326,7 +29357,7 @@ var FormNumber = function FormNumber(_ref) {
       _onChange = _ref.onChange,
       props = _objectWithoutProperties(_ref, _excluded$4);
 
-  return /*#__PURE__*/React__default.createElement(TextField, _extends({
+  return /*#__PURE__*/React__default.createElement(_TextField, _extends({
     name: name,
     type: "number",
     value: castToNumber(value, step),
@@ -29375,14 +29406,14 @@ var FormSelect = function FormSelect(_ref) {
   var allOptions = [].concat(_toConsumableArray(unselectOption), _toConsumableArray(options.sort(function (l, r) {
     return l.label.localeCompare(r.label);
   })));
-  return /*#__PURE__*/React__default.createElement(TextField, _extends({
+  return /*#__PURE__*/React__default.createElement(_TextField, _extends({
     select: true,
     required: required,
     value: value === undefined ? '' : value
   }, props), allOptions.map(function (_ref2) {
     var itemLabel = _ref2.label,
         itemValue = _ref2.value;
-    return /*#__PURE__*/React__default.createElement(MenuItem, {
+    return /*#__PURE__*/React__default.createElement(_MenuItem, {
       key: itemLabel,
       value: itemValue
     }, itemLabel);
@@ -29428,7 +29459,7 @@ var FormBoolean = function FormBoolean(_ref) {
   };
 
   if (variant === 'checkbox') {
-    return /*#__PURE__*/React__default.createElement(Checkbox, {
+    return /*#__PURE__*/React__default.createElement(_Checkbox, {
       color: "primary",
       name: name,
       checked: isChecked$1(value, defaultValue),
@@ -29436,7 +29467,7 @@ var FormBoolean = function FormBoolean(_ref) {
     });
   }
 
-  return /*#__PURE__*/React__default.createElement(Switch, {
+  return /*#__PURE__*/React__default.createElement(_Switch, {
     color: "primary",
     name: name,
     checked: isChecked$1(value, defaultValue),
@@ -29559,58 +29590,58 @@ var FormRepeater = function FormRepeater(_ref) {
     });
   }
 
-  return /*#__PURE__*/React__default.createElement(Box, null, /*#__PURE__*/React__default.createElement(List, {
+  return /*#__PURE__*/React__default.createElement(_Box, null, /*#__PURE__*/React__default.createElement(_List, {
     dense: true
   }, entries.map(function (entry, index) {
     return (
       /*#__PURE__*/
       // eslint-disable-next-line react/no-array-index-key
-      React__default.createElement(ListItem, {
+      React__default.createElement(_ListItem, {
         key: "entry-".concat(index)
-      }, /*#__PURE__*/React__default.createElement(ListItemText, {
+      }, /*#__PURE__*/React__default.createElement(_ListItemText, {
         primary: getValue$1(entry, catalog)
-      }), /*#__PURE__*/React__default.createElement(ListItemSecondaryAction, null, /*#__PURE__*/React__default.createElement(IconButton, {
+      }), /*#__PURE__*/React__default.createElement(_ListItemSecondaryAction, null, /*#__PURE__*/React__default.createElement(_IconButton, {
         edge: "end",
         "aria-label": "delete",
         size: "small",
         onClick: function onClick() {
           return handleEntryDel(index);
         }
-      }, /*#__PURE__*/React__default.createElement(Delete, {
+      }, /*#__PURE__*/React__default.createElement(_Delete, {
         fontSize: "small"
       }))))
     );
-  })), !inEdit && /*#__PURE__*/React__default.createElement(Box, null, /*#__PURE__*/React__default.createElement(Button, {
+  })), !inEdit && /*#__PURE__*/React__default.createElement(_Box, null, /*#__PURE__*/React__default.createElement(_Button, {
     color: "primary",
     variant: "outlined",
     onClick: function onClick() {
       return setInEdit(true);
     }
-  }, "Eintrag hinzuf\xFCgen")), inEdit && !catalog && /*#__PURE__*/React__default.createElement(Box, {
+  }, "Eintrag hinzuf\xFCgen")), inEdit && !catalog && /*#__PURE__*/React__default.createElement(_Box, {
     width: "100%",
     display: "flex",
     alignItems: "center"
-  }, /*#__PURE__*/React__default.createElement(FormControl, {
+  }, /*#__PURE__*/React__default.createElement(_FormControl, {
     variant: "filled",
     fullWidth: true
-  }, /*#__PURE__*/React__default.createElement(TextField, {
+  }, /*#__PURE__*/React__default.createElement(_TextField, {
     label: "Neuer Eintrag",
     variant: variant,
     value: inputValue,
     InputProps: {
-      endAdornment: /*#__PURE__*/React__default.createElement(InputAdornment, {
+      endAdornment: /*#__PURE__*/React__default.createElement(_InputAdornment, {
         position: "end"
-      }, /*#__PURE__*/React__default.createElement(Box, {
+      }, /*#__PURE__*/React__default.createElement(_Box, {
         mr: 1
-      }, /*#__PURE__*/React__default.createElement(IconButton, {
+      }, /*#__PURE__*/React__default.createElement(_IconButton, {
         size: "small",
         onClick: handleEntryAdd
-      }, /*#__PURE__*/React__default.createElement(Save, {
+      }, /*#__PURE__*/React__default.createElement(_Save, {
         fontSize: "small"
-      }))), /*#__PURE__*/React__default.createElement(IconButton, {
+      }))), /*#__PURE__*/React__default.createElement(_IconButton, {
         size: "small",
         onClick: handleCancelNewEntry
-      }, /*#__PURE__*/React__default.createElement(Clear, {
+      }, /*#__PURE__*/React__default.createElement(_Clear, {
         fontSize: "small"
       })))
     },
@@ -29621,25 +29652,25 @@ var FormRepeater = function FormRepeater(_ref) {
     onChange: function onChange(e) {
       return setInputValue(e.target.value);
     }
-  }))), inEdit && catalog && /*#__PURE__*/React__default.createElement(Box, {
+  }))), inEdit && catalog && /*#__PURE__*/React__default.createElement(_Box, {
     width: "100%",
     display: "flex",
     alignItems: "center"
-  }, /*#__PURE__*/React__default.createElement(FormControl, {
+  }, /*#__PURE__*/React__default.createElement(_FormControl, {
     variant: "filled",
     fullWidth: true
-  }, /*#__PURE__*/React__default.createElement(InputLabel, null, "Neuer Eintrag"), /*#__PURE__*/React__default.createElement(Select, {
+  }, /*#__PURE__*/React__default.createElement(_InputLabel, null, "Neuer Eintrag"), /*#__PURE__*/React__default.createElement(_Select, {
     defaultValue: "please-select",
     onChange: function onChange(e) {
       return setEntries([].concat(_toConsumableArray(entries), [e.target.value]));
     }
-  }, /*#__PURE__*/React__default.createElement(MenuItem, {
+  }, /*#__PURE__*/React__default.createElement(_MenuItem, {
     value: "please-select",
     disabled: true
   }, "Eintrag hinzuf\xFCgen"), Object.entries(catalog).sort(function (a, b) {
     return a[1].localeCompare(b[1]);
   }).map(function (e) {
-    return /*#__PURE__*/React__default.createElement(MenuItem, {
+    return /*#__PURE__*/React__default.createElement(_MenuItem, {
       key: "option-".concat(e[0]),
       value: e[0],
       disabled: blockedOptions.includes(e[0])
@@ -29650,7 +29681,7 @@ var FormRepeater = function FormRepeater(_ref) {
 FormRepeater.propTypes = {
   variant: PropTypes__default.oneOf(['standard', 'filled', 'outlined']),
   name: PropTypes__default.string.isRequired,
-  value: PropTypes__default.any.isRequired,
+  value: PropTypes__default.any,
   catalog: PropTypes__default.object,
   onChange: PropTypes__default.func.isRequired
 };
@@ -29685,13 +29716,13 @@ var FormControlField = function FormControlField(_ref) {
   }
 
   var control;
-  if (type === 'render') control = /*#__PURE__*/React__default.cloneElement(component, finalProps);else control = /*#__PURE__*/React__default.createElement(component, finalProps);
-  return /*#__PURE__*/React__default.createElement(Box, {
+  if (type === '@@render') control = /*#__PURE__*/React__default.cloneElement(component, finalProps);else control = /*#__PURE__*/React__default.createElement(component, finalProps);
+  return /*#__PURE__*/React__default.createElement(_Box, {
     width: "100%",
     display: "flex",
     flexDirection: "column",
     mb: 1.5
-  }, label && /*#__PURE__*/React__default.createElement(Typography, {
+  }, label && /*#__PURE__*/React__default.createElement(_Typography, {
     variant: "caption",
     color: "textSecondary"
   }, label), control);
@@ -29769,7 +29800,7 @@ var FormReadOnlyText = function FormReadOnlyText(_ref) {
     finalValue = DateTime.fromISO(value).toLocaleString(DateTime.DATE_MED_WITH_WEEKDAY);
   }
 
-  return /*#__PURE__*/React__default.createElement(Typography, {
+  return /*#__PURE__*/React__default.createElement(_Typography, {
     variant: "body1"
   }, finalValue);
 };
@@ -68033,14 +68064,14 @@ var FormReadOnlyBoolean = function FormReadOnlyBoolean(_ref) {
       defaultValue = _ref.defaultValue;
 
   if (variant === 'checkbox') {
-    return /*#__PURE__*/React__default.createElement(Checkbox, {
+    return /*#__PURE__*/React__default.createElement(_Checkbox, {
       name: name,
       checked: isChecked(value, defaultValue),
       disabled: true
     });
   }
 
-  return /*#__PURE__*/React__default.createElement(Switch, {
+  return /*#__PURE__*/React__default.createElement(_Switch, {
     name: name,
     checked: isChecked(value, defaultValue),
     disabled: true
@@ -68062,15 +68093,15 @@ var getValue = function getValue(value, catalog) {
 var FormReadOnlyRepeater = function FormReadOnlyRepeater(_ref) {
   var value = _ref.value,
       catalog = _ref.catalog;
-  return /*#__PURE__*/React__default.createElement(Box, null, /*#__PURE__*/React__default.createElement(List, {
+  return /*#__PURE__*/React__default.createElement(_Box, null, /*#__PURE__*/React__default.createElement(_List, {
     dense: true
   }, value && value.map(function (entry, index) {
     return (
       /*#__PURE__*/
       // eslint-disable-next-line react/no-array-index-key
-      React__default.createElement(ListItem, {
+      React__default.createElement(_ListItem, {
         key: "entry-".concat(index)
-      }, /*#__PURE__*/React__default.createElement(ListItemText, {
+      }, /*#__PURE__*/React__default.createElement(_ListItemText, {
         primary: getValue(entry, catalog)
       }))
     );
@@ -68338,7 +68369,7 @@ var Alert = /*#__PURE__*/React.forwardRef(function Alert(props, ref) {
       variant = _props$variant === void 0 ? 'standard' : _props$variant,
       other = _objectWithoutProperties(props, ["action", "children", "classes", "className", "closeText", "color", "icon", "iconMapping", "onClose", "role", "severity", "variant"]);
 
-  return /*#__PURE__*/React.createElement(Paper$1, _extends({
+  return /*#__PURE__*/React.createElement(Paper, _extends({
     role: role,
     square: true,
     elevation: 0,
@@ -68352,7 +68383,7 @@ var Alert = /*#__PURE__*/React.forwardRef(function Alert(props, ref) {
     className: classes.action
   }, action) : null, action == null && onClose ? /*#__PURE__*/React.createElement("div", {
     className: classes.action
-  }, /*#__PURE__*/React.createElement(IconButton$1, {
+  }, /*#__PURE__*/React.createElement(IconButton, {
     size: "small",
     "aria-label": closeText,
     title: closeText,
@@ -69902,7 +69933,7 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(props, re
       openText = _props$openText === void 0 ? 'Open' : _props$openText;
       props.options;
       var _props$PaperComponent = props.PaperComponent,
-      PaperComponent = _props$PaperComponent === void 0 ? Paper$1 : _props$PaperComponent,
+      PaperComponent = _props$PaperComponent === void 0 ? Paper : _props$PaperComponent,
       _props$PopperComponen = props.PopperComponent,
       PopperComponentProp = _props$PopperComponen === void 0 ? Popper : _props$PopperComponen,
       _props$popupIcon = props.popupIcon,
@@ -70024,11 +70055,11 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(props, re
       startAdornment: startAdornment,
       endAdornment: /*#__PURE__*/React.createElement("div", {
         className: classes.endAdornment
-      }, hasClearIcon ? /*#__PURE__*/React.createElement(IconButton$1, _extends({}, getClearProps(), {
+      }, hasClearIcon ? /*#__PURE__*/React.createElement(IconButton, _extends({}, getClearProps(), {
         "aria-label": clearText,
         title: clearText,
         className: clsx(classes.clearIndicator, dirty && classes.clearIndicatorDirty)
-      }), closeIcon) : null, hasPopupIcon ? /*#__PURE__*/React.createElement(IconButton$1, _extends({}, getPopupIndicatorProps(), {
+      }), closeIcon) : null, hasPopupIcon ? /*#__PURE__*/React.createElement(IconButton, _extends({}, getPopupIndicatorProps(), {
         disabled: disabled,
         "aria-label": popupOpen ? closeText : openText,
         title: popupOpen ? closeText : openText,
@@ -75386,11 +75417,11 @@ withStyles(styles, {
 var HiddenData = function HiddenData(_ref) {
   var subject = _ref.subject,
       label = _ref.label;
-  return /*#__PURE__*/React__default.createElement(Box, {
+  return /*#__PURE__*/React__default.createElement(_Box, {
     mb: 2
   }, /*#__PURE__*/React__default.createElement(Alert$1, {
     severity: "warning"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
+  }, /*#__PURE__*/React__default.createElement(_Typography, {
     variant: "body1"
   }, subject ? "".concat(subject, " ") : '', /*#__PURE__*/React__default.createElement("span", {
     style: {
@@ -75432,8 +75463,8 @@ var formComponentMap = {
   array: FormRepeater
 };
 var apComponentMap = {
-  "default": Input,
-  string: Input,
+  "default": _Input,
+  string: _Input,
   number: FormNumber,
   select: FormSelect,
   "boolean": FormBoolean
@@ -75462,19 +75493,10 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
           fieldStates = _this$props.fieldStates,
           renderComponentMap = _this$props.renderComponentMap;
       var field = fieldEntry,
+          isRender = false,
           specialProps = {};
 
       if (Array.isArray(fieldEntry)) {
-        if (fieldEntry[0] === '@@render') {
-          field = fieldEntry[1];
-          return {
-            type: 'render',
-            name: field,
-            component: renderComponentMap[field],
-            componentProps: fieldEntry[2] || {}
-          };
-        }
-
         if (fieldEntry[0] === '@@markdown') {
           return {
             type: 'markdown',
@@ -75486,9 +75508,16 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
           };
         }
 
-        field = fieldEntry[0];
-        if (!fieldEntry[1]) throw new Error("field \"".concat(field, "\" is defined in an array, but has no props definition"));
-        specialProps = fieldEntry[1];
+        if (fieldEntry[0] === '@@render') {
+          if (!fieldEntry[1]) throw new Error("render field \"".concat(field, "\" has no name"));
+          field = fieldEntry[1];
+          specialProps = fieldEntry[2] || {};
+          isRender = true;
+        } else {
+          field = fieldEntry[0];
+          if (!fieldEntry[1]) throw new Error("field \"".concat(field, "\" is defined in an array, but has no props definition"));
+          specialProps = fieldEntry[1];
+        }
       }
 
       var _specialProps = specialProps,
@@ -75509,8 +75538,8 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
           type = _schema$properties$fi.type,
           defaultValue = _schema$properties$fi["default"];
       var mapKey;
-      if (componentMap[field] !== undefined) mapKey = field;else if (typeof type === 'string' && componentMap[type] !== undefined) mapKey = type;else if (Array.isArray(type)) mapKey = 'select';else if (componentMap["default"] !== undefined) mapKey = 'default';else throw new Error("Could not find a Component to render for \"".concat(field, "\""));
-      var mapEntry = componentMap[mapKey];
+      if (isRender) mapKey = '@@render';else if (componentMap[field] !== undefined) mapKey = field;else if (typeof type === 'string' && componentMap[type] !== undefined) mapKey = type;else if (Array.isArray(type)) mapKey = 'select';else if (componentMap["default"] !== undefined) mapKey = 'default';else throw new Error("Could not find a Component to render for \"".concat(field, "\""));
+      var mapEntry = isRender ? renderComponentMap[field] : componentMap[mapKey];
       var component = mapEntry,
           props = {};
 
@@ -75530,8 +75559,9 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
         /* eslint-enable prefer-destructuring */
       }
 
+      if (!component) throw new Error("could not find component for field \"".concat(field, "\""));
       return _objectSpread$1(_objectSpread$1({
-        type: mapKey,
+        type: isRender ? '@@render' : mapKey,
         name: field,
         label: hideLabel !== true && (translations.labels && translations.labels[field] || field),
         defaultValue: defaultValue,
@@ -75587,61 +75617,6 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
       return Array.isArray(fields) && fields.map(function (fieldEntry, fieldIndex) {
         if (fieldEntry === false) return false;
 
-        if (Array.isArray(fieldEntry) && fieldEntry[0] === '@@render') {
-          var cKey = fieldEntry[1];
-
-          var _component = renderComponentMap && renderComponentMap[cKey];
-
-          if (!_component) throw new Error("Could not find Component for render field \"".concat(cKey, "\""));
-
-          var _fieldProps = _this.getFieldProps(fieldEntry);
-
-          var _type = _fieldProps.type,
-              _name = _fieldProps.name,
-              _componentProps = _fieldProps.componentProps,
-              _label = _fieldProps.label,
-              _value = _fieldProps.value,
-              _required = _fieldProps.required,
-              _hasErrors = _fieldProps.hasErrors,
-              _errors = _fieldProps.errors,
-              _validating = _fieldProps.validating,
-              _dirty = _fieldProps.dirty;
-
-          if (readOnly) {
-            if (!_value) return false;
-
-            if (Array.isArray(obscuredFields) && obscuredFields.includes(_name)) {
-              return /*#__PURE__*/React__default.createElement(HiddenData, {
-                subject: "Das Feld",
-                label: _label
-              });
-            }
-          }
-
-          return /*#__PURE__*/React__default.createElement(readOnly ? FormReadOnlyField$1 : FormField$1, {
-            key: "form-render-component-".concat(cKey),
-            variant: inputVariant,
-            name: _name,
-            type: _type,
-            label: _label,
-            value: _value,
-            required: _required,
-            hasErrors: _hasErrors,
-            errors: _errors,
-            validating: _validating,
-            dirty: _dirty,
-            component: _component,
-            componentProps: _componentProps,
-            disabled: disabled,
-            readOnly: readOnly,
-            fields: fields,
-            results: results,
-            data: data,
-            fieldStates: fieldStates,
-            onChange: onChange
-          });
-        }
-
         if (typeof fieldEntry !== 'string' && !Array.isArray(fieldEntry)) {
           return /*#__PURE__*/React__default.createElement(FormulatorFormSection, {
             key: "form-section-".concat(fieldEntry.id),
@@ -75797,10 +75772,10 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
 
       return /*#__PURE__*/React__default.createElement(FormSectionBlock, {
         key: "form-section-".concat(sectionId),
-        label: groupLabel,
-        labelVariant: groupLabelVariant,
-        desc: groupDesc,
-        descVariant: groupDescVariant,
+        label: label,
+        labelVariant: labelVariant,
+        desc: desc,
+        descVariant: descVariant,
         textAlign: textAlign
       }, sectionContent);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scenid/react-formulator",
-  "version": "0.1.14",
+  "version": "0.3.0",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "repository": "https://dennykoch@bitbucket.org/scenid/react-formulator.git",
@@ -27,9 +27,15 @@
     "react-dom": "16.11.0"
   },
   "devDependencies": {
+    "@babel/cli": "^7.8.4",
     "@babel/core": "^7.17.9",
+    "@babel/node": "^7.8.7",
     "@babel/plugin-proposal-export-default-from": "^7.16.7",
     "@babel/plugin-transform-runtime": "^7.17.0",
+    "@babel/preset-env": "^7.4.5",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/register": "^7.0.0",
+    "@babel/runtime": "^7.4.5",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.61",
@@ -45,9 +51,10 @@
     "@storybook/addon-links": "^6.4.22",
     "@storybook/react": "^6.4.22",
     "@storybook/testing-library": "^0.0.11",
+    "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.5",
+    "babel-plugin-import": "^1.13.5",
     "classnames": "^2.3.1",
-    "luxon": "^2.3.2",
     "cross-env": "^7.0.3",
     "eslint": "^7.11.0",
     "eslint-config-airbnb": "^18.0.1",
@@ -62,6 +69,7 @@
     "eslint-plugin-react-hooks": "^2.3.0",
     "eventemitter3": "^4.0.7",
     "fast-deep-equal": "^3.1.3",
+    "luxon": "^2.3.2",
     "micromustache": "^8.0.3",
     "prop-types": "^15.8.1",
     "react": "16.11.0",