forge-select 0.7.0 → 0.7.1

package/dist/index.js

@@ -138,7 +138,7 @@ function renderOptionContent(container, option, template, variant = "row", sanit
 // src/remote.ts
 function buildUrl(ajax, query, page, cursor) {
   if (!ajax.url) throw new Error("ForgeSelect: ajax requires either url or request.");
-  if (typeof ajax.url === "function") return ajax.url(query, page);
+  if (typeof ajax.url === "function") return ajax.url(query, page, cursor);
   if (!ajax.params) return ajax.url;
   const params = new URLSearchParams();
   for (const [key, value] of Object.entries(ajax.params(query, page, cursor))) params.set(key, String(value));
@@ -554,9 +554,7 @@ var ForgeSelect = class {
     this.nativeSelect?.removeEventListener("change", this.onNativeChange);
     this.nativeSelect?.removeEventListener("invalid", this.onNativeInvalid);
     this.nativeForm?.removeEventListener("reset", this.onFormReset);
-    this.rowContentCache.clear();
-    this.rowElementCache.clear();
-    this.rowHeightCache.clear();
+    this.clearRowCaches();
     this.searchIndex.clear();
     this.portalHost?.remove();
     this.root.remove();
@@ -648,9 +646,7 @@ var ForgeSelect = class {
     }
     this.root.classList.toggle("forge-select--sortable", this.opts.sortable && this.opts.multiple);
     this.updateSearchVisibility();
-    this.rowContentCache.clear();
-    this.rowElementCache.clear();
-    this.rowHeightCache.clear();
+    this.clearRowCaches();
     this.searchIndex.clear();
     this.renderValue();
     if (this.isOpen) this.renderList();
@@ -734,9 +730,7 @@ var ForgeSelect = class {
       this.afterSelectionChange();
     }
     this.updateSearchVisibility();
-    this.rowContentCache.clear();
-    this.rowElementCache.clear();
-    this.rowHeightCache.clear();
+    this.clearRowCaches();
     this.searchIndex.clear();
     this.highlightedIndex = -1;
     if (this.isOpen) this.renderList();
@@ -877,6 +871,7 @@ var ForgeSelect = class {
     if (portalParent) {
       this.portalHost = document.createElement("div");
       this.portalHost.className = "forge-select forge-select--portal-host";
+      this.portalHost.style.direction = getComputedStyle(this.root).direction;
       this.portalHost.dataset.theme = this.opts.theme;
       this.portalHost.style.setProperty("--fs-item-height", `${this.opts.itemHeight}px`);
       this.portalHost.append(this.dropdown);
@@ -1255,6 +1250,7 @@ var ForgeSelect = class {
         this.announceMaximum(existing);
         return void 0;
       }
+      if (this.opts.beforeSelect?.(existing) === false) return void 0;
       this.selectValue(existing.value, false);
       return { option: existing, created: false };
     }
@@ -1273,6 +1269,7 @@ var ForgeSelect = class {
     const duplicate = this.findOption(option.value);
     if (duplicate) {
       if (this.selected.includes(duplicate.value)) return void 0;
+      if (this.opts.beforeSelect?.(duplicate) === false) return void 0;
       this.selectValue(duplicate.value, false);
       return { option: duplicate, created: false };
     }
@@ -1553,6 +1550,18 @@ var ForgeSelect = class {
   usesVirtualScroll() {
     return this.opts.virtualScroll !== false && this.rows.length > VIRTUAL_THRESHOLD;
   }
+  /**
+   * Drops every per-row cache at once. Rendered content, recycled <li>
+   * elements, and measured heights are all keyed off the current `data`, so
+   * they must be invalidated together whenever `data` is replaced — clearing
+   * only some of them leaves recycled rows carrying state from the old list.
+   */
+  clearRowCaches() {
+    this.rowContentCache.clear();
+    this.rowElementCache.clear();
+    this.rowHeightCache.clear();
+    this.rowOffsetsCache = null;
+  }
   rowKey(row, index) {
     if (row.kind === "option") return `option:${row.option.value}:${index}`;
     if (row.kind === "group") return `group:${row.label}:${index}`;
@@ -1666,7 +1675,12 @@ var ForgeSelect = class {
       "aria-expanded",
       "aria-level",
       "data-nav-index",
-      "data-option-value"
+      "data-option-value",
+      "data-selection-state",
+      // Tree rows set an inline padding-left indent; clearing the whole
+      // attribute keeps recycling self-contained, so a row reused at a
+      // shallower depth can't inherit the previous row's indent.
+      "style"
     ])
       li.removeAttribute(attribute);
     switch (row.kind) {
@@ -1716,45 +1730,47 @@ var ForgeSelect = class {
         li.textContent = format(this.strings.createOption, { query: this.query.trim() });
         if (row.navIndex === this.highlightedIndex) li.classList.add("forge-select__option--highlighted");
         break;
-      case "option": {
-        li.className = "forge-select__option";
-        li.dataset.optionValue = row.option.value;
-        if (row.option.className) li.classList.add(...row.option.className.trim().split(/\s+/).filter(Boolean));
-        li.setAttribute("role", "option");
-        const isSelected = this.selected.includes(row.option.value);
-        li.setAttribute("aria-selected", String(isSelected));
-        if (isSelected) li.classList.add("forge-select__option--selected");
-        if (this.opts.multiple && row.hasChildren && computeCheckState(row.option, this.selected, this.isOptionDisabled) === "some") {
-          li.classList.add("forge-select__option--indeterminate");
-          li.dataset.selectionState = "mixed";
-        }
-        if (row.depth > 0) {
-          li.style.paddingLeft = `calc(12px + ${row.depth} * var(--fs-tree-indent, 18px))`;
-        }
-        if (this.isOptionDisabled(row.option) || this.hasReachedMaximum() && !this.selected.includes(row.option.value)) {
-          li.classList.add("forge-select__option--disabled");
-          li.setAttribute("aria-disabled", "true");
-        } else {
-          li.id = `${this.uid}-nav-${row.navIndex}`;
-          li.dataset.navIndex = String(row.navIndex);
-          if (row.navIndex === this.highlightedIndex) li.classList.add("forge-select__option--highlighted");
-        }
-        if (row.hasChildren) {
-          const expanded = this.query !== "" || this.expandedValues.has(row.option.value);
-          li.setAttribute("aria-expanded", String(expanded));
-          const twisty = document.createElement("span");
-          twisty.className = "forge-select__twisty";
-          twisty.dataset.twisty = row.option.value;
-          twisty.setAttribute("aria-hidden", "true");
-          twisty.textContent = expanded ? "\u25BC" : "\u25B6";
-          li.append(twisty);
-        }
-        li.append(this.optionContent(row.option));
+      case "option":
+        this.renderOptionRow(li, row);
         break;
-      }
     }
     return li;
   }
+  renderOptionRow(li, row) {
+    li.className = "forge-select__option";
+    li.dataset.optionValue = row.option.value;
+    if (row.option.className) li.classList.add(...row.option.className.trim().split(/\s+/).filter(Boolean));
+    li.setAttribute("role", "option");
+    const isSelected = this.selected.includes(row.option.value);
+    li.setAttribute("aria-selected", String(isSelected));
+    if (isSelected) li.classList.add("forge-select__option--selected");
+    if (this.opts.multiple && row.hasChildren && computeCheckState(row.option, this.selected, this.isOptionDisabled) === "some") {
+      li.classList.add("forge-select__option--indeterminate");
+      li.dataset.selectionState = "mixed";
+    }
+    if (row.depth > 0) {
+      li.style.paddingLeft = `calc(12px + ${row.depth} * var(--fs-tree-indent, 18px))`;
+    }
+    if (this.isOptionDisabled(row.option) || this.hasReachedMaximum() && !this.selected.includes(row.option.value)) {
+      li.classList.add("forge-select__option--disabled");
+      li.setAttribute("aria-disabled", "true");
+    } else {
+      li.id = `${this.uid}-nav-${row.navIndex}`;
+      li.dataset.navIndex = String(row.navIndex);
+      if (row.navIndex === this.highlightedIndex) li.classList.add("forge-select__option--highlighted");
+    }
+    if (row.hasChildren) {
+      const expanded = this.query !== "" || this.expandedValues.has(row.option.value);
+      li.setAttribute("aria-expanded", String(expanded));
+      const twisty = document.createElement("span");
+      twisty.className = "forge-select__twisty";
+      twisty.dataset.twisty = row.option.value;
+      twisty.setAttribute("aria-hidden", "true");
+      twisty.textContent = expanded ? "\u25BC" : "\u25B6";
+      li.append(twisty);
+    }
+    li.append(this.optionContent(row.option));
+  }
   /**
    * Rendered row content is cached per option value and cloned on each render,
    * so templates run once per option instead of once per scroll frame.
@@ -1987,8 +2003,7 @@ var ForgeSelect = class {
         this.data = [...this.data, ...options.filter((o) => !existing.has(o.value))];
       } else {
         this.data = options;
-        this.rowContentCache.clear();
-        this.rowHeightCache.clear();
+        this.clearRowCaches();
       }
       this.page = page;
       this.hasMore = hasMore;
@@ -2001,8 +2016,7 @@ var ForgeSelect = class {
       const error = cause instanceof Error ? cause : new Error(String(cause));
       if (!append) {
         this.data = [];
-        this.rowContentCache.clear();
-        this.rowHeightCache.clear();
+        this.clearRowCaches();
       }
       this.hasMore = false;
       this.loadError = error;