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

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

import React from 'react';
import { type ScrollLogicalPosition, type SpotlightProps } from '../types';
import { type ElementBoundingBox } from '../utils/use-element-box';
interface SpotlightInnerProps extends SpotlightProps {
    /**
     * The spotlight target DOM element.
     */
    targetNode: HTMLElement;
    /**
     * Called when the component has been mounted.
     */
    onOpened: () => any;
    /**
     * Called when the component has been unmounted.
     */
    onClosed: () => any;
    /**
     * Whether to display a pulse animation around the spotlighted element.
     *
     * Same as `SpotlightProps` but required instead of optional.
     */
    pulse: boolean;
    /**
     * The width of the dialog in pixels. The minimum possible width is 160px and the maximum width is 600px.
     *
     * Same as `SpotlightProps` but required instead of optional.
     */
    dialogWidth: number;
    /**
     * passed to scrollIntoView as the block option, which determines the vertical alignment of the target node in the closest scrollable ancestor.
     */
    scrollPositionBlock?: ScrollLogicalPosition;
}
interface State {
    replacementElement: HTMLElement | null;
}
/**
 * __Spotlight inner__
 *
 * Renders the spotlight target clone and dialog.
 *
 * @internal
 */
declare class SpotlightInner extends React.Component<SpotlightInnerProps, State> {
    static defaultProps: {
        dialogWidth: number;
        pulse: boolean;
    };
    state: {
        replacementElement: null;
    };
    componentDidUpdate(prevProps: SpotlightInnerProps): void;
    componentDidMount(): void;
    componentWillUnmount(): void;
    getTargetNodeStyle: (box: ElementBoundingBox) => {};
    render(): React.JSX.Element;
}
export default SpotlightInner;