@nex-ui/react/dist/cjs/components/tooltip/Tooltip.cjs

🎉 A beautiful, modern, and reliable React component library.

"use client";
'use strict';

var jsxRuntime = require('react/jsx-runtime');
var react = require('react');
var useDefaultProps = require('../utils/useDefaultProps.cjs');
var Popper = require('../popper/Popper.cjs');
var useStyles = require('../utils/useStyles.cjs');
var tooltip = require('../../theme/recipes/tooltip.cjs');
var useSlotClasses = require('../utils/useSlotClasses.cjs');
var useSlot = require('../utils/useSlot.cjs');
var PopperRoot = require('../popper/PopperRoot.cjs');
var PopperContent = require('../popper/PopperContent.cjs');
var PopperTrigger = require('../popper/PopperTrigger.cjs');
var PopperContext = require('../popper/PopperContext.cjs');

const slots = [
    'root',
    'content'
];
const useSlotAriaProps = (ownerState)=>{
    const id = react.useId();
    const rootId = ownerState.id ?? `nui-tooltip-${id}`;
    const { open } = PopperContext.usePopper();
    const { role = 'tooltip' } = ownerState;
    return react.useMemo(()=>{
        return {
            root: {
                role,
                id: rootId
            },
            trigger: {
                'aria-describedby': open ? rootId : undefined
            }
        };
    }, [
        open,
        rootId,
        role
    ]);
};
const TooltipRoot = (props)=>{
    const { children, content, classNames, slotProps, motionProps, interactive, closeOnClick, maxHeight, maxWidth = 360, color = 'default', size = 'md', radius = 'md', ...remainingProps } = props;
    const ownerState = {
        ...props,
        size,
        radius,
        color,
        interactive,
        closeOnClick
    };
    const slotAriaProps = useSlotAriaProps(ownerState);
    const styles = useStyles.useStyles({
        ownerState,
        name: 'Tooltip',
        recipe: tooltip.tooltipRecipe
    });
    const slotClasses = useSlotClasses.useSlotClasses({
        name: 'Tooltip',
        slots,
        classNames
    });
    const [TooltipRootRoot, getTooltipRootRootProps] = useSlot.useSlot({
        style: styles.root,
        elementType: PopperRoot.PopperRoot,
        classNames: slotClasses.root,
        shouldForwardComponent: false,
        externalForwardedProps: {
            ...remainingProps,
            ...motionProps
        },
        dataAttrs: {
            color,
            size,
            radius
        },
        a11y: slotAriaProps.root
    });
    const [TooltipRootContent, getTooltipRootContentProps] = useSlot.useSlot({
        style: styles.content,
        elementType: PopperContent.PopperContent,
        classNames: slotClasses.content,
        shouldForwardComponent: false,
        externalSlotProps: slotProps?.content,
        externalForwardedProps: {
            maxWidth,
            maxHeight
        }
    });
    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
        children: [
            /*#__PURE__*/ jsxRuntime.jsx(PopperTrigger.PopperTrigger, {
                interactive: interactive,
                closeOnClick: closeOnClick,
                action: "hover",
                elementProps: slotAriaProps.trigger,
                children: children
            }),
            /*#__PURE__*/ jsxRuntime.jsx(TooltipRootRoot, {
                ...getTooltipRootRootProps(),
                children: /*#__PURE__*/ jsxRuntime.jsx(TooltipRootContent, {
                    ...getTooltipRootContentProps(),
                    children: content
                })
            })
        ]
    });
};
const Tooltip = (inProps)=>{
    const props = useDefaultProps.useDefaultProps({
        name: 'Tooltip',
        props: inProps
    });
    const { children, content, open, onOpenChange, openDelay, closeDelay, defaultOpen, ...remainingProps } = props;
    if (content == null || content === '') {
        return children;
    }
    return /*#__PURE__*/ jsxRuntime.jsx(Popper.Popper, {
        open: open,
        onOpenChange: onOpenChange,
        openDelay: openDelay,
        closeDelay: closeDelay,
        defaultOpen: defaultOpen,
        children: /*#__PURE__*/ jsxRuntime.jsx(TooltipRoot, {
            content: content,
            ...remainingProps,
            children: children
        })
    });
};
Tooltip.displayName = 'Tooltip';
TooltipRoot.displayName = 'TooltipRoot';

exports.Tooltip = Tooltip;