@hpcc-js/phosphor 2.16.8 → 2.16.9

package/dist/index.es6.js

@@ -1,8 +1,8 @@
 import { select, Widget as Widget$1, HTMLWidget } from '@hpcc-js/common';
 
 var PKG_NAME = "@hpcc-js/phosphor";
-var PKG_VERSION = "2.16.8";
-var BUILD_VERSION = "2.104.18";
+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.
@@ -3078,6 +3078,8 @@ var Signal = /** @class */ (function () {
      * ### 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) {
@@ -3143,6 +3145,8 @@ var Signal = /** @class */ (function () {
      * ### 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
      */
@@ -10821,30 +10825,20 @@ var Widget = /** @class */ (function () {
             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,
@@ -11068,15 +11062,7 @@ var Widget = /** @class */ (function () {
         }
         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);
         }
@@ -11102,15 +11088,7 @@ var Widget = /** @class */ (function () {
         }
         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);
         }
@@ -11372,6 +11350,42 @@ var Widget = /** @class */ (function () {
      * 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;
 }());
 /**
@@ -11388,6 +11402,10 @@ var Widget = /** @class */ (function () {
          * 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) {
         /**
@@ -20306,16 +20324,24 @@ var DockLayout = /** @class */ (function (_super) {
         }
         // 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);
@@ -21748,6 +21774,8 @@ var DockPanel$1 = /** @class */ (function (_super) {
     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
@@ -21760,7 +21788,6 @@ var DockPanel$1 = /** @class */ (function (_super) {
     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) ||
@@ -21768,6 +21795,7 @@ var DockPanel$1 = /** @class */ (function (_super) {
             event.dropAction = 'none';
         }
         else {
+            event.stopPropagation();
             event.dropAction = event.proposedAction;
         }
     };
@@ -21777,7 +21805,6 @@ var DockPanel$1 = /** @class */ (function (_super) {
     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.
@@ -21789,7 +21816,8 @@ var DockPanel$1 = /** @class */ (function (_super) {
         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;
         }
@@ -21853,6 +21881,8 @@ var DockPanel$1 = /** @class */ (function (_super) {
         }
         // 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);
     };
@@ -23518,7 +23548,10 @@ var MenuBar = /** @class */ (function (_super) {
     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');
@@ -23615,6 +23648,10 @@ var MenuBar = /** @class */ (function (_super) {
             }
             // 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]) {
@@ -23839,7 +23876,7 @@ var MenuBar = /** @class */ (function (_super) {
      */
     MenuBar.prototype.onActivateRequest = function (msg) {
         if (this.isAttached) {
-            this.node.focus();
+            this.activeIndex = 0;
         }
     };
     /**
@@ -23850,6 +23887,9 @@ var MenuBar = /** @class */ (function (_super) {
         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;
@@ -23860,6 +23900,7 @@ var MenuBar = /** @class */ (function (_super) {
             content[i] = renderer.renderItem({
                 title: title,
                 active: active,
+                tabbable: i === tabFocusIndex,
                 onfocus: function () {
                     _this.activeIndex = i;
                 }
@@ -23879,15 +23920,16 @@ var MenuBar = /** @class */ (function (_super) {
     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;
         }
@@ -24179,7 +24221,8 @@ var MenuBar = /** @class */ (function (_super) {
             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.
@@ -24325,8 +24368,6 @@ var Private$3;
         /* </DEPRECATED> */
         node.appendChild(content);
         content.setAttribute('role', 'menubar');
-        node.tabIndex = 0;
-        content.tabIndex = 0;
         return node;
     }
     Private.createNode = createNode;