@elyra/canvas 12.42.0 → 12.43.0

package/src/toolbar/toolbar-button-item.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.
@@ -21,9 +21,6 @@ import Tooltip from "../tooltip/tooltip.jsx";
 import ArrangeHorizontally from "./../../assets/images/arrange_horizontally.svg";
 import ArrangeVertically from "./../../assets/images/arrange_vertically.svg";
 import ToggleNotificationPanel from "./../../assets/images/notification_counter_icon.svg";
-import PaletteClose from "./../../assets/images/palette/palette_close.svg";
-import PaletteOpen from "./../../assets/images/palette/palette_open.svg";
-import ZoomToFit from "./../../assets/images/zoom_to_fit.svg";
 
 import { Button } from "carbon-components-react";
 import SVG from "react-inlinesvg";
@@ -31,7 +28,8 @@ import classNames from "classnames";
 import { StopFilledAlt16, Play16, Undo16, Redo16, Chat16, ChatOff16, Result16,
 	Cut16, Copy16, Paste16, Edit16,	ColorPalette16, Maximize16, Minimize16,
 	Launch16, AddComment16, TrashCan16, ZoomIn16, ZoomOut16,
-	ChevronRight16, ChevronDown16, ChevronUp16 } from "@carbon/icons-react";
+	ChevronRight16, ChevronDown16, ChevronUp16,
+	CenterToFit16, OpenPanelFilledLeft16 } from "@carbon/icons-react";
 import { TOOLBAR_STOP, TOOLBAR_RUN, TOOLBAR_UNDO, TOOLBAR_REDO,
 	TOOLBAR_CUT, TOOLBAR_COPY, TOOLBAR_PASTE, TOOLBAR_CLIPBOARD,
 	TOOLBAR_CREATE_COMMENT, TOOLBAR_CREATE_AUTO_COMMENT, TOOLBAR_COLOR_BACKGROUND,
@@ -54,6 +52,14 @@ class ToolbarButtonItem extends React.Component {
 	componentDidUpdate() {
 		if (this.props.isFocusInToolbar &&
 				this.props.buttonFocusAction === this.props.actionObj.action) {
+			// If a Jsx object was provided, the class of the component should have
+			// been set to toolbar-jsx-obj.
+			const jsxItem = this.buttonRef.current.querySelector(".toolbar-jsx-obj");
+			if (jsxItem) {
+				jsxItem.focus();
+				return;
+			}
+
 			this.buttonRef.current.focus();
 		}
 	}
@@ -105,17 +111,18 @@ class ToolbarButtonItem extends React.Component {
 			return <ZoomIn16 disabled={disabled} />;
 		case (TOOLBAR_ZOOM_OUT):
 			return <ZoomOut16 disabled={disabled} />;
-
 		case (TOOLBAR_ZOOM_FIT):
-			return <SVG src={ZoomToFit} disabled={disabled} />;
+			return <CenterToFit16 disabled={disabled} />;
+		case (TOOLBAR_OPEN_PALETTE):
+			return <OpenPanelFilledLeft16 disabled={disabled} />;
+		case (TOOLBAR_CLOSE_PALETTE):
+			return <OpenPanelFilledLeft16 disabled={disabled} />;
+
+		// Non-carbon icons
 		case (TOOLBAR_ARRANGE_HORIZONALLY):
 			return <SVG src={ArrangeHorizontally} disabled={disabled} />;
 		case (TOOLBAR_ARRANGE_VERTICALLY):
 			return <SVG src={ArrangeVertically} disabled={disabled} />;
-		case (TOOLBAR_OPEN_PALETTE):
-			return <SVG src={PaletteOpen} disabled={disabled} />;
-		case (TOOLBAR_CLOSE_PALETTE):
-			return <SVG src={PaletteClose} disabled={disabled} />;
 		case (TOOLBAR_TOGGLE_NOTIFICATION_PANEL):
 			return <SVG src={ToggleNotificationPanel} disabled={disabled} />;
 
@@ -169,7 +176,7 @@ class ToolbarButtonItem extends React.Component {
 		return null;
 	}
 
-	generateButton(actionObj) {
+	generateRegularItem(actionObj) {
 		let labelBefore = null;
 		let labelAfter = null;
 
@@ -264,6 +271,26 @@ class ToolbarButtonItem extends React.Component {
 		);
 	}
 
+	// Creates a <div> containing the JSX in the actionObj.jsx field, wrapped in a tooltip
+	// <div>, for display as an action item in the toolbar. The jsx field can be just
+	// regular JSX OR a function that returns JSX. If the application has provided a
+	// function we call it, passing in the tabIndex that the component in the JSX should
+	// use, based on whether it is focused or not.
+	generateJsxItem(actionObj) {
+		let content = null;
+		if (typeof actionObj.jsx === "function") {
+			const tabIndex = this.props.buttonFocusAction === actionObj.action ? 0 : -1;
+			content = actionObj.jsx(tabIndex);
+		} else {
+			content = actionObj.jsx;
+		}
+		const jsx = this.wrapInTooltip(content);
+		const div = (<div ref={this.buttonRef}>{jsx}</div>);
+
+		return div;
+	}
+
+
 	wrapInTooltip(content) {
 		if (!this.props.isInMenu && (this.showLabelAsTip(this.props.actionObj) || this.props.actionObj.tooltip)) {
 			const tip = this.props.actionObj.tooltip ? this.props.actionObj.tooltip : this.props.actionObj.label;
@@ -296,13 +323,10 @@ class ToolbarButtonItem extends React.Component {
 
 	render() {
 		const actionObj = this.props.actionObj;
-		let divContent = null;
 
-		if (actionObj.jsx) {
-			divContent = this.wrapInTooltip(actionObj.jsx);
-		} else {
-			divContent = this.generateButton(actionObj);
-		}
+		const divContent = actionObj.jsx
+			? this.generateJsxItem(actionObj)
+			: this.generateRegularItem(actionObj);
 
 		return divContent;
 	}
@@ -333,7 +357,10 @@ ToolbarButtonItem.propTypes = {
 		subMenu: PropTypes.array,
 		subPanel: PropTypes.any,
 		subPanelData: PropTypes.object,
-		jsx: PropTypes.object,
+		jsx: PropTypes.oneOfType([
+			PropTypes.object,
+			PropTypes.func
+		]),
 		tooltip: PropTypes.oneOfType([
 			PropTypes.string,
 			PropTypes.object,

package/src/toolbar/toolbar-divider-item.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.

package/src/toolbar/toolbar-overflow-item.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.
@@ -89,6 +89,7 @@ class ToolbarOverflowItem extends React.Component {
 
 		} else {
 			document.addEventListener("click", this.clickOutside, false);
+			this.props.closeAnyOpenSubArea();
 			this.props.setOverflowIndex(this.props.index);
 			this.openSubMenu();
 			this.props.setToolbarFocusAction(this.props.action);
@@ -168,7 +169,8 @@ ToolbarOverflowItem.propTypes = {
 	containingDivId: PropTypes.string,
 	toolbarFocusAction: PropTypes.string,
 	setToolbarFocusAction: PropTypes.func,
-	isFocusInToolbar: PropTypes.bool
+	isFocusInToolbar: PropTypes.bool,
+	closeAnyOpenSubArea: PropTypes.func
 };
 
 export default ToolbarOverflowItem;

package/src/toolbar/toolbar-sub-menu-item.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.
@@ -62,9 +62,9 @@ class ToolbarSubMenuItem extends React.Component {
 	clickOutside(evt) {
 		if (this.state.subAreaDisplayed) {
 			const items = document.getElementsByClassName(this.generateActionName());
-			const isOver = items && items.length > 0 ? items[0].contains(evt.target) : false;
+			const isOver = items?.length > 0 ? items[0].contains(evt.target) : false;
 
-			if (!isOver) {
+			if (!isOver && !this.props.actionObj.leaveSubAreaOpenOnClickOutside) {
 				this.closeSubArea();
 			}
 		}
@@ -93,14 +93,14 @@ class ToolbarSubMenuItem extends React.Component {
 		} else {
 			evt.stopPropagation();
 			if (this.props.isInCascadeMenu) {
-				this.props.closeParentSubArea();
+				this.props.closeParentSubArea(true); // true = close only if closeSubAreaOnClick is checked
 				this.props.setSubMenuFocus();
 
 			} else if (this.props.isInOverflowMenu) {
 				this.props.setSubMenuFocus(this.props.actionObj.action);
 
 			} else {
-				this.props.closeParentSubArea();
+				this.props.closeParentSubArea(true); // true = close only if closeSubAreaOnClick is checked
 				this.props.setToolbarFocusAction(); // Resets the toolbar focus action
 			}
 			this.props.toolbarActionHandler(this.props.actionObj.action, evt);
@@ -210,6 +210,7 @@ ToolbarSubMenuItem.propTypes = {
 		isSelected: PropTypes.bool,
 		kind: PropTypes.string,
 		closeSubAreaOnClick: PropTypes.bool,
+		leaveSubAreaOpenOnClickOutside: PropTypes.bool,
 		subMenu: PropTypes.array,
 		subPanel: PropTypes.any,
 		subPanelData: PropTypes.object,

package/src/toolbar/toolbar-sub-menu.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.
@@ -35,8 +35,6 @@ class ToolbarSubMenu extends React.Component {
 			focusAction: "subarea"
 		};
 
-		this.areaRef = React.createRef();
-
 		this.onKeyDown = this.onKeyDown.bind(this);
 		this.setFocusAction = this.setFocusAction.bind(this);
 		this.setSubMenuFocus = this.setSubMenuFocus.bind(this);
@@ -143,7 +141,7 @@ class ToolbarSubMenu extends React.Component {
 		const focusableActions = [];
 
 		for (let i = 0; i < this.props.subMenuActions.length; i++) {
-			if (this.props.subMenuActions[i].enable) {
+			if (this.props.subMenuActions[i].enable || this.props.subMenuActions[i].jsx) {
 				focusableActions.push(this.props.subMenuActions[i]);
 			}
 		}
@@ -224,7 +222,7 @@ class ToolbarSubMenu extends React.Component {
 			this.subMenuItems = this.generateSubMenuItems();
 
 			return (
-				<div ref={this.areaRef} style={style} className={"toolbar-popover-list submenu"}
+				<div ref={(ref) => (this.areaRef = ref)} style={style} className={"toolbar-popover-list submenu"}
 					tabIndex={-1} onKeyDown={this.onKeyDown}
 				>
 					{this.subMenuItems}
@@ -242,7 +240,7 @@ ToolbarSubMenu.propTypes = {
 	closeSubArea: PropTypes.func,
 	setToolbarFocusAction: PropTypes.func,
 	setSubMenuFocus: PropTypes.func,
-	actionItemRect: PropTypes.object.isRequired,
+	actionItemRect: PropTypes.object,
 	expandDirection: PropTypes.string.isRequired,
 	containingDivId: PropTypes.string,
 	parentSelector: PropTypes.string,

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,48 @@ 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());
+		}
+		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 +227,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 +348,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 +429,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 +465,7 @@ class Toolbar extends React.Component {
 				toolbarFocusAction={this.state.focusAction}
 				setToolbarFocusAction={this.setFocusOnItem}
 				isFocusInToolbar={this.isFocusInToolbar}
+				closeAnyOpenSubArea={this.closeAnyOpenSubArea}
 			/>
 		);
 
@@ -440,8 +485,17 @@ 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();
 		}
 	}