fix(floating-ui): improve floating element performance (#8409)

**Related Issue:** #7979 #8214 #8386 #8419 #5697 ## Summary - reverts #8001 - Keeps doc updates - reverts partially #8230 - Keeps drag classes that are setting `overflow:hidden` when a drag is occurring. - Keeps roundByDPR floating-ui fix. https://floating-ui.com/docs/misc#subpixel-and-accelerated-positioning - Hides overflow for `calcite-sortable--chosen` class - Only sets `top` and `left` on floating element once positioned. **This fixes native drag and drop issue**
Esri · Dec 13, 2023 · 4d8cfb8 · 4d8cfb8
1 parent 509c9f1
commit 4d8cfb8
Show file tree

Hide file tree

Showing 10 changed files with 43 additions and 24 deletions.
diff --git a/packages/calcite-components/src/assets/styles/_sortable.scss b/packages/calcite-components/src/assets/styles/_sortable.scss
@@ -1,4 +1,5 @@
 @mixin sortable-helper-classes() {
+  .calcite-sortable--chosen,
   .calcite-sortable--ghost,
   .calcite-sortable--drag {
     overflow: hidden;

diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
@@ -6260,6 +6260,8 @@ declare global {
     };
     interface HTMLCalciteListElementEventMap {
         "calciteListChange": void;
+        "calciteListDragEnd": ListDragDetail;
+        "calciteListDragStart": ListDragDetail;
         "calciteListFilter": void;
         "calciteListOrderChange": ListDragDetail;
         "calciteInternalListDefaultSlotChange": void;
@@ -9984,6 +9986,14 @@ declare namespace LocalJSX {
           * Emits when any of the list item selections have changed.
          */
         "onCalciteListChange"?: (event: CalciteListCustomEvent<void>) => void;
+        /**
+          * Emits when the component's dragging has ended.
+         */
+        "onCalciteListDragEnd"?: (event: CalciteListCustomEvent<ListDragDetail>) => void;
+        /**
+          * Emits when the component's dragging has started.
+         */
+        "onCalciteListDragStart"?: (event: CalciteListCustomEvent<ListDragDetail>) => void;
         /**
           * Emits when the component's filter has changed.
          */

diff --git a/packages/calcite-components/src/components/dropdown/dropdown.tsx b/packages/calcite-components/src/components/dropdown/dropdown.tsx
@@ -78,12 +78,14 @@ export class Dropdown
 
   @Watch("open")
   openHandler(): void {
-    if (!this.disabled) {
-      onToggleOpenCloseComponent(this);
+    onToggleOpenCloseComponent(this);
+
+    if (this.disabled) {
+      this.open = false;
       return;
     }
 
-    this.open = false;
+    this.reposition(true);
   }
 
   /**
@@ -549,7 +551,6 @@ export class Dropdown
   };
 
   onBeforeOpen(): void {
-    this.reposition(true);
     this.calciteDropdownBeforeOpen.emit();
   }
 
@@ -563,7 +564,6 @@ export class Dropdown
 
   onClose(): void {
     this.calciteDropdownClose.emit();
-    this.reposition(true);
   }
 
   setReferenceEl = (el: HTMLDivElement): void => {

diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
@@ -264,6 +264,8 @@ export class InputDatePicker
       this.open = false;
       return;
     }
+
+    this.reposition(true);
   }
 
   /**
@@ -766,7 +768,6 @@ export class InputDatePicker
   }
 
   onBeforeOpen(): void {
-    this.reposition(true);
     this.calciteInputDatePickerBeforeOpen.emit();
   }
 
@@ -792,7 +793,6 @@ export class InputDatePicker
     this.restoreInputFocus();
     this.focusOnOpen = false;
     this.datePickerEl.reset();
-    this.reposition(true);
   }
 
   setStartInput = (el: HTMLCalciteInputElement): void => {

diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx
@@ -172,16 +172,15 @@ export class InputTimePicker
   @Prop({ reflect: true, mutable: true }) open = false;
 
   @Watch("open")
-  openHandler(open: boolean): void {
+  openHandler(): void {
     onToggleOpenCloseComponent(this);
+
     if (this.disabled || this.readOnly) {
       this.open = false;
       return;
     }
 
-    if (open) {
-      this.reposition(true);
-    }
+    this.reposition(true);
   }
 
   /** When `true`, interaction is prevented and the component is displayed with lower opacity. */

diff --git a/packages/calcite-components/src/components/popover/popover.tsx b/packages/calcite-components/src/components/popover/popover.tsx
@@ -194,7 +194,7 @@ export class Popover
   @Watch("open")
   openHandler(): void {
     onToggleOpenCloseComponent(this);
-
+    this.reposition(true);
     this.setExpandedAttr();
   }
 
@@ -499,7 +499,6 @@ export class Popover
   };
 
   onBeforeOpen(): void {
-    this.reposition(true);
     this.calcitePopoverBeforeOpen.emit();
   }
 
@@ -515,7 +514,6 @@ export class Popover
   onClose(): void {
     this.calcitePopoverClose.emit();
     deactivateFocusTrap(this);
-    this.reposition(true);
   }
 
   storeArrowEl = (el: SVGElement): void => {

diff --git a/packages/calcite-components/src/components/tooltip/tooltip.tsx b/packages/calcite-components/src/components/tooltip/tooltip.tsx
@@ -89,6 +89,7 @@ export class Tooltip implements FloatingUIComponent, OpenCloseComponent {
   @Watch("open")
   openHandler(): void {
     onToggleOpenCloseComponent(this);
+    this.reposition(true);
   }
 
   /**
@@ -249,7 +250,6 @@ export class Tooltip implements FloatingUIComponent, OpenCloseComponent {
   // --------------------------------------------------------------------------
 
   onBeforeOpen(): void {
-    this.reposition(true);
     this.calciteTooltipBeforeOpen.emit();
   }
 
@@ -263,7 +263,6 @@ export class Tooltip implements FloatingUIComponent, OpenCloseComponent {
 
   onClose(): void {
     this.calciteTooltipClose.emit();
-    this.reposition(true);
   }
 
   private setTransitionEl = (el): void => {

diff --git a/packages/calcite-components/src/tests/commonTests.ts b/packages/calcite-components/src/tests/commonTests.ts
@@ -1352,7 +1352,7 @@ export function floatingUIOwner(
     await scrollTo(scrollablePageSizeInPx, scrollablePageSizeInPx);
     await page.waitForChanges();
 
-    expect(await getTransform()).not.toBe(initialClosedTransform);
+    expect(await getTransform()).toBe(initialClosedTransform);
 
     await scrollTo(0, 0);
     await page.waitForChanges();

diff --git a/packages/calcite-components/src/utils/floating-ui.spec.ts b/packages/calcite-components/src/utils/floating-ui.spec.ts
@@ -80,24 +80,34 @@ describe("repositioning", () => {
     expect(floatingEl.style.left).toBe("0");
   }
 
-  it("repositions immediately by default", async () => {
+  it("repositions only for open components", async () => {
+    await reposition(fakeFloatingUiComponent, positionOptions);
     assertPreOpenPositioning(floatingEl);
 
     fakeFloatingUiComponent.open = true;
 
+    await reposition(fakeFloatingUiComponent, positionOptions);
+    assertOpenPositioning(floatingEl);
+  });
+
+  it("repositions immediately by default", async () => {
+    fakeFloatingUiComponent.open = true;
+
     reposition(fakeFloatingUiComponent, positionOptions);
 
+    assertPreOpenPositioning(floatingEl);
+
     await waitForAnimationFrame();
     assertOpenPositioning(floatingEl);
   });
 
   it("can reposition after a delay", async () => {
-    assertPreOpenPositioning(floatingEl);
-
     fakeFloatingUiComponent.open = true;
 
     reposition(fakeFloatingUiComponent, positionOptions, true);
 
+    assertPreOpenPositioning(floatingEl);
+
     await new Promise<void>((resolve) => setTimeout(resolve, repositionDebounceTimeout));
     assertOpenPositioning(floatingEl);
   });

diff --git a/packages/calcite-components/src/utils/floating-ui.ts b/packages/calcite-components/src/utils/floating-ui.ts
@@ -157,8 +157,8 @@ export const positionFloatingUI =
       pointerEvents,
       position,
       transform: open ? `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)` : "",
-      left: open ? "0" : "",
-      top: open ? "0" : "",
+      top: 0,
+      left: 0,
     });
   };
 
@@ -427,6 +427,10 @@ export async function reposition(
   options: Parameters<typeof positionFloatingUI>[1],
   delayed = false
 ): Promise<void> {
+  if (!component.open) {
+    return;
+  }
+
   const positionFunction = delayed ? getDebouncedReposition(component) : positionFloatingUI;
 
   return positionFunction(component, options);
@@ -489,8 +493,6 @@ export function connectFloatingUI(
 
     // initial positioning based on https://floating-ui.com/docs/computePosition#initial-layout
     position: component.overlayPositioning,
-    top: "0",
-    left: "0",
   });
 
   const runAutoUpdate = Build.isBrowser