fix double controls

Author: lekoala

dist/data-grid.js

@@ -4440,7 +4440,7 @@ class ResponsiveGrid extends base_plugin_default {
     }
   }
   extendColumns(columns) {
-    if (!this.grid.options.responsive || !this.grid.options.responsiveToggle) {
+    if (!this.grid.options.responsive || !this.grid.options.responsiveToggle || this._sharesDisclosure()) {
       return;
     }
     columns.unshift({
@@ -4549,7 +4549,7 @@ class ResponsiveGrid extends base_plugin_default {
     }, 0);
     const requiredWidth = (visibleItems) => {
       let total = fixedWidth;
-      if (grid.options.responsiveToggle && items.some(({ column }) => column?.responsiveHidden)) {
+      if (grid.options.responsiveToggle && !this._sharesDisclosure() && items.some(({ column }) => column?.responsiveHidden)) {
         total += RESPONSIVE_TOGGLE_WIDTH;
       }
       for (const { th } of visibleItems) {
@@ -4663,6 +4663,17 @@ class ResponsiveGrid extends base_plugin_default {
       previous = td;
     }
   }
+  _sharesDisclosure() {
+    return Boolean(this.grid.options.responsiveToggle) && typeof this.grid.options.rowDetails === "function" && Boolean(this.grid.getPlugin("RowDetails"));
+  }
+  followDisclosure(tr, expanded) {
+    if (!this._sharesDisclosure()) {
+      return;
+    }
+    this.blockObserver();
+    this._setRowExpanded(tr, expanded);
+    this.unblockObserver();
+  }
   _setToggleIcon(tr, expanded) {
     const control = tr.querySelector(`.${RESPONSIVE_CLASS}-toggle-control`);
     const rowIndex = Number.parseInt(tr.dataset.rowIndex ?? "0", 10) || 0;
@@ -5404,6 +5415,10 @@ class RowDetails extends base_plugin_default {
     if (button) {
       this._syncToggle(button, row, rowIndex, expanded);
     }
+    const responsive = this.grid.getPlugin("ResponsiveGrid");
+    if (typeof responsive?.followDisclosure === "function") {
+      responsive.followDisclosure(tr, expanded);
+    }
     const id = this._detailId(rowIndex);
     const current = document.getElementById(id);
     if (!expanded) {

dist/data-grid.min.js

@@ -81,6 +81,29 @@ declare class ResponsiveGrid extends BasePlugin {
      * @param {HTMLTableRowElement} tr
      */
     _canonicalizeRow(tr: HTMLTableRowElement): void;
+    /**
+     * True when the row details column already provides a disclosure control
+     * for every row: responsive then yields, rather than rendering a second
+     * identical chevron next to it, and follows that control instead.
+     *
+     * Both facts are required: the option carries the intent, the plugin does
+     * the rendering. If either is missing (ex: a non standard registration
+     * name), responsive keeps its own toggle — the safe fallback is a visible
+     * control, never hidden values with no way to reach them.
+     * @returns {Boolean}
+     */
+    _sharesDisclosure(): boolean;
+    /**
+     * Follow the shared disclosure control: the row details toggle governs the
+     * whole expansion surface of its row, responsive values included. No-op
+     * unless responsive has yielded its own toggle, so an explicit
+     * `responsiveToggle: false` keeps its section governed by
+     * `responsiveStartOpen` alone.
+     * @public
+     * @param {HTMLTableRowElement} tr
+     * @param {Boolean} expanded
+     */
+    followDisclosure(tr: HTMLTableRowElement, expanded: boolean): void;
     /**
      * Reflect the expanded state on the toggle column icon (no-op when there is
      * no toggle column, i.e. `responsiveToggle: false`).

dist/types/plugins/responsive-grid.d.ts

@@ -91,7 +91,7 @@ class ResponsiveGrid extends BasePlugin {
      * @param {import("../data-grid.js").Column[]} columns
      */
     extendColumns(columns) {
-        if (!this.grid.options.responsive || !this.grid.options.responsiveToggle) {
+        if (!this.grid.options.responsive || !this.grid.options.responsiveToggle || this._sharesDisclosure()) {
             return;
         }
         columns.unshift({
@@ -271,7 +271,11 @@ class ResponsiveGrid extends BasePlugin {
             }, 0);
         const requiredWidth = (/** @type {Array<any>} */ visibleItems) => {
             let total = fixedWidth;
-            if (grid.options.responsiveToggle && items.some(({ column }) => column?.responsiveHidden)) {
+            if (
+                grid.options.responsiveToggle &&
+                !this._sharesDisclosure() &&
+                items.some(({ column }) => column?.responsiveHidden)
+            ) {
                 total += RESPONSIVE_TOGGLE_WIDTH;
             }
             for (const { th } of visibleItems) {
@@ -429,6 +433,44 @@ class ResponsiveGrid extends BasePlugin {
         }
     }
 
+    /**
+     * True when the row details column already provides a disclosure control
+     * for every row: responsive then yields, rather than rendering a second
+     * identical chevron next to it, and follows that control instead.
+     *
+     * Both facts are required: the option carries the intent, the plugin does
+     * the rendering. If either is missing (ex: a non standard registration
+     * name), responsive keeps its own toggle — the safe fallback is a visible
+     * control, never hidden values with no way to reach them.
+     * @returns {Boolean}
+     */
+    _sharesDisclosure() {
+        return (
+            Boolean(this.grid.options.responsiveToggle) &&
+            typeof this.grid.options.rowDetails === "function" &&
+            Boolean(this.grid.getPlugin("RowDetails"))
+        );
+    }
+
+    /**
+     * Follow the shared disclosure control: the row details toggle governs the
+     * whole expansion surface of its row, responsive values included. No-op
+     * unless responsive has yielded its own toggle, so an explicit
+     * `responsiveToggle: false` keeps its section governed by
+     * `responsiveStartOpen` alone.
+     * @public
+     * @param {HTMLTableRowElement} tr
+     * @param {Boolean} expanded
+     */
+    followDisclosure(tr, expanded) {
+        if (!this._sharesDisclosure()) {
+            return;
+        }
+        this.blockObserver();
+        this._setRowExpanded(tr, expanded);
+        this.unblockObserver();
+    }
+
     /**
      * Reflect the expanded state on the toggle column icon (no-op when there is
      * no toggle column, i.e. `responsiveToggle: false`).

dist/types/plugins/responsive-grid.d.ts.map

@@ -164,6 +164,18 @@ class RowDetails extends BasePlugin {
         if (button) {
             this._syncToggle(button, row, rowIndex, expanded);
         }
+
+        // The toggle governs the whole expansion surface of the row, so a
+        // responsive section that has no control of its own follows it. Told
+        // before the detail row is inserted: the responsive child row then
+        // already sits right after the data row, which is where it belongs.
+        // The dependency is one way on purpose — revealing responsive values
+        // is cheap, rendering application details is not.
+        const responsive = /** @type {any} */ (this.grid.getPlugin("ResponsiveGrid"));
+        if (typeof responsive?.followDisclosure === "function") {
+            responsive.followDisclosure(tr, expanded);
+        }
+
         const id = this._detailId(rowIndex);
         const current = document.getElementById(id);
         if (!expanded) {