ActionMenu API improvements

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

@@ -4,22 +4,11 @@
   import { notifications } from "@budibase/bbui"
   import { ActionMenu, MenuItem, Icon, Popover } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
   export let datasource
 
-  let dropdown
   let confirmDeleteDialog
 
-  function hideEditor() {
-    dropdown?.hide()
-  }
-
-  function showModal() {
-    hideEditor()
-    confirmDeleteDialog.show()
-  }
-
   async function deleteDatasource() {
     const wasSelectedSource = $datasources.selected
     await datasources.delete(datasource)
@@ -28,11 +17,10 @@
     if (wasSelectedSource === datasource._id) {
       $goto("./datasource")
     }
-    hideEditor()
   }
 </script>
 
-<ActionMenu bind:this={dropdown} let:open let:closeOnClick >
+<ActionMenu let:open let:closeOnClick >
   <div slot="button" class="icon" on:click={open}>
     <Icon s hoverable name="MoreSmallList" />
   </div>

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

@@ -9,17 +9,13 @@
     Icon,
     Modal,
     ModalContent,
-    Popover,
-    Button,
     Input,
   } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
 
   export let table
 
-  let anchor
   let editorModal
-  let dropdown
   let confirmDeleteDialog
   let error = ""
   let originalName = table.name
@@ -64,20 +60,24 @@
   }
 </script>
 
-<ActionMenu bind:this={dropdown} let:open let:closeOnClick>
+<ActionMenu let:open let:closeOnClick>
   <div slot="button" class="icon" on:click={open}>
     <Icon s hoverable name="MoreSmallList" />
   </div>
-  <MenuItem icon="Edit" on:click={closeOnClick(editorModal.show)}>Edit</MenuItem>
-  <MenuItem icon="Delete" on:click={closeOnClick(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}>
   <ModalContent
-    title='Edit Table'
-    confirmText='Save'
+    title="Edit Table"
+    confirmText="Save"
     onConfirm={save}
-    disabled={table.name === originalName || error}>
+    disabled={table.name === originalName || error}
+  >
     <Input
       label="Table Name"
       thin

packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte

@@ -3,23 +3,17 @@
   import { store, currentAsset } from "builderStore"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { findComponentParent } from "builderStore/storeUtils"
-  import { ActionMenu, MenuItem, MenuSection, Icon, Popover } from "@budibase/bbui"
-  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
+  import { ActionMenu, MenuItem, Icon } from "@budibase/bbui"
 
   export let component
 
   let confirmDeleteDialog
-  let dropdown
   let anchor
 
   $: definition = store.actions.components.getDefinition(component?._component)
   $: noChildrenAllowed = !component || !definition?.hasChildren
   $: noPaste = !$store.componentToPaste
 
-  const hideDropdown = () => {
-    dropdown.hide()
-  }
-
   const moveUpComponent = () => {
     const asset = get(currentAsset)
     const parent = findComponentParent(asset.props, component._id)
@@ -72,19 +66,38 @@
   }
 </script>
 
-<ActionMenu bind:this={dropdown}>
-  <div slot="button" class="icon" on:click={dropdown.show}>
+<ActionMenu let:closeOnClick let:open>
+  <div slot="button" class="icon" on:click={open}>
     <Icon s hoverable name="MoreSmallList" />
   </div>
-  <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
+  <MenuItem icon="Delete" on:click={closeOnClick(confirmDeleteDialog.show)}
+    >Delete</MenuItem
+  >
   <MenuItem icon="ChevronUp" on:click={moveUpComponent}>Move up</MenuItem>
   <MenuItem icon="ChevronDown" on:click={moveDownComponent}>Move down</MenuItem>
   <MenuItem icon="Duplicate" on:click={duplicateComponent}>Duplicate</MenuItem>
-  <MenuItem icon="Cut" on:click={() => storeComponentForCopy(true)}>Cut</MenuItem>
-  <MenuItem icon="Copy" on:click={() => storeComponentForCopy(false)}>Copy</MenuItem>
-  <MenuItem icon="LayersBringToFront" on:click={() => pasteComponent("above")} disabled={noPaste}>Paste above</MenuItem>
-  <MenuItem icon="LayersSendToBack" on:click={() => pasteComponent("below")} disabled={noPaste}>Paste below</MenuItem>
-  <MenuItem icon="ShowOneLayer" on:click={() => pasteComponent("inside")} disabled={noPaste || noChildrenAllowed}>Paste inside</MenuItem>
+  <MenuItem
+    icon="Cut"
+    on:click={closeOnClick(() => storeComponentForCopy(true))}>Cut</MenuItem
+  >
+  <MenuItem icon="Copy" on:click={() => storeComponentForCopy(false)}
+    >Copy</MenuItem
+  >
+  <MenuItem
+    icon="LayersBringToFront"
+    on:click={closeOnClick(() => pasteComponent("above"))}
+    disabled={noPaste}>Paste above</MenuItem
+  >
+  <MenuItem
+    icon="LayersSendToBack"
+    on:click={closeOnClick(() => pasteComponent("below"))}
+    disabled={noPaste}>Paste below</MenuItem
+  >
+  <MenuItem
+    icon="ShowOneLayer"
+    on:click={closeOnClick(() => pasteComponent("inside"))}
+    disabled={noPaste || noChildrenAllowed}>Paste inside</MenuItem
+  >
 </ActionMenu>
 <ConfirmDialog
   bind:this={confirmDeleteDialog}

packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/LayoutDropdownMenu.svelte

@@ -2,15 +2,20 @@
   import { store } from "builderStore"
   import { notifications } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { ActionMenu, MenuItem, Icon, Modal, ModalContent, Input } from "@budibase/bbui"
+  import {
+    ActionMenu,
+    MenuItem,
+    Icon,
+    Modal,
+    ModalContent,
+    Input,
+  } from "@budibase/bbui"
   import { cloneDeep } from "lodash/fp"
 
   export let layout
 
   let confirmDeleteDialog
   let editLayoutNameModal
-  let dropdown
-  let anchor
   let name = layout.name
 
   const deleteLayout = async () => {
@@ -34,12 +39,16 @@
   }
 </script>
 
-<ActionMenu bind:this={dropdown} let:closeOnClick>
-  <div slot="button" class="icon" on:click={dropdown.show}>
+<ActionMenu let:open let:closeOnClick>
+  <div slot="button" class="icon" on:click={open}>
     <Icon s hoverable name="MoreSmallList" />
   </div>
-  <MenuItem icon="Edit" on:click={closeOnClick(editLayoutNameModal.show)}>Edit</MenuItem>
-  <MenuItem icon="Delete" on:click={closeOnClick(confirmDeleteDialog.show)}>Delete</MenuItem>
+  <MenuItem icon="Edit" on:click={closeOnClick(editLayoutNameModal.show)}
+    >Edit</MenuItem
+  >
+  <MenuItem icon="Delete" on:click={closeOnClick(confirmDeleteDialog.show)}
+    >Delete</MenuItem
+  >
 </ActionMenu>
 
 <ConfirmDialog