@carbon/ibm-products
Version:
Carbon for IBM Products
69 lines (67 loc) • 2.54 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.
*/
require("../../../_virtual/_rolldown/runtime.js");
const require_useIsomorphicEffect = require("../../../global/js/hooks/useIsomorphicEffect.js");
require("./enums.js");
let react = require("react");
//#region src/components/Coachmark/utils/hooks.js
/**
* Copyright IBM Corp. 2024
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* Detects when a user clicks outside of the element
* @param {object} coachmarkRef - The ref to the React element for the Coachmark to detect when the user clicks outside of its bounds.
* @param {object} overlayRef - The ref to the React element for the CoachmarkOverlay to detect when the user clicks outside of its bounds.
* @param {string} overlayKind - The overlayKind prop from the Coachmark. @see COACHMARK_OVERLAY_KIND
* @param {Function} callback The callback to call when the user mouses down.
*/
function useClickOutsideElement(coachmarkRef, overlayRef, overlayKind, callback) {
const cb = (0, react.useRef)(void 0);
const isTooltip = overlayKind === "tooltip";
require_useIsomorphicEffect.useIsomorphicEffect(() => {
cb.current = callback;
}, [callback]);
require_useIsomorphicEffect.useIsomorphicEffect(() => {
function handleClickOutside(event) {
const isOverlayOutside = overlayRef.current && !overlayRef.current.contains(event.target);
const isOutsideCoachmark = coachmarkRef.current && !coachmarkRef.current.contains(event.target);
if (isOverlayOutside && isOutsideCoachmark) callCallback();
}
function callCallback() {
if (isTooltip) cb.current();
}
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, [
coachmarkRef,
overlayRef,
isTooltip
]);
}
const useWindowEvent = (eventName, callback) => {
const savedCallback = (0, react.useRef)(null);
(0, react.useEffect)(() => {
savedCallback.current = callback;
});
(0, react.useEffect)(() => {
function handler(event) {
if (savedCallback.current) savedCallback.current(event);
}
window.addEventListener(eventName, handler);
return () => {
window.removeEventListener(eventName, handler);
};
}, [eventName]);
};
//#endregion
exports.useClickOutsideElement = useClickOutsideElement;
exports.useWindowEvent = useWindowEvent;