Bump BBUI version

packages/builder/package.json

@@ -63,7 +63,7 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^1.40.1",
+    "@budibase/bbui": "^1.41.0",
     "@budibase/client": "^0.1.25",
     "@budibase/colorpicker": "^1.0.1",
     "@fortawesome/fontawesome-free": "^5.14.0",

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

@@ -1,217 +0,0 @@
-<script>
-  /**
-   * Confirmation is handled as a callback rather than an event to allow
-   * handling the result - meaning a parent can prevent the modal closing.
-   *
-   * A show/hide API is exposed as part of the modal and also via context for
-   * children inside the modal.
-   * "show" and "hide" events are emitted as visibility changes.
-   *
-   * Modals are rendered at the top of the DOM tree.
-   */
-  import { createEventDispatcher, setContext } from "svelte"
-  import { fade, fly } from "svelte/transition"
-  import Portal from "svelte-portal"
-  import { Button } from "@budibase/bbui"
-  import { ContextKey } from "./context"
-  const dispatch = createEventDispatcher()
-
-  export let wide = false
-  export let padded = true
-  export let title = undefined
-  export let cancelText = "Cancel"
-  export let confirmText = "Confirm"
-  export let showCancelButton = true
-  export let showConfirmButton = true
-  export let onConfirm = () => {}
-  export let visible = false
-  export let loading = false
-
-  let confirmLoading = false
-  $: disabled = loading || confirmLoading || $$restProps.disabled
-
-  function show() {
-    if (visible) {
-      return
-    }
-    visible = true
-    dispatch("show")
-  }
-
-  function hide() {
-    if (!visible) {
-      return
-    }
-    visible = false
-    dispatch("hide")
-  }
-
-  async function confirm() {
-    loading = true
-    if (!onConfirm || (await onConfirm()) !== false) {
-      hide()
-    }
-    loading = false
-  }
-
-  setContext(ContextKey, { show, hide })
-</script>
-
-{#if visible}
-  <Portal target="#modal-container">
-    <div
-      class="overlay"
-      on:click|self={hide}
-      transition:fade={{ duration: 200 }}>
-      <div
-        class="scroll-wrapper"
-        on:click|self={hide}
-        transition:fly={{ y: 50 }}>
-        <div class="content-wrapper" on:click|self={hide}>
-          <div class="modal" class:wide class:padded>
-            {#if title}
-              <header>
-                <h5>{title}</h5>
-                <div class="header-content">
-                  <slot name="header" />
-                </div>
-              </header>
-            {/if}
-            <slot />
-            {#if showCancelButton || showConfirmButton}
-              <footer>
-                <div class="footer-content">
-                  <slot name="footer" />
-                </div>
-                <div class="buttons">
-                  {#if showCancelButton}
-                    <Button secondary on:click={hide}>{cancelText}</Button>
-                  {/if}
-                  {#if showConfirmButton}
-                    <Button
-                      primary
-                      {...$$restProps}
-                      {disabled}
-                      on:click={confirm}>
-                      {confirmText}
-                    </Button>
-                  {/if}
-                </div>
-              </footer>
-            {/if}
-            <i class="ri-close-line" on:click={hide} />
-          </div>
-        </div>
-      </div>
-    </div>
-  </Portal>
-{/if}
-
-<style>
-  .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);
-  }
-
-  .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;
-  }
-
-  .modal {
-    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);
-    gap: var(--spacing-xl);
-  }
-  .modal.wide {
-    flex: 0 0 600px;
-  }
-  .modal.padded {
-    padding: var(--spacing-xl);
-  }
-
-  header {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    margin-right: 40px;
-  }
-  header h5 {
-    margin: 0;
-    font-weight: 500;
-  }
-
-  .header-content {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: center;
-  }
-
-  i {
-    position: absolute;
-    top: var(--spacing-xl);
-    right: var(--spacing-xl);
-    color: var(--ink);
-    font-size: var(--font-size-xl);
-  }
-  i:hover {
-    color: var(--grey-6);
-    cursor: pointer;
-  }
-
-  footer {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    gap: var(--spacing-m);
-  }
-
-  .footer-content {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-  }
-
-  .buttons {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: center;
-    gap: var(--spacing-m);
-  }
-</style>

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

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

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

@@ -1 +0,0 @@
-export const ContextKey = "budibase-modal"

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

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

packages/builder/src/components/userInterface/NewScreenModal.svelte

@@ -3,13 +3,10 @@
   import { pipe } from "components/common/core"
   import { isRootComponent } from "./pagesParsing/searchComponents"
   import { splitName } from "./pagesParsing/splitRootComponentName.js"
-  import { Input, Select, Button, Spacer } from "@budibase/bbui"
+  import { Input, Select, Button, Spacer, ModalContent } from "@budibase/bbui"
-  import { Modal } from "components/common/Modal"
   import { find, filter, some, map, includes } from "lodash/fp"
   import { assign } from "lodash"
 
-  export let visible
-
   let dialog
   let layoutComponents
   let layoutComponent
@@ -60,11 +57,7 @@
   }
 </script>
 
-<Modal
+<ModalContent title="New Screen" confirmText="Create Screen" onConfirm={save}>
-  bind:visible
-  title="New Screen"
-  confirmText="Create Screen"
-  onConfirm={save}>
   <Input label="Name" bind:value={name} />
   <Input
     label="Url"
@@ -76,4 +69,4 @@
       <option value={_component}>{name}</option>
     {/each}
   </Select>
-</Modal>
+</ModalContent>

packages/builder/yarn.lock

@@ -709,13 +709,14 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
-"@budibase/bbui@^1.40.1":
+"@budibase/bbui@^1.41.0":
-  version "1.40.1"
+  version "1.41.0"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.40.1.tgz#7ebfd52b4da822312d3395447a4f73caa41f8014"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.41.0.tgz#cb239db3071a4a6c6f0ef48ddde55f5eab9808ce"
-  integrity sha512-0t5Makyn5jOURKZIQPvd+8G4m6ps4GyfLUkAz5rKJSnAQSAgLiuZ+RihcEReDEJK8tnfW7h2echJTffJduQRRQ==
+  integrity sha512-pT5u6HDdXcylWgSE1TBt3jETg92GwgAXpUsBVqX+OUE/2lNbmThb8egAckpemHDvm91FAL0nApQYpV7c/qLzvw==
   dependencies:
     sirv-cli "^0.4.6"
     svelte-flatpickr "^2.4.0"
+    svelte-portal "^1.0.0"
 
 "@budibase/colorpicker@^1.0.1":
   version "1.0.1"
@@ -5844,6 +5845,11 @@ svelte-portal@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/svelte-portal/-/svelte-portal-0.1.0.tgz#cc2821cc84b05ed5814e0218dcdfcbebc53c1742"
 
+svelte-portal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/svelte-portal/-/svelte-portal-1.0.0.tgz#36a47c5578b1a4d9b4dc60fa32a904640ec4cdd3"
+  integrity sha512-nHf+DS/jZ6jjnZSleBMSaZua9JlG5rZv9lOGKgJuaZStfevtjIlUJrkLc3vbV8QdBvPPVmvcjTlazAzfKu0v3Q==
+
 svelte@^3.24.1:
   version "3.25.1"
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.25.1.tgz#218def1243fea5a97af6eb60f5e232315bb57ac4"

packages/standard-components/package.json

@@ -36,7 +36,7 @@
   "gitHead": "284cceb9b703c38566c6e6363c022f79a08d5691",
   "dependencies": {
     "@beyonk/svelte-googlemaps": "^2.2.0",
-    "@budibase/bbui": "^1.40.1",
+    "@budibase/bbui": "^1.41.0",
     "@fortawesome/fontawesome-free": "^5.14.0",
     "britecharts": "^2.16.1",
     "d3-selection": "^1.4.2",