refactor: create a common resource to store debounce consts (#9829)

**Related Issue:** #5371

## Summary
Refactor: create a common resource to store debounce consts for
`action-bar`, `combobox`, `filter`, `list`, `floating-ui`.

packages/calcite-components/src/components/action-bar/action-bar.e2e.ts

@@ -12,8 +12,8 @@ import {
   t9n,
 } from "../../tests/commonTests";
 import { getFocusedElementProp } from "../../tests/utils";
+import { DEBOUNCE } from "../../utils/resources";
 import { CSS, SLOTS } from "./resources";
-import { overflowActionsDebounceInMs } from "./utils";
 
 describe("calcite-action-bar", () => {
   describe("renders", () => {
@@ -406,7 +406,7 @@ describe("calcite-action-bar", () => {
           </calcite-action-bar>
         </div>`,
       });
-      await page.waitForTimeout(overflowActionsDebounceInMs);
+      await page.waitForTimeout(DEBOUNCE.resize);
 
       expect(await page.findAll(dynamicGroupActionsSelector)).toHaveLength(2);
       expect(await page.findAll(slottedActionsSelector)).toHaveLength(0);
@@ -423,7 +423,7 @@ describe("calcite-action-bar", () => {
           <calcite-action text="Table" icon="table"></calcite-action>`,
         );
       });
-      await page.waitForTimeout(overflowActionsDebounceInMs + 10);
+      await page.waitForTimeout(DEBOUNCE.resize + 10);
       await page.waitForChanges();
 
       expect(await page.findAll(dynamicGroupActionsSelector)).toHaveLength(8);
@@ -454,15 +454,15 @@ describe("calcite-action-bar", () => {
         </div>`,
       );
       await page.waitForChanges();
-      await page.waitForTimeout(overflowActionsDebounceInMs + 10);
+      await page.waitForTimeout(DEBOUNCE.resize + 10);
 
       expect(await page.findAll(dynamicGroupActionsSelector)).toHaveLength(8);
       expect(await page.findAll(slottedActionsSelector)).toHaveLength(0);
 
       const actionBar = await page.find("calcite-action-bar");
       actionBar.setProperty("overflowActionsDisabled", false);
       await page.waitForChanges();
-      await page.waitForTimeout(overflowActionsDebounceInMs + 10);
+      await page.waitForTimeout(DEBOUNCE.resize + 10);
 
       expect(await page.findAll(dynamicGroupActionsSelector)).toHaveLength(8);
       expect(await page.findAll(slottedActionsSelector)).toHaveLength(7);
@@ -490,7 +490,7 @@ describe("calcite-action-bar", () => {
           </calcite-action-bar>
         </div>`,
       });
-      await page.waitForTimeout(overflowActionsDebounceInMs + 10);
+      await page.waitForTimeout(DEBOUNCE.resize + 10);
 
       expect(await page.findAll(dynamicGroupActionsSelector)).toHaveLength(8);
       expect(await page.findAll(slottedActionsSelector)).toHaveLength(7);
@@ -499,7 +499,7 @@ describe("calcite-action-bar", () => {
         element.style.height = "550px";
       });
 
-      await page.waitForTimeout(overflowActionsDebounceInMs + 10);
+      await page.waitForTimeout(DEBOUNCE.resize + 10);
       await page.waitForChanges();
 
       expect(await page.findAll(dynamicGroupActionsSelector)).toHaveLength(8);

packages/calcite-components/src/components/action-bar/action-bar.tsx

@@ -40,15 +40,10 @@ import {
 import { ExpandToggle, toggleChildActionText } from "../functional/ExpandToggle";
 import { Layout, Position, Scale } from "../interfaces";
 import { OverlayPositioning } from "../../utils/floating-ui";
+import { DEBOUNCE } from "../../utils/resources";
 import { ActionBarMessages } from "./assets/action-bar/t9n";
 import { CSS, SLOTS } from "./resources";
-import {
-  geActionDimensions,
-  getOverflowCount,
-  overflowActions,
-  overflowActionsDebounceInMs,
-  queryActions,
-} from "./utils";
+import { geActionDimensions, getOverflowCount, overflowActions, queryActions } from "./utils";
 
 /**
  * @slot - A slot for adding `calcite-action`s that will appear at the top of the component.
@@ -342,7 +337,7 @@ export class ActionBar
       expanded,
       overflowCount,
     });
-  }, overflowActionsDebounceInMs);
+  }, DEBOUNCE.resize);
 
   toggleExpand = (): void => {
     this.expanded = !this.expanded;

packages/calcite-components/src/components/action-bar/utils.ts

@@ -3,7 +3,6 @@ import { SLOTS as ACTION_GROUP_SLOTS } from "../action-group/resources";
 import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources";
 import { Layout } from "../interfaces";
 
-export const overflowActionsDebounceInMs = 150;
 const groupBufferPx = 2;
 
 const getAverage = (arr: number[]) => arr.reduce((p, c) => p + c, 0) / arr.length;

packages/calcite-components/src/components/combobox/combobox.e2e.ts

@@ -17,6 +17,7 @@ import { CSS as ComboboxItemCSS } from "../combobox-item/resources";
 import { CSS as XButtonCSS } from "../functional/XButton";
 import { getElementXY, newProgrammaticE2EPage, skipAnimations } from "../../tests/utils";
 import { assertCaretPosition } from "../../tests/utils";
+import { DEBOUNCE } from "../../utils/resources";
 import { CSS } from "./resources";
 
 const selectionModes = ["single", "single-persist", "ancestors", "multiple"];
@@ -201,6 +202,7 @@ describe("calcite-combobox", () => {
 
       await combobox.type(text);
       await page.waitForChanges();
+      await page.waitForTimeout(DEBOUNCE.filter);
 
       expect(await combobox.getProperty("open")).toBe(true);
 
@@ -209,6 +211,7 @@ describe("calcite-combobox", () => {
       }
 
       await page.waitForChanges();
+      await page.waitForTimeout(DEBOUNCE.filter);
       expect(await combobox.getProperty("open")).toBe(false);
     });
 
@@ -256,6 +259,7 @@ describe("calcite-combobox", () => {
       await page.waitForChanges();
 
       await input.type("undefined");
+      await page.waitForTimeout(DEBOUNCE.filter);
       await page.waitForChanges();
 
       expect(await items[0].isVisible()).toBe(false);
@@ -287,6 +291,7 @@ describe("calcite-combobox", () => {
 
       await combobox.press("s");
       await page.waitForChanges();
+      await page.waitForTimeout(DEBOUNCE.filter);
       expect(filterEventSpy).toHaveReceivedEventTimes(1);
 
       expect(await items[0].isVisible()).toBe(true);
@@ -299,6 +304,7 @@ describe("calcite-combobox", () => {
 
       await combobox.press("i");
       await page.waitForChanges();
+      await page.waitForTimeout(DEBOUNCE.filter);
       expect(filterEventSpy).toHaveReceivedEventTimes(2);
 
       expect(await items[0].isVisible()).toBe(true);
@@ -311,6 +317,7 @@ describe("calcite-combobox", () => {
 
       await combobox.press("n");
       await page.waitForChanges();
+      await page.waitForTimeout(DEBOUNCE.filter);
       expect(filterEventSpy).toHaveReceivedEventTimes(3);
 
       expect(await items[0].isVisible()).toBe(true);
@@ -342,6 +349,7 @@ describe("calcite-combobox", () => {
       await page.waitForChanges();
       await combobox.type("Algeria");
       await page.waitForChanges();
+      await page.waitForTimeout(DEBOUNCE.filter);
 
       const [lastItemX, lastItemY] = await getElementXY(page, "#item-4");
 
@@ -369,6 +377,7 @@ describe("calcite-combobox", () => {
       await page.waitForChanges();
       await combobox.type("two");
       await page.waitForChanges();
+      await page.waitForTimeout(DEBOUNCE.filter);
       const one = await (await page.find("#one")).isVisible();
       const two = await (await page.find("#two")).isVisible();
       const three = await (await page.find("#three")).isVisible();
@@ -407,6 +416,7 @@ describe("calcite-combobox", () => {
       const page = await newE2EPage();
       await page.setContent(html` <calcite-combobox filter-text="1.2"> ${nestedComboboxChildren} </calcite-combobox> `);
       await page.waitForChanges();
+      await page.waitForTimeout(DEBOUNCE.filter);
 
       const visibleItemsAndGroups = await page.findAll(
         "calcite-combobox-item:not([hidden]), calcite-combobox-item-group:not([hidden])",
@@ -434,6 +444,7 @@ describe("calcite-combobox", () => {
       const combobox = await page.find("calcite-combobox");
       combobox.setProperty("filterText", "1.2");
       await page.waitForChanges();
+      await page.waitForTimeout(DEBOUNCE.filter);
 
       const filteredItemsAndGroups = await page.findAll(
         "calcite-combobox-item:not([hidden]), calcite-combobox-item-group:not([hidden])",
@@ -454,6 +465,7 @@ describe("calcite-combobox", () => {
 
       combobox.setProperty("filterText", "");
       await page.waitForChanges();
+      await page.waitForTimeout(DEBOUNCE.filter);
 
       const allVisibleItemAndGroups = await page.findAll(
         "calcite-combobox-item:not([hidden]), calcite-combobox-item-group:not([hidden])",
@@ -500,10 +512,13 @@ describe("calcite-combobox", () => {
       });
 
       await page.waitForChanges();
+      await page.waitForTimeout(DEBOUNCE.filter);
 
       const combobox = await page.find("calcite-combobox");
       combobox.setProperty("filterText", "foo");
+
       await page.waitForChanges();
+      await page.waitForTimeout(DEBOUNCE.filter);
 
       const visibleItems = await page.findAll("calcite-combobox-item:not([hidden])");
 
@@ -1733,11 +1748,27 @@ describe("calcite-combobox", () => {
       const button = await page.find("button");
       await input.click();
       await input.press("o");
+
+      await page.waitForChanges();
+      await page.waitForTimeout(DEBOUNCE.filter);
+
       await input.press("Tab");
+
+      await page.waitForChanges();
+      await page.waitForTimeout(DEBOUNCE.filter);
+
       let chips = await page.findAll("calcite-combobox >>> calcite-chip");
       expect(chips.length).toBe(1);
       await input.press("j");
+
+      await page.waitForChanges();
+      await page.waitForTimeout(DEBOUNCE.filter);
+
       await button.click();
+
+      await page.waitForChanges();
+      await page.waitForTimeout(DEBOUNCE.filter);
+
       chips = await page.findAll("calcite-combobox >>> calcite-chip");
       expect(chips.length).toBe(2);
     });

packages/calcite-components/src/components/combobox/combobox.tsx

@@ -56,6 +56,7 @@ import {
 import { connectLocalized, disconnectLocalized } from "../../utils/locale";
 import { createObserver } from "../../utils/observers";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
+import { DEBOUNCE } from "../../utils/resources";
 import {
   connectMessages,
   disconnectMessages,
@@ -1128,7 +1129,7 @@ export class Combobox
       if (emit) {
         this.calciteComboboxFilterChange.emit();
       }
-    }, 100);
+    }, DEBOUNCE.filter);
   })();
 
   internalComboboxChangeEvent = (): void => {

packages/calcite-components/src/components/filter/filter.e2e.ts

@@ -1,7 +1,7 @@
 import { E2EPage, newE2EPage } from "@stencil/core/testing";
 import { accessible, defaults, disabled, focusable, hidden, reflects, renders, t9n } from "../../tests/commonTests";
 import { CSS as INPUT_CSS } from "../input/resources";
-import { DEBOUNCE_TIMEOUT } from "./resources";
+import { DEBOUNCE } from "../../utils/resources";
 
 describe("calcite-filter", () => {
   describe("renders", () => {
@@ -190,7 +190,7 @@ describe("calcite-filter", () => {
     it("updates filtered items after filtering", async () => {
       const filter = await page.find("calcite-filter");
       const filterChangeSpy = await page.spyOnEvent("calciteFilterChange");
-      await page.waitForTimeout(DEBOUNCE_TIMEOUT);
+      await page.waitForTimeout(DEBOUNCE.filter);
       await page.waitForChanges();
 
       expect(filterChangeSpy).toHaveReceivedEventTimes(0);
@@ -215,7 +215,7 @@ describe("calcite-filter", () => {
       await page.$eval("calcite-filter", (filter: HTMLCalciteFilterElement): void => {
         filter.items = filter.items.slice(3);
       });
-      await page.waitForTimeout(DEBOUNCE_TIMEOUT);
+      await page.waitForTimeout(DEBOUNCE.filter);
       await page.waitForChanges();
 
       assertMatchingItems(await filter.getProperty("filteredItems"), ["jon"]);
@@ -274,15 +274,15 @@ describe("calcite-filter", () => {
 
     it("should return matching value", async () => {
       const filter = await page.find("calcite-filter");
-      await page.waitForTimeout(DEBOUNCE_TIMEOUT);
+      await page.waitForTimeout(DEBOUNCE.filter);
       assertMatchingItems(await filter.getProperty("filteredItems"), ["harry"]);
     });
 
     it("should return no matching values", async () => {
       const filter = await page.find("calcite-filter");
       filter.setProperty("filterProps", ["description"]);
       await page.waitForChanges();
-      await page.waitForTimeout(DEBOUNCE_TIMEOUT);
+      await page.waitForTimeout(DEBOUNCE.filter);
       assertMatchingItems(await filter.getProperty("filteredItems"), []);
     });
   });

packages/calcite-components/src/components/filter/filter.tsx

@@ -34,8 +34,9 @@ import {
   updateMessages,
 } from "../../utils/t9n";
 import { Scale } from "../interfaces";
+import { DEBOUNCE } from "../../utils/resources";
 import { FilterMessages } from "./assets/filter/t9n";
-import { CSS, DEBOUNCE_TIMEOUT, ICONS } from "./resources";
+import { CSS, ICONS } from "./resources";
 
 @Component({
   tag: "calcite-filter",
@@ -235,7 +236,7 @@ export class Filter
     (value: string, emit = false, onFilter?: () => void): void =>
       this.items.length &&
       this.updateFiltered(filter(this.items, value, this.filterProps), emit, onFilter),
-    DEBOUNCE_TIMEOUT,
+    DEBOUNCE.filter,
   );
 
   inputHandler = (event: CustomEvent): void => {

packages/calcite-components/src/components/filter/resources.ts

@@ -7,5 +7,3 @@ export const ICONS = {
   search: "search",
   close: "x",
 } as const;
-
-export const DEBOUNCE_TIMEOUT = 250;

packages/calcite-components/src/components/input-time-zone/input-time-zone.e2e.ts

@@ -13,6 +13,7 @@ import {
   t9n,
 } from "../../tests/commonTests";
 import { TagAndPage } from "../../tests/commonTests/interfaces";
+import { DEBOUNCE } from "../../utils/resources";
 import { toUserFriendlyName } from "./utils";
 
 /*
@@ -227,6 +228,7 @@ describe("calcite-input-time-zone", () => {
         await input.click();
         await input.type(searchTerms[0]);
         await page.waitForChanges();
+        await page.waitForTimeout(DEBOUNCE.filter);
 
         matchedTimeZoneItems = await page.findAll("calcite-input-time-zone >>> calcite-combobox-item:not([hidden])");
 
@@ -235,6 +237,7 @@ describe("calcite-input-time-zone", () => {
         await clearSearchTerm(searchTerms[0]);
         await input.type(searchTerms[1]);
         await page.waitForChanges();
+        await page.waitForTimeout(DEBOUNCE.filter);
 
         matchedTimeZoneItems = await page.findAll("calcite-input-time-zone >>> calcite-combobox-item:not([hidden])");
 
@@ -243,13 +246,15 @@ describe("calcite-input-time-zone", () => {
         await clearSearchTerm(searchTerms[1]);
         await input.type(searchTerms[2]);
         await page.waitForChanges();
+        await page.waitForTimeout(DEBOUNCE.filter);
 
         matchedTimeZoneItems = await page.findAll("calcite-input-time-zone >>> calcite-combobox-item:not([hidden])");
 
         expect(matchedTimeZoneItems).toHaveLength(2);
 
         await clearSearchTerm(searchTerms[1]);
         await page.waitForChanges();
+        await page.waitForTimeout(DEBOUNCE.filter);
 
         matchedTimeZoneItems = await page.findAll("calcite-input-time-zone >>> calcite-combobox-item:not([hidden])");
 
@@ -448,6 +453,7 @@ describe("calcite-input-time-zone", () => {
         await page.waitForChanges();
         await input.type("(GMT-6)");
         await page.waitForChanges();
+        await page.waitForTimeout(DEBOUNCE.filter);
 
         const sharedOffsetTimeZoneItems = await page.findAll(
           "calcite-input-time-zone >>> calcite-combobox-item:not([hidden])",
@@ -456,6 +462,7 @@ describe("calcite-input-time-zone", () => {
 
         await sharedOffsetTimeZoneItems[1].click();
         await page.waitForChanges();
+        await page.waitForTimeout(DEBOUNCE.filter);
 
         const selectedTimeZoneItem = await page.find("calcite-input-time-zone >>> calcite-combobox-item[selected]");
         const expectedTimeZoneItem = testTimeZoneItems[3];