#2731 React 19

canvas_modules/common-canvas/__tests__/common-properties/common-properties-test.js

@@ -140,8 +140,7 @@ describe("CommonProperties renders correctly", () => {
 		return <CommonProperties {...props} />;
 	};
 
-	// disable until upgrade to React 19
-	it.skip("all required props should have been defined", () => {
+	it("all required props should have been defined", () => {
 		const propertiesConfig = { containerType: "Editing" };
 		render(
 			<IntlProvider key="IntlProvider2" locale={locale} messages={{}}>

canvas_modules/common-canvas/__tests__/common-properties/components/fieldpicker-test.js

@@ -416,7 +416,7 @@ describe("field-picker-control renders correctly", () => {
 		const { container } = wrapper;
 
 		const searchContainer = container.querySelector("div.properties-ft-search-container");
-		const input = searchContainer.querySelector("input[type='text']");
+		const input = searchContainer.querySelector("input");
 		fireEvent.change(input, { target: { value: "Time" } });
 		expect(tableUtilsRTL.getTableRows(container)).to.have.length(2);
 		// test case insensitive
@@ -563,7 +563,7 @@ describe("field-picker-control with multi input schemas renders correctly", () =
 		expect(tableRows.length).to.equal(30);
 
 		const searchContainer = fieldpicker.querySelector("div.properties-ft-search-container");
-		const input = searchContainer.querySelector("input[type='text']");
+		const input = searchContainer.querySelector("input");
 		fireEvent.change(input, { target: { value: "Time" } });
 
 		fieldpicker = container.querySelector("div.properties-fp-table");
@@ -617,7 +617,7 @@ describe("field-picker-control with multi input schemas renders correctly", () =
 		const { container } = wrapper;
 		let fieldpicker = tableUtilsRTL.openFieldPicker(container, "properties-ft-structuretableMultiInputSchema");
 		const searchContainer = fieldpicker.querySelector("div.properties-ft-search-container");
-		const input = searchContainer.querySelector("input[type='text']");
+		const input = searchContainer.querySelector("input");
 		fireEvent.change(input, { target: { value: "time" } });
 
 		clickFilter(wrapper, "time");
@@ -743,7 +743,7 @@ describe("field-picker-control with multi input schemas renders correctly", () =
 	it("should be able to select the same field name from different schemas", () => {
 		const { container } = wrapper;
 		let fieldpicker = tableUtilsRTL.openFieldPicker(container, "properties-ft-structuretableMultiInputSchema");
-		const search = fieldpicker.querySelector("div.properties-ft-search-container").querySelector("input[type='text']");
+		const search = fieldpicker.querySelector("div.properties-ft-search-container").querySelector("input");
 		fireEvent.change(search, { target: { value: "age" } });
 		fieldpicker = tableUtilsRTL.openFieldPicker(container, "properties-ft-structuretableMultiInputSchema");
 

canvas_modules/common-canvas/__tests__/common-properties/controls/multiselect-test.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2023 Elyra Authors
+ * Copyright 2017-2025 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -25,6 +25,7 @@ import Controller from "../../../src/common-properties/properties-controller";
 
 import multiselectParamDef from "../../test_resources/paramDefs/multiselect_paramDef.json";
 import { fireEvent, waitFor, cleanup } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 const mockMultiselect = jest.fn();
 jest.mock("../../../src/common-properties/controls/multiselect",
@@ -38,6 +39,8 @@ mockMultiselect.mockImplementation((props) => {
 	return <MultiselectComp {...props} />;
 });
 
+const user = userEvent.setup({ delay: null });
+
 describe("multiselect renders correctly", () => {
 
 	const propertyName = "test-multiselect";
@@ -114,7 +117,7 @@ describe("multiselect renders correctly", () => {
 		expect(multiselectWrapper.querySelector("button > span").textContent).to.equal(emptyValueIndicator);
 	});
 
-	it("multiselect handles null correctly", () => {
+	it("multiselect handles null correctly", async() => {
 		controller.setPropertyValues(
 			{ propertyName: null }
 		);
@@ -136,12 +139,12 @@ describe("multiselect renders correctly", () => {
 		multiselectWrapper = container.querySelector("div[data-id='properties-test-multiselect']");
 		const multiselectList = multiselectWrapper.querySelectorAll("li.cds--list-box__menu-item");
 		expect(multiselectList).to.be.length(4);
-		fireEvent.click(multiselectList[0]);
+		await user.click(multiselectList[0]);
 		const expectedValue = [multiselectList[0].textContent];
 		expect(controller.getPropertyValue(propertyId)).to.eql(expectedValue);
 	});
 
-	it("multiselect handles undefined correctly", () => {
+	it("multiselect handles undefined correctly", async() => {
 		controller.setPropertyValues(
 			{ }
 		);
@@ -163,7 +166,7 @@ describe("multiselect renders correctly", () => {
 		multiselectWrapper = container.querySelector("div[data-id='properties-test-multiselect']");
 		const multiselectList = multiselectWrapper.querySelectorAll("li.cds--list-box__menu-item");
 		expect(multiselectList).to.be.length(4);
-		fireEvent.click(multiselectList[0]);
+		await user.click(multiselectList[0]);
 		const expectedValue = [multiselectList[0].textContent];
 		expect(controller.getPropertyValue(propertyId)).to.eql(expectedValue);
 	});
@@ -288,7 +291,7 @@ describe("multiselect paramDef works correctly", () => {
 		cleanup();
 	});
 
-	it("multiselect placeholder custom label rendered correctly", () => {
+	it("multiselect placeholder custom label rendered correctly", async() => {
 		const { container } = wrapper;
 		let multiselectWrapper = container.querySelector("div[data-id='properties-multiselect_custom_labels']");
 		const expectedEmptyLabel = multiselectParamDef.resources["multiselect_custom_labels.multiselect.dropdown.empty.label"];
@@ -301,7 +304,7 @@ describe("multiselect paramDef works correctly", () => {
 		multiselectWrapper = container.querySelector("div[data-id='properties-multiselect_custom_labels']");
 		const multiselectList = multiselectWrapper.querySelectorAll("li.cds--list-box__menu-item");
 		expect(multiselectList).to.have.length(6);
-		fireEvent.click(multiselectList[0]);
+		await user.click(multiselectList[0]);
 		const expectedValue = [multiselectList[0].textContent];
 		expect(renderedController.getPropertyValue(propertyId)).to.eql(expectedValue);
 
@@ -363,7 +366,7 @@ describe("multiselect paramDef works correctly", () => {
 		expect(JSON.stringify(renderedController.getPropertyValue(propertyId02))).to.equal(JSON.stringify(expectedSubPanelValue));
 	});
 
-	it("multiselect renders correctly in a table - onpanel", () => {
+	it("multiselect renders correctly in a table - onpanel", async() => {
 		const { container } = wrapper;
 		const propertyId11 = { name: "multiselect_table", row: 1, col: 1 };
 		propertyUtilsRTL.openSummaryPanel(wrapper, "multiselect-table-panel");
@@ -384,7 +387,7 @@ describe("multiselect paramDef works correctly", () => {
 		const multiselectList = table.querySelectorAll("li.cds--list-box__menu-item");
 		expect(multiselectList).to.have.length(4);
 
-		fireEvent.click(multiselectList[0]);
+		await user.click(multiselectList[0]);
 		const expectedValue = [multiselectList[0].textContent];
 		expect(renderedController.getPropertyValue(propertyId11)).to.eql(expectedValue);
 	});

canvas_modules/common-canvas/__tests__/common-properties/panels/tearsheet-test.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2023 Elyra Authors
+ * Copyright 2017-2025 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -58,7 +58,7 @@ describe("tearsheet tests", () => {
 		await waitFor(() => {
 			const buttonModalClose = document.querySelector("div.properties-tearsheet-panel");
 			expect(buttonModalClose).to.not.be.null;
-			expect(buttonModalClose.classList.contains("is-visible")).to.be.false;
+			expect(document.querySelectorAll("div.properties-tearsheet-panel.is-visible")).to.have.length(1);
 
 			const closeButton = document.querySelector("button.cds--modal-close");
 			expect(closeButton).to.not.be.null;

canvas_modules/common-canvas/package.json

@@ -45,76 +45,78 @@
     "@tanstack/react-virtual": "^3.13.8",
     "d3": "7.9.0",
     "dagre": "^0.8.5",
-    "date-fns": "^2.28.0",
-    "immutable": "^4.0.0",
+    "date-fns": "^4.1.0",
+    "immutable": "^5.1.3",
     "jsonschema": "^1.4.0",
     "lodash": "^4.17.21",
-    "markdown-it": "^13.0.1",
+    "markdown-it": "^14.1.0",
     "prop-types": "^15.7.2",
-    "react-draggable": "^4.4.4",
+    "react-draggable": "^4.5.0",
     "react-inlinesvg": "^4.1.3",
     "react-portal": "^4.2.1",
-    "react-redux": "^8.1.3",
+    "react-redux": "^9.2.0",
     "react-virtualized": "9.22.6",
     "redux": "^5.0.1",
     "seedrandom": "^3.0.5",
-    "uuid": "^8.3.0"
+    "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@babel/core": "7.25.2",
+    "@babel/core": "7.28.4",
     "@babel/plugin-proposal-class-properties": "7.18.6",
-    "@babel/plugin-proposal-export-default-from": "7.24.7",
-    "@babel/plugin-transform-runtime": "7.24.7",
-    "@babel/preset-env": "7.25.3",
-    "@babel/preset-react": "7.24.7",
-    "@carbon/react": "1.84.0",
-    "@rollup/plugin-babel": "5.3.0",
-    "@rollup/plugin-commonjs": "21.0.1",
-    "@rollup/plugin-json": "4.1.0",
-    "@rollup/plugin-node-resolve": "13.0.6",
-    "@rollup/plugin-url": "6.1.0",
-    "@testing-library/jest-dom": "5.17.0",
-    "@testing-library/react": "14.2.2",
+    "@babel/plugin-proposal-export-default-from": "7.27.1",
+    "@babel/plugin-transform-runtime": "7.28.3",
+    "@babel/preset-env": "7.28.3",
+    "@babel/preset-react": "7.27.1",
+    "@carbon/react": "1.92.1",
+    "@rollup/plugin-babel": "6.0.4",
+    "@rollup/plugin-commonjs": "28.0.6",
+    "@rollup/plugin-json": "6.1.0",
+    "@rollup/plugin-node-resolve": "16.0.2",
+    "@rollup/plugin-terser": "0.4.4",
+    "@rollup/plugin-url": "8.0.2",
+    "@testing-library/dom": "10.4.1",
+    "@testing-library/jest-dom": "6.9.1",
+    "@testing-library/react": "16.3.0",
+    "@testing-library/user-event": "14.6.1",
     "autoprefixer": "9.8.8",
-    "babel-jest": "26.3.0",
+    "babel-jest": "30.2.0",
     "babel-plugin-lodash": "3.3.4",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
-    "chai": "4.2.0",
+    "chai": "6.2.0",
     "classnames": "2.5.1",
     "deep-freeze": "0.0.1",
     "eslint": "^7.32.0",
     "eslint-config-canvas": "file:../eslint-config-canvas",
-    "eslint-plugin-import": "2.25.3",
+    "eslint-plugin-import": "2.32.0",
     "eslint-plugin-react": "7.21.2",
-    "grunt": "1.5.3",
-    "grunt-contrib-clean": "2.0.0",
+    "grunt": "1.6.1",
+    "grunt-contrib-clean": "2.0.1",
     "grunt-contrib-sass": "2.0.0",
     "grunt-env": "1.0.1",
     "grunt-eslint": "23.0.0",
     "grunt-jsonlint": "2.1.3",
     "grunt-postcss": "0.9.0",
     "grunt-yamllint": "0.3.0",
-    "jest": "29.7.0",
-    "jest-environment-jsdom": "29.7.0",
+    "jest": "30.2.0",
+    "jest-environment-jsdom": "30.2.0",
     "jest-fetch-mock": "3.0.3",
-    "jest-fixed-jsdom": "0.0.9",
-    "jest-localstorage-mock": "2.4.3",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-intl": "6.6.2",
-    "react-is": "18.3.1",
-    "react-test-renderer": "18.3.1",
+    "jest-fixed-jsdom": "0.0.10",
+    "jest-localstorage-mock": "2.4.26",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "react-intl": "7.1.13",
+    "react-is": "19.2.0",
+    "react-test-renderer": "19.2.0",
     "reactable": "1.1.0",
-    "rollup": "2.79.2",
+    "rollup": "4.52.4",
     "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",
+    "rollup-plugin-scss": "4.0.1",
+    "rollup-plugin-visualizer": "6.0.4",
     "sass": "1.71.1",
-    "sinon": "9.0.3",
+    "sinon": "21.0.0",
     "stylelint": "13.13.1",
-    "tsd": "^0.31.2",
-    "url": "0.11.3"
+    "tsd": "^0.33.0",
+    "url": "0.11.4"
   },
   "peerDependencies": {
     "@carbon/react": "^1.51.0",

canvas_modules/common-canvas/rollup.config.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2023 Elyra Authors
+ * Copyright 2017-2025 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -20,7 +20,7 @@ import commonjs from "@rollup/plugin-commonjs";
 import json from "@rollup/plugin-json";
 import resolve from "@rollup/plugin-node-resolve";
 import scss from "rollup-plugin-scss";
-import { terser } from "rollup-plugin-terser";
+import terser from "@rollup/plugin-terser";
 import url from "@rollup/plugin-url";
 import { visualizer } from "rollup-plugin-visualizer";
 

canvas_modules/common-canvas/src/common-properties/controls/datepicker-range/datepicker-range.jsx

@@ -1,5 +1,5 @@
 /*
- * Copyright 2023 Elyra Authors
+ * Copyright 2023-2025 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -140,6 +140,7 @@ class DatepickerRangeControl extends React.Component {
 		return (
 			<div className={className} data-id={ControlUtils.getDataId(this.props.propertyId)}>
 				<DatePicker
+					{...validationProps}
 					datePickerType={DATEPICKER_TYPE.RANGE}
 					dateFormat={this.dateFormat}
 					onChange={this.handleDateRangeChange.bind(this)}

canvas_modules/common-canvas/src/common-properties/controls/datepicker/datepicker.jsx

@@ -1,5 +1,5 @@
 /*
- * Copyright 2023 Elyra Authors
+ * Copyright 2023-2025 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -76,6 +76,7 @@ class DatepickerControl extends React.Component {
 		return (
 			<div className={className} data-id={ControlUtils.getDataId(this.props.propertyId)}>
 				<DatePicker
+					{...validationProps}
 					className="properties-datepicker-wrapper-parent"
 					datePickerType={DATEPICKER_TYPE.SINGLE}
 					dateFormat={this.dateFormat}

canvas_modules/common-canvas/src/palette/palette-dialog-content.jsx

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2023 Elyra Authors
+ * Copyright 2017-2025 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -99,7 +99,7 @@ class PaletteDialogContent extends React.Component {
 					allowClickToAdd={this.props.allowClickToAdd}
 				/>);
 		return (
-			<div className="palette-dialog-content" ref="palettecontent">
+			<div className="palette-dialog-content">
 				<PaletteDialogContentCategories categories={cats}
 					selectedCategory={this.state.selectedCategory}
 					categorySelectedMethod={this.categorySelected}