@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
100 lines (99 loc) • 4.76 kB
JavaScript
"use client";
require("../../../_virtual/_rolldown/runtime.cjs");
const require_get_default_z_index = require("../../../core/utils/get-default-z-index/get-default-z-index.cjs");
const require_get_size = require("../../../core/utils/get-size/get-size.cjs");
const require_get_ref_prop = require("../../../core/utils/get-ref-prop/get-ref-prop.cjs");
const require_get_single_element_child = require("../../../core/utils/get-single-element-child/get-single-element-child.cjs");
const require_create_vars_resolver = require("../../../core/styles-api/create-vars-resolver/create-vars-resolver.cjs");
const require_get_theme_color = require("../../../core/MantineProvider/color-functions/get-theme-color/get-theme-color.cjs");
const require_MantineThemeProvider = require("../../../core/MantineProvider/MantineThemeProvider/MantineThemeProvider.cjs");
const require_use_props = require("../../../core/MantineProvider/use-props/use-props.cjs");
const require_use_styles = require("../../../core/styles-api/use-styles/use-styles.cjs");
const require_get_style_object = require("../../../core/Box/get-style-object/get-style-object.cjs");
const require_factory = require("../../../core/factory/factory.cjs");
const require_Box = require("../../../core/Box/Box.cjs");
const require_OptionalPortal = require("../../Portal/OptionalPortal.cjs");
const require_use_floating_tooltip = require("./use-floating-tooltip.cjs");
const require_Tooltip_module = require("../Tooltip.module.cjs");
let react = require("react");
let _mantine_hooks = require("@mantine/hooks");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/core/src/components/Tooltip/TooltipFloating/TooltipFloating.tsx
const defaultProps = {
refProp: "ref",
withinPortal: true,
offset: 10,
position: "right",
zIndex: require_get_default_z_index.getDefaultZIndex("popover")
};
const varsResolver = require_create_vars_resolver.createVarsResolver((theme, { radius, color }) => ({ tooltip: {
"--tooltip-radius": radius === void 0 ? void 0 : require_get_size.getRadius(radius),
"--tooltip-bg": color ? require_get_theme_color.getThemeColor(color, theme) : void 0,
"--tooltip-color": color ? "var(--mantine-color-white)" : void 0
} }));
const TooltipFloating = require_factory.factory((_props) => {
const props = require_use_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 = require_MantineThemeProvider.useMantineTheme();
const getStyles = require_use_styles.useStyles({
name: "TooltipFloating",
props,
classes: require_Tooltip_module.default,
className,
style,
classNames,
styles,
unstyled,
attributes,
rootSelector: "tooltip",
vars,
varsResolver
});
const { handleMouseMove, x, y, opened, boundaryRef, floating, setOpened } = require_use_floating_tooltip.useFloatingTooltip({
offset,
position,
defaultOpened
});
const child = require_get_single_element_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 = (0, _mantine_hooks.useMergedRef)(boundaryRef, require_get_ref_prop.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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_OptionalPortal.OptionalPortal, {
...portalProps,
withinPortal,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
...others,
...getStyles("tooltip", { style: {
...require_get_style_object.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
})
}), (0, react.cloneElement)(child, {
...childProps,
[refProp]: targetRef,
onMouseEnter,
onMouseLeave
})] });
});
TooltipFloating.classes = require_Tooltip_module.default;
TooltipFloating.varsResolver = varsResolver;
TooltipFloating.displayName = "@mantine/core/TooltipFloating";
//#endregion
exports.TooltipFloating = TooltipFloating;
//# sourceMappingURL=TooltipFloating.cjs.map