@budibase/bbui 2.2.12-alpha.50 → 2.2.12-alpha.51

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "2.2.12-alpha.50",
+  "version": "2.2.12-alpha.51",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
@@ -38,7 +38,7 @@
   ],
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "1.2.1",
-    "@budibase/string-templates": "2.2.12-alpha.50",
+    "@budibase/string-templates": "2.2.12-alpha.51",
     "@spectrum-css/accordion": "3.0.24",
     "@spectrum-css/actionbutton": "1.0.1",
     "@spectrum-css/actiongroup": "1.0.1",
@@ -89,5 +89,5 @@
   "resolutions": {
     "loader-utils": "1.4.1"
   },
-  "gitHead": "b6ca342ed964e28404648db0dc2ff63b82347a2a"
+  "gitHead": "70bd5e3f4b13b1a5f41f1309f3944cbeca51535e"
 }

package/src/Actions/position_dropdown.js

@@ -3,6 +3,9 @@ export default function positionDropdown(
   { anchor, align, maxWidth, useAnchorWidth }
 ) {
   const update = () => {
+    if (!anchor) {
+      return
+    }
     const anchorBounds = anchor.getBoundingClientRect()
     const elementBounds = element.getBoundingClientRect()
     let styles = {
@@ -13,6 +16,8 @@ export default function positionDropdown(
       top: null,
     }
 
+    let popoverLeftPad = 20
+
     // Determine vertical styles
     if (window.innerHeight - anchorBounds.bottom < 100) {
       styles.top = anchorBounds.top - elementBounds.height - 5
@@ -29,7 +34,13 @@ export default function positionDropdown(
       styles.minWidth = anchorBounds.width
     }
     if (align === "right") {
-      styles.left = anchorBounds.left + anchorBounds.width - elementBounds.width
+      let left =
+        anchorBounds.left + anchorBounds.width / 2 - elementBounds.width
+      // Accommodate margin on popover: 1.25rem; ~20px
+      if (left + elementBounds.width + popoverLeftPad > window.innerWidth) {
+        left -= 20
+      }
+      styles.left = left
     } else if (align === "right-side") {
       styles.left = anchorBounds.left + anchorBounds.width
     } else {
@@ -54,8 +65,11 @@ export default function positionDropdown(
   const resizeObserver = new ResizeObserver(entries => {
     entries.forEach(update)
   })
-  resizeObserver.observe(anchor)
+  if (anchor) {
+    resizeObserver.observe(anchor)
+  }
   resizeObserver.observe(element)
+  resizeObserver.observe(document.body)
 
   document.addEventListener("scroll", update, true)
 

package/src/Button/Button.svelte

@@ -15,11 +15,13 @@
   export let tooltip = undefined
   export let dataCy
   export let newStyles = true
+  export let id
 
   let showTooltip = false
 </script>
 
 <button
+  {id}
   class:spectrum-Button--cta={cta}
   class:spectrum-Button--primary={primary}
   class:spectrum-Button--secondary={secondary}

package/src/Popover/Popover.svelte

@@ -19,9 +19,7 @@
   export let showTip = false
   export let open = false
   export let useAnchorWidth = false
-
-  let tipSvg =
-    '<svg xmlns="http://www.w3.org/svg/2000" width="23" height="12" class="spectrum-Popover-tip" > <path class="spectrum-Popover-tip-triangle" d="M 0.7071067811865476 0 L 11.414213562373096 10.707106781186548 L 22.121320343559645 0" /> </svg>'
+  export let dismissible = true
 
   $: tooltipClasses = showTip
     ? `spectrum-Popover--withTip spectrum-Popover--${direction}`
@@ -67,9 +65,15 @@
   <Portal {target}>
     <div
       tabindex="0"
-      use:positionDropdown={{ anchor, align, maxWidth, useAnchorWidth }}
+      use:positionDropdown={{
+        anchor,
+        align,
+        maxWidth,
+        useAnchorWidth,
+        showTip: false,
+      }}
       use:clickOutside={{
-        callback: handleOutsideClick,
+        callback: dismissible ? handleOutsideClick : () => {},
         anchor,
       }}
       on:keydown={handleEscape}
@@ -78,10 +82,6 @@
       data-cy={dataCy}
       transition:fly|local={{ y: -20, duration: 200 }}
     >
-      {#if showTip}
-        {@html tipSvg}
-      {/if}
-
       <slot />
     </div>
   </Portal>

package/src/Tabs/Tab.svelte

@@ -3,6 +3,7 @@
   import Portal from "svelte-portal"
   export let title
   export let icon = ""
+  export let id
 
   const dispatch = createEventDispatcher()
   let selected = getContext("tab")
@@ -31,10 +32,7 @@
   $: {
     if ($selected.title === title && tab_internal) {
       if ($selected.info?.left !== tab_internal.getBoundingClientRect().left) {
-        $selected = {
-          ...$selected,
-          info: tab_internal.getBoundingClientRect(),
-        }
+        setTabInfo()
       }
     }
   }
@@ -50,6 +48,7 @@
 </script>
 
 <div
+  {id}
   bind:this={tab_internal}
   on:click={onClick}
   class:is-selected={$selected.title === title}