@fluid-topics/ft-floating-menu 1.1.21 → 1.1.23

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

@@ -10,8 +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, platform, shift } from "@floating-ui/dom";
-import { offsetParent } from "composed-offset-position";
+import { computeOffsetPosition } from "@fluid-topics/ft-wc-utils/build/floating";
 export class FloatingMenuCloseEvent extends CustomEvent {
     constructor() {
         super("close-ft-floating-menu");
@@ -116,25 +115,13 @@ class FtBaseFloatingMenu extends FtLitElement {
             this.positionMenuWrapper();
         }
     }
-    positionMenuWrapper() {
+    async positionMenuWrapper() {
         this.menuWrapper.style.left = "";
         this.menuWrapper.style.top = "";
         const reference = this.customToggle.length > 0 ? this.customToggle[0] : this.actionButton;
-        computePosition(reference, this.menuWrapper, {
-            platform: {
-                ...platform,
-                getOffsetParent: (element) => {
-                    return platform.getOffsetParent(element, offsetParent);
-                },
-            },
-            middleware: [
-                shift({ crossAxis: true }),
-                autoPlacement({ allowedPlacements: [this.convertPlacement()] }),
-            ],
-        }).then(({ x, y }) => {
-            this.menuWrapper.style.left = `${x}px`;
-            this.menuWrapper.style.top = `${y}px`;
-        });
+        const { x, y } = await computeOffsetPosition(reference, this.menuWrapper, this.convertPlacement());
+        this.menuWrapper.style.left = `${x}px`;
+        this.menuWrapper.style.top = `${y}px`;
         this.menuWrapper.classList.add("ft-floating-menu--wrapper-positioned");
     }
     convertPlacement() {

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

@@ -6,6 +6,5 @@ export declare const FtFloatingMenuCssVariables: {
     colorSurface: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     menuElevation: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     borderRadiusS: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    buttonBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
 };
 export declare const styles: import("lit").CSSResult;

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

@@ -1,6 +1,5 @@
 import { css } from "lit";
-import { designSystemVariables, FtCssVariableFactory, setVariable } from "@fluid-topics/ft-wc-utils";
-import { FtButtonCssVariables } from "@fluid-topics/ft-button";
+import { designSystemVariables, FtCssVariableFactory } from "@fluid-topics/ft-wc-utils";
 export const FtFloatingMenuCssVariables = {
     zIndex: FtCssVariableFactory.create("--ft-floating-menu-z-index", "", "NUMBER", "8"),
     maxWidth: FtCssVariableFactory.create("--ft-floating-menu-max-width", "", "SIZE", "300px"),
@@ -9,7 +8,6 @@ export const FtFloatingMenuCssVariables = {
     colorSurface: FtCssVariableFactory.external(designSystemVariables.colorSurface, "Design system"),
     menuElevation: FtCssVariableFactory.external(designSystemVariables.elevation02, "Design system"),
     borderRadiusS: FtCssVariableFactory.external(designSystemVariables.borderRadiusS, "Design system"),
-    buttonBackgroundColor: FtCssVariableFactory.create("--ft-floating-menu-button-background-color", "", "COLOR", designSystemVariables.colorSurface),
 };
 // language=CSS
 export const styles = css `
@@ -43,8 +41,4 @@ export const styles = css `
     .ft-floating-menu--open .ft-floating-menu--options {
         display: block;
     }
-
-    [part="button"] {
-        ${setVariable(FtButtonCssVariables.backgroundColor, FtFloatingMenuCssVariables.buttonBackgroundColor)}
-    }
 `;