carbon-addons-iot-react 2.148.0-next.2 → 2.148.0-next.3

package/es/components/MenuButton/MenuButton.js

@@ -3,6 +3,13 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import 'core-js/modules/es.array.map.js';
 import 'core-js/modules/es.object.assign.js';
+import 'core-js/modules/es.array.concat.js';
+import 'core-js/modules/es.object.keys.js';
+import 'core-js/modules/es.symbol.js';
+import 'core-js/modules/es.array.filter.js';
+import 'core-js/modules/es.object.get-own-property-descriptor.js';
+import 'core-js/modules/web.dom-collections.for-each.js';
+import 'core-js/modules/es.object.get-own-property-descriptors.js';
 import React__default, { useState, useRef, useCallback, useEffect, useLayoutEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { unstable_Menu } from 'carbon-components-react';
@@ -13,9 +20,13 @@ import { settings } from '../../constants/Settings.js';
 import deprecate from '../../internal/deprecate.js';
 import { SplitMenuButton } from './SplitMenuButton.js';
 import { SingleMenuButton } from './SingleMenuButton.js';
-import { getMenuPosition } from './utils.js';
+import { getMenuPosition, getShadowBlockerConfig } from './utils.js';
 
+function ownKeys(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(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var iotPrefix = settings.iotPrefix;
+var GHOST = 'ghost';
 var propTypes = {
   // eslint-disable-next-line react/require-default-props
   testID: deprecate(PropTypes.string, "The 'testID' prop has been deprecated. Please use 'testId' instead."),
@@ -67,7 +78,17 @@ var propTypes = {
 
     return undefined;
   },
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+
+  /**
+   * The size of the button and the dropdown items
+   */
+  size: PropTypes.oneOf(['sm', 'md', 'default']),
+
+  /**
+   * The kind of button.
+   */
+  kind: PropTypes.oneOf(['primary', 'secondary', 'tertiary', 'ghost'])
 };
 var defaultProps = {
   testId: 'menu-button',
@@ -76,10 +97,14 @@ var defaultProps = {
   openIconDescription: 'open menu button',
   closeIconDescription: 'close menu button',
   renderOpenIcon: ChevronDown16,
-  renderCloseIcon: ChevronUp16
+  renderCloseIcon: ChevronUp16,
+  size: 'default',
+  kind: 'primary'
 };
 
 var MenuButton = function MenuButton(_ref) {
+  var _shadowBlockerButtonC, _classnames;
+
   var testID = _ref.testID,
       testId = _ref.testId,
       onPrimaryActionClick = _ref.onPrimaryActionClick,
@@ -88,7 +113,9 @@ var MenuButton = function MenuButton(_ref) {
       closeIconDescription = _ref.closeIconDescription,
       renderOpenIcon = _ref.renderOpenIcon,
       renderCloseIcon = _ref.renderCloseIcon,
-      children = _ref.children;
+      children = _ref.children,
+      buttonSize = _ref.size,
+      kind = _ref.kind;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -103,6 +130,11 @@ var MenuButton = function MenuButton(_ref) {
       position = _useState4[0],
       setPosition = _useState4[1];
 
+  var _useState5 = useState({}),
+      _useState6 = _slicedToArray(_useState5, 2),
+      shadowBlockerConf = _useState6[0],
+      setShadowBlockerConf = _useState6[1];
+
   var buttonRef = useRef(null);
   var langDir = useLangDirection();
   var handleResize = useCallback(function () {
@@ -121,9 +153,10 @@ var MenuButton = function MenuButton(_ref) {
         x: x,
         y: y
       });
+      setShadowBlockerConf(getShadowBlockerConfig(buttonRef));
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  }, [label, langDir, onPrimaryActionClick, isMenuOpen]);
+  }, [label, langDir, onPrimaryActionClick, isMenuOpen, buttonSize]);
   /**
    * This is a hacky work-around, because the current Menu (7.42.1) won't allow us
    * to set classNames or a target for where the menu should be placed via the portal
@@ -196,11 +229,31 @@ var MenuButton = function MenuButton(_ref) {
       }));
     });
   }, [children, handleChildClick]);
+  var menuSize = buttonSize === 'default' ? 'lg' : buttonSize;
+  var buttonKind = !label ? GHOST : kind;
+  /**
+   * This shadow-blocker is needed to remove the menu shadow covering the button.
+   * We can't use a pure CSS solution (like ::after) for this since the shadow-blocker styling
+   * needs to get the position and dimensions of the menu and it is not possible to
+   * pass that info as css attributes (vars) to the menu since the component internally use
+   * the style attribute to set the x & y attributes.
+   */
+
+  var menuHeight = shadowBlockerConf.menuHeight,
+      flippedX = shadowBlockerConf.flippedX,
+      flippedY = shadowBlockerConf.flippedY,
+      opensHorizontally = shadowBlockerConf.opensHorizontally;
+  var shadowBlockerButtonClasses = (_shadowBlockerButtonC = {}, _defineProperty(_shadowBlockerButtonC, "".concat(iotPrefix, "--menu-button--flip-y"), flippedY), _defineProperty(_shadowBlockerButtonC, "".concat(iotPrefix, "--menu-button--flip-x"), flippedX), _defineProperty(_shadowBlockerButtonC, "".concat(iotPrefix, "--menu-button--opens-horizontally"), opensHorizontally), _shadowBlockerButtonC);
+  var showShadowBlocker = buttonKind === GHOST && isMenuOpen && !label;
+  var shadowBlocker = showShadowBlocker ? /*#__PURE__*/React__default.createElement("div", {
+    style: _defineProperty({}, "--menu-height", "".concat(menuHeight, "px")),
+    className: classnames((_classnames = {}, _defineProperty(_classnames, "".concat(iotPrefix, "--menu__shadow-blocker--flip-y"), flippedY), _defineProperty(_classnames, "".concat(iotPrefix, "--menu__shadow-blocker--flip-x"), flippedX), _defineProperty(_classnames, "".concat(iotPrefix, "--menu__shadow-blocker--opens-horizontally"), opensHorizontally), _classnames), "".concat(iotPrefix, "--menu__shadow-blocker"), "".concat(iotPrefix, "--menu__shadow-blocker--").concat(menuSize))
+  }) : null;
   var ButtonComponent = typeof onPrimaryActionClick === 'function' && label ? SplitMenuButton : SingleMenuButton;
   return /*#__PURE__*/React__default.createElement("div", {
     // TODO: remove deprecated 'testID' in v3.
     "data-testid": "".concat(testID || testId, "-wrapper"),
-    className: classnames("".concat(iotPrefix, "--menu-button"), _defineProperty({}, "".concat(iotPrefix, "--menu-button--open"), isMenuOpen))
+    className: classnames("".concat(iotPrefix, "--menu-button"), _objectSpread(_defineProperty({}, "".concat(iotPrefix, "--menu-button--open"), isMenuOpen), shadowBlockerButtonClasses))
   }, /*#__PURE__*/React__default.createElement(ButtonComponent, {
     ref: buttonRef,
     onPrimaryActionClick: handlePrimaryClick,
@@ -209,10 +262,14 @@ var MenuButton = function MenuButton(_ref) {
     renderIcon: isMenuOpen ? renderCloseIcon : renderOpenIcon,
     label: label // TODO: remove deprecated 'testID' in v3.
     ,
-    testId: testID || testId
+    testId: testID || testId,
+    size: buttonSize,
+    kind: buttonKind
   }), /*#__PURE__*/React__default.createElement(unstable_Menu, _extends({
+    className: classnames(_defineProperty({}, "".concat(iotPrefix, "--menu-button--icon-only"), buttonKind === GHOST), "".concat(iotPrefix, "--menu-button__menu")),
+    size: menuSize,
     open: isMenuOpen
-  }, position), contextMenuItems));
+  }, position), contextMenuItems, shadowBlocker));
 };
 
 MenuButton.propTypes = propTypes;
@@ -311,6 +368,51 @@ MenuButton.__docgenInfo = {
       "required": false,
       "description": "Optional prop to change the closed state icon on the button\nCan be a React component class"
     },
+    "size": {
+      "defaultValue": {
+        "value": "'default'",
+        "computed": false
+      },
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "'sm'",
+          "computed": false
+        }, {
+          "value": "'md'",
+          "computed": false
+        }, {
+          "value": "'default'",
+          "computed": false
+        }]
+      },
+      "required": false,
+      "description": "The size of the button and the dropdown items"
+    },
+    "kind": {
+      "defaultValue": {
+        "value": "'primary'",
+        "computed": false
+      },
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "'primary'",
+          "computed": false
+        }, {
+          "value": "'secondary'",
+          "computed": false
+        }, {
+          "value": "'tertiary'",
+          "computed": false
+        }, {
+          "value": "'ghost'",
+          "computed": false
+        }]
+      },
+      "required": false,
+      "description": "The kind of button."
+    },
     "testID": {
       "type": {
         "name": "custom",

package/es/components/MenuButton/SingleMenuButton.js

@@ -27,7 +27,17 @@ var propTypes = {
    * be read by screen readers
    */
   iconDescription: PropTypes.string.isRequired,
-  testId: PropTypes.string.isRequired
+  testId: PropTypes.string.isRequired,
+
+  /**
+   * The size of the button and the dropdown items
+   */
+  size: PropTypes.oneOf(['sm', 'md', 'default']).isRequired,
+
+  /**
+   * The kind of button to render
+   */
+  kind: PropTypes.oneOf(['primary', 'secondary', 'tertiary', 'ghost']).isRequired
 };
 var defaultProps = {
   label: '',
@@ -40,7 +50,9 @@ var SingleMenuButton = /*#__PURE__*/React__default.forwardRef(function (_ref, re
       label = _ref.label,
       iconDescription = _ref.iconDescription,
       renderIcon = _ref.renderIcon,
-      testId = _ref.testId;
+      testId = _ref.testId,
+      size = _ref.size,
+      kind = _ref.kind;
   return /*#__PURE__*/React__default.createElement(Button, {
     ref: ref,
     className: "".concat(iotPrefix, "--menu-button__trigger"),
@@ -48,8 +60,9 @@ var SingleMenuButton = /*#__PURE__*/React__default.forwardRef(function (_ref, re
     iconDescription: iconDescription,
     renderIcon: renderIcon,
     hasIconOnly: !label,
-    kind: !label ? 'ghost' : 'primary',
-    testId: label ? "".concat(testId, "-single") : "".concat(testId, "-icon")
+    kind: kind,
+    testId: label ? "".concat(testId, "-single") : "".concat(testId, "-icon"),
+    size: size
   }, label);
 });
 SingleMenuButton.propTypes = propTypes;
@@ -116,6 +129,43 @@ SingleMenuButton.__docgenInfo = {
       },
       "required": true,
       "description": ""
+    },
+    "size": {
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "'sm'",
+          "computed": false
+        }, {
+          "value": "'md'",
+          "computed": false
+        }, {
+          "value": "'default'",
+          "computed": false
+        }]
+      },
+      "required": true,
+      "description": "The size of the button and the dropdown items"
+    },
+    "kind": {
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "'primary'",
+          "computed": false
+        }, {
+          "value": "'secondary'",
+          "computed": false
+        }, {
+          "value": "'tertiary'",
+          "computed": false
+        }, {
+          "value": "'ghost'",
+          "computed": false
+        }]
+      },
+      "required": true,
+      "description": "The kind of button to render"
     }
   }
 };

package/es/components/MenuButton/SplitMenuButton.js

@@ -34,7 +34,17 @@ var propTypes = {
    * If specifying the `renderIcon` prop, provide a description for that icon that can
    * be read by screen readers
    */
-  iconDescription: PropTypes.string.isRequired
+  iconDescription: PropTypes.string.isRequired,
+
+  /**
+   * The size of the button and the dropdown items
+   */
+  size: PropTypes.oneOf(['sm', 'md', 'default']).isRequired,
+
+  /**
+   * The kind of button to render
+   */
+  kind: PropTypes.oneOf(['primary', 'secondary', 'tertiary']).isRequired
 };
 var SplitMenuButton = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var label = _ref.label,
@@ -42,11 +52,15 @@ var SplitMenuButton = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
       renderIcon = _ref.renderIcon,
       onPrimaryActionClick = _ref.onPrimaryActionClick,
       onSecondaryActionClick = _ref.onSecondaryActionClick,
-      testId = _ref.testId;
+      size = _ref.size,
+      testId = _ref.testId,
+      kind = _ref.kind;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button, {
     className: classnames("".concat(iotPrefix, "--menu-button__primary")),
     onClick: onPrimaryActionClick,
-    testId: "".concat(testId, "-primary")
+    testId: "".concat(testId, "-primary"),
+    size: size,
+    kind: kind
   }, label), /*#__PURE__*/React__default.createElement(Button, {
     ref: ref,
     className: classnames("".concat(iotPrefix, "--menu-button__secondary"), "".concat(iotPrefix, "--menu-button__trigger")),
@@ -54,7 +68,9 @@ var SplitMenuButton = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     iconDescription: iconDescription,
     renderIcon: renderIcon,
     onClick: onSecondaryActionClick,
-    testId: "".concat(testId, "-secondary")
+    testId: "".concat(testId, "-secondary"),
+    size: size,
+    kind: kind
   }));
 });
 SplitMenuButton.propTypes = propTypes;
@@ -108,6 +124,40 @@ SplitMenuButton.__docgenInfo = {
       },
       "required": true,
       "description": "If specifying the `renderIcon` prop, provide a description for that icon that can\nbe read by screen readers"
+    },
+    "size": {
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "'sm'",
+          "computed": false
+        }, {
+          "value": "'md'",
+          "computed": false
+        }, {
+          "value": "'default'",
+          "computed": false
+        }]
+      },
+      "required": true,
+      "description": "The size of the button and the dropdown items"
+    },
+    "kind": {
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "'primary'",
+          "computed": false
+        }, {
+          "value": "'secondary'",
+          "computed": false
+        }, {
+          "value": "'tertiary'",
+          "computed": false
+        }]
+      },
+      "required": true,
+      "description": "The kind of button to render"
     }
   }
 };

package/es/components/MenuButton/utils.js

@@ -1,24 +1,88 @@
 import 'core-js/modules/es.array.concat.js';
 import 'core-js/modules/es.array.join.js';
 import 'core-js/modules/es.array.filter.js';
+import 'core-js/modules/es.array.includes.js';
+import 'core-js/modules/es.string.includes.js';
 import { settings } from '../../constants/Settings.js';
 
 var prefix = settings.prefix;
-var getMenuPosition = function getMenuPosition(_ref) {
-  var _buttonRef$current, _buttonRef$current$pr, _buttonRef$current$ne, _buttonRef$current2, _menuRect$height, _menuRect$width;
 
+var getBoundingClientRects = function getBoundingClientRects(buttonRef, isSplitButton) {
+  var _buttonRef$current, _buttonRef$current$pr, _buttonRef$current$ne, _buttonRef$current2;
+
+  var buttonRect = buttonRef.current.getBoundingClientRect();
+  var primaryButtonRect = isSplitButton ? buttonRef === null || buttonRef === void 0 ? void 0 : (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : (_buttonRef$current$pr = _buttonRef$current.previousSibling) === null || _buttonRef$current$pr === void 0 ? void 0 : _buttonRef$current$pr.getBoundingClientRect() : null; // Once the menuButton can accept a target for the react portal, we can
+  // use this method again once the menu is placed within the same div as the
+  // button.
+  // const menuRect = buttonRef.current.nextSibling?.getBoundingClientRect();
+
+  var node = (_buttonRef$current$ne = (_buttonRef$current2 = buttonRef.current) === null || _buttonRef$current2 === void 0 ? void 0 : _buttonRef$current2.nextSibling) !== null && _buttonRef$current$ne !== void 0 ? _buttonRef$current$ne : document.querySelector(".".concat(prefix, "--menu.").concat(prefix, "--menu--open.").concat(prefix, "--menu--root"));
+  var menuRect = node === null || node === void 0 ? void 0 : node.getBoundingClientRect();
+  return {
+    buttonRect: buttonRect,
+    primaryButtonRect: primaryButtonRect,
+    menuRect: menuRect
+  };
+};
+
+var getMenuDimensions = function getMenuDimensions(menuRect) {
+  var _menuRect$height, _menuRect$width;
+
+  return {
+    menuHeight: (_menuRect$height = menuRect === null || menuRect === void 0 ? void 0 : menuRect.height) !== null && _menuRect$height !== void 0 ? _menuRect$height : 0,
+    menuWidth: (_menuRect$width = menuRect === null || menuRect === void 0 ? void 0 : menuRect.width) !== null && _menuRect$width !== void 0 ? _menuRect$width : 0
+  };
+};
+
+var getOverflow = function getOverflow(menuRect, buttonRect) {
+  var windowWidth = window.innerWidth || document.documentElement.clientWidth;
+  var windowHeight = window.innerHeight || document.documentElement.clientHeight;
+
+  var _getMenuDimensions = getMenuDimensions(menuRect),
+      menuHeight = _getMenuDimensions.menuHeight,
+      menuWidth = _getMenuDimensions.menuWidth;
+
+  var offTop = buttonRect.top - menuHeight < 0;
+  var offLeft = buttonRect.left - menuWidth < 0;
+  var offRight = buttonRect.right + menuWidth > windowWidth;
+  var offBottom = buttonRect.bottom + menuHeight > windowHeight;
+  var T = offTop ? 'top' : '';
+  var R = offRight ? 'right' : '';
+  var B = offBottom ? 'bottom' : '';
+  var L = offLeft ? 'left' : '';
+  return [T, R, B, L].filter(Boolean).join('-');
+};
+
+var getShadowBlockerConfig = function getShadowBlockerConfig(buttonRef) {
+  var _getBoundingClientRec = getBoundingClientRects(buttonRef),
+      buttonRect = _getBoundingClientRec.buttonRect,
+      menuRect = _getBoundingClientRec.menuRect;
+
+  var _getMenuDimensions2 = getMenuDimensions(menuRect),
+      menuHeight = _getMenuDimensions2.menuHeight;
+
+  var overflow = getOverflow(menuRect, buttonRect);
+  var flippedX = (overflow === null || overflow === void 0 ? void 0 : overflow.includes('bottom')) && !(overflow !== null && overflow !== void 0 && overflow.includes('top'));
+  var flippedY = overflow === null || overflow === void 0 ? void 0 : overflow.includes('right');
+  var opensHorizontally = (overflow === null || overflow === void 0 ? void 0 : overflow.includes('top')) && (overflow === null || overflow === void 0 ? void 0 : overflow.includes('bottom'));
+  return {
+    menuHeight: menuHeight,
+    flippedX: flippedX,
+    flippedY: flippedY,
+    opensHorizontally: opensHorizontally
+  };
+};
+var getMenuPosition = function getMenuPosition(_ref) {
   var label = _ref.label,
       buttonRef = _ref.buttonRef,
       onPrimaryActionClick = _ref.onPrimaryActionClick,
       langDir = _ref.langDir;
   var isSplitButton = label && typeof onPrimaryActionClick === 'function';
-  var buttonRect = buttonRef.current.getBoundingClientRect();
-  var primaryButtonRect = isSplitButton ? buttonRef === null || buttonRef === void 0 ? void 0 : (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : (_buttonRef$current$pr = _buttonRef$current.previousSibling) === null || _buttonRef$current$pr === void 0 ? void 0 : _buttonRef$current$pr.getBoundingClientRect() : null;
-  var node = (_buttonRef$current$ne = (_buttonRef$current2 = buttonRef.current) === null || _buttonRef$current2 === void 0 ? void 0 : _buttonRef$current2.nextSibling) !== null && _buttonRef$current$ne !== void 0 ? _buttonRef$current$ne : document.querySelector(".".concat(prefix, "--menu.").concat(prefix, "--menu--open.").concat(prefix, "--menu--root"));
-  var menuRect = node === null || node === void 0 ? void 0 : node.getBoundingClientRect(); // Once the menuButton can accept a target for the react portal, we can
-  // use this method again once the menu is placed within the same div as the
-  // button.
-  // const menuRect = buttonRef.current.nextSibling?.getBoundingClientRect();
+
+  var _getBoundingClientRec2 = getBoundingClientRects(buttonRef, isSplitButton),
+      buttonRect = _getBoundingClientRec2.buttonRect,
+      primaryButtonRect = _getBoundingClientRec2.primaryButtonRect,
+      menuRect = _getBoundingClientRec2.menuRect;
 
   var isRtl = langDir === 'rtl';
   var buttonX = buttonRect.x,
@@ -36,19 +100,12 @@ var getMenuPosition = function getMenuPosition(_ref) {
   var scrollXOffset = hasScrollY ? 15 : 0;
   var y = buttonY + buttonHeight;
   var x = isSplitButton ? buttonX + primaryButtonWidth : buttonX;
-  var windowWidth = window.innerWidth || document.documentElement.clientWidth;
-  var windowHeight = window.innerHeight || document.documentElement.clientHeight;
-  var menuHeight = (_menuRect$height = menuRect === null || menuRect === void 0 ? void 0 : menuRect.height) !== null && _menuRect$height !== void 0 ? _menuRect$height : 0;
-  var menuWidth = (_menuRect$width = menuRect === null || menuRect === void 0 ? void 0 : menuRect.width) !== null && _menuRect$width !== void 0 ? _menuRect$width : 0;
-  var offTop = buttonRect.top - menuHeight < 0;
-  var offLeft = buttonRect.left - menuWidth < 0;
-  var offRight = buttonRect.right + menuWidth > windowWidth;
-  var offBottom = buttonRect.bottom + menuHeight > windowHeight;
-  var T = offTop ? 'top' : '';
-  var R = offRight ? 'right' : '';
-  var B = offBottom ? 'bottom' : '';
-  var L = offLeft ? 'left' : '';
-  var overflow = [T, R, B, L].filter(Boolean).join('-');
+
+  var _getMenuDimensions3 = getMenuDimensions(menuRect),
+      menuHeight = _getMenuDimensions3.menuHeight,
+      menuWidth = _getMenuDimensions3.menuWidth;
+
+  var overflow = getOverflow(menuRect, buttonRect);
   /* istanbul ignore else */
 
   if (menuRect) {
@@ -112,4 +169,4 @@ var getMenuPosition = function getMenuPosition(_ref) {
   };
 };
 
-export { getMenuPosition };
+export { getMenuPosition, getShadowBlockerConfig };