@toolbox-web/grid 0.0.3 → 0.0.5

package/lib/plugins/filtering/index.js

@@ -1,4 +1,19 @@
-class P {
+function M(f) {
+  const { totalRows: e, viewportHeight: t, scrollTop: r, rowHeight: l, overscan: s } = f, i = Math.ceil(t / l);
+  let n = Math.floor(r / l) - s;
+  n < 0 && (n = 0);
+  let u = n + i + s * 2;
+  return u > e && (u = e), u === e && n > 0 && (n = Math.max(0, u - i - s * 2)), {
+    start: n,
+    end: u,
+    offsetY: n * l,
+    totalHeight: e * l
+  };
+}
+function P(f, e) {
+  return f <= e;
+}
+class V {
   /** Plugin version - override in subclass if needed */
   version = "1.0.0";
   /** CSS styles to inject into the grid's shadow DOM */
@@ -97,6 +112,26 @@ class P {
   get shadowRoot() {
     return this.grid?.shadowRoot ?? null;
   }
+  /**
+   * Get the disconnect signal for event listener cleanup.
+   * This signal is aborted when the grid disconnects from the DOM.
+   * Use this when adding event listeners that should be cleaned up automatically.
+   *
+   * Best for:
+   * - Document/window-level listeners added in attach()
+   * - Listeners on the grid element itself
+   * - Any listener that should persist across renders
+   *
+   * Not needed for:
+   * - Listeners on elements created in afterRender() (removed with element)
+   *
+   * @example
+   * element.addEventListener('click', handler, { signal: this.disconnectSignal });
+   * document.addEventListener('keydown', handler, { signal: this.disconnectSignal });
+   */
+  get disconnectSignal() {
+    return this.grid?.disconnectSignal;
+  }
   /**
    * Log a warning message.
    */
@@ -104,21 +139,6 @@ class P {
     console.warn(`[tbw-grid:${this.name}] ${e}`);
   }
 }
-function A(f) {
-  const { totalRows: e, viewportHeight: t, scrollTop: r, rowHeight: l, overscan: s } = f, i = Math.ceil(t / l);
-  let n = Math.floor(r / l) - s;
-  n < 0 && (n = 0);
-  let u = n + i + s * 2;
-  return u > e && (u = e), u === e && n > 0 && (n = Math.max(0, u - i - s * 2)), {
-    start: n,
-    end: u,
-    offsetY: n * l,
-    totalHeight: e * l
-  };
-}
-function V(f, e) {
-  return f <= e;
-}
 function _(f, e, t = !1) {
   const r = f[e.field];
   if (e.operator === "blank")
@@ -174,7 +194,7 @@ function B(f) {
     }))
   );
 }
-function M(f, e) {
+function H(f, e) {
   const t = /* @__PURE__ */ new Set();
   for (const r of f) {
     const l = r[e];
@@ -324,7 +344,7 @@ const z = `
   background: var(--tbw-filter-hover, var(--tbw-color-row-hover, light-dark(#f0f6ff, #1c1c1c)));
 }
 `;
-class y extends P {
+class x extends V {
   name = "filtering";
   version = "1.0.0";
   get defaultConfig() {
@@ -344,7 +364,8 @@ class y extends P {
   panelElement = null;
   searchText = /* @__PURE__ */ new Map();
   excludedValues = /* @__PURE__ */ new Map();
-  documentClickHandler = null;
+  panelAbortController = null;
+  // For panel-scoped listeners
   globalStylesInjected = !1;
   // Virtualization constants for filter value list
   static LIST_ITEM_HEIGHT = 28;
@@ -356,7 +377,7 @@ class y extends P {
     super.attach(e), this.injectGlobalStyles();
   }
   detach() {
-    this.filters.clear(), this.cachedResult = null, this.cacheKey = null, this.openPanelField = null, this.panelElement && (this.panelElement.remove(), this.panelElement = null), this.searchText.clear(), this.excludedValues.clear(), this.removeDocumentClickHandler();
+    this.filters.clear(), this.cachedResult = null, this.cacheKey = null, this.openPanelField = null, this.panelElement && (this.panelElement.remove(), this.panelElement = null), this.searchText.clear(), this.excludedValues.clear(), this.panelAbortController?.abort(), this.panelAbortController = null;
   }
   // ===== Hooks =====
   processRows(e) {
@@ -468,7 +489,7 @@ class y extends P {
    * Uses sourceRows to include all values regardless of current filter.
    */
   getUniqueValues(e) {
-    return M(this.sourceRows, e);
+    return H(this.sourceRows, e);
   }
   // ===== Private Methods =====
   /**
@@ -494,7 +515,7 @@ class y extends P {
     this.closeFilterPanel();
     const l = document.createElement("div");
     l.className = "tbw-filter-panel", this.panelElement = l, this.openPanelField = e;
-    const s = M(this.sourceRows, e);
+    const s = H(this.sourceRows, e);
     let i = this.excludedValues.get(e);
     i || (i = /* @__PURE__ */ new Set(), this.excludedValues.set(e, i));
     const n = this.searchText.get(e) ?? "", u = {
@@ -503,11 +524,11 @@ class y extends P {
       uniqueValues: s,
       excludedValues: i,
       searchText: n,
-      applySetFilter: (m) => {
-        this.applySetFilter(e, m), this.closeFilterPanel();
+      applySetFilter: (h) => {
+        this.applySetFilter(e, h), this.closeFilterPanel();
       },
-      applyTextFilter: (m, k, w) => {
-        this.applyTextFilter(e, m, k, w), this.closeFilterPanel();
+      applyTextFilter: (h, E, C) => {
+        this.applyTextFilter(e, h, E, C), this.closeFilterPanel();
       },
       clearFilter: () => {
         this.clearFieldFilter(e), this.closeFilterPanel();
@@ -515,25 +536,21 @@ class y extends P {
       closePanel: () => this.closeFilterPanel()
     };
     let g = !1;
-    this.config.filterPanelRenderer && (this.config.filterPanelRenderer(l, u), g = l.children.length > 0), g || this.renderDefaultFilterPanel(l, u, s, i), document.body.appendChild(l), this.positionPanel(l, r);
-    const p = (m) => {
-      !l.contains(m.target) && m.target !== r && this.closeFilterPanel();
-    };
-    this.documentClickHandler = p, setTimeout(() => {
-      document.addEventListener("click", p);
+    this.config.filterPanelRenderer && (this.config.filterPanelRenderer(l, u), g = l.children.length > 0), g || this.renderDefaultFilterPanel(l, u, s, i), document.body.appendChild(l), this.positionPanel(l, r), this.panelAbortController = new AbortController(), setTimeout(() => {
+      document.addEventListener(
+        "click",
+        (h) => {
+          !l.contains(h.target) && h.target !== r && this.closeFilterPanel();
+        },
+        { signal: this.panelAbortController?.signal }
+      );
     }, 0);
   }
   /**
    * Close the filter panel
    */
   closeFilterPanel() {
-    this.panelElement && (this.panelElement.remove(), this.panelElement = null), this.openPanelField = null, this.removeDocumentClickHandler();
-  }
-  /**
-   * Remove the document click handler
-   */
-  removeDocumentClickHandler() {
-    this.documentClickHandler && (document.removeEventListener("click", this.documentClickHandler), this.documentClickHandler = null);
+    this.panelElement && (this.panelElement.remove(), this.panelElement = null), this.openPanelField = null, this.panelAbortController?.abort(), this.panelAbortController = null;
   }
   /**
    * Position the panel below the button
@@ -557,92 +574,92 @@ class y extends P {
     u.className = "tbw-filter-actions";
     const g = document.createElement("label");
     g.className = "tbw-filter-value-item", g.style.padding = "0", g.style.margin = "0";
-    const p = document.createElement("input");
-    p.type = "checkbox", p.className = "tbw-filter-checkbox";
-    const m = document.createElement("span");
-    m.textContent = "Select All", g.appendChild(p), g.appendChild(m), u.appendChild(g);
-    const k = () => {
-      const a = [...x.values()], d = a.every((c) => c), h = a.every((c) => !c);
-      p.checked = d, p.indeterminate = !d && !h;
+    const h = document.createElement("input");
+    h.type = "checkbox", h.className = "tbw-filter-checkbox";
+    const E = document.createElement("span");
+    E.textContent = "Select All", g.appendChild(h), g.appendChild(E), u.appendChild(g);
+    const C = () => {
+      const a = [...v.values()], d = a.every((c) => c), p = a.every((c) => !c);
+      h.checked = d, h.indeterminate = !d && !p;
     };
-    p.addEventListener("change", () => {
-      const a = p.checked;
-      for (const d of x.keys())
-        x.set(d, a);
-      k(), F();
+    h.addEventListener("change", () => {
+      const a = h.checked;
+      for (const d of v.keys())
+        v.set(d, a);
+      C(), F();
     }), e.appendChild(u);
-    const w = document.createElement("div");
-    w.className = "tbw-filter-values";
-    const E = document.createElement("div");
-    E.className = "tbw-filter-values-spacer", w.appendChild(E);
+    const m = document.createElement("div");
+    m.className = "tbw-filter-values";
+    const R = document.createElement("div");
+    R.className = "tbw-filter-values-spacer", m.appendChild(R);
     const b = document.createElement("div");
-    b.className = "tbw-filter-values-content", w.appendChild(b);
-    const x = /* @__PURE__ */ new Map();
+    b.className = "tbw-filter-values-content", m.appendChild(b);
+    const v = /* @__PURE__ */ new Map();
     r.forEach((a) => {
       const d = a == null ? "__null__" : String(a);
-      x.set(d, !l.has(a));
-    }), k();
-    let C = [];
-    const H = (a, d) => {
-      const h = a == null ? "(Blank)" : String(a), c = a == null ? "__null__" : String(a), o = document.createElement("label");
-      o.className = "tbw-filter-value-item", o.style.position = "absolute", o.style.top = `${d * y.LIST_ITEM_HEIGHT}px`, o.style.left = "0", o.style.right = "0", o.style.height = `${y.LIST_ITEM_HEIGHT}px`, o.style.boxSizing = "border-box";
-      const v = document.createElement("input");
-      v.type = "checkbox", v.className = "tbw-filter-checkbox", v.checked = x.get(c) ?? !0, v.dataset.value = c, v.addEventListener("change", () => {
-        x.set(c, v.checked), k();
+      v.set(d, !l.has(a));
+    }), C();
+    let y = [];
+    const I = (a, d) => {
+      const p = a == null ? "(Blank)" : String(a), c = a == null ? "__null__" : String(a), o = document.createElement("label");
+      o.className = "tbw-filter-value-item", o.style.position = "absolute", o.style.top = `${d * x.LIST_ITEM_HEIGHT}px`, o.style.left = "0", o.style.right = "0", o.style.height = `${x.LIST_ITEM_HEIGHT}px`, o.style.boxSizing = "border-box";
+      const w = document.createElement("input");
+      w.type = "checkbox", w.className = "tbw-filter-checkbox", w.checked = v.get(c) ?? !0, w.dataset.value = c, w.addEventListener("change", () => {
+        v.set(c, w.checked), C();
       });
-      const N = document.createElement("span");
-      return N.textContent = h, o.appendChild(v), o.appendChild(N), o;
+      const A = document.createElement("span");
+      return A.textContent = p, o.appendChild(w), o.appendChild(A), o;
     }, F = () => {
-      const a = C.length, d = w.clientHeight, h = w.scrollTop;
-      if (E.style.height = `${a * y.LIST_ITEM_HEIGHT}px`, V(a, y.LIST_BYPASS_THRESHOLD / 3)) {
-        b.innerHTML = "", b.style.transform = "translateY(0px)", C.forEach((o, v) => {
-          b.appendChild(H(o, v));
+      const a = y.length, d = m.clientHeight, p = m.scrollTop;
+      if (R.style.height = `${a * x.LIST_ITEM_HEIGHT}px`, P(a, x.LIST_BYPASS_THRESHOLD / 3)) {
+        b.innerHTML = "", b.style.transform = "translateY(0px)", y.forEach((o, w) => {
+          b.appendChild(I(o, w));
         });
         return;
       }
-      const c = A({
+      const c = M({
         totalRows: a,
         viewportHeight: d,
-        scrollTop: h,
-        rowHeight: y.LIST_ITEM_HEIGHT,
-        overscan: y.LIST_OVERSCAN
+        scrollTop: p,
+        rowHeight: x.LIST_ITEM_HEIGHT,
+        overscan: x.LIST_OVERSCAN
       });
       b.style.transform = `translateY(${c.offsetY}px)`, b.innerHTML = "";
       for (let o = c.start; o < c.end; o++)
-        b.appendChild(H(C[o], o - c.start));
-    }, I = (a) => {
+        b.appendChild(I(y[o], o - c.start));
+    }, N = (a) => {
       const d = a.toLowerCase();
-      if (C = r.filter((h) => {
-        const c = h == null ? "(Blank)" : String(h);
+      if (y = r.filter((p) => {
+        const c = p == null ? "(Blank)" : String(p);
         return !a || c.toLowerCase().includes(d);
-      }), C.length === 0) {
-        E.style.height = "0px", b.innerHTML = "";
-        const h = document.createElement("div");
-        h.className = "tbw-filter-no-match", h.textContent = "No matching values", b.appendChild(h);
+      }), y.length === 0) {
+        R.style.height = "0px", b.innerHTML = "";
+        const p = document.createElement("div");
+        p.className = "tbw-filter-no-match", p.textContent = "No matching values", b.appendChild(p);
         return;
       }
       F();
     };
-    w.addEventListener(
+    m.addEventListener(
       "scroll",
       () => {
-        C.length > 0 && F();
+        y.length > 0 && F();
       },
       { passive: !0 }
-    ), I(n.value), e.appendChild(w);
+    ), N(n.value), e.appendChild(m);
     let L;
     n.addEventListener("input", () => {
       clearTimeout(L), L = setTimeout(() => {
-        this.searchText.set(s, n.value), I(n.value);
+        this.searchText.set(s, n.value), N(n.value);
       }, this.config.debounceMs ?? 150);
     });
-    const R = document.createElement("div");
-    R.className = "tbw-filter-buttons";
-    const S = document.createElement("button");
-    S.className = "tbw-filter-apply-btn", S.textContent = "Apply", S.addEventListener("click", () => {
+    const S = document.createElement("div");
+    S.className = "tbw-filter-buttons";
+    const T = document.createElement("button");
+    T.className = "tbw-filter-apply-btn", T.textContent = "Apply", T.addEventListener("click", () => {
       const a = [];
-      for (const [d, h] of x)
-        if (!h)
+      for (const [d, p] of v)
+        if (!p)
           if (d === "__null__")
             a.push(null);
           else {
@@ -650,11 +667,11 @@ class y extends P {
             a.push(c !== void 0 ? c : d);
           }
       t.applySetFilter(a);
-    }), R.appendChild(S);
-    const T = document.createElement("button");
-    T.className = "tbw-filter-clear-btn", T.textContent = "Clear Filter", T.addEventListener("click", () => {
+    }), S.appendChild(T);
+    const k = document.createElement("button");
+    k.className = "tbw-filter-clear-btn", k.textContent = "Clear Filter", k.addEventListener("click", () => {
       t.clearFilter();
-    }), R.appendChild(T), e.appendChild(R);
+    }), S.appendChild(k), e.appendChild(S);
   }
   /**
    * Apply a set filter (exclude values)
@@ -754,6 +771,6 @@ class y extends P {
   `;
 }
 export {
-  y as FilteringPlugin
+  x as FilteringPlugin
 };
 //# sourceMappingURL=index.js.map