@toolbox-web/grid 1.6.2 → 1.8.0

package/lib/plugins/grouping-rows/GroupingRowsPlugin.d.ts

@@ -1,4 +1,4 @@
-import { BaseGridPlugin, CellClickEvent, PluginManifest } from '../../core/plugin/base-plugin';
+import { BaseGridPlugin, CellClickEvent, PluginManifest, PluginQuery } from '../../core/plugin/base-plugin';
 import { GroupingRowsConfig, RenderRow } from './types';
 /**
  * Group state information returned by getGroupState()
@@ -96,7 +96,7 @@ export interface GroupState {
  */
 export declare class GroupingRowsPlugin extends BaseGridPlugin<GroupingRowsConfig> {
     /**
-     * Plugin manifest - declares configuration validation rules.
+     * Plugin manifest - declares configuration validation rules and events.
      * @internal
      */
     static readonly manifest: PluginManifest<GroupingRowsConfig>;
@@ -120,6 +120,11 @@ export declare class GroupingRowsPlugin extends BaseGridPlugin<GroupingRowsConfi
     private get animationStyle();
     /** @internal */
     detach(): void;
+    /**
+     * Handle plugin queries.
+     * @internal
+     */
+    handleQuery(query: PluginQuery): unknown;
     /**
      * Auto-detect grouping configuration from grid config.
      * Called by plugin system to determine if plugin should activate.

package/lib/plugins/grouping-rows/GroupingRowsPlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GroupingRowsPlugin.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/grouping-rows/GroupingRowsPlugin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAcpG,OAAO,KAAK,EAEV,kBAAkB,EAGlB,SAAS,EACV,MAAM,SAAS,CAAC;AAEjB;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,2CAA2C;IAC3C,QAAQ,EAAE,OAAO,CAAC;IAClB,gCAAgC;IAChC,aAAa,EAAE,MAAM,CAAC;IACtB,6BAA6B;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,mCAAmC;IACnC,YAAY,EAAE,MAAM,EAAE,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgFG;AACH,qBAAa,kBAAmB,SAAQ,cAAc,CAAC,kBAAkB,CAAC;IACxE;;;OAGG;IACH,gBAAyB,QAAQ,EAAE,cAAc,CAAC,kBAAkB,CAAC,CAsBnE;IAEF,gBAAgB;IAChB,QAAQ,CAAC,IAAI,kBAAkB;IAC/B,gBAAgB;IAChB,SAAkB,MAAM,SAAU;IAElC,gBAAgB;IAChB,cAAuB,aAAa,IAAI,OAAO,CAAC,kBAAkB,CAAC,CASlE;IAGD,OAAO,CAAC,YAAY,CAA0B;IAC9C,OAAO,CAAC,aAAa,CAAmB;IACxC,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,mBAAmB,CAAqB;IAChD,OAAO,CAAC,aAAa,CAAqB;IAC1C,wDAAwD;IACxD,OAAO,CAAC,yBAAyB,CAAS;IAK1C;;;OAGG;IACH,OAAO,KAAK,cAAc,GAGzB;IAMD,gBAAgB;IACP,MAAM,IAAI,IAAI;IAYvB;;;OAGG;IACH,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,GAAG,EAAE,EAAE,MAAM,EAAE,GAAG,GAAG,OAAO;IAIzD,gBAAgB;IACP,WAAW,CAAC,IAAI,EAAE,SAAS,GAAG,EAAE,GAAG,GAAG,EAAE;IAiFjD,gBAAgB;IACP,WAAW,CAAC,KAAK,EAAE,cAAc,GAAG,OAAO,GAAG,IAAI;IAa3D,gBAAgB;IACP,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,GAAG,IAAI;IAkBxD;;;OAGG;IACM,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,GAAG,OAAO;IAqE5E,gBAAgB;IACP,WAAW,IAAI,IAAI;IAyB5B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAa1B;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,uBAAuB;IAyD/B,OAAO,CAAC,uBAAuB;IAsE/B;;OAEG;IACH,SAAS,IAAI,IAAI;IAKjB;;OAEG;IACH,WAAW,IAAI,IAAI;IAKnB;;;;OAIG;IACH,MAAM,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IA6CzB;;;;OAIG;IACH,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO;IAIhC;;;OAGG;IACH,MAAM,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAOzB;;;OAGG;IACH,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAS3B;;;OAGG;IACH,aAAa,IAAI,UAAU;IAU3B;;;OAGG;IACH,WAAW,IAAI,MAAM;IAIrB;;;OAGG;IACH,aAAa,IAAI,IAAI;IAIrB;;;OAGG;IACH,iBAAiB,IAAI,MAAM,EAAE;IAI7B;;;OAGG;IACH,gBAAgB,IAAI,SAAS,EAAE;IAI/B;;;OAGG;IACH,gBAAgB,IAAI,OAAO;IAI3B;;;OAGG;IACH,UAAU,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,EAAE,GAAG,KAAK,GAAG,EAAE,GAAG,GAAG,GAAG,IAAI,GAAG,KAAK,CAAC,GAAG,SAAS,GAAG,IAAI;CAK7E"}
+{"version":3,"file":"GroupingRowsPlugin.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/grouping-rows/GroupingRowsPlugin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,KAAK,cAAc,EAAE,KAAK,WAAW,EAAE,MAAM,+BAA+B,CAAC;AActH,OAAO,KAAK,EAEV,kBAAkB,EAGlB,SAAS,EACV,MAAM,SAAS,CAAC;AAEjB;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,2CAA2C;IAC3C,QAAQ,EAAE,OAAO,CAAC;IAClB,gCAAgC;IAChC,aAAa,EAAE,MAAM,CAAC;IACtB,6BAA6B;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,mCAAmC;IACnC,YAAY,EAAE,MAAM,EAAE,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgFG;AACH,qBAAa,kBAAmB,SAAQ,cAAc,CAAC,kBAAkB,CAAC;IACxE;;;OAGG;IACH,gBAAyB,QAAQ,EAAE,cAAc,CAAC,kBAAkB,CAAC,CAkCnE;IAEF,gBAAgB;IAChB,QAAQ,CAAC,IAAI,kBAAkB;IAC/B,gBAAgB;IAChB,SAAkB,MAAM,SAAU;IAElC,gBAAgB;IAChB,cAAuB,aAAa,IAAI,OAAO,CAAC,kBAAkB,CAAC,CASlE;IAGD,OAAO,CAAC,YAAY,CAA0B;IAC9C,OAAO,CAAC,aAAa,CAAmB;IACxC,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,mBAAmB,CAAqB;IAChD,OAAO,CAAC,aAAa,CAAqB;IAC1C,wDAAwD;IACxD,OAAO,CAAC,yBAAyB,CAAS;IAK1C;;;OAGG;IACH,OAAO,KAAK,cAAc,GAGzB;IAMD,gBAAgB;IACP,MAAM,IAAI,IAAI;IASvB;;;OAGG;IACM,WAAW,CAAC,KAAK,EAAE,WAAW,GAAG,OAAO;IAcjD;;;OAGG;IACH,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,GAAG,EAAE,EAAE,MAAM,EAAE,GAAG,GAAG,OAAO;IAIzD,gBAAgB;IACP,WAAW,CAAC,IAAI,EAAE,SAAS,GAAG,EAAE,GAAG,GAAG,EAAE;IAiFjD,gBAAgB;IACP,WAAW,CAAC,KAAK,EAAE,cAAc,GAAG,OAAO,GAAG,IAAI;IAa3D,gBAAgB;IACP,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,GAAG,IAAI;IAkBxD;;;OAGG;IACM,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,GAAG,OAAO;IAqE5E,gBAAgB;IACP,WAAW,IAAI,IAAI;IAyB5B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAa1B;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,uBAAuB;IAyD/B,OAAO,CAAC,uBAAuB;IAsE/B;;OAEG;IACH,SAAS,IAAI,IAAI;IAMjB;;OAEG;IACH,WAAW,IAAI,IAAI;IAMnB;;;;OAIG;IACH,MAAM,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAkDzB;;;;OAIG;IACH,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO;IAIhC;;;OAGG;IACH,MAAM,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAOzB;;;OAGG;IACH,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAS3B;;;OAGG;IACH,aAAa,IAAI,UAAU;IAU3B;;;OAGG;IACH,WAAW,IAAI,MAAM;IAIrB;;;OAGG;IACH,aAAa,IAAI,IAAI;IAIrB;;;OAGG;IACH,iBAAiB,IAAI,MAAM,EAAE;IAI7B;;;OAGG;IACH,gBAAgB,IAAI,SAAS,EAAE;IAI/B;;;OAGG;IACH,gBAAgB,IAAI,OAAO;IAI3B;;;OAGG;IACH,UAAU,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,EAAE,GAAG,KAAK,GAAG,EAAE,GAAG,GAAG,GAAG,IAAI,GAAG,KAAK,CAAC,GAAG,SAAS,GAAG,IAAI;CAK7E"}

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

@@ -149,6 +149,63 @@ class C {
     const r = new CustomEvent(e, { detail: t, bubbles: !0, cancelable: !0 });
     return this.grid?.dispatchEvent?.(r), r.defaultPrevented;
   }
+  // =========================================================================
+  // Event Bus - Plugin-to-Plugin Communication
+  // =========================================================================
+  /**
+   * Subscribe to an event from another plugin.
+   * The subscription is automatically cleaned up when this plugin is detached.
+   *
+   * @category Plugin Development
+   * @param eventType - The event type to listen for (e.g., 'filter-change')
+   * @param callback - The callback to invoke when the event is emitted
+   *
+   * @example
+   * ```typescript
+   * // In attach() or other initialization
+   * this.on('filter-change', (detail) => {
+   *   console.log('Filter changed:', detail);
+   * });
+   * ```
+   */
+  on(e, t) {
+    this.grid?._pluginManager?.subscribe(this, e, t);
+  }
+  /**
+   * Unsubscribe from a plugin event.
+   *
+   * @category Plugin Development
+   * @param eventType - The event type to stop listening for
+   *
+   * @example
+   * ```typescript
+   * this.off('filter-change');
+   * ```
+   */
+  off(e) {
+    this.grid?._pluginManager?.unsubscribe(this, e);
+  }
+  /**
+   * Emit an event to other plugins via the Event Bus.
+   * This is for inter-plugin communication only; it does NOT dispatch DOM events.
+   * Use `emit()` to dispatch DOM events that external consumers can listen to.
+   *
+   * @category Plugin Development
+   * @param eventType - The event type to emit (should be declared in manifest.events)
+   * @param detail - The event payload
+   *
+   * @example
+   * ```typescript
+   * // Emit to other plugins (not DOM)
+   * this.emitPluginEvent('filter-change', { field: 'name', value: 'Alice' });
+   *
+   * // For DOM events that consumers can addEventListener to:
+   * this.emit('filter-change', { field: 'name', value: 'Alice' });
+   * ```
+   */
+  emitPluginEvent(e, t) {
+    this.grid?._pluginManager?.emitPluginEvent(e, t);
+  }
   /**
    * Request a re-render of the grid.
    */
@@ -318,7 +375,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, s) => r + (Number(s[e]) || 0), 0);
+    const t = n.reduce((r, i) => r + (Number(i[e]) || 0), 0);
     return n.length ? t / n.length : 0;
   },
   count: (n) => n.length,
@@ -350,8 +407,8 @@ const y = {
    * Run an aggregator on a set of rows.
    */
   run(n, e, t, r) {
-    const s = this.get(n);
-    return s ? s(e, t, r) : void 0;
+    const i = this.get(n);
+    return i ? i(e, t, r) : void 0;
   },
   /**
    * Check if an aggregator exists.
@@ -372,12 +429,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 s = e.groupOn;
-  if (typeof s != "function")
+  const i = e.groupOn;
+  if (typeof i != "function")
     return [];
   const o = { key: "__root__", value: null, depth: -1, rows: [], children: /* @__PURE__ */ new Map() };
   if (n.forEach((d) => {
-    let u = s(d);
+    let u = i(d);
     u == null || u === !1 ? u = ["__ungrouped__"] : Array.isArray(u) || (u = [u]);
     let a = o;
     u.forEach((w, p) => {
@@ -387,28 +444,28 @@ 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 ?? []]), i = [], l = (d) => {
+  const g = /* @__PURE__ */ new Set([...t, ...r ?? []]), s = [], l = (d) => {
     if (d === o) {
       d.children.forEach((a) => l(a));
       return;
     }
     const u = g.has(d.key);
-    i.push({
+    s.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) => i.push({ kind: "data", row: a, rowIndex: n.indexOf(a) })));
+    }), u && (d.children.size ? d.children.forEach((a) => l(a)) : d.rows.forEach((a) => s.push({ kind: "data", row: a, rowIndex: n.indexOf(a) })));
   };
-  return l(o), i;
+  return l(o), s;
 }
-function S(n, e) {
+function K(n, e) {
   const t = new Set(n);
   return t.has(e) ? t.delete(e) : t.add(e), t;
 }
-function K(n) {
+function S(n) {
   const e = /* @__PURE__ */ new Set();
   for (const t of n)
     t.kind === "group" && e.add(t.key);
@@ -437,10 +494,22 @@ function I(n) {
 const N = "@layer tbw-plugins{.group-row{display:grid;grid-template-columns:var(--tbw-column-template);background:var(--tbw-grouping-rows-bg, var(--tbw-color-panel-bg));font-weight:500;border-bottom:var(--tbw-row-divider);min-height:var(--tbw-row-height)}.group-row .cell{display:flex;align-items:center;padding:var(--tbw-cell-padding, .125rem .5rem)}.group-row:hover{background:var(--tbw-grouping-rows-bg-hover, var(--tbw-color-row-hover))}.group-toggle{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;width:var(--tbw-toggle-size, 1.25rem);height:var(--tbw-toggle-size, 1.25rem);margin-right:.25rem;background:none;border:0;font:inherit}.group-toggle:hover{background:var(--tbw-grouping-rows-toggle-hover, var(--tbw-color-row-hover));border-radius:var(--tbw-border-radius, .125rem)}.group-label{display:inline-flex;align-items:center;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem))}.group-count{color:var(--tbw-grouping-rows-count-color, var(--tbw-color-fg-muted));font-size:var(--tbw-font-size-xs, .85em);font-weight:400}.group-aggregates{display:inline-flex;align-items:center;gap:var(--tbw-spacing-lg, 1rem);margin-left:var(--tbw-spacing-lg, 1rem);font-weight:400;font-size:var(--tbw-font-size-sm, .875em);color:var(--tbw-grouping-rows-aggregate-color, var(--tbw-color-fg-muted))}.group-aggregate{white-space:nowrap}.group-row{padding-left:calc(var(--tbw-group-depth, 0) * var(--tbw-group-indent-width, 1.25em))}.data-grid-row.tbw-group-slide-in{animation:tbw-group-slide-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-group-slide-in{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}.data-grid-row.tbw-group-fade-in{animation:tbw-group-fade-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-group-fade-in{0%{opacity:0}to{opacity:1}}}";
 class D extends C {
   /**
-   * Plugin manifest - declares configuration validation rules.
+   * Plugin manifest - declares configuration validation rules and events.
    * @internal
    */
   static manifest = {
+    events: [
+      {
+        type: "grouping-state-change",
+        description: "Emitted when groups are expanded/collapsed. Subscribers can react to row visibility changes."
+      }
+    ],
+    queries: [
+      {
+        type: "canMoveRow",
+        description: "Returns false for group header rows (cannot be reordered)"
+      }
+    ],
     configRules: [
       {
         id: "groupingRows/accordion-defaultExpanded",
@@ -492,6 +561,17 @@ class D extends C {
   detach() {
     this.expandedKeys.clear(), this.flattenedRows = [], this.isActive = !1, this.previousVisibleKeys.clear(), this.keysToAnimate.clear(), this.hasAppliedDefaultExpanded = !1;
   }
+  /**
+   * Handle plugin queries.
+   * @internal
+   */
+  handleQuery(e) {
+    if (e.type === "canMoveRow") {
+      const t = e.context;
+      if (t && t.__isGroupRow === !0)
+        return !1;
+    }
+  }
   // #endregion
   // #region Hooks
   /**
@@ -514,33 +594,33 @@ class D extends C {
     });
     if (r.length === 0)
       return this.isActive = !1, this.flattenedRows = [], [...e];
-    let s;
+    let i;
     if (!this.hasAppliedDefaultExpanded && this.expandedKeys.size === 0 && t.defaultExpanded !== !1) {
-      const i = T(r);
-      s = G(t.defaultExpanded ?? !1, i), s.size > 0 && (this.expandedKeys = new Set(s), this.hasAppliedDefaultExpanded = !0);
+      const s = T(r);
+      i = G(t.defaultExpanded ?? !1, s), i.size > 0 && (this.expandedKeys = new Set(i), this.hasAppliedDefaultExpanded = !0);
     }
     const o = v({
       rows: [...e],
       config: t,
       expanded: this.expandedKeys,
-      initialExpanded: s
+      initialExpanded: i
     });
     this.isActive = !0, this.flattenedRows = o, this.keysToAnimate.clear();
     const g = /* @__PURE__ */ new Set();
-    return o.forEach((i, l) => {
-      if (i.kind === "data") {
+    return o.forEach((s, l) => {
+      if (s.kind === "data") {
         const d = `data-${l}`;
         g.add(d), this.previousVisibleKeys.has(d) || this.keysToAnimate.add(d);
       }
-    }), this.previousVisibleKeys = g, o.map((i) => i.kind === "group" ? {
+    }), this.previousVisibleKeys = g, o.map((s) => s.kind === "group" ? {
       __isGroupRow: !0,
-      __groupKey: i.key,
-      __groupValue: i.value,
-      __groupDepth: i.depth,
-      __groupRows: i.rows,
-      __groupExpanded: i.expanded,
-      __groupRowCount: I(i)
-    } : i.row);
+      __groupKey: s.key,
+      __groupValue: s.value,
+      __groupDepth: s.depth,
+      __groupRows: s.rows,
+      __groupExpanded: s.expanded,
+      __groupRowCount: I(s)
+    } : s.row);
   }
   /** @internal */
   onCellClick(e) {
@@ -562,17 +642,17 @@ class D extends C {
   renderRow(e, t, r) {
     if (!e?.__isGroupRow)
       return !1;
-    const s = this.config;
-    if (s.groupRowRenderer) {
-      const i = () => {
+    const i = this.config;
+    if (i.groupRowRenderer) {
+      const s = () => {
         this.toggle(e.__groupKey);
-      }, l = s.groupRowRenderer({
+      }, l = i.groupRowRenderer({
         key: e.__groupKey,
         value: e.__groupValue,
         depth: e.__groupDepth,
         rows: e.__groupRows,
         expanded: e.__groupExpanded,
-        toggleExpand: i
+        toggleExpand: s
       });
       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;
@@ -580,7 +660,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)), 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;
+    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;
   }
   /** @internal */
   afterRender() {
@@ -589,9 +669,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 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 }));
+    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 }));
     }
     this.keysToAnimate.clear();
   }
@@ -602,24 +682,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", (s) => {
-      s.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", (i) => {
+      i.stopPropagation(), t();
     }), r;
   }
   /**
    * Get the formatted label text for a group.
    */
   getGroupLabelText(e, t, r) {
-    const s = this.config;
-    return s.formatLabel ? s.formatLabel(e, t, r) : String(e);
+    const i = this.config;
+    return i.formatLabel ? i.formatLabel(e, t, r) : String(e);
   }
   renderFullWidthGroupRow(e, t, 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 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 l = document.createElement("span");
-    if (l.className = "group-label", l.textContent = this.getGroupLabelText(e.__groupValue, e.__groupDepth || 0, e.__groupKey), i.appendChild(l), s.showRowCount !== !1) {
+    if (l.className = "group-label", l.textContent = this.getGroupLabelText(e.__groupValue, e.__groupDepth || 0, e.__groupKey), s.appendChild(l), i.showRowCount !== !1) {
       const u = document.createElement("span");
-      u.className = "group-count", u.textContent = `(${e.__groupRowCount ?? e.__groupRows?.length ?? 0})`, i.appendChild(u);
+      u.className = "group-count", u.textContent = `(${e.__groupRowCount ?? e.__groupRows?.length ?? 0})`, s.appendChild(u);
     }
     const d = Object.entries(o);
     if (d.length > 0) {
@@ -634,12 +714,12 @@ class D extends C {
           h.textContent = `${f}: ${c}`, u.appendChild(h);
         }
       }
-      u.children.length > 0 && i.appendChild(u);
+      u.children.length > 0 && s.appendChild(u);
     }
-    t.appendChild(i);
+    t.appendChild(s);
   }
   renderPerColumnGroupRow(e, t, r) {
-    const s = this.config, o = s.aggregators ?? {}, g = this.columns, i = e.__groupRows ?? [], d = this.gridElement?.querySelector(".body")?.style.gridTemplateColumns || "";
+    const i = this.config, o = i.aggregators ?? {}, g = this.columns, s = 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) => {
@@ -651,7 +731,7 @@ class D extends C {
       if (u) {
         const c = o[a.field];
         if (c) {
-          const h = _(c, i, a.field, a);
+          const h = _(c, s, a.field, a);
           p.textContent = h != null ? String(h) : "";
         } else
           p.textContent = "";
@@ -659,13 +739,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, i, a.field, a);
+          const f = _(h, s, 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), s.showRowCount !== !1) {
+        if (p.appendChild(c), i.showRowCount !== !1) {
           const f = document.createElement("span");
-          f.className = "group-count", f.textContent = ` (${i.length})`, p.appendChild(f);
+          f.className = "group-count", f.textContent = ` (${s.length})`, p.appendChild(f);
         }
       }
       t.appendChild(p);
@@ -677,13 +757,13 @@ class D extends C {
    * Expand all groups.
    */
   expandAll() {
-    this.expandedKeys = K(this.flattenedRows), this.requestRender();
+    this.expandedKeys = S(this.flattenedRows), this.emitPluginEvent("grouping-state-change", { expandedKeys: [...this.expandedKeys] }), this.requestRender();
   }
   /**
    * Collapse all groups.
    */
   collapseAll() {
-    this.expandedKeys = k(), this.requestRender();
+    this.expandedKeys = k(), this.emitPluginEvent("grouping-state-change", { expandedKeys: [...this.expandedKeys] }), this.requestRender();
   }
   /**
    * Toggle expansion of a specific group.
@@ -691,24 +771,26 @@ class D extends C {
    * @param key - The group key to toggle
    */
   toggle(e) {
-    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 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 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 i = this.flattenedRows.find((l) => l.kind === "group" && l.key === g);
-          i && i.depth !== s.depth && o.add(g);
+          const s = this.flattenedRows.find((l) => l.kind === "group" && l.key === g);
+          s && s.depth !== i.depth && o.add(g);
         }
       o.add(e), this.expandedKeys = o;
     } else
-      this.expandedKeys = S(this.expandedKeys, e);
+      this.expandedKeys = K(this.expandedKeys, e);
     this.emit("group-toggle", {
       key: e,
       expanded: this.expandedKeys.has(e),
-      value: s?.value,
-      depth: s?.depth ?? 0
+      value: i?.value,
+      depth: i?.depth ?? 0
+    }), this.emitPluginEvent("grouping-state-change", {
+      expandedKeys: [...this.expandedKeys]
     }), this.requestRender();
   }
   /**