PettyUI/packages/core/src/components/hover-card/hover-card-trigger.tsx

import type { JSX } from "solid-js";
import { splitProps } from "solid-js";
import { useInternalHoverCardContext } from "./hover-card-context";

export interface HoverCardTriggerProps extends JSX.AnchorHTMLAttributes<HTMLAnchorElement> {
  children?: JSX.Element;
}

/**
 * Anchor element that triggers the HoverCard on pointer enter.
 * Renders as an `<a>` since hover cards are typically used on links.
 */
export function HoverCardTrigger(props: HoverCardTriggerProps): JSX.Element {
  const [local, rest] = splitProps(props, [
    "children",
    "onPointerEnter",
    "onPointerLeave",
    "onFocus",
    "onBlur",
  ]);
  const ctx = useInternalHoverCardContext();

  const handlePointerEnter: JSX.EventHandler<HTMLAnchorElement, PointerEvent> = (e) => {
    if (typeof local.onPointerEnter === "function") local.onPointerEnter(e);
    ctx.scheduleOpen();
  };

  const handlePointerLeave: JSX.EventHandler<HTMLAnchorElement, PointerEvent> = (e) => {
    if (typeof local.onPointerLeave === "function") local.onPointerLeave(e);
    ctx.scheduleClose();
  };

  const handleFocus: JSX.EventHandler<HTMLAnchorElement, FocusEvent> = (e) => {
    if (typeof local.onFocus === "function") local.onFocus(e);
    ctx.scheduleOpen();
  };

  const handleBlur: JSX.EventHandler<HTMLAnchorElement, FocusEvent> = (e) => {
    if (typeof local.onBlur === "function") local.onBlur(e);
    ctx.scheduleClose();
  };

  return (
    <a
      ref={(el) => ctx.setTriggerRef(el)}
      id={ctx.triggerId}
      data-state={ctx.isOpen() ? "open" : "closed"}
      onPointerEnter={handlePointerEnter}
      onPointerLeave={handlePointerLeave}
      onFocus={handleFocus}
      onBlur={handleBlur}
      {...rest}
    >
      {local.children}
    </a>
  );
}