@dso-toolkit/core 97.1.1 → 99.0.0

package/dist/collection/components/autosuggest/autosuggest.js

@@ -56,7 +56,7 @@ export class Autosuggest {
         this.listboxId = v4();
         this.inputId = v4();
         this.labelId = v4();
-        this.resizeObserver = new ResizeObserver(debounce(() => this.setListboxContainerMaxBlockSize(), 150));
+        this.resizeObserver = new ResizeObserver(debounce(() => this.scheduleListboxContainerMaxBlockSizeUpdate(), 150));
         this.debouncedEmitValue = debounce((value) => {
             this.dsoChange.emit(value);
             this.debouncedShowLoading();
@@ -82,8 +82,8 @@ export class Autosuggest {
             }
         };
         this.text = i18n(() => this.host, translations);
-        this.onWindowResize = debounce(() => this.setListboxContainerMaxBlockSize(), 150);
-        this.onScrollend = () => this.setListboxContainerMaxBlockSize();
+        this.onWindowResize = debounce(() => this.scheduleListboxContainerMaxBlockSizeUpdate(), 150);
+        this.onScrollend = () => this.scheduleListboxContainerMaxBlockSizeUpdate();
         this.onOptionClick = (e) => {
             e.stopPropagation();
             this.pickSelectedValue();
@@ -143,7 +143,7 @@ export class Autosuggest {
         }
     }
     componentDidRender() {
-        this.setListboxContainerMaxBlockSize();
+        this.scheduleListboxContainerMaxBlockSizeUpdate();
     }
     connectedCallback() {
         const input = this.host.querySelector('input[type="text"]');
@@ -188,15 +188,27 @@ export class Autosuggest {
         this.input?.removeEventListener("focusin", this.onFocusIn);
         window.removeEventListener("resize", this.onWindowResize);
         document.removeEventListener("scrollend", this.onScrollend);
+        if (this.listboxContainerMaxBlockSizeFrameId !== undefined) {
+            cancelAnimationFrame(this.listboxContainerMaxBlockSizeFrameId);
+            this.listboxContainerMaxBlockSizeFrameId = undefined;
+        }
         this.resizeObserver.disconnect();
     }
+    scheduleListboxContainerMaxBlockSizeUpdate() {
+        if (this.listboxContainerMaxBlockSizeFrameId !== undefined) {
+            return;
+        }
+        this.listboxContainerMaxBlockSizeFrameId = requestAnimationFrame(() => {
+            this.listboxContainerMaxBlockSizeFrameId = undefined;
+            this.setListboxContainerMaxBlockSize();
+        });
+    }
     setListboxContainerMaxBlockSize() {
         if (!this.listboxContainer || !this.showSuggestions) {
             return;
         }
         if (this.showSuggestions) {
             let blockSizeViewableListItems = 0;
-            let listboxContainerMaxBlockSize = 0;
             // The total number of list items to reserve vertical space for.
             const total = this.listboxItems.length ? Math.min(this.listboxItems.length, maxSuggestionsViewable) : 0;
             for (let i = 0; i < total; i++) {
@@ -205,12 +217,9 @@ export class Autosuggest {
             }
             const availableBlockSize = window.innerHeight - this.host.getBoundingClientRect().bottom;
             const listboxMaxBlockSize = blockSizeViewableListItems + 2 * listboxPaddingBlock + 2 * listboxBorderWidth;
-            if (availableBlockSize < listboxMaxBlockSize || availableBlockSize <= blockSizeViewableListItems) {
-                listboxContainerMaxBlockSize = availableBlockSize - 2 * listboxPaddingBlock;
-            }
-            else {
-                listboxContainerMaxBlockSize = listboxMaxBlockSize;
-            }
+            const listboxContainerMaxBlockSize = availableBlockSize < listboxMaxBlockSize || availableBlockSize <= blockSizeViewableListItems
+                ? availableBlockSize - 2 * listboxPaddingBlock
+                : listboxMaxBlockSize;
             this.listboxContainer.style.setProperty("--_dso-autosuggest-max-block-size", `${listboxContainerMaxBlockSize}px`);
         }
     }
@@ -467,7 +476,7 @@ export class Autosuggest {
         else if (this.input) {
             this.input.removeAttribute("aria-controls");
         }
-        return (h(Fragment, null, h("slot", { key: '5e5ba4adce1ce293f7d15e14796900eb9bdcef08' }), this.loading && this.showLoading ? (h("div", { class: "autosuggest-progress-box" }, h("dso-progress-indicator", { label: this.loadingLabel }))) : (showListbox && (h(Fragment, null, h("dso-scrollable", { class: "listbox-container", ref: (element) => (this.listboxContainer = element) }, h("div", { class: "listbox", role: "listbox", id: this.listboxId, "aria-labelledby": this.labelId, ref: (element) => (this.listbox = element), tabindex: "0" }, (flat &&
+        return (h(Fragment, null, h("slot", { key: '1cd7c93050fbf51796895db760bcaec67e78bd2f' }), this.loading && this.showLoading ? (h("div", { class: "autosuggest-progress-box" }, h("dso-progress-indicator", { label: this.loadingLabel }))) : (showListbox && (h(Fragment, null, h("dso-scrollable", { class: "listbox-container", ref: (element) => (this.listboxContainer = element) }, h("div", { class: "listbox", role: "listbox", id: this.listboxId, "aria-labelledby": this.labelId, ref: (element) => (this.listbox = element), tabindex: "0" }, (flat &&
             this.showSuggestions &&
             this.suggestions &&
             this.suggestions.map((suggestion) => (h(Option, { id: this.listboxItemId(suggestion), mouseEnter: () => this.selectSuggestion(suggestion), mouseLeave: () => this.resetSelectedSuggestion(), click: this.onOptionClick, selected: (suggestion === this.selectedSuggestion).toString(), suggestion: suggestion, ref: (element) => element && this.listboxItems.push(element), markedSuggestion: this.getMarkedSuggestions(suggestion) })))) ||