@eccenca/gui-elements/dist/types/components/VisualTour/VisualTour.d.ts

GUI elements based on other libraries, usable in React application, written in Typescript.

import React from "react";
import { ModalSize, TooltipSize } from "../../index";
export interface VisualTourProps {
    /** The steps of the tour. */
    steps: VisualTourStep[];
    /** Called when the tour is cancelled or closed at then end. This should usually remove the component from the outside. */
    onClose: () => void;
    /** Label of the button to close the tour. */
    closeLabel?: string;
    /** The label for the 'next' button. */
    nextLabel?: string;
    /** The label for the 'previous' button. */
    prevLabel?: string;
    /** The step target is usable, e.g. it can be clicked. */
    usableStepTarget?: boolean;
    /** Need to be set to `true` that the tour is displayed. */
    isOpen?: boolean;
}
export interface VisualTourStep {
    title: string;
    /** The description or more elaborate content element that is shown in the modal/overlay. */
    content: string | (() => React.JSX.Element);
    /** Optional element that should be highlighted. The step content is displayed as a tooltip instead of a modal.
     * In case of an array, the first match is highlighted. */
    highlightElementQuery?: string | string[];
    /** The texts used in the step, e.g. when custom layouts are rendered, these will be used for the text strings. */
    texts?: Record<string, string>;
    /** An image URL. This will be displayed in the step description. */
    image?: string;
    /** The size of the tooltip or modal. */
    size?: TooltipSize | ModalSize;
    /** The step target is usable, e.g. it can be clicked. Overwrites the setting in `<VisualTour/>`. */
    usableStepTarget?: boolean;
}
/** This should be used for defining steps in a separate object/file. Use with 'satisfies' after the object definition. */
export type VisualTourStepDefinitions = Record<string, Partial<VisualTourStep>>;
/** A visual tour multi-step tour of the current view. */
export declare const VisualTour: ({ steps, onClose, closeLabel, nextLabel, prevLabel, usableStepTarget, isOpen, }: VisualTourProps) => React.JSX.Element | null;
export default VisualTour;