@scenid/react-formulator 1.2.5-mui5-1 → 2.0.0

package/dist/index.cjs.js

@@ -2242,19 +2242,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++) {
@@ -7961,7 +7961,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;
@@ -7972,7 +7972,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;
@@ -9338,12 +9338,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;
@@ -29484,9 +29484,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 = styles.makeStyles(function (theme) {
   return {
     error: {
@@ -29515,7 +29515,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,
@@ -29541,7 +29541,7 @@ var FormControlField$1 = function FormControlField(_ref) {
   if (isRender) {
     try {
       var oldProps = component.props || {};
-      control = /*#__PURE__*/React__default["default"].cloneElement(component, _objectSpread$5(_objectSpread$5(_objectSpread$5({
+      control = /*#__PURE__*/React__default["default"].cloneElement(component, _objectSpread$4(_objectSpread$4(_objectSpread$4({
         variant: variant
       }, finalProps), oldProps), {}, {
         label: label,
@@ -29554,7 +29554,7 @@ var FormControlField$1 = function FormControlField(_ref) {
     }
   } else {
     try {
-      control = /*#__PURE__*/React__default["default"].createElement(component, _objectSpread$5({
+      control = /*#__PURE__*/React__default["default"].createElement(component, _objectSpread$4({
         variant: variant
       }, finalProps));
     } catch (e) {
@@ -29615,7 +29615,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);
 
@@ -29673,29 +29673,55 @@ 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; }
-
-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 FormText = function FormText(props) {
-  var type = props.type;
-
-  var finalProps = _objectSpread$4({}, props);
+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,
+      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
-
+  }
 
   return /*#__PURE__*/React__default["default"].createElement(material.TextField, _extends({
-    type: type
-  }, finalProps));
+    type: type,
+    name: name,
+    label: label,
+    variant: variant,
+    value: value || defaultValue || '',
+    multiline: multiline,
+    minRows: minRows,
+    required: required,
+    disabled: disabled || loading,
+    onChange: onChange || function () {} // eslint-disable-next-line react/jsx-props-no-spreading
+
+  }, extraProps));
 };
 
 FormText.propTypes = {
-  type: PropTypes__default["default"].string
+  type: PropTypes__default["default"].string,
+  name: PropTypes__default["default"].string,
+  label: PropTypes__default["default"].string,
+  variant: PropTypes__default["default"].string,
+  value: PropTypes__default["default"].string,
+  defaultValue: PropTypes__default["default"].string,
+  multiline: PropTypes__default["default"].bool,
+  minRows: PropTypes__default["default"].number,
+  required: PropTypes__default["default"].bool,
+  loading: PropTypes__default["default"].bool,
+  disabled: PropTypes__default["default"].bool,
+  onChange: PropTypes__default["default"].func
 };
 
 var castToNumber = function castToNumber(value, step) {
@@ -36827,7 +36853,7 @@ var SelectOrCreate = function SelectOrCreate(_ref2) {
       onInputChange = _ref2.onInputChange;
   return /*#__PURE__*/React__default["default"].createElement(Autocomplete__default["default"], {
     id: id,
-    value: value,
+    value: value || '',
     fullWidth: true,
     disabled: disabled,
     onOpen: onOpen,
@@ -36859,6 +36885,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') {
@@ -36869,15 +36896,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,
@@ -36903,11 +36932,11 @@ SelectOrCreate.propTypes = {
   searchKey: PropTypes__default["default"].string.isRequired,
   renderOption: PropTypes__default["default"].func.isRequired,
   renderNewOption: PropTypes__default["default"].func.isRequired,
-  value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].object]).isRequired,
+  value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].object]),
   onOpen: PropTypes__default["default"].func,
   onClose: PropTypes__default["default"].func,
-  onChange: PropTypes__default["default"].func.isRequired,
-  onInputChange: PropTypes__default["default"].func.isRequired
+  onChange: PropTypes__default["default"].func,
+  onInputChange: PropTypes__default["default"].func
 };
 
 var FormAutocomplete = function FormAutocomplete(_ref) {
@@ -36979,8 +37008,16 @@ var FormAutocomplete = function FormAutocomplete(_ref) {
     searchKey: "entry",
     required: required,
     disabled: disabled,
-    renderOption: function renderOption(option) {
-      return /*#__PURE__*/React__default["default"].createElement(material.Box, null, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
+    renderOption: function renderOption(props, option) {
+      return /*#__PURE__*/React__default["default"].createElement(material.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__default["default"].createElement(material.Typography, {
         variant: "body1"
       }, option.entry), option.count !== undefined && option.count !== null && /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "caption"
@@ -37015,7 +37052,7 @@ FormAutocomplete.propTypes = {
   options: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
     entry: PropTypes__default["default"].string.isRequired,
     count: PropTypes__default["default"].number
-  })).isRequired,
+  })),
   allowCreate: PropTypes__default["default"].bool,
   variant: PropTypes__default["default"].oneOf(['standard', 'filled', 'outlined']),
   required: PropTypes__default["default"].bool,
@@ -37029,24 +37066,26 @@ FormAutocomplete.propTypes = {
   onChange: PropTypes__default["default"].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: ''
     });
   }
 
@@ -37054,11 +37093,14 @@ var FormSelect = function FormSelect(_ref) {
   if (value !== undefined) finalValue = value;
   if (finalValue === '' && defaultValue !== undefined) finalValue = defaultValue;
   return /*#__PURE__*/React__default["default"].createElement(material.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__default["default"].createElement(material.MenuItem, {
@@ -37069,16 +37111,16 @@ var FormSelect = function FormSelect(_ref) {
 };
 
 FormSelect.propTypes = {
-  name: PropTypes__default["default"].string.isRequired,
+  name: PropTypes__default["default"].string,
   defaultValue: PropTypes__default["default"].string,
   value: PropTypes__default["default"].string,
   options: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
     label: PropTypes__default["default"].string.isRequired,
     value: PropTypes__default["default"].any
-  })).isRequired,
+  })),
   required: PropTypes__default["default"].bool,
   noSort: PropTypes__default["default"].bool,
-  onChange: PropTypes__default["default"].func.isRequired
+  onChange: PropTypes__default["default"].func
 };
 
 var _excluded$4 = ["type", "options", "autocomplete"];

package/dist/index.esm.js

@@ -2228,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++) {
@@ -7947,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;
@@ -7958,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;
@@ -9324,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;
@@ -29470,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: {
@@ -29501,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,
@@ -29527,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,
@@ -29540,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) {
@@ -29601,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);
 
@@ -29659,29 +29659,55 @@ 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; }
-
-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 FormText = function FormText(props) {
-  var type = props.type;
-
-  var finalProps = _objectSpread$4({}, props);
+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,
+      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
-
+  }
 
   return /*#__PURE__*/React.createElement(TextField, _extends({
-    type: type
-  }, finalProps));
+    type: type,
+    name: name,
+    label: label,
+    variant: variant,
+    value: value || defaultValue || '',
+    multiline: multiline,
+    minRows: minRows,
+    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,
+  required: PropTypes.bool,
+  loading: PropTypes.bool,
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func
 };
 
 var castToNumber = function castToNumber(value, step) {
@@ -36813,7 +36839,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,
@@ -36845,6 +36871,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') {
@@ -36855,15 +36882,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,
@@ -36889,11 +36918,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) {
@@ -36965,8 +36994,16 @@ 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, {
         variant: "caption"
@@ -37001,7 +37038,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,
@@ -37015,24 +37052,26 @@ 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: ''
     });
   }
 
@@ -37040,11 +37079,14 @@ var FormSelect = function FormSelect(_ref) {
   if (value !== undefined) finalValue = value;
   if (finalValue === '' && defaultValue !== undefined) finalValue = defaultValue;
   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, {
@@ -37055,16 +37097,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"];

package/package.json

@@ -1,95 +1,95 @@
-{
-  "name": "@scenid/react-formulator",
-  "version": "1.2.5-mui5-1",
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.js",
-  "repository": "https://dennykoch@bitbucket.org/scenid/react-formulator.git",
-  "author": "Denny Koch <denny.koch@scenid.com>",
-  "license": "UNLICENSED",
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "build": "rollup -c",
-    "watch": "cross-env STORYBOOK_NODE_ENV=development start-storybook -p 6006",
-    "start:dev": "firebase emulators:start",
-    "storybook:build": "build-storybook",
-    "storybook:deploy": "yarn storybook:build && firebase deploy",
-    "prepublishOnly": "yarn build",
-    "git:pushall": "git push && git push --tags",
-    "patch": "npm version patch && yarn git:pushall",
-    "minor": "npm version minor && yarn git:pushall",
-    "major": "npm version major && yarn git:pushall",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
-  },
-  "peerDependencies": {
-    "@mui/icons-material": "^5.8.4",
-    "@mui/material": "^5.10.0",
-    "@mui/styles": "^5.9.3",
-    "classnames": "^2.3.1",
-    "prop-types": "^15.8.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "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",
-    "@emotion/react": "^11.10.0",
-    "@emotion/styled": "^11.10.0",
-    "@mui/icons-material": "^5.8.4",
-    "@mui/material": "^5.10.0",
-    "@mui/styles": "^5.9.3",
-    "@rollup/plugin-babel": "^5.3.1",
-    "@rollup/plugin-commonjs": "^22.0.0",
-    "@rollup/plugin-node-resolve": "^13.2.1",
-    "@scenid/cloud-icons": "2.6.0-mui5-2",
-    "@scenid/formulator": "^2.3.4",
-    "@storybook/addon-actions": "^6.5.10",
-    "@storybook/addon-essentials": "^6.5.10",
-    "@storybook/addon-interactions": "^6.5.10",
-    "@storybook/addon-links": "^6.5.10",
-    "@storybook/builder-webpack4": "^6.5.10",
-    "@storybook/manager-webpack4": "^6.5.10",
-    "@storybook/react": "^6.5.10",
-    "@storybook/testing-library": "^0.0.13",
-    "@types/react": "^18.0.17",
-    "babel-eslint": "^10.1.0",
-    "babel-loader": "^8.2.5",
-    "babel-plugin-import": "^1.13.5",
-    "classnames": "^2.3.1",
-    "cross-env": "^7.0.3",
-    "eslint": "^7.11.0",
-    "eslint-config-airbnb": "^18.0.1",
-    "eslint-formatter-pretty": "^2.1.1",
-    "eslint-plugin-compat": "^3.1.2",
-    "eslint-plugin-import": "^2.17.3",
-    "eslint-plugin-jest": "^22.7.1",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-promise": "^4.1.1",
-    "eslint-plugin-react": "^7.6.1",
-    "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": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-dropzone": "^14.2.1",
-    "react-markdown": "^8.0.3",
-    "rehype-highlight": "^5.0.2",
-    "remark-gfm": "^3.0.1",
-    "rollup": "^2.70.2",
-    "rollup-plugin-import-css": "^3.0.3",
-    "rollup-plugin-peer-deps-external": "^2.2.4"
-  },
-  "dependencies": {}
-}
+{
+  "name": "@scenid/react-formulator",
+  "version": "2.0.0",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "repository": "https://dennykoch@bitbucket.org/scenid/react-formulator.git",
+  "author": "Denny Koch <denny.koch@scenid.com>",
+  "license": "UNLICENSED",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "watch": "cross-env STORYBOOK_NODE_ENV=development start-storybook -p 6006",
+    "start:dev": "firebase emulators:start",
+    "storybook:build": "build-storybook",
+    "storybook:deploy": "yarn storybook:build && firebase deploy",
+    "prepublishOnly": "yarn build",
+    "git:pushall": "git push && git push --tags",
+    "patch": "npm version patch && yarn git:pushall",
+    "minor": "npm version minor && yarn git:pushall",
+    "major": "npm version major && yarn git:pushall",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
+  },
+  "peerDependencies": {
+    "@mui/icons-material": "^5.8.4",
+    "@mui/material": "^5.10.0",
+    "@mui/styles": "^5.9.3",
+    "classnames": "^2.3.1",
+    "prop-types": "^15.8.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
+  },
+  "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",
+    "@emotion/react": "^11.10.0",
+    "@emotion/styled": "^11.10.0",
+    "@mui/icons-material": "^5.8.4",
+    "@mui/material": "^5.10.0",
+    "@mui/styles": "^5.9.3",
+    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-commonjs": "^22.0.0",
+    "@rollup/plugin-node-resolve": "^13.2.1",
+    "@scenid/cloud-icons": "2.6.0-mui5-2",
+    "@scenid/formulator": "^2.3.4",
+    "@storybook/addon-actions": "^6.5.10",
+    "@storybook/addon-essentials": "^6.5.10",
+    "@storybook/addon-interactions": "^6.5.10",
+    "@storybook/addon-links": "^6.5.10",
+    "@storybook/builder-webpack4": "^6.5.10",
+    "@storybook/manager-webpack4": "^6.5.10",
+    "@storybook/react": "^6.5.10",
+    "@storybook/testing-library": "^0.0.13",
+    "@types/react": "^18.0.17",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.2.5",
+    "babel-plugin-import": "^1.13.5",
+    "classnames": "^2.3.1",
+    "cross-env": "^7.0.3",
+    "eslint": "^7.11.0",
+    "eslint-config-airbnb": "^18.0.1",
+    "eslint-formatter-pretty": "^2.1.1",
+    "eslint-plugin-compat": "^3.1.2",
+    "eslint-plugin-import": "^2.17.3",
+    "eslint-plugin-jest": "^22.7.1",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-promise": "^4.1.1",
+    "eslint-plugin-react": "^7.6.1",
+    "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": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-dropzone": "^14.2.1",
+    "react-markdown": "^8.0.3",
+    "rehype-highlight": "^5.0.2",
+    "remark-gfm": "^3.0.1",
+    "rollup": "^2.70.2",
+    "rollup-plugin-import-css": "^3.0.3",
+    "rollup-plugin-peer-deps-external": "^2.2.4"
+  },
+  "dependencies": {}
+}