@budibase/bbui 2.2.12-alpha.62 → 2.2.12-alpha.63

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.62",
+  "version": "2.2.12-alpha.63",
   "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.62",
+    "@budibase/string-templates": "2.2.12-alpha.63",
     "@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": "f81de225cc6967619f671eeeb0cb716ae6e3d647"
+  "gitHead": "f884c90740b9573adae97d020127f24c4a7b5cbf"
 }

package/src/ActionButton/ActionButton.svelte

@@ -86,7 +86,7 @@
   }
   .is-selected:not(.spectrum-ActionButton--emphasized):not(.spectrum-ActionButton--quiet) {
     background: var(--spectrum-global-color-gray-300);
-    border-color: var(--spectrum-global-color-gray-700);
+    border-color: var(--spectrum-global-color-gray-500);
   }
   .noPadding {
     padding: 0;

package/src/Actions/position_dropdown.js

@@ -1,11 +1,21 @@
-export default function positionDropdown(
-  element,
-  { anchor, align, maxWidth, useAnchorWidth, offset = 5 }
-) {
-  const update = () => {
+export default function positionDropdown(element, opts) {
+  let resizeObserver
+  let latestOpts = opts
+
+  // We need a static reference to this function so that we can properly
+  // clean up the scroll listener.
+  const scrollUpdate = () => {
+    updatePosition(latestOpts)
+  }
+
+  // Updates the position of the dropdown
+  const updatePosition = opts => {
+    const { anchor, align, maxWidth, useAnchorWidth, offset = 5 } = opts
     if (!anchor) {
       return
     }
+
+    // Compute bounds
     const anchorBounds = anchor.getBoundingClientRect()
     const elementBounds = element.getBoundingClientRect()
     let styles = {
@@ -51,26 +61,47 @@ export default function positionDropdown(
     })
   }
 
+  // The actual svelte action callback which creates observers on the relevant
+  // DOM elements
+  const update = newOpts => {
+    latestOpts = newOpts
+
+    // Cleanup old state
+    if (resizeObserver) {
+      resizeObserver.disconnect()
+    }
+
+    // Do nothing if no anchor
+    const { anchor } = newOpts
+    if (!anchor) {
+      return
+    }
+
+    // Observe both anchor and element and resize the popover as appropriate
+    resizeObserver = new ResizeObserver(() => updatePosition(newOpts))
+    resizeObserver.observe(anchor)
+    resizeObserver.observe(element)
+    resizeObserver.observe(document.body)
+  }
+
   // Apply initial styles which don't need to change
   element.style.position = "absolute"
   element.style.zIndex = "9999"
 
-  // Observe both anchor and element and resize the popover as appropriate
-  const resizeObserver = new ResizeObserver(entries => {
-    entries.forEach(update)
-  })
-  if (anchor) {
-    resizeObserver.observe(anchor)
-  }
-  resizeObserver.observe(element)
-  resizeObserver.observe(document.body)
+  // Set up a scroll listener
+  document.addEventListener("scroll", scrollUpdate, true)
 
-  document.addEventListener("scroll", update, true)
+  // Perform initial update
+  update(opts)
 
   return {
+    update,
     destroy() {
-      resizeObserver.disconnect()
-      document.removeEventListener("scroll", update, true)
+      // Cleanup
+      if (resizeObserver) {
+        resizeObserver.disconnect()
+      }
+      document.removeEventListener("scroll", scrollUpdate, true)
     },
   }
 }

package/src/Popover/Popover.svelte

@@ -57,30 +57,28 @@
 </script>
 
 {#if open}
-  {#key anchor}
-    <Portal {target}>
-      <div
-        tabindex="0"
-        use:positionDropdown={{
-          anchor,
-          align,
-          maxWidth,
-          useAnchorWidth,
-          offset,
-        }}
-        use:clickOutside={{
-          callback: dismissible ? handleOutsideClick : () => {},
-          anchor,
-        }}
-        on:keydown={handleEscape}
-        class="spectrum-Popover is-open"
-        role="presentation"
-        transition:fly|local={{ y: -20, duration: 200 }}
-      >
-        <slot />
-      </div>
-    </Portal>
-  {/key}
+  <Portal {target}>
+    <div
+      tabindex="0"
+      use:positionDropdown={{
+        anchor,
+        align,
+        maxWidth,
+        useAnchorWidth,
+        offset,
+      }}
+      use:clickOutside={{
+        callback: dismissible ? handleOutsideClick : () => {},
+        anchor,
+      }}
+      on:keydown={handleEscape}
+      class="spectrum-Popover is-open"
+      role="presentation"
+      transition:fly|local={{ y: -20, duration: 200 }}
+    >
+      <slot />
+    </div>
+  </Portal>
 {/if}
 
 <style>