UNPKG

@ariakit/react-core

Version:

Ariakit React core

118 lines (115 loc) 3.84 kB
"use client"; import { useHovercardProviderContext } from "./7Z7JH52O.js"; import { useFocusable } from "./OE2EFRVA.js"; import { createElement, createHook, forwardRef } from "./VOQWLFSQ.js"; import { useBooleanEvent, useEvent, useIsMouseMoving, useMergeRefs } from "./5GGHRIN3.js"; import { __objRest, __spreadProps, __spreadValues } from "./3YLGPPWQ.js"; // src/hovercard/hovercard-anchor.tsx import { addGlobalEventListener } from "@ariakit/core/utils/events"; import { disabledFromProps, invariant } from "@ariakit/core/utils/misc"; import { useCallback, useEffect, useRef } from "react"; var TagName = "a"; var useHovercardAnchor = createHook( function useHovercardAnchor2(_a) { var _b = _a, { store, showOnHover = true } = _b, props = __objRest(_b, ["store", "showOnHover"]); const context = useHovercardProviderContext(); store = store || context; invariant( store, process.env.NODE_ENV !== "production" && "HovercardAnchor must receive a `store` prop or be wrapped in a HovercardProvider component." ); const disabled = disabledFromProps(props); const showTimeoutRef = useRef(0); useEffect(() => () => window.clearTimeout(showTimeoutRef.current), []); useEffect(() => { const onMouseLeave = (event) => { if (!store) return; const { anchorElement } = store.getState(); if (!anchorElement) return; if (event.target !== anchorElement) return; window.clearTimeout(showTimeoutRef.current); showTimeoutRef.current = 0; }; return addGlobalEventListener("mouseleave", onMouseLeave, true); }, [store]); const onMouseMoveProp = props.onMouseMove; const showOnHoverProp = useBooleanEvent(showOnHover); const isMouseMoving = useIsMouseMoving(); const onMouseMove = useEvent((event) => { onMouseMoveProp == null ? void 0 : onMouseMoveProp(event); if (disabled) return; if (!store) return; if (event.defaultPrevented) return; if (showTimeoutRef.current) return; if (!isMouseMoving()) return; if (!showOnHoverProp(event)) return; const element = event.currentTarget; store.setAnchorElement(element); store.setDisclosureElement(element); const { showTimeout, timeout } = store.getState(); const showHovercard = () => { showTimeoutRef.current = 0; if (!isMouseMoving()) return; store == null ? void 0 : store.setAnchorElement(element); store == null ? void 0 : store.show(); queueMicrotask(() => { store == null ? void 0 : store.setDisclosureElement(element); }); }; const timeoutMs = showTimeout != null ? showTimeout : timeout; if (timeoutMs === 0) { showHovercard(); } else { showTimeoutRef.current = window.setTimeout(showHovercard, timeoutMs); } }); const onClickProp = props.onClick; const onClick = useEvent((event) => { onClickProp == null ? void 0 : onClickProp(event); if (!store) return; window.clearTimeout(showTimeoutRef.current); showTimeoutRef.current = 0; }); const ref = useCallback( (element) => { if (!store) return; const { anchorElement } = store.getState(); if (anchorElement == null ? void 0 : anchorElement.isConnected) return; store.setAnchorElement(element); }, [store] ); props = __spreadProps(__spreadValues({}, props), { ref: useMergeRefs(ref, props.ref), onMouseMove, onClick }); props = useFocusable(props); return props; } ); var HovercardAnchor = forwardRef(function HovercardAnchor2(props) { const htmlProps = useHovercardAnchor(props); return createElement(TagName, htmlProps); }); export { useHovercardAnchor, HovercardAnchor };