@carbon/react
Version:
React components for the Carbon Design System
187 lines (185 loc) • 6.7 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.
*/
const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_usePrefix = require("../../internal/usePrefix.js");
const require_useIsomorphicEffect = require("../../internal/useIsomorphicEffect.js");
const require_useId = require("../../internal/useId.js");
const require_deprecateValuesWithin = require("../../prop-types/deprecateValuesWithin.js");
const require_mapPopoverAlign = require("../../tools/mapPopoverAlign.js");
const require_index = require("../FeatureFlags/index.js");
const require_index$1 = require("../IconButton/index.js");
const require_index$2 = require("../Button/index.js");
const require_mergeRefs = require("../../tools/mergeRefs.js");
const require_Menu = require("../Menu/Menu.js");
const require_useAttachedMenu = require("../../internal/useAttachedMenu.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 _floating_ui_react = require("@floating-ui/react");
//#region src/components/ComboButton/index.tsx
/**
* Copyright IBM Corp. 2023, 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 defaultTranslations = { [{ "carbon.combo-button.additional-actions": "carbon.combo-button.additional-actions" }["carbon.combo-button.additional-actions"]]: "Additional actions" };
const defaultTranslateWithId = (messageId) => {
return defaultTranslations[messageId];
};
const ComboButton = react.default.forwardRef(function ComboButton({ children, className, disabled, label, onClick, size = "lg", menuAlignment = "bottom", tooltipAlignment, translateWithId: t = defaultTranslateWithId, ...rest }, forwardRef) {
const enableOnlyFloatingStyles = require_index.useFeatureFlag("enable-v12-dynamic-floating-styles");
const id = require_useId.useId("combobutton");
const prefix = require_usePrefix.usePrefix();
const containerRef = (0, react.useRef)(null);
let middlewares = [];
if (!enableOnlyFloatingStyles) middlewares = [(0, _floating_ui_react.flip)({ crossAxis: false }), (0, _floating_ui_react.hide)()];
if (menuAlignment === "bottom" || menuAlignment === "top") middlewares.push((0, _floating_ui_react.size)({ apply({ rects, elements }) {
Object.assign(elements.floating.style, { width: `${rects.reference.width}px` });
} }));
const { refs, floatingStyles, placement, middlewareData } = (0, _floating_ui_react.useFloating)({
placement: menuAlignment,
strategy: "fixed",
middleware: middlewares,
whileElementsMounted: _floating_ui_react.autoUpdate
});
const ref = require_mergeRefs.mergeRefs(forwardRef, containerRef, refs.setReference);
const { open, handleClick: hookOnClick, handleMousedown: handleTriggerMousedown, handleClose } = require_useAttachedMenu.useAttachedMenu(containerRef);
require_useIsomorphicEffect.default(() => {
const updatedFloatingStyles = {
...floatingStyles,
visibility: middlewareData.hide?.referenceHidden ? "hidden" : "visible"
};
Object.keys(updatedFloatingStyles).forEach((style) => {
if (refs.floating.current) refs.floating.current.style[style] = updatedFloatingStyles[style];
});
}, [
floatingStyles,
refs.floating,
middlewareData,
placement,
open
]);
function handleTriggerClick() {
if (containerRef.current) hookOnClick();
}
function handlePrimaryActionClick(e) {
if (onClick) onClick(e);
}
const containerClasses = (0, classnames.default)(`${prefix}--combo-button__container`, `${prefix}--combo-button__container--${size}`, { [`${prefix}--combo-button__container--open`]: open }, className);
const menuClasses = (0, classnames.default)(`${prefix}--combo-button__${menuAlignment}`);
const primaryActionClasses = (0, classnames.default)(`${prefix}--combo-button__primary-action`);
const triggerClasses = (0, classnames.default)(`${prefix}--combo-button__trigger`);
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
...rest,
className: containerClasses,
ref,
"aria-owns": open ? id : void 0,
children: [
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: primaryActionClasses,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$2.default, {
title: label,
size,
disabled,
onClick: handlePrimaryActionClick,
children: label
})
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.IconButton, {
ref: refs.setReference,
className: triggerClasses,
label: t("carbon.combo-button.additional-actions"),
size,
disabled,
align: tooltipAlignment,
"aria-haspopup": true,
"aria-expanded": open,
onClick: handleTriggerClick,
onMouseDown: handleTriggerMousedown,
"aria-controls": open ? id : void 0,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.ChevronDown, {})
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Menu.Menu, {
containerRef,
menuAlignment,
className: menuClasses,
ref: refs.setFloating,
id,
label: t("carbon.combo-button.additional-actions"),
size,
open,
onClose: handleClose,
children
})
]
});
});
ComboButton.propTypes = {
children: prop_types.default.node.isRequired,
className: prop_types.default.string,
disabled: prop_types.default.bool,
label: prop_types.default.string.isRequired,
menuAlignment: prop_types.default.oneOf([
"top",
"top-start",
"top-end",
"bottom",
"bottom-start",
"bottom-end"
]),
onClick: prop_types.default.func,
size: prop_types.default.oneOf([
"xs",
"sm",
"md",
"lg"
]),
tooltipAlignment: 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),
translateWithId: prop_types.default.func
};
//#endregion
exports.ComboButton = ComboButton;