@carbon/ibm-products
Version:
Carbon for IBM Products
120 lines (118 loc) • 4.53 kB
JavaScript
/**
* Copyright IBM Corp. 2020, 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_index = require("../../../node_modules/classnames/index.js");
const require_settings = require("../../../settings.js");
const require_devtools = require("../../../global/js/utils/devtools.js");
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let _carbon_react = require("@carbon/react");
let _carbon_utilities = require("@carbon/utilities");
//#region src/components/Card/next/CardActions.tsx
/**
* Copyright IBM Corp. 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.
*/
var import_classnames = /* @__PURE__ */ require_runtime.__toESM(require_index.default);
const blockClass = `${require_settings.pkg.prefix}--card-next`;
const componentName = "CardActions";
/**
* CardActions is a container for action buttons in the card header.
* Positioned in the top-right corner with 8px gap between actions.
* When actions exceed 50% of available header space, overflow menu is shown.
*/
let CardActions = (0, react.forwardRef)(({ children, className, overflowMenuLabel = "More actions", ...rest }, ref) => {
const containerRef = (0, react.useRef)(null);
const [hiddenItems, setHiddenItems] = (0, react.useState)([]);
const classes = (0, import_classnames.default)(`${blockClass}__actions`, className);
const actionItems = (0, react.useMemo)(() => {
const items = [];
react.Children.forEach(children, (child, index) => {
if (react.default.isValidElement(child)) {
const actionProps = child.props;
const button = actionProps.children;
const buttonProps = react.default.isValidElement(button) ? button.props : null;
const label = actionProps.label ?? buttonProps?.label ?? buttonProps?.iconDescription ?? (typeof buttonProps?.children === "string" ? buttonProps.children : `Action ${index + 1}`);
const id = `${label}-${index}`;
items.push({
id,
element: child,
label
});
}
});
return items;
}, [children]);
(0, react.useEffect)(() => {
if (!containerRef.current || actionItems.length === 0) return;
const handler = (0, _carbon_utilities.createOverflowHandler)({
container: containerRef.current,
onChange: (_visible, hidden) => {
const hiddenIds = hidden.map((el) => el.dataset.id);
setHiddenItems(actionItems.filter((item) => hiddenIds.includes(item.id)));
}
});
return () => handler.disconnect();
}, [children]);
return /* @__PURE__ */ react.default.createElement("div", {
ref: (node) => {
containerRef.current = node;
if (typeof ref === "function") ref(node);
else if (ref) ref.current = node;
},
className: classes,
...rest,
...require_devtools.getDevtoolsProps(componentName)
}, actionItems.map((item) => /* @__PURE__ */ react.default.createElement("div", {
key: item.id,
"data-id": item.id
}, item.element)), /* @__PURE__ */ react.default.createElement("div", {
"data-offset": true,
"data-hidden": true,
"data-floating-menu-container": true
}, /* @__PURE__ */ react.default.createElement(_carbon_react.FeatureFlags, { enableV12Overflowmenu: true }, /* @__PURE__ */ react.default.createElement(_carbon_react.OverflowMenu, {
size: "sm",
"aria-label": overflowMenuLabel
}, hiddenItems.map((item) => /* @__PURE__ */ react.default.createElement(_carbon_react.OverflowMenuItem, {
key: item.id,
itemText: item.label || "Action",
onClick: () => {
const button = item.element.props.children;
if (button && react.default.isValidElement(button)) {
const buttonProps = button.props;
if (buttonProps.onClick) buttonProps.onClick();
}
}
}))))));
});
CardActions.propTypes = {
/**
* Provide the contents of the CardActions.
*/
children: prop_types.default.node,
/**
* Provide an optional class to be applied to the containing node.
*/
className: prop_types.default.string,
/**
* Aria label for the overflow menu
*/
overflowMenuLabel: prop_types.default.string
};
CardActions = require_settings.pkg.checkComponentEnabled(CardActions, componentName);
CardActions.displayName = componentName;
//#endregion
Object.defineProperty(exports, "CardActions", {
enumerable: true,
get: function() {
return CardActions;
}
});