Comprehensive fix for all open dependency PRs and React 18 compatibility

Co-authored-by: maximizeIT <8626039+maximizeIT@users.noreply.github.com>

Author: Copilot

samples/weather-forecast/package.json

@@ -17,71 +17,69 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@staffbase/widget-sdk": "^3.14.13",
-    "acorn": "^8.14.1",
-    "axios": "1.9.0",
+    "@staffbase/widget-sdk": "^3.15.0",
+    "acorn": "^8.15.0",
+    "axios": "1.12.0",
     "date-fns": "^2.23.0",
-    "dayjs": "1.11.13",
+    "dayjs": "1.11.18",
     "react": "^18.3.1",
     "react-cool-dimensions": "^3.0.1",
     "react-dom": "^18.3.1",
     "react-query": "3.39.3",
     "regenerator-runtime": "0.14.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.27.1",
+    "@babel/core": "^7.28.4",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/preset-env": "^7.27.1",
+    "@babel/preset-env": "^7.28.3",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^6.3.0",
     "@mui/material": "^6.3.0",
     "@mui/system": "^6.1.4",
-    "@rjsf/core": "5.24.10",
-    "@rjsf/mui": "5.24.10",
-    "@rjsf/utils": "5.24.10",
-    "@rjsf/validator-ajv8": "5.24.10",
+    "@rjsf/core": "5.24.13",
+    "@rjsf/mui": "5.24.13",
+    "@rjsf/utils": "5.24.13",
+    "@rjsf/validator-ajv8": "5.24.13",
     "@svgr/webpack": "8.1.0",
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^16.3.0",
-    "@testing-library/react-hooks": "7.0.2",
     "@types/copy-webpack-plugin": "^10.1.3",
     "@types/jest": "^29.5.14",
     "@types/json-schema": "^7.0.15",
-    "@types/node": "16.11.9",
+    "@types/node": "24.3.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
-    "@types/testing-library__jest-dom": "^5.14.9",
     "@types/webpack": "5.28.5",
     "@types/webpack-dev-server": "4.7.2",
     "@typescript-eslint/eslint-plugin": "5.62.0",
-    "@typescript-eslint/parser": "5.4.0",
+    "@typescript-eslint/parser": "5.62.0",
     "@ungap/custom-elements": "1.3.0",
     "babel-eslint": "10.1.0",
     "babel-loader": "^9.2.1",
     "copy-webpack-plugin": "^12.0.2",
-    "core-js": "3.42.0",
+    "core-js": "3.45.1",
     "eslint": "8.3.0",
-    "eslint-config-prettier": "8.3.0",
+    "eslint-config-prettier": "10.1.8",
     "file-loader": "^6.2.0",
     "jest": "27.1.0",
     "jest-json-schema": "^6.1.0",
-    "js-base64": "3.7.7",
+    "js-base64": "3.7.8",
     "minimal-polyfills": "2.2.3",
-    "prettier": "3.5.3",
+    "prettier": "3.6.2",
     "react-svg-loader": "^3.0.3",
-    "ts-loader": "^9.5.2",
+    "ts-loader": "^9.5.4",
     "ts-node": "10.9.2",
     "typescript": "4.5.2",
     "url-loader": "^4.1.1",
-    "webpack": "^5.99.7",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.2.1",
+    "webpack": "^5.101.3",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.2",
     "webpack-merge": "^6.0.1"
   },
   "resolutions": {

samples/weather-forecast/src/api/useCity.test.tsx

@@ -15,7 +15,7 @@ import axios from "axios";
 
 import React, { FunctionComponent } from "react";
 import { QueryClient, QueryClientProvider, setLogger } from "react-query";
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook, waitFor } from "@testing-library/react";
 
 import useCity from "./useCity";
 import { city } from "./mockData";
@@ -46,13 +46,13 @@ describe("useCity", () => {
 
   it("should return the coordinatse", async () => {
     mockAxios.mockResolvedValueOnce({ data: city });
-    const { result, waitFor } = renderHook(
+    const { result } = renderHook(
       () => useCity({ key: "foo", location: "Berlin", lang: "de" }),
       { wrapper }
     );
 
     await waitFor(() => {
-      return result.current.isSuccess;
+      expect(result.current.isSuccess).toBe(true);
     });
 
     expect(mockAxios).toHaveBeenCalledWith(endpoint, {

samples/weather-forecast/src/api/useWeather.test.tsx

@@ -15,7 +15,7 @@ import axios from "axios";
 
 import React, { FunctionComponent } from "react";
 import { QueryClient, QueryClientProvider, setLogger } from "react-query";
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook, waitFor } from "@testing-library/react";
 
 import useWeather from "./useWeather";
 import { weather } from "./mockData";
@@ -45,13 +45,13 @@ describe("useWeather", () => {
 
   it("should return weather data", async () => {
     mockAxios.mockResolvedValueOnce({ data: weather });
-    const { result, waitFor } = renderHook(
+    const { result } = renderHook(
       () => useWeather({ key: "foo", lat: 44, lon: 42 }),
       { wrapper }
     );
 
     await waitFor(() => {
-      return result.current.isSuccess;
+      expect(result.current.isSuccess).toBe(true);
     });
 
     expect(mockAxios).toHaveBeenCalledWith(endpoint, {
@@ -78,13 +78,13 @@ describe("useWeather", () => {
 
   it("should return an error, when the request fails", async () => {
     mockAxios.mockRejectedValue(new Error("XMLHTTPError"));
-    const { result, waitFor } = renderHook(
+    const { result } = renderHook(
       () => useWeather({ key: "foo", lat: 44, lon: 42 }),
       { wrapper }
     );
 
     await waitFor(() => {
-      return result.current.isError;
+      expect(result.current.isError).toBe(true);
     });
 
     expect(result.current.error).toEqual(new Error("XMLHTTPError"));
@@ -94,13 +94,13 @@ describe("useWeather", () => {
   it("should return an error, when the data processing goes wrong", async () => {
     const { daily, ...rest } = weather; // eslint-disable-line  @typescript-eslint/no-unused-vars
     mockAxios.mockResolvedValueOnce({ data: rest });
-    const { result, waitFor } = renderHook(
+    const { result } = renderHook(
       () => useWeather({ key: "foo", lat: 44, lon: 42 }),
       { wrapper }
     );
 
     await waitFor(() => {
-      return result.current.isError;
+      expect(result.current.isError).toBe(true);
     });
 
     expect(result.current.error).toEqual(

samples/weather-forecast/src/index.tsx

@@ -12,7 +12,7 @@
  */
 
 import React from "react";
-import { createRoot } from "react-dom/client";
+import { createRoot, Root } from "react-dom/client";
 
 import {
   BlockFactory,
@@ -45,6 +45,8 @@ const factory: BlockFactory = (BaseBlockClass, _widgetApi) => {
     extends BaseBlockClass
     implements BaseBlock
   {
+    private root: Root | null = null;
+
     public constructor() {
       super();
     }
@@ -58,7 +60,10 @@ const factory: BlockFactory = (BaseBlockClass, _widgetApi) => {
     }
 
     public renderBlock(container: HTMLElement): void {
-      createRoot(container).render(
+      if (!this.root) {
+        this.root = createRoot(container);
+      }
+      this.root.render(
         <WeatherForecast {...this.props} />
       );
     }