@carbon/react 1.78.2 → 1.79.0-rc.0

package/lib/components/OverflowMenu/OverflowMenu.js

@@ -10,38 +10,38 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var FloatingMenu = require('../../internal/FloatingMenu.js');
 var React = require('react');
-var ClickListener = require('../../internal/ClickListener.js');
-var index = require('../IconButton/index.js');
 var iconsReact = require('@carbon/icons-react');
-var usePrefix = require('../../internal/usePrefix.js');
-var PropTypes = require('prop-types');
 var cx = require('classnames');
-var deprecate = require('../../prop-types/deprecate.js');
 var invariant = require('invariant');
-var mergeRefs = require('../../tools/mergeRefs.js');
+var PropTypes = require('prop-types');
+var ClickListener = require('../../internal/ClickListener.js');
+var FloatingMenu = require('../../internal/FloatingMenu.js');
+var keys = require('../../internal/keyboard/keys.js');
+var match = require('../../internal/keyboard/match.js');
 var noopFn = require('../../internal/noopFn.js');
+var usePrefix = require('../../internal/usePrefix.js');
+var deprecate = require('../../prop-types/deprecate.js');
+var mergeRefs = require('../../tools/mergeRefs.js');
 var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
-var match = require('../../internal/keyboard/match.js');
-var keys = require('../../internal/keyboard/keys.js');
+var index = require('../IconButton/index.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var invariant__default = /*#__PURE__*/_interopDefaultLegacy(invariant);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 const getInstanceId = setupGetInstanceId["default"]();
-const on = function (element) {
+const on = function (target) {
   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(...args);
+  target.addEventListener(...args);
   return {
     release() {
-      element.removeEventListener(...args);
+      target.removeEventListener(...args);
       return null;
     }
   };
@@ -49,7 +49,6 @@ const on = function (element) {
 
 /**
  * The CSS property names of the arrow keyed by the floating menu direction.
- * @type {[key: string]: string}
  */
 const triggerButtonPositionProps = {
   [FloatingMenu.DIRECTION_TOP]: 'bottom',
@@ -57,13 +56,22 @@ const triggerButtonPositionProps = {
 };
 
 /**
- * Determines how the position of arrow should affect the floating menu position.
- * @type {[key: string]: number}
+ * Determines how the position of the arrow should affect the floating menu
+ * position.
  */
 const triggerButtonPositionFactors = {
   [FloatingMenu.DIRECTION_TOP]: -2,
   [FloatingMenu.DIRECTION_BOTTOM]: -1
 };
+
+/**
+ * Calculates the offset for the floating menu.
+ *
+ * @param menuBody - The menu body with the menu arrow.
+ * @param direction - The floating menu direction.
+ * @returns The adjustment of the floating menu position, upon the position of
+ *          the menu arrow.
+ */
 const getMenuOffset = (menuBody, direction, trigger, flip) => {
   const triggerButtonPositionProp = triggerButtonPositionProps[direction];
   const triggerButtonPositionFactor = triggerButtonPositionFactors[direction];
@@ -92,324 +100,254 @@ const getMenuOffset = (menuBody, direction, trigger, flip) => {
       };
   }
 };
-class OverflowMenu extends React__default["default"].Component {
-  constructor() {
-    super(...arguments);
-    _rollupPluginBabelHelpers.defineProperty(this, "state", {
-      open: false,
-      // Set a default value for 'open'
-      hasMountedTrigger: false,
-      // Set a default value for 'hasMountedTrigger'
-      click: false // Set a default value for 'click'
-    });
-    _rollupPluginBabelHelpers.defineProperty(this, "instanceId", getInstanceId());
-    /**
-     * The handle of `onfocusin` or `focus` event handler.
-     * @private
-     */
-    _rollupPluginBabelHelpers.defineProperty(this, "_hFocusIn", null);
-    /**
-     * The timeout handle for handling `blur` event.
-     * @private
-     */
-    _rollupPluginBabelHelpers.defineProperty(this, "_hBlurTimeout", void 0);
-    /**
-     * The element ref of the tooltip's trigger button.
-     * @type {React.RefObject<HTMLElement>}
-     * @private
-     */
-    _rollupPluginBabelHelpers.defineProperty(this, "_triggerRef", /*#__PURE__*/React__default["default"].createRef());
-    _rollupPluginBabelHelpers.defineProperty(this, "handleClick", evt => {
-      const {
-        onClick = noopFn.noopFn
-      } = this.props;
-      this.setState({
-        click: true
-      });
-      if (!this._menuBody || !this._menuBody.contains(evt.target)) {
-        this.setState({
-          open: !this.state.open
-        });
-        onClick(evt);
-      }
-    });
-    _rollupPluginBabelHelpers.defineProperty(this, "closeMenuAndFocus", () => {
-      const wasClicked = this.state.click;
-      const wasOpen = this.state.open;
-      this.closeMenu(() => {
-        if (wasOpen && !wasClicked) {
-          this.focusMenuEl();
-        }
-      });
-    });
-    _rollupPluginBabelHelpers.defineProperty(this, "closeMenuOnEscape", () => {
-      const wasOpen = this.state.open;
-      this.closeMenu(() => {
-        if (wasOpen) {
-          this.focusMenuEl();
-        }
-      });
-    });
-    _rollupPluginBabelHelpers.defineProperty(this, "handleKeyPress", evt => {
-      if (this.state.open && match.matches(evt, [keys.ArrowUp, keys.ArrowRight, keys.ArrowDown, keys.ArrowLeft])) {
-        evt.preventDefault();
-      }
+const OverflowMenu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    ['aria-label']: ariaLabel = null,
+    ariaLabel: deprecatedAriaLabel,
+    children,
+    className,
+    direction = FloatingMenu.DIRECTION_BOTTOM,
+    flipped = false,
+    focusTrap = true,
+    iconClass,
+    iconDescription = 'Options',
+    id,
+    light,
+    menuOffset = getMenuOffset,
+    menuOffsetFlip = getMenuOffset,
+    menuOptionsClass,
+    onClick = noopFn.noopFn,
+    onClose = noopFn.noopFn,
+    onOpen = noopFn.noopFn,
+    open: openProp,
+    renderIcon: IconElement = iconsReact.OverflowMenuVertical,
+    selectorPrimaryFocus = '[data-floating-menu-primary-focus]',
+    size = 'md',
+    ...other
+  } = _ref;
+  const prefix = React.useContext(usePrefix.PrefixContext);
+  const [open, setOpen] = React.useState(openProp ?? false);
+  const [click, setClick] = React.useState(false);
+  const [hasMountedTrigger, setHasMountedTrigger] = React.useState(false);
+  /**  The handle of `onfocusin` or `focus` event handler. */
+  const hFocusIn = React.useRef(null);
+  const instanceId = React.useRef(getInstanceId());
+  const menuBodyRef = React.useRef(null);
+  const menuItemRefs = React.useRef({});
+  const prevOpenProp = React.useRef(openProp);
+  const prevOpenState = React.useRef(open);
+  /** The element ref of the tooltip's trigger button. */
+  const triggerRef = React.useRef(null);
 
-      // Close the overflow menu on escape
-      if (match.matches(evt, [keys.Escape])) {
-        this.closeMenuOnEscape();
+  // Sync open prop changes.
+  React.useEffect(() => {
+    if (prevOpenProp.current !== openProp) {
+      setOpen(!!openProp);
+      prevOpenProp.current = openProp;
+    }
+  }, [openProp]);
+
+  // Mark trigger as mounted.
+  React.useEffect(() => {
+    if (triggerRef.current) {
+      setHasMountedTrigger(true);
+    }
+  }, []);
 
-        // Stop the esc keypress from bubbling out and closing something it shouldn't
-        evt.stopPropagation();
+  // Call `onClose` when menu closes.
+  React.useEffect(() => {
+    if (!open && prevOpenState.current) {
+      onClose();
+    }
+    prevOpenState.current = open;
+  }, [open, onClose]);
+  const focusMenuEl = React.useCallback(() => {
+    if (triggerRef.current) {
+      triggerRef.current.focus();
+    }
+  }, []);
+  const closeMenu = React.useCallback(onCloseMenu => {
+    setOpen(false);
+    // Optional callback to be executed after the state as been set to close
+    if (onCloseMenu) {
+      onCloseMenu();
+    }
+    onClose();
+  }, [onClose]);
+  const closeMenuAndFocus = React.useCallback(() => {
+    const wasClicked = click;
+    const wasOpen = open;
+    closeMenu(() => {
+      if (wasOpen && !wasClicked) {
+        focusMenuEl();
       }
     });
-    _rollupPluginBabelHelpers.defineProperty(this, "handleClickOutside", evt => {
-      if (this.state.open && (!this._menuBody || !this._menuBody.contains(evt.target))) {
-        this.closeMenu();
+  }, [click, open, closeMenu, focusMenuEl]);
+  const closeMenuOnEscape = React.useCallback(() => {
+    const wasOpen = open;
+    closeMenu(() => {
+      if (wasOpen) {
+        focusMenuEl();
       }
     });
-    _rollupPluginBabelHelpers.defineProperty(this, "closeMenu", onCloseMenu => {
-      const {
-        onClose = noopFn.noopFn
-      } = this.props;
-      this.setState({
-        open: false
-      }, () => {
-        // Optional callback to be executed after the state as been set to close
-        if (onCloseMenu) {
-          onCloseMenu();
-        }
-        onClose();
-      });
-    });
-    _rollupPluginBabelHelpers.defineProperty(this, "focusMenuEl", () => {
-      const {
-        current: triggerEl
-      } = this._triggerRef;
-      if (triggerEl) {
-        triggerEl.focus();
-      }
-    });
-    /**
-     * Focuses the next enabled overflow menu item given the currently focused
-     * item index and direction to move
-     * @param {object} params
-     * @param {number} params.currentIndex - the index of the currently focused
-     * overflow menu item in the list of overflow menu items
-     * @param {number} params.direction - number denoting the direction to move
-     * focus (1 for forwards, -1 for backwards)
-     */
-    _rollupPluginBabelHelpers.defineProperty(this, "handleOverflowMenuItemFocus", _ref => {
-      let {
-        currentIndex,
-        direction
-      } = _ref;
-      const enabledIndices = React__default["default"].Children.toArray(this.props.children).reduce((acc, curr, i) => {
-        if (/*#__PURE__*/React__default["default"].isValidElement(curr) && !curr.props.disabled) {
-          acc.push(i);
-        }
-        return acc;
-      }, []);
-      const nextValidIndex = (() => {
-        const nextIndex = enabledIndices.indexOf(currentIndex) + direction;
-        switch (nextIndex) {
-          case -1:
-            return enabledIndices.length - 1;
-          case enabledIndices.length:
-            return 0;
-          default:
-            return nextIndex;
-        }
-      })();
-      const overflowMenuItem = this[`overflowMenuItem${enabledIndices[nextValidIndex]}`];
-      overflowMenuItem?.focus();
-    });
-    /**
-     * Handles the floating menu being unmounted or non-floating menu being
-     * mounted or unmounted.
-     * @param {Element} menuBody The DOM element of the menu body.
-     * @private
-     */
-    _rollupPluginBabelHelpers.defineProperty(this, "_menuBody", null);
-    _rollupPluginBabelHelpers.defineProperty(this, "_bindMenuBody", menuBody => {
-      if (!menuBody) {
-        this._menuBody = menuBody;
+  }, [open, closeMenu, focusMenuEl]);
+  const handleClick = evt => {
+    setClick(true);
+    if (!menuBodyRef.current || !menuBodyRef.current.contains(evt.target)) {
+      setOpen(prev => !prev);
+      onClick(evt);
+    }
+  };
+  const handleKeyPress = evt => {
+    if (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])) {
+      closeMenuOnEscape();
+
+      // Stop the esc keypress from bubbling out and closing something it shouldn't
+      evt.stopPropagation();
+    }
+  };
+  const handleClickOutside = evt => {
+    if (open && (!menuBodyRef.current || !menuBodyRef.current.contains(evt.target))) {
+      closeMenu();
+    }
+  };
+
+  /**
+   * Focuses the next enabled overflow menu item given the currently focused
+   * item index and direction to move.
+   */
+  const handleOverflowMenuItemFocus = _ref2 => {
+    let {
+      currentIndex,
+      direction
+    } = _ref2;
+    const enabledIndices = React.Children.toArray(children).reduce((acc, curr, i) => {
+      if (/*#__PURE__*/React.isValidElement(curr) && !curr.props.disabled) {
+        acc.push(i);
       }
-      if (!menuBody && this._hFocusIn) {
-        this._hFocusIn = this._hFocusIn.release();
+      return acc;
+    }, []);
+    const nextValidIndex = (() => {
+      const nextIndex = enabledIndices.indexOf(currentIndex) + direction;
+      switch (nextIndex) {
+        case -1:
+          return enabledIndices.length - 1;
+        case enabledIndices.length:
+          return 0;
+        default:
+          return nextIndex;
       }
-    });
-    /**
-     * Handles the floating menu being placed.
-     * @param {Element} menuBody The DOM element of the menu body.
-     * @private
-     */
-    _rollupPluginBabelHelpers.defineProperty(this, "_handlePlace", menuBody => {
-      const {
-        onOpen = noopFn.noopFn
-      } = this.props;
-      if (menuBody) {
-        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(`.${this.context}--overflow-menu:first-child,.${this.context}--overflow-menu-options:first-child`)) {
-              this.closeMenuAndFocus();
-            }
-          }
-        }, !hasFocusin);
-        onOpen();
+    })();
+    const overflowMenuItem = menuItemRefs.current[enabledIndices[nextValidIndex]];
+    overflowMenuItem?.focus();
+  };
+  const bindMenuBody = menuBody => {
+    if (!menuBody) {
+      menuBodyRef.current = menuBody;
+    }
+    if (!menuBody && hFocusIn.current) {
+      hFocusIn.current = hFocusIn.current.release();
+    }
+  };
+  const handlePlace = menuBody => {
+    if (!menuBody) return;
+    menuBodyRef.current = menuBody;
+    const hasFocusin = 'onfocusin' in window;
+    const focusinEventName = hasFocusin ? 'focusin' : 'focus';
+    hFocusIn.current = on(menuBody.ownerDocument, focusinEventName, event => {
+      const target = event.target;
+      const triggerEl = triggerRef.current;
+      if (typeof target.matches === 'function') {
+        if (!menuBody.contains(target) && triggerEl && !target.matches(`.${prefix}--overflow-menu:first-child, .${prefix}--overflow-menu-options:first-child`)) {
+          closeMenuAndFocus();
+        }
       }
-    });
-    /**
-     * @returns {Element} The DOM element where the floating menu is placed in.
-     */
-    _rollupPluginBabelHelpers.defineProperty(this, "_getTarget", () => {
-      const {
-        current: triggerEl
-      } = this._triggerRef;
-      return triggerEl instanceof Element && triggerEl.closest('[data-floating-menu-container]') || document.body;
-    });
-  }
-  componentDidUpdate(_, prevState) {
-    const {
-      onClose = noopFn.noopFn
-    } = this.props;
-    if (!this.state.open && prevState.open) {
-      onClose();
+    }, !hasFocusin);
+    onOpen();
+  };
+  const getTarget = () => {
+    const triggerEl = triggerRef.current;
+    if (triggerEl instanceof Element) {
+      return triggerEl.closest('[data-floating-menu-container]') || document.body;
     }
-  }
-  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
+    return document.body;
+  };
+  const menuBodyId = `overflow-menu-${instanceId.current}__menu-body`;
+  const overflowMenuClasses = cx__default["default"](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`]: 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.Children.toArray(children).map((child, index) => {
+    if (/*#__PURE__*/React.isValidElement(child)) {
+      const childElement = child;
+      return /*#__PURE__*/React.cloneElement(childElement, {
+        closeMenu: childElement.props.closeMenu || closeMenuAndFocus,
+        handleOverflowMenuItemFocus,
+        ref: el => {
+          menuItemRefs.current[index] = el;
+        },
+        index
       });
     }
-  }
-  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;
-    }
-  }
-  render() {
-    const prefix = this.context;
-    const {
-      id,
-      ['aria-label']: ariaLabel = null,
-      ariaLabel: deprecatedAriaLabel,
-      children,
-      iconDescription = 'Options',
-      direction = FloatingMenu.DIRECTION_BOTTOM,
-      flipped = false,
-      focusTrap = true,
-      menuOffset = getMenuOffset,
-      menuOffsetFlip = getMenuOffset,
-      iconClass,
-      onClick = noopFn.noopFn,
-      // eslint-disable-line
-      onOpen = noopFn.noopFn,
-      // eslint-disable-line
-      selectorPrimaryFocus = '[data-floating-menu-primary-focus]',
-      // eslint-disable-line
-      renderIcon: IconElement = iconsReact.OverflowMenuVertical,
-      // eslint-disable-next-line react/prop-types
-      innerRef: ref,
-      menuOptionsClass,
-      light,
-      size = 'md',
-      ...other
-    } = this.props;
-    const {
-      open = false
-    } = 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) => /*#__PURE__*/React__default["default"].isValidElement(child) ? /*#__PURE__*/React__default["default"].cloneElement(child, {
-      // @ts-expect-error: PropTypes are not expressive enough to cover this case
-      closeMenu: child.props.closeMenu || this.closeMenuAndFocus,
-      handleOverflowMenuItemFocus: this.handleOverflowMenuItemFocus,
-      ref: e => {
-        this[`overflowMenuItem${index}`] = e;
-      },
-      index
-    }) : null);
-    const menuBodyId = `overflow-menu-${this.instanceId}__menu-body`;
-    const menuBody = /*#__PURE__*/React__default["default"].createElement("ul", {
-      className: overflowMenuOptionsClasses,
-      tabIndex: -1,
-      role: "menu",
-      "aria-label": ariaLabel || deprecatedAriaLabel,
-      onKeyDown: this.handleKeyPress,
-      id: menuBodyId
-    }, childrenWithProps);
-    const wrappedMenuBody = /*#__PURE__*/React__default["default"].createElement(FloatingMenu.FloatingMenu, {
-      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`,
-      "aria-owns": open ? menuBodyId : undefined
-    }, /*#__PURE__*/React__default["default"].createElement(index.IconButton, _rollupPluginBabelHelpers["extends"]({}, other, {
-      type: "button",
-      "aria-haspopup": true,
-      "aria-expanded": open,
-      "aria-controls": open ? menuBodyId : undefined,
-      className: overflowMenuClasses,
-      onClick: this.handleClick,
-      id: id,
-      ref: mergeRefs["default"](this._triggerRef, ref),
-      size: size,
-      label: iconDescription,
-      kind: "ghost"
-    }), /*#__PURE__*/React__default["default"].createElement(IconElement, iconProps)), open && this.state.hasMountedTrigger && wrappedMenuBody));
-  }
-}
-_rollupPluginBabelHelpers.defineProperty(OverflowMenu, "propTypes", {
+    return null;
+  });
+  const menuBody = /*#__PURE__*/React__default["default"].createElement("ul", {
+    className: overflowMenuOptionsClasses,
+    tabIndex: -1,
+    role: "menu",
+    "aria-label": ariaLabel || deprecatedAriaLabel,
+    onKeyDown: handleKeyPress,
+    id: menuBodyId
+  }, childrenWithProps);
+  const wrappedMenuBody = /*#__PURE__*/React__default["default"].createElement(FloatingMenu.FloatingMenu, {
+    focusTrap: focusTrap,
+    triggerRef: triggerRef,
+    menuDirection: direction,
+    menuOffset: flipped ? menuOffsetFlip : menuOffset,
+    menuRef: bindMenuBody,
+    flipped: flipped,
+    target: getTarget,
+    onPlace: handlePlace,
+    selectorPrimaryFocus: selectorPrimaryFocus
+  }, /*#__PURE__*/React.cloneElement(menuBody, {
+    'data-floating-menu-direction': direction
+  }));
+  return /*#__PURE__*/React__default["default"].createElement(ClickListener["default"], {
+    onClickOutside: handleClickOutside
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: `${prefix}--overflow-menu__wrapper`,
+    "aria-owns": open ? menuBodyId : undefined
+  }, /*#__PURE__*/React__default["default"].createElement(index.IconButton, _rollupPluginBabelHelpers["extends"]({}, other, {
+    type: "button",
+    "aria-haspopup": true,
+    "aria-expanded": open,
+    "aria-controls": open ? menuBodyId : undefined,
+    className: overflowMenuClasses,
+    onClick: handleClick,
+    id: id,
+    ref: mergeRefs["default"](triggerRef, ref),
+    size: size,
+    label: iconDescription,
+    kind: "ghost"
+  }), /*#__PURE__*/React__default["default"].createElement(IconElement, {
+    className: overflowMenuIconClasses,
+    "aria-label": iconDescription
+  })), open && hasMountedTrigger && wrappedMenuBody));
+});
+OverflowMenu.propTypes = {
   /**
    * Specify a label to be read by screen readers on the container node
    */
@@ -460,15 +398,15 @@ _rollupPluginBabelHelpers.defineProperty(OverflowMenu, "propTypes", {
    * 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
+    top: PropTypes__default["default"].number.isRequired,
+    left: PropTypes__default["default"].number.isRequired
   }), 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
+    top: PropTypes__default["default"].number.isRequired,
+    left: PropTypes__default["default"].number.isRequired
   }), PropTypes__default["default"].func]),
   /**
    * The class to apply to the menu options
@@ -499,8 +437,9 @@ _rollupPluginBabelHelpers.defineProperty(OverflowMenu, "propTypes", {
    */
   open: PropTypes__default["default"].bool,
   /**
-   * Function called to override icon rendering.
+   * A component used to render an icon.
    */
+  // @ts-expect-error: PropTypes are not expressive enough to cover this case
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
   /**
    * Specify a CSS selector that matches the DOM element that should
@@ -511,15 +450,8 @@ _rollupPluginBabelHelpers.defineProperty(OverflowMenu, "propTypes", {
    * 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);
-(() => {
-  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["default"] = OverflowMenu;
 exports.getMenuOffset = getMenuOffset;