@carbon/react 1.103.0-rc.0 → 1.104.0-rc.0

package/lib/components/OverflowMenu/OverflowMenu.js

@@ -1,476 +1,363 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-'use strict';
+const require_runtime = require('../../_virtual/_rolldown/runtime.js');
+const require_usePrefix = require('../../internal/usePrefix.js');
+const require_keys = require('../../internal/keyboard/keys.js');
+const require_match = require('../../internal/keyboard/match.js');
+const require_setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
+const require_noopFn = require('../../internal/noopFn.js');
+const require_deprecate = require('../../prop-types/deprecate.js');
+const require_deprecateValuesWithin = require('../../prop-types/deprecateValuesWithin.js');
+const require_mapPopoverAlign = require('../../tools/mapPopoverAlign.js');
+const require_index = require('../IconButton/index.js');
+const require_mergeRefs = require('../../tools/mergeRefs.js');
+const require_FloatingMenu = require('../../internal/FloatingMenu.js');
+const require_useOutsideClick = require('../../internal/useOutsideClick.js');
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
+let prop_types = require("prop-types");
+prop_types = require_runtime.__toESM(prop_types);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _carbon_icons_react = require("@carbon/icons-react");
+let invariant = require("invariant");
+invariant = require_runtime.__toESM(invariant);
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var React = require('react');
-var iconsReact = require('@carbon/icons-react');
-var cx = require('classnames');
-var invariant = require('invariant');
-var PropTypes = require('prop-types');
-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 index = require('../IconButton/index.js');
-var useOutsideClick = require('../../internal/useOutsideClick.js');
-var deprecateValuesWithin = require('../../prop-types/deprecateValuesWithin.js');
-var mapPopoverAlign = require('../../tools/mapPopoverAlign.js');
-
-const getInstanceId = setupGetInstanceId.setupGetInstanceId();
+//#region src/components/OverflowMenu/OverflowMenu.tsx
+/**
+* Copyright IBM Corp. 2016, 2026
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+const getInstanceId = require_setupGetInstanceId.setupGetInstanceId();
 const on = (target, ...args) => {
-  target.addEventListener(...args);
-  return {
-    release() {
-      target.removeEventListener(...args);
-      return null;
-    }
-  };
+	target.addEventListener(...args);
+	return { release() {
+		target.removeEventListener(...args);
+		return null;
+	} };
 };
-
 /**
- * The CSS property names of the arrow keyed by the floating menu direction.
- */
+* The CSS property names of the arrow keyed by the floating menu direction.
+*/
 const triggerButtonPositionProps = {
-  [FloatingMenu.DIRECTION_TOP]: 'bottom',
-  [FloatingMenu.DIRECTION_BOTTOM]: 'top'
+	[require_FloatingMenu.DIRECTION_TOP]: "bottom",
+	[require_FloatingMenu.DIRECTION_BOTTOM]: "top"
 };
-
 /**
- * Determines how the position of the arrow should affect the floating menu
- * position.
- */
+* Determines how the position of the arrow should affect the floating menu
+* position.
+*/
 const triggerButtonPositionFactors = {
-  [FloatingMenu.DIRECTION_TOP]: -2,
-  [FloatingMenu.DIRECTION_BOTTOM]: -1
+	[require_FloatingMenu.DIRECTION_TOP]: -2,
+	[require_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.
- */
+* 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];
-  if (process.env.NODE_ENV !== 'production') {
-    !(triggerButtonPositionProp && triggerButtonPositionFactor) ? process.env.NODE_ENV !== "production" ? invariant(false, '[OverflowMenu] wrong floating menu direction: `%s`', direction) : invariant(false) : void 0;
-  }
-  const {
-    offsetWidth: menuWidth
-  } = menuBody;
-  switch (triggerButtonPositionProp) {
-    case 'top':
-    case 'bottom':
-      {
-        const triggerWidth = !trigger ? 0 : trigger.offsetWidth;
-        return {
-          left: (!flip ? 1 : -1) * (menuWidth / 2 - triggerWidth / 2),
-          top: 0
-        };
-      }
-    default:
-      return {
-        left: 0,
-        top: 0
-      };
-  }
+	const triggerButtonPositionProp = triggerButtonPositionProps[direction];
+	const triggerButtonPositionFactor = triggerButtonPositionFactors[direction];
+	if (process.env.NODE_ENV !== "production") (0, invariant.default)(triggerButtonPositionProp && triggerButtonPositionFactor, "[OverflowMenu] wrong floating menu direction: `%s`", direction);
+	const { offsetWidth: menuWidth } = menuBody;
+	switch (triggerButtonPositionProp) {
+		case "top":
+		case "bottom": {
+			const triggerWidth = !trigger ? 0 : trigger.offsetWidth;
+			return {
+				left: (!flip ? 1 : -1) * (menuWidth / 2 - triggerWidth / 2),
+				top: 0
+			};
+		}
+		default: return {
+			left: 0,
+			top: 0
+		};
+	}
 };
-// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20452
-const OverflowMenu = /*#__PURE__*/React.forwardRef(({
-  align,
-  ['aria-label']: ariaLabel = null,
-  ariaLabel: deprecatedAriaLabel,
-  children,
-  className,
-  direction = FloatingMenu.DIRECTION_BOTTOM,
-  flipped = false,
-  focusTrap = false,
-  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',
-  innerRef,
-  ...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);
-  const wrapperRef = React.useRef(null);
-
-  // 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);
-    }
-  }, []);
-  React.useEffect(() => {
-    if (open && !prevOpenState.current) {
-      onOpen();
-    } else if (!open && prevOpenState.current) {
-      onClose();
-    }
-    prevOpenState.current = open;
-  }, [open, onClose, onOpen]);
-  useOutsideClick.useOutsideClick(wrapperRef, ({
-    target
-  }) => {
-    if (open && (!menuBodyRef.current || target instanceof Node && !menuBodyRef.current.contains(target))) {
-      closeMenu();
-    }
-  });
-  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();
-    }
-  }, []);
-  const closeMenuAndFocus = React.useCallback(() => {
-    const wasClicked = click;
-    const wasOpen = open;
-    closeMenu(() => {
-      if (wasOpen && !wasClicked) {
-        focusMenuEl();
-      }
-    });
-  }, [click, open, closeMenu, focusMenuEl]);
-  const closeMenuOnEscape = React.useCallback(() => {
-    const wasOpen = open;
-    closeMenu(() => {
-      if (wasOpen) {
-        focusMenuEl();
-      }
-    });
-  }, [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 or tab.
-    if (match.matches(evt, [keys.Escape, keys.Tab])) {
-      closeMenuOnEscape();
-
-      // Stop the esc keypress from bubbling out and closing something it shouldn't
-      evt.stopPropagation();
-
-      // Stop the tab key from making the browser focus somewhere else.
-      evt.preventDefault();
-    }
-  };
-
-  /**
-   * Focuses the next enabled overflow menu item given the currently focused
-   * item index and direction to move.
-   */
-  const handleOverflowMenuItemFocus = ({
-    currentIndex = 0,
-    direction
-  }) => {
-    const enabledIndices = React.Children.toArray(children).reduce((acc, curr, i) => {
-      if (/*#__PURE__*/React.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 = 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;
-      if (!(target instanceof Element)) return;
-      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();
-        }
-      }
-    }, !hasFocusin);
-  };
-  const getTarget = () => {
-    const triggerEl = triggerRef.current;
-    if (triggerEl instanceof Element) {
-      return triggerEl.closest('[data-floating-menu-container]') || document.body;
-    }
-    return document.body;
-  };
-  const menuBodyId = `overflow-menu-${instanceId.current}__menu-body`;
-  const overflowMenuClasses = cx(className, `${prefix}--overflow-menu`, {
-    [`${prefix}--overflow-menu--open`]: open,
-    [`${prefix}--overflow-menu--light`]: light,
-    [`${prefix}--overflow-menu--${size}`]: size
-  });
-  const overflowMenuOptionsClasses = cx(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(`${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
-      });
-    }
-    return null;
-  });
-  const menuBody = /*#__PURE__*/React.createElement("ul", {
-    className: overflowMenuOptionsClasses,
-    tabIndex: -1,
-    role: "menu",
-    "aria-label": ariaLabel || deprecatedAriaLabel,
-    onKeyDown: handleKeyPress,
-    id: menuBodyId
-  }, childrenWithProps);
-  const wrappedMenuBody = /*#__PURE__*/React.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
-  }));
-  const combinedRef = innerRef ? mergeRefs.mergeRefs(triggerRef, innerRef, ref) : mergeRefs.mergeRefs(triggerRef, ref);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    className: `${prefix}--overflow-menu__wrapper`,
-    "aria-owns": open ? menuBodyId : undefined,
-    ref: wrapperRef
-  }, /*#__PURE__*/React.createElement(index.IconButton, _rollupPluginBabelHelpers.extends({}, other, {
-    align: align,
-    type: "button",
-    "aria-haspopup": true,
-    "aria-expanded": open,
-    "aria-controls": open ? menuBodyId : undefined,
-    className: overflowMenuClasses,
-    onClick: handleClick,
-    id: id,
-    ref: combinedRef,
-    size: size,
-    label: iconDescription,
-    kind: "ghost"
-  }), /*#__PURE__*/React.createElement(IconElement, {
-    className: overflowMenuIconClasses,
-    "aria-label": iconDescription
-  })), open && hasMountedTrigger && wrappedMenuBody));
+const OverflowMenu = (0, react.forwardRef)(({ align, ["aria-label"]: ariaLabel = null, ariaLabel: deprecatedAriaLabel, children, className, direction = require_FloatingMenu.DIRECTION_BOTTOM, flipped = false, focusTrap = false, iconClass, iconDescription = "Options", id, light, menuOffset = getMenuOffset, menuOffsetFlip = getMenuOffset, menuOptionsClass, onClick = require_noopFn.noopFn, onClose = require_noopFn.noopFn, onOpen = require_noopFn.noopFn, open: openProp, renderIcon: IconElement = _carbon_icons_react.OverflowMenuVertical, selectorPrimaryFocus = "[data-floating-menu-primary-focus]", size = "md", innerRef, ...other }, ref) => {
+	const prefix = (0, react.useContext)(require_usePrefix.PrefixContext);
+	const [open, setOpen] = (0, react.useState)(openProp ?? false);
+	const [click, setClick] = (0, react.useState)(false);
+	const [hasMountedTrigger, setHasMountedTrigger] = (0, react.useState)(false);
+	/**  The handle of `onfocusin` or `focus` event handler. */
+	const hFocusIn = (0, react.useRef)(null);
+	const instanceId = (0, react.useRef)(getInstanceId());
+	const menuBodyRef = (0, react.useRef)(null);
+	const menuItemRefs = (0, react.useRef)({});
+	const prevOpenProp = (0, react.useRef)(openProp);
+	const prevOpenState = (0, react.useRef)(open);
+	/** The element ref of the tooltip's trigger button. */
+	const triggerRef = (0, react.useRef)(null);
+	const wrapperRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		if (prevOpenProp.current !== openProp) {
+			setOpen(!!openProp);
+			prevOpenProp.current = openProp;
+		}
+	}, [openProp]);
+	(0, react.useEffect)(() => {
+		if (triggerRef.current) setHasMountedTrigger(true);
+	}, []);
+	(0, react.useEffect)(() => {
+		if (open && !prevOpenState.current) onOpen();
+		else if (!open && prevOpenState.current) onClose();
+		prevOpenState.current = open;
+	}, [
+		open,
+		onClose,
+		onOpen
+	]);
+	require_useOutsideClick.useOutsideClick(wrapperRef, ({ target }) => {
+		if (open && (!menuBodyRef.current || target instanceof Node && !menuBodyRef.current.contains(target))) closeMenu();
+	});
+	const focusMenuEl = (0, react.useCallback)(() => {
+		if (triggerRef.current) triggerRef.current.focus();
+	}, []);
+	const closeMenu = (0, react.useCallback)((onCloseMenu) => {
+		setOpen(false);
+		if (onCloseMenu) onCloseMenu();
+	}, []);
+	const closeMenuAndFocus = (0, react.useCallback)(() => {
+		const wasClicked = click;
+		const wasOpen = open;
+		closeMenu(() => {
+			if (wasOpen && !wasClicked) focusMenuEl();
+		});
+	}, [
+		click,
+		open,
+		closeMenu,
+		focusMenuEl
+	]);
+	const closeMenuOnEscape = (0, react.useCallback)(() => {
+		const wasOpen = open;
+		closeMenu(() => {
+			if (wasOpen) focusMenuEl();
+		});
+	}, [
+		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 && require_match.matches(evt, [
+			require_keys.ArrowUp,
+			require_keys.ArrowRight,
+			require_keys.ArrowDown,
+			require_keys.ArrowLeft
+		])) evt.preventDefault();
+		if (require_match.matches(evt, [require_keys.Escape, require_keys.Tab])) {
+			closeMenuOnEscape();
+			evt.stopPropagation();
+			evt.preventDefault();
+		}
+	};
+	/**
+	* Focuses the next enabled overflow menu item given the currently focused
+	* item index and direction to move.
+	*/
+	const handleOverflowMenuItemFocus = ({ currentIndex = 0, direction }) => {
+		const enabledIndices = react.Children.toArray(children).reduce((acc, curr, i) => {
+			if (react.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;
+			}
+		})();
+		menuItemRefs.current[enabledIndices[nextValidIndex]]?.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;
+			if (!(target instanceof Element)) return;
+			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();
+			}
+		}, !hasFocusin);
+	};
+	const getTarget = () => {
+		const triggerEl = triggerRef.current;
+		if (triggerEl instanceof Element) return triggerEl.closest("[data-floating-menu-container]") || document.body;
+		return document.body;
+	};
+	const menuBodyId = `overflow-menu-${instanceId.current}__menu-body`;
+	const overflowMenuClasses = (0, classnames.default)(className, `${prefix}--overflow-menu`, {
+		[`${prefix}--overflow-menu--open`]: open,
+		[`${prefix}--overflow-menu--light`]: light,
+		[`${prefix}--overflow-menu--${size}`]: size
+	});
+	const overflowMenuOptionsClasses = (0, classnames.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 = (0, classnames.default)(`${prefix}--overflow-menu__icon`, iconClass);
+	const childrenWithProps = react.Children.toArray(children).map((child, index) => {
+		if ((0, react.isValidElement)(child)) {
+			const childElement = child;
+			return (0, react.cloneElement)(childElement, {
+				closeMenu: childElement.props.closeMenu || closeMenuAndFocus,
+				handleOverflowMenuItemFocus,
+				ref: (el) => {
+					menuItemRefs.current[index] = el;
+				},
+				index
+			});
+		}
+		return null;
+	});
+	const wrappedMenuBody = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FloatingMenu.FloatingMenu, {
+		focusTrap,
+		triggerRef,
+		menuDirection: direction,
+		menuOffset: flipped ? menuOffsetFlip : menuOffset,
+		menuRef: bindMenuBody,
+		flipped,
+		target: getTarget,
+		onPlace: handlePlace,
+		selectorPrimaryFocus,
+		children: (0, react.cloneElement)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+			className: overflowMenuOptionsClasses,
+			tabIndex: -1,
+			role: "menu",
+			"aria-label": ariaLabel || deprecatedAriaLabel,
+			onKeyDown: handleKeyPress,
+			id: menuBodyId,
+			children: childrenWithProps
+		}), { "data-floating-menu-direction": direction })
+	});
+	const combinedRef = innerRef ? require_mergeRefs.mergeRefs(triggerRef, innerRef, ref) : require_mergeRefs.mergeRefs(triggerRef, ref);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: `${prefix}--overflow-menu__wrapper`,
+		"aria-owns": open ? menuBodyId : void 0,
+		ref: wrapperRef,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.IconButton, {
+			...other,
+			align,
+			type: "button",
+			"aria-haspopup": true,
+			"aria-expanded": open,
+			"aria-controls": open ? menuBodyId : void 0,
+			className: overflowMenuClasses,
+			onClick: handleClick,
+			id,
+			ref: combinedRef,
+			size,
+			label: iconDescription,
+			kind: "ghost",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconElement, {
+				className: overflowMenuIconClasses,
+				"aria-label": iconDescription
+			})
+		}), open && hasMountedTrigger && wrappedMenuBody]
+	}) });
 });
 OverflowMenu.propTypes = {
-  /**
-   * Specify how the trigger should align with the tooltip
-   */
-  align: deprecateValuesWithin.deprecateValuesWithin(PropTypes.oneOf(['top', 'top-left',
-  // deprecated use top-start instead
-  'top-right',
-  // deprecated use top-end instead
-
-  'bottom', 'bottom-left',
-  // deprecated use bottom-start instead
-  'bottom-right',
-  // deprecated use bottom-end instead
-
-  'left', 'left-bottom',
-  // deprecated use left-end instead
-  'left-top',
-  // deprecated use left-start instead
-
-  'right', 'right-bottom',
-  // deprecated use right-end instead
-  'right-top',
-  // deprecated use right-start instead
-
-  // new values to match floating-ui
-  'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']), ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'], mapPopoverAlign.mapPopoverAlign),
-  /**
-   * Specify a label to be read by screen readers on the container node
-   */
-  ['aria-label']: PropTypes.string,
-  /**
-   * Deprecated, please use `aria-label` instead.
-   * Specify a label to be read by screen readers on the container note.
-   */
-  ariaLabel: deprecate.deprecate(PropTypes.string, 'This prop syntax has been deprecated. Please use the new `aria-label`.'),
-  /**
-   * The child nodes.
-   */
-  children: PropTypes.node,
-  /**
-   * The CSS class names.
-   */
-  className: PropTypes.string,
-  /**
-   * The menu direction.
-   */
-  direction: PropTypes.oneOf([FloatingMenu.DIRECTION_TOP, FloatingMenu.DIRECTION_BOTTOM]),
-  /**
-   * `true` if the menu alignment should be flipped.
-   */
-  flipped: PropTypes.bool,
-  /**
-   * @deprecated Tab key is handled with event handler so no need for focus trap.
-   * Enable or disable focus trap behavior
-   */
-  focusTrap: PropTypes.bool,
-  /**
-   * The CSS class for the icon.
-   */
-  iconClass: PropTypes.string,
-  /**
-   * The icon description.
-   */
-  iconDescription: PropTypes.string,
-  /**
-   * The element ID.
-   */
-  id: PropTypes.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.deprecate(PropTypes.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.oneOfType([PropTypes.shape({
-    top: PropTypes.number.isRequired,
-    left: PropTypes.number.isRequired
-  }), PropTypes.func]),
-  /**
-   * The adjustment in position applied to the floating menu when flipped.
-   */
-  menuOffsetFlip: PropTypes.oneOfType([PropTypes.shape({
-    top: PropTypes.number.isRequired,
-    left: PropTypes.number.isRequired
-  }), PropTypes.func]),
-  /**
-   * The class to apply to the menu options
-   */
-  menuOptionsClass: PropTypes.string,
-  /**
-   * The event handler for the `click` event.
-   */
-  onClick: PropTypes.func,
-  /**
-   * Function called when menu is closed
-   */
-  onClose: PropTypes.func,
-  /**
-   * The event handler for the `focus` event.
-   */
-  onFocus: PropTypes.func,
-  /**
-   * The event handler for the `keydown` event.
-   */
-  onKeyDown: PropTypes.func,
-  /**
-   * Function called when menu is opened
-   */
-  onOpen: PropTypes.func,
-  /**
-   * `true` if the menu should be open.
-   */
-  open: PropTypes.bool,
-  /**
-   * A component used to render an icon.
-   */
-  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  /**
-   * Specify a CSS selector that matches the DOM element that should
-   * be focused when the OverflowMenu opens
-   */
-  selectorPrimaryFocus: PropTypes.string,
-  /**
-   * Specify the size of the OverflowMenu. Currently supports either `xs`, `sm`, `md` (default) or `lg` as an option.
-   */
-  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg'])
+	align: require_deprecateValuesWithin.deprecateValuesWithin(prop_types.default.oneOf([
+		"top",
+		"top-left",
+		"top-right",
+		"bottom",
+		"bottom-left",
+		"bottom-right",
+		"left",
+		"left-bottom",
+		"left-top",
+		"right",
+		"right-bottom",
+		"right-top",
+		"top-start",
+		"top-end",
+		"bottom-start",
+		"bottom-end",
+		"left-end",
+		"left-start",
+		"right-end",
+		"right-start"
+	]), [
+		"top",
+		"top-start",
+		"top-end",
+		"bottom",
+		"bottom-start",
+		"bottom-end",
+		"left",
+		"left-start",
+		"left-end",
+		"right",
+		"right-start",
+		"right-end"
+	], require_mapPopoverAlign.mapPopoverAlign),
+	["aria-label"]: prop_types.default.string,
+	ariaLabel: require_deprecate.deprecate(prop_types.default.string, "This prop syntax has been deprecated. Please use the new `aria-label`."),
+	children: prop_types.default.node,
+	className: prop_types.default.string,
+	direction: prop_types.default.oneOf([require_FloatingMenu.DIRECTION_TOP, require_FloatingMenu.DIRECTION_BOTTOM]),
+	flipped: prop_types.default.bool,
+	focusTrap: prop_types.default.bool,
+	iconClass: prop_types.default.string,
+	iconDescription: prop_types.default.string,
+	id: prop_types.default.string,
+	light: require_deprecate.deprecate(prop_types.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."),
+	menuOffset: prop_types.default.oneOfType([prop_types.default.shape({
+		top: prop_types.default.number.isRequired,
+		left: prop_types.default.number.isRequired
+	}), prop_types.default.func]),
+	menuOffsetFlip: prop_types.default.oneOfType([prop_types.default.shape({
+		top: prop_types.default.number.isRequired,
+		left: prop_types.default.number.isRequired
+	}), prop_types.default.func]),
+	menuOptionsClass: prop_types.default.string,
+	onClick: prop_types.default.func,
+	onClose: prop_types.default.func,
+	onFocus: prop_types.default.func,
+	onKeyDown: prop_types.default.func,
+	onOpen: prop_types.default.func,
+	open: prop_types.default.bool,
+	renderIcon: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.object]),
+	selectorPrimaryFocus: prop_types.default.string,
+	size: prop_types.default.oneOf([
+		"xs",
+		"sm",
+		"md",
+		"lg"
+	])
 };
 
-exports.OverflowMenu = OverflowMenu;
-exports.getMenuOffset = getMenuOffset;
+//#endregion
+exports.default = OverflowMenu;