@bigbinary/neeto-team-members-frontend 2.8.5 → 2.8.7

package/dist/index.cjs.js

@@ -1624,11 +1624,11 @@ var QUERY_KEYS = {
   TEAMS_DEPENDENCIES: "neeto-team-members-teams-dependencies"
 };
 
-function ownKeys$c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$c(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$d(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$d(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$d(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var useFetchPermissions = function useFetchPermissions() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return reactQuery.useQuery(QUERY_KEYS.PERMISSIONS, permissionsApi.fetch, _objectSpread$c({
+  return reactQuery.useQuery(QUERY_KEYS.PERMISSIONS, permissionsApi.fetch, _objectSpread$d({
     staleTime: DEFAULT_STALE_TIME,
     select: function select(response) {
       return response === null || response === void 0 ? void 0 : response.permissions;
@@ -1701,11 +1701,11 @@ var _excluded$2 = ["onSuccess"],
   _excluded2$2 = ["onSuccess"],
   _excluded3$1 = ["onSuccess"],
   _excluded4 = ["onSuccess"];
-function ownKeys$b(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$b(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$b(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$c(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var useFetchRoles = function useFetchRoles() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return reactQuery.useQuery(QUERY_KEYS.ROLES, organizationRolesApi.fetch, _objectSpread$b({
+  return reactQuery.useQuery(QUERY_KEYS.ROLES, organizationRolesApi.fetch, _objectSpread$c({
     staleTime: DEFAULT_STALE_TIME,
     select: function select(response) {
       return response === null || response === void 0 ? void 0 : response.organizationRoles;
@@ -1714,14 +1714,14 @@ var useFetchRoles = function useFetchRoles() {
 };
 var useFetchGlobalRoles = function useFetchGlobalRoles() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return reactQuery.useQuery(QUERY_KEYS.GLOBAL_ROLES, globalRolesApi.fetch, _objectSpread$b({
+  return reactQuery.useQuery(QUERY_KEYS.GLOBAL_ROLES, globalRolesApi.fetch, _objectSpread$c({
     staleTime: DEFAULT_STALE_TIME
   }, options));
 };
 var useCreateRole = function useCreateRole(_ref) {
   var _onSuccess = _ref.onSuccess,
     options = _objectWithoutProperties(_ref, _excluded$2);
-  return reactQuery.useMutation(organizationRolesApi.create, _objectSpread$b({
+  return reactQuery.useMutation(organizationRolesApi.create, _objectSpread$c({
     onSuccess: function onSuccess() {
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS_DEPENDENCIES);
       queryClient.invalidateQueries(QUERY_KEYS.ROLES);
@@ -1736,7 +1736,7 @@ var useUpdateRole = function useUpdateRole(_ref2) {
     var id = _ref3.id,
       payload = _ref3.payload;
     return organizationRolesApi.update(id, payload);
-  }, _objectSpread$b({
+  }, _objectSpread$c({
     onSuccess: function onSuccess() {
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS);
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS_DEPENDENCIES);
@@ -1753,7 +1753,7 @@ var useDestroyRole = function useDestroyRole(_ref4) {
     var id = _ref5.id,
       payload = _ref5.payload;
     return organizationRolesApi.destroy(id, payload);
-  }, _objectSpread$b({
+  }, _objectSpread$c({
     onSuccess: function onSuccess() {
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS);
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS_DEPENDENCIES);
@@ -1765,7 +1765,7 @@ var useDestroyRole = function useDestroyRole(_ref4) {
 var useBulkUpdateRoles = function useBulkUpdateRoles(_ref6) {
   var _onSuccess4 = _ref6.onSuccess,
     options = _objectWithoutProperties(_ref6, _excluded4);
-  return reactQuery.useMutation(organizationRolesApi.bulkUpdate, _objectSpread$b({
+  return reactQuery.useMutation(organizationRolesApi.bulkUpdate, _objectSpread$c({
     onSuccess: function onSuccess() {
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS);
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS_DEPENDENCIES);
@@ -1811,7 +1811,7 @@ var AddRoleButton = function AddRoleButton(_ref) {
   })));
 };
 
-var Header$1 = function Header(_ref) {
+var Header$3 = function Header(_ref) {
   var _config$header;
   var config = _ref.config,
     handleReset = _ref.handleReset,
@@ -1949,13 +1949,11 @@ var ADD_ROLE_FORM_INITIAL_VALUES = {
   permissionIds: []
 };
 var ROLE_FORMIK_PROPS = {
-  validateOnBlur: false,
-  validateOnChange: false,
   validationSchema: ADD_ROLE_FORM_VALIDATION_SCHEMA
 };
 
-function ownKeys$a(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$a(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$b(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$b(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$b(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var sortPermissionsBySequence = function sortPermissionsBySequence() {
   var _permissions$;
   var permissions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
@@ -1997,7 +1995,7 @@ var getModifiedPermissions = function getModifiedPermissions() {
 var attachChildrenRecursively = function attachChildrenRecursively(permission, permissionsNameMap, permissionRelationConfig) {
   var _ref = permissionRelationConfig[permission.name] || {},
     children = _ref.children;
-  return children ? _objectSpread$a(_objectSpread$a({}, permission), {}, {
+  return children ? _objectSpread$b(_objectSpread$b({}, permission), {}, {
     children: children.flatMap(function (childName) {
       return attachChildrenRecursively(permissionsNameMap[childName][0], permissionsNameMap, permissionRelationConfig);
     })
@@ -2023,8 +2021,8 @@ var getChildrenRemovedFromRoot = function getChildrenRemovedFromRoot(_ref3) {
   });
 };
 
-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; }
 var Permissions = function Permissions(_ref) {
   var _ref$permissions = _ref.permissions,
     permissions = _ref$permissions === void 0 ? [] : _ref$permissions,
@@ -2117,7 +2115,7 @@ var Permissions = function Permissions(_ref) {
     }), /*#__PURE__*/React__default["default"].createElement("div", {
       className: "ntm-roles-permission__sub-blocks neeto-ui-relative neeto-ui-pl-6"
     }, sortedChildren === null || sortedChildren === void 0 ? void 0 : sortedChildren.map(function (childPermission) {
-      return renderPermission(_objectSpread$9(_objectSpread$9({}, childPermission), {}, {
+      return renderPermission(_objectSpread$a(_objectSpread$a({}, childPermission), {}, {
         isParentChecked: isChecked
       }));
     })))));
@@ -2148,8 +2146,8 @@ var Permissions = function Permissions(_ref) {
   }));
 };
 
-function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$9(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$9(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var ManageRoles = function ManageRoles(_ref) {
   var config = _ref.config,
     _ref$isOpen = _ref.isOpen,
@@ -2177,7 +2175,7 @@ var ManageRoles = function ManageRoles(_ref) {
   var isSubmitting = isCreatingRole || isUpdatingRole;
   var handleSubmit = function handleSubmit(formValues) {
     var payload = {
-      organizationRole: _objectSpread$8(_objectSpread$8({}, formValues), {}, {
+      organizationRole: _objectSpread$9(_objectSpread$9({}, formValues), {}, {
         name: formValues.name.trim(),
         description: formValues.description.trim()
       })
@@ -2188,7 +2186,7 @@ var ManageRoles = function ManageRoles(_ref) {
     }) : createRole(payload);
   };
   var initialValues = isEdit ? selectedRole : ADD_ROLE_FORM_INITIAL_VALUES;
-  var formikProps = _objectSpread$8(_objectSpread$8({}, ROLE_FORMIK_PROPS), {}, {
+  var formikProps = _objectSpread$9(_objectSpread$9({}, ROLE_FORMIK_PROPS), {}, {
     initialValues: initialValues,
     onSubmit: handleSubmit
   });
@@ -2460,6 +2458,7 @@ var TableHeader = function TableHeader(_ref) {
     }, t("neetoTeamMembers.common.delete"))))))));
   })));
 };
+var TableHeader$1 = /*#__PURE__*/React.memo(TableHeader);
 
 var Delete = function Delete(_ref) {
   var isOpen = _ref.isOpen,
@@ -2521,7 +2520,7 @@ var Columns = function Columns(_ref) {
   };
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "ntm-roles-table__columns"
-  }, /*#__PURE__*/React__default["default"].createElement(TableHeader, {
+  }, /*#__PURE__*/React__default["default"].createElement(TableHeader$1, {
     config: config,
     roles: filteredRoles,
     setIsScrollPresent: setIsScrollPresent,
@@ -2774,14 +2773,10 @@ var Roles = function Roles(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     searchString = _useState2[0],
     setSearchString = _useState2[1];
-  var _useState3 = React.useState([]),
+  var _useState3 = React.useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    filteredRoles = _useState4[0],
-    setFilteredRoles = _useState4[1];
-  var _useState5 = React.useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isNewRolePaneOpen = _useState6[0],
-    setIsNewRolePaneOpen = _useState6[1];
+    isNewRolePaneOpen = _useState4[0],
+    setIsNewRolePaneOpen = _useState4[1];
   var _useFetchRoles = useFetchRoles({
       onSuccess: function onSuccess(roles) {
         return setModifiedRoles(roles);
@@ -2799,19 +2794,17 @@ var Roles = function Roles(_ref) {
       enabled: isUpdatePermissionGranted
     }),
     bulkUpdate = _useBulkUpdateRoles.mutate;
-  var _useState7 = React.useState(roles),
-    _useState8 = _slicedToArray(_useState7, 2),
-    modifiedRoles = _useState8[0],
-    setModifiedRoles = _useState8[1];
+  var _useState5 = React.useState(roles),
+    _useState6 = _slicedToArray(_useState5, 2),
+    modifiedRoles = _useState6[0],
+    setModifiedRoles = _useState6[1];
   var isDirty = pure.isPresent(getModifiedPermissions(roles, modifiedRoles));
   var permissions = sortPermissionsBySequence(permissionData);
   var permissionGroups = getPermissionGroups(permissions);
-  React.useEffect(function () {
-    setFilteredRoles(ramda.filter(function (_ref2) {
-      var name = _ref2.name;
-      return ramda.includes(searchString.toLowerCase().trim(), name.toLowerCase().trim());
-    }, modifiedRoles || []));
-  }, [modifiedRoles, searchString]);
+  var filteredRoles = ramda.filter(function (_ref2) {
+    var name = _ref2.name;
+    return ramda.includes(searchString.toLowerCase().trim(), name.toLowerCase().trim());
+  }, modifiedRoles || []);
   var handleSubmit = function handleSubmit() {
     var updatedRoles = getModifiedPermissions(roles, modifiedRoles);
     bulkUpdate({
@@ -2830,7 +2823,7 @@ var Roles = function Roles(_ref) {
   }
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(distExports.ScrollSync, null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
     isHeaderFixed: true
-  }, /*#__PURE__*/React__default["default"].createElement(Header$1, {
+  }, /*#__PURE__*/React__default["default"].createElement(Header$3, {
     config: config,
     handleReset: handleReset,
     handleSubmit: handleSubmit,
@@ -2857,21 +2850,6 @@ var Roles = function Roles(_ref) {
 };
 var index$1 = reactUtils.withTitle(withReactQuery(Roles), i18next__default["default"].t("neetoTeamMembers.common.role", PLURAL));
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
 /* eslint complexity: [2, 18], max-statements: [2, 33] */
 var shams = function hasSymbols() {
 	if (typeof Symbol !== 'function' || typeof Object.getOwnPropertySymbols !== 'function') { return false; }
@@ -4956,14 +4934,14 @@ var teamsApi = {
 var _excluded$1 = ["onSuccess"],
   _excluded2$1 = ["onSuccess"],
   _excluded3 = ["onSuccess"];
-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; }
 var useFetchMembers = function useFetchMembers() {
   var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   return reactQuery.useQuery([QUERY_KEYS.TEAMS, params], function () {
     return teamsApi.fetch(params);
-  }, _objectSpread$7({
+  }, _objectSpread$8({
     staleTime: DEFAULT_STALE_TIME,
     select: ramda.identity,
     keepPreviousData: true
@@ -4972,7 +4950,7 @@ var useFetchMembers = function useFetchMembers() {
 var useCreateMember = function useCreateMember(_ref) {
   var _onSuccess = _ref.onSuccess,
     options = _objectWithoutProperties(_ref, _excluded$1);
-  return reactQuery.useMutation(teamsApi.create, _objectSpread$7({
+  return reactQuery.useMutation(teamsApi.create, _objectSpread$8({
     onSuccess: function onSuccess() {
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS);
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS_DEPENDENCIES);
@@ -4987,7 +4965,7 @@ var useUpdateMember = function useUpdateMember(_ref2) {
     var id = _ref3.id,
       payload = _ref3.payload;
     return teamsApi.update(id, payload);
-  }, _objectSpread$7({
+  }, _objectSpread$8({
     onSuccess: function onSuccess() {
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS);
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS_DEPENDENCIES);
@@ -4998,7 +4976,7 @@ var useUpdateMember = function useUpdateMember(_ref2) {
 var useBulkUpdateMembers = function useBulkUpdateMembers(_ref4) {
   var _onSuccess3 = _ref4.onSuccess,
     options = _objectWithoutProperties(_ref4, _excluded3);
-  return reactQuery.useMutation(teamsApi.bulkUpdate, _objectSpread$7({
+  return reactQuery.useMutation(teamsApi.bulkUpdate, _objectSpread$8({
     onSuccess: function onSuccess() {
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS);
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS_DEPENDENCIES);
@@ -5017,7 +4995,7 @@ var useFetchFilterOptions = function useFetchFilterOptions(_ref5) {
     options = _ref5$options === void 0 ? {} : _ref5$options;
   return reactQuery.useQuery([QUERY_KEYS.TEAMS_DEPENDENCIES, params], function () {
     return teamsApi.fetchFilterOptions(params);
-  }, _objectSpread$7({
+  }, _objectSpread$8({
     staleTime: DEFAULT_STALE_TIME,
     select: ramda.identity
   }, options));
@@ -5578,8 +5556,8 @@ pluralize$1.exports;
 var pluralizeExports = pluralize$1.exports;
 var pluralize = /*@__PURE__*/getDefaultExportFromCjs(pluralizeExports);
 
-function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Menu$3 = neetoui.Dropdown.Menu,
   MenuItem$2 = neetoui.Dropdown.MenuItem;
 var renderNameColumn = function renderNameColumn(_ref) {
@@ -5679,7 +5657,7 @@ var getDefaultAlertTitle = function getDefaultAlertTitle(_ref3) {
 var getDefaultAlertMessage = function getDefaultAlertMessage(_ref4) {
   var member = _ref4.member;
   return /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
-    values: _objectSpread$6(_objectSpread$6({}, SINGULAR), {}, {
+    values: _objectSpread$7(_objectSpread$7({}, SINGULAR), {}, {
       person: member === null || member === void 0 ? void 0 : member.name
     }),
     i18nKey: member !== null && member !== void 0 && member.active ? "neetoTeamMembers.alerts.messages.deactivateMember" : "neetoTeamMembers.alerts.messages.activateMember"
@@ -5895,8 +5873,8 @@ var getFilteredRoles = function getFilteredRoles() {
   return ramda.filter(removeExcludedRole(config === null || config === void 0 ? void 0 : config.excludedRoles), roles);
 };
 
-function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var useFilters = function useFilters(_ref) {
   var _config$filterColumns, _config$defaultFilter;
   var config = _ref.config;
@@ -5908,7 +5886,7 @@ var useFilters = function useFilters(_ref) {
     setEmailSearchTerm = _useState2[1];
   var metaName = getMetaName((config === null || config === void 0 ? void 0 : config.metaName) || "member");
   var defaultNeetoFilters = neetoFiltersFrontend.buildFiltersFromURL((_config$filterColumns = config === null || config === void 0 ? void 0 : config.filterColumns) !== null && _config$filterColumns !== void 0 ? _config$filterColumns : defaultNeetoFiltersColumns());
-  var _useState3 = React.useState(_objectSpread$5(_objectSpread$5(_objectSpread$5({}, DEFAULT_FILTER_VALUES), config === null || config === void 0 ? void 0 : config.defaultFilterValues), {}, {
+  var _useState3 = React.useState(_objectSpread$6(_objectSpread$6(_objectSpread$6({}, DEFAULT_FILTER_VALUES), config === null || config === void 0 ? void 0 : config.defaultFilterValues), {}, {
       neetoFilters: defaultNeetoFilters,
       category: getValidCategory(URL_CATEGORY_FILTER_VALUE, config === null || config === void 0 ? void 0 : (_config$defaultFilter = config.defaultFilterValues) === null || _config$defaultFilter === void 0 ? void 0 : _config$defaultFilter.category)
     })),
@@ -5936,20 +5914,22 @@ var useFilters = function useFilters(_ref) {
       isLoading: isFilterOptionsLoading
     }
   }) : config === null || config === void 0 ? void 0 : config.filterColumns;
-  var searchProps = {
-    "data-cy": "ntm-search-members-input",
-    onChange: function onChange(_ref2) {
-      var value = _ref2.target.value;
-      return setFilters(ramda.mergeLeft({
-        search: value,
-        page: DEFAULT_PAGE_NUMBER
-      }));
-    },
-    placeholder: t("neetoTeamMembers.common.search_", {
-      what: metaName(PLURAL).toLocaleLowerCase()
-    }),
-    value: filters.search
-  };
+  var searchProps = React.useMemo(function () {
+    return {
+      "data-cy": "ntm-search-members-input",
+      onChange: function onChange(_ref2) {
+        var value = _ref2.target.value;
+        return setFilters(ramda.mergeLeft({
+          search: value,
+          page: DEFAULT_PAGE_NUMBER
+        }));
+      },
+      placeholder: t("neetoTeamMembers.common.search_", {
+        what: metaName(PLURAL).toLocaleLowerCase()
+      }),
+      value: filters.search
+    };
+  }, [filters.search]);
   return {
     filters: filters,
     setFilters: setFilters,
@@ -6339,8 +6319,8 @@ try {
 
 var _regeneratorRuntime = /*@__PURE__*/getDefaultExportFromCjs(regenerator);
 
-function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var useTeams = function useTeams(_ref) {
   var config = _ref.config,
     filters = _ref.filters,
@@ -6420,7 +6400,7 @@ var useTeams = function useTeams(_ref) {
       emails: ramda.pluck("email", rowData),
       keys: keys
     };
-    setSelectedRows(_objectSpread$4({}, rows));
+    setSelectedRows(_objectSpread$5({}, rows));
     config === null || config === void 0 ? void 0 : (_config$table = config.table) === null || _config$table === void 0 ? void 0 : (_config$table$onRowSe = _config$table.onRowSelect) === null || _config$table$onRowSe === void 0 ? void 0 : _config$table$onRowSe.call(_config$table, {
       rows: rows,
       resetSelectedRows: resetSelectedRows,
@@ -6444,22 +6424,36 @@ var useTeams = function useTeams(_ref) {
   };
 };
 
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
 var FIXED_COLUMNS = ["name", "actions"];
 var MANAGE_ROLES_BUTTON_LABEL = i18next.t("neetoTeamMembers.labels.manageRole", PLURAL);
 
-var Header = function Header(_ref) {
-  var _config$header;
-  var config = _ref.config,
+var Header$2 = function Header(_ref) {
+  var isCreatePermissionGranted = _ref.isCreatePermissionGranted,
+    otherActionBlock = _ref.otherActionBlock,
     metaName = _ref.metaName,
     _ref$onClick = _ref.onClick,
     onClick = _ref$onClick === void 0 ? pure.noop : _ref$onClick,
     rolesButtonProps = _ref.rolesButtonProps;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
-  var isCreatePermissionGranted = config.permissions.create;
   var isRolesButtonVisible = !!rolesButtonProps;
-  var isOtherActionBlockVisible = !!(config !== null && config !== void 0 && (_config$header = config.header) !== null && _config$header !== void 0 && _config$header.otherActionBlock);
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isOtherActionBlockVisible && config.header.otherActionBlock(), isRolesButtonVisible ? /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends({
+  var isOtherActionBlockVisible = !!otherActionBlock;
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isOtherActionBlockVisible && otherActionBlock(), isRolesButtonVisible ? /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends({
     "data-cy": "ntm-manage-roles-button",
     label: MANAGE_ROLES_BUTTON_LABEL,
     style: "secondary"
@@ -6476,6 +6470,7 @@ var Header = function Header(_ref) {
     onClick: onClick
   }))));
 };
+var HeaderActionBlock = /*#__PURE__*/React.memo(Header$2);
 
 var filterBySearchTerm = function filterBySearchTerm(searchTerm, roles) {
   return ramda.filter(function (_ref) {
@@ -6771,6 +6766,38 @@ var SubHeader = {
   Right: Right
 };
 
+function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var Header = function Header(_ref) {
+  var _config$header, _config$header2;
+  var config = _ref.config,
+    metaName = _ref.metaName,
+    setIsOpen = _ref.setIsOpen,
+    searchProps = _ref.searchProps,
+    filterCategory = _ref.filterCategory;
+  return /*#__PURE__*/React__default["default"].createElement(NeetoHeader__default["default"], _extends({
+    searchProps: searchProps,
+    title: renderHeaderTitle(MEMBER_FILTER[filterCategory].value, metaName),
+    actionBlock: /*#__PURE__*/React__default["default"].createElement(HeaderActionBlock, {
+      isCreatePermissionGranted: config.permissions.create,
+      metaName: metaName,
+      otherActionBlock: (_config$header = config.header) === null || _config$header === void 0 ? void 0 : _config$header.otherActionBlock,
+      rolesButtonProps: config.rolesButtonProps,
+      onClick: function onClick() {
+        return setIsOpen(ramda.assoc("manageMember", true));
+      }
+    }),
+    menuBarToggle: function menuBarToggle() {
+      return setIsOpen(function (state) {
+        return _objectSpread$4(_objectSpread$4({}, state), {}, {
+          menuBar: !state.menuBar
+        });
+      });
+    }
+  }, config === null || config === void 0 ? void 0 : (_config$header2 = config.header) === null || _config$header2 === void 0 ? void 0 : _config$header2.otherProps));
+};
+var Header$1 = /*#__PURE__*/React.memo(Header);
+
 var AppList = function AppList(_ref) {
   var globalRoles = _ref.globalRoles,
     savedStateRef = _ref.savedStateRef;
@@ -7267,14 +7294,10 @@ var ManageMember = function ManageMember(_ref) {
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var isViewPermissionGranted = config.permissions.view;
-  var _useState = React.useState(false),
+  var _useState = React.useState(FORM_PAGES.MAIN),
     _useState2 = _slicedToArray(_useState, 2),
-    hasSubmitted = _useState2[0],
-    setHasSubmitted = _useState2[1];
-  var _useState3 = React.useState(FORM_PAGES.MAIN),
-    _useState4 = _slicedToArray(_useState3, 2),
-    currentPage = _useState4[0],
-    setCurrentPage = _useState4[1];
+    currentPage = _useState2[0],
+    setCurrentPage = _useState2[1];
   var formReference = React.useRef(null);
   var inputReference = React.useRef(null);
   var appListSavedStateReference = React.useRef({
@@ -7328,7 +7351,6 @@ var ManageMember = function ManageMember(_ref) {
     isUpdatingMember = _useUpdateMember.isLoading;
   var handleClose = function handleClose() {
     onComplete();
-    setHasSubmitted(false);
     setCurrentPage(FORM_PAGES.MAIN);
     appListSavedStateReference.current = {
       isAppListEnabled: true
@@ -7424,9 +7446,7 @@ var ManageMember = function ManageMember(_ref) {
     ref: formReference,
     formikProps: _objectSpread$1(_objectSpread$1({}, MANAGE_MEMBERS_FORMIK_PROPS), {}, {
       initialValues: renderInitialValues(selectedMember, filteredRoles, globalRoles),
-      onSubmit: handleOnSubmit,
-      validateOnBlur: hasSubmitted,
-      validateOnChange: hasSubmitted
+      onSubmit: handleOnSubmit
     })
   }, function (_ref2) {
     var _manageMemberComponen2, _manageMemberComponen3;
@@ -7446,10 +7466,7 @@ var ManageMember = function ManageMember(_ref) {
       style: "primary",
       type: "submit",
       "data-cy": isLastPage ? "ntm-manage-member-submit-button" : "ntm-manage-member-continue-button",
-      label: isLastPage ? t("neetoTeamMembers.buttons.saveChanges") : t("neetoTeamMembers.buttons.continue"),
-      onClick: function onClick() {
-        return setHasSubmitted(true);
-      }
+      label: isLastPage ? t("neetoTeamMembers.buttons.saveChanges") : t("neetoTeamMembers.buttons.continue")
     }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
       "data-cy": "ntm-manage-member-cancel-button",
       label: t("neetoTeamMembers.buttons.cancel"),
@@ -7489,14 +7506,14 @@ var Menu = function Menu(_ref) {
 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 TeamMembers = function TeamMembers(_ref) {
-  var _config$fetchApiRespo, _config$table, _config$table$onDropd, _config$header;
+  var _config$fetchApiRespo, _config$table, _config$table$onDropd;
   var config = _ref.config;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var history = reactRouterDom.useHistory();
   var isViewPermissionGranted = config.permissions.view;
   var isCreatePermissionGranted = config.permissions.create;
-  var metaName = getMetaName((config === null || config === void 0 ? void 0 : config.metaName) || "member");
+  var metaName = React.useCallback(getMetaName((config === null || config === void 0 ? void 0 : config.metaName) || "member"), [config === null || config === void 0 ? void 0 : config.metaName]);
   var _useState = React.useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     columnData = _useState2[0],
@@ -7612,25 +7629,13 @@ var TeamMembers = function TeamMembers(_ref) {
     isMenuOpen: isOpen.menuBar,
     memberFilter: filters.category,
     metaName: metaName
-  }), /*#__PURE__*/React__default["default"].createElement(Container__default["default"], null, /*#__PURE__*/React__default["default"].createElement(NeetoHeader__default["default"], _extends({
+  }), /*#__PURE__*/React__default["default"].createElement(Container__default["default"], null, /*#__PURE__*/React__default["default"].createElement(Header$1, {
+    config: config,
+    filterCategory: filters.category,
+    metaName: metaName,
     searchProps: searchProps,
-    actionBlock: /*#__PURE__*/React__default["default"].createElement(Header, {
-      config: config,
-      metaName: metaName,
-      rolesButtonProps: config.rolesButtonProps,
-      onClick: function onClick() {
-        return setIsOpen(ramda.assoc("manageMember", true));
-      }
-    }),
-    menuBarToggle: function menuBarToggle() {
-      return setIsOpen(function (state) {
-        return _objectSpread(_objectSpread({}, state), {}, {
-          menuBar: !state.menuBar
-        });
-      });
-    },
-    title: renderHeaderTitle(MEMBER_FILTER[filters.category].value, metaName)
-  }, config === null || config === void 0 ? void 0 : (_config$header = config.header) === null || _config$header === void 0 ? void 0 : _config$header.otherProps)), /*#__PURE__*/React__default["default"].createElement(SubHeaderMolecule__default["default"], {
+    setIsOpen: setIsOpen
+  }), /*#__PURE__*/React__default["default"].createElement(SubHeaderMolecule__default["default"], {
     leftActionBlock: /*#__PURE__*/React__default["default"].createElement(SubHeader.Left, {
       config: config,
       filteredCount: team === null || team === void 0 ? void 0 : team.membersCount,