/** * Copyright IBM Corp. 2023, 2025 * * 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'; import PropTypes from 'prop-types'; 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; /** * @deprecated * Optional class name for the Coachmark Overlay component. */ overlayClassName?: string; /** * @deprecated * What kind or style of Coachmark to render. */ overlayKind?: 'tooltip' | 'floating' | 'stacked'; /** * @deprecated */ overlayRef?: MutableRefObject; /** * @deprecated * 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; }; /** * @deprecated * The optional button or beacon that the user will click to show the Coachmark. */ target: React.ReactNode; /** * @deprecated * Determines the theme of the component. */ theme?: 'light' | 'dark'; /** * Determines if the coachmark is open by default. * Does nothing if `overlayKind=stacked`. */ isOpenByDefault?: boolean; /** * Tooltip text and aria label for the Close button icon. */ closeIconDescription?: string; } /** * 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. * @deprecated This component is deprecated. */ export declare const Coachmark: React.ForwardRefExoticComponent>; export declare const deprecatedProps: { /** * **Deprecated** * Optional class name for the Coachmark Overlay component. */ overlayClassName: PropTypes.Requireable; /** * **Deprecated** * What kind or style of Coachmark to render. */ overlayKind: PropTypes.Requireable; overlayRef: PropTypes.Requireable; }>>; /** * **Deprecated** * 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: PropTypes.Requireable; /** * **Deprecated** * The optional button or beacon that the user will click to show the Coachmark. */ target: PropTypes.Requireable; /** * **Deprecated** * Determines the theme of the component. */ theme: PropTypes.Requireable; }; //# sourceMappingURL=Coachmark.d.ts.map