@elyra/canvas 12.41.0 → 12.42.0

package/src/toolbar/toolbar.scss

@@ -37,6 +37,11 @@ $toolbar-divider-width: 1px;
 	/* Prevent elements from being dragged onto canvas */
 	-webkit-user-drag: none;
 
+	&:focus {
+		border-color: $interactive-01;
+		box-shadow: inset 0 0 0 1px $interactive-01, inset 0 0 0 2px $ui-background;
+	}
+
 	/* Small size toolbar  */
 	&.toolbar-size-small {
 		height: $toolbar-button-sm-height;
@@ -51,7 +56,7 @@ $toolbar-divider-width: 1px;
 			height: $toolbar-button-sm-height;
 		}
 
-		.toolbar-overflow-menu-item {
+		.toolbar-sub-menu-item {
 			height: fit-content;
 		}
 
@@ -66,10 +71,6 @@ $toolbar-divider-width: 1px;
 			padding: 0;
 		}
 
-		.toolbar-popover-list {
-			top: calc(#{$toolbar-button-sm-height} + #{$toolbar-divider-width} - 1px);
-		}
-
 		.toolbar-jsx-item {
 			height: $toolbar-button-sm-height;
 		}
@@ -144,7 +145,7 @@ $toolbar-divider-width: 1px;
 	}
 }
 
-.toolbar-spacer {
+.toolbar-overflow-container {
 	width: 0;
 	display: inline-block;
 }
@@ -171,7 +172,7 @@ $toolbar-divider-width: 1px;
 	}
 }
 
-.toolbar-overflow-menu-item {
+.toolbar-sub-menu-item {
 	& button {
 		width: 100%;
 		padding-top: 0;
@@ -269,7 +270,7 @@ $toolbar-divider-width: 1px;
 	padding: 0;
 }
 
-.toolbar-overflow-jsx-item {
+.toolbar-sub-menu-jsx-item {
 	width: 100%;
 	height: 38px;
 	display: inline-flex;
@@ -288,6 +289,10 @@ $toolbar-divider-width: 1px;
 			box-shadow: none;
 			border-bottom: 2px solid $interactive-01;
 		}
+		& button:focus {
+			border-color: $interactive-01;
+			box-shadow: inset 0 0 0 1px $interactive-01, inset 0 0 0 2px $ui-background;
+		}
 	}
 }
 
@@ -306,24 +311,26 @@ $toolbar-divider-width: 1px;
 
 .toolbar-popover-list {
 	width: 200px;
-	z-index: 1;
-	top: calc(#{$toolbar-button-height} + #{$toolbar-divider-width});
+	z-index: 2; // Make sure sub-area appears above bottom panel
 	display: block;
-	position: absolute;
+	position: fixed; // Actual position will be calculated in the code
 	list-style-type: none;
 	padding: 0;
 	border: $toolbar-divider-width solid $ui-03;
 	background-color: $ui-01;
+	opacity: 0;
+	animation: tovisible 0.25s ease-in-out forwards; // Use keyframe to animate panel visibility
 
 	&.submenu {
-		// Position will be calculated in the code
-		position: fixed;
 		min-width: 100px;
 	}
 
 	&.subpanel {
-		// Position will be calculated in the code
-		position: fixed;
 		width: fit-content;
 	}
 }
+
+@keyframes tovisible {
+	100% { opacity: 1; }
+}
+

package/src/tooltip/tooltip.jsx

@@ -351,8 +351,15 @@ class ToolTip extends React.Component {
 				if (this.tabKeyPressed) {
 					this.setTooltipVisible(false);
 					this.tabKeyPressed = false;
-				} else if (evt.relatedTarget === null) { // Keep tooltip visible when clicked on a link.
-					this.setTooltipVisible(false);
+				} else {
+					// Check if evt.relatedTarget is a child of .common-canvas-tooltip to set tooltip visible when clicked on link
+					const el = evt?.relatedTarget?.closest(".common-canvas-tooltip");
+					if (el?.tagName?.toLowerCase() === "div") {
+						this.setTooltipVisible(true);
+					} else {
+						// Close the tooltip if evt.relatedTarget is not a child of .common-canvas-tooltip
+						this.setTooltipVisible(false);
+					}
 				}
 			};
 			const click = (evt) => this.toggleTooltipOnClick(evt);