@carbon/react
Version:
React components for the Carbon Design System
164 lines (162 loc) • 5 kB
JavaScript
/**
* 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.
*/
import { usePrefix } from "../../../internal/usePrefix.js";
import { useId } from "../../../internal/useId.js";
import { deprecateValuesWithin } from "../../../prop-types/deprecateValuesWithin.js";
import { mapPopoverAlign } from "../../../tools/mapPopoverAlign.js";
import { useFeatureFlag } from "../../FeatureFlags/index.js";
import { IconButton } from "../../IconButton/index.js";
import { mergeRefs } from "../../../tools/mergeRefs.js";
import { Menu as Menu$1 } from "../../Menu/Menu.js";
import { useAttachedMenu } from "../../../internal/useAttachedMenu.js";
import classNames from "classnames";
import React, { useEffect, useRef } from "react";
import PropTypes from "prop-types";
import { jsx, jsxs } from "react/jsx-runtime";
import { OverflowMenuVertical } from "@carbon/icons-react";
import { autoUpdate, flip, useFloating } from "@floating-ui/react";
//#region src/components/OverflowMenu/next/index.tsx
/**
* Copyright IBM Corp. 2020, 2025
*
* 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 defaultSize = "md";
const OverflowMenu = React.forwardRef(({ autoAlign = false, children, className, label = "Options", renderIcon: IconElement = OverflowMenuVertical, size = defaultSize, menuAlignment = "bottom-start", tooltipAlignment, menuTarget, ...rest }, forwardRef) => {
const enableFloatingStyles = useFeatureFlag("enable-v12-dynamic-floating-styles") || autoAlign;
const { refs, floatingStyles, placement, middlewareData } = useFloating(enableFloatingStyles ? {
placement: menuAlignment,
strategy: "fixed",
middleware: [autoAlign && flip({ fallbackPlacements: menuAlignment.includes("bottom") ? [
"bottom-start",
"bottom-end",
"top-start",
"top-end"
] : [
"top-start",
"top-end",
"bottom-start",
"bottom-end"
] })],
whileElementsMounted: autoUpdate
} : {});
const id = useId("overflowmenu");
const prefix = usePrefix();
const triggerRef = useRef(null);
const { open, x, y, handleClick: hookOnClick, handleMousedown, handleClose } = useAttachedMenu(triggerRef);
useEffect(() => {
if (enableFloatingStyles) Object.keys(floatingStyles).forEach((style) => {
if (refs.floating.current) refs.floating.current.style[style] = floatingStyles[style];
});
}, [
floatingStyles,
enableFloatingStyles,
refs.floating,
open,
placement,
middlewareData
]);
function handleTriggerClick() {
if (triggerRef.current) hookOnClick();
}
const containerClasses = classNames(className, `${prefix}--overflow-menu__container`, { [`${prefix}--autoalign`]: enableFloatingStyles });
const menuClasses = classNames(`${prefix}--overflow-menu__${menuAlignment}`);
const triggerClasses = classNames(`${prefix}--overflow-menu`, { [`${prefix}--overflow-menu--open`]: open }, size !== defaultSize && `${prefix}--overflow-menu--${size}`);
const floatingRef = mergeRefs(triggerRef, refs.setReference);
return /* @__PURE__ */ jsxs("div", {
...rest,
className: containerClasses,
"aria-owns": open ? id : void 0,
ref: forwardRef,
children: [/* @__PURE__ */ jsx(IconButton, {
"aria-controls": open ? id : void 0,
"aria-haspopup": true,
"aria-expanded": open,
className: triggerClasses,
onClick: handleTriggerClick,
onMouseDown: handleMousedown,
ref: floatingRef,
label,
align: tooltipAlignment,
kind: "ghost",
children: /* @__PURE__ */ jsx(IconElement, { className: `${prefix}--overflow-menu__icon` })
}), /* @__PURE__ */ jsx(Menu$1, {
containerRef: triggerRef,
ref: refs.setFloating,
menuAlignment,
className: menuClasses,
id,
size,
legacyAutoalign: !enableFloatingStyles,
open,
onClose: handleClose,
x,
y,
label,
target: menuTarget,
children
})]
});
});
OverflowMenu.propTypes = {
autoAlign: PropTypes.bool,
children: PropTypes.node,
className: PropTypes.string,
label: PropTypes.string,
menuAlignment: PropTypes.oneOf([
"top-start",
"top-end",
"bottom-start",
"bottom-end"
]),
renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
size: PropTypes.oneOf([
"xs",
"sm",
"md",
"lg"
]),
tooltipAlignment: deprecateValuesWithin(PropTypes.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"
], mapPopoverAlign),
menuTarget: PropTypes.instanceOf(typeof Element !== "undefined" ? Element : Object)
};
//#endregion
export { OverflowMenu };