@gfazioli/mantine-onboarding-tour/dist/types/OnboardingTourFocusReveal/OnboardingTourFocusReveal.d.ts

A Mantine component enables you to create a onboarding-tour effect using overlays, popovers, and onboarding tours, which enhances element visibility and interactivity.

import React from 'react';
import { BoxProps, ElementProps, Factory, OverlayProps, PopoverProps, StylesApiProps, TransitionOverride } from '@mantine/core';
import { OnboardingTourFocusRevealGroup } from '../OnboardingTourFocusRevealGroup/OnboardingTourFocusRevealGroup';
import { OnboardingTourFocusRevealFocusedMode } from './focus-reveal-modes';
export interface RevealProps {
    /** Duration of scroll in milliseconds */
    duration?: number;
    /** Axis of scroll */
    axis?: 'x' | 'y';
    /** Custom mathematical easing function */
    easing?: (t: number) => number;
    /** Additional distance between nearest edge and element */
    offset?: number;
    /** Indicator if animation may be interrupted by user scrolling */
    cancelable?: boolean;
    /** Prevents content jumping in scrolling lists with multiple targets */
    isList?: boolean;
}
export type OnboardingTourFocusRevealStylesNames = 'focused' | 'overlay';
export interface OnboardingTourFocusRevealDataAttributes {
    'data-onboarding-tour-focus-reveal-focused'?: boolean;
    'data-onboarding-tour-focus-reveal-mode'?: OnboardingTourFocusRevealFocusedMode;
}
export interface OnboardingTourFocusRevealChildProps extends OnboardingTourFocusRevealDataAttributes {
    className?: string;
    style?: React.CSSProperties;
    ref?: React.Ref<any>;
}
export type OnboardingTourFocusRevealCssVariables = {};
export interface OnboardingTourFocusRevealBaseProps {
    /** Controlled OnboardingTourFocusReveal focused state */
    focused?: boolean;
    /** Uncontrolled OnboardingTourFocusReveal initial focused state */
    defaultFocused?: boolean;
    /** OnboardingTourFocusReveal mode/effects when focused */
    focusedMode?: OnboardingTourFocusRevealFocusedMode;
    /** Indicator if element should be revealed */
    withReveal?: boolean;
    /** Props passed down to `useScrollIntoView()` hooks */
    revealProps?: RevealProps;
    /** Will render overlay if set to `true` */
    withOverlay?: boolean;
    /** Props passed down to `Overlay` component */
    overlayProps?: OverlayProps & ElementProps<'div'>;
    /** Props passed down to the `Transition` component that used to animate the Overlay, use to configure duration and animation type, `{ duration: 150, transition: 'fade' }` by default */
    transitionProps?: TransitionOverride;
    /** Ref to scrollable element */
    scrollableRef?: React.RefObject<HTMLDivElement>;
    /** Dropdown content for Popover */
    popoverContent?: React.ReactNode;
    /** Props passed down to the `Popover` component */
    popoverProps?: Omit<PopoverProps, 'withinPortal'>;
    /** Called when OnboardingTourFocusReveal focused state changes */
    onChange?: (focused: boolean) => void;
    /** Called when OnboardingTourFocusReveal is focused */
    onFocus?: () => void;
    /** Called when OnboardingTourFocusReveal is blurred */
    onBlur?: () => void;
    /** Callback fired after scroll */
    onRevealFinish?: () => void;
    /** Content */
    children?: React.ReactNode;
}
export interface OnboardingTourFocusRevealProps extends BoxProps, OnboardingTourFocusRevealBaseProps, StylesApiProps<OnboardingTourFocusRevealFactory> {
}
export type OnboardingTourFocusRevealFactory = Factory<{
    props: OnboardingTourFocusRevealProps;
    ref: HTMLDivElement;
    stylesNames: OnboardingTourFocusRevealStylesNames;
    vars: OnboardingTourFocusRevealCssVariables;
    staticComponents: {
        Group: typeof OnboardingTourFocusRevealGroup;
    };
}>;
export declare const defaultProps: Partial<OnboardingTourFocusRevealProps>;
export declare function OnboardingTourFocusReveal(_props: OnboardingTourFocusRevealProps): React.JSX.Element;
export declare namespace OnboardingTourFocusReveal {
    var classes: any;
    var displayName: string;
    var Group: typeof OnboardingTourFocusRevealGroup;
}