@ship-ui/core 0.17.7 → 0.17.8

package/assets/mcp/components.json

@@ -513,6 +513,12 @@
         "parameters": "parent",
         "returnType": "any",
         "description": ""
+      },
+      {
+        "name": "return",
+        "parameters": "pos.left >= 0 &&\n      pos.top >= 0 &&\n      pos.left + m.width <= window.innerWidth &&\n      pos.top + m.height <= window.innerHeight\n    );\n  }\n\n  /** Clamp a position so the popover stays within the viewport */\n  #clampToViewport(pos: { left: number; top: number }, m: DOMRect",
+        "returnType": "any",
+        "description": ""
       }
     ],
     "cssVariables": [

package/fesm2022/ship-ui-core.mjs

@@ -2709,61 +2709,106 @@ class ShipPopover {
         }
         return this.#document.documentElement;
     }
-    #alignLeftUnder(triggerRect, menuRect) {
-        const newLeft = triggerRect.left;
-        const newTop = triggerRect.bottom + BASE_SPACE;
+    /**
+     * Position generators that mirror the CSS position-try-fallbacks.
+     * Each returns { left, top } for the popover-content in fixed coordinates.
+     */
+    // bottom span-right: below trigger, left edge aligned with trigger left
+    #bottomSpanRight(t, _m) {
+        return { left: t.left, top: t.bottom + BASE_SPACE };
+    }
+    // top span-right: above trigger, left edge aligned with trigger left
+    #topSpanRight(t, m) {
+        return { left: t.left, top: t.top - m.height - BASE_SPACE };
+    }
+    // bottom span-left: below trigger, right edge aligned with trigger right
+    #bottomSpanLeft(t, m) {
+        return { left: t.right - m.width, top: t.bottom + BASE_SPACE };
+    }
+    // top span-left: above trigger, right edge aligned with trigger right
+    #topSpanLeft(t, m) {
+        return { left: t.right - m.width, top: t.top - m.height - BASE_SPACE };
+    }
+    // right span-bottom: to the right of trigger, top edge aligned with trigger top
+    #rightSpanBottom(t, _m) {
+        return { left: t.right + BASE_SPACE, top: t.top };
+    }
+    // left span-bottom: to the left of trigger, top edge aligned with trigger top
+    #leftSpanBottom(t, m) {
+        return { left: t.left - m.width - BASE_SPACE, top: t.top };
+    }
+    // right center: to the right of trigger, vertically centered
+    #rightCenter(t, m) {
+        return { left: t.right + BASE_SPACE, top: t.top + t.height / 2 - m.height / 2 };
+    }
+    // left center: to the left of trigger, vertically centered
+    #leftCenter(t, m) {
+        return { left: t.left - m.width - BASE_SPACE, top: t.top + t.height / 2 - m.height / 2 };
+    }
+    // right span-top: to the right of trigger, bottom edge aligned with trigger bottom
+    #rightSpanTop(t, m) {
+        return { left: t.right + BASE_SPACE, top: t.bottom - m.height };
+    }
+    // left span-top: to the left of trigger, bottom edge aligned with trigger bottom
+    #leftSpanTop(t, m) {
+        return { left: t.left - m.width - BASE_SPACE, top: t.bottom - m.height };
+    }
+    /** Check if a position fits entirely within the viewport */
+    #fitsInViewport(pos, m) {
+        return (pos.left >= 0 &&
+            pos.top >= 0 &&
+            pos.left + m.width <= window.innerWidth &&
+            pos.top + m.height <= window.innerHeight);
+    }
+    /** Clamp a position so the popover stays within the viewport */
+    #clampToViewport(pos, m) {
         return {
-            left: newLeft,
-            top: newTop,
-        };
-    }
-    #alignTopRight(triggerRect, menuRect) {
-        const newLeft = triggerRect.right + BASE_SPACE;
-        const newTop = triggerRect.top;
-        return {
-            left: newLeft,
-            top: newTop,
-        };
-    }
-    #alignBottomRight(triggerRect, menuRect) {
-        const newLeft = triggerRect.right + BASE_SPACE;
-        const newTop = triggerRect.bottom;
-        return {
-            left: newLeft,
-            top: newTop,
-        };
-    }
-    #alignLeftOver(triggerRect, menuRect) {
-        const newLeft = triggerRect.left;
-        const newTop = triggerRect.bottom - triggerRect.height - menuRect.height - BASE_SPACE;
-        return {
-            left: newLeft,
-            top: newTop,
+            left: Math.max(0, Math.min(pos.left, window.innerWidth - m.width)),
+            top: Math.max(0, Math.min(pos.top, window.innerHeight - m.height)),
         };
     }
     #calculateMenuPosition() {
         const triggerRect = this.triggerRef()?.nativeElement.getBoundingClientRect();
         const menuRect = this.popoverContentRef()?.nativeElement.getBoundingClientRect();
-        const tryOrderMultiLayer = [this.#alignTopRight, this.#alignBottomRight];
-        const tryOrderDefault = [this.#alignLeftUnder, this.#alignLeftOver];
+        if (!triggerRect || !menuRect)
+            return;
+        // Mirror the CSS position-try-fallbacks order
+        const tryOrderDefault = [
+            this.#bottomSpanRight,
+            this.#topSpanRight,
+            this.#bottomSpanLeft,
+            this.#topSpanLeft,
+            this.#rightSpanBottom,
+            this.#leftSpanBottom,
+            this.#rightCenter,
+            this.#leftCenter,
+            this.#rightSpanTop,
+            this.#leftSpanTop,
+        ];
+        const tryOrderMultiLayer = [
+            this.#rightSpanBottom,
+            this.#rightSpanTop,
+            this.#leftSpanBottom,
+            this.#leftSpanTop,
+            this.#rightCenter,
+            this.#leftCenter,
+            this.#bottomSpanRight,
+            this.#topSpanRight,
+            this.#bottomSpanLeft,
+            this.#topSpanLeft,
+        ];
         const tryOrder = this.asMultiLayer() ? tryOrderMultiLayer : tryOrderDefault;
-        for (let i = 0; i < tryOrder.length; i++) {
-            const position = tryOrder[i](triggerRect, menuRect);
-            const outOfBoundsRight = position.left + (menuRect?.width || 0) > window.innerWidth;
-            const outOfBoundsBottom = position.top + (menuRect?.height || 0) > window.innerHeight;
-            if (!outOfBoundsRight && !outOfBoundsBottom) {
-                this.menuStyle.set({
-                    left: position.left + 'px',
-                    top: position.top + 'px',
-                });
+        // Try each position, use the first one that fits
+        for (const positionFn of tryOrder) {
+            const pos = positionFn.call(this, triggerRect, menuRect);
+            if (this.#fitsInViewport(pos, menuRect)) {
+                this.menuStyle.set({ left: pos.left + 'px', top: pos.top + 'px' });
                 return;
             }
         }
-        const fallbackPosition = tryOrder[0](triggerRect, menuRect);
-        this.menuStyle.set({
-            left: fallbackPosition.left + 'px',
-            top: fallbackPosition.top + 'px',
-        });
+        // If nothing fits perfectly, use the first position clamped to viewport
+        const fallback = this.#clampToViewport(tryOrder[0].call(this, triggerRect, menuRect), menuRect);
+        this.menuStyle.set({ left: fallback.left + 'px', top: fallback.top + 'px' });
     }
     ngOnDestroy() {
         this.openAbort?.abort();