@budibase/bbui 2.24.1 → 2.24.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "2.24.1",
+  "version": "2.24.2",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
@@ -35,8 +35,8 @@
   ],
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "1.2.1",
-    "@budibase/shared-core": "2.24.1",
-    "@budibase/string-templates": "2.24.1",
+    "@budibase/shared-core": "2.24.2",
+    "@budibase/string-templates": "2.24.2",
     "@spectrum-css/accordion": "3.0.24",
     "@spectrum-css/actionbutton": "1.0.1",
     "@spectrum-css/actiongroup": "1.0.1",
@@ -103,5 +103,5 @@
       }
     }
   },
-  "gitHead": "5cb6ac027c7f45e174e3545a7399d425822970d8"
+  "gitHead": "9c6e0823094ac5bbf514d628152050bf25faf98d"
 }

package/src/Actions/click_outside.js

@@ -1,22 +1,25 @@
+// These class names will never trigger a callback if clicked, no matter what
 const ignoredClasses = [
   ".download-js-link",
   ".spectrum-Menu",
   ".date-time-popover",
 ]
+
+// These class names will only trigger a callback when clicked if the registered
+// component is not nested inside them. For example, clicking inside a modal
+// will not close the modal, or clicking inside a popover will not close the
+// popover.
 const conditionallyIgnoredClasses = [
   ".spectrum-Underlay",
   ".drawer-wrapper",
   ".spectrum-Popover",
 ]
 let clickHandlers = []
+let candidateTarget
 
-/**
- * Handle a body click event
- */
+// Processes a "click outside" event and invokes callbacks if our source element
+// is valid
 const handleClick = event => {
-  // Treat right clicks (context menu events) as normal clicks
-  const eventType = event.type === "contextmenu" ? "click" : event.type
-
   // Ignore click if this is an ignored class
   if (event.target.closest('[data-ignore-click-outside="true"]')) {
     return
@@ -29,11 +32,6 @@ const handleClick = event => {
 
   // Process handlers
   clickHandlers.forEach(handler => {
-    // Check that we're the right kind of click event
-    if (handler.allowedType && eventType !== handler.allowedType) {
-      return
-    }
-
     // Check that the click isn't inside the target
     if (handler.element.contains(event.target)) {
       return
@@ -51,17 +49,43 @@ const handleClick = event => {
     handler.callback?.(event)
   })
 }
-document.documentElement.addEventListener("click", handleClick, true)
-document.documentElement.addEventListener("mousedown", handleClick, true)
-document.documentElement.addEventListener("contextmenu", handleClick, true)
+
+// On mouse up we only trigger a "click outside" callback if we targetted the
+// same element that we did on mouse down. This fixes all sorts of issues where
+// we get annoying callbacks firing when we drag to select text.
+const handleMouseUp = e => {
+  if (candidateTarget === e.target) {
+    handleClick(e)
+  }
+  candidateTarget = null
+}
+
+// On mouse down we store which element was targetted for comparison later
+const handleMouseDown = e => {
+  // Only handle the primary mouse button here.
+  // We handle context menu (right click) events in another handler.
+  if (e.button !== 0) {
+    return
+  }
+  candidateTarget = e.target
+
+  // Clear any previous listeners in case of multiple down events, and register
+  // a single mouse up listener
+  document.removeEventListener("mouseup", handleMouseUp)
+  document.addEventListener("mouseup", handleMouseUp, true)
+}
+
+// Global singleton listeners for our events
+document.addEventListener("mousedown", handleMouseDown)
+document.addEventListener("contextmenu", handleClick)
 
 /**
  * Adds or updates a click handler
  */
-const updateHandler = (id, element, anchor, callback, allowedType) => {
+const updateHandler = (id, element, anchor, callback) => {
   let existingHandler = clickHandlers.find(x => x.id === id)
   if (!existingHandler) {
-    clickHandlers.push({ id, element, anchor, callback, allowedType })
+    clickHandlers.push({ id, element, anchor, callback })
   } else {
     existingHandler.callback = callback
   }
@@ -88,8 +112,7 @@ export default (element, opts) => {
     const callback =
       newOpts?.callback || (typeof newOpts === "function" ? newOpts : null)
     const anchor = newOpts?.anchor || element
-    const allowedType = newOpts?.allowedType || "click"
-    updateHandler(id, element, anchor, callback, allowedType)
+    updateHandler(id, element, anchor, callback)
   }
   update(opts)
   return {

package/src/Banner/Banner.svelte

@@ -8,6 +8,8 @@
   export let size = "S"
   export let extraButtonText
   export let extraButtonAction
+  export let extraLinkText
+  export let extraLinkAction
   export let showCloseButton = true
 
   let show = true
@@ -28,8 +30,13 @@
       <use xlink:href="#spectrum-icon-18-{icon}" />
     </svg>
     <div class="spectrum-Toast-body">
-      <div class="spectrum-Toast-content">
+      <div class="spectrum-Toast-content row-content">
         <slot />
+        {#if extraLinkText}
+          <button class="link" on:click={extraLinkAction}>
+            <u>{extraLinkText}</u>
+          </button>
+        {/if}
       </div>
       {#if extraButtonText && extraButtonAction}
         <button
@@ -73,4 +80,23 @@
   .spectrum-Button {
     border: 1px solid rgba(255, 255, 255, 0.2);
   }
+
+  .row-content {
+    display: flex;
+  }
+
+  .link {
+    background: none;
+    border: none;
+    margin: 0;
+    margin-left: 0.5em;
+    padding: 0;
+    cursor: pointer;
+    color: white;
+    font-weight: 600;
+  }
+
+  u {
+    font-weight: 600;
+  }
 </style>