@hpcc-js/phosphor 2.16.7 → 2.16.9

package/dist/index.js

@@ -5,8 +5,8 @@
 })(this, (function (exports, common) { 'use strict';
 
   var PKG_NAME = "@hpcc-js/phosphor";
-  var PKG_VERSION = "2.16.7";
-  var BUILD_VERSION = "2.104.14";
+  var PKG_VERSION = "2.16.9";
+  var BUILD_VERSION = "2.104.20";
 
   // Copyright (c) Jupyter Development Team.
   // Distributed under the terms of the Modified BSD License.
@@ -3082,6 +3082,8 @@
        * ### Notes
        * The callback function must be synchronous.
        *
+       * @deprecated This feature will be removed in Lumino 2.
+       *
        * @param fn The callback during which the signal is blocked
        */
       Signal.prototype.block = function (fn) {
@@ -3147,6 +3149,8 @@
        * ### Notes
        * The callback function must be synchronous.
        *
+       * @deprecated This feature will be removed in Lumino 2.
+       *
        * @param sender The signals sender
        * @param fn The callback during which all signals are blocked
        */
@@ -10825,30 +10829,20 @@
               if (this._hiddenMode === value) {
                   return;
               }
-              this._hiddenMode = value;
-              switch (value) {
-                  case Widget.HiddenMode.Display:
-                      this.node.style.willChange = 'auto';
-                      break;
-                  case Widget.HiddenMode.Scale:
-                      this.node.style.willChange = 'transform';
-                      break;
+              if (this.isHidden) {
+                  // Reset styles set by previous mode.
+                  this._toggleHidden(false);
               }
+              if (value == Widget.HiddenMode.Scale) {
+                  this.node.style.willChange = 'transform';
+              }
+              else {
+                  this.node.style.willChange = 'auto';
+              }
+              this._hiddenMode = value;
               if (this.isHidden) {
-                  if (value === Widget.HiddenMode.Display) {
-                      this.addClass('lm-mod-hidden');
-                      /* <DEPRECATED> */
-                      this.addClass('p-mod-hidden');
-                      /* </DEPRECATED> */
-                      this.node.style.transform = '';
-                  }
-                  else {
-                      this.node.style.transform = 'scale(0)';
-                      this.removeClass('lm-mod-hidden');
-                      /* <DEPRECATED> */
-                      this.removeClass('p-mod-hidden');
-                      /* </DEPRECATED> */
-                  }
+                  // Set styles for new mode.
+                  this._toggleHidden(true);
               }
           },
           enumerable: true,
@@ -11072,15 +11066,7 @@
           }
           this.clearFlag(Widget.Flag.IsHidden);
           this.node.removeAttribute('aria-hidden');
-          if (this.hiddenMode === Widget.HiddenMode.Display) {
-              this.removeClass('lm-mod-hidden');
-              /* <DEPRECATED> */
-              this.removeClass('p-mod-hidden');
-              /* </DEPRECATED> */
-          }
-          else {
-              this.node.style.transform = '';
-          }
+          this._toggleHidden(false);
           if (this.isAttached && (!this.parent || this.parent.isVisible)) {
               MessageLoop.sendMessage(this, Widget.Msg.AfterShow);
           }
@@ -11106,15 +11092,7 @@
           }
           this.setFlag(Widget.Flag.IsHidden);
           this.node.setAttribute('aria-hidden', 'true');
-          if (this.hiddenMode === Widget.HiddenMode.Display) {
-              this.addClass('lm-mod-hidden');
-              /* <DEPRECATED> */
-              this.addClass('p-mod-hidden');
-              /* </DEPRECATED> */
-          }
-          else {
-              this.node.style.transform = 'scale(0)';
-          }
+          this._toggleHidden(true);
           if (this.isAttached && (!this.parent || this.parent.isVisible)) {
               MessageLoop.sendMessage(this, Widget.Msg.AfterHide);
           }
@@ -11376,6 +11354,42 @@
        * The default implementation of this handler is a no-op.
        */
       Widget.prototype.onChildRemoved = function (msg) { };
+      Widget.prototype._toggleHidden = function (hidden) {
+          if (hidden) {
+              switch (this._hiddenMode) {
+                  case Widget.HiddenMode.Display:
+                      this.addClass('lm-mod-hidden');
+                      /* <DEPRECATED> */
+                      this.addClass('p-mod-hidden');
+                      /* </DEPRECATED> */
+                      break;
+                  case Widget.HiddenMode.Scale:
+                      this.node.style.transform = 'scale(0)';
+                      break;
+                  case Widget.HiddenMode.ContentVisibility:
+                      this.node.style.contentVisibility = 'hidden';
+                      this.node.style.zIndex = '-1';
+                      break;
+              }
+          }
+          else {
+              switch (this._hiddenMode) {
+                  case Widget.HiddenMode.Display:
+                      this.removeClass('lm-mod-hidden');
+                      /* <DEPRECATED> */
+                      this.removeClass('p-mod-hidden');
+                      /* </DEPRECATED> */
+                      break;
+                  case Widget.HiddenMode.Scale:
+                      this.node.style.transform = '';
+                      break;
+                  case Widget.HiddenMode.ContentVisibility:
+                      this.node.style.contentVisibility = '';
+                      this.node.style.zIndex = '';
+                      break;
+              }
+          }
+      };
       return Widget;
   }());
   /**
@@ -11392,6 +11406,10 @@
            * Hide the widget by setting the `transform` to `'scale(0)'`.
            */
           HiddenMode[HiddenMode["Scale"] = 1] = "Scale";
+          /**
+           *Hide the widget by setting the `content-visibility` to `'hidden'`.
+           */
+          HiddenMode[HiddenMode["ContentVisibility"] = 2] = "ContentVisibility";
       })(Widget.HiddenMode || (Widget.HiddenMode = {}));
       (function (Flag) {
           /**
@@ -20310,16 +20328,24 @@
           }
           // Using transform create an additional layer in the pixel pipeline
           // to limit the number of layer, it is set only if there is more than one widget.
-          if (this._hiddenMode === Widget.HiddenMode.Scale &&
-              refNode.tabBar.titles.length > 0) {
-              if (refNode.tabBar.titles.length == 1) {
+          if (this._hiddenMode === Widget.HiddenMode.Scale) {
+              if (refNode.tabBar.titles.length === 0) {
+                  // Singular tab should use display mode to limit number of layers.
+                  widget.hiddenMode = Widget.HiddenMode.Display;
+              }
+              else if (refNode.tabBar.titles.length == 1) {
+                  // If we are adding a second tab, switch the existing tab back to scale.
                   var existingWidget = refNode.tabBar.titles[0].owner;
                   existingWidget.hiddenMode = Widget.HiddenMode.Scale;
               }
-              widget.hiddenMode = Widget.HiddenMode.Scale;
+              else {
+                  // For the third and subsequent tabs no special action is needed.
+                  widget.hiddenMode = Widget.HiddenMode.Scale;
+              }
           }
           else {
-              widget.hiddenMode = Widget.HiddenMode.Display;
+              // For all other modes just propagate the current mode.
+              widget.hiddenMode = this._hiddenMode;
           }
           // Insert the widget's tab relative to the target index.
           refNode.tabBar.insertTab(index + (after ? 1 : 0), widget.title);
@@ -21752,6 +21778,8 @@
       DockPanel.prototype._evtDragLeave = function (event) {
           // Mark the event as handled.
           event.preventDefault();
+          if (this._tabsConstrained && event.source !== this)
+              return;
           event.stopPropagation();
           // The new target might be a descendant, so we might still handle the drop.
           // Hide asynchronously so that if a lm-dragover event bubbles up to us, the
@@ -21764,7 +21792,6 @@
       DockPanel.prototype._evtDragOver = function (event) {
           // Mark the event as handled.
           event.preventDefault();
-          event.stopPropagation();
           // Show the drop indicator overlay and update the drop
           // action based on the drop target zone under the mouse.
           if ((this._tabsConstrained && event.source !== this) ||
@@ -21772,6 +21799,7 @@
               event.dropAction = 'none';
           }
           else {
+              event.stopPropagation();
               event.dropAction = event.proposedAction;
           }
       };
@@ -21781,7 +21809,6 @@
       DockPanel.prototype._evtDrop = function (event) {
           // Mark the event as handled.
           event.preventDefault();
-          event.stopPropagation();
           // Hide the drop indicator overlay.
           this.overlay.hide(0);
           // Bail if the proposed action is to do nothing.
@@ -21793,7 +21820,8 @@
           var clientX = event.clientX, clientY = event.clientY;
           var _a = Private$5.findDropTarget(this, clientX, clientY, this._edges), zone = _a.zone, target = _a.target;
           // Bail if the drop zone is invalid.
-          if (zone === 'invalid') {
+          if ((this._tabsConstrained && event.source !== this) ||
+              zone === 'invalid') {
               event.dropAction = 'none';
               return;
           }
@@ -21857,6 +21885,8 @@
           }
           // Accept the proposed drop action.
           event.dropAction = event.proposedAction;
+          // Stop propagation if we have not bailed so far.
+          event.stopPropagation();
           // Activate the dropped widget.
           this.activateWidget(widget);
       };
@@ -23522,7 +23552,10 @@
       function MenuBar(options) {
           if (options === void 0) { options = {}; }
           var _this = _super.call(this, { node: Private$3.createNode() }) || this;
+          // Track the index of the item that is currently focused. -1 means nothing focused.
           _this._activeIndex = -1;
+          // Track which item can be focused using the TAB key. Unlike _activeIndex will always point to a menuitem.
+          _this._tabFocusIndex = 0;
           _this._menus = [];
           _this._childMenu = null;
           _this.addClass('lm-MenuBar');
@@ -23619,6 +23652,10 @@
               }
               // Update the active index.
               this._activeIndex = value;
+              // Update the focus index.
+              if (value !== -1) {
+                  this._tabFocusIndex = value;
+              }
               // Update focus to new active index
               if (this._activeIndex >= 0 &&
                   this.contentNode.childNodes[this._activeIndex]) {
@@ -23843,7 +23880,7 @@
        */
       MenuBar.prototype.onActivateRequest = function (msg) {
           if (this.isAttached) {
-              this.node.focus();
+              this.activeIndex = 0;
           }
       };
       /**
@@ -23854,6 +23891,9 @@
           var menus = this._menus;
           var renderer = this.renderer;
           var activeIndex = this._activeIndex;
+          var tabFocusIndex = this._tabFocusIndex >= 0 && this._tabFocusIndex < menus.length
+              ? this._tabFocusIndex
+              : 0;
           var content = new Array(menus.length);
           var _loop_1 = function (i, n) {
               var title = menus[i].title;
@@ -23864,6 +23904,7 @@
               content[i] = renderer.renderItem({
                   title: title,
                   active: active,
+                  tabbable: i === tabFocusIndex,
                   onfocus: function () {
                       _this.activeIndex = i;
                   }
@@ -23883,15 +23924,16 @@
       MenuBar.prototype._evtKeyDown = function (event) {
           // Fetch the key code for the event.
           var kc = event.keyCode;
-          // Do not trap the tab key.
+          // Reset the active index on tab, but do not trap the tab key.
           if (kc === 9) {
+              this.activeIndex = -1;
               return;
           }
           // A menu bar handles all other keydown events.
           event.preventDefault();
           event.stopPropagation();
-          // Enter, Up Arrow, Down Arrow
-          if (kc === 13 || kc === 38 || kc === 40) {
+          // Enter, Space, Up Arrow, Down Arrow
+          if (kc === 13 || kc === 32 || kc === 38 || kc === 40) {
               this.openActiveMenu();
               return;
           }
@@ -24183,7 +24225,8 @@
               var className = this.createItemClass(data);
               var dataset = this.createItemDataset(data);
               var aria = this.createItemARIA(data);
-              return h.li(__assign$2({ className: className, dataset: dataset, tabindex: '0', onfocus: data.onfocus }, aria), this.renderIcon(data), this.renderLabel(data));
+              return h.li(__assign$2({ className: className,
+                  dataset: dataset, tabindex: data.tabbable ? '0' : '-1', onfocus: data.onfocus }, aria), this.renderIcon(data), this.renderLabel(data));
           };
           /**
            * Render the icon element for a menu bar item.
@@ -24329,8 +24372,6 @@
           /* </DEPRECATED> */
           node.appendChild(content);
           content.setAttribute('role', 'menubar');
-          node.tabIndex = 0;
-          content.tabIndex = 0;
           return node;
       }
       Private.createNode = createNode;