fix(combobox, dropdown, input-date-picker, input-time-picker, popover…

…, tooltip): Prevent repositioning from affecting other floating components (#7178)

**Related Issue:** #7158

## Summary

This prevent repositioning from affecting other floating components
caused by using a shared, debounced reposition function.

Additionally, this will cancel any in-progress debounced calls if the
component is disconnected.

---------

Co-authored-by: JC Franco <jfranco@esri.com>

packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx

@@ -581,7 +581,7 @@ export class InputTimePicker
 
   private getExtendedLocaleConfig(
     locale: string
-  ): Parameters<typeof dayjs["updateLocale"]>[1] | undefined {
+  ): Parameters<(typeof dayjs)["updateLocale"]>[1] | undefined {
     if (locale === "ar") {
       return {
         meridiem: (hour) => (hour > 12 ? "م" : "ص"),

packages/calcite-components/src/utils/floating-ui.spec.ts

@@ -1,18 +1,20 @@
 import { waitForAnimationFrame } from "../tests/utils";
-import {
+import * as floatingUI from "./floating-ui";
+import { FloatingUIComponent } from "./floating-ui";
+
+const {
   cleanupMap,
   connectFloatingUI,
   defaultOffsetDistance,
   disconnectFloatingUI,
   effectivePlacements,
   filterComputedPlacements,
-  FloatingUIComponent,
   getEffectivePlacement,
   placements,
   positionFloatingUI,
   reposition,
   repositionDebounceTimeout
-} from "./floating-ui";
+} = floatingUI;
 
 import * as floatingUIDOM from "@floating-ui/dom";
 
@@ -56,15 +58,19 @@ describe("repositioning", () => {
   let referenceEl: HTMLButtonElement;
   let positionOptions: Parameters<typeof positionFloatingUI>[1];
 
-  beforeEach(() => {
-    fakeFloatingUiComponent = {
+  function createFakeFloatingUiComponent(): FloatingUIComponent {
+    return {
       open: false,
       reposition: async () => {
         /* noop */
       },
       overlayPositioning: "absolute",
       placement: "auto"
     };
+  }
+
+  beforeEach(() => {
+    fakeFloatingUiComponent = createFakeFloatingUiComponent();
 
     floatingEl = document.createElement("div");
     referenceEl = document.createElement("button");
@@ -155,6 +161,23 @@ describe("repositioning", () => {
       expect(floatingEl.style.position).toBe("fixed");
     });
   });
+
+  it("debounces positioning per instance", async () => {
+    const positionSpy = jest.spyOn(floatingUI, "positionFloatingUI");
+    fakeFloatingUiComponent.open = true;
+
+    const anotherFakeFloatingUiComponent = createFakeFloatingUiComponent();
+    anotherFakeFloatingUiComponent.open = true;
+
+    floatingUI.reposition(fakeFloatingUiComponent, positionOptions, true);
+    expect(positionSpy).toHaveBeenCalledTimes(1);
+
+    floatingUI.reposition(anotherFakeFloatingUiComponent, positionOptions, true);
+    expect(positionSpy).toHaveBeenCalledTimes(2);
+
+    await new Promise<void>((resolve) => setTimeout(resolve, repositionDebounceTimeout));
+    expect(positionSpy).toHaveBeenCalledTimes(2);
+  });
 });
 
 it("should have correct value for defaultOffsetDistance", () => {