@budibase/bbui 3.23.5 → 3.23.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "3.23.5",
+  "version": "3.23.6",
   "license": "MPL-2.0",
   "svelte": "src/index.ts",
   "module": "dist/bbui.mjs",
@@ -106,5 +106,5 @@
       }
     }
   },
-  "gitHead": "481d9c7c88d91cc07c8682307360a9b231f1dfe4"
+  "gitHead": "993c44f2265cdca05008c355c1225967e2eb10c2"
 }

package/src/Actions/positionDropdown.ts

@@ -94,10 +94,14 @@ export default function positionDropdown(element: HTMLElement, opts: Opts) {
         const overflows = styles.left + elementBounds.width > winWidth
         return overflows && anchorBounds.left > winWidth - anchorBounds.right
       }
-      const doesYOverflow = () => {
+      const doesYOverflowBottom = () => {
         const overflows = styles.top + elementBounds.height > winHeight
         return overflows && anchorBounds.top > winHeight - anchorBounds.bottom
       }
+      const doesYOverflowTop = () => {
+        const overflows = styles.top < screenOffset
+        return overflows && anchorBounds.bottom < winHeight - anchorBounds.top
+      }
 
       // Applies a dynamic max height constraint if appropriate
       const applyMaxHeight = (height: number) => {
@@ -167,6 +171,12 @@ export default function positionDropdown(element: HTMLElement, opts: Opts) {
         }
       }
 
+      // Applies top edge sticking when popover overflows above viewport
+      const applyTopEdgeStick = () => {
+        styles.top = screenOffset
+        applyMaxHeight(winHeight - 2 * screenOffset)
+      }
+
       // Determine X strategy
       if (align === PopoverAlignment.Right) {
         applyXStrategy("EndToEnd")
@@ -215,12 +225,12 @@ export default function positionDropdown(element: HTMLElement, opts: Opts) {
           applyXStrategy("EndToStart")
         }
       }
-      if (doesYOverflow()) {
+      if (doesYOverflowBottom()) {
         // If wrapping, lock to the bottom of the screen and also reposition to
         // the side to not block the anchor
         if (wrap) {
           applyYStrategy("MidPoint")
-          if (doesYOverflow()) {
+          if (doesYOverflowBottom()) {
             applyYStrategy("ScreenEdge")
           }
           applyXStrategy("StartToEnd")
@@ -243,6 +253,15 @@ export default function positionDropdown(element: HTMLElement, opts: Opts) {
           }
         }
       }
+      // Handle top overflow for outside alignments
+      if (doesYOverflowTop()) {
+        if (
+          align === PopoverAlignment.LeftOutside ||
+          align === PopoverAlignment.RightOutside
+        ) {
+          applyTopEdgeStick()
+        }
+      }
     }
 
     for (const [key, value] of Object.entries(styles)) {