@carbon/react 1.27.0-rc.0 → 1.28.0-rc.0

package/lib/components/OverflowMenu/OverflowMenu.js

@@ -31,21 +31,18 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["id", "aria-label", "ariaLabel", "children", "iconDescription", "direction", "flipped", "focusTrap", "menuOffset", "menuOffsetFlip", "iconClass", "onClick", "onOpen", "selectorPrimaryFocus", "renderIcon", "innerRef", "menuOptionsClass", "light", "size"];
-
-var _triggerButtonPositio, _triggerButtonPositio2, _defineProperty2, _defineProperty3;
-
-var on = function on(element) {
+const on = function (element) {
   for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
     args[_key - 1] = arguments[_key];
   }
 
-  element.addEventListener.apply(element, args);
+  element.addEventListener(...args);
   return {
-    release: function release() {
-      element.removeEventListener.apply(element, args);
+    release() {
+      element.removeEventListener(...args);
       return null;
     }
+
   };
 };
 /**
@@ -54,13 +51,19 @@ var on = function on(element) {
  */
 
 
-var triggerButtonPositionProps = (_triggerButtonPositio = {}, _rollupPluginBabelHelpers.defineProperty(_triggerButtonPositio, FloatingMenu.DIRECTION_TOP, 'bottom'), _rollupPluginBabelHelpers.defineProperty(_triggerButtonPositio, FloatingMenu.DIRECTION_BOTTOM, 'top'), _triggerButtonPositio);
+const triggerButtonPositionProps = {
+  [FloatingMenu.DIRECTION_TOP]: 'bottom',
+  [FloatingMenu.DIRECTION_BOTTOM]: 'top'
+};
 /**
  * Determines how the position of arrow should affect the floating menu position.
  * @type {Object<string, number>}
  */
 
-var triggerButtonPositionFactors = (_triggerButtonPositio2 = {}, _rollupPluginBabelHelpers.defineProperty(_triggerButtonPositio2, FloatingMenu.DIRECTION_TOP, -2), _rollupPluginBabelHelpers.defineProperty(_triggerButtonPositio2, FloatingMenu.DIRECTION_BOTTOM, -1), _triggerButtonPositio2);
+const triggerButtonPositionFactors = {
+  [FloatingMenu.DIRECTION_TOP]: -2,
+  [FloatingMenu.DIRECTION_BOTTOM]: -1
+};
 /**
  * @param {Element} menuBody The menu body with the menu arrow.
  * @param {string} direction The floating menu direction.
@@ -68,23 +71,25 @@ var triggerButtonPositionFactors = (_triggerButtonPositio2 = {}, _rollupPluginBa
  * @private
  */
 
-var getMenuOffset = function getMenuOffset(menuBody, direction, trigger, flip) {
-  var triggerButtonPositionProp = triggerButtonPositionProps[direction];
-  var triggerButtonPositionFactor = triggerButtonPositionFactors[direction];
+const getMenuOffset = (menuBody, direction, trigger, flip) => {
+  const triggerButtonPositionProp = triggerButtonPositionProps[direction];
+  const triggerButtonPositionFactor = triggerButtonPositionFactors[direction];
 
   if (process.env.NODE_ENV !== "production") {
     !(triggerButtonPositionProp && triggerButtonPositionFactor) ? process.env.NODE_ENV !== "production" ? invariant__default["default"](false, '[OverflowMenu] wrong floating menu direction: `%s`', direction) : invariant__default["default"](false) : void 0;
   }
 
-  var menuWidth = menuBody.offsetWidth,
-      menuHeight = menuBody.offsetHeight;
+  const {
+    offsetWidth: menuWidth,
+    offsetHeight: menuHeight
+  } = menuBody;
 
   switch (triggerButtonPositionProp) {
     case 'top':
     case 'bottom':
       {
         // TODO: Ensure `trigger` is there for `<OverflowMenu open>`
-        var triggerWidth = !trigger ? 0 : trigger.offsetWidth;
+        const triggerWidth = !trigger ? 0 : trigger.offsetWidth;
         return {
           left: (!flip ? 1 : -1) * (menuWidth / 2 - triggerWidth / 2),
           top: 0
@@ -95,7 +100,7 @@ var getMenuOffset = function getMenuOffset(menuBody, direction, trigger, flip) {
     case 'right':
       {
         // TODO: Ensure `trigger` is there for `<OverflowMenu open>`
-        var triggerHeight = !trigger ? 0 : trigger.offsetHeight;
+        const triggerHeight = !trigger ? 0 : trigger.offsetHeight;
         return {
           left: 0,
           top: (!flip ? 1 : -1) * (menuHeight / 2 - triggerHeight / 2)
@@ -104,97 +109,86 @@ var getMenuOffset = function getMenuOffset(menuBody, direction, trigger, flip) {
   }
 };
 
-var OverflowMenu = /*#__PURE__*/function (_Component) {
-  _rollupPluginBabelHelpers.inherits(OverflowMenu, _Component);
-
-  var _super = _rollupPluginBabelHelpers.createSuper(OverflowMenu);
-
-  function OverflowMenu() {
-    var _this;
-
-    _rollupPluginBabelHelpers.classCallCheck(this, OverflowMenu);
-
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
+class OverflowMenu extends React.Component {
+  constructor() {
+    super(...arguments);
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "state", {});
+    _rollupPluginBabelHelpers.defineProperty(this, "state", {});
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "_hFocusIn", null);
+    _rollupPluginBabelHelpers.defineProperty(this, "_hFocusIn", null);
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "_hBlurTimeout", void 0);
+    _rollupPluginBabelHelpers.defineProperty(this, "_hBlurTimeout", void 0);
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "_triggerRef", /*#__PURE__*/React__default["default"].createRef());
+    _rollupPluginBabelHelpers.defineProperty(this, "_triggerRef", /*#__PURE__*/React__default["default"].createRef());
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleClick", function (evt) {
+    _rollupPluginBabelHelpers.defineProperty(this, "handleClick", evt => {
       evt.stopPropagation();
 
-      if (!_this._menuBody || !_this._menuBody.contains(evt.target)) {
-        _this.setState({
-          open: !_this.state.open
+      if (!this._menuBody || !this._menuBody.contains(evt.target)) {
+        this.setState({
+          open: !this.state.open
         });
-
-        _this.props.onClick(evt);
+        this.props.onClick(evt);
       }
     });
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "closeMenuAndFocus", function () {
-      var wasOpen = _this.state.open;
-
-      _this.closeMenu(function () {
+    _rollupPluginBabelHelpers.defineProperty(this, "closeMenuAndFocus", () => {
+      let wasOpen = this.state.open;
+      this.closeMenu(() => {
         if (wasOpen) {
-          _this.focusMenuEl();
+          this.focusMenuEl();
         }
       });
     });
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleKeyPress", function (evt) {
-      if (_this.state.open && match.matches(evt, [keys.ArrowUp, keys.ArrowRight, keys.ArrowDown, keys.ArrowLeft])) {
+    _rollupPluginBabelHelpers.defineProperty(this, "handleKeyPress", evt => {
+      if (this.state.open && match.matches(evt, [keys.ArrowUp, keys.ArrowRight, keys.ArrowDown, keys.ArrowLeft])) {
         evt.preventDefault();
       } // Close the overflow menu on escape
 
 
       if (match.matches(evt, [keys.Escape])) {
-        _this.closeMenuAndFocus(); // Stop the esc keypress from bubbling out and closing something it shouldn't
-
+        this.closeMenuAndFocus(); // Stop the esc keypress from bubbling out and closing something it shouldn't
 
         evt.stopPropagation();
       }
     });
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleClickOutside", function (evt) {
-      if (_this.state.open && (!_this._menuBody || !_this._menuBody.contains(evt.target))) {
-        _this.closeMenu();
+    _rollupPluginBabelHelpers.defineProperty(this, "handleClickOutside", evt => {
+      if (this.state.open && (!this._menuBody || !this._menuBody.contains(evt.target))) {
+        this.closeMenu();
       }
     });
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "closeMenu", function (onCloseMenu) {
-      _this.setState({
+    _rollupPluginBabelHelpers.defineProperty(this, "closeMenu", onCloseMenu => {
+      this.setState({
         open: false
-      }, function () {
+      }, () => {
         // Optional callback to be executed after the state as been set to close
         if (onCloseMenu) {
           onCloseMenu();
         }
 
-        _this.props.onClose();
+        this.props.onClose();
       });
     });
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "focusMenuEl", function () {
-      var triggerEl = _this._triggerRef.current;
+    _rollupPluginBabelHelpers.defineProperty(this, "focusMenuEl", () => {
+      const {
+        current: triggerEl
+      } = this._triggerRef;
 
       if (triggerEl) {
         triggerEl.focus();
       }
     });
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleOverflowMenuItemFocus", function (_ref) {
-      var currentIndex = _ref.currentIndex,
-          direction = _ref.direction;
-      var enabledIndices = React__default["default"].Children.toArray(_this.props.children).reduce(function (acc, curr, i) {
+    _rollupPluginBabelHelpers.defineProperty(this, "handleOverflowMenuItemFocus", _ref => {
+      let {
+        currentIndex,
+        direction
+      } = _ref;
+      const enabledIndices = React__default["default"].Children.toArray(this.props.children).reduce((acc, curr, i) => {
         if (!curr.props.disabled) {
           acc.push(i);
         }
@@ -202,8 +196,8 @@ var OverflowMenu = /*#__PURE__*/function (_Component) {
         return acc;
       }, []);
 
-      var nextValidIndex = function () {
-        var nextIndex = enabledIndices.indexOf(currentIndex) + direction;
+      const nextValidIndex = (() => {
+        const nextIndex = enabledIndices.indexOf(currentIndex) + direction;
 
         switch (nextIndex) {
           case -1:
@@ -215,202 +209,340 @@ var OverflowMenu = /*#__PURE__*/function (_Component) {
           default:
             return nextIndex;
         }
-      }();
-
-      var overflowMenuItem = _this["overflowMenuItem".concat(enabledIndices[nextValidIndex])];
+      })();
 
+      const overflowMenuItem = this[`overflowMenuItem${enabledIndices[nextValidIndex]}`];
       overflowMenuItem === null || overflowMenuItem === void 0 ? void 0 : overflowMenuItem.focus();
     });
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "_bindMenuBody", function (menuBody) {
+    _rollupPluginBabelHelpers.defineProperty(this, "_bindMenuBody", menuBody => {
       if (!menuBody) {
-        _this._menuBody = menuBody;
+        this._menuBody = menuBody;
       }
 
-      if (!menuBody && _this._hFocusIn) {
-        _this._hFocusIn = _this._hFocusIn.release();
+      if (!menuBody && this._hFocusIn) {
+        this._hFocusIn = this._hFocusIn.release();
       }
     });
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "_handlePlace", function (menuBody) {
+    _rollupPluginBabelHelpers.defineProperty(this, "_handlePlace", menuBody => {
       if (menuBody) {
-        _this._menuBody = menuBody;
-        var hasFocusin = ('onfocusin' in window);
-        var focusinEventName = hasFocusin ? 'focusin' : 'focus';
-        _this._hFocusIn = on(menuBody.ownerDocument, focusinEventName, function (event) {
-          var target = ClickListener["default"].getEventTarget(event);
-          var triggerEl = _this._triggerRef.current;
+        this._menuBody = menuBody;
+        const hasFocusin = ('onfocusin' in window);
+        const focusinEventName = hasFocusin ? 'focusin' : 'focus';
+        this._hFocusIn = on(menuBody.ownerDocument, focusinEventName, event => {
+          const target = ClickListener["default"].getEventTarget(event);
+          const {
+            current: triggerEl
+          } = this._triggerRef;
 
           if (typeof target.matches === 'function') {
-            if (!menuBody.contains(target) && triggerEl && !target.matches(".".concat(_this.context, "--overflow-menu,.").concat(_this.context, "--overflow-menu-options"))) {
-              _this.closeMenuAndFocus();
+            if (!menuBody.contains(target) && triggerEl && !target.matches(`.${this.context}--overflow-menu,.${this.context}--overflow-menu-options`)) {
+              this.closeMenuAndFocus();
             }
           }
         }, !hasFocusin);
-
-        _this.props.onOpen();
+        this.props.onOpen();
       }
     });
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "_getTarget", function () {
-      var triggerEl = _this._triggerRef.current;
+    _rollupPluginBabelHelpers.defineProperty(this, "_getTarget", () => {
+      const {
+        current: triggerEl
+      } = this._triggerRef;
       return triggerEl && triggerEl.closest('[data-floating-menu-container]') || document.body;
     });
-
-    return _this;
   }
 
-  _rollupPluginBabelHelpers.createClass(OverflowMenu, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(_, prevState) {
-      var onClose = this.props.onClose;
+  componentDidUpdate(_, prevState) {
+    const {
+      onClose
+    } = this.props;
 
-      if (!this.state.open && prevState.open) {
-        onClose();
-      }
+    if (!this.state.open && prevState.open) {
+      onClose();
     }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      // ensure that if open=true on first render, we wait
-      // to render the floating menu until the trigger ref is not null
-      if (this._triggerRef.current) {
-        this.setState({
-          hasMountedTrigger: true
-        });
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (typeof this._hBlurTimeout === 'number') {
-        clearTimeout(this._hBlurTimeout);
-        this._hBlurTimeout = undefined;
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _classNames,
-          _classNames2,
-          _this2 = this;
-
-      var prefix = this.context;
-
-      var _this$props = this.props,
-          id = _this$props.id,
-          ariaLabel = _this$props['aria-label'],
-          deprecatedAriaLabel = _this$props.ariaLabel,
-          children = _this$props.children,
-          iconDescription = _this$props.iconDescription,
-          direction = _this$props.direction,
-          flipped = _this$props.flipped,
-          focusTrap = _this$props.focusTrap,
-          menuOffset = _this$props.menuOffset,
-          menuOffsetFlip = _this$props.menuOffsetFlip,
-          iconClass = _this$props.iconClass;
-          _this$props.onClick;
-          _this$props.onOpen;
-          _this$props.selectorPrimaryFocus;
-          var IconElement = _this$props.renderIcon,
-          ref = _this$props.innerRef,
-          menuOptionsClass = _this$props.menuOptionsClass,
-          light = _this$props.light,
-          _this$props$size = _this$props.size,
-          size = _this$props$size === void 0 ? 'md' : _this$props$size,
-          other = _rollupPluginBabelHelpers.objectWithoutProperties(_this$props, _excluded);
-
-      var open = this.state.open;
-      var overflowMenuClasses = cx__default["default"](this.props.className, "".concat(prefix, "--overflow-menu"), (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--overflow-menu--open"), open), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--overflow-menu--light"), light), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--overflow-menu--").concat(size), size), _classNames));
-      var overflowMenuOptionsClasses = cx__default["default"](menuOptionsClass, "".concat(prefix, "--overflow-menu-options"), (_classNames2 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--overflow-menu--flip"), this.props.flipped), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--overflow-menu-options--open"), open), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--overflow-menu-options--light"), light), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--overflow-menu-options--").concat(size), size), _classNames2));
-      var overflowMenuIconClasses = cx__default["default"]("".concat(prefix, "--overflow-menu__icon"), iconClass);
-      var childrenWithProps = React__default["default"].Children.toArray(children).map(function (child, index) {
-        var _child$props;
-
-        return /*#__PURE__*/React__default["default"].cloneElement(child, {
-          closeMenu: (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.closeMenu) || _this2.closeMenuAndFocus,
-          handleOverflowMenuItemFocus: _this2.handleOverflowMenuItemFocus,
-          ref: function ref(e) {
-            _this2["overflowMenuItem".concat(index)] = e;
-          },
-          index: index
-        });
+  }
+
+  componentDidMount() {
+    // ensure that if open=true on first render, we wait
+    // to render the floating menu until the trigger ref is not null
+    if (this._triggerRef.current) {
+      this.setState({
+        hasMountedTrigger: true
       });
-      var menuBody = /*#__PURE__*/React__default["default"].createElement("ul", {
-        className: overflowMenuOptionsClasses,
-        tabIndex: "-1",
-        role: "menu",
-        "aria-label": ariaLabel || deprecatedAriaLabel,
-        onKeyDown: this.handleKeyPress
-      }, childrenWithProps);
-      var wrappedMenuBody = /*#__PURE__*/React__default["default"].createElement(FloatingMenu["default"], {
-        focusTrap: focusTrap,
-        triggerRef: this._triggerRef,
-        menuDirection: direction,
-        menuOffset: flipped ? menuOffsetFlip : menuOffset,
-        menuRef: this._bindMenuBody,
-        flipped: this.props.flipped,
-        target: this._getTarget,
-        onPlace: this._handlePlace,
-        selectorPrimaryFocus: this.props.selectorPrimaryFocus
-      }, /*#__PURE__*/React__default["default"].cloneElement(menuBody, {
-        'data-floating-menu-direction': direction
-      }));
-      var iconProps = {
-        className: overflowMenuIconClasses,
-        'aria-label': iconDescription
-      };
-      return /*#__PURE__*/React__default["default"].createElement(ClickListener["default"], {
-        onClickOutside: this.handleClickOutside
-      }, /*#__PURE__*/React__default["default"].createElement("span", {
-        className: "".concat(prefix, "--overflow-menu__wrapper")
-      }, /*#__PURE__*/React__default["default"].createElement(index.IconButton, _rollupPluginBabelHelpers["extends"]({}, other, {
-        type: "button",
-        "aria-haspopup": true,
-        "aria-expanded": this.state.open,
-        className: overflowMenuClasses,
-        onClick: this.handleClick,
-        id: id,
-        ref: mergeRefs["default"](this._triggerRef, ref),
-        label: iconDescription
-      }), /*#__PURE__*/React__default["default"].createElement(IconElement, iconProps)), open && this.state.hasMountedTrigger && wrappedMenuBody));
     }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(_ref2, state) {
-      var open = _ref2.open;
-      var prevOpen = state.prevOpen;
-      return prevOpen === open ? null : {
-        open: open,
-        prevOpen: open
-      };
+  }
+
+  static getDerivedStateFromProps(_ref2, state) {
+    let {
+      open
+    } = _ref2;
+    const {
+      prevOpen
+    } = state;
+    return prevOpen === open ? null : {
+      open,
+      prevOpen: open
+    };
+  }
+
+  componentWillUnmount() {
+    if (typeof this._hBlurTimeout === 'number') {
+      clearTimeout(this._hBlurTimeout);
+      this._hBlurTimeout = undefined;
     }
-  }]);
+  }
 
-  return OverflowMenu;
-}(React.Component);
+  render() {
+    const prefix = this.context;
+    const {
+      id,
+      ['aria-label']: ariaLabel,
+      ariaLabel: deprecatedAriaLabel,
+      children,
+      iconDescription,
+      direction,
+      flipped,
+      focusTrap,
+      menuOffset,
+      menuOffsetFlip,
+      iconClass,
+      onClick,
+      // eslint-disable-line
+      onOpen,
+      // eslint-disable-line
+      selectorPrimaryFocus = '[data-floating-menu-primary-focus]',
+      // eslint-disable-line
+      renderIcon: IconElement,
+      // eslint-disable-next-line react/prop-types
+      innerRef: ref,
+      menuOptionsClass,
+      light,
+      size = 'md',
+      ...other
+    } = this.props;
+    const {
+      open
+    } = this.state;
+    const overflowMenuClasses = cx__default["default"](this.props.className, `${prefix}--overflow-menu`, {
+      [`${prefix}--overflow-menu--open`]: open,
+      [`${prefix}--overflow-menu--light`]: light,
+      [`${prefix}--overflow-menu--${size}`]: size
+    });
+    const overflowMenuOptionsClasses = cx__default["default"](menuOptionsClass, `${prefix}--overflow-menu-options`, {
+      [`${prefix}--overflow-menu--flip`]: this.props.flipped,
+      [`${prefix}--overflow-menu-options--open`]: open,
+      [`${prefix}--overflow-menu-options--light`]: light,
+      [`${prefix}--overflow-menu-options--${size}`]: size
+    });
+    const overflowMenuIconClasses = cx__default["default"](`${prefix}--overflow-menu__icon`, iconClass);
+    const childrenWithProps = React__default["default"].Children.toArray(children).map((child, index) => {
+      var _child$props;
+
+      return /*#__PURE__*/React__default["default"].cloneElement(child, {
+        closeMenu: (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.closeMenu) || this.closeMenuAndFocus,
+        handleOverflowMenuItemFocus: this.handleOverflowMenuItemFocus,
+        ref: e => {
+          this[`overflowMenuItem${index}`] = e;
+        },
+        index
+      });
+    });
+    const menuBody = /*#__PURE__*/React__default["default"].createElement("ul", {
+      className: overflowMenuOptionsClasses,
+      tabIndex: "-1",
+      role: "menu",
+      "aria-label": ariaLabel || deprecatedAriaLabel,
+      onKeyDown: this.handleKeyPress
+    }, childrenWithProps);
+    const wrappedMenuBody = /*#__PURE__*/React__default["default"].createElement(FloatingMenu["default"], {
+      focusTrap: focusTrap,
+      triggerRef: this._triggerRef,
+      menuDirection: direction,
+      menuOffset: flipped ? menuOffsetFlip : menuOffset,
+      menuRef: this._bindMenuBody,
+      flipped: this.props.flipped,
+      target: this._getTarget,
+      onPlace: this._handlePlace,
+      selectorPrimaryFocus: this.props.selectorPrimaryFocus
+    }, /*#__PURE__*/React__default["default"].cloneElement(menuBody, {
+      'data-floating-menu-direction': direction
+    }));
+    const iconProps = {
+      className: overflowMenuIconClasses,
+      'aria-label': iconDescription
+    };
+    return /*#__PURE__*/React__default["default"].createElement(ClickListener["default"], {
+      onClickOutside: this.handleClickOutside
+    }, /*#__PURE__*/React__default["default"].createElement("span", {
+      className: `${prefix}--overflow-menu__wrapper`
+    }, /*#__PURE__*/React__default["default"].createElement(index.IconButton, _rollupPluginBabelHelpers["extends"]({}, other, {
+      type: "button",
+      "aria-haspopup": true,
+      "aria-expanded": this.state.open,
+      className: overflowMenuClasses,
+      onClick: this.handleClick,
+      id: id,
+      ref: mergeRefs["default"](this._triggerRef, ref),
+      label: iconDescription
+    }), /*#__PURE__*/React__default["default"].createElement(IconElement, iconProps)), open && this.state.hasMountedTrigger && wrappedMenuBody));
+  }
 
-_rollupPluginBabelHelpers.defineProperty(OverflowMenu, "propTypes", (_defineProperty2 = {}, _rollupPluginBabelHelpers.defineProperty(_defineProperty2, 'aria-label', PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "ariaLabel", deprecate["default"](PropTypes__default["default"].string, 'This prop syntax has been deprecated. Please use the new `aria-label`.')), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "children", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "direction", PropTypes__default["default"].oneOf([FloatingMenu.DIRECTION_TOP, FloatingMenu.DIRECTION_BOTTOM])), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "flipped", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "focusTrap", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "iconClass", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "iconDescription", PropTypes__default["default"].string.isRequired), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "id", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "light", deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `OverflowMenu` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead.')), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "menuOffset", PropTypes__default["default"].oneOfType([PropTypes__default["default"].shape({
-  top: PropTypes__default["default"].number,
-  left: PropTypes__default["default"].number
-}), PropTypes__default["default"].func])), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "menuOffsetFlip", PropTypes__default["default"].oneOfType([PropTypes__default["default"].shape({
-  top: PropTypes__default["default"].number,
-  left: PropTypes__default["default"].number
-}), PropTypes__default["default"].func])), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "menuOptionsClass", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "onClick", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "onClose", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "onFocus", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "onKeyDown", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "onOpen", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "open", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "renderIcon", PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object])), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "selectorPrimaryFocus", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "size", PropTypes__default["default"].oneOf(['sm', 'md', 'lg'])), _defineProperty2));
+}
+
+_rollupPluginBabelHelpers.defineProperty(OverflowMenu, "propTypes", {
+  /**
+   * Specify a label to be read by screen readers on the container node
+   */
+  ['aria-label']: PropTypes__default["default"].string,
+
+  /**
+   * Deprecated, please use `aria-label` instead.
+   * Specify a label to be read by screen readers on the container note.
+   */
+  ariaLabel: deprecate["default"](PropTypes__default["default"].string, 'This prop syntax has been deprecated. Please use the new `aria-label`.'),
+
+  /**
+   * The child nodes.
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * The CSS class names.
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * The menu direction.
+   */
+  direction: PropTypes__default["default"].oneOf([FloatingMenu.DIRECTION_TOP, FloatingMenu.DIRECTION_BOTTOM]),
+
+  /**
+   * `true` if the menu alignment should be flipped.
+   */
+  flipped: PropTypes__default["default"].bool,
+
+  /**
+   * Enable or disable focus trap behavior
+   */
+  focusTrap: PropTypes__default["default"].bool,
+
+  /**
+   * The CSS class for the icon.
+   */
+  iconClass: PropTypes__default["default"].string,
+
+  /**
+   * The icon description.
+   */
+  iconDescription: PropTypes__default["default"].string.isRequired,
+
+  /**
+   * The element ID.
+   */
+  id: PropTypes__default["default"].string,
+
+  /**
+   * `true` to use the light version. For use on $ui-01 backgrounds only.
+   * Don't use this to make OverflowMenu background color same as container background color.
+   */
+  light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `OverflowMenu` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead.'),
+
+  /**
+   * The adjustment in position applied to the floating menu.
+   */
+  menuOffset: PropTypes__default["default"].oneOfType([PropTypes__default["default"].shape({
+    top: PropTypes__default["default"].number,
+    left: PropTypes__default["default"].number
+  }), PropTypes__default["default"].func]),
+
+  /**
+   * The adjustment in position applied to the floating menu.
+   */
+  menuOffsetFlip: PropTypes__default["default"].oneOfType([PropTypes__default["default"].shape({
+    top: PropTypes__default["default"].number,
+    left: PropTypes__default["default"].number
+  }), PropTypes__default["default"].func]),
+
+  /**
+   * The class to apply to the menu options
+   */
+  menuOptionsClass: PropTypes__default["default"].string,
+
+  /**
+   * The event handler for the `click` event.
+   */
+  onClick: PropTypes__default["default"].func,
+
+  /**
+   * Function called when menu is closed
+   */
+  onClose: PropTypes__default["default"].func,
+
+  /**
+   * The event handler for the `focus` event.
+   */
+  onFocus: PropTypes__default["default"].func,
+
+  /**
+   * The event handler for the `keydown` event.
+   */
+  onKeyDown: PropTypes__default["default"].func,
+
+  /**
+   * Function called when menu is opened
+   */
+  onOpen: PropTypes__default["default"].func,
+
+  /**
+   * `true` if the menu should be open.
+   */
+  open: PropTypes__default["default"].bool,
+
+  /**
+   * Function called to override icon rendering.
+   */
+  renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
+
+  /**
+   * Specify a CSS selector that matches the DOM element that should
+   * be focused when the OverflowMenu opens
+   */
+  selectorPrimaryFocus: PropTypes__default["default"].string,
+
+  /**
+   * Specify the size of the OverflowMenu. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
+   */
+  size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg'])
+});
 
 _rollupPluginBabelHelpers.defineProperty(OverflowMenu, "contextType", usePrefix.PrefixContext);
 
-_rollupPluginBabelHelpers.defineProperty(OverflowMenu, "defaultProps", (_defineProperty3 = {}, _rollupPluginBabelHelpers.defineProperty(_defineProperty3, 'aria-label', null), _rollupPluginBabelHelpers.defineProperty(_defineProperty3, "iconDescription", 'Options'), _rollupPluginBabelHelpers.defineProperty(_defineProperty3, "open", false), _rollupPluginBabelHelpers.defineProperty(_defineProperty3, "direction", FloatingMenu.DIRECTION_BOTTOM), _rollupPluginBabelHelpers.defineProperty(_defineProperty3, "flipped", false), _rollupPluginBabelHelpers.defineProperty(_defineProperty3, "focusTrap", true), _rollupPluginBabelHelpers.defineProperty(_defineProperty3, "renderIcon", iconsReact.OverflowMenuVertical), _rollupPluginBabelHelpers.defineProperty(_defineProperty3, "onClick", function onClick() {}), _rollupPluginBabelHelpers.defineProperty(_defineProperty3, "onKeyDown", function onKeyDown() {}), _rollupPluginBabelHelpers.defineProperty(_defineProperty3, "onClose", function onClose() {}), _rollupPluginBabelHelpers.defineProperty(_defineProperty3, "onOpen", function onOpen() {}), _rollupPluginBabelHelpers.defineProperty(_defineProperty3, "menuOffset", getMenuOffset), _rollupPluginBabelHelpers.defineProperty(_defineProperty3, "menuOffsetFlip", getMenuOffset), _rollupPluginBabelHelpers.defineProperty(_defineProperty3, "selectorPrimaryFocus", '[data-overflow-menu-primary-focus]'), _defineProperty3));
-((function () {
-  var forwardRef = function forwardRef(props, ref) {
-    return /*#__PURE__*/React__default["default"].createElement(OverflowMenu, _rollupPluginBabelHelpers["extends"]({}, props, {
-      innerRef: ref
-    }));
-  };
+_rollupPluginBabelHelpers.defineProperty(OverflowMenu, "defaultProps", {
+  ['aria-label']: null,
+  iconDescription: 'Options',
+  open: false,
+  direction: FloatingMenu.DIRECTION_BOTTOM,
+  flipped: false,
+  focusTrap: true,
+  renderIcon: iconsReact.OverflowMenuVertical,
+  onClick: () => {},
+  onKeyDown: () => {},
+  onClose: () => {},
+  onOpen: () => {},
+  menuOffset: getMenuOffset,
+  menuOffsetFlip: getMenuOffset,
+  selectorPrimaryFocus: '[data-overflow-menu-primary-focus]'
+});
+(() => {
+  const forwardRef = (props, ref) => /*#__PURE__*/React__default["default"].createElement(OverflowMenu, _rollupPluginBabelHelpers["extends"]({}, props, {
+    innerRef: ref
+  }));
 
   forwardRef.displayName = 'OverflowMenu';
   return /*#__PURE__*/React__default["default"].forwardRef(forwardRef);
-}))();
+})();
 
 exports.OverflowMenu = OverflowMenu;
 exports.getMenuOffset = getMenuOffset;