@elyra/canvas 13.30.0 → 13.31.0

package/src/common-canvas/svg-canvas-utils-zoom.js

@@ -657,9 +657,19 @@ export default class SVGCanvasUtilsZoom {
 			newZoomTransform.y !== this.zoomTransform.y;
 	}
 
-	// Zooms the canvas to fit in the current viewport.
-	zoomToFit() {
+	// Zooms all the canvas objects to fit in the current viewport.
+	zoomToFit(animateTime) {
 		const canvasDimensions = this.getCanvasDimensionsWithPadding();
+		const zoom = this.getZoomToFit(canvasDimensions);
+		if (zoom) {
+			this.zoomCanvasInvokeZoomBehavior(zoom, animateTime);
+		}
+	}
+
+	// Returns a zoom object that can be used to zoom canvas objects (nodes,
+	// comments and/or detached links), that occupy the canvasDimensions,
+	// to fit in the current viewport.
+	getZoomToFit(canvasDimensions) {
 		const viewPortDimensions = this.getViewportDimensions();
 
 		if (canvasDimensions) {
@@ -673,8 +683,9 @@ export default class SVGCanvasUtilsZoom {
 			x -= newScale * canvasDimensions.left;
 			y -= newScale * canvasDimensions.top;
 
-			this.zoomCanvasInvokeZoomBehavior({ x: x, y: y, k: newScale });
+			return { x: x, y: y, k: newScale };
 		}
+		return null;
 	}
 
 	// Returns a zoom object that will, if applied to the canvas, zoom the objects
@@ -689,10 +700,17 @@ export default class SVGCanvasUtilsZoom {
 		if (nodes.length > 0 || comments.length > 0 || links.length > 0) {
 			const canvasDimensions = CanvasUtils.getCanvasDimensions(nodes, comments, links, 0, 0, true);
 			const canv = this.convertRectAdjustedForScaleWithPadding(canvasDimensions, 1, 30);
-			const xPosInt = parseInt(xPos, 10);
-			const yPosInt = typeof yPos === "undefined" ? xPosInt : parseInt(yPos, 10);
 
 			if (canv) {
+				// If the bounding rectangle (canv) doesn't completely fit in the viewport
+				// we do a zoom to fit to bring the requested objects into view.
+				if (canv.width > transformedSVGRect.width || canv.height > transformedSVGRect.height) {
+					return this.getZoomToFit(canv);
+				}
+
+				const xPosInt = parseInt(xPos, 10);
+				const yPosInt = typeof yPos === "undefined" ? xPosInt : parseInt(yPos, 10);
+
 				let xOffset;
 				let yOffset;
 

package/src/common-properties/components/editor-form/editor-form.jsx

@@ -531,6 +531,7 @@ class EditorForm extends React.Component {
 					<TearSheet
 						open={this.props.controller.getActiveTearsheet() !== null}
 						onCloseCallback={onCloseCallback}
+						cancelHandler={onCloseCallback}
 						key={panel.id}
 						tearsheet={this.visibleTearsheet}
 					/>
@@ -683,6 +684,7 @@ class EditorForm extends React.Component {
 				stackedTearsheet = (<TearSheet
 					open
 					stacked
+					cancelHandler={this.closeFieldPicker}
 					tearsheet={{
 						title: title,
 						content: this.fieldPicker()

package/src/common-properties/components/wide-flyout/wide-flyout.jsx

@@ -24,23 +24,65 @@ import { Portal } from "react-portal";
 export default class WideFlyout extends Component {
 	constructor(props) {
 		super(props);
+		this.modalRef = React.createRef();
 		this.state = {
 			style: {
 				height: 0
 			}
 		};
 		this.updateDimensions = this.updateDimensions.bind(this);
+		this.handleTabKey = this.handleTabKey.bind(this);
 	}
 
 	componentDidMount() {
 		this.updateDimensions();
 		window.addEventListener("resize", this.updateDimensions);
+		document.addEventListener("keydown", this.handleTabKey);
+		this.focusOnFirstFocusable(); // Set initial focus inside the modal.
+	}
+	componentDidUpdate(prevProps) {
+		// If modal is still open, and new item added.
+		const modal = this.getActiveModal();
+		if (!prevProps.show && this.props.show && modal) {
+			// If focus is outside modal, move it to first focusable
+			this.focusOnFirstFocusable();
+			return;
+		}
+		if (this.props.show && modal) {
+			const active = document.activeElement;
+			// Restore focus if lost due to modal content changes like typing or adding new fields
+			if (active === document.body || !modal.contains(active)) {
+				this.focusOnFirstFocusable();
+			}
+		}
 	}
-
 	componentWillUnmount() {
 		window.removeEventListener("resize", this.updateDimensions);
+		document.removeEventListener("keydown", this.handleTabKey);
+	}
+	// Returns an array of focusable elements inside the modal.
+	getFocusables() {
+		const modal = this.getActiveModal();
+		if (!modal) {
+			return [];
+		}
+		return Array.from(
+			modal.querySelectorAll(
+				"button, a[href], input, select, textarea, [tabindex]:not([tabindex='-1'])"
+			)).filter((el) => el.offsetParent !== null); // Filter out hidden/disabled elements.
+	}
+	// Focus on the first focusable element once modal opens.
+	getActiveModal() {
+		const modals = Array.from(document.querySelectorAll("div[role='dialog'].properties-wf-content.show"));
+		// Pick the last one — it's the top-most modal (deepest in DOM)
+		return modals.length > 0 ? modals[modals.length - 1] : null;
+	}
+	focusOnFirstFocusable() {
+		const focusables = this.getFocusables();
+		if (focusables.length > 0) {
+			focusables[0].focus();
+		}
 	}
-
 	updateDimensions() {
 		if (this.wideFlyout) {
 			// used to find correct parent
@@ -66,6 +108,39 @@ export default class WideFlyout extends Component {
 		}
 		return null;
 	}
+	// Handles focus trap inside the modal when using Tab or Shift+tab key.
+	handleTabKey(e) {
+		if (e.key !== "Tab") {
+			return;
+		}
+		const modal = this.getActiveModal();
+		if (!modal || !this.props.show) {
+			return;
+		}
+		const focusables = this.getFocusables();
+		if (focusables.length === 0) {
+			return;
+		}
+		const first = focusables[0];
+		const last = focusables[focusables.length - 1];
+		const active = document.activeElement;
+		// If focus is outside modal or on <body>,Then bring back to the first element inside modal.
+		if (this.props.show && (!modal.contains(active) || active === document.body)) {
+			e.preventDefault();
+			// If "Shift+Tab" then focus should be on last element inside the modal else first.
+			(e.shiftKey ? last : first).focus();
+			return;
+		}
+		if (e.shiftKey) {
+			if (active === first) {
+				e.preventDefault();
+				last.focus();
+			}
+		} else if (active === last) {
+			e.preventDefault();
+			first.focus();
+		}
+	}
 
 	render() {
 		const overlay = (<div className={classNames("properties-wf-overlay", { "show": this.props.show })} />);
@@ -87,10 +162,15 @@ export default class WideFlyout extends Component {
 			children = (<div className="properties-wf-children"> {this.props.children} </div>);
 		}
 		return (
-			<div className="properties-wf-modal" ref={ (ref) => (this.wideFlyout = ref) }>
+			<div className="properties-wf-modal" ref={(ref) => (this.wideFlyout = ref)}>
 				<Portal node={this.commonPropertiesParent}>
-					{ overlay }
-					<div className={classNames("properties-wf-content", { "show": this.props.show, "properties-light-disabled": !this.props.light })} style={this.state.style}>
+					{overlay}
+					<div
+						ref={this.modalRef}
+						role="dialog"
+						className={classNames("properties-wf-content", { "show": this.props.show, "properties-light-disabled": !this.props.light })}
+						style={this.state.style}
+					>
 						{title}
 						{children}
 						{buttons}

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

@@ -82,6 +82,7 @@ class DatepickerControl extends React.Component {
 					onChange={this.handleChange.bind(this)}
 					locale={this.locale}
 					readOnly={this.props.readOnly}
+					value={this.state.value}
 				>
 					<DatePickerInput
 						{...validationProps}

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

@@ -193,18 +193,24 @@ class DropDown extends React.Component {
 		this.props.controller.updatePropertyValue(this.props.propertyId, value);
 	}
 
-	// evt is null when onBlur, empty string when clicking the 'x' to clear input
-	handleOnInputChange(evt) {
+
+	handleOnInputChange(evt, options) {
 		const currentValue = this.props.controller.getPropertyValue(this.props.propertyId);
 
 		// Don't update property value during initial render
 		if ((typeof currentValue === "undefined" || currentValue === null) && evt === "") {
 			return;
 		}
-
-		if (evt !== null && evt !== currentValue) {
-			const value = evt;
-			this.props.controller.updatePropertyValue(this.props.propertyId, value);
+		const value = evt;
+		if (this.props.control.customValueAllowed) {
+			if (evt !== null && evt !== currentValue) {
+				this.props.controller.updatePropertyValue(this.props.propertyId, value);
+			}
+		} else { // check and update only if input is present in options when customValueAllowed=false
+			const isValidInput = options.some((opt) => opt.label === evt);
+			if (isValidInput && evt !== null && evt !== currentValue) {
+				this.props.controller.updatePropertyValue(this.props.propertyId, value);
+			}
 		}
 	}
 
@@ -278,7 +284,7 @@ class DropDown extends React.Component {
 					{ options }
 				</Select>
 			);
-		} else if (this.props.control.customValueAllowed) { // combobox dropdown not allowed in tables
+		} else if (this.props.control.customValueAllowed || this.props.control.shouldFilterItem) { // combobox dropdown not allowed in tables
 			const shouldFilterItem = this.props.control.shouldFilterItem === true ? { shouldFilterItem: this.filterItems } : {};
 			dropdownComponent = (
 				<ComboBox
@@ -286,15 +292,15 @@ class DropDown extends React.Component {
 					aria-label={this.props.control.label ? this.props.control.label.text : ""}
 					id={`${ControlUtils.getDataId(this.props.propertyId)}-dropdown`}
 					disabled={this.props.state === STATES.DISABLED || this.disableEmptyListDropdown}
-					placeholder={dropDown.selectedOption.label}
-					selectedItem={dropDown.selectedOption.label}
+					placeholder={dropDown.selectedOption?.label}
+					selectedItem={dropDown.selectedOption?.label}
 					items={dropDown.options}
 					onChange={this.handleComboOnChange}
-					onInputChange={this.handleOnInputChange}
+					onInputChange={(evt) => this.handleOnInputChange(evt, dropDown.options)}
 					translateWithId={(id) => listBoxMenuIconTranslationIds[id]}
 					titleText={this.props.controlItem}
 					helperText={this.props.control.helperText}
-					allowCustomValue
+					allowCustomValue={this.props.control.customValueAllowed}
 					{...shouldFilterItem}
 				/>
 			);

package/src/common-properties/form/ControlInfo.js

@@ -172,7 +172,7 @@ export class Control {
 		if (typeof settings.visible === "boolean") {
 			this.visible = settings.visible;
 		}
-		if (typeof settings.width === "number") {
+		if (typeof settings.width === "number" || (!isNaN(parseInt(settings.width, 10)) && settings.width?.endsWith("px"))) {
 			this.width = settings.width;
 		}
 		if (settings.editStyle) {

package/src/common-properties/panels/tearsheet/tearsheet.jsx

@@ -52,6 +52,7 @@ class TearSheet extends Component {
 					size="lg"
 					aria-label={formatMessage(this.props.intl, MESSAGE_KEYS.PROPERTIES_LABEL, { label: title })}
 					preventCloseOnClickOutside
+					onClose={this.props.cancelHandler} // for case where user closes the modal by pressing ESC
 				>
 					{title === null
 						? null
@@ -93,7 +94,7 @@ TearSheet.propTypes = {
 	applyLabel: PropTypes.string, // Required if showPropertiesButtons is true
 	rejectLabel: PropTypes.string, // Required if showPropertiesButtons is true
 	okHandler: PropTypes.func, // Required if showPropertiesButtons is true
-	cancelHandler: PropTypes.func, // Required if showPropertiesButtons is true
+	cancelHandler: PropTypes.func.isRequired,
 	applyOnBlur: PropTypes.bool.isRequired,
 	intl: PropTypes.object.isRequired,
 	controller: PropTypes.object.isRequired,

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

@@ -121,6 +121,9 @@ const horizontalDefaultLayout = {
 		// Allows the user to resize the node.
 		nodeResizable: false,
 
+		// Allows the user to move the node. Can be: true or false.
+		nodeMovable: true,
+
 		// The size of the node sizing area that extends around the node, over
 		// which the mouse pointer will change to the sizing arrows.
 		nodeSizingArea: 10,
@@ -600,6 +603,9 @@ const verticalDefaultLayout = {
 		// Allows the user to resize the node.
 		nodeResizable: false,
 
+		// Allows the user to move the node. Can be: true or false.
+		nodeMovable: true,
+
 		// The size of the node sizing area that extends around the node, over
 		// which the mouse pointer will change to the sizing arrows.
 		nodeSizingArea: 10,