@douyinfe/semi-ui/lib/cjs/tooltip/index.d.ts

A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.

import React from 'react';
import PropTypes from 'prop-types';
import Event from '@douyinfe/semi-foundation/lib/cjs/utils/Event';
import { ArrayElement } from '@douyinfe/semi-foundation/lib/cjs/utils/type';
import TooltipFoundation, { TooltipAdapter, Position } from '@douyinfe/semi-foundation/lib/cjs/tooltip/foundation';
import { strings } from '@douyinfe/semi-foundation/lib/cjs/tooltip/constants';
import '@douyinfe/semi-foundation/lib/cjs/tooltip/tooltip.css';
import BaseComponent, { BaseProps } from '../_base/baseComponent';
import { ContextValue } from '../configProvider/context';
export type Trigger = ArrayElement<typeof strings.TRIGGER_SET>;
export type { Position };
export interface ArrowBounding {
    offsetX?: number;
    offsetY?: number;
    width?: number;
    height?: number;
}
export interface RenderContentProps<T = HTMLElement> {
    initialFocusRef?: React.RefObject<T>;
}
export type RenderContent<T = HTMLElement> = (props: RenderContentProps<T>) => React.ReactNode;
export interface TooltipProps extends BaseProps {
    children?: React.ReactNode;
    motion?: boolean;
    autoAdjustOverflow?: boolean;
    position?: Position;
    getPopupContainer?: () => HTMLElement;
    mouseEnterDelay?: number;
    mouseLeaveDelay?: number;
    trigger?: Trigger;
    className?: string;
    clickToHide?: boolean;
    visible?: boolean;
    style?: React.CSSProperties;
    content?: React.ReactNode | RenderContent;
    prefixCls?: string;
    onVisibleChange?: (visible: boolean) => void;
    onClickOutSide?: (e: React.MouseEvent) => void;
    spacing?: number | {
        x: number;
        y: number;
    };
    margin?: number | {
        marginLeft: number;
        marginTop: number;
        marginRight: number;
        marginBottom: number;
    };
    showArrow?: boolean | React.ReactNode;
    zIndex?: number;
    rePosKey?: string | number;
    role?: string;
    arrowBounding?: ArrowBounding;
    transformFromCenter?: boolean;
    arrowPointAtCenter?: boolean;
    wrapWhenSpecial?: boolean;
    stopPropagation?: boolean;
    clickTriggerToHide?: boolean;
    wrapperClassName?: string;
    closeOnEsc?: boolean;
    guardFocus?: boolean;
    returnFocusOnClose?: boolean;
    onEscKeyDown?: (e: React.KeyboardEvent) => void;
    disableArrowKeyDown?: boolean;
    wrapperId?: string;
    preventScroll?: boolean;
    disableFocusListener?: boolean;
    afterClose?: () => void;
    keepDOM?: boolean;
}
interface TooltipState {
    visible: boolean;
    transitionState: string;
    triggerEventSet: {
        [key: string]: any;
    };
    portalEventSet: {
        [key: string]: any;
    };
    containerStyle: React.CSSProperties;
    isInsert: boolean;
    placement: Position;
    transitionStyle: Record<string, any>;
    isPositionUpdated: boolean;
    id: string;
    displayNone: boolean;
}
export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
    static contextType: React.Context<ContextValue>;
    static propTypes: {
        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        motion: PropTypes.Requireable<boolean>;
        autoAdjustOverflow: PropTypes.Requireable<boolean>;
        position: PropTypes.Requireable<"left" | "top" | "right" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver">;
        getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
        mouseEnterDelay: PropTypes.Requireable<number>;
        mouseLeaveDelay: PropTypes.Requireable<number>;
        trigger: PropTypes.Validator<NonNullable<"hover" | "focus" | "click" | "custom" | "contextMenu">>;
        className: PropTypes.Requireable<string>;
        wrapperClassName: PropTypes.Requireable<string>;
        clickToHide: PropTypes.Requireable<boolean>;
        clickTriggerToHide: PropTypes.Requireable<boolean>;
        visible: PropTypes.Requireable<boolean>;
        style: PropTypes.Requireable<object>;
        content: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
        prefixCls: PropTypes.Requireable<string>;
        onVisibleChange: PropTypes.Requireable<(...args: any[]) => any>;
        onClickOutSide: PropTypes.Requireable<(...args: any[]) => any>;
        spacing: PropTypes.Requireable<NonNullable<number | object>>;
        margin: PropTypes.Requireable<NonNullable<number | object>>;
        showArrow: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
        zIndex: PropTypes.Requireable<number>;
        rePosKey: PropTypes.Requireable<NonNullable<string | number>>;
        arrowBounding: PropTypes.Requireable<PropTypes.InferProps<{
            offsetX: PropTypes.Requireable<number>;
            offsetY: PropTypes.Requireable<number>;
            width: PropTypes.Requireable<number>;
            height: PropTypes.Requireable<number>;
        }>>;
        transformFromCenter: PropTypes.Requireable<boolean>;
        arrowPointAtCenter: PropTypes.Requireable<boolean>;
        stopPropagation: PropTypes.Requireable<boolean>;
        role: PropTypes.Requireable<string>;
        wrapWhenSpecial: PropTypes.Requireable<boolean>;
        guardFocus: PropTypes.Requireable<boolean>;
        returnFocusOnClose: PropTypes.Requireable<boolean>;
        preventScroll: PropTypes.Requireable<boolean>;
        keepDOM: PropTypes.Requireable<boolean>;
    };
    static __SemiComponentName__: string;
    static defaultProps: any;
    eventManager: Event;
    triggerEl: React.RefObject<unknown>;
    containerEl: React.RefObject<HTMLDivElement>;
    initialFocusRef: React.RefObject<HTMLElement>;
    clickOutsideHandler: any;
    resizeHandler: any;
    isWrapped: boolean;
    mounted: any;
    scrollHandler: any;
    getPopupContainer: () => HTMLElement;
    containerPosition: string;
    foundation: TooltipFoundation;
    context: ContextValue;
    isAnimating: boolean;
    constructor(props: TooltipProps);
    setContainerEl: (node: HTMLDivElement) => {
        current: HTMLDivElement;
    };
    get adapter(): TooltipAdapter<TooltipProps, TooltipState>;
    componentDidMount(): void;
    componentWillUnmount(): void;
    /**
     * focus on tooltip trigger
     */
    focusTrigger(): void;
    isSpecial: (elem: React.ReactNode | HTMLElement | any) => boolean | "disabled" | "loading";
    didLeave: () => void;
    /** for transition - end */
    rePosition(): Record<string, string | number>;
    componentDidUpdate(prevProps: TooltipProps, prevState: TooltipState): void;
    renderIcon: () => any;
    handlePortalInnerClick: (e: React.MouseEvent) => void;
    handlePortalMouseDown: (e: React.MouseEvent) => void;
    handlePortalFocus: (e: React.FocusEvent<HTMLElement>) => void;
    handlePortalBlur: (e: React.FocusEvent<HTMLElement>) => void;
    handlePortalInnerKeyDown: (e: React.KeyboardEvent) => void;
    renderContentNode: (content: TooltipProps['content']) => React.ReactNode;
    renderPortal: () => React.JSX.Element;
    wrapSpan: (elem: React.ReactNode | React.ReactElement) => React.JSX.Element;
    mergeEvents: (rawEvents: Record<string, any>, events: Record<string, any>) => {};
    getPopupId: () => string;
    render(): React.JSX.Element;
}