@carbon/ibm-products
Version:
Carbon for IBM Products
81 lines (79 loc) • 3.84 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_context = require("./context.js");
let react = require("react");
react = require_runtime.__toESM(react);
let _carbon_react = require("@carbon/react");
let _carbon_utilities = require("@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__ */ require_runtime.__toESM(require_index.default);
const TearsheetHeaderActions = (0, react.forwardRef)(({ className, children, menuButtonProps }, ref) => {
const containerRef = (0, react.useRef)(null);
const offsetRef = (0, react.useRef)(null);
const menuButtonContainerRef = (0, react.useRef)(null);
const [menuButtonVisibility, setMenuButtonVisibility] = (0, react.useState)(false);
const [hiddenItems, setHiddenItems] = (0, react.useState)([]);
const hasOtherChildType = (0, react.useRef)(false);
require_useIsomorphicEffect.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.default.Children.toArray(children).filter((child) => {
if (react.default.isValidElement(child) && child.type !== TearsheetHeaderActionItem) hasOtherChildType.current = true;
return react.default.isValidElement(child);
});
require_useIsomorphicEffect.useIsomorphicEffect(() => {
if (!containerRef.current || hasOtherChildType.current) return;
(0, _carbon_utilities.createOverflowHandler)({
container: containerRef.current,
onChange: (visible, hidden) => {
setHiddenItems(items?.slice(visible.length));
if (hidden.length > 0) setMenuButtonVisibility(true);
}
});
}, [containerRef.current]);
return /* @__PURE__ */ react.default.createElement("div", {
className: `${require_context.blockClass}__content__header-actions ${className}`,
ref: containerRef
}, children, !hasOtherChildType.current && /* @__PURE__ */ react.default.createElement("span", {
"data-offset": true,
"data-hidden": true,
ref: offsetRef,
className: (0, import_classnames.default)(`${require_context.blockClass}__header-actions-menuButton`, { [`${require_context.blockClass}__header-actions-menuButton--hidden`]: hiddenItems.length === 0 })
}, /* @__PURE__ */ react.default.createElement(_carbon_react.MenuButton, {
ref: menuButtonContainerRef,
size: "sm",
...menuButtonProps
}, hiddenItems.map((item) => {
if (!react.default.isValidElement(item)) return null;
const childProps = item.props;
return /* @__PURE__ */ react.default.createElement(_carbon_react.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.default.createElement("div", { className: `${require_context.blockClass}__header-action-item ${className}` }, children);
};
//#endregion
exports.TearsheetHeaderActionItem = TearsheetHeaderActionItem;
exports.TearsheetHeaderActions = TearsheetHeaderActions;