@elyra/canvas 12.45.1 → 12.47.0

package/src/common-properties/controls/checkbox/checkbox.jsx

@@ -69,18 +69,18 @@ class CheckboxControl extends React.Component {
 			</span>
 		);
 		return (
-			<div className={classNames("properties-checkbox", { "hide": this.props.state === STATES.HIDDEN }, this.props.messageInfo ? this.props.messageInfo.type : null)}
-				data-id={ControlUtils.getDataId(this.props.propertyId)}
-			>
-				<Checkbox
-					disabled={this.props.state === STATES.DISABLED}
-					id={this.id}
-					labelText={checkboxLabel}
-					onChange={this.handleChange.bind(this)}
-					checked={Boolean(this.props.value)}
-					hideLabel={this.props.tableControl}
-				/>
-				{tooltipIcon}
+			<div data-id={ControlUtils.getDataId(this.props.propertyId)}>
+				<div className={classNames("properties-checkbox", { "hide": this.props.state === STATES.HIDDEN }, this.props.messageInfo ? this.props.messageInfo.type : null)}>
+					<Checkbox
+						disabled={this.props.state === STATES.DISABLED}
+						id={this.id}
+						labelText={checkboxLabel}
+						onChange={this.handleChange.bind(this)}
+						checked={Boolean(this.props.value)}
+						hideLabel={this.props.tableControl}
+					/>
+					{tooltipIcon}
+				</div>
 				<ValidationMessage inTable={this.props.tableControl} state={this.props.state} messageInfo={this.props.controller.getErrorMessage(this.props.propertyId)} />
 			</div>
 		);

package/src/common-properties/controls/checkbox/checkbox.scss

@@ -27,9 +27,6 @@
 	.bx--form-item.bx--checkbox-wrapper {
 		flex: initial; // override carbon style to show tooltipIcon next to checkbox label
 	}
-	.properties-validation-message {
-		flex: 0 1 100%;
-	}
 	&.hide {
 		display: none;
 	}

package/src/object-model/layout-dimensions.js

@@ -75,7 +75,7 @@ const portsHorizontalDefaultLayout = {
 		labelAllowReturnKey: false, // true allows line feed to be inserted into label, "save" to make the return key save the label.
 
 		// An array of decorations to be applied to the node. For details see:
-		// https://github.com/elyra-ai/canvas/wiki/2.4.2-Decoration-Specification
+		// https://elyra-ai.github.io/canvas/03.04.01-decorations/
 		// These are added to the node at run time and will not be saved into
 		// the pipeline flow.
 		decorations: [],
@@ -475,7 +475,7 @@ const portsVerticalDefaultLayout = {
 		labelAllowReturnKey: false, // true allows line feed to be inserted into label, "save" to make the return key save the label.
 
 		// An array of decorations to be applied to the node. For details see:
-		// https://github.com/elyra-ai/canvas/wiki/2.4.2-Decoration-Specification
+		// https://elyra-ai.github.io/canvas/03.04.01-decorations/
 		// These are added to the node at run time and will not be saved into
 		// the pipeline flow.
 		decorations: [],

package/src/toolbar/toolbar-action-item.jsx

@@ -24,6 +24,8 @@ import ToolbarSubMenu from "./toolbar-sub-menu.jsx";
 import ToolbarSubPanel from "./toolbar-sub-panel.jsx";
 
 const ESC_KEY = 27;
+const DOWN_ARROW_KEY = 40;
+const TOOLBAR_ICON_WIDTH = 40;
 
 class ToolbarActionItem extends React.Component {
 	constructor(props) {
@@ -51,8 +53,14 @@ class ToolbarActionItem extends React.Component {
 	onKeyDown(evt) {
 		if (evt.keyCode === ESC_KEY) {
 			this.closeSubArea();
-			return;
+
+		} else if (evt.keyCode === DOWN_ARROW_KEY) {
+			if (this.hasSubArea()) {
+				this.openSubArea();
+			}
 		}
+		// Left and Right arrow clicks are caught in the
+		// toolbar.jsx onKeyDown method.
 	}
 
 	// Called by toolbar.jsx
@@ -90,6 +98,10 @@ class ToolbarActionItem extends React.Component {
 		}
 	}
 
+	hasSubArea() {
+		return this.props.actionObj.subMenu || this.props.actionObj.subPanel;
+	}
+
 	openSubArea() {
 		// If host app is controlling display of the sub-area call it to say
 		// sub-area is closing.
@@ -112,8 +124,9 @@ class ToolbarActionItem extends React.Component {
 		}
 	}
 
-	actionClickHandler(evt) {
-		if (this.props.actionObj.subMenu || this.props.actionObj.subPanel) {
+	actionClickHandler(evt, chevronClicked) {
+		if (this.hasSubArea() &&
+			(this.props.actionObj.purpose !== "dual" || chevronClicked)) {
 			if (this.isSubAreaDisplayed()) {
 				document.removeEventListener("click", this.clickOutside, false);
 				this.closeSubArea();
@@ -127,6 +140,7 @@ class ToolbarActionItem extends React.Component {
 			}
 
 		} else {
+			this.closeSubArea();
 			this.props.toolbarActionHandler(this.props.actionObj.action, evt);
 			this.props.setToolbarFocusAction(this.props.actionObj.action);
 		}
@@ -141,7 +155,10 @@ 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 ? this.divRef.current.getBoundingClientRect() : null;
+		let actionItemRect = this.divRef.current ? this.divRef.current.getBoundingClientRect() : null;
+		actionItemRect = (actionItemRect && this.props.actionObj.purpose === "dual")
+			? this.adjustForDual(actionItemRect)
+			: actionItemRect;
 
 		if (this.props.actionObj.subPanel) {
 			return (
@@ -173,6 +190,22 @@ class ToolbarActionItem extends React.Component {
 		);
 	}
 
+	// For a dual-purpose toolbar button, adjusts the rectangle dimensions so
+	// the sub-panel is opened based on the location of the right chevron of
+	// the dual button.
+	adjustForDual(actionItemRect) {
+		return {
+			height: actionItemRect.height,
+			width: actionItemRect.width,
+			top: actionItemRect.top,
+			bottom: actionItemRect.bottom,
+			left: actionItemRect.left + TOOLBAR_ICON_WIDTH,
+			right: actionItemRect.right + TOOLBAR_ICON_WIDTH,
+			x: actionItemRect.x + TOOLBAR_ICON_WIDTH,
+			y: actionItemRect.y
+		};
+	}
+
 	generateSelector(actionObj) {
 		if (actionObj.jsx) {
 			return ".toolbar-jsx-item";
@@ -229,6 +262,7 @@ ToolbarActionItem.propTypes = {
 			PropTypes.object
 		]),
 		incLabelWithIcon: PropTypes.oneOf(["no", "before", "after"]),
+		purpose: PropTypes.oneOf(["single", "dual"]),
 		enable: PropTypes.bool,
 		iconEnabled: PropTypes.oneOfType([
 			PropTypes.string,

package/src/toolbar/toolbar-button-item.jsx

@@ -197,20 +197,24 @@ class ToolbarButtonItem extends React.Component {
 
 		const itemContentClassName = classNames(
 			"toolbar-item-content",
-			{ "overflow": this.props.isInMenu, "disabled": !actionObj.enable, "default": !actionObj.kind });
+			{ "is-in-menu": 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.
 		const kind = actionObj.kind || "ghost";
 
-		const chevronIcon = this.generateChevronIcon(actionObj);
+		const chevronDiv = this.generateChevronDiv(actionObj);
+
+		const mainClassName = actionObj.purpose ? "content-main dual" : "content-main";
 
 		let buttonContent = (
 			<div className={itemContentClassName}>
-				{labelBefore}
-				{icon}
-				{labelAfter}
-				{textContent}
-				{chevronIcon}
+				<div className={mainClassName}>
+					{labelBefore}
+					{icon}
+					{labelAfter}
+					{textContent}
+				</div>
+				{chevronDiv}
 			</div>
 		);
 
@@ -237,39 +241,44 @@ class ToolbarButtonItem extends React.Component {
 		return button;
 	}
 
-	// Returns a chevron icon if the action icon is displaying a sub-menu or
-	// sub-panel. The chevron will:
-	//  * point right if this action item is in a drop down menu
-	//  * point down if this action item is displayed with text in the toolbar
-	//    and the menu isn't displayed
-	//  * point up if this action item is displayed with text in the toolbar
-	//    and the menu is displayed
-	//  * be a mini-chevron (small triangle in the bottom right of icon) if this
-	//    action item isn't displayed with text.
-	generateChevronIcon(actionObj) {
+	// Returns a civ containing a chevron icon. If the action icon is displaying
+	// a sub-menu or sub-panel. The chevron will:
+	//  * point right if this action item is in a drop down menu.
+	//  * point down and be regular size if this action item is displayed with
+	//    text in the toolbar and the menu isn't displayed.
+	//  * point up and be regular size if this action item is displayed with
+	//    text in the toolbar and the menu is displayed.
+	//  * point down and be a mini-chevron if this action item is displayed without
+	//    text in the toolbar and the menu isn't displayed.
+	//  * point up and be a mini-chevron if this action item is displayed without
+	//    text in the toolbar and the menu is displayed.
+	generateChevronDiv(actionObj) {
 		if (actionObj.subMenu || actionObj.subPanel) {
 			if (this.props.isInMenu) {
-				return (<ChevronRight16 />);
+				return <div className={"toolbar-right-chevron"}><ChevronRight16 /></div>;
 			}
 			if (actionObj.incLabelWithIcon === "before" ||
 					actionObj.incLabelWithIcon === "after") {
 				const chev = this.props.subAreaDisplayed ? (<ChevronUp16 />) : (<ChevronDown16 />);
 				return (<div className={"toolbar-up-down-chevron"}>{chev}</div>);
 			}
-			return this.generateChevronMini();
+			if (actionObj.purpose === "dual") {
+				const chevMini = this.props.subAreaDisplayed ? (<ChevronUp16 />) : (<ChevronDown16 />);
+				return (<div className={"toolbar-up-down-chevron-mini"} onClick={this.miniChevronClicked.bind(this)}>{chevMini}</div>);
+			}
+			const path = this.props.size === "sm" ? "M 29 29 L 29 23 23 29 Z" : "M 37 37 L 37 30 30 37 Z";
+			return (
+				<svg className="toolbar-tick-svg">
+					<path d={path} className="toolbar-tick-mark" />
+				</svg>
+			);
 		}
 		return null;
 	}
 
-	// Returns an svg to display the little triangle that appears in the bottom
-	// right corner of icons that, when clicked, show a drop down menu.
-	generateChevronMini() {
-		const path = this.props.size === "sm" ? "M 29 29 L 29 23 23 29 Z" : "M 37 37 L 37 30 30 37 Z";
-		return (
-			<svg className="toolbar-tick-svg">
-				<path d={path} className="toolbar-tick-mark" />
-			</svg>
-		);
+	miniChevronClicked(evt) {
+		this.props.actionClickHandler(evt, true);
+		evt.stopPropagation();
 	}
 
 	// Creates a <div> containing the JSX in the actionObj.jsx field, wrapped in a tooltip
@@ -341,6 +350,7 @@ ToolbarButtonItem.propTypes = {
 			PropTypes.object
 		]),
 		incLabelWithIcon: PropTypes.oneOf(["no", "before", "after"]),
+		purpose: PropTypes.oneOf(["single", "dual"]),
 		enable: PropTypes.bool,
 		iconEnabled: PropTypes.oneOfType([
 			PropTypes.string,

package/src/toolbar/toolbar-overflow-item.jsx

@@ -22,6 +22,9 @@ import { Button } from "carbon-components-react";
 import { OverflowMenuVertical16 } from "@carbon/icons-react";
 import ToolbarSubMenu from "./toolbar-sub-menu.jsx";
 
+const ESC_KEY = 27;
+const DOWN_ARROW_KEY = 40;
+
 class ToolbarOverflowItem extends React.Component {
 	constructor(props) {
 		super(props);
@@ -36,6 +39,7 @@ class ToolbarOverflowItem extends React.Component {
 		this.toggleExtendedMenu = this.toggleExtendedMenu.bind(this);
 		this.clickOutside = this.clickOutside.bind(this);
 		this.closeSubArea = this.closeSubArea.bind(this);
+		this.onKeyDown = this.onKeyDown.bind(this);
 	}
 
 	componentDidUpdate() {
@@ -50,6 +54,18 @@ class ToolbarOverflowItem extends React.Component {
 		document.removeEventListener("click", this.clickOutside, false);
 	}
 
+	onKeyDown(evt) {
+		if (evt.keyCode === ESC_KEY) {
+			this.closeSubArea();
+
+		} else if (evt.keyCode === DOWN_ARROW_KEY) {
+			this.openSubArea();
+		}
+		// Left and Right arrow clicks are caught in the
+		// toolbar.jsx onKeyDown method.
+	}
+
+
 	// Called by toolbar.jsx
 	getAction() {
 		return this.props.action;
@@ -62,11 +78,18 @@ class ToolbarOverflowItem extends React.Component {
 
 	// Called by toolbar.jsx and internally
 	closeSubArea() {
+		document.removeEventListener("click", this.clickOutside, false);
+		this.props.setOverflowIndex(null); // Clear the indexes
 		this.setState({ showExtendedMenu: false });
+		this.props.setToolbarFocusAction(this.props.action); // This will not set focus on this item
 	}
 
-	openSubMenu() {
+	openSubArea() {
+		document.addEventListener("click", this.clickOutside, false);
+		this.props.closeAnyOpenSubArea();
+		this.props.setOverflowIndex(this.props.index);
 		this.setState({ showExtendedMenu: true });
+		this.props.setToolbarFocusAction(this.props.action);
 	}
 
 	genOverflowButtonClassName() {
@@ -88,17 +111,10 @@ class ToolbarOverflowItem extends React.Component {
 	// When the overflow menu is closed we set the overflow index values to null.
 	toggleExtendedMenu() {
 		if (this.state.showExtendedMenu) {
-			document.removeEventListener("click", this.clickOutside, false);
-			this.props.setOverflowIndex(null); // Clear the indexes
 			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);
+			this.openSubArea();
 		}
 	}
 
@@ -147,11 +163,12 @@ class ToolbarOverflowItem extends React.Component {
 						kind="ghost"
 						tabIndex={tabIndex}
 						onClick={this.toggleExtendedMenu}
+						onKeyDown={this.onKeyDown}
 						aria-label={this.props.label}
 						size={this.props.size}
 					>
 						<div className="toolbar-item-content default">
-							<div className="toolbar-icon">
+							<div className="toolbar-icon overflow-item">
 								<OverflowMenuVertical16 />
 							</div>
 						</div>

package/src/toolbar/toolbar.jsx

@@ -152,11 +152,11 @@ class Toolbar extends React.Component {
 		const refWithOpenSubArea = this.getRefWithOpenSubArea();
 
 		if (refWithOpenSubArea) {
-			const action = refWithOpenSubArea.current.getAction();
+			const action = refWithOpenSubArea.current?.getAction();
 			const isFocusActionWithOpenSubAreaFocusable = this.isFocusActionFocusable(action, focusableItemRefs);
 
 			if (!isFocusActionWithOpenSubAreaFocusable) {
-				refWithOpenSubArea.current.closeSubArea();
+				refWithOpenSubArea.current?.closeSubArea();
 
 			} else {
 				// This forces a refresh that will cause the position of any
@@ -175,12 +175,12 @@ class Toolbar extends React.Component {
 	// 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());
+		let subAreaOpenRef = this.leftItemRefs.find((ref) => ref.current?.isSubAreaDisplayed());
 		if (!subAreaOpenRef) {
-			subAreaOpenRef = this.rightItemRefs.find((ref) => ref.current.isSubAreaDisplayed());
+			subAreaOpenRef = this.rightItemRefs.find((ref) => ref.current?.isSubAreaDisplayed());
 		}
 		if (!subAreaOpenRef) {
-			subAreaOpenRef = this.overflowItemRefs.find((ref) => ref.current.isSubAreaDisplayed());
+			subAreaOpenRef = this.overflowItemRefs.find((ref) => ref.current?.isSubAreaDisplayed());
 		}
 		return subAreaOpenRef;
 	}
@@ -245,7 +245,7 @@ class Toolbar extends React.Component {
 	}
 
 	getRefAction(ref) {
-		return ref.current.getAction();
+		return ref.current?.getAction();
 	}
 
 	// Returns an array of references to focusable (that is enabled)
@@ -270,17 +270,17 @@ class Toolbar extends React.Component {
 		let overflowItemRef = null;
 
 		for (let i = 0; i < this.leftItemRefs.length; i++) {
-			const itemRect = this.leftItemRefs[i].current.getBoundingRect();
+			const itemRect = this.leftItemRefs[i].current?.getBoundingRect();
 
-			if (itemRect.top === topRowY) {
-				if (this.leftItemRefs[i].current.isEnabled()) {
+			if (itemRect?.top === topRowY) {
+				if (this.leftItemRefs[i].current?.isEnabled()) {
 					focusableItemRefs.push(this.leftItemRefs[i]);
 				}
 
 			} else if (!overflowItemRef) {
 				const leftRefAction = this.getRefAction(this.leftItemRefs[i]);
 				const overflowAction = this.getOverflowAction(leftRefAction);
-				overflowItemRef = this.overflowItemRefs.find((oRef) => oRef.current.getAction() === overflowAction);
+				overflowItemRef = this.overflowItemRefs.find((oRef) => oRef.current?.getAction() === overflowAction);
 				if (overflowItemRef) {
 					focusableItemRefs.push(overflowItemRef);
 				}
@@ -303,8 +303,8 @@ class Toolbar extends React.Component {
 		const topRowY = this.findToolbarTopYCoordinate();
 
 		for (let i = 0; i < this.rightItemRefs.length; i++) {
-			if (this.rightItemRefs[i].current.isEnabled()) {
-				const refRect = this.rightItemRefs[i].current.getBoundingRect();
+			if (this.rightItemRefs[i].current?.isEnabled()) {
+				const refRect = this.rightItemRefs[i].current?.getBoundingRect();
 
 				if (refRect.top === topRowY) {
 					focusableItemRefs.push(this.rightItemRefs[i]);
@@ -355,7 +355,7 @@ class Toolbar extends React.Component {
 	// 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);
+			ref.current?.props.actionObj?.action === focusAction);
 		return indexFocusAction > -1;
 	}
 
@@ -367,7 +367,7 @@ class Toolbar extends React.Component {
 		let rightItemRef = null;
 
 		for (let i = 0; i < this.rightItemRefs.length; i++) {
-			const itemRect = this.rightItemRefs[i].current.getBoundingRect();
+			const itemRect = this.rightItemRefs[i].current?.getBoundingRect();
 			if (itemRect.top !== topRowY && rightItemRef === null) {
 				rightItemRef = this.rightItemRefs[i];
 			}
@@ -379,8 +379,8 @@ class Toolbar extends React.Component {
 	// used to detecg which toolbar items are on the top (visible)
 	// row and which are wrapped onto other rows.
 	findToolbarTopYCoordinate() {
-		const rect = this.toolbarRef.current.getBoundingClientRect();
-		return rect.top;
+		const rect = this.toolbarRef.current?.getBoundingClientRect();
+		return rect?.top;
 	}
 
 	// Generates an array of toolbar items from the toolbarActions array passed in. When
@@ -495,17 +495,17 @@ class Toolbar extends React.Component {
 	}
 
 	closeSubAreaOnRef(ref) {
-		if (ref.current.props.actionObj.setExtIsSubAreaDisplayed) {
-			ref.current.props.actionObj.setExtIsSubAreaDisplayed(false);
+		if (ref.current?.props.actionObj.setExtIsSubAreaDisplayed) {
+			ref.current?.props.actionObj.setExtIsSubAreaDisplayed(false);
 
-		} else if (ref.current.state.subAreaDisplayed) {
-			ref.current.closeSubArea();
+		} else if (ref.current?.state.subAreaDisplayed) {
+			ref.current?.closeSubArea();
 		}
 	}
 
 	closeOverflowMenuOnRef(ref) {
-		if (ref.current.state.showExtendedMenu) {
-			ref.current.closeSubArea();
+		if (ref.current?.state.showExtendedMenu) {
+			ref.current?.closeSubArea();
 		}
 	}
 

package/src/toolbar/toolbar.scss

@@ -61,10 +61,21 @@ $toolbar-divider-width: 1px;
 		}
 
 		.toolbar-item-content {
-			padding: $spacing-02 $spacing-03;
 			height: $toolbar-button-sm-height;
 			align-items: center;
 			min-width: 32px;
+
+			&.is-in-menu {
+				padding-left: 10px;
+			}
+
+			& .content-main {
+				padding: 0;
+			}
+
+			& .overflow-item {
+				padding: 6px;
+			}
 		}
 
 		.toolbar-popover-list button {
@@ -195,11 +206,53 @@ $toolbar-divider-width: 1px;
 	width: inherit;
 	display: flex;
 	justify-content: center;
-	padding: 11px;
 
-	&.overflow {
+	&.disabled {
+		pointer-events: none;
+
+		& .content-main:hover,
+		& .toolbar-up-down-chevron-mini:hover {
+			pointer-events: none;
+		}
+	}
+
+	& .content-main {
+		padding: 11px;
+		display: flex;
+
+		&.dual:hover {
+			background-color: $background-selected-hover;
+		}
+	}
+
+	& .toolbar-up-down-chevron {
+		padding: 11px 8px 11px 0;
+		pointer-events: none;
+	}
+
+	& .toolbar-up-down-chevron-mini {
+		padding: 11px 2px;
+
+		&:hover {
+			background-color: $background-selected-hover;
+		}
+	}
+
+	& .toolbar-right-chevron {
+		padding: 9px 0 2px;
+		pointer-events: none;
+	}
+
+	& .overflow-item {
+		padding: 11px;
+	}
+
+	&.is-in-menu {
 		justify-content: left;
-		padding: 8px 0;
+
+		& .content-main {
+			padding: 8px 0 6px;
+		}
 	}
 
 	&.default {
@@ -228,10 +281,13 @@ $toolbar-divider-width: 1px;
 
 	.toolbar-text-content {
 		position: absolute;
-		top: 14px;
+		width: 11px;
+		top: 15px;
+		left: 13px;
 		font-size: 9px;
 		line-height: 9px;
 		color: $icon-01;
+		text-align: center;
 	}
 
 	.toolbar-icon-label {
@@ -252,12 +308,6 @@ $toolbar-divider-width: 1px;
 		}
 	}
 
-	.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;