@budibase/bbui 2.2.12-alpha.41 → 2.2.12-alpha.42

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.41",
+  "version": "2.2.12-alpha.42",
   "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.41",
+    "@budibase/string-templates": "2.2.12-alpha.42",
     "@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": "b5da4944f2a33a3a70df34852833b83f536cde92"
+  "gitHead": "1a8bba5277aac61af1cad0015046444bfcaf9bfa"
 }

package/src/Actions/click_outside.js

@@ -1,4 +1,4 @@
-const ignoredClasses = [".flatpickr-calendar"]
+const ignoredClasses = [".flatpickr-calendar", ".spectrum-Popover"]
 let clickHandlers = []
 
 /**
@@ -19,7 +19,7 @@ const handleClick = event => {
     }
 
     // Ignore clicks for modals, unless the handler is registered from a modal
-    const sourceInModal = handler.element.closest(".spectrum-Modal") != null
+    const sourceInModal = handler.anchor.closest(".spectrum-Modal") != null
     const clickInModal = event.target.closest(".spectrum-Modal") != null
     if (clickInModal && !sourceInModal) {
       return
@@ -33,10 +33,10 @@ document.documentElement.addEventListener("click", handleClick, true)
 /**
  * Adds or updates a click handler
  */
-const updateHandler = (id, element, callback) => {
+const updateHandler = (id, element, anchor, callback) => {
   let existingHandler = clickHandlers.find(x => x.id === id)
   if (!existingHandler) {
-    clickHandlers.push({ id, element, callback })
+    clickHandlers.push({ id, element, anchor, callback })
   } else {
     existingHandler.callback = callback
   }
@@ -51,12 +51,22 @@ const removeHandler = id => {
 
 /**
  * Svelte action to apply a click outside handler for a certain element
+ * opts.anchor is an optional param specifying the real root source of the
+ * component being observed. This is required for things like popovers, where
+ * the element using the clickoutside action is the popover, but the popover is
+ * rendered at the root of the DOM somewhere, whereas the popover anchor is the
+ * element we actually want to consider when determining the source component.
  */
-export default (element, callback) => {
+export default (element, opts) => {
   const id = Math.random()
-  updateHandler(id, element, callback)
+  const update = newOpts => {
+    const callback = newOpts?.callback || newOpts
+    const anchor = newOpts?.anchor || element
+    updateHandler(id, element, anchor, callback)
+  }
+  update(opts)
   return {
-    update: newCallback => updateHandler(id, element, newCallback),
+    update,
     destroy: () => removeHandler(id),
   }
 }

package/src/Popover/Popover.svelte

@@ -68,7 +68,10 @@
     <div
       tabindex="0"
       use:positionDropdown={{ anchor, align, maxWidth, useAnchorWidth }}
-      use:clickOutside={handleOutsideClick}
+      use:clickOutside={{
+        callback: handleOutsideClick,
+        anchor,
+      }}
       on:keydown={handleEscape}
       class={"spectrum-Popover is-open " + (tooltipClasses || "")}
       role="presentation"