rework ActionMenu and add noClose prop to MenuItem

packages/bbui/src/ActionMenu/ActionMenu.svelte

@@ -1,8 +1,9 @@
 <script>
+  import { setContext } from "svelte"
   import Popover from "../Popover/Popover.svelte"
   import Menu from "../Menu/Menu.svelte"
 
-  export let supressOpen = false
+  export let disabled = false
 
   let anchor
   let dropdown
@@ -20,18 +21,19 @@
     dropdown.show()
   }
 
-  const closeOnClickWrapper = (cb) => {
-    dropdown.hide()
-    cb()
+  const openMenu = () => {
+    if (!disabled) show()
   }
+
+  setContext("actionMenu", { show, hide })
 </script>
 
-<div class="contents" use:getAnchor>
+<div class="contents" use:getAnchor on:click={openMenu}>
   <slot name="button" />
 </div>
 <Popover bind:this={dropdown} {anchor} align="left">
   <Menu>
-    <slot open={show} closeOnClick={closeOnClickWrapper} />
+    <slot />
   </Menu>
 </Popover>
 

packages/bbui/src/Menu/Item.svelte

@@ -1,12 +1,25 @@
 <script>
+  import { createEventDispatcher, getContext } from "svelte"
+
+  const dispatch = createEventDispatcher()
+  const actionMenu = getContext("actionMenu")
+
   export let dataCy
   export let icon = undefined
   export let disabled = undefined
+  export let noClose = false
+
+  const onClick = () => {
+    if (actionMenu && !noClose) {
+      actionMenu.hide()
+    }
+    dispatch("click")
+  }
 </script>
 
 <li
   data-cy={dataCy}
-  on:click|preventDefault
+  on:click|preventDefault={onClick}
   class="spectrum-Menu-item"
   class:is-disabled={disabled}
   role="menuitem"

packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte

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

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

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

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

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

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

@@ -60,13 +60,13 @@
   }
 </script>
 
-<ActionMenu let:open let:closeOnClick>
-  <div slot="button" class="icon" on:click={open}>
+<ActionMenu>
+  <div slot="button" class="icon">
     <Icon s hoverable name="MoreSmallList" />
   </div>
-  <MenuItem icon="Edit" on:click={closeOnClick(editorModal.show)}>Edit</MenuItem
+  <MenuItem icon="Edit" on:click={editorModal.show}>Edit</MenuItem
   >
-  <MenuItem icon="Delete" on:click={closeOnClick(showDeleteModal)}
+  <MenuItem icon="Delete" on:click={showDeleteModal}
     >Delete</MenuItem
   >
 </ActionMenu>

packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte

@@ -1,7 +1,6 @@
 <script>
-  import { ActionMenu, ActionGroup, ActionButton, MenuItem, Icon } from "@budibase/bbui"
+  import { ActionMenu, ActionGroup, ActionButton, MenuItem } from "@budibase/bbui"
   import { store, currentAssetName } from "builderStore"
-import { iterateeAry } from "lodash/fp/_mapping"
   import structure from "./componentStructure.json"
 
   $: enrichedStructure = enrichStructure(structure, $store.components)
@@ -37,7 +36,6 @@ import { iterateeAry } from "lodash/fp/_mapping"
     if (item.isCategory) {
       // Select and open this category
       selectedIndex = idx
-      open()
     } else {
       // Add this component
       await store.actions.components.create(item.component)
@@ -47,8 +45,8 @@ import { iterateeAry } from "lodash/fp/_mapping"
 
 <ActionGroup>
   {#each enrichedStructure as item, idx}
-    <ActionMenu supressOpen={item.isCategory} let:open let:closeOnClick>
-      <ActionButton icon={item.icon} xs primary quiet slot="button" on:click={() => onItemChosen(item, idx, open)}>
+    <ActionMenu disabled={!item.isCategory}>
+      <ActionButton icon={item.icon} xs primary quiet slot="button" on:click={() => onItemChosen(item, idx)}>
         {item.name}
       </ActionButton>
       {#each item.children || [] as item}
@@ -56,7 +54,7 @@ import { iterateeAry } from "lodash/fp/_mapping"
           <MenuItem
             dataCy={`component-${item.name}`}
             icon={item.icon}
-            on:click={closeOnClick(onItemChosen(item))}>
+            on:click={() => onItemChosen(item)}>
             {item.name}
           </MenuItem>
         {/if}

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

@@ -66,36 +66,36 @@
   }
 </script>
 
-<ActionMenu let:closeOnClick let:open>
-  <div slot="button" class="icon" on:click={open}>
+<ActionMenu>
+  <div slot="button" class="icon">
     <Icon s hoverable name="MoreSmallList" />
   </div>
-  <MenuItem icon="Delete" on:click={closeOnClick(confirmDeleteDialog.show)}
+  <MenuItem icon="Delete" on:click={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 noClose icon="ChevronUp" on:click={moveUpComponent}>Move up</MenuItem>
+  <MenuItem noClose icon="ChevronDown" on:click={moveDownComponent}>Move down</MenuItem>
+  <MenuItem noClose icon="Duplicate" on:click={duplicateComponent}>Duplicate</MenuItem>
   <MenuItem
     icon="Cut"
-    on:click={closeOnClick(() => storeComponentForCopy(true))}>Cut</MenuItem
+    on:click={() => storeComponentForCopy(true)}>Cut</MenuItem
   >
   <MenuItem icon="Copy" on:click={() => storeComponentForCopy(false)}
     >Copy</MenuItem
   >
   <MenuItem
     icon="LayersBringToFront"
-    on:click={closeOnClick(() => pasteComponent("above"))}
+    on:click={() => pasteComponent("above")}
     disabled={noPaste}>Paste above</MenuItem
   >
   <MenuItem
     icon="LayersSendToBack"
-    on:click={closeOnClick(() => pasteComponent("below"))}
+    on:click={() => pasteComponent("below")}
     disabled={noPaste}>Paste below</MenuItem
   >
   <MenuItem
     icon="ShowOneLayer"
-    on:click={closeOnClick(() => pasteComponent("inside"))}
+    on:click={() => pasteComponent("inside")}
     disabled={noPaste || noChildrenAllowed}>Paste inside</MenuItem
   >
 </ActionMenu>

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

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

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

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