Bump @Lumino to latest version in packages/phosphor (#4424)

* Initial plan

* Update Lumino packages to latest versions (v2.x)

Co-authored-by: GordonSmith <966863+GordonSmith@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: GordonSmith <966863+GordonSmith@users.noreply.github.com>

Author: Copilot

package-lock.json

@@ -41,10 +41,10 @@
     },
     "devDependencies": {
         "@hpcc-js/esbuild-plugins": "^1.4.8",
-        "@lumino/algorithm": "1.9.2",
-        "@lumino/commands": "1.21.1",
-        "@lumino/messaging": "1.10.3",
-        "@lumino/widgets": "1.37.2"
+        "@lumino/algorithm": "2.0.3",
+        "@lumino/commands": "2.3.2",
+        "@lumino/messaging": "2.0.3",
+        "@lumino/widgets": "2.7.1"
     },
     "repository": {
         "type": "git",

packages/phosphor/package.json

@@ -1,27 +1,27 @@
-.p-DockPanel-overlay {
+.lm-DockPanel-overlay {
   background: rgba(255, 255, 255, 0.6);
   border: 1px dashed black;
   transition-property: top, left, right, bottom;
   transition-duration: 150ms;
   transition-timing-function: ease;
 }
 
-.p-TabBar {
+.lm-TabBar {
   min-height: 24px;
   max-height: 24px;
 }
 
-.p-TabBar-content {
+.lm-TabBar-content {
   min-width: 0;
   min-height: 0;
   align-items: flex-end;
 }
 
-.p-TabPanel-tabBar .p-TabBar-content {
+.lm-TabPanel-tabBar .lm-TabBar-content {
   border-bottom: 1px solid #C0C0C0;
 }
 
-.p-TabBar-tab {
+.lm-TabBar-tab {
   padding: 0px 10px;
   background: #E5E5E5;
   border: 1px solid #C0C0C0;
@@ -35,47 +35,47 @@
   line-height: 20px;
 }
 
-.p-TabBar-tab.p-mod-current {
+.lm-TabBar-tab.lm-mod-current {
   background: white;
 }
 
 
-.p-TabBar-tab:hover:not(.p-mod-current) {
+.lm-TabBar-tab:hover:not(.lm-mod-current) {
   background: #F0F0F0;
 }
 
 
-.p-TabBar-tab:first-child {
+.lm-TabBar-tab:first-child {
   margin-left: 0;
 }
 
 
-.p-TabBar-tab.p-mod-current {
+.lm-TabBar-tab.lm-mod-current {
   min-height: 23px;
   max-height: 23px;
   transform: translateY(1px);
 }
 
 
-.p-TabBar-tabIcon,
-.p-TabBar-tabLabel,
-.p-TabBar-tabCloseIcon {
+.lm-TabBar-tabIcon,
+.lm-TabBar-tabLabel,
+.lm-TabBar-tabCloseIcon {
   display: inline-block;
 }
 
 
-.p-TabBar-tab.p-mod-closable > .p-TabBar-tabCloseIcon {
+.lm-TabBar-tab.lm-mod-closable>.lm-TabBar-tabCloseIcon {
   margin-left: 4px;
 }
 
 
-.p-TabBar-tab.p-mod-closable > .p-TabBar-tabCloseIcon:before {
+.lm-TabBar-tab.lm-mod-closable>.lm-TabBar-tabCloseIcon:before {
   content: '\f00d';
   font-family: FontAwesome;
 }
 
 
-.p-TabBar-tab.p-mod-drag-image {
+.lm-TabBar-tab.lm-mod-drag-image {
   min-height: 23px;
   max-height: 23px;
   min-width: 125px;
@@ -84,11 +84,11 @@
   transform: translateX(-40%) translateY(-58%);
 }
 
-.p-Widget.p-TabBar.p-DockPanel-tabBar.hide {
+.lm-Widget.lm-TabBar.lm-DockPanel-tabBar.hide {
   min-height: 1px !important;
   max-height: 1px !important;
 }
 
-.p-Widget.p-TabBar.p-DockPanel-tabBar.hide .p-TabBar-tab.p-mod-current {
+.lm-Widget.lm-TabBar.lm-DockPanel-tabBar.hide .lm-TabBar-tab.lm-mod-current {
   display: none;
-}
+}

packages/phosphor/src/DockPanel.css

@@ -91,7 +91,7 @@ export class DockPanel extends HTMLWidget implements IMessageHandler, IMessageHo
             .style("overflow", "hidden")
             ;
 
-        element.select(".p-Widget")
+        element.select(".lm-Widget")
             .style("width", this._pPlaceholder.node().clientWidth + "px")
             .style("height", this.height() + "px")
             ;
@@ -115,7 +115,7 @@ export class DockPanel extends HTMLWidget implements IMessageHandler, IMessageHo
             this._dock.content().watchRendered(this, callback);
             this._dock.update();
             setTimeout(() => {
-                const tabBars = this.element().selectAll(".p-Widget.p-TabBar.p-DockPanel-tabBar");
+                const tabBars = this.element().selectAll(".lm-Widget.lm-TabBar.lm-DockPanel-tabBar");
                 let refit = false;
                 tabBars.each(function (this: HTMLElement) {
                     const tabBar = d3Select(this);

packages/phosphor/src/DockPanel.ts

@@ -49,7 +49,7 @@ export class SplitPanel extends HTMLWidget {
 
     update(domNode, element) {
         super.update(domNode, element);
-        element.select(".p-Widget")
+        element.select(".lm-Widget")
             .style("width", this.width() + "px")
             .style("height", this.height() + "px")
             ;

packages/phosphor/src/SplitPanel.ts

@@ -64,7 +64,7 @@ export class TabPanel extends HTMLWidget {
 
     update(domNode, element) {
         super.update(domNode, element);
-        element.select(".p-Widget")
+        element.select(".lm-Widget")
             .style("width", this.width() + "px")
             .style("height", this.height() + "px")
             ;

packages/phosphor/src/TabPanel.ts

@@ -7,11 +7,11 @@
   min-height: 64px;
 }
 
-.phosphor_WidgetAdapter.p-DockPanel-widget {
+.phosphor_WidgetAdapter.lm-DockPanel-widget {
   border-top: none;
   box-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2), 1px 1px 2px rgba(0, 0, 0, 0.2);
 }
 
-.phosphor_WidgetAdapter.p-SplitPanel-child {
+.phosphor_WidgetAdapter.lm-SplitPanel-child {
   border: none;
-}
+}