dockview 1.0.0 → 1.0.3

package/dist/dockview.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.0.0
+ * @version 1.0.3
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -61,25 +61,6 @@
   var css_248z = ".dockview-theme-dark {\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-tab-close-icon: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/></svg>');\n  --dv-tab-dirty-icon: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z\"/></svg>');\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-group-view-background-color: #1e1e1e;\n  --dv-tabs-and-actions-container-background-color: #252526;\n  --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-tab-divider-color: #1e1e1e;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: #969696;\n  --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n  --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n  --dv-separator-border: rgb(68, 68, 68);\n  --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n}\n\n.dockview-theme-light {\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-tab-close-icon: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/></svg>');\n  --dv-tab-dirty-icon: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z\"/></svg>');\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-group-view-background-color: white;\n  --dv-tabs-and-actions-container-background-color: #f3f3f3;\n  --dv-activegroup-visiblepanel-tab-background-color: white;\n  --dv-activegroup-hiddenpanel-tab-background-color: #ececec;\n  --dv-inactivegroup-visiblepanel-tab-background-color: white;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #ececec;\n  --dv-tab-divider-color: white;\n  --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n  --dv-activegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.7);\n  --dv-inactivegroup-visiblepanel-tab-color: rgba(51, 51, 51, 0.7);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.35);\n  --dv-separator-border: rgba(128, 128, 128, 0.35);\n  --dv-paneview-header-border-color: rgb(51, 51, 51);\n}\n\n.dockview-theme-vs {\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-tab-close-icon: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/></svg>');\n  --dv-tab-dirty-icon: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z\"/></svg>');\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-group-view-background-color: #1e1e1e;\n  --dv-tabs-and-actions-container-background-color: #252526;\n  --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-tab-divider-color: #1e1e1e;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: #969696;\n  --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n  --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n  --dv-separator-border: rgb(68, 68, 68);\n  --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n  --dv-activegroup-visiblepanel-tab-background-color: dodgerblue;\n  --dv-tabs-and-actions-container-height: 18px;\n  --dv-tabs-and-actions-container-font-size: 11px;\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container {\n  border-bottom: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container {\n  border-bottom: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.actions-bar {\n  text-align: right;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n.actions-bar .actions-container {\n  display: flex;\n  padding: 0px;\n  margin: 0px;\n  justify-content: flex-end;\n}\n.actions-bar .actions-container a:active {\n  -webkit-mask-size: 100% 100% !important;\n  mask-size: 100% 100% !important;\n}\n.actions-bar .actions-container .close-action {\n  background-color: white;\n  height: 16px;\n  width: 16px;\n  display: block;\n  -webkit-mask: var(--dv-tab-close-icon) 50% 50%/90% 90% no-repeat;\n  mask: var(--dv-tab-close-icon) 50% 50%/90% 90% no-repeat;\n  margin-right: \"0.5em\";\n  cursor: pointer;\n}\n.drop-target {\n  position: relative;\n}\n.drop-target > .drop-target-dropzone {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  height: 100%;\n  width: 100%;\n  z-index: 10000;\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection {\n  position: relative;\n  pointer-events: none;\n  box-sizing: border-box;\n  height: 100%;\n  width: 100%;\n  background-color: var(--dv-drag-over-background-color);\n  transition-duration: 0.15s;\n  transition-timing-function: ease-out;\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.left, .drop-target > .drop-target-dropzone > .drop-target-selection.right {\n  width: 50%;\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.right {\n  transform: translate(100%, 0%);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.bottom {\n  transform: translate(0%, 100%);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.top, .drop-target > .drop-target-dropzone > .drop-target-selection.bottom {\n  height: 50%;\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.small-top {\n  border-top: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.small-bottom {\n  border-bottom: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.small-left {\n  border-left: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.small-right {\n  border-right: 1px solid var(--dv-drag-over-border-color);\n}\n.custom-dragging {\n  height: 24px;\n  line-height: 24px;\n  font-size: 11px;\n  width: 100px;\n  background-color: dodgerblue;\n  color: ghostwhite;\n  border-radius: 11px;\n  position: absolute;\n  padding-left: 10px;\n}\n\n.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab .tab-action {\n  background-color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {\n  background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);\n  color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab .tab-action {\n  background-color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  background-color: var(--dv-inactivegroup-visiblepanel-tab-background-color);\n  color: var(--dv-inactivegroup-visiblepanel-tab-color);\n}\n.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab .tab-action {\n  background-color: var(--dv-inactivegroup-visiblepanel-tab-color);\n}\n.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {\n  background-color: var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n  color: var(--dv-inactivegroup-hiddenpanel-tab-color);\n}\n.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab .tab-action {\n  background-color: var(--dv-inactivegroup-hiddenpanel-tab-color);\n}\n\n/**\n * when a tab is dragged we lose the above stylings because they are conditional on parent elements\n * therefore we also set some stylings for the dragging event\n **/\n.tab.dragging {\n  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.grid-view,\n.branch-node {\n  height: 100%;\n  width: 100%;\n}\n.groupview {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background-color: var(--dv-group-view-background-color);\n  overflow: hidden;\n}\n.groupview:focus {\n  outline: none;\n}\n.groupview.empty > .tabs-and-actions-container {\n  display: none;\n}\n.groupview > .content-container {\n  flex-grow: 1;\n  overflow: hidden;\n  outline: none;\n}\n.pane-container {\n  height: 100%;\n  width: 100%;\n}\n.pane-container.animated .view {\n  transition-duration: 0.15s;\n  transition-timing-function: ease-out;\n}\n.pane-container .view {\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  padding: 0px !important;\n}\n.pane-container .view:not(:first-child)::before {\n  background-color: transparent !important;\n}\n.pane-container .view:not(:first-child) .pane > .pane-header {\n  border-top: 1px solid var(--dv-paneview-header-border-color);\n}\n.pane-container .view .default-header {\n  background-color: var(--dv-group-view-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n  display: flex;\n  padding: 0px 8px;\n}\n.pane-container .view .default-header > span {\n  flex-grow: 1;\n}\n.pane-container:first-of-type > .pane > .pane-header {\n  border-top: none !important;\n}\n.pane-container .pane {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  height: 100%;\n}\n.pane-container .pane .pane-header {\n  box-sizing: border-box;\n  user-select: none;\n  position: relative;\n  outline: none;\n}\n.pane-container .pane .pane-header.pane-draggable {\n  cursor: pointer;\n}\n.pane-container .pane .pane-header:focus:before, .pane-container .pane .pane-header:focus-within:before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 5;\n  content: \"\";\n  pointer-events: none;\n  outline: 1px solid;\n  outline-width: -1px;\n  outline-style: solid;\n  outline-offset: -1px;\n  outline-color: var(--dv-paneview-active-outline-color);\n}\n.pane-container .pane .pane-body {\n  overflow-y: auto;\n  overflow-x: hidden;\n  flex-grow: 1;\n  position: relative;\n  outline: none;\n}\n.pane-container .pane .pane-body:focus:before, .pane-container .pane .pane-body:focus-within:before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 5;\n  content: \"\";\n  pointer-events: none;\n  outline: 1px solid;\n  outline-width: -1px;\n  outline-style: solid;\n  outline-offset: -1px;\n  outline-color: var(--dv-paneview-active-outline-color);\n}\n.tabs-and-actions-container {\n  display: flex;\n  background-color: var(--dv-tabs-and-actions-container-background-color);\n  flex-shrink: 0;\n  box-sizing: border-box;\n  height: var(--dv-tabs-and-actions-container-height);\n  font-size: var(--dv-tabs-and-actions-container-font-size);\n}\n.tabs-and-actions-container.hidden {\n  display: none;\n}\n.tabs-and-actions-container .void-container {\n  display: flex;\n  flex-grow: 1;\n}\n.tabs-and-actions-container .tabs-container {\n  display: flex;\n  overflow-x: overlay;\n  overflow-y: hidden;\n  scrollbar-width: thin;\n  /* Track */\n  /* Handle */\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar {\n  height: 3px;\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar-track {\n  background: transparent;\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar-thumb {\n  background: var(--dv-tabs-container-scrollbar-color);\n}\n.tabs-and-actions-container .tabs-container .tab {\n  -webkit-user-drag: element;\n  outline: none;\n  min-width: 75px;\n  cursor: pointer;\n  position: relative;\n  box-sizing: border-box;\n}\n.tabs-and-actions-container .tabs-container .tab:not(:first-child)::before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 5;\n  pointer-events: none;\n  background-color: var(--dv-tab-divider-color);\n  width: 1px;\n  height: 100%;\n}\n.split-view-container {\n  position: relative;\n  overflow: hidden;\n  height: 100%;\n  width: 100%;\n}\n.split-view-container.animation .view,\n.split-view-container.animation .sash {\n  transition-duration: 0.15s;\n  transition-timing-function: ease-out;\n}\n.split-view-container.horizontal {\n  height: 100%;\n}\n.split-view-container.horizontal > .sash-container > .sash {\n  height: 100%;\n  width: 4px;\n}\n.split-view-container.horizontal > .sash-container > .sash.enabled {\n  cursor: ew-resize;\n}\n.split-view-container.horizontal > .sash-container > .sash.disabled {\n  cursor: default;\n}\n.split-view-container.horizontal > .sash-container > .sash.maximum {\n  cursor: w-resize;\n}\n.split-view-container.horizontal > .sash-container > .sash.minimum {\n  cursor: e-resize;\n}\n.split-view-container.horizontal > .view-container > .view:not(:first-child)::before {\n  height: 100%;\n  width: 1px;\n}\n.split-view-container.vertical {\n  width: 100%;\n}\n.split-view-container.vertical > .sash-container > .sash {\n  width: 100%;\n  height: 4px;\n}\n.split-view-container.vertical > .sash-container > .sash.enabled {\n  cursor: ns-resize;\n}\n.split-view-container.vertical > .sash-container > .sash.disabled {\n  cursor: default;\n}\n.split-view-container.vertical > .sash-container > .sash.maximum {\n  cursor: n-resize;\n}\n.split-view-container.vertical > .sash-container > .sash.minimum {\n  cursor: s-resize;\n}\n.split-view-container.vertical > .view-container > .view {\n  width: 100%;\n}\n.split-view-container.vertical > .view-container > .view:not(:first-child)::before {\n  height: 1px;\n  width: 100%;\n}\n.split-view-container .sash-container {\n  height: 100%;\n  width: 100%;\n  position: absolute;\n}\n.split-view-container .sash-container .sash {\n  position: absolute;\n  z-index: 99;\n  outline: none;\n}\n.split-view-container .sash-container .sash:active {\n  transition: background-color 0.1s ease-in-out;\n  background-color: var(--dv-active-sash-color, transparent);\n}\n.split-view-container .sash-container .sash:hover {\n  background-color: var(--dv-active-sash-color, transparent);\n  transition: background-color 0.1s ease-in-out;\n  transition-delay: 0.5s;\n}\n.split-view-container .view-container {\n  position: relative;\n  height: 100%;\n  width: 100%;\n}\n.split-view-container .view-container .view {\n  height: 100%;\n  box-sizing: border-box;\n  overflow: auto;\n  position: absolute;\n}\n.split-view-container.separator-border .view:not(:first-child)::before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 5;\n  pointer-events: none;\n  background-color: var(--dv-separator-border);\n}\n.dragged {\n  transform: translate3d(0px, 0px, 0px);\n  /* forces tab to be drawn on a separate layer (see https://github.com/microsoft/vscode/issues/18733) */\n}\n\n.tab {\n  flex-shrink: 0;\n}\n.tab.dragging .tab-action {\n  background-color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.tab.active-tab > .default-tab .tab-action {\n  visibility: visible;\n}\n.tab.inactive-tab > .default-tab .tab-action:not(.dirty) {\n  visibility: hidden;\n}\n.tab.inactive-tab > .default-tab:hover .tab-action {\n  visibility: visible;\n}\n.tab .default-tab {\n  position: relative;\n  height: 100%;\n  display: flex;\n  min-width: 80px;\n  align-items: center;\n  padding-left: 10px;\n  white-space: nowrap;\n  text-overflow: elipsis;\n}\n.tab .default-tab .tab-content {\n  flex-grow: 1;\n}\n.tab .default-tab .action-container {\n  text-align: right;\n  width: 28px;\n  display: flex;\n}\n.tab .default-tab .action-container .tab-list {\n  display: flex;\n  padding: 0px;\n  margin: 0px;\n  justify-content: flex-end;\n}\n.tab .default-tab .action-container .tab-list a:active:hover {\n  -webkit-mask-size: 100% 100% !important;\n  mask-size: 100% 100% !important;\n}\n.tab .default-tab .action-container .tab-list .tab-action {\n  height: 16px;\n  width: 16px;\n  display: block;\n  -webkit-mask: var(--dv-tab-close-icon) 50% 50%/90% 90% no-repeat;\n  mask: var(--dv-tab-close-icon) 50% 50%/90% 90% no-repeat;\n  margin-right: \"0.5em\";\n}\n.tab .default-tab .action-container .tab-list .tab-action.disable-close {\n  display: none;\n}\n.tab .default-tab .action-container .tab-list .tab-action.dirty:not(:hover) {\n  display: block;\n  -webkit-mask: var(--dv-tab-dirty-icon) 50% 50%/60% 60% no-repeat;\n  mask: var(--dv-tab-dirty-icon) 50% 50%/60% 60% no-repeat;\n}\n.watermark {\n  display: flex;\n  width: 100%;\n}\n.watermark.has-actions .watermark-title .actions-bar {\n  display: none;\n}\n.watermark .watermark-title {\n  height: 35px;\n  width: 100%;\n  display: flex;\n}\n.watermark .watermark-content {\n  flex-grow: 1;\n}";
   styleInject(css_248z);
 
-  function runFootnote() {
-      var _a, _b;
-      const DOCKVIEW_SUPPRESS_WATERMARK = 'DOCKVIEW_WATERMARK_SUPPRESSED';
-      const isTest = ((_b = (_a = window.process) === null || _a === void 0 ? void 0 : _a.env) === null || _b === void 0 ? void 0 : _b.NODE_ENV) === 'test';
-      if (isTest) {
-          return; // don't spam people tests
-      }
-      const isSuppressed = !!window[DOCKVIEW_SUPPRESS_WATERMARK];
-      if (!isSuppressed) {
-          console.log([
-              'dockview: https://github.com/mathuo/dockview for examples and documentation',
-              'dockview: https://www.npmjs.com/package/dockview',
-              `dockview: To suppress this message set window.${DOCKVIEW_SUPPRESS_WATERMARK}=1 before importing the dockview package`,
-              '',
-          ].join('\n'));
-      }
-  }
-  runFootnote();
-
   exports.Event = void 0;
   (function (Event) {
       Event.any = (...children) => {
@@ -150,6 +131,24 @@
               element.removeEventListener(type, listener);
           },
       };
+  }
+  class TickDelayedEvent {
+      constructor() {
+          this._onFired = new Emitter();
+          this.onEvent = this._onFired.event;
+      }
+      fire() {
+          if (this.timer) {
+              clearTimeout(this.timer);
+          }
+          this.timer = setTimeout(() => {
+              this._onFired.fire();
+              clearTimeout(this.timer);
+          });
+      }
+      dispose() {
+          this._onFired.dispose();
+      }
   }
 
   exports.Disposable = void 0;
@@ -332,6 +331,12 @@
       get onDidLayoutChange() {
           return this.component.onDidLayoutChange;
       }
+      get onDidAddView() {
+          return this.component.onDidAddView;
+      }
+      get onDidRemoveView() {
+          return this.component.onDidRemoveView;
+      }
       get orientation() {
           return this.component.orientation;
       }
@@ -394,6 +399,23 @@
       get onDidLayoutChange() {
           return this.component.onDidLayoutChange;
       }
+      get onDidAddView() {
+          return this.component.onDidAddView;
+      }
+      get onDidRemoveView() {
+          return this.component.onDidRemoveView;
+      }
+      get onDidDrop() {
+          const emitter = new Emitter();
+          const disposable = this.component.onDidDrop((e) => {
+              emitter.fire(Object.assign(Object.assign({}, e), { api: this }));
+          });
+          emitter.dispose = () => {
+              disposable.dispose();
+              emitter.dispose();
+          };
+          return emitter.event;
+      }
       getPanels() {
           return this.component.getPanels();
       }
@@ -916,7 +938,7 @@
           this._onDidAddView = new Emitter();
           this.onDidAddView = this._onDidAddView.event;
           this._onDidRemoveView = new Emitter();
-          this.onDidRemoveView = this._onDidAddView.event;
+          this.onDidRemoveView = this._onDidRemoveView.event;
           this._startSnappingEnabled = true;
           this._endSnappingEnabled = true;
           this.resize = (index, delta, sizes = this.views.map((x) => x.size), lowPriorityIndexes, highPriorityIndexes, overloadMinDelta = Number.NEGATIVE_INFINITY, overloadMaxDelta = Number.POSITIVE_INFINITY, snapBefore, snapAfter) => {
@@ -1558,9 +1580,9 @@
           var _a;
           super();
           this.paneItems = [];
+          this.skipAnimation = false;
           this._onDidChange = new Emitter();
           this.onDidChange = this._onDidChange.event;
-          this.skipAnimation = false;
           this._orientation = (_a = options.orientation) !== null && _a !== void 0 ? _a : exports.Orientation.VERTICAL;
           this.element = document.createElement('div');
           this.element.className = 'pane-container';
@@ -1660,9 +1682,6 @@
           }
       }
       layout(size, orthogonalSize) {
-          // for (const paneItem of this.paneItems) {
-          //     paneItem.pane.orthogonalSize = orthogonalSize;
-          // }
           this.splitview.layout(size, orthogonalSize);
       }
       setupAnimation() {
@@ -1846,7 +1865,7 @@
                   const state = this._state;
                   this.removeDropTarget();
                   if (state) {
-                      this._onDrop.fire({ position: state, event: e });
+                      this._onDrop.fire({ position: state, nativeEvent: e });
                   }
               },
           }));
@@ -2509,7 +2528,6 @@
           }
           parent.removeChild(index, sizing);
           if (parent.children.length === 0) {
-              // throw new Error('Invalid grid state');
               return node.view;
           }
           if (parent.children.length > 1) {
@@ -2810,7 +2828,7 @@
           });
           this.addDisposables(this.voidDropTarget.onDrop((event) => {
               this._onDrop.fire({
-                  event: event.event,
+                  event: event.nativeEvent,
                   index: this.tabs.length,
               });
           }), this.voidDropTarget, addDisposableListener(this.tabContainer, 'mousedown', (event) => {
@@ -2932,7 +2950,7 @@
               }
           }), tabToAdd.onDrop((event) => {
               this._onDrop.fire({
-                  event: event.event,
+                  event: event.nativeEvent,
                   index: this.tabs.findIndex((x) => x.value === tabToAdd),
               });
           }));
@@ -3008,9 +3026,9 @@
           }), this.contentContainer.onDidFocus(() => {
               this.accessor.doSetGroupActive(this.parent, true);
           }), this.contentContainer.onDidBlur(() => {
-              // this._activePanel?.api._ondid
+              // noop
           }), this.dropTarget.onDrop((event) => {
-              this.handleDropEvent(event.event, event.position);
+              this.handleDropEvent(event.nativeEvent, event.position);
           }));
       }
       get element() {
@@ -3428,11 +3446,8 @@
               this._onGridEvent.fire({ kind: exports.GroupChangeKind.LAYOUT });
           }));
           this.addDisposables((() => {
-              /**
-               * TODO Fix this relatively ugly 'merge and delay'
-               */
-              let timer;
-              return this.onGridEvent((event) => {
+              const tickDelayedEvent = new TickDelayedEvent();
+              return new CompositeDisposable(this.onGridEvent((event) => {
                   if ([
                       exports.GroupChangeKind.ADD_GROUP,
                       exports.GroupChangeKind.REMOVE_GROUP,
@@ -3442,15 +3457,11 @@
                       exports.GroupChangeKind.PANEL_ACTIVE,
                       exports.GroupChangeKind.LAYOUT,
                   ].includes(event.kind)) {
-                      if (timer) {
-                          clearTimeout(timer);
-                      }
-                      timer = setTimeout(() => {
-                          this._onDidLayoutChange.fire();
-                          clearTimeout(timer);
-                      });
+                      tickDelayedEvent.fire();
                   }
-              });
+              }), tickDelayedEvent.onEvent(() => {
+                  this._onDidLayoutChange.fire();
+              }), tickDelayedEvent);
           })());
       }
       get id() {
@@ -4456,7 +4467,9 @@
           this.tab.init(params);
       }
       updateParentGroup(group, isPanelVisible) {
-          // TODO
+          var _a;
+          this._content.updateParentGroup(group, isPanelVisible);
+          (_a = this._tab) === null || _a === void 0 ? void 0 : _a.updateParentGroup(group, isPanelVisible);
       }
       layout(width, height) {
           this.content.layout(width, height);
@@ -5226,6 +5239,10 @@
           this.element = element;
           this._disposable = new MutableDisposable();
           this.panels = new Map();
+          this._onDidAddView = new Emitter();
+          this.onDidAddView = this._onDidAddView.event;
+          this._onDidRemoveView = new Emitter();
+          this.onDidRemoveView = this._onDidRemoveView.event;
           this._onDidLayoutChange = new Emitter();
           this.onDidLayoutChange = this._onDidLayoutChange.event;
           this._options = options;
@@ -5251,7 +5268,7 @@
           this._splitview = value;
           this._disposable.value = new CompositeDisposable(this._splitview.onDidSashEnd(() => {
               this._onDidLayoutChange.fire(undefined);
-          }));
+          }), this._splitview.onDidAddView((e) => this._onDidAddView.fire(e)), this._splitview.onDidRemoveView((e) => this._onDidRemoveView.fire(e)));
       }
       get minimumSize() {
           return this.splitview.minimumSize;
@@ -5425,6 +5442,10 @@
                       });
                       panel.orientation = orientation;
                       this.doAddView(panel);
+                      setTimeout(() => {
+                          // the original onDidAddView events are missed since they are fired before we can subcribe to them
+                          this._onDidAddView.fire(panel);
+                      }, 0);
                       return { size: view.size, view: panel };
                   }),
               },
@@ -5543,7 +5564,7 @@
   }
 
   class PaneviewPanel extends BasePanelView {
-      constructor(id, component, headerComponent, orientation, isExpanded) {
+      constructor(id, component, headerComponent, orientation, isExpanded, isHeaderVisible) {
           super(id, component, new PaneviewPanelApiImpl(id));
           this.headerComponent = headerComponent;
           this._onDidChangeExpansionState = new Emitter({ replay: true });
@@ -5559,6 +5580,7 @@
           this.expandedSize = 0;
           this.api.pane = this; // TODO cannot use 'this' before 'super'
           this._isExpanded = isExpanded;
+          this._headerVisible = isHeaderVisible;
           this._onDidChangeExpansionState.fire(this.isExpanded()); // initialize value
           this._orientation = orientation;
           this.element.classList.add('pane');
@@ -5626,6 +5648,13 @@
           this._maximumBodySize =
               typeof value === 'number' ? value : Number.POSITIVE_INFINITY;
       }
+      get headerVisible() {
+          return this._headerVisible;
+      }
+      set headerVisible(value) {
+          this._headerVisible = value;
+          this.header.style.display = value ? '' : 'none';
+      }
       setVisible(isVisible) {
           this.api._onDidVisibilityChange.fire({ isVisible });
       }
@@ -5723,7 +5752,7 @@
 
   class DraggablePaneviewPanel extends PaneviewPanel {
       constructor(id, component, headerComponent, orientation, isExpanded, disableDnd) {
-          super(id, component, headerComponent, orientation, isExpanded);
+          super(id, component, headerComponent, orientation, isExpanded, true);
           this._onDidDrop = new Emitter();
           this.onDidDrop = this._onDidDrop.event;
           if (!disableDnd) {
@@ -5846,6 +5875,10 @@
           this.onDidLayoutChange = this._onDidLayoutChange.event;
           this._onDidDrop = new Emitter();
           this.onDidDrop = this._onDidDrop.event;
+          this._onDidAddView = new Emitter();
+          this.onDidAddView = this._onDidAddView.event;
+          this._onDidRemoveView = new Emitter();
+          this.onDidRemoveView = this._onDidRemoveView.event;
           this._options = options;
           if (!options.components) {
               options.components = {};
@@ -5859,17 +5892,11 @@
           });
           this.addDisposables(this._disposable);
       }
-      get onDidAddView() {
-          return this._paneview.onDidAddView;
-      }
-      get onDidRemoveView() {
-          return this._paneview.onDidRemoveView;
-      }
       set paneview(value) {
           this._paneview = value;
-          this._disposable.value = new CompositeDisposable(this.paneview.onDidChange(() => {
+          this._disposable.value = new CompositeDisposable(this._paneview.onDidChange(() => {
               this._onDidLayoutChange.fire(undefined);
-          }));
+          }), this._paneview.onDidAddView((e) => this._onDidAddView.fire(e)), this._paneview.onDidRemoveView((e) => this._onDidRemoveView.fire(e)));
       }
       get paneview() {
           return this._paneview;
@@ -6049,6 +6076,10 @@
                           });
                           panel.orientation = this.paneview.orientation;
                       });
+                      setTimeout(() => {
+                          // the original onDidAddView events are missed since they are fired before we can subcribe to them
+                          this._onDidAddView.fire(panel);
+                      }, 0);
                       return { size: view.size, view: panel };
                   }),
               },
@@ -6554,6 +6585,22 @@
               dockview.dispose();
           };
       }, []);
+      React__namespace.useEffect(() => {
+          if (!dockviewRef.current) {
+              return;
+          }
+          dockviewRef.current.updateOptions({
+              frameworkComponents: props.components,
+          });
+      }, [props.components]);
+      React__namespace.useEffect(() => {
+          if (!dockviewRef.current) {
+              return;
+          }
+          dockviewRef.current.updateOptions({
+              frameworkTabComponents: props.tabComponents,
+          });
+      }, [props.tabComponents]);
       React__namespace.useEffect(() => {
           if (!props.onTabContextMenu || !dockviewRef.current) {
               return () => {
@@ -6688,6 +6735,14 @@
               splitview.dispose();
           };
       }, []);
+      React__namespace.useEffect(() => {
+          if (!splitviewRef.current) {
+              return;
+          }
+          splitviewRef.current.updateOptions({
+              frameworkComponents: props.components,
+          });
+      }, [props.components]);
       return (React__namespace.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
   });
   SplitviewReact.displayName = 'SplitviewComponent';
@@ -6758,6 +6813,14 @@
               gridview.dispose();
           };
       }, []);
+      React__namespace.useEffect(() => {
+          if (!gridviewRef.current) {
+              return;
+          }
+          gridviewRef.current.updateOptions({
+              frameworkComponents: props.components,
+          });
+      }, [props.components]);
       return (React__namespace.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
   });
   GridviewReact.displayName = 'GridviewComponent';
@@ -6848,14 +6911,18 @@
           };
       }, []);
       React__namespace.useEffect(() => {
-          var _a;
-          (_a = paneviewRef.current) === null || _a === void 0 ? void 0 : _a.updateOptions({
+          if (!paneviewRef.current) {
+              return;
+          }
+          paneviewRef.current.updateOptions({
               frameworkComponents: props.components,
           });
       }, [props.components]);
       React__namespace.useEffect(() => {
-          var _a;
-          (_a = paneviewRef.current) === null || _a === void 0 ? void 0 : _a.updateOptions({
+          if (!paneviewRef.current) {
+              return;
+          }
+          paneviewRef.current.updateOptions({
               headerframeworkComponents: props.headerComponents,
           });
       }, [props.headerComponents]);
@@ -6914,6 +6981,7 @@
   exports.SplitviewPanel = SplitviewPanel;
   exports.SplitviewReact = SplitviewReact;
   exports.Tab = Tab$1;
+  exports.TickDelayedEvent = TickDelayedEvent;
   exports.addDisposableListener = addDisposableListener;
   exports.addDisposableWindowListener = addDisposableWindowListener;
   exports.extractData = extractData;