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

A Mantine 9 onboarding tour component with focus-reveal overlays, cutout highlights, step-by-step popover navigation, and compound components for guided user experiences.

import { BoxProps, ElementProps, Factory, MantineBreakpoint, OverlayProps, PopoverProps, PopoverWidth, StylesApiProps, TransitionOverride } from '@mantine/core';
import React from 'react';
type FloatingSide = 'top' | 'right' | 'bottom' | 'left';
type FloatingPlacement = 'start' | 'end';
type FloatingPosition = FloatingSide | `${FloatingSide}-${FloatingPlacement}`;
interface FloatingAxesOffsets {
    mainAxis?: number;
    crossAxis?: number;
    alignmentAxis?: number | null;
}
import { OnboardingTourFocusRevealGroup } from '../OnboardingTourFocusRevealGroup/OnboardingTourFocusRevealGroup';
import { OnboardingTourFocusRevealFocusedMode } from './focus-reveal-modes';
/** A value that can be either a scalar or a responsive object mapping breakpoints to values */
export type ResponsiveProp<T> = T | Partial<Record<MantineBreakpoint, T>>;
/** PopoverProps with responsive-aware overrides for position, offset, width, and arrowSize */
export interface ResponsivePopoverProps extends Omit<PopoverProps, 'position' | 'offset' | 'width' | 'arrowSize'> {
    /** Popover position, supports responsive objects: `{ base: 'bottom', sm: 'left' }` */
    position?: ResponsiveProp<FloatingPosition>;
    /** Popover offset, supports responsive objects: `{ base: 8, sm: -4 }` */
    offset?: ResponsiveProp<number | FloatingAxesOffsets>;
    /** Popover width, supports responsive objects: `{ base: 'target', sm: 300 }` */
    width?: ResponsiveProp<PopoverWidth>;
    /** Arrow size, supports responsive objects: `{ base: 12, sm: 16 }` */
    arrowSize?: ResponsiveProp<number>;
}
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 | null>;
    /** Dropdown content for Popover */
    popoverContent?: React.ReactNode;
    /** Props passed down to the `Popover` component. Position, offset, width, and arrowSize accept responsive objects. */
    popoverProps?: ResponsivePopoverProps;
    /** Disable interactions on the target component */
    disableTargetInteraction?: boolean;
    /** Called when OnboardingTourFocusReveal focused state changes */
    onChange?: (focused: boolean) => void;
    /** z-index for the focused element (should be above the overlay). Defaults to 201. */
    focusedZIndex?: number;
    /** 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;
}
export {};