@kadoui/react
Version:
Kadoui primitive components for React
52 lines (51 loc) • 1.82 kB
JavaScript
"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { usePathname } from "next/navigation";
import { useEffect, useRef, useState } from "react";
import { selectAccessibleChildren } from "../../utils";
import { PopoverContext } from "./PopoverContext";
export function PopoverRoot({ mode = "click", onMouseEnter, onMouseLeave, ...p }) {
const pathname = usePathname();
const [isOpen, setOpen] = useState(false);
const toggleRef = useRef(null);
const bodyRef = useRef(null);
useEffect(() => {
const closeHandler = () => {
setOpen(false);
};
window.addEventListener("click", closeHandler);
return () => window.removeEventListener("click", closeHandler);
}, []);
useEffect(() => {
setOpen(false);
}, [pathname]);
useEffect(() => {
if (isOpen) {
selectFirstMenuChild();
}
}, [isOpen]);
const selectFirstMenuChild = () => {
if (!bodyRef.current) {
return;
}
const children = selectAccessibleChildren(bodyRef.current);
const firstChild = children[0];
if (!firstChild) {
return;
}
firstChild.focus();
};
return (_jsx(PopoverContext, { value: { isOpen, setOpen, toggleRef, bodyRef, mode }, children: _jsx("div", { "data-state": isOpen, onMouseEnter: (ev) => {
onMouseEnter?.(ev);
if (["hover", "both"].includes(mode)) {
ev.stopPropagation();
setOpen(true);
}
}, onMouseLeave: (ev) => {
onMouseLeave?.(ev);
if (["hover", "both"].includes(mode)) {
ev.stopPropagation();
setOpen(false);
}
}, ...p }) }));
}