@scenid/react-formulator 1.0.1 → 1.1.0

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { useRef, useState, useCallback, useEffect } from 'react';
+import React__default, { useCallback, useState, useEffect, useRef, cloneElement } from 'react';
 import * as PropTypes from 'prop-types';
 import PropTypes__default from 'prop-types';
 import _Input from '@material-ui/core/esm/Input';
@@ -2240,19 +2240,19 @@ var anObject$1E = anObject$1G;
 var concat$6 = uncurryThis$1i([].concat);
 
 // all object keys, includes non-enumerable and symbols
-var ownKeys$8 = getBuiltIn$I('Reflect', 'ownKeys') || function ownKeys(it) {
+var ownKeys$9 = 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$7 = ownKeys$8;
+var ownKeys$8 = ownKeys$9;
 var getOwnPropertyDescriptorModule$6 = objectGetOwnPropertyDescriptor;
 var definePropertyModule$b = objectDefineProperty;
 
 var copyConstructorProperties$4 = function (target, source, exceptions) {
-  var keys = ownKeys$7(source);
+  var keys = ownKeys$8(source);
   var defineProperty = definePropertyModule$b.f;
   var getOwnPropertyDescriptor = getOwnPropertyDescriptorModule$6.f;
   for (var i = 0; i < keys.length; i++) {
@@ -7806,7 +7806,7 @@ $$3p({ target: 'Object', stat: true, forced: FORCED$9, sham: !DESCRIPTORS$i }, {
 
 var $$3o = _export;
 var DESCRIPTORS$h = descriptors;
-var ownKeys$6 = ownKeys$8;
+var ownKeys$7 = ownKeys$9;
 var toIndexedObject$7 = toIndexedObject$k;
 var getOwnPropertyDescriptorModule$4 = objectGetOwnPropertyDescriptor;
 var createProperty$1 = createProperty$9;
@@ -7817,7 +7817,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$6(O);
+    var keys = ownKeys$7(O);
     var result = {};
     var index = 0;
     var key, descriptor;
@@ -9189,12 +9189,12 @@ $$2S({ target: 'Reflect', stat: true }, {
 });
 
 var $$2R = _export;
-var ownKeys$5 = ownKeys$8;
+var ownKeys$6 = ownKeys$9;
 
 // `Reflect.ownKeys` method
 // https://tc39.es/ecma262/#sec-reflect.ownkeys
 $$2R({ target: 'Reflect', stat: true }, {
-  ownKeys: ownKeys$5
+  ownKeys: ownKeys$6
 });
 
 var $$2Q = _export;
@@ -29211,11 +29211,11 @@ FormSectionBlock.propTypes = {
   children: PropTypes__default.node
 };
 
-var _excluded$6 = ["prepend", "append", "componentProps"];
+var _excluded$7 = ["prepend", "append", "componentProps"];
 
-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 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 _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; }
+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; }
 var useStyles$3 = makeStyles$1(function (theme) {
   return {
     error: {
@@ -29244,7 +29244,7 @@ var FormControlField$1 = function FormControlField(_ref) {
       onChange = _ref.onChange;
   var styles = useStyles$3();
 
-  var finalProps = _objectSpread$4(_objectSpread$4({
+  var finalProps = _objectSpread$5(_objectSpread$5({
     formVariant: formVariant,
     name: name,
     label: label,
@@ -29270,7 +29270,7 @@ var FormControlField$1 = function FormControlField(_ref) {
   if (isRender) {
     try {
       var oldProps = component.props || {};
-      control = /*#__PURE__*/React__default.cloneElement(component, _objectSpread$4(_objectSpread$4(_objectSpread$4({
+      control = /*#__PURE__*/React__default.cloneElement(component, _objectSpread$5(_objectSpread$5(_objectSpread$5({
         variant: variant
       }, finalProps), oldProps), {}, {
         label: label,
@@ -29283,7 +29283,7 @@ var FormControlField$1 = function FormControlField(_ref) {
     }
   } else {
     try {
-      control = /*#__PURE__*/React__default.createElement(component, _objectSpread$4({
+      control = /*#__PURE__*/React__default.createElement(component, _objectSpread$5({
         variant: variant
       }, finalProps));
     } catch (e) {
@@ -29342,9 +29342,9 @@ var FormField = function FormField(_ref2) {
   var prepend = _ref2.prepend,
       append = _ref2.append,
       componentProps = _ref2.componentProps,
-      fieldProps = _objectWithoutProperties(_ref2, _excluded$6);
+      fieldProps = _objectWithoutProperties(_ref2, _excluded$7);
 
-  var finalProps = _objectSpread$4({
+  var finalProps = _objectSpread$5({
     componentProps: componentProps
   }, fieldProps);
 
@@ -29402,14 +29402,14 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-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 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$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; }
+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$3({}, props);
+  var finalProps = _objectSpread$4({}, props);
 
   if (type === 'date' || type === 'datetime-local') {
     finalProps.InputLabelProps = {
@@ -29436,7 +29436,7 @@ var castToNumber = function castToNumber(value, step) {
   return parseInt(value, 10);
 };
 
-var _excluded$5 = ["name", "value", "min", "max", "step", "onChange"];
+var _excluded$6 = ["name", "value", "min", "max", "step", "onChange"];
 
 var FormNumber = function FormNumber(_ref) {
   var name = _ref.name,
@@ -29445,7 +29445,7 @@ var FormNumber = function FormNumber(_ref) {
       max = _ref.max,
       step = _ref.step,
       _onChange = _ref.onChange,
-      props = _objectWithoutProperties(_ref, _excluded$5);
+      props = _objectWithoutProperties(_ref, _excluded$6);
 
   return /*#__PURE__*/React__default.createElement(_TextField, _extends({
     name: name,
@@ -38711,179 +38711,12 @@ SelectOrCreate.propTypes = {
   onInputChange: PropTypes__default.func.isRequired
 };
 
-var abortableOAuthFetch = /*#__PURE__*/function () {
-  var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(url, _ref) {
-    var token, signal, r, text, result, options;
-    return _regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            token = _ref.token, signal = _ref.signal;
-            _context.prev = 1;
-            options = {
-              method: 'GET'
-            };
-
-            if (token) {
-              options.headers = {
-                'Content-Type': 'application/json',
-                Authorization: "Bearer ".concat(token)
-              };
-            }
-
-            if (signal) {
-              options.signal = signal;
-            }
-
-            _context.next = 7;
-            return fetch(url, options);
-
-          case 7:
-            r = _context.sent;
-            _context.next = 10;
-            return r.text();
-
-          case 10:
-            text = _context.sent;
-            result = JSON.parse(text);
-            _context.next = 17;
-            break;
-
-          case 14:
-            _context.prev = 14;
-            _context.t0 = _context["catch"](1);
-            throw new Error(text);
-
-          case 17:
-            if (r.ok) {
-              _context.next = 19;
-              break;
-            }
-
-            throw new Error(result.error);
-
-          case 19:
-            return _context.abrupt("return", result);
-
-          case 20:
-          case "end":
-            return _context.stop();
-        }
-      }
-    }, _callee, null, [[1, 14]]);
-  }));
-
-  return function abortableOAuthFetch(_x, _x2) {
-    return _ref2.apply(this, arguments);
-  };
-}();
-
-var useFetchOptions = function useFetchOptions(arg) {
-  var fetchOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var controller = useRef();
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      loading = _useState2[0],
-      setLoading = _useState2[1];
-
-  var _useState3 = useState(),
-      _useState4 = _slicedToArray(_useState3, 2),
-      options = _useState4[0],
-      setOptions = _useState4[1];
-
-  var fetch = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-    var fetcher, r;
-    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-      while (1) {
-        switch (_context2.prev = _context2.next) {
-          case 0:
-            if (!Array.isArray(arg)) {
-              _context2.next = 2;
-              break;
-            }
-
-            return _context2.abrupt("return", setOptions(arg));
-
-          case 2:
-            if (!(typeof arg !== 'string' && typeof arg !== 'function')) {
-              _context2.next = 4;
-              break;
-            }
-
-            return _context2.abrupt("return", setOptions([]));
-
-          case 4:
-            fetcher = arg;
-
-            if (typeof arg === 'string') {
-              fetcher = function fetcher(signal) {
-                return abortableOAuthFetch(arg, {
-                  token: fetchOptions.token,
-                  signal: signal
-                });
-              };
-            }
-
-            controller.current = new AbortController();
-            setLoading(true);
-            _context2.prev = 8;
-            _context2.next = 11;
-            return fetcher(controller.current.signal);
-
-          case 11:
-            r = _context2.sent;
-            controller.current = undefined;
-
-            if (Array.isArray(r)) {
-              _context2.next = 15;
-              break;
-            }
-
-            throw new Error('autocomplete fetcher returned a non array value');
-
-          case 15:
-            setOptions(r);
-            _context2.next = 21;
-            break;
-
-          case 18:
-            _context2.prev = 18;
-            _context2.t0 = _context2["catch"](8);
-            setLoading(false);
-
-          case 21:
-            setLoading(false);
-
-          case 22:
-          case "end":
-            return _context2.stop();
-        }
-      }
-    }, _callee2, null, [[8, 18]]);
-  })), [arg, controller.current, setLoading, setOptions]);
-  var abort = useCallback(function () {
-    if (loading) setLoading(false);
-
-    if (controller.current) {
-      controller.current.abort();
-      controller.current = undefined;
-    }
-  }, [loading, setLoading, controller.current]);
-  return {
-    loading: loading,
-    fetch: fetch,
-    abort: abort,
-    options: options
-  };
-};
-
 var FormAutocomplete = function FormAutocomplete(_ref) {
-  var name = _ref.name,
+  var loading = _ref.loading,
+      name = _ref.name,
       label = _ref.label,
       value = _ref.value,
-      optionsArg = _ref.options,
-      baererToken = _ref.baererToken,
+      options = _ref.options,
       allowCreate = _ref.allowCreate,
       dirty = _ref.dirty,
       hasErrors = _ref.hasErrors,
@@ -38892,16 +38725,9 @@ var FormAutocomplete = function FormAutocomplete(_ref) {
       required = _ref.required,
       disabled = _ref.disabled,
       readOnly = _ref.readOnly,
+      fetch = _ref.fetch,
+      abort = _ref.abort,
       onChange = _ref.onChange;
-
-  var _useFetchOptions = useFetchOptions(optionsArg, {
-    token: baererToken
-  }),
-      loading = _useFetchOptions.loading,
-      fetch = _useFetchOptions.fetch,
-      abort = _useFetchOptions.abort,
-      options = _useFetchOptions.options;
-
   var changeValue = useCallback(function (newValue) {
     onChange({
       target: {
@@ -38910,11 +38736,6 @@ var FormAutocomplete = function FormAutocomplete(_ref) {
       }
     });
   }, [onChange]);
-  useEffect(function () {
-    if (!readOnly) {
-      fetch();
-    }
-  }, []);
 
   if (readOnly) {
     return /*#__PURE__*/React__default.createElement(FormReadOnlyText, {
@@ -38976,9 +38797,11 @@ var FormAutocomplete = function FormAutocomplete(_ref) {
       changeValue({
         entry: value
       });
-      fetch();
+      if (fetch) fetch();
+    },
+    onClose: function onClose() {
+      if (abort) abort();
     },
-    onClose: abort,
     onChange: changeValue
   }), dirty && !disabled && hasErrors && /*#__PURE__*/React__default.createElement(_FormHelperText, null, errors.map(function (e) {
     return e.message;
@@ -38986,11 +38809,14 @@ var FormAutocomplete = function FormAutocomplete(_ref) {
 };
 
 FormAutocomplete.propTypes = {
+  loading: PropTypes__default.bool,
   name: PropTypes__default.string,
   label: PropTypes__default.string,
   value: PropTypes__default.any,
-  options: PropTypes__default.oneOfType([PropTypes__default.array, PropTypes__default.string, PropTypes__default.func]).isRequired,
-  baererToken: PropTypes__default.string,
+  options: PropTypes__default.arrayOf(PropTypes__default.shape({
+    entry: PropTypes__default.string.isRequired,
+    count: PropTypes__default.number
+  })).isRequired,
   allowCreate: PropTypes__default.bool,
   variant: PropTypes__default.oneOf(['standard', 'filled', 'outlined']),
   required: PropTypes__default.bool,
@@ -38999,16 +38825,18 @@ FormAutocomplete.propTypes = {
   dirty: PropTypes__default.bool,
   hasErrors: PropTypes__default.bool,
   errors: PropTypes__default.array,
+  fetch: PropTypes__default.func,
+  abort: PropTypes__default.func,
   onChange: PropTypes__default.func
 };
 
-var _excluded$4 = ["options", "required", "value"];
+var _excluded$5 = ["options", "required", "value"];
 
 var FormSelect = function FormSelect(_ref) {
   var options = _ref.options,
       required = _ref.required,
       value = _ref.value,
-      props = _objectWithoutProperties(_ref, _excluded$4);
+      props = _objectWithoutProperties(_ref, _excluded$5);
 
   var unselectOption = [];
 
@@ -39048,13 +38876,13 @@ FormSelect.propTypes = {
   onChange: PropTypes__default.func.isRequired
 };
 
-var _excluded$3 = ["type", "options", "autocomplete"];
+var _excluded$4 = ["type", "options", "autocomplete"];
 
 var FormCatalogType = function FormCatalogType(_ref) {
   var type = _ref.type,
       options = _ref.options,
       autocomplete = _ref.autocomplete,
-      props = _objectWithoutProperties(_ref, _excluded$3);
+      props = _objectWithoutProperties(_ref, _excluded$4);
 
   if (autocomplete === true) {
     return /*#__PURE__*/React__default.createElement(FormAutocomplete, _extends({
@@ -39320,11 +39148,11 @@ FormRepeater.propTypes = {
   onChange: PropTypes__default.func.isRequired
 };
 
-var _excluded$2 = ["prepend", "append", "componentProps"];
+var _excluded$3 = ["prepend", "append", "componentProps"];
 
-function ownKeys$2(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$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$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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; }
 var useStyles$2 = makeStyles(function (theme) {
   return {
     readOnlyField: {
@@ -39350,7 +39178,7 @@ var FormControlField = function FormControlField(_ref) {
       options = _ref.options,
       required = _ref.required;
 
-  var finalProps = _objectSpread$2(_objectSpread$2({}, componentProps), {}, {
+  var finalProps = _objectSpread$3(_objectSpread$3({}, componentProps), {}, {
     formVariant: formVariant,
     name: name,
     label: label,
@@ -39399,9 +39227,9 @@ var FormReadOnlyField = function FormReadOnlyField(_ref2) {
   _ref2.prepend;
       _ref2.append;
       var componentProps = _ref2.componentProps,
-      fieldProps = _objectWithoutProperties(_ref2, _excluded$2);
+      fieldProps = _objectWithoutProperties(_ref2, _excluded$3);
 
-  var finalProps = _objectSpread$2({
+  var finalProps = _objectSpread$3({
     componentProps: componentProps
   }, fieldProps);
 
@@ -83062,12 +82890,12 @@ HiddenData.propTypes = {
   label: PropTypes__default.string.isRequired
 };
 
-var _excluded$1 = ["hidden", "hideLabel"],
+var _excluded$2 = ["hidden", "hideLabel"],
     _excluded2$1 = ["message", "options", "validator"];
 
-function ownKeys$1(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$2(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$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createSuper$1(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -83150,7 +82978,7 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
       var _specialProps = specialProps,
           hidden = _specialProps.hidden,
           hideLabel = _specialProps.hideLabel,
-          extraProps = _objectWithoutProperties(_specialProps, _excluded$1);
+          extraProps = _objectWithoutProperties(_specialProps, _excluded$2);
 
       if (hidden === true) return false;
       var fieldResult = results[field];
@@ -83174,7 +83002,7 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
         props.options = schema.properties[fieldEntry].options.reduce(function (l, r) {
           var _translations$fieldEn;
 
-          return _objectSpread$1(_objectSpread$1({}, l), {}, _defineProperty({}, r, (translations === null || translations === void 0 ? void 0 : (_translations$fieldEn = translations[fieldEntry]) === null || _translations$fieldEn === void 0 ? void 0 : _translations$fieldEn[r]) || r));
+          return _objectSpread$2(_objectSpread$2({}, l), {}, _defineProperty({}, r, (translations === null || translations === void 0 ? void 0 : (_translations$fieldEn = translations[fieldEntry]) === null || _translations$fieldEn === void 0 ? void 0 : _translations$fieldEn[r]) || r));
         }, {});
       }
 
@@ -83197,7 +83025,7 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
       }
 
       if (!component) throw new Error("could not find component for field \"".concat(field, "\""));
-      return _objectSpread$1(_objectSpread$1({
+      return _objectSpread$2(_objectSpread$2({
         type: isRender ? '@@render' : mapKey,
         name: field,
         label: hideLabel !== true && (translations.labels && translations.labels[field] || field),
@@ -83215,7 +83043,7 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
 
           var finalMessage = message;
           if (options && options.human) finalMessage = options.human;else if (errorMessages[eVal]) finalMessage = render(errorMessages[eVal], options);
-          return _objectSpread$1({
+          return _objectSpread$2({
             message: finalMessage,
             options: options,
             validator: eVal
@@ -83317,7 +83145,7 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
 
             var aProps = _this.getFieldProps(apField, apComponentMap);
 
-            apProps.append.push( /*#__PURE__*/React__default.createElement(aProps.component, _objectSpread$1({
+            apProps.append.push( /*#__PURE__*/React__default.createElement(aProps.component, _objectSpread$2({
               key: "form-field-".concat(name, "-append-").concat(aProps.name),
               variant: inputVariant,
               disabled: disabled,
@@ -83330,7 +83158,7 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
 
             var _aProps = _this.getFieldProps(apField, apComponentMap);
 
-            apProps.prepend.push( /*#__PURE__*/React__default.createElement(_aProps.component, _objectSpread$1({
+            apProps.prepend.push( /*#__PURE__*/React__default.createElement(_aProps.component, _objectSpread$2({
               key: "form-field-".concat(name, "-append-").concat(_aProps.name),
               variant: inputVariant,
               disabled: disabled,
@@ -83448,16 +83276,16 @@ FormulatorFormSection.propTypes = {
   onChange: PropTypes__default.func.isRequired
 };
 
-var _excluded = ["errors", "results"],
+var _excluded$1 = ["errors", "results"],
     _excluded2 = ["hasErrors", "fieldStates", "errors"];
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-function ownKeys(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$1(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(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var asyncValidatorEnvelope = /*#__PURE__*/function () {
   var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(path, func) {
@@ -83507,7 +83335,7 @@ var validate = /*#__PURE__*/function () {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:
-            _validator = dist.validate(schema, data), errors = _validator.errors, results = _validator.results, rest = _objectWithoutProperties(_validator, _excluded);
+            _validator = dist.validate(schema, data), errors = _validator.errors, results = _validator.results, rest = _objectWithoutProperties(_validator, _excluded$1);
             asyncResults = [];
             asyncErrors = oldAsyncErrors;
 
@@ -83555,14 +83383,14 @@ var validate = /*#__PURE__*/function () {
 
           case 12:
             mergedErrors = [].concat(_toConsumableArray(errors), _toConsumableArray(asyncErrors));
-            mergedResults = _objectSpread({}, results);
+            mergedResults = _objectSpread$1({}, results);
             asyncErrors.forEach(function (e) {
               var fr = mergedResults[e.path];
               fr.errors = [].concat(_toConsumableArray(fr.errors), [e]);
               fr.hasErrors = true;
               fr.sanitizedData = undefined;
             });
-            ee.emit('validation', _objectSpread(_objectSpread({}, rest), {}, {
+            ee.emit('validation', _objectSpread$1(_objectSpread$1({}, rest), {}, {
               hasErrors: Object.keys(mergedErrors).length > 0,
               errors: mergedErrors,
               asyncErrors: asyncErrors,
@@ -83588,7 +83416,7 @@ var validateSync = function validateSync(schema, data) {
 };
 
 var getInitialData = function getInitialData(schema, iniData, transientData, iniFieldStates) {
-  var _validateSync = validateSync(schema, _objectSpread(_objectSpread({}, iniData), transientData)),
+  var _validateSync = validateSync(schema, _objectSpread$1(_objectSpread$1({}, iniData), transientData)),
       hasErrors = _validateSync.hasErrors,
       errors = _validateSync.errors,
       results = _validateSync.results,
@@ -83606,14 +83434,14 @@ var getInitialData = function getInitialData(schema, iniData, transientData, ini
       clean: true
     });
   }).reduce(function (l, r) {
-    return _objectSpread(_objectSpread({}, l), r);
+    return _objectSpread$1(_objectSpread$1({}, l), r);
   }, {});
   var finalData = Object.entries(data).map(function (e) {
     var value = e[1];
     if (value === undefined && sanitizedData[e[0]] !== undefined) value = sanitizedData[e[0]];
     return _defineProperty({}, e[0], value);
   }).reduce(function (l, r) {
-    return _objectSpread(_objectSpread({}, l), r);
+    return _objectSpread$1(_objectSpread$1({}, l), r);
   }, {});
   return {
     preSubmitValidation: false,
@@ -83728,11 +83556,11 @@ var FormulatorForm = /*#__PURE__*/function (_React$Component) {
           fieldStates = _this$state2.fieldStates;
       if (preSubmitValidation || disabled) return;
 
-      var newData = _objectSpread({}, oldData);
+      var newData = _objectSpread$1({}, oldData);
 
       var newAsyncErrors = [];
 
-      var newFieldStates = _objectSpread({}, fieldStates);
+      var newFieldStates = _objectSpread$1({}, fieldStates);
 
       transientData.forEach(function (_ref7) {
         var name = _ref7.name,
@@ -83744,7 +83572,7 @@ var FormulatorForm = /*#__PURE__*/function (_React$Component) {
           var path = _ref8.path;
           return path !== name;
         }).concat(newAsyncErrors);
-        newFieldStates[name] = _objectSpread(_objectSpread({}, fieldStates[name]), {}, {
+        newFieldStates[name] = _objectSpread$1(_objectSpread$1({}, fieldStates[name]), {}, {
           dirty: isDirty,
           clean: !isDirty
         });
@@ -83774,7 +83602,7 @@ var FormulatorForm = /*#__PURE__*/function (_React$Component) {
         var path = _ref9.path;
         return path !== name;
       });
-      validate(this.ee, schema, _objectSpread(_objectSpread({}, oldData), {}, _defineProperty({}, name, value)), newAsyncErrors, _objectSpread(_objectSpread({}, fieldStates), {}, _defineProperty({}, name, _objectSpread(_objectSpread({}, fieldStates[name]), {}, {
+      validate(this.ee, schema, _objectSpread$1(_objectSpread$1({}, oldData), {}, _defineProperty({}, name, value)), newAsyncErrors, _objectSpread$1(_objectSpread$1({}, fieldStates), {}, _defineProperty({}, name, _objectSpread$1(_objectSpread$1({}, fieldStates[name]), {}, {
         dirty: isDirty,
         clean: !isDirty
       }))), asyncValidators);
@@ -83799,7 +83627,7 @@ var FormulatorForm = /*#__PURE__*/function (_React$Component) {
           return l || r.dirty;
         }, false)
       };
-      this.setState(_objectSpread(_objectSpread({}, statusFields), {}, {
+      this.setState(_objectSpread$1(_objectSpread$1({}, statusFields), {}, {
         fieldStates: fieldStates,
         errors: errors
       }, result), function () {
@@ -83865,7 +83693,7 @@ var FormulatorForm = /*#__PURE__*/function (_React$Component) {
     value: function setFieldState(path, flags) {
       var fieldStates = this.state.fieldStates;
       this.setState({
-        fieldStates: _objectSpread(_objectSpread({}, fieldStates), {}, _defineProperty({}, path, _objectSpread(_objectSpread({}, fieldStates[path]), flags)))
+        fieldStates: _objectSpread$1(_objectSpread$1({}, fieldStates), {}, _defineProperty({}, path, _objectSpread$1(_objectSpread$1({}, fieldStates[path]), flags)))
       });
     }
   }, {
@@ -84031,6 +83859,269 @@ FormulatorForm.defaultProps = {
   errorMessages: {}
 };
 
+var abortableOAuthFetch = /*#__PURE__*/function () {
+  var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(url, _ref) {
+    var token, signal, r, text, result, options;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            token = _ref.token, signal = _ref.signal;
+            _context.prev = 1;
+            options = {
+              method: 'GET'
+            };
+
+            if (token) {
+              options.headers = {
+                'Content-Type': 'application/json',
+                Authorization: "Bearer ".concat(token)
+              };
+            }
+
+            if (signal) {
+              options.signal = signal;
+            }
+
+            _context.next = 7;
+            return fetch(url, options);
+
+          case 7:
+            r = _context.sent;
+            _context.next = 10;
+            return r.text();
+
+          case 10:
+            text = _context.sent;
+            result = JSON.parse(text);
+            _context.next = 17;
+            break;
+
+          case 14:
+            _context.prev = 14;
+            _context.t0 = _context["catch"](1);
+            throw new Error(text);
+
+          case 17:
+            if (r.ok) {
+              _context.next = 19;
+              break;
+            }
+
+            throw new Error(result.error);
+
+          case 19:
+            return _context.abrupt("return", result);
+
+          case 20:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee, null, [[1, 14]]);
+  }));
+
+  return function abortableOAuthFetch(_x, _x2) {
+    return _ref2.apply(this, arguments);
+  };
+}();
+
+var useFetchOptions = function useFetchOptions(arg) {
+  var fetchOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var controller = useRef();
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      loading = _useState2[0],
+      setLoading = _useState2[1];
+
+  var _useState3 = useState(),
+      _useState4 = _slicedToArray(_useState3, 2),
+      options = _useState4[0],
+      setOptions = _useState4[1];
+
+  var fetch = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var fetcher, r;
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            if (!Array.isArray(arg)) {
+              _context2.next = 2;
+              break;
+            }
+
+            return _context2.abrupt("return", setOptions(arg));
+
+          case 2:
+            if (!(typeof arg !== 'string' && typeof arg !== 'function')) {
+              _context2.next = 4;
+              break;
+            }
+
+            return _context2.abrupt("return", setOptions([]));
+
+          case 4:
+            fetcher = arg;
+
+            if (typeof arg === 'string') {
+              fetcher = function fetcher(signal) {
+                return abortableOAuthFetch(arg, {
+                  token: fetchOptions.token,
+                  signal: signal
+                });
+              };
+            }
+
+            controller.current = new AbortController();
+            setLoading(true);
+            _context2.prev = 8;
+            _context2.next = 11;
+            return fetcher(controller.current.signal);
+
+          case 11:
+            r = _context2.sent;
+            controller.current = undefined;
+
+            if (Array.isArray(r)) {
+              _context2.next = 15;
+              break;
+            }
+
+            throw new Error('autocomplete fetcher returned a non array value');
+
+          case 15:
+            setOptions(r);
+            _context2.next = 21;
+            break;
+
+          case 18:
+            _context2.prev = 18;
+            _context2.t0 = _context2["catch"](8);
+            setLoading(false);
+
+          case 21:
+            setLoading(false);
+
+          case 22:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2, null, [[8, 18]]);
+  })), [arg, controller.current, setLoading, setOptions]);
+  var abort = useCallback(function () {
+    if (loading) setLoading(false);
+
+    if (controller.current) {
+      controller.current.abort();
+      controller.current = undefined;
+    }
+  }, [loading, setLoading, controller.current]);
+  return {
+    loading: loading,
+    fetch: fetch,
+    abort: abort,
+    options: options
+  };
+};
+
+var _excluded = ["dirty", "hasErrors", "required", "label", "value", "variant", "options", "baererToken", "formElement"];
+
+function ownKeys(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(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var FormOptionsLoader = function FormOptionsLoader(_ref) {
+  var dirty = _ref.dirty,
+      hasErrors = _ref.hasErrors,
+      required = _ref.required,
+      label = _ref.label,
+      value = _ref.value,
+      variant = _ref.variant,
+      optionsArg = _ref.options,
+      baererToken = _ref.baererToken,
+      formElement = _ref.formElement,
+      inputProps = _objectWithoutProperties(_ref, _excluded);
+
+  var _useFetchOptions = useFetchOptions(optionsArg, {
+    token: baererToken
+  }),
+      loading = _useFetchOptions.loading,
+      fetch = _useFetchOptions.fetch,
+      abort = _useFetchOptions.abort,
+      options = _useFetchOptions.options;
+
+  useEffect(function () {
+    fetch();
+  }, []);
+
+  if (!options) {
+    return /*#__PURE__*/React__default.createElement(_FormControl, {
+      error: dirty && hasErrors,
+      margin: "dense",
+      fullWidth: true,
+      required: required
+    }, /*#__PURE__*/React__default.createElement(_TextField, {
+      label: label,
+      variant: variant,
+      value: value,
+      disabled: true,
+      InputProps: {
+        endAdornment: /*#__PURE__*/React__default.createElement(_InputAdornment, {
+          position: "end"
+        }, /*#__PURE__*/React__default.createElement(_CircularProgress, {
+          size: 20,
+          thickness: 4
+        }))
+      }
+    }));
+  }
+
+  return /*#__PURE__*/React__default.createElement(_FormControl, {
+    error: dirty && hasErrors,
+    margin: "dense",
+    fullWidth: true,
+    required: required
+  }, /*#__PURE__*/cloneElement(formElement, _objectSpread({
+    label: label,
+    dirty: dirty,
+    value: value,
+    variant: variant,
+    hasErrors: hasErrors,
+    required: required,
+    loading: loading,
+    options: options.map(function (o) {
+      return {
+        entry: o.entry,
+        label: o.entry,
+        value: o.entry,
+        count: o.count
+      };
+    }),
+    fetch: fetch,
+    abort: abort
+  }, inputProps)));
+};
+
+FormOptionsLoader.propTypes = {
+  name: PropTypes__default.string,
+  label: PropTypes__default.string,
+  value: PropTypes__default.any,
+  options: PropTypes__default.oneOfType([PropTypes__default.array, PropTypes__default.string, PropTypes__default.func]).isRequired,
+  baererToken: PropTypes__default.string,
+  allowCreate: PropTypes__default.bool,
+  variant: PropTypes__default.oneOf(['standard', 'filled', 'outlined']),
+  required: PropTypes__default.bool,
+  disabled: PropTypes__default.bool,
+  readOnly: PropTypes__default.bool,
+  dirty: PropTypes__default.bool,
+  hasErrors: PropTypes__default.bool,
+  errors: PropTypes__default.array,
+  onChange: PropTypes__default.func,
+  formElement: PropTypes__default.elementType
+};
+
 var useStyles = makeStyles$1(function (theme) {
   return {
     "default": {
@@ -84048,12 +84139,12 @@ var useStyles = makeStyles$1(function (theme) {
       padding: theme.spacing(2)
     },
     spanBannerToCard: {
-      marginTop: theme.spacing(1),
       marginRight: theme.spacing(2) * -1,
-      marginBottom: theme.spacing(0.5),
       marginLeft: theme.spacing(2) * -1,
       padding: theme.spacing(2),
       '&.clickable': {
+        marginTop: theme.spacing(1),
+        marginBottom: theme.spacing(0.5),
         paddingTop: theme.spacing(1.5),
         paddingRight: theme.spacing(2),
         paddingBottom: theme.spacing(1.5),
@@ -84161,4 +84252,4 @@ FormPrimaryToggle.propTypes = {
   uncheckedLabel: PropTypes__default.string.isRequired
 };
 
-export { FormAutocomplete, FormBoolean, FormField$1 as FormField, FormNumber, FormPrimaryToggle, FormReadOnlyBoolean, FormReadOnlyField$1 as FormReadOnlyField, FormReadOnlyMarkdown, FormReadOnlyNumber, FormReadOnlyRepeater, FormReadOnlySelect, FormReadOnlyText, FormRepeater, FormSelect, FormText, FormulatorForm, HiddenData, SelectOrCreate };
+export { FormAutocomplete, FormBoolean, FormField$1 as FormField, FormNumber, FormOptionsLoader, FormPrimaryToggle, FormReadOnlyBoolean, FormReadOnlyField$1 as FormReadOnlyField, FormReadOnlyMarkdown, FormReadOnlyNumber, FormReadOnlyRepeater, FormReadOnlySelect, FormReadOnlyText, FormRepeater, FormSelect, FormText, FormulatorForm, HiddenData, SelectOrCreate };