@atlaskit/spotlight/dist/types/controllers/context.d.ts

A spotlight introduces users to points of interest, from focused messages to multi-step tours.

/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import { type Context, type Dispatch, type MutableRefObject, type ReactNode, type RefObject, type SetStateAction } from 'react';
import type { BackEvent, DismissEvent, DoneEvent, Placement, PositionArea } from '../types';
export interface SpotlightContextType {
    card: {
        ref: MutableRefObject<HTMLDivElement | null> | null;
        setRef: Dispatch<SetStateAction<MutableRefObject<HTMLDivElement | null> | null>>;
        placement: Placement;
        setPlacement: Dispatch<SetStateAction<Placement>>;
        motion: React.ComponentType<{
            children: ReactNode;
        }> | undefined;
        setMotion: Dispatch<SetStateAction<React.ComponentType<{
            children: ReactNode;
        }> | undefined>>;
    };
    heading: {
        id: string;
        setId: Dispatch<SetStateAction<string>>;
    };
    popoverContent: {
        ref: MutableRefObject<HTMLDivElement | null> | undefined;
        setRef: Dispatch<SetStateAction<MutableRefObject<HTMLDivElement | null> | undefined>>;
        positionArea: PositionArea | 'none' | undefined;
        setPositionArea: Dispatch<SetStateAction<PositionArea | 'none' | undefined>>;
        update: () => Promise<any>;
        setUpdate: Dispatch<SetStateAction<() => Promise<any>>>;
        dismiss: MutableRefObject<(_event: DismissEvent) => void>;
        setDismiss: (dismissFn: (_event: DismissEvent) => void) => void;
    };
    target: {
        ref: RefObject<HTMLElement | null>;
        setRef: Dispatch<SetStateAction<RefObject<HTMLElement | null>>>;
    };
    primaryAction: {
        action: MutableRefObject<(_event: DoneEvent) => void>;
        setAction: (doneFn: (_event: DoneEvent) => void) => void;
    };
    secondaryAction: {
        action: MutableRefObject<(_event: BackEvent) => void>;
        setAction: (backFn: (_event: BackEvent) => void) => void;
    };
}
export declare const SpotlightContext: Context<SpotlightContextType>;
/**
 * Props accepted by `SpotlightContextProvider`.
 */
export interface SpotlightContextProviderProps {
    /**
     * The children rendered inside the spotlight context. Typically a
     * `PopoverTarget` + `PopoverContent` pair.
     */
    children: ReactNode;
    /**
     * Optional caller-supplied anchor ref. When provided, this ref is used as
     * the target ref in the spotlight context — `PopoverContent` reads it via
     * `target.ref` for `useAnchoredPopover`. The ref's element identity may
     * change over time (e.g. as a target resolves asynchronously); each new
     * ref object is propagated through the context value.
     *
     * When omitted, the default behaviour is preserved: `PopoverTarget`
     * registers its own ref via `target.setRef` and `PopoverContent` consumes
     * that.
     *
     * This prop exists primarily for callers that render their popover
     * content in a different React subtree from the target (where a shared
     * `PopoverTarget` cannot be used), but still need the spotlight context
     * to be wired up. The popover content remains rendered in the React tree
     * where the provider lives, while the visual anchor is the DOM node the
     * ref points to.
     */
    targetRef?: RefObject<HTMLElement | null>;
}
export declare const SpotlightContextProvider: ({ children, targetRef, }: SpotlightContextProviderProps) => JSX.Element;