@carbon/ibm-products
Version:
Carbon for IBM Products
107 lines (105 loc) • 4.66 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_useIsomorphicEffect = require("../../../global/js/hooks/useIsomorphicEffect.js");
const require_PageHeaderUtils = require("../PageHeaderUtils.js");
const require_context = require("./context.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/PageHeaderContentPageActions.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 PageHeaderContentPageActions = ({ className, children, menuButtonLabel = "Actions", actions, ...other }) => {
const { setRefs, observerState, isContentActionsInBreadcrumbBar: isInBreadcrumbBar, isFunctionalContentActions } = require_context.usePageHeader();
const classNames = (0, import_classnames.default)(`${require_PageHeaderUtils.blockClass}__content__page-actions`, { [`${require_PageHeaderUtils.blockClass}__content__page-actions--clipped`]: isInBreadcrumbBar ? isFunctionalContentActions ? false : !observerState.contentActionsClipped : observerState.contentActionsClipped }, className);
const containerRef = (0, react.useRef)(null);
const offsetRef = (0, react.useRef)(null);
const [menuButtonVisibility, setMenuButtonVisibility] = (0, react.useState)(false);
const [hiddenItems, setHiddenItems] = (0, react.useState)([]);
const [hasMounted, setHasMounted] = (0, react.useState)(false);
require_useIsomorphicEffect.useIsomorphicEffect(() => {
if (menuButtonVisibility && offsetRef.current) {
const width = offsetRef.current.offsetWidth;
document.documentElement.style.setProperty("--page-header-title-grid-width", `${width}px`);
}
}, [menuButtonVisibility]);
(0, react.useEffect)(() => {
setHasMounted(true);
}, []);
(0, react.useEffect)(() => {
if (isInBreadcrumbBar) setRefs((prev) => ({
...prev,
breadcrumbActions: containerRef
}));
else setRefs((prev) => ({
...prev,
contentActions: containerRef
}));
}, [isInBreadcrumbBar, setRefs]);
(0, react.useEffect)(() => {
if (!hasMounted || !containerRef.current || !Array.isArray(actions)) return;
(0, _carbon_utilities.createOverflowHandler)({
container: containerRef.current,
maxVisibleItems: containerRef.current.children.length - 1,
onChange: (visible, hidden) => {
setHiddenItems(actions?.slice(visible.length));
if (hidden.length > 0) setMenuButtonVisibility(true);
}
});
}, [actions, hasMounted]);
return /* @__PURE__ */ react.default.createElement("ul", {
className: classNames,
ref: containerRef,
...other
}, Array.isArray(actions) && /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, actions.map((action) => /* @__PURE__ */ react.default.createElement("li", { key: action.id }, react.default.cloneElement(action.body, {
...action.body.props,
onClick: action.onClick
}))), /* @__PURE__ */ react.default.createElement("li", {
"data-offset": true,
"data-hidden": true,
ref: offsetRef
}, hasMounted ? /* @__PURE__ */ react.default.createElement(_carbon_react.MenuButton, {
menuAlignment: "bottom-end",
label: menuButtonLabel,
size: "md"
}, [...hiddenItems].reverse().map((item) => /* @__PURE__ */ react.default.createElement(_carbon_react.MenuItem, {
key: item.id,
onClick: item.onClick,
...item.menuItem
}))) : null)));
};
PageHeaderContentPageActions.displayName = "PageHeaderContentPageActions";
PageHeaderContentPageActions.propTypes = {
/**
* The PageHeaderContent's page actions
*/
actions: prop_types.default.oneOfType([prop_types.default.node, prop_types.default.array]),
/**
* Provide child elements to be rendered inside PageHeaderContentPageActions.
*/
children: prop_types.default.node,
/**
* Specify an optional className to be added to your PageHeaderContentPageActions
*/
className: prop_types.default.string,
/**
* The PageHeaderContent's collapsible Menu button label
*/
menuButtonLabel: prop_types.default.string
};
//#endregion
exports.PageHeaderContentPageActions = PageHeaderContentPageActions;