@elyra/canvas 12.42.0 → 12.44.0

package/src/palette/palette-flyout-content-category.jsx

@@ -31,6 +31,8 @@ class PaletteFlyoutContentCategory extends React.Component {
 		this.onMouseOver = this.onMouseOver.bind(this);
 		this.onMouseLeave = this.onMouseLeave.bind(this);
 		this.categoryClicked = this.categoryClicked.bind(this);
+		this.categoryKeyPressed = this.categoryKeyPressed.bind(this);
+		this.setPaletteCategory = this.setPaletteCategory.bind(this);
 	}
 
 	onMouseOver(ev) {
@@ -93,12 +95,22 @@ class PaletteFlyoutContentCategory extends React.Component {
 		return content;
 	}
 
+	setPaletteCategory(isOpen) {
+		if (isOpen) {
+			this.props.canvasController.closePaletteCategory(this.props.category.id);
+		} else {
+			this.props.canvasController.openPaletteCategory(this.props.category.id);
+		}
+	}
+
 	// Returns the category object for a regular category.
 	getRenderCategory() {
 		const titleObj = this.getTitleObj();
 		const content = this.getContent();
 		return (
-			<AccordionItem title={titleObj} open={this.props.category.is_open}>
+			<AccordionItem title={titleObj} open={this.props.category.is_open}
+				onKeyDown={this.categoryKeyPressed}
+			>
 				{content}
 			</AccordionItem>
 		);
@@ -116,7 +128,7 @@ class PaletteFlyoutContentCategory extends React.Component {
 				onMouseOver={this.onMouseOver}
 				onMouseLeave={this.onMouseLeave}
 			>
-				<div className="palette-flyout-category-item">
+				<div className="palette-flyout-category-item" tabIndex={-1}>
 					{itemImage}
 					{itemText}
 				</div></div>
@@ -196,10 +208,17 @@ class PaletteFlyoutContentCategory extends React.Component {
 		// a category is opened.
 		evt.stopPropagation();
 
-		if (this.props.category.is_open) {
-			this.props.canvasController.closePaletteCategory(this.props.category.id);
-		} else {
-			this.props.canvasController.openPaletteCategory(this.props.category.id);
+		this.setPaletteCategory(this.props.category.is_open);
+	}
+
+	categoryKeyPressed(evt) {
+		if (evt.target.className === "bx--accordion__heading") {
+			if (evt.code === "Enter" || evt.code === "Space") {
+				evt.preventDefault();
+				evt.stopPropagation();
+
+				this.setPaletteCategory(this.props.category.is_open);
+			}
 		}
 	}
 

package/src/palette/palette.scss

@@ -99,11 +99,17 @@ $palette-search-container-height: 41px;
 		/* This stops it being dragged incorrectly.*/
 		user-select: none;
 		width: 100%;
+		outline: none; // Turn outline off and use carbon style for focus below.
 
 		&:hover {
 			background-color: $ui-03;
 		}
 
+		&:focus {
+			border-color: $interactive-03;
+			box-shadow: inset 0 0 0 2px $interactive-03;
+		}
+
 		.palette-list-item-category-label {
 			@include carbon--type-style("caption-01");
 			width: 100%;
@@ -414,47 +420,9 @@ $palette-search-container-height: 41px;
 }
 
 .palette-dialog-topbar {
-	height: 40px;
-	padding: 10px;
+	height: 41px;
 	background-color: $ui-03;
 	border-bottom: $palette-border-width solid $palette-border-color;
-
-	.left-navbar {
-		height: 20px;
-		float: left;
-		vertical-align: middle;
-		/* Prevent elements from being selectable */
-		/* This stops it being dragged incorrectly.*/
-		user-select: none;
-	}
-
-	.right-navbar {
-		height: 20px;
-		float: right;
-		vertical-align: middle;
-	}
-
-	.secondary-action {
-		margin-left: 10px;
-		display: inline-block;
-		cursor: pointer;
-		width: 20px;
-	}
-
-	.close-icon svg {
-		fill: $interactive-02;
-	}
-
-	.palette-three-way-icon-div {
-		margin-left: 5px;
-		display: inline-block;
-		cursor: pointer;
-		width: 20px;
-		height: 20px;
-		/* Prevent elements from being selectable */
-		/* This stops it being dragged incorrectly.*/
-		user-select: none;
-	}
 }
 
 .palette-dialog-content {
@@ -466,7 +434,7 @@ $palette-search-container-height: 41px;
 }
 
 .palette-dialog-categories {
-	background-color: $ui-03;
+	background-color: $ui-01;
 	width: 130px;
 	min-width: 130px; /* Set a min-width to ensure space for the scroll bar when it is displayed */
 	border-right: $palette-border-width solid $palette-border-color;

package/src/toolbar/index.js

@@ -0,0 +1,18 @@
+/*
+ * 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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Toolbar from "./toolbar.jsx";
+export default Toolbar;

package/src/toolbar/toolbar-action-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.
@@ -67,39 +67,62 @@ class ToolbarActionItem extends React.Component {
 
 	// Called by toolbar.jsx
 	isEnabled() {
-		return this.props.actionObj.enable;
+		return this.props.actionObj.enable || this.props.actionObj.jsx;
+	}
+
+	// Called by toolbar.jsx and internally
+	isSubAreaDisplayed() {
+		if (this.props.actionObj.setExtIsSubAreaDisplayed &&
+			typeof this.props.actionObj.extIsSubAreaDisplayed !== "undefined") {
+			return this.props.actionObj.extIsSubAreaDisplayed;
+		}
+		return this.state.subAreaDisplayed;
 	}
 
 	clickOutside(evt) {
-		if (this.state.subAreaDisplayed) {
+		if (this.isSubAreaDisplayed()) {
 			const items = document.getElementsByClassName(this.generateActionName());
 			const isOver = items && items.length > 0 ? items[0].contains(evt.target) : false;
 
-			if (!isOver) {
+			if (!isOver && !this.props.actionObj.leaveSubAreaOpenOnClickOutside) {
 				this.closeSubArea();
 			}
 		}
 	}
 
 	openSubArea() {
+		// If host app is controlling display of the sub-area call it to say
+		// sub-area is closing.
+		if (this.props.actionObj.setExtIsSubAreaDisplayed) {
+			this.props.actionObj.setExtIsSubAreaDisplayed(true);
+			return;
+		}
 		this.setState({ subAreaDisplayed: true });
 	}
 
 	closeSubArea(checkCloseSubAreaOnClick) {
 		if (!checkCloseSubAreaOnClick || this.props.actionObj.closeSubAreaOnClick) {
+			// If host app is controlling display of the sub-area call it to say
+			// sub-area is closing.
+			if (this.props.actionObj.setExtIsSubAreaDisplayed) {
+				this.props.actionObj.setExtIsSubAreaDisplayed(false);
+				return;
+			}
 			this.setState({ subAreaDisplayed: false });
 		}
 	}
 
 	actionClickHandler(evt) {
 		if (this.props.actionObj.subMenu || this.props.actionObj.subPanel) {
-			if (this.state.subAreaDisplayed) {
+			if (this.isSubAreaDisplayed()) {
 				document.removeEventListener("click", this.clickOutside, false);
 				this.closeSubArea();
 				this.props.setToolbarFocusAction(this.props.actionObj.action);
 
 			} else {
 				document.addEventListener("click", this.clickOutside, false);
+				this.props.closeAnyOpenSubArea();
+				this.props.setToolbarFocusAction(this.props.actionObj.action);
 				this.openSubArea();
 			}
 
@@ -118,7 +141,7 @@ class ToolbarActionItem extends React.Component {
 	// supPanel field  OR a sub-menu which is a list of options which is created
 	// from the array of items the caller passes in the subMenu field.
 	generateSubArea() {
-		const actionItemRect = this.divRef.current.getBoundingClientRect();
+		const actionItemRect = this.divRef.current ? this.divRef.current.getBoundingClientRect() : null;
 
 		if (this.props.actionObj.subPanel) {
 			return (
@@ -169,9 +192,10 @@ class ToolbarActionItem extends React.Component {
 				"toolbar-item-selected": actionObj.isSelected
 			},
 			kindAsClass,
-			actionName);
+			actionName,
+			this.props.actionObj.className);
 
-		const subArea = this.state.subAreaDisplayed ? this.generateSubArea() : null;
+		const subArea = this.isSubAreaDisplayed() ? this.generateSubArea() : null;
 
 		return (
 			<div ref={this.divRef} className={itemClassName} data-toolbar-action={actionObj.action} data-toolbar-item
@@ -184,9 +208,9 @@ class ToolbarActionItem extends React.Component {
 						tooltipDirection={this.props.tooltipDirection}
 						instanceId={this.props.instanceId}
 						isInMenu={false}
-						subAreaDisplayed={this.state.subAreaDisplayed}
+						subAreaDisplayed={this.isSubAreaDisplayed()}
 						actionClickHandler={this.actionClickHandler}
-						buttonFocusAction={this.state.subAreaDisplayed ? null : this.props.toolbarFocusAction}
+						buttonFocusAction={this.isSubAreaDisplayed() ? null : this.props.toolbarFocusAction}
 						isFocusInToolbar={this.props.isFocusInToolbar}
 						size={this.props.size}
 					/>
@@ -217,12 +241,18 @@ ToolbarActionItem.propTypes = {
 		className: PropTypes.string,
 		textContent: PropTypes.string,
 		isSelected: PropTypes.bool,
+		setExtIsSubAreaDisplayed: PropTypes.func,
+		extIsSubAreaDisplayed: PropTypes.bool,
 		kind: PropTypes.string,
 		closeSubAreaOnClick: PropTypes.bool,
+		leaveSubAreaOpenOnClickOutside: PropTypes.bool,
 		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,
@@ -237,6 +267,7 @@ ToolbarActionItem.propTypes = {
 	toolbarFocusAction: PropTypes.string,
 	setToolbarFocusAction: PropTypes.func,
 	isFocusInToolbar: PropTypes.bool,
+	closeAnyOpenSubArea: PropTypes.func,
 	size: PropTypes.oneOf(["md", "sm"])
 };
 

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,14 +28,15 @@ 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,
 	TOOLBAR_DELETE_SELECTED_OBJECTS, TOOLBAR_DELETE_LINK,
 	TOOLBAR_ZOOM_IN, TOOLBAR_ZOOM_OUT, TOOLBAR_ZOOM_FIT,
 	TOOLBAR_ARRANGE_HORIZONALLY, TOOLBAR_ARRANGE_VERTICALLY,
-	TOOLBAR_OPEN_PALETTE, TOOLBAR_CLOSE_PALETTE, TOOLBAR_TOGGLE_NOTIFICATION_PANEL,
+	TOOLBAR_OPEN_PALETTE, TOOLBAR_CLOSE_PALETTE, TOOLBAR_TOGGLE_PALETTE, TOOLBAR_TOGGLE_NOTIFICATION_PANEL,
 	TOOLBAR_SHOW_COMMENTS, TOOLBAR_HIDE_COMMENTS,
 	TOOLBAR_EXPAND_SUPERNODE_IN_PLACE, TOOLBAR_COLLAPSE_SUPERNODE_IN_PLACE,
 	TOOLBAR_EXPAND_SUPERNODE_FULL_PAGE, TOOLBAR_SET_NODE_LABEL_EDIT, TOOLBAR_SET_COMMENT_EDIT_MODE }
@@ -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,20 @@ 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} />;
+		case (TOOLBAR_TOGGLE_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 +178,7 @@ class ToolbarButtonItem extends React.Component {
 		return null;
 	}
 
-	generateButton(actionObj) {
+	generateRegularItem(actionObj) {
 		let labelBefore = null;
 		let labelAfter = null;
 
@@ -188,7 +197,6 @@ class ToolbarButtonItem extends React.Component {
 
 		const itemContentClassName = classNames(
 			"toolbar-item-content",
-			actionObj.className ? actionObj.className : null,
 			{ "overflow": this.props.isInMenu, "disabled": !actionObj.enable, "default": !actionObj.kind });
 
 		// If no 'kind' is set, use ghost and then override colors using the "default" class in innerDivClassName.
@@ -264,6 +272,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 +324,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 +358,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.
@@ -35,7 +35,7 @@ class ToolbarOverflowItem extends React.Component {
 		this.uuid = uuid4();
 		this.toggleExtendedMenu = this.toggleExtendedMenu.bind(this);
 		this.clickOutside = this.clickOutside.bind(this);
-		this.closeSubMenu = this.closeSubMenu.bind(this);
+		this.closeSubArea = this.closeSubArea.bind(this);
 	}
 
 	componentDidUpdate() {
@@ -55,7 +55,13 @@ class ToolbarOverflowItem extends React.Component {
 		return this.props.action;
 	}
 
-	closeSubMenu() {
+	// Called by toolbar.jsx
+	isSubAreaDisplayed() {
+		return this.state.showExtendedMenu;
+	}
+
+	// Called by toolbar.jsx and internally
+	closeSubArea() {
 		this.setState({ showExtendedMenu: false });
 	}
 
@@ -84,11 +90,12 @@ class ToolbarOverflowItem extends React.Component {
 		if (this.state.showExtendedMenu) {
 			document.removeEventListener("click", this.clickOutside, false);
 			this.props.setOverflowIndex(null); // Clear the indexes
-			this.closeSubMenu();
+			this.closeSubArea();
 			this.props.setToolbarFocusAction(this.props.action); // This will not set focus on this item
 
 		} else {
 			document.addEventListener("click", this.clickOutside, false);
+			this.props.closeAnyOpenSubArea();
 			this.props.setOverflowIndex(this.props.index);
 			this.openSubMenu();
 			this.props.setToolbarFocusAction(this.props.action);
@@ -117,7 +124,7 @@ class ToolbarOverflowItem extends React.Component {
 					subMenuActions={this.props.subMenuActions}
 					instanceId={this.props.instanceId}
 					toolbarActionHandler={this.props.toolbarActionHandler}
-					closeSubArea={this.closeSubMenu}
+					closeSubArea={this.closeSubArea}
 					setToolbarFocusAction={this.props.setToolbarFocusAction}
 					actionItemRect={actionItemRect}
 					expandDirection={"vertical"}
@@ -168,7 +175,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,