@bigbinary/neeto-fields-frontend 1.1.13 → 1.1.14

package/dist/index.js

@@ -1,13 +1,13 @@
 import React, { useContext, useState, useRef, useEffect, useMemo, useLayoutEffect, useCallback, createContext, memo, useReducer } from 'react';
 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 { toLabelAndValue, isNotEmpty, capitalize as capitalize$1, filterBy, findBy, slugify, humanize, existsBy, truncate, countBy, noop as noop$2 } from '@bigbinary/neeto-commons-frontend/pure';
+import { toLabelAndValue, isNotEmpty, capitalize as capitalize$1, filterBy, findBy, slugify, humanize, truncate, countBy, noop as noop$2 } from '@bigbinary/neeto-commons-frontend/pure';
 import { values, map, isNotNil, isNil, isEmpty, prop, pluck, clone as clone$1, pipe, mergeAll, omit, pick, assoc, any, head } from 'ramda';
 import { useFormikContext, useField, FieldArray } from 'formik';
 import { useFuncDebounce, useDebounce, handleMetaClick } from '@bigbinary/neeto-commons-frontend/react-utils';
 import * as yup from 'yup';
 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 { PLURAL } from '@bigbinary/neeto-commons-frontend/constants';
+import { DEFAULT_PAGE_INDEX, PLURAL } from '@bigbinary/neeto-commons-frontend/constants';
 import Container from '@bigbinary/neeto-molecules/Container';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
 import { useQuery, useQueryClient, useMutation } from 'react-query';
@@ -3715,8 +3715,8 @@ function transformOptions(options) {
   return options;
 }
 
-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$h(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$h(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$h(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$h(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() {}
@@ -3776,9 +3776,9 @@ var I18n = function (_EventEmitter) {
         }
       }
       var defOpts = get();
-      this.options = _objectSpread$e(_objectSpread$e(_objectSpread$e({}, defOpts), this.options), transformOptions(options));
+      this.options = _objectSpread$h(_objectSpread$h(_objectSpread$h({}, defOpts), this.options), transformOptions(options));
       if (this.options.compatibilityAPI !== 'v1') {
-        this.options.interpolation = _objectSpread$e(_objectSpread$e({}, defOpts.interpolation), this.options.interpolation);
+        this.options.interpolation = _objectSpread$h(_objectSpread$h({}, defOpts.interpolation), this.options.interpolation);
       }
       if (options.keySeparator !== undefined) {
         this.options.userDefinedKeySeparator = options.keySeparator;
@@ -4056,7 +4056,7 @@ var I18n = function (_EventEmitter) {
           }
           options = _this5.options.overloadTranslationOptionHandler([key, opts].concat(rest));
         } else {
-          options = _objectSpread$e({}, opts);
+          options = _objectSpread$h({}, opts);
         }
         options.lng = options.lng || fixedT.lng;
         options.lngs = options.lngs || fixedT.lngs;
@@ -4183,7 +4183,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$e(_objectSpread$e(_objectSpread$e({}, this.options), options), {
+      var mergedOptions = _objectSpread$h(_objectSpread$h(_objectSpread$h({}, this.options), options), {
         isClone: true
       });
       var clone = new I18n(mergedOptions);
@@ -4194,7 +4194,7 @@ var I18n = function (_EventEmitter) {
       membersToCopy.forEach(function (m) {
         clone[m] = _this8[m];
       });
-      clone.services = _objectSpread$e({}, this.services);
+      clone.services = _objectSpread$h({}, this.services);
       clone.services.utils = {
         hasLoadedNamespace: clone.hasLoadedNamespace.bind(clone)
       };
@@ -4703,9 +4703,9 @@ function cape(m) {
   return unes[m];
 }
 
-function ownKeys$d(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$g(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$d(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$d(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$g(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$g(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var defaultOptions$1 = {
   bindI18n: 'languageChanged',
   bindI18nStore: '',
@@ -4719,7 +4719,7 @@ var i18nInstance;
 var I18nContext = React.createContext();
 function setDefaults() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  defaultOptions$1 = _objectSpread$d(_objectSpread$d({}, defaultOptions$1), options);
+  defaultOptions$1 = _objectSpread$g(_objectSpread$g({}, defaultOptions$1), options);
 }
 function getDefaults() {
   return defaultOptions$1;
@@ -4843,12 +4843,12 @@ function hasLoadedNamespace(ns, i18n) {
   });
 }
 
-var _excluded$5 = ["format"],
+var _excluded$6 = ["format"],
     _excluded2 = ["children", "count", "parent", "i18nKey", "context", "tOptions", "values", "defaults", "components", "ns", "i18n", "t", "shouldUnescape"];
 
-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 ownKeys$f(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$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; }
+function _objectSpread$f(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$f(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 function hasChildren(node, checkLength) {
   if (!node) return false;
@@ -4874,7 +4874,7 @@ function getAsArray(data) {
 }
 
 function mergeProps(source, target) {
-  var newTarget = _objectSpread$c({}, target);
+  var newTarget = _objectSpread$f({}, target);
 
   newTarget.props = Object.assign(source.props, target.props);
   return newTarget;
@@ -4909,7 +4909,7 @@ function nodesToString(children, i18nOptions) {
       warn("Trans: the passed in value is invalid - seems you passed in a null child.");
     } else if (_typeof$1(child) === 'object') {
       var format = child.format,
-          clone = _objectWithoutProperties(child, _excluded$5);
+          clone = _objectWithoutProperties(child, _excluded$6);
 
       var keys = Object.keys(clone);
 
@@ -4944,7 +4944,7 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
   getData(children);
   var ast = c.parse("<0>".concat(targetString, "</0>"));
 
-  var opts = _objectSpread$c(_objectSpread$c({}, data), combinedTOpts);
+  var opts = _objectSpread$f(_objectSpread$f({}, data), combinedTOpts);
 
   function renderInner(child, node, rootReactNode) {
     var childs = getChildren(child);
@@ -4954,7 +4954,7 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
 
   function pushTranslatedJSX(child, inner, mem, i, isVoid) {
     if (child.dummy) child.children = inner;
-    mem.push(React.cloneElement(child, _objectSpread$c(_objectSpread$c({}, child.props), {}, {
+    mem.push(React.cloneElement(child, _objectSpread$f(_objectSpread$f({}, child.props), {}, {
       key: i
     }), isVoid ? undefined : inner));
   }
@@ -4986,7 +4986,7 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
           } else if (isEmptyTransWithHTML) {
           var _inner = mapAST(reactNodes, node.children, rootReactNode);
 
-          mem.push(React.cloneElement(child, _objectSpread$c(_objectSpread$c({}, child.props), {}, {
+          mem.push(React.cloneElement(child, _objectSpread$f(_objectSpread$f({}, child.props), {}, {
             key: i
           }), _inner));
         } else if (Number.isNaN(parseFloat(node.name))) {
@@ -5017,11 +5017,11 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
           var content = node.children[0] ? translationContent : null;
           if (content) mem.push(content);
         } else if (node.children.length === 1 && translationContent) {
-          mem.push(React.cloneElement(child, _objectSpread$c(_objectSpread$c({}, child.props), {}, {
+          mem.push(React.cloneElement(child, _objectSpread$f(_objectSpread$f({}, child.props), {}, {
             key: i
           }), translationContent));
         } else {
-          mem.push(React.cloneElement(child, _objectSpread$c(_objectSpread$c({}, child.props), {}, {
+          mem.push(React.cloneElement(child, _objectSpread$f(_objectSpread$f({}, child.props), {}, {
             key: i
           })));
         }
@@ -5084,7 +5084,7 @@ function Trans(_ref) {
 
   if (context) tOptions.context = context;
 
-  var reactI18nextOptions = _objectSpread$c(_objectSpread$c({}, getDefaults()), i18n.options && i18n.options.react);
+  var reactI18nextOptions = _objectSpread$f(_objectSpread$f({}, getDefaults()), i18n.options && i18n.options.react);
 
   var namespaces = ns || t.ns || defaultNSFromContext || i18n.options && i18n.options.defaultNS;
   namespaces = typeof namespaces === 'string' ? [namespaces] : namespaces || ['translation'];
@@ -5092,13 +5092,13 @@ function Trans(_ref) {
   var hashTransKey = reactI18nextOptions.hashTransKey;
   var key = i18nKey || (hashTransKey ? hashTransKey(defaultValue) : defaultValue);
   var interpolationOverride = values ? tOptions.interpolation : {
-    interpolation: _objectSpread$c(_objectSpread$c({}, tOptions.interpolation), {}, {
+    interpolation: _objectSpread$f(_objectSpread$f({}, tOptions.interpolation), {}, {
       prefix: '#$?',
       suffix: '?$#'
     })
   };
 
-  var combinedTOpts = _objectSpread$c(_objectSpread$c(_objectSpread$c(_objectSpread$c({}, tOptions), {}, {
+  var combinedTOpts = _objectSpread$f(_objectSpread$f(_objectSpread$f(_objectSpread$f({}, tOptions), {}, {
     count: count
   }, values), interpolationOverride), {}, {
     defaultValue: defaultValue,
@@ -5143,9 +5143,9 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
-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 ownKeys$e(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$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 _objectSpread$e(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$e(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$e(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;
@@ -5173,7 +5173,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$b(_objectSpread$b(_objectSpread$b({}, getDefaults()), i18n.options.react), props);
+  var i18nOptions = _objectSpread$e(_objectSpread$e(_objectSpread$e({}, getDefaults()), i18n.options.react), props);
 
   var useSuspense = i18nOptions.useSuspense,
       keyPrefix = i18nOptions.keyPrefix;
@@ -5317,7 +5317,13 @@ var messages = {
 	titleForResource: "{{title}} for {{resource}}",
 	stateTitleForResource: "{{state}} {{title}} for {{resource}}",
 	invalidKind: "Invalid kind",
-	reorderFields: "Fields are displayed from top to bottom."
+	reorderFields: "Fields are displayed from top to bottom.",
+	blockNavigationAlert: {
+		title: "You have unsaved changes",
+		message: "All of your unsaved changes will be lost. This can't be undone.",
+		submitButtonLabel: "Discard changes",
+		cancelButtonLabel: "Cancel"
+	}
 };
 var validations = {
 	regexConditionIsRequired: "Regex condition is required",
@@ -5408,6 +5414,7 @@ function _toConsumableArray(arr) {
   return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
 }
 
+var DEFAULT_PAGE_SIZE = 12;
 var KINDS = {
   text: "text",
   number: "number",
@@ -6010,9 +6017,9 @@ var dateTimeToString = function dateTimeToString(dateTime) {
   return dateTime && dayjs(dateTime).toString() || "";
 };
 
-var _excluded$4 = ["name", "id", "kind", "data", "individualSubmit", "formRef", "formRefs", "disabled", "isRequiredColumnName"];
-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 _excluded$5 = ["name", "id", "kind", "data", "individualSubmit", "formRef", "formRefs", "disabled", "isRequiredColumnName"];
+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 useFormikFields = function useFormikFields(_ref) {
   var name = _ref.name,
     fieldId = _ref.id,
@@ -6024,7 +6031,7 @@ var useFormikFields = function useFormikFields(_ref) {
     disabled = _ref.disabled,
     _ref$isRequiredColumn = _ref.isRequiredColumnName,
     isRequiredColumnName = _ref$isRequiredColumn === void 0 ? "isRequired" : _ref$isRequiredColumn,
-    props = _objectWithoutProperties(_ref, _excluded$4);
+    props = _objectWithoutProperties(_ref, _excluded$5);
   var formikContext = useFormikContext();
   var submitForm = formikContext.submitForm,
     dirty = formikContext.dirty,
@@ -6074,7 +6081,7 @@ var useFormikFields = function useFormikFields(_ref) {
   return {
     dirty: dirty,
     handleSubmit: handleSubmit,
-    fieldProps: _objectSpread$a(_objectSpread$a({}, formikFieldProps), {}, {
+    fieldProps: _objectSpread$d(_objectSpread$d({}, formikFieldProps), {}, {
       error: individualSubmit ? meta.error : meta.touched && meta.error,
       value: getValueForField(formikFieldProps.value),
       label: capitalize$1(name),
@@ -6241,8 +6248,8 @@ var TextArea = function TextArea(props) {
   }));
 };
 
-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$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 standardComponents = {
   text: Text,
   regex: Text,
@@ -6293,7 +6300,7 @@ var transformValues = function transformValues(_ref2) {
     delete allFieldValues[fieldPath];
   });
   var cleanedFieldValues = pipe(removeItemsWithNullData, removeNoiseFromValues)(neetoFieldValues);
-  return _objectSpread$9(_objectSpread$9({}, allFieldValues), {}, {
+  return _objectSpread$c(_objectSpread$c({}, allFieldValues), {}, {
     fieldValuesAttributes: cleanedFieldValues
   });
 };
@@ -6356,8 +6363,8 @@ var neetoFieldsUtils = {
   transformValues: transformValues
 };
 
-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$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 FieldInputs = function FieldInputs(_ref) {
   var _ref$customComponents = _ref.customComponents,
     customComponents = _ref$customComponents === void 0 ? {} : _ref$customComponents,
@@ -6375,7 +6382,7 @@ var FieldInputs = function FieldInputs(_ref) {
     if (Field) {
       return /*#__PURE__*/React.createElement(Field, _extends({
         key: field.id
-      }, _objectSpread$8(_objectSpread$8({}, field), {}, {
+      }, _objectSpread$b(_objectSpread$b({}, field), {}, {
         formRef: formRef,
         disabled: disabled,
         isRequiredColumnName: isRequiredColumnName
@@ -6398,6 +6405,8 @@ var FIELDS_REORDER_URL = "".concat(FIELDS_URL, "/reorder");
 var CONFIGS_URL = "".concat(NEETO_FIELDS_URL, "/configs");
 var INFO_ICON_SIZE = 16;
 
+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 fieldUrl = function fieldUrl(fieldId) {
   return buildUrl(FIELD_URL, {
     fieldId: fieldId
@@ -6412,14 +6421,15 @@ var fetch$1 = function fetch(_ref) {
   var resourceType = _ref.resourceType,
     ownerId = _ref.ownerId,
     state = _ref.state,
-    searchTerm = _ref.searchTerm;
+    searchTerm = _ref.searchTerm,
+    pageProps = _ref.pageProps;
   return axios.get(FIELDS_URL, {
-    params: {
+    params: _objectSpread$a({
       resourceType: resourceType,
       ownerId: ownerId,
       state: state,
       searchTerm: searchTerm
-    }
+    }, pageProps)
   });
 };
 var create$1 = function create(payload) {
@@ -6478,31 +6488,28 @@ var QUERY_KEYS = {
 };
 var DEFAULT_STALE_TIME = 3600000; // 1 hour
 
-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 _excluded$4 = ["prefixQueryKeys", "pageProps"];
+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 FIELDS = QUERY_KEYS.FIELDS,
   DEPENDENCIES = QUERY_KEYS.DEPENDENCIES;
 var useFetchFields = function useFetchFields(_ref, options) {
-  var resourceType = _ref.resourceType,
-    ownerId = _ref.ownerId,
-    state = _ref.state,
-    _ref$prefixQueryKeys = _ref.prefixQueryKeys,
+  var _ref$prefixQueryKeys = _ref.prefixQueryKeys,
     prefixQueryKeys = _ref$prefixQueryKeys === void 0 ? [] : _ref$prefixQueryKeys,
-    searchTerm = _ref.searchTerm;
-  return useQuery([FIELDS].concat(_toConsumableArray(prefixQueryKeys), [resourceType, ownerId, state, searchTerm]), function () {
-    return fieldsApi.fetch({
-      resourceType: resourceType,
-      ownerId: ownerId,
-      state: state,
-      searchTerm: searchTerm
-    });
-  }, _objectSpread$7({
+    _ref$pageProps = _ref.pageProps,
+    pageProps = _ref$pageProps === void 0 ? {} : _ref$pageProps,
+    params = _objectWithoutProperties(_ref, _excluded$4);
+  return useQuery([FIELDS].concat(_toConsumableArray(prefixQueryKeys), [pageProps, params]), function () {
+    return fieldsApi.fetch(_objectSpread$9({
+      pageProps: pageProps
+    }, params));
+  }, _objectSpread$9({
     staleTime: DEFAULT_STALE_TIME
   }, options));
 };
 var useCreateField = function useCreateField(options) {
   var queryClient = useQueryClient();
-  return useMutation(fieldsApi.create, _objectSpread$7(_objectSpread$7({}, options), {}, {
+  return useMutation(fieldsApi.create, _objectSpread$9(_objectSpread$9({}, options), {}, {
     onSuccess: function onSuccess() {
       var _options$onSuccess;
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -6536,7 +6543,7 @@ var useFetchDependencies = function useFetchDependencies(_ref3, options) {
 };
 var useUpdateField = function useUpdateField(options) {
   var queryClient = useQueryClient();
-  return useMutation(fieldsApi.update, _objectSpread$7(_objectSpread$7({}, options), {}, {
+  return useMutation(fieldsApi.update, _objectSpread$9(_objectSpread$9({}, options), {}, {
     onSuccess: function onSuccess() {
       var _options$onSuccess2;
       for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
@@ -6549,7 +6556,7 @@ var useUpdateField = function useUpdateField(options) {
 };
 var useDestroyField = function useDestroyField(options) {
   var queryClient = useQueryClient();
-  return useMutation(fieldsApi.destroy, _objectSpread$7(_objectSpread$7({}, options), {}, {
+  return useMutation(fieldsApi.destroy, _objectSpread$9(_objectSpread$9({}, options), {}, {
     onSuccess: function onSuccess() {
       var _options$onSuccess3;
       for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
@@ -6569,11 +6576,11 @@ var useReorderFields = function useReorderFields() {
   });
 };
 
-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; }
 var arrangeOptionsDisplayOrder = function arrangeOptionsDisplayOrder(options) {
   return options.map(function (option, index) {
-    return _objectSpread$6(_objectSpread$6({}, option), {}, {
+    return _objectSpread$8(_objectSpread$8({}, option), {}, {
       displayOrder: index
     });
   });
@@ -6588,7 +6595,7 @@ var buildPayload = function buildPayload(_ref) {
   var name = formValues.name.trim();
   return {
     ownerId: isEmpty(ownerId) ? undefined : ownerId,
-    field: _objectSpread$6(_objectSpread$6({}, omit(["createdAt", "id", "ownerId", "ownerType", "updatedAt"], formValues)), {}, {
+    field: _objectSpread$8(_objectSpread$8({}, omit(["createdAt", "id", "ownerId", "ownerType", "updatedAt"], formValues)), {}, {
       kind: kind,
       name: name,
       resourceType: isEmpty(resourceType) ? undefined : resourceType,
@@ -6615,7 +6622,7 @@ var getPermittedKinds = function getPermittedKinds(_ref2) {
   return permittedKinds;
 };
 var generateValidationSchema = function generateValidationSchema(additionalValidations) {
-  return yup.object().shape(_objectSpread$6(_objectSpread$6({}, BASIC_FIELD_FORM_VALIDATIONS), additionalValidations));
+  return yup.object().shape(_objectSpread$8(_objectSpread$8({}, BASIC_FIELD_FORM_VALIDATIONS), additionalValidations));
 };
 var renderFormFooter = function renderFormFooter(_ref3) {
   var onClose = _ref3.onClose,
@@ -6915,8 +6922,8 @@ var FieldForm = function FieldForm(_ref) {
 };
 
 var _excluded$3 = ["resourceType", "allowedKinds", "ownerId", "additionalValidations", "initialValues", "onClose", "onMutationSuccess"];
-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").AddProps>} */
 
@@ -6953,7 +6960,7 @@ var Add = function Add(_ref) {
     style: "h2"
   }, t("titles.addField"))), /*#__PURE__*/React.createElement(Form, {
     formikProps: {
-      initialValues: _objectSpread$5(_objectSpread$5({}, initialValues), INITIAL_FIELDS),
+      initialValues: _objectSpread$7(_objectSpread$7({}, initialValues), INITIAL_FIELDS),
       validationSchema: generateValidationSchema(additionalValidations),
       onSubmit: handleSubmit
     }
@@ -6972,8 +6979,8 @@ var Add = function Add(_ref) {
 };
 
 var _excluded$2 = ["fieldId", "allowedKinds", "ownerId", "additionalValidations", "initialValues", "onClose", "onMutationSuccess"];
-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; }
 
 /** @type {React.FC<import("types").EditProps>} */
 
@@ -7026,7 +7033,7 @@ var Edit = function Edit(_ref) {
     style: "h2"
   }, t("titles.editField"))), isLoading ? /*#__PURE__*/React.createElement(PageLoader, null) : /*#__PURE__*/React.createElement(Form, {
     formikProps: {
-      initialValues: _objectSpread$4(_objectSpread$4({}, initialValues), assoc("kind", FIELD_KINDS[field.kind], field)),
+      initialValues: _objectSpread$6(_objectSpread$6({}, initialValues), assoc("kind", FIELD_KINDS[field.kind], field)),
       validationSchema: generateValidationSchema(additionalValidations),
       enableReinitialize: true,
       onSubmit: handleSubmit
@@ -7761,16 +7768,16 @@ var configsApi = {
   fetchConfigs: fetchConfigs
 };
 
-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 useFetchConfigs = function useFetchConfigs(options) {
-  return useQuery([QUERY_KEYS.CONFIGS], configsApi.fetchConfigs, _objectSpread$3({
+  return useQuery([QUERY_KEYS.CONFIGS], configsApi.fetchConfigs, _objectSpread$5({
     staleTime: DEFAULT_STALE_TIME
   }, options));
 };
 
-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$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 useFieldsDashboard = function useFieldsDashboard(_ref) {
   var buildColumnData = _ref.buildColumnData,
     isOwnerBased = _ref.isOwnerBased,
@@ -7799,6 +7806,13 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
     _useState10 = _slicedToArray(_useState9, 2),
     searchTerm = _useState10[0],
     setSearchTerm = _useState10[1];
+  var _useState11 = useState({
+      pageIndex: DEFAULT_PAGE_INDEX,
+      pageSize: DEFAULT_PAGE_SIZE
+    }),
+    _useState12 = _slicedToArray(_useState11, 2),
+    pageProps = _useState12[0],
+    setPageProps = _useState12[1];
   var debouncedSearchTerm = useDebounce(searchTerm.trim());
   var history = useHistory();
   var _useTranslation = useTranslation(),
@@ -7817,12 +7831,12 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
     _useFetchConfigs$data4 = _useFetchConfigs$data2.resourceTypes,
     resourceTypes = _useFetchConfigs$data4 === void 0 ? [] : _useFetchConfigs$data4,
     isConfigsLoading = _useFetchConfigs.isLoading;
-  var fieldParams = {
+  var fieldParams = _objectSpread$4({
     resourceType: !isOwnerBased ? resource : undefined,
     ownerId: ownerId,
     state: state || FIELD_STATES.active,
     searchTerm: debouncedSearchTerm
-  };
+  }, pageProps);
   var _useFetchFields = useFetchFields(fieldParams, {
       enabled: !!resource,
       keepPreviousData: true
@@ -7834,18 +7848,9 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
     count = _useFetchFields$data2.count,
     activeFieldsCount = _useFetchFields$data2.activeFieldsCount,
     inactiveFieldsCount = _useFetchFields$data2.inactiveFieldsCount,
+    reorderable = _useFetchFields$data2.reorderable,
     isFieldsLoading = _useFetchFields.isLoading,
     isFieldsFetching = _useFetchFields.isFetching;
-  var _useFetchFields2 = useFetchFields(_objectSpread$2(_objectSpread$2({}, fieldParams), {}, {
-      state: FIELD_STATES.active,
-      searchTerm: ""
-    }), {
-      enabled: !!resource
-    }),
-    _useFetchFields2$data = _useFetchFields2.data,
-    _useFetchFields2$data2 = _useFetchFields2$data === void 0 ? {} : _useFetchFields2$data,
-    _useFetchFields2$data3 = _useFetchFields2$data2.fields,
-    allFields = _useFetchFields2$data3 === void 0 ? [] : _useFetchFields2$data3;
   var _useDestroyField = useDestroyField({
       onSuccess: function onSuccess() {
         setIsDeleteAlertOpen(false);
@@ -7889,7 +7894,7 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
     defaultColumns: defaultColumns
   });
   var handleBlockClick = function handleBlockClick(params) {
-    return handleMetaClick(history, buildUrl("", _objectSpread$2({
+    return handleMetaClick(history, buildUrl("", _objectSpread$4({
       resource: resource,
       state: state
     }, params)));
@@ -7960,6 +7965,12 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
   useEffect(function () {
     handleURLWithDefaultValues();
   }, [isConfigsLoading, resources]);
+  useEffect(function () {
+    setPageProps({
+      pageIndex: DEFAULT_PAGE_INDEX,
+      pageSize: DEFAULT_PAGE_SIZE
+    });
+  }, [searchTerm, state, resource]);
   return {
     isPaneOpen: isPaneOpen,
     setIsPaneOpen: setIsPaneOpen,
@@ -7970,7 +7981,6 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
     count: count,
     columnData: columnData,
     selectedField: selectedField,
-    selectedState: state,
     selectedMenu: resource,
     // resource will be ownerId if showOwnersInMenu is true, else it will be resourceType
     ownerId: ownerId,
@@ -7988,8 +7998,10 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
     searchProps: searchProps,
     stateFilterTabs: stateFilterTabs,
     menuBarItems: menuBarItems,
-    allFields: allFields,
-    headerDisplayTitle: headerDisplayTitle
+    reorderable: reorderable,
+    headerDisplayTitle: headerDisplayTitle,
+    pageProps: pageProps,
+    setPageProps: setPageProps
   };
 };
 
@@ -8028,6 +8040,8 @@ var DeleteAlert = function DeleteAlert(_ref) {
   });
 };
 
+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 FieldsTable = function FieldsTable(_ref) {
   var totalCount = _ref.totalCount,
     isLoading = _ref.isLoading,
@@ -8035,11 +8049,15 @@ var FieldsTable = function FieldsTable(_ref) {
     columnData = _ref.columnData,
     setIsPaneOpen = _ref.setIsPaneOpen,
     helpDocUrl = _ref.helpDocUrl,
-    title = _ref.title;
+    title = _ref.title,
+    pageProps = _ref.pageProps,
+    setPageProps = _ref.setPageProps;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var showNoDataScreen = !isLoading && isEmpty(rowData);
   title = title.toLocaleLowerCase();
+  var pageIndex = pageProps.pageIndex,
+    pageSize = pageProps.pageSize;
   return /*#__PURE__*/React.createElement(TableWrapper, null, showNoDataScreen ? /*#__PURE__*/React.createElement("div", {
     className: "flex h-full w-full items-center justify-center"
   }, /*#__PURE__*/React.createElement(NoData, _extends({}, helpDocUrl && {
@@ -8058,9 +8076,16 @@ var FieldsTable = function FieldsTable(_ref) {
     fixedHeight: true,
     allowRowClick: false,
     columnData: columnData,
-    loading: isLoading,
     rowData: rowData,
-    totalCount: totalCount
+    totalCount: totalCount,
+    currentPageNumber: pageIndex,
+    defaultPageSize: pageSize,
+    loading: isLoading,
+    handlePageChange: function handlePageChange(pageIndex) {
+      return setPageProps(_objectSpread$3(_objectSpread$3({}, pageProps), {}, {
+        pageIndex: pageIndex
+      }));
+    }
   }));
 };
 
@@ -8080,8 +8105,7 @@ var TitleWithHelpLink = function TitleWithHelpLink(_ref) {
 
 // eslint-disable-next-line @bigbinary/neeto/no-dumb-components-with-use-translation
 var ActionBlock = function ActionBlock(_ref) {
-  var selectedState = _ref.selectedState,
-    allFields = _ref.allFields,
+  var reorderable = _ref.reorderable,
     setIsReorderPaneOpen = _ref.setIsReorderPaneOpen,
     setIsPaneOpen = _ref.setIsPaneOpen;
   var _useTranslation = useTranslation(),
@@ -8090,12 +8114,9 @@ var ActionBlock = function ActionBlock(_ref) {
     className: "flex flex-shrink-0 items-center gap-3"
   }, /*#__PURE__*/React.createElement(Button$1, {
     "data-cy": "neeto-fields-reorder-button",
+    disabled: !reorderable,
     label: t("labels.reorder"),
     style: "secondary",
-    disabled: selectedState === FIELD_STATES.inactive || !existsBy({
-      isSystem: false,
-      state: "active"
-    }, allFields),
     onClick: function onClick() {
       return setIsReorderPaneOpen(true);
     }
@@ -12414,7 +12435,6 @@ var FieldBlock$1 = /*#__PURE__*/React.memo(FieldBlock);
 var ReorderPane = function ReorderPane(_ref) {
   var isOpen = _ref.isOpen,
     onClose = _ref.onClose,
-    allFields = _ref.allFields,
     ownerId = _ref.ownerId;
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
@@ -12423,12 +12443,32 @@ var ReorderPane = function ReorderPane(_ref) {
   var initialStateRef = useRef([]);
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
+  var _getQueryParams = getQueryParams(),
+    resource = _getQueryParams.resource;
   var _useReorderFields = useReorderFields(),
     reorderField = _useReorderFields.mutate,
     isSubmitting = _useReorderFields.isLoading;
-  var handleDragEnd = function handleDragEnd(_ref2) {
-    var active = _ref2.active,
-      over = _ref2.over;
+  var fieldParams = {
+    resourceType: isEmpty(ownerId) ? resource : undefined,
+    ownerId: ownerId,
+    state: FIELD_STATES.active,
+    searchTerm: ""
+  };
+  var _useFetchFields = useFetchFields(fieldParams, {
+      enabled: !!resource && isOpen,
+      onSuccess: function onSuccess(_ref2) {
+        var fields = _ref2.fields;
+        setFields(fields);
+        initialStateRef.current = fields;
+      }
+    }),
+    _useFetchFields$data = _useFetchFields.data,
+    _useFetchFields$data2 = _useFetchFields$data === void 0 ? {} : _useFetchFields$data,
+    _useFetchFields$data3 = _useFetchFields$data2.fields,
+    allFields = _useFetchFields$data3 === void 0 ? [] : _useFetchFields$data3;
+  var handleDragEnd = function handleDragEnd(_ref3) {
+    var active = _ref3.active,
+      over = _ref3.over;
     if (active.id !== over.id) {
       setFields(function (fields) {
         return arrayMove(fields, active.data.current.index, over.data.current.index);
@@ -12450,10 +12490,6 @@ var ReorderPane = function ReorderPane(_ref) {
       onSuccess: onClose
     });
   };
-  useEffect(function () {
-    setFields(allFields);
-    initialStateRef.current = allFields;
-  }, [allFields]);
   return /*#__PURE__*/React.createElement(Pane, {
     isOpen: isOpen,
     onClose: onClose
@@ -12563,7 +12599,6 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     count = _useFieldsDashboard.count,
     columnData = _useFieldsDashboard.columnData,
     selectedField = _useFieldsDashboard.selectedField,
-    selectedState = _useFieldsDashboard.selectedState,
     selectedMenu = _useFieldsDashboard.selectedMenu,
     ownerId = _useFieldsDashboard.ownerId,
     isFieldsFetching = _useFieldsDashboard.isFieldsFetching,
@@ -12580,14 +12615,15 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     searchProps = _useFieldsDashboard.searchProps,
     stateFilterTabs = _useFieldsDashboard.stateFilterTabs,
     menuBarItems = _useFieldsDashboard.menuBarItems,
-    allFields = _useFieldsDashboard.allFields,
-    headerDisplayTitle = _useFieldsDashboard.headerDisplayTitle;
+    reorderable = _useFieldsDashboard.reorderable,
+    headerDisplayTitle = _useFieldsDashboard.headerDisplayTitle,
+    pageProps = _useFieldsDashboard.pageProps,
+    setPageProps = _useFieldsDashboard.setPageProps;
   var headerProps = {
-    allFields: allFields,
+    reorderable: reorderable,
     breadcrumbs: breadcrumbs,
     helpDocUrl: helpDocUrl,
     searchProps: searchProps,
-    selectedState: selectedState,
     setIsPaneOpen: setIsPaneOpen,
     setIsReorderPaneOpen: setIsReorderPaneOpen,
     title: headerDisplayTitle
@@ -12606,7 +12642,9 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     totalCount: count,
     columnData: columnData,
     helpDocUrl: helpDocUrl,
+    pageProps: pageProps,
     setIsPaneOpen: setIsPaneOpen,
+    setPageProps: setPageProps,
     title: title
   }), /*#__PURE__*/React.createElement(FieldsPane, {
     additionalValidations: paneProps === null || paneProps === void 0 ? void 0 : paneProps.validations,
@@ -12622,8 +12660,7 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
   }, paneProps === null || paneProps === void 0 ? void 0 : paneProps.children)), /*#__PURE__*/React.createElement(ReorderPane, {
     isOpen: isReorderPaneOpen,
     ownerId: isOwnerBased ? selectedMenu : "",
-    onClose: handleReorderPaneClose,
-    allFields: allFields
+    onClose: handleReorderPaneClose
   }), /*#__PURE__*/React.createElement(DeleteAlert, {
     handleAlertClose: handleAlertClose,
     handleDelete: handleDelete,
@@ -12665,11 +12702,11 @@ var fieldValuesApi = {
   update: update
 };
 
-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 useCreateFieldValue = function useCreateFieldValue(options) {
   var queryClient = useQueryClient();
-  return useMutation(fieldValuesApi.create, _objectSpread$1(_objectSpread$1({}, options), {}, {
+  return useMutation(fieldValuesApi.create, _objectSpread$2(_objectSpread$2({}, options), {}, {
     onSuccess: function onSuccess() {
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
         args[_key] = arguments[_key];
@@ -12681,7 +12718,7 @@ var useCreateFieldValue = function useCreateFieldValue(options) {
 };
 var useUpdateFieldValue = function useUpdateFieldValue(options) {
   var queryClient = useQueryClient();
-  return useMutation(fieldValuesApi.update, _objectSpread$1(_objectSpread$1({}, options), {}, {
+  return useMutation(fieldValuesApi.update, _objectSpread$2(_objectSpread$2({}, options), {}, {
     onSuccess: function onSuccess() {
       for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
         args[_key2] = arguments[_key2];
@@ -12693,7 +12730,7 @@ var useUpdateFieldValue = function useUpdateFieldValue(options) {
 };
 var useDeleteFieldValue = function useDeleteFieldValue(options) {
   var queryClient = useQueryClient();
-  return useMutation(fieldValuesApi.destroy, _objectSpread$1(_objectSpread$1({}, options), {}, {
+  return useMutation(fieldValuesApi.destroy, _objectSpread$2(_objectSpread$2({}, options), {}, {
     onSuccess: function onSuccess() {
       for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
         args[_key3] = arguments[_key3];
@@ -12704,6 +12741,88 @@ var useDeleteFieldValue = function useDeleteFieldValue(options) {
   }));
 };
 
+const useNavPrompt = ({
+  shouldBlock
+}) => {
+  const history = useHistory();
+
+  const _unblock = useRef(null);
+
+  const _navPath = useRef(null);
+
+  const [blocked, setBlocked] = useState(false);
+  useEffect(() => {
+    if (shouldBlock) {
+      _unblock.current = history.block(location => {
+        // need to use ref?
+        setBlocked(true);
+        _navPath.current = location.pathname + location.search; // $FlowFixMe - See https://github.com/ReactTraining/history/issues/728
+
+        return false;
+      });
+      return () => {
+        if (_unblock.current) {
+          _unblock.current();
+        }
+      };
+    }
+  }, [shouldBlock]);
+
+  const navigate = () => {
+    if (_unblock.current) {
+      _unblock.current();
+
+      setBlocked(false);
+
+      if (_navPath.current) {
+        history.push(_navPath.current);
+      }
+    }
+  };
+
+  const hidePrompt = () => {
+    setBlocked(false);
+  };
+
+  return {
+    blocked,
+    navigate,
+    hidePrompt
+  };
+};
+
+var DEAFULT_BLOCK_NAVIGATION_ALERT_PROPS = {
+  title: t$1("messages.blockNavigationAlert.title"),
+  message: t$1("messages.blockNavigationAlert.message"),
+  submitButtonLabel: t$1("messages.blockNavigationAlert.submitButtonLabel"),
+  cancelButtonLabel: t$1("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; }
+var BlockNavigation = function BlockNavigation(_ref) {
+  var blockNavigation = _ref.blockNavigation,
+    blockNavigationAlertProps = _ref.blockNavigationAlertProps;
+  var _useFormikContext = useFormikContext(),
+    dirty = _useFormikContext.dirty;
+  var _useNavPrompt = useNavPrompt({
+      shouldBlock: blockNavigation && dirty
+    }),
+    blocked = _useNavPrompt.blocked,
+    hidePrompt = _useNavPrompt.hidePrompt,
+    navigate = _useNavPrompt.navigate;
+  var alertProps = _objectSpread$1(_objectSpread$1({}, DEAFULT_BLOCK_NAVIGATION_ALERT_PROPS), blockNavigationAlertProps);
+  return /*#__PURE__*/React.createElement(Alert, {
+    cancelButtonLabel: alertProps["cancelButtonLabel"],
+    isOpen: blocked,
+    message: alertProps["message"],
+    submitButtonLabel: alertProps["submitButtonLabel"],
+    title: alertProps["title"],
+    onClose: hidePrompt,
+    onSubmit: navigate
+  });
+};
+
 var FieldValueInputWrapper = function FieldValueInputWrapper(_ref) {
   var field = _ref.field,
     fieldValues = _ref.fieldValues,
@@ -12756,7 +12875,11 @@ var FieldValuesContainer = function FieldValuesContainer(_ref) {
     isRequiredColumnName = _ref.isRequiredColumnName,
     fieldClassName = _ref.fieldClassName,
     _ref$onMutationSucces = _ref.onMutationSuccess,
-    onMutationSuccess = _ref$onMutationSucces === void 0 ? noop$2 : _ref$onMutationSucces;
+    onMutationSuccess = _ref$onMutationSucces === void 0 ? noop$2 : _ref$onMutationSucces,
+    _ref$blockNavigation = _ref.blockNavigation,
+    blockNavigation = _ref$blockNavigation === void 0 ? false : _ref$blockNavigation,
+    _ref$blockNavigationA = _ref.blockNavigationAlertProps,
+    blockNavigationAlertProps = _ref$blockNavigationA === void 0 ? {} : _ref$blockNavigationA;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var queryOptions = {
@@ -12803,7 +12926,7 @@ var FieldValuesContainer = function FieldValuesContainer(_ref) {
   var fields = propFields || fetchedFields;
   return /*#__PURE__*/React.createElement("div", {
     className: classnames("space-y-3 py-3", {
-      "neeto-ui-border-gray-300 rounded-lg border bg-white px-4 py-2": showBorder
+      "neeto-ui-border-gray-300 neeto-ui-rounded-lg neeto-ui-bg-white border px-4 py-2": showBorder
     }, className)
   }, isFieldsLoading ? /*#__PURE__*/React.createElement("div", {
     className: "flex items-center justify-center"
@@ -12825,12 +12948,16 @@ var FieldValuesContainer = function FieldValuesContainer(_ref) {
         fieldValues: fieldValues
       }, /*#__PURE__*/React.createElement("div", {
         className: "w-full"
-      }, /*#__PURE__*/React.createElement(Field, _objectSpread(_objectSpread({}, field), {}, {
-        individualSubmit: true,
-        formRefs: formRefs,
+      }, /*#__PURE__*/React.createElement(Field, _extends({}, _objectSpread(_objectSpread({}, field), {}, {
         disabled: disabled,
+        formRefs: formRefs,
         isRequiredColumnName: isRequiredColumnName
-      })))));
+      }), {
+        individualSubmit: true
+      })), /*#__PURE__*/React.createElement(BlockNavigation, {
+        blockNavigation: blockNavigation,
+        blockNavigationAlertProps: blockNavigationAlertProps
+      }))));
     }
     return /*#__PURE__*/React.createElement(Typography, {
       key: field.id,