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; /** * Optional element rendered above the body. */ header?: ComponentType; /** * 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 { state: { focusLockDisabled: boolean; }; private focusLockTimeoutId; componentDidMount(): void; componentWillUnmount(): void; render(): React.JSX.Element; } export default SpotlightDialogComponent;