@carbon/ibm-products
Version:
Carbon for IBM Products
235 lines (233 loc) • 9.13 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_settings = require("../../settings.js");
const require_useIsomorphicEffect = require("../../global/js/hooks/useIsomorphicEffect.js");
const require_devtools = require("../../global/js/utils/devtools.js");
require("../Coachmark/utils/enums.js");
const require_context = require("../Coachmark/utils/context.js");
const require_CoachmarkOverlay = require("../Coachmark/CoachmarkOverlay.js");
const require_CoachmarkTagline = require("../Coachmark/CoachmarkTagline.js");
const require_CoachmarkStackHome = require("./CoachmarkStackHome.js");
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let react_dom = require("react-dom");
//#region src/components/CoachmarkStack/CoachmarkStack.tsx
/**
* Copyright IBM Corp. 2023, 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 blockClass = `${require_settings.pkg.prefix}--coachmark-stack`;
const componentName = "CoachmarkStack";
const elementBlockClass = `${require_settings.pkg.prefix}--coachmark-stack-element`;
const defaults = {
onClose: () => {},
theme: "light",
portalTarget: "body"
};
/**
* Stacked coachmarks are used to call out specific functionality or concepts
* within the UI that may not be intuitive but are important for the
* user to gain understanding of the product's main value and discover new use cases.
* This variant allows the stacking of multiple coachmark overlays to be displayed by interacting with the tagline.
* @deprecated This component is deprecated.
*/
const CoachmarkStack = react.default.forwardRef(({ children, className, onClose = defaults.onClose, description, renderMedia, navLinkLabels, portalTarget = defaults.portalTarget, closeButtonLabel, tagline, theme = defaults.theme, title, tooltipAlign, closeIconDescription, ...rest }, ref) => {
const portalNode = (0, react.useRef)(null);
require_useIsomorphicEffect.useIsomorphicEffect(() => {
portalNode.current = portalTarget ? document?.querySelector(portalTarget) ?? document?.querySelector("body") : document?.querySelector("body");
}, [portalTarget]);
const stackHomeRef = (0, react.useRef)(null);
const stackedCoachmarkRefs = (0, react.useRef)([]);
const [isOpen, setIsOpen] = (0, react.useState)(false);
const [selectedItemNumber, setSelectedItemNumber] = (0, react.useState)(0);
const [parentHeight, setParentHeight] = (0, react.useState)();
const childArray = react.Children.toArray(children);
const mountedRef = (0, react.useRef)(void 0);
const delayMs = 240;
const handleClickNavItem = (itemNumber) => {
setSelectedItemNumber(itemNumber);
};
const handleClose = (0, react.useCallback)((isParentCloseButton) => {
if (isParentCloseButton) {
setSelectedItemNumber(-1);
const timer = setTimeout(() => {
setIsOpen(false);
onClose();
}, delayMs);
return () => clearTimeout(timer);
} else setSelectedItemNumber(0);
}, [onClose]);
const escFunction = (0, react.useCallback)((event) => {
if (event.key === "Escape") if (selectedItemNumber === 0) handleClose(true);
else handleClose(false);
}, [handleClose, selectedItemNumber]);
(0, react.useEffect)(() => {
document.addEventListener("keydown", escFunction, false);
return () => {
document.removeEventListener("keydown", escFunction, false);
};
}, [escFunction]);
const contextValue = {
buttonProps: {
tabIndex: 0,
"aria-expanded": isOpen,
onClick: () => {
setIsOpen(true);
},
onDoubleClick: () => {
setIsOpen(true);
}
},
closeButtonProps: { onClick: () => handleClose(false) },
isOpen,
closeIconDescription
};
(0, react.useEffect)(() => {
mountedRef.current = true;
return () => {
mountedRef.current = false;
};
}, []);
(0, react.useEffect)(() => {
const targetSelectedItem = selectedItemNumber - 1;
if (!parentHeight) {
if (stackHomeRef.current) {
const height = stackHomeRef.current.clientHeight;
if (height > 0) setParentHeight(height);
}
return;
}
if (stackHomeRef.current) stackHomeRef.current.style.height = `${parentHeight}px`;
if (!isOpen || targetSelectedItem < 0) {
if (stackHomeRef.current) {
stackHomeRef.current.classList.remove(`${blockClass}--scaled-home`);
stackHomeRef.current.classList.add(`${blockClass}--unscaled-home`);
stackHomeRef.current.focus();
}
return;
}
const targetHomeHeight = stackedCoachmarkRefs.current[targetSelectedItem].clientHeight;
if (stackHomeRef.current) {
stackHomeRef.current.style.height = `calc(${targetHomeHeight}px + 3rem)`;
stackedCoachmarkRefs.current[targetSelectedItem].focus();
stackHomeRef.current.classList.remove(`${blockClass}--unscaled-home`);
stackHomeRef.current.classList.add(`${blockClass}--scaled-home`);
}
}, [
selectedItemNumber,
isOpen,
parentHeight
]);
const wrappedChildren = react.Children.map(childArray, (child, idx) => {
const mountedClass = mountedRef.current ? `${elementBlockClass}--is-mounted` : "";
return /* @__PURE__ */ react.default.createElement(require_CoachmarkOverlay.CoachmarkOverlay, {
key: idx,
ref: (ref) => {
stackedCoachmarkRefs.current[idx] = ref;
},
kind: "stacked",
onClose: () => handleClose(false),
theme,
fixedIsVisible: false,
className: (0, import_classnames.default)(elementBlockClass, mountedClass, idx === selectedItemNumber - 1 && `${elementBlockClass}--is-visible`, mountedRef.current && `${elementBlockClass}--is-mounted`)
}, child);
});
return /* @__PURE__ */ react.default.createElement(require_context.CoachmarkContext.Provider, { value: contextValue }, /* @__PURE__ */ react.default.createElement("div", {
...rest,
className: (0, import_classnames.default)(blockClass, `${require_settings.pkg.prefix}--coachmark-overlay--stack`, className),
ref,
...require_devtools.getDevtoolsProps(componentName)
}, /* @__PURE__ */ react.default.createElement(require_CoachmarkTagline.CoachmarkTagline, {
title: tagline,
onClose
}), /* @__PURE__ */ react.default.createElement(require_CoachmarkStackHome.CoachmarkStackHome, {
ref: stackHomeRef,
className: (0, import_classnames.default)(`${require_settings.pkg.prefix}--coachmark-overlay`, `${require_settings.pkg.prefix}--coachmark-overlay__${theme}`, elementBlockClass, selectedItemNumber > 0 && `${elementBlockClass}--is-stacked`, selectedItemNumber > 0 && `${elementBlockClass}--is-stacked__${theme}`, isOpen && `${elementBlockClass}--is-visible`, mountedRef.current && `${elementBlockClass}--is-mounted`),
isOpen: isOpen && selectedItemNumber < 1,
description,
renderMedia,
navLinkLabels,
onClickNavItem: handleClickNavItem,
onClose: () => {
handleClose(true);
},
portalTarget,
closeButtonLabel,
title,
tooltipAlign
}), portalNode?.current ? (0, react_dom.createPortal)(wrappedChildren, portalNode?.current) : null));
});
/**@ts-ignore*/
CoachmarkStack.deprecated = {
level: "warn",
details: `${componentName} is deprecated.`
};
CoachmarkStack.displayName = componentName;
CoachmarkStack.propTypes = {
/**
* CoachmarkStack should use a single CoachmarkOverlayElements component as a child.
*/
children: prop_types.default.node.isRequired,
/**
* Provide an optional class to be applied to the containing node.
*/
className: prop_types.default.string,
/**
* The label for the button that will close the Stack
*/
closeButtonLabel: prop_types.default.string,
/**
* Tooltip text and aria label for the Close button icon.
*/
closeIconDescription: prop_types.default.string,
/**
* The description of the Coachmark.
*/
description: prop_types.default.node.isRequired,
/**
* The labels used to link to the stackable Coachmarks.
*/
navLinkLabels: prop_types.default.arrayOf(prop_types.default.string.isRequired).isRequired,
/**
* Function to call when the CoachmarkStack closes.
*/
onClose: prop_types.default.func,
/**
* Where in the DOM to render the stack.
* The default is `document.body`.
*/
portalTarget: prop_types.default.string,
/**
* Optional prop to render any media like images or animated media.
*/
renderMedia: prop_types.default.func,
/**
* The tagline title which will be fixed to the bottom right of the window and will serve as the display trigger.
*/
tagline: prop_types.default.string.isRequired,
/**
* Determines the theme of the component.
*/
theme: prop_types.default.oneOf(["light", "dark"]),
/**
* The title of the Coachmark.
*/
title: prop_types.default.string.isRequired,
/**
* Label's tooltip position
*/
tooltipAlign: prop_types.default.oneOf(["top", "bottom"])
};
//#endregion
exports.CoachmarkStack = CoachmarkStack;