@hpcc-js/phosphor 2.16.5 → 2.16.7

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.5";
-var BUILD_VERSION = "2.104.11";
+var PKG_VERSION = "2.16.7";
+var BUILD_VERSION = "2.104.14";
 
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
@@ -2823,6 +2823,195 @@ var UUID;
     UUID.uuid4 = uuid4Factory(Random.getRandomValues);
 })(UUID || (UUID = {}));
 
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+/*-----------------------------------------------------------------------------
+| Copyright (c) 2014-2017, PhosphorJS Contributors
+|
+| Distributed under the terms of the BSD 3-Clause License.
+|
+| The full license is in the file LICENSE, distributed with this software.
+|----------------------------------------------------------------------------*/
+/**
+ * A class which attaches a value to an external object.
+ *
+ * #### Notes
+ * Attached properties are used to extend the state of an object with
+ * semantic data from an unrelated class. They also encapsulate value
+ * creation, coercion, and notification.
+ *
+ * Because attached property values are stored in a hash table, which
+ * in turn is stored in a WeakMap keyed on the owner object, there is
+ * non-trivial storage overhead involved in their use. The pattern is
+ * therefore best used for the storage of rare data.
+ */
+var AttachedProperty = /** @class */ (function () {
+    /**
+     * Construct a new attached property.
+     *
+     * @param options - The options for initializing the property.
+     */
+    function AttachedProperty(options) {
+        this._pid = Private$r.nextPID();
+        this.name = options.name;
+        this._create = options.create;
+        this._coerce = options.coerce || null;
+        this._compare = options.compare || null;
+        this._changed = options.changed || null;
+    }
+    /**
+     * Get the current value of the property for a given owner.
+     *
+     * @param owner - The property owner of interest.
+     *
+     * @returns The current value of the property.
+     *
+     * #### Notes
+     * If the value has not yet been set, the default value will be
+     * computed and assigned as the current value of the property.
+     */
+    AttachedProperty.prototype.get = function (owner) {
+        var value;
+        var map = Private$r.ensureMap(owner);
+        if (this._pid in map) {
+            value = map[this._pid];
+        }
+        else {
+            value = map[this._pid] = this._createValue(owner);
+        }
+        return value;
+    };
+    /**
+     * Set the current value of the property for a given owner.
+     *
+     * @param owner - The property owner of interest.
+     *
+     * @param value - The value for the property.
+     *
+     * #### Notes
+     * If the value has not yet been set, the default value will be
+     * computed and used as the previous value for the comparison.
+     */
+    AttachedProperty.prototype.set = function (owner, value) {
+        var oldValue;
+        var map = Private$r.ensureMap(owner);
+        if (this._pid in map) {
+            oldValue = map[this._pid];
+        }
+        else {
+            oldValue = map[this._pid] = this._createValue(owner);
+        }
+        var newValue = this._coerceValue(owner, value);
+        this._maybeNotify(owner, oldValue, (map[this._pid] = newValue));
+    };
+    /**
+     * Explicitly coerce the current property value for a given owner.
+     *
+     * @param owner - The property owner of interest.
+     *
+     * #### Notes
+     * If the value has not yet been set, the default value will be
+     * computed and used as the previous value for the comparison.
+     */
+    AttachedProperty.prototype.coerce = function (owner) {
+        var oldValue;
+        var map = Private$r.ensureMap(owner);
+        if (this._pid in map) {
+            oldValue = map[this._pid];
+        }
+        else {
+            oldValue = map[this._pid] = this._createValue(owner);
+        }
+        var newValue = this._coerceValue(owner, oldValue);
+        this._maybeNotify(owner, oldValue, (map[this._pid] = newValue));
+    };
+    /**
+     * Get or create the default value for the given owner.
+     */
+    AttachedProperty.prototype._createValue = function (owner) {
+        var create = this._create;
+        return create(owner);
+    };
+    /**
+     * Coerce the value for the given owner.
+     */
+    AttachedProperty.prototype._coerceValue = function (owner, value) {
+        var coerce = this._coerce;
+        return coerce ? coerce(owner, value) : value;
+    };
+    /**
+     * Compare the old value and new value for equality.
+     */
+    AttachedProperty.prototype._compareValue = function (oldValue, newValue) {
+        var compare = this._compare;
+        return compare ? compare(oldValue, newValue) : oldValue === newValue;
+    };
+    /**
+     * Run the change notification if the given values are different.
+     */
+    AttachedProperty.prototype._maybeNotify = function (owner, oldValue, newValue) {
+        var changed = this._changed;
+        if (changed && !this._compareValue(oldValue, newValue)) {
+            changed(owner, oldValue, newValue);
+        }
+    };
+    return AttachedProperty;
+}());
+/**
+ * The namespace for the `AttachedProperty` class statics.
+ */
+(function (AttachedProperty) {
+    /**
+     * Clear the stored property data for the given owner.
+     *
+     * @param owner - The property owner of interest.
+     *
+     * #### Notes
+     * This will clear all property values for the owner, but it will
+     * **not** run the change notification for any of the properties.
+     */
+    function clearData(owner) {
+        Private$r.ownerData.delete(owner);
+    }
+    AttachedProperty.clearData = clearData;
+})(AttachedProperty || (AttachedProperty = {}));
+/**
+ * The namespace for the module implementation details.
+ */
+var Private$r;
+(function (Private) {
+    /**
+     * A weak mapping of property owner to property map.
+     */
+    Private.ownerData = new WeakMap();
+    /**
+     * A function which computes successive unique property ids.
+     */
+    Private.nextPID = (function () {
+        var id = 0;
+        return function () {
+            var rand = Math.random();
+            var stem = ("" + rand).slice(2);
+            return "pid-" + stem + "-" + id++;
+        };
+    })();
+    /**
+     * Lookup the data map for the property owner.
+     *
+     * This will create the map if one does not already exist.
+     */
+    function ensureMap(owner) {
+        var map = Private.ownerData.get(owner);
+        if (map) {
+            return map;
+        }
+        map = Object.create(null);
+        Private.ownerData.set(owner, map);
+        return map;
+    }
+    Private.ensureMap = ensureMap;
+})(Private$r || (Private$r = {}));
+
 // Copyright (c) Jupyter Development Team.
 /**
  * A concrete implementation of `ISignal`.
@@ -2880,8 +3069,26 @@ var Signal = /** @class */ (function () {
      * @param sender - The sender which owns the signal.
      */
     function Signal(sender) {
+        this._blockedCount = 0;
         this.sender = sender;
     }
+    /**
+     * Block the signal during the execution of a callback.
+     *
+     * ### Notes
+     * The callback function must be synchronous.
+     *
+     * @param fn The callback during which the signal is blocked
+     */
+    Signal.prototype.block = function (fn) {
+        this._blockedCount++;
+        try {
+            fn();
+        }
+        finally {
+            this._blockedCount--;
+        }
+    };
     /**
      * Connect a slot to the signal.
      *
@@ -2893,7 +3100,7 @@ var Signal = /** @class */ (function () {
      * @returns `true` if the connection succeeds, `false` otherwise.
      */
     Signal.prototype.connect = function (slot, thisArg) {
-        return Private$r.connect(this, slot, thisArg);
+        return Private$q.connect(this, slot, thisArg);
     };
     /**
      * Disconnect a slot from the signal.
@@ -2906,7 +3113,7 @@ var Signal = /** @class */ (function () {
      * @returns `true` if the connection is removed, `false` otherwise.
      */
     Signal.prototype.disconnect = function (slot, thisArg) {
-        return Private$r.disconnect(this, slot, thisArg);
+        return Private$q.disconnect(this, slot, thisArg);
     };
     /**
      * Emit the signal and invoke the connected slots.
@@ -2919,7 +3126,9 @@ var Signal = /** @class */ (function () {
      * Exceptions thrown by connected slots will be caught and logged.
      */
     Signal.prototype.emit = function (args) {
-        Private$r.emit(this, args);
+        if (!this._blockedCount) {
+            Private$q.emit(this, args);
+        }
     };
     return Signal;
 }());
@@ -2927,6 +3136,27 @@ var Signal = /** @class */ (function () {
  * The namespace for the `Signal` class statics.
  */
 (function (Signal) {
+    /**
+     * Block all signals emitted by an object during
+     * the execution of a callback.
+     *
+     * ### Notes
+     * The callback function must be synchronous.
+     *
+     * @param sender The signals sender
+     * @param fn The callback during which all signals are blocked
+     */
+    function blockAll(sender, fn) {
+        var blockedProperty = Private$q.blockedProperty;
+        blockedProperty.set(sender, blockedProperty.get(sender) + 1);
+        try {
+            fn();
+        }
+        finally {
+            blockedProperty.set(sender, blockedProperty.get(sender) - 1);
+        }
+    }
+    Signal.blockAll = blockAll;
     /**
      * Remove all connections between a sender and receiver.
      *
@@ -2940,7 +3170,7 @@ var Signal = /** @class */ (function () {
      * the receiver.
      */
     function disconnectBetween(sender, receiver) {
-        Private$r.disconnectBetween(sender, receiver);
+        Private$q.disconnectBetween(sender, receiver);
     }
     Signal.disconnectBetween = disconnectBetween;
     /**
@@ -2949,7 +3179,7 @@ var Signal = /** @class */ (function () {
      * @param sender - The sender object of interest.
      */
     function disconnectSender(sender) {
-        Private$r.disconnectSender(sender);
+        Private$q.disconnectSender(sender);
     }
     Signal.disconnectSender = disconnectSender;
     /**
@@ -2963,7 +3193,7 @@ var Signal = /** @class */ (function () {
      * the receiver.
      */
     function disconnectReceiver(receiver) {
-        Private$r.disconnectReceiver(receiver);
+        Private$q.disconnectReceiver(receiver);
     }
     Signal.disconnectReceiver = disconnectReceiver;
     /**
@@ -2977,7 +3207,7 @@ var Signal = /** @class */ (function () {
      * the receiver.
      */
     function disconnectAll(object) {
-        Private$r.disconnectAll(object);
+        Private$q.disconnectAll(object);
     }
     Signal.disconnectAll = disconnectAll;
     /**
@@ -2990,7 +3220,7 @@ var Signal = /** @class */ (function () {
      * associated with the object.
      */
     function clearData(object) {
-        Private$r.disconnectAll(object);
+        Private$q.disconnectAll(object);
     }
     Signal.clearData = clearData;
     /**
@@ -3002,7 +3232,7 @@ var Signal = /** @class */ (function () {
      * The default exception handler is `console.error`.
      */
     function getExceptionHandler() {
-        return Private$r.exceptionHandler;
+        return Private$q.exceptionHandler;
     }
     Signal.getExceptionHandler = getExceptionHandler;
     /**
@@ -3016,8 +3246,8 @@ var Signal = /** @class */ (function () {
      * The exception handler is invoked when a slot throws an exception.
      */
     function setExceptionHandler(handler) {
-        var old = Private$r.exceptionHandler;
-        Private$r.exceptionHandler = handler;
+        var old = Private$q.exceptionHandler;
+        Private$q.exceptionHandler = handler;
         return old;
     }
     Signal.setExceptionHandler = setExceptionHandler;
@@ -3025,7 +3255,7 @@ var Signal = /** @class */ (function () {
 /**
  * The namespace for the module implementation details.
  */
-var Private$r;
+var Private$q;
 (function (Private) {
     /**
      * The signal exception handler function.
@@ -3226,6 +3456,9 @@ var Private$r;
      * Exceptions thrown by connected slots will be caught and logged.
      */
     function emit(signal, args) {
+        if (Private.blockedProperty.get(signal.sender) > 0) {
+            return;
+        }
         // If there are no receivers, there is nothing to do.
         var receivers = receiversForSender.get(signal.sender);
         if (!receivers || receivers.length === 0) {
@@ -3329,7 +3562,14 @@ var Private$r;
     function isDeadConnection(connection) {
         return connection.signal === null;
     }
-})(Private$r || (Private$r = {}));
+    /**
+     * A property indicating a sender has been blocked if its value is not 0.
+     */
+    Private.blockedProperty = new AttachedProperty({
+        name: 'blocked',
+        create: function () { return 0; }
+    });
+})(Private$q || (Private$q = {}));
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -3834,11 +4074,11 @@ var Selector;
      * same selector are extremely fast.
      */
     function calculateSpecificity(selector) {
-        if (selector in Private$q.specificityCache) {
-            return Private$q.specificityCache[selector];
+        if (selector in Private$p.specificityCache) {
+            return Private$p.specificityCache[selector];
         }
-        var result = Private$q.calculateSingle(selector);
-        return (Private$q.specificityCache[selector] = result);
+        var result = Private$p.calculateSingle(selector);
+        return (Private$p.specificityCache[selector] = result);
     }
     Selector.calculateSpecificity = calculateSpecificity;
     /**
@@ -3853,17 +4093,17 @@ var Selector;
      * selector are extremely fast.
      */
     function isValid(selector) {
-        if (selector in Private$q.validityCache) {
-            return Private$q.validityCache[selector];
+        if (selector in Private$p.validityCache) {
+            return Private$p.validityCache[selector];
         }
         var result = true;
         try {
-            Private$q.testElem.querySelector(selector);
+            Private$p.testElem.querySelector(selector);
         }
         catch (err) {
             result = false;
         }
-        return (Private$q.validityCache[selector] = result);
+        return (Private$p.validityCache[selector] = result);
     }
     Selector.isValid = isValid;
     /**
@@ -3880,14 +4120,14 @@ var Selector;
      * falling back onto a document query otherwise.
      */
     function matches(element, selector) {
-        return Private$q.protoMatchFunc.call(element, selector);
+        return Private$p.protoMatchFunc.call(element, selector);
     }
     Selector.matches = matches;
 })(Selector || (Selector = {}));
 /**
  * The namespace for the module implementation details.
  */
-var Private$q;
+var Private$p;
 (function (Private) {
     /**
      * A cache of computed selector specificity values.
@@ -4025,7 +4265,7 @@ var Private$q;
      * A regex which matches the negation pseudo-class globally.
      */
     var NEGATION_RE = /:not\(([^\)]+)\)/g;
-})(Private$q || (Private$q = {}));
+})(Private$p || (Private$p = {}));
 
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
@@ -4045,7 +4285,7 @@ var Private$q;
  * The default keyboard layout is US-English.
  */
 function getKeyboardLayout() {
-    return Private$p.keyboardLayout;
+    return Private$o.keyboardLayout;
 }
 /**
  * A concrete implementation of [[IKeyboardLayout]] based on keycodes.
@@ -4277,15 +4517,40 @@ var EN_US = new KeycodeLayout('en-us', {
 /**
  * The namespace for the module implementation details.
  */
-var Private$p;
+var Private$o;
 (function (Private) {
     /**
      * The global keyboard layout instance.
      */
     Private.keyboardLayout = EN_US;
-})(Private$p || (Private$p = {}));
+})(Private$o || (Private$o = {}));
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign$1 = function() {
+    __assign$1 = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$1.apply(this, arguments);
+};
 
-// Copyright (c) Jupyter Development Team.
 /**
  * An object which manages a collection of commands.
  *
@@ -4391,7 +4656,7 @@ var CommandRegistry = /** @class */ (function () {
             throw new Error("Command '" + id + "' already registered.");
         }
         // Add the command to the registry.
-        this._commands[id] = Private$o.createCommand(options);
+        this._commands[id] = Private$n.createCommand(options);
         // Emit the `commandChanged` signal.
         this._commandChanged.emit({ id: id, type: 'added' });
         // Return a disposable which will remove the command.
@@ -4423,6 +4688,17 @@ var CommandRegistry = /** @class */ (function () {
         }
         this._commandChanged.emit({ id: id, type: id ? 'changed' : 'many-changed' });
     };
+    /**
+     * Get the description for a specific command.
+     *
+     * @param id - The id of the command of interest.
+     *
+     * @returns The description for the command.
+     */
+    CommandRegistry.prototype.describedBy = function (id) {
+        var cmd = this._commands[id];
+        return cmd ? cmd.describedBy || { args: null } : { args: null };
+    };
     /**
      * Get the display label for a specific command.
      *
@@ -4683,7 +4959,7 @@ var CommandRegistry = /** @class */ (function () {
     CommandRegistry.prototype.addKeyBinding = function (options) {
         var _this = this;
         // Create the binding for the given options.
-        var binding = Private$o.createKeyBinding(options);
+        var binding = Private$n.createKeyBinding(options);
         // Add the key binding to the bindings array.
         this._keyBindings.push(binding);
         // Emit the `bindingChanged` signal.
@@ -4730,7 +5006,7 @@ var CommandRegistry = /** @class */ (function () {
         // Add the keystroke to the current key sequence.
         this._keystrokes.push(keystroke);
         // Find the exact and partial matches for the key sequence.
-        var _a = Private$o.matchKeyBinding(this._keyBindings, this._keystrokes, event), exact = _a.exact, partial = _a.partial;
+        var _a = Private$n.matchKeyBinding(this._keyBindings, this._keystrokes, event), exact = _a.exact, partial = _a.partial;
         // If there is no exact match and no partial match, replay
         // any suppressed events and clear the pending state.
         if (!exact && !partial) {
@@ -4770,7 +5046,7 @@ var CommandRegistry = /** @class */ (function () {
         this._clearTimer();
         this._timerID = window.setTimeout(function () {
             _this._onPendingTimeout();
-        }, Private$o.CHORD_TIMEOUT);
+        }, Private$n.CHORD_TIMEOUT);
     };
     /**
      * Clear the pending timeout.
@@ -4789,7 +5065,7 @@ var CommandRegistry = /** @class */ (function () {
             return;
         }
         this._replaying = true;
-        this._keydownEvents.forEach(Private$o.replayKeyEvent);
+        this._keydownEvents.forEach(Private$n.replayKeyEvent);
         this._replaying = false;
     };
     /**
@@ -4947,26 +5223,37 @@ var CommandRegistry = /** @class */ (function () {
     }
     CommandRegistry.normalizeKeys = normalizeKeys;
     /**
-     * Format a keystroke for display on the local system.
+     * Format keystrokes for display on the local system.
+     *
+     * If a list of keystrokes is provided, it will be displayed as
+     * a comma-separated string
+     *
+     * @param keystroke The keystrokes to format
+     * @returns The keystrokes representation
      */
     function formatKeystroke(keystroke) {
-        var mods = [];
-        var separator = Platform.IS_MAC ? ' ' : '+';
-        var parts = parseKeystroke(keystroke);
-        if (parts.ctrl) {
-            mods.push('Ctrl');
-        }
-        if (parts.alt) {
-            mods.push('Alt');
-        }
-        if (parts.shift) {
-            mods.push('Shift');
-        }
-        if (Platform.IS_MAC && parts.cmd) {
-            mods.push('Cmd');
+        return typeof keystroke === 'string'
+            ? formatSingleKey(keystroke)
+            : keystroke.map(formatSingleKey).join(', ');
+        function formatSingleKey(key) {
+            var mods = [];
+            var separator = Platform.IS_MAC ? ' ' : '+';
+            var parts = parseKeystroke(key);
+            if (parts.ctrl) {
+                mods.push('Ctrl');
+            }
+            if (parts.alt) {
+                mods.push('Alt');
+            }
+            if (parts.shift) {
+                mods.push('Shift');
+            }
+            if (Platform.IS_MAC && parts.cmd) {
+                mods.push('Cmd');
+            }
+            mods.push(parts.key);
+            return mods.map(Private$n.formatKey).join(separator);
         }
-        mods.push(parts.key);
-        return mods.map(Private$o.formatKey).join(separator);
     }
     CommandRegistry.formatKeystroke = formatKeystroke;
     /**
@@ -5017,7 +5304,7 @@ var CommandRegistry = /** @class */ (function () {
 /**
  * The namespace for the module implementation details.
  */
-var Private$o;
+var Private$n;
 (function (Private) {
     /**
      * The timeout in ms for triggering a key binding chord.
@@ -5044,6 +5331,7 @@ var Private$o;
         /* </DEPRECATED> */
         return {
             execute: options.execute,
+            describedBy: __assign$1({ args: null }, options.describedBy),
             label: asFunc(options.label, emptyStringFunc),
             mnemonic: asFunc(options.mnemonic, negativeOneFunc),
             icon: icon,
@@ -5289,7 +5577,7 @@ var Private$o;
         clone.view = event.view || window;
         return clone;
     }
-})(Private$o || (Private$o = {}));
+})(Private$n || (Private$n = {}));
 
 // Copyright (c) Jupyter Development Team.
 /**
@@ -5297,6 +5585,8 @@ var Private$o;
  *
  * #### Notes
  * Most operations have `O(log32 n)` or better complexity.
+ *
+ * @deprecated This class will be removed in @lumino/collections@^2.0.0
  */
 var BPlusTree = /** @class */ (function () {
     /**
@@ -5582,6 +5872,8 @@ var BPlusTree = /** @class */ (function () {
 }());
 /**
  * The namespace for the `BPlusTree` class statics.
+ *
+ * @deprecated This namespace will be removed in @lumino/collections@^2.0.0
  */
 (function (BPlusTree) {
     /**
@@ -6882,7 +7174,7 @@ var LinkedList = /** @class */ (function () {
      * Constant.
      */
     LinkedList.prototype.addFirst = function (value) {
-        var node = new Private$n.LinkedListNode(this, value);
+        var node = new Private$m.LinkedListNode(this, value);
         if (!this._first) {
             this._first = node;
             this._last = node;
@@ -6906,7 +7198,7 @@ var LinkedList = /** @class */ (function () {
      * Constant.
      */
     LinkedList.prototype.addLast = function (value) {
-        var node = new Private$n.LinkedListNode(this, value);
+        var node = new Private$m.LinkedListNode(this, value);
         if (!this._last) {
             this._first = node;
             this._last = node;
@@ -6939,10 +7231,10 @@ var LinkedList = /** @class */ (function () {
         if (!ref || ref === this._first) {
             return this.addFirst(value);
         }
-        if (!(ref instanceof Private$n.LinkedListNode) || ref.list !== this) {
+        if (!(ref instanceof Private$m.LinkedListNode) || ref.list !== this) {
             throw new Error('Reference node is not owned by the list.');
         }
-        var node = new Private$n.LinkedListNode(this, value);
+        var node = new Private$m.LinkedListNode(this, value);
         var _ref = ref;
         var prev = _ref.prev;
         node.next = _ref;
@@ -6972,10 +7264,10 @@ var LinkedList = /** @class */ (function () {
         if (!ref || ref === this._last) {
             return this.addLast(value);
         }
-        if (!(ref instanceof Private$n.LinkedListNode) || ref.list !== this) {
+        if (!(ref instanceof Private$m.LinkedListNode) || ref.list !== this) {
             throw new Error('Reference node is not owned by the list.');
         }
-        var node = new Private$n.LinkedListNode(this, value);
+        var node = new Private$m.LinkedListNode(this, value);
         var _ref = ref;
         var next = _ref.next;
         node.next = next;
@@ -7051,7 +7343,7 @@ var LinkedList = /** @class */ (function () {
      * The node must be owned by the list.
      */
     LinkedList.prototype.removeNode = function (node) {
-        if (!(node instanceof Private$n.LinkedListNode) || node.list !== this) {
+        if (!(node instanceof Private$m.LinkedListNode) || node.list !== this) {
             throw new Error('Node is not owned by the list.');
         }
         var _node = node;
@@ -7297,7 +7589,7 @@ var LinkedList = /** @class */ (function () {
 /**
  * The namespace for the module implementation details.
  */
-var Private$n;
+var Private$m;
 (function (Private) {
     /**
      * The internal linked list node implementation.
@@ -7329,7 +7621,7 @@ var Private$n;
         return LinkedListNode;
     }());
     Private.LinkedListNode = LinkedListNode;
-})(Private$n || (Private$n = {}));
+})(Private$m || (Private$m = {}));
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -7868,195 +8160,6 @@ var MessageLoop;
     }
 })(MessageLoop || (MessageLoop = {}));
 
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-/*-----------------------------------------------------------------------------
-| Copyright (c) 2014-2017, PhosphorJS Contributors
-|
-| Distributed under the terms of the BSD 3-Clause License.
-|
-| The full license is in the file LICENSE, distributed with this software.
-|----------------------------------------------------------------------------*/
-/**
- * A class which attaches a value to an external object.
- *
- * #### Notes
- * Attached properties are used to extend the state of an object with
- * semantic data from an unrelated class. They also encapsulate value
- * creation, coercion, and notification.
- *
- * Because attached property values are stored in a hash table, which
- * in turn is stored in a WeakMap keyed on the owner object, there is
- * non-trivial storage overhead involved in their use. The pattern is
- * therefore best used for the storage of rare data.
- */
-var AttachedProperty = /** @class */ (function () {
-    /**
-     * Construct a new attached property.
-     *
-     * @param options - The options for initializing the property.
-     */
-    function AttachedProperty(options) {
-        this._pid = Private$m.nextPID();
-        this.name = options.name;
-        this._create = options.create;
-        this._coerce = options.coerce || null;
-        this._compare = options.compare || null;
-        this._changed = options.changed || null;
-    }
-    /**
-     * Get the current value of the property for a given owner.
-     *
-     * @param owner - The property owner of interest.
-     *
-     * @returns The current value of the property.
-     *
-     * #### Notes
-     * If the value has not yet been set, the default value will be
-     * computed and assigned as the current value of the property.
-     */
-    AttachedProperty.prototype.get = function (owner) {
-        var value;
-        var map = Private$m.ensureMap(owner);
-        if (this._pid in map) {
-            value = map[this._pid];
-        }
-        else {
-            value = map[this._pid] = this._createValue(owner);
-        }
-        return value;
-    };
-    /**
-     * Set the current value of the property for a given owner.
-     *
-     * @param owner - The property owner of interest.
-     *
-     * @param value - The value for the property.
-     *
-     * #### Notes
-     * If the value has not yet been set, the default value will be
-     * computed and used as the previous value for the comparison.
-     */
-    AttachedProperty.prototype.set = function (owner, value) {
-        var oldValue;
-        var map = Private$m.ensureMap(owner);
-        if (this._pid in map) {
-            oldValue = map[this._pid];
-        }
-        else {
-            oldValue = map[this._pid] = this._createValue(owner);
-        }
-        var newValue = this._coerceValue(owner, value);
-        this._maybeNotify(owner, oldValue, (map[this._pid] = newValue));
-    };
-    /**
-     * Explicitly coerce the current property value for a given owner.
-     *
-     * @param owner - The property owner of interest.
-     *
-     * #### Notes
-     * If the value has not yet been set, the default value will be
-     * computed and used as the previous value for the comparison.
-     */
-    AttachedProperty.prototype.coerce = function (owner) {
-        var oldValue;
-        var map = Private$m.ensureMap(owner);
-        if (this._pid in map) {
-            oldValue = map[this._pid];
-        }
-        else {
-            oldValue = map[this._pid] = this._createValue(owner);
-        }
-        var newValue = this._coerceValue(owner, oldValue);
-        this._maybeNotify(owner, oldValue, (map[this._pid] = newValue));
-    };
-    /**
-     * Get or create the default value for the given owner.
-     */
-    AttachedProperty.prototype._createValue = function (owner) {
-        var create = this._create;
-        return create(owner);
-    };
-    /**
-     * Coerce the value for the given owner.
-     */
-    AttachedProperty.prototype._coerceValue = function (owner, value) {
-        var coerce = this._coerce;
-        return coerce ? coerce(owner, value) : value;
-    };
-    /**
-     * Compare the old value and new value for equality.
-     */
-    AttachedProperty.prototype._compareValue = function (oldValue, newValue) {
-        var compare = this._compare;
-        return compare ? compare(oldValue, newValue) : oldValue === newValue;
-    };
-    /**
-     * Run the change notification if the given values are different.
-     */
-    AttachedProperty.prototype._maybeNotify = function (owner, oldValue, newValue) {
-        var changed = this._changed;
-        if (changed && !this._compareValue(oldValue, newValue)) {
-            changed(owner, oldValue, newValue);
-        }
-    };
-    return AttachedProperty;
-}());
-/**
- * The namespace for the `AttachedProperty` class statics.
- */
-(function (AttachedProperty) {
-    /**
-     * Clear the stored property data for the given owner.
-     *
-     * @param owner - The property owner of interest.
-     *
-     * #### Notes
-     * This will clear all property values for the owner, but it will
-     * **not** run the change notification for any of the properties.
-     */
-    function clearData(owner) {
-        Private$m.ownerData.delete(owner);
-    }
-    AttachedProperty.clearData = clearData;
-})(AttachedProperty || (AttachedProperty = {}));
-/**
- * The namespace for the module implementation details.
- */
-var Private$m;
-(function (Private) {
-    /**
-     * A weak mapping of property owner to property map.
-     */
-    Private.ownerData = new WeakMap();
-    /**
-     * A function which computes successive unique property ids.
-     */
-    Private.nextPID = (function () {
-        var id = 0;
-        return function () {
-            var rand = Math.random();
-            var stem = ("" + rand).slice(2);
-            return "pid-" + stem + "-" + id++;
-        };
-    })();
-    /**
-     * Lookup the data map for the property owner.
-     *
-     * This will create the map if one does not already exist.
-     */
-    function ensureMap(owner) {
-        var map = Private.ownerData.get(owner);
-        if (map) {
-            return map;
-        }
-        map = Object.create(null);
-        Private.ownerData.set(owner, map);
-        return map;
-    }
-    Private.ensureMap = ensureMap;
-})(Private$m || (Private$m = {}));
-
 /**
  * An object which manages a drag-drop operation.
  *
@@ -9363,7 +9466,10 @@ var Private$k;
             }
             // Handle the simplest case of in-place text update first.
             if (oldVNode.type === 'text' && newVNode.type === 'text') {
-                currElem.textContent = newVNode.content;
+                // Avoid spurious updates for performance.
+                if (currElem.textContent !== newVNode.content) {
+                    currElem.textContent = newVNode.content;
+                }
                 currElem = currElem.nextSibling;
                 continue;
             }
@@ -9669,15 +9775,15 @@ function __extends$4(d, b) {
     d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
 }
 
-var __assign$1 = function() {
-    __assign$1 = Object.assign || function __assign(t) {
+var __assign$2 = function() {
+    __assign$2 = Object.assign || function __assign(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
             s = arguments[i];
             for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
         }
         return t;
     };
-    return __assign$1.apply(this, arguments);
+    return __assign$2.apply(this, arguments);
 };
 
 function __rest(s, e) {
@@ -13314,7 +13420,7 @@ var AccordionLayout = /** @class */ (function (_super) {
      * Titles must be rotated for horizontal accordion panel using CSS: see accordionpanel.css
      */
     function AccordionLayout(options) {
-        var _this = _super.call(this, __assign$1(__assign$1({}, options), { orientation: options.orientation || 'vertical' })) || this;
+        var _this = _super.call(this, __assign$2(__assign$2({}, options), { orientation: options.orientation || 'vertical' })) || this;
         _this._titles = [];
         _this.titleSpace = options.titleSpace || 22;
         return _this;
@@ -13969,7 +14075,7 @@ var AccordionPanel = /** @class */ (function (_super) {
      */
     function AccordionPanel(options) {
         if (options === void 0) { options = {}; }
-        var _this = _super.call(this, __assign$1(__assign$1({}, options), { layout: Private$d.createLayout(options) })) || this;
+        var _this = _super.call(this, __assign$2(__assign$2({}, options), { layout: Private$d.createLayout(options) })) || this;
         _this._widgetSizesCache = new WeakMap();
         _this.addClass('lm-AccordionPanel');
         return _this;
@@ -14272,13 +14378,14 @@ var AccordionPanel = /** @class */ (function (_super) {
     var Renderer = /** @class */ (function (_super) {
         __extends$4(Renderer, _super);
         function Renderer() {
-            var _this = _super !== null && _super.apply(this, arguments) || this;
+            var _this = _super.call(this) || this;
             /**
              * A selector which matches any title node in the accordion.
              */
             _this.titleClassName = 'lm-AccordionPanel-title';
             _this._titleID = 0;
             _this._titleKeys = new WeakMap();
+            _this._uuid = ++Renderer._nInstance;
             return _this;
         }
         /**
@@ -14304,7 +14411,6 @@ var AccordionPanel = /** @class */ (function (_super) {
             handle.setAttribute('tabindex', '0');
             handle.id = this.createTitleKey(data);
             handle.className = this.titleClassName;
-            handle.title = data.caption;
             for (var aData in data.dataset) {
                 handle.dataset[aData] = data.dataset[aData];
             }
@@ -14313,6 +14419,7 @@ var AccordionPanel = /** @class */ (function (_super) {
             var label = handle.appendChild(document.createElement('span'));
             label.className = 'lm-AccordionPanel-titleLabel';
             label.textContent = data.label;
+            label.title = data.caption || data.label;
             return handle;
         };
         /**
@@ -14329,11 +14436,12 @@ var AccordionPanel = /** @class */ (function (_super) {
         Renderer.prototype.createTitleKey = function (data) {
             var key = this._titleKeys.get(data);
             if (key === undefined) {
-                key = "title-key-" + this._titleID++;
+                key = "title-key-" + this._uuid + "-" + this._titleID++;
                 this._titleKeys.set(data, key);
             }
             return key;
         };
+        Renderer._nInstance = 0;
         return Renderer;
     }(SplitPanel$1.Renderer));
     AccordionPanel.Renderer = Renderer;
@@ -15696,7 +15804,7 @@ var CommandPalette = /** @class */ (function (_super) {
          * @returns The dataset for the command palette item.
          */
         Renderer.prototype.createItemDataset = function (data) {
-            return __assign$1(__assign$1({}, data.item.dataset), { command: data.item.command });
+            return __assign$2(__assign$2({}, data.item.dataset), { command: data.item.command });
         };
         /**
          * Create the class name for the command item icon.
@@ -15745,9 +15853,7 @@ var CommandPalette = /** @class */ (function (_super) {
          */
         Renderer.prototype.formatItemShortcut = function (data) {
             var kb = data.item.keyBinding;
-            return kb
-                ? kb.keys.map(CommandRegistry.formatKeystroke).join(', ')
-                : null;
+            return kb ? CommandRegistry.formatKeystroke(kb.keys) : null;
         };
         /**
          * Create the render content for the item label node.
@@ -16948,6 +17054,8 @@ var Menu = /** @class */ (function (_super) {
         if (submenu === this._childMenu) {
             return;
         }
+        // Prior to any DOM modifications save window data
+        Menu.saveWindowData();
         // Ensure the current child menu is closed.
         this._closeChildMenu();
         // Update the private child state.
@@ -17020,6 +17128,18 @@ var Menu = /** @class */ (function (_super) {
             this._closeTimerID = 0;
         }
     };
+    /**
+     * Save window data used for menu positioning in transient cache.
+     *
+     * In order to avoid layout trashing it is recommended to invoke this
+     * method immediately prior to opening the menu and any DOM modifications
+     * (like closing previously visible menu, or adding a class to menu widget).
+     *
+     * The transient cache will be released upon `open()` call.
+     */
+    Menu.saveWindowData = function () {
+        Private$9.saveWindowData();
+    };
     return Menu;
 }(Widget));
 /**
@@ -17046,7 +17166,7 @@ var Menu = /** @class */ (function (_super) {
             var className = this.createItemClass(data);
             var dataset = this.createItemDataset(data);
             var aria = this.createItemARIA(data);
-            return h.li(__assign$1({ className: className,
+            return h.li(__assign$2({ className: className,
                 dataset: dataset, tabindex: '0', onfocus: data.onfocus }, aria), this.renderIcon(data), this.renderLabel(data), this.renderShortcut(data), this.renderSubmenu(data));
         };
         /**
@@ -17176,10 +17296,10 @@ var Menu = /** @class */ (function (_super) {
             var result;
             var _a = data.item, type = _a.type, command = _a.command, dataset = _a.dataset;
             if (type === 'command') {
-                result = __assign$1(__assign$1({}, dataset), { type: type, command: command });
+                result = __assign$2(__assign$2({}, dataset), { type: type, command: command });
             }
             else {
-                result = __assign$1(__assign$1({}, dataset), { type: type });
+                result = __assign$2(__assign$2({}, dataset), { type: type });
             }
             return result;
         };
@@ -17262,9 +17382,7 @@ var Menu = /** @class */ (function (_super) {
          */
         Renderer.prototype.formatShortcut = function (data) {
             var kb = data.item.keyBinding;
-            return kb
-                ? kb.keys.map(CommandRegistry.formatKeystroke).join(', ')
-                : null;
+            return kb ? CommandRegistry.formatKeystroke(kb.keys) : null;
         };
         return Renderer;
     }());
@@ -17287,6 +17405,30 @@ var Private$9;
      * The horizontal pixel overlap for an open submenu.
      */
     Private.SUBMENU_OVERLAP = 3;
+    var transientWindowDataCache = null;
+    var transientCacheCounter = 0;
+    function getWindowData() {
+        // if transient cache is in use, take one from it
+        if (transientCacheCounter > 0) {
+            transientCacheCounter--;
+            return transientWindowDataCache;
+        }
+        return _getWindowData();
+    }
+    /**
+     * Store window data in transient cache.
+     *
+     * The transient cache will be released upon `getWindowData()` call.
+     * If this function is called multiple times, the cache will be
+     * retained until as many calls to `getWindowData()` were made.
+     *
+     * Note: should be called before any DOM modifications.
+     */
+    function saveWindowData() {
+        transientWindowDataCache = _getWindowData();
+        transientCacheCounter++;
+    }
+    Private.saveWindowData = saveWindowData;
     /**
      * Create the DOM node for a menu.
      */
@@ -17382,28 +17524,33 @@ var Private$9;
         return result;
     }
     Private.computeCollapsed = computeCollapsed;
+    function _getWindowData() {
+        return {
+            pageXOffset: window.pageXOffset,
+            pageYOffset: window.pageYOffset,
+            clientWidth: document.documentElement.clientWidth,
+            clientHeight: document.documentElement.clientHeight
+        };
+    }
     /**
      * Open a menu as a root menu at the target location.
      */
     function openRootMenu(menu, x, y, forceX, forceY) {
+        // Get the current position and size of the main viewport.
+        var windowData = getWindowData();
+        var px = windowData.pageXOffset;
+        var py = windowData.pageYOffset;
+        var cw = windowData.clientWidth;
+        var ch = windowData.clientHeight;
         // Ensure the menu is updated before attaching and measuring.
         MessageLoop.sendMessage(menu, Widget.Msg.UpdateRequest);
-        // Get the current position and size of the main viewport.
-        var px = window.pageXOffset;
-        var py = window.pageYOffset;
-        var cw = document.documentElement.clientWidth;
-        var ch = document.documentElement.clientHeight;
         // Compute the maximum allowed height for the menu.
         var maxHeight = ch - (forceY ? y : 0);
         // Fetch common variables.
         var node = menu.node;
         var style = node.style;
         // Clear the menu geometry and prepare it for measuring.
-        style.top = '';
-        style.left = '';
-        style.width = '';
-        style.height = '';
-        style.visibility = 'hidden';
+        style.opacity = '0';
         style.maxHeight = maxHeight + "px";
         // Attach the menu to the document.
         Widget.attach(menu, document.body);
@@ -17423,34 +17570,30 @@ var Private$9;
             }
         }
         // Update the position of the menu to the computed position.
-        style.top = Math.max(0, y) + "px";
-        style.left = Math.max(0, x) + "px";
+        style.transform = "translate(" + Math.max(0, x) + "px, " + Math.max(0, y) + "px";
         // Finally, make the menu visible on the screen.
-        style.visibility = '';
+        style.opacity = '1';
     }
     Private.openRootMenu = openRootMenu;
     /**
      * Open a menu as a submenu using an item node for positioning.
      */
     function openSubmenu(submenu, itemNode) {
+        // Get the current position and size of the main viewport.
+        var windowData = getWindowData();
+        var px = windowData.pageXOffset;
+        var py = windowData.pageYOffset;
+        var cw = windowData.clientWidth;
+        var ch = windowData.clientHeight;
         // Ensure the menu is updated before opening.
         MessageLoop.sendMessage(submenu, Widget.Msg.UpdateRequest);
-        // Get the current position and size of the main viewport.
-        var px = window.pageXOffset;
-        var py = window.pageYOffset;
-        var cw = document.documentElement.clientWidth;
-        var ch = document.documentElement.clientHeight;
         // Compute the maximum allowed height for the menu.
         var maxHeight = ch;
         // Fetch common variables.
         var node = submenu.node;
         var style = node.style;
         // Clear the menu geometry and prepare it for measuring.
-        style.top = '';
-        style.left = '';
-        style.width = '';
-        style.height = '';
-        style.visibility = 'hidden';
+        style.opacity = '0';
         style.maxHeight = maxHeight + "px";
         // Attach the menu to the document.
         Widget.attach(submenu, document.body);
@@ -17473,10 +17616,9 @@ var Private$9;
             y = itemRect.bottom + box.borderBottom + box.paddingBottom - height;
         }
         // Update the position of the menu to the computed position.
-        style.top = Math.max(0, y) + "px";
-        style.left = Math.max(0, x) + "px";
+        style.transform = "translate(" + Math.max(0, x) + "px, " + Math.max(0, y) + "px";
         // Finally, make the menu visible on the screen.
-        style.visibility = '';
+        style.opacity = '1';
     }
     Private.openSubmenu = openSubmenu;
     /**
@@ -17800,6 +17942,8 @@ var ContextMenu = /** @class */ (function () {
      */
     ContextMenu.prototype.open = function (event) {
         var _this = this;
+        // Prior to any DOM modifications update the window data.
+        Menu.saveWindowData();
         // Clear the current contents of the context menu.
         this.menu.clearItems();
         // Bail early if there are no items to match.
@@ -17834,7 +17978,7 @@ var Private$8;
     function createItem(options, id) {
         var selector = validateSelector(options.selector);
         var rank = options.rank !== undefined ? options.rank : Infinity;
-        return __assign$1(__assign$1({}, options), { selector: selector, rank: rank, id: id });
+        return __assign$2(__assign$2({}, options), { selector: selector, rank: rank, id: id });
     }
     Private.createItem = createItem;
     /**
@@ -19064,6 +19208,7 @@ var TabBar = /** @class */ (function (_super) {
             this.closeIconSelector = '.lm-TabBar-tabCloseIcon';
             this._tabID = 0;
             this._tabKeys = new WeakMap();
+            this._uuid = ++Renderer._nInstance;
         }
         /**
          * Render the virtual element for a tab.
@@ -19081,10 +19226,10 @@ var TabBar = /** @class */ (function (_super) {
             var dataset = this.createTabDataset(data);
             var aria = this.createTabARIA(data);
             if (data.title.closable) {
-                return h.li(__assign$1({ id: id, key: key, className: className, title: title, style: style, dataset: dataset }, aria), this.renderIcon(data), this.renderLabel(data), this.renderCloseIcon(data));
+                return h.li(__assign$2({ id: id, key: key, className: className, title: title, style: style, dataset: dataset }, aria), this.renderIcon(data), this.renderLabel(data), this.renderCloseIcon(data));
             }
             else {
-                return h.li(__assign$1({ id: id, key: key, className: className, title: title, style: style, dataset: dataset }, aria), this.renderIcon(data), this.renderLabel(data));
+                return h.li(__assign$2({ id: id, key: key, className: className, title: title, style: style, dataset: dataset }, aria), this.renderIcon(data), this.renderLabel(data));
             }
         };
         /**
@@ -19150,7 +19295,7 @@ var TabBar = /** @class */ (function (_super) {
         Renderer.prototype.createTabKey = function (data) {
             var key = this._tabKeys.get(data.title);
             if (key === undefined) {
-                key = "tab-key-" + this._tabID++;
+                key = "tab-key-" + this._uuid + "-" + this._tabID++;
                 this._tabKeys.set(data.title, key);
             }
             return key;
@@ -19229,6 +19374,7 @@ var TabBar = /** @class */ (function (_super) {
             var extra = data.title.iconClass;
             return extra ? name + " " + extra : name;
         };
+        Renderer._nInstance = 0;
         return Renderer;
     }());
     TabBar.Renderer = Renderer;
@@ -23726,13 +23872,20 @@ var MenuBar = /** @class */ (function (_super) {
     };
     /**
      * Handle the `'keydown'` event for the menu bar.
+     *
+     * #### Notes
+     * All keys are trapped except the tab key that is ignored.
      */
     MenuBar.prototype._evtKeyDown = function (event) {
-        // A menu bar handles all keydown events.
-        event.preventDefault();
-        event.stopPropagation();
         // Fetch the key code for the event.
         var kc = event.keyCode;
+        // Do not trap the tab key.
+        if (kc === 9) {
+            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) {
             this.openActiveMenu();
@@ -23816,8 +23969,11 @@ var MenuBar = /** @class */ (function (_super) {
             this.activeIndex = index;
         }
         else {
+            var position = this._positionForMenu(index);
+            Menu.saveWindowData();
+            // Begin DOM modifications.
             this.activeIndex = index;
-            this._openChildMenu();
+            this._openChildMenu(position);
         }
     };
     /**
@@ -23838,13 +23994,33 @@ var MenuBar = /** @class */ (function (_super) {
         if (index === -1 && this._childMenu) {
             return;
         }
+        // Get position for the new menu >before< updating active index.
+        var position = this._positionForMenu(index);
+        // Before any modification, update window data.
+        Menu.saveWindowData();
+        // Begin DOM modifications.
         // Update the active index to the hovered item.
         this.activeIndex = index;
         // Open the new menu if a menu is already open.
         if (this._childMenu) {
-            this._openChildMenu();
+            this._openChildMenu(position);
         }
     };
+    /**
+     * Find initial position for the menu based on menubar item position.
+     *
+     * NOTE: this should be called before updating active index to avoid
+     * an additional layout and style invalidation as changing active
+     * index modifies DOM.
+     */
+    MenuBar.prototype._positionForMenu = function (index) {
+        var itemNode = this.contentNode.children[index];
+        var _a = itemNode.getBoundingClientRect(), left = _a.left, bottom = _a.bottom;
+        return {
+            top: bottom,
+            left: left
+        };
+    };
     /**
      * Handle the `'mouseleave'` event for the menu bar.
      */
@@ -23860,7 +24036,9 @@ var MenuBar = /** @class */ (function (_super) {
      * If a different child menu is already open, it will be closed,
      * even if there is no active menu.
      */
-    MenuBar.prototype._openChildMenu = function () {
+    MenuBar.prototype._openChildMenu = function (options) {
+        var _a;
+        if (options === void 0) { options = {}; }
         // If there is no active menu, close the current menu.
         var newMenu = this.activeMenu;
         if (!newMenu) {
@@ -23879,20 +24057,26 @@ var MenuBar = /** @class */ (function (_super) {
             oldMenu.close();
         }
         else {
-            this.addClass('lm-mod-active');
-            /* <DEPRECATED> */
-            this.addClass('p-mod-active');
-            /* </DEPRECATED> */
             document.addEventListener('mousedown', this, true);
         }
         // Ensure the menu bar is updated and look up the item node.
         MessageLoop.sendMessage(this, Widget.Msg.UpdateRequest);
-        var itemNode = this.contentNode.children[this._activeIndex];
         // Get the positioning data for the new menu.
-        var _a = itemNode.getBoundingClientRect(), left = _a.left, bottom = _a.bottom;
+        var left = options.left, top = options.top;
+        if (typeof left === 'undefined' || typeof top === 'undefined') {
+            (_a = this._positionForMenu(this._activeIndex), left = _a.left, top = _a.top);
+        }
+        // Begin DOM modifications
+        if (!oldMenu) {
+            // Continue setup for new menu
+            this.addClass('lm-mod-active');
+            /* <DEPRECATED> */
+            this.addClass('p-mod-active');
+            /* </DEPRECATED> */
+        }
         // Open the new menu at the computed location.
         if (newMenu.items.length > 0) {
-            newMenu.open(left, bottom, this._forceItemsPosition);
+            newMenu.open(left, top, this._forceItemsPosition);
         }
     };
     /**
@@ -23995,7 +24179,7 @@ var MenuBar = /** @class */ (function (_super) {
             var className = this.createItemClass(data);
             var dataset = this.createItemDataset(data);
             var aria = this.createItemARIA(data);
-            return h.li(__assign$1({ 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: '0', onfocus: data.onfocus }, aria), this.renderIcon(data), this.renderLabel(data));
         };
         /**
          * Render the icon element for a menu bar item.