@mantine/core/lib/components/FloatingIndicator/FloatingIndicator.d.ts

React components library focused on usability, accessibility and developer experience

import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
export type FloatingIndicatorStylesNames = 'root';
export type FloatingIndicatorCssVariables = {
    root: '--transition-duration';
};
export interface FloatingIndicatorProps extends BoxProps, StylesApiProps<FloatingIndicatorFactory>, ElementProps<'div'> {
    /** Target element over which the indicator is displayed.
     * The indicator will be positioned to match the target's size and position.
     * */
    target: HTMLElement | null | undefined;
    /** Parent container element that must have `position: relative`.
     * The indicator's position is calculated relative to this element.
     * */
    parent: HTMLElement | null | undefined;
    /** Transition duration in ms @default 150 */
    transitionDuration?: number | string;
    /** Controls whether the indicator should be hidden initially and displayed after the parent's transition ends.
     * Set to `true` when the parent container has CSS transitions (e.g., `transform: scale()`) to prevent
     * the indicator from appearing at the wrong position during the parent's animation.
     * @default false
     * */
    displayAfterTransitionEnd?: boolean;
    /** Called when the indicator starts transitioning to a new position */
    onTransitionStart?: () => void;
    /** Called when the indicator finishes transitioning to a new position */
    onTransitionEnd?: () => void;
}
export type FloatingIndicatorFactory = Factory<{
    props: FloatingIndicatorProps;
    ref: HTMLDivElement;
    stylesNames: FloatingIndicatorStylesNames;
    vars: FloatingIndicatorCssVariables;
    ctx: {
        shouldReduceMotion: boolean;
    };
}>;
export declare const FloatingIndicator: import("../..").MantineComponent<{
    props: FloatingIndicatorProps;
    ref: HTMLDivElement;
    stylesNames: FloatingIndicatorStylesNames;
    vars: FloatingIndicatorCssVariables;
    ctx: {
        shouldReduceMotion: boolean;
    };
}>;