@elyra/canvas 12.12.3 → 12.15.0

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

@@ -21,9 +21,13 @@ import { Checkbox } from "carbon-components-react";
 import * as ControlUtils from "./../../util/control-utils";
 import classNames from "classnames";
 import ValidationMessage from "./../../components/validation-message";
-import { STATES } from "./../../constants/constants.js";
 import { v4 as uuid4 } from "uuid";
 import { intersection, isEqual } from "lodash";
+import { Information16 } from "@carbon/icons-react";
+import Tooltip from "./../../../tooltip/tooltip.jsx";
+import { STATES } from "./../../constants/constants.js";
+import { isEmpty } from "lodash";
+
 
 class CheckboxsetControl extends React.Component {
 	constructor(props) {
@@ -74,27 +78,48 @@ class CheckboxsetControl extends React.Component {
 	}
 
 	render() {
+
+		const hidden = this.props.state === STATES.HIDDEN;
 		let controlValue = this.props.value;
 		if (typeof controlValue === "undefined" || controlValue === null) {
 			controlValue = [];
 		}
 		const checkboxes = [];
 		for (var i = 0; i < this.props.control.values.length; i++) {
+			const val = this.props.control.values[i];
+			const disabled = this.props.state === STATES.DISABLED || !this.props.controlOpts.values.includes(val);
+			let tooltipIcon = null;
+			if (Array.isArray(this.props.control.valueDescs) && !isEmpty(this.props.control.valueDescs[i]) && !this.props.tableControl) {
+				const tooltip = (
+					<span >{this.props.control.valueDescs[i]}</span>
+				);
+				tooltipIcon = (<Tooltip
+					id={`tooltip-${this.uuid}-${i}`}
+					tip={tooltip}
+					direction="bottom"
+					className="properties-tooltips"
+					showToolTipOnClick
+					disable={hidden || disabled}
+				>
+					<Information16 disabled={disabled} className="properties-control-description-icon-info" />
+				</Tooltip>);
+			}
 			const id = {
 				name: this.props.propertyId.name,
 				row: i
 			};
-			const val = this.props.control.values[i];
 			const checked = (controlValue.indexOf(val) >= 0);
-			const disabled = this.props.state === STATES.DISABLED || !this.props.controlOpts.values.includes(val);
-			checkboxes.push(<Checkbox
-				disabled={disabled}
-				id={ControlUtils.getControlId(id, this.uuid)}
-				key={val + i}
-				labelText={this.props.control.valueLabels[i]}
-				onChange={this.handleChange.bind(this, val)}
-				checked={checked}
-			/>);
+			checkboxes.push(<div className="properties-checkbox-tooltip-container" key={ControlUtils.getControlId(id, this.uuid)}>
+				<Checkbox
+					disabled={disabled}
+					id={ControlUtils.getControlId(id, this.uuid)}
+					key={val + i}
+					labelText={this.props.control.valueLabels[i]}
+					onChange={this.handleChange.bind(this, val)}
+					checked={checked}
+				/>
+				{tooltipIcon}
+			</div>);
 		}
 		return (
 			<fieldset>

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

@@ -22,6 +22,12 @@
 		margin-bottom: $spacing-03;
 	}
 	.properties-checkboxset-container {
+		.properties-checkbox-tooltip-container{
+			display: grid;
+			align-items: center;
+			grid-template-columns: 1fr 12fr;
+			width: 100%;
+		}
 		&.error:not([disabled]) {
 			padding-bottom: $spacing-02;
 		}

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

@@ -151,6 +151,7 @@ class ListControl extends AbstractTable {
 				rowSelection={this.props.control.rowSelection}
 				updateRowSelections={this.updateRowSelections}
 				light={this.props.controller.getLight()}
+				emptyTablePlaceholder={this.props.control.additionalText}
 			/>);
 
 		const tableContainer = (<div>

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

@@ -26,6 +26,9 @@ import classNames from "classnames";
 import { STATES } from "./../../constants/constants.js";
 import { ORIENTATIONS } from "./../../constants/form-constants.js";
 import { v4 as uuid4 } from "uuid";
+import { Information16 } from "@carbon/icons-react";
+import Tooltip from "./../../../tooltip/tooltip.jsx";
+import { isEmpty } from "lodash";
 
 class RadiosetControl extends React.Component {
 	constructor(props) {
@@ -159,6 +162,8 @@ class RadiosetControl extends React.Component {
 	}
 
 	render() {
+		const disabled = this.props.state === STATES.DISABLED;
+		const hidden = this.props.state === STATES.HIDDEN;
 		if (!this.props.control.values && this.props.control.controlType === "radioset") {
 			this.props.control.values = [true, false];
 			this.props.control.valueLabels = ["true", "false"];
@@ -167,6 +172,24 @@ class RadiosetControl extends React.Component {
 		let wasChecked = false;
 		const valueSet = this.props.controlOpts;
 		for (var i = 0; i < valueSet.values.length; i++) {
+			let tooltipIcon = null;
+			if (Array.isArray(this.props.control.valueDescs) && !isEmpty(this.props.control.valueDescs[i]) && !this.props.tableControl) {
+				const tooltip = (
+					<span>{this.props.control.valueDescs[i]}</span>
+				);
+				tooltipIcon = (
+					<Tooltip
+						id={`tooltip-${this.uuid}-${i}`}
+						tip={tooltip}
+						direction="bottom"
+						className="properties-tooltips"
+						showToolTipOnClick
+						disable={hidden || disabled}
+					>
+						<Information16 disabled={disabled} className="properties-control-description-icon-info" />
+					</Tooltip>
+				);
+			}
 			const checked = valueSet.values[i] === this.props.value;
 			// RadioButton only accepts values of type string || number
 			const val = (this.props.control.valueDef.propType === "boolean") ? String(valueSet.values[i]) : valueSet.values[i];
@@ -182,12 +205,13 @@ class RadiosetControl extends React.Component {
 					<RadioButton
 						key={i}
 						id={ControlUtils.getControlId(id, this.uuid)}
-						disabled={this.props.state === STATES.DISABLED || itemDisabled}
+						disabled={disabled || itemDisabled}
 						labelText={valueSet.valueLabels[i]}
 						value={val}
 						onChange={this.handleChange}
 						checked={checked}
 					/>
+					{tooltipIcon}
 					{optionalPanel}
 				</div>
 			);

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

@@ -29,12 +29,31 @@
 		display: inline-flex;
 		flex-wrap: wrap;
 		.properties-radioset-panel {
+			display: flex;
+			height: auto;
+			align-items: center;
 			margin-bottom: 0;
 		}
 	}
 	.properties-radioset-panel {
 		margin-bottom: $spacing-02;
 		margin-right: $spacing-04;
+		display: grid;
+		grid-template-columns: 1fr 8fr;
+		grid-template-rows: auto;
+		grid-template-areas:
+			"radio tooltip"
+			"panel panel";
+		.bx--radio-button-wrapper{
+			grid-area: radio;
+			margin-right: 0; // We removed the space between radio & tooltip to position it correctly
+		}
+		.tooltip-container{
+			grid-area: tooltip;
+		}
+		.properties-control-nested-panel{
+			grid-area: panel;
+		}
 		&:last-of-type {
 			margin-bottom: 0; // don't want margin when last radio button in group
 		}

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

@@ -138,6 +138,7 @@ class SelectColumns extends AbstractTable {
 				rowSelection={this.props.control.rowSelection}
 				updateRowSelections={this.updateRowSelections}
 				light={this.props.controller.getLight()}
+				emptyTablePlaceholder={this.props.control.additionalText}
 			/>);
 
 		var content = (

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

@@ -110,6 +110,7 @@ class SomeofselectControl extends React.Component {
 					selectable
 					showHeader={false}
 					light={this.props.controller.getLight()}
+					emptyTablePlaceholder={this.props.control.additionalText}
 				/>
 				<ValidationMessage state={this.props.state} messageInfo={this.props.messageInfo} inTable={this.props.tableControl} />
 			</div>

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

@@ -50,6 +50,9 @@ export class Control {
 		if (settings.valueLabels) {
 			this.valueLabels = settings.valueLabels;
 		}
+		if (settings.valueDescs) {
+			this.valueDescs = settings.valueDescs;
+		}
 		if (settings.valueIcons) {
 			this.valueIcons = settings.valueIcons;
 		}

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

@@ -88,7 +88,7 @@ class ControlPanel {
 }
 
 class ActionPanel {
-	constructor(id, panelType, className, nestedPanel, actions) {
+	constructor(id, panelType, className, nestedPanel, actions, label, description) {
 		this.id = id;
 		this.panelType = panelType;
 		this.nestedPanel = nestedPanel;
@@ -96,6 +96,12 @@ class ActionPanel {
 		if (className) {
 			this.className = className;
 		}
+		if (label) {
+			this.label = label;
+		}
+		if (description) {
+			this.description = description;
+		}
 	}
 }
 
@@ -201,12 +207,24 @@ function _makeUIItem(parameterMetadata, actionMetadata, group, structureMetadata
 		return UIItem.makePanel(new ControlPanel(groupName, PanelType.SUMMARY, groupClassName, nestedPanel, panSubItems, groupLabel));
 	}
 	case GroupType.ACTION_PANEL: {
+		groupLabel = l10nProvider.l10nResource(group.label);
+		let groupDesc;
+		if (group.description) {
+			groupDesc = new Description(l10nProvider.l10nResource(group.description),
+				null,
+				group.description ? group.description.link : null);
+		}
 		return UIItem.makePanel(new ActionPanel(groupName, PanelType.ACTION_PANEL, groupClassName, nestedPanel,
-			_makeActions(parameterMetadata, actionMetadata, group, structureMetadata, l10nProvider)));
+			_makeActions(parameterMetadata, actionMetadata, group, structureMetadata, l10nProvider), groupLabel, groupDesc));
 	}
 	case GroupType.TEXT_PANEL: {
 		groupLabel = l10nProvider.l10nResource(group.label);
-		const groupDesc = l10nProvider.l10nResource(group.description);
+		let groupDesc;
+		if (group.description) {
+			groupDesc = new Description(l10nProvider.l10nResource(group.description),
+				group.description ? group.description.placement : null,
+				group.description ? group.description.link : null);
+		}
 		return UIItem.makeTextPanel(groupName, groupLabel, groupDesc, groupClassName, nestedPanel);
 	}
 	case GroupType.TWISTY_PANEL: {
@@ -552,6 +570,11 @@ function _makeControl(parameterMetadata, paramName, group, structureDefinition,
 	if (parameter.getRole() === ParamRole.ENUM) {
 		valueLabels = _parameterValueLabels(parameter, l10nProvider);
 	}
+
+	let valueDescs;
+	if (parameter.getRole() === ParamRole.ENUM) {
+		valueDescs = _parameterValueDescription(parameter, l10nProvider);
+	}
 	let action;
 	if (!isSubControl && parameter.actionRef) {
 		action = _makeAction(actionMetadata.getAction(parameter.actionRef), l10nProvider);
@@ -569,6 +592,7 @@ function _makeControl(parameterMetadata, paramName, group, structureDefinition,
 	settings.orientation = orientation;
 	settings.values = parameter.getValidValues();
 	settings.valueLabels = valueLabels;
+	settings.valueDescs = valueDescs;
 	settings.valueIcons = parameter.valueIcons;
 	settings.sortable = parameter.sortable;
 	settings.filterable = parameter.filterable;
@@ -743,6 +767,24 @@ function _parameterValueLabels(parameter, l10nProvider) {
 	return [];
 }
 
+function _parameterValueDescription(parameter, l10nProvider) {
+	if (Array.isArray(parameter.getValidValues())) {
+		let key;
+		if (parameter.resource_key) {
+			key = parameter.resource_key;
+		} else {
+			key = parameter.name;
+		}
+		const paramDescs = [];
+		parameter.getValidValues().forEach(function(paramValue) {
+			paramDescs.push(l10nProvider.l10nValueDesc(key, String(paramValue)));
+		});
+		return paramDescs;
+	}
+	return [];
+}
+
+
 export {
 	makePrimaryTab, _makeControl as makeControl
 };

package/src/common-properties/panels/action-panel/action-panel.jsx

@@ -19,22 +19,57 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import classNames from "classnames";
 import * as ControlUtils from "./../../util/control-utils";
-import { STATES } from "./../../constants/constants";
+import { STATES, CARBON_ICONS } from "./../../constants/constants";
+import { evaluateText } from "./../../util/property-utils.js";
+import Tooltip from "./../../../tooltip/tooltip.jsx";
+import Icon from "./../../../icons/icon.jsx";
+import { isEmpty } from "lodash";
 
 class ActionPanel extends Component {
 	render() {
 		const className = this.props.panel.className ? this.props.panel.className : "";
+		const hidden = this.props.panelState === STATES.HIDDEN;
+		const disabled = this.props.panelState === STATES.DISABLED;
+		let label;
+		if (this.props.panel.label) {
+			let tooltip;
+			if (this.props.panel.description && !isEmpty(this.props.panel.description.text)) {
+				const dynamicDescriptionText = evaluateText(this.props.panel.description.text, this.props.controller);
+				// If tooltip has a link, add propertyId in the link object
+				if (this.props.panel.description.link) {
+					this.props.panel.description.link.propertyId = { name: this.props.panel.id };
+				}
+				tooltip = (<Tooltip
+					id={`tooltip-label-${this.props.panel.id}`}
+					tip={dynamicDescriptionText}
+					link={this.props.panel.description.link ? this.props.panel.description.link : null}
+					tooltipLinkHandler={this.props.controller.getHandlers().tooltipLinkHandler}
+					direction="bottom"
+					disable={hidden || disabled}
+					showToolTipOnClick
+				>
+					<Icon type={CARBON_ICONS.INFORMATION} className="properties-control-description-icon-info" />
+				</Tooltip>);
+			}
+			label = (
+				<div className={classNames("properties-label-container")}>
+					<label className="properties-control-label">{this.props.panel.label}</label>
+					{tooltip}
+				</div>
+			);
+		}
 		return (
 			<div
 				className={classNames(
 					"properties-action-panel",
-					{ "hide": this.props.panelState === STATES.HIDDEN },
+					{ "hide": hidden },
 					{ "properties-control-nested-panel": this.props.panel.nestedPanel },
 					className
 				)}
 				data-id={ControlUtils.getDataId({ name: this.props.panel.id })}
-				disabled={this.props.panelState === STATES.DISABLED}
+				disabled={disabled}
 			>
+				{label}
 				{this.props.children}
 			</div>);
 	}

package/src/common-properties/panels/action-panel/action-panel.scss

@@ -18,6 +18,9 @@
 	display: flex;
 	flex-wrap: wrap;
 	padding-bottom: $spacing-03;
+	.properties-label-container {
+		width: 100%;
+	}
 	&:last-child {
 		padding-bottom: $spacing-06; // (24px + 16px outer padding)
 	}

package/src/common-properties/panels/text-panel/text-panel.jsx

@@ -19,24 +19,55 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { evaluateText } from "./../../util/property-utils.js";
 import classNames from "classnames";
-import { STATES } from "./../../constants/constants";
+import { STATES, CARBON_ICONS } from "./../../constants/constants";
+import { isEmpty } from "lodash";
+import Tooltip from "./../../../tooltip/tooltip.jsx";
+import Icon from "./../../../icons/icon.jsx";
 
 class TextPanel extends Component {
 	render() {
 		const className = this.props.panel.className ? this.props.panel.className : "";
-		const label = this.props.panel.label ? (<div className="panel-label">{this.props.panel.label}</div>) : null;
-		const description = this.props.panel.description
-			? (<div className="panel-description">{evaluateText(this.props.panel.description, this.props.controller)}</div>)
-			: null;
+		const hidden = this.props.panelState === STATES.HIDDEN;
+		const disabled = this.props.panelState === STATES.DISABLED;
+		let label = this.props.panel.label ? (<div className="panel-label">{this.props.panel.label}</div>) : null;
+		let description;
+		if (this.props.panel.description && !isEmpty(this.props.panel.description.text)) {
+			const dynamicDescriptionText = evaluateText(this.props.panel.description.text, this.props.controller);
+			if (this.props.panel.description.placement === "as_tooltip") {
+				// If tooltip has a link, add propertyId in the link object
+				if (this.props.panel.description.link) {
+					this.props.panel.description.link.propertyId = { name: this.props.panel.id };
+				}
+				const tooltip = (<Tooltip
+					id={`tooltip-label-${this.props.panel.id}`}
+					tip={dynamicDescriptionText}
+					link={this.props.panel.description.link ? this.props.panel.description.link : null}
+					tooltipLinkHandler={this.props.controller.getHandlers().tooltipLinkHandler}
+					direction="bottom"
+					disable={hidden || disabled}
+					showToolTipOnClick
+				>
+					<Icon type={CARBON_ICONS.INFORMATION} className="properties-control-description-icon-info" />
+				</Tooltip>);
+				label = (
+					<div className={classNames("properties-label-container")}>
+						{label}
+						{tooltip}
+					</div>
+				);
+			} else {
+				description = <div className="panel-description">{dynamicDescriptionText}</div>;
+			}
+		}
 		return (
 			<div
 				className={classNames(
 					"properties-text-panel",
-					{ "hide": this.props.panelState === STATES.HIDDEN },
+					{ "hide": hidden },
 					{ "properties-control-nested-panel": this.props.panel.nestedPanel },
 					className
 				)}
-				disabled={this.props.panelState === STATES.DISABLED}
+				disabled={disabled}
 			>
 				{label}
 				{description}

package/src/common-properties/panels/text-panel/text-panel.scss

@@ -15,9 +15,6 @@
  */
 
 .properties-text-panel {
-	:not(:empty) {
-		padding-bottom: $spacing-05;
-	}
 	.panel-label {
 		@include carbon--type-style("productive-heading-01");
 		color: $text-01;
@@ -26,6 +23,10 @@
 	.panel-description {
 		@include carbon--type-style("body-short-01");
 		color: $text-01;
+		padding-bottom: $spacing-05;
+	}
+	.tooltip-container {
+		margin-bottom: $spacing-03;
 	}
 	&[disabled] {
 		opacity: 0.5;

package/src/common-properties/properties-controller.js

@@ -1051,10 +1051,11 @@ export default class PropertiesController {
 	/*
 	* return the property value for the given 'inPropertyId'
 	* options - optional object of config options where
-	*   filterHiddenDisabled: true - filter out values from controls that are hidden or disabled
+	*   filterHiddenDisabled: true - filter out values from controls having state "hidden" or "disabled"
 	*   applyProperties: true - this function is called from PropertiesMain.applyPropertiesEditing()
-	*   filterHidden: true - filter out values from controls that are hidden
-	*   filterDisabled: true - filter out values from controls that are disabled
+	*   filterHidden: true - filter out values from controls having state "hidden"
+	*   filterDisabled: true - filter out values from controls having state "disabled"
+	*   filterHiddenControls: true - filter out values from controls having type "hidden"
 	*/
 	getPropertyValue(inPropertyId, options, defaultValue) {
 		const propertyId = this.convertPropertyId(inPropertyId);
@@ -1064,10 +1065,16 @@ export default class PropertiesController {
 		// don't return hidden/disabled values
 		const filterHidden = options && (options.filterHiddenDisabled || options.filterHidden);
 		const filterDisabled = options && (options.filterHiddenDisabled || options.filterDisabled);
-		if (filterHidden || filterDisabled) {
+		const filterHiddenControls = options && options.filterHiddenControls;
+		if (filterHidden || filterDisabled || filterHiddenControls) {
 			// top level value
 			const controlState = this.getControlState(propertyId);
-			if ((controlState === STATES.DISABLED && filterDisabled) || (controlState === STATES.HIDDEN && filterHidden)) {
+			const controlType = this.getControlType(propertyId);
+			if (
+				(controlState === STATES.DISABLED && filterDisabled) ||
+				(controlState === STATES.HIDDEN && filterHidden) ||
+				(controlType === ControlType.HIDDEN && filterHiddenControls)
+			) {
 				return filteredValue;
 			}
 			// copy array to modify it and clear out disabled/hidden values
@@ -1083,7 +1090,12 @@ export default class PropertiesController {
 								col: colIdx
 							};
 							const valueState = this.getControlState(colPropertyId);
-							if ((valueState === STATES.DISABLED && filterDisabled) || (valueState === STATES.HIDDEN && filterHidden)) {
+							const valueType = this.getControlType(colPropertyId);
+							if (
+								(valueState === STATES.DISABLED && filterDisabled) ||
+								(valueState === STATES.HIDDEN && filterHidden) ||
+								(valueType === ControlType.HIDDEN && filterHiddenControls)
+							) {
 								filteredValue[rowIdx][colIdx] = null;
 							}
 						}
@@ -1121,15 +1133,16 @@ export default class PropertiesController {
 	/*
 	* return the property values for all controls
 	* options - optional object of config options where
-	*   filterHiddenDisabled: true - filter out values from controls that are hidden or disabled
+	*   filterHiddenDisabled: true - filter out values from controls having state "hidden" or "disabled"
 	*   applyProperties: true - this function is called from PropertiesMain.applyPropertiesEditing()
-	*   filterHidden: true - filter out values from controls that are hidden
-	*   filterDisabled: true - filter out values from controls that are disabled
+	*   filterHidden: true - filter out values from controls having state "hidden"
+	*   filterDisabled: true - filter out values from controls having state "disabled"
+	*   filterHiddenControls: true - filter out values from controls having type "hidden"
 	*/
 	getPropertyValues(options) {
 		const propertyValues = this.propertiesStore.getPropertyValues();
 		let returnValues = propertyValues;
-		if (options && (options.filterHiddenDisabled || options.filterHidden || options.filterDisabled)) {
+		if (options && (options.filterHiddenDisabled || options.filterHidden || options.filterDisabled || options.filterHiddenControls)) {
 			const filteredValues = {};
 			for (const propKey in propertyValues) {
 				if (!has(propertyValues, propKey)) {
@@ -1346,7 +1359,8 @@ export default class PropertiesController {
 		// don't return hidden message
 		if (filterHiddenDisable) {
 			const controlState = this.getControlState(propertyId);
-			if (controlState === STATES.DISABLED || controlState === STATES.HIDDEN) {
+			const controlType = this.getControlType(propertyId);
+			if (controlState === STATES.DISABLED || controlState === STATES.HIDDEN || controlType === ControlType.HIDDEN) {
 				return null;
 			}
 		}
@@ -1444,7 +1458,8 @@ export default class PropertiesController {
 	_filterHiddenDisabledErrors(messages) {
 		const filterCondition = (testMessage, propertyId) => {
 			const controlState = this.getControlState(propertyId);
-			return controlState !== "hidden" && controlState !== "disabled";
+			const controlType = this.getControlType(propertyId);
+			return controlState !== STATES.HIDDEN && controlState !== STATES.DISABLED && controlType !== ControlType.HIDDEN;
 		};
 		const filteredMessages = this._filterErrors(messages, filterCondition);
 		return filteredMessages;
@@ -1632,6 +1647,9 @@ export default class PropertiesController {
 	}
 
 	getControlType(propertyId) {
+		if (typeof propertyId === "undefined") {
+			return null;
+		}
 		const control = this.getControl(propertyId);
 		if (control) {
 			return control.controlType;
@@ -1639,6 +1657,15 @@ export default class PropertiesController {
 		return null;
 	}
 
+	// check if given column is visible in the table
+	getColumnVisibility(propertyId, columnIndex) {
+		return this.controls[propertyId.name][columnIndex].visible;
+	}
+
+	toggleColumnVisibility(propertyId, columnIndex, value) {
+		this.controls[propertyId.name][columnIndex].visible = value;
+	}
+
 	/*
 	* Summary Panel controls Methods
 	*/

package/src/common-properties/ui-conditions/conditions-utils.js

@@ -423,7 +423,7 @@ function updatePanelChildrenStatesForPanelIds(panelIds, controller) {
 * @param {object} propertyId. required.
 * @param {string} proposed new state value. required.
 */
-function updateState(refState, propertyId, value) {
+function updateState(refState, propertyId, value, controller) {
 	let propState = refState[propertyId.name];
 	if (!propState) {
 		propState = {};
@@ -452,6 +452,12 @@ function updateState(refState, propertyId, value) {
 		} else {
 			// Table column level
 			propState[colId].value = newPropState.value;
+			// if all cells are "hidden", hide an entire column
+			const hideColumn = (value === "hidden");
+			const updateColumnVisibility = controller.getColumnVisibility(propertyId, propertyId.col) !== !hideColumn;
+			if (typeof controller !== "undefined" && updateColumnVisibility) {
+				controller.toggleColumnVisibility(propertyId, propertyId.col, !hideColumn);
+			}
 		}
 	} else {
 		// Control level
@@ -841,10 +847,10 @@ function _updateRefsState(stateOn, definition, propertyId, newStates, controller
 			}
 		} else if (stateOn === true) { // control|panel should be visible || enabled
 			if (referenceId && currentState !== newOnState && currentState !== notAllowedState) {
-				updateState(refStates, referenceId, newOnState);
+				updateState(refStates, referenceId, newOnState, controller);
 			}
 		} else if (referenceId && (visibleControl || (!visibleControl && currentState !== notAllowedState))) {
-			_updateStateIfPanel(newStates, referenceId, newOffState, refStates);
+			_updateStateIfPanel(newStates, referenceId, newOffState, refStates, controller);
 		}
 	}
 }
@@ -975,7 +981,7 @@ function _updateStateIfParent(newStates, panel, state, controller, referenceId)
 }
 
 // A control can only set a state to enabled if it was previously disabled. The same applies to hidden and visible
-function _updateStateIfPanel(newStates, referenceId, state, refStates) {
+function _updateStateIfPanel(newStates, referenceId, state, refStates, controller) {
 	const controlName = referenceId.name;
 	if (refStates[controlName]) {
 		let prevValue = refStates[controlName].value;
@@ -985,10 +991,10 @@ function _updateStateIfPanel(newStates, referenceId, state, refStates) {
 				if (typeof referenceId.row !== "undefined" && refStates[controlName][referenceId.col][referenceId.row]) {
 					prevValue = refStates[controlName][referenceId.col][referenceId.row].value;
 				} else { // first time setting control state for each row in the column
-					updateState(refStates, referenceId, state);
+					updateState(refStates, referenceId, state, controller);
 				}
 			} else { // first time setting control state for the column
-				updateState(refStates, referenceId, state);
+				updateState(refStates, referenceId, state, controller);
 			}
 		}
 		// Can only set a state to enabled if it was previously disabled. The same applies to hidden and visible
@@ -996,10 +1002,10 @@ function _updateStateIfPanel(newStates, referenceId, state, refStates) {
 				(prevValue === STATES.DISABLED && state === STATES.ENABLED) ||
 				(prevValue === STATES.DISABLED && state === STATES.HIDDEN) ||
 				(prevValue === STATES.HIDDEN && state === STATES.VISIBLE)) {
-			updateState(refStates, referenceId, state);
+			updateState(refStates, referenceId, state, controller);
 		}
 	} else { // first time setting control state
-		updateState(refStates, referenceId, state);
+		updateState(refStates, referenceId, state, controller);
 	}
 }
 

package/src/common-properties/util/L10nProvider.js

@@ -77,6 +77,12 @@ export class L10nProvider {
 		const lookupKey = baseKey + "." + value + ".label";
 		return this.l10n(lookupKey, value);
 	}
+
+	l10nValueDesc(baseKey, value) {
+		const lookupKey = baseKey + "." + value + ".desc";
+		const desc = this.l10n(lookupKey, value);
+		return (desc !== value ? desc : null);
+	}
 }
 
 export class ResourceDef {