From f97ca1f43487f4f402285c1db46338c1b551bfaf Mon Sep 17 00:00:00 2001 From: eliza Date: Mon, 22 Jul 2024 11:19:57 -0700 Subject: [PATCH] refactor: create a common resource to store debounce consts --- .../components/action-bar/action-bar.e2e.ts | 12 ++-- .../src/components/action-bar/action-bar.tsx | 9 +-- .../src/components/action-bar/utils.ts | 1 - .../src/components/combobox/combobox.tsx | 3 +- .../src/components/filter/filter.e2e.ts | 10 +-- .../src/components/filter/filter.tsx | 5 +- .../src/components/filter/resources.ts | 2 - .../src/components/list/list.e2e.ts | 71 +++++++++---------- .../calcite-components/src/demos/action.html | 30 +++++--- .../src/utils/debounceValues.ts | 32 +++++++++ .../src/utils/floating-ui.spec.ts | 6 +- .../src/utils/floating-ui.ts | 10 +-- 12 files changed, 109 insertions(+), 82 deletions(-) create mode 100644 packages/calcite-components/src/utils/debounceValues.ts diff --git a/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts b/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts index 5ab4d2a3967..dc242ad3f63 100755 --- a/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts +++ b/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 { overflowActionsDebounceInMs, overflowActionsDebounceInMsExtended } from "../../utils/debounceValues"; import { CSS, SLOTS } from "./resources"; -import { overflowActionsDebounceInMs } from "./utils"; describe("calcite-action-bar", () => { describe("renders", () => { @@ -423,7 +423,7 @@ describe("calcite-action-bar", () => { `, ); }); - await page.waitForTimeout(overflowActionsDebounceInMs + 10); + await page.waitForTimeout(overflowActionsDebounceInMsExtended); await page.waitForChanges(); expect(await page.findAll(dynamicGroupActionsSelector)).toHaveLength(8); @@ -454,7 +454,7 @@ describe("calcite-action-bar", () => { `, ); await page.waitForChanges(); - await page.waitForTimeout(overflowActionsDebounceInMs + 10); + await page.waitForTimeout(overflowActionsDebounceInMsExtended); expect(await page.findAll(dynamicGroupActionsSelector)).toHaveLength(8); expect(await page.findAll(slottedActionsSelector)).toHaveLength(0); @@ -462,7 +462,7 @@ describe("calcite-action-bar", () => { const actionBar = await page.find("calcite-action-bar"); actionBar.setProperty("overflowActionsDisabled", false); await page.waitForChanges(); - await page.waitForTimeout(overflowActionsDebounceInMs + 10); + await page.waitForTimeout(overflowActionsDebounceInMsExtended); expect(await page.findAll(dynamicGroupActionsSelector)).toHaveLength(8); expect(await page.findAll(slottedActionsSelector)).toHaveLength(7); @@ -490,7 +490,7 @@ describe("calcite-action-bar", () => { `, }); - await page.waitForTimeout(overflowActionsDebounceInMs + 10); + await page.waitForTimeout(overflowActionsDebounceInMsExtended); 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(overflowActionsDebounceInMsExtended); await page.waitForChanges(); expect(await page.findAll(dynamicGroupActionsSelector)).toHaveLength(8); diff --git a/packages/calcite-components/src/components/action-bar/action-bar.tsx b/packages/calcite-components/src/components/action-bar/action-bar.tsx index 21e37492fb7..5d2f20bf6a5 100755 --- a/packages/calcite-components/src/components/action-bar/action-bar.tsx +++ b/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 { overflowActionsDebounceInMs } from "../../utils/debounceValues"; 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. diff --git a/packages/calcite-components/src/components/action-bar/utils.ts b/packages/calcite-components/src/components/action-bar/utils.ts index 3e1d00be951..b41e2994f6a 100644 --- a/packages/calcite-components/src/components/action-bar/utils.ts +++ b/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; diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx index 8c7506bf9a2..479b8982e72 100644 --- a/packages/calcite-components/src/components/combobox/combobox.tsx +++ b/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 { comboboxFilterDebounceInMs } from "../../utils/debounceValues"; import { connectMessages, disconnectMessages, @@ -1129,7 +1130,7 @@ export class Combobox if (emit) { this.calciteComboboxFilterChange.emit(); } - }, 100); + }, comboboxFilterDebounceInMs); })(); internalComboboxChangeEvent = (): void => { diff --git a/packages/calcite-components/src/components/filter/filter.e2e.ts b/packages/calcite-components/src/components/filter/filter.e2e.ts index 45d9961c93e..f9ef6f172ba 100644 --- a/packages/calcite-components/src/components/filter/filter.e2e.ts +++ b/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 { filterDebounceInMs } from "../../utils/debounceValues"; 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(filterDebounceInMs); 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(filterDebounceInMs); await page.waitForChanges(); assertMatchingItems(await filter.getProperty("filteredItems"), ["jon"]); @@ -274,7 +274,7 @@ describe("calcite-filter", () => { it("should return matching value", async () => { const filter = await page.find("calcite-filter"); - await page.waitForTimeout(DEBOUNCE_TIMEOUT); + await page.waitForTimeout(filterDebounceInMs); assertMatchingItems(await filter.getProperty("filteredItems"), ["harry"]); }); @@ -282,7 +282,7 @@ describe("calcite-filter", () => { const filter = await page.find("calcite-filter"); filter.setProperty("filterProps", ["description"]); await page.waitForChanges(); - await page.waitForTimeout(DEBOUNCE_TIMEOUT); + await page.waitForTimeout(filterDebounceInMs); assertMatchingItems(await filter.getProperty("filteredItems"), []); }); }); diff --git a/packages/calcite-components/src/components/filter/filter.tsx b/packages/calcite-components/src/components/filter/filter.tsx index 9635f41daad..e2289a74eff 100644 --- a/packages/calcite-components/src/components/filter/filter.tsx +++ b/packages/calcite-components/src/components/filter/filter.tsx @@ -34,8 +34,9 @@ import { updateMessages, } from "../../utils/t9n"; import { Scale } from "../interfaces"; +import { filterDebounceInMs } from "../../utils/debounceValues"; 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, + filterDebounceInMs, ); inputHandler = (event: CustomEvent): void => { diff --git a/packages/calcite-components/src/components/filter/resources.ts b/packages/calcite-components/src/components/filter/resources.ts index 0adab7cd3b8..cf06f61b465 100644 --- a/packages/calcite-components/src/components/filter/resources.ts +++ b/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; diff --git a/packages/calcite-components/src/components/list/list.e2e.ts b/packages/calcite-components/src/components/list/list.e2e.ts index eb5e128e9dc..ed2e7cbf8d0 100755 --- a/packages/calcite-components/src/components/list/list.e2e.ts +++ b/packages/calcite-components/src/components/list/list.e2e.ts @@ -3,9 +3,8 @@ import { accessible, hidden, renders, focusable, disabled, defaults, t9n } from import { placeholderImage } from "../../../.storybook/placeholderImage"; import { html } from "../../../support/formatting"; import { CSS as ListItemCSS, activeCellTestAttribute } from "../list-item/resources"; -import { DEBOUNCE_TIMEOUT as FILTER_DEBOUNCE_TIMEOUT } from "../filter/resources"; import { GlobalTestProps, dragAndDrop, isElementFocused, getFocusedElementProp } from "../../tests/utils"; -import { debounceTimeout } from "./resources"; +import { listDebounceInMs, noDebounce } from "../../utils/debounceValues"; import { ListDragDetail } from "./interfaces"; const placeholder = placeholderImage({ @@ -13,8 +12,6 @@ const placeholder = placeholderImage({ height: 100, }); -const listDebounceTimeout = debounceTimeout + FILTER_DEBOUNCE_TIMEOUT; - describe("calcite-list", () => { describe("defaults", () => { defaults("calcite-list", [ @@ -154,7 +151,7 @@ describe("calcite-list", () => { ); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(listDebounceInMs); let dragHandleValues = [true, false, true, true, false, true, true]; @@ -170,7 +167,7 @@ describe("calcite-list", () => { rootList.setProperty("dragEnabled", false); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(listDebounceInMs); dragHandleValues = [false, false, true, true, false, false, false]; @@ -210,7 +207,7 @@ describe("calcite-list", () => { ); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(listDebounceInMs); let dragHandleValues = [true, false, true, true, false, true, true]; @@ -226,7 +223,7 @@ describe("calcite-list", () => { rootList.setProperty("dragEnabled", false); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(listDebounceInMs); dragHandleValues = [false, false, true, true, false, false, false]; @@ -341,7 +338,7 @@ describe("calcite-list", () => { await page.waitForChanges(); const list = await page.find("calcite-list"); const filter = await page.find(`calcite-list >>> calcite-filter`); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(listDebounceInMs); expect(await list.getProperty("filteredItems")).toHaveLength(2); expect(await list.getProperty("filteredData")).toHaveLength(2); expect(await list.getProperty("filterText")).toBeUndefined(); @@ -352,7 +349,7 @@ describe("calcite-list", () => { const calciteListFilterEvent = list.waitForEvent("calciteListFilter"); await page.keyboard.type("one"); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(listDebounceInMs); await calciteListFilterEvent; expect(await list.getProperty("filteredItems")).toHaveLength(1); expect(await list.getProperty("filteredData")).toHaveLength(1); @@ -366,7 +363,7 @@ describe("calcite-list", () => { const calciteListFilterEvent2 = list.waitForEvent("calciteListFilter"); await page.keyboard.type("two"); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(listDebounceInMs); await calciteListFilterEvent2; expect(await list.getProperty("filteredItems")).toHaveLength(1); expect(await list.getProperty("filteredData")).toHaveLength(1); @@ -375,7 +372,7 @@ describe("calcite-list", () => { const calciteListFilterEvent3 = list.waitForEvent("calciteListFilter"); await page.keyboard.type(" blah"); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(listDebounceInMs); await calciteListFilterEvent3; expect(await list.getProperty("filteredItems")).toHaveLength(0); expect(await list.getProperty("filteredData")).toHaveLength(0); @@ -401,14 +398,14 @@ describe("calcite-list", () => { const list = await page.find("calcite-list"); const listItems = await page.findAll("calcite-list-item"); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(listDebounceInMs); expect(await list.getProperty("filteredItems")).toHaveLength(3); expect(await list.getProperty("filteredData")).toHaveLength(3); expect(await list.getProperty("filterText")).toBeUndefined(); listItems[0].setProperty("selected", true); list.setProperty("filterText", "two"); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(listDebounceInMs); await page.waitForChanges(); let selectedItemValues = await getSelectedItemValues(); expect(selectedItemValues).toHaveLength(1); @@ -423,7 +420,7 @@ describe("calcite-list", () => { list.setProperty("filterText", "three"); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(listDebounceInMs); listItems[2].setProperty("selected", true); await page.waitForChanges(); selectedItemValues = await getSelectedItemValues(); @@ -473,7 +470,7 @@ describe("calcite-list", () => { await page.waitForChanges(); const list = await page.find("calcite-list"); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(listDebounceInMs); expect(await list.getProperty("filteredItems")).toHaveLength(3); expect(await list.getProperty("filteredData")).toHaveLength(3); @@ -518,7 +515,7 @@ describe("calcite-list", () => { const list = await page.find("calcite-list"); list.setProperty("filterProps", ["label", "description"]); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(listDebounceInMs); expect(await list.getProperty("filteredItems")).toHaveLength(2); expect(await list.getProperty("filteredData")).toHaveLength(2); @@ -543,7 +540,7 @@ describe("calcite-list", () => { `, ); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(listDebounceInMs); const list = await page.find("calcite-list"); const items = await page.findAll("calcite-list-item"); @@ -558,7 +555,7 @@ describe("calcite-list", () => { await items[0].click(); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(listDebounceInMs); expect(eventSpy).toHaveReceivedEventTimes(1); expect(await list.getProperty("selectedItems")).toHaveLength(1); @@ -569,7 +566,7 @@ describe("calcite-list", () => { await page.$eval("#item-4", clickItemContent, `.${ListItemCSS.contentContainer}`); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(listDebounceInMs); expect(eventSpy).toHaveReceivedEventTimes(2); expect(await list.getProperty("selectedItems")).toHaveLength(4); @@ -581,7 +578,7 @@ describe("calcite-list", () => { await items[3].click(); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(listDebounceInMs); expect(eventSpy).toHaveReceivedEventTimes(3); expect(await list.getProperty("selectedItems")).toHaveLength(3); @@ -592,7 +589,7 @@ describe("calcite-list", () => { await page.$eval("#item-1", clickItemContent, `.${ListItemCSS.contentContainer}`); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(listDebounceInMs); expect(eventSpy).toHaveReceivedEventTimes(4); expect(await list.getProperty("selectedItems")).toHaveLength(0); @@ -612,7 +609,7 @@ describe("calcite-list", () => { `, ); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(listDebounceInMs); const list = await page.find("calcite-list"); const items = await page.findAll("calcite-list-item"); @@ -626,7 +623,7 @@ describe("calcite-list", () => { await items[1].click(); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(listDebounceInMs); expect(eventSpy).toHaveReceivedEventTimes(1); expect(await items[0].getProperty("active")).toBe(false); @@ -645,7 +642,7 @@ describe("calcite-list", () => { ); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(listDebounceInMs); const items = await page.findAll("calcite-list-item"); @@ -658,7 +655,7 @@ describe("calcite-list", () => { await items[2].click(); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(listDebounceInMs); expect(eventSpy).toHaveReceivedEventTimes(1); expect(await items[0].getProperty("selected")).toBe(false); @@ -677,7 +674,7 @@ describe("calcite-list", () => { ); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(listDebounceInMs); const items = await page.findAll("calcite-list-item"); @@ -690,7 +687,7 @@ describe("calcite-list", () => { await items[2].click(); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(listDebounceInMs); expect(eventSpy).toHaveReceivedEventTimes(1); expect(await items[0].getProperty("selected")).toBe(false); @@ -700,7 +697,7 @@ describe("calcite-list", () => { await items[0].click(); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(listDebounceInMs); expect(eventSpy).toHaveReceivedEventTimes(2); expect(await items[0].getProperty("selected")).toBe(true); @@ -738,13 +735,13 @@ describe("calcite-list", () => { listItemOne.setProperty("selected", true); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(listDebounceInMs); expect(await listItemOne.getProperty("selected")).toBe(true); expect(await list.getProperty("selectedItems")).toHaveLength(1); listItemOne.setProperty("selected", false); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(listDebounceInMs); expect(await listItemOne.getProperty("selected")).toBe(false); expect(await list.getProperty("selectedItems")).toHaveLength(0); }); @@ -829,7 +826,7 @@ describe("calcite-list", () => { const listItemThree = await page.find("#three"); listItemThree.setProperty("disabled", false); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(listDebounceInMs); expect(calciteListChange).toHaveReceivedEventTimes(0); await list.press("ArrowDown"); @@ -839,7 +836,7 @@ describe("calcite-list", () => { const listItemFour = await page.find("#four"); listItemFour.setProperty("closed", false); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(listDebounceInMs); expect(calciteListChange).toHaveReceivedEventTimes(0); await list.press("ArrowDown"); @@ -869,7 +866,7 @@ describe("calcite-list", () => { `); await page.waitForChanges(); const list = await page.find("calcite-list"); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(listDebounceInMs); await list.callMethod("setFocus"); await page.waitForChanges(); @@ -1111,7 +1108,7 @@ describe("calcite-list", () => { await secondDragHandle.click(); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(listDebounceInMs); expect(await items[0].getProperty("active")).toBe(false); expect(await items[1].getProperty("active")).toBe(true); @@ -1131,7 +1128,7 @@ describe("calcite-list", () => { `, ); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(listDebounceInMs); return page; } @@ -1448,7 +1445,7 @@ describe("calcite-list", () => { await page.keyboard.press("ArrowDown"); await page.waitForChanges(); expect(await handle.getProperty("selected")).toBe(true); - await page.waitForTimeout(debounceTimeout); + await page.waitForTimeout(noDebounce); startIndex += 1; const changeHandleLabel = await getAriaLabel(); diff --git a/packages/calcite-components/src/demos/action.html b/packages/calcite-components/src/demos/action.html index a3a3d6d26f3..8a4a02bdf3d 100644 --- a/packages/calcite-components/src/demos/action.html +++ b/packages/calcite-components/src/demos/action.html @@ -72,17 +72,25 @@
action with text
- - Hello World! - +
+ + + + + + + + + + + + + + + + +
diff --git a/packages/calcite-components/src/utils/debounceValues.ts b/packages/calcite-components/src/utils/debounceValues.ts new file mode 100644 index 00000000000..644558603ef --- /dev/null +++ b/packages/calcite-components/src/utils/debounceValues.ts @@ -0,0 +1,32 @@ +// Resizing Debounce +// - Usecase: The `debounce` function ensures that the `resize` method is not called more often than the specified milliseconds, regardless of how frequently the resize event is triggered. +// - Use in the Component: + +// Action-bar resize method is called with debounce when it overflows actions that won't fit into menus. +export const overflowActionsDebounceInMs = 150; +export const overflowActionsDebounceInMsExtended = overflowActionsDebounceInMs + 10; + +// Filtering Debounce +// - UseCase: As the user types to filter the options, each keystroke could potentially trigger a filtering operation. By debouncing, the code waits until the user pauses typing before executing the filtering logic, thereby reducing the number of executions and improving performance. +// - Use in the Component: + +// Combobox filtering method is called with debounce. +export const comboboxFilterDebounceInMs = 100; + +// Filter `updateFiltered` method is called with debounce. +export const filterDebounceInMs = 250; + +// List `updateListItems` method is called with debounce. +export const noDebounce = 0; +export const listDebounceInMs = noDebounce + filterDebounceInMs; + +// UI Reposition Debounce- UseCase: In scenarios where multiple reposition requests might be made in quick succession (e.g., due to rapid UI changes), calling debounce helps in optimizing performance by reducing unnecessary computations and re-renderings. +// - Use in the Component: +// Floating-ui `positionFloatingUI` is called with debounce. +export const repositionDebounceInMs = 100; + +// Drag Debounce +// UseCase: Methods can fire frequently during drag. To perform expensive operations consider using a debounce to avoid locking up the main thread. +// Use in the Component: + +// TODO: Slider `calciteSliderInput` diff --git a/packages/calcite-components/src/utils/floating-ui.spec.ts b/packages/calcite-components/src/utils/floating-ui.spec.ts index 8562a9f99f9..b455b7e4486 100644 --- a/packages/calcite-components/src/utils/floating-ui.spec.ts +++ b/packages/calcite-components/src/utils/floating-ui.spec.ts @@ -1,4 +1,5 @@ import { waitForAnimationFrame } from "../tests/utils"; +import { repositionDebounceInMs } from "./debounceValues"; import * as floatingUI from "./floating-ui"; import { FloatingUIComponent } from "./floating-ui"; @@ -13,7 +14,6 @@ const { placements, positionFloatingUI, reposition, - repositionDebounceTimeout, } = floatingUI; it("should set calcite placement to FloatingUI placement", () => { @@ -122,7 +122,7 @@ describe("repositioning", () => { assertPreOpenPositioning(floatingEl); - await new Promise((resolve) => setTimeout(resolve, repositionDebounceTimeout)); + await new Promise((resolve) => setTimeout(resolve, repositionDebounceInMs)); assertOpenPositioning(floatingEl); }); @@ -139,7 +139,7 @@ describe("repositioning", () => { floatingUI.reposition(anotherFakeFloatingUiComponent, positionOptions, true); expect(positionSpy).toHaveBeenCalledTimes(2); - await new Promise((resolve) => setTimeout(resolve, repositionDebounceTimeout)); + await new Promise((resolve) => setTimeout(resolve, repositionDebounceInMs)); expect(positionSpy).toHaveBeenCalledTimes(2); }); }); diff --git a/packages/calcite-components/src/utils/floating-ui.ts b/packages/calcite-components/src/utils/floating-ui.ts index 00275044003..6cf57c3718d 100644 --- a/packages/calcite-components/src/utils/floating-ui.ts +++ b/packages/calcite-components/src/utils/floating-ui.ts @@ -18,6 +18,7 @@ import { Build } from "@stencil/core"; import { debounce, DebouncedFunc } from "lodash-es"; import { offsetParent } from "composed-offset-position"; import { Layout } from "../components/interfaces"; +import { repositionDebounceInMs } from "./debounceValues"; import { getElementDir } from "./dom"; (function setUpFloatingUiForShadowDomPositioning(): void { @@ -167,11 +168,6 @@ export const positionFloatingUI = */ export const placementDataAttribute = "data-placement"; -/** - * Exported for testing purposes only - */ -export const repositionDebounceTimeout = 100; - export type ReferenceElement = VirtualElement | Element; type UIType = "menu" | "tooltip" | "popover"; @@ -457,9 +453,9 @@ function getDebouncedReposition(component: FloatingUIComponent): DebouncedFunc