import { Popover } from "@wordpress/components";
import { useEffect, useState } from "@wordpress/element";
import { getRandomId } from "@easy-accordion/controls";
import { PopOverToggleIcon } from "./icons";
import "./editor.scss";
// compound component.
const SpPopover = ({ children, label = "popover", toggleIcon = false, className = "" }) => {
const [open, setOpen] = useState(false);
const uniqueId = `${getRandomId("sp-eab")}popover`;
useEffect(() => {
const clickOutSite = (e) => {
const componentView = e.target.closest(".sp-eab-popover__content-visible");
const colorPicker = e.target.closest(".sp-eab-color-picker-renderer");
const buttonTarget = e.target.closest(`.sp-eab-popover-toggle-button.${uniqueId}`);
const select = e.target.closest(".css-1nmdiq5-menu");
if (open && !componentView && !buttonTarget && !select && !colorPicker) {
setOpen(false);
}
};
window.addEventListener("click", clickOutSite);
return () => window.removeEventListener("click", clickOutSite);
});
return (
{label && (
{label}
)}
{open && (
)}
{children}
;
SpPopover.Content = ({ children }) => {children}
;
export default SpPopover;