@engie-group/fluid-design-system-react/lib/components/tooltip/NJTooltip.js

Fluid Design System React

import { jsx, jsxs } from 'react/jsx-runtime';
import { useHover, useFocus, useRole, useInteractions } from '../../node_modules/.pnpm/@floating-ui_react@0.27.3_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/@floating-ui/react/dist/floating-ui.react.js';
import React__default from 'react';
import { useStateControl } from '../../utils/hook.js';
import { NJPopoverAnchor } from '../popover/anchor/NJPopoverAnchor.js';
import { NJPopoverContent } from '../popover/content/NJPopoverContent.js';
import { usePopoverContext } from '../popover/NJPopoverContext.js';
import { NJPopoverInteractionContext } from '../popover/NJPopoverInteractionContext.js';
import { NJPopoverRoot } from '../popover/root/NJPopoverRoot.js';
import { NJTooltipContent } from './NJTooltipContent.js';
import { flip, shift, hide, offset } from '../../node_modules/.pnpm/@floating-ui_react-dom@2.1.6_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js';

const NJTooltip = React__default.forwardRef(({ className, children, offset: offsetOptions, hasArrow, isColorInverse, placement, text, arrowPlacement = 'center', displayed, initialDisplayed, onDisplay, displayDelay, hideDelay, ...htmlProps }, forwardedRef) => {
    const [isDisplayed, setIsDisplayed] = useStateControl(initialDisplayed, displayed);
    const onOpen = React__default.useCallback((opened) => {
        setIsDisplayed(opened);
        onDisplay?.(opened);
    }, [onDisplay]);
    return (jsx(NJPopoverRoot, { opened: isDisplayed, onOpen: onOpen, useFloatingOptions: {
            placement,
            middleware: [flip(), shift(), hide(), offset(offsetOptions ?? 4)]
        }, children: jsxs(TooltipFloatingInteractions, { displayDelay: displayDelay, hideDelay: hideDelay, children: [jsx(NJPopoverAnchor, { children: children }), jsx(NJPopoverContent, { children: jsx(NJTooltipContent, { hasArrow: hasArrow, isColorInverse: isColorInverse, arrowPlacement: arrowPlacement, ...htmlProps, ref: forwardedRef, className: className, children: text }) })] }) }));
});
NJTooltip.displayName = 'NJTooltip';
const TooltipFloatingInteractions = (props) => {
    const { context } = usePopoverContext();
    const hover = useHover(context, {
        delay: {
            open: props.displayDelay ?? 0,
            close: props.hideDelay ?? 0
        }
    });
    const focus = useFocus(context);
    const role = useRole(context, {
        role: 'tooltip'
    });
    const interactions = useInteractions([hover, focus, role]);
    return (jsx(NJPopoverInteractionContext.Provider, { value: interactions, children: props.children }));
};

export { NJTooltip };