Collapse fixes

packages/apputils/src/collapse.ts

@@ -9,8 +9,10 @@ import { ISignal, Signal } from '@phosphor/signaling';
  * Clicking on the title expands or contracts the widget.
  */
 export class Collapse<T extends Widget = Widget> extends Widget {
-  constructor(options: Collapse.IOptions<T> = {}) {
+  constructor(options: Collapse.IOptions<T>) {
     super(options);
+    const { widget, collapsed = true } = options;
+
     this.addClass('jp-Collapse');
     this._header = new Widget();
     this._header.addClass('jp-Collapse-header');
@@ -22,10 +24,9 @@ export class Collapse<T extends Widget = Widget> extends Widget {
     this.layout = layout;
     layout.addWidget(this._header);
     layout.addWidget(this._content);
-    if (options.widget) {
-      this.widget = options.widget;
-    }
-    this.collapsed = false;
+
+    this.widget = widget;
+    this.collapsed = collapsed;
   }
 
   /**
@@ -88,9 +89,11 @@ export class Collapse<T extends Widget = Widget> extends Widget {
       return;
     }
     super.dispose();
-    this._header = null;
-    this._widget = null;
-    this._content = null;
+
+    // Delete references we explicitly hold to other widgets.
+    delete this._header;
+    delete this._widget;
+    delete this._content;
   }
 
   /**
@@ -151,6 +154,7 @@ export class Collapse<T extends Widget = Widget> extends Widget {
 
 export namespace Collapse {
   export interface IOptions<T extends Widget = Widget> extends Widget.IOptions {
-    widget?: T;
+    widget: T;
+    collapsed?: boolean;
   }
 }

packages/apputils/src/index.ts

@@ -5,6 +5,7 @@ import '../style/index.css';
 
 export * from './clientsession';
 export * from './clipboard';
+export * from './collapse';
 export * from './commandlinker';
 export * from './commandpalette';
 export * from './dialog';

packages/apputils/style/collapse.css

@@ -14,13 +14,11 @@
   cursor: pointer;
   color: var(--jp-ui-font-color0);
   background-color: var(--jp-layout-color1);
-  border: var(--jp-border-width) solid var(--jp-border-color1);
   font-size: var(--jp-ui-font-size2);
 }
 
 .jp-Collapse-open > .jp-Collapse-header {
   cursor: default;
-  border-bottom: none;
 }
 
 .jp-Collapse .jp-Collapse-header::before {
@@ -42,8 +40,5 @@
   padding: 4px 4px 4px 12px;
   background-color: var(--jp-layout-color1);
   color: var(--jp-ui-font-color1);
-  border-left: var(--jp-border-width) solid var(--jp-border-color1);
-  border-right: var(--jp-border-width) solid var(--jp-border-color1);
-  border-bottom: var(--jp-border-width) solid var(--jp-border-color1);
   overflow: auto;
 }