@carbon/ibm-products
Version:
Carbon for IBM Products
116 lines (114 loc) • 4 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_PageHeaderUtils = require("../PageHeaderUtils.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/PageHeader/next/PageHeaderBreadcrumbPageActions.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 PageHeaderBreadcrumbPageActions = ({ actions, className, overflowMenuLabel = "More page actions", buttonSize = "md", buttonKind = "ghost", ...other }) => {
const containerRef = (0, react.useRef)(null);
const [hiddenItems, setHiddenItems] = (0, react.useState)([]);
const classNames = (0, import_classnames.default)(`${require_PageHeaderUtils.blockClass}__breadcrumb-page-actions`, className);
(0, react.useEffect)(() => {
if (!containerRef.current) return;
const handler = (0, _carbon_utilities.createOverflowHandler)({
container: containerRef.current,
onChange: (_visible, hidden) => {
const hiddenIds = hidden.map((el) => el.dataset.id);
setHiddenItems(actions.filter((item) => hiddenIds.includes(item.id)));
}
});
return () => handler.disconnect();
}, [actions]);
return /* @__PURE__ */ react.default.createElement("ul", {
ref: containerRef,
className: classNames,
style: {
display: "inline-flex",
alignItems: "center",
justifyContent: "flex-end",
inlineSize: "50%"
},
...other
}, actions.map((item) => /* @__PURE__ */ react.default.createElement("li", {
key: item.id,
"data-id": item.id
}, /* @__PURE__ */ react.default.createElement(_carbon_react.Button, {
renderIcon: item.renderIcon,
iconDescription: item.label,
hasIconOnly: true,
size: buttonSize,
kind: buttonKind,
onClick: item.onClick
}))), /* @__PURE__ */ react.default.createElement("li", {
"data-offset": true,
"data-hidden": true,
"data-floating-menu-container": true,
style: { position: "relative" }
}, /* @__PURE__ */ react.default.createElement(_carbon_react.FeatureFlags, { enableV12Overflowmenu: true }, /* @__PURE__ */ react.default.createElement(_carbon_react.OverflowMenu, {
size: buttonSize,
"aria-label": overflowMenuLabel
}, hiddenItems.map((item) => /* @__PURE__ */ react.default.createElement(_carbon_react.OverflowMenuItem, {
key: item.id,
itemText: item.label,
onClick: item.onClick
}))))));
};
PageHeaderBreadcrumbPageActions.displayName = "PageHeaderBreadcrumbPageActions";
PageHeaderBreadcrumbPageActions.propTypes = {
/**
* Array of action items to display
*/
actions: prop_types.default.arrayOf(prop_types.default.shape({
id: prop_types.default.string.isRequired,
label: prop_types.default.string.isRequired,
renderIcon: prop_types.default.elementType.isRequired,
onClick: prop_types.default.func
}).isRequired).isRequired,
/**
* Kind of the action buttons
*/
buttonKind: prop_types.default.oneOf([
"primary",
"secondary",
"tertiary",
"ghost",
"danger",
"danger--tertiary",
"danger--ghost"
]),
/**
* Size of the action buttons
*/
buttonSize: prop_types.default.oneOf([
"sm",
"md",
"lg"
]),
/**
* Specify an optional className to be added to the component
*/
className: prop_types.default.string,
/**
* Aria label for the overflow menu
*/
overflowMenuLabel: prop_types.default.string
};
//#endregion
exports.PageHeaderBreadcrumbPageActions = PageHeaderBreadcrumbPageActions;