Switch out DropdownMenu to Popover across the builder

packages/bbui/src/ActionMenu/ActionMenu.svelte

@@ -1,5 +1,5 @@
 <script>
-    import DropdownMenu from '../DropdownMenu/DropdownMenu.svelte'
+    import Popover from '../Popover/Popover.svelte'
     import Menu from '../Menu/Menu.svelte'
     let anchor;
     let dropdown;
@@ -17,11 +17,11 @@
 <div class="contents" use:getAnchor  on:click={dropdown.show}>
     <slot name="button" />
 </div>
-<DropdownMenu bind:this={dropdown} {anchor} align="left">
+<Popover bind:this={dropdown} {anchor} align="left">
     <Menu>
         <slot />
     </Menu>
-</DropdownMenu>
+</Popover>
 
 <style>
     div {

packages/bbui/src/Popover/Popover.svelte

@@ -1,24 +1,27 @@
 <script>
+  import "@spectrum-css/popover/dist/index-vars.css"
   import Portal from "svelte-portal"
   import { createEventDispatcher } from "svelte"
   import positionDropdown from "../Actions/position_dropdown"
   import clickOutside from "../Actions/click_outside"
+
   const dispatch = createEventDispatcher()
 
   export let anchor
   export let align = "right"
-  let open = null
 
   export const show = () => {
+    dispatch("open")
     open = true
-    dispatch("show")
   }
 
   export const hide = () => {
+    dispatch("close")
     open = false
-    dispatch("hide")
   }
 
+  let open = null
+
   function handleEscape(e) {
     if (open && e.key === "Escape") {
       hide()
@@ -33,7 +36,8 @@
       use:positionDropdown={{ anchor, align }}
       use:clickOutside={hide}
       on:keydown={handleEscape}
-      class="spectrum-Popover is-open">
+      class="spectrum-Popover is-open"
+      role="presentation">
       <slot />
     </div>
   </Portal>

packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte

@@ -1,7 +1,7 @@
 <script>
   import { sortBy } from "lodash/fp"
   import { automationStore } from "builderStore"
-  import { ActionButton, DropdownMenu, Modal } from "@budibase/bbui"
+  import { ActionButton, Popover, Modal } from "@budibase/bbui"
   import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
   import CreateWebhookModal from "../Shared/CreateWebhookModal.svelte"
 
@@ -75,7 +75,7 @@
     </div>
   {/each}
 </div>
-<DropdownMenu
+<Popover
   on:close={() => (selectedIndex = null)}
   bind:this={popover}
   {anchor}
@@ -89,7 +89,7 @@
         on:click={() => addBlockToAutomation(stepId, blockDefinition)} />
     {/each}
   </DropdownContainer>
-</DropdownMenu>
+</Popover>
 <Modal bind:this={webhookModal} width="30%">
   <CreateWebhookModal />
 </Modal>

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

@@ -3,7 +3,7 @@
   import { automationStore } from "builderStore"
   import { database } from "stores/backend"
   import { notifications } from "@budibase/bbui"
-  import { DropdownMenu } from "@budibase/bbui"
+  import { Popover } from "@budibase/bbui"
   import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
 
@@ -33,14 +33,14 @@
   <div bind:this={anchor} class="icon" on:click={dropdown.show}>
     <i class="ri-more-line" />
   </div>
-  <DropdownMenu align="left" {anchor} bind:this={dropdown}>
+  <Popover align="left" {anchor} bind:this={dropdown}>
     <DropdownContainer>
       <DropdownItem
         icon="ri-delete-bin-line"
         title="Delete"
         on:click={showModal} />
     </DropdownContainer>
-  </DropdownMenu>
+  </Popover>
 </div>
 <ConfirmDialog
   bind:this={confirmDeleteDialog}

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

@@ -2,7 +2,7 @@
   import { goto } from "@roxi/routify"
   import { datasources } from "stores/backend"
   import { notifications } from "@budibase/bbui"
-  import { DropdownMenu } from "@budibase/bbui"
+  import { Popover } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
@@ -39,7 +39,7 @@
   <div bind:this={anchor} class="icon" on:click={dropdown.show}>
     <i class="ri-more-line" />
   </div>
-  <DropdownMenu align="left" {anchor} bind:this={dropdown}>
+  <Popover align="left" {anchor} bind:this={dropdown}>
     <DropdownContainer>
       <DropdownItem
         icon="ri-delete-bin-line"
@@ -47,7 +47,7 @@
         on:click={showModal}
         data-cy="delete-datasource" />
     </DropdownContainer>
-  </DropdownMenu>
+  </Popover>
 </div>
 <ConfirmDialog
   bind:this={confirmDeleteDialog}

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

@@ -1,6 +1,6 @@
 <script>
   import { notifications } from "@budibase/bbui"
-  import { DropdownMenu } from "@budibase/bbui"
+  import { Popover } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
@@ -30,7 +30,7 @@
   <div bind:this={anchor} class="icon" on:click={dropdown.show}>
     <i class="ri-more-line" />
   </div>
-  <DropdownMenu align="left" {anchor} bind:this={dropdown}>
+  <Popover align="left" {anchor} bind:this={dropdown}>
     <DropdownContainer>
       <DropdownItem
         icon="ri-delete-bin-line"
@@ -38,7 +38,7 @@
         on:click={showModal}
         data-cy="delete-datasource" />
     </DropdownContainer>
-  </DropdownMenu>
+  </Popover>
 </div>
 <ConfirmDialog
   bind:this={confirmDeleteDialog}

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

@@ -3,7 +3,7 @@
   import { store, allScreens } from "builderStore"
   import { tables } from "stores/backend"
   import { notifications } from "@budibase/bbui"
-  import { DropdownMenu, Button, Input } from "@budibase/bbui"
+  import { Popover, Button, Input } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
@@ -68,7 +68,7 @@
   <div bind:this={anchor} class="icon" on:click={dropdown.show}>
     <i class="ri-more-line" />
   </div>
-  <DropdownMenu align="left" {anchor} bind:this={dropdown}>
+  <Popover align="left" {anchor} bind:this={dropdown}>
     {#if editing}
       <div class="actions">
         <h5>Edit Table</h5>
@@ -97,7 +97,7 @@
           data-cy="delete-table" />
       </DropdownContainer>
     {/if}
-  </DropdownMenu>
+  </Popover>
 </div>
 <ConfirmDialog
   bind:this={confirmDeleteDialog}

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

@@ -2,7 +2,7 @@
   import { goto } from "@roxi/routify"
   import { views } from "stores/backend"
   import { notifications } from "@budibase/bbui"
-  import { DropdownMenu, Button, Input } from "@budibase/bbui"
+  import { Popover, Button, Input } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
@@ -50,7 +50,7 @@
   <div bind:this={anchor} class="icon" on:click={dropdown.show}>
     <i class="ri-more-line" />
   </div>
-  <DropdownMenu align="left" {anchor} bind:this={dropdown}>
+  <Popover align="left" {anchor} bind:this={dropdown}>
     {#if editing}
       <div class="actions">
         <h5>Edit View</h5>
@@ -74,7 +74,7 @@
           on:click={showDelete} />
       </DropdownContainer>
     {/if}
-  </DropdownMenu>
+  </Popover>
 </div>
 <ConfirmDialog
   bind:this={confirmDeleteDialog}

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

@@ -7,7 +7,7 @@
     currentAssetId,
   } from "builderStore"
   import structure from "./componentStructure.json"
-  import { DropdownMenu } from "@budibase/bbui"
+  import { Popover } from "@budibase/bbui"
   import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
   $: enrichedStructure = enrichStructure(structure, $store.components)
@@ -66,7 +66,7 @@
     </div>
   {/each}
 </div>
-<DropdownMenu
+<Popover
   on:close={() => (selectedIndex = null)}
   bind:this={popover}
   {anchor}
@@ -82,7 +82,7 @@
       {/if}
     {/each}
   </DropdownContainer>
-</DropdownMenu>
+</Popover>
 
 <style>
   .container {

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

@@ -3,7 +3,7 @@
   import { store, currentAsset } from "builderStore"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { findComponentParent } from "builderStore/storeUtils"
-  import { DropdownMenu } from "@budibase/bbui"
+  import { Popover } from "@budibase/bbui"
   import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
   export let component
@@ -74,7 +74,7 @@
 
 <div bind:this={anchor} on:click|stopPropagation>
   <div class="icon" on:click={dropdown.show}><i class="ri-more-line" /></div>
-  <DropdownMenu bind:this={dropdown} width="170px" {anchor} align="left">
+  <Popover bind:this={dropdown} width="170px" {anchor} align="left">
     <DropdownContainer on:click={hideDropdown}>
       <DropdownItem
         icon="ri-delete-bin-line"
@@ -117,7 +117,7 @@
         disabled={noPaste || noChildrenAllowed}
         on:click={() => pasteComponent('inside')} />
     </DropdownContainer>
-  </DropdownMenu>
+  </Popover>
 </div>
 <ConfirmDialog
   bind:this={confirmDeleteDialog}

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

@@ -1,9 +1,8 @@
 <script>
-  import { goto } from "@roxi/routify"
   import { store } from "builderStore"
   import { notifications } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { DropdownMenu, Modal, ModalContent, Input } from "@budibase/bbui"
+  import { Popover, Modal, ModalContent, Input } from "@budibase/bbui"
   import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
   import { cloneDeep } from "lodash/fp"
 
@@ -40,7 +39,7 @@
   <div class="icon" on:click={() => dropdown.show()}>
     <i class="ri-more-line" />
   </div>
-  <DropdownMenu bind:this={dropdown} {anchor} align="left">
+  <Popover bind:this={dropdown} {anchor} align="left">
     <DropdownContainer>
       <DropdownItem
         icon="ri-pencil-line"
@@ -51,7 +50,7 @@
         title="Delete"
         on:click={() => confirmDeleteDialog.show()} />
     </DropdownContainer>
-  </DropdownMenu>
+  </Popover>
 </div>
 <ConfirmDialog
   bind:this={confirmDeleteDialog}

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

@@ -3,7 +3,7 @@
   import { store, allScreens } from "builderStore"
   import { notifications } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { DropdownMenu, Modal, ModalContent } from "@budibase/bbui"
+  import { Popover } from "@budibase/bbui"
   import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
   export let screenId
@@ -31,14 +31,14 @@
   <div class="icon" on:click={() => dropdown.show()}>
     <i class="ri-more-line" />
   </div>
-  <DropdownMenu bind:this={dropdown} {anchor} align="left">
+  <Popover bind:this={dropdown} {anchor} align="left">
     <DropdownContainer>
       <DropdownItem
         icon="ri-delete-bin-line"
         title="Delete"
         on:click={() => confirmDeleteDialog.show()} />
     </DropdownContainer>
-  </DropdownMenu>
+  </Popover>
 </div>
 <ConfirmDialog
   bind:this={confirmDeleteDialog}

packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte

@@ -3,7 +3,7 @@
   import {
     Button,
     Icon,
-    DropdownMenu,
+    Popover,
     Divider,
     Select,
     Spacer,
@@ -135,7 +135,7 @@
     </Drawer>
   {/if}
 </div>
-<DropdownMenu bind:this={dropdownRight} anchor={anchorRight}>
+<Popover bind:this={dropdownRight} anchor={anchorRight}>
   <div class="dropdown">
     <div class="title">
       <Heading xs h3>Tables</Heading>
@@ -205,7 +205,7 @@
       </ul>
     {/if}
   </div>
-</DropdownMenu>
+</Popover>
 
 <style>
   .container {

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte

@@ -1,7 +1,7 @@
 <script>
   import { flip } from "svelte/animate"
   import { dndzone } from "svelte-dnd-action"
-  import { Button, DropdownMenu, Spacer } from "@budibase/bbui"
+  import { Button, Popover, Spacer } from "@budibase/bbui"
   import actionTypes from "./actions"
   import { generate } from "shortid"
 
@@ -77,7 +77,7 @@
         </Button>
         <Spacer small />
       </div>
-      <DropdownMenu
+      <Popover
         bind:this={addActionDropdown}
         anchor={addActionButton}
         align="right">
@@ -88,7 +88,7 @@
             </div>
           {/each}
         </div>
-      </DropdownMenu>
+      </Popover>
     </div>
 
     {#if actions && actions.length > 0}

packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte

@@ -8,7 +8,7 @@
 </script>
 
 <script>
-  import { DropdownMenu, Button, Input } from "@budibase/bbui"
+  import { Popover, Button, Input } from "@budibase/bbui"
   import { createEventDispatcher, tick } from "svelte"
 
   const dispatch = createEventDispatcher()
@@ -119,7 +119,7 @@
 <div bind:this={buttonAnchor}>
   <Button secondary small on:click={dropdown.show}>{displayValue}</Button>
 </div>
-<DropdownMenu
+<Popover
   bind:this={dropdown}
   on:open={setSelectedUI}
   anchor={buttonAnchor}>
@@ -187,7 +187,7 @@
       </div>
     {/if}
   </div>
-</DropdownMenu>
+</Popover>
 
 <style>
   .container {

packages/builder/src/components/settings/ThemeEditorDropdown.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Label, DropdownMenu } from "@budibase/bbui"
+  import { Label, Popover } from "@budibase/bbui"
   import ThemeEditor from "./ThemeEditor.svelte"
 
   let anchor
@@ -10,12 +10,12 @@
   <i class="ri-paint-fill" />
 </div>
 <div class="dropdown">
-  <DropdownMenu bind:this={popover} {anchor} align="right">
+  <Popover bind:this={popover} {anchor} align="right">
     <div class="content">
       <Label extraSmall grey>Theme</Label>
       <ThemeEditor />
     </div>
-  </DropdownMenu>
+  </Popover>
 </div>
 
 <style>