@scenid/react-formulator 1.2.5 → 2.1.0

package/dist/index.esm.js

@@ -1,41 +1,15 @@
 import React, { useCallback, useState, useEffect, useRef, cloneElement } from 'react';
 import PropTypes from 'prop-types';
-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 } 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 { Box, Typography, Paper, FormGroup, InputAdornment, FormControl, FormControlLabel, FormHelperText, Stack, TextField, CircularProgress, MenuItem, Checkbox, Switch, List, ListItem, ListItemText, ListItemSecondaryAction, IconButton, Button, ClickAwayListener, Alert, Input } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 import cx from 'classnames';
-import { makeStyles as makeStyles$1, useTheme } from '@material-ui/styles';
-import AutorenewIcon from '@material-ui/icons/Autorenew';
-import _TextField from '@material-ui/core/esm/TextField';
-import _CircularProgress from '@material-ui/core/esm/CircularProgress';
-import Autocomplete, { createFilterOptions } from '@material-ui/lab/Autocomplete';
-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 _ClickAwayListener from '@material-ui/core/esm/ClickAwayListener';
-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 { makeStyles as makeStyles$1, useTheme } from '@mui/styles';
+import { Autorenew, Delete, Save, Clear, Check, Close } from '@mui/icons-material';
+import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
 import path$3 from 'path';
 import proc from 'process';
 import { fileURLToPath } from 'url';
-import { Alert } from '@material-ui/lab';
-import _Close from '@material-ui/icons/esm/Close';
-import _Check from '@material-ui/icons/esm/Check';
-import { alpha as alpha$1 } from '@material-ui/core/styles/colorManipulator';
+import { alpha as alpha$1 } from '@mui/material/styles';
 
 function _classCallCheck(instance, Constructor) {
   if (!(instance instanceof Constructor)) {
@@ -2254,19 +2228,19 @@ var anObject$1E = anObject$1G;
 var concat$6 = uncurryThis$1k([].concat);
 
 // all object keys, includes non-enumerable and symbols
-var ownKeys$9 = getBuiltIn$I('Reflect', 'ownKeys') || function ownKeys(it) {
+var ownKeys$8 = getBuiltIn$I('Reflect', 'ownKeys') || function ownKeys(it) {
   var keys = getOwnPropertyNamesModule$2.f(anObject$1E(it));
   var getOwnPropertySymbols = getOwnPropertySymbolsModule$3.f;
   return getOwnPropertySymbols ? concat$6(keys, getOwnPropertySymbols(it)) : keys;
 };
 
 var hasOwn$v = hasOwnProperty_1;
-var ownKeys$8 = ownKeys$9;
+var ownKeys$7 = ownKeys$8;
 var getOwnPropertyDescriptorModule$6 = objectGetOwnPropertyDescriptor;
 var definePropertyModule$a = objectDefineProperty;
 
 var copyConstructorProperties$4 = function (target, source, exceptions) {
-  var keys = ownKeys$8(source);
+  var keys = ownKeys$7(source);
   var defineProperty = definePropertyModule$a.f;
   var getOwnPropertyDescriptor = getOwnPropertyDescriptorModule$6.f;
   for (var i = 0; i < keys.length; i++) {
@@ -7973,7 +7947,7 @@ $$3p({ target: 'Object', stat: true, forced: FORCED$9, sham: !DESCRIPTORS$i }, {
 
 var $$3o = _export;
 var DESCRIPTORS$h = descriptors;
-var ownKeys$7 = ownKeys$9;
+var ownKeys$6 = ownKeys$8;
 var toIndexedObject$7 = toIndexedObject$k;
 var getOwnPropertyDescriptorModule$4 = objectGetOwnPropertyDescriptor;
 var createProperty$1 = createProperty$9;
@@ -7984,7 +7958,7 @@ $$3o({ target: 'Object', stat: true, sham: !DESCRIPTORS$h }, {
   getOwnPropertyDescriptors: function getOwnPropertyDescriptors(object) {
     var O = toIndexedObject$7(object);
     var getOwnPropertyDescriptor = getOwnPropertyDescriptorModule$4.f;
-    var keys = ownKeys$7(O);
+    var keys = ownKeys$6(O);
     var result = {};
     var index = 0;
     var key, descriptor;
@@ -9350,12 +9324,12 @@ $$2S({ target: 'Reflect', stat: true }, {
 });
 
 var $$2R = _export;
-var ownKeys$6 = ownKeys$9;
+var ownKeys$5 = ownKeys$8;
 
 // `Reflect.ownKeys` method
 // https://tc39.es/ecma262/#sec-reflect.ownkeys
 $$2R({ target: 'Reflect', stat: true }, {
-  ownKeys: ownKeys$6
+  ownKeys: ownKeys$5
 });
 
 var $$2Q = _export;
@@ -29393,20 +29367,20 @@ var FormGroupHeader = function FormGroupHeader(_ref) {
       descVariant = _ref.descVariant,
       textAlign = _ref.textAlign;
   if (!label && !desc) return false;
-  return /*#__PURE__*/React.createElement(_Box, {
+  return /*#__PURE__*/React.createElement(Box, {
     style: {
       width: '100%',
       display: 'flex',
       flexDirection: 'column'
     }
-  }, label && /*#__PURE__*/React.createElement(_Box, {
+  }, label && /*#__PURE__*/React.createElement(Box, {
     mb: 2
-  }, /*#__PURE__*/React.createElement(_Typography, {
+  }, /*#__PURE__*/React.createElement(Typography, {
     variant: labelVariant,
     align: textAlign
-  }, label)), desc && /*#__PURE__*/React.createElement(_Box, {
+  }, label)), desc && /*#__PURE__*/React.createElement(Box, {
     mb: 2
-  }, /*#__PURE__*/React.createElement(_Typography, {
+  }, /*#__PURE__*/React.createElement(Typography, {
     variant: descVariant,
     align: textAlign
   }, desc)));
@@ -29432,11 +29406,11 @@ var FormSectionCard = function FormSectionCard(_ref) {
       descVariant = _ref.descVariant,
       textAlign = _ref.textAlign,
       children = _ref.children;
-  return /*#__PURE__*/React.createElement(_Box, {
+  return /*#__PURE__*/React.createElement(Box, {
     mb: 2
-  }, /*#__PURE__*/React.createElement(_Paper, {
+  }, /*#__PURE__*/React.createElement(Paper, {
     elevation: 0
-  }, /*#__PURE__*/React.createElement(_Box, {
+  }, /*#__PURE__*/React.createElement(Box, {
     p: 2
   }, /*#__PURE__*/React.createElement(FormGroupHeader, {
     label: label,
@@ -29474,7 +29448,7 @@ var FormSectionBlock = function FormSectionBlock(_ref) {
       textAlign = _ref.textAlign,
       children = _ref.children;
   var styles = useStyles$4();
-  return /*#__PURE__*/React.createElement(_Box, {
+  return /*#__PURE__*/React.createElement(Box, {
     className: styles.formSectionBlock
   }, /*#__PURE__*/React.createElement(FormGroupHeader, {
     label: label,
@@ -29496,9 +29470,9 @@ FormSectionBlock.propTypes = {
 
 var _excluded$7 = ["prepend", "append", "componentProps"];
 
-function ownKeys$5(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 ownKeys$4(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$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var useStyles$3 = makeStyles$1(function (theme) {
   return {
     error: {
@@ -29527,7 +29501,7 @@ var FormControlField$1 = function FormControlField(_ref) {
       onChange = _ref.onChange;
   var styles = useStyles$3();
 
-  var finalProps = _objectSpread$5(_objectSpread$5({
+  var finalProps = _objectSpread$4(_objectSpread$4({
     formVariant: formVariant,
     name: name,
     label: label,
@@ -29543,9 +29517,9 @@ var FormControlField$1 = function FormControlField(_ref) {
   var isRender = type === '@@render';
 
   if (validating) {
-    finalProps.endAdornment = [/*#__PURE__*/React.createElement(_InputAdornment, {
+    finalProps.endAdornment = [/*#__PURE__*/React.createElement(InputAdornment, {
       position: "end"
-    }, /*#__PURE__*/React.createElement(AutorenewIcon, null))];
+    }, /*#__PURE__*/React.createElement(Autorenew, null))];
   }
 
   var control;
@@ -29553,7 +29527,7 @@ var FormControlField$1 = function FormControlField(_ref) {
   if (isRender) {
     try {
       var oldProps = component.props || {};
-      control = /*#__PURE__*/React.cloneElement(component, _objectSpread$5(_objectSpread$5(_objectSpread$5({
+      control = /*#__PURE__*/React.cloneElement(component, _objectSpread$4(_objectSpread$4(_objectSpread$4({
         variant: variant
       }, finalProps), oldProps), {}, {
         label: label,
@@ -29566,7 +29540,7 @@ var FormControlField$1 = function FormControlField(_ref) {
     }
   } else {
     try {
-      control = /*#__PURE__*/React.createElement(component, _objectSpread$5({
+      control = /*#__PURE__*/React.createElement(component, _objectSpread$4({
         variant: variant
       }, finalProps));
     } catch (e) {
@@ -29581,19 +29555,19 @@ var FormControlField$1 = function FormControlField(_ref) {
     return control;
   }
 
-  return /*#__PURE__*/React.createElement(_FormControl, {
+  return /*#__PURE__*/React.createElement(FormControl, {
     className: "data-card-field",
     error: dirty && hasErrors,
     variant: variant,
     margin: "dense",
     fullWidth: true,
     required: required
-  }, isSwitch && /*#__PURE__*/React.createElement(_FormControlLabel, {
+  }, isSwitch && /*#__PURE__*/React.createElement(FormControlLabel, {
     className: cx(_defineProperty({}, styles.error, dirty && hasErrors)),
     control: control,
     label: label,
     labelPlacement: finalProps.labelPlacement || 'end'
-  }), !isSwitch && !isRepeater && !isRender && control, dirty && !disabled && hasErrors && /*#__PURE__*/React.createElement(_FormHelperText, null, errors.map(function (e) {
+  }), !isSwitch && !isRepeater && !isRender && control, dirty && !disabled && hasErrors && /*#__PURE__*/React.createElement(FormHelperText, null, errors.map(function (e) {
     return e.message;
   }).join('. ')));
 };
@@ -29627,7 +29601,7 @@ var FormField = function FormField(_ref2) {
       componentProps = _ref2.componentProps,
       fieldProps = _objectWithoutProperties(_ref2, _excluded$7);
 
-  var finalProps = _objectSpread$5({
+  var finalProps = _objectSpread$4({
     componentProps: componentProps
   }, fieldProps);
 
@@ -29639,7 +29613,7 @@ var FormField = function FormField(_ref2) {
     });
   }
 
-  return /*#__PURE__*/React.createElement(_FormGroup, null, prepend, /*#__PURE__*/React.createElement(FormControlField$1, finalProps), append);
+  return /*#__PURE__*/React.createElement(FormGroup, null, prepend, /*#__PURE__*/React.createElement(FormControlField$1, finalProps), append);
 };
 
 FormField.propTypes = {
@@ -29685,29 +29659,172 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-function ownKeys$4(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; }
+var FormDateRange = function FormDateRange(_ref) {
+  var type = _ref.type,
+      name = _ref.name,
+      label = _ref.label,
+      variant = _ref.variant,
+      value = _ref.value,
+      defaultValue = _ref.defaultValue,
+      required = _ref.required,
+      loading = _ref.loading,
+      disabled = _ref.disabled,
+      onChange = _ref.onChange;
 
-function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+  var changeHandler = function changeHandler(newValue) {
+    if (onChange) {
+      onChange({
+        target: {
+          name: name,
+          value: newValue
+        }
+      });
+    }
+  };
 
-var FormText = function FormText(props) {
-  var type = props.type;
+  var handleStartChange = function handleStartChange(e) {
+    var newValue = structuredClone(value || {});
+    newValue.start = e.target.value;
+    changeHandler(newValue);
+  };
 
-  var finalProps = _objectSpread$4({}, props);
+  var handleEndChange = function handleEndChange(e) {
+    var newValue = structuredClone(value || {});
+    newValue.end = e.target.value;
+    changeHandler(newValue);
+  };
+
+  return /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Typography, {
+    mb: 1
+  }, label), /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    sx: {
+      flex: '1 1 auto',
+      width: '100%'
+    }
+  }, /*#__PURE__*/React.createElement(TextField, {
+    sx: {
+      flex: '1 1 auto'
+    },
+    type: type,
+    name: "".concat(name, ".start"),
+    label: "von",
+    variant: variant,
+    InputLabelProps: {
+      shrink: true
+    },
+    value: (value === null || value === void 0 ? void 0 : value.start) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.start) || '',
+    max: (value === null || value === void 0 ? void 0 : value.end) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.end) || '',
+    required: required,
+    disabled: disabled || loading,
+    onChange: handleStartChange
+  }), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      ml: 2,
+      mr: 2
+    }
+  }, /*#__PURE__*/React.createElement(Typography, {
+    color: "GrayText"
+  }, "\u2013")), /*#__PURE__*/React.createElement(TextField, {
+    sx: {
+      flex: '1 1 auto'
+    },
+    type: type,
+    name: "".concat(name, ".end"),
+    label: "bis",
+    variant: variant,
+    InputLabelProps: {
+      shrink: true
+    },
+    value: (value === null || value === void 0 ? void 0 : value.end) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.end) || '',
+    min: (value === null || value === void 0 ? void 0 : value.start) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.start) || '',
+    required: required,
+    disabled: disabled || loading,
+    onChange: handleEndChange
+  })));
+};
+
+FormDateRange.propTypes = {
+  type: PropTypes.string,
+  name: PropTypes.string,
+  label: PropTypes.string,
+  variant: PropTypes.string,
+  value: PropTypes.object,
+  defaultValue: PropTypes.string,
+  required: PropTypes.bool,
+  loading: PropTypes.bool,
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func
+};
+
+var FormText = function FormText(_ref) {
+  var type = _ref.type,
+      name = _ref.name,
+      label = _ref.label,
+      variant = _ref.variant,
+      value = _ref.value,
+      defaultValue = _ref.defaultValue,
+      multiline = _ref.multiline,
+      minRows = _ref.minRows,
+      range = _ref.range,
+      required = _ref.required,
+      loading = _ref.loading,
+      disabled = _ref.disabled,
+      onChange = _ref.onChange;
+  var extraProps = {};
 
   if (type === 'date' || type === 'datetime-local') {
-    finalProps.InputLabelProps = {
+    extraProps.InputLabelProps = {
       shrink: true
     };
-  } // eslint-disable-next-line react/jsx-props-no-spreading
+  }
 
+  if (range) {
+    return /*#__PURE__*/React.createElement(FormDateRange, {
+      type: type,
+      name: name,
+      label: label,
+      variant: variant,
+      value: value || defaultValue || '',
+      required: required,
+      disabled: disabled || loading,
+      onChange: onChange || function () {}
+    });
+  }
 
-  return /*#__PURE__*/React.createElement(_TextField, _extends({
-    type: type
-  }, finalProps));
+  return /*#__PURE__*/React.createElement(TextField, _extends({
+    type: type,
+    name: name,
+    label: label,
+    variant: variant,
+    value: value || defaultValue || '',
+    multiline: multiline,
+    minRows: minRows,
+    range: range,
+    required: required,
+    disabled: disabled || loading,
+    onChange: onChange || function () {} // eslint-disable-next-line react/jsx-props-no-spreading
+
+  }, extraProps));
 };
 
 FormText.propTypes = {
-  type: PropTypes.string
+  type: PropTypes.string,
+  name: PropTypes.string,
+  label: PropTypes.string,
+  variant: PropTypes.string,
+  value: PropTypes.string,
+  defaultValue: PropTypes.string,
+  multiline: PropTypes.bool,
+  minRows: PropTypes.number,
+  range: PropTypes.bool,
+  required: PropTypes.bool,
+  loading: PropTypes.bool,
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func
 };
 
 var castToNumber = function castToNumber(value, step) {
@@ -29730,7 +29847,7 @@ var FormNumber = function FormNumber(_ref) {
       _onChange = _ref.onChange,
       props = _objectWithoutProperties(_ref, _excluded$6);
 
-  return /*#__PURE__*/React.createElement(_TextField, _extends({
+  return /*#__PURE__*/React.createElement(TextField, _extends({
     name: name,
     type: "number",
     value: castToNumber(value, step),
@@ -36757,24 +36874,33 @@ function friendlyDateTime(dateTimeish) {
   }
 }
 
+var formatDate = function formatDate(value, renderFormat) {
+  var formatter = DateTime.DATETIME_FULL;
+
+  if (renderFormat) {
+    if (typeof renderFormat === 'string') formatter = DateTime[renderFormat];else formatter = renderFormat;
+  }
+
+  return DateTime.fromISO(value).toLocaleString(formatter);
+};
+
 var FormReadOnlyText = function FormReadOnlyText(_ref) {
   var value = _ref.value,
       type = _ref.type,
       renderFormat = _ref.renderFormat,
+      range = _ref.range,
       multiline = _ref.multiline;
   var finalValue = value;
 
   if (type === 'date' || type === 'datetime-local') {
-    var formatter = DateTime.DATETIME_FULL;
-
-    if (renderFormat) {
-      if (typeof renderFormat === 'string') formatter = DateTime[renderFormat];else formatter = renderFormat;
+    if (range) {
+      finalValue = "".concat(formatDate((value === null || value === void 0 ? void 0 : value.start) || '', renderFormat), " - ").concat(formatDate((value === null || value === void 0 ? void 0 : value.end) || '', renderFormat));
+    } else {
+      finalValue = formatDate(value, renderFormat);
     }
-
-    finalValue = DateTime.fromISO(value).toLocaleString(formatter);
   }
 
-  return /*#__PURE__*/React.createElement(_Typography, {
+  return /*#__PURE__*/React.createElement(Typography, {
     variant: "body1",
     style: {
       whiteSpace: multiline ? 'pre-line' : 'inherit'
@@ -36785,6 +36911,7 @@ var FormReadOnlyText = function FormReadOnlyText(_ref) {
 FormReadOnlyText.propTypes = {
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   type: PropTypes.string,
+  range: PropTypes.bool,
   renderFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   multiline: PropTypes.bool
 };
@@ -36801,16 +36928,17 @@ var _renderInput = function renderInput(_ref, params) {
 
   if (loading) {
     InputProps = {
-      endAdornment: /*#__PURE__*/React.createElement(_InputAdornment, {
+      endAdornment: /*#__PURE__*/React.createElement(InputAdornment, {
         position: "end"
-      }, /*#__PURE__*/React.createElement(_CircularProgress, {
+      }, /*#__PURE__*/React.createElement(CircularProgress, {
         size: 20,
         thickness: 4
       }))
     };
   }
 
-  return /*#__PURE__*/React.createElement(_TextField, _extends({}, params, {
+  return /*#__PURE__*/React.createElement(TextField // eslint-disable-next-line react/jsx-props-no-spreading
+  , _extends({}, params, {
     required: required,
     label: label,
     variant: variant,
@@ -36838,7 +36966,7 @@ var SelectOrCreate = function SelectOrCreate(_ref2) {
       onInputChange = _ref2.onInputChange;
   return /*#__PURE__*/React.createElement(Autocomplete, {
     id: id,
-    value: value,
+    value: value || '',
     fullWidth: true,
     disabled: disabled,
     onOpen: onOpen,
@@ -36870,6 +36998,7 @@ var SelectOrCreate = function SelectOrCreate(_ref2) {
     clearOnBlur: true,
     handleHomeEndKeys: true,
     options: options,
+    freeSolo: allowCreate,
     getOptionLabel: function getOptionLabel(option) {
       // Value selected with enter, right from the input
       if (typeof option === 'string') {
@@ -36880,15 +37009,17 @@ var SelectOrCreate = function SelectOrCreate(_ref2) {
       } // Add "xxx" option created dynamically
 
 
-      if (option.inputValue) {
-        return option.inputValue;
+      if (option !== null && option !== void 0 && option.inputValue) {
+        return option === null || option === void 0 ? void 0 : option.inputValue;
       } // Regular option
 
 
       return option[searchKey];
     },
+    isOptionEqualToValue: function isOptionEqualToValue(option, testValue) {
+      return option[searchKey] === testValue;
+    },
     renderOption: renderOption,
-    freeSolo: true,
     renderInput: function renderInput(params) {
       return _renderInput({
         required: required,
@@ -36914,11 +37045,11 @@ SelectOrCreate.propTypes = {
   searchKey: PropTypes.string.isRequired,
   renderOption: PropTypes.func.isRequired,
   renderNewOption: PropTypes.func.isRequired,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   onOpen: PropTypes.func,
   onClose: PropTypes.func,
-  onChange: PropTypes.func.isRequired,
-  onInputChange: PropTypes.func.isRequired
+  onChange: PropTypes.func,
+  onInputChange: PropTypes.func
 };
 
 var FormAutocomplete = function FormAutocomplete(_ref) {
@@ -36955,20 +37086,20 @@ var FormAutocomplete = function FormAutocomplete(_ref) {
   }
 
   if (!options) {
-    return /*#__PURE__*/React.createElement(_FormControl, {
+    return /*#__PURE__*/React.createElement(FormControl, {
       error: dirty && hasErrors,
       margin: "dense",
       fullWidth: true,
       required: required
-    }, /*#__PURE__*/React.createElement(_TextField, {
+    }, /*#__PURE__*/React.createElement(TextField, {
       label: label,
       variant: variant,
       value: value,
       disabled: true,
       InputProps: {
-        endAdornment: /*#__PURE__*/React.createElement(_InputAdornment, {
+        endAdornment: /*#__PURE__*/React.createElement(InputAdornment, {
           position: "end"
-        }, /*#__PURE__*/React.createElement(_CircularProgress, {
+        }, /*#__PURE__*/React.createElement(CircularProgress, {
           size: 20,
           thickness: 4
         }))
@@ -36976,7 +37107,7 @@ var FormAutocomplete = function FormAutocomplete(_ref) {
     }));
   }
 
-  return /*#__PURE__*/React.createElement(_FormControl, {
+  return /*#__PURE__*/React.createElement(FormControl, {
     error: dirty && hasErrors,
     margin: "dense",
     fullWidth: true,
@@ -36990,15 +37121,23 @@ var FormAutocomplete = function FormAutocomplete(_ref) {
     searchKey: "entry",
     required: required,
     disabled: disabled,
-    renderOption: function renderOption(option) {
-      return /*#__PURE__*/React.createElement(_Box, null, /*#__PURE__*/React.createElement(_Typography, {
+    renderOption: function renderOption(props, option) {
+      return /*#__PURE__*/React.createElement(Box // eslint-disable-next-line react/jsx-props-no-spreading
+      , _extends({}, props, {
+        sx: {
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'flex-start',
+          alignItems: 'flex-start'
+        }
+      }), /*#__PURE__*/React.createElement(Typography, {
         variant: "body1"
-      }, option.entry), option.count !== undefined && option.count !== null && /*#__PURE__*/React.createElement(_Typography, {
+      }, option.entry), option.count !== undefined && option.count !== null && /*#__PURE__*/React.createElement(Typography, {
         variant: "caption"
       }, "".concat(option.count, " Eintr\xE4ge")));
     },
     renderNewOption: function renderNewOption(newValue) {
-      return /*#__PURE__*/React.createElement(_Typography, {
+      return /*#__PURE__*/React.createElement(Typography, {
         variant: "body1"
       }, /*#__PURE__*/React.createElement("strong", null, "\"".concat(newValue, "\" ")), "erstellen");
     },
@@ -37013,7 +37152,7 @@ var FormAutocomplete = function FormAutocomplete(_ref) {
       if (abort) abort();
     },
     onChange: changeValue
-  }), dirty && !disabled && hasErrors && /*#__PURE__*/React.createElement(_FormHelperText, null, errors.map(function (e) {
+  }), dirty && !disabled && hasErrors && /*#__PURE__*/React.createElement(FormHelperText, null, errors.map(function (e) {
     return e.message;
   }).join('. ')));
 };
@@ -37026,7 +37165,7 @@ FormAutocomplete.propTypes = {
   options: PropTypes.arrayOf(PropTypes.shape({
     entry: PropTypes.string.isRequired,
     count: PropTypes.number
-  })).isRequired,
+  })),
   allowCreate: PropTypes.bool,
   variant: PropTypes.oneOf(['standard', 'filled', 'outlined']),
   required: PropTypes.bool,
@@ -37040,39 +37179,44 @@ FormAutocomplete.propTypes = {
   onChange: PropTypes.func
 };
 
-var _excluded$5 = ["options", "required", "defaultValue", "value", "noSort"];
+var _excluded$5 = ["name", "options", "required", "defaultValue", "value", "noSort", "onChange"];
 
 var FormSelect = function FormSelect(_ref) {
-  var options = _ref.options,
+  var name = _ref.name,
+      options = _ref.options,
       required = _ref.required,
       defaultValue = _ref.defaultValue,
       value = _ref.value,
       noSort = _ref.noSort,
+      onChange = _ref.onChange,
       props = _objectWithoutProperties(_ref, _excluded$5);
 
   var allOptions = noSort ? options : options.sort(function (l, r) {
     return l.label.localeCompare(r.label);
   });
 
-  if (!required) {
+  if (!required && !defaultValue) {
     allOptions.unshift({
       label: 'Auswahl löschen',
-      value: undefined
+      value: ''
     });
   }
 
   var finalValue = '';
   if (value !== undefined) finalValue = value;
   if (finalValue === '' && defaultValue !== undefined) finalValue = defaultValue;
-  return /*#__PURE__*/React.createElement(_TextField, _extends({
+  return /*#__PURE__*/React.createElement(TextField, _extends({
+    name: name,
     select: true,
     required: required,
     value: finalValue // eslint-disable-next-line react/jsx-props-no-spreading
 
-  }, props), allOptions.map(function (_ref2) {
+  }, props, {
+    onChange: onChange
+  }), allOptions.map(function (_ref2) {
     var itemLabel = _ref2.label,
         itemValue = _ref2.value;
-    return /*#__PURE__*/React.createElement(_MenuItem, {
+    return /*#__PURE__*/React.createElement(MenuItem, {
       key: itemLabel,
       value: itemValue
     }, itemLabel);
@@ -37080,16 +37224,16 @@ var FormSelect = function FormSelect(_ref) {
 };
 
 FormSelect.propTypes = {
-  name: PropTypes.string.isRequired,
+  name: PropTypes.string,
   defaultValue: PropTypes.string,
   value: PropTypes.string,
   options: PropTypes.arrayOf(PropTypes.shape({
     label: PropTypes.string.isRequired,
     value: PropTypes.any
-  })).isRequired,
+  })),
   required: PropTypes.bool,
   noSort: PropTypes.bool,
-  onChange: PropTypes.func.isRequired
+  onChange: PropTypes.func
 };
 
 var _excluded$4 = ["type", "options", "autocomplete"];
@@ -37154,7 +37298,7 @@ var FormBoolean = function FormBoolean(_ref) {
   };
 
   if (variant === 'checkbox') {
-    return /*#__PURE__*/React.createElement(_Checkbox, {
+    return /*#__PURE__*/React.createElement(Checkbox, {
       color: "primary",
       name: name,
       checked: isChecked$2(value, defaultValue),
@@ -37162,7 +37306,7 @@ var FormBoolean = function FormBoolean(_ref) {
     });
   }
 
-  return /*#__PURE__*/React.createElement(_Switch, {
+  return /*#__PURE__*/React.createElement(Switch, {
     color: "primary",
     name: name,
     checked: isChecked$2(value, defaultValue),
@@ -37293,72 +37437,72 @@ var FormRepeater = function FormRepeater(_ref) {
     });
   }
 
-  return /*#__PURE__*/React.createElement(_Box, null, /*#__PURE__*/React.createElement(_Typography, {
+  return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Typography, {
     variant: "body1"
-  }, label), (!entries || (entries === null || entries === void 0 ? void 0 : entries.length) === 0) && /*#__PURE__*/React.createElement(_Box, {
+  }, label), (!entries || (entries === null || entries === void 0 ? void 0 : entries.length) === 0) && /*#__PURE__*/React.createElement(Box, {
     mt: 1,
     pl: 2
-  }, /*#__PURE__*/React.createElement(_Typography, {
+  }, /*#__PURE__*/React.createElement(Typography, {
     variant: "body2",
     color: "textSecondary"
-  }, "Keine Eintr\xE4ge vorhanden")), /*#__PURE__*/React.createElement(_List, {
+  }, "Keine Eintr\xE4ge vorhanden")), /*#__PURE__*/React.createElement(List, {
     dense: true
   }, entries.map(function (entry, index) {
     return (
       /*#__PURE__*/
       // eslint-disable-next-line react/no-array-index-key
-      React.createElement(_ListItem, {
+      React.createElement(ListItem, {
         key: "entry-".concat(index)
-      }, /*#__PURE__*/React.createElement(_ListItemText, {
+      }, /*#__PURE__*/React.createElement(ListItemText, {
         primary: getValue$1(entry, options)
-      }), /*#__PURE__*/React.createElement(_ListItemSecondaryAction, null, /*#__PURE__*/React.createElement(_IconButton, {
+      }), /*#__PURE__*/React.createElement(ListItemSecondaryAction, null, /*#__PURE__*/React.createElement(IconButton, {
         edge: "end",
         "aria-label": "delete",
         size: "small",
         onClick: function onClick() {
           return handleEntryDel(index);
         }
-      }, /*#__PURE__*/React.createElement(_Delete, {
+      }, /*#__PURE__*/React.createElement(Delete, {
         fontSize: "small"
       }))))
     );
-  })), !inEdit && /*#__PURE__*/React.createElement(_Box, null, /*#__PURE__*/React.createElement(_Button, {
+  })), !inEdit && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Button, {
     color: "primary",
     variant: "outlined",
     onClick: function onClick() {
       return setInEdit(true);
     }
-  }, "Eintr\xE4ge hinzuf\xFCgen")), inEdit && !options && /*#__PURE__*/React.createElement(_Box, {
+  }, "Eintr\xE4ge hinzuf\xFCgen")), inEdit && !options && /*#__PURE__*/React.createElement(Box, {
     width: "100%",
     display: "flex",
     alignItems: "center"
-  }, /*#__PURE__*/React.createElement(_ClickAwayListener, {
+  }, /*#__PURE__*/React.createElement(ClickAwayListener, {
     onClickAway: function onClickAway() {
       if (inputValue === '') {
         setInEdit(false);
       }
     }
-  }, /*#__PURE__*/React.createElement(_FormControl, {
+  }, /*#__PURE__*/React.createElement(FormControl, {
     variant: "filled",
     fullWidth: true
-  }, /*#__PURE__*/React.createElement(_TextField, {
+  }, /*#__PURE__*/React.createElement(TextField, {
     label: "Neuer Eintrag",
     variant: variant,
     value: inputValue,
     InputProps: {
-      endAdornment: /*#__PURE__*/React.createElement(_InputAdornment, {
+      endAdornment: /*#__PURE__*/React.createElement(InputAdornment, {
         position: "end"
-      }, /*#__PURE__*/React.createElement(_Box, {
+      }, /*#__PURE__*/React.createElement(Box, {
         mr: 1
-      }, /*#__PURE__*/React.createElement(_IconButton, {
+      }, /*#__PURE__*/React.createElement(IconButton, {
         size: "small",
         onClick: handleEntryAdd
-      }, /*#__PURE__*/React.createElement(_Save, {
+      }, /*#__PURE__*/React.createElement(Save, {
         fontSize: "small"
-      }))), /*#__PURE__*/React.createElement(_IconButton, {
+      }))), /*#__PURE__*/React.createElement(IconButton, {
         size: "small",
         onClick: handleCancelNewEntry
-      }, /*#__PURE__*/React.createElement(_Clear, {
+      }, /*#__PURE__*/React.createElement(Clear, {
         fontSize: "small"
       })))
     },
@@ -37369,14 +37513,14 @@ var FormRepeater = function FormRepeater(_ref) {
     onChange: function onChange(e) {
       return setInputValue(e.target.value);
     }
-  })))), inEdit && options && /*#__PURE__*/React.createElement(_Box, {
+  })))), inEdit && options && /*#__PURE__*/React.createElement(Box, {
     width: "100%",
     display: "flex",
     alignItems: "center"
-  }, /*#__PURE__*/React.createElement(_FormControl, {
+  }, /*#__PURE__*/React.createElement(FormControl, {
     variant: "filled",
     fullWidth: true
-  }, /*#__PURE__*/React.createElement(_TextField, {
+  }, /*#__PURE__*/React.createElement(TextField, {
     label: "Eintrag ausw\xE4hlen",
     select: true,
     variant: variant,
@@ -37389,7 +37533,7 @@ var FormRepeater = function FormRepeater(_ref) {
   }, Object.entries(options).sort(function (a, b) {
     return a[1].localeCompare(b[1]);
   }).map(function (e) {
-    return /*#__PURE__*/React.createElement(_MenuItem, {
+    return /*#__PURE__*/React.createElement(MenuItem, {
       key: "option-".concat(e[0]),
       value: e[0],
       disabled: blockedOptions.includes(e[0])
@@ -37455,9 +37599,9 @@ var FormControlField = function FormControlField(_ref) {
 
   var control;
   if (type === '@@render') control = /*#__PURE__*/React.cloneElement(component, finalProps);else control = /*#__PURE__*/React.createElement(component, finalProps);
-  return /*#__PURE__*/React.createElement(_Box, {
+  return /*#__PURE__*/React.createElement(Box, {
     className: styles.readOnlyField
-  }, label && !isSwitch && /*#__PURE__*/React.createElement(_Typography, {
+  }, label && !isSwitch && /*#__PURE__*/React.createElement(Typography, {
     variant: "caption",
     color: "textSecondary"
   }, label), control);
@@ -75784,22 +75928,22 @@ var FormReadOnlyBoolean = function FormReadOnlyBoolean(_ref) {
       labelPlacement = _ref.labelPlacement;
 
   if (variant === 'checkbox') {
-    return /*#__PURE__*/React.createElement(_FormControlLabel, {
+    return /*#__PURE__*/React.createElement(FormControlLabel, {
       label: label,
       labelPlacement: labelPlacement || 'end',
       disabled: true,
-      control: /*#__PURE__*/React.createElement(_Checkbox, {
+      control: /*#__PURE__*/React.createElement(Checkbox, {
         name: name,
         checked: isChecked$1(value, defaultValue)
       })
     });
   }
 
-  return /*#__PURE__*/React.createElement(_FormControlLabel, {
+  return /*#__PURE__*/React.createElement(FormControlLabel, {
     label: label,
     labelPlacement: labelPlacement || 'end',
     disabled: true,
-    control: /*#__PURE__*/React.createElement(_Switch, {
+    control: /*#__PURE__*/React.createElement(Switch, {
       name: name,
       checked: isChecked$1(value, defaultValue)
     })
@@ -75833,16 +75977,16 @@ var FormReadOnlyRepeater = function FormReadOnlyRepeater(_ref) {
   var value = _ref.value,
       options = _ref.options;
   var styles = useStyles$1();
-  return /*#__PURE__*/React.createElement(_List, {
+  return /*#__PURE__*/React.createElement(List, {
     className: styles.formRepeater,
     dense: true
   }, value && value.map(function (entry, index) {
     return (
       /*#__PURE__*/
       // eslint-disable-next-line react/no-array-index-key
-      React.createElement(_ListItem, {
+      React.createElement(ListItem, {
         key: "entry-".concat(index)
-      }, /*#__PURE__*/React.createElement(_ListItemText, {
+      }, /*#__PURE__*/React.createElement(ListItemText, {
         primary: getValue(entry, options),
         style: {
           margin: 0
@@ -75860,11 +76004,11 @@ FormReadOnlyRepeater.propTypes = {
 var HiddenData = function HiddenData(_ref) {
   var subject = _ref.subject,
       label = _ref.label;
-  return /*#__PURE__*/React.createElement(_Box, {
+  return /*#__PURE__*/React.createElement(Box, {
     mb: 2
   }, /*#__PURE__*/React.createElement(Alert, {
     severity: "warning"
-  }, /*#__PURE__*/React.createElement(_Typography, {
+  }, /*#__PURE__*/React.createElement(Typography, {
     variant: "body1"
   }, subject ? "".concat(subject, " ") : '', /*#__PURE__*/React.createElement("span", {
     style: {
@@ -75906,8 +76050,8 @@ var formComponentMap = {
   array: FormRepeater
 };
 var apComponentMap = {
-  "default": _Input,
-  string: _Input,
+  "default": Input,
+  string: Input,
   number: FormNumber,
   select: FormCatalogType,
   "boolean": FormBoolean
@@ -77046,20 +77190,20 @@ var FormOptionsLoader = function FormOptionsLoader(_ref) {
   }, []);
 
   if (!options) {
-    return /*#__PURE__*/React.createElement(_FormControl, {
+    return /*#__PURE__*/React.createElement(FormControl, {
       error: dirty && hasErrors,
       margin: "dense",
       fullWidth: true,
       required: required
-    }, /*#__PURE__*/React.createElement(_TextField, {
+    }, /*#__PURE__*/React.createElement(TextField, {
       label: label,
       variant: variant,
       value: value,
       disabled: true,
       InputProps: {
-        endAdornment: /*#__PURE__*/React.createElement(_InputAdornment, {
+        endAdornment: /*#__PURE__*/React.createElement(InputAdornment, {
           position: "end"
-        }, /*#__PURE__*/React.createElement(_CircularProgress, {
+        }, /*#__PURE__*/React.createElement(CircularProgress, {
           size: 20,
           thickness: 4
         }))
@@ -77067,7 +77211,7 @@ var FormOptionsLoader = function FormOptionsLoader(_ref) {
     }));
   }
 
-  return /*#__PURE__*/React.createElement(_FormControl, {
+  return /*#__PURE__*/React.createElement(FormControl, {
     error: dirty && hasErrors,
     margin: "dense",
     fullWidth: true,
@@ -77195,33 +77339,33 @@ var FormPrimaryToggle = function FormPrimaryToggle(_ref) {
   };
 
   var checked = isChecked(value, defaultValue);
-  return /*#__PURE__*/React.createElement(_Paper, {
+  return /*#__PURE__*/React.createElement(Paper, {
     elevation: 0,
     className: cx(styles["default"], (_cx = {
       clickable: !readOnly
     }, _defineProperty(_cx, styles.spanSolitaryToCard, solitary && formVariant === 'card'), _defineProperty(_cx, styles.spanBannerToCard, !solitary && formVariant === 'card'), _defineProperty(_cx, styles.sharpEdges, !solitary), _defineProperty(_cx, styles.checked, checked), _defineProperty(_cx, styles.unchecked, !checked), _cx)),
     onClick: handleToggleChange
-  }, /*#__PURE__*/React.createElement(_Box, {
+  }, /*#__PURE__*/React.createElement(Box, {
     display: "flex",
     flexDirection: "row",
     justifyContent: readOnly ? 'flex-start' : 'space-between',
     alignItems: "center"
-  }, readOnly && checked && /*#__PURE__*/React.createElement(_Box, {
+  }, readOnly && checked && /*#__PURE__*/React.createElement(Box, {
     mr: 2,
     mb: -0.5
-  }, /*#__PURE__*/React.createElement(_Check, {
+  }, /*#__PURE__*/React.createElement(Check, {
     fontSize: solitary ? 'large' : 'medium',
     htmlColor: theme.palette.text.secondary
-  })), readOnly && !checked && /*#__PURE__*/React.createElement(_Box, {
+  })), readOnly && !checked && /*#__PURE__*/React.createElement(Box, {
     mr: 2,
     mb: -0.5
-  }, /*#__PURE__*/React.createElement(_Close, {
+  }, /*#__PURE__*/React.createElement(Close, {
     fontSize: solitary ? 'large' : 'medium',
     htmlColor: theme.palette.text.secondary
-  })), /*#__PURE__*/React.createElement(_Typography, {
+  })), /*#__PURE__*/React.createElement(Typography, {
     variant: solitary ? 'h5' : 'body1',
     color: checked && !readOnly ? 'primary' : 'textSecondary'
-  }, checked ? checkedLabel : uncheckedLabel), !readOnly && /*#__PURE__*/React.createElement(_Switch, {
+  }, checked ? checkedLabel : uncheckedLabel), !readOnly && /*#__PURE__*/React.createElement(Switch, {
     color: "primary",
     name: name,
     checked: checked,