@gfazioli/mantine-onboarding-tour/dist/types/OnboardingTourPopoverContent/OnboardingTourPopoverContent.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, Factory, StepperProps, StepperStepProps, StylesApiProps } from '@mantine/core';
import { OnboardingTourStep, type OnboardingTourController, type OnboardingTourOptions } from '../hooks/use-onboarding-tour/use-onboarding-tour';
export type OnboardingTourPopoverContentStylesNames = 'popoverContent';
export interface OnboardingTourPopoverContentBaseProps extends Omit<OnboardingTourOptions, 'onOnboardingTourStart' | 'onOnboardingTourEnd' | 'onOnboardingTourChange'> {
    /** Current onboarding tour returned by useOnboardingTour() hook */
    tourController: OnboardingTourController;
    /** Header of the tour. You can also pass a React component here */
    header?: React.ReactNode | ((tourController: OnboardingTourController) => React.ReactNode);
    /** Title of the tour. You can also pass a React component here */
    title?: React.ReactNode | ((tourController: OnboardingTourController) => React.ReactNode);
    /** Content of the tour. You can also pass a React component here */
    content?: React.ReactNode | ((tourController: OnboardingTourController) => React.ReactNode);
    /** Footer of the tour. You can also pass a React component here */
    footer?: React.ReactNode | ((tourController: OnboardingTourController) => React.ReactNode);
    /** Show the previous button */
    withPrevButton?: boolean;
    /** Show the next button */
    withNextButton?: boolean;
    /** Show the skip button */
    withSkipButton?: boolean;
    /** Show the stepper */
    withStepper?: boolean;
    /** Navigation next button label or Component */
    nextStepNavigation?: React.ReactNode | ((tourController: OnboardingTourController) => React.ReactNode);
    /** Navigation end button label or Component. used when the tour is over and is not in loop */
    endStepNavigation?: React.ReactNode | ((tourController: OnboardingTourController) => React.ReactNode);
    /** Navigation prev button label or Component */
    prevStepNavigation?: React.ReactNode | ((tourController: OnboardingTourController) => React.ReactNode);
    /** Navigation close button label or Component */
    skipNavigation?: React.ReactNode | ((tourController: OnboardingTourController) => React.ReactNode);
    /** Stepper component */
    stepper?: (tourController: OnboardingTourController) => React.ReactNode;
    /** Stepper props */
    stepperProps?: Omit<StepperProps, 'children'>;
    /** Stepper.Step props */
    stepperStepProps?: Omit<StepperStepProps, 'children'>;
    /** Triggered when the Close Button is clicked */
    onOnboardingTourClose?: () => void;
}
export interface OnboardingTourPopoverContentProps extends Omit<BoxProps, 'title' | 'description' | 'content'>, OnboardingTourPopoverContentBaseProps, StylesApiProps<OnboardingTourPopoverContentFactory> {
}
export type OnboardingTourPopoverContentFactory = Factory<{
    props: OnboardingTourPopoverContentProps;
    ref: HTMLDivElement;
    stylesNames: OnboardingTourPopoverContentStylesNames;
}>;
export declare const defaultProps: Partial<OnboardingTourPopoverContentProps>;
export type OnboardingCurrentTour = OnboardingTourStep & {
    step: number;
    tourLength: number;
};
export declare const OnboardingTourPopoverContent: import("@mantine/core").MantineComponent<{
    props: OnboardingTourPopoverContentProps;
    ref: HTMLDivElement;
    stylesNames: OnboardingTourPopoverContentStylesNames;
}>;