@bigbinary/neeto-fields-frontend 1.3.9 → 1.3.10

package/dist/index.js

@@ -1,12 +1,12 @@
 import React, { useEffect, useRef, useState, useMemo, useLayoutEffect, useCallback, createContext, memo, useReducer, useContext } from 'react';
-import { useFuncDebounce, withT, useMutationWithInvalidation, useDebounce, handleMetaClick } from '@bigbinary/neeto-commons-frontend/react-utils';
+import { useFuncDebounce, useOnClickOutside, withT, useMutationWithInvalidation, useDebounce, handleMetaClick } from '@bigbinary/neeto-commons-frontend/react-utils';
 import { Checkbox as Checkbox$1, TimePicker, DatePicker, Select, Input, Textarea, Typography, Pane, Label, Button as Button$1, Dropdown, Tab, Alert, NoData, Table, Spinner } from '@bigbinary/neetoui';
-import { isNotEmpty, renameKeys, capitalize, findBy, filterBy, toLabelAndValue, slugify, humanize, countBy, noop as noop$1 } from '@bigbinary/neeto-cist';
+import { isNotEmpty, renameKeys, capitalize, findBy, noop as noop$1, filterBy, toLabelAndValue, slugify, humanize, countBy } from '@bigbinary/neeto-cist';
 import { values, isNotNil, isNil, isEmpty, prop, pluck, clone, pipe, mergeAll, omit, map, pick, assoc, any, head } from 'ramda';
 import { useFormikContext, useField, FieldArray } from 'formik';
 import { t } from 'i18next';
 import * as yup from 'yup';
-import { joinHyphenCase, buildUrl, getQueryParams } from '@bigbinary/neeto-commons-frontend/utils';
+import { joinHyphenCase, buildUrl, getQueryParams, dateFormat } from '@bigbinary/neeto-commons-frontend/utils';
 import { Check, Delete, MenuHorizontal, Info, Reorder } from '@bigbinary/neeto-icons';
 import { Button, ActionBlock as ActionBlock$1, Input as Input$1, Select as Select$1, Switch, Form } from '@bigbinary/neetoui/formik';
 import { useTranslation, Trans } from 'react-i18next';
@@ -111,6 +111,37 @@ function _toConsumableArray(arr) {
   return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
 }
 
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+  try {
+    var info = gen[key](arg);
+    var value = info.value;
+  } catch (error) {
+    reject(error);
+    return;
+  }
+  if (info.done) {
+    resolve(value);
+  } else {
+    Promise.resolve(value).then(_next, _throw);
+  }
+}
+function _asyncToGenerator(fn) {
+  return function () {
+    var self = this,
+      args = arguments;
+    return new Promise(function (resolve, reject) {
+      var gen = fn.apply(self, args);
+      function _next(value) {
+        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+      }
+      function _throw(err) {
+        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+      }
+      _next(undefined);
+    });
+  };
+}
+
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
 }
@@ -180,92 +211,6 @@ function _objectWithoutProperties(source, excluded) {
   return target;
 }
 
-var KINDS = {
-  text: "text",
-  number: "number",
-  monetary: "monetary",
-  singleOption: "single_option",
-  multiOption: "multi_option",
-  date: "date",
-  time: "time",
-  dateRange: "date_range",
-  timeRange: "time_range",
-  textarea: "textarea",
-  textArea: "text_area",
-  person: "person",
-  checkbox: "checkbox",
-  regex: "regex",
-  integer: "integer",
-  decimal: "decimal",
-  datetime: "datetime"
-};
-var DISPLAY_KINDS = {
-  text: t("neetoFields.fields.kinds.text"),
-  number: t("neetoFields.fields.kinds.number"),
-  monetary: t("neetoFields.fields.kinds.monetary"),
-  single_option: t("neetoFields.fields.kinds.singleOption"),
-  multi_option: t("neetoFields.fields.kinds.multiOption"),
-  date: t("neetoFields.fields.kinds.date"),
-  time: t("neetoFields.fields.kinds.time"),
-  date_range: t("neetoFields.fields.kinds.dateRange"),
-  time_range: t("neetoFields.fields.kinds.timeRange"),
-  textarea: t("neetoFields.fields.kinds.textarea"),
-  text_area: t("neetoFields.fields.kinds.textArea"),
-  person: t("neetoFields.fields.kinds.person"),
-  checkbox: t("neetoFields.fields.kinds.checkbox"),
-  regex: t("neetoFields.fields.kinds.regex"),
-  integer: t("neetoFields.fields.kinds.integer"),
-  decimal: t("neetoFields.fields.kinds.decimal"),
-  datetime: t("neetoFields.fields.kinds.datetime")
-};
-var FIELD_STATES = {
-  active: "active",
-  inactive: "inactive"
-};
-var DEFAULT_FIELD_STATE_TAXONOMY = {
-  active: "Active",
-  inactive: "Inactive"
-};
-var ALL_KINDS = values(KINDS);
-
-var isDateTime = function isDateTime(kind) {
-  return ["date", "time", "date_range", "time_range", "datetime"].includes(kind);
-};
-var isDropdown$1 = function isDropdown(kind) {
-  return ["single_option", "multi_option"].includes(kind);
-};
-
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
-  try {
-    var info = gen[key](arg);
-    var value = info.value;
-  } catch (error) {
-    reject(error);
-    return;
-  }
-  if (info.done) {
-    resolve(value);
-  } else {
-    Promise.resolve(value).then(_next, _throw);
-  }
-}
-function _asyncToGenerator(fn) {
-  return function () {
-    var self = this,
-      args = arguments;
-    return new Promise(function (resolve, reject) {
-      var gen = fn.apply(self, args);
-      function _next(value) {
-        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
-      }
-      function _throw(err) {
-        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
-      }
-      _next(undefined);
-    });
-  };
-}
-
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 function getDefaultExportFromCjs (x) {
@@ -621,6 +566,66 @@ try {
 
 var _regeneratorRuntime = /*@__PURE__*/getDefaultExportFromCjs(regenerator);
 
+var KINDS = {
+  text: "text",
+  number: "number",
+  monetary: "monetary",
+  singleOption: "single_option",
+  multiOption: "multi_option",
+  date: "date",
+  time: "time",
+  dateRange: "date_range",
+  timeRange: "time_range",
+  textarea: "textarea",
+  textArea: "text_area",
+  person: "person",
+  checkbox: "checkbox",
+  regex: "regex",
+  integer: "integer",
+  decimal: "decimal",
+  datetime: "datetime"
+};
+var DISPLAY_KINDS = {
+  text: t("neetoFields.fields.kinds.text"),
+  number: t("neetoFields.fields.kinds.number"),
+  monetary: t("neetoFields.fields.kinds.monetary"),
+  single_option: t("neetoFields.fields.kinds.singleOption"),
+  multi_option: t("neetoFields.fields.kinds.multiOption"),
+  date: t("neetoFields.fields.kinds.date"),
+  time: t("neetoFields.fields.kinds.time"),
+  date_range: t("neetoFields.fields.kinds.dateRange"),
+  time_range: t("neetoFields.fields.kinds.timeRange"),
+  textarea: t("neetoFields.fields.kinds.textarea"),
+  text_area: t("neetoFields.fields.kinds.textArea"),
+  person: t("neetoFields.fields.kinds.person"),
+  checkbox: t("neetoFields.fields.kinds.checkbox"),
+  regex: t("neetoFields.fields.kinds.regex"),
+  integer: t("neetoFields.fields.kinds.integer"),
+  decimal: t("neetoFields.fields.kinds.decimal"),
+  datetime: t("neetoFields.fields.kinds.datetime")
+};
+var FIELD_STATES = {
+  active: "active",
+  inactive: "inactive"
+};
+var DEFAULT_FIELD_STATE_TAXONOMY = {
+  active: "Active",
+  inactive: "Inactive"
+};
+var ALL_KINDS = values(KINDS);
+
+var DIRECT_EDIT_INPUT_FIELDS = [KINDS.checkbox];
+
+var isDateTime = function isDateTime(kind) {
+  return ["date", "time", "date_range", "time_range", "datetime"].includes(kind);
+};
+var isDropdown$1 = function isDropdown(kind) {
+  return ["single_option", "multi_option"].includes(kind);
+};
+var isTextType = function isTextType(kind) {
+  return [KINDS.text, KINDS.decimal, KINDS.integer, KINDS.monetary, KINDS.number, KINDS.regex, KINDS.textarea].includes(kind);
+};
+
 var dayjs_min = {exports: {}};
 
 dayjs_min.exports;
@@ -773,10 +778,14 @@ var validateField = /*#__PURE__*/function () {
 var dateTimeToString = function dateTimeToString(dateTime) {
   return dateTime && dayjs(dateTime).toString() || "";
 };
+var getValueFromBool = function getValueFromBool(value) {
+  if (value === true) return t("neetoFields.common.yes");else if (value === false) return t("neetoFields.common.no");
+  return value;
+};
 
-var _excluded$5 = ["name", "id", "kind", "data", "individualSubmit", "formRef", "formRefs", "disabled", "isRequiredColumnName"];
-function ownKeys$f(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$f(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$f(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var _excluded$6 = ["name", "id", "kind", "data", "individualSubmit", "formRef", "formRefs", "disabled", "isRequiredColumnName", "isInline", "onBlur"];
+function ownKeys$g(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$g(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$g(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$g(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,
@@ -788,7 +797,11 @@ var useFormikFields = function useFormikFields(_ref) {
     disabled = _ref.disabled,
     _ref$isRequiredColumn = _ref.isRequiredColumnName,
     isRequiredColumnName = _ref$isRequiredColumn === void 0 ? "isRequired" : _ref$isRequiredColumn,
-    props = _objectWithoutProperties(_ref, _excluded$5);
+    _ref$isInline = _ref.isInline,
+    isInline = _ref$isInline === void 0 ? false : _ref$isInline,
+    _ref$onBlur = _ref.onBlur,
+    handleBlur = _ref$onBlur === void 0 ? noop$1 : _ref$onBlur,
+    props = _objectWithoutProperties(_ref, _excluded$6);
   var formikContext = useFormikContext();
   var submitForm = formikContext.submitForm,
     dirty = formikContext.dirty,
@@ -821,9 +834,41 @@ var useFormikFields = function useFormikFields(_ref) {
     meta = _useField2[1],
     helpers = _useField2[2];
   var debouncedSubmitForm = useFuncDebounce(submitForm, 100);
-  var handleSubmit = function handleSubmit(value) {
-    isNotNil(value) && helpers.setValue(value);
-    individualSubmit && debouncedSubmitForm();
+  var handleSubmit = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(value) {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            isNotNil(value) && helpers.setValue(value);
+            _context.t0 = individualSubmit;
+            if (!_context.t0) {
+              _context.next = 5;
+              break;
+            }
+            _context.next = 5;
+            return debouncedSubmitForm();
+          case 5:
+            isInline && !DIRECT_EDIT_INPUT_FIELDS.includes(kind) && handleBlur();
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleSubmit(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var getBlurHandler = function getBlurHandler(kind) {
+    if (isTextType(kind)) {
+      return dirty ? function () {
+        return handleSubmit();
+      } : handleBlur;
+    }
+    if (!DIRECT_EDIT_INPUT_FIELDS.includes(kind)) {
+      return handleBlur;
+    }
+    return undefined;
   };
   var getValueForField = function getValueForField(value) {
     if (kind === KINDS.singleOption) {
@@ -848,13 +893,15 @@ var useFormikFields = function useFormikFields(_ref) {
   return {
     dirty: dirty,
     handleSubmit: handleSubmit,
-    fieldProps: _objectSpread$f(_objectSpread$f({}, formikFieldProps), {}, {
+    fieldProps: _objectSpread$g(_objectSpread$g({}, formikFieldProps), {}, {
       error: individualSubmit ? meta.error : meta.touched && meta.error,
       value: getValueForField(formikFieldProps.value),
-      label: capitalize(name),
+      label: !isInline && capitalize(name),
       labelProps: {
         required: props[isRequiredColumnName]
       },
+      autoFocus: isInline && !DIRECT_EDIT_INPUT_FIELDS.includes(kind),
+      onBlur: isInline ? getBlurHandler(kind) : undefined,
       disabled: disabled,
       //conditional props
       options: isDropdown$1(kind) ? fieldData : undefined,
@@ -922,7 +969,9 @@ var Number$1 = function Number(props) {
     handleSubmit = _useFormikFields.handleSubmit,
     fieldProps = _useFormikFields.fieldProps,
     dirty = _useFormikFields.dirty;
-  var showSubmitButton = props.individualSubmit && dirty;
+  var individualSubmit = props.individualSubmit,
+    isInline = props.isInline;
+  var showSubmitButton = !isInline && individualSubmit && dirty;
   return /*#__PURE__*/React.createElement(Input, _extends({}, fieldProps, {
     type: "number",
     suffix: showSubmitButton && /*#__PURE__*/React.createElement(Button, {
@@ -936,14 +985,37 @@ var Number$1 = function Number(props) {
   }));
 };
 
+var _excluded$5 = ["onBlur"];
+var withOnClickOutsideWrapper = function withOnClickOutsideWrapper(Component) {
+  var Wrapper = function Wrapper(_ref) {
+    var _ref$onBlur = _ref.onBlur,
+      onBlur = _ref$onBlur === void 0 ? noop$1 : _ref$onBlur,
+      props = _objectWithoutProperties(_ref, _excluded$5);
+    var ref = useRef(null);
+    var isInline = onBlur !== noop$1;
+    useOnClickOutside(ref, onBlur, {
+      enabled: isInline
+    });
+    return isInline ? /*#__PURE__*/React.createElement("div", {
+      ref: ref
+    }, /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+      type: "range"
+    }))) : /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+      type: "range"
+    }));
+  };
+  return Wrapper;
+};
+var DateRangePicker = withOnClickOutsideWrapper(DatePicker);
+var TimeRangePicker = withOnClickOutsideWrapper(TimePicker);
 var RangePicker = function RangePicker(props) {
   var _useFormikFields = useFormikFields(props),
     handleSubmit = _useFormikFields.handleSubmit,
     fieldProps = _useFormikFields.fieldProps;
-  var handleChange = function handleChange(_ref) {
-    var _ref2 = _slicedToArray(_ref, 2),
-      begin = _ref2[0],
-      end = _ref2[1];
+  var handleChange = function handleChange(_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 2),
+      begin = _ref3[0],
+      end = _ref3[1];
     if (begin && end) {
       handleSubmit([dateTimeToString(begin), dateTimeToString(end)]);
     } else {
@@ -951,17 +1023,15 @@ var RangePicker = function RangePicker(props) {
     }
   };
   if (props.kind === KINDS.dateRange) {
-    return /*#__PURE__*/React.createElement(DatePicker, _extends({}, fieldProps, {
-      type: "range",
+    return /*#__PURE__*/React.createElement(DateRangePicker, _extends({}, fieldProps, {
       onChange: handleChange
     }));
   }
 
   //time_range
-  return /*#__PURE__*/React.createElement(TimePicker, _extends({}, fieldProps, {
+  return /*#__PURE__*/React.createElement(TimeRangePicker, _extends({}, fieldProps, {
     use12Hours: true,
     format: "h:mm A",
-    type: "range",
     onChange: handleChange
   }));
 };
@@ -986,7 +1056,9 @@ var Text = function Text(props) {
     handleSubmit = _useFormikFields.handleSubmit,
     fieldProps = _useFormikFields.fieldProps,
     dirty = _useFormikFields.dirty;
-  var showSubmitButton = props.individualSubmit && dirty;
+  var individualSubmit = props.individualSubmit,
+    isInline = props.isInline;
+  var showSubmitButton = !isInline && individualSubmit && dirty;
   return /*#__PURE__*/React.createElement(Input, _extends({}, fieldProps, {
     suffix: showSubmitButton && /*#__PURE__*/React.createElement(Button, {
       "data-cy": joinHyphenCase(fieldProps.label, "check-button"),
@@ -1006,7 +1078,9 @@ var TextArea = function TextArea(props) {
     handleSubmit = _useFormikFields.handleSubmit,
     fieldProps = _useFormikFields.fieldProps,
     dirty = _useFormikFields.dirty;
-  var showSubmitButton = props.individualSubmit && dirty;
+  var individualSubmit = props.individualSubmit,
+    isInline = props.isInline;
+  var showSubmitButton = !isInline && individualSubmit && dirty;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Textarea, fieldProps), showSubmitButton && /*#__PURE__*/React.createElement(Button, {
     className: "m-auto mt-2",
     label: t("neetoFields.labels.submit"),
@@ -1017,8 +1091,8 @@ var TextArea = function TextArea(props) {
   }));
 };
 
-function ownKeys$e(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$e(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$e(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$f(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$f(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$f(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var standardComponents = {
   text: Text,
   regex: Text,
@@ -1069,7 +1143,7 @@ var transformValues = function transformValues(_ref2) {
     delete allFieldValues[fieldPath];
   });
   var cleanedFieldValues = pipe(removeItemsWithNullData, removeNoiseFromValues)(neetoFieldValues);
-  return _objectSpread$e(_objectSpread$e({}, allFieldValues), {}, {
+  return _objectSpread$f(_objectSpread$f({}, allFieldValues), {}, {
     fieldValuesAttributes: cleanedFieldValues
   });
 };
@@ -1132,8 +1206,8 @@ var neetoFieldsUtils = {
   transformValues: transformValues
 };
 
-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 ownKeys$e(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$e(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$e(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var FieldInputs = withT(function (_ref) {
   var t = _ref.t,
     _ref$customComponents = _ref.customComponents,
@@ -1150,7 +1224,7 @@ var FieldInputs = withT(function (_ref) {
     if (Field) {
       return /*#__PURE__*/React.createElement(Field, _extends({
         key: field.id
-      }, _objectSpread$d(_objectSpread$d({}, field), {}, {
+      }, _objectSpread$e(_objectSpread$e({}, field), {}, {
         disabled: disabled,
         formRef: formRef,
         isRequiredColumnName: isRequiredColumnName
@@ -1173,8 +1247,8 @@ var FIELDS_REORDER_URL = "".concat(FIELDS_URL, "/reorder");
 var CONFIGS_URL = "".concat(NEETO_FIELDS_URL, "/configs");
 var INFO_ICON_SIZE = 16;
 
-function ownKeys$c(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$c(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$c(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$c(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; }
 var fieldUrl = function fieldUrl(fieldId) {
   return buildUrl(FIELD_URL, {
     fieldId: fieldId
@@ -1193,7 +1267,7 @@ var fetch$1 = function fetch(_ref) {
     _ref$pageProps = _ref.pageProps,
     pageProps = _ref$pageProps === void 0 ? {} : _ref$pageProps;
   return axios.get(FIELDS_URL, {
-    params: _objectSpread$c({
+    params: _objectSpread$d({
       resourceType: resourceType,
       ownerId: ownerId,
       state: state,
@@ -1258,8 +1332,8 @@ var QUERY_KEYS = {
 var DEFAULT_STALE_TIME = 3600000; // 1 hour
 
 var _excluded$4 = ["prefixQueryKeys"];
-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$c(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$c(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$c(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var FIELDS = QUERY_KEYS.FIELDS,
   DEPENDENCIES = QUERY_KEYS.DEPENDENCIES;
 var useFetchFields = function useFetchFields(_ref, options) {
@@ -1268,12 +1342,12 @@ var useFetchFields = function useFetchFields(_ref, options) {
     params = _objectWithoutProperties(_ref, _excluded$4);
   return useQuery([FIELDS].concat(_toConsumableArray(prefixQueryKeys), [params]), function () {
     return fieldsApi.fetch(params);
-  }, _objectSpread$b({
+  }, _objectSpread$c({
     staleTime: DEFAULT_STALE_TIME
   }, options));
 };
 var useCreateField = function useCreateField(options) {
-  return useMutationWithInvalidation(fieldsApi.create, _objectSpread$b({
+  return useMutationWithInvalidation(fieldsApi.create, _objectSpread$c({
     keysToInvalidate: [FIELDS]
   }, options));
 };
@@ -1299,12 +1373,12 @@ var useFetchDependencies = function useFetchDependencies(_ref3, options) {
   }, options);
 };
 var useUpdateField = function useUpdateField(options) {
-  return useMutationWithInvalidation(fieldsApi.update, _objectSpread$b({
+  return useMutationWithInvalidation(fieldsApi.update, _objectSpread$c({
     keysToInvalidate: [FIELDS]
   }, options));
 };
 var useDestroyField = function useDestroyField(options) {
-  return useMutationWithInvalidation(fieldsApi.destroy, _objectSpread$b({
+  return useMutationWithInvalidation(fieldsApi.destroy, _objectSpread$c({
     keysToInvalidate: [FIELDS]
   }, options));
 };
@@ -1314,11 +1388,11 @@ var useReorderFields = function useReorderFields() {
   });
 };
 
-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; }
+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; }
 var arrangeOptionsDisplayOrder = function arrangeOptionsDisplayOrder(options) {
   return options.map(function (option, index) {
-    return _objectSpread$a(_objectSpread$a({}, option), {}, {
+    return _objectSpread$b(_objectSpread$b({}, option), {}, {
       displayOrder: index
     });
   });
@@ -1333,7 +1407,7 @@ var buildPayload = function buildPayload(_ref) {
   var name = formValues.name.trim();
   return {
     ownerId: isEmpty(ownerId) ? undefined : ownerId,
-    field: _objectSpread$a(_objectSpread$a({}, omit(["createdAt", "id", "ownerId", "ownerType", "updatedAt"], formValues)), {}, {
+    field: _objectSpread$b(_objectSpread$b({}, omit(["createdAt", "id", "ownerId", "ownerType", "updatedAt"], formValues)), {}, {
       kind: kind,
       name: name,
       resourceType: isEmpty(resourceType) ? undefined : resourceType,
@@ -1360,7 +1434,7 @@ var getPermittedKinds = function getPermittedKinds(_ref2) {
   return permittedKinds;
 };
 var generateValidationSchema = function generateValidationSchema(additionalValidations) {
-  return yup.object().shape(_objectSpread$a(_objectSpread$a({}, BASIC_FIELD_FORM_VALIDATIONS), additionalValidations));
+  return yup.object().shape(_objectSpread$b(_objectSpread$b({}, BASIC_FIELD_FORM_VALIDATIONS), additionalValidations));
 };
 var renderFormFooter = function renderFormFooter(_ref3) {
   var onClose = _ref3.onClose,
@@ -1665,8 +1739,8 @@ var FieldForm = function FieldForm(_ref) {
 };
 
 var _excluded$3 = ["resourceType", "allowedKinds", "ownerId", "additionalValidations", "initialValues", "onClose", "onMutationSuccess"];
-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; }
+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; }
 
 /** @type {React.FC<import("types").AddProps>} */
 
@@ -1703,7 +1777,7 @@ var Add = function Add(_ref) {
     style: "h2"
   }, t("neetoFields.titles.addField"))), /*#__PURE__*/React.createElement(Form, {
     formikProps: {
-      initialValues: _objectSpread$9(_objectSpread$9({}, initialValues), INITIAL_FIELDS),
+      initialValues: _objectSpread$a(_objectSpread$a({}, initialValues), INITIAL_FIELDS),
       validationSchema: generateValidationSchema(additionalValidations),
       onSubmit: handleSubmit
     }
@@ -1722,8 +1796,8 @@ var Add = function Add(_ref) {
 };
 
 var _excluded$2 = ["fieldId", "allowedKinds", "ownerId", "additionalValidations", "initialValues", "onClose", "onMutationSuccess"];
-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$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; }
 
 /** @type {React.FC<import("types").EditProps>} */
 
@@ -1776,7 +1850,7 @@ var Edit = function Edit(_ref) {
     style: "h2"
   }, t("neetoFields.titles.editField"))), isLoading ? /*#__PURE__*/React.createElement(PageLoader, null) : /*#__PURE__*/React.createElement(Form, {
     formikProps: {
-      initialValues: _objectSpread$8(_objectSpread$8({}, initialValues), assoc("kind", FIELD_KINDS[field.kind], field)),
+      initialValues: _objectSpread$9(_objectSpread$9({}, initialValues), assoc("kind", FIELD_KINDS[field.kind], field)),
       validationSchema: generateValidationSchema(additionalValidations),
       enableReinitialize: true,
       onSubmit: handleSubmit
@@ -1801,8 +1875,8 @@ var Edit = function Edit(_ref) {
 };
 
 var _excluded$1 = ["isOpen", "selectedField"];
-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$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").FieldsPaneProps>} */
 
@@ -1816,11 +1890,11 @@ var FieldsPane = function FieldsPane(_ref) {
     isOpen: isOpen,
     initialFocusRef: initialFocusField,
     onClose: props.onClose
-  }, isEmpty(selectedField) ? /*#__PURE__*/React.createElement(Add, _objectSpread$7(_objectSpread$7({}, props), {}, {
+  }, isEmpty(selectedField) ? /*#__PURE__*/React.createElement(Add, _objectSpread$8(_objectSpread$8({}, props), {}, {
     initialFocusField: initialFocusField
   })) : /*#__PURE__*/React.createElement(Edit, _extends({
     fieldId: selectedField === null || selectedField === void 0 ? void 0 : selectedField.id
-  }, _objectSpread$7(_objectSpread$7({}, props), {}, {
+  }, _objectSpread$8(_objectSpread$8({}, props), {}, {
     initialFocusField: initialFocusField
   }))));
 };
@@ -2519,16 +2593,16 @@ var configsApi = {
   fetchConfigs: fetchConfigs
 };
 
-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$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; }
 var useFetchConfigs = function useFetchConfigs(options) {
-  return useQuery([QUERY_KEYS.CONFIGS], configsApi.fetchConfigs, _objectSpread$6({
+  return useQuery([QUERY_KEYS.CONFIGS], configsApi.fetchConfigs, _objectSpread$7({
     staleTime: DEFAULT_STALE_TIME
   }, options));
 };
 
-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$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 useFieldsDashboard = function useFieldsDashboard(_ref) {
   var buildColumnData = _ref.buildColumnData,
     isOwnerBased = _ref.isOwnerBased,
@@ -2647,7 +2721,7 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
     defaultColumns: defaultColumns
   });
   var handleBlockClick = function handleBlockClick(params) {
-    return handleMetaClick(history, buildUrl("", _objectSpread$5({
+    return handleMetaClick(history, buildUrl("", _objectSpread$6({
       resource: resource,
       state: state
     }, params)));
@@ -2792,8 +2866,8 @@ var DeleteAlert = function DeleteAlert(_ref) {
   });
 };
 
-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$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 FieldsTable = function FieldsTable(_ref) {
   var totalCount = _ref.totalCount,
     isFetched = _ref.isFetched,
@@ -2847,7 +2921,7 @@ var FieldsTable = function FieldsTable(_ref) {
     currentPageNumber: page,
     defaultPageSize: pageSize,
     handlePageChange: function handlePageChange(page) {
-      return setPageProps(_objectSpread$4(_objectSpread$4({}, pageProps), {}, {
+      return setPageProps(_objectSpread$5(_objectSpread$5({}, pageProps), {}, {
         page: page
       }));
     },
@@ -7157,8 +7231,8 @@ function normalizeLocalDisabled(localDisabled, globalDisabled) {
 
 [KeyboardCode.Down, KeyboardCode.Right, KeyboardCode.Up, KeyboardCode.Left];
 
-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$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 FieldBlock = function FieldBlock(_ref) {
   var field = _ref.field,
     index = _ref.index,
@@ -7181,7 +7255,7 @@ var FieldBlock = function FieldBlock(_ref) {
   };
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: setNodeRef
-  }, _objectSpread$3(_objectSpread$3({
+  }, _objectSpread$4(_objectSpread$4({
     style: style
   }, attributes), listeners), {
     className: "neeto-ui-text-gray-800 mb-3 flex items-center space-x-4 font-medium",
@@ -7436,6 +7510,14 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
   }));
 };
 
+var isFieldValueEmpty = function isFieldValueEmpty(fieldKind, fieldValueData) {
+  if (fieldKind === KINDS.multiOption) return isEmpty(fieldValueData.values);
+  if ([KINDS.timeRange, KINDS.dateRange].includes(fieldKind)) {
+    return isEmpty(fieldValueData.value[0]) && isEmpty(fieldValueData.value[1]);
+  }
+  return isEmpty(fieldValueData.value);
+};
+
 var fieldValueUrl = function fieldValueUrl(fieldValueId) {
   return buildUrl(FIELD_VALUE_URL, {
     fieldValueId: fieldValueId
@@ -7466,24 +7548,60 @@ var fieldValuesApi = {
   update: update
 };
 
-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 useCreateFieldValue = function useCreateFieldValue(options) {
-  return useMutationWithInvalidation(fieldValuesApi.create, _objectSpread$2({
+  return useMutationWithInvalidation(fieldValuesApi.create, _objectSpread$3({
     keysToInvalidate: [[QUERY_KEYS.FIELD_VALUES]]
   }, options));
 };
 var useUpdateFieldValue = function useUpdateFieldValue(options) {
-  return useMutationWithInvalidation(fieldValuesApi.update, _objectSpread$2({
+  return useMutationWithInvalidation(fieldValuesApi.update, _objectSpread$3({
     keysToInvalidate: [[QUERY_KEYS.FIELD_VALUES]]
   }, options));
 };
 var useDeleteFieldValue = function useDeleteFieldValue(options) {
-  return useMutationWithInvalidation(fieldValuesApi.destroy, _objectSpread$2({
+  return useMutationWithInvalidation(fieldValuesApi.destroy, _objectSpread$3({
     keysToInvalidate: [[QUERY_KEYS.FIELD_VALUES]]
   }, options));
 };
 
+var useFieldValues = function useFieldValues(_ref) {
+  var resourceId = _ref.resourceId,
+    resourceType = _ref.resourceType,
+    ownerId = _ref.ownerId,
+    queryOptions = _ref.queryOptions;
+  var _useCreateFieldValue = useCreateFieldValue(queryOptions),
+    createFieldValue = _useCreateFieldValue.mutate;
+  var _useUpdateFieldValue = useUpdateFieldValue(queryOptions),
+    updateFieldValue = _useUpdateFieldValue.mutate;
+  var _useDeleteFieldValue = useDeleteFieldValue(queryOptions),
+    deleteFieldValue = _useDeleteFieldValue.mutate;
+  var handleSubmit = function handleSubmit(field, values$1) {
+    var fieldValue = head(values(values$1));
+    var payload = {
+      fieldValue: fieldValue,
+      resource: resourceType,
+      resourceId: resourceId,
+      ownerId: isEmpty(ownerId) ? undefined : ownerId
+    };
+    if (isFieldValueEmpty(field.kind, fieldValue.data)) {
+      deleteFieldValue({
+        id: fieldValue.id,
+        payload: payload
+      });
+    } else {
+      fieldValue.id ? updateFieldValue({
+        id: fieldValue.id,
+        payload: payload
+      }) : createFieldValue(payload);
+    }
+  };
+  return {
+    handleSubmit: handleSubmit
+  };
+};
+
 const useNavPrompt = ({
   shouldBlock
 }) => {
@@ -7541,8 +7659,8 @@ var DEAFULT_BLOCK_NAVIGATION_ALERT_PROPS = {
   cancelButtonLabel: t("neetoFields.messages.blockNavigationAlert.cancelButtonLabel")
 };
 
-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 BlockNavigation = function BlockNavigation(_ref) {
   var blockNavigation = _ref.blockNavigation,
     blockNavigationAlertProps = _ref.blockNavigationAlertProps;
@@ -7554,7 +7672,7 @@ var BlockNavigation = function BlockNavigation(_ref) {
     blocked = _useNavPrompt.blocked,
     hidePrompt = _useNavPrompt.hidePrompt,
     navigate = _useNavPrompt.navigate;
-  var alertProps = _objectSpread$1(_objectSpread$1({}, DEAFULT_BLOCK_NAVIGATION_ALERT_PROPS), blockNavigationAlertProps);
+  var alertProps = _objectSpread$2(_objectSpread$2({}, DEAFULT_BLOCK_NAVIGATION_ALERT_PROPS), blockNavigationAlertProps);
   return /*#__PURE__*/React.createElement(Alert, {
     cancelButtonLabel: alertProps["cancelButtonLabel"],
     isOpen: blocked,
@@ -7588,16 +7706,8 @@ var FieldValueInputWrapper = function FieldValueInputWrapper(_ref) {
   }, children);
 };
 
-var isFieldValueEmpty = function isFieldValueEmpty(fieldKind, fieldValueData) {
-  if (fieldKind === KINDS.multiOption) return isEmpty(fieldValueData.values);
-  if ([KINDS.timeRange, KINDS.dateRange].includes(fieldKind)) {
-    return isEmpty(fieldValueData.value[0]) && isEmpty(fieldValueData.value[1]);
-  }
-  return isEmpty(fieldValueData.value);
-};
-
-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 FieldValuesContainer = function FieldValuesContainer(_ref) {
   var _ref$resourceType = _ref.resourceType,
     resourceType = _ref$resourceType === void 0 ? "" : _ref$resourceType,
@@ -7640,32 +7750,13 @@ var FieldValuesContainer = function FieldValuesContainer(_ref) {
     _useFetchFields$data3 = _useFetchFields$data2.fields,
     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 _useDeleteFieldValue = useDeleteFieldValue(queryOptions),
-    deleteFieldValue = _useDeleteFieldValue.mutate;
-  var handleSubmit = function handleSubmit(field, values$1) {
-    var fieldValue = head(values(values$1));
-    var payload = {
-      fieldValue: fieldValue,
-      resource: resourceType,
+  var _useFieldValues = useFieldValues({
       resourceId: resourceId,
-      ownerId: isEmpty(ownerId) ? undefined : ownerId
-    };
-    if (isFieldValueEmpty(field.kind, fieldValue.data)) {
-      deleteFieldValue({
-        id: fieldValue.id,
-        payload: payload
-      });
-    } else {
-      fieldValue.id ? updateFieldValue({
-        id: fieldValue.id,
-        payload: payload
-      }) : createFieldValue(payload);
-    }
-  };
+      resourceType: resourceType,
+      ownerId: ownerId,
+      queryOptions: queryOptions
+    }),
+    handleSubmit = _useFieldValues.handleSubmit;
   var fields = propFields || fetchedFields;
   return /*#__PURE__*/React.createElement("div", {
     className: classnames("space-y-3 py-3", {
@@ -7691,7 +7782,7 @@ var FieldValuesContainer = function FieldValuesContainer(_ref) {
         }
       }, /*#__PURE__*/React.createElement("div", {
         className: "w-full"
-      }, /*#__PURE__*/React.createElement(Field, _extends({}, _objectSpread(_objectSpread({}, field), {}, {
+      }, /*#__PURE__*/React.createElement(Field, _extends({}, _objectSpread$1(_objectSpread$1({}, field), {}, {
         disabled: disabled,
         formRefs: formRefs,
         isRequiredColumnName: isRequiredColumnName
@@ -7709,5 +7800,96 @@ var FieldValuesContainer = function FieldValuesContainer(_ref) {
   }));
 };
 
-export { FieldInputs, FieldValuesContainer, FieldsDashboard, FieldsPane, neetoFieldsUtils, useCreateField, useDestroyField, useFetchFields, useShowField, useUpdateField };
+var renderDataAsText = function renderDataAsText(field, fieldValues) {
+  var _findBy, _findBy$data, _findBy2, _findBy3, _findBy3$data;
+  var fieldValueData = (_findBy = findBy({
+    fieldId: field.id
+  }, fieldValues)) === null || _findBy === void 0 ? void 0 : (_findBy$data = _findBy.data) === null || _findBy$data === void 0 ? void 0 : _findBy$data.value;
+  switch (field.kind) {
+    case KINDS.date:
+      return fieldValueData && dateFormat.date(fieldValueData);
+    case KINDS.time:
+      return fieldValueData && dateFormat.time(fieldValueData);
+    case KINDS.datetime:
+      return fieldValueData && dateFormat.dateTime(fieldValueData);
+    case KINDS.dateRange:
+      return fieldValueData && isNotEmpty(fieldValueData) && "".concat(dateFormat.date(fieldValueData[0]), " - ").concat(dateFormat.date(fieldValueData[1]));
+    case KINDS.timeRange:
+      return fieldValueData && "".concat(dateFormat.time(fieldValueData[0]), " - ").concat(dateFormat.time(fieldValueData[1]));
+    case KINDS.singleOption:
+      return (_findBy2 = findBy({
+        id: fieldValueData
+      }, field.data)) === null || _findBy2 === void 0 ? void 0 : _findBy2.label;
+    case KINDS.multiOption:
+      fieldValueData = (_findBy3 = findBy({
+        fieldId: field.id
+      }, fieldValues)) === null || _findBy3 === void 0 ? void 0 : (_findBy3$data = _findBy3.data) === null || _findBy3$data === void 0 ? void 0 : _findBy3$data.values;
+      return fieldValueData && fieldValueData.map(function (optionId) {
+        var _findBy4;
+        return (_findBy4 = findBy({
+          id: optionId
+        }, field.data)) === null || _findBy4 === void 0 ? void 0 : _findBy4.label;
+      }).join(", ");
+    case KINDS.checkbox:
+      return getValueFromBool(fieldValueData);
+    default:
+      return fieldValueData;
+  }
+};
+
+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 InlineFieldValueInput = function InlineFieldValueInput(_ref) {
+  var field = _ref.field,
+    fieldValues = _ref.fieldValues,
+    resourceType = _ref.resourceType,
+    resourceId = _ref.resourceId,
+    _ref$ownerId = _ref.ownerId,
+    ownerId = _ref$ownerId === void 0 ? "" : _ref$ownerId,
+    _ref$onMutationSucces = _ref.onMutationSuccess,
+    onMutationSuccess = _ref$onMutationSucces === void 0 ? noop$1 : _ref$onMutationSucces;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    editMode = _useState2[0],
+    setEditMode = _useState2[1];
+  var queryOptions = {
+    onSuccess: function onSuccess() {
+      setEditMode(false);
+      onMutationSuccess();
+    }
+  };
+  var _useFieldValues = useFieldValues({
+      resourceId: resourceId,
+      resourceType: resourceType,
+      ownerId: ownerId,
+      queryOptions: queryOptions
+    }),
+    handleSubmit = _useFieldValues.handleSubmit;
+  var Field = getFieldInput({
+    field: field
+  });
+  var isEditable = !field.isSystem && (editMode || DIRECT_EDIT_INPUT_FIELDS.includes(field.kind));
+  return isEditable ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FieldValueInputWrapper, {
+    field: field,
+    fieldValues: fieldValues,
+    onSubmit: function onSubmit(values) {
+      return handleSubmit(field, values);
+    }
+  }, /*#__PURE__*/React.createElement(Field, _extends({}, _objectSpread({}, field), {
+    individualSubmit: true,
+    isInline: true,
+    onBlur: function onBlur() {
+      return setEditMode(false);
+    }
+  })))) : /*#__PURE__*/React.createElement("div", {
+    className: classnames("text-center", {
+      "cursor-pointer": !field.isSystem
+    }),
+    onClick: function onClick() {
+      return setEditMode(true);
+    }
+  }, /*#__PURE__*/React.createElement(Typography, null, renderDataAsText(field, fieldValues) || "-"));
+};
+
+export { FieldInputs, FieldValuesContainer, FieldsDashboard, FieldsPane, InlineFieldValueInput, neetoFieldsUtils, useCreateField, useDestroyField, useFetchFields, useShowField, useUpdateField };
 //# sourceMappingURL=index.js.map