/* @oracle/oraclejet-preact: undefined */
import { jsx } from 'preact/jsx-runtime';
import { L as Layer } from './Layer-446bf21e.js';
import 'preact/compat';
import './LayerHost-e6402730.js';
import { F as Floating } from './Floating-f02677ba.js';
import { useRef, useState } from 'preact/hooks';
import { styles } from './hooks/PRIVATE_useDatatip/themes/useDatatip.css.js';
import { u as useId } from './useId-03dbfdf0.js';
import { D as DATATIP_OFFSET } from './datatipUtils-13ab34b7.js';
import { u as useVisHover } from './useVisHover-d7a0b2f3.js';
import { m as mergeProps } from './mergeProps-88ea8306.js';

/**
 * The hook to support custom datatip in visualization components.
 */
function useDatatip({ content, placement = 'top-end-corner', offset, borderColor, anchor, touchResponse, isDisabled }) {
    const uniqueIdRef = useRef(useId());
    const [coords, setCoords] = useState({ x: 0, y: 0 });
    const offsetValue = offset || { mainAxis: DATATIP_OFFSET, crossAxis: -1 * DATATIP_OFFSET };
    const [isVisible, setIsVisible] = useState(false);
    const targetRef = useRef(null);
    const toggleTimeoutRef = useRef();
    const onHover = (event) => {
        setCoords({ x: event.clientX, y: event.clientY });
        setIsVisible(true);
    };
    const onHoverEnter = (event, currentTarget) => {
        if (event.pointerType === 'touch' ||
            event.eventPhase === Event.AT_TARGET ||
            event.eventPhase === Event.BUBBLING_PHASE) {
            setCoords({ x: event.clientX, y: event.clientY });
            targetRef.current = currentTarget;
            setIsVisible(true);
        }
    };
    const onHoverLeave = () => {
        toggleTimeoutRef.current = setTimeout(() => {
            setIsVisible(false);
        }, 20);
    };
    const hoverHandlers = useVisHover(onHover, onHoverEnter, onHoverLeave, touchResponse);
    const onFocus = (event) => {
        if (event.eventPhase === Event.AT_TARGET || event.eventPhase === Event.BUBBLING_PHASE) {
            targetRef.current = event.target;
            setIsVisible(true);
        }
    };
    const onBlur = () => {
        setIsVisible(false);
    };
    const onContentPointerEnter = () => {
        clearTimeout(toggleTimeoutRef.current);
    };
    const onKeyUp = (event) => {
        if (event.code === 'ArrowUp' ||
            event.code === 'ArrowDown' ||
            event.code === 'ArrowRight' ||
            event.code === 'ArrowLeft' ||
            event.code === 'Tab') {
            setIsVisible(true);
        }
    };
    const onKeyDown = (event) => {
        if (event.code === 'Escape') {
            event.preventDefault();
            setIsVisible(false);
        }
    };
    const anchorRef = anchor === 'element' ? targetRef : { current: coords };
    const datatipContent = isVisible && !!content && !isDisabled ? (jsx(Layer, { children: jsx(Floating, { anchorRef: anchorRef, placement: placement, offsetValue: offsetValue, flipOptions: {
                crossAxis: anchor === 'pointer' ? true : false,
                mainAxis: anchor === 'pointer' ? true : false
            }, shiftOptions: { crossAxis: true, mainAxis: true }, children: jsx("div", { role: "tooltip", id: uniqueIdRef.current, className: styles.visDatatipStyle, style: { borderColor }, onPointerEnter: onContentPointerEnter, onPointerLeave: onHoverLeave, children: content }) }) })) : null;
    return {
        datatipContent,
        datatipProps: {
            'aria-describedby': datatipContent !== null ? uniqueIdRef.current : undefined,
            ...mergeProps(hoverHandlers, {
                onKeyUp,
                onKeyDown,
                onFocus,
                onBlur
            })
        }
    };
}

export { useDatatip as u };
//# sourceMappingURL=useDatatip-9635bc2f.js.map
