@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
61 lines (60 loc) • 2.38 kB
JavaScript
"use client";
import { createVarsResolver } from "../../core/styles-api/create-vars-resolver/create-vars-resolver.mjs";
import { useProps } from "../../core/MantineProvider/use-props/use-props.mjs";
import { useStyles } from "../../core/styles-api/use-styles/use-styles.mjs";
import { factory } from "../../core/factory/factory.mjs";
import { Box } from "../../core/Box/Box.mjs";
import { useFloatingIndicator } from "./use-floating-indicator.mjs";
import FloatingIndicator_module_default from "./FloatingIndicator.module.mjs";
import { useRef } from "react";
import { useMergedRef, useReducedMotion } from "@mantine/hooks";
import { jsx } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/FloatingIndicator/FloatingIndicator.tsx
const varsResolver = createVarsResolver((theme, { transitionDuration }, { shouldReduceMotion }) => {
const duration = (theme.respectReducedMotion ? shouldReduceMotion : false) ? "0ms" : typeof transitionDuration === "number" ? `${transitionDuration}ms` : transitionDuration || "150ms";
return { root: { "--transition-duration": duration } };
});
const FloatingIndicator = factory((_props) => {
const props = useProps("FloatingIndicator", null, _props);
const { classNames, className, style, styles, unstyled, vars, target, parent, transitionDuration, mod, displayAfterTransitionEnd, onTransitionStart, onTransitionEnd, attributes, ref, ...others } = props;
const getStyles = useStyles({
name: "FloatingIndicator",
classes: FloatingIndicator_module_default,
props,
className,
style,
classNames,
styles,
unstyled,
attributes,
vars,
varsResolver,
stylesCtx: { shouldReduceMotion: useReducedMotion() }
});
const innerRef = useRef(null);
const { initialized, hidden } = useFloatingIndicator({
target,
parent,
ref: innerRef,
displayAfterTransitionEnd,
onTransitionStart,
onTransitionEnd
});
const mergedRef = useMergedRef(ref, innerRef);
if (!target || !parent) return null;
return /* @__PURE__ */ jsx(Box, {
ref: mergedRef,
mod: [{
initialized,
hidden
}, mod],
...getStyles("root"),
...others
});
});
FloatingIndicator.displayName = "@mantine/core/FloatingIndicator";
FloatingIndicator.classes = FloatingIndicator_module_default;
FloatingIndicator.varsResolver = varsResolver;
//#endregion
export { FloatingIndicator };
//# sourceMappingURL=FloatingIndicator.mjs.map