element-call/src/PopoverMenu.jsx

import React, { useRef } from "react";
import styles from "./PopoverMenu.module.css";
import { useMenuTriggerState } from "@react-stately/menu";
import { useMenuTrigger } from "@react-aria/menu";
import { OverlayContainer, useOverlayPosition } from "@react-aria/overlays";
import classNames from "classnames";
import { Popover } from "./Popover";

export function PopoverMenuTrigger({
  children,
  placement,
  className,
  disableOnState,
  ...rest
}) {
  const popoverMenuState = useMenuTriggerState(rest);
  const buttonRef = useRef();
  const { menuTriggerProps, menuProps } = useMenuTrigger(
    {},
    popoverMenuState,
    buttonRef
  );

  const popoverRef = useRef();

  const { overlayProps } = useOverlayPosition({
    targetRef: buttonRef,
    overlayRef: popoverRef,
    placement: placement || "top",
    offset: 5,
    isOpen: popoverMenuState.isOpen,
  });

  if (
    !Array.isArray(children) ||
    children.length > 2 ||
    typeof children[1] !== "function"
  ) {
    throw new Error(
      "PopoverMenu must have two props. The first being a button and the second being a render prop."
    );
  }

  const [popoverTrigger, popoverMenu] = children;

  return (
    <div className={classNames(styles.popoverMenuTrigger, className)}>
      <popoverTrigger.type
        {...popoverTrigger.props}
        {...menuTriggerProps}
        on={!disableOnState && popoverMenuState.isOpen}
        ref={buttonRef}
      />
      {popoverMenuState.isOpen && (
        <OverlayContainer>
          <Popover
            {...overlayProps}
            isOpen={popoverMenuState.isOpen}
            onClose={popoverMenuState.close}
            ref={popoverRef}
          >
            {popoverMenu({
              ...menuProps,
              autoFocus: popoverMenuState.focusStrategy,
              onClose: popoverMenuState.close,
            })}
          </Popover>
        </OverlayContainer>
      )}
    </div>
  );
}