Add initial version of new modal (WIP)

packages/builder/src/App.svelte

@@ -1,10 +1,10 @@
 <script>
-  import Modal from "svelte-simple-modal"
   import { onMount } from "svelte"
   import { Router, basepath } from "@sveltech/routify"
   import { routes } from "../routify/routes"
-  import { store, initialise } from "builderStore"
+  import { initialise } from "builderStore"
   import NotificationDisplay from "components/common/Notification/NotificationDisplay.svelte"
+  import { ModalContainer } from "components/common/Modal"
 
   onMount(async () => {
     await initialise()
@@ -15,3 +15,4 @@
 
 <NotificationDisplay />
 <Router {routes} />
+<ModalContainer />

packages/builder/src/components/backend/DataTable/popovers/Row.svelte

@@ -1,6 +1,7 @@
 <script>
   import { DropdownMenu, TextButton as Button, Icon } from "@budibase/bbui"
   import CreateEditRecord from "./CreateEditRecord.svelte"
+  import { Modal } from "components/common/Modal"
 
   let anchor
   let dropdown
@@ -12,10 +13,10 @@
     Create New Row
   </Button>
 </div>
-<DropdownMenu bind:this={dropdown} {anchor} align="left">
+<Modal bind:this={dropdown}>
   <h5>Add New Row</h5>
   <CreateEditRecord onClosed={dropdown.hide} />
-</DropdownMenu>
+</Modal>
 
 <style>
   h5 {

packages/builder/src/components/common/Modal/Modal.svelte

@@ -0,0 +1,102 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+  import { fade, fly } from "svelte/transition"
+  import { portal } from "./portal"
+  const dispatch = createEventDispatcher()
+
+  export let visible = false
+  export let cancelText = "Cancel"
+  export let confirmText = "Confirm"
+  export let showCancelButton = true
+  export let showConfirmButton = true
+
+  export function show() {
+    console.log("show")
+    if (visible) {
+      return
+    }
+    visible = true
+    dispatch("show")
+  }
+
+  export function hide() {
+    if (!visible) {
+      return
+    }
+    visible = false
+    dispatch("hide")
+  }
+</script>
+
+{#if visible}
+  <div class="portal-wrapper" use:portal={'#modal-container'}>
+    <div
+      class="overlay"
+      on:click|self={hide}
+      transition:fade={{ duration: 200 }}>
+      <div
+        class="scroll-wrapper"
+        on:click|self={hide}
+        transition:fly={{ y: 100 }}>
+        <div class="content-wrapper" on:click|self={hide}>
+          <div class="content">
+            <slot />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .portal-wrapper {
+    display: none;
+  }
+
+  .overlay {
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(0, 0, 0, 0.25);
+    z-index: 999;
+  }
+
+  .scroll-wrapper {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: flex-start;
+    max-height: 100%;
+  }
+
+  .content-wrapper {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: flex-start;
+    width: 0;
+  }
+
+  .content {
+    background-color: white;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    box-shadow: 0 0 2.4rem 1.5rem rgba(0, 0, 0, 0.15);
+    position: relative;
+    flex: 0 0 400px;
+    margin: 2rem 0;
+    border-radius: var(--border-radius-m);
+  }
+</style>

packages/builder/src/components/common/Modal/ModalContainer.svelte

@@ -0,0 +1,9 @@
+<div id="modal-container" />
+
+<style>
+  #modal-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+  }
+</style>

packages/builder/src/components/common/Modal/index.js

@@ -0,0 +1,2 @@
+export { default as Modal } from "./Modal.svelte"
+export { default as ModalContainer } from "./ModalContainer.svelte"

packages/builder/src/components/common/Modal/portal.js

@@ -0,0 +1,14 @@
+export function portal(node, targetNodeOrSelector) {
+  const targetNode =
+    typeof targetNodeOrSelector == "string"
+      ? document.querySelector(targetNodeOrSelector)
+      : targetNodeOrSelector
+  const portalChildren = [...node.children]
+  targetNode.append(...portalChildren)
+
+  return {
+    destroy() {
+      for (const portalChild of portalChildren) portalChild.remove()
+    },
+  }
+}