"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import { Portal } from "../portal/Portal.js";
import { useCSSTransition } from "../transition/useCSSTransition.js";
import { useEnsuredId } from "../useEnsuredId.js";
import { DEFAULT_TOOLTIP_CLASSNAMES, DEFAULT_TOOLTIP_POSITION, DEFAULT_TOOLTIP_TIMEOUT } from "./constants.js";
import { tooltip } from "./tooltipStyles.js";
/**
 * **Client Component**
 *
 * This is the base tooltip component that can only be used to render a tooltip
 * with an animation when the visibility changes. If this component is used, you
 * will need to manually add all the event listeners and triggers to change the
 * `visible` prop.
 *
 * @example
 * Simple Usage
 * ```tsx
 * import { Button, useTooltip, Tooltip } from "@react-md/core";
 *
 * function Example() {
 *   const { elementProps, tooltipProps } = useTooltip();
 *
 *   return (
 *     <>
 *       <Button {...elementProps}>Button</Button>
 *       <Tooltip {...tooltipProps}>
 *         Tooltip Content
 *       </Tooltip>
 *     </>
 *   );
 * }
 * ```
 */ export const Tooltip = /*#__PURE__*/ forwardRef(function Tooltip(props, nodeRef) {
    const { id: propId, dense, visible, children, appear, enter, exit, onEnter, onEntering, onEntered, onExit, onExiting, onExited, timeout = DEFAULT_TOOLTIP_TIMEOUT, classNames = DEFAULT_TOOLTIP_CLASSNAMES, className, position = DEFAULT_TOOLTIP_POSITION, temporary = true, exitedHidden = !temporary, textOverflow, disablePortal: propDisablePortal, ...remaining } = props;
    const id = useEnsuredId(propId, "tooltip");
    const { rendered, elementProps, disablePortal } = useCSSTransition({
        nodeRef,
        appear,
        enter,
        exit,
        transitionIn: visible,
        timeout,
        classNames,
        className: tooltip({
            dense,
            position,
            className,
            textOverflow
        }),
        onEnter,
        onEntering,
        onEntered,
        onExit,
        onExiting,
        onExited,
        temporary,
        exitedHidden,
        disablePortal: propDisablePortal
    });
    return /*#__PURE__*/ _jsx(Portal, {
        disabled: disablePortal,
        children: rendered && /*#__PURE__*/ _jsx("span", {
            ...remaining,
            ...elementProps,
            id: id,
            role: "tooltip",
            children: children
        })
    });
});

//# sourceMappingURL=Tooltip.js.map