@bigbinary/neeto-fields-frontend 1.3.16 → 1.3.18

package/dist/index.cjs.js

@@ -7,7 +7,6 @@ var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var neetoui = require('@bigbinary/neetoui');
 var neetoCist = require('@bigbinary/neeto-cist');
 var ramda = require('ramda');
-var classnames = require('classnames');
 var formik = require('formik');
 var i18next = require('i18next');
 var yup = require('yup');
@@ -23,10 +22,12 @@ var axios = require('axios');
 var uuid = require('uuid');
 var reactRouterDom = require('react-router-dom');
 var MenuBar = require('@bigbinary/neeto-molecules/MenuBar');
+var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
 var TableWrapper = require('@bigbinary/neeto-molecules/TableWrapper');
 var NeetoUIHeader = require('@bigbinary/neeto-molecules/Header');
 var reactDom = require('react-dom');
 var NeetoUISubHeader = require('@bigbinary/neeto-molecules/SubHeader');
+var classnames = require('classnames');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -49,15 +50,16 @@ function _interopNamespace(e) {
 }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
 var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
 var PageLoader__default = /*#__PURE__*/_interopDefaultLegacy(PageLoader);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
 var MenuBar__default = /*#__PURE__*/_interopDefaultLegacy(MenuBar);
+var MoreDropdown__default = /*#__PURE__*/_interopDefaultLegacy(MoreDropdown);
 var TableWrapper__default = /*#__PURE__*/_interopDefaultLegacy(TableWrapper);
 var NeetoUIHeader__default = /*#__PURE__*/_interopDefaultLegacy(NeetoUIHeader);
 var NeetoUISubHeader__default = /*#__PURE__*/_interopDefaultLegacy(NeetoUISubHeader);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -648,6 +650,10 @@ var DEFAULT_FIELD_STATE_TAXONOMY = {
   inactive: "Inactive"
 };
 var ALL_KINDS = ramda.values(KINDS);
+var MENU_ITEMS = {
+  EDIT: "edit",
+  DELETE: "delete"
+};
 
 var DIRECT_EDIT_INPUT_FIELDS = [KINDS.checkbox];
 
@@ -928,9 +934,6 @@ var useFormikFields = function useFormikFields(_ref) {
     dirty: dirty,
     handleSubmit: handleSubmit,
     fieldProps: _objectSpread$g(_objectSpread$g({}, formikFieldProps), {}, {
-      className: classnames__default["default"]({
-        "items-center": isInline
-      }),
       error: individualSubmit ? meta.error : meta.touched && meta.error,
       value: getValueForField(formikFieldProps.value),
       label: !isInline && neetoCist.capitalize(name),
@@ -2448,11 +2451,30 @@ pluralize$1.exports;
 var pluralizeExports = pluralize$1.exports;
 var pluralize = /*@__PURE__*/getDefaultExportFromCjs(pluralizeExports);
 
-var Menu = neetoui.Dropdown.Menu,
-  MenuItem = neetoui.Dropdown.MenuItem;
-var buildDefaultColumns = function buildDefaultColumns(_ref) {
-  var onDeleteClick = _ref.onDeleteClick,
+var getMenuItems = function getMenuItems(_ref) {
+  var field = _ref.field,
+    onDeleteClick = _ref.onDeleteClick,
     onEditClick = _ref.onEditClick;
+  return [{
+    key: MENU_ITEMS.EDIT,
+    "data-cy": "edit-menu-item-button",
+    label: i18next.t("neetoFields.labels.edit"),
+    onClick: function onClick() {
+      return onEditClick(field);
+    }
+  }, {
+    key: MENU_ITEMS.DELETE,
+    "data-cy": "delete-menu-item-button",
+    label: i18next.t("neetoFields.labels.delete"),
+    isVisible: ramda.not(field.isSystem),
+    onClick: function onClick() {
+      return onDeleteClick(field);
+    }
+  }];
+};
+var buildDefaultColumns = function buildDefaultColumns(_ref2) {
+  var onDeleteClick = _ref2.onDeleteClick,
+    onEditClick = _ref2.onEditClick;
   return [{
     key: "name",
     dataIndex: "name",
@@ -2463,25 +2485,20 @@ var buildDefaultColumns = function buildDefaultColumns(_ref) {
         className: "flex items-center justify-between gap-x-3"
       }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
         style: "body2"
-      }, name), /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, {
-        buttonStyle: "text",
-        icon: neetoIcons.MenuHorizontal,
-        strategy: "fixed",
-        buttonProps: {
+      }, name), /*#__PURE__*/React__default["default"].createElement(MoreDropdown__default["default"], {
+        dropdownProps: {
+          strategy: "fixed"
+        },
+        menuItems: getMenuItems({
+          field: field,
+          onDeleteClick: onDeleteClick,
+          onEditClick: onEditClick
+        }),
+        dropdownButtonProps: {
           className: "flex-shrink-0",
           "data-cy": "neeto-fields-options-dropdown"
         }
-      }, /*#__PURE__*/React__default["default"].createElement(Menu, null, /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, {
-        "data-cy": "edit-menu-item-button",
-        onClick: function onClick() {
-          return onEditClick(field);
-        }
-      }, i18next.t("neetoFields.labels.edit")), !field.isSystem && /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, {
-        "data-cy": "delete-menu-item-button",
-        onClick: function onClick() {
-          return onDeleteClick(field);
-        }
-      }, i18next.t("neetoFields.labels.delete")))));
+      }));
     }
   }, {
     key: "kind",
@@ -2500,13 +2517,13 @@ var buildDefaultColumns = function buildDefaultColumns(_ref) {
     }
   }];
 };
-var renderMenuBarItems = function renderMenuBarItems(_ref2) {
-  var items = _ref2.items,
-    isOwnerBased = _ref2.isOwnerBased,
-    selectedMenu = _ref2.selectedMenu,
-    handleBlockClick = _ref2.handleBlockClick,
-    nameAliases = _ref2.nameAliases,
-    title = _ref2.title;
+var renderMenuBarItems = function renderMenuBarItems(_ref3) {
+  var items = _ref3.items,
+    isOwnerBased = _ref3.isOwnerBased,
+    selectedMenu = _ref3.selectedMenu,
+    handleBlockClick = _ref3.handleBlockClick,
+    nameAliases = _ref3.nameAliases,
+    title = _ref3.title;
   title = title.toLocaleLowerCase();
   if (isOwnerBased) {
     return items.map(function (item) {
@@ -2542,12 +2559,12 @@ var renderMenuBarItems = function renderMenuBarItems(_ref2) {
     });
   });
 };
-var renderStateFilterTabs = function renderStateFilterTabs(_ref3) {
-  var selectedState = _ref3.selectedState,
-    fieldStatesTaxonomy = _ref3.fieldStatesTaxonomy,
-    activeFieldsCount = _ref3.activeFieldsCount,
-    inactiveFieldsCount = _ref3.inactiveFieldsCount,
-    handleBlockClick = _ref3.handleBlockClick;
+var renderStateFilterTabs = function renderStateFilterTabs(_ref4) {
+  var selectedState = _ref4.selectedState,
+    fieldStatesTaxonomy = _ref4.fieldStatesTaxonomy,
+    activeFieldsCount = _ref4.activeFieldsCount,
+    inactiveFieldsCount = _ref4.inactiveFieldsCount,
+    handleBlockClick = _ref4.handleBlockClick;
   return /*#__PURE__*/React__default["default"].createElement(neetoui.Tab, {
     className: "mb-4"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Tab.Item, {
@@ -2564,11 +2581,11 @@ var renderStateFilterTabs = function renderStateFilterTabs(_ref3) {
     })
   }, fieldStatesTaxonomy.inactive, "(", inactiveFieldsCount, ")"));
 };
-var getResourceName = function getResourceName(_ref4) {
-  var isOwnerBased = _ref4.isOwnerBased,
-    owners = _ref4.owners,
-    selectedVal = _ref4.selectedVal,
-    nameAliases = _ref4.nameAliases;
+var getResourceName = function getResourceName(_ref5) {
+  var isOwnerBased = _ref5.isOwnerBased,
+    owners = _ref5.owners,
+    selectedVal = _ref5.selectedVal,
+    nameAliases = _ref5.nameAliases;
   if (isOwnerBased) {
     var _findBy;
     return (_findBy = neetoCist.findBy({
@@ -2577,10 +2594,10 @@ var getResourceName = function getResourceName(_ref4) {
   }
   return nameAliases[selectedVal] || selectedVal;
 };
-var getDashBoardTitle = function getDashBoardTitle(_ref5) {
-  var resourceName = _ref5.resourceName,
-    isSingleResource = _ref5.isSingleResource,
-    title = _ref5.title;
+var getDashBoardTitle = function getDashBoardTitle(_ref6) {
+  var resourceName = _ref6.resourceName,
+    isSingleResource = _ref6.isSingleResource,
+    title = _ref6.title;
   var displayTitle = isSingleResource ? title : i18next.t("neetoFields.messages.titleForResource", {
     title: title,
     resource: resourceName
@@ -2605,10 +2622,10 @@ var renderNoDataHelpText = function renderNoDataHelpText(title, url) {
     }
   });
 };
-var getDeletionConfirmationMessage = function getDeletionConfirmationMessage(_ref6) {
-  var resource = _ref6.resource,
-    fieldName = _ref6.fieldName,
-    affectedResourcesCount = _ref6.affectedResourcesCount;
+var getDeletionConfirmationMessage = function getDeletionConfirmationMessage(_ref7) {
+  var resource = _ref7.resource,
+    fieldName = _ref7.fieldName,
+    affectedResourcesCount = _ref7.affectedResourcesCount;
   return affectedResourcesCount > 0 ? /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
     i18nKey: "neetoFields.messages.confirmDeleteWithCount",
     values: {
@@ -7918,7 +7935,7 @@ var InlineFieldValueInput = function InlineFieldValueInput(_ref) {
       return setEditMode(false);
     }
   })))) : /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classnames__default["default"]("text-center", {
+    className: classnames__default["default"]({
       "cursor-pointer": !field.isSystem
     }),
     onClick: function onClick() {