budibase/packages/bbui/src/ActionMenu/ActionMenu.svelte

<script>
  import { setContext } from "svelte"
  import Popover from "../Popover/Popover.svelte"
  import Menu from "../Menu/Menu.svelte"

  export let disabled = false

  let anchor
  let dropdown

  // This is needed because display: contents is considered "invisible".
  // It should only ever be an action button, so should be fine.
  function getAnchor(node) {
    anchor = node.firstChild
  }

  export const hide = () => {
    dropdown.hide()
  }
  export const show = () => {
    dropdown.show()
  }

  const openMenu = () => {
    if (!disabled) show()
  }

  setContext("actionMenu", { show, hide })
</script>

<div class="contents" use:getAnchor on:click={openMenu}>
  <slot name="button" />
</div>
<Popover bind:this={dropdown} {anchor} align="left">
  <Menu>
    <slot />
  </Menu>
</Popover>

<style>
  div {
    display: contents;
  }
</style>