@bigbinary/neeto-team-members-frontend 2.4.9 → 2.4.10

package/dist/index.esm.js

@@ -4,8 +4,8 @@ import ReactDOM from 'react-dom';
 import axios from 'axios';
 import { Toastr, Tooltip, Button, Typography, Checkbox, Pane, Dropdown, Alert, Input as Input$1, PageLoader, Label, Avatar, Tag, Table as Table$1 } from '@bigbinary/neetoui';
 import { Header as Header$2, Container, MenuBar, SubHeader as SubHeader$1 } from '@bigbinary/neetoui/layouts';
-import { useFormikContext, Formik, Form } from 'formik';
-import { Input, Textarea, MultiEmailInput, Radio } from '@bigbinary/neetoui/formik';
+import { useFormikContext } from 'formik';
+import { Form, Input, Textarea, MultiEmailInput, Radio } from '@bigbinary/neetoui/formik';
 import * as yup from 'yup';
 import { object, string } from 'yup';
 import classnames from 'classnames';
@@ -140,9 +140,9 @@ function _toArray(arr) {
   return _arrayWithHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _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$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$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$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 consoleLogger = {
   type: 'logger',
@@ -229,7 +229,7 @@ var Logger = function () {
   }, {
     key: "create",
     value: function create(moduleName) {
-      return new Logger(this.logger, _objectSpread$b(_objectSpread$b({}, {
+      return new Logger(this.logger, _objectSpread$c(_objectSpread$c({}, {
         prefix: "".concat(this.prefix, ":").concat(moduleName, ":")
       }), this.options));
     }
@@ -3421,9 +3421,9 @@ var unescape = function unescape(text) {
   return text.replace(matchHtmlEntity, unescapeHtmlEntity);
 };
 
-function ownKeys$a(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$b(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$a(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$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; }
 var defaultOptions = {
   bindI18n: 'languageChanged',
   bindI18nStore: '',
@@ -3438,7 +3438,7 @@ var i18nInstance;
 var I18nContext = createContext();
 function setDefaults() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  defaultOptions = _objectSpread$a(_objectSpread$a({}, defaultOptions), options);
+  defaultOptions = _objectSpread$b(_objectSpread$b({}, defaultOptions), options);
 }
 function getDefaults() {
   return defaultOptions;
@@ -3565,9 +3565,9 @@ function hasLoadedNamespace(ns, i18n) {
 var _excluded$2 = ["format"],
     _excluded2$2 = ["children", "count", "parent", "i18nKey", "context", "tOptions", "values", "defaults", "components", "ns", "i18n", "t", "shouldUnescape"];
 
-function ownKeys$9(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$a(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$9(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$a(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 function hasChildren(node, checkLength) {
   if (!node) return false;
@@ -3593,7 +3593,7 @@ function getAsArray(data) {
 }
 
 function mergeProps(source, target) {
-  var newTarget = _objectSpread$9({}, target);
+  var newTarget = _objectSpread$a({}, target);
 
   newTarget.props = Object.assign(source.props, target.props);
   return newTarget;
@@ -3663,7 +3663,7 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
   getData(children);
   var ast = c.parse("<0>".concat(targetString, "</0>"));
 
-  var opts = _objectSpread$9(_objectSpread$9({}, data), combinedTOpts);
+  var opts = _objectSpread$a(_objectSpread$a({}, data), combinedTOpts);
 
   function renderInner(child, node, rootReactNode) {
     var childs = getChildren(child);
@@ -3673,7 +3673,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$9(_objectSpread$9({}, child.props), {}, {
+    mem.push(cloneElement(child, _objectSpread$a(_objectSpread$a({}, child.props), {}, {
       key: i
     }), isVoid ? undefined : inner));
   }
@@ -3705,7 +3705,7 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
           } else if (isEmptyTransWithHTML) {
           var _inner = mapAST(reactNodes, node.children, rootReactNode);
 
-          mem.push(cloneElement(child, _objectSpread$9(_objectSpread$9({}, child.props), {}, {
+          mem.push(cloneElement(child, _objectSpread$a(_objectSpread$a({}, child.props), {}, {
             key: i
           }), _inner));
         } else if (Number.isNaN(parseFloat(node.name))) {
@@ -3736,11 +3736,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$9(_objectSpread$9({}, child.props), {}, {
+          mem.push(cloneElement(child, _objectSpread$a(_objectSpread$a({}, child.props), {}, {
             key: i
           }), translationContent));
         } else {
-          mem.push(cloneElement(child, _objectSpread$9(_objectSpread$9({}, child.props), {}, {
+          mem.push(cloneElement(child, _objectSpread$a(_objectSpread$a({}, child.props), {}, {
             key: i
           })));
         }
@@ -3803,7 +3803,7 @@ function Trans(_ref) {
 
   if (context) tOptions.context = context;
 
-  var reactI18nextOptions = _objectSpread$9(_objectSpread$9({}, getDefaults()), i18n.options && i18n.options.react);
+  var reactI18nextOptions = _objectSpread$a(_objectSpread$a({}, getDefaults()), i18n.options && i18n.options.react);
 
   var namespaces = ns || t.ns || defaultNSFromContext || i18n.options && i18n.options.defaultNS;
   namespaces = typeof namespaces === 'string' ? [namespaces] : namespaces || ['translation'];
@@ -3811,13 +3811,13 @@ function Trans(_ref) {
   var hashTransKey = reactI18nextOptions.hashTransKey;
   var key = i18nKey || (hashTransKey ? hashTransKey(defaultValue) : defaultValue);
   var interpolationOverride = values ? tOptions.interpolation : {
-    interpolation: _objectSpread$9(_objectSpread$9({}, tOptions.interpolation), {}, {
+    interpolation: _objectSpread$a(_objectSpread$a({}, tOptions.interpolation), {}, {
       prefix: '#$?',
       suffix: '?$#'
     })
   };
 
-  var combinedTOpts = _objectSpread$9(_objectSpread$9(_objectSpread$9(_objectSpread$9({}, tOptions), {}, {
+  var combinedTOpts = _objectSpread$a(_objectSpread$a(_objectSpread$a(_objectSpread$a({}, tOptions), {}, {
     count: count
   }, values), interpolationOverride), {}, {
     defaultValue: defaultValue,
@@ -3859,9 +3859,9 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
-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(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(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 usePrevious = function usePrevious(value, ignore) {
   var ref = useRef();
@@ -3898,7 +3898,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$8(_objectSpread$8(_objectSpread$8({}, getDefaults()), i18n.options.react), props);
+  var i18nOptions = _objectSpread$9(_objectSpread$9(_objectSpread$9({}, getDefaults()), i18n.options.react), props);
 
   var useSuspense = i18nOptions.useSuspense,
       keyPrefix = i18nOptions.keyPrefix;
@@ -7449,11 +7449,11 @@ const QUERY_KEYS = {
   PERMISSIONS: "neeto-team-members-permissions"
 };
 
-function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const useFetchPermissions = function () {
   let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return useQuery(QUERY_KEYS.PERMISSIONS, permissionsApi.fetch, _objectSpread$7({
+  return useQuery(QUERY_KEYS.PERMISSIONS, permissionsApi.fetch, _objectSpread$8({
     staleTime: DEFAULT_STALE_TIME,
     select: response => response.permissions || response.data.permissions
   }, options));
@@ -7475,11 +7475,11 @@ const organizationRolesApi = {
 const _excluded$1 = ["onSuccess"],
   _excluded2$1 = ["onSuccess"],
   _excluded3$1 = ["onSuccess"];
-function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const useFetchRoles = function () {
   let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return useQuery(QUERY_KEYS.ROLES, organizationRolesApi.fetch, _objectSpread$6({
+  return useQuery(QUERY_KEYS.ROLES, organizationRolesApi.fetch, _objectSpread$7({
     staleTime: DEFAULT_STALE_TIME,
     select: response => response.organizationRoles || response.data.organizationRoles
   }, options));
@@ -7487,7 +7487,7 @@ const useFetchRoles = function () {
 const useCreateRole = _ref => {
   let onSuccess = _ref.onSuccess,
     options = _objectWithoutProperties(_ref, _excluded$1);
-  return useMutation(organizationRolesApi.create, _objectSpread$6({
+  return useMutation(organizationRolesApi.create, _objectSpread$7({
     onSuccess: response => {
       queryClient.setQueriesData(QUERY_KEYS.ROLES, cachedData => {
         if (!!cachedData.data && !!cachedData.data.organizationRoles) {
@@ -7507,7 +7507,7 @@ const useUpdateRole = _ref2 => {
     let id = _ref3.id,
       payload = _ref3.payload;
     return organizationRolesApi.update(id, payload);
-  }, _objectSpread$6({
+  }, _objectSpread$7({
     onSuccess: response => {
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS);
       queryClient.setQueriesData(QUERY_KEYS.ROLES, cachedData => {
@@ -7529,7 +7529,7 @@ const useDestroyRole = _ref4 => {
     let id = _ref5.id,
       payload = _ref5.payload;
     return organizationRolesApi.destroy(id, payload);
-  }, _objectSpread$6({
+  }, _objectSpread$7({
     onSuccess: response => {
       queryClient.setQueriesData(QUERY_KEYS.ROLES, cachedData => {
         if (!!cachedData.data && !!cachedData.data.organizationRoles) {
@@ -9043,6 +9043,12 @@ const ADD_ROLE_FORM_VALIDATION_SCHEMA = object({
     limit: 255
   }))
 });
+const ROLE_FORMIK_PROPS = {
+  initialValues: ADD_ROLE_FORM_INITIAL_VALUES,
+  validateOnBlur: false,
+  validateOnChange: false,
+  validationSchema: ADD_ROLE_FORM_VALIDATION_SCHEMA
+};
 
 const Permissions = _ref => {
   let permissions = _ref.permissions;
@@ -9099,8 +9105,8 @@ const Permissions = _ref => {
   }))));
 };
 
-function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const New = _ref => {
   let isOpen = _ref.isOpen,
     onClose = _ref.onClose,
@@ -9114,7 +9120,7 @@ const New = _ref => {
     createRole = _useCreateRole.mutate,
     isSubmitting = _useCreateRole.isLoading;
   const handleFormSubmit = formValues => {
-    const modifiedFormValues = _objectSpread$5(_objectSpread$5({}, formValues), {}, {
+    const modifiedFormValues = _objectSpread$6(_objectSpread$6({}, formValues), {}, {
       description: formValues.description.trim()
     });
     createRole({
@@ -9129,18 +9135,15 @@ const New = _ref => {
     style: "h2"
   }, t("common.add_", {
     what: t("common.role", SINGULAR).toLocaleLowerCase()
-  }))), /*#__PURE__*/React.createElement(Formik, {
-    initialValues: ADD_ROLE_FORM_INITIAL_VALUES,
-    onSubmit: handleFormSubmit,
-    validateOnBlur: false,
-    validateOnChange: false,
-    validationSchema: ADD_ROLE_FORM_VALIDATION_SCHEMA
+  }))), /*#__PURE__*/React.createElement(Form, {
+    noValidate: true,
+    formikProps: _objectSpread$6(_objectSpread$6({}, ROLE_FORMIK_PROPS), {}, {
+      onSubmit: handleFormSubmit
+    }),
+    ref: formReference
   }, _ref2 => {
     let dirty = _ref2.dirty;
-    return /*#__PURE__*/React.createElement(Form, {
-      ref: formReference,
-      noValidate: true
-    }, /*#__PURE__*/React.createElement(ScrollToErrorField, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ScrollToErrorField, {
       formRef: formReference
     }), /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement("div", {
       className: "ntm-roles-pane__body"
@@ -9473,8 +9476,8 @@ const Delete = _ref => {
   });
 };
 
-function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const Edit = _ref => {
   let isOpen = _ref.isOpen,
     onClose = _ref.onClose,
@@ -9493,7 +9496,7 @@ const Edit = _ref => {
   };
   const handleFormSubmit = formValues => {
     const payload = {
-      organizationRole: _objectSpread$4(_objectSpread$4(_objectSpread$4({}, selectedRole), formValues), {}, {
+      organizationRole: _objectSpread$5(_objectSpread$5(_objectSpread$5({}, selectedRole), formValues), {}, {
         description: formValues.description.trim()
       })
     };
@@ -9510,18 +9513,16 @@ const Edit = _ref => {
     style: "h2"
   }, t("common.update_", {
     what: t("common.role", SINGULAR).toLocaleLowerCase()
-  }))), /*#__PURE__*/React.createElement(Formik, {
-    initialValues: initialValues,
-    onSubmit: handleFormSubmit,
-    validateOnBlur: false,
-    validateOnChange: false,
-    validationSchema: ADD_ROLE_FORM_VALIDATION_SCHEMA
+  }))), /*#__PURE__*/React.createElement(Form, {
+    noValidate: true,
+    formikProps: _objectSpread$5(_objectSpread$5({}, ROLE_FORMIK_PROPS), {}, {
+      initialValues,
+      onSubmit: handleFormSubmit
+    }),
+    ref: formReference
   }, _ref2 => {
     let dirty = _ref2.dirty;
-    return /*#__PURE__*/React.createElement(Form, {
-      ref: formReference,
-      noValidate: true
-    }, /*#__PURE__*/React.createElement(ScrollToErrorField, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ScrollToErrorField, {
       formRef: formReference
     }), /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement("div", {
       className: "ntm-roles-pane__body"
@@ -9832,12 +9833,12 @@ const teamsApi = {
 const _excluded = ["onSuccess"],
   _excluded2 = ["onSuccess"],
   _excluded3 = ["onSuccess"];
-function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const useFetchMembers = function () {
   let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return useQuery([QUERY_KEYS.TEAMS, params], () => teamsApi.fetch(params), _objectSpread$3({
+  return useQuery([QUERY_KEYS.TEAMS, params], () => teamsApi.fetch(params), _objectSpread$4({
     staleTime: DEFAULT_STALE_TIME,
     select: response => response.data || response,
     keepPreviousData: true
@@ -9846,7 +9847,7 @@ const useFetchMembers = function () {
 const useCreateMember = _ref => {
   let onSuccess = _ref.onSuccess,
     options = _objectWithoutProperties(_ref, _excluded);
-  return useMutation(teamsApi.create, _objectSpread$3({
+  return useMutation(teamsApi.create, _objectSpread$4({
     onSuccess: response => {
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS);
       Toastr.success(response.ntmNotice || response.data.ntmNotice);
@@ -9861,7 +9862,7 @@ const useUpdateMember = _ref2 => {
     let id = _ref3.id,
       payload = _ref3.payload;
     return teamsApi.update(id, payload);
-  }, _objectSpread$3({
+  }, _objectSpread$4({
     onSuccess: response => {
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS);
       Toastr.success(response.ntmNotice || response.data.ntmNotice);
@@ -9872,7 +9873,7 @@ const useUpdateMember = _ref2 => {
 const useBulkUpdateMembers = _ref4 => {
   let onSuccess = _ref4.onSuccess,
     options = _objectWithoutProperties(_ref4, _excluded3);
-  return useMutation(teamsApi.bulkUpdate, _objectSpread$3({
+  return useMutation(teamsApi.bulkUpdate, _objectSpread$4({
     onSuccess: response => {
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS);
       Toastr.success(response.ntmNotice || response.data.ntmNotice);
@@ -10774,8 +10775,8 @@ var pluralize$1 = {exports: {}};
 
 var pluralize = pluralize$1.exports;
 
-function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const renderNameColumn = (_ref, diplayStatusTag) => {
   let displayName = _ref.displayName,
     imageUrl = _ref.profileImageUrl,
@@ -10913,7 +10914,7 @@ const renderUpdateAlert = (field, props) => {
   }
   return field === "title" ? getDefaultAlertTitle(props) : getDefaultAlertMessage(props);
 };
-const getSearchParams = (page, filter) => new URLSearchParams(_objectSpread$2(_objectSpread$2({}, page), {}, {
+const getSearchParams = (page, filter) => new URLSearchParams(_objectSpread$3(_objectSpread$3({}, page), {}, {
   filter: filter.toLowerCase()
 })).toString();
 const handlePageChange = (setFilters, filter) => (page, results) => {
@@ -10935,15 +10936,15 @@ const getMetaName = curry((metaName, count) => {
 });
 const clearSelectedMembers = (previousCategory, currentCategory) => isNotEqual(previousCategory, currentCategory) && isNotEqual(currentCategory, "ALL");
 
-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; }
 const MULTIPLE_EMAIL_INPUT_VALIDATION_SCHEMA = {
   emails: yup.array().min(1, instance.t("validations.minOneEmail")).test("are-all-emails-valid", instance.t("validations.validEmail"), emails => emails.every(prop("valid"))).nullable()
 };
 const ROLES_RADIO_GROUP_VALIDATION_SCHEMA = {
   role: yup.string().required(instance.t("validations.roleRequired"))
 };
-const VALIDATION_SCHEMA$1 = yup.object().shape(_objectSpread$1(_objectSpread$1({}, MULTIPLE_EMAIL_INPUT_VALIDATION_SCHEMA), ROLES_RADIO_GROUP_VALIDATION_SCHEMA));
+const VALIDATION_SCHEMA$1 = yup.object().shape(_objectSpread$2(_objectSpread$2({}, MULTIPLE_EMAIL_INPUT_VALIDATION_SCHEMA), ROLES_RADIO_GROUP_VALIDATION_SCHEMA));
 const FILTER_INVALID_EMAILS = {
   label: instance.t("validations.filterInvalidEmails")
 };
@@ -10951,6 +10952,10 @@ const COUNTER_PROPS = {
   label: instance.t("common.email", PLURAL),
   startsFrom: 4
 };
+const MANAGE_MEMBERS_FORMIK_PROPS = {
+  enableReinitialize: true,
+  validationSchema: VALIDATION_SCHEMA$1
+};
 
 const renderInitialValues = (selectedMember, roles) => {
   var _roles$;
@@ -11043,6 +11048,8 @@ RolesRadioGroup.defaultProps = {
   roles: []
 };
 
+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; }
 const ManageMember = _ref => {
   var _config$manageMember;
   let config = _ref.config,
@@ -11102,21 +11109,20 @@ const ManageMember = _ref => {
     what: metaName(SINGULAR).toLocaleLowerCase()
   }) : instance.t("common.add_", {
     what: metaName(SINGULAR).toLocaleLowerCase()
-  }))), config !== null && config !== void 0 && (_config$manageMember = config.manageMember) !== null && _config$manageMember !== void 0 && _config$manageMember.component ? config.manageMember.component(manageMemberProps) : /*#__PURE__*/React.createElement(Formik, {
-    enableReinitialize: true,
-    initialValues: renderInitialValues(selectedMember, roles),
-    onSubmit: handleAddMember,
-    validateOnBlur: hasSubmitted,
-    validateOnChange: hasSubmitted,
-    validationSchema: VALIDATION_SCHEMA$1
+  }))), config !== null && config !== void 0 && (_config$manageMember = config.manageMember) !== null && _config$manageMember !== void 0 && _config$manageMember.component ? config.manageMember.component(manageMemberProps) : /*#__PURE__*/React.createElement(Form, {
+    ref: formReference,
+    formikProps: _objectSpread$1(_objectSpread$1({}, MANAGE_MEMBERS_FORMIK_PROPS), {}, {
+      initialValues: renderInitialValues(selectedMember, roles),
+      onSubmit: handleAddMember,
+      validateOnBlur: hasSubmitted,
+      validateOnChange: hasSubmitted
+    })
   }, _ref2 => {
     let values = _ref2.values,
       dirty = _ref2.dirty;
     const emails = values.emails,
       role = values.role;
-    return /*#__PURE__*/React.createElement(Form, {
-      ref: formReference
-    }, /*#__PURE__*/React.createElement(ScrollToErrorField, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ScrollToErrorField, {
       formRef: formReference
     }), /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement("div", {
       className: "ntm-members-pane__body"