diff --git a/canvas_modules/common-canvas/__tests__/common-properties/common-properties-test.js b/canvas_modules/common-canvas/__tests__/common-properties/common-properties-test.js
index 987385ffdc..fe053f89f7 100644
--- a/canvas_modules/common-canvas/__tests__/common-properties/common-properties-test.js
+++ b/canvas_modules/common-canvas/__tests__/common-properties/common-properties-test.js
@@ -140,8 +140,7 @@ describe("CommonProperties renders correctly", () => {
return ;
};
- // 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(
diff --git a/canvas_modules/common-canvas/__tests__/common-properties/components/fieldpicker-test.js b/canvas_modules/common-canvas/__tests__/common-properties/components/fieldpicker-test.js
index b3f1fc7ead..fbcccb6835 100644
--- a/canvas_modules/common-canvas/__tests__/common-properties/components/fieldpicker-test.js
+++ b/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");
diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/multiselect-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/multiselect-test.js
index 2b29a33cd5..f4b2c6c827 100644
--- a/canvas_modules/common-canvas/__tests__/common-properties/controls/multiselect-test.js
+++ b/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 ;
});
+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);
});
diff --git a/canvas_modules/common-canvas/__tests__/common-properties/panels/tearsheet-test.js b/canvas_modules/common-canvas/__tests__/common-properties/panels/tearsheet-test.js
index 60882d1031..b59a9cc6f9 100644
--- a/canvas_modules/common-canvas/__tests__/common-properties/panels/tearsheet-test.js
+++ b/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;
diff --git a/canvas_modules/common-canvas/package.json b/canvas_modules/common-canvas/package.json
index a386ea6334..1839269f44 100644
--- a/canvas_modules/common-canvas/package.json
+++ b/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",
diff --git a/canvas_modules/common-canvas/rollup.config.js b/canvas_modules/common-canvas/rollup.config.js
index 81486478b1..d36f10a76e 100644
--- a/canvas_modules/common-canvas/rollup.config.js
+++ b/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";
diff --git a/canvas_modules/common-canvas/src/common-properties/controls/datepicker-range/datepicker-range.jsx b/canvas_modules/common-canvas/src/common-properties/controls/datepicker-range/datepicker-range.jsx
index c384fd0677..1814248345 100644
--- a/canvas_modules/common-canvas/src/common-properties/controls/datepicker-range/datepicker-range.jsx
+++ b/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 (
);
return (
-
+
-
-
-
-
-
-
-
-
+
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+
);