Add ContextMenu component

[seancolsen]

Related to #930

Summary

• This PR adds a ContextMenu component to our component library.
• No changes to Mathesar.

Rationale

• I need this component to implement Add context menu to set cell value to NULL #930.

Notes

• In clickOffBounds.ts, I changed the event from click to pointerdown so that the event is triggered for context menu interactions as well. I did this to ensure that only one context menu would be open at a time, but it also changes the behavior of things like Dropdown and Select so that they close when the user right-clicks somewhere else. To me that seems slightly better. The pointerdown event is part of the Pointer Events API which has decent support, but not perfect. Some older versions of Safari don't support it. Personally, I think we're probably fine here, but if you have concerns about this approach, I can add multiple event listeners instead.

Demo

Usage

1. Add a context menu to a div like this

   <div>
     <p>Other stuff in this div</p>
     <ContextMenu>
       <MenuItem>Lorem Ipsum</MenuItem>
       <MenuItem>Dolor Emit</MenuItem>
     </ContextMenu>
   </div>

2. Clicking anywhere within the div will open the menu.

Checklist

• My pull request has a descriptive title (not a vague title like Update index.md).
• My pull request targets the master branch of the repository
• My commit messages follow best practices.
• My code follows the established code style of the repository.
• I added tests for the changes I made (if applicable).
• I added or updated documentation (if applicable).
• I tried running the project locally and verified that there are no visible errors.

Developer Certificate of Origin

Developer Certificate of Origin

Developer Certificate of Origin
Version 1.1

Copyright (C) 2004, 2006 The Linux Foundation and its contributors.
1 Letterman Drive
Suite D4700
San Francisco, CA, 94129

Everyone is permitted to copy and distribute verbatim copies of this
license document, but changing it is not allowed.


Developer's Certificate of Origin 1.1

By making a contribution to this project, I certify that:

(a) The contribution was created in whole or in part by me and I
    have the right to submit it under the open source license
    indicated in the file; or

(b) The contribution is based upon previous work that, to the best
    of my knowledge, is covered under an appropriate open source
    license and I have the right under that license to submit that
    work with modifications, whether created in whole or in part
    by me, under the same open source license (unless I am
    permitted to submit under a different license), as indicated
    in the file; or

(c) The contribution was provided directly to me by some other
    person who certified (a), (b) or (c) and I have not modified
    it.

(d) I understand and agree that this project and the contribution
    are public and that a record of the contribution (including all
    personal information I submit with it, including my sign-off) is
    maintained indefinitely and may be redistributed consistent with
    this project or the open source license(s) involved.

[codecov-commenter]

Codecov Report

Merging #1213 (249090e) into master (0269ad4) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master    #1213   +/-   ##
=======================================
  Coverage   93.39%   93.39%           
=======================================
  Files         113      113           
  Lines        4332     4332           
=======================================
  Hits         4046     4046           
  Misses        286      286           

Flag	Coverage Δ
pytest-backend	93.39% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 0269ad4...249090e. Read the comment docs.

[pavish]

@seancolsen Nice work! The component looks good to me.

I have a couple comments:

• Older versions of Safari do not support pointer events as you've mentioned on the PR description (Safari is the new Internet Explorer.. sigh). These older versions are only 2 years old (2019) and are still in considerable use. I'd suggest writing a mini polyfill, where we check if pointerdown is present and use it, and if not, we use mousedown (which is also supported by all touch devices, although certain devices may behave inconsistently).
• The styles in ContextMenu component should be marked global.

[seancolsen]

@pavish ready for re-review

writing a mini polyfill, where we check if pointerdown is present and use it, and if not, we use mousedown

Done in c7c83a2. I chose to also add a listener for the contextmenu event, because mousedown does not fire when right-clicking, at least in my testing. It would be nice to test these changes on an older version of Safari. My version of Gnome Web (that I use to simulate Safari) is new-enough that it has pointer events, so it's hard to properly test this polyfill. In particular, I'm interested to see if touch events work properly on an old iOS device. But maybe that's just something we can address if we get a bug report about it later. My assumption is that a "tap" (touch and release) fires a mousedown event (and other events too), in which case we're good. But I'm not certain.

The styles in ContextMenu component should be marked global.

Addressed in 449a244 by removing that CSS since it was actually redundant. I meant to take that out earlier. Thanks for catching that.

[pavish]

@seancolsen Looks good to me!