@bigbinary/neeto-fields-frontend 1.1.0 → 1.1.1

package/dist/index.js

@@ -1,7 +1,7 @@
 import React, { useContext, useState, useRef, useEffect, useLayoutEffect, useMemo, useCallback, createContext, memo, useReducer } from 'react';
 import { Switch, TimePicker, DatePicker, Select, Input, Textarea, Typography, Pane, Label, Button as Button$1, Dropdown, NoData, Table, Spinner, Alert } from '@bigbinary/neetoui';
-import { toLabelAndValue, capitalize as capitalize$1, filterBy, findBy, isNotEmpty, humanize, countBy, existsBy, noop as noop$2 } from '@bigbinary/neeto-commons-frontend/pure';
-import { values, map, isNil, isNotNil, pluck, clone as clone$1, pipe, mergeAll, omit, prop, pick, isEmpty, assoc, any, not, head } from 'ramda';
+import { toLabelAndValue, isNotEmpty, capitalize as capitalize$1, filterBy, findBy, humanize, countBy, existsBy, noop as noop$2 } from '@bigbinary/neeto-commons-frontend/pure';
+import { values, map, isNotNil, isNil, pluck, clone as clone$1, pipe, mergeAll, omit, prop, pick, isEmpty, assoc, any, not, head } from 'ramda';
 import { useFormikContext, useField, FieldArray } from 'formik';
 import * as yup from 'yup';
 import { Check, Delete, MenuHorizontal, Reorder } from '@bigbinary/neeto-icons';
@@ -15,7 +15,7 @@ import { useQuery, useQueryClient, useMutation } from 'react-query';
 import axios from 'axios';
 import { buildUrl, getQueryParams } from '@bigbinary/neeto-commons-frontend/utils';
 import { handleMetaClick } from '@bigbinary/neeto-commons-frontend/react-utils';
-import { useHistory } from 'react-router-dom';
+import { Link, useHistory } from 'react-router-dom';
 import TableWrapper from '@bigbinary/neeto-molecules/TableWrapper';
 import { unstable_batchedUpdates, createPortal } from 'react-dom';
 import classnames from 'classnames';
@@ -3714,8 +3714,8 @@ function transformOptions(options) {
   return options;
 }
 
-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; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 function noop$1() {}
@@ -3775,9 +3775,9 @@ var I18n = function (_EventEmitter) {
         }
       }
       var defOpts = get();
-      this.options = _objectSpread$d(_objectSpread$d(_objectSpread$d({}, defOpts), this.options), transformOptions(options));
+      this.options = _objectSpread$e(_objectSpread$e(_objectSpread$e({}, defOpts), this.options), transformOptions(options));
       if (this.options.compatibilityAPI !== 'v1') {
-        this.options.interpolation = _objectSpread$d(_objectSpread$d({}, defOpts.interpolation), this.options.interpolation);
+        this.options.interpolation = _objectSpread$e(_objectSpread$e({}, defOpts.interpolation), this.options.interpolation);
       }
       if (options.keySeparator !== undefined) {
         this.options.userDefinedKeySeparator = options.keySeparator;
@@ -4055,7 +4055,7 @@ var I18n = function (_EventEmitter) {
           }
           options = _this5.options.overloadTranslationOptionHandler([key, opts].concat(rest));
         } else {
-          options = _objectSpread$d({}, opts);
+          options = _objectSpread$e({}, opts);
         }
         options.lng = options.lng || fixedT.lng;
         options.lngs = options.lngs || fixedT.lngs;
@@ -4182,7 +4182,7 @@ var I18n = function (_EventEmitter) {
       var _this8 = this;
       var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop$1;
-      var mergedOptions = _objectSpread$d(_objectSpread$d(_objectSpread$d({}, this.options), options), {
+      var mergedOptions = _objectSpread$e(_objectSpread$e(_objectSpread$e({}, this.options), options), {
         isClone: true
       });
       var clone = new I18n(mergedOptions);
@@ -4193,7 +4193,7 @@ var I18n = function (_EventEmitter) {
       membersToCopy.forEach(function (m) {
         clone[m] = _this8[m];
       });
-      clone.services = _objectSpread$d({}, this.services);
+      clone.services = _objectSpread$e({}, this.services);
       clone.services.utils = {
         hasLoadedNamespace: clone.hasLoadedNamespace.bind(clone)
       };
@@ -4241,7 +4241,7 @@ instance.reloadResources;
 instance.use;
 instance.changeLanguage;
 instance.getFixedT;
-var t = instance.t;
+var t$1 = instance.t;
 instance.exists;
 instance.setDefaultNamespace;
 instance.hasLoadedNamespace;
@@ -4632,9 +4632,79 @@ function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
 
-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; }
+/**
+ * This file automatically generated from `pre-publish.js`.
+ * Do not manually edit.
+ */
 
-function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$c(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var voidElements = {
+  "area": true,
+  "base": true,
+  "br": true,
+  "col": true,
+  "embed": true,
+  "hr": true,
+  "img": true,
+  "input": true,
+  "link": true,
+  "meta": true,
+  "param": true,
+  "source": true,
+  "track": true,
+  "wbr": true
+};
+
+var e = /*@__PURE__*/getDefaultExportFromCjs(voidElements);
+
+var t=/\s([^'"/\s><]+?)[\s/>]|([^\s=]+)=\s?(".*?"|'.*?')/g;function n(n){var r={type:"tag",name:"",voidElement:!1,attrs:{},children:[]},i=n.match(/<\/?([^\s]+?)[/\s>]/);if(i&&(r.name=i[1],(e[i[1]]||"/"===n.charAt(n.length-2))&&(r.voidElement=!0),r.name.startsWith("!--"))){var s=n.indexOf("--\x3e");return {type:"comment",comment:-1!==s?n.slice(4,s):""}}for(var a=new RegExp(t),c=null;null!==(c=a.exec(n));)if(c[0].trim())if(c[1]){var o=c[1].trim(),l=[o,""];o.indexOf("=")>-1&&(l=o.split("=")),r.attrs[l[0]]=l[1],a.lastIndex--;}else c[2]&&(r.attrs[c[2]]=c[3].trim().substring(1,c[3].length-1));return r}var r=/<[a-zA-Z0-9\-\!\/](?:"[^"]*"|'[^']*'|[^'">])*>/g,i=/^\s*$/,s=Object.create(null);function a(e,t){switch(t.type){case"text":return e+t.content;case"tag":return e+="<"+t.name+(t.attrs?function(e){var t=[];for(var n in e)t.push(n+'="'+e[n]+'"');return t.length?" "+t.join(" "):""}(t.attrs):"")+(t.voidElement?"/>":">"),t.voidElement?e:e+t.children.reduce(a,"")+"</"+t.name+">";case"comment":return e+"\x3c!--"+t.comment+"--\x3e"}}var c={parse:function(e,t){t||(t={}),t.components||(t.components=s);var a,c=[],o=[],l=-1,m=!1;if(0!==e.indexOf("<")){var u=e.indexOf("<");c.push({type:"text",content:-1===u?e:e.substring(0,u)});}return e.replace(r,function(r,s){if(m){if(r!=="</"+a.name+">")return;m=!1;}var u,f="/"!==r.charAt(1),h=r.startsWith("\x3c!--"),p=s+r.length,d=e.charAt(p);if(h){var v=n(r);return l<0?(c.push(v),c):((u=o[l]).children.push(v),c)}if(f&&(l++,"tag"===(a=n(r)).type&&t.components[a.name]&&(a.type="component",m=!0),a.voidElement||m||!d||"<"===d||a.children.push({type:"text",content:e.slice(p,e.indexOf("<",p))}),0===l&&c.push(a),(u=o[l-1])&&u.children.push(a),o[l]=a),(!f||a.voidElement)&&(l>-1&&(a.voidElement||a.name===r.slice(2,-1))&&(l--,a=-1===l?c:o[l]),!m&&"<"!==d&&d)){u=-1===l?c:o[l].children;var x=e.indexOf("<",p),g=e.slice(p,-1===x?void 0:x);i.test(g)&&(g=" "),(x>-1&&l+u.length>=0||" "!==g)&&u.push({type:"text",content:g});}}),c},stringify:function(e){return e.reduce(function(e,t){return e+a("",t)},"")}};
+
+/**
+ * Copyright (C) 2017-present by Andrea Giammarchi - @WebReflection
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+var replace = ''.replace;
+var es = /&(?:amp|#38|lt|#60|gt|#62|apos|#39|quot|#34);/g;
+var unes = {
+  '&amp;': '&',
+  '&#38;': '&',
+  '&lt;': '<',
+  '&#60;': '<',
+  '&gt;': '>',
+  '&#62;': '>',
+  '&apos;': "'",
+  '&#39;': "'",
+  '&quot;': '"',
+  '&#34;': '"'
+};
+
+function unescape(un) {
+  return replace.call(un, es, cape);
+}
+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 _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; }
 var defaultOptions$1 = {
   bindI18n: 'languageChanged',
   bindI18nStore: '',
@@ -4648,7 +4718,7 @@ var i18nInstance;
 var I18nContext = React.createContext();
 function setDefaults() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  defaultOptions$1 = _objectSpread$c(_objectSpread$c({}, defaultOptions$1), options);
+  defaultOptions$1 = _objectSpread$d(_objectSpread$d({}, defaultOptions$1), options);
 }
 function getDefaults() {
   return defaultOptions$1;
@@ -4772,6 +4842,274 @@ function hasLoadedNamespace(ns, i18n) {
   });
 }
 
+var _excluded$4 = ["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 _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 hasChildren(node, checkLength) {
+  if (!node) return false;
+  var base = node.props ? node.props.children : node.children;
+  if (checkLength) return base.length > 0;
+  return !!base;
+}
+
+function getChildren(node) {
+  if (!node) return [];
+  return node && node.children ? node.children : node.props && node.props.children;
+}
+
+function hasValidReactChildren(children) {
+  if (Object.prototype.toString.call(children) !== '[object Array]') return false;
+  return children.every(function (child) {
+    return React.isValidElement(child);
+  });
+}
+
+function getAsArray(data) {
+  return Array.isArray(data) ? data : [data];
+}
+
+function mergeProps(source, target) {
+  var newTarget = _objectSpread$c({}, target);
+
+  newTarget.props = Object.assign(source.props, target.props);
+  return newTarget;
+}
+
+function nodesToString(children, i18nOptions) {
+  if (!children) return '';
+  var stringNode = '';
+  var childrenArray = getAsArray(children);
+  var keepArray = i18nOptions.transSupportBasicHtmlNodes && i18nOptions.transKeepBasicHtmlNodesFor ? i18nOptions.transKeepBasicHtmlNodesFor : [];
+  childrenArray.forEach(function (child, childIndex) {
+    if (typeof child === 'string') {
+      stringNode += "".concat(child);
+    } else if (React.isValidElement(child)) {
+      var childPropsCount = Object.keys(child.props).length;
+      var shouldKeepChild = keepArray.indexOf(child.type) > -1;
+      var childChildren = child.props.children;
+
+      if (!childChildren && shouldKeepChild && childPropsCount === 0) {
+        stringNode += "<".concat(child.type, "/>");
+      } else if (!childChildren && (!shouldKeepChild || childPropsCount !== 0)) {
+        stringNode += "<".concat(childIndex, "></").concat(childIndex, ">");
+      } else if (child.props.i18nIsDynamicList) {
+        stringNode += "<".concat(childIndex, "></").concat(childIndex, ">");
+      } else if (shouldKeepChild && childPropsCount === 1 && typeof childChildren === 'string') {
+        stringNode += "<".concat(child.type, ">").concat(childChildren, "</").concat(child.type, ">");
+      } else {
+        var content = nodesToString(childChildren, i18nOptions);
+        stringNode += "<".concat(childIndex, ">").concat(content, "</").concat(childIndex, ">");
+      }
+    } else if (child === null) {
+      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$4);
+
+      var keys = Object.keys(clone);
+
+      if (keys.length === 1) {
+        var value = format ? "".concat(keys[0], ", ").concat(format) : keys[0];
+        stringNode += "{{".concat(value, "}}");
+      } else {
+        warn("react-i18next: the passed in object contained more than one variable - the object should look like {{ value, format }} where format is optional.", child);
+      }
+    } else {
+      warn("Trans: the passed in value is invalid - seems you passed in a variable like {number} - please pass in variables for interpolation as full objects like {{number}}.", child);
+    }
+  });
+  return stringNode;
+}
+
+function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, shouldUnescape) {
+  if (targetString === '') return [];
+  var keepArray = i18nOptions.transKeepBasicHtmlNodesFor || [];
+  var emptyChildrenButNeedsHandling = targetString && new RegExp(keepArray.join('|')).test(targetString);
+  if (!children && !emptyChildrenButNeedsHandling) return [targetString];
+  var data = {};
+
+  function getData(childs) {
+    var childrenArray = getAsArray(childs);
+    childrenArray.forEach(function (child) {
+      if (typeof child === 'string') return;
+      if (hasChildren(child)) getData(getChildren(child));else if (_typeof$1(child) === 'object' && !React.isValidElement(child)) Object.assign(data, child);
+    });
+  }
+
+  getData(children);
+  var ast = c.parse("<0>".concat(targetString, "</0>"));
+
+  var opts = _objectSpread$c(_objectSpread$c({}, data), combinedTOpts);
+
+  function renderInner(child, node, rootReactNode) {
+    var childs = getChildren(child);
+    var mappedChildren = mapAST(childs, node.children, rootReactNode);
+    return hasValidReactChildren(childs) && mappedChildren.length === 0 ? childs : mappedChildren;
+  }
+
+  function pushTranslatedJSX(child, inner, mem, i, isVoid) {
+    if (child.dummy) child.children = inner;
+    mem.push(React.cloneElement(child, _objectSpread$c(_objectSpread$c({}, child.props), {}, {
+      key: i
+    }), isVoid ? undefined : inner));
+  }
+
+  function mapAST(reactNode, astNode, rootReactNode) {
+    var reactNodes = getAsArray(reactNode);
+    var astNodes = getAsArray(astNode);
+    return astNodes.reduce(function (mem, node, i) {
+      var translationContent = node.children && node.children[0] && node.children[0].content && i18n.services.interpolator.interpolate(node.children[0].content, opts, i18n.language);
+
+      if (node.type === 'tag') {
+        var tmp = reactNodes[parseInt(node.name, 10)];
+        if (!tmp && rootReactNode.length === 1 && rootReactNode[0][node.name]) tmp = rootReactNode[0][node.name];
+        if (!tmp) tmp = {};
+        var child = Object.keys(node.attrs).length !== 0 ? mergeProps({
+          props: node.attrs
+        }, tmp) : tmp;
+        var isElement = React.isValidElement(child);
+        var isValidTranslationWithChildren = isElement && hasChildren(node, true) && !node.voidElement;
+        var isEmptyTransWithHTML = emptyChildrenButNeedsHandling && _typeof$1(child) === 'object' && child.dummy && !isElement;
+        var isKnownComponent = _typeof$1(children) === 'object' && children !== null && Object.hasOwnProperty.call(children, node.name);
+
+        if (typeof child === 'string') {
+          var value = i18n.services.interpolator.interpolate(child, opts, i18n.language);
+          mem.push(value);
+        } else if (hasChildren(child) || isValidTranslationWithChildren) {
+            var inner = renderInner(child, node, rootReactNode);
+            pushTranslatedJSX(child, inner, mem, i);
+          } else if (isEmptyTransWithHTML) {
+          var _inner = mapAST(reactNodes, node.children, rootReactNode);
+
+          mem.push(React.cloneElement(child, _objectSpread$c(_objectSpread$c({}, child.props), {}, {
+            key: i
+          }), _inner));
+        } else if (Number.isNaN(parseFloat(node.name))) {
+          if (isKnownComponent) {
+            var _inner2 = renderInner(child, node, rootReactNode);
+
+            pushTranslatedJSX(child, _inner2, mem, i, node.voidElement);
+          } else if (i18nOptions.transSupportBasicHtmlNodes && keepArray.indexOf(node.name) > -1) {
+            if (node.voidElement) {
+              mem.push(React.createElement(node.name, {
+                key: "".concat(node.name, "-").concat(i)
+              }));
+            } else {
+              var _inner3 = mapAST(reactNodes, node.children, rootReactNode);
+
+              mem.push(React.createElement(node.name, {
+                key: "".concat(node.name, "-").concat(i)
+              }, _inner3));
+            }
+          } else if (node.voidElement) {
+            mem.push("<".concat(node.name, " />"));
+          } else {
+            var _inner4 = mapAST(reactNodes, node.children, rootReactNode);
+
+            mem.push("<".concat(node.name, ">").concat(_inner4, "</").concat(node.name, ">"));
+          }
+        } else if (_typeof$1(child) === 'object' && !isElement) {
+          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), {}, {
+            key: i
+          }), translationContent));
+        } else {
+          mem.push(React.cloneElement(child, _objectSpread$c(_objectSpread$c({}, child.props), {}, {
+            key: i
+          })));
+        }
+      } else if (node.type === 'text') {
+        var wrapTextNodes = i18nOptions.transWrapTextNodes;
+
+        var _content = shouldUnescape ? unescape(i18n.services.interpolator.interpolate(node.content, opts, i18n.language)) : i18n.services.interpolator.interpolate(node.content, opts, i18n.language);
+
+        if (wrapTextNodes) {
+          mem.push(React.createElement(wrapTextNodes, {
+            key: "".concat(node.name, "-").concat(i)
+          }, _content));
+        } else {
+          mem.push(_content);
+        }
+      }
+
+      return mem;
+    }, []);
+  }
+
+  var result = mapAST([{
+    dummy: true,
+    children: children || []
+  }], ast, getAsArray(children || []));
+  return getChildren(result[0]);
+}
+
+function Trans(_ref) {
+  var children = _ref.children,
+      count = _ref.count,
+      parent = _ref.parent,
+      i18nKey = _ref.i18nKey,
+      context = _ref.context,
+      _ref$tOptions = _ref.tOptions,
+      tOptions = _ref$tOptions === void 0 ? {} : _ref$tOptions,
+      values = _ref.values,
+      defaults = _ref.defaults,
+      components = _ref.components,
+      ns = _ref.ns,
+      i18nFromProps = _ref.i18n,
+      tFromProps = _ref.t,
+      shouldUnescape = _ref.shouldUnescape,
+      additionalProps = _objectWithoutProperties(_ref, _excluded2);
+
+  var _ref2 = useContext(I18nContext) || {},
+      i18nFromContext = _ref2.i18n,
+      defaultNSFromContext = _ref2.defaultNS;
+
+  var i18n = i18nFromProps || i18nFromContext || getI18n();
+
+  if (!i18n) {
+    warnOnce('You will need to pass in an i18next instance by using i18nextReactModule');
+    return children;
+  }
+
+  var t = tFromProps || i18n.t.bind(i18n) || function (k) {
+    return k;
+  };
+
+  if (context) tOptions.context = context;
+
+  var reactI18nextOptions = _objectSpread$c(_objectSpread$c({}, getDefaults()), i18n.options && i18n.options.react);
+
+  var namespaces = ns || t.ns || defaultNSFromContext || i18n.options && i18n.options.defaultNS;
+  namespaces = typeof namespaces === 'string' ? [namespaces] : namespaces || ['translation'];
+  var defaultValue = defaults || nodesToString(children, reactI18nextOptions) || reactI18nextOptions.transEmptyNodeValue || i18nKey;
+  var hashTransKey = reactI18nextOptions.hashTransKey;
+  var key = i18nKey || (hashTransKey ? hashTransKey(defaultValue) : defaultValue);
+  var interpolationOverride = values ? tOptions.interpolation : {
+    interpolation: _objectSpread$c(_objectSpread$c({}, tOptions.interpolation), {}, {
+      prefix: '#$?',
+      suffix: '?$#'
+    })
+  };
+
+  var combinedTOpts = _objectSpread$c(_objectSpread$c(_objectSpread$c(_objectSpread$c({}, tOptions), {}, {
+    count: count
+  }, values), interpolationOverride), {}, {
+    defaultValue: defaultValue,
+    ns: namespaces
+  });
+
+  var translation = key ? t(key, combinedTOpts) : defaultValue;
+  var content = renderNodes(components || children, translation, i18n, reactI18nextOptions, combinedTOpts, shouldUnescape);
+  var useAsParent = parent !== undefined ? parent : reactI18nextOptions.defaultTransParent;
+  return useAsParent ? React.createElement(useAsParent, additionalProps, content) : content;
+}
+
 function _iterableToArrayLimit(arr, i) {
   var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
   if (null != _i) {
@@ -4968,7 +5306,7 @@ var fields = {
 };
 var messages = {
 	noFields: "There are no fields to show",
-	confirmDelete: "Are you sure want to delete the field ?. This action cannot be undone.",
+	confirmDelete: "Are you sure want to delete the field? This action cannot be undone.",
 	manageFieldFor: "Manage fields for {{resource}}",
 	invalidKind: "Invalid kind",
 	reorderFields: "Fields are displayed from top to bottom."
@@ -4989,6 +5327,9 @@ var validations = {
 var tooltips = {
 	reorder: "Fields a are displayed from top to bottom. Re-order them"
 };
+var helpTexts = {
+	noData: "Here is how you can use <a>fields.</a>"
+};
 var en = {
 	common: common,
 	titles: titles,
@@ -4997,7 +5338,8 @@ var en = {
 	fields: fields,
 	messages: messages,
 	validations: validations,
-	tooltips: tooltips
+	tooltips: tooltips,
+	helpTexts: helpTexts
 };
 
 instance.use(Browser).use(initReactI18next).init({
@@ -5076,23 +5418,23 @@ var KINDS = {
   datetime: "datetime"
 };
 var DISPLAY_KINDS = {
-  text: t("fields.kinds.text"),
-  number: t("fields.kinds.number"),
-  monetary: t("fields.kinds.monetary"),
-  single_option: t("fields.kinds.singleOption"),
-  multi_option: t("fields.kinds.multiOption"),
-  date: t("fields.kinds.date"),
-  time: t("fields.kinds.time"),
-  date_range: t("fields.kinds.dateRange"),
-  time_range: t("fields.kinds.timeRange"),
-  textarea: t("fields.kinds.textarea"),
-  text_area: t("fields.kinds.textArea"),
-  person: t("fields.kinds.person"),
-  checkbox: t("fields.kinds.checkbox"),
-  regex: t("fields.kinds.regex"),
-  integer: t("fields.kinds.integer"),
-  decimal: t("fields.kinds.decimal"),
-  datetime: t("fields.kinds.datetime")
+  text: t$1("fields.kinds.text"),
+  number: t$1("fields.kinds.number"),
+  monetary: t$1("fields.kinds.monetary"),
+  single_option: t$1("fields.kinds.singleOption"),
+  multi_option: t$1("fields.kinds.multiOption"),
+  date: t$1("fields.kinds.date"),
+  time: t$1("fields.kinds.time"),
+  date_range: t$1("fields.kinds.dateRange"),
+  time_range: t$1("fields.kinds.timeRange"),
+  textarea: t$1("fields.kinds.textarea"),
+  text_area: t$1("fields.kinds.textArea"),
+  person: t$1("fields.kinds.person"),
+  checkbox: t$1("fields.kinds.checkbox"),
+  regex: t$1("fields.kinds.regex"),
+  integer: t$1("fields.kinds.integer"),
+  decimal: t$1("fields.kinds.decimal"),
+  datetime: t$1("fields.kinds.datetime")
 };
 var FIELD_STATES = {
   active: "active",
@@ -5496,6 +5838,22 @@ var dayjs_minExports = dayjs_min.exports;
 var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
 
 var dateSchema = yup.date().nullable();
+var buildSchemaAllowingEmptyValue = function buildSchemaAllowingEmptyValue(schema) {
+  return yup.mixed().test({
+    name: "validate-if-not-empty",
+    test: function test(value) {
+      if (isNotEmpty(value) && isNotNil(value)) {
+        try {
+          schema.validateSync(value);
+          return true;
+        } catch (_unused) {
+          return false;
+        }
+      }
+      return true;
+    }
+  });
+};
 var buildFieldValidationSchema = function buildFieldValidationSchema(_ref) {
   var kind = _ref.kind,
     isRequired = _ref.isRequired,
@@ -5505,33 +5863,36 @@ var buildFieldValidationSchema = function buildFieldValidationSchema(_ref) {
     case KINDS.text:
       {
         var schema = yup.string().trim().nullable();
-        return isRequired ? schema.required(t("validations.thisIsRequired")) : schema;
+        return isRequired ? schema.required(t$1("validations.thisIsRequired")) : schema;
       }
     case KINDS.number:
     case KINDS.monetary:
     case KINDS.decimal:
       {
-        var _schema = yup.number().nullable().typeError(t("validations.notAValidNumber"));
-        return isRequired ? _schema.required(t("validations.thisIsRequired")) : _schema;
+        var _schema = buildSchemaAllowingEmptyValue(yup.number().typeError(t$1("validations.notAValidNumber")));
+        return isRequired ? _schema.required(t$1("validations.thisIsRequired")) : _schema;
       }
     case KINDS.integer:
       {
-        var _schema2 = yup.number().nullable().integer().typeError(t("validations.notAValidInteger"));
-        return isRequired ? _schema2.required(t("validations.thisIsRequired")) : _schema2;
+        var _schema2 = buildSchemaAllowingEmptyValue(yup.number().nullable().integer().typeError(t$1("validations.notAValidInteger")));
+        return isRequired ? _schema2.required(t$1("validations.thisIsRequired")) : _schema2;
       }
     case KINDS.date:
     case KINDS.time:
-      return isRequired ? dateSchema.required(t("validations.thisIsRequired")) : dateSchema;
+      {
+        var _schema3 = buildSchemaAllowingEmptyValue(dateSchema);
+        return isRequired ? _schema3.required(t$1("validations.thisIsRequired")) : _schema3;
+      }
     case KINDS.multiOption:
       {
-        var _schema3 = yup.array().of(yup.string()).nullable();
-        return isRequired ? _schema3.min(1, t("validations.minOneItem")).required(t("validations.thisIsRequired")) : _schema3;
+        var _schema4 = yup.array().of(yup.string()).nullable();
+        return isRequired ? _schema4.min(1, t$1("validations.minOneItem")).required(t$1("validations.thisIsRequired")) : _schema4;
       }
     case KINDS.dateRange:
     case KINDS.timeRange:
       {
         if (isRequired) {
-          return yup.array().of(dateSchema).required(t("validations.thisIsRequired"));
+          return yup.array().of(dateSchema).required(t$1("validations.thisIsRequired"));
         }
         return yup.array().of(dateSchema).nullable();
       }
@@ -5540,8 +5901,8 @@ var buildFieldValidationSchema = function buildFieldValidationSchema(_ref) {
     case KINDS.regex:
       {
         var regexPattern = fieldData === null || fieldData === void 0 ? void 0 : fieldData.condition;
-        var _schema4 = yup.string().nullable().matches(cleanedRegex(regexPattern), fieldData === null || fieldData === void 0 ? void 0 : fieldData.helpMessage);
-        return isRequired ? _schema4.required(t("validations.thisIsRequired")) : _schema4;
+        var _schema5 = buildSchemaAllowingEmptyValue(yup.string().nullable().matches(cleanedRegex(regexPattern), fieldData === null || fieldData === void 0 ? void 0 : fieldData.helpMessage));
+        return isRequired ? _schema5.required(t$1("validations.thisIsRequired")) : _schema5;
       }
     default:
       return yup.mixed();
@@ -5598,7 +5959,7 @@ var validateField = /*#__PURE__*/function () {
   };
 }();
 var dateTimeToString = function dateTimeToString(dateTime) {
-  return dayjs(dateTime).toString();
+  return dateTime && dayjs(dateTime).toString() || "";
 };
 
 var _excluded$3 = ["name", "id", "kind", "data", "individualSubmit", "formRef", "formRefs", "disabled", "isRequiredColumnName"];
@@ -5655,7 +6016,7 @@ var useFormikFields = function useFormikFields(_ref) {
     } else if (kind === KINDS.multiOption) {
       value = buildArrayToLabelAndValues(value);
     }
-    return value;
+    return value || "";
   };
   var isDropdown = ["single_option", "multi_option"].includes(kind);
   if (isSubmitting && !meta.touched) {
@@ -6162,7 +6523,7 @@ var renderFormFooter = function renderFormFooter(_ref3) {
       disabled: loading
     },
     submitButtonProps: {
-      label: t("labels.saveChanges"),
+      label: t$1("labels.saveChanges"),
       className: "mr-2",
       type: "submit",
       disabled: !dirty,
@@ -6172,97 +6533,97 @@ var renderFormFooter = function renderFormFooter(_ref3) {
 };
 
 var regexValidationSchema = yup.object().shape({
-  condition: yup.string().required(t("validations.regexConditionIsRequired")),
-  helpMessage: yup.string().required(t("validations.regexHelpMessageIsRequired"))
+  condition: yup.string().required(t$1("validations.regexConditionIsRequired")),
+  helpMessage: yup.string().required(t$1("validations.regexHelpMessageIsRequired"))
 });
 var dropDownOptionsValidationSchema = yup.array().of(yup.object().shape({
-  label: yup.string().trim().required(t("validations.fieldOptionIsRequired")),
+  label: yup.string().trim().required(t$1("validations.fieldOptionIsRequired")),
   displayOrder: yup.number()
-})).min(1, t("validations.atLeastFieldOptionIsRequired"));
+})).min(1, t$1("validations.atLeastFieldOptionIsRequired"));
 var FIELD_KINDS = {
   text: {
     value: "text",
-    label: t("fields.kinds.text"),
+    label: t$1("fields.kinds.text"),
     group: 1
   },
   number: {
     value: "number",
-    label: t("fields.kinds.number"),
+    label: t$1("fields.kinds.number"),
     group: 2
   },
   monetary: {
     value: "monetary",
-    label: t("fields.kinds.monetary"),
+    label: t$1("fields.kinds.monetary"),
     group: 2
   },
   single_option: {
     value: "single_option",
-    label: t("fields.kinds.singleOption"),
+    label: t$1("fields.kinds.singleOption"),
     group: 3
   },
   multi_option: {
     value: "multi_option",
-    label: t("fields.kinds.multiOption"),
+    label: t$1("fields.kinds.multiOption"),
     group: 3
   },
   date: {
     value: "date",
-    label: t("fields.kinds.date"),
+    label: t$1("fields.kinds.date"),
     group: 4
   },
   time: {
     value: "time",
-    label: t("fields.kinds.time"),
+    label: t$1("fields.kinds.time"),
     group: 5
   },
   date_range: {
     value: "date_range",
-    label: t("fields.kinds.dateRange"),
+    label: t$1("fields.kinds.dateRange"),
     group: 6
   },
   time_range: {
     value: "time_range",
-    label: t("fields.kinds.timeRange"),
+    label: t$1("fields.kinds.timeRange"),
     group: 7
   },
   text_area: {
     value: "text_area",
-    label: t("fields.kinds.textArea"),
+    label: t$1("fields.kinds.textArea"),
     group: 1
   },
   textarea: {
     value: "textarea",
-    label: t("fields.kinds.textarea"),
+    label: t$1("fields.kinds.textarea"),
     group: 1
   },
   person: {
     value: "person",
-    label: t("fields.kinds.person"),
+    label: t$1("fields.kinds.person"),
     group: 8
   },
   checkbox: {
     value: "checkbox",
-    label: t("fields.kinds.checkbox"),
+    label: t$1("fields.kinds.checkbox"),
     group: 9
   },
   regex: {
     value: "regex",
-    label: t("fields.kinds.regex"),
+    label: t$1("fields.kinds.regex"),
     group: 10
   },
   integer: {
     value: "integer",
-    label: t("fields.kinds.integer"),
+    label: t$1("fields.kinds.integer"),
     group: 2
   },
   decimal: {
     value: "decimal",
-    label: t("fields.kinds.decimal"),
+    label: t$1("fields.kinds.decimal"),
     group: 2
   },
   datetime: {
     value: "datetime",
-    label: t("fields.kinds.datetime"),
+    label: t$1("fields.kinds.datetime"),
     group: 11
   }
 };
@@ -6282,11 +6643,11 @@ var DEFAULT_REGEX_DATA = {
   helpMessage: ""
 };
 var BASIC_FIELD_FORM_VALIDATIONS = {
-  name: yup.string().trim().required(t("validations.fieldNameIsRequired")),
+  name: yup.string().trim().required(t$1("validations.fieldNameIsRequired")),
   isRequired: yup["boolean"](),
   kind: yup.object().shape({
     value: yup.string().required()
-  }).required(t("validations.kindIsRequired")),
+  }).required(t$1("validations.kindIsRequired")),
   data: yup.mixed().when("kind", {
     is: function is(kind) {
       return isRegex(kind === null || kind === void 0 ? void 0 : kind.value);
@@ -6578,7 +6939,7 @@ var buildDefaultColumns = function buildDefaultColumns(_ref) {
   return [{
     key: "name",
     dataIndex: "name",
-    title: t("titles.name"),
+    title: t$1("titles.name"),
     render: function render(name, field) {
       return /*#__PURE__*/React.createElement("div", {
         className: "flex items-center justify-between gap-x-3"
@@ -6595,25 +6956,25 @@ var buildDefaultColumns = function buildDefaultColumns(_ref) {
         onClick: function onClick() {
           return onEditClick(field);
         }
-      }, t("labels.edit")), !field.isSystem && /*#__PURE__*/React.createElement(MenuItem.Button, {
+      }, t$1("labels.edit")), !field.isSystem && /*#__PURE__*/React.createElement(MenuItem.Button, {
         onClick: function onClick() {
           return onDeleteClick(field);
         }
-      }, t("labels.delete")))));
+      }, t$1("labels.delete")))));
     }
   }, {
     key: "kind",
     dataIndex: "kind",
-    title: t("titles.kind"),
+    title: t$1("titles.kind"),
     render: function render(kind) {
       return DISPLAY_KINDS[kind];
     }
   }, {
     key: "isRequired",
     dataIndex: "isRequired",
-    title: t("titles.required"),
+    title: t$1("titles.required"),
     render: function render(boolVal) {
-      return boolVal ? t("common.yes") : t("common.no");
+      return boolVal ? t$1("common.yes") : t$1("common.no");
     }
   }];
 };
@@ -6621,14 +6982,15 @@ var renderMenuBarItems = function renderMenuBarItems(_ref2) {
   var items = _ref2.items,
     isOwnerBased = _ref2.isOwnerBased,
     selectedMenu = _ref2.selectedMenu,
-    handleBlockClick = _ref2.handleBlockClick;
+    handleBlockClick = _ref2.handleBlockClick,
+    nameAliases = _ref2.nameAliases;
   if (isOwnerBased) {
     return items.map(function (item) {
       return /*#__PURE__*/React.createElement(MenuBar.Item, {
         active: selectedMenu === item.id,
         key: item.id,
         label: humanize(item.name),
-        description: t("messages.manageFieldFor", {
+        description: t$1("messages.manageFieldFor", {
           resource: humanize(item.name).toLocaleLowerCase()
         }),
         onClick: handleBlockClick({
@@ -6641,8 +7003,8 @@ var renderMenuBarItems = function renderMenuBarItems(_ref2) {
     return /*#__PURE__*/React.createElement(MenuBar.Item, {
       active: selectedMenu === item,
       key: item,
-      label: humanize(item),
-      description: t("messages.manageFieldFor", {
+      label: nameAliases[item] || humanize(item),
+      description: t$1("messages.manageFieldFor", {
         resource: humanize(item).toLocaleLowerCase()
       }),
       onClick: handleBlockClick({
@@ -6661,7 +7023,7 @@ var renderMenuBarFilters = function renderMenuBarFilters(_ref3) {
     style: "h5",
     textTransform: "uppercase",
     weight: "bold"
-  }, t("titles.filters"))), /*#__PURE__*/React.createElement(MenuBar.Block, {
+  }, t$1("titles.filters"))), /*#__PURE__*/React.createElement(MenuBar.Block, {
     active: selectedState === FIELD_STATES.active,
     count: activeFieldsCount,
     label: fieldStatesTaxonomy.active,
@@ -6681,11 +7043,26 @@ var getDashBoardTitle = function getDashBoardTitle(_ref4) {
   var _findBy;
   var isOwnerBased = _ref4.isOwnerBased,
     owners = _ref4.owners,
-    selectedVal = _ref4.selectedVal;
-  return t("messages.manageFieldFor", {
+    selectedVal = _ref4.selectedVal,
+    nameAliases = _ref4.nameAliases;
+  return t$1("messages.manageFieldFor", {
     resource: isOwnerBased ? (_findBy = findBy({
       id: selectedVal
-    }, owners)) === null || _findBy === void 0 ? void 0 : _findBy.name : selectedVal
+    }, owners)) === null || _findBy === void 0 ? void 0 : _findBy.name : nameAliases[selectedVal] || selectedVal
+  });
+};
+var renderNoDataHelpText = function renderNoDataHelpText(url) {
+  return /*#__PURE__*/React.createElement(Trans, {
+    i18nKey: "helpTexts.noData",
+    components: {
+      a: /*#__PURE__*/React.createElement(Link, {
+        className: "neeto-ui-text-primary-600 underline",
+        target: "_blank",
+        to: {
+          pathname: url
+        }
+      })
+    }
   });
 };
 
@@ -6867,13 +7244,16 @@ var FieldsTable = function FieldsTable(_ref) {
     isLoading = _ref.isLoading,
     rowData = _ref.rowData,
     columnData = _ref.columnData,
-    setIsPaneOpen = _ref.setIsPaneOpen;
+    setIsPaneOpen = _ref.setIsPaneOpen,
+    helpDocUrl = _ref.helpDocUrl;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var showNoDataScreen = !isLoading && isEmpty(rowData);
   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, {
+  }, /*#__PURE__*/React.createElement(NoData, _extends({}, helpDocUrl && {
+    helpText: renderNoDataHelpText(helpDocUrl)
+  }, {
     title: t("messages.noFields"),
     primaryButtonProps: {
       label: t("labels.addField"),
@@ -6881,7 +7261,7 @@ var FieldsTable = function FieldsTable(_ref) {
         return setIsPaneOpen(true);
       }
     }
-  })) : /*#__PURE__*/React.createElement(Table, {
+  }))) : /*#__PURE__*/React.createElement(Table, {
     fixedHeight: true,
     allowRowClick: false,
     columnData: columnData,
@@ -11263,7 +11643,10 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     _ref$showStateFilter = _ref.showStateFilter,
     showStateFilter = _ref$showStateFilter === void 0 ? true : _ref$showStateFilter,
     _ref$fieldStatesTaxon = _ref.fieldStatesTaxonomy,
-    fieldStatesTaxonomy = _ref$fieldStatesTaxon === void 0 ? DEFAULT_FIELD_STATE_TAXONOMY : _ref$fieldStatesTaxon;
+    fieldStatesTaxonomy = _ref$fieldStatesTaxon === void 0 ? DEFAULT_FIELD_STATE_TAXONOMY : _ref$fieldStatesTaxon,
+    helpDocUrl = _ref.helpDocUrl,
+    _ref$nameAliases = _ref.nameAliases,
+    nameAliases = _ref$nameAliases === void 0 ? {} : _ref$nameAliases;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useFieldsDashboard = useFieldsDashboard({
@@ -11298,7 +11681,8 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     handleClosePane = _useFieldsDashboard.handleClosePane,
     handleReorderPaneClose = _useFieldsDashboard.handleReorderPaneClose,
     handleBlockClick = _useFieldsDashboard.handleBlockClick;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MenuBar, {
+  var isMenuBarNeeded = showStateFilter || menuItems.length > 1;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isMenuBarNeeded && /*#__PURE__*/React.createElement(MenuBar, {
     showMenu: isMenuBarOpen,
     title: t("titles.field", PLURAL)
   }, isConfigsLoading ? /*#__PURE__*/React.createElement("div", {
@@ -11307,7 +11691,8 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     isOwnerBased: showOwnersInMenu,
     items: menuItems,
     selectedMenu: selectedMenu,
-    handleBlockClick: handleBlockClick
+    handleBlockClick: handleBlockClick,
+    nameAliases: nameAliases
   }), showStateFilter && renderMenuBarFilters({
     selectedState: selectedState,
     fieldStatesTaxonomy: fieldStatesTaxonomy,
@@ -11316,11 +11701,13 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     handleBlockClick: handleBlockClick
   })), isScreenLoading ? /*#__PURE__*/React.createElement("div", {
     className: "flex w-full flex-grow items-center justify-center"
-  }, /*#__PURE__*/React.createElement(PageLoader, null)) : /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Header, {
-    breadcrumbs: breadcrumbs,
+  }, /*#__PURE__*/React.createElement(PageLoader, null)) : /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Header, _extends({
+    breadcrumbs: breadcrumbs
+  }, isMenuBarNeeded && {
     menuBarToggle: function menuBarToggle() {
       return setIsMenuBarOpen(not);
-    },
+    }
+  }, {
     actionBlock: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button$1, {
       label: t("labels.reorder"),
       style: "secondary",
@@ -11352,15 +11739,17 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     title: humanize(getDashBoardTitle({
       isOwnerBased: showOwnersInMenu,
       owners: owners,
-      selectedVal: selectedMenu
+      selectedVal: selectedMenu,
+      nameAliases: nameAliases
     }))
-  }), showCountSubheader && /*#__PURE__*/React.createElement(SubHeader, {
+  })), showCountSubheader && /*#__PURE__*/React.createElement(SubHeader, {
     leftActionBlock: /*#__PURE__*/React.createElement(Typography, {
       className: "mr-4 font-semibold",
       style: "h4"
     }, "".concat(count, " "), t("titles.field", count > 1 ? PLURAL : SINGULAR).toLocaleLowerCase())
   }), /*#__PURE__*/React.createElement(FieldsTable, {
     columnData: columnData,
+    helpDocUrl: helpDocUrl,
     isLoading: isFieldsFetching || isFieldsLoading,
     rowData: isEmpty(rowData) ? fields : rowData,
     setIsPaneOpen: setIsPaneOpen,
@@ -11391,14 +11780,16 @@ var create = function create(payload) {
 var fetch = function fetch(payload) {
   return axios.get(FIELD_VALUES_URL, payload);
 };
-var destroy = function destroy(id, payload) {
+var destroy = function destroy(_ref) {
+  var id = _ref.id,
+    payload = _ref.payload;
   return axios["delete"](fieldValueUrl(id), {
     data: payload
   });
 };
-var update = function update(_ref) {
-  var id = _ref.id,
-    payload = _ref.payload;
+var update = function update(_ref2) {
+  var id = _ref2.id,
+    payload = _ref2.payload;
   return axios.patch(fieldValueUrl(id), payload);
 };
 var fieldValuesApi = {
@@ -11434,6 +11825,18 @@ var useUpdateFieldValue = function useUpdateFieldValue(options) {
     }
   }));
 };
+var useDeleteFieldValue = function useDeleteFieldValue(options) {
+  var queryClient = useQueryClient();
+  return useMutation(fieldValuesApi.destroy, _objectSpread$1(_objectSpread$1({}, options), {}, {
+    onSuccess: function onSuccess() {
+      for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+        args[_key3] = arguments[_key3];
+      }
+      options === null || options === void 0 ? void 0 : options.onSuccess.apply(options, args);
+      queryClient.invalidateQueries([QUERY_KEYS.FIELD_VALUES]);
+    }
+  }));
+};
 
 var FieldValueInputWrapper = function FieldValueInputWrapper(_ref) {
   var field = _ref.field,
@@ -11452,6 +11855,14 @@ 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; }
 var FieldValuesContainer = function FieldValuesContainer(_ref) {
@@ -11498,7 +11909,9 @@ var FieldValuesContainer = function FieldValuesContainer(_ref) {
     createFieldValue = _useCreateFieldValue.mutate;
   var _useUpdateFieldValue = useUpdateFieldValue(queryOptions),
     updateFieldValue = _useUpdateFieldValue.mutate;
-  var handleSubmit = function handleSubmit(values$1) {
+  var _useDeleteFieldValue = useDeleteFieldValue(queryOptions),
+    deleteFieldValue = _useDeleteFieldValue.mutate;
+  var handleSubmit = function handleSubmit(field, values$1) {
     var fieldValue = head(values(values$1));
     var payload = {
       fieldValue: fieldValue,
@@ -11506,10 +11919,17 @@ var FieldValuesContainer = function FieldValuesContainer(_ref) {
       resourceId: resourceId,
       ownerId: isEmpty(ownerId) ? undefined : ownerId
     };
-    fieldValue.id ? updateFieldValue({
-      id: fieldValue.id,
-      payload: payload
-    }) : createFieldValue(payload);
+    if (isFieldValueEmpty(field.kind, fieldValue.data)) {
+      deleteFieldValue({
+        id: fieldValue.id,
+        payload: payload
+      });
+    } else {
+      fieldValue.id ? updateFieldValue({
+        id: fieldValue.id,
+        payload: payload
+      }) : createFieldValue(payload);
+    }
   };
   var fields = propFields || fetchedFields;
   return /*#__PURE__*/React.createElement("div", {
@@ -11532,7 +11952,9 @@ var FieldValuesContainer = function FieldValuesContainer(_ref) {
         style: "h5"
       }, capitalize$1(field.name)), /*#__PURE__*/React.createElement(FieldValueInputWrapper, {
         className: fieldClassName,
-        onSubmit: handleSubmit,
+        onSubmit: function onSubmit(values) {
+          return handleSubmit(field, values);
+        },
         field: field,
         fieldValues: fieldValues
       }, /*#__PURE__*/React.createElement("div", {