@carbon/react
Version:
React components for the Carbon Design System
108 lines (106 loc) • 2.96 kB
JavaScript
/**
* Copyright IBM Corp. 2016, 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 { usePrefix } from "../../internal/usePrefix.js";
import { Escape } from "../../internal/keyboard/keys.js";
import { match } from "../../internal/keyboard/match.js";
import { useFallbackId } from "../../internal/useId.js";
import { deprecate } from "../../prop-types/deprecate.js";
import { Popover, PopoverContent } from "../Popover/index.js";
import classNames from "classnames";
import { useState } from "react";
import PropTypes from "prop-types";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/components/Tooltip/DefinitionTooltip.tsx
/**
* Copyright IBM Corp. 2016, 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 DefinitionTooltip = ({ align = "bottom", autoAlign, className, children, definition, defaultOpen = false, id, openOnHover, tooltipText, triggerClassName, ...rest }) => {
const [isOpen, setOpen] = useState(defaultOpen);
const prefix = usePrefix();
const tooltipId = useFallbackId(id);
function onKeyDown(event) {
if (isOpen && match(event, Escape)) {
event.stopPropagation();
setOpen(false);
}
}
return /* @__PURE__ */ jsxs(Popover, {
align,
className,
autoAlign,
dropShadow: false,
highContrast: true,
onMouseLeave: () => {
setOpen(false);
},
onMouseEnter: () => {
if (openOnHover) setOpen(true);
},
onFocus: () => {
setOpen(true);
},
open: isOpen,
children: [/* @__PURE__ */ jsx("button", {
...rest,
className: classNames(`${prefix}--definition-term`, triggerClassName),
"aria-controls": tooltipId,
"aria-describedby": tooltipId,
"aria-expanded": isOpen,
onBlur: () => {
setOpen(false);
},
onMouseDown: (event) => {
if (event.button === 0) setOpen(!isOpen);
},
onKeyDown,
type: "button",
children
}), /* @__PURE__ */ jsx(PopoverContent, {
className: `${prefix}--definition-tooltip`,
id: tooltipId,
children: tooltipText ?? definition
})]
});
};
DefinitionTooltip.propTypes = {
align: PropTypes.oneOf([
"top",
"top-left",
"top-right",
"bottom",
"bottom-left",
"bottom-right",
"left",
"left-bottom",
"left-top",
"right",
"right-bottom",
"right-top",
"top-start",
"top-end",
"bottom-start",
"bottom-end",
"left-end",
"left-start",
"right-end",
"right-start"
]),
autoAlign: PropTypes.bool,
children: PropTypes.node.isRequired,
className: PropTypes.string,
defaultOpen: PropTypes.bool,
definition: PropTypes.node.isRequired,
id: PropTypes.string,
openOnHover: PropTypes.bool,
tooltipText: deprecate(PropTypes.node, "The tooltipText prop has been deprecated. Please use the `definition` prop instead."),
triggerClassName: PropTypes.string
};
//#endregion
export { DefinitionTooltip };