More conversions...

packages/bbui/src/ActionMenu/ActionMenu.svelte

@@ -28,7 +28,7 @@
 </div>
 <Popover bind:this={dropdown} {anchor} align="left">
   <Menu>
-    <slot closeOnClick={closeOnClickWrapper} />
+    <slot open={show} closeOnClick={closeOnClickWrapper} />
   </Menu>
 </Popover>
 

packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte

@@ -32,8 +32,8 @@
   }
 </script>
 
-<ActionMenu bind:this={dropdown} let:closeOnClick >
-  <div slot="button" class="icon" on:click={dropdown.show}>
+<ActionMenu bind:this={dropdown} let:open let:closeOnClick >
+  <div slot="button" class="icon" on:click={open}>
     <Icon s hoverable name="MoreSmallList" />
   </div>
   <MenuItem icon="Delete" on:click={closeOnClick(confirmDeleteDialog.show)}>Delete</MenuItem>

packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte

@@ -12,11 +12,6 @@
     dropdown?.hide()
   }
 
-  function showModal() {
-    hideEditor()
-    confirmDeleteDialog.show()
-  }
-
   async function deleteQuery() {
     await queries.delete(query)
     notifications.success("Query deleted")
@@ -24,8 +19,8 @@
   }
 </script>
 
-<ActionMenu bind:this={dropdown} let:closeOnClick>
-  <div slot="button" class="icon" on:click={dropdown.show}>
+<ActionMenu bind:this={dropdown} let:open let:closeOnClick>
+  <div slot="button" class="icon" on:click={open}>
     <Icon s hoverable name="MoreSmallList" />
   </div>
   <MenuItem icon="Delete" on:click={closeOnClick(confirmDeleteDialog.show)}>Delete</MenuItem>

packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte

@@ -26,16 +26,6 @@
   let templateScreens
   let willBeDeleted
 
-  function showEditor() {
-    editorModal.show()
-    dropdown?.hide()
-  }
-
-  function hideEditor() {
-    editorModal.hide()
-    dropdown?.hide()
-  }
-
   function showDeleteModal() {
     const screens = $allScreens
     templateScreens = screens.filter(
@@ -44,7 +34,6 @@
     willBeDeleted = ["All table data"].concat(
       templateScreens.map((screen) => `Screen ${screen.props._instanceName}`)
     )
-    hideEditor()
     confirmDeleteDialog.show()
   }
 
@@ -57,13 +46,13 @@
     if (wasSelectedTable._id === table._id) {
       $goto("./table")
     }
-    hideEditor()
+    editorModal.hide()
   }
 
   async function save() {
     await tables.save(table)
     notifications.success("Table renamed successfully")
-    hideEditor()
+    editorModal.hide()
   }
 
   function checkValid(evt) {
@@ -75,12 +64,12 @@
   }
 </script>
 
-<ActionMenu bind:this={dropdown}>
-  <div slot="button" class="icon" on:click={dropdown.show}>
+<ActionMenu bind:this={dropdown} let:open let:closeOnClick>
+  <div slot="button" class="icon" on:click={open}>
     <Icon s hoverable name="MoreSmallList" />
   </div>
-  <MenuItem icon="Edit" on:click={showEditor}>Edit</MenuItem>
-  <MenuItem icon="Delete" on:click={showDeleteModal}>Delete</MenuItem>
+  <MenuItem icon="Edit" on:click={closeOnClick(editorModal.show)}>Edit</MenuItem>
+  <MenuItem icon="Delete" on:click={closeOnClick(showDeleteModal)}>Delete</MenuItem>
 </ActionMenu>
 
 <Modal bind:this={editorModal}>