From 218699ddb8a8b674a2375538299cfcbaf786ebbf Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Tue, 21 Jul 2020 20:49:52 +0100
Subject: [PATCH] Screen dropdown manu uses bbui dropdown menu

---
 packages/builder/package.json                 |  2 +-
 .../userInterface/ScreenDropdownMenu.svelte   | 31 +++++++++----------
 2 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/packages/builder/package.json b/packages/builder/package.json
index d06aa4f834..b52ad611c0 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -55,7 +55,7 @@
     ]
   },
   "dependencies": {
-    "@budibase/bbui": "^1.15.8",
+    "@budibase/bbui": "^1.16.0",
     "@budibase/client": "^0.1.1",
     "@budibase/colorpicker": "^1.0.1",
     "@nx-js/compiler-util": "^2.0.0",
diff --git a/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte b/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte
index 9db14cefc5..f3cfbd0929 100644
--- a/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte
+++ b/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte
@@ -4,20 +4,14 @@
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import UIkit from "uikit"
   import api from "builderStore/api"
+  import Portal from "svelte-portal"
+  import { DropdownMenu } from "@budibase/bbui"
 
   export let screen
 
   let confirmDeleteDialog
-  let dropdownEl
-
-  $: dropdown = UIkit.dropdown(dropdownEl, {
-    mode: "click",
-    offset: 0,
-    pos: "bottom-right",
-    "delay-hide": 0,
-    animation: false,
-  })
-  $: dropdown && UIkit.util.on(dropdown, "shown", () => (hidden = false))
+  let dropdown
+  let buttonForDropdown
 
   const hideDropdown = () => {
     dropdown.hide()
@@ -42,15 +36,17 @@
 </script>
 
 <div class="root boundary" on:click|stopPropagation={() => {}}>
-  <button>
+  <button on:click={() => dropdown.show()} bind:this={buttonForDropdown}>
     <MoreIcon />
   </button>
-  <ul class="menu" bind:this={dropdownEl} on:click={hideDropdown}>
-    <li class="item" on:click={() => confirmDeleteDialog.show()}>
-      <i class="icon ri-delete-bin-2-line" />
-      Delete
-    </li>
-  </ul>
+  <DropdownMenu bind:this={dropdown} anchor={buttonForDropdown}>
+    <ul class="menu" on:click={hideDropdown}>
+      <li class="item" on:click={() => confirmDeleteDialog.show()}>
+        <i class="icon ri-delete-bin-2-line" />
+        Delete
+      </li>
+    </ul>
+  </DropdownMenu>
 </div>
 
 <ConfirmDialog
@@ -81,6 +77,7 @@
     overflow: visible;
     padding: 12px 0px;
     border-radius: 5px;
+    margin: 0;
   }
 
   .menu li {