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