Create Context menu component

[aspirisen]

It would be nice to have a context menu component in react-aria-components, something like https://react-spectrum.adobe.com/react-aria/Menu.html but without trigger and with position coords.
For generic purpose maybe it should be called - float menu

Example of context menu in another library: https://szhsin.github.io/react-menu#context-menu

[snowystinger]

Thanks for the feedback. If I recall correctly, we've stayed away from implementing this ourselves because it's not an accessible interaction. It's really only available to mouse users.

I think you could implement this using any overlay library you like, and put our listbox inside it.

We may add this some day, but I don't think it's going to be a priority for us.

[aspirisen]

Got it, thanks. I was able to use react-aria-components menu by zero size button with absolute coords from click event. In general it works, even menu positioning works, but feels a bit hacky.

[vovsemenv]

There is the minimal code to repriodue behavour that you want

import { useRef, useState } from "react";
import { Menu, MenuItem, Popover } from "react-aria-components";

export const ComponentWitContextMenu = () => {
  const [menuPosition, setMenuPosition] = useState<{ x: number; y: number } | null>(null);
  const menuPositionRef = useRef<HTMLDivElement>(null);

  return (
    <div
      onContextMenu={(ev) => {
        if ((ev.target as HTMLElement).getAttribute("aria-hidden")) {
          return;
        }

        ev.preventDefault();
        setMenuPosition({ x: ev.pageX, y: ev.pageY });
      }}
    >
      <div
        style={{
          height: "100px",
          width: "100%",
          backgroundColor: "green",
        }}
      />

      <div
        ref={menuPositionRef}
        style={{
          position: "fixed",
          top: menuPosition?.y,
          left: menuPosition?.x,
        }}
        data-pressed={!!menuPosition || undefined}
      >
        <Popover
          triggerRef={menuPositionRef}
          isOpen={!!menuPosition}
          onOpenChange={(isOpen) => {
            if (!isOpen) {
              setMenuPosition(null);
            }
          }}
          placement="bottom left"
          offset={0}
        >
          <Menu
            aria-label="item-context-menu"
            onClose={() => {
              setMenuPosition(null);
            }}
          >
            <MenuItem>Item 1</MenuItem>
            <MenuItem>Item 3</MenuItem>
          </Menu>
        </Popover>
      </div>
    </div>
  );
};