@atlaskit/onboarding/dist/types/components/spotlight-dialog.d.ts

An onboarding spotlight introduces new features to users through focused messages or multi-step tours.

import React, { Component, type ComponentType, type ReactNode } from 'react';
import { type Actions } from '../types';
interface SpotlightDialogProps {
    /**
     * Buttons to render in the footer.
     */
    actions?: Actions;
    /**
     * An optional element rendered beside the footer actions.
     */
    actionsBeforeElement?: ReactNode;
    /**
     * The elements rendered in the modal.
     */
    children?: ReactNode;
    /**
     * Where the dialog should appear, relative to the contents of the children.
     */
    dialogPlacement?: 'top left' | 'top center' | 'top right' | 'right top' | 'right middle' | 'right bottom' | 'bottom left' | 'bottom center' | 'bottom right' | 'left top' | 'left middle' | 'left bottom';
    /**
     * The width of the dialog in pixels. The minimum possible width is 160px and the maximum width is 600px.
     */
    dialogWidth: number;
    /**
     * Optional element rendered below the body.
     */
    footer?: ComponentType<any>;
    /**
     * Optional element rendered above the body.
     */
    header?: ComponentType<any>;
    /**
     * Heading text rendered above the body.
     */
    heading?: string;
    /**
     * An optional element rendered to the right of the heading.
     */
    headingAfterElement?: ReactNode;
    /**
     * Path to the image.
     */
    image?: string;
    /**
     * The spotlight target node.
     */
    targetNode: HTMLElement;
    /**
     * A `testId` prop is provided for specified elements,
     * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
     * serving as a hook for automated tests.
     */
    testId?: string;
    /**
     * Refers to an `aria-label` attribute. Sets an accessible name for the spotlight dialog wrapper to announce it to users of assistive technology.
     * Usage of either this, or the `titleId` prop is strongly recommended to improve accessibility.
     */
    label?: string;
    /**
     * Refers to a value of an `aria-labelledby` attribute. References an element to define accessible name for the spotlight dialog.
     * Usage of either this, or the `label` prop is strongly recommended to improve accessibility.
     */
    titleId?: string;
}
interface State {
    focusLockDisabled: boolean;
}
/**
 * __Spotlight dialog__
 *
 * An onboarding spotlight introduces new features to users through focused messages or multi-step tours.
 *
 * - [Examples](https://atlassian.design/components/onboarding/examples)
 * - [Code](https://atlassian.design/components/onboarding/code)
 * - [Usage](https://atlassian.design/components/onboarding/usage)
 */
declare class SpotlightDialogComponent extends Component<SpotlightDialogProps, State> {
    state: {
        focusLockDisabled: boolean;
    };
    private focusLockTimeoutId;
    componentDidMount(): void;
    componentWillUnmount(): void;
    render(): React.JSX.Element;
}
export default SpotlightDialogComponent;