@toolbox-web/grid 0.3.2 → 0.4.0

package/lib/plugins/tree/index.js

@@ -8,7 +8,7 @@ const S = {
   dragHandle: "⋮⋮",
   toolPanel: "☰"
 };
-class K {
+class R {
   /** Plugin version - override in subclass if needed */
   version = "1.0.0";
   /** CSS styles to inject into the grid's shadow DOM */
@@ -25,6 +25,12 @@ class K {
   config;
   /** User-provided configuration from constructor */
   userConfig;
+  /**
+   * Plugin-level AbortController for event listener cleanup.
+   * Created fresh in attach(), aborted in detach().
+   * This ensures event listeners are properly cleaned up when plugins are re-attached.
+   */
+  #e;
   /**
    * Default configuration - subclasses should override this getter.
    * Note: This must be a getter (not property initializer) for proper inheritance
@@ -39,19 +45,48 @@ class K {
   /**
    * Called when the plugin is attached to a grid.
    * Override to set up event listeners, initialize state, etc.
+   *
+   * @example
+   * ```ts
+   * attach(grid: GridElement): void {
+   *   super.attach(grid);
+   *   // Set up document-level listeners with auto-cleanup
+   *   document.addEventListener('keydown', this.handleEscape, {
+   *     signal: this.disconnectSignal
+   *   });
+   * }
+   * ```
    */
   attach(e) {
-    this.grid = e, this.config = { ...this.defaultConfig, ...this.userConfig };
+    this.#e?.abort(), this.#e = new AbortController(), this.grid = e, this.config = { ...this.defaultConfig, ...this.userConfig };
   }
   /**
    * Called when the plugin is detached from a grid.
    * Override to clean up event listeners, timers, etc.
+   *
+   * @example
+   * ```ts
+   * detach(): void {
+   *   // Clean up any state not handled by disconnectSignal
+   *   this.selectedRows.clear();
+   *   this.cache = null;
+   * }
+   * ```
    */
   detach() {
+    this.#e?.abort(), this.#e = void 0;
   }
   /**
    * Get another plugin instance from the same grid.
    * Use for inter-plugin communication.
+   *
+   * @example
+   * ```ts
+   * const selection = this.getPlugin(SelectionPlugin);
+   * if (selection) {
+   *   const selectedRows = selection.getSelectedRows();
+   * }
+   * ```
    */
   getPlugin(e) {
     return this.grid?.getPlugin(e);
@@ -125,7 +160,7 @@ class K {
    * document.addEventListener('keydown', handler, { signal: this.disconnectSignal });
    */
   get disconnectSignal() {
-    return this.grid?.disconnectSignal;
+    return this.#e?.signal ?? this.grid?.disconnectSignal;
   }
   /**
    * Get the grid-level icons configuration.
@@ -164,98 +199,102 @@ class K {
   }
   // #endregion
 }
-function x(o, e, t) {
-  return o.id !== void 0 ? String(o.id) : t ? `${t}-${e}` : String(e);
+function x(i, e, t) {
+  return i.id !== void 0 ? String(i.id) : t ? `${t}-${e}` : String(e);
 }
-function w(o, e) {
-  const t = new Set(o);
+function m(i, e) {
+  const t = new Set(i);
   return t.has(e) ? t.delete(e) : t.add(e), t;
 }
-function p(o, e, t = null, n = 0) {
-  const r = e.childrenField ?? "children", i = /* @__PURE__ */ new Set();
-  for (let s = 0; s < o.length; s++) {
-    const a = o[s], l = x(a, s, t), d = a[r];
-    if (Array.isArray(d) && d.length > 0) {
-      i.add(l);
-      const h = p(d, e, l, n + 1);
-      for (const u of h) i.add(u);
+function p(i, e, t = null, n = 0) {
+  const s = e.childrenField ?? "children", o = /* @__PURE__ */ new Set();
+  for (let r = 0; r < i.length; r++) {
+    const d = i[r], a = x(d, r, t), l = d[s];
+    if (Array.isArray(l) && l.length > 0) {
+      o.add(a);
+      const h = p(l, e, a, n + 1);
+      for (const f of h) o.add(f);
     }
   }
-  return i;
+  return o;
 }
-function R() {
+function C() {
   return /* @__PURE__ */ new Set();
 }
-function b(o, e, t, n = null, r = 0) {
-  const i = t.childrenField ?? "children";
-  for (let s = 0; s < o.length; s++) {
-    const a = o[s], l = x(a, s, n);
-    if (l === e)
-      return [l];
-    const d = a[i];
-    if (Array.isArray(d) && d.length > 0) {
-      const h = b(d, e, t, l, r + 1);
+function A(i, e, t, n = null, s = 0) {
+  const o = t.childrenField ?? "children";
+  for (let r = 0; r < i.length; r++) {
+    const d = i[r], a = x(d, r, n);
+    if (a === e)
+      return [a];
+    const l = d[o];
+    if (Array.isArray(l) && l.length > 0) {
+      const h = A(l, e, t, a, s + 1);
       if (h)
-        return [l, ...h];
+        return [a, ...h];
     }
   }
   return null;
 }
-function C(o, e, t, n) {
-  const r = b(o, e, t);
-  if (!r) return n;
-  const i = new Set(n);
-  for (let s = 0; s < r.length - 1; s++)
-    i.add(r[s]);
-  return i;
+function v(i, e, t, n) {
+  const s = A(i, e, t);
+  if (!s) return n;
+  const o = new Set(n);
+  for (let r = 0; r < s.length - 1; r++)
+    o.add(s[r]);
+  return o;
 }
-function m(o, e = "children") {
-  if (!Array.isArray(o) || o.length === 0) return !1;
-  for (const t of o)
-    if (t && Array.isArray(t[e]) && t[e].length > 0)
+function b(i, e = "children") {
+  if (!Array.isArray(i) || i.length === 0) return !1;
+  for (const t of i) {
+    if (!t) continue;
+    const n = t[e];
+    if (Array.isArray(n) && n.length > 0)
       return !0;
+  }
   return !1;
 }
-function _(o) {
-  if (!Array.isArray(o) || o.length === 0) return null;
+function _(i) {
+  if (!Array.isArray(i) || i.length === 0) return null;
   const e = ["children", "items", "nodes", "subRows", "nested"];
-  for (const t of o)
-    if (!(!t || typeof t != "object")) {
-      for (const n of e)
-        if (Array.isArray(t[n]) && t[n].length > 0)
+  for (const t of i)
+    if (!(!t || typeof t != "object"))
+      for (const n of e) {
+        const s = t[n];
+        if (Array.isArray(s) && s.length > 0)
           return n;
-    }
+      }
   return null;
 }
-function v(o, e = "children", t = 0) {
-  if (!Array.isArray(o) || o.length === 0) return t;
+function E(i, e = "children", t = 0) {
+  if (!Array.isArray(i) || i.length === 0) return t;
   let n = t;
-  for (const r of o) {
-    if (!r) continue;
-    const i = r[e];
-    if (Array.isArray(i) && i.length > 0) {
-      const s = v(i, e, t + 1);
-      s > n && (n = s);
+  for (const s of i) {
+    if (!s) continue;
+    const o = s[e];
+    if (Array.isArray(o) && o.length > 0) {
+      const r = E(o, e, t + 1);
+      r > n && (n = r);
     }
   }
   return n;
 }
-function E(o, e = "children") {
-  if (!Array.isArray(o)) return 0;
+function k(i, e = "children") {
+  if (!Array.isArray(i)) return 0;
   let t = 0;
-  for (const n of o) {
+  for (const n of i) {
     if (!n) continue;
     t++;
-    const r = n[e];
-    Array.isArray(r) && (t += E(r, e));
+    const s = n[e];
+    Array.isArray(s) && (t += k(s, e));
   }
   return t;
 }
-const k = ".tree-cell{display:flex;align-items:center;padding-left:calc(var(--tree-depth, 0) * var(--tbw-tree-indent, 20px))}.tree-toggle{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;margin-right:4px}.tree-toggle:hover{color:var(--tbw-tree-accent, var(--tbw-color-accent))}.tree-spacer{width:14px;display:inline-block}.data-grid-row.tbw-tree-slide-in{animation:tbw-tree-slide-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-tree-slide-in{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}.data-grid-row.tbw-tree-fade-in{animation:tbw-tree-fade-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-tree-fade-in{0%{opacity:0}to{opacity:1}}";
-class T extends K {
+const T = ".tree-cell{display:flex;align-items:center;padding-left:calc(var(--tree-depth, 0) * var(--tbw-tree-indent, 20px))}.tree-toggle{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;margin-right:4px}.tree-toggle:hover{color:var(--tbw-tree-accent, var(--tbw-color-accent))}.tree-spacer{width:14px;display:inline-block}.data-grid-row.tbw-tree-slide-in{animation:tbw-tree-slide-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-tree-slide-in{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}.data-grid-row.tbw-tree-fade-in{animation:tbw-tree-fade-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-tree-fade-in{0%{opacity:0}to{opacity:1}}";
+class F extends R {
   name = "tree";
   version = "1.0.0";
-  styles = k;
+  styles = T;
   get defaultConfig() {
     return {
       childrenField: "children",
@@ -293,103 +332,103 @@ class T extends K {
   // #region Auto-Detection
   detect(e) {
     if (!this.config.autoDetect) return !1;
-    const t = this.config.childrenField ?? _(e) ?? "children";
-    return m(e, t);
+    const t = e, n = this.config.childrenField ?? _(t) ?? "children";
+    return b(t, n);
   }
   // #endregion
   // #region Data Processing
   processRows(e) {
-    const t = this.config.childrenField ?? "children";
-    if (!m(e, t))
+    const t = this.config.childrenField ?? "children", n = e;
+    if (!b(n, t))
       return this.flattenedRows = [], this.rowKeyMap.clear(), this.previousVisibleKeys.clear(), [...e];
-    let n = this.withStableKeys(e);
-    this.sortState && (n = this.sortTree(n, this.sortState.field, this.sortState.direction)), this.config.defaultExpanded && !this.initialExpansionDone && (this.expandedKeys = p(n, this.config), this.initialExpansionDone = !0), this.flattenedRows = this.flattenTree(n, this.expandedKeys), this.rowKeyMap.clear(), this.keysToAnimate.clear();
-    const r = /* @__PURE__ */ new Set();
-    for (const i of this.flattenedRows)
-      this.rowKeyMap.set(i.key, i), r.add(i.key), !this.previousVisibleKeys.has(i.key) && i.depth > 0 && this.keysToAnimate.add(i.key);
-    return this.previousVisibleKeys = r, this.flattenedRows.map((i) => ({
-      ...i.data,
-      __treeKey: i.key,
-      __treeDepth: i.depth,
-      __treeHasChildren: i.hasChildren,
-      __treeExpanded: i.isExpanded
+    let s = this.withStableKeys(n);
+    this.sortState && (s = this.sortTree(s, this.sortState.field, this.sortState.direction)), this.config.defaultExpanded && !this.initialExpansionDone && (this.expandedKeys = p(s, this.config), this.initialExpansionDone = !0), this.flattenedRows = this.flattenTree(s, this.expandedKeys), this.rowKeyMap.clear(), this.keysToAnimate.clear();
+    const o = /* @__PURE__ */ new Set();
+    for (const r of this.flattenedRows)
+      this.rowKeyMap.set(r.key, r), o.add(r.key), !this.previousVisibleKeys.has(r.key) && r.depth > 0 && this.keysToAnimate.add(r.key);
+    return this.previousVisibleKeys = o, this.flattenedRows.map((r) => ({
+      ...r.data,
+      __treeKey: r.key,
+      __treeDepth: r.depth,
+      __treeHasChildren: r.hasChildren,
+      __treeExpanded: r.isExpanded
     }));
   }
   /** Assign stable keys to rows (preserves key across sort operations) */
   withStableKeys(e, t = null) {
     const n = this.config.childrenField ?? "children";
-    return e.map((r, i) => {
-      const s = r.id !== void 0 ? String(r.id) : r.__stableKey ?? (t ? `${t}-${i}` : String(i)), a = r[n], l = Array.isArray(a) && a.length > 0;
+    return e.map((s, o) => {
+      const r = s.__stableKey, d = s.id !== void 0 ? String(s.id) : r ?? (t ? `${t}-${o}` : String(o)), a = s[n], l = Array.isArray(a) && a.length > 0;
       return {
-        ...r,
-        __stableKey: s,
-        ...l ? { [n]: this.withStableKeys(a, s) } : {}
+        ...s,
+        __stableKey: d,
+        ...l ? { [n]: this.withStableKeys(a, d) } : {}
       };
     });
   }
   /** Flatten tree using stable keys */
   flattenTree(e, t, n = 0) {
-    const r = this.config.childrenField ?? "children", i = [];
-    for (const s of e) {
-      const a = s.__stableKey ?? s.id ?? "?", l = s[r], d = Array.isArray(l) && l.length > 0, h = t.has(a);
-      i.push({
+    const s = this.config.childrenField ?? "children", o = [];
+    for (const r of e) {
+      const a = r.__stableKey ?? String(r.id ?? "?"), l = r[s], h = Array.isArray(l) && l.length > 0, f = t.has(a);
+      o.push({
         key: a,
-        data: s,
+        data: r,
         depth: n,
-        hasChildren: d,
-        isExpanded: h,
+        hasChildren: h,
+        isExpanded: f,
         parentKey: n > 0 && a.substring(0, a.lastIndexOf("-")) || null
-      }), d && h && i.push(...this.flattenTree(l, t, n + 1));
+      }), h && f && o.push(...this.flattenTree(l, t, n + 1));
     }
-    return i;
+    return o;
   }
   /** Sort tree recursively, keeping children with parents */
   sortTree(e, t, n) {
-    const r = this.config.childrenField ?? "children";
-    return [...e].sort((s, a) => {
-      const l = s[t], d = a[t];
-      return l == null && d == null ? 0 : l == null ? -1 : d == null ? 1 : l > d ? n : l < d ? -n : 0;
-    }).map((s) => {
-      const a = s[r];
-      return Array.isArray(a) && a.length > 0 ? { ...s, [r]: this.sortTree(a, t, n) } : s;
+    const s = this.config.childrenField ?? "children";
+    return [...e].sort((r, d) => {
+      const a = r[t], l = d[t];
+      return a == null && l == null ? 0 : a == null ? -1 : l == null ? 1 : a > l ? n : a < l ? -n : 0;
+    }).map((r) => {
+      const d = r[s];
+      return Array.isArray(d) && d.length > 0 ? { ...r, [s]: this.sortTree(d, t, n) } : r;
     });
   }
   processColumns(e) {
     if (this.flattenedRows.length === 0) return [...e];
     const t = [...e];
     if (t.length === 0) return t;
-    const n = { ...t[0] }, r = n.viewRenderer;
-    if (r?.__treeWrapped) return t;
-    const i = () => this.config, s = this.setIcon.bind(this), a = this.resolveIcon.bind(this), l = (d) => {
-      const { value: h, row: u } = d, { indentWidth: A = 20, showExpandIcons: y = !0 } = i(), f = document.createElement("span");
-      if (f.className = "tree-cell", f.style.setProperty("--tree-depth", String(u.__treeDepth ?? 0)), f.style.setProperty("--tbw-tree-indent", `${A}px`), u.__treeHasChildren && y) {
+    const n = { ...t[0] }, s = n.viewRenderer;
+    if (s?.__treeWrapped) return t;
+    const o = () => this.config, r = this.setIcon.bind(this), d = this.resolveIcon.bind(this), a = (l) => {
+      const { value: h, row: f } = l, { indentWidth: K = 20, showExpandIcons: w = !0 } = o(), g = f, u = document.createElement("span");
+      if (u.className = "tree-cell", u.style.setProperty("--tree-depth", String(g.__treeDepth ?? 0)), u.style.setProperty("--tbw-tree-indent", `${K}px`), g.__treeHasChildren && w) {
         const c = document.createElement("span");
-        c.className = `tree-toggle${u.__treeExpanded ? " expanded" : ""}`, s(c, a(u.__treeExpanded ? "collapse" : "expand")), c.setAttribute("data-tree-key", u.__treeKey), f.appendChild(c);
-      } else if (y) {
+        c.className = `tree-toggle${g.__treeExpanded ? " expanded" : ""}`, r(c, d(g.__treeExpanded ? "collapse" : "expand")), c.setAttribute("data-tree-key", String(g.__treeKey ?? "")), u.appendChild(c);
+      } else if (w) {
         const c = document.createElement("span");
-        c.className = "tree-spacer", f.appendChild(c);
+        c.className = "tree-spacer", u.appendChild(c);
       }
-      const g = document.createElement("span");
-      if (r) {
-        const c = r(d);
-        c instanceof Node ? g.appendChild(c) : g.textContent = String(c ?? h ?? "");
+      const y = document.createElement("span");
+      if (s) {
+        const c = s(l);
+        c instanceof Node ? y.appendChild(c) : y.textContent = String(c ?? h ?? "");
       } else
-        g.textContent = String(h ?? "");
-      return f.appendChild(g), f;
+        y.textContent = String(h ?? "");
+      return u.appendChild(y), u;
     };
-    return l.__treeWrapped = !0, n.viewRenderer = l, t[0] = n, t;
+    return a.__treeWrapped = !0, n.viewRenderer = a, t[0] = n, t;
   }
   // #endregion
   // #region Event Handlers
   onCellClick(e) {
     const t = e.originalEvent?.target;
     if (!t?.classList.contains("tree-toggle")) return !1;
-    const n = t.getAttribute("data-tree-key"), r = n ? this.rowKeyMap.get(n) : null;
-    return r ? (this.expandedKeys = w(this.expandedKeys, n), this.emit("tree-expand", {
+    const n = t.getAttribute("data-tree-key"), s = n ? this.rowKeyMap.get(n) : null;
+    return s ? (this.expandedKeys = m(this.expandedKeys, n), this.emit("tree-expand", {
       key: n,
-      row: r.data,
+      row: s.data,
       expanded: this.expandedKeys.has(n),
-      depth: r.depth
+      depth: s.depth
     }), this.requestRender(), !0) : !1;
   }
   onHeaderClick(e) {
@@ -405,9 +444,9 @@ class T extends K {
     const t = this.shadowRoot?.querySelector(".rows");
     if (!t) return;
     const n = e === "fade" ? "tbw-tree-fade-in" : "tbw-tree-slide-in";
-    for (const r of t.querySelectorAll(".data-grid-row")) {
-      const i = r.querySelector(".cell[data-row]"), s = i ? parseInt(i.getAttribute("data-row") ?? "-1", 10) : -1, a = this.flattenedRows[s]?.key;
-      a && this.keysToAnimate.has(a) && (r.classList.add(n), r.addEventListener("animationend", () => r.classList.remove(n), { once: !0 }));
+    for (const s of t.querySelectorAll(".data-grid-row")) {
+      const o = s.querySelector(".cell[data-row]"), r = o ? parseInt(o.getAttribute("data-row") ?? "-1", 10) : -1, d = this.flattenedRows[r]?.key;
+      d && this.keysToAnimate.has(d) && (s.classList.add(n), s.addEventListener("animationend", () => s.classList.remove(n), { once: !0 }));
     }
     this.keysToAnimate.clear();
   }
@@ -420,13 +459,13 @@ class T extends K {
     this.expandedKeys.delete(e), this.requestRender();
   }
   toggle(e) {
-    this.expandedKeys = w(this.expandedKeys, e), this.requestRender();
+    this.expandedKeys = m(this.expandedKeys, e), this.requestRender();
   }
   expandAll() {
     this.expandedKeys = p(this.rows, this.config), this.requestRender();
   }
   collapseAll() {
-    this.expandedKeys = R(), this.requestRender();
+    this.expandedKeys = C(), this.requestRender();
   }
   isExpanded(e) {
     return this.expandedKeys.has(e);
@@ -441,15 +480,15 @@ class T extends K {
     return this.rowKeyMap.get(e)?.data;
   }
   expandToKey(e) {
-    this.expandedKeys = C(this.rows, e, this.config, this.expandedKeys), this.requestRender();
+    this.expandedKeys = v(this.rows, e, this.config, this.expandedKeys), this.requestRender();
   }
   // #endregion
 }
 export {
-  T as TreePlugin,
-  E as countNodes,
-  m as detectTreeStructure,
-  v as getMaxDepth,
+  F as TreePlugin,
+  k as countNodes,
+  b as detectTreeStructure,
+  E as getMaxDepth,
   _ as inferChildrenField
 };
 //# sourceMappingURL=index.js.map