fix(tips): loaded floating-ui async and optimized tooltips open calc (#529)

Author: agliga

.changeset/smart-paws-stay.md

@@ -0,0 +1,6 @@
+---
+"@ebay/ebayui-core": minor
+---
+
+fix(tips): only calculate position of tooltips when its open
+fix(floating-ui): added async loading for floating-ui library

packages/ebayui-core/src/common/dropdown/index.ts

@@ -1,12 +1,13 @@
-import {
+import type {
     autoUpdate,
     computePosition,
     shift,
     flip,
     offset,
-    type ReferenceElement,
-    type Middleware,
+    ReferenceElement,
+    Middleware,
 } from "@floating-ui/dom";
+import { load as floatinguiLoad } from "@internal/floating-ui";
 
 interface DropdownUtilOptions {
     reverse?: boolean;
@@ -20,6 +21,13 @@ export class DropdownUtil {
     declare overlay: HTMLElement;
     declare cleanupFn: any;
     declare options: DropdownUtilOptions;
+    declare loaded: boolean;
+    declare triggerShow: boolean;
+    declare computePosition: typeof computePosition;
+    declare autoUpdate: typeof autoUpdate;
+    declare offset: typeof offset;
+    declare flip: typeof flip;
+    declare shift: typeof shift;
 
     constructor(
         host: HTMLElement,
@@ -29,28 +37,47 @@ export class DropdownUtil {
         this.host = host as ReferenceElement;
         this.overlay = overlay as HTMLElement;
         this.options = options ?? {};
+
+        floatinguiLoad().then((floatingUI) => {
+            this.computePosition =
+                floatingUI.computePosition as typeof computePosition;
+            this.autoUpdate = floatingUI.autoUpdate as typeof autoUpdate;
+            this.offset = floatingUI.offset;
+            this.flip = floatingUI.flip;
+            this.shift = floatingUI.shift;
+
+            this.loaded = true;
+            if (this.triggerShow) {
+                this.triggerShow = false;
+                this.show();
+            }
+        });
     }
 
     show() {
-        this.cleanupFn = autoUpdate(
-            this.host,
-            this.overlay,
-            this.update.bind(this),
-        );
+        if (this.loaded) {
+            this.cleanupFn = this.autoUpdate(
+                this.host,
+                this.overlay,
+                this.update.bind(this),
+            );
+        } else {
+            this.triggerShow = true;
+        }
     }
 
     update() {
         const middleware = [] as Middleware[];
-        middleware.push(offset(this.options.offset ?? 4));
+        middleware.push(this.offset(this.options.offset ?? 4));
         if (this.options.flip) {
             middleware.push(
-                flip({
+                this.flip({
                     crossAxis: true,
                 }),
             );
         }
-        middleware.push(shift());
-        computePosition(this.host, this.overlay, {
+        middleware.push(this.shift());
+        this.computePosition(this.host, this.overlay, {
             placement: this.options.reverse ? "bottom-end" : "bottom-start",
             strategy: this.options.strategy ?? "fixed",
             middleware,

packages/ebayui-core/src/components/components/ebay-tooltip-base/component-browser.ts

@@ -1,17 +1,18 @@
 import Expander from "makeup-expander";
+import { load as floatinguiLoad } from "@internal/floating-ui";
 import focusables from "makeup-focusables";
-import {
+import { pointerStyles } from "./constants";
+import type { WithNormalizedProps } from "../../../global";
+import type {
+    Placement,
+    computePosition,
     autoUpdate,
+    offset,
     flip,
-    computePosition,
     shift,
-    offset,
     arrow,
-    type Placement,
     inline,
 } from "@floating-ui/dom";
-import { pointerStyles } from "./constants";
-import type { WithNormalizedProps } from "../../../global";
 
 interface TooptipBaseInput {
     open?: boolean;
@@ -28,31 +29,75 @@ interface TooptipBaseInput {
     pointer?: keyof typeof pointerStyles;
     "on-base-expand"?: (event: { originalEvent: Event }) => void;
     "on-base-collapse"?: (event: { originalEvent: Event }) => void;
+    "on-loaded"?: () => void;
 }
 export interface Input extends WithNormalizedProps<TooptipBaseInput> {}
+export interface State {
+    loaded: boolean;
+}
 
-class TooltipBase extends Marko.Component<Input> {
+class TooltipBase extends Marko.Component<Input, State> {
     declare action: "expand" | "collapse" | null;
     declare _expander: any;
     declare cancelFocus: ReturnType<typeof focusables>;
     declare hostEl: HTMLElement | null;
     declare overlayEl: HTMLElement | null;
     declare arrowEl: HTMLElement | null;
     declare cleanup: (() => void) | undefined;
+    declare computePosition: typeof computePosition;
+    declare autoUpdate: typeof autoUpdate;
+    declare offset: typeof offset;
+    declare flip: typeof flip;
+    declare shift: typeof shift;
+    declare arrow: typeof arrow;
+    declare inline: typeof inline;
 
-    handleExpand() {
-        this.emit("base-expand");
+    positionTip() {
         if (this.hostEl && this.overlayEl) {
+            this.cleanup?.();
             this.updateTip();
+            this.cleanup = this.autoUpdate(
+                this.hostEl,
+                this.overlayEl,
+                this.updateTip.bind(this),
+            );
         }
     }
 
+    onCreate() {
+        this.state = {
+            loaded: false,
+        };
+    }
+
+    handleExpand() {
+        this.emit("base-expand");
+        this.updateTip();
+    }
+
     handleCollapse() {
         this.emit("base-collapse");
     }
 
     onMount() {
         this._setupBaseTooltip();
+        if (!this.state.loaded) {
+            floatinguiLoad().then((floatingUI) => {
+                this.computePosition =
+                    floatingUI.computePosition as typeof computePosition;
+                this.autoUpdate = floatingUI.autoUpdate as typeof autoUpdate;
+                this.offset = floatingUI.offset;
+                this.flip = floatingUI.flip;
+                this.shift = floatingUI.shift;
+                this.arrow = floatingUI.arrow;
+                this.inline = floatingUI.inline;
+                this.state.loaded = true;
+                if (this.input.open !== false) {
+                    this.positionTip();
+                }
+                this.emit("loaded");
+            });
+        }
     }
 
     onUpdate() {
@@ -114,18 +159,13 @@ class TooltipBase extends Marko.Component<Input> {
                 host.setAttribute("aria-describedby", input.overlayId!);
             }
         }
-        if (this.hostEl && this.overlayEl) {
-            this.updateTip();
-            this.cleanup = autoUpdate(
-                this.hostEl,
-                this.overlayEl,
-                this.updateTip.bind(this),
-            );
+        if (this.input.open !== false && this.state.loaded) {
+            this.positionTip();
         }
     }
 
     updateTip() {
-        computePosition(
+        this.computePosition(
             this.hostEl as HTMLElement,
             this.overlayEl as HTMLElement,
             {
@@ -134,15 +174,15 @@ class TooltipBase extends Marko.Component<Input> {
                     pointerStyles[this.input.pointer ?? "bottom"],
                 strategy: "absolute",
                 middleware: [
-                    offset(this.input.offset || 6),
-                    !this.input.notInline && inline(),
+                    this.offset(this.input.offset || 6),
+                    !this.input.notInline && this.inline(),
                     !this.input.noFlip &&
-                        flip({
+                        this.flip({
                             fallbackAxisSideDirection: "end",
                             flipAlignment: false,
                         }),
-                    !this.input.noShift && shift(),
-                    arrow({
+                    !this.input.noShift && this.shift(),
+                    this.arrow({
                         element: this.arrowEl as HTMLElement,
                         padding: 20,
                     }),

packages/ebayui-core/src/components/components/ebay-tooltip-base/index.marko

@@ -13,7 +13,6 @@ $ const { overlayStyle, renderBody } = input;
     key="container"
     on-expander-expand("handleExpand")
     on-expander-collapse("handleCollapse")
-    overlay-style=overlayStyle
->
+    overlay-style=overlayStyle>
     <${renderBody}/>
 </span>

packages/ebayui-core/src/components/ebay-infotip/component.ts

@@ -24,6 +24,7 @@ interface InfotipInput extends Omit<
     "no-shift"?: TooltipBaseInput["no-shift"];
     content: Marko.AttrTag<Marko.HTML.Span>;
     "a11y-close-button-text"?: Marko.HTMLAttributes["aria-label"];
+    "on-loaded"?: () => void;
     "on-expand"?: () => void;
     "on-collapse"?: () => void;
 }

packages/ebayui-core/src/components/ebay-infotip/examples/default.marko

@@ -2,6 +2,7 @@ class {}
 <ebay-infotip
     a11yCloseButtonText="Dismiss infotip"
     ariaLabel="Important information"
+    on-loaded("emit", "loaded")
     on-expand("emit", "expand")
     on-collapse("emit", "collapse")
     ...input

packages/ebayui-core/src/components/ebay-infotip/examples/open-on-render.marko

@@ -1,6 +1,7 @@
 <ebay-infotip
     a11yCloseButtonText="Dismiss infotip"
     ariaLabel="Important information"
+    on-loaded("emit", "loaded")
     on-expand("emit", "expand")
     on-collapse("emit", "collapse")
     open

packages/ebayui-core/src/components/ebay-infotip/index.marko

@@ -30,6 +30,7 @@ $ var classPrefix = !isModal ? "infotip" : "dialog--mini";
         offset=input.offset
         pointer=input.pointer
         placement=input.placement
+        on-loaded("emit", "loaded")
         onBase-expand(isModal ? undefined : "handleExpand")
         onBase-collapse(isModal ? undefined : "handleCollapse")
     >

packages/ebayui-core/src/components/ebay-infotip/test/test.browser.js

@@ -23,6 +23,8 @@ let component;
 describe("given the default infotip", () => {
     beforeEach(async () => {
         component = await render(Default);
+        // Wait for floating-ui to load
+        await waitFor(() => expect(component.emitted("loaded")).has.length(1));
     });
 
     thenItCanBeOpenAndClosed();

packages/ebayui-core/src/components/ebay-tooltip/component.ts

@@ -18,6 +18,7 @@ interface TooltipInput extends Omit<
     "not-inline"?: TooltipBaseInput["not-inline"];
     "no-shift"?: TooltipBaseInput["no-shift"];
     "no-flip"?: TooltipBaseInput["no-flip"];
+    "on-loaded"?: () => void;
     "on-expand"?: () => void;
     "on-collapse"?: () => void;
 }