From d0c5e99558f274db8b45d0a12cfaac5458731d87 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Tue, 22 Mar 2022 09:17:54 -0400
Subject: [PATCH 1/5] Add ContextMenu component

---
 .../common/actions/popper.ts                  | 70 +++++++-------
 .../context-menu/ContextMenu.svelte           | 96 +++++++++++++++++++
 .../__meta__/ContextMenu.stories.svelte       | 64 +++++++++++++
 3 files changed, 196 insertions(+), 34 deletions(-)
 create mode 100644 mathesar_ui/src/component-library/context-menu/ContextMenu.svelte
 create mode 100644 mathesar_ui/src/component-library/context-menu/__meta__/ContextMenu.stories.svelte

diff --git a/mathesar_ui/src/component-library/common/actions/popper.ts b/mathesar_ui/src/component-library/common/actions/popper.ts
index ed92898192..956a95cc45 100644
--- a/mathesar_ui/src/component-library/common/actions/popper.ts
+++ b/mathesar_ui/src/component-library/common/actions/popper.ts
@@ -4,55 +4,57 @@ import type {
   ModifierArguments,
   Options,
   Instance,
+  VirtualElement,
 } from '@popperjs/core/lib/types';
 import type { Action } from './types';
 
 export default function popper(
   node: HTMLElement,
   actionOpts: {
-    reference: HTMLElement;
+    reference: VirtualElement;
     options?: Partial<Options>;
   },
 ): Action {
   let popperInstance: Instance;
   let prevReference: HTMLElement | undefined;
 
-  function create(reference: HTMLElement, options?: Partial<Options>) {
-    if (reference) {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-      popperInstance = createPopper(reference, node, {
-        placement: options?.placement || 'bottom-start',
-        modifiers: [
-          {
-            name: 'setMinWidth',
-            enabled: true,
-            phase: 'beforeWrite',
-            requires: ['computeStyles'],
-            // @ts-ignore: https://github.com/centerofci/mathesar/issues/1055
-            fn: (obj: ModifierArguments<unknown>): void => {
-              // eslint-disable-next-line no-param-reassign
-              obj.state.styles.popper.minWidth = `${obj.state.rects.reference.width}px`;
-            },
-            // @ts-ignore: https://github.com/centerofci/mathesar/issues/1055
-            effect: (obj: ModifierArguments<unknown>): void => {
-              const width = (obj.state.elements.reference as HTMLElement)
-                .offsetWidth;
-              // eslint-disable-next-line no-param-reassign
-              obj.state.elements.popper.style.minWidth = `${width}px`;
-            },
+  function create(reference?: VirtualElement, options?: Partial<Options>) {
+    if (!reference) {
+      return;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    popperInstance = createPopper(reference, node, {
+      placement: options?.placement || 'bottom-start',
+      modifiers: [
+        {
+          name: 'setMinWidth',
+          enabled: true,
+          phase: 'beforeWrite',
+          requires: ['computeStyles'],
+          // @ts-ignore: https://github.com/centerofci/mathesar/issues/1055
+          fn: (obj: ModifierArguments<unknown>): void => {
+            // eslint-disable-next-line no-param-reassign
+            obj.state.styles.popper.minWidth = `${obj.state.rects.reference.width}px`;
           },
-          {
-            name: 'flip',
+          // @ts-ignore: https://github.com/centerofci/mathesar/issues/1055
+          effect: (obj: ModifierArguments<unknown>): void => {
+            const width = (obj.state.elements.reference as HTMLElement)
+              .offsetWidth;
+            // eslint-disable-next-line no-param-reassign
+            obj.state.elements.popper.style.minWidth = `${width}px`;
           },
-          {
-            name: 'offset',
-            options: {
-              offset: [0, 0],
-            },
+        },
+        {
+          name: 'flip',
+        },
+        {
+          name: 'offset',
+          options: {
+            offset: [0, 0],
           },
-        ],
-      }) as Instance;
-    }
+        },
+      ],
+    }) as Instance;
   }
 
   function destroy() {
diff --git a/mathesar_ui/src/component-library/context-menu/ContextMenu.svelte b/mathesar_ui/src/component-library/context-menu/ContextMenu.svelte
new file mode 100644
index 0000000000..98b4cf6a6b
--- /dev/null
+++ b/mathesar_ui/src/component-library/context-menu/ContextMenu.svelte
@@ -0,0 +1,96 @@
+<script lang="ts">
+  import Menu from '@mathesar-component-library-dir/menu/Menu.svelte';
+  import popper from '@mathesar-component-library-dir/common/actions/popper';
+  import portal from '@mathesar-component-library-dir/common/actions/portal';
+  import clickOffBounds from '@mathesar-component-library-dir/common/actions/clickOffBounds';
+  import { onMount } from 'svelte';
+
+  /**
+   * A reference to the DOM node where we'll attach the contextmenu event
+   * listener. Right-clicking anywhere inside this element will open the context
+   * menu. If you don't pass an element, we'll use the parent element wherever
+   * this component is mounted.
+   */
+  let customTriggerElement: HTMLElement | undefined = undefined;
+  export { customTriggerElement as triggerElement };
+  export let closeOnInnerClick = true;
+
+  interface MousePosition {
+    x: number;
+    y: number;
+  }
+
+  let isVisible = false;
+  let element: HTMLDivElement | undefined;
+  let mousePosition: MousePosition = { x: 0, y: 0 };
+
+  function getVirtualReferenceElement(_mousePosition: MousePosition) {
+    const { x, y } = _mousePosition;
+    return {
+      getBoundingClientRect: () => ({
+        width: 0,
+        height: 0,
+        x,
+        y,
+        top: y,
+        right: x,
+        bottom: y,
+        left: x,
+        toJSON: () => ({ x, y }),
+      }),
+    };
+  }
+
+  function handleContextMenu(event: MouseEvent) {
+    event.preventDefault();
+    mousePosition = {
+      x: event.clientX,
+      y: event.clientY,
+    };
+    isVisible = !isVisible;
+  }
+
+  onMount(() => {
+    const triggerElement =
+      customTriggerElement ?? element?.parentElement ?? undefined;
+    if (!triggerElement) {
+      return () => {};
+    }
+    triggerElement.addEventListener('contextmenu', handleContextMenu);
+    return () => {
+      triggerElement.removeEventListener('contextmenu', handleContextMenu);
+    };
+  });
+
+  function close() {
+    isVisible = false;
+  }
+
+  function checkAndCloseOnInnerClick() {
+    if (closeOnInnerClick) {
+      close();
+    }
+  }
+</script>
+
+<div bind:this={element} class="context-menu-wrapper">
+  {#if isVisible}
+    <div
+      class="context-menu dropdown content"
+      use:clickOffBounds={{ callback: close }}
+      use:popper={{ reference: getVirtualReferenceElement(mousePosition) }}
+      use:portal
+      on:click={checkAndCloseOnInnerClick}
+    >
+      <Menu>
+        <slot />
+      </Menu>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .context-menu {
+    position: fixed;
+  }
+</style>
diff --git a/mathesar_ui/src/component-library/context-menu/__meta__/ContextMenu.stories.svelte b/mathesar_ui/src/component-library/context-menu/__meta__/ContextMenu.stories.svelte
new file mode 100644
index 0000000000..31a1d1a999
--- /dev/null
+++ b/mathesar_ui/src/component-library/context-menu/__meta__/ContextMenu.stories.svelte
@@ -0,0 +1,64 @@
+<script>
+  import { faFillDrip, faPlus } from '@fortawesome/free-solid-svg-icons';
+  import { Meta, Story } from '@storybook/addon-svelte-csf';
+  import MenuItem from '@mathesar-component-library-dir/menu/MenuItem.svelte';
+  import Checkbox from '@mathesar-component-library-dir/checkbox/Checkbox.svelte';
+  import ContextMenu from '../ContextMenu.svelte';
+
+  const meta = {
+    title: 'Components/ContextMenu',
+  };
+
+  let count = 0;
+  let hasBackground = true;
+
+  function incrementCount() {
+    count += 1;
+  }
+
+  function toggleBackground() {
+    hasBackground = !hasBackground;
+  }
+</script>
+
+<Meta {...meta} />
+
+<Story name="Basic">
+  <div class="box without-context">
+    <p>This box does <em>not</em> have a context menu.</p>
+  </div>
+
+  <div class="box with-context" class:has-background={hasBackground}>
+    <p>This box has a context menu.</p>
+    <p>The count is: <strong>{count}</strong>.</p>
+    <ContextMenu>
+      <MenuItem icon={{ data: faFillDrip }} on:click={toggleBackground}>
+        <Checkbox slot="control" checked={hasBackground} />
+        Use Background
+      </MenuItem>
+      <MenuItem icon={{ data: faPlus }} on:click={incrementCount}>
+        Increment Counter
+      </MenuItem>
+    </ContextMenu>
+  </div>
+
+  <div class="box without-context">
+    <p>This box does <em>not</em> have a context menu.</p>
+  </div>
+</Story>
+
+<style>
+  .box {
+    padding: 0 1em;
+    border: solid 0.1em #ccc;
+    border-radius: 0.5em;
+    margin: 1em 0;
+  }
+  .with-context.has-background {
+    background: rgb(220, 255, 199);
+  }
+
+  .without-context {
+    background: rgb(255, 220, 199);
+  }
+</style>

From 8dce98987810e8c4b2c2e081bee8c44f1559b277 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Tue, 22 Mar 2022 12:06:19 -0400
Subject: [PATCH 2/5] Add ContextMenu to index.ts

---
 mathesar_ui/src/component-library/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/mathesar_ui/src/component-library/index.ts b/mathesar_ui/src/component-library/index.ts
index 7d26293397..51f02a5e33 100644
--- a/mathesar_ui/src/component-library/index.ts
+++ b/mathesar_ui/src/component-library/index.ts
@@ -10,6 +10,7 @@ export { default as Button } from './button/Button.svelte';
 export { default as CancelOrProceedButtonPair } from './cancel-or-proceed-button-pair/CancelOrProceedButtonPair.svelte';
 export { default as Checkbox } from './checkbox/Checkbox.svelte';
 export { default as CheckboxGroup } from './checkbox-group/CheckboxGroup.svelte';
+export { default as ContextMenu } from './context-menu/ContextMenu.svelte';
 export { default as Help } from './help/Help.svelte';
 export { default as Icon } from './icon/Icon.svelte';
 export { InputGroup, InputGroupText } from './input-group';

From 8e89315034fa0caf5b0621d4f354ccdbd760c573 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Tue, 22 Mar 2022 13:59:00 -0400
Subject: [PATCH 3/5] Close old context menus on open new context menu

Make sure that multiple context menus can't be open at the same time.
---
 .../common/actions/clickOffBounds.ts                |  4 ++--
 .../__meta__/ContextMenu.stories.svelte             | 13 ++++++++++++-
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/mathesar_ui/src/component-library/common/actions/clickOffBounds.ts b/mathesar_ui/src/component-library/common/actions/clickOffBounds.ts
index 3cb3d27353..7c511b2a30 100644
--- a/mathesar_ui/src/component-library/common/actions/clickOffBounds.ts
+++ b/mathesar_ui/src/component-library/common/actions/clickOffBounds.ts
@@ -25,7 +25,7 @@ export default function clickOffBounds(
     }
   }
 
-  document.body.addEventListener('click', outOfBoundsListener, true);
+  document.body.addEventListener('pointerdown', outOfBoundsListener, true);
 
   function update(opts: Options) {
     callback = opts.callback;
@@ -33,7 +33,7 @@ export default function clickOffBounds(
   }
 
   function destroy() {
-    document.body.removeEventListener('click', outOfBoundsListener, true);
+    document.body.removeEventListener('pointerdown', outOfBoundsListener, true);
   }
 
   return {
diff --git a/mathesar_ui/src/component-library/context-menu/__meta__/ContextMenu.stories.svelte b/mathesar_ui/src/component-library/context-menu/__meta__/ContextMenu.stories.svelte
index 31a1d1a999..b380a47bcd 100644
--- a/mathesar_ui/src/component-library/context-menu/__meta__/ContextMenu.stories.svelte
+++ b/mathesar_ui/src/component-library/context-menu/__meta__/ContextMenu.stories.svelte
@@ -1,5 +1,9 @@
 <script>
-  import { faFillDrip, faPlus } from '@fortawesome/free-solid-svg-icons';
+  import {
+    faFillDrip,
+    faPlus,
+    faTimes,
+  } from '@fortawesome/free-solid-svg-icons';
   import { Meta, Story } from '@storybook/addon-svelte-csf';
   import MenuItem from '@mathesar-component-library-dir/menu/MenuItem.svelte';
   import Checkbox from '@mathesar-component-library-dir/checkbox/Checkbox.svelte';
@@ -42,6 +46,13 @@
     </ContextMenu>
   </div>
 
+  <div class="box with-context" has-background>
+    <p>This box <em>also</em> has a context menu.</p>
+    <ContextMenu>
+      <MenuItem icon={{ data: faTimes }}>I don't do anything</MenuItem>
+    </ContextMenu>
+  </div>
+
   <div class="box without-context">
     <p>This box does <em>not</em> have a context menu.</p>
   </div>

From 449a2440d7c0679b036537117ac2409915328004 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Thu, 24 Mar 2022 09:50:54 -0400
Subject: [PATCH 4/5] Remove CSS in ContextMenu component

It's not needed because we're already using `dropdown` and `content`
classes.
---
 .../src/component-library/context-menu/ContextMenu.svelte   | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/mathesar_ui/src/component-library/context-menu/ContextMenu.svelte b/mathesar_ui/src/component-library/context-menu/ContextMenu.svelte
index 98b4cf6a6b..60378b3b55 100644
--- a/mathesar_ui/src/component-library/context-menu/ContextMenu.svelte
+++ b/mathesar_ui/src/component-library/context-menu/ContextMenu.svelte
@@ -88,9 +88,3 @@
     </div>
   {/if}
 </div>
-
-<style>
-  .context-menu {
-    position: fixed;
-  }
-</style>

From c7c83a2dea8f33474db0aa60628262840953c33f Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Thu, 24 Mar 2022 10:56:41 -0400
Subject: [PATCH 5/5] Add rudamentary Pointer Event polyfill

---
 .../common/actions/clickOffBounds.ts          | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/mathesar_ui/src/component-library/common/actions/clickOffBounds.ts b/mathesar_ui/src/component-library/common/actions/clickOffBounds.ts
index 7c511b2a30..ba60df3d8f 100644
--- a/mathesar_ui/src/component-library/common/actions/clickOffBounds.ts
+++ b/mathesar_ui/src/component-library/common/actions/clickOffBounds.ts
@@ -25,7 +25,20 @@ export default function clickOffBounds(
     }
   }
 
-  document.body.addEventListener('pointerdown', outOfBoundsListener, true);
+  /**
+   * When the browser supports pointer events, we use the pointerdown event
+   * which is fired for all mouse buttons and touches. However, older Safari
+   * versions don't have pointer events, so we fallback to mouse events. Touches
+   * should fire a mousedown event too.
+   */
+  const events =
+    'onpointerdown' in document.body
+      ? ['pointerdown']
+      : ['mousedown', 'contextmenu'];
+
+  events.forEach((event) => {
+    document.body.addEventListener(event, outOfBoundsListener, true);
+  });
 
   function update(opts: Options) {
     callback = opts.callback;
@@ -33,7 +46,9 @@ export default function clickOffBounds(
   }
 
   function destroy() {
-    document.body.removeEventListener('pointerdown', outOfBoundsListener, true);
+    events.forEach((event) => {
+      document.body.removeEventListener(event, outOfBoundsListener, true);
+    });
   }
 
   return {