@carbon/ibm-products
Version:
Carbon for IBM Products
79 lines (77 loc) • 3.43 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 "./context.js";
import React, { forwardRef, useRef, useState } from "react";
import { MenuButton, MenuItem } from "@carbon/react";
import { createOverflowHandler } from "@carbon/utilities";
//#region src/components/Tearsheet/next/TearsheetHeaderActions.tsx
/**
* Copyright IBM Corp. 2025
*
* 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 TearsheetHeaderActions = forwardRef(({ className, children, menuButtonProps }, ref) => {
const containerRef = useRef(null);
const offsetRef = useRef(null);
const menuButtonContainerRef = useRef(null);
const [menuButtonVisibility, setMenuButtonVisibility] = useState(false);
const [hiddenItems, setHiddenItems] = useState([]);
const hasOtherChildType = useRef(false);
useIsomorphicEffect(() => {
if (menuButtonVisibility && offsetRef.current) {
const width = offsetRef.current.offsetWidth;
document.documentElement.style.setProperty("--tearsheet-header-title-grid-width", `${width}px`);
}
}, [menuButtonVisibility]);
const items = React.Children.toArray(children).filter((child) => {
if (React.isValidElement(child) && child.type !== TearsheetHeaderActionItem) hasOtherChildType.current = true;
return React.isValidElement(child);
});
useIsomorphicEffect(() => {
if (!containerRef.current || hasOtherChildType.current) return;
createOverflowHandler({
container: containerRef.current,
onChange: (visible, hidden) => {
setHiddenItems(items?.slice(visible.length));
if (hidden.length > 0) setMenuButtonVisibility(true);
}
});
}, [containerRef.current]);
return /* @__PURE__ */ React.createElement("div", {
className: `${blockClass}__content__header-actions ${className}`,
ref: containerRef
}, children, !hasOtherChildType.current && /* @__PURE__ */ React.createElement("span", {
"data-offset": true,
"data-hidden": true,
ref: offsetRef,
className: (0, import_classnames.default)(`${blockClass}__header-actions-menuButton`, { [`${blockClass}__header-actions-menuButton--hidden`]: hiddenItems.length === 0 })
}, /* @__PURE__ */ React.createElement(MenuButton, {
ref: menuButtonContainerRef,
size: "sm",
...menuButtonProps
}, hiddenItems.map((item) => {
if (!React.isValidElement(item)) return null;
const childProps = item.props;
return /* @__PURE__ */ React.createElement(MenuItem, {
renderIcon: childProps?.children?.props?.renderIcon ?? void 0,
key: childProps.id,
onClick: childProps?.children?.props?.onClick,
label: childProps.overflowItemLabel
});
}))));
});
TearsheetHeaderActions.displayName = "TearsheetHeaderActions";
const TearsheetHeaderActionItem = ({ children, className }) => {
return /* @__PURE__ */ React.createElement("div", { className: `${blockClass}__header-action-item ${className}` }, children);
};
//#endregion
export { TearsheetHeaderActionItem, TearsheetHeaderActions };