@elyra/canvas 12.44.0 → 13.0.0-alpha.0

package/locales/common-properties/locales/en.json

@@ -106,5 +106,8 @@
   "virtualizedTable.row.checkbox.label": "Select row {row_index} from {table_label}",
   "properties.empty.table.text": "To begin, click \"{button_label}\"",
   "label.indicator.required": "(required)",
-  "label.indicator.optional": "(optional)"
+  "label.indicator.optional": "(optional)",
+  "slider.numberInput.label": "Slider number input",
+  "editorForm.tabList.label": "Primary Tabs",
+  "subTabs.tabList.label": "Tab List"
 }

package/locales/common-properties/locales/eo.json

@@ -105,5 +105,8 @@
   "virtualizedTable.row.checkbox.label": "[Esperanto~Select row {row_index} from {table_label}~~~~~~~~~~eo]",
   "properties.empty.table.text": "[Esperanto~To begin, click \"{button_label}\"~~~~~eo]",
   "label.indicator.required": "[Esperanto~(required)~~~~~~eo]",
-  "label.indicator.optional": "[Esperanto~(optional)~~~~~~eo]"
+  "label.indicator.optional": "[Esperanto~(optional)~~~~~~eo]",
+  "slider.numberInput.label": "[Esperanto~Slider number input~~~~~eo]",
+  "editorForm.tabList.label": "[Esperanto~Primary Tabs~~~~eo]",
+  "subTabs.tabList.label": "[Esperanto~Tab List~~~~eo]"
 }

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@elyra/canvas",
-  "version": "12.44.0",
+  "version": "13.0.0-alpha.0",
   "description": "Elyra common-canvas",
   "main": "dist/common-canvas.js",
   "module": "dist/common-canvas.es.js",
-  "homepage": "https://github.com/elyra-ai/canvas",
+  "homepage": "https://elyra-ai.github.io/canvas/",
   "repository": {
     "type": "git",
     "url": "https://github.com/elyra-ai/canvas/tree/main/canvas_modules/common-canvas"
@@ -43,11 +43,11 @@
     "markdown-it": "^13.0.1",
     "prop-types": "^15.7.2",
     "react-draggable": "^4.4.4",
-    "react-inlinesvg": "^2.1.0",
+    "react-inlinesvg": "^4.1.3",
     "react-portal": "^4.2.1",
     "react-resize-detector": "^9.1.0",
     "react-virtualized": "^9.22.2",
-    "redux": "^4.0.5",
+    "redux": "^5.0.1",
     "seedrandom": "^3.0.5",
     "uuid": "^8.3.0"
   },
@@ -58,8 +58,7 @@
     "@babel/plugin-transform-runtime": "7.11.5",
     "@babel/preset-env": "7.11.5",
     "@babel/preset-react": "7.10.4",
-    "@carbon/icons-react": "10.44.0",
-    "@carbon/themes": "10.48.0",
+    "@carbon/react": "^1.52.0",
     "@rollup/plugin-babel": "5.3.0",
     "@rollup/plugin-commonjs": "21.0.1",
     "@rollup/plugin-json": "4.1.0",
@@ -69,14 +68,10 @@
     "babel-jest": "26.3.0",
     "babel-plugin-lodash": "3.3.4",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
-    "carbon-components": "10.50.0",
-    "carbon-components-react": "7.50.0",
-    "carbon-icons": "7.0.7",
     "chai": "4.2.0",
-    "chai-enzyme": "1.0.0-beta.1",
+    "classnames": "2.5.1",
     "deep-freeze": "0.0.1",
     "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.5",
     "eslint": "^7.32.0",
     "eslint-config-canvas": "file:../eslint-config-canvas",
     "eslint-plugin-import": "2.25.3",
@@ -92,29 +87,27 @@
     "jest": "26.4.2",
     "jest-fetch-mock": "3.0.3",
     "jest-localstorage-mock": "2.4.3",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
-    "react-intl": "5.8.2",
-    "react-redux": "7.2.1",
-    "react-test-renderer": "16.13.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-intl": "6.6.2",
+    "react-redux": "7.2.8",
+    "react-test-renderer": "18.2.0",
     "reactable": "1.1.0",
     "rollup": "2.60.1",
     "rollup-plugin-auto-external": "2.0.0",
     "rollup-plugin-scss": "3.0.0",
     "rollup-plugin-terser": "7.0.2",
     "rollup-plugin-visualizer": "5.5.2",
-    "sass": "1.43.5",
+    "sass": "1.71.1",
     "sinon": "9.0.3",
-    "stylelint": "13.13.1"
+    "stylelint": "13.13.1",
+    "url": "0.11.3"
   },
   "peerDependencies": {
-    "@carbon/icons-react": "^10.44.0",
-    "carbon-components": "^10.50.0",
-    "carbon-components-react": "^7.50.0",
-    "carbon-icons": "^7.0.7",
+    "@carbon/react": "^1.51.0",
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0",
-    "react-intl": "^5.0.0",
+    "react-intl": "^5.0.0 || ^6.0.0",
     "react-redux": "^7.0.0"
   },
   "jest": {

package/src/carbon.scss

@@ -0,0 +1,22 @@
+/*
+ * 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.
+ */
+
+@forward "@carbon/react/scss/colors";
+@forward "@carbon/react/scss/type";
+@forward "@carbon/react/scss/spacing";
+@forward "@carbon/react/scss/theme";
+@forward "@carbon/react/scss/motion";
+@forward "@carbon/react/scss/components/button/tokens";

package/src/color-picker/color-picker.scss

@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-@import "carbon-components/scss/globals/scss/_vars";
-
 .color-picker {
 	width: 156px;
 	height: 55px;
@@ -28,7 +26,7 @@
 		margin: 5px 0 0 5px;
 		cursor: pointer;
 		&.white-0 {
-			background-color: $ui-01; // In dark-mode, white-0 will be interpreted as black.
+			background-color: $layer-01; // In dark-mode, white-0 will be interpreted as black.
 			border: 1px solid $gray-50;
 		}
 		&.yellow-20 { background-color: $yellow-20; }

package/src/common-canvas/cc-contents.jsx

@@ -27,8 +27,8 @@ import CommonCanvasContextToolbar from "./cc-context-toolbar.jsx";
 import CommonCanvasTextToolbar from "./cc-text-toolbar.jsx";
 import CommonCanvasStateTag from "./cc-state-tag.jsx";
 import CanvasUtils from "./common-canvas-utils.js";
-import { Button } from "carbon-components-react";
-import { FlowData16, ArrowLeft16 } from "@carbon/icons-react";
+import { Button } from "@carbon/react";
+import { FlowData, ArrowLeft } from "@carbon/react/icons";
 import { DND_DATA_TEXT, STATE_TAG_LOCKED, STATE_TAG_READ_ONLY } from "./constants/canvas-constants";
 import Logger from "../logging/canvas-logger.js";
 import SVGCanvasD3 from "./svg-canvas-d3.js";
@@ -336,7 +336,7 @@ class CanvasContents extends React.Component {
 			} else {
 				emptyCanvas = (
 					<div className="empty-canvas">
-						<div className="empty-canvas-image"><FlowData16 /></div>
+						<div className="empty-canvas-image"><FlowData /></div>
 						<span className="empty-canvas-text1">{this.getLabel("canvas.flowIsEmpty")}</span>
 						<span className="empty-canvas-text2">{this.getLabel("canvas.addNodeToStart")}</span>
 					</div>);
@@ -359,7 +359,7 @@ class CanvasContents extends React.Component {
 						size={"md"}
 					>
 						<div className={"return-to-previous-content"}>
-							<ArrowLeft16 />
+							<ArrowLeft />
 							<span>{label}</span>
 						</div>
 					</Button>

package/src/common-canvas/cc-state-tag.jsx

@@ -19,7 +19,7 @@ import PropTypes from "prop-types";
 import Logger from "../logging/canvas-logger.js";
 import defaultMessages from "../../locales/common-canvas/locales/en.json";
 import { injectIntl } from "react-intl";
-import { Locked16, EditOff16 } from "@carbon/icons-react";
+import { Locked, EditOff } from "@carbon/react/icons";
 import { STATE_TAG_LOCKED, STATE_TAG_READ_ONLY, TIP_TYPE_STATE_TAG }
 	from "../common-canvas/constants/canvas-constants.js";
 
@@ -78,11 +78,11 @@ class CommonCanvasStateTag extends React.Component {
 
 		if (this.props.stateTagType === STATE_TAG_LOCKED) {
 			const label = this.getLabel("canvas.stateTagLocked");
-			stateTag = this.getStateTag(label, (<Locked16 />));
+			stateTag = this.getStateTag(label, (<Locked />));
 
 		} else if (this.props.stateTagType === STATE_TAG_READ_ONLY) {
 			const label = this.getLabel("canvas.stateTagReadOnly");
-			stateTag = this.getStateTag(label, (<EditOff16 />));
+			stateTag = this.getStateTag(label, (<EditOff />));
 		}
 
 		return stateTag;

package/src/common-canvas/cc-text-toolbar.jsx

@@ -23,8 +23,8 @@ import defaultToolbarMessages from "../../locales/toolbar/locales/en.json";
 import Toolbar from "../toolbar/toolbar.jsx";
 import CanvasUtils from "../common-canvas/common-canvas-utils.js";
 import Logger from "../logging/canvas-logger.js";
-import { Code32, Link32, ListBulleted32, ListNumbered32, TextIndentMore32,
-	TextBold32, TextItalic32, TextScale32, TextStrikethrough32 } from "@carbon/icons-react";
+import { Code, Link, ListBulleted, ListNumbered, TextIndentMore,
+	TextBold, TextItalic, TextScale, TextStrikethrough } from "@carbon/react/icons";
 
 class CommonCanvasTextToolbar extends React.Component {
 	constructor(props) {
@@ -70,20 +70,20 @@ class CommonCanvasTextToolbar extends React.Component {
 
 		return {
 			leftBar: [
-				{ action: "headerStyle", tooltip: headerLabel, enable: true, subMenu: headerOptions, closeSubAreaOnClick: true, iconEnabled: (<TextScale32 />) },
+				{ action: "headerStyle", tooltip: headerLabel, enable: true, subMenu: headerOptions, closeSubAreaOnClick: true, iconEnabled: (<TextScale size={32} />) },
 				{ divider: true },
-				{ action: "bold", label: boldLabel, enable: true, iconEnabled: (<TextBold32 />) },
-				{ action: "italics", label: italicsLabel, enable: true, iconEnabled: (<TextItalic32 />) },
-				{ action: "strikethrough", label: strikethroughLabel, enable: true, iconEnabled: (<TextStrikethrough32 />) },
+				{ action: "bold", label: boldLabel, enable: true, iconEnabled: (<TextBold size={32} />) },
+				{ action: "italics", label: italicsLabel, enable: true, iconEnabled: (<TextItalic size={32} />) },
+				{ action: "strikethrough", label: strikethroughLabel, enable: true, iconEnabled: (<TextStrikethrough size={32} />) },
 				{ divider: true },
-				{ action: "code", label: codeLabel, enable: true, iconEnabled: (<Code32 />) },
+				{ action: "code", label: codeLabel, enable: true, iconEnabled: (<Code size={32} />) },
 				{ divider: true },
-				{ action: "link", label: linkLabel, enable: true, iconEnabled: (<Link32 />) },
+				{ action: "link", label: linkLabel, enable: true, iconEnabled: (<Link size={32} />) },
 				{ divider: true },
-				{ action: "quote", label: quoteLabel, enable: true, iconEnabled: (<TextIndentMore32 />) },
+				{ action: "quote", label: quoteLabel, enable: true, iconEnabled: (<TextIndentMore size={32} />) },
 				{ divider: true },
-				{ action: "numberedList", label: numberedListLabel, enable: true, iconEnabled: (<ListNumbered32 />) },
-				{ action: "bulletedList", label: bulletedListLabel, enable: true, iconEnabled: (<ListBulleted32 />) }
+				{ action: "numberedList", label: numberedListLabel, enable: true, iconEnabled: (<ListNumbered size={32} />) },
+				{ action: "bulletedList", label: bulletedListLabel, enable: true, iconEnabled: (<ListBulleted size={32} />) }
 			]
 		};
 	}

package/src/common-canvas/common-canvas.scss

@@ -14,10 +14,9 @@
  * limitations under the License.
  */
 
-@import "carbon-components/scss/globals/scss/_vars";
 $toolbar-button-height: 41px; // Allow one extra pixel for the toolbar border
 $panel-border-width: 1px;
-$panel-border-color: $ui-03;
+$panel-border-color: $border-subtle-01;
 
 /* Default layout for common-canvas components where the canvas appears below
  * the toolbar and right-side flyout appears to the right of the toolbar and
@@ -63,7 +62,7 @@ $panel-border-color: $ui-03;
 	height: 100%;
 	position: relative;
 	user-select: none; /* Prevent elements from being selectable */
-	background-color: $ui-01;
+	background-color: $layer-01;
 }
 
 .bottom-panel {
@@ -80,15 +79,15 @@ $panel-border-color: $ui-03;
 	cursor: row-resize;
 	flex: 0 0 2px;
 	border-top-width: 1px;
-	background: $ui-01;
+	background: $layer-01;
 	transition: all 0.2s ease-in;
 	&:hover {
-		background: $interactive-03;
+		background: $button-tertiary;
 	}
 }
 
 .bottom-panel-contents {
-	background-color: $ui-01;
+	background-color: $layer-01;
 	width: 100%;
 	user-select: none;
 	height: 100%;
@@ -101,13 +100,13 @@ $panel-border-color: $ui-03;
 }
 
 .common-canvas-toolbar {
-	border-bottom: $toolbar-divider-width solid $ui-04;
+	border-bottom: $toolbar-divider-width solid $border-strong-01;
 }
 
 .text-toolbar {
 	.toolbar-div {
 		animation: raise-toolbar 0.3s linear;
-		border: 1px solid $ui-04;
+		border: 1px solid $border-strong-01;
 	}
 }
 
@@ -119,7 +118,7 @@ $panel-border-color: $ui-03;
 	.toolbar-overflow-item {
 		button:focus {
 			border-color: transparent;
-			box-shadow: inset 2px 2px $interactive-03, inset -6px -2px $interactive-03;
+			box-shadow: inset 2px 2px $button-tertiary, inset -6px -2px $button-tertiary;
 		}
 		// Set padding so overflow icon appears in the center (horizontally). This
 		// offsets the 5px which are set in the code to make the overflow icon
@@ -212,7 +211,7 @@ $panel-border-color: $ui-03;
 }
 
 .empty-canvas-image {
-	color: $text-03; // Picked up by fill attribute in the icon.
+	color: $text-placeholder; // Picked up by fill attribute in the icon.
 	opacity: 0.75;
 	display: block;
 	text-align: center;
@@ -223,17 +222,17 @@ $panel-border-color: $ui-03;
 }
 
 .empty-canvas-text1 {
-	@include carbon--type-style("productive-heading-03");
+	@include type-style("productive-heading-03");
 	padding-top: $spacing-02;
-	color: $text-02;
+	color: $text-secondary;
 	display: block;
 	text-align: center;
 }
 
 .empty-canvas-text2 {
-	@include carbon--type-style("body-short-02");
+	@include type-style("body-short-02");
 	padding-top: $spacing-03;
-	color: $text-02;
+	color: $text-secondary;
 	display: block;
 	text-align: center;
 }
@@ -244,15 +243,15 @@ $panel-border-color: $ui-03;
 	position: absolute;
 	left: 15px;
 	top: 15px;
-	background-color: $ui-background;
+	background-color: $background;
 	& button {
-		background-color: $ui-background;
+		background-color: $background;
 		padding-right: 20px;
 	}
 	& button:hover,
 	& button:focus {
-		background-color: $ui-03;
-		color: $interactive-03;
+		background-color: $layer-accent-01;
+		color: $button-primary;
 	}
 	& .return-to-previous-content {
 		display: flex;
@@ -280,7 +279,7 @@ $panel-border-color: $ui-03;
 	cursor: default;
 	transform: translate(-50%, -50%);
 	pointer-events: all;
-	background-color: $ui-background;
+	background-color: $background;
 	opacity: 0.75;
 }
 
@@ -290,29 +289,29 @@ $panel-border-color: $ui-03;
 	left: 30px;
 	right: 30px;
 	bottom: 30px;
-	border-color: $ui-04;
+	border-color: $border-strong-01;
 	border-style: dashed;
 	border-width: 2px;
 }
 
 .toolbar-item.notificationCounterIcon {
 	&.error .toolbar-icon .dot {
-		fill: $support-01;
+		fill: $support-error;
 	}
 	&.warning .toolbar-icon .dot {
-		fill: $support-03;
+		fill: $support-warning;
 	}
 	&.success .toolbar-icon .dot {
-		fill: $support-02;
+		fill: $support-success;
 	}
 	&.info .toolbar-icon .dot {
-		fill: $support-04;
+		fill: $support-info;
 	}
 }
 
 .state-tag {
-	@include carbon--type-style("productive-heading-01");
-	color: $inverse-01;
+	@include type-style("productive-heading-01");
+	color: $text-inverse;
 	background-color: $background-inverse;
 	width: fit-content;
 	height: 40px;
@@ -325,7 +324,7 @@ $panel-border-color: $ui-03;
 	user-select: none; /* Prevent elements from being selectable */
 
 	svg {
-		color: $inverse-01;
+		color: $text-inverse;
 		position: relative;
 		top: 3px;
 		margin-left: 14px;