Update all backend table popovers to use spectrum and fix multiple bugs

packages/bbui/src/Actions/click_outside.js

@@ -5,14 +5,14 @@ export default function clickOutside(element, callbackFunction) {
     }
   }
 
-  document.body.addEventListener("click", onClick, true)
+  document.body.addEventListener("mousedown", onClick, true)
 
   return {
     update(newCallbackFunction) {
       callbackFunction = newCallbackFunction
     },
     destroy() {
-      document.body.removeEventListener("click", onClick, true)
+      document.body.removeEventListener("mousedown", onClick, true)
     },
   }
 }

packages/bbui/src/Form/Core/Picker.svelte

@@ -4,6 +4,7 @@
   import "@spectrum-css/menu/dist/index-vars.css"
   import { fly } from "svelte/transition"
   import { createEventDispatcher } from "svelte"
+  import clickOutside from "../../Actions/click_outside"
 
   export let id = null
   export let disabled = false
@@ -20,7 +21,7 @@
   export let readonly = false
 
   const dispatch = createEventDispatcher()
-  const onClick = () => {
+  const onClick = e => {
     dispatch("click")
     if (readonly) {
       return
@@ -36,7 +37,7 @@
   class:is-invalid={!!error}
   class:is-open={open}
   aria-haspopup="listbox"
-  on:click={onClick}>
+  on:mousedown={onClick}>
   <span class="spectrum-Picker-label" class:is-placeholder={isPlaceholder}>
     {fieldText}
   </span>
@@ -57,8 +58,8 @@
   </svg>
 </button>
 {#if open}
-  <div class="overlay" on:mousedown|self={() => (open = false)} />
   <div
+    use:clickOutside={() => (open = false)}
     transition:fly={{ y: -20, duration: 200 }}
     class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open">
     <ul class="spectrum-Menu" role="listbox">
@@ -104,14 +105,6 @@
 {/if}
 
 <style>
-  .overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    z-index: 999;
-  }
   .spectrum-Popover {
     max-height: 240px;
     width: 100%;

packages/bbui/src/Modal/Modal.svelte

@@ -5,8 +5,9 @@
   import { fade, fly } from "svelte/transition"
   import Portal from "svelte-portal"
   import Context from "../context"
-  const dispatch = createEventDispatcher()
+  import clickOutside from "../Actions/click_outside"
 
+  const dispatch = createEventDispatcher()
   let visible = false
   $: dispatch(visible ? "show" : "hide")
 
@@ -45,13 +46,11 @@
 
 {#if visible}
   <Portal target=".modal-container">
-    <div
+    <div class="spectrum-Underlay is-open" transition:fade={{ duration: 200 }}>
-      class="spectrum-Underlay is-open"
+      <div class="modal-wrapper">
-      transition:fade={{ duration: 200 }}
+        <div class="modal-inner-wrapper">
-      on:mousedown|self={hide}>
-      <div class="modal-wrapper" on:mousedown|self={hide}>
-        <div class="modal-inner-wrapper" on:mousedown|self={hide}>
           <div
+            use:clickOutside={hide}
             use:focusFirstInput
             class="spectrum-Modal is-open"
             transition:fly={{ y: 30, duration: 200 }}>

packages/bbui/src/Popover/Popover.svelte

@@ -30,7 +30,6 @@
   <Portal>
     <div
       tabindex="0"
-      class:open
       use:positionDropdown={{ anchor, align }}
       use:clickOutside={hide}
       on:keydown={handleEscape}
@@ -39,30 +38,3 @@
     </div>
   </Portal>
 {/if}
-
-<style>
-  .menu-container {
-    position: fixed;
-    margin-top: var(--spacing-xs);
-    padding: var(--spacing-xl);
-    outline: none;
-    box-sizing: border-box;
-    opacity: 0;
-    min-width: 400px;
-    z-index: 2;
-    color: var(--ink);
-    height: fit-content !important;
-    border: var(--border-dark);
-    border-radius: var(--border-radius-m);
-    transform: scale(0);
-    transition: opacity 0.13s linear, transform 0.12s cubic-bezier(0, 0, 0.2, 1);
-    overflow-y: auto;
-    background-color: var(--background);
-    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
-  }
-
-  .open {
-    transform: scale(1);
-    opacity: 1;
-  }
-</style>

packages/builder/src/components/backend/DataTable/popovers/CreateViewPopover.svelte

@@ -35,7 +35,7 @@
   <Input label="View Name" thin bind:value={name} />
   <div class="footer">
     <Button secondary on:click={onClosed}>Cancel</Button>
-    <Button primary on:click={saveView}>Save View</Button>
+    <Button cta on:click={saveView}>Save View</Button>
   </div>
 </div>
 
@@ -48,6 +48,7 @@
   .actions {
     display: grid;
     grid-gap: var(--spacing-xl);
+    padding: var(--spacing-xl);
   }
 
   .footer {

packages/builder/src/components/backend/DataTable/popovers/ExportPopover.svelte

@@ -30,14 +30,15 @@
 
 <div class="popover">
   <h5>Export Data</h5>
-  <Select label="Format" secondary thin bind:value={exportFormat}>
+  <Select
-    {#each FORMATS as format}
+    label="Format"
-      <option value={format.key}>{format.name}</option>
+    bind:value={exportFormat}
-    {/each}
+    options={FORMATS}
-  </Select>
+    getOptionLabel={x => x.name}
+    getOptionValue={x => x.key} />
   <div class="footer">
     <Button secondary on:click={onClosed}>Cancel</Button>
-    <Button primary on:click={exportView}>Export</Button>
+    <Button cta on:click={exportView}>Export</Button>
   </div>
 </div>
 
@@ -45,6 +46,7 @@
   .popover {
     display: grid;
     grid-gap: var(--spacing-xl);
+    padding: var(--spacing-xl);
   }
 
   h5 {

packages/builder/src/components/backend/DataTable/popovers/ManageAccessPopover.svelte

@@ -2,6 +2,7 @@
   import { roles, permissions as permissionsStore } from "stores/backend"
   import { notifications } from "@budibase/bbui"
   import { Button, Label, Input, Select, Spacer } from "@budibase/bbui"
+  import { capitalise } from "../../../../helpers"
 
   export let resourceId
   export let permissions
@@ -34,16 +35,13 @@
     <Label extraSmall grey>Level</Label>
     <Label extraSmall grey>Role</Label>
     {#each Object.keys(permissions) as level}
-      <Input secondary thin value={level} disabled={true} />
+      <Input value={capitalise(level)} disabled />
       <Select
-        secondary
-        thin
         value={permissions[level]}
-        on:change={e => changePermission(level, e.target.value)}>
+        on:change={e => changePermission(level, e.detail)}
-        {#each $roles as role}
+        options={$roles}
-          <option value={role._id}>{role.name}</option>
+        getOptionLabel={x => x.name}
-        {/each}
+        getOptionValue={x => x._id} />
-      </Select>
     {/each}
   </div>
 
@@ -58,6 +56,7 @@
   .popover {
     display: grid;
     width: 400px;
+    padding: var(--spacing-xl);
   }
 
   h5 {

packages/builder/src/global.css

@@ -30,7 +30,7 @@ body {
 #app {
     height: 100%;
     box-sizing: border-box;
-    overflow-y: hidden;
+    overflow: hidden;
 }
 
 .hoverable:hover {