@budibase/bbui 2.9.33-alpha.2 → 2.9.34

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "2.9.33-alpha.2",
+  "version": "2.9.34",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
@@ -38,8 +38,8 @@
   ],
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "1.2.1",
-    "@budibase/shared-core": "2.9.33-alpha.2",
-    "@budibase/string-templates": "2.9.33-alpha.2",
+    "@budibase/shared-core": "2.9.34",
+    "@budibase/string-templates": "2.9.34",
     "@spectrum-css/accordion": "3.0.24",
     "@spectrum-css/actionbutton": "1.0.1",
     "@spectrum-css/actiongroup": "1.0.1",
@@ -106,5 +106,5 @@
       }
     }
   },
-  "gitHead": "b7243d86d2b0c7871ba08bef072fe964d90662c5"
+  "gitHead": "b3c41ab2f3bf614f68b3de7b0e5ad16f08fc38a9"
 }

package/src/Actions/position_dropdown.js

@@ -17,7 +17,6 @@ export default function positionDropdown(element, opts) {
       maxWidth,
       useAnchorWidth,
       offset = 5,
-      customUpdate,
     } = opts
     if (!anchor) {
       return
@@ -34,41 +33,33 @@ export default function positionDropdown(element, opts) {
       top: null,
     }
 
-    if (typeof customUpdate === "function") {
-      styles = customUpdate(anchorBounds, elementBounds, styles)
+    // Determine vertical styles
+    if (align === "right-outside") {
+      styles.top = anchorBounds.top
+    } else if (window.innerHeight - anchorBounds.bottom < 100) {
+      styles.top = anchorBounds.top - elementBounds.height - offset
+      styles.maxHeight = maxHeight || 240
     } else {
-      // Determine vertical styles
-      if (align === "right-outside") {
-        styles.top = anchorBounds.top
-      } else if (
-        window.innerHeight - anchorBounds.bottom <
-        (maxHeight || 100)
-      ) {
-        styles.top = anchorBounds.top - elementBounds.height - offset
-        styles.maxHeight = maxHeight || 240
-      } else {
-        styles.top = anchorBounds.bottom + offset
-        styles.maxHeight =
-          maxHeight || window.innerHeight - anchorBounds.bottom - 20
-      }
+      styles.top = anchorBounds.bottom + offset
+      styles.maxHeight =
+        maxHeight || window.innerHeight - anchorBounds.bottom - 20
+    }
 
-      // Determine horizontal styles
-      if (!maxWidth && useAnchorWidth) {
-        styles.maxWidth = anchorBounds.width
-      }
-      if (useAnchorWidth) {
-        styles.minWidth = anchorBounds.width
-      }
-      if (align === "right") {
-        styles.left =
-          anchorBounds.left + anchorBounds.width - elementBounds.width
-      } else if (align === "right-outside") {
-        styles.left = anchorBounds.right + offset
-      } else if (align === "left-outside") {
-        styles.left = anchorBounds.left - elementBounds.width - offset
-      } else {
-        styles.left = anchorBounds.left
-      }
+    // Determine horizontal styles
+    if (!maxWidth && useAnchorWidth) {
+      styles.maxWidth = anchorBounds.width
+    }
+    if (useAnchorWidth) {
+      styles.minWidth = anchorBounds.width
+    }
+    if (align === "right") {
+      styles.left = anchorBounds.left + anchorBounds.width - elementBounds.width
+    } else if (align === "right-outside") {
+      styles.left = anchorBounds.right + offset
+    } else if (align === "left-outside") {
+      styles.left = anchorBounds.left - elementBounds.width - offset
+    } else {
+      styles.left = anchorBounds.left
     }
 
     // Apply styles

package/src/ColorPicker/ColorPicker.svelte

@@ -1,8 +1,8 @@
 <script>
-  import Popover from "../Popover/Popover.svelte"
-  import Layout from "../Layout/Layout.svelte"
   import { createEventDispatcher } from "svelte"
   import "@spectrum-css/popover/dist/index-vars.css"
+  import clickOutside from "../Actions/click_outside"
+  import { fly } from "svelte/transition"
   import Icon from "../Icon/Icon.svelte"
   import Input from "../Form/Input.svelte"
   import { capitalise } from "../helpers"
@@ -10,11 +10,9 @@
   export let value
   export let size = "M"
   export let spectrumTheme
-  export let offset
-  export let align
+  export let alignRight = false
 
-  let dropdown
-  let preview
+  let open = false
 
   $: customValue = getCustomValue(value)
   $: checkColor = getCheckColor(value)
@@ -84,7 +82,7 @@
 
   const onChange = value => {
     dispatch("change", value)
-    dropdown.hide()
+    open = false
   }
 
   const getCustomValue = value => {
@@ -121,25 +119,30 @@
 
     return "var(--spectrum-global-color-static-gray-900)"
   }
-</script>
 
-<div
-  bind:this={preview}
-  class="preview size--{size || 'M'}"
-  on:click={() => {
-    dropdown.toggle()
-  }}
->
-  <div
-    class="fill {spectrumTheme || ''}"
-    style={value ? `background: ${value};` : ""}
-    class:placeholder={!value}
-  />
-</div>
+  const handleOutsideClick = event => {
+    if (open) {
+      event.stopPropagation()
+      open = false
+    }
+  }
+</script>
 
-<Popover bind:this={dropdown} anchor={preview} maxHeight={320} {offset} {align}>
-  <Layout paddingX="XL" paddingY="L">
-    <div class="container">
+<div class="container">
+  <div class="preview size--{size || 'M'}" on:click={() => (open = true)}>
+    <div
+      class="fill {spectrumTheme || ''}"
+      style={value ? `background: ${value};` : ""}
+      class:placeholder={!value}
+    />
+  </div>
+  {#if open}
+    <div
+      use:clickOutside={handleOutsideClick}
+      transition:fly|local={{ y: -20, duration: 200 }}
+      class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
+      class:spectrum-Popover--align-right={alignRight}
+    >
       {#each categories as category}
         <div class="category">
           <div class="heading">{category.label}</div>
@@ -184,8 +187,8 @@
         </div>
       </div>
     </div>
-  </Layout>
-</Popover>
+  {/if}
+</div>
 
 <style>
   .container {
@@ -245,6 +248,20 @@
     width: 48px;
     height: 48px;
   }
+  .spectrum-Popover {
+    width: 210px;
+    z-index: 999;
+    top: 100%;
+    padding: var(--spacing-l) var(--spacing-xl);
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-xl);
+  }
+  .spectrum-Popover--align-right {
+    right: 0;
+  }
   .colors {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
@@ -280,11 +297,7 @@
   .category--custom .heading {
     margin-bottom: var(--spacing-xs);
   }
-  .container {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-xl);
-  }
+
   .spectrum-wrapper {
     background-color: transparent;
   }

package/src/DetailSummary/DetailSummary.svelte

@@ -44,9 +44,7 @@
     align-items: stretch;
     border-bottom: var(--border-light);
   }
-  .property-group-container:last-child {
-    border-bottom: 0px;
-  }
+
   .property-group-name {
     cursor: pointer;
     display: flex;

package/src/Drawer/Drawer.svelte

@@ -4,8 +4,6 @@
   import Body from "../Typography/Body.svelte"
   import Heading from "../Typography/Heading.svelte"
   import { setContext } from "svelte"
-  import { createEventDispatcher } from "svelte"
-  import { generate } from "shortid"
 
   export let title
   export let fillWidth
@@ -13,17 +11,13 @@
   export let width = "calc(100% - 626px)"
   export let headless = false
 
-  const dispatch = createEventDispatcher()
-
   let visible = false
-  let drawerId = generate()
 
   export function show() {
     if (visible) {
       return
     }
     visible = true
-    dispatch("drawerShow", drawerId)
   }
 
   export function hide() {
@@ -31,7 +25,6 @@
       return
     }
     visible = false
-    dispatch("drawerHide", drawerId)
   }
 
   setContext("drawer-actions", {

package/src/Form/Core/Combobox.svelte

@@ -2,8 +2,8 @@
   import "@spectrum-css/inputgroup/dist/index-vars.css"
   import "@spectrum-css/popover/dist/index-vars.css"
   import "@spectrum-css/menu/dist/index-vars.css"
+  import { fly } from "svelte/transition"
   import { createEventDispatcher } from "svelte"
-  import clickOutside from "../../Actions/click_outside"
 
   export let value = null
   export let id = null
@@ -80,11 +80,10 @@
     </svg>
   </button>
   {#if open}
+    <div class="overlay" on:mousedown|self={() => (open = false)} />
     <div
+      transition:fly|local={{ y: -20, duration: 200 }}
       class="spectrum-Popover spectrum-Popover--bottom is-open"
-      use:clickOutside={() => {
-        open = false
-      }}
     >
       <ul class="spectrum-Menu" role="listbox">
         {#if options && Array.isArray(options)}
@@ -126,6 +125,14 @@
   .spectrum-Textfield-input {
     width: 0;
   }
+  .overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 999;
+  }
   .spectrum-Popover {
     max-height: 240px;
     width: 100%;

package/src/Popover/Popover.svelte

@@ -23,10 +23,6 @@
   export let animate = true
   export let customZindex
 
-  export let handlePostionUpdate
-  export let showPopover = true
-  export let clickOutsideOverride = false
-
   $: target = portalTarget || getContext(Context.PopoverRoot) || ".spectrum"
 
   export const show = () => {
@@ -39,18 +35,7 @@
     open = false
   }
 
-  export const toggle = () => {
-    if (!open) {
-      show()
-    } else {
-      hide()
-    }
-  }
-
   const handleOutsideClick = e => {
-    if (clickOutsideOverride) {
-      return
-    }
     if (open) {
       // Stop propagation if the source is the anchor
       let node = e.target
@@ -69,9 +54,6 @@
   }
 
   function handleEscape(e) {
-    if (!clickOutsideOverride) {
-      return
-    }
     if (open && e.key === "Escape") {
       hide()
     }
@@ -89,7 +71,6 @@
         maxWidth,
         useAnchorWidth,
         offset,
-        customUpdate: handlePostionUpdate,
       }}
       use:clickOutside={{
         callback: dismissible ? handleOutsideClick : () => {},
@@ -98,7 +79,6 @@
       on:keydown={handleEscape}
       class="spectrum-Popover is-open"
       class:customZindex
-      class:hide-popover={open && !showPopover}
       role="presentation"
       style="height: {customHeight}; --customZindex: {customZindex};"
       transition:fly|local={{ y: -20, duration: animate ? 200 : 0 }}
@@ -109,10 +89,6 @@
 {/if}
 
 <style>
-  .hide-popover {
-    display: contents;
-  }
-
   .spectrum-Popover {
     min-width: var(--spectrum-global-dimension-size-2000);
     border-color: var(--spectrum-global-color-gray-300);