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

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.51",
+  "version": "2.2.12-alpha.53",
   "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.51",
+    "@budibase/string-templates": "2.2.12-alpha.53",
     "@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": "70bd5e3f4b13b1a5f41f1309f3944cbeca51535e"
+  "gitHead": "d8667feccf14869cffcd4570c9a4d45c3f647621"
 }

package/src/ActionButton/ActionButton.svelte

@@ -86,7 +86,7 @@
     margin-left: 0;
     transition: color ease-out 130ms;
   }
-  .is-selected:not(.spectrum-ActionButton--emphasized) {
+  .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);
   }

package/src/Actions/position_dropdown.js

@@ -16,10 +16,10 @@ export default function positionDropdown(
       top: null,
     }
 
-    let popoverLeftPad = 20
-
     // Determine vertical styles
-    if (window.innerHeight - anchorBounds.bottom < 100) {
+    if (align === "right-outside") {
+      styles.top = anchorBounds.top
+    } else if (window.innerHeight - anchorBounds.bottom < 100) {
       styles.top = anchorBounds.top - elementBounds.height - 5
     } else {
       styles.top = anchorBounds.bottom + 5
@@ -34,15 +34,9 @@ export default function positionDropdown(
       styles.minWidth = anchorBounds.width
     }
     if (align === "right") {
-      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
+      styles.left = anchorBounds.left + anchorBounds.width - elementBounds.width
+    } else if (align === "right-outside") {
+      styles.left = anchorBounds.right + 10
     } else {
       styles.left = anchorBounds.left
     }

package/src/Form/Core/EnvDropdown.svelte

@@ -247,10 +247,6 @@
     width: 100%;
   }
 
-  .no-variables-height {
-    height: 100px;
-  }
-
   .no-variables-text {
     padding: var(--spacing-m);
     color: var(--spectrum-global-color-gray-600);

package/src/Popover/Popover.svelte

@@ -15,15 +15,10 @@
   export let portalTarget
   export let dataCy
   export let maxWidth
-  export let direction = "bottom"
-  export let showTip = false
   export let open = false
   export let useAnchorWidth = false
   export let dismissible = true
 
-  $: tooltipClasses = showTip
-    ? `spectrum-Popover--withTip spectrum-Popover--${direction}`
-    : ""
   $: target = portalTarget || getContext(Context.PopoverRoot) || ".spectrum"
 
   export const show = () => {
@@ -62,29 +57,31 @@
 </script>
 
 {#if open}
-  <Portal {target}>
-    <div
-      tabindex="0"
-      use:positionDropdown={{
-        anchor,
-        align,
-        maxWidth,
-        useAnchorWidth,
-        showTip: false,
-      }}
-      use:clickOutside={{
-        callback: dismissible ? handleOutsideClick : () => {},
-        anchor,
-      }}
-      on:keydown={handleEscape}
-      class={"spectrum-Popover is-open " + (tooltipClasses || "")}
-      role="presentation"
-      data-cy={dataCy}
-      transition:fly|local={{ y: -20, duration: 200 }}
-    >
-      <slot />
-    </div>
-  </Portal>
+  {#key anchor}
+    <Portal {target}>
+      <div
+        tabindex="0"
+        use:positionDropdown={{
+          anchor,
+          align,
+          maxWidth,
+          useAnchorWidth,
+          showTip: false,
+        }}
+        use:clickOutside={{
+          callback: dismissible ? handleOutsideClick : () => {},
+          anchor,
+        }}
+        on:keydown={handleEscape}
+        class="spectrum-Popover is-open"
+        role="presentation"
+        data-cy={dataCy}
+        transition:fly|local={{ y: -20, duration: 200 }}
+      >
+        <slot />
+      </div>
+    </Portal>
+  {/key}
 {/if}
 
 <style>
@@ -93,13 +90,4 @@
     border-color: var(--spectrum-global-color-gray-300);
     overflow: auto;
   }
-  .spectrum-Popover.is-open.spectrum-Popover--withTip {
-    margin-top: var(--spacing-xs);
-    margin-left: var(--spacing-xl);
-  }
-  :global(.spectrum-Popover--bottom .spectrum-Popover-tip),
-  :global(.spectrum-Popover--top .spectrum-Popover-tip) {
-    left: 90%;
-    margin-left: calc(var(--spectrum-global-dimension-size-150) * -1);
-  }
 </style>