@bigbinary/neeto-tags-frontend 0.0.51 → 0.0.52

package/dist/index.js

@@ -19,14 +19,13 @@ import { Plus, MenuHorizontal, Merge as Merge$1 } from '@bigbinary/neeto-icons';
 import { Typography, Tag, Select, Button, Dropdown, Toastr, Pane, PageLoader, NoData, Table, Alert, Input as Input$1, Modal } from '@bigbinary/neetoui';
 import { useHistory, Switch, Route } from 'react-router-dom';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import * as yup from 'yup';
 import ReactDOM from 'react-dom';
 import _extends$1 from '@babel/runtime/helpers/esm/extends';
 import _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';
 import axios from 'axios';
 import { Container, Header, SubHeader, MenuBar } from '@bigbinary/neetoui/layouts';
-import { Formik, Form } from 'formik';
-import { Input, Textarea } from '@bigbinary/neetoui/formik';
+import * as yup from 'yup';
+import { Form, Input, Textarea } from '@bigbinary/neetoui/formik';
 import classames from 'classnames';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _typeof$1 from '@babel/runtime/helpers/typeof';
@@ -1977,8 +1976,8 @@ function transformOptions(options) {
   return options;
 }
 
-function ownKeys$9(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$9(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$a(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$a(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 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() {}
@@ -2038,9 +2037,9 @@ var I18n = function (_EventEmitter) {
         }
       }
       var defOpts = get();
-      this.options = _objectSpread$9(_objectSpread$9(_objectSpread$9({}, defOpts), this.options), transformOptions(options));
+      this.options = _objectSpread$a(_objectSpread$a(_objectSpread$a({}, defOpts), this.options), transformOptions(options));
       if (this.options.compatibilityAPI !== 'v1') {
-        this.options.interpolation = _objectSpread$9(_objectSpread$9({}, defOpts.interpolation), this.options.interpolation);
+        this.options.interpolation = _objectSpread$a(_objectSpread$a({}, defOpts.interpolation), this.options.interpolation);
       }
       if (options.keySeparator !== undefined) {
         this.options.userDefinedKeySeparator = options.keySeparator;
@@ -2318,7 +2317,7 @@ var I18n = function (_EventEmitter) {
           }
           options = _this5.options.overloadTranslationOptionHandler([key, opts].concat(rest));
         } else {
-          options = _objectSpread$9({}, opts);
+          options = _objectSpread$a({}, opts);
         }
         options.lng = options.lng || fixedT.lng;
         options.lngs = options.lngs || fixedT.lngs;
@@ -2445,7 +2444,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$9(_objectSpread$9(_objectSpread$9({}, this.options), options), {
+      var mergedOptions = _objectSpread$a(_objectSpread$a(_objectSpread$a({}, this.options), options), {
         isClone: true
       });
       var clone = new I18n(mergedOptions);
@@ -2456,7 +2455,7 @@ var I18n = function (_EventEmitter) {
       membersToCopy.forEach(function (m) {
         clone[m] = _this8[m];
       });
-      clone.services = _objectSpread$9({}, this.services);
+      clone.services = _objectSpread$a({}, this.services);
       clone.services.utils = {
         hasLoadedNamespace: clone.hasLoadedNamespace.bind(clone)
       };
@@ -2647,9 +2646,9 @@ var unescape = function unescape(text) {
   return text.replace(matchHtmlEntity, unescapeHtmlEntity);
 };
 
-function ownKeys$8(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$9(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$8(Object(source), true).forEach(function (key) { _defineProperty$1(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$9(Object(source), true).forEach(function (key) { _defineProperty$1(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var defaultOptions = {
   bindI18n: 'languageChanged',
   bindI18nStore: '',
@@ -2662,7 +2661,7 @@ var defaultOptions = {
 };
 function setDefaults() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  defaultOptions = _objectSpread$8(_objectSpread$8({}, defaultOptions), options);
+  defaultOptions = _objectSpread$9(_objectSpread$9({}, defaultOptions), options);
 }
 function getDefaults() {
   return defaultOptions;
@@ -2679,9 +2678,9 @@ function getI18n() {
 var _excluded$1 = ["format"],
     _excluded2 = ["children", "count", "parent", "i18nKey", "context", "tOptions", "values", "defaults", "components", "ns", "i18n", "t", "shouldUnescape"];
 
-function ownKeys$7(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$8(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$7(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$7(Object(source), true).forEach(function (key) { _defineProperty$1(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$8(Object(source), true).forEach(function (key) { _defineProperty$1(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 function hasChildren(node, checkLength) {
   if (!node) return false;
@@ -2707,7 +2706,7 @@ function getAsArray(data) {
 }
 
 function mergeProps(source, target) {
-  var newTarget = _objectSpread$7({}, target);
+  var newTarget = _objectSpread$8({}, target);
 
   newTarget.props = Object.assign(source.props, target.props);
   return newTarget;
@@ -2777,7 +2776,7 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
   getData(children);
   var ast = c.parse("<0>".concat(targetString, "</0>"));
 
-  var opts = _objectSpread$7(_objectSpread$7({}, data), combinedTOpts);
+  var opts = _objectSpread$8(_objectSpread$8({}, data), combinedTOpts);
 
   function renderInner(child, node, rootReactNode) {
     var childs = getChildren(child);
@@ -2787,7 +2786,7 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
 
   function pushTranslatedJSX(child, inner, mem, i, isVoid) {
     if (child.dummy) child.children = inner;
-    mem.push(cloneElement(child, _objectSpread$7(_objectSpread$7({}, child.props), {}, {
+    mem.push(cloneElement(child, _objectSpread$8(_objectSpread$8({}, child.props), {}, {
       key: i
     }), isVoid ? undefined : inner));
   }
@@ -2819,7 +2818,7 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
           } else if (isEmptyTransWithHTML) {
           var _inner = mapAST(reactNodes, node.children, rootReactNode);
 
-          mem.push(cloneElement(child, _objectSpread$7(_objectSpread$7({}, child.props), {}, {
+          mem.push(cloneElement(child, _objectSpread$8(_objectSpread$8({}, child.props), {}, {
             key: i
           }), _inner));
         } else if (Number.isNaN(parseFloat(node.name))) {
@@ -2850,11 +2849,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(cloneElement(child, _objectSpread$7(_objectSpread$7({}, child.props), {}, {
+          mem.push(cloneElement(child, _objectSpread$8(_objectSpread$8({}, child.props), {}, {
             key: i
           }), translationContent));
         } else {
-          mem.push(cloneElement(child, _objectSpread$7(_objectSpread$7({}, child.props), {}, {
+          mem.push(cloneElement(child, _objectSpread$8(_objectSpread$8({}, child.props), {}, {
             key: i
           })));
         }
@@ -2913,7 +2912,7 @@ function Trans$1(_ref) {
 
   if (context) tOptions.context = context;
 
-  var reactI18nextOptions = _objectSpread$7(_objectSpread$7({}, getDefaults()), i18n.options && i18n.options.react);
+  var reactI18nextOptions = _objectSpread$8(_objectSpread$8({}, getDefaults()), i18n.options && i18n.options.react);
 
   var namespaces = ns || t.ns || i18n.options && i18n.options.defaultNS;
   namespaces = typeof namespaces === 'string' ? [namespaces] : namespaces || ['translation'];
@@ -2921,13 +2920,13 @@ function Trans$1(_ref) {
   var hashTransKey = reactI18nextOptions.hashTransKey;
   var key = i18nKey || (hashTransKey ? hashTransKey(defaultValue) : defaultValue);
   var interpolationOverride = values ? tOptions.interpolation : {
-    interpolation: _objectSpread$7(_objectSpread$7({}, tOptions.interpolation), {}, {
+    interpolation: _objectSpread$8(_objectSpread$8({}, tOptions.interpolation), {}, {
       prefix: '#$?',
       suffix: '?$#'
     })
   };
 
-  var combinedTOpts = _objectSpread$7(_objectSpread$7(_objectSpread$7(_objectSpread$7({}, tOptions), {}, {
+  var combinedTOpts = _objectSpread$8(_objectSpread$8(_objectSpread$8(_objectSpread$8({}, tOptions), {}, {
     count: count
   }, values), interpolationOverride), {}, {
     defaultValue: defaultValue,
@@ -2977,9 +2976,9 @@ var ReportNamespaces = function () {
 
 var _excluded = ["children", "count", "parent", "i18nKey", "context", "tOptions", "values", "defaults", "components", "ns", "i18n", "t", "shouldUnescape"];
 
-function ownKeys$6(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$7(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$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$6(Object(source), true).forEach(function (key) { _defineProperty$1(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$7(Object(source), true).forEach(function (key) { _defineProperty$1(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function Trans(_ref) {
   var children = _ref.children,
       count = _ref.count,
@@ -3003,7 +3002,7 @@ function Trans(_ref) {
 
   var i18n = i18nFromProps || i18nFromContext || getI18n();
   var t = tFromProps || i18n && i18n.t.bind(i18n);
-  return Trans$1(_objectSpread$6({
+  return Trans$1(_objectSpread$7({
     children: children,
     count: count,
     parent: parent,
@@ -3020,9 +3019,9 @@ function Trans(_ref) {
   }, additionalProps));
 }
 
-function ownKeys$5(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$6(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$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$5(Object(source), true).forEach(function (key) { _defineProperty$1(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$6(Object(source), true).forEach(function (key) { _defineProperty$1(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 var usePrevious = function usePrevious(value, ignore) {
   var ref = useRef();
@@ -3059,7 +3058,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$5(_objectSpread$5(_objectSpread$5({}, getDefaults()), i18n.options.react), props);
+  var i18nOptions = _objectSpread$6(_objectSpread$6(_objectSpread$6({}, getDefaults()), i18n.options.react), props);
 
   var useSuspense = i18nOptions.useSuspense,
       keyPrefix = i18nOptions.keyPrefix;
@@ -3333,24 +3332,6 @@ var COMMON_COLUMNS = [{
   },
   width: "40%"
 }];
-var TAG_SCHEMA = yup.object().shape({
-  name: yup.string().typeError(instance.t("type", {
-    what: instance.t("name"),
-    type: instance.t("types.string")
-  })).required(instance.t("required", {
-    what: instance.t("name")
-  })).max(50, instance.t("maxLength", {
-    what: instance.t("name"),
-    length: 50
-  })),
-  description: yup.string().typeError(instance.t("type", {
-    what: instance.t("description"),
-    type: instance.t("types.string")
-  })).nullable().max(255, instance.t("maxLength", {
-    what: instance.t("description"),
-    length: 255
-  }))
-});
 var PANE_TYPES = {
   CREATE: "CREATE_TAG",
   EDIT: "EDIT_TAG"
@@ -6619,15 +6600,15 @@ var queryClient = new QueryClient({
   })
 });
 
-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$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty$1(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 TAG_KEY = "tag-key";
 var STALE_TIME = 3200000;
 var useFetchTags = function useFetchTags(params) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   return useQuery([TAG_KEY, Object.values(params)], function () {
     return tagsApi.fetch(params);
-  }, _objectSpread$4({
+  }, _objectSpread$5({
     staleTime: STALE_TIME,
     select: function select(response) {
       return response.data || response;
@@ -6692,13 +6673,38 @@ var NO_DATA_PRIMARY_BUTTON_PROPS$1 = {
     what: instance.t("tag").toLocaleLowerCase()
   })
 };
+var TAG_NAME_MAX_LENGTH = 50;
+var TAG_DESCRIPTION_ROW_LENGTH = 3;
+var TAG_DESCRIPTION_MAX_LENGTH = 255;
+var TAG_SCHEMA = yup.object().shape({
+  name: yup.string().typeError(instance.t("type", {
+    what: instance.t("name"),
+    type: instance.t("types.string")
+  })).required(instance.t("required", {
+    what: instance.t("name")
+  })).max(TAG_NAME_MAX_LENGTH, instance.t("maxLength", {
+    what: instance.t("name"),
+    length: TAG_NAME_MAX_LENGTH
+  })),
+  description: yup.string().typeError(instance.t("type", {
+    what: instance.t("description"),
+    type: instance.t("types.string")
+  })).nullable().max(TAG_DESCRIPTION_MAX_LENGTH, instance.t("maxLength", {
+    what: instance.t("description"),
+    length: TAG_DESCRIPTION_MAX_LENGTH
+  }))
+});
+var TAGS_FORMIK_PROPS = {
+  validateOnBlur: true,
+  validateOnChange: true,
+  validationSchema: TAG_SCHEMA
+};
 
 var useTagsForm = function useTagsForm(_ref) {
   var createTags = _ref.createTags,
     goToFirstPage = _ref.goToFirstPage,
     isEdit = _ref.isEdit,
-    onPaneClose = _ref.onPaneClose,
-    setHasSubmitted = _ref.setHasSubmitted,
+    onClose = _ref.onClose,
     tagType = _ref.tagType,
     updateTags = _ref.updateTags;
   var tagModification = isEdit ? useUpdateTag : useCreateTag;
@@ -6709,7 +6715,6 @@ var useTagsForm = function useTagsForm(_ref) {
   var handleSubmit = function handleSubmit(values, _ref2) {
     var _values$description;
     var resetForm = _ref2.resetForm;
-    setHasSubmitted(true);
     values.description = values === null || values === void 0 ? void 0 : (_values$description = values.description) === null || _values$description === void 0 ? void 0 : _values$description.trim();
     var tagData = {
       payload: {
@@ -6725,7 +6730,7 @@ var useTagsForm = function useTagsForm(_ref) {
         var _tagOperation$onSucce;
         !isEdit && goToFirstPage();
         tagOperation === null || tagOperation === void 0 ? void 0 : (_tagOperation$onSucce = tagOperation.onSuccess) === null || _tagOperation$onSucce === void 0 ? void 0 : _tagOperation$onSucce.callback();
-        onPaneClose();
+        onClose();
       },
       onError: function onError() {
         resetForm();
@@ -6738,6 +6743,8 @@ var useTagsForm = function useTagsForm(_ref) {
   };
 };
 
+function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty$1(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 ManageTags = function ManageTags(_ref) {
   var createTags = _ref.createTags,
     goToFirstPage = _ref.goToFirstPage,
@@ -6748,32 +6755,23 @@ var ManageTags = function ManageTags(_ref) {
     updateTags = _ref.updateTags;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    hasSubmitted = _useState2[0],
-    setHasSubmitted = _useState2[1];
   var isEdit = type === PANE_TYPES.EDIT;
-  var initValues = isEdit ? tag : INITIAL_TAG_VALUES;
-  var inputRef = useRef(null);
-  var onPaneClose = function onPaneClose() {
-    setHasSubmitted(false);
-    onClose();
-  };
+  var initialValues = isEdit ? tag : INITIAL_TAG_VALUES;
+  var inputReference = useRef(null);
   var _useTagsForm = useTagsForm({
       createTags: createTags,
       goToFirstPage: goToFirstPage,
       isEdit: isEdit,
-      onPaneClose: onPaneClose,
-      setHasSubmitted: setHasSubmitted,
+      onClose: onClose,
       tagType: tagType,
       updateTags: updateTags
     }),
     handleSubmit = _useTagsForm.handleSubmit,
     isSubmitting = _useTagsForm.isSubmitting;
   return /*#__PURE__*/React.createElement(Pane, {
-    initialFocusRef: inputRef,
+    initialFocusRef: inputReference,
     isOpen: !!type,
-    onClose: onPaneClose
+    onClose: onClose
   }, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
     style: "h2",
     weight: "semibold"
@@ -6781,32 +6779,28 @@ var ManageTags = function ManageTags(_ref) {
     what: t("tag").toLocaleLowerCase()
   }) : t("addNew", {
     what: t("tag").toLocaleLowerCase()
-  }))), /*#__PURE__*/React.createElement(Formik, {
-    initialValues: initValues,
-    onSubmit: handleSubmit,
-    validateOnBlur: hasSubmitted,
-    validateOnChange: hasSubmitted,
-    validationSchema: TAG_SCHEMA
+  }))), /*#__PURE__*/React.createElement(Form, {
+    formikProps: _objectSpread$4(_objectSpread$4({}, TAGS_FORMIK_PROPS), {}, {
+      initialValues: initialValues,
+      onSubmit: handleSubmit
+    })
   }, function (_ref2) {
     var dirty = _ref2.dirty;
-    return /*#__PURE__*/React.createElement(Form, {
-      noValidate: true
-    }, /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement("div", {
-      className: "neeto-ui-flex neeto-ui-w-full neeto-ui-flex-col"
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement("div", {
+      className: "neeto-ui-flex neeto-ui-w-full neeto-ui-flex-col neeto-ui-gap-4"
     }, /*#__PURE__*/React.createElement(Input, {
       required: true,
       name: "name",
-      label: "".concat(t("tag"), " ").concat(t("name").toLocaleLowerCase()),
+      label: t("name"),
       "data-cy": "tag-name-text-field",
-      maxLength: 50,
-      className: "neeto-ui-mb-4",
-      ref: inputRef
+      maxLength: TAG_NAME_MAX_LENGTH,
+      ref: inputReference
     }), /*#__PURE__*/React.createElement(Textarea, {
       name: "description",
       label: t("description"),
-      rows: 3,
+      rows: TAG_DESCRIPTION_ROW_LENGTH,
       "data-cy": "tag-description-text-area",
-      maxLength: 255
+      maxLength: TAG_DESCRIPTION_MAX_LENGTH
     }))), /*#__PURE__*/React.createElement(Pane.Footer, {
       className: "neeto-ui-gap-2"
     }, /*#__PURE__*/React.createElement(Button, {
@@ -6814,15 +6808,12 @@ var ManageTags = function ManageTags(_ref) {
       disabled: !dirty || isSubmitting,
       label: t("saveChanges"),
       loading: isSubmitting,
-      onClick: function onClick() {
-        return setHasSubmitted(true);
-      },
       style: "primary",
       type: "submit"
     }), /*#__PURE__*/React.createElement(Button, {
       "data-cy": "neeto-tags-manage-tag-cancel-button",
       label: t("cancel"),
-      onClick: onPaneClose,
+      onClick: onClose,
       style: "text"
     })));
   }));