@elyra/canvas 12.42.0 → 12.44.0

package/src/toolbar/toolbar-sub-panel.jsx

@@ -1,5 +1,5 @@
 /*
- * Copyright 2023 Elyra Authors
+ * Copyright 2024 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -20,46 +20,59 @@ import PropTypes from "prop-types";
 import { adjustSubAreaPosition, generateSubAreaStyle } from "./toolbar-sub-utils.js";
 
 const ESC_KEY = 27;
+const LEFT_ARROW_KEY = 37;
+const RIGHT_ARROW_KEY = 39;
+
 
 class ToolbarSubPanel extends React.Component {
 	constructor(props) {
 		super(props);
 
-		this.areaRef = React.createRef();
-
-		this.onClick = this.onClick.bind(this);
 		this.onKeyDown = this.onKeyDown.bind(this);
+		this.closeSubPanel = this.closeSubPanel.bind(this);
 	}
 
 	componentDidMount() {
-		if (this.props.containingDivId) {
-			adjustSubAreaPosition(this.areaRef,
-				this.props.containingDivId, this.props.expandDirection, this.props.actionItemRect);
-		}
+		adjustSubAreaPosition(this.areaRef,
+			this.props.containingDivId, this.props.expandDirection, this.props.actionItemRect);
 	}
 
-	onClick() {
-		this.props.closeSubArea();
+	componentDidUpdate() {
+		adjustSubAreaPosition(this.areaRef,
+			this.props.containingDivId, this.props.expandDirection, this.props.actionItemRect);
 	}
 
 	onKeyDown(evt) {
 		if (evt.keyCode === ESC_KEY) {
 			this.props.closeSubArea();
 			evt.stopPropagation();
+
+		} else if (evt.keyCode === LEFT_ARROW_KEY || evt.keyCode === RIGHT_ARROW_KEY) {
+			evt.stopPropagation();
 		}
 	}
 
+	// If the user clicks the panel background, by default focus would go
+	// through to the toolbar and focus would be lost from this sub-panel.
+	// This method prevents any focus event going through to the toolbar.
+	onFocus(evt) {
+		evt.stopPropagation();
+		evt.preventDefault();
+	}
+
+	closeSubPanel(evt) {
+		this.props.closeSubArea(); // Don't pass a paremeter otherwise it will check closeSubAreaOnClick.
+	}
+
 	render() {
 		const style = generateSubAreaStyle(this.props.expandDirection, this.props.actionItemRect);
 
 		if (this.props.subPanel) {
-			const subPanel = typeof this.props.subPanel === "object"
-				? this.props.subPanel
-				: (<this.props.subPanel closeSubPanel={this.props.closeSubArea} subPanelData={this.props.subPanelData} />);
-
 			return (
-				<div ref={this.areaRef} style={style} className={"toolbar-popover-list subpanel"} onClick={this.onClick} onKeyDown={this.onKeyDown}>
-					{subPanel}
+				<div ref={(ref) => (this.areaRef = ref)} style={style} className={"toolbar-popover-list subpanel"} tabIndex={-1}
+					onKeyDown={this.onKeyDown} onFocus={this.onFocus}
+				>
+					<this.props.subPanel closeSubPanel={this.closeSubPanel} subPanelData={this.props.subPanelData} />
 				</div>
 			);
 		}
@@ -69,11 +82,11 @@ class ToolbarSubPanel extends React.Component {
 }
 
 ToolbarSubPanel.propTypes = {
-	subPanel: PropTypes.any,
+	subPanel: PropTypes.any.isRequired,
 	subPanelData: PropTypes.object,
 	closeSubArea: PropTypes.func,
 	setToolbarFocusAction: PropTypes.func,
-	actionItemRect: PropTypes.object.isRequired,
+	actionItemRect: PropTypes.object,
 	expandDirection: PropTypes.string.isRequired,
 	containingDivId: PropTypes.string
 };

package/src/toolbar/toolbar-sub-utils.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2023 Elyra Authors
+ * Copyright 2024 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -15,20 +15,25 @@
 */
 
 // These utility functions are used by both toolbar-sub-menu.jsx AND
-// toolbar-sub-panel.jsx to position the areaEf (menu or panel) relative
-// to the parent actionItemRect, passed in, in the direction indicated by
-// the expandDirection parameter and constrained within the <div>
-// specified by the containingDivId parameter.
+// toolbar-sub-panel.jsx to position the sub-area (sub-menu or sub-panel)
+// relative to the parent actionItemRect, passed in, in the direction
+// indicated by the expandDirection parameter and constrained within
+// the <div> specified by the containingDivId parameter.
 
 
 // Adjust the position of the sub-area to make sure it doesn't extend
 // outside the containing divs boundary. We need to do this after the subarea
 // has been mounted so we can query its size and position.
 export function adjustSubAreaPosition(areaRef, containingDivId, expandDirection, actionItemRect) {
+	if (!areaRef || !actionItemRect || !containingDivId) {
+		return;
+	}
 	const containingDiv = document.getElementById(containingDivId);
-	const containingDivRect = containingDiv.getBoundingClientRect();
+	const containingDivRect = containingDiv
+		? containingDiv.getBoundingClientRect()
+		: { top: -1000, bottom: 1000, left: -1000, right: 1000 }; // To enable Jest tests.
 
-	const thisAreaRect = areaRef.current.getBoundingClientRect();
+	const thisAreaRect = areaRef.getBoundingClientRect();
 
 	const outsideBottom = thisAreaRect.bottom - containingDivRect.bottom;
 	const outsideRight = thisAreaRect.right - containingDivRect.right;
@@ -40,28 +45,32 @@ export function adjustSubAreaPosition(areaRef, containingDivId, expandDirection,
 				? actionItemRect.top - thisAreaRect.height
 				: actionItemRect.bottom - outsideBottom;
 
-			areaRef.current.style.top = newTop + "px";
+			areaRef.style.top = newTop + "px";
 		}
 
 		if (outsideRight > 0) {
-			const newLeft = actionItemRect.left - outsideRight - 2;
-			areaRef.current.style.left = newLeft + "px";
+			const newLeft = actionItemRect.left - outsideRight;
+			areaRef.style.left = newLeft + "px";
 		}
 
 	} else {
 		if (outsideBottom > 0) {
 			const newTop = thisAreaRect.top - outsideBottom - 2;
-			areaRef.current.style.top = newTop + "px";
+			areaRef.style.top = newTop + "px";
 		}
 
 		if (outsideRight > 0) {
 			const newLeft = actionItemRect.left - thisAreaRect.width;
-			areaRef.current.style.left = newLeft + "px";
+			areaRef.style.left = newLeft + "px";
 		}
 	}
 }
 
 export function generateSubAreaStyle(expandDirection, actionItemRect) {
+	if (!actionItemRect) {
+		return null;
+	}
+
 	if (expandDirection === "vertical") {
 		return {
 			top: actionItemRect.bottom + 1,

package/src/toolbar/toolbar.jsx

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2023 Elyra Authors
+ * Copyright 2017-2024 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -69,6 +69,7 @@ class Toolbar extends React.Component {
 		this.generateToolbarItems = this.generateToolbarItems.bind(this);
 		this.setFocusAction = this.setFocusAction.bind(this);
 		this.setFocusOnItem = this.setFocusOnItem.bind(this);
+		this.closeAnyOpenSubArea = this.closeAnyOpenSubArea.bind(this);
 	}
 
 	// If, after updating, we are left in a situation where this.state.focusAction
@@ -76,13 +77,12 @@ class Toolbar extends React.Component {
 	// item. This might happen when an item with focus is activated and the action it
 	// performs causes itself to become disabled. For example, if the delete item is
 	// activated the selected objects are deleted and since no objects are now selected
-	// the delete item (which has focus) will become disabled.
+	// the delete item (which has focus) will become disabled. It may also happen if the
+	// toolbar config is updated and the current focusAction item is removed.
 	componentDidUpdate() {
-		if (this.isFocusInToolbar) {
-			const index = this.getFocusableItemRefs().findIndex((item) => this.getRefAction(item) === this.state.focusAction);
-			if (index === -1) {
-				this.setFocusOnFirstItem();
-			}
+		const index = this.getFocusableItemRefs().findIndex((item) => this.getRefAction(item) === this.state.focusAction);
+		if (index === -1) {
+			this.setFocusOnFirstItem();
 		}
 	}
 
@@ -106,11 +106,15 @@ class Toolbar extends React.Component {
 		}
 	}
 
-	// When focus leaves the toolbar make sure we record it so we don't
-	// accidentally set focus on a toolbar item when re-rendering with
-	// the focus elsewhere.
-	onBlur() {
-		this.isFocusInToolbar = false;
+	// When focus leaves the toolbar make sure we record it. This prevents
+	// us accidentally setting focus on a toolbar item when the toolbar
+	// re-renders with the focus elsewhere.
+	onBlur(evt) {
+		// If the focus is being moved to an object outside the toolbar div
+		// we set isFocusInToolbar to false.
+		if (!evt.relatedTarget?.closest(".toolbar-div")) {
+			this.isFocusInToolbar = false;
+		}
 	}
 
 	// This is called when the user presses a key with focus on one of the
@@ -136,17 +140,51 @@ class Toolbar extends React.Component {
 	}
 
 	// When the toolbar resizes, check each toolbar item to see if it has
-	// a sub-menu open and, if it does, close it.
+	// an open sub-area and, if that item is not a focusable item, close
+	// the sub-area. The item may no longer be focusable it is it was wrapped
+	// into the overflow menu. Also, check to see if the current focus action
+	// item is focusable and, if not, set focus on the first focusable item.
 	onToolbarResize() {
-		this.leftItemRefs.forEach((ref) => this.closeSubMenuOnRef(ref));
-		this.rightItemRefs.forEach((ref) => this.closeSubMenuOnRef(ref));
-		this.overflowItemRefs.forEach((ref) => this.closeOverflowMenuOnRef(ref));
+		const focusableItemRefs = this.getFocusableItemRefs();
+		// Note: isFocusActionFocusable needs to be calculated here before any
+		// update to the toolbar caused by the code in the subsequent if ststement.
+		const isFocusActionFocusable = this.isFocusActionFocusable(this.state.focusAction, focusableItemRefs);
+		const refWithOpenSubArea = this.getRefWithOpenSubArea();
+
+		if (refWithOpenSubArea) {
+			const action = refWithOpenSubArea.current.getAction();
+			const isFocusActionWithOpenSubAreaFocusable = this.isFocusActionFocusable(action, focusableItemRefs);
+
+			if (!isFocusActionWithOpenSubAreaFocusable) {
+				refWithOpenSubArea.current.closeSubArea();
+
+			} else {
+				// This forces a refresh that will cause the position of any
+				// open sub-area to be recaulculated based on the new toolbar width.
+				this.setFocusAction(this.state.focusAction);
+			}
+		}
 
-		if (this.isFocusInToolbar) {
+		// If the focus action item is not focusable (maybe because it has been
+		// moved into the overflow menu) then set focus on the first focusable item.
+		if (!isFocusActionFocusable) {
 			this.setFocusOnFirstItem();
 		}
 	}
 
+	// Returns the ref to any item that currently has an open sub-area or null
+	// if no item has an open sub-area.
+	getRefWithOpenSubArea() {
+		let subAreaOpenRef = this.leftItemRefs.find((ref) => ref.current.isSubAreaDisplayed());
+		if (!subAreaOpenRef) {
+			subAreaOpenRef = this.rightItemRefs.find((ref) => ref.current.isSubAreaDisplayed());
+		}
+		if (!subAreaOpenRef) {
+			subAreaOpenRef = this.overflowItemRefs.find((ref) => ref.current.isSubAreaDisplayed());
+		}
+		return subAreaOpenRef;
+	}
+
 	// Either sets the focus on the item for the action passed in or, if
 	// no action is passed in, set the focus on the current focusAction.
 	// Setting the current focusAction is used to return focus back to an
@@ -192,18 +230,18 @@ class Toolbar extends React.Component {
 
 	getPreviousItemRef(focusableItemRefs) {
 		const index = focusableItemRefs.findIndex((item) => this.getRefAction(item) === this.state.focusAction);
-		if (index > 0) {
-			return focusableItemRefs[index - 1];
+		if (index === 0) {
+			return focusableItemRefs[focusableItemRefs.length - 1];
 		}
-		return null;
+		return focusableItemRefs[index - 1];
 	}
 
 	getNextItemRef(focusableItemRefs) {
 		const index = focusableItemRefs.findIndex((item) => this.getRefAction(item) === this.state.focusAction);
-		if (index < focusableItemRefs.length - 1) {
-			return focusableItemRefs[index + 1];
+		if (index === focusableItemRefs.length - 1) {
+			return focusableItemRefs[0];
 		}
-		return null;
+		return focusableItemRefs[index + 1];
 	}
 
 	getRefAction(ref) {
@@ -313,6 +351,14 @@ class Toolbar extends React.Component {
 		return index;
 	}
 
+	// Returns true of the current focus action item is one of the focusable
+	// items. (It may not be if it has been placed in the overflow menu).
+	isFocusActionFocusable(focusAction, focusableItemRefs) {
+		const indexFocusAction = focusableItemRefs.findIndex((ref) =>
+			ref.current.props.actionObj?.action === focusAction);
+		return indexFocusAction > -1;
+	}
+
 	// Returns a reference to the first item that is not on the
 	// top (visible) row of the toolbar.
 	findFirstRightItemRefNotOnTopRow() {
@@ -386,6 +432,7 @@ class Toolbar extends React.Component {
 						toolbarFocusAction={this.state.focusAction}
 						setToolbarFocusAction={this.setFocusOnItem}
 						isFocusInToolbar={this.isFocusInToolbar}
+						closeAnyOpenSubArea={this.closeAnyOpenSubArea}
 						size={this.props.size}
 					/>
 				);
@@ -421,6 +468,7 @@ class Toolbar extends React.Component {
 				toolbarFocusAction={this.state.focusAction}
 				setToolbarFocusAction={this.setFocusOnItem}
 				isFocusInToolbar={this.isFocusInToolbar}
+				closeAnyOpenSubArea={this.closeAnyOpenSubArea}
 			/>
 		);
 
@@ -440,15 +488,24 @@ class Toolbar extends React.Component {
 		return subMenuActions;
 	}
 
-	closeSubMenuOnRef(ref) {
-		if (ref.current.state.subAreaDisplayed) {
+	closeAnyOpenSubArea() {
+		this.leftItemRefs.forEach((ref) => this.closeSubAreaOnRef(ref));
+		this.rightItemRefs.forEach((ref) => this.closeSubAreaOnRef(ref));
+		this.overflowItemRefs.forEach((ref) => this.closeOverflowMenuOnRef(ref));
+	}
+
+	closeSubAreaOnRef(ref) {
+		if (ref.current.props.actionObj.setExtIsSubAreaDisplayed) {
+			ref.current.props.actionObj.setExtIsSubAreaDisplayed(false);
+
+		} else if (ref.current.state.subAreaDisplayed) {
 			ref.current.closeSubArea();
 		}
 	}
 
 	closeOverflowMenuOnRef(ref) {
 		if (ref.current.state.showExtendedMenu) {
-			ref.current.closeSubMenu();
+			ref.current.closeSubArea();
 		}
 	}
 

package/src/toolbar/toolbar.scss

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2023 Elyra Authors
+ * Copyright 2017-2024 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -30,16 +30,16 @@ $toolbar-divider-width: 1px;
 	background-color: $ui-01;
 	box-sizing: content-box;
 	position: relative;
-
 	display: flex;
 	justify-content: space-between;
+	outline: none; // Turn outline off and use carbon style for focus below.
 
 	/* 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;
+		border-color: $interactive-03;
+		box-shadow: inset 0 0 0 2px $interactive-03;
 	}
 
 	/* Small size toolbar  */
@@ -106,6 +106,7 @@ $toolbar-divider-width: 1px;
 	& button {
 		padding: 0;
 		min-height: 30px;
+		height: $toolbar-button-height;
 	}
 
 	&.default,
@@ -201,10 +202,15 @@ $toolbar-divider-width: 1px;
 	&.disabled.default {
 		color: $disabled-02;
 		fill: $disabled-02; // For custom svg images
+		& .toolbar-tick-mark {
+			fill: $disabled-02;
+		}
+		& .toolbar-text-content {
+			stroke: $disabled-02;
+		}
 	}
 
 	.toolbar-icon {
-		height: $toolbar-icon-size;
 		& svg {
 			height: $toolbar-icon-size;
 			width: $toolbar-icon-size;
@@ -212,52 +218,52 @@ $toolbar-divider-width: 1px;
 			-webkit-user-drag: none;
 		}
 	}
-}
 
-.toolbar-text-content {
-	position: absolute;
-	top: 14px;
-	font-size: 9px;
-	line-height: 9px;
-	color: $icon-01;
-}
+	.toolbar-text-content {
+		position: absolute;
+		top: 14px;
+		font-size: 9px;
+		line-height: 9px;
+		color: $icon-01;
+	}
 
-.toolbar-icon-label {
-	line-height: 16px;
+	.toolbar-icon-label {
+		line-height: 16px;
 
-	&.before {
-		padding-right: 8px;
-	}
+		&.before {
+			padding-right: 8px;
+		}
 
-	&.after {
-		padding-left: 8px;
+		&.after {
+			padding-left: 8px;
+		}
+
+		&.overflow {
+			padding-left: 8px;
+			word-break: break-word;
+			hyphens: auto;
+		}
 	}
 
-	&.overflow {
+	.toolbar-up-down-chevron {
 		padding-left: 8px;
-		word-break: break-word;
-		hyphens: auto;
+		height: 16px;
+		pointer-events: none;
 	}
-}
 
-.toolbar-up-down-chevron {
-	padding-left: 8px;
-	height: 16px;
-	pointer-events: none;
-}
-
-// Triangular tick mark in bottom right corner of an expandable icon
-.toolbar-tick-svg {
-	position: absolute;
-	bottom: 0;
-	right: 0;
-	height: $toolbar-button-height;
-	width: $toolbar-button-height;
-	pointer-events: none;
-}
+	// Triangular tick mark in bottom right corner of an expandable icon
+	.toolbar-tick-svg {
+		position: absolute;
+		bottom: 0;
+		right: 0;
+		height: $toolbar-button-height;
+		width: $toolbar-button-height;
+		pointer-events: none;
 
-.toolbar-tick-mark {
-	fill: $interactive-02;
+		& .toolbar-tick-mark {
+			fill: $icon-01;
+		}
+	}
 }
 
 .toolbar-jsx-item {
@@ -285,14 +291,8 @@ $toolbar-divider-width: 1px;
 	&.ghost {
 		& button {
 			background-color: $ui-03;
-			border-color: transparent;
-			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;
-		}
 	}
 }
 

package/src/tooltip/tooltip.jsx

@@ -79,6 +79,13 @@ class ToolTip extends React.Component {
 				if (tooltipTrigger && tooltip) {
 					this.updateTooltipLayout(tooltip, tooltipTrigger, tooltip.getAttribute("direction"));
 				}
+
+				const linkElement = this.targetRef.querySelector("a");
+
+				// Focus on link when tooltip with link is opened
+				if (linkElement) {
+					linkElement.focus();
+				}
 			}
 		}
 	}
@@ -87,6 +94,10 @@ class ToolTip extends React.Component {
 		if (evt.key === "Tab") {
 			this.tabKeyPressed = true;
 		}
+		if (evt.key === "Escape") {
+			this.triggerRef.focus();
+			this.setTooltipVisible(false);
+		}
 	}
 
 	getStyleValue(value) {
@@ -320,6 +331,9 @@ class ToolTip extends React.Component {
 		// To prevent this default behavior, stopPropagation and preventDefault is used.
 		evt.stopPropagation();
 		evt.preventDefault();
+
+		// When tooltip with link is closed and another tooltip is opened newly opened tooltip should have focus.
+		this.triggerRef.focus();
 		if (this.state.isTooltipVisible) {
 			// Tooltip is visible and user clicks on trigger element again, hide tooltip
 			this.setTooltipVisible(false);
@@ -405,22 +419,53 @@ class ToolTip extends React.Component {
 		if (this.props.className) {
 			tipClass += " " + this.props.className;
 		}
-
+		let linkClicked = false;
 		let link = null;
 		if (this.state.isTooltipVisible && this.props.tooltipLinkHandler && this.props.link) {
 			const linkInformation = this.props.tooltipLinkHandler(this.props.link);
 			// Verify tooltipLinkHandler returns object in correct format
 			if (typeof linkInformation === "object" && linkInformation.label && linkInformation.url) {
-				link = (<Link
-					className="tooltip-link"
-					id={this.props.link.id}
-					href={linkInformation.url}
-					target="_blank"
-					rel="noopener"
-					visited={false}
+				link = (<div
+					ref={(ref) => (this.linkRef = ref)}
+					onKeyDown={(evt) => {
+						evt.stopPropagation();
+						evt.preventDefault();
+
+						// When 'Esc' is pressed shift the focus to tooltip icon so that user can navigate following elements.
+						if (evt.key === "Escape") {
+							this.triggerRef.focus();
+							this.setTooltipVisible(false);
+						} else if (evt.key === "Enter") { // Open active/highlighted link when Enter or Return is clicked.
+							const focusedElement = this.linkRef.children[0];
+							if (focusedElement) {
+								window.open(focusedElement, "_blank");
+							}
+						}
+					}}
+					onBlur={() => {
+						if (linkClicked) { // Keep tooltip open when link is clicked
+							this.setTooltipVisible(true);
+						} else { // Close the tooltip and shift focus to tooltip icon
+							this.triggerRef.focus();
+							this.setTooltipVisible(false);
+						}
+					}
+					}
+					onClick={() => {
+						linkClicked = true;
+					}}
 				>
-					{linkInformation.label}
-				</Link>);
+					<Link
+						className="tooltip-link"
+						id={this.props.link.id}
+						href={linkInformation.url}
+						target="_blank"
+						rel="noopener"
+						visited={false}
+					>
+						{linkInformation.label}
+					</Link>
+				</div>);
 			}
 		}
 
@@ -435,6 +480,7 @@ class ToolTip extends React.Component {
 						className={tipClass}
 						aria-hidden={!this.state.isTooltipVisible}
 						direction={this.props.direction}
+						ref={(ref) => (this.targetRef = ref)}
 					>
 						<svg className="tipArrow" x="0px" y="0px" viewBox="0 0 9.1 16.1">
 							<polyline points="9.1,15.7 1.4,8.1 9.1,0.5" />