@bigbinary/neeto-fields-frontend 1.0.6 → 1.0.8

package/dist/index.js

@@ -1,11 +1,11 @@
 import React, { useContext, useState, useRef, useEffect, useLayoutEffect, useMemo, useCallback, createContext, memo, useReducer } from 'react';
-import { Label, Button, Pane, Typography, Switch as Switch$1, TimePicker, DatePicker, Select as Select$1, Input as Input$1, Textarea, Dropdown, NoData, Table, Spinner, Alert } from '@bigbinary/neetoui';
+import { Pane, Label, Button, Typography, Switch as Switch$1, TimePicker, DatePicker, Select as Select$1, Input as Input$1, Textarea, Dropdown, NoData, Table, Spinner, Alert } from '@bigbinary/neetoui';
 import { values, pick, isEmpty, omit, assoc, map, isNil, isNotNil, pluck, clone as clone$1, pipe, mergeAll, prop, any, not, head } from 'ramda';
-import { Input, Select, Switch, Form, ActionBlock, Button as Button$1 } from '@bigbinary/neetoui/formik';
+import { ActionBlock, Input, Select, Switch, Form, Button as Button$1 } from '@bigbinary/neetoui/formik';
 import { useQuery, useQueryClient, useMutation } from 'react-query';
 import axios from 'axios';
 import { buildUrl, getQueryParams } from '@bigbinary/neeto-commons-frontend/utils';
-import { filterBy, toLabelAndValue, isNotEmpty, capitalize as capitalize$1, findBy, countBy, existsBy } from '@bigbinary/neeto-commons-frontend/pure';
+import { filterBy, toLabelAndValue, isNotEmpty, capitalize as capitalize$1, findBy, humanize, countBy, existsBy } from '@bigbinary/neeto-commons-frontend/pure';
 import * as yup from 'yup';
 import { useFormikContext, FieldArray, useField } from 'formik';
 import { Delete, Check, MenuHorizontal, Reorder } from '@bigbinary/neeto-icons';
@@ -3714,8 +3714,8 @@ function transformOptions(options) {
   return options;
 }
 
-function ownKeys$b(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$b(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$b(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$d(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$d(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$d(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 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 noop$1() {}
@@ -3775,9 +3775,9 @@ var I18n = function (_EventEmitter) {
         }
       }
       var defOpts = get();
-      this.options = _objectSpread$b(_objectSpread$b(_objectSpread$b({}, defOpts), this.options), transformOptions(options));
+      this.options = _objectSpread$d(_objectSpread$d(_objectSpread$d({}, defOpts), this.options), transformOptions(options));
       if (this.options.compatibilityAPI !== 'v1') {
-        this.options.interpolation = _objectSpread$b(_objectSpread$b({}, defOpts.interpolation), this.options.interpolation);
+        this.options.interpolation = _objectSpread$d(_objectSpread$d({}, defOpts.interpolation), this.options.interpolation);
       }
       if (options.keySeparator !== undefined) {
         this.options.userDefinedKeySeparator = options.keySeparator;
@@ -4055,7 +4055,7 @@ var I18n = function (_EventEmitter) {
           }
           options = _this5.options.overloadTranslationOptionHandler([key, opts].concat(rest));
         } else {
-          options = _objectSpread$b({}, opts);
+          options = _objectSpread$d({}, opts);
         }
         options.lng = options.lng || fixedT.lng;
         options.lngs = options.lngs || fixedT.lngs;
@@ -4182,7 +4182,7 @@ var I18n = function (_EventEmitter) {
       var _this8 = this;
       var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop$1;
-      var mergedOptions = _objectSpread$b(_objectSpread$b(_objectSpread$b({}, this.options), options), {
+      var mergedOptions = _objectSpread$d(_objectSpread$d(_objectSpread$d({}, this.options), options), {
         isClone: true
       });
       var clone = new I18n(mergedOptions);
@@ -4193,7 +4193,7 @@ var I18n = function (_EventEmitter) {
       membersToCopy.forEach(function (m) {
         clone[m] = _this8[m];
       });
-      clone.services = _objectSpread$b({}, this.services);
+      clone.services = _objectSpread$d({}, this.services);
       clone.services.utils = {
         hasLoadedNamespace: clone.hasLoadedNamespace.bind(clone)
       };
@@ -4632,9 +4632,9 @@ function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
 
-function ownKeys$a(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$a(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$c(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var defaultOptions$1 = {
   bindI18n: 'languageChanged',
   bindI18nStore: '',
@@ -4648,7 +4648,7 @@ var i18nInstance;
 var I18nContext = React.createContext();
 function setDefaults() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  defaultOptions$1 = _objectSpread$a(_objectSpread$a({}, defaultOptions$1), options);
+  defaultOptions$1 = _objectSpread$c(_objectSpread$c({}, defaultOptions$1), options);
 }
 function getDefaults() {
   return defaultOptions$1;
@@ -4804,9 +4804,9 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
-function ownKeys$9(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$b(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$9(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$b(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$b(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function useTranslation(ns) {
   var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var i18nFromProps = props.i18n;
@@ -4834,7 +4834,7 @@ function useTranslation(ns) {
 
   if (i18n.options.react && i18n.options.react.wait !== undefined) warnOnce('It seems you are still using the old wait option, you may migrate to the new useSuspense behaviour.');
 
-  var i18nOptions = _objectSpread$9(_objectSpread$9(_objectSpread$9({}, getDefaults()), i18n.options.react), props);
+  var i18nOptions = _objectSpread$b(_objectSpread$b(_objectSpread$b({}, getDefaults()), i18n.options.react), props);
 
   var useSuspense = i18nOptions.useSuspense,
       keyPrefix = i18nOptions.keyPrefix;
@@ -5172,8 +5172,8 @@ var QUERY_KEYS = {
 };
 var DEFAULT_STALE_TIME = 3600000; // 1 hour
 
-function ownKeys$8(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$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$a(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$a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$a(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var FIELDS = QUERY_KEYS.FIELDS;
 var useFetchFields = function useFetchFields(_ref, options) {
   var resourceType = _ref.resourceType,
@@ -5187,20 +5187,20 @@ var useFetchFields = function useFetchFields(_ref, options) {
       ownerId: ownerId,
       state: state
     });
-  }, _objectSpread$8({
+  }, _objectSpread$a({
     staleTime: DEFAULT_STALE_TIME
   }, options));
 };
 var useCreateField = function useCreateField(options) {
   var queryClient = useQueryClient();
-  return useMutation(fieldsApi.create, _objectSpread$8(_objectSpread$8({}, options), {}, {
+  return useMutation(fieldsApi.create, _objectSpread$a(_objectSpread$a({}, options), {}, {
     onSuccess: function onSuccess() {
       var _options$onSuccess;
-      queryClient.invalidateQueries(FIELDS);
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
         args[_key] = arguments[_key];
       }
       options === null || options === void 0 ? void 0 : (_options$onSuccess = options.onSuccess) === null || _options$onSuccess === void 0 ? void 0 : _options$onSuccess.call.apply(_options$onSuccess, [options].concat(args));
+      queryClient.invalidateQueries(FIELDS);
     }
   }));
 };
@@ -5212,27 +5212,27 @@ var useShowField = function useShowField(fieldId, options) {
 };
 var useUpdateField = function useUpdateField(options) {
   var queryClient = useQueryClient();
-  return useMutation(fieldsApi.update, _objectSpread$8(_objectSpread$8({}, options), {}, {
+  return useMutation(fieldsApi.update, _objectSpread$a(_objectSpread$a({}, options), {}, {
     onSuccess: function onSuccess() {
       var _options$onSuccess2;
-      queryClient.invalidateQueries(FIELDS);
       for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
         args[_key2] = arguments[_key2];
       }
       options === null || options === void 0 ? void 0 : (_options$onSuccess2 = options.onSuccess) === null || _options$onSuccess2 === void 0 ? void 0 : _options$onSuccess2.call.apply(_options$onSuccess2, [options].concat(args));
+      queryClient.invalidateQueries(FIELDS);
     }
   }));
 };
 var useDestroyField = function useDestroyField(options) {
   var queryClient = useQueryClient();
-  return useMutation(fieldsApi.destroy, _objectSpread$8(_objectSpread$8({}, options), {}, {
+  return useMutation(fieldsApi.destroy, _objectSpread$a(_objectSpread$a({}, options), {}, {
     onSuccess: function onSuccess() {
       var _options$onSuccess3;
-      queryClient.invalidateQueries(FIELDS);
       for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
         args[_key3] = arguments[_key3];
       }
       options === null || options === void 0 ? void 0 : (_options$onSuccess3 = options.onSuccess) === null || _options$onSuccess3 === void 0 ? void 0 : _options$onSuccess3.call.apply(_options$onSuccess3, [options].concat(args));
+      queryClient.invalidateQueries(FIELDS);
     }
   }));
 };
@@ -5245,11 +5245,11 @@ var useReorderFields = function useReorderFields() {
   });
 };
 
-function ownKeys$7(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$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$9(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$9(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$9(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var arrangeOptionsDisplayOrder = function arrangeOptionsDisplayOrder(options) {
   return options.map(function (option, index) {
-    return _objectSpread$7(_objectSpread$7({}, option), {}, {
+    return _objectSpread$9(_objectSpread$9({}, option), {}, {
       displayOrder: index
     });
   });
@@ -5262,9 +5262,9 @@ var buildPayload = function buildPayload(_ref) {
     ownerId = _ref$ownerId === void 0 ? "" : _ref$ownerId;
   var kind = formValues.kind.value;
   var name = formValues.name.trim();
-  return _objectSpread$7(_objectSpread$7({}, omit(["createdAt", "id", "ownerId", "ownerType", "updatedAt"], formValues)), {}, {
-    name: name,
+  return _objectSpread$9(_objectSpread$9({}, omit(["createdAt", "id", "ownerId", "ownerType", "updatedAt"], formValues)), {}, {
     kind: kind,
+    name: name,
     resourceType: isEmpty(resourceType) ? undefined : resourceType,
     ownerId: isEmpty(ownerId) ? undefined : ownerId,
     data: isDropdown(kind) ? arrangeOptionsDisplayOrder(formValues.data) : formValues.data
@@ -5289,7 +5289,27 @@ var getPermittedKinds = function getPermittedKinds(_ref2) {
   return permittedKinds;
 };
 var generateValidationSchema = function generateValidationSchema(additionalValidations) {
-  return yup.object().shape(_objectSpread$7(_objectSpread$7({}, BASIC_FIELD_FORM_VALIDATIONS), additionalValidations));
+  return yup.object().shape(_objectSpread$9(_objectSpread$9({}, BASIC_FIELD_FORM_VALIDATIONS), additionalValidations));
+};
+var renderFormFooter = function renderFormFooter(_ref3) {
+  var onClose = _ref3.onClose,
+    loading = _ref3.loading,
+    _ref3$dirty = _ref3.dirty,
+    dirty = _ref3$dirty === void 0 ? true : _ref3$dirty;
+  return /*#__PURE__*/React.createElement(Pane.Footer, null, /*#__PURE__*/React.createElement(ActionBlock, {
+    cancelButtonProps: {
+      onClick: onClose,
+      style: "text",
+      disabled: loading
+    },
+    submitButtonProps: {
+      label: t("labels.saveChanges"),
+      className: "mr-2",
+      type: "submit",
+      disabled: !dirty,
+      loading: loading
+    }
+  }));
 };
 
 var regexValidationSchema = yup.object().shape({
@@ -5542,8 +5562,8 @@ var FieldForm = function FieldForm(_ref) {
 };
 
 var _excluded$3 = ["resourceType", "allowedKinds", "additionalValidations", "initialValues", "onClose"];
-function ownKeys$6(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$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$8(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$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /** @type {React.FC<import("types").AddProps>} */
 
@@ -5573,7 +5593,7 @@ var Add = function Add(_ref) {
     style: "h2"
   }, t("titles.addField"))), /*#__PURE__*/React.createElement(Form, {
     formikProps: {
-      initialValues: _objectSpread$6(_objectSpread$6({}, initialValues), INITIAL_FIELDS),
+      initialValues: _objectSpread$8(_objectSpread$8({}, initialValues), INITIAL_FIELDS),
       validationSchema: generateValidationSchema(additionalValidations),
       onSubmit: handleSubmit
     }
@@ -5583,26 +5603,17 @@ var Add = function Add(_ref) {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FieldForm, _extends({
       chosenKind: kind.value,
       kindSelectOptions: filteredKinds
-    }, props)), /*#__PURE__*/React.createElement(Pane.Footer, null, /*#__PURE__*/React.createElement(ActionBlock, {
-      cancelButtonProps: {
-        onClick: onClose,
-        style: "text",
-        disabled: isSubmitting
-      },
-      submitButtonProps: {
-        label: t("labels.createField"),
-        className: "mr-2",
-        type: "submit",
-        loading: isSubmitting,
-        disabled: !dirty
-      }
-    })));
+    }, props)), renderFormFooter({
+      onClose: onClose,
+      loading: isSubmitting,
+      dirty: dirty
+    }));
   }));
 };
 
 var _excluded$2 = ["fieldId", "allowedKinds", "additionalValidations", "initialValues", "onClose"];
-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$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 ownKeys$7(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$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /** @type {React.FC<import("types").EditProps>} */
 
@@ -5640,13 +5651,14 @@ var Edit = function Edit(_ref) {
     style: "h2"
   }, t("titles.editField"))), /*#__PURE__*/React.createElement(Form, {
     formikProps: {
-      initialValues: _objectSpread$5(_objectSpread$5({}, initialValues), assoc("kind", FIELD_KINDS[field.kind], field)),
+      initialValues: _objectSpread$7(_objectSpread$7({}, initialValues), assoc("kind", FIELD_KINDS[field.kind], field)),
       validationSchema: generateValidationSchema(additionalValidations),
       enableReinitialize: true,
       onSubmit: handleSubmit
     }
   }, function (_ref2) {
-    var kind = _ref2.values.kind;
+    var kind = _ref2.values.kind,
+      dirty = _ref2.dirty;
     var permittedKinds = getPermittedKinds({
       allowedKinds: allowedKinds,
       selectedKind: kind
@@ -5655,19 +5667,11 @@ var Edit = function Edit(_ref) {
       chosenKind: kind === null || kind === void 0 ? void 0 : kind.value,
       isSystem: field.isSystem,
       kindSelectOptions: permittedKinds
-    }, props)), /*#__PURE__*/React.createElement(Pane.Footer, null, /*#__PURE__*/React.createElement(ActionBlock, {
-      cancelButtonProps: {
-        onClick: onClose,
-        style: "text",
-        disabled: isSubmitting
-      },
-      submitButtonProps: {
-        label: t("labels.updateField"),
-        className: "mr-2",
-        type: "submit",
-        loading: isSubmitting
-      }
-    })));
+    }, props)), renderFormFooter({
+      onClose: onClose,
+      loading: isSubmitting,
+      dirty: dirty
+    }));
   }));
 };
 
@@ -6220,8 +6224,8 @@ var dateTimeToString = function dateTimeToString(dateTime) {
 };
 
 var _excluded = ["name", "id", "kind", "data", "individualSubmit", "formRef", "formRefs", "disabled", "isRequiredColumnName"];
-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; }
+function ownKeys$6(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$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var useFormikFields = function useFormikFields(_ref) {
   var name = _ref.name,
     fieldId = _ref.id,
@@ -6281,10 +6285,10 @@ var useFormikFields = function useFormikFields(_ref) {
   }
   return {
     handleSubmit: handleSubmit,
-    fieldProps: _objectSpread$4(_objectSpread$4({}, formikFieldProps), {}, {
+    fieldProps: _objectSpread$6(_objectSpread$6({}, formikFieldProps), {}, {
       required: props[isRequiredColumnName],
       error: meta.touched && meta.error,
-      options: isDropdown && buildOptionsToLabelAndValue(fieldData),
+      options: isDropdown ? buildOptionsToLabelAndValue(fieldData) : undefined,
       value: getValueForField(formikFieldProps.value),
       dirty: dirty,
       label: !individualSubmit && capitalize$1(name),
@@ -6356,7 +6360,7 @@ var Number$1 = function Number(props) {
   var showSubmitButton = props.individualSubmit && fieldProps.dirty;
   return /*#__PURE__*/React.createElement(Input$1, _extends({}, fieldProps, {
     type: "number",
-    suffix: showSubmitButton && /*#__PURE__*/React.createElement(Button, {
+    suffix: showSubmitButton && /*#__PURE__*/React.createElement(Button$1, {
       icon: Check,
       style: "text",
       onClick: function onClick() {
@@ -6439,8 +6443,8 @@ var TextArea = function TextArea(props) {
   }));
 };
 
-function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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$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 standardComponents = {
   text: Text,
   regex: Text,
@@ -6460,32 +6464,15 @@ var standardComponents = {
   time_range: RangePicker,
   checkbox: Checkbox
 };
-var renderFieldInput = function renderFieldInput(_ref) {
+var getFieldInput = function getFieldInput(_ref) {
   var field = _ref.field,
     _ref$customComponents = _ref.customComponents,
-    customComponents = _ref$customComponents === void 0 ? {} : _ref$customComponents,
-    _ref$individualSubmit = _ref.individualSubmit,
-    individualSubmit = _ref$individualSubmit === void 0 ? false : _ref$individualSubmit,
-    _ref$formRefs = _ref.formRefs,
-    formRefs = _ref$formRefs === void 0 ? null : _ref$formRefs,
-    _ref$formRef = _ref.formRef,
-    formRef = _ref$formRef === void 0 ? null : _ref$formRef,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    isRequiredColumnName = _ref.isRequiredColumnName;
+    customComponents = _ref$customComponents === void 0 ? {} : _ref$customComponents;
   var Component = customComponents[field.kind] || standardComponents[field.kind];
   if (Component) {
-    return /*#__PURE__*/React.createElement(Component, _objectSpread$3({
-      disabled: disabled,
-      formRef: formRef,
-      formRefs: formRefs,
-      individualSubmit: individualSubmit,
-      isRequiredColumnName: isRequiredColumnName
-    }, field));
-  }
-  return /*#__PURE__*/React.createElement(Typography, {
-    style: "body2"
-  }, t("messages.invalidKind"));
+    return Component;
+  }
+  return null;
 };
 var removeItemsWithNullData = function removeItemsWithNullData(fieldValues) {
   return fieldValues.filter(function (item) {
@@ -6507,7 +6494,7 @@ var transformValues = function transformValues(_ref2) {
     delete allFieldValues["".concat(name, "-").concat(id)];
   });
   var cleanedFieldValues = pipe(removeItemsWithNullData, removeNoiseFromValues)(neetoFieldValues);
-  return _objectSpread$3(_objectSpread$3({}, allFieldValues), {}, {
+  return _objectSpread$5(_objectSpread$5({}, allFieldValues), {}, {
     fieldValuesAttributes: cleanedFieldValues
   });
 };
@@ -6544,6 +6531,8 @@ var neetoFieldsUtils = {
   transformValues: transformValues
 };
 
+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 FieldInputs = function FieldInputs(_ref) {
   var _ref$customComponents = _ref.customComponents,
     customComponents = _ref$customComponents === void 0 ? {} : _ref$customComponents,
@@ -6551,14 +6540,26 @@ var FieldInputs = function FieldInputs(_ref) {
     formRef = _ref.formRef,
     disabled = _ref.disabled,
     isRequiredColumnName = _ref.isRequiredColumnName;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   return getNonSystemFields(fields).map(function (field) {
-    return renderFieldInput({
+    var Field = getFieldInput({
       field: field,
-      customComponents: customComponents,
-      formRef: formRef,
-      isRequiredColumnName: isRequiredColumnName,
-      disabled: disabled
+      customComponents: customComponents
     });
+    if (Field) {
+      return /*#__PURE__*/React.createElement(Field, _extends({
+        key: field.id
+      }, _objectSpread$4(_objectSpread$4({}, field), {}, {
+        formRef: formRef,
+        disabled: disabled,
+        isRequiredColumnName: isRequiredColumnName
+      })));
+    }
+    return /*#__PURE__*/React.createElement(Typography, {
+      key: field.id,
+      style: "body2"
+    }, t("messages.invalidKind"));
   });
 };
 
@@ -6618,11 +6619,11 @@ var renderMenuBarItems = function renderMenuBarItems(_ref2) {
     return items.map(function (item) {
       return /*#__PURE__*/React.createElement(MenuBar.Item, {
         active: selectedMenu === item.id,
+        key: item.id,
+        label: humanize(item.name),
         description: t("messages.manageFieldFor", {
-          resource: item.name
+          resource: humanize(item.name).toLocaleLowerCase()
         }),
-        key: item.id,
-        label: capitalize$1(item.name),
         onClick: handleBlockClick({
           resource: item.id
         })
@@ -6632,11 +6633,11 @@ var renderMenuBarItems = function renderMenuBarItems(_ref2) {
   return items.length > 1 && items.map(function (item) {
     return /*#__PURE__*/React.createElement(MenuBar.Item, {
       active: selectedMenu === item,
+      key: item,
+      label: humanize(item),
       description: t("messages.manageFieldFor", {
-        resource: item
+        resource: humanize(item).toLocaleLowerCase()
       }),
-      key: item,
-      label: capitalize$1(item),
       onClick: handleBlockClick({
         resource: item
       })
@@ -6688,16 +6689,16 @@ var configsApi = {
   fetchConfigs: fetchConfigs
 };
 
-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$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 ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var useFetchConfigs = function useFetchConfigs(options) {
-  return useQuery([QUERY_KEYS.CONFIGS], configsApi.fetchConfigs, _objectSpread$2({
+  return useQuery([QUERY_KEYS.CONFIGS], configsApi.fetchConfigs, _objectSpread$3({
     staleTime: DEFAULT_STALE_TIME
   }, options));
 };
 
-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$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 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$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; }
 var useFieldsDashboard = function useFieldsDashboard(_ref) {
   var buildColumnData = _ref.buildColumnData,
     showOwnersInMenu = _ref.showOwnersInMenu;
@@ -6790,7 +6791,7 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
     defaultColumns: defaultColumns
   });
   var handleBlockClick = function handleBlockClick(params) {
-    return handleMetaClick(history, buildUrl("", _objectSpread$1({
+    return handleMetaClick(history, buildUrl("", _objectSpread$2({
       resource: resource,
       state: state
     }, params)));
@@ -11285,7 +11286,7 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     handleBlockClick = _useFieldsDashboard.handleBlockClick;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MenuBar, {
     showMenu: isMenuBarOpen,
-    title: t("titles.field", SINGULAR)
+    title: t("titles.field", PLURAL)
   }, isConfigsLoading ? /*#__PURE__*/React.createElement("div", {
     className: "flex items-center justify-center"
   }, /*#__PURE__*/React.createElement(Spinner, null)) : renderMenuBarItems({
@@ -11331,11 +11332,11 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
       selectedField: selectedField,
       onClose: handleClosePane
     }, paneProps === null || paneProps === void 0 ? void 0 : paneProps.children)),
-    title: getDashBoardTitle({
+    title: humanize(getDashBoardTitle({
       isOwnerBased: showOwnersInMenu,
       owners: owners,
       selectedVal: selectedMenu
-    })
+    }))
   }), showCountSubheader && /*#__PURE__*/React.createElement(SubHeader, {
     leftActionBlock: /*#__PURE__*/React.createElement(Typography, {
       className: "mr-4 font-semibold",
@@ -11389,11 +11390,11 @@ var fieldValuesApi = {
   update: update
 };
 
-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; }
+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$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 useCreateFieldValue = function useCreateFieldValue(options) {
   var queryClient = useQueryClient();
-  return useMutation(fieldValuesApi.create, _objectSpread(_objectSpread({}, options), {}, {
+  return useMutation(fieldValuesApi.create, _objectSpread$1(_objectSpread$1({}, options), {}, {
     onSuccess: function onSuccess() {
       queryClient.invalidateQueries([QUERY_KEYS.FIELD_VALUES]);
       options === null || options === void 0 ? void 0 : options.onSuccess();
@@ -11402,7 +11403,7 @@ var useCreateFieldValue = function useCreateFieldValue(options) {
 };
 var useUpdateFieldValue = function useUpdateFieldValue(options) {
   var queryClient = useQueryClient();
-  return useMutation(fieldValuesApi.update, _objectSpread(_objectSpread({}, options), {}, {
+  return useMutation(fieldValuesApi.update, _objectSpread$1(_objectSpread$1({}, options), {}, {
     onSuccess: function onSuccess() {
       queryClient.invalidateQueries([QUERY_KEYS.FIELD_VALUES]);
       options === null || options === void 0 ? void 0 : options.onSuccess();
@@ -11410,63 +11411,30 @@ var useUpdateFieldValue = function useUpdateFieldValue(options) {
   }));
 };
 
-var FieldValueInput = function FieldValueInput(_ref) {
-  var ownerId = _ref.ownerId,
-    field = _ref.field,
+var FieldValueInputWrapper = function FieldValueInputWrapper(_ref) {
+  var field = _ref.field,
     fieldValues = _ref.fieldValues,
-    resource = _ref.resource,
-    resourceId = _ref.resourceId,
-    queryKeysToBeInvalidatedOnSuccess = _ref.queryKeysToBeInvalidatedOnSuccess,
-    customComponents = _ref.customComponents,
-    formRefs = _ref.formRefs,
-    disabled = _ref.disabled,
-    isRequiredColumnName = _ref.isRequiredColumnName;
-  var queryClient = useQueryClient();
-  var queryOptions = {
-    onSuccess: function onSuccess() {
-      queryClient.invalidateQueries(queryKeysToBeInvalidatedOnSuccess);
-    }
-  };
-  var _useCreateFieldValue = useCreateFieldValue(queryOptions),
-    createFieldValue = _useCreateFieldValue.mutate;
-  var _useUpdateFieldValue = useUpdateFieldValue(queryOptions),
-    updateFieldValue = _useUpdateFieldValue.mutate;
-  var handleSubmit = function handleSubmit(values$1) {
-    var fieldValue = head(values(values$1));
-    var payload = {
-      fieldValue: fieldValue,
-      resource: resource,
-      resourceId: resourceId,
-      ownerId: isEmpty(ownerId) ? undefined : ownerId
-    };
-    fieldValue.id ? updateFieldValue({
-      id: fieldValue.id,
-      payload: payload
-    }) : createFieldValue(payload);
-  };
+    children = _ref.children,
+    onSubmit = _ref.onSubmit,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className;
   return /*#__PURE__*/React.createElement(Form, {
-    className: "flex w-full",
+    className: classnames("flex w-full", className),
     formikProps: {
       initialValues: getInitialFieldValue(field, fieldValues),
-      onSubmit: handleSubmit,
+      onSubmit: onSubmit,
       enableReinitialize: true
     }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "w-full"
-  }, renderFieldInput({
-    field: field,
-    customComponents: customComponents,
-    individualSubmit: true,
-    formRefs: formRefs,
-    disabled: disabled,
-    isRequiredColumnName: isRequiredColumnName
-  })));
+  }, children);
 };
 
+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 FieldValuesContainer = function FieldValuesContainer(_ref) {
   var _ref$resourceType = _ref.resourceType,
     resourceType = _ref$resourceType === void 0 ? "" : _ref$resourceType,
     fieldValues = _ref.fieldValues,
+    propFields = _ref.fields,
     _ref$ownerId = _ref.ownerId,
     ownerId = _ref$ownerId === void 0 ? "" : _ref$ownerId,
     resourceId = _ref.resourceId,
@@ -11481,17 +11449,48 @@ var FieldValuesContainer = function FieldValuesContainer(_ref) {
     formRefs = _ref.formRefs,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    isRequiredColumnName = _ref.isRequiredColumnName;
+    isRequiredColumnName = _ref.isRequiredColumnName,
+    fieldContainerClassName = _ref.fieldContainerClassName,
+    fieldClassName = _ref.fieldClassName,
+    labelClassName = _ref.labelClassName;
+  var queryClient = useQueryClient();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var queryOptions = {
+    onSuccess: function onSuccess() {
+      queryClient.invalidateQueries(queryKeysToBeInvalidatedOnSuccess);
+    }
+  };
   var _useFetchFields = useFetchFields({
       resourceType: isEmpty(resourceType) ? undefined : resourceType,
       ownerId: isEmpty(ownerId) ? undefined : ownerId,
       state: "active"
+    }, {
+      enabled: isNil(propFields)
     }),
     _useFetchFields$data = _useFetchFields.data,
     _useFetchFields$data2 = _useFetchFields$data === void 0 ? {} : _useFetchFields$data,
     _useFetchFields$data3 = _useFetchFields$data2.fields,
-    fields = _useFetchFields$data3 === void 0 ? [] : _useFetchFields$data3,
+    fetchedFields = _useFetchFields$data3 === void 0 ? [] : _useFetchFields$data3,
     isFieldsLoading = _useFetchFields.isLoading;
+  var _useCreateFieldValue = useCreateFieldValue(queryOptions),
+    createFieldValue = _useCreateFieldValue.mutate;
+  var _useUpdateFieldValue = useUpdateFieldValue(queryOptions),
+    updateFieldValue = _useUpdateFieldValue.mutate;
+  var handleSubmit = function handleSubmit(values$1) {
+    var fieldValue = head(values(values$1));
+    var payload = {
+      fieldValue: fieldValue,
+      resource: resourceType,
+      resourceId: resourceId,
+      ownerId: isEmpty(ownerId) ? undefined : ownerId
+    };
+    fieldValue.id ? updateFieldValue({
+      id: fieldValue.id,
+      payload: payload
+    }) : createFieldValue(payload);
+  };
+  var fields = propFields || fetchedFields;
   return /*#__PURE__*/React.createElement("div", {
     className: classnames("space-y-3", {
       "neeto-ui-border-gray-300 rounded-lg border bg-white px-4 py-2": showBorder
@@ -11499,22 +11498,35 @@ var FieldValuesContainer = function FieldValuesContainer(_ref) {
   }, isFieldsLoading ? /*#__PURE__*/React.createElement("div", {
     className: "flex items-center justify-center"
   }, /*#__PURE__*/React.createElement(Spinner, null)) : getNonSystemFields(fields).map(function (field) {
-    return /*#__PURE__*/React.createElement(React.Fragment, {
-      key: field.id
-    }, /*#__PURE__*/React.createElement(Typography, {
-      style: "h5"
-    }, capitalize$1(field.name)), /*#__PURE__*/React.createElement(FieldValueInput, {
-      customComponents: customComponents,
+    var Field = getFieldInput({
       field: field,
-      fieldValues: fieldValues,
-      ownerId: ownerId,
-      resource: resourceType,
-      resourceId: resourceId,
-      queryKeysToBeInvalidatedOnSuccess: queryKeysToBeInvalidatedOnSuccess,
-      formRefs: formRefs,
-      disabled: disabled,
-      isRequiredColumnName: isRequiredColumnName
-    }));
+      customComponents: customComponents
+    });
+    if (Field) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: classnames(fieldContainerClassName, "space-y-1"),
+        key: field.id
+      }, /*#__PURE__*/React.createElement(Typography, {
+        className: labelClassName,
+        style: "h5"
+      }, capitalize$1(field.name)), /*#__PURE__*/React.createElement(FieldValueInputWrapper, {
+        className: fieldClassName,
+        onSubmit: handleSubmit,
+        field: field,
+        fieldValues: fieldValues
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "w-full"
+      }, /*#__PURE__*/React.createElement(Field, _objectSpread(_objectSpread({}, field), {}, {
+        individualSubmit: true,
+        formRefs: formRefs,
+        disabled: disabled,
+        isRequiredColumnName: isRequiredColumnName
+      })))));
+    }
+    return /*#__PURE__*/React.createElement(Typography, {
+      key: field.id,
+      style: "body2"
+    }, t("messages.invalidKind"));
   }));
 };