@elyra/canvas 12.40.1 → 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

@@ -32,6 +32,7 @@ class ToolTip extends React.Component {
 		this.uuid = uuid4();
 		this.pendingTooltip = null;
 		this.hideTooltipOnScrollAndResize = this.hideTooltipOnScrollAndResize.bind(this);
+		this.tabKeyPressed = false;
 	}
 
 	componentDidMount() {
@@ -82,6 +83,12 @@ class ToolTip extends React.Component {
 		}
 	}
 
+	setKeyPressed(evt) {
+		if (evt.key === "Tab") {
+			this.tabKeyPressed = true;
+		}
+	}
+
 	getStyleValue(value) {
 		return value + "px";
 	}
@@ -337,11 +344,22 @@ class ToolTip extends React.Component {
 			const mousedown = () => this.setTooltipVisible(false);
 			// `focus` event occurs before `click`. Adding timeout in onFocus function to ensure click is executed first.
 			// Ref - https://stackoverflow.com/a/49512400
+			const onKeyDown = (evt) => this.setKeyPressed(evt);
 			const onFocus = () => this.showTooltipWithDelay();
 			const onBlur = (evt) => {
-				// Keep tooltip visible when clicked on a link.
-				if (evt.relatedTarget === null) {
+				// Close the tooltip if tab is click
+				if (this.tabKeyPressed) {
 					this.setTooltipVisible(false);
+					this.tabKeyPressed = 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);
@@ -355,6 +373,7 @@ class ToolTip extends React.Component {
 				onClick={this.props.showToolTipOnClick ? click : null}
 				onFocus={this.props.showToolTipOnClick ? onFocus : null} // When focused using keyboard
 				onBlur={this.props.showToolTipOnClick ? onBlur : null}
+				onKeyDown={this.props.showToolTipOnClick ? onKeyDown : null}
 				tabIndex={this.props.showToolTipOnClick ? 0 : null}
 				role={this.props.showToolTipOnClick ? "button" : null}
 				aria-labelledby={this.props.showToolTipOnClick ? `${this.uuid}-${this.props.id}` : null}