@fluid-topics/ft-floating-menu 1.1.2 → 1.1.4

package/build/ft-base-floating-menu.d.ts

@@ -38,5 +38,5 @@ export declare class FtBaseFloatingMenu extends FtLitElement implements FtBaseFl
     disconnectedCallback(): void;
     protected contentAvailableCallback(props: PropertyValues): void;
     private positionMenuWrapper;
-    private correctOutOfWindowPixels;
+    private convertPlacement;
 }

package/build/ft-base-floating-menu.js

@@ -10,6 +10,7 @@ import { eventPathContainsMatchingElement, FtLitElement, jsonProperty, } from "@
 import { classMap } from "lit/directives/class-map.js";
 import { FtFloatingMenuItem } from "./ft-floating-menu-item";
 import { FtIconVariants } from "@fluid-topics/ft-icon/build/ft-icon.properties";
+import { autoPlacement, computePosition, shift } from "@floating-ui/dom";
 export class FloatingMenuCloseEvent extends CustomEvent {
     constructor() {
         super("close-ft-floating-menu");
@@ -115,47 +116,28 @@ class FtBaseFloatingMenu extends FtLitElement {
         }
     }
     positionMenuWrapper() {
-        const menuWidth = this.menuContent.offsetWidth;
-        const menuHeight = this.menuContent.offsetHeight;
-        const buttonWidth = this.actionButton.offsetWidth;
-        const buttonHeight = this.actionButton.offsetHeight;
-        let left = 0;
-        let top = 0;
-        this.menuWrapper.style.left = "0";
-        this.menuWrapper.style.top = "0";
+        this.menuWrapper.style.left = "";
+        this.menuWrapper.style.top = "";
+        computePosition(this.actionButton, this.menuWrapper, {
+            middleware: [
+                shift({ crossAxis: true }),
+                autoPlacement({ allowedPlacements: [this.convertPlacement()] }),
+            ],
+        }).then(({ x, y }) => {
+            this.menuWrapper.style.left = `${x}px`;
+            this.menuWrapper.style.top = `${y}px`;
+        });
+        this.menuWrapper.classList.add("ft-floating-menu--wrapper-positioned");
+    }
+    convertPlacement() {
         switch (this.horizontalAlignment) {
             case "left":
-                left = this.actionButton.offsetLeft - this.menuWrapper.offsetLeft;
-                break;
+                return this.verticalAlignment + "-start";
             case "right":
-                left = this.actionButton.offsetLeft + buttonWidth - menuWidth - this.menuWrapper.offsetLeft;
-                break;
+                return this.verticalAlignment + "-end";
             case "center":
-                left = this.actionButton.offsetLeft + (buttonWidth / 2) - (menuWidth / 2) - this.menuWrapper.offsetLeft;
-                break;
-        }
-        switch (this.verticalAlignment) {
-            case "bottom":
-                top = this.actionButton.offsetTop + buttonHeight + 4 - this.menuWrapper.offsetTop;
-                break;
-            case "top":
-                top = this.actionButton.offsetTop - menuHeight - 4 - this.menuWrapper.offsetTop;
-                break;
+                return this.verticalAlignment + "-center";
         }
-        const style = this.menuWrapper.style;
-        style.left = left + "px";
-        style.top = top + "px";
-        const boundingClientRect = this.menuWrapper.getBoundingClientRect();
-        let leftOutOfWindowPixels = -boundingClientRect.x;
-        let rightOutOfWindowPixels = (boundingClientRect.x + boundingClientRect.width) - window.innerWidth;
-        style.left = (left + Math.round(this.correctOutOfWindowPixels(leftOutOfWindowPixels, rightOutOfWindowPixels))) + "px";
-        let topOutOfWindowPixels = -boundingClientRect.y;
-        let bottomOutOfWindowPixels = (boundingClientRect.y + boundingClientRect.height) - window.innerHeight;
-        style.top = (top + Math.round(this.correctOutOfWindowPixels(topOutOfWindowPixels, bottomOutOfWindowPixels))) + "px";
-        this.menuWrapper.classList.add("ft-floating-menu--wrapper-positioned");
-    }
-    correctOutOfWindowPixels(leftOrTopOutOfWindowPixels, rightOrBottomOutOfWindowPixels) {
-        return Math.max(leftOrTopOutOfWindowPixels, Math.min(0, -rightOrBottomOutOfWindowPixels));
     }
 }
 FtBaseFloatingMenu.elementDefinitions = {