Improve clickoutside to handle right clicks properly

packages/bbui/src/Actions/click_outside.js

@@ -15,6 +15,9 @@ let clickHandlers = []
  * Handle a body click event
  */
 const handleClick = event => {
+  // Treat right clicks (context menu events) as normal clicks
+  const eventType = event.type === "contextmenu" ? "click" : event.type
+
   // Ignore click if this is an ignored class
   if (event.target.closest('[data-ignore-click-outside="true"]')) {
     return
@@ -28,7 +31,7 @@ const handleClick = event => {
   // Process handlers
   clickHandlers.forEach(handler => {
     // Check that we're the right kind of click event
-    if (handler.allowedType && event.type !== handler.allowedType) {
+    if (handler.allowedType && eventType !== handler.allowedType) {
       return
     }
 
@@ -51,6 +54,7 @@ const handleClick = event => {
 }
 document.documentElement.addEventListener("click", handleClick, true)
 document.documentElement.addEventListener("mousedown", handleClick, true)
+document.documentElement.addEventListener("contextmenu", handleClick, true)
 
 /**
  * Adds or updates a click handler

packages/builder/src/components/backend/DataTable/TableDataTable.svelte

@@ -101,11 +101,10 @@
 
 <style>
   .wrapper {
-    flex: 0 0 400px;
+    flex: 0 0 100px;
     margin: -28px -40px -40px -40px;
     display: flex;
     flex-direction: column;
     background: var(--background);
-    overflow: hidden;
   }
 </style>

packages/frontend-core/src/components/grid/layout/NewColumnButton.svelte

@@ -1,6 +1,7 @@
 <script>
   import { getContext, onMount } from "svelte"
-  import { Icon, Popover, clickOutside } from "@budibase/bbui"
+  import { Icon } from "@budibase/bbui"
+  import GridPopover from "../overlays/GridPopover.svelte"
 
   const { visibleColumns, scroll, width, subscribe } = getContext("grid")
 
@@ -32,23 +33,18 @@
 >
   <Icon name="Add" />
 </div>
-<Popover
+{#if open}
-  bind:open
+  <GridPopover
-  {anchor}
+    {anchor}
-  align={$visibleColumns.length ? "right" : "left"}
+    align={$visibleColumns.length ? "right" : "left"}
-  offset={0}
+    on:close={close}
-  popoverTarget={document.getElementById(`add-column-button`)}
+    maxHeight={null}
-  customZindex={50}
->
-  <div
-    use:clickOutside={() => {
-      open = false
-    }}
-    class="content"
   >
-    <slot />
+    <div class="content">
-  </div>
+      <slot />
-</Popover>
+    </div>
+  </GridPopover>
+{/if}
 
 <style>
   .add {

packages/frontend-core/src/components/grid/overlays/GridPopover.svelte

@@ -13,6 +13,7 @@
   export let maxWidth = PopoverMaxWidth
   export let maxHeight = PopoverMaxHeight
   export let align = "left"
+  export let open = true
 
   const { gridID } = getContext("grid")
   const dispatch = createEventDispatcher()
@@ -35,7 +36,7 @@
 </script>
 
 <Popover
-  open
+  {open}
   {anchor}
   {align}
   portalTarget="#{gridID} .grid-popover-container"