@bigbinary/neeto-molecules 1.1.6 → 1.1.8

package/dist/IpRestriction.js

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import React__default, { useState } from 'react';
 import { useStateWithDependency } from '@bigbinary/neeto-commons-frontend/react-utils';
-import { Check, Close, MenuHorizontal, Warning } from '@bigbinary/neeto-icons';
+import { Check, Close, MenuVertical, MenuHorizontal, Warning } from '@bigbinary/neeto-icons';
 import { Typography, Button as Button$1, Dropdown, Tooltip, Alert, Checkbox, Callout } from '@bigbinary/neetoui';
 import { useTranslation, Trans } from 'react-i18next';
 import { Form, Input, Button } from '@bigbinary/neetoui/formik';
 import { useQuery, useQueryClient, useMutation } from 'react-query';
 import axios from 'axios';
 import { t as t$1 } from 'i18next';
-import { isNil, isNotNil } from 'ramda';
+import { isNil, isNotNil, mergeRight } from 'ramda';
 import * as yup from 'yup';
 import { truncate } from '@bigbinary/neeto-commons-frontend/pure';
 
@@ -162,11 +162,11 @@ var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r
 var css = ".neeto-molecules-pageloader__wrapper{height:100%;position:relative;width:100%}.neeto-molecules-pageloader__wrapper .neeto-molecules-pageloader{height:100%;left:0;position:absolute;top:0;width:100%}.neeto-molecules-pageloader__wrapper .neeto-molecules-pageloader__content{height:66px;margin-bottom:16px;overflow:hidden;padding:8px;position:relative;width:66px}.neeto-molecules-pageloader__wrapper .neeto-molecules-pageloader__text{color:rgb(var(--neeto-ui-gray-800));font-size:1.25rem;line-height:1.75rem;margin-bottom:4rem;text-align:center}.neeto-molecules-pageloader__spinner{display:flex;gap:2px;height:25px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.neeto-molecules-pageloader__spinner>div{animation:neeto-ui-stretch-delay 1.2s ease-in-out infinite;background-color:#fff;border-radius:2px;display:inline-flex;height:100%;width:2px}.neeto-molecules-pageloader__spinner .neeto-molecules-pageloader__rect2{animation-delay:-1.1s}.neeto-molecules-pageloader__spinner .neeto-molecules-pageloader__rect3{animation-delay:-1s}.neeto-molecules-pageloader__spinner .neeto-molecules-pageloader__rect4{animation-delay:-.9s}.neeto-molecules-pageloader__spinner .neeto-molecules-pageloader__rect5{animation-delay:-.8s}@keyframes neeto-ui-stretch-delay{0%,40%,to{transform:scaleY(.4);-webkit-transform:scaleY(.4)}20%{transform:scaleY(1);-webkit-transform:scaleY(1)}}";
 n(css,{});
 
-var _excluded = ["text"];
+var _excluded$1 = ["text"];
 var PageLoader = function PageLoader(_ref) {
   var _ref$text = _ref.text,
     text = _ref$text === void 0 ? "" : _ref$text,
-    otherProps = _objectWithoutProperties(_ref, _excluded);
+    otherProps = _objectWithoutProperties(_ref, _excluded$1);
   return /*#__PURE__*/React__default.createElement("div", _extends$1({
     className: "neeto-molecules-pageloader__wrapper"
   }, otherProps), /*#__PURE__*/React__default.createElement("div", {
@@ -3485,8 +3485,117 @@ var FormRow = function FormRow(_ref) {
   });
 };
 
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
+}
+
+function _toPrimitive(input, hint) {
+  if (_typeof(input) !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (_typeof(res) !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return _typeof(key) === "symbol" ? key : String(key);
+}
+
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+
+var MENU_ITEM_TYPES = {
+  menuItem: "menuItem",
+  divider: "divider"
+};
+var DEFAULT_TOOLTIP_PROPS = {
+  disabled: true,
+  position: "bottom"
+};
+
+var _excluded = ["key", "onClick", "label", "type", "isVisible"];
+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 Menu = Dropdown.Menu,
-  MenuItem = Dropdown.MenuItem;
+  MenuItem = Dropdown.MenuItem,
+  Divider = Dropdown.Divider;
+var MoreDropdown = function MoreDropdown(_ref) {
+  var _ref$dropdownButtonPr = _ref.dropdownButtonProps,
+    dropdownButtonProps = _ref$dropdownButtonPr === void 0 ? {} : _ref$dropdownButtonPr,
+    _ref$isVertical = _ref.isVertical,
+    isVertical = _ref$isVertical === void 0 ? false : _ref$isVertical,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$dropdownProps = _ref.dropdownProps,
+    dropdownProps = _ref$dropdownProps === void 0 ? {} : _ref$dropdownProps,
+    menuTopChildren = _ref.menuTopChildren,
+    menuBottomChildren = _ref.menuBottomChildren,
+    _ref$menuItems = _ref.menuItems,
+    menuItems = _ref$menuItems === void 0 ? [] : _ref$menuItems;
+  var tooltipProps = mergeRight(DEFAULT_TOOLTIP_PROPS, dropdownButtonProps.tooltipProps);
+  var targetIcon = isVertical ? MenuVertical : MenuHorizontal;
+  var isDropdownDisabled = isDisabled || dropdownProps.disabled;
+  if (isDropdownDisabled && !tooltipProps.disabled) {
+    return /*#__PURE__*/React__default.createElement(Tooltip, tooltipProps, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(Button$1, _extends$1({
+      disabled: true,
+      "data-testid": "nui-dropdown-button",
+      icon: targetIcon,
+      iconPosition: "right",
+      size: "medium",
+      style: "text"
+    }, dropdownButtonProps))));
+  }
+  return /*#__PURE__*/React__default.createElement(Dropdown, _extends$1({
+    autoWidth: true,
+    className: "flex",
+    disabled: isDisabled,
+    icon: targetIcon,
+    buttonProps: _objectSpread({
+      className: "min-h-0 flex-shrink-0",
+      style: "text"
+    }, dropdownButtonProps)
+  }, dropdownProps), /*#__PURE__*/React__default.createElement(Menu, null, menuTopChildren, menuItems.map(function (_ref2) {
+    var key = _ref2.key,
+      onClick = _ref2.onClick,
+      label = _ref2.label,
+      _ref2$type = _ref2.type,
+      type = _ref2$type === void 0 ? MENU_ITEM_TYPES.menuItem : _ref2$type,
+      _ref2$isVisible = _ref2.isVisible,
+      isVisible = _ref2$isVisible === void 0 ? true : _ref2$isVisible,
+      menuItemProps = _objectWithoutProperties(_ref2, _excluded);
+    if (!isVisible) return null;
+    return type === MENU_ITEM_TYPES.menuItem ? /*#__PURE__*/React__default.createElement(MenuItem.Button, _extends$1({
+      key: key
+    }, _objectSpread({
+      onClick: onClick
+    }, menuItemProps)), label) : /*#__PURE__*/React__default.createElement(Divider, {
+      key: key
+    });
+  }), menuBottomChildren));
+};
+
 var Row = function Row(_ref) {
   var data = _ref.data,
     setEditingRow = _ref.setEditingRow;
@@ -3523,24 +3632,29 @@ var Row = function Row(_ref) {
     style: "body2"
   }, truncate(data.ipEnd, TRUNCATE_LENGTH))), /*#__PURE__*/React__default.createElement("div", {
     className: "col-span-2 flex justify-center"
-  }, /*#__PURE__*/React__default.createElement(Dropdown, {
-    buttonProps: {
+  }, /*#__PURE__*/React__default.createElement(MoreDropdown, {
+    dropdownButtonProps: {
       "data-testid": "ip-range-actions-dropdown"
     },
-    buttonStyle: "text",
-    icon: MenuHorizontal,
-    position: "bottom-end"
-  }, /*#__PURE__*/React__default.createElement(Menu, null, /*#__PURE__*/React__default.createElement(MenuItem.Button, {
-    "data-cy": "ip-range-edit-button",
-    onClick: function onClick() {
-      return setEditingRow(data.id);
-    }
-  }, t("neetoMolecules.common.actions.edit")), /*#__PURE__*/React__default.createElement(MenuItem.Button, {
-    "data-cy": "ip-range-delete-button",
-    onClick: function onClick() {
-      return setIsDeleteIpRangeAlertOpen(true);
-    }
-  }, t("neetoMolecules.common.actions.delete")))), /*#__PURE__*/React__default.createElement(Alert, {
+    dropdownProps: {
+      position: "bottom-end"
+    },
+    menuItems: [{
+      "data-cy": "ip-range-edit-button",
+      key: "ip-range-edit-button",
+      label: t("neetoMolecules.common.actions.edit"),
+      onClick: function onClick() {
+        return setEditingRow(data.id);
+      }
+    }, {
+      "data-cy": "ip-range-delete-button",
+      key: "ip-range-delete-button",
+      label: t("neetoMolecules.common.actions.delete"),
+      onClick: function onClick() {
+        return setIsDeleteIpRangeAlertOpen(true);
+      }
+    }]
+  }), /*#__PURE__*/React__default.createElement(Alert, {
     isOpen: isDeleteIpRangeAlertOpen,
     submitButtonLabel: t("neetoMolecules.common.actions.delete"),
     message: /*#__PURE__*/React__default.createElement(Trans, {