From 4eb49bea50470a819f7480ba1aa6f1a83dfe4983 Mon Sep 17 00:00:00 2001
From: Denisa Checiu <91504950+DenisaCG@users.noreply.github.com>
Date: Thu, 27 Jul 2023 15:26:40 +0200
Subject: [PATCH] Add expansion toggled signal of subpanels in an Accordion
 Panel (#614)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* add signal for toggling expansion of subpanels in an Accordion Panel

* Apply cosmetic reviews and add widget index to signal

Co-authored-by: Frédéric Collonval <fcollonval@users.noreply.github.com>

* additional comsetic changes

* fixed syntax error

* delete unnecessary layout instance from expansionToggled test

* Bracket error for test group

* Fix API extraction

---------

Co-authored-by: Frédéric Collonval <fcollonval@users.noreply.github.com>
Co-authored-by: Frédéric Collonval <fcollonval@gmail.com>
---
 packages/widgets/src/accordionpanel.ts        | 12 ++++++
 .../widgets/tests/src/accordionpanel.spec.ts  | 38 +++++++++++++++++++
 review/api/widgets.api.md                     |  1 +
 3 files changed, 51 insertions(+)

diff --git a/packages/widgets/src/accordionpanel.ts b/packages/widgets/src/accordionpanel.ts
index 20e6e24aa..d06abac38 100644
--- a/packages/widgets/src/accordionpanel.ts
+++ b/packages/widgets/src/accordionpanel.ts
@@ -3,6 +3,7 @@
 
 import { ArrayExt } from '@lumino/algorithm';
 import { Message } from '@lumino/messaging';
+import { ISignal, Signal } from '@lumino/signaling';
 import { AccordionLayout } from './accordionlayout';
 import { SplitLayout } from './splitlayout';
 import { SplitPanel } from './splitpanel';
@@ -53,6 +54,13 @@ export class AccordionPanel extends SplitPanel {
     return (this.layout as AccordionLayout).titles;
   }
 
+  /**
+   * A signal emitted when a widget of the AccordionPanel is collapsed or expanded.
+   */
+  get expansionToggled(): ISignal<this, number> {
+    return this._expansionToggled;
+  }
+
   /**
    * Add a widget to the end of the panel.
    *
@@ -330,9 +338,13 @@ export class AccordionPanel extends SplitPanel {
       title.setAttribute('aria-expanded', 'false');
       widget.hide();
     }
+
+    // Emit the expansion state signal.
+    this._expansionToggled.emit(index);
   }
 
   private _widgetSizesCache: WeakMap<Widget, number> = new WeakMap();
+  private _expansionToggled = new Signal<this, number>(this);
 }
 
 /**
diff --git a/packages/widgets/tests/src/accordionpanel.spec.ts b/packages/widgets/tests/src/accordionpanel.spec.ts
index b93a22bdc..bfff8f05f 100644
--- a/packages/widgets/tests/src/accordionpanel.spec.ts
+++ b/packages/widgets/tests/src/accordionpanel.spec.ts
@@ -230,6 +230,44 @@ describe('@lumino/widgets', () => {
       });
     });
 
+    describe('#expansionToggled', () => {
+      let panel: AccordionPanel;
+
+      beforeEach(() => {
+        panel = new AccordionPanel();
+        let widgets = [new Widget(), new Widget(), new Widget()];
+        widgets.forEach(w => {
+          panel.addWidget(w);
+        });
+        panel.setRelativeSizes([10, 10, 10, 20]);
+        Widget.attach(panel, document.body);
+        MessageLoop.flush();
+      });
+
+      afterEach(() => {
+        panel.dispose();
+      });
+
+      it('should be emitted when the a widget is collapsed', done => {
+        panel.expansionToggled.connect((sender, _) => {
+          expect(sender).to.equal(panel);
+          done();
+        });
+        panel.collapse(0);
+      });
+
+      it('should be emitted when the a widget is expanded', done => {
+        // first collapse a widget
+        panel.collapse(0);
+
+        panel.expansionToggled.connect((sender, _) => {
+          expect(sender).to.equal(panel);
+          done();
+        });
+        panel.expand(0);
+      });
+    });
+
     describe('#handleEvent()', () => {
       let panel: LogAccordionPanel;
       let layout: AccordionLayout;
diff --git a/review/api/widgets.api.md b/review/api/widgets.api.md
index 20010fbf3..c11eab012 100644
--- a/review/api/widgets.api.md
+++ b/review/api/widgets.api.md
@@ -56,6 +56,7 @@ export class AccordionPanel extends SplitPanel {
     addWidget(widget: Widget): void;
     collapse(index: number): void;
     expand(index: number): void;
+    get expansionToggled(): ISignal<this, number>;
     handleEvent(event: Event): void;
     insertWidget(index: number, widget: Widget): void;
     protected onAfterDetach(msg: Message): void;