@etsoo/materialui/lib/mjs/TooltipClick.js

TypeScript Material-UI Implementation

import { jsx as _jsx } from "react/jsx-runtime";
import { useDelayedExecutor } from "@etsoo/react";
import ClickAwayListener from "@mui/material/ClickAwayListener";
import Tooltip from "@mui/material/Tooltip";
import React from "react";
/**
 * Tooltip with click visibility
 * @param props Props
 * @returns Component
 */
export function TooltipClick(props) {
    // Destruct
    // leaveDelay set to 5 seconds to hide the tooltip automatically
    const { children, disableHoverListener = true, leaveDelay = 5000, onClose, title, ...rest } = props;
    // State
    const [localTitle, setTitle] = React.useState(title);
    const [open, setOpen] = React.useState(false);
    const delayed = leaveDelay > 0
        ? useDelayedExecutor(() => setOpen(false), leaveDelay)
        : undefined;
    // Callback for open the tooltip
    const openTooltip = (newTitle) => {
        setOpen(true);
        if (newTitle)
            setTitle(newTitle);
        delayed?.call();
    };
    React.useEffect(() => {
        return () => {
            delayed?.clear();
        };
    }, []);
    // Layout
    return (_jsx(ClickAwayListener, { onClickAway: () => setOpen(false), children: _jsx(Tooltip, { slotProps: {
                popper: {
                    disablePortal: true
                }
            }, onClose: (event) => {
                setOpen(false);
                if (onClose)
                    onClose(event);
            }, title: localTitle, open: open, disableFocusListener: true, disableTouchListener: true, disableHoverListener: disableHoverListener, onMouseOver: disableHoverListener ? undefined : () => setOpen(true), ...rest, children: children(openTooltip) }) }));
}