@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
99 lines (98 loc) • 4.11 kB
JavaScript
"use client";
import { getDefaultZIndex } from "../../../core/utils/get-default-z-index/get-default-z-index.mjs";
import { getRadius } from "../../../core/utils/get-size/get-size.mjs";
import { getRefProp } from "../../../core/utils/get-ref-prop/get-ref-prop.mjs";
import { getSingleElementChild } from "../../../core/utils/get-single-element-child/get-single-element-child.mjs";
import { createVarsResolver } from "../../../core/styles-api/create-vars-resolver/create-vars-resolver.mjs";
import { getThemeColor } from "../../../core/MantineProvider/color-functions/get-theme-color/get-theme-color.mjs";
import { useMantineTheme } from "../../../core/MantineProvider/MantineThemeProvider/MantineThemeProvider.mjs";
import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
import { useStyles } from "../../../core/styles-api/use-styles/use-styles.mjs";
import { getStyleObject } from "../../../core/Box/get-style-object/get-style-object.mjs";
import { factory } from "../../../core/factory/factory.mjs";
import { Box } from "../../../core/Box/Box.mjs";
import { OptionalPortal } from "../../Portal/OptionalPortal.mjs";
import { useFloatingTooltip } from "./use-floating-tooltip.mjs";
import Tooltip_module_default from "../Tooltip.module.mjs";
import { cloneElement } from "react";
import { useMergedRef } from "@mantine/hooks";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/Tooltip/TooltipFloating/TooltipFloating.tsx
const defaultProps = {
refProp: "ref",
withinPortal: true,
offset: 10,
position: "right",
zIndex: getDefaultZIndex("popover")
};
const varsResolver = createVarsResolver((theme, { radius, color }) => ({ tooltip: {
"--tooltip-radius": radius === void 0 ? void 0 : getRadius(radius),
"--tooltip-bg": color ? getThemeColor(color, theme) : void 0,
"--tooltip-color": color ? "var(--mantine-color-white)" : void 0
} }));
const TooltipFloating = factory((_props) => {
const props = useProps("TooltipFloating", defaultProps, _props);
const { children, refProp, withinPortal, style, className, classNames, styles, unstyled, radius, color, label, offset, position, multiline, zIndex, disabled, defaultOpened, variant, vars, portalProps, attributes, ref, ...others } = props;
const theme = useMantineTheme();
const getStyles = useStyles({
name: "TooltipFloating",
props,
classes: Tooltip_module_default,
className,
style,
classNames,
styles,
unstyled,
attributes,
rootSelector: "tooltip",
vars,
varsResolver
});
const { handleMouseMove, x, y, opened, boundaryRef, floating, setOpened } = useFloatingTooltip({
offset,
position,
defaultOpened
});
const child = getSingleElementChild(children);
if (!child) throw new Error("[@mantine/core] Tooltip.Floating component children should be an element or a component that accepts ref, fragments, strings, numbers and other primitive values are not supported");
const targetRef = useMergedRef(boundaryRef, getRefProp(child), ref);
const childProps = child.props;
const onMouseEnter = (event) => {
childProps.onMouseEnter?.(event);
handleMouseMove(event);
setOpened(true);
};
const onMouseLeave = (event) => {
childProps.onMouseLeave?.(event);
setOpened(false);
};
return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(OptionalPortal, {
...portalProps,
withinPortal,
children: /* @__PURE__ */ jsx(Box, {
...others,
...getStyles("tooltip", { style: {
...getStyleObject(style, theme),
zIndex,
display: !disabled && opened ? "block" : "none",
top: (y && Math.round(y)) ?? "",
left: (x && Math.round(x)) ?? ""
} }),
variant,
ref: floating,
mod: { multiline },
children: label
})
}), cloneElement(child, {
...childProps,
[refProp]: targetRef,
onMouseEnter,
onMouseLeave
})] });
});
TooltipFloating.classes = Tooltip_module_default;
TooltipFloating.varsResolver = varsResolver;
TooltipFloating.displayName = "@mantine/core/TooltipFloating";
//#endregion
export { TooltipFloating };
//# sourceMappingURL=TooltipFloating.mjs.map