@yamada-ui/react/dist/esm/components/tooltip/use-tooltip.js

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


import { useUnmountEffect } from "../../utils/effect.js";
import { mergeRefs } from "../../utils/ref.js";
import { utils_exports } from "../../utils/index.js";
import { useDisclosure } from "../../hooks/use-disclosure/use-disclosure.js";
import { useEventListener } from "../../hooks/use-event-listener/index.js";
import { useOutsideClick } from "../../hooks/use-outside-click/index.js";
import { usePopper, usePopperProps } from "../../hooks/use-popper/index.js";
import { useCallback, useId, useRef } from "react";

//#region src/components/tooltip/use-tooltip.tsx
const useTooltip = (props = {}) => {
	const [popperProps, { closeDelay = 0, closeOnClick = true, closeOnEsc = true, closeOnScroll, defaultOpen, disabled, open: openProp, openDelay = 0, onClose: onCloseProp, onOpen: onOpenProp }] = usePopperProps(props, ["open"]);
	const describedbyId = useId();
	const triggerRef = useRef(null);
	const openTimeout = useRef(void 0);
	const closeTimeout = useRef(void 0);
	const { open, onClose, onOpen } = useDisclosure({
		defaultOpen,
		open: openProp,
		onClose: onCloseProp,
		onOpen: onOpenProp
	});
	const { getPopperProps, getReferenceProps } = usePopper({
		open,
		...popperProps
	});
	const onForceClose = useCallback(() => {
		if (closeTimeout.current) {
			clearTimeout(closeTimeout.current);
			closeTimeout.current = void 0;
		}
		onClose();
	}, [onClose]);
	const onDelayOpen = useCallback(() => {
		if (!disabled && !openTimeout.current) {
			if (open) onForceClose();
			openTimeout.current = (0, utils_exports.getWindow)(triggerRef.current).setTimeout(onOpen, openDelay);
		}
	}, [
		disabled,
		open,
		onForceClose,
		onOpen,
		openDelay
	]);
	const onDelayClose = useCallback(() => {
		if (openTimeout.current) {
			clearTimeout(openTimeout.current);
			openTimeout.current = void 0;
		}
		closeTimeout.current = (0, utils_exports.getWindow)(triggerRef.current).setTimeout(() => {
			onForceClose();
		}, closeDelay);
	}, [closeDelay, onForceClose]);
	useEventListener(() => (0, utils_exports.getDocument)(triggerRef.current), "keydown", ({ key }) => {
		if (closeOnEsc && key === "Escape") onDelayClose();
	});
	useEventListener(() => (0, utils_exports.getDocument)(triggerRef.current), "scroll", () => {
		if (open && closeOnScroll) onForceClose();
	});
	useOutsideClick({
		ref: triggerRef,
		enabled: open,
		handler: () => {
			onDelayClose();
		}
	});
	useUnmountEffect(() => {
		clearTimeout(openTimeout.current);
		clearTimeout(closeTimeout.current);
	});
	const getTriggerProps = useCallback(({ "aria-describedby": ariaDescribedby,...props$1 } = {}) => {
		return getReferenceProps({
			...props$1,
			ref: mergeRefs(props$1.ref, triggerRef),
			"aria-describedby": (0, utils_exports.cx)(ariaDescribedby, open ? describedbyId : void 0),
			onBlur: (0, utils_exports.handlerAll)(props$1.onBlur, onDelayClose),
			onClick: (0, utils_exports.handlerAll)(props$1.onClick, closeOnClick ? onDelayClose : void 0),
			onFocus: (0, utils_exports.handlerAll)(props$1.onFocus, onDelayOpen),
			onPointerEnter: (0, utils_exports.handlerAll)(props$1.onPointerEnter, (ev) => {
				if (ev.pointerType !== "touch") onDelayOpen();
			}),
			onPointerLeave: (0, utils_exports.handlerAll)(props$1.onPointerLeave, (ev) => {
				if (ev.pointerType !== "touch") onDelayClose();
			})
		});
	}, [
		getReferenceProps,
		describedbyId,
		onDelayOpen,
		open,
		closeOnClick,
		onDelayClose
	]);
	const getPositionerProps = useCallback((props$1) => {
		return getPopperProps(props$1);
	}, [getPopperProps]);
	return {
		open,
		getContentProps: useCallback((props$1 = {}) => ({
			id: describedbyId,
			"data-close": (0, utils_exports.dataAttr)(!open),
			"data-open": (0, utils_exports.dataAttr)(open),
			role: "tooltip",
			onPointerLeave: (0, utils_exports.handlerAll)(props$1.onPointerLeave, onDelayClose),
			...props$1
		}), [
			describedbyId,
			onDelayClose,
			open
		]),
		getPositionerProps,
		getTriggerProps,
		onClose: onForceClose,
		onDelayClose,
		onDelayOpen,
		onOpen
	};
};

//#endregion
export { useTooltip };
//# sourceMappingURL=use-tooltip.js.map