@toolbox-web/grid 1.9.0 → 1.9.2

package/lib/plugins/grouping-rows/index.js

@@ -208,10 +208,19 @@ class C {
   }
   /**
    * Request a re-render of the grid.
+   * Uses ROWS phase - does NOT trigger processColumns hooks.
    */
   requestRender() {
     this.grid?.requestRender?.();
   }
+  /**
+   * Request a columns re-render of the grid.
+   * Uses COLUMNS phase - triggers processColumns hooks.
+   * Use this when your plugin needs to reprocess column configuration.
+   */
+  requestColumnsRender() {
+    this.grid?.requestColumnsRender?.();
+  }
   /**
    * Request a re-render and restore focus styling afterward.
    * Use this when a plugin action (like expand/collapse) triggers a render
@@ -375,7 +384,7 @@ function A(n) {
 const y = {
   sum: (n, e) => n.reduce((t, r) => t + (Number(r[e]) || 0), 0),
   avg: (n, e) => {
-    const t = n.reduce((r, i) => r + (Number(i[e]) || 0), 0);
+    const t = n.reduce((r, s) => r + (Number(s[e]) || 0), 0);
     return n.length ? t / n.length : 0;
   },
   count: (n) => n.length,
@@ -407,8 +416,8 @@ const y = {
    * Run an aggregator on a set of rows.
    */
   run(n, e, t, r) {
-    const i = this.get(n);
-    return i ? i(e, t, r) : void 0;
+    const s = this.get(n);
+    return s ? s(e, t, r) : void 0;
   },
   /**
    * Check if an aggregator exists.
@@ -429,12 +438,12 @@ m.get.bind(m);
 const _ = m.run.bind(m);
 m.list.bind(m);
 function v({ rows: n, config: e, expanded: t, initialExpanded: r }) {
-  const i = e.groupOn;
-  if (typeof i != "function")
+  const s = e.groupOn;
+  if (typeof s != "function")
     return [];
   const o = { key: "__root__", value: null, depth: -1, rows: [], children: /* @__PURE__ */ new Map() };
   if (n.forEach((d) => {
-    let u = i(d);
+    let u = s(d);
     u == null || u === !1 ? u = ["__ungrouped__"] : Array.isArray(u) || (u = [u]);
     let a = o;
     u.forEach((w, p) => {
@@ -444,22 +453,22 @@ function v({ rows: n, config: e, expanded: t, initialExpanded: r }) {
     }), a.rows.push(d);
   }), o.children.size === 1 && o.children.has("__ungrouped__") && o.children.get("__ungrouped__").rows.length === n.length)
     return [];
-  const g = /* @__PURE__ */ new Set([...t, ...r ?? []]), s = [], l = (d) => {
+  const g = /* @__PURE__ */ new Set([...t, ...r ?? []]), i = [], l = (d) => {
     if (d === o) {
       d.children.forEach((a) => l(a));
       return;
     }
     const u = g.has(d.key);
-    s.push({
+    i.push({
       kind: "group",
       key: d.key,
       value: d.value,
       depth: d.depth,
       rows: d.rows,
       expanded: u
-    }), u && (d.children.size ? d.children.forEach((a) => l(a)) : d.rows.forEach((a) => s.push({ kind: "data", row: a, rowIndex: n.indexOf(a) })));
+    }), u && (d.children.size ? d.children.forEach((a) => l(a)) : d.rows.forEach((a) => i.push({ kind: "data", row: a, rowIndex: n.indexOf(a) })));
   };
-  return l(o), s;
+  return l(o), i;
 }
 function K(n, e) {
   const t = new Set(n);
@@ -591,33 +600,33 @@ class D extends C {
     });
     if (r.length === 0)
       return this.isActive = !1, this.flattenedRows = [], [...e];
-    let i;
+    let s;
     if (!this.hasAppliedDefaultExpanded && this.expandedKeys.size === 0 && t.defaultExpanded !== !1) {
-      const s = T(r);
-      i = G(t.defaultExpanded ?? !1, s), i.size > 0 && (this.expandedKeys = new Set(i), this.hasAppliedDefaultExpanded = !0);
+      const i = T(r);
+      s = G(t.defaultExpanded ?? !1, i), s.size > 0 && (this.expandedKeys = new Set(s), this.hasAppliedDefaultExpanded = !0);
     }
     const o = v({
       rows: [...e],
       config: t,
       expanded: this.expandedKeys,
-      initialExpanded: i
+      initialExpanded: s
     });
     this.isActive = !0, this.flattenedRows = o, this.keysToAnimate.clear();
     const g = /* @__PURE__ */ new Set();
-    return o.forEach((s, l) => {
-      if (s.kind === "data") {
+    return o.forEach((i, l) => {
+      if (i.kind === "data") {
         const d = `data-${l}`;
         g.add(d), this.previousVisibleKeys.has(d) || this.keysToAnimate.add(d);
       }
-    }), this.previousVisibleKeys = g, o.map((s) => s.kind === "group" ? {
+    }), this.previousVisibleKeys = g, o.map((i) => i.kind === "group" ? {
       __isGroupRow: !0,
-      __groupKey: s.key,
-      __groupValue: s.value,
-      __groupDepth: s.depth,
-      __groupRows: s.rows,
-      __groupExpanded: s.expanded,
-      __groupRowCount: I(s)
-    } : s.row);
+      __groupKey: i.key,
+      __groupValue: i.value,
+      __groupDepth: i.depth,
+      __groupRows: i.rows,
+      __groupExpanded: i.expanded,
+      __groupRowCount: I(i)
+    } : i.row);
   }
   /** @internal */
   onCellClick(e) {
@@ -639,17 +648,17 @@ class D extends C {
   renderRow(e, t, r) {
     if (!e?.__isGroupRow)
       return !1;
-    const i = this.config;
-    if (i.groupRowRenderer) {
-      const s = () => {
+    const s = this.config;
+    if (s.groupRowRenderer) {
+      const i = () => {
         this.toggle(e.__groupKey);
-      }, l = i.groupRowRenderer({
+      }, l = s.groupRowRenderer({
         key: e.__groupKey,
         value: e.__groupValue,
         depth: e.__groupDepth,
         rows: e.__groupRows,
         expanded: e.__groupExpanded,
-        toggleExpand: s
+        toggleExpand: i
       });
       if (l)
         return t.className = "data-grid-row group-row", t.__isCustomRow = !0, t.setAttribute("data-group-depth", String(e.__groupDepth)), typeof l == "string" ? t.innerHTML = l : (t.innerHTML = "", t.appendChild(l)), !0;
@@ -657,7 +666,7 @@ class D extends C {
     const o = () => {
       this.toggle(e.__groupKey);
     };
-    return t.className = "data-grid-row group-row", t.__isCustomRow = !0, t.setAttribute("data-group-depth", String(e.__groupDepth)), t.setAttribute("role", "row"), t.setAttribute("aria-expanded", String(e.__groupExpanded)), t.style.setProperty("--tbw-group-depth", String(e.__groupDepth || 0)), i.indentWidth !== void 0 && t.style.setProperty("--tbw-group-indent-width", `${i.indentWidth}px`), t.style.height = "", t.innerHTML = "", i.fullWidth !== !1 ? this.renderFullWidthGroupRow(e, t, o) : this.renderPerColumnGroupRow(e, t, o), !0;
+    return t.className = "data-grid-row group-row", t.__isCustomRow = !0, t.setAttribute("data-group-depth", String(e.__groupDepth)), t.setAttribute("role", "row"), t.setAttribute("aria-expanded", String(e.__groupExpanded)), t.style.setProperty("--tbw-group-depth", String(e.__groupDepth || 0)), s.indentWidth !== void 0 && t.style.setProperty("--tbw-group-indent-width", `${s.indentWidth}px`), t.style.height = "", t.innerHTML = "", s.fullWidth !== !1 ? this.renderFullWidthGroupRow(e, t, o) : this.renderPerColumnGroupRow(e, t, o), !0;
   }
   /** @internal */
   afterRender() {
@@ -666,9 +675,9 @@ class D extends C {
     const t = this.gridElement?.querySelector(".rows");
     if (!t) return;
     const r = e === "fade" ? "tbw-group-fade-in" : "tbw-group-slide-in";
-    for (const i of t.querySelectorAll(".data-grid-row:not(.group-row)")) {
-      const o = i.querySelector(".cell[data-row]"), g = o ? parseInt(o.getAttribute("data-row") ?? "-1", 10) : -1, l = this.flattenedRows[g]?.kind === "data" ? `data-${g}` : void 0;
-      l && this.keysToAnimate.has(l) && (i.classList.add(r), i.addEventListener("animationend", () => i.classList.remove(r), { once: !0 }));
+    for (const s of t.querySelectorAll(".data-grid-row:not(.group-row)")) {
+      const o = s.querySelector(".cell[data-row]"), g = o ? parseInt(o.getAttribute("data-row") ?? "-1", 10) : -1, l = this.flattenedRows[g]?.kind === "data" ? `data-${g}` : void 0;
+      l && this.keysToAnimate.has(l) && (s.classList.add(r), s.addEventListener("animationend", () => s.classList.remove(r), { once: !0 }));
     }
     this.keysToAnimate.clear();
   }
@@ -679,24 +688,24 @@ class D extends C {
    */
   createToggleButton(e, t) {
     const r = document.createElement("button");
-    return r.type = "button", r.className = `group-toggle${e ? " expanded" : ""}`, r.setAttribute("aria-label", e ? "Collapse group" : "Expand group"), this.setIcon(r, this.resolveIcon(e ? "collapse" : "expand")), r.addEventListener("click", (i) => {
-      i.stopPropagation(), t();
+    return r.type = "button", r.className = `group-toggle${e ? " expanded" : ""}`, r.setAttribute("aria-label", e ? "Collapse group" : "Expand group"), this.setIcon(r, this.resolveIcon(e ? "collapse" : "expand")), r.addEventListener("click", (s) => {
+      s.stopPropagation(), t();
     }), r;
   }
   /**
    * Get the formatted label text for a group.
    */
   getGroupLabelText(e, t, r) {
-    const i = this.config;
-    return i.formatLabel ? i.formatLabel(e, t, r) : String(e);
+    const s = this.config;
+    return s.formatLabel ? s.formatLabel(e, t, r) : String(e);
   }
   renderFullWidthGroupRow(e, t, r) {
-    const i = this.config, o = i.aggregators ?? {}, g = e.__groupRows ?? [], s = document.createElement("div");
-    s.className = "cell group-full", s.style.gridColumn = "1 / -1", s.setAttribute("role", "gridcell"), s.setAttribute("data-col", "0"), s.appendChild(this.createToggleButton(e.__groupExpanded, r));
+    const s = this.config, o = s.aggregators ?? {}, g = e.__groupRows ?? [], i = document.createElement("div");
+    i.className = "cell group-full", i.style.gridColumn = "1 / -1", i.setAttribute("role", "gridcell"), i.setAttribute("data-col", "0"), i.appendChild(this.createToggleButton(e.__groupExpanded, r));
     const l = document.createElement("span");
-    if (l.className = "group-label", l.textContent = this.getGroupLabelText(e.__groupValue, e.__groupDepth || 0, e.__groupKey), s.appendChild(l), i.showRowCount !== !1) {
+    if (l.className = "group-label", l.textContent = this.getGroupLabelText(e.__groupValue, e.__groupDepth || 0, e.__groupKey), i.appendChild(l), s.showRowCount !== !1) {
       const u = document.createElement("span");
-      u.className = "group-count", u.textContent = `(${e.__groupRowCount ?? e.__groupRows?.length ?? 0})`, s.appendChild(u);
+      u.className = "group-count", u.textContent = `(${e.__groupRowCount ?? e.__groupRows?.length ?? 0})`, i.appendChild(u);
     }
     const d = Object.entries(o);
     if (d.length > 0) {
@@ -711,12 +720,12 @@ class D extends C {
           h.textContent = `${f}: ${c}`, u.appendChild(h);
         }
       }
-      u.children.length > 0 && s.appendChild(u);
+      u.children.length > 0 && i.appendChild(u);
     }
-    t.appendChild(s);
+    t.appendChild(i);
   }
   renderPerColumnGroupRow(e, t, r) {
-    const i = this.config, o = i.aggregators ?? {}, g = this.columns, s = e.__groupRows ?? [], d = this.gridElement?.querySelector(".body")?.style.gridTemplateColumns || "";
+    const s = this.config, o = s.aggregators ?? {}, g = this.columns, i = e.__groupRows ?? [], d = this.gridElement?.querySelector(".body")?.style.gridTemplateColumns || "";
     d && (t.style.display = "grid", t.style.gridTemplateColumns = d);
     let u = !1;
     g.forEach((a, w) => {
@@ -728,7 +737,7 @@ class D extends C {
       if (u) {
         const c = o[a.field];
         if (c) {
-          const h = _(c, s, a.field, a);
+          const h = _(c, i, a.field, a);
           p.textContent = h != null ? String(h) : "";
         } else
           p.textContent = "";
@@ -736,13 +745,13 @@ class D extends C {
         u = !0, p.appendChild(this.createToggleButton(e.__groupExpanded, r));
         const c = document.createElement("span"), h = o[a.field];
         if (h) {
-          const f = _(h, s, a.field, a);
+          const f = _(h, i, a.field, a);
           c.textContent = f != null ? String(f) : String(e.__groupValue);
         } else
           c.textContent = this.getGroupLabelText(e.__groupValue, e.__groupDepth || 0, e.__groupKey);
-        if (p.appendChild(c), i.showRowCount !== !1) {
+        if (p.appendChild(c), s.showRowCount !== !1) {
           const f = document.createElement("span");
-          f.className = "group-count", f.textContent = ` (${s.length})`, p.appendChild(f);
+          f.className = "group-count", f.textContent = ` (${i.length})`, p.appendChild(f);
         }
       }
       t.appendChild(p);
@@ -768,15 +777,15 @@ class D extends C {
    * @param key - The group key to toggle
    */
   toggle(e) {
-    const t = !this.expandedKeys.has(e), r = this.config, i = this.flattenedRows.find((o) => o.kind === "group" && o.key === e);
-    if (r.accordion && t && i) {
+    const t = !this.expandedKeys.has(e), r = this.config, s = this.flattenedRows.find((o) => o.kind === "group" && o.key === e);
+    if (r.accordion && t && s) {
       const o = /* @__PURE__ */ new Set();
       for (const g of this.expandedKeys)
         if (e.startsWith(g + "||") || g.startsWith(e + "||"))
           e.startsWith(g + "||") && o.add(g);
         else {
-          const s = this.flattenedRows.find((l) => l.kind === "group" && l.key === g);
-          s && s.depth !== i.depth && o.add(g);
+          const i = this.flattenedRows.find((l) => l.kind === "group" && l.key === g);
+          i && i.depth !== s.depth && o.add(g);
         }
       o.add(e), this.expandedKeys = o;
     } else
@@ -784,8 +793,8 @@ class D extends C {
     this.emit("group-toggle", {
       key: e,
       expanded: this.expandedKeys.has(e),
-      value: i?.value,
-      depth: i?.depth ?? 0
+      value: s?.value,
+      depth: s?.depth ?? 0
     }), this.emitPluginEvent("grouping-state-change", {
       expandedKeys: [...this.expandedKeys]
     }), this.requestRender();