@ariakit/react-core
Version:
Ariakit React core
118 lines (115 loc) • 3.84 kB
JavaScript
"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
};