forge-select 0.5.0 → 0.6.0

package/dist/index.js

@@ -157,6 +157,7 @@ function normalizeRemoteResult(ajax, response) {
 }
 
 // src/remote-cache.ts
+var REMOTE_CACHE_LIMIT = 50;
 var RemoteCache = class {
   constructor() {
     this.entries = /* @__PURE__ */ new Map();
@@ -171,7 +172,12 @@ var RemoteCache = class {
     return entry.value;
   }
   set(key, value, ttl, now = Date.now()) {
-    if (ttl > 0) this.entries.set(key, { value, expiresAt: now + ttl });
+    if (ttl <= 0) return;
+    if (this.entries.size >= REMOTE_CACHE_LIMIT && !this.entries.has(key)) {
+      const oldest = this.entries.keys().next().value;
+      this.entries.delete(oldest);
+    }
+    this.entries.set(key, { value, expiresAt: now + ttl });
   }
   clear() {
     this.entries.clear();
@@ -305,6 +311,8 @@ var DEFAULT_ITEM_HEIGHT = 36;
 var VIRTUAL_BUFFER = 5;
 var VIRTUAL_THRESHOLD = 100;
 var ROW_CACHE_LIMIT = 2e3;
+var PAGE_SIZE = 10;
+var TYPEAHEAD_RESET_MS = 500;
 var uidCounter = 0;
 var ForgeSelect = class {
   constructor(target, options = {}) {
@@ -322,8 +330,13 @@ var ForgeSelect = class {
     this.rows = [];
     this.navItems = [];
     this.highlightedIndex = -1;
+    this.typeaheadBuffer = "";
+    this.typeaheadTimer = null;
     this.rowContentCache = /* @__PURE__ */ new Map();
     this.rowHeightCache = /* @__PURE__ */ new Map();
+    this.rowOffsetsCache = null;
+    this.scrollRafId = null;
+    this.ancestorScrollRafId = null;
     this.searchIndex = new SearchIndex();
     this.expandedValues = /* @__PURE__ */ new Set();
     this.loading = false;
@@ -352,7 +365,12 @@ var ForgeSelect = class {
       this.positionDropdown();
     };
     this.onAncestorScroll = () => {
-      if (this.portalHost) this.positionDropdown();
+      if (!this.portalHost) return;
+      if (this.ancestorScrollRafId != null) return;
+      this.ancestorScrollRafId = requestAnimationFrame(() => {
+        this.ancestorScrollRafId = null;
+        this.positionDropdown();
+      });
     };
     this.onNativeInvalid = (event) => {
       event.preventDefault();
@@ -471,6 +489,19 @@ var ForgeSelect = class {
     document.removeEventListener("mousedown", this.onDocumentMouseDown);
     window.removeEventListener("resize", this.onWindowResize);
     document.removeEventListener("scroll", this.onAncestorScroll, true);
+    if (this.ancestorScrollRafId != null) {
+      cancelAnimationFrame(this.ancestorScrollRafId);
+      this.ancestorScrollRafId = null;
+    }
+    if (this.scrollRafId != null) {
+      cancelAnimationFrame(this.scrollRafId);
+      this.scrollRafId = null;
+    }
+    if (this.typeaheadTimer) {
+      clearTimeout(this.typeaheadTimer);
+      this.typeaheadTimer = null;
+    }
+    this.typeaheadBuffer = "";
     this.highlightedIndex = -1;
     if (this.searchInput) {
       this.searchInput.value = "";
@@ -503,6 +534,8 @@ var ForgeSelect = class {
     this.destroyed = true;
     if (this.ajaxTimer) clearTimeout(this.ajaxTimer);
     this.ajaxController?.abort();
+    if (this.scrollRafId != null) cancelAnimationFrame(this.scrollRafId);
+    if (this.typeaheadTimer) clearTimeout(this.typeaheadTimer);
     this.nativeSelect?.removeEventListener("change", this.onNativeChange);
     this.nativeSelect?.removeEventListener("invalid", this.onNativeInvalid);
     this.nativeForm?.removeEventListener("reset", this.onFormReset);
@@ -587,6 +620,7 @@ var ForgeSelect = class {
     this.root.classList.toggle("forge-select--sortable", this.opts.sortable && this.opts.multiple);
     this.updateSearchVisibility();
     this.rowContentCache.clear();
+    this.rowHeightCache.clear();
     this.searchIndex.clear();
     this.renderValue();
     if (this.isOpen) this.renderList();
@@ -651,6 +685,7 @@ var ForgeSelect = class {
     this.opts.data = data;
     this.updateSearchVisibility();
     this.rowContentCache.clear();
+    this.rowHeightCache.clear();
     this.searchIndex.clear();
     this.highlightedIndex = -1;
     if (this.isOpen) this.renderList();
@@ -872,8 +907,12 @@ var ForgeSelect = class {
       this.activateNavItem(navIndex);
     });
     this.list.addEventListener("scroll", () => {
-      if (this.usesVirtualScroll()) this.renderRows();
-      this.maybeLoadNextPage();
+      if (this.scrollRafId != null) return;
+      this.scrollRafId = requestAnimationFrame(() => {
+        this.scrollRafId = null;
+        if (this.usesVirtualScroll()) this.renderRows();
+        this.maybeLoadNextPage();
+      });
     });
   }
   applySearchQuery(query, emitSearch) {
@@ -881,7 +920,6 @@ var ForgeSelect = class {
     if (this.searchInput && this.searchInput.value !== query) this.searchInput.value = query;
     this.highlightedIndex = -1;
     this.list.scrollTop = 0;
-    this.rowContentCache.clear();
     if (emitSearch) this.emitter.emit("search", query);
     const trimmed = query.trim();
     const belowMinLength = trimmed !== "" && trimmed.length < this.opts.minSearchLength;
@@ -935,9 +973,63 @@ var ForgeSelect = class {
       case "ArrowLeft":
         if (this.isOpen && this.navigateTree("left")) event.preventDefault();
         break;
+      case "Home":
+        if (this.isOpen) {
+          event.preventDefault();
+          this.focusNavIndex(0);
+        }
+        break;
+      case "End":
+        if (this.isOpen) {
+          event.preventDefault();
+          this.focusNavIndex(this.navItems.length - 1);
+        }
+        break;
+      case "PageDown":
+        if (this.isOpen) {
+          event.preventDefault();
+          this.focusNavIndex(
+            Math.min(this.navItems.length - 1, (this.highlightedIndex === -1 ? 0 : this.highlightedIndex) + PAGE_SIZE)
+          );
+        }
+        break;
+      case "PageUp":
+        if (this.isOpen) {
+          event.preventDefault();
+          this.focusNavIndex(Math.max(0, (this.highlightedIndex === -1 ? 0 : this.highlightedIndex) - PAGE_SIZE));
+        }
+        break;
       case "Tab":
         this.close();
         break;
+      default:
+        if (this.isOpen && event.target === this.control && event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+          this.handleTypeahead(event.key);
+        }
+        break;
+    }
+  }
+  /**
+   * Jumps the highlight to the next nav item (wrapping) whose label starts
+   * with the accumulated buffer, matching native <select> typeahead: rapid
+   * distinct keystrokes narrow the prefix, a pause resets it.
+   */
+  handleTypeahead(char) {
+    if (this.typeaheadTimer) clearTimeout(this.typeaheadTimer);
+    this.typeaheadBuffer += normalizeSearchText(char, this.opts.accentInsensitive);
+    this.typeaheadTimer = setTimeout(() => {
+      this.typeaheadBuffer = "";
+      this.typeaheadTimer = null;
+    }, TYPEAHEAD_RESET_MS);
+    const prefix = [...this.typeaheadBuffer].every((value) => value === this.typeaheadBuffer[0]) ? this.typeaheadBuffer[0] : this.typeaheadBuffer;
+    const count = this.navItems.length;
+    for (let step = 1; step <= count; step += 1) {
+      const index = (this.highlightedIndex + step + count) % count;
+      const item = this.navItems[index];
+      if (item.kind === "option" && normalizeSearchText(item.option.label, this.opts.accentInsensitive).startsWith(prefix)) {
+        this.focusNavIndex(index);
+        return;
+      }
     }
   }
   // ---------------------------------------------------------------- selection
@@ -1028,7 +1120,10 @@ var ForgeSelect = class {
       this.control.classList.remove("forge-select__control--invalid");
       this.control.removeAttribute("aria-invalid");
     }
-    if (this.isOpen) this.renderList();
+    if (this.isOpen) {
+      if (this.opts.maxSelections != null) this.renderList();
+      else this.renderRows();
+    }
     if (emitChange) this.emitter.emit("change", this.getValue());
   }
   syncNativeSelect(dispatchChange = true) {
@@ -1115,6 +1210,7 @@ var ForgeSelect = class {
     if (result.created) this.emitter.emit("create", result.option);
     this.emitter.emit("select", result.option);
     if (!this.opts.multiple || this.opts.closeOnSelect) this.close();
+    else if (this.isOpen) this.renderList();
   }
   activateNavItem(navIndex) {
     const item = this.navItems[navIndex];
@@ -1289,6 +1385,7 @@ var ForgeSelect = class {
   buildRows() {
     this.rows = [];
     this.navItems = [];
+    this.rowOffsetsCache = null;
     const trimmedQuery = this.query.trim();
     const query = normalizeSearchText(trimmedQuery, this.opts.accentInsensitive);
     const matches = (option) => query === "" || (this.opts.filterOption ? this.opts.filterOption(option, trimmedQuery) : this.searchIndex.score(option, trimmedQuery, {
@@ -1367,8 +1464,10 @@ var ForgeSelect = class {
     return offset;
   }
   rowOffsets() {
+    if (this.rowOffsetsCache) return this.rowOffsetsCache;
     const offsets = [0];
     for (let i = 0; i < this.rows.length; i += 1) offsets.push(offsets[i] + this.measuredRowHeight(i));
+    this.rowOffsetsCache = offsets;
     return offsets;
   }
   renderList() {
@@ -1408,12 +1507,21 @@ var ForgeSelect = class {
       topSpacer.style.height = `${offsets?.[start] ?? this.rowOffset(start)}px`;
       this.list.append(topSpacer);
     }
+    const appended = [];
     for (let i = start; i < end; i++) {
       const element = this.renderRow(this.rows[i]);
       this.list.append(element);
-      if (this.opts.variableItemHeight) {
+      appended.push(element);
+    }
+    if (this.opts.variableItemHeight) {
+      for (let i = start; i < end; i++) {
+        const element = appended[i - start];
         const measured = element.getBoundingClientRect().height || element.offsetHeight;
-        if (measured > 0) this.rowHeightCache.set(this.rowKey(this.rows[i], i), measured);
+        if (measured > 0) {
+          const key = this.rowKey(this.rows[i], i);
+          if (this.rowHeightCache.get(key) !== measured) this.rowOffsetsCache = null;
+          this.rowHeightCache.set(key, measured);
+        }
       }
     }
     if (virtual) {
@@ -1565,6 +1673,7 @@ var ForgeSelect = class {
     this.focusNavIndex(next);
   }
   focusNavIndex(next) {
+    if (this.navItems.length === 0) return;
     this.highlightedIndex = next;
     if (this.usesVirtualScroll()) {
       const rowIndex = this.rows.findIndex(
@@ -1734,6 +1843,7 @@ var ForgeSelect = class {
       } else {
         this.data = options;
         this.rowContentCache.clear();
+        this.rowHeightCache.clear();
       }
       this.page = page;
       this.hasMore = hasMore;
@@ -1745,6 +1855,7 @@ var ForgeSelect = class {
       if (!append) {
         this.data = [];
         this.rowContentCache.clear();
+        this.rowHeightCache.clear();
       }
       this.hasMore = false;
       this.loadError = error;