@bigbinary/neeto-fields-frontend 1.3.16 → 1.3.18

package/dist/index.js

@@ -1,14 +1,13 @@
 import React, { useEffect, useRef, useState, useMemo, useLayoutEffect, useCallback, createContext, memo, useReducer, useContext } from 'react';
 import { useFuncDebounce, useOnClickOutside, withT, useMutationWithInvalidation, useQueryParams, handleMetaClick } from '@bigbinary/neeto-commons-frontend/react-utils';
-import { Checkbox as Checkbox$1, TimePicker, DatePicker, Select, Input, Textarea, Typography, Pane, Label, Button as Button$1, Dropdown, Tab, Alert, NoData, Table, Spinner } from '@bigbinary/neetoui';
+import { Checkbox as Checkbox$1, TimePicker, DatePicker, Select, Input, Textarea, Typography, Pane, Label, Button as Button$1, Tab, Alert, NoData, Table, Spinner } from '@bigbinary/neetoui';
 import { isNotEmpty, renameKeys, capitalize, findBy, noop as noop$1, filterBy, toLabelAndValue, slugify, humanize, countBy } from '@bigbinary/neeto-cist';
-import { values, isNotNil, isNil, isEmpty, prop, pluck, clone, pipe, mergeAll, omit, map, pick, assoc, any, head } from 'ramda';
-import classnames from 'classnames';
+import { values, isNotNil, isNil, isEmpty, prop, pluck, clone, pipe, mergeAll, omit, map, pick, assoc, not, any, head } from 'ramda';
 import { useFormikContext, useField, FieldArray } from 'formik';
 import { t } from 'i18next';
 import * as yup from 'yup';
 import { joinHyphenCase, buildUrl, getQueryParams, dateFormat } from '@bigbinary/neeto-commons-frontend/utils';
-import { Check, Delete, MenuHorizontal, Info, Reorder } from '@bigbinary/neeto-icons';
+import { Check, Delete, Info, Reorder } from '@bigbinary/neeto-icons';
 import { Button, ActionBlock as ActionBlock$1, Input as Input$1, Select as Select$1, Switch, Form } from '@bigbinary/neetoui/formik';
 import { useTranslation, Trans } from 'react-i18next';
 import { DEFAULT_PAGE_INDEX, DEFAULT_PAGE_SIZE, PLURAL } from '@bigbinary/neeto-commons-frontend/constants';
@@ -19,10 +18,12 @@ import axios from 'axios';
 import { v4 } from 'uuid';
 import { Link, useHistory } from 'react-router-dom';
 import MenuBar from '@bigbinary/neeto-molecules/MenuBar';
+import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
 import TableWrapper from '@bigbinary/neeto-molecules/TableWrapper';
 import NeetoUIHeader from '@bigbinary/neeto-molecules/Header';
 import { unstable_batchedUpdates, createPortal } from 'react-dom';
 import NeetoUISubHeader from '@bigbinary/neeto-molecules/SubHeader';
+import classnames from 'classnames';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -613,6 +614,10 @@ var DEFAULT_FIELD_STATE_TAXONOMY = {
   inactive: "Inactive"
 };
 var ALL_KINDS = values(KINDS);
+var MENU_ITEMS = {
+  EDIT: "edit",
+  DELETE: "delete"
+};
 
 var DIRECT_EDIT_INPUT_FIELDS = [KINDS.checkbox];
 
@@ -893,9 +898,6 @@ var useFormikFields = function useFormikFields(_ref) {
     dirty: dirty,
     handleSubmit: handleSubmit,
     fieldProps: _objectSpread$g(_objectSpread$g({}, formikFieldProps), {}, {
-      className: classnames({
-        "items-center": isInline
-      }),
       error: individualSubmit ? meta.error : meta.touched && meta.error,
       value: getValueForField(formikFieldProps.value),
       label: !isInline && capitalize(name),
@@ -2413,11 +2415,30 @@ pluralize$1.exports;
 var pluralizeExports = pluralize$1.exports;
 var pluralize = /*@__PURE__*/getDefaultExportFromCjs(pluralizeExports);
 
-var Menu = Dropdown.Menu,
-  MenuItem = 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: t("neetoFields.labels.edit"),
+    onClick: function onClick() {
+      return onEditClick(field);
+    }
+  }, {
+    key: MENU_ITEMS.DELETE,
+    "data-cy": "delete-menu-item-button",
+    label: t("neetoFields.labels.delete"),
+    isVisible: 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",
@@ -2428,25 +2449,20 @@ var buildDefaultColumns = function buildDefaultColumns(_ref) {
         className: "flex items-center justify-between gap-x-3"
       }, /*#__PURE__*/React.createElement(Typography, {
         style: "body2"
-      }, name), /*#__PURE__*/React.createElement(Dropdown, {
-        buttonStyle: "text",
-        icon: MenuHorizontal,
-        strategy: "fixed",
-        buttonProps: {
+      }, name), /*#__PURE__*/React.createElement(MoreDropdown, {
+        dropdownProps: {
+          strategy: "fixed"
+        },
+        menuItems: getMenuItems({
+          field: field,
+          onDeleteClick: onDeleteClick,
+          onEditClick: onEditClick
+        }),
+        dropdownButtonProps: {
           className: "flex-shrink-0",
           "data-cy": "neeto-fields-options-dropdown"
         }
-      }, /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(MenuItem.Button, {
-        "data-cy": "edit-menu-item-button",
-        onClick: function onClick() {
-          return onEditClick(field);
-        }
-      }, t("neetoFields.labels.edit")), !field.isSystem && /*#__PURE__*/React.createElement(MenuItem.Button, {
-        "data-cy": "delete-menu-item-button",
-        onClick: function onClick() {
-          return onDeleteClick(field);
-        }
-      }, t("neetoFields.labels.delete")))));
+      }));
     }
   }, {
     key: "kind",
@@ -2465,13 +2481,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) {
@@ -2507,12 +2523,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.createElement(Tab, {
     className: "mb-4"
   }, /*#__PURE__*/React.createElement(Tab.Item, {
@@ -2529,11 +2545,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 = findBy({
@@ -2542,10 +2558,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 : t("neetoFields.messages.titleForResource", {
     title: title,
     resource: resourceName
@@ -2570,10 +2586,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.createElement(Trans, {
     i18nKey: "neetoFields.messages.confirmDeleteWithCount",
     values: {
@@ -7883,7 +7899,7 @@ var InlineFieldValueInput = function InlineFieldValueInput(_ref) {
       return setEditMode(false);
     }
   })))) : /*#__PURE__*/React.createElement("div", {
-    className: classnames("text-center", {
+    className: classnames({
       "cursor-pointer": !field.isSystem
     }),
     onClick: function onClick() {