@carbon/ibm-products/lib/components/Coachmark/Coachmark.d.ts

Carbon for IBM Products

/**
 * Copyright IBM Corp. 2023, 2024
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
import React, { MutableRefObject, ReactNode } from 'react';
export interface CoachmarkProps {
    /**
     * Where to render the Coachmark relative to its target.
     * Applies only to Floating and Tooltip Coachmarks.
     * @see COACHMARK_ALIGNMENT
     */
    align?: 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-top' | 'left-bottom' | 'right' | 'right-top' | 'right-bottom' | 'top' | 'top-left' | 'top-right';
    /**
     * Auto aligns the coachmark based on screen boundaries
     * Applies only to Tooltip Coachmarks.
     */
    autoAlign?: boolean;
    /**
     * Coachmark should use a single CoachmarkOverlayElements component as a child.
     * @see CoachmarkOverlayElements
     */
    children: ReactNode;
    /**
     * Optional class name for this component.
     */
    className?: string;
    /**
     * Function to call when the Coachmark closes.
     */
    onClose?: () => void;
    /**
     * Optional class name for the Coachmark Overlay component.
     */
    overlayClassName?: string;
    /**
     * What kind or style of Coachmark to render.
     */
    overlayKind?: 'tooltip' | 'floating' | 'stacked';
    overlayRef?: MutableRefObject<HTMLElement | null>;
    /**
     * By default, the Coachmark will be appended to the end of `document.body`.
     * The Coachmark will remain persistent as the user navigates the app until
     * the user closes the Coachmark.
     *
     * Alternatively, the app developer can tightly couple the Coachmark to a DOM
     * element or other component by specifying a CSS selector. The Coachmark will
     * remain visible as long as that element remains visible or mounted. When the
     * element is hidden or component is unmounted, the Coachmark will disappear.
     */
    portalTarget?: string;
    /**
     * Fine tune the position of the target in pixels. Applies only to Beacons.
     */
    positionTune?: {
        x: number;
        y: number;
    };
    /**
     * The optional button or beacon that the user will click to show the Coachmark.
     */
    target: React.ReactNode;
    /**
     * Determines the theme of the component.
     */
    theme?: 'light' | 'dark';
    /**
     * Determines if the coachmark is open by default.
     * Does nothing if `overlayKind=stacked`.
     */
    isOpenByDefault?: boolean;
}
/**
 * Coachmarks are used to call out specific functionality or concepts
 * within the UI that may not be intuitive but are important for the
 * user to gain understanding of the product's main value and discover new use cases.
 */
export declare let Coachmark: React.ForwardRefExoticComponent<CoachmarkProps & React.RefAttributes<HTMLElement>>;