@ozen-ui/kit/__inner__/cjs/components/Tooltip/Tooltip.js

React component library

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Tooltip = exports.cnTooltip = void 0;
var tslib_1 = require("tslib");
require("./Tooltip.css");
var react_1 = tslib_1.__importStar(require("react"));
var useBoolean_1 = require("../../hooks/useBoolean");
var useControlled_1 = require("../../hooks/useControlled");
var useDebounceCallback_1 = require("../../hooks/useDebounceCallback");
var useDeprecated_1 = require("../../hooks/useDeprecated");
var useMultiRef_1 = require("../../hooks/useMultiRef");
var useThemeProps_1 = require("../../hooks/useThemeProps");
var classname_1 = require("../../utils/classname");
var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
var Popover_1 = require("../Popover");
var constants_1 = require("./constants");
exports.cnTooltip = (0, classname_1.cn)('Tooltip');
exports.Tooltip = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
    var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'Tooltip' });
    var _a = props.trigger, trigger = _a === void 0 ? constants_1.TOOLTIP_DEFAULT_TRIGGER : _a, _b = props.size, size = _b === void 0 ? constants_1.TOOLTIP_DEFAULT_SIZE : _b, _c = props.offset, offset = _c === void 0 ? constants_1.TOOLTIP_DEFAULT_OFFSET : _c, _d = props.delayEnter, delayEnter = _d === void 0 ? constants_1.TOOLTIP_DEFAULT_DELAY_ENTER : _d, _e = props.delayLeave, delayLeave = _e === void 0 ? constants_1.TOOLTIP_DEFAULT_DELAY_LEAVE : _e, _f = props.arrow, arrow = _f === void 0 ? constants_1.TOOLTIP_DEFAULT_ARROW : _f, _g = props.shouldWrapChildren, shouldWrapChildren = _g === void 0 ? constants_1.TOOLTIP_DEFAULT_SHOULD_WRAP_CHILDREN : _g, _h = props.disabled, disabled = _h === void 0 ? constants_1.TOOLTIP_DEFAULT_DISABLED : _h, _j = props.inverse, inverse = _j === void 0 ? constants_1.TOOLTIP_DEFAULT_INVERSE : _j, _k = props.as, as = _k === void 0 ? constants_1.TOOLTIP_DEFAULT_TAG : _k, modifiersProp = props.modifiers, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, variant = props.variant, children = props.children, label = props.label, openProp = props.open, className = props.className, onOpen = props.onOpen, onClose = props.onClose, other = tslib_1.__rest(props, ["trigger", "size", "offset", "delayEnter", "delayLeave", "arrow", "shouldWrapChildren", "disabled", "inverse", "as", "modifiers", "onMouseEnter", "onMouseLeave", "variant", "children", "label", "open", "className", "onOpen", "onClose"]);
    (0, useDeprecated_1.useDeprecatedProperty)(!!variant, 'variant', 'inverse');
    var anchorRef = (0, react_1.useRef)(null);
    var _l = tslib_1.__read((0, react_1.useState)(), 2), delay = _l[0], setDelay = _l[1];
    var _m = tslib_1.__read((0, useBoolean_1.useBoolean)(), 2), focused = _m[0], setFocused = _m[1];
    var _o = tslib_1.__read((0, useBoolean_1.useBoolean)(), 2), hovered = _o[0], setHovered = _o[1];
    var modifiers = tslib_1.__spreadArray([
        {
            name: 'arrow',
            options: {
                padding: size === 'xs' ? 8 : 12,
            },
        }
    ], tslib_1.__read((modifiersProp || [])), false);
    var _p = tslib_1.__read((0, useControlled_1.useControlled)({
        value: openProp,
        defaultValue: false,
        name: 'Tooltip',
        state: 'open',
    }), 2), openState = _p[0], setOpenState = _p[1];
    var setOpen = function (open) {
        if (disabled && open)
            return;
        if (open)
            onOpen === null || onOpen === void 0 ? void 0 : onOpen();
        else
            onClose === null || onClose === void 0 ? void 0 : onClose();
        setOpenState(open);
    };
    var _q = tslib_1.__read((0, useDebounceCallback_1.useDebounceCallback)(setOpen, delay), 2), setOpenWithDelay = _q[0], clearTimeout = _q[1];
    var closeWithDelay = function () { return setOpenWithDelay(false); };
    (0, react_1.useEffect)(function () {
        setDelay(openState ? delayLeave : delayEnter);
    }, [openState, delayEnter, delayLeave]);
    (0, react_1.useEffect)(function () {
        if (!disabled)
            return;
        clearTimeout();
        if (openState)
            setOpen(false);
    }, [disabled, openState]);
    var resolveChildren = (0, react_1.useMemo)(function () {
        return typeof children !== 'object' || shouldWrapChildren ? (react_1.default.createElement("span", null, children)) : (children);
    }, [children, shouldWrapChildren]);
    var childrenProps = resolveChildren.props, childrenRef = resolveChildren.ref;
    var childrenMultiRef = (0, useMultiRef_1.useMultiRef)([anchorRef, childrenRef]);
    var handleMouseEnter = function (e) {
        if (trigger === 'hover' || trigger === 'hover&focus') {
            setHovered.on();
            setOpenWithDelay(true);
        }
        onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
    };
    var handleMouseLeave = function (e) {
        if (trigger === 'hover' || trigger === 'hover&focus') {
            setHovered.off();
            if (!focused)
                setOpenWithDelay(false);
        }
        onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
    };
    var handleClick = function () {
        if (trigger === 'click')
            setOpenWithDelay(!openState);
    };
    var handleFocus = function () {
        if (trigger === 'focus' || trigger === 'hover&focus') {
            setFocused.on();
            setOpenWithDelay(true);
        }
    };
    var handleBlur = function () {
        if (trigger === 'focus' || trigger === 'hover&focus') {
            setFocused.off();
            if (!hovered)
                setOpenWithDelay(false);
        }
    };
    var composeChildrenProps = (0, react_1.useMemo)(function () {
        var onClick = childrenProps.onClick, onFocus = childrenProps.onFocus, onBlur = childrenProps.onBlur, onMouseEnter = childrenProps.onMouseEnter, onMouseLeave = childrenProps.onMouseLeave;
        return {
            ref: childrenMultiRef,
            onClick: function (e) {
                handleClick();
                onClick === null || onClick === void 0 ? void 0 : onClick(e);
            },
            onFocus: function (e) {
                handleFocus();
                onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
            },
            onBlur: function (e) {
                handleBlur();
                onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
            },
            onMouseEnter: function (e) {
                handleMouseEnter(e);
                onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
            },
            onMouseLeave: function (e) {
                handleMouseLeave(e);
                onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
            },
        };
    }, [
        trigger,
        childrenProps,
        childrenMultiRef,
        handleMouseEnter,
        handleMouseLeave,
        handleClick,
        handleFocus,
        handleBlur,
    ]);
    return (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.cloneElement(resolveChildren, composeChildrenProps),
        react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ arrow: arrow, offset: offset, background: "main", strategy: "absolute", arrowProps: { size: size }, anchorRef: anchorRef, modifiers: modifiers, as: as, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, radius: size === 'xs' ? 's' : 'l' }, (inverse && { background: 'main-inverse' }), (variant === 'dark' && { background: 'main-inverse' }), { className: (0, exports.cnTooltip)({ size: size, variant: variant, inverse: inverse }, [className]), disableEnforceFocus: true, disableReturnFocus: true }, other, { open: openState, onClose: closeWithDelay, ref: ref }),
            react_1.default.createElement("div", { className: (0, exports.cnTooltip)('Content', { size: size, variant: variant, inverse: inverse }) }, label))));
});
exports.Tooltip.displayName = 'Tooltip';